/* =========================================================
   Beauté Digitale — base
   Jetons, reset, typographie, boutons, en-tête, pied de page, a11y

   Charte : les deux couleurs du logo portent toute la page.
   Bleu nuit #212842 (fonds sombres, texte sur clair) et rose #E4B5B1
   (traits, halos, aplats). Le rose est CLAIR : il ne porte jamais de
   texte blanc — le texte posé dessus est le bleu nuit (7.98:1).
   ========================================================= */

:root {
  /* --- Marque --- */
  --navy:       #212842;
  --rose:       #E4B5B1;
  --rose-soft:  #F5E3E1;
  --rose-deep:  #A35D56;  /* seul rose qui porte du blanc (4.93:1) */

  /* --- Fonds sombres --- */
  --ink:    #12172A;   /* fond principal */
  --ink-2:  #171D34;   /* section secondaire */
  --ink-3:  #1E2542;   /* surfaces : cartes, champs */

  /* --- Fonds clairs --- */
  --paper:    #F8F4F2;
  --paper-2:  #F0E8E5;

  /* --- Textes sur fond sombre --- */
  --text:        #F2EFF4;
  --text-muted:  #B0B6CE;
  --text-faint:  #8A90AC;

  /* --- Textes sur fond clair --- */
  --text-ink:        #212842;
  --text-ink-muted:  #5B6079;

  /* --- Lignes --- */
  --line-dark:  rgba(228, 181, 177, .18);
  --line-light: rgba(33, 40, 66, .14);

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

  --fs-hero:  clamp(2.6rem, 6.6vw, 5.9rem);
  --fs-h2:    clamp(1.95rem, 4.2vw, 3.6rem);
  --fs-h3:    clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:  clamp(1.075rem, 1.35vw, 1.32rem);
  --fs-body:  clamp(1rem, 1.02vw, 1.075rem);
  --fs-small: .875rem;

  /* --- Rythme --- */
  --gutter:    clamp(1.25rem, 5vw, 4.5rem);
  /* Largeur de page. Elle ne dicte PAS le nombre de colonnes : les grilles qui
     ne doivent pas s'étaler (modèles, fonctionnalités) posent leur propre
     plafond — sinon les cartes se réduiraient à des vignettes. */
  --wrap:      100rem;
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius:    16px;
  --radius-sm: 10px;

  /* --- Profondeur --- */
  --z-content: 2;
  --z-header:  70;
  --z-menu:    90;
  --z-load:    120;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

/* Pas de `scroll-behavior: smooth` : ScrollTrigger remet le défilement à zéro
   le temps de mesurer la page, et le navigateur animerait ce retour — les
   mesures seraient prises en plein vol. Le défilement doux des ancres est
   piloté en JS, il n'affecte que les clics. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
  /* En permanence : le verrou du menu (overflow:hidden) supprimerait sinon la
     barre de défilement et décalerait toute la page d'une quinzaine de pixels. */
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------------------------------------
   Barre de défilement
   Elle est visible en permanence (`overflow-y: scroll` ci-dessus) : autant
   qu'elle soit à la charte plutôt qu'aux couleurs du système.

   Deux écritures, jamais les deux à la fois : Chromium ignore
   `::-webkit-scrollbar` dès que `scrollbar-color` ou `scrollbar-width` est
   déclaré. Les propriétés standard sont donc réservées aux moteurs qui ne
   connaissent pas le pseudo-élément (Firefox), sans quoi on perdrait le
   dessin arrondi partout.
   --------------------------------------------------------- */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--rose-deep) transparent;
  }
}

::-webkit-scrollbar { width: 12px; height: 12px; }

/* Rail transparent : il laisse voir le fond de page au lieu d'imposer sa
   propre couleur. La gouttière étant hors de la zone de contenu, ce fond est
   celui du `body` — donc le bleu nuit, partout, y compris au droit des
   sections claires. Aucune barre native ne peut suivre la section survolée. */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
  /* `background-color`, pas le raccourci `background` : celui-ci remettrait
     `background-clip` à sa valeur par défaut à chaque état. */
  background-color: var(--rose-deep);
  /* Bordure TRANSPARENTE + `background-clip: padding-box` : le pouce paraît
     plus fin sans réduire la surface cliquable, et surtout sans peindre un
     liseré de la couleur du fond — ce qu'une bordure opaque ferait, et qui se
     verrait comme un halo dès que le rail est transparent. */
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background-color .25s var(--ease-out);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--rose); }

