/* ==========================================================================
   Anna Lê Quang — feuille de style unique
   Voir DESIGN-SYSTEM.md. Tous les contrastes sont calculés et vérifiés WCAG AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — conservée du site actuel */
  --ink:        #262626;
  --night:      #6b0936;
  --fire:       #e85914;  /* décor et grand texte UNIQUEMENT — 3,49:1 sur crème */
  --fire-deep:  #b0430f;  /* variante accessible — 5,60:1 sur crème */
  --cream:      #fffcf2;
  --ivory:      #f5efda;
  --beige:      #e0d7c5;

  /* Mode sombre */
  --night-deep:    #1a0710;
  --night-surface: #2b0d1b;

  /* Rôles sémantiques — bascule en mode sombre plus bas */
  --bg:          var(--cream);
  --surface:     var(--ivory);
  --border:      var(--beige);
  --text:        var(--ink);
  --text-muted:  #5c5c5c;          /* 6,51:1 sur crème */
  --brand:       var(--night);
  --accent:      var(--fire-deep);
  --accent-loud: var(--fire);       /* grand texte et filets seulement */
  --on-brand:    #ffffff;           /* 12,23:1 sur bordeaux */

  /* Typographie */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 8vw, 6.5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;

  /* Espacement — base 4px */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 2rem;     --sp-6: 2.5rem;  --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(3.5rem, 9vw, 7.5rem);
  --container: 68rem;
  --measure:   34rem;

  --radius:    2px;
  --radius-lg: 4px;

  --dur: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

  --z-nav: 100;
  --z-overlay: 200;

  color-scheme: light;
}

/* Mode sombre — thématiquement juste : « la nuit sera feu ».
   C'est le seul contexte où --fire devient lisible en texte courant (5,43:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         var(--night-deep);
    --surface:    var(--night-surface);
    --border:     #3d1a28;
    --text:       var(--cream);
    --text-muted: #c9bfb2;          /* 10,70:1 sur nuit */
    --brand:      var(--fire);
    --accent:     var(--fire);       /* 5,43:1 — accessible ici */
    --on-brand:   var(--night-deep);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:         var(--night-deep);
  --surface:    var(--night-surface);
  --border:     #3d1a28;
  --text:       var(--cream);
  --text-muted: #c9bfb2;
  --brand:      var(--fire);
  --accent:     var(--fire);
  --on-brand:   var(--night-deep);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Pied de page collant : la page occupe au moins toute la hauteur de l'écran
     et le contenu principal pousse le pied vers le bas, même sur une page courte. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

#main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent); }

img, video { max-width: 100%; height: auto; display: block; }

/* Focus — jamais supprimé, toujours visible */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--fire); color: #fff; }

/* Lien d'évitement — premier élément focusable de chaque page */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 48rem) { .container { padding-inline: var(--sp-7); } }

.section { padding-block: clamp(2rem, 5vw, 3rem); }
.section--tight { padding-block: clamp(1.25rem, 3.5vw, 2rem); }
.section--surface { background: var(--surface); }

.measure { max-width: var(--measure); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-7); }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   4. Éléments typographiques
   -------------------------------------------------------------------------- */

.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
}

.muted { color: var(--text-muted); }

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--sp-8);
}

/* Filet orange court — signature visuelle, décor uniquement */
.rule--fire {
  border: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--accent-loud);
  margin: 0 0 var(--sp-5);
}

