/* ════════════════════════════════════════════════════════════════
   MR ATTRACTOR — charte du 23/09/2026, élargie le 25/09
   Fond noir, écriture blanche, jaune réservé aux appels à l'action.
   Élargie à l'alternance sombre / sable, arbitrée le 25/09 : c'est le
   moteur de rythme de la référence, et rien d'autre ne le remplace.
   Référence : refonte-site-agenceattractor/DIRECTION-ARTISTIQUE.md
   Grille 8 px, mobile first, conforme UX_SYSTEM.md
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Sombre. Ni noir pur : il fatigue l'œil sur du texte long. */
  --noir:      #0B0B0C;
  --noir-2:    #131315;
  --surface:   #17171A;
  --surface-2: #1E1E22;
  --texte:     #F2F0EC;
  --texte-2:   #A8A49C;
  --sep:       #26262A;

  /* Clair. Le sable de l'écosystème, assez chaud pour ne pas être blanc. */
  --sable:     #F1EDE4;
  --sable-2:   #FAF7F1;
  --encre:     #0B0F12;
  --encre-2:   #55524C;
  --sep-clair: #DCD6C9;

  /* Accent. Le jaune porte les appels à l'action sur les deux fonds.
     Sur le sable, il tombe à 1,5:1 : illisible en texte, d'où l'ocre. */
  --accent:    #F2C10D;   /* ACTION SEULE : boutons, et rien d'autre */
  --accent-vif: #FFD21F;
  --ocre:      #6E5200;   /* l'action sur fond clair */

  /* Accent de LECTURE : etiquettes, filets, chiffres, guillemets. Il signale
     « ici commence un nouveau sujet », jamais « clique ici ». */
  --lire:      #C9C4BA;   /* sur fond sombre */
  --lire-clair: #6B665D;  /* sur fond sable */

  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 40px; --e6: 48px; --e8: 64px; --e10: 80px;

  --large: 1120px;
  --gouttiere: 20px;

  /* Ambiances. Ce ne sont pas des aplats : deux halos tres discrets donnent de
     la profondeur a une page longue, a cout nul en octets. Le jaune y est a 6 %
     d'opacite : il colore sans jamais devenir un signal. */
  --fond-sombre: radial-gradient(ellipse 80% 50% at 15% 0%, rgba(242,193,13,.06), transparent 60%),
                 radial-gradient(ellipse 70% 50% at 90% 100%, rgba(242,193,13,.035), transparent 60%),
                 #0B0B0C;
  --fond-sombre-2: radial-gradient(ellipse 90% 60% at 85% 10%, rgba(242,193,13,.05), transparent 55%),
                   #131315;
  --fond-clair: radial-gradient(ellipse 90% 60% at 12% 5%, #FBF8F1, transparent 55%),
                radial-gradient(ellipse 80% 70% at 92% 95%, #E8E2D5, transparent 60%),
                #F1EDE4;
}

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

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

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 19px;          /* la référence est à 19 px en mobile, pas 17 */
  line-height: 1.6;
  font-weight: 300;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--noir); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Conteneur ─────────────────────────────────────────────── */
.wrap {
  width: 100%; max-width: var(--large); margin: 0 auto;
  padding-left: var(--gouttiere); padding-right: var(--gouttiere);
}
.wrap-etroit { max-width: 760px; }

/* ── Typographie ───────────────────────────────────────────────
   L'écart le plus voyant avec la référence était là : un titre deux
   fois trop petit en mobile. Les valeurs basses des clamp sont calées
   sur un relevé fait à 390 px sur cpcoachingmental.com. */
h1, h2, h3, h4 {
  font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; margin: 0;
  /* Un mot long dans un titre de 46 px deborde d'un ecran de 390 sans rien dire :
     « d'accompagnement » a fait sortir une page entiere de 22 px le 01/10. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(42px, 12.8vw, 66px); }

/* Une phrase entiere en titre ne se compose pas comme trois mots : au-dela de
   huit mots, la taille pleine fabrique une colonne de sept lignes sur mobile. */
h1.titre-long { font-size: clamp(34px, 9.4vw, 54px); }
h2.titre-long { font-size: clamp(27px, 7.4vw, 40px); }
h2 { font-size: clamp(32px, 9.4vw, 46px); line-height: 1.12; }
h3 { font-size: clamp(21px, 5.2vw, 25px); line-height: 1.25; letter-spacing: -0.015em; }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

.chapeau    { font-size: clamp(19px, 4.6vw, 22px); color: var(--texte-2); line-height: 1.55; }
.secondaire { color: var(--texte-2); }
.fort       { font-weight: 600; color: var(--texte); }
.petit      { font-size: 16px; }

/* Un mot mis en avant dans un titre. C'est le « seconde » en italique
   de la référence : un seul par page, jamais deux. */
.souligne { color: var(--accent); font-style: italic; font-weight: 600; }

/* Étiquette de section : en chasse fixe, et en couleur d'accent.
   En gris, elle disparaissait ; c'est elle qui annonce le changement de bloc. */
.etiquette {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lire); margin: 0 0 var(--e3);
}
.etiquette::before { content: ''; width: 28px; height: 2px; background: currentColor; flex-shrink: 0; }