/* Champs de saisie : même dessin, à l'échelle du composant. */
textarea::-webkit-scrollbar { width: 9px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb {
  background: rgba(228, 181, 177, .35);
  border: 2px solid transparent;
  background-clip: padding-box;
}
textarea::-webkit-scrollbar-thumb:hover { background: rgba(228, 181, 177, .6); background-clip: padding-box; }

/* Feuille officielle de Lenis, recopiée : 300 octets ne valent pas une
   requête bloquante de plus. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.display em { font-style: italic; font-weight: 400; }

/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--rose);
  color: var(--navy);
  font-weight: 600;
  border-radius: 8px;
  transform: translateY(-180%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   Mise en page
   --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--ink   { background: var(--ink); }
.section--ink2  { background: var(--ink-2); }
.section--paper { background: var(--paper); color: var(--text-ink); }
/* Deux sections claires qui se suivent : la seconde prend le crème plus
   soutenu de la charte. Le modificateur ne touche QUE le fond — toutes les
   règles écrites pour `.section--paper` continuent de s'appliquer. */
.section--paper-alt { background: var(--paper-2); }

.section-label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.section--paper .section-label { color: var(--text-ink-muted); }
.section-label span {
  padding: .2em .55em;
  background: var(--rose);
  color: var(--navy);
  border-radius: 4px;
  letter-spacing: .06em;
}

.section-title {
  font-size: var(--fs-h2);
  max-width: 22ch;
}
.section-title em { color: var(--rose); }
.section--paper .section-title em { color: var(--rose-deep); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 6px rgba(228, 181, 177, .14);
}

.lede {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 52ch;
}
.section--paper .lede { color: var(--text-ink-muted); }
.lede--wide { max-width: 62ch; }

/* ---------------------------------------------------------
   Boutons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .975rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
  will-change: transform;
}
.btn--sm { padding: .62rem 1.1rem; font-size: .9rem; }

.btn--rose {
  background: var(--rose);
  color: var(--navy);           /* jamais de blanc sur ce rose */
}
.btn--rose:hover { background: var(--rose-soft); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-dark);
}
.btn--ghost:hover { border-color: var(--rose); color: var(--rose); }

.section--paper .btn--ghost { color: var(--text-ink); border-color: var(--line-light); }
.section--paper .btn--ghost:hover { border-color: var(--rose-deep); color: var(--rose-deep); }

.btn__arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-quiet {
  font-size: .925rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.link-quiet:hover { color: var(--rose); }

/* ---------------------------------------------------------
   Voile d'accueil
   --------------------------------------------------------- */
/* Le voile porte le bleu nuit SECONDAIRE, et non celui du hero : un rideau de
   la même couleur exacte que la page qu'il découvre monte sans qu'on le voie
   — il n'y a aucun bord à suivre. L'écart reste discret (#12172A → #171D34),
   c'est le filet rose du bas qui rend le mouvement lisible : une ligne qui
   remonte et sort par le haut. */
.pageload {
  position: fixed;
  inset: 0;
  z-index: var(--z-load);
  display: grid;
  place-items: center;
  background: var(--ink-2);
}
.pageload::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(228, 181, 177, 0) 0%,
    rgba(228, 181, 177, .75) 22%,
    rgba(228, 181, 177, .75) 78%,
    rgba(228, 181, 177, 0) 100%);
}
.pageload__stage { display: grid; justify-items: center; gap: 1.4rem; }
/* Le logo « invert » est le seul dessiné pour un fond sombre : le logo
   principal porte du bleu nuit, invisible ici. */
.pageload__mark { width: auto; height: clamp(30px, 4vw, 40px); }
.pageload__bar {
  display: block;
  width: 140px; height: 2px;
  background: rgba(228, 181, 177, .18);
  overflow: hidden;
}
.pageload__bar i {
  display: block;
  width: 100%; height: 100%;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left center;
}
/* Sans JS, le voile ne doit jamais masquer la page. */
html:not(.js) .pageload { display: none; }

/* ---------------------------------------------------------
   En-tête
   --------------------------------------------------------- */
/* En-tête franchement fixe : il ne se masque pas, ne se déplace pas et ne
   porte aucune transition de position. Une bascule masquer/afficher au
   défilement donnait l'impression d'un menu qui « suit en retard ». */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.header.is-stuck {
  background: rgba(18, 23, 42, .62);
  box-shadow: 0 1px 0 var(--line-dark);
}