.section-title { margin-bottom: var(--sp-8); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* zone tactile */
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

/* Une seule .btn--primary par page. Bordeaux, pas orange :
   blanc sur --fire échoue à 3,58:1, blanc sur --night passe à 12,23:1. */
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn--primary:hover { background: var(--fire-deep); color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn--secondary:hover {
  background: var(--text);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  padding-inline: 0;
}
.btn--ghost::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.btn--ghost:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. En-tête et navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo:hover { color: var(--accent); }

.nav { display: flex; align-items: center; gap: var(--sp-5); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  background: var(--accent-loud);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Sélecteur de langue */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-switch a,
.lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 44px;
  text-decoration: none;
}
.lang-switch [aria-current="true"] { color: var(--accent); }
.lang-switch .sep { min-width: 0; color: var(--border); }

/* Bascule de thème */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Bouton menu mobile */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 61.9375rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-5);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { min-height: 52px; font-size: 1.0625rem; }
  .nav__link::after { bottom: 14px; }
  .nav__actions {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3rem); }

/* Héros à deux colonnes : le texte respire à gauche, le portrait tient la droite */
.hero__inner { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

.hero__media {
  position: relative;
  margin: 0;
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;   /* garde le visage dans le cadre */
  border-radius: var(--radius-lg);
}
/* Filet de feu débordant l'angle bas-droit du cadre, signature discrète */
.hero__media::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 45%;
  height: 3px;
  background: var(--accent-loud);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
}

.hero__roles {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.hero__lead { max-width: var(--measure); margin-bottom: var(--sp-7); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--accent-loud); }
.card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.card__meta {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.card__body { flex: 1; margin-bottom: var(--sp-4); }
.card__body > :last-child { margin-bottom: 0; }

/* Carte entièrement cliquable — le lien s'étend sur toute la carte,
   sans casser la sémantique ni la navigation clavier */
.card--link { position: relative; }
.card--link a::before { content: ""; position: absolute; inset: 0; }
.card--link:hover { transform: translateY(-2px); }
.card--link:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   8b. Médias — figures, portraits, vidéo
   -------------------------------------------------------------------------- */

.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface);   /* réserve l'espace pendant le chargement */
}
.figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.figure figcaption .credit {
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Ratios explicites : aucun décalage de mise en page au chargement.
   object-position remonté à 35 % : sur un portrait, le visage est dans le haut
   du cadre, un recadrage centré lui coupe la tête. */
.figure--portrait img { aspect-ratio: 2 / 3;  object-fit: cover; object-position: 50% 35%; }
.figure--landscape img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.figure--square img    { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 35%; }

/* Duo de portraits, décalés — respiration éditoriale */
.portrait-duo { display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) {
  .portrait-duo { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .portrait-duo > :nth-child(2) { margin-top: var(--sp-8); }
}

/* Bandeau média pleine largeur.
   Aucun recadrage : la photo garde le cadrage voulu par le ou la photographe.
   Un bandeau 21/9 imposé coupait les sujets à la taille. */
.media-band img { width: 100%; height: auto; }

/* Façade YouTube : rien n'est chargé depuis Google avant le clic.
   Gain de performance et pas de traceur tiers sans action de l'internaute (RGPD). */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--night-deep);
}
.video img, .video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-5);
  background: linear-gradient(to top, rgb(26 7 16 / 0.75), rgb(26 7 16 / 0.25));
  border: 0;
  color: var(--cream);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.video__play:hover { background: rgb(26 7 16 / 0.55); }
.video__play svg {
  width: 64px; height: 64px;
  color: var(--fire);
  transition: transform var(--dur) var(--ease-out);
}
.video__play:hover svg { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   8c. Liens externes
   -------------------------------------------------------------------------- */

/* Flèche sortante après un lien vers un autre site. Purement décorative :
   l'information réelle est portée par le texte du lien. */
.link-ext::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.85em;
  opacity: 0.7;
}

.card__source {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}
.card__source a { color: var(--accent); font-weight: 600; text-decoration: none; }
.card__source a:hover { text-decoration: underline; }

/* Liens sociaux du pied de page — empilés comme les autres colonnes */
.social { list-style: none; margin: 0; padding: 0; }
.social li + li { margin-top: var(--sp-2); }
.social a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; }
.social svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------------------
   9. Événements
   -------------------------------------------------------------------------- */