.chiffre { font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; }
.filet   { width: 56px; height: 4px; background: var(--lire); border-radius: 2px; margin-bottom: var(--e3); }

/* ── Sections et alternance ────────────────────────────────────
   Le rythme du site tient à ça : on change de fond, donc on change de
   chapitre. Les sections claires renversent toutes les couleurs. */
.section { padding: var(--e10) 0; position: relative; }
@media (min-width: 768px) { .section { padding: 120px 0; } }

.section-sombre  { background: var(--fond-sombre); color: var(--texte); }
.section-sombre-2 { background: var(--fond-sombre-2); color: var(--texte); }

.section-claire {
  background: var(--fond-clair);
  color: var(--encre);
}
.section-claire h1, .section-claire h2, .section-claire h3, .section-claire .fort { color: var(--encre); }
.section-claire .secondaire, .section-claire .chapeau { color: var(--encre-2); }
.section-claire .etiquette { color: var(--lire-clair); }
.section-claire .souligne  { color: var(--ocre); }
.section-claire .carte     { background: var(--sable-2); border-color: var(--sep-clair); }
.section-claire .vecu      { border-color: var(--sep-clair); }
.section-claire .vecu-moment { color: var(--lire-clair); }
.section-claire .vecu-dev  { color: var(--encre-2); }
.section-claire .btn-ligne { border-color: #C8C1B2; color: var(--encre); }
.section-claire .citation cite { color: var(--encre-2); }
.section-claire .chrono li { border-color: var(--sep-clair); }
.section-claire .chrono .an { color: var(--lire-clair); }
.section-claire .q         { border-color: var(--sep-clair); }
.section-claire .q-rep     { color: var(--encre-2); }

/* Un formulaire posé sur une section claire gardait les couleurs du mode
   sombre : libellés blanc cassé sur sable, mesurés à 1,03:1, donc invisibles.
   Le renversement est complet, sinon la faute reviendra à la première page
   qui déplacera un champ. */
.section-claire .champ > label, .section-claire .legende { color: var(--encre); }
.section-claire .aide { color: var(--encre-2); }
.section-claire input[type="text"], .section-claire input[type="email"],
.section-claire input[type="tel"], .section-claire textarea, .section-claire select {
  background: var(--sable-2); color: var(--encre); border-color: #C8C1B2;
}
.section-claire input::placeholder, .section-claire textarea::placeholder { color: #8C877D; }
.section-claire .choix { border-color: #C8C1B2; color: var(--encre); }
.section-claire .choix:hover { border-color: var(--encre-2); }
.section-claire .choix:has(input:checked) { border-color: var(--ocre); background: var(--sable-2); }
.section-claire .form-etat.ok { color: var(--ocre); }
.section-claire .form-etat.ko { color: #A32B12; }
.section-claire .enorme { color: var(--ocre); }

/* Un lien dans du texte courant. Le jaune sur sable tombe à 1,45:1. */
.lien-texte { color: var(--accent); text-underline-offset: 3px; }
.section-claire .lien-texte { color: var(--ocre); }

/* ── En-tête ───────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 11, 12, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sep);
}
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.marque img { width: 34px; height: 34px; border-radius: 8px; }
.marque-nom { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; color: var(--texte); }

.nav { display: none; align-items: center; gap: var(--e3); }
.nav a { text-decoration: none; font-size: 16px; color: var(--texte-2); transition: color .18s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texte); }
/* Sans cette ligne, `.nav a` l'emporte en spécificité et le bouton
   jaune se retrouve avec du texte gris clair, illisible. */
.nav a.btn-jaune, .nav a.btn-jaune:hover, .nav a.btn-jaune[aria-current="page"] { color: var(--noir); }
@media (min-width: 900px) { .nav { display: flex; } }

.burger {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--sep); border-radius: 12px;
  background: transparent; cursor: pointer; color: var(--texte); flex-shrink: 0;
}
@media (min-width: 900px) { .burger { display: none; } }

#menu-mobile { display: none; }
.volet { display: none; border-top: 1px solid var(--sep); background: var(--noir); }
#menu-mobile:checked ~ .volet { display: block; }
.volet a {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) 0; text-decoration: none;
  color: var(--texte); font-size: 19px; border-bottom: 1px solid var(--sep); min-height: 56px;
  counter-increment: etape;
}
.volet a:last-child { border-bottom: 0; }
.volet { counter-reset: etape; }
/* Le numero dit qu'il y a un parcours, pas une liste de liens. */
.volet a::before {
  content: counter(etape, decimal-leading-zero);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--lire); flex-shrink: 0; min-width: 24px;
}
.volet a::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--lire); border-bottom: 2px solid var(--lire);
  transform: rotate(-45deg); flex-shrink: 0;
}
/* Le dernier lien est l'action : il garde le jaune. */
.volet a:last-child::before, .volet a:last-child::after { color: var(--accent); border-color: var(--accent); }