/* Flou du fond, porté par un PSEUDO-ÉLÉMENT et jamais par l'en-tête lui-même.
   Le panneau plein écran du menu est un descendant de `.header` : un
   `backdrop-filter` posé sur l'en-tête en ferait un bloc conteneur, et ce
   panneau `position: fixed` resterait enfermé dans la hauteur de la barre.
   Un pseudo-élément est un frère du menu, pas son ancêtre : il floute sans
   rien piéger. */
.header.is-stuck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}
/* Menu ouvert : le panneau est opaque, il n'y a plus rien à flouter derrière
   — et le voile masquerait le dessous du panneau. */
html.menu-open .header.is-stuck::before { display: none; }
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(.85rem, 1.6vw, 1.15rem) var(--gutter);
}

.brand { flex: 0 0 auto; }
/* Le logo entre grand — 60 px — puis se replie dès qu'on quitte le haut de la
   page, là où l'en-tête gagne son fond : il ne prend plus alors que la place
   d'une barre de navigation. La hauteur est animée sur le logo seul ;
   l'en-tête, qui n'a pas de hauteur imposée, suit le mouvement.
   Sous 900 px, le grand format cohabiterait mal avec le bouton du menu :
   la borne basse du `clamp` s'en charge. */
.brand__logo {
  width: auto;
  height: clamp(34px, 5.2vw, 60px);
  transition: height .38s var(--ease-out);
}
.header.is-stuck .brand__logo { height: clamp(26px, 3vw, 34px); }
@media (prefers-reduced-motion: reduce) {
  .brand__logo { transition: none; }
}

.nav { margin-left: auto; }
/* `nowrap` partout : le menu ne doit jamais passer à la ligne. Sous 1100px il
   bascule de toute façon en panneau plein écran. */
.nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(.9rem, 1.9vw, 1.8rem); }
.nav__cta { display: none; }
.nav__link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover, .nav__link.is-current { color: var(--text); }
.nav__link:hover::after, .nav__link.is-current::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}

/* Le panneau plein écran est un ENFANT de l'en-tête : monter le z-index de
   l'en-tête ne suffit donc pas, les deux partagent le même contexte
   d'empilement. C'est le bouton lui-même (et le logo) qui doit passer au-dessus
   du panneau, sinon la croix de fermeture est peinte dessous — invisible. */
.brand { position: relative; z-index: calc(var(--z-menu) + 2); }

.burger {
  display: none;
  position: relative;
  z-index: calc(var(--z-menu) + 2);
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 50%; width: 18px; height: 1.5px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform .3s var(--ease-out), opacity .2s linear;
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -3px) rotate(-45deg); }

/* --- Menu plein écran --- */
@media (max-width: 1099px) {
  .burger { display: block; }
  .header__demo, .link-quiet { display: none; }
  /* Le panneau étant sorti du flux, plus rien ne pousse le bouton à droite :
     c'est le bloc d'actions qui prend la place restante. */
  .header__actions { margin-left: auto; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    place-items: center;
    margin: 0;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease-out), visibility .35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }

  .nav__list {
    flex-direction: column;
    gap: clamp(1rem, 3.5vw, 1.8rem);
    text-align: center;
  }
  .nav__cta { display: block; }
  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 7vw, 2.9rem);
    font-weight: 600;
    color: var(--text);
    /* La cascade d'entrée est indexée en CSS : aucune minuterie à annuler. */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; }
  .nav.is-open li:nth-child(1) .nav__link { transition-delay: .08s; }
  .nav.is-open li:nth-child(2) .nav__link { transition-delay: .13s; }
  .nav.is-open li:nth-child(3) .nav__link { transition-delay: .18s; }
  .nav.is-open li:nth-child(4) .nav__link { transition-delay: .23s; }
  .nav.is-open li:nth-child(5) .nav__link { transition-delay: .28s; }
  .nav.is-open li:nth-child(6) .nav__link { transition-delay: .33s; }

  /* --- Rollover : un aplat rose balaye le lien de gauche à droite ---
     Le trait fin du menu de bureau n'a pas de sens ici : au doigt, il faut
     une surface. L'aplat vit DERRIÈRE le texte (z-index négatif dans le
     contexte isolé du lien), qui bascule au bleu nuit — jamais de blanc sur
     ce rose. La couleur change avec un léger retard pour laisser l'aplat
     arriver sous le mot avant qu'il ne s'assombrisse. */
  .nav__link::after { display: none; }
  .nav__link {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: .06em .38em;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
                color .3s var(--ease-out) .06s;
  }
  .nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--rose);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--ease-out);
  }
  .nav__link:hover::before,
  .nav__link:focus-visible::before,
  .nav__link:active::before,
  .nav__link.is-tapped::before { transform: scaleX(1); }

  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link:active,
  .nav__link.is-tapped { color: var(--navy); }

  /* Le lien touché garde son aplat le temps que le panneau se referme :
     sans cela, l'effet disparaît avant d'avoir été vu. */
  .nav__link.is-tapped::before { transition-duration: .3s; }
}

