/* =========================================================
   Beauté Digitale — sections
   Hero, plateformes, constat, méthode, synchronisation,
   modèles, fonctionnalités, agences, contact
   ========================================================= */

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Plein écran. `svh` plutôt que `vh` : sur téléphone, `vh` se calcule sur la
     fenêtre barre d'URL RÉTRACTÉE, si bien qu'au premier affichage le bas du
     hero passe sous la barre — et que la page sursaute quand elle se rétracte.
     `vh` reste en repli pour les navigateurs qui ignorent `svh`. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;     /* le contenu au centre, l'invite en bas */
  padding-top: clamp(8rem, 16vw, 12rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  background: var(--ink);
}

/* Photo de fond, plein cadre. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}
/* Voile bleu nuit UNI — jamais un dégradé, il finirait par se voir sur la
   photo. Sa densité est mesurée sur le pixel le plus clair de la zone que le
   texte occupe, pour le texte le plus faible de la page (le chapô atténué).
   La photo étant sombre à gauche, là où se pose le titre, un demi-voile
   suffit en grand écran : 4,8:1. En portrait la colonne unique traverse
   toute l'image, chapeau blanc compris — il faut alors 84 % pour 5,4:1. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 23, 42, .84);
}

.hero__inner { position: relative; z-index: var(--z-content); align-self: center; }

/* --- Titre accompagné du symbole --- */
.title-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Invite à défiler ---
   Un mot et un trait que la couleur parcourt d'un bord à l'autre, puis
   revient. Pas de flèche qui rebondit : le mouvement suffit à dire qu'il y a
   une suite, sans faire clignoter un pictogramme dans le coin de l'œil. */
.hero__scroll {
  position: relative;
  z-index: var(--z-content);
  align-self: end;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__scroll-line {
  position: relative;
  width: 52px;
  height: 1px;
  background: rgba(228, 181, 177, .26);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rose);
  transform-origin: left;
  animation: defile 2.4s ease-in-out infinite;
}
/* Aller-retour sans saut : au demi-tour, l'échelle reste à 1 et c'est
   l'origine qui bascule à droite — le trait se rétracte alors par où il est
   arrivé. Inverser l'échelle à la place ferait clignoter le trait. */
@keyframes defile {
  0%, 100% { transform: scaleX(0); transform-origin: left; }
  50%      { transform: scaleX(1); transform-origin: left; }
  50.1%    { transform: scaleX(1); transform-origin: right; }
  99.9%    { transform: scaleX(0); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; transform: scaleX(1); }
}

/* --- Hero en deux volets ---
   Le texte à gauche sur le bleu nuit, la photo à droite dans son propre
   panneau. C'est la SEULE façon de montrer une photo claire dans ses vraies
   couleurs : mesuré sur les pixels réels, un titre blanc posé dessus plafonne
   à 1,8:1 sans voile et à 3,5:1 avec un voile de 50 % — soit sous le seuil,
   même pour du grand texte. Plutôt que d'assombrir la photo jusqu'à la rendre
   lisible, on cesse d'écrire dessus.

   Le panneau descend sous l'en-tête plutôt que de filer jusqu'en haut : les
   liens du menu, eux, passeraient sur la photo, et le même calcul
   s'appliquerait à eux. */
@media (min-width: 901px) {
  .hero--split::after { display: none; }        /* plus aucun voile */

  .hero--split .hero__media {
    position: absolute;
    top: clamp(4.75rem, 7vw, 6.5rem);
    right: 0;
    bottom: 0;
    left: auto;
    width: 46%;
    overflow: hidden;                            /* le parallax déborde sinon */
    z-index: -2;
  }
  .hero--split .hero__media img { z-index: auto; }

  /* Le texte s'arrête avant le panneau — en POURCENTAGE, pas en `rem` : une
     largeur fixe se règle juste pour un écran et court sur la photo dès qu'on
     en change (à 1100 px, le titre débordait de 200 px sur l'image). Deux
     points de marge entre la fin du texte et le bord du panneau. */
  .hero--split .hero__inner { padding-right: 48%; }
}

/* --- Hero sans le symbole ---
   Quand la photo se suffit à elle-même, le texte occupe toute la largeur du
   hero plutôt que de laisser une colonne vide à droite. */
.hero--plain .hero__top { grid-template-columns: minmax(0, 1fr); }
.hero--plain .hero__head { max-width: 46rem; }