/* ── Boutons ───────────────────────────────────────────────────
   Pleine largeur et en gélule sur mobile, comme la référence : le
   pouce ne cherche pas sa cible. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 16px var(--e4);
  border-radius: 999px; border: 1px solid transparent;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .18s, background .2s, border-color .2s, box-shadow .25s;
}
/* Texte NOIR sur le jaune. Le blanc sur jaune est illisible. */
.btn-jaune { background: var(--accent); color: var(--noir); box-shadow: 0 8px 30px rgba(242,193,13,.18); }
.btn-jaune:hover { background: var(--accent-vif); transform: translateY(-2px); box-shadow: 0 12px 38px rgba(242,193,13,.28); }
.btn-ligne { border-color: var(--sep); color: var(--texte); background: transparent; }
.btn-ligne:hover { border-color: var(--texte-2); transform: translateY(-2px); }

.btns { display: flex; flex-direction: column; gap: var(--e2); }
.btns .btn { width: 100%; }
@media (min-width: 560px) {
  .btns { flex-direction: row; flex-wrap: wrap; }
  .btns .btn { width: auto; }
}

/* Lien discret en chasse fixe, avec sa flèche. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--texte-2); transition: color .2s, gap .2s;
}
.lien-fleche:hover { color: var(--accent); gap: 16px; }
.section-claire .lien-fleche { color: var(--encre-2); }
.section-claire .lien-fleche:hover { color: var(--ocre); }

/* ── Cartes ────────────────────────────────────────────────── */
.carte {
  background: var(--surface); border: 1px solid var(--sep);
  border-radius: 20px; padding: var(--e4);
}
.carte-accent { border-left: 3px solid var(--accent); }

.grille { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } }

.duo { display: grid; gap: var(--e6); align-items: center; grid-template-columns: 1fr; }
.duo-haut { align-items: start; }
.duo-media { justify-self: start; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.1fr 0.9fr; gap: var(--e10); }
  .duo-media { justify-self: end; }
}

/* Texte, photo, puis suite du texte.
   En mobile, une colonne unique enchaînait titre, citation et deux paragraphes
   avant que la photo n'arrive : trop de texte d'affilée. La photo se glisse
   maintenant juste après le titre, et reprend sa colonne sur grand écran. */
.duo-intercale { align-items: start; }
@media (min-width: 900px) {
  .duo-intercale { column-gap: var(--e10); row-gap: var(--e3); }
  .duo-intercale > .duo-titre { grid-column: 1; grid-row: 1; }
  .duo-intercale > .duo-suite { grid-column: 1; grid-row: 2; }
  /* La largeur est posée sur le conteneur, pas laissée à l'image.
     Avec `justify-self: end`, la boîte se réduit à son contenu : une image
     en chargement différé n'ayant encore aucun pixel, elle mesurait 0 de large
     et sautait à 360 en arrivant. Mesuré à 1024 et 1440 px. */
  .duo-intercale > .duo-photo { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; width: 360px; }
}
/* Filet de sécurité : la place verticale est réservée même si le rapport
   n'est pas encore connu du moteur de rendu. */
.duo-photo img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ── Premier écran ─────────────────────────────────────────────
   Le tracé animé passe derrière le titre, comme la trajectoire de
   circuit de la référence. Il se dessine une fois, puis ne bouge plus. */
.hero { position: relative; overflow: hidden; padding-top: var(--e8); }
/* Le tracé est borné à la zone du titre, et il s'efface avant le texte
   courant. Premier essai fait en `slice` sur toute la hauteur : la ligne
   passait en travers du chapeau et des boutons, du trait sur du texte.
   En mobile, `slice` recadre de façon imprévisible ; on étire donc le
   dessin sur une boîte dont on maîtrise la hauteur. */