/* Menu ouvert : l'en-tête repasse AU-DESSUS du panneau plein écran. Sans cela
   le panneau (z-index 90) recouvrait la barre (70) : le bouton devenu croix
   était bien là, mais caché derrière — plus rien pour refermer au doigt. */
html.menu-open .header {
  z-index: calc(var(--z-menu) + 1);
  background: transparent;
  box-shadow: none;
}

/* Verrou de défilement pendant que le menu est ouvert.
   Il est posé sur `body`, pas sur `html` : `html` garde son
   `overflow-y: scroll`, donc la barre de défilement reste affichée et la
   page ne se décale pas d'une quinzaine de pixels à l'ouverture. */
html.menu-open body { overflow: hidden; height: 100vh; }

/* ---------------------------------------------------------
   Pied de page
   --------------------------------------------------------- */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}
/* Filet rose dégradé : la couture entre le corps de page et le pied. */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr .85fr .85fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.footer__brand img { height: 32px; width: auto; }
.footer__motto {
  margin-top: 1.1rem;
  color: var(--rose);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
.footer__pitch {
  margin-top: .9rem;
  max-width: 34ch;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.footer__title {
  margin-bottom: 1.1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__col ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
/* Volontairement limité aux liens de LISTE : écrit `.footer__col a`, la règle
   l'emportait sur `.btn--rose` (spécificité supérieure) et repeignait le texte
   du bouton en clair sur le rose — 1,11:1, illisible. */
.footer__col ul a {
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .95rem;
  transition: color .25s var(--ease-out), transform .25s var(--ease-out);
}
.footer__col ul a:hover { color: var(--rose); transform: translateX(3px); }

.footer__note {
  margin-bottom: 1rem;
  max-width: 30ch;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-faint);
}
.footer__mail {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--rose) !important;
  text-decoration: none;
  word-break: break-word;
}
.footer__mail:hover { text-decoration: underline; }
.footer__col--contact .btn:hover { transform: none; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.footer__bottom strong { color: var(--text-muted); font-weight: 600; }
.footer__credit a { color: var(--rose); text-decoration: none; }
.footer__credit a:hover { text-decoration: underline; }

/* Retour en haut : le seul lien du bas qui fait quelque chose, il se voit. */
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.footer__top i { font-style: normal; transition: transform .3s var(--ease-out); }
.footer__top:hover { border-color: var(--rose); color: var(--rose); }
.footer__top:hover i { transform: translateY(-3px); }

/* Pied de page réduit (mentions légales) : pas de colonnes, donc pas de
   respiration à réserver au-dessus. */
.footer--slim { padding-top: 0; }
.footer--slim .footer__bottom { margin-top: 0; border-top: 0; }

@media (max-width: 980px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}

/* ---------------------------------------------------------
   États de départ des animations
   Posés uniquement quand `anim-ready` est présent (script du <head>) :
   sans JS ou en mouvement réduit, rien n'est jamais invisible.
   --------------------------------------------------------- */
.anim-ready [data-reveal] { opacity: 0; transform: translateY(26px); }
/* La photo du hero est rognée à zéro avant son balayage. Comme le reste, cet
   état n'existe que sous `anim-ready` : sans JS, la photo est simplement là. */
.anim-ready .hero__media { clip-path: inset(0 100% 0 0); }
.anim-ready [data-split] { opacity: 1; }
/* Le masque déborde volontairement du mot : le `padding` agrandit la boîte de
   rognage, la marge négative annule son effet sur la mise en page. Sans cela,
   l'italique de Fraunces et les jambages se font couper — c'est ce qui rognait
   la dernière lettre des titres. Le décalage de départ passe à 125 % pour que
   le mot reste hors de ce masque agrandi avant son entrée. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .05em .16em .2em .02em;
  margin: -.05em -.16em -.2em -.02em;
}
.word__in { display: inline-block; will-change: transform; }
.anim-ready [data-split] .word__in { transform: translateY(125%); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; }
}