.hero__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.hero__head { position: relative; z-index: 2; }

/* Symbole de marque monumental : le trait reste précis, la matière finale
   suffisamment légère pour conserver la photo et le titre au premier plan. */
/* Le symbole accompagne le titre du contact et se cale sur sa hauteur.
   La mesure passe par `em` et non par un `stretch` de flex : le SVG a une
   taille intrinsèque (300 px) qui rend sa hauteur « définie », si bien qu'il
   ne s'étire pas — il imposait au contraire sa hauteur à la ligne. En posant
   la même échelle que le titre (`--fs-h2`), 2,15 em valent exactement ses deux
   lignes — mais calé au ras du titre, le symbole paraît maigre à côté de lui.
   Il déborde donc d'un tiers de part et d'autre (3,4 em ≈ 1,6 fois la hauteur
   du titre) : il retrouve la présence qu'il avait dans le hero, et son trait
   revient à 5 px d'écran, son épaisseur d'origine. */
.mark {
  position: relative;
  flex: 0 0 auto;
  font-size: var(--fs-h2);
  height: 3.4em;
  width: 3.4em;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 26px rgba(5, 8, 20, .28));
}
.mark svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Le symbole est un VRAI monotrait, dessiné à la plume dans Illustrator
   (`assets/img/symbole-trait-3.svg`) : un seul chemin ouvert, donc `fill: none`.
   Le contour ne suit plus les bords d'une masse, il est le dessin. */
.mark__path {
  fill: none;
  stroke: rgba(228, 181, 177, .95);
  /* Épaisseur en unités du dessin (viewBox de 78,9) : 0,92 donne ≈ 5 px à la
     taille nominale du symbole, 430 px. Elle suit donc la taille du symbole,
     ce qui est le comportement attendu d'un dessin vectoriel.

     ⚠️ NE PAS remettre `vector-effect: non-scaling-stroke` pour figer le trait
     à 5 px : il fait aussi interpréter les POINTILLÉS en pixels d'écran, donc
     cinq fois plus courts que le tracé — l'animation devient un segment qui se
     promène en effaçant derrière lui au lieu d'une ligne qui pousse. Vérifié
     au point par point : avec l'effet, à mi-course, seuls les alentours de
     45 % du tracé sont peints ; sans, tout le début l'est. */
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Ombre courte, posée sur le TRACÉ (le conteneur porte déjà un halo large) :
     elle décolle la ligne de la photo du hero, qui est claire par endroits. */
  filter: drop-shadow(0 .35px .5px rgba(5, 8, 20, .55))
          drop-shadow(0 1.6px 3px rgba(5, 8, 20, .35));
}

/* La pointe du crayon : un disque posé sur la tête du tracé pendant le dessin.
   C'est ce qui fait « une main qui dessine » plutôt qu'« une ligne qui
   pousse ». Le JS la déplace et la fait disparaître à la fin ; sans lui, elle
   n'est jamais visible. */
.mark__tip {
  fill: var(--rose);
  opacity: 0;
  filter: drop-shadow(0 0 2.5px rgba(228, 181, 177, .9));
}

/* Au départ, rien n'est visible : le tracé est « vidé » par le pointillé.
   `pathLength="1"` normalise la longueur du chemin — un tiret de 1 le couvre
   en entier quel que soit son développé réel, un décalage de 1 le cache
   complètement. Le JS ramène ce décalage à zéro : le trait avance.

   Le SIGNE du décalage suit le sens de dessin déclaré dans le HTML
   (`data-draw="reverse"`) : sans ça, les quelques images qui précèdent la prise
   de main du script montreraient un trait partant à l'envers.

   L'état vit sous `anim-ready` : sans JavaScript, en mouvement réduit ou si le
   CDN GSAP tombe, le symbole est entier dès le premier rendu. */
.anim-ready .mark__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim-ready .mark__path[data-draw="reverse"] { stroke-dashoffset: -1; }

/* Le conteneur entre en fondu (`data-reveal`), sans le décalage vertical du
   groupe : une masse de 400 px qui monte de 26 px se remarquerait plus que le
   dessin lui-même. */
.anim-ready .mark[data-reveal] { transform: none; }

.hero__title {
  margin-top: 1.4rem;
  font-size: var(--fs-hero);
  max-width: 16ch;
}
.hero__title em { color: var(--rose); display: inline-block; }