.hero-trace {
  position: absolute; top: 0; left: 0; right: 0;
  /* 420 px suffisaient pour le titre long de l'accueil, dont le chapeau
     commence a 280 px. Sur les cinq autres pages il commence a 163 px, et
     le trait leur passait en travers du texte, a pleine opacite. La boite
     est ramenee a la zone du titre, et le fondu est fini avant 163 px. */
  width: 100%; height: 260px;
  pointer-events: none; z-index: 0; opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 62%);
}
@media (min-width: 900px) { .hero-trace { height: 78%; } }
.hero-trace path {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: trace 3.4s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.hero-trace circle { fill: var(--accent); opacity: 0; animation: point .8s ease 2.6s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes point { to { opacity: 1; } }
.hero > .wrap { position: relative; z-index: 1; }

/* ── Bloc « ce que tu vis » ────────────────────────────────────
   La référence donne près de 480 px à chaque ligne. C'est ce qui fait
   qu'on se reconnaît au lieu de lire une liste. */
.vecu { border-top: 1px solid var(--sep); padding: var(--e6) 0; }
.vecu:last-of-type { border-bottom: 1px solid var(--sep); }
.vecu-moment {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lire); margin: 0 0 var(--e2);
}
.vecu-phrase {
  font-size: clamp(25px, 6.6vw, 34px); font-weight: 700; line-height: 1.18;
  margin: 0 0 var(--e2); letter-spacing: -0.02em;
}
.vecu-dev { color: var(--texte-2); margin: 0; font-size: 18px; line-height: 1.6; }

/* ── Citation ──────────────────────────────────────────────── */
.citation {
  border-left: 3px solid var(--accent);
  padding: var(--e1) 0 var(--e1) var(--e4);
  margin: var(--e5) 0;
  font-size: clamp(21px, 5vw, 26px);
  font-weight: 300; font-style: italic; line-height: 1.45;
}
.citation cite { display: block; margin-top: var(--e3); font-size: 16px; font-style: normal; color: var(--texte-2); }

/* ── Chronologie ─────────────────────────────────────────────
   Année en chasse fixe et en accent, séparateurs en pointillés. */
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono li {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: var(--e3) 0; border-top: 1px dashed var(--sep);
}
.chrono li:last-child { border-bottom: 1px dashed var(--sep); }
.chrono .an { font-family: 'Space Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--lire); letter-spacing: .04em; }
/* Le fait, en une phrase. Jamais un paragraphe : c'est ce qui permet de
   parcourir la chronologie au lieu de la lire. */
.chrono .fait { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
/* La source, qui rend l'entree verifiable par un tiers. */
.chrono .source {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-2); margin: 8px 0 0; line-height: 1.45;
}
.section-claire .chrono .source { color: var(--encre-2); }
.chrono p { font-size: 18px; margin: 0; line-height: 1.55; }
@media (min-width: 560px) { .chrono li { grid-template-columns: 96px 1fr; gap: var(--e3); } }

/* Une photo intercalee dans la chronologie. Sans elles, treize entrees de texte
   formaient le plus long passage sans image de tout le site. */
.chrono li.chrono-photo { display: block; padding: var(--e3) 0 var(--e5); border-top: 0; }
.chrono li.chrono-photo .cadre { border-radius: 16px; }

/* ── Bandeau défilant ──────────────────────────────────────────
   Il dit ce qui existe déjà, en continu, sans demander de clic. */
.bandeau {
  border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep);
  background: var(--noir-2); padding: var(--e3) 0; overflow: hidden;
}
.bandeau-piste { display: flex; width: max-content; animation: defile 42s linear infinite; }
.bandeau-piste > span {
  display: inline-flex; align-items: center; gap: var(--e3);
  padding-right: var(--e3); white-space: nowrap;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-2);
}
.bandeau-piste b { color: var(--accent); font-weight: 700; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ── Révélation au scroll ──────────────────────────────────────
   Sans JavaScript, tout reste visible : c'est la règle, la page doit
   être lisible même si le script ne part pas. */
.reveler { opacity: 1; }
.js .reveler { opacity: 0; transform: translateY(28px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.js .reveler.vu { opacity: 1; transform: none; }
.js .reveler[data-delai="1"] { transition-delay: .1s; }
.js .reveler[data-delai="2"] { transition-delay: .2s; }
.js .reveler[data-delai="3"] { transition-delay: .3s; }

/* ── Cadre d'image ─────────────────────────────────────────────
   Relevé sur la référence, en mobile : le CADRE est arrondi à 24 px et
   découpe, l'IMAGE elle-même n'a aucun rayon, et une légende en chasse fixe
   est incrustée en bas. C'est ce cadre commun qui fait tenir ensemble des
   images aux couleurs très différentes — sans lui, trois captures de sites
   aux chartes opposées se télescopent. */
.cadre {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--surface); line-height: 0;
}
.cadre img {
  width: 100%; border-radius: 0; display: block;
  /* L'harmonisation de la référence, mesurée dans son code. */
  filter: saturate(1.05) contrast(1.03);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cadre-legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
  color: var(--texte); background: rgba(11, 11, 12, 0.78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* Une légende peut passer en accent quand elle porte un fait, pas un titre. */
.cadre-legende.accent { background: var(--accent); color: var(--noir); }

/* Une image bord à bord. Elle est placée HORS du `.wrap` dans le HTML : c'est
   la seule façon robuste de sortir du conteneur. Premier essai en
   `width:100vw` + `transform:translateX(-50%)` : le transform ne déplace que le
   rendu, pas la boîte, et la marge de 50 % provoquait un débordement
   horizontal à toutes les tailles, mesuré de 375 à 1440 px. */
.cadre-pleine-largeur { width: 100%; max-width: 100%; border-radius: 0; }
@media (min-width: 1200px) {
  .cadre-pleine-largeur { max-width: 1360px; margin-left: auto; margin-right: auto; border-radius: 24px; }
}

/* Le portrait principal porte l'ombre profonde de la référence : c'est elle
   qui le détache du fond au lieu de le laisser posé dessus. */
.cadre-portrait { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); }

/* Dans une carte, le cadre est déjà contenu : on évite l'arrondi dans l'arrondi. */
.carte > .cadre { border-radius: 14px; }

/* ── Vignettes de réalisation ──────────────────────────────── */
.vitrine { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .vitrine { grid-template-columns: repeat(2, 1fr); } }

.realisation { text-decoration: none; display: block; }
.realisation:hover .cadre img { transform: scale(1.03); }
/* Le nom du client vit dans la légende incrustée, jamais deux fois. Sous
   l'image, une seule ligne : ce qui a été livré. */
.realisation-quoi { margin: var(--e3) 0 0; font-size: 19px; font-weight: 600; color: var(--texte); }
.section-claire .realisation-quoi { color: var(--encre); }

/* ── Témoignage ────────────────────────────────────────────────
   Mécanique relevée dans le code de la référence : carte à 24 px de rayon,
   guillemet en couleur d'accent, séparateur en pointillés avant l'attribution,
   puis le nom en gras et une ligne en chasse fixe pour le métier. */
/* ── UN RETOUR D'EXPÉRIENCE, TEL QUE LA PERSONNE L'A ÉCRIT ─────────
   Format questions-réponses, publié sans reformulation. La question est
   posée, les deux notes se lisent d'un coup d'œil, et la réponse est
   celle de la personne, mot pour mot. On ne reformule pas un témoignage :
   on le cite, sinon c'est le nôtre qu'on publie sous son nom. */
.retour-q { border-top: 1px solid var(--sep); padding-top: var(--e4); margin-top: var(--e4); }
.retour-q:first-of-type { border-top: 0; padding-top: 0; }
.section-claire .retour-q { border-color: var(--sep-clair); }

.retour-q h4 {
  font-size: 17px; font-weight: 700; line-height: 1.4;
  margin: 0 0 var(--e3); letter-spacing: -0.01em;
}

.retour-notes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); }
.retour-note {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--noir-2); border: 1px solid var(--sep);
  border-radius: 999px; padding: 7px 16px;
}
.section-claire .retour-note { background: var(--sable); border-color: var(--sep-clair); }
.retour-note b {
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 17px; color: var(--texte);
}
.section-claire .retour-note b { color: var(--encre); }
.retour-note span { font-size: 13px; color: var(--texte-2); }
.section-claire .retour-note span { color: var(--encre-2); }
.retour-note.apres b { color: var(--accent); }
.section-claire .retour-note.apres b { color: var(--ocre); }