.event {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  align-items: start;
}
.event:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 48rem) {
  .event { grid-template-columns: 12rem 1fr auto; gap: var(--sp-6); align-items: center; }
}

.event__date {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
}
.event__date .day {
  display: block;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent-loud);   /* grand texte : contraste suffisant */
}
.event__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.event__meta { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }

.event--past { opacity: 0.6; }

/* --------------------------------------------------------------------------
   9b. Formation — frise chronologique
   -------------------------------------------------------------------------- */

.timeline { margin: 0; padding: 0; list-style: none; }

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  padding: 0 0 var(--sp-6) var(--sp-4);
  border-left: 1px solid var(--border);
}
.timeline__item:last-child { padding-bottom: 0; }

/* Point sur la frise, centré sur le trait et aligné sur la première ligne de texte */
.timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-loud);
}

@media (min-width: 40rem) {
  /* Colonne d'années au plus juste : l'œil relie le point, l'année et le titre
     sans traverser un vide. */
  .timeline__item { grid-template-columns: 5.5rem 1fr; }
}

.timeline__year {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;   /* les années s'alignent */
}
.timeline__title { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.timeline__place { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   10. Prestations
   -------------------------------------------------------------------------- */

.offer { display: flex; flex-direction: column; height: 100%; }
.offer__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: var(--sp-4);
}
.offer__price small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-muted);
}
.offer__specs {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--fs-small);
}
.offer__specs li {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-top: 1px solid var(--border);
}
.offer__specs dt, .offer__specs .k {
  flex: 0 0 8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. Article (chroniques & poèmes)
   -------------------------------------------------------------------------- */

.article { padding-block: clamp(2rem, 5vw, 3rem); }
/* Colonne de lecture de l'article : centrée et un peu plus large que la mesure
   par défaut, pour que le texte et l'image respirent au lieu d'être tassés à
   gauche. */
.article > .container { max-width: 44rem; }
.article__header { margin-bottom: var(--sp-8); }
.article__title { font-size: var(--fs-h1); margin-bottom: var(--sp-4); }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prose { max-width: var(--measure); }
/* Dans un article, la colonne de lecture est déjà bornée par le conteneur :
   le texte remplit donc toute sa largeur (44rem) plutôt que de rester à 34rem. */
.article .prose { max-width: none; }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-7); }
.prose > :first-child { margin-top: 0; }

.prose blockquote {
  margin: var(--sp-7) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent-loud);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.5;
}
.prose blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--text-muted);
}

/* Poème — la structure du texte est du contenu, pas de la mise en forme */
.poem { margin: var(--sp-7) 0; }
.poem__part {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.poem__verse {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.65;
  margin: 0 0 var(--sp-6);
  white-space: pre-line;   /* préserve les retours à la ligne du vers */
}

.footnotes {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.footnotes ol { padding-left: var(--sp-4); }
.footnotes li + li { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
}
@media (min-width: 64rem) {
  /* 4 colonnes : identité, navigation, contact, ailleurs */
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.1fr 1fr; }
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--sp-2); }
.site-footer a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. Bandeau de démo — à retirer en production
   -------------------------------------------------------------------------- */

.demo-banner {
  padding: var(--sp-3) var(--sp-5);
  background: var(--night);
  color: #fff;
  font-size: var(--fs-label);
  text-align: center;
  letter-spacing: 0.02em;
}
.demo-banner strong { color: var(--fire); }

/* --------------------------------------------------------------------------
   14. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  }
  .reveal[data-visible="true"] { opacity: 1; transform: none; }
  /* Échelonnement : 40ms par élément, 6 maximum */
  .reveal:nth-child(2) { transition-delay: 40ms; }
  .reveal:nth-child(3) { transition-delay: 80ms; }
  .reveal:nth-child(4) { transition-delay: 120ms; }
  .reveal:nth-child(5) { transition-delay: 160ms; }
  .reveal:nth-child(6) { transition-delay: 200ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. Impression — les dossiers de diffusion s'impriment
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .demo-banner, .btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose, .measure { max-width: none; }
}