.hero__lede {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------
   DE LA FICHE AU SITE
   Maquette et chiffres ont leur propre section, sur un bleu nuit distinct
   de celui du hero. Deux raisons : le hero n'a plus à porter leur hauteur —
   sa photo de fond était étirée au point qu'on n'en voyait plus le sujet —
   et la démonstration se lit comme un temps à part.
   --------------------------------------------------------- */
.showcase {
  background: var(--ink-2);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* --- Maquette « fiche → site » --- */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.flow__card {
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.flow__cap {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.flow__list { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.flow__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(228, 181, 177, .10);
  font-size: .92rem;
}
.flow__list li:last-child { border-bottom: 0; }
.flow__list b { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.flow__list .is-new span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--rose);
  vertical-align: middle;
}
.flow__list .is-new b { color: var(--rose); }
.flow__meta { margin-top: 1rem; font-size: .8rem; color: var(--text-faint); }

.flow__link { display: grid; justify-items: center; gap: .6rem; }
.flow__arrow {
  width: clamp(70px, 10vw, 140px);
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow__arrow path:first-child { stroke-dasharray: 4 6; }
.flow__badge {
  padding: .3em .7em;
  border-radius: 999px;
  background: rgba(228, 181, 177, .12);
  border: 1px solid var(--line-dark);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose);
}

/* Mini-site : une page réduite à ses masses. */
.mini {
  margin-top: 1rem;
  padding: .7rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: grid;
  gap: .55rem;
}
.mini__bar { display: flex; gap: .3rem; }
.mini__bar i { width: 18px; height: 3px; border-radius: 2px; background: rgba(33, 40, 66, .25); }
/* La maquette du site publié montre une vraie photo : c'est ce que le
   visiteur verra, pas un aplat. */
.mini__hero {
  display: grid;
  gap: .35rem;
  padding: .9rem .7rem;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(33, 40, 66, .35), rgba(33, 40, 66, .85)),
    url("../img/spa-thumb.jpg") center / cover no-repeat;
}
.mini__t { display: block; height: 9px; width: 62%; border-radius: 3px; background: var(--rose); }
.mini__s { display: block; height: 5px; width: 88%; border-radius: 3px; background: rgba(242, 239, 244, .35); }
.mini__btn { display: block; height: 9px; width: 30%; border-radius: 999px; background: var(--rose-soft); }
.mini__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.mini__grid span { height: 26px; border-radius: 5px; background: var(--paper-2); }

/* --- Chiffres ---
   Le nombre au-dessus, sa légende dessous, l'ensemble centré : trois colonnes
   qui se lisent d'un coup d'œil plutôt qu'une ligne à parcourir. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: clamp(1.75rem, 6vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.stats b {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  color: var(--rose);
  line-height: 1;
}
.stats span { font-size: .92rem; color: var(--text-muted); max-width: 14ch; line-height: 1.35; }

.flow__arrow--down { display: none; }

@media (max-width: 860px) {
  /* En colonne, la flèche descend d'une carte à l'autre et le mot
     « synchronisé » se pose juste dessous, centré sous sa pointe. */
  .flow { grid-template-columns: 1fr; }
  .flow__link { margin-block: .25rem; }
  .flow__arrow--right { display: none; }
  .flow__arrow--down { display: block; width: 24px; height: clamp(52px, 12vw, 80px); }
}

@media (max-width: 900px) {
  .hero__top { display: block; }
}

/* Titre + symbole sur une ligne. En dessous de 700 px, le symbole passerait
   sous les 60 px de côté : il se retire plutôt que de devenir un pictogramme
   illisible. */
@media (max-width: 700px) {
  .title-row .mark { display: none; }
}

/* ---------------------------------------------------------
   BANDEAU PLATEFORMES
   --------------------------------------------------------- */
.platforms {
  padding-block: clamp(2rem, 4vw, 3rem);
  /* La section qui précède est déjà en --ink-2 : sans ce retour au fond
     principal, les deux se toucheraient sans qu'on voie la couture. */
  background: var(--ink);
  border-block: 1px solid var(--line-dark);
  overflow: hidden;
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__track i { color: var(--rose); font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------------------------------------------------------
   01 · LE CONSTAT
   --------------------------------------------------------- */
.pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pain {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}
.pain__num {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--rose-deep);
  letter-spacing: .1em;
}
.pain__title {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-ink);
}
.pain p { margin-top: .8rem; color: var(--text-ink-muted); font-size: .975rem; }

/* ---------------------------------------------------------
   BANDEAU PHOTO (entre le constat et la méthode)
   --------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
}
.band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Voile bleu nuit UNI : sans lui, le texte passerait sur les zones claires
   de la photo et tomberait sous le seuil de contraste. À plat plutôt qu'en
   dégradé — un dégradé posé sur une photo se voit toujours, et il obligeait
   à retoucher ses paliers à chaque changement d'image. Densité choisie sur
   le pixel le plus clair de chaque photo : 7,7:1 au pire. */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 23, 42, .74);
}
.band__inner { position: relative; }