.retour-q blockquote {
  margin: 0; padding-left: var(--e3); border-left: 2px solid var(--sep);
  font-size: 17px; line-height: 1.65; color: var(--texte-2);
}
.section-claire .retour-q blockquote { border-color: var(--sep-clair); color: var(--encre-2); }

.temoignage {
  background: var(--surface); border: 1px solid var(--sep);
  border-radius: 24px; padding: var(--e5) var(--e4);
}
.section-claire .temoignage { background: var(--sable-2); border-color: var(--sep-clair); }
@media (min-width: 768px) { .temoignage { padding: var(--e8) var(--e6); } }

.temoignage-guillemet {
  display: block; font-size: 56px; line-height: .6; color: var(--lire);
  margin-bottom: var(--e3); font-family: Georgia, 'Times New Roman', serif;
}
.section-claire .temoignage-guillemet { color: var(--lire-clair); }

.temoignage-phrase {
  font-size: clamp(23px, 5.4vw, 30px); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.02em; margin: 0 0 var(--e4);
}
.temoignage p { font-size: 18px; line-height: 1.6; }

.temoignage-signature {
  /* Aligne en haut, jamais centre : le texte fait plusieurs lignes en mobile et
     la photo se retrouvait au milieu du metier au lieu d'etre en face du nom. */
  display: flex; align-items: flex-start; gap: var(--e3);
  border-top: 1px dashed var(--sep); padding-top: var(--e4); margin-top: var(--e5);
  /* En mobile, la photo passe au-dessus : a cote, il ne restait que 190 px pour
     le texte, et le libelle en capitales tombait sur trois lignes. */
  flex-direction: column;
}
@media (min-width: 560px) { .temoignage-signature { flex-direction: row; align-items: center; } }
.section-claire .temoignage-signature { border-color: var(--sep-clair); }
/* La photo n'apparaît que le jour où la personne l'a fournie elle-même.
   Sans elle, la signature reste alignée et rien ne manque à l'œil. */