/* --------------------------------------------------------------------------
   17. Pont Gutenberg
   L'éditeur de blocs enrobe le contenu dans ses propres classes. Cette section
   les raccorde au vocabulaire du thème, pour que ce qui est composé dans
   l'administration rende exactement comme les pages écrites à la main.
   -------------------------------------------------------------------------- */

/* Les blocs de groupe ne doivent apporter aucune marge propre : la mise en
   page vient de .section, .container et .grid. */
.wp-block-group { margin-block: 0; }

/* Titres. */
.wp-block-heading { margin-top: 0; }

/* Images. Le bloc image de WordPress porte déjà un <figure>, on lui applique
   nos cadres au lieu d'en empiler un second. */
.wp-block-image.figure,
.wp-block-image { margin: 0; }
.wp-block-image.figure img { width: 100%; border-radius: var(--radius-lg); }
.wp-block-image figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: left;
}

/* Filet de section. */
.wp-block-separator.is-style-fire,
.wp-block-separator.rule--fire {
  border: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--accent-loud);
  margin: 0 0 var(--sp-5);
  opacity: 1;
}

/* Boutons. WordPress pose la classe de style sur l'enveloppe, jamais sur le
   lien : on redescend donc l'apparence sur .wp-block-button__link. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.wp-block-button { margin: 0; }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--brand);
  color: var(--on-brand);
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button__link:hover { background: var(--fire-deep); color: #fff; }

.wp-block-button.is-style-secondaire .wp-block-button__link {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.wp-block-button.is-style-secondaire .wp-block-button__link:hover {
  background: var(--text);
  color: var(--bg);
}

.wp-block-button.is-style-discret .wp-block-button__link {
  background: transparent;
  color: var(--accent);
  padding-inline: 0;
  min-height: 0;
  border-color: transparent;
}
.wp-block-button.is-style-discret .wp-block-button__link::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.wp-block-button.is-style-discret .wp-block-button__link:hover {
  background: transparent;
  color: var(--accent);
}
.wp-block-button.is-style-discret .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* Citation. */
.wp-block-quote { margin: var(--sp-6) 0; }
.wp-block-quote cite { display: block; }

/* Listes du pied de page composées en widgets. */
.site-footer .wp-block-list { list-style: none; margin: 0; padding: 0; }

/* Dans l'éditeur seulement : rendre visibles les blocs sans fond propre pour
   que la structure reste lisible pendant la composition. */
.editor-styles-wrapper .section { padding-block: var(--sp-7); }
.editor-styles-wrapper .container { max-width: none; }

/* Navigation entre deux articles */
.prose__nav a {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
}
.prose__nav a:hover { text-decoration: underline; }
.prose__nav-next { margin-left: auto; text-align: right; }
.prose__nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

/* Pied de page : le menu réutilise le menu principal, mais en colonne (pas en
   ligne comme l'en-tête) et sans la barre orange de « page courante ». */
.site-footer .nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.site-footer .nav__link {
  min-height: 0;
  padding: var(--sp-1) 0;
}
.site-footer .nav__link::after { display: none; }
.site-footer .nav__link[aria-current="page"] { font-weight: inherit; }

/* --------------------------------------------------------------------------
   Menu de contact e-mail (copier / Gmail / Outlook / app mail)
   -------------------------------------------------------------------------- */
.email-menu { position: relative; }
.email-menu.is-copied::after {
  content: "Copié";
  position: absolute;
  left: 100%;
  margin-left: var(--sp-3);
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--accent);
}
.email-menu__pop {
  position: fixed;
  z-index: var(--z-overlay);
  min-width: 12rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
}
.email-menu__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.email-menu__item:hover,
.email-menu__item:focus-visible { background: var(--surface); color: var(--accent); }