.statement {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.25;
  max-width: 28ch;
  color: var(--text);
}
.statement em { color: var(--rose); font-style: italic; }

/* --- Bandeau clair -------------------------------------------------------
   La photo de l'atelier est presque blanche : un voile bleu nuit la
   transformerait en aplat sombre et effacerait les magnolias. On inverse
   donc le traitement — voile crème, encre foncée — ce qui donne au passage
   une respiration dans la succession de bandeaux sombres. 8,9:1 au pire. */
.band--light::after { background: rgba(248, 244, 242, .82); }
.band--light .statement { color: var(--text-ink); }
.band--light .statement em { color: var(--rose-deep); }
/* La section précédente est claire elle aussi : sans ce filet, la photo
   semblerait déborder de la FAQ au lieu de commencer un bandeau. */
.band--light { border-top: 1px solid var(--line-light); }

/* ---------------------------------------------------------
   02 · LA MÉTHODE
   --------------------------------------------------------- */
/* Quatre étapes : sur grand écran elles tiennent sur une seule ligne, sinon
   elles se replient par deux. Un 3 + 1 casserait la lecture de la séquence. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
}
.step__num {
  display: block;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--rose);
  opacity: .85;
}
.step__title {
  margin-top: .9rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}
.step p { margin-top: .7rem; color: var(--text-muted); font-size: .975rem; }

/* ---------------------------------------------------------
   03 · LA SYNCHRONISATION
   --------------------------------------------------------- */
.sync {
  display: grid;
  /* minmax(0, …) : sans cela une piste ne peut pas descendre sous la largeur
     min-content de son contenu — le panneau de synchronisation, qui contient du
     texte en `nowrap`, imposait 453px de large dans un écran de 375. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .sync { grid-template-columns: minmax(0, 1fr); } }

.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.checks li {
  position: relative;
  padding-left: 2rem;
  color: var(--text-muted);
  font-size: .975rem;
}
.checks li b { color: var(--text); font-weight: 600; }
.section--paper .checks li { color: var(--text-ink-muted); }
.section--paper .checks li b { color: var(--text-ink); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 7px;
  border-left: 1.6px solid var(--rose);
  border-bottom: 1.6px solid var(--rose);
  transform: rotate(-45deg);
}
.section--paper .checks li::before { border-color: var(--rose-deep); }

/* --- Maquette de l'écran de validation --- */
.panel {
  position: sticky;
  top: 6.5rem;
  padding: 1.1rem;
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .95);
}
@media (max-width: 940px) { .panel { position: static; } }

.panel__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-dark);
}
.panel__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.panel__title { font-weight: 600; font-size: .95rem; }
.panel__count {
  margin-left: auto;
  padding: .1em .55em;
  border-radius: 999px;
  background: var(--rose);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 600;
}
/* `minmax(0, 1fr)` : une piste `auto` (le défaut) se dimensionne sur le
   max-content de ses éléments. Les lignes d'écart contenant du texte en
   `nowrap`, elles faisaient 415px de large dans un panneau de 335 — le
   débordement ne se voyait pas dans `scrollWidth` parce que `body` le rogne. */
.panel__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .9rem; }