.temoignage-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 2px solid var(--accent);
}
.temoignage-nom  { font-size: 18px; font-weight: 700; margin: 0; }
/* Courte, toujours. La reference ne met en chasse fixe que des libelles brefs
   (« FSBK · SAISON 2026 ») : au-dela, l'interlettrage fait exploser la ligne. */
.temoignage-quoi {
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-2); margin: 6px 0 0; line-height: 1.5;
}
.temoignage-structure { font-size: 15px; color: var(--texte-2); margin: 6px 0 0; line-height: 1.45; }
.section-claire .temoignage-structure { color: var(--encre-2); }
.section-claire .temoignage-quoi { color: var(--encre-2); }
.temoignage-lien {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: var(--e2); font-size: 15px; text-decoration: none; color: var(--accent);
}
.section-claire .temoignage-lien { color: var(--ocre); }
.temoignage-lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Avant / après ─────────────────────────────────────────────
   La reference place une preuve chiffree AVANT les temoignages : un fait mesure
   d'abord, des gens qui parlent ensuite. L'inverse fait passer les temoignages
   pour de la complaisance. */
.avant-apres {
  display: grid; gap: var(--e3); grid-template-columns: 1fr;
  border-top: 1px dashed var(--sep); border-bottom: 1px dashed var(--sep);
  padding: var(--e4) 0; margin: var(--e4) 0;
}
@media (min-width: 560px) { .avant-apres { grid-template-columns: repeat(2, 1fr); gap: var(--e5); } }
.section-claire .avant-apres { border-color: var(--sep-clair); }

.ap-quoi {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lire); margin: 0 0 var(--e2);
}
.section-claire .ap-quoi { color: var(--lire-clair); }
.ap-ligne { display: flex; align-items: baseline; gap: 10px; margin: 0; flex-wrap: wrap; }
.ap-avant {
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 21px;
  color: var(--texte-2); text-decoration: line-through; text-decoration-thickness: 1px;
}
.section-claire .ap-avant { color: var(--encre-2); }
.ap-fleche { color: var(--lire); font-size: 18px; }
.ap-apres {
  font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700;
  font-size: clamp(30px, 7vw, 38px); line-height: 1; color: var(--texte);
}
.section-claire .ap-apres { color: var(--encre); }
.ap-quand { font-size: 15px; color: var(--texte-2); margin: var(--e1) 0 0; }
.section-claire .ap-quand { color: var(--encre-2); }

/* ── Questions fréquentes ──────────────────────────────────── */
.q { border-top: 1px solid var(--sep); }
.q:last-of-type { border-bottom: 1px solid var(--sep); }
.q summary {
  cursor: pointer; list-style: none; padding: var(--e4) 48px var(--e4) 0;
  font-size: 19px; font-weight: 700; position: relative; min-height: 56px; line-height: 1.35;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ''; position: absolute; right: 12px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .25s;
}
.q[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.q-rep { padding: 0 0 var(--e4); color: var(--texte-2); }
.q-rep p { font-size: 18px; }
.section-claire .q summary::after { border-color: var(--ocre); }

/* ── Formulaire ────────────────────────────────────────────── */
.champ { margin-bottom: var(--e4); }
.champ > label, .legende { display: block; font-size: 17px; font-weight: 700; margin-bottom: var(--e1); color: var(--texte); }
.aide { font-size: 16px; color: var(--texte-2); margin: 0 0 var(--e2); font-weight: 300; }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; max-width: 100%;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--sep); border-radius: 14px;
  padding: 16px var(--e3);
  font-family: inherit; font-size: 17px; /* 16 px minimum : en dessous, iOS zoome */
  min-height: 56px; transition: border-color .2s;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
