/*
Theme Name: Feature
Theme URI: https://wordpress.com/themes/feature/
Description: Feature is a magazine theme focused on sizable typography and imagery to grow your blog posts, reviews, artwork, and news.
Version: 1.0.1
Author: Automattic
Author URI: https://automattic.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feature
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/features/42794
 */
body > div.wp-site-blocks > div > div:nth-child(1) > div > div {
  text-transform: uppercase !important;
}

/* ======= TITRE DE SITE — STYLE MAISON DE LUXE ======= */
body > div.wp-site-blocks > div > div:nth-child(1) > div > div > div > div > h1{
	font-family: "Marcellus", "Lustria", serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.06em;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #111;
  text-align: center;
  line-height: 1.1;
  margin: 0;
}

/* ===== Sylvain Mairet — Timeline minimaliste ===== */
:root {
  --sm-accent: #111;            /* ligne & points */
  --sm-card-bg: #fff;
  --sm-card-fg: #111;
  --sm-muted: #6b7280;          /* gris subtile */
  --sm-radius: 18px;
  --sm-shadow: 0 6px 20px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sm-accent: #d1d5db;
    --sm-card-bg: #0b0b0c;
    --sm-card-fg: #e5e7eb;
    --sm-muted: #9ca3af;
    --sm-shadow: 0 6px 24px rgba(0,0,0,.35);
  }
}

.sm-tl-title {
  margin: 0 0 1.5rem 0;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sm-accent);
}

/* Conteneur principal */
.sm-tl {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
  position: relative;
  display: grid;
  gap: 2.4rem;
}

/* Ligne verticale (mobile) / centrale (desktop) */
.sm-tl::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 12px;         /* mobile: 12px depuis la gauche */
  width: 2px;
  background: linear-gradient(to bottom, transparent 0, var(--sm-accent) 12%, var(--sm-accent) 88%, transparent 100%);
  opacity: .25;
}

/* Item */
.sm-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr; /* année + carte */
  align-items: start;
  gap: 1rem;
}

/* Pastille sur la ligne */
.sm-tl-item::before {
  content: "";
  position: absolute;
  left: 6px;                    /* centré sur la ligne (12px) */
  top: .4rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sm-card-bg);
  box-shadow: 0 0 0 2px var(--sm-accent);
}

/* Année */
.sm-tl-year {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sm-accent);
  letter-spacing: .02em;
  line-height: 1.2;
	margin-left: 30px;
}

/* Carte */
.sm-tl-card {
  background: var(--sm-card-bg);
  color: var(--sm-card-fg);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  .sm-tl-card { border-color: rgba(255,255,255,.06); }
}

.sm-tl-card h3 {
  margin: 0 0 .25rem 0;
  font-size: 1rem;
  letter-spacing: .02em;
}
.sm-tl-card p {
  margin: 0;
  color: var(--sm-muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* ====== Alternance élégante en desktop ====== */
@media (min-width: 860px) {
  .sm-tl {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .sm-tl::before {
    left: 50%;
    transform: translateX(-1px);
  }
  .sm-tl-item {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .sm-tl-item:nth-child(odd) .sm-tl-year { grid-column: 1; text-align: right; padding-right: 2rem; }
  .sm-tl-item:nth-child(odd) .sm-tl-card { grid-column: 2; margin-left: 2rem; }
  .sm-tl-item:nth-child(even) .sm-tl-year { grid-column: 2; text-align: left; padding-left: 2rem; order: 2; }
  .sm-tl-item:nth-child(even) .sm-tl-card { grid-column: 1; margin-right: 2rem; order: 1; }

  .sm-tl-item::before {
    left: calc(50% - 7px); /* centre la pastille */
  }
}



.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/features/42319
 */
a {
	text-decoration-thickness: .0625em !important;
	text-underline-offset: .15em;
}