.diff {
  display: flex;
  align-items: center;
  /* `min-width: auto` est le défaut d'un élément de grille : même avec une
     piste `minmax(0, 1fr)`, la ligne refusait de descendre sous sa largeur
     min-content et débordait du panneau. */
  min-width: 0;
  gap: .85rem;
  padding: .8rem .9rem;
  background: rgba(228, 181, 177, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
}
.diff__kind {
  flex: 0 0 auto;
  padding: .2em .6em;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.diff__kind--edit { background: rgba(228, 181, 177, .18); color: var(--rose); }
.diff__kind--new  { background: rgba(127, 144, 119, .22); color: #b8cbae; }
.diff__kind--lock { background: rgba(242, 239, 244, .08); color: var(--text-faint); }
.diff__body { min-width: 0; }
.diff__name {
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diff__val { font-size: .84rem; color: var(--text-faint); }
.diff__val s { opacity: .7; }
.diff__val b { color: var(--rose); font-weight: 600; }
.diff__ok {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .35em .8em;
  border-radius: 999px;
  background: var(--rose);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 600;
}
.diff__ok--off { background: transparent; border: 1px solid var(--line-dark); color: var(--text-faint); }
.diff.is-locked { opacity: .72; }

/* Sur téléphone, la ligne d'écart n'a plus la place de tout tenir de front :
   le libellé passe sous le nom au lieu d'être tronqué par une ellipse, et
   « Accepter » se contente d'une pastille plus courte. */
@media (max-width: 620px) {
  .diff {
    flex-wrap: wrap;
    gap: .5rem .7rem;
    padding: .75rem .8rem;
  }
  .diff__body { flex: 1 1 100%; order: 2; }
  .diff__name { white-space: normal; }
  .diff__kind { order: 1; }
  .diff__ok { order: 1; padding: .3em .7em; font-size: .74rem; }
}

.panel__foot {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-dark);
}
.panel__btn {
  padding: .5em 1em;
  border: 1px solid var(--rose);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--rose);
}
.panel__note { font-size: .78rem; color: var(--text-faint); }

/* ---------------------------------------------------------
   04 · LES MODÈLES
   --------------------------------------------------------- */
/* Les vignettes ne portent aucun nom : elles disent seulement la variété des
   ambiances possibles. Elles sont hors de l'arbre d'accessibilité (aria-hidden
   sur la grille) puisqu'elles n'apportent aucune information au lecteur d'écran. */
.models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Cinq colonnes au maximum : les quinze vignettes tombent alors sur trois
   rangées pleines, sans orpheline en fin de grille. */
@media (min-width: 64rem) {
  .models { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.model { transition: transform .35s var(--ease-out); }
.model:hover { transform: translateY(-6px); }

/* --- Ruban défilant (mobile) ---
   Treize vignettes en pile feraient une page à faire glisser : sous 760px
   elles passent en bandeau qui défile tout seul, en boucle. La classe
   `models--marquee` est posée par le JS APRÈS avoir dupliqué les vignettes —
   sans ce doublon, la boucle laisserait un vide à mi-course, donc sans JS on
   garde sagement la grille. */
@media (max-width: 760px) {
  .models-band.is-band {
    overflow: hidden;
    /* Pleine largeur : le ruban traverse l'écran d'un bord à l'autre. */
    margin-inline: calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .models--marquee {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    /* Marge sur chaque vignette plutôt que `gap` : la largeur totale devient un
       multiple exact de (vignette + marge), donc -50 % retombe pile sur le
       début du second exemplaire, sans saut à chaque tour. */
    gap: 0;
    animation: models-run 16s linear infinite;
  }
  .models--marquee .model { flex: 0 0 9.5rem; margin-right: .85rem; }
  .models--marquee .model:hover { transform: none; }
}

@keyframes models-run {
  from { transform: translateX(0); }
  /* La moitié exacte : le second exemplaire prend la place du premier. */
  to   { transform: translateX(-50%); }
}

/* Mouvement réduit : plus de défilement automatique, le ruban se fait glisser
   au doigt. */
@media (prefers-reduced-motion: reduce) {
  .models--marquee { animation: none; }
  .models-band.is-band { overflow-x: auto; }
}

/* La vignette est peinte avec les VRAIES couleurs et le VRAI arrondi du
   modèle : les valeurs viennent de l'attribut `style` de la carte. */
.model__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: .85rem;
  background: var(--m-bg);
  color: var(--m-paper, var(--m-ink));
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.model__nav { display: flex; gap: .35rem; margin-bottom: .9rem; }
.model__nav i { width: 16px; height: 3px; border-radius: 2px; background: var(--m-sec); opacity: .8; }
.model__side {
  position: absolute;
  left: .85rem; top: .85rem; bottom: .85rem;
  display: grid; align-content: start; gap: .4rem;
  padding-right: .6rem;
  border-right: 1px solid var(--m-sec);
}
.model__side i { width: 22px; height: 3px; border-radius: 2px; background: var(--m-sec); opacity: .8; }
.model__shot--lateral { padding-left: 3.2rem; }
.model__shot--lateral .model__title { margin-top: 0; }

.model__title {
  display: block;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
  color: var(--m-paper, var(--m-ink));
}
.model__title--serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.model__title--caps { font-family: var(--font-body); letter-spacing: .12em; font-size: 1.25rem; }

.model__line {
  display: block;
  height: 4px;
  width: 74%;
  margin-top: .7rem;
  border-radius: 2px;
  background: currentColor;
  opacity: .28;
}
.model__line--short { width: 46%; margin-top: .35rem; }

.model__cards {
  position: absolute;
  left: .85rem; right: .85rem; bottom: .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.model__shot--lateral .model__cards { left: 3.2rem; }
.model__cards i {
  height: 34px;
  border-radius: min(var(--m-r), 14px);
  background: var(--m-acc);
  opacity: .9;
}
/* La même photo dans les treize vignettes, teintée par la palette du modèle :
   c'est exactement ce que dit la section — un contenu, autant d'identités.
   `background-blend-mode` mélange l'image et l'aplat sans surcouche. */
.model__cards i:first-child {
  background-image: url("../img/spa-thumb.jpg");
  background-size: cover;
  background-position: center;
  background-color: var(--m-acc);
  background-blend-mode: luminosity;
  opacity: 1;
}
.model__cards i:last-child { background: var(--m-sec); opacity: .55; }

/* --- Ce qui se règle --- */
.tweaks {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-light);
}
.tweaks__intro {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-ink);
}
.tweaks__list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.1rem;
}
.tweaks__list li {
  padding: .45em .95em;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  color: var(--text-ink);
}
.tweaks__note {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose-deep);
}

/* ---------------------------------------------------------
   05 · CE QUE VOUS PILOTEZ
   --------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Trois colonnes au maximum : au-delà, les cartes deviennent des vignettes et
   le regard n'a plus de rythme de lecture. */
@media (min-width: 64rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.feature:hover { border-color: rgba(228, 181, 177, .38); transform: translateY(-4px); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(228, 181, 177, .12);
}
.feature__icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.feature p { margin-top: .55rem; font-size: .94rem; color: var(--text-muted); }

/* ---------------------------------------------------------
   06 · AGENCES
   --------------------------------------------------------- */
.agencies {
  display: grid;
  /* minmax(0, …) : sans cela une piste ne peut pas descendre sous la largeur
     min-content de son contenu — le panneau de synchronisation, qui contient du
     texte en `nowrap`, imposait 453px de large dans un écran de 375. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) { .agencies { grid-template-columns: minmax(0, 1fr); } }

.agencies__card {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--navy);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -50px rgba(33, 40, 66, .8);
}
.projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.project {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .95rem;
  background: rgba(242, 239, 244, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--text);
}
.project b { font-weight: 500; }
.project em {
  margin-left: auto;
  font-style: normal;
  font-size: .8rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.project__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.project__dot--ok { background: var(--rose); }
.project__dot--warn { background: rgba(242, 239, 244, .3); }

/* ---------------------------------------------------------
   07 · QUESTIONS FRÉQUENTES
   --------------------------------------------------------- */
.faq__def {
  max-width: 66ch;
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--text-ink-muted);
}
.faq__def strong { color: var(--text-ink); font-weight: 600; }

.faq__list {
  display: grid;
  gap: .85rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

/* <details> : la réponse est dans le HTML, dépliable sans une ligne de
   JavaScript — et lisible par un moteur même repliée. Le mouvement fluide est
   ajouté par-dessus, jamais nécessaire à la consultation. */
.qa {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.qa:hover { border-color: rgba(163, 93, 86, .38); }
.qa.is-open, .qa[open]:not(.is-js) {
  border-color: rgba(163, 93, 86, .45);
  box-shadow: 0 18px 40px -30px rgba(33, 40, 66, .5);
}

.qa summary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  color: var(--text-ink);
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
.qa summary:hover { color: var(--rose-deep); }
.qa summary span { flex: 1; }

/* Le « + » : une pastille qui tourne d'un quart de tour pour devenir une croix. */
.qa summary i {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--rose-soft);
  transition: transform .45s var(--ease-out), background-color .3s var(--ease-out);
}
.qa summary i::before, .qa summary i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 1.6px;
  border-radius: 2px;
  background: var(--rose-deep);
  transform: translate(-50%, -50%);
}
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa summary:hover i { background: var(--rose); }
/* `is-open` est posée dès le clic : l'icône tourne pendant que la réponse
   s'ouvre, au lieu d'attendre la fin de l'animation. `[open]` prend le relais
   quand le JavaScript n'est pas là. */
.qa.is-open summary i, .qa[open]:not(.is-js) summary i { transform: rotate(135deg); }

.qa__body { overflow: hidden; }
.qa__body p {
  padding: 0 clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.35rem, 2.2vw, 1.7rem);
  padding-right: clamp(1.25rem, 6vw, 4.5rem);
  color: var(--text-ink-muted);
  font-size: 1rem;
}

/* ---------------------------------------------------------
   08 · CONTACT
   --------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 940px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

.contact__pitch { font-size: var(--fs-lead); color: var(--text-muted); }
.contact__coords { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 2rem; }
.contact__label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact__value {
  display: inline-block;
  margin-top: .2rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--rose);
  text-decoration: none;
}
.contact__value:hover { text-decoration: underline; }
.contact__aside-note {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
  font-size: .9rem;
  color: var(--text-faint);
}


/* --- Formulaire --- */
.form {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.field label span { color: var(--rose); margin-left: .15em; }
.field label em { font-style: normal; color: var(--text-faint); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: rgba(18, 23, 42, .6);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose);
  background: rgba(18, 23, 42, .9);
}
.field select { appearance: none; background-image: none; cursor: pointer; }
.field select option { background: var(--ink-3); color: var(--text); }

/* Piège à robots : hors écran mais focusable par un robot, jamais par un humain. */
.field--hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cf-turnstile { margin-bottom: 1rem; }

.form__submit { margin-top: .4rem; }

.form__status {
  margin-top: 1rem;
  font-size: .92rem;
  min-height: 1.2em;
}
.form__status.is-ok { color: #b8cbae; }
.form__status.is-err { color: var(--rose); }

.form__disclosure {
  margin-top: 1.2rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text-faint);
}
.form__disclosure a { color: var(--text-muted); }

/* ---------------------------------------------------------
   PAGE MENTIONS LÉGALES
   --------------------------------------------------------- */
.legal {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  background: var(--ink);
}
.legal .section-title { margin-bottom: clamp(2rem, 4vw, 3rem); }

.legal__block {
  max-width: 62ch;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-dark);
}
.legal__block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--text);
}
.legal__block p {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: .975rem;
}
.legal__block strong { color: var(--text); font-weight: 600; }
.legal__block a { color: var(--rose); }