input::placeholder, textarea::placeholder { color: #6E6A63; }

fieldset { border: 0; margin: 0 0 var(--e4); padding: 0; }

.choix {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px var(--e3); border: 1px solid var(--sep); border-radius: 14px;
  margin-bottom: var(--e2); cursor: pointer; min-height: 56px;
  transition: border-color .2s, background .2s;
}
.choix:hover { border-color: var(--texte-2); }
.choix input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.choix span { font-size: 17px; }
.choix:has(input:checked) { border-color: var(--accent); background: var(--surface); }

.form-etat { margin-top: var(--e3); font-size: 17px; min-height: 26px; }
.form-etat.ok { color: var(--accent); }
.form-etat.ko { color: #FF8A73; }

/* ── Pied de page ──────────────────────────────────────────── */
.pied { border-top: 1px solid var(--sep); padding: var(--e8) 0 var(--e5); background: var(--noir); color: var(--texte); }
.pied-liens { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-bottom: var(--e4); }
.pied-liens a { color: var(--texte-2); text-decoration: none; font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }
.pied-liens a:hover { color: var(--texte); }
.pied-bas { font-size: 16px; color: var(--texte-2); }

/* ── Divers ────────────────────────────────────────────────── */
.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--noir); padding: 14px var(--e3);
  border-radius: 0 0 12px 0; font-weight: 700; z-index: 200;
}
.saut-contenu:focus { left: 0; }

.liste-coches { list-style: none; margin: 0; padding: 0; }
.liste-coches li { position: relative; padding-left: var(--e5); margin-bottom: var(--e3); font-size: 18px; line-height: 1.55; }
.liste-coches li::before {
  content: ''; position: absolute; left: 6px; top: 10px;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.section-claire .liste-coches li::before { border-color: var(--ocre); }

/* Un chiffre qu'on voit de loin. */
.enorme {
  font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700;
  font-size: clamp(72px, 22vw, 120px); line-height: .9; color: var(--accent); margin: 0;
}
.section-claire .enorme { color: var(--ocre); }

/* ── LE PRINCIPE D'ATTRACTION, en deux dessins ────────────────────
   Dessine a la maison plutot que repris d'une image trouvee en ligne :
   meme idee, mais en francais, dans la charte, et libre de droits.
   Tout est en currentColor : un seul jeu de regles sert les deux fonds. */
.principe { display: grid; gap: var(--e3); margin-top: var(--e5); }
@media (min-width: 760px) { .principe { grid-template-columns: 1fr 1fr; gap: var(--e4); } }

.principe-temps {
  border: 1px solid var(--sep); border-radius: 20px;
  background: var(--surface); padding: var(--e4) var(--e3) var(--e3);
}
.section-claire .principe-temps { border-color: var(--sep-clair); background: var(--sable-2); }

.principe-dessin { display: block; width: 100%; height: auto; margin-bottom: var(--e3); }

.principe-temps h3 {
  font-size: clamp(19px, 3.4vw, 22px); line-height: 1.3;
  margin: 0 0 var(--e2);
}
.principe-temps p { margin: 0; color: var(--texte-2); font-size: 16px; }
.section-claire .principe-temps p { color: var(--encre-2); }

/* ── ÉCRANS COURTS ────────────────────────────────────────────────
   Mesuré le 28/09 en 375x667, le format des iPhone SE et des anciens
   modèles : l'appel du premier écran tombait 88 px sous la ligne de
   flottaison. La barre fixe porte déjà un bouton, mais le premier écran
   doit se suffire. On reprend ces 88 px sur l'aération, jamais sur le
   texte. Les `!important` surchargent des marges posées en style inline
   dans les heros : c'est leur seul cas d'emploi légitime ici. */
/* ── TROIS REPÈRES SUR UNE LIGNE ──────────────────────────────────
   Trois cartes empilées repoussaient le formulaire de contact à
   2,3 écrans sur un téléphone. Même information, tenue sur une ligne. */
.reperes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e2); list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep);
  padding: var(--e3) 0;
}
.section-claire .reperes { border-color: var(--sep-clair); }
.reperes li { display: block; }
.reperes b {
  display: block; font-family: 'Space Mono', ui-monospace, monospace;
  font-size: clamp(17px, 4.6vw, 21px); color: var(--lire); margin-bottom: 6px;
}
.section-claire .reperes b { color: var(--lire-clair); }
.reperes span { display: block; font-size: 13px; line-height: 1.4; color: var(--texte-2); }
.section-claire .reperes span { color: var(--encre-2); }

