/* ============================================================================
   REKOV — header T + CTA « contour tracé »
   ----------------------------------------------------------------------------
   HEADER — logique retenue : il répond à l'objection du moment.

   Trois contraintes viennent de la construction du site :
   1. Une page, un argument linéaire. Les sections doivent être lues dans
      l'ordre : un sommaire n'offrirait qu'un raccourci vers un argument sorti
      de son contexte. Donc AUCUN menu, et pas de burger non plus.
   2. Une seule action, répétée six fois (dispositif verrouillé du brief). Le
      header est le seul endroit où elle est visible en permanence.
   3. Reste un emplacement libre, le seul emplacement permanent du site. Il
      porte une phrase indexée sur les SECTIONS — donc sur le raisonnement, pas
      sur un pourcentage de défilement. Ce qui est écrit à côté de l'action est
      toujours la réponse à la question que le visiteur se pose là.

   CTA — « contour tracé » : le contour réel du zéro Manrope ExtraBold, qui se
   referme au survol. Le héro emploie déjà ce geste à grande échelle ; l'employer
   ici le fait passer d'effet à système. Aucun cadre, aucun aplat : le rayon 0
   du socle n'est pas en cause, il n'y a simplement plus de rectangle.
============================================================================ */

/* ------------------------------------------------------------------ *
 * 1. HEADER
 * ------------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-block: clamp(0.9rem, 1.9vw, 1.3rem);
  background: rgba(18, 16, 14, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hair-d);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.header.is-scrolled {
  background: rgba(18, 16, 14, 0.95);
  padding-block: 0.72rem;
}
.header__in { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2rem); }

/* ---- La réponse du moment ---- */
.say {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 0.5em;
  padding-left: clamp(0.9rem, 2.4vw, 2rem);
  border-left: 1px solid var(--hair-d);
  font-size: clamp(0.78rem, 1vw, 0.875rem);
  font-weight: 500; color: var(--gris-inv);
  white-space: nowrap; overflow: hidden;
  margin: 0;
}
/* Le filet court en terre claire : le dispositif du bloc-phrase de
   positionnement (socle §5), réduit à une ligne. */
.say::before {
  content: ""; width: 24px; height: 2px; background: var(--terre);
  align-self: center; flex-shrink: 0; margin-right: 0.3em;
}
.say__t {
  display: block;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.say__t b { color: var(--blanc); font-weight: 800; letter-spacing: -0.015em; }
.say.is-out .say__t { opacity: 0; transform: translateY(-6px); }

/* Sous 860 px la phrase disparaît : tronquée, elle ne répondrait plus. */
@media (max-width: 860px) { .say { display: none; } }


/* ------------------------------------------------------------------ *
 * 2. CTA — APLAT + ZÉRO EN RÉSERVE
 *    Remplace .btn--primary partout : le site n'a qu'une seule action,
 *    donc une seule forme d'action.
 *
 *    Au repos, le bouton EST le favicon en variante inversée — aplat en
 *    couleur d'accent, zéro en réserve blanche (socle §4, actif validé) —
 *    suivi du libellé.
 *
 *    Au survol, l'aplat et le zéro échangent leurs rôles : le fond passe au
 *    ton clair et le zéro prend l'accent. C'est exactement la relation
 *    chromatique du logotype sur fond clair (rek et v en encre, 0 en terre
 *    brûlée). Le survol ne change donc pas d'apparence : il change de version
 *    de logo.
 *
 *    Pourquoi un aplat et non un contour : un contour a l'affordance d'un
 *    lien — aucune saillance, rien de pressable, un poids visuel inférieur au
 *    titre voisin. Un aplat en couleur d'accent est l'objet le plus visible de
 *    la page, ce qui est la définition opérationnelle d'un CTA.
 * ------------------------------------------------------------------ */

/* Le ton d'arrivée du survol dépend du registre : sur fond clair, virer au
   blanc ferait disparaître le bouton. Il vire alors à l'encre, et le zéro
   prend la terre claire — la version fond sombre du logotype. Dans les deux
   cas l'accent du zéro est celui que le socle §2 impose à son fond. */
:root {
  --btn-hv-bg: var(--blanc);
  --btn-hv-fg: var(--ink);
  --btn-hv-z:  var(--sig);
}
.sect--light,
.sect--light-2 {
  --btn-hv-bg: var(--ink);
  --btn-hv-fg: var(--blanc);
  --btn-hv-z:  var(--terre);
}

.btn--primary {
  --z: 1.45em;
  min-height: 48px;
  gap: 0.85rem;
  /* La marque se lit EN FIN de bouton : l'action d'abord, le prix ensuite —
     la structure d'une étiquette. Deux raisons de préférer cet ordre :
     · dans la barre, la marque en tête plaçait le zéro du bouton à quelques
       centimètres du zéro du logotype ; deux fois le même signe sur la même
       ligne affaiblit le logotype au lieu de le renforcer ;
     · en fin, le zéro tombe au point où le regard quitte le bouton, donc
       juste avant la décision.

     L'inversion est faite par row-reverse et non par réordonnancement du
     markup : dans le HTML la marque reste en premier. Le zéro vectoriel et
     l'exposant sont aria-hidden — ce sont des dessins — donc le tarif est
     porté à l'oral par un .sr-only « 0 € » placé dans la marque. Le nom
     accessible du bouton est ainsi « 0 € Obtenir mon diagnostic gratuit » :
     l'ordre visuel sert l'œil, l'ordre du markup sert l'oreille, sans
     compromis pour l'un ni pour l'autre.

     Le padding droit est augmenté : l'exposant arrive contre l'arête. */
  flex-direction: row-reverse;
  padding: 0.9rem 1.55rem 0.9rem 1.45rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Le filet intérieur et le balayage héritent d'une version antérieure du
   bouton : ils n'ont plus d'objet. */
.btn--primary::before, .btn--primary::after { display: none; }

/* L'enfoncement au clic ne peut PAS vivre sur le bouton lui-même : les six
   CTA portent data-magnetic, et l'effet magnétique écrit un transform EN LIGNE
   via gsap.quickTo dès l'entrée du pointeur. Une déclaration en ligne bat
   toujours une règle de feuille, donc un .btn--primary:active { transform }
   ne s'appliquerait jamais sur desktop — le bouton porte déjà un transform au
   moment où il devient cliquable. GSAP fixe aussi translate/rotate/scale en
   ligne, donc passer par les propriétés individuelles ne changerait rien.

   Le geste porte donc sur le CONTENU, que l'effet magnétique ne touche pas :
   la marque et le libellé s'enfoncent d'un pixel dans l'aplat. Lecture
   légèrement différente d'un bouton qui s'enfonce en entier, et au moins
   aussi juste : le contenu rentre dans la surface. */
.btn--primary > * { transition: transform var(--t-fast) var(--ease); }
.btn--primary:active > * { transform: translateY(1px); }

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--btn-hv-bg);
  color: var(--btn-hv-fg);
}

/* ---- La marque du bouton : le zéro et son exposant ----
        Le zéro portait déjà la marque ; l'exposant lui fait dire le tarif.
        « 0 € » devient un seul signe, à gauche du libellé.

        L'euro est du texte HTML et non un <text> SVG : il suit ainsi le rendu
        et la graisse de Manrope comme le reste de la page, au lieu de dépendre
        d'un chargement de police à l'intérieur du vecteur.

        Le padding droit de la marque réserve la place de l'exposant : sans
        lui, l'euro empiéterait sur la gouttière qui la sépare du libellé. */
.btn__mark {
  position: relative;
  display: inline-flex; align-items: flex-start;
  padding-right: 0.55em;
  flex-shrink: 0;
  /* Aucun décalage vertical : la marque suit le centrage de boîtes du flex.
     Un centrage sur l'encre du libellé a été essayé — il alignait le centre du
     zéro sur le centre visuel de « gratuit », descendante du g comprise, soit
     0,1425 em plus bas. Mesure juste, résultat visuellement moins bon : le
     zéro paraissait tomber sous la ligne. Écarté. */
}
.btn__eur {
  position: absolute; top: -0.02em; right: 0;
  font-size: var(--eur, 0.58em); line-height: 1;
  font-weight: 800; letter-spacing: 0;
  color: var(--blanc);
  transition: color 0.28s var(--ease);
}
.btn--primary:hover .btn__eur,
.btn--primary:focus-visible .btn__eur { color: var(--btn-hv-z); }

/* ---- Le zéro. Géométrie réelle Manrope ExtraBold avec son compteur, donc
        un anneau — jamais un cercle redessiné, jamais un zéro barré
        (socle §4, explicitement interdit). ---- */
.btn__zero {
  height: var(--z); width: auto;
  display: block; flex-shrink: 0;
}
.btn__zero path {
  fill: var(--blanc);
  transition: fill 0.28s var(--ease);
}
.btn--primary:hover .btn__zero path,
.btn--primary:focus-visible .btn__zero path { fill: var(--btn-hv-z); }

/* La flèche du bouton plein n'a plus lieu d'être : le zéro tient la gauche du
   libellé et l'aplat porte l'action. Masquée plutôt que retirée du HTML, pour
   que le repli sans CSS garde un signe de lien. */
.btn--primary .btn__arrow { display: none; }

/* ---- Déclinaisons ---- */
.btn--sm.btn--primary {
  --z: 1.3em;
  /* À cette échelle l'exposant tomberait sous 7 px : on le remonte en
     proportion plutôt que de le laisser devenir illisible. */
  --eur: 0.66em;
  min-height: 40px;
  padding: 0.6rem 1.1rem 0.6rem 1.05rem;
  gap: 0.7rem;
  font-size: 0.8125rem;
}
.btn--full.btn--primary {
  width: 100%; justify-content: center;
  min-height: 56px;
}


/* ------------------------------------------------------------------ *
 * 3. HÉRO SANS SUR-TITRE
 *    L'eyebrow retiré, le titre attaque seul. Il reprend l'espace que
 *    l'étiquette occupait plutôt que de laisser un vide en haut de bloc.
 * ------------------------------------------------------------------ */
.hero h1 { margin-top: 0; }
.hero__copy > h1:first-child { margin-top: clamp(0.5rem, 1.5vh, 1.2rem); }

/* ---- Le bouton d'envoi du formulaire ----
   Les cinq autres CTA s'inversent en encre au survol. Celui-ci reste dans la
   famille orange : c'est le dernier geste de la page, le seul dont le survol
   précède immédiatement l'envoi, et une bascule au noir y lit comme un recul
   plutôt que comme un encouragement.

   Attention au piège : la section 06 est en registre clair, où --accent
   résout DÉJÀ vers la terre brûlée #C2410C. Le bouton est donc orange au
   repos, et « devenir orange au survol » ne veut rien dire tel quel. Le
   survol monte donc d'un cran dans la même famille — terre claire #F0906B,
   plus lumineuse — ce qui donne un écart visible sans quitter l'orange.

   Le texte, le zéro et l'exposant passent en ENCRE : sur la terre claire, du
   blanc tomberait à 2,5:1, illisible. L'encre y tient 8:1. */
#diag-form .btn--primary:hover,
#diag-form .btn--primary:focus-visible {
  background: var(--terre);
  color: var(--ink);
}
#diag-form .btn--primary:hover .btn__zero path,
#diag-form .btn--primary:focus-visible .btn__zero path { fill: var(--ink); }
#diag-form .btn--primary:hover .btn__eur,
#diag-form .btn--primary:focus-visible .btn__eur { color: var(--ink); }
/* Le filet intérieur passe en encre atténuée : en blanc il disparaîtrait sur
   la terre claire, et c'est lui qui donne au bouton son épaisseur perçue. */
#diag-form .btn--primary:hover::before,
#diag-form .btn--primary:focus-visible::before { border-color: rgba(18, 16, 14, 0.4); }