/* La politique de confidentialité énumère beaucoup — autorisations demandées,
   données reçues, destinataires, droits. Sans puce, ces listes se
   confondraient avec les paragraphes qui les précèdent. */
.legal__block ul {
  margin-top: 1rem;
  padding-left: 1.15rem;
  list-style: none;
  color: var(--text-muted);
  font-size: .975rem;
}
.legal__block li { position: relative; margin-top: .55rem; }
.legal__block li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
  opacity: .8;
}
/* Intertitre à l'intérieur d'un bloc : même graisse que le corps, pas une
   seconde famille — la hiérarchie tient au blanc qui le précède. */
.legal__block h3 {
  margin-top: 1.7rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
/* Date de mise à jour, juste sous le titre de la page. */
.legal__meta {
  margin-top: .85rem;
  color: var(--text-faint);
  font-size: .9rem;
}
/* Passage d'un document légal à l'autre, en bas de page. */
.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  max-width: 62ch;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-dark);
  font-size: .9rem;
}
.legal__nav a { color: var(--rose); }
.legal__nav span[aria-current] { color: var(--text-faint); }

/* Les valeurs qui restent à fournir sautent aux yeux tant qu'elles sont là. */
.legal__todo {
  padding: .05em .4em;
  border-radius: 4px;
  background: rgba(228, 181, 177, .14);
  color: var(--rose);
  font-size: .92em;
}