@media (max-height: 700px) {
  .hero { padding-top: var(--e4); }
  .hero h1 { font-size: clamp(32px, 9.8vw, 48px); }
  .hero h1.titre-long { font-size: clamp(28px, 8.2vw, 42px); }
  .hero .chapeau { margin-top: var(--e3) !important; }
  .hero .btns    { margin-top: var(--e4) !important; }
}

/* ── PREMIER ÉCRAN PLEINE HAUTEUR ─────────────────────────────────
   Demandé le 28/09 : la photo occupe l'écran, le texte se pose dessus.
   Sur téléphone, l'image est le fond et le texte s'appuie en bas sur un
   dégradé. Sur ordinateur, elle prend la moitié droite et le texte
   respire à gauche. `min-height` et non `height` : sur un écran court,
   le bloc grandit plutôt que de couper le bouton. */
.hero-plein { padding: 0; min-height: 100vh; min-height: 100svh; display: grid; overflow: hidden; }

.hero-plein .hero-photo { grid-area: 1 / 1; position: relative; }
.hero-plein .hero-photo picture { display: contents; }
.hero-plein .hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 6%;    /* le visage monte là où le voile est le plus léger */
  display: block;
}
/* Le voile qui rend le texte lisible. Mesuré au script, pas à l'œil. */
.hero-plein .hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    #0B0B0C 6%, rgba(11,11,12,.96) 30%, rgba(11,11,12,.90) 54%,
    rgba(11,11,12,.76) 70%, rgba(11,11,12,.30) 86%, rgba(11,11,12,.22) 100%);
}

.hero-plein > .wrap {
  grid-area: 1 / 1; position: relative; z-index: 2;
  align-self: end; padding-top: var(--e10); padding-bottom: var(--e8);
}

@media (min-width: 900px) {
  .hero-plein { grid-template-columns: 46% 54%; min-height: 92svh; }
  .hero-plein .hero-photo { grid-area: 1 / 2; }
  .hero-plein .hero-photo img { object-position: 50% 8%; }
  .hero-plein .hero-photo::after {
    background: linear-gradient(to right,
      #0B0B0C 0%, rgba(11,11,12,.95) 26%, rgba(11,11,12,.55) 48%,
      rgba(11,11,12,.12) 68%, transparent 84%);
  }
  .hero-plein > .wrap {
    grid-area: 1 / 1 / 2 / 3; align-self: center;
    padding-top: var(--e10); padding-bottom: var(--e10);
  }
  .hero-plein > .wrap > div { max-width: 46%; }
}

/* Variante : la photo a gauche. Elle repond au premier ecran, qui l'a a droite,
   et evite que les deux blocs pleine hauteur de la page se ressemblent. */
@media (min-width: 900px) {
  .hero-plein-gauche { grid-template-columns: 54% 46%; }
  .hero-plein-gauche .hero-photo { grid-area: 1 / 1; }
  .hero-plein-gauche .hero-photo img { object-position: 50% 12%; }
  .hero-plein-gauche .hero-photo::after {
    background: linear-gradient(to left,
      #131315 0%, rgba(19,19,21,.97) 40%, rgba(19,19,21,.72) 52%,
      rgba(19,19,21,.20) 70%, transparent 86%);
  }
  .hero-plein-gauche > .wrap > div { max-width: 46%; margin-left: auto; }
}
/* Sur telephone, le degrade part du fond de la section, pas du noir du premier ecran. */
.hero-plein-gauche .hero-photo::after {
  background: linear-gradient(to top,
    #131315 4%, rgba(19,19,21,.95) 26%, rgba(19,19,21,.90) 50%,
    rgba(19,19,21,.87) 70%, rgba(19,19,21,.78) 88%, rgba(19,19,21,.74) 100%);
}

/* Écran court : le bloc cesse de viser la pleine hauteur, sinon le bouton
   sort du champ sur les iPhone SE. */
@media (max-height: 700px) { .hero-plein { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveler { opacity: 1 !important; transform: none !important; }
  .hero-trace path { stroke-dashoffset: 0; }
  .hero-trace circle { opacity: 1; }
}