/* =========================================================================
   Hera.ops — feuille de styles unique
   Tous les réglages (couleurs, typo, espacements, rayons, durées) sont
   regroupés dans le bloc :root ci-dessous. Modifier ici se répercute
   sur toute la page.
   ========================================================================= */

:root {
  /* ---- Couleurs (extraites du logo) ---------------------------------- */
  /* Crème éclairci de 40 % vers le blanc (#F4F1EA à l'origine). */
  --c-bg:          #F8F7F2;   /* crème, fond général */
  --c-surface:     #FFFFFF;   /* cartes et panneaux */
  --c-text:        #1A1A1A;   /* texte principal */
  --c-text-soft:   #5A5852;   /* texte secondaire */
  /* Un seul bleu pour toute la page. --c-btn et --c-btn-ink restent des
     alias : ils gardent le point d'accroche si les boutons doivent un jour
     reprendre une nuance à eux, sans dupliquer la valeur aujourd'hui. */
  --c-accent:      #2588F6;   /* accent unique */
  --c-accent-ink:  #0A79F5;   /* -10 % de luminosité, survols */
  --c-btn:         var(--c-accent);
  --c-btn-ink:     var(--c-accent-ink);
  --c-btn-dark:    var(--c-text);   /* bouton du header uniquement */
  --c-btn-dark-ink: #2A2A2A;        /* survol du bouton du header */
  /* Cercle fléché des boutons de réservation : blanc, à peine teinté de la
     couleur du bouton au survol. La flèche reprend la couleur du bouton. */
  --c-btn-icon:          #FFFFFF;
  /* Valeurs figées d'abord : color-mix() n'existe qu'à partir d'iOS 16.2.
     Sans ce repli, le cercle et la flèche devenaient invisibles au survol
     sur les iPhone plus anciens. Voir le bloc @supports après :root. */
  --c-btn-icon-ink:      #E6F2FE;
  --c-btn-dark-icon:     #FFFFFF;
  --c-btn-dark-icon-ink: #E5E5E5;
  --c-dark:        #0D0D0F;   /* fond du bloc intermédiaire */
  --c-dark-soft:   #A0A0A5;   /* texte secondaire sur fond sombre */
  --glow-btn:       0 12px 34px rgba(37, 136, 246, 0.40);  /* halo sous les boutons bleus */
  --glow-btn-hover: 0 14px 40px rgba(37, 136, 246, 0.52);  /* le même, au survol */
  --c-accent-lite: #5BA6F8;   /* +20 % de luminosité, fin du dégradé des icônes */
  --c-border:      #E3DFD5;   /* filets et bordures */
  --c-placeholder: #DCD8CE;   /* fond de l'image fondateur manquante */
  --c-accent-soft: rgba(37, 136, 246, 0.10);  /* accent à 10 %, fonds discrets */
  --c-accent-glow: rgba(37, 136, 246, 0.30);  /* liseré des cartes au survol */

  /* ---- Typographie --------------------------------------------------- */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Graisses : une seule échelle pour toute la page. La fonte étant
     variable, ces quatre valeurs ne coûtent aucune requête de plus. */
  --fw-body:    400;   /* texte courant */
  --fw-med:     600;   /* boutons, liens, libellés */
  --fw-bold:    700;   /* H3, chiffres, marque du footer */
  --fw-display: 800;   /* H1 et H2 */

  --fs-eyebrow:    0.75rem;
  /* Les surtitres bleus (.eyebrow) sont 20 % plus grands que les autres
     libellés en capitales ; à cette taille l'interlettrage est resserré. */
  --fs-eyebrow-lg: calc(var(--fs-eyebrow) * 1.2);
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  /* Titre du bloc sombre : entre le H2 et le H1, 32 px en mobile, 54 px en
     desktop, avec un interligne plus serré que le reste des titres. */
  --fs-h2-xl:   clamp(2rem, 1.1rem + 3.9vw, 3.4rem);
  /* Bloc sombre : surtitre 15 px, sous-titre 16 px en mobile à 22 px en desktop. */
  --fs-band-eyebrow: 0.9375rem;
  --fs-band-sub:     clamp(1rem, 0.72rem + 1.2vw, 1.375rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);

  --lh-tight: 1.05;
  --lh-head:    1.10;
  --lh-display: 1.06;
  --lh-body:  1.65;
  --ls-tight: -0.022em;
  --ls-wide:    0.14em;
  --ls-wide-lg: 0.115em;

  /* ---- Agrandissement logo + boutons ---------------------------------
     Un seul facteur pilote la taille du logo et de tous les boutons.
     --scale-nav vaut 1 en mobile pour que le header ne déborde pas à
     375 px, et passe à --scale-up à partir de 768 px (voir media query). */
  --scale-up:  1.15;
  --scale-nav: 1;
  /* Second +15 % du logo (1,15 x 1,15 = 1,3225), réservé au desktop : à
     375 px, logo + bouton + burger ne tiennent pas sur une ligne. Même
     arbitrage que --scale-nav pour le bouton. */
  --scale-logo: var(--scale-up);
  /* Header : logo et bouton « Contactez-nous » réduits de 15 % à toutes
     les largeurs, par-dessus --scale-logo et --scale-nav. */
  --scale-header: 0.85;

  --logo-h:      calc(26px * var(--scale-logo) * var(--scale-header));
  /* Tous les boutons hors header (hero, Constat, bloc sombre, boutons de
     retour des pages légales) reprennent le gabarit du CTA final. */
  --btn-fs:      var(--btn-fin-fs);
  --btn-h:       var(--btn-fin-h);
  /* Padding vertical des boutons sans cercle fléché ; les boutons fléchés
     définissent le leur (.btn--arrow). */
  --btn-py:      calc(var(--sp-3) * var(--scale-up) * var(--scale-final));
  --btn-px:      var(--btn-fin-px);
  --btn-arrow-pl: var(--btn-fin-arrow-pl);   /* marge gauche du texte, boutons fléchés */
  /* Liens de navigation : 15 % de plus que le petit texte courant. */
  --fs-nav:      calc(var(--fs-small) * 1.15);
  --btn-sm-fs:   calc(var(--fs-small) * var(--scale-nav) * var(--scale-header) * 1.265);   /* « Contactez-nous » +10 % puis +15 % */
  --btn-sm-h:    calc(38px * var(--scale-nav) * var(--scale-header));
  --btn-sm-py:   calc(var(--sp-2) * var(--scale-nav) * var(--scale-header));
  --btn-sm-pad-x: 6px;           /* resserré en mobile, élargi dès 768 px */
  --btn-sm-px:   calc(var(--btn-sm-pad-x) * var(--scale-nav) * var(--scale-header));
  --btn-sm-arrow-pl: calc(14px * var(--scale-nav) * var(--scale-header));
  /* CTA final : seul grand bouton de la page. --scale-final le réduit de
     18 % par rapport au gabarit large d'origine ; police, hauteur et les
     deux paddings passent par le même facteur, donc la pilule garde
     exactement ses proportions. */
  --scale-final:  0.82;
  --btn-fin-fs:   calc(var(--fs-body) * var(--scale-up) * var(--scale-final));
  --btn-fin-h:    calc(50px * var(--scale-up) * var(--scale-final));
  --btn-fin-py:   calc(var(--sp-4) * var(--scale-up) * var(--scale-final));
  --btn-fin-pad-x: var(--sp-5);   /* resserré en mobile, élargi dès 768 px */
  --btn-fin-px:   calc(var(--btn-fin-pad-x) * var(--scale-up) * var(--scale-final));
  --btn-fin-arrow-pl: calc(20px * var(--scale-up) * var(--scale-final));

  /* ---- Espacements ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Écart vertical TOTAL entre deux sections voisines : 80 px en mobile,
     140 px en desktop. Chaque section en pose la moitié en haut et en bas,
     si bien que deux sections adjacentes totalisent exactement --section-y
     au lieu de cumuler deux paddings pleins (~260 px auparavant). */
  --section-y: clamp(80px, 3.44rem + 6.63vw, 140px);
  --gutter:    clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --wrap:      1180px;
  --wrap-narrow: 760px;
  --nav-h:     80px;   /* hauteur totale, barre flottante + air */
  --nav-gap:   var(--sp-3);   /* air au-dessus de la barre */
  --nav-inset: var(--sp-2);   /* air latéral, aligné sur --gutter dès 768 px */
  --nav-pad-x: 6px;           /* padding interne, élargi dès 768 px */
  --nav-gap-x: var(--sp-2);   /* entre logo, menu et actions */
  --nav-menu-gap: var(--sp-4);/* entre deux liens, élargi dès 1024 px */
  /* Bloc bleu et barre de navigation partagent la largeur de la colonne de
     texte des sections : leurs bords tombent exactement au même endroit. */
  --card-wrap: calc(var(--wrap) - var(--gutter) * 2);
  /* Respiration verticale du bloc sombre, resserrée pour que le noir suive
     son contenu : 32 px en mobile, ~54 px à 1280 px, plafonnée à 56 px. */
  --band-y:      clamp(2rem, 1rem + 3vw, 3.5rem);
  /* Rythme interne, resserré lui aussi : 16 à 24 px sous le surtitre puis
     sous le titre, 24 à 32 px sous le sous-titre avant le bouton. */
  --band-gap-sm: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --band-gap-md: clamp(1.5rem, 1.25rem + 1vw, 2rem);

  /* ---- Formes et mouvement -------------------------------------------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill: 999px;

  --t-fast: 140ms;
  --t-med:  260ms;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  --marquee-speed: 42s;
  --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.05);
  --shadow-lift: 0 2px 4px rgba(26, 26, 26, 0.05), 0 14px 32px rgba(26, 26, 26, 0.08);

  /* ---- Barre d'outils -------------------------------------------------- */
  --tool-logo:   22px;   /* côté du logo monochrome */
  --tool-gap:    clamp(1.5rem, 1rem + 2vw, 3rem);   /* écart entre deux outils */
  --tool-fade:   9%;     /* largeur du fondu sur chaque bord */
  --tool-row-gap: var(--sp-4);

  /* ---- Icônes des cartes ---------------------------------------------- */
  --icon-box:  64px;   /* diamètre du rond en dégradé */
  --icon-size: 40px;   /* glyphe posé dessus */
  --icon-ink:   #FFFFFF;   /* trait principal du glyphe */
  --icon-ink-2: #BADAFC;   /* +55 %, second ton des glyphes */
  --icon-ring:  7s;        /* tour complet de la bague lumineuse */
  --pillar-stagger: 120ms;  /* décalage d'apparition d'une carte à l'autre */
  --viz-stagger:     90ms;  /* décalage d'une barre du graphique à la suivante */
  --viz-draw:       700ms;  /* durée de tracé de la courbe */
  --step-line:      700ms;  /* remplissage du trait sous chaque numéro d'étape */
}

/* Teintes de survol du cercle fléché, recalculées depuis les jetons de
   couleur quand le navigateur connaît color-mix(). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --c-btn-icon-ink:      color-mix(in srgb, #FFFFFF 90%, var(--c-btn-ink));
    --c-btn-dark-icon-ink: color-mix(in srgb, #FFFFFF 88%, var(--c-btn-dark-ink));
  }
}

/* =========================================================================
   Police auto-hébergée — fonte variable, une seule requête
   ========================================================================= */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* Une règle `display` sur un élément écrase l'attribut hidden hérité du
   navigateur : on le rétablit pour que script.js puisse masquer de façon
   fiable la ligne de capacité et les liens LinkedIn non renseignés. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Boutons et champs n'héritent pas de la police du document dans les
   feuilles par défaut des navigateurs — Safari notamment leur impose la
   sienne. On la leur repasse explicitement. */
button, input, select, textarea { font-family: inherit; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
/* Les grands titres passent en extra-gras : c'est là que la fonte donne
   son écart de graisse maximal face au texte courant en 400. */
h1, h2 { font-weight: var(--fw-display); }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--c-text);
  color: var(--c-bg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ---- Conteneurs ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: var(--wrap-narrow); margin-inline: auto; }
.center { text-align: center; }

.section { padding-block: calc(var(--section-y) / 2); }

/* ---- Éléments de texte partagés -------------------------------------- */
.eyebrow {
  font-size: var(--fs-eyebrow-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide-lg);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.h2--tight { margin-bottom: var(--sp-4); }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-text-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.center .lead { margin-inline: auto; }

/* =========================================================================
   Boutons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Garde-fou : un libellé long ne doit jamais élargir la page. */
.btn { max-width: 100%; }

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Halo diffus sous tous les boutons bleus, tiré de leur propre couleur.
   Il s'intensifie au survol, en même temps que le bouton se soulève. */
.btn--primary {
  background: var(--c-btn);
  color: #FFFFFF;
  box-shadow: var(--glow-btn);
}
.btn--primary:hover {
  background: var(--c-btn-ink);
  box-shadow: var(--glow-btn-hover);
}

/* Exception réservée au bouton du header : noir plutôt que bleu, pour le
   détacher de la barre et des autres appels à l'action. Aucun autre bouton
   de la page ne porte cette classe. */
.btn--dark { background: var(--c-btn-dark); color: #FFFFFF; }
.btn--dark:hover { background: var(--c-btn-dark-ink); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--ghost:hover { border-color: var(--c-text); background: rgba(26, 26, 26, 0.03); }

.btn--invert { background: var(--c-bg); color: var(--c-text); }
.btn--invert:hover { background: #FFFFFF; }

/* Bouton du header : suit --scale-nav, donc non agrandi en mobile. */
.btn--sm { min-height: var(--btn-sm-h); padding: var(--btn-sm-py) var(--btn-sm-px); font-size: var(--btn-sm-fs); }
.btn--final { min-height: var(--btn-fin-h); padding: var(--btn-fin-py) var(--btn-fin-px); font-size: var(--btn-fin-fs); }

/* ---- Boutons « Réserver un appel » : pilule + cercle fléché ------------
   Texte calé à gauche, cercle plein contre le bord droit qui occupe
   presque toute la hauteur. Chaque variante garde sa couleur de fond
   (bleu, ou noir pour le header) ; le cercle est blanc et la flèche prend
   la couleur du bouton.
   Placé après .btn--sm et .btn--final pour reprendre la main sur leur
   padding. */
.btn--arrow {
  --arrow-h: var(--btn-h);
  --arrow-inset: 3px;
  --arrow-pl: var(--btn-arrow-pl);
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--arrow-h);
  padding: var(--arrow-inset) var(--arrow-inset) var(--arrow-inset) var(--arrow-pl);
}
.btn--sm.btn--arrow {
  --arrow-h: var(--btn-sm-h);
  --arrow-inset: 2px;
  --arrow-pl: var(--btn-sm-arrow-pl);
  gap: var(--sp-2);
}
.btn--final.btn--arrow {
  --arrow-h: var(--btn-fin-h);
  --arrow-pl: var(--btn-fin-arrow-pl);
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* - 2px : la bordure transparente de .btn, pour que le cercle ne pousse
     pas la hauteur du bouton au-delà de --arrow-h. */
  width: calc(var(--arrow-h) - var(--arrow-inset) * 2 - 2px);
  height: calc(var(--arrow-h) - var(--arrow-inset) * 2 - 2px);
  border-radius: var(--r-pill);
  background: var(--c-btn-icon);
  color: var(--c-btn);          /* couleur de la flèche */
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--dark .btn__icon { background: var(--c-btn-dark-icon); color: var(--c-btn-dark); }
/* Survols réservés aux appareils à pointeur : sur écran tactile, :hover
   reste collé après un tap, ce qui teintait le cercle et décalait la flèche
   hors du centre. */
@media (hover: hover) {
  .btn--primary:hover .btn__icon { background: var(--c-btn-icon-ink); color: var(--c-btn-ink); }
  .btn--dark:hover .btn__icon { background: var(--c-btn-dark-icon-ink); color: var(--c-btn-dark-ink); }
}

.btn__icon svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-fast) var(--ease);
}
/* Survol : le fond s'assombrit (règles de chaque variante) et la flèche
   glisse légèrement vers la droite. */
@media (hover: hover) {
  .btn--arrow:hover .btn__icon svg { transform: translateX(3px); }
}

/* Header sous 768 px : dans le cercle de 26 px, une flèche à 46 % ne
   faisait que 12 px pour un trait de 1,1 px, quasi invisible sur téléphone.
   Flèche agrandie (58 %) et trait épaissi (≈ 1,9 px) pour rester lisible. */
@media (max-width: 767.98px) {
  .btn--sm .btn__icon svg { width: 58%; height: 58%; stroke-width: 3; }
}

/* Header en petit mobile. Depuis la réduction du logo et du bouton, le
   cercle fléché tient dès 375 px, à condition de resserrer un peu la marge
   gauche du texte et l'écart avec le cercle (mesuré : il manque encore
   11 px à 360 px). En dessous de 375 px, le bouton reste une pilule
   simple, sans cercle. Les autres boutons gardent leur cercle partout. */
@media (max-width: 479.98px) {
  .btn--sm.btn--arrow { --arrow-pl: 10px; gap: 6px; }
}
@media (max-width: 374.98px) {
  .btn--sm.btn--arrow { justify-content: center; padding: var(--btn-sm-py) var(--btn-sm-px); }
  .btn--sm .btn__icon { display: none; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; }

/* =========================================================================
   1. Navigation
   ========================================================================= *//* La bande est transparente sur toute la largeur ; c'est .nav__inner,
   contenu dans le même .wrap que les sections, qui porte le fond, le flou
   et les coins arrondis. La barre ne touche donc plus les bords. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--nav-gap) var(--nav-inset);
}

.nav__inner {
  position: relative;        /* repère du panneau déroulant mobile */
  display: flex;
  align-items: center;
  gap: var(--nav-gap-x);
  /* La barre se cale exactement sur la colonne de texte des sections :
     ses bords tombent au même endroit que ceux du bloc bleu. */
  max-width: var(--card-wrap);
  margin-inline: auto;
  min-height: calc(var(--nav-h) - var(--nav-gap) * 2);
  padding-inline: var(--nav-pad-x);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.nav.is-stuck .nav__inner {
  border-color: var(--c-border);
  box-shadow: var(--shadow-soft);
}

.nav__logo { display: block; flex: none; }
.nav__logo img { width: auto; height: var(--logo-h); }

.nav__menu {
  display: none;
  margin-inline: auto;
  gap: var(--nav-menu-gap);
}

.nav__link {
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--c-text-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--c-text); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);          /* élargi à --sp-3 dès 768 px */
  margin-left: auto;
}

.nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--c-text);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Panneau déroulant mobile */
.nav__menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  /* Le panneau se dimensionne sur son contenu plutôt que de s'étendre d'un
     bord à l'autre de la barre : il s'ouvre sous le bouton, aligné sur son
     bord droit. `left: auto` laisse le navigateur calculer la largeur, qui
     se cale alors sur le plus long des trois libellés, marges comprises. */
  top: calc(100% + var(--sp-2));
  right: 0;
  left: auto;
  max-width: 100%;
  margin: 0;
  /* Marge latérale propre au panneau : --nav-pad-x ne vaut que 6 px sur
     mobile, réglé pour une barre pleine largeur, et serrerait le texte
     contre les bords maintenant que la boîte épouse son contenu. */
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.nav__menu.is-open .nav__link {
  /* 10 px plutôt que --sp-4 (16) : le panneau passe de 202 à 160 px de haut.
     Valeur hors échelle assumée — le palier en dessous (--sp-2, 8 px) ramènerait
     le lien à 43 px, sous le seuil de 44 px d'une cible tactile confortable. */
  padding-block: 0.625rem;
  font-size: var(--fs-body);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.nav__menu.is-open .nav__link:last-child { border-bottom: none; }

/* =========================================================================
   2. Hero
   ========================================================================= */
.hero {
  /* Le hero garde un peu plus d'air en haut, sous la nav fixe. */
  padding-top: calc(var(--nav-h) + var(--section-y) * 0.75);
  padding-bottom: calc(var(--section-y) / 2);
}
.hero__inner { max-width: 900px; margin-inline: auto; text-align: center; }

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin-bottom: var(--sp-5);
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--c-text-soft);
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.hero__capacity {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}

/* =========================================================================
   3. Barre de logos — deux lignes défilant en sens opposés
   ========================================================================= */
.tools {
  padding-block: var(--sp-7);
  border-block: 1px solid var(--c-border);
  overflow: hidden;
}

.tools__label {
  position: relative;
  isolation: isolate;          /* le surlignage passe derrière le texte, pas derrière la section */
  width: fit-content;          /* le libellé épouse son texte pour que le surlignage le suive */
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: var(--sp-5);
}
/* Surlignage façon marqueur : fond noir sous le texte blanc, qui déborde un peu de
   chaque côté, légèrement incliné et aux coins irréguliers. Le côté droit
   est raccourci de l'interlettrage que letter-spacing ajoute après la
   dernière lettre, pour que le surlignage reste centré sur le texte. */
.tools__label::before {
  content: "";
  position: absolute;
  inset: 0.1em calc(var(--ls-wide) - 0.5em) 0.1em -0.5em;
  z-index: -1;
  background: var(--c-dark);
  border-radius: 0.3em 0.55em 0.35em 0.6em / 0.55em 0.3em 0.6em 0.35em;
  transform: rotate(-1deg) skewX(-6deg);
}

/* Fondu sur les deux bords : le masque s'applique au conteneur des lignes,
   les logos ont le leur sur un autre élément, les deux ne se gênent pas. */
.tools__rows {
  display: flex;
  flex-direction: column;
  gap: var(--tool-row-gap);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tool-fade), #000 calc(100% - var(--tool-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--tool-fade), #000 calc(100% - var(--tool-fade)), transparent 100%);
}

.marquee {
  display: flex;
  gap: var(--tool-gap);
  width: max-content;
  animation: marquee var(--marquee-speed) linear infinite;
}
/* Seconde ligne : même animation, sens inverse. */
.marquee--reverse { animation-direction: reverse; }

/* Survol de la section : les deux lignes s'arrêtent ensemble. */
.tools:hover .marquee { animation-play-state: paused; }

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

.tool {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
  white-space: nowrap;
}

/* Outils dont le logo n'est disponible sous aucune licence utilisable : le
   nom s'affiche seul, mais assumé plutôt que par défaut. Graisse portée à
   700, contre 600 pour les entrées à logo, et couleur de marque posée par
   --brand sur le <li>. Sans --brand, le nom garde la couleur du texte. La
   taille, elle, reste celle de toutes les autres entrées. */
.tool--text {
  font-weight: 700;
  color: var(--brand, var(--c-text));
}

/* Le SVG sert de masque, la couleur vient de --logo-c posé sur l'élément :
   chaque logo porte ainsi sa couleur de marque. Sans --logo-c, il retombe
   sur la couleur du texte. */
.tool__logo { display: none; }

@supports ((-webkit-mask-image: url("x.svg")) or (mask-image: url("x.svg"))) {
  .tool__logo {
    display: block;
    flex: none;
    width: var(--tool-logo);
    height: var(--tool-logo);
    background-color: var(--logo-c, currentColor);
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--tool-gap) / 2)); }
}

/* =========================================================================
   4. Problème
   ========================================================================= */
/* Deux colonnes asymétriques, texte aligné à gauche et visuel à droite :
   la section ne doit pas répéter la pile centrée du hero. Le fond reste
   celui de la page. En dessous de 1024 px, les colonnes s'empilent. */
.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.problem__grid > * { min-width: 0; }

.problem .btn { margin-top: var(--sp-7); }

/* Sur téléphone, les colonnes s'empilent : la colonne de texte n'a plus le
   visuel à sa droite pour l'équilibrer, et son alignement à gauche la faisait
   paraître décalée dans la page. Elle repasse centrée sous 768 px. Le mockup
   de tâches, lui, garde son alignement propre. */
@media (max-width: 767.98px) {
  .problem__text { text-align: center; }
  /* L'accroche est limitée à 56ch : sans marge auto, sa boîte reste calée à
     gauche et le texte se centre dans cette boîte, pas dans la colonne. */
  .problem__text .lead { margin-inline: auto; }
}

/* Mockup « fenêtre d'application » : fond sombre pour se détacher du crème,
   quatre tâches fictives qui apparaissent puis se cochent en boucle
   (script.js, initTasks). */
.tasks {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(37, 136, 246, 0.14), transparent 70%),
    var(--c-dark);
  border: 1px solid rgba(37, 136, 246, 0.22);
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px rgba(13, 13, 15, 0.08), 0 24px 56px rgba(13, 13, 15, 0.18);
  color: #FFFFFF;
}

.tasks__bar { display: flex; gap: 6px; padding: var(--sp-1) 0 var(--sp-4); }
.tasks__dot { width: 10px; height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); }

.tasks__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-sm);
}

/* Cercle vide en attente ; la coche pleine, en bleu d'accent, vient
   se poser par-dessus une fois la tâche traitée. */
.task__check { position: relative; flex: none; width: 26px; height: 26px; }
.task__check::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
}
.task__check svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task__title { font-size: var(--fs-small); font-weight: var(--fw-med); line-height: 1.35; }
.task__meta  { font-size: 0.8125rem; line-height: 1.35; color: var(--c-dark-soft); }

/* Sans JavaScript, les quatre tâches sont affichées et cochées. */
.js .tasks .task {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 350ms var(--ease), translate 350ms var(--ease);
}
.js .tasks .task.is-in { opacity: 1; translate: none; }
.js .tasks .task__check svg {
  transform: scale(0);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js .tasks .task.is-done .task__check svg { transform: scale(1); }

/* =========================================================================
   5. Pourquoi Hera.ops
   ========================================================================= */
.why .narrow { margin-bottom: var(--sp-8); }
/* Titre « // Les raisons de nous rejoindre » : réduit de 15 % puis
   encore de 10 % par rapport aux autres H2 (0,85 × 0,9 = 0,765). */
.why__title { font-size: calc(var(--fs-h2) * 0.765); }

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pillar {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);   /* 24 px en haut et en bas : la carte suit son contenu */
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Le liseré bleu s'allume par-dessus la bordure, sans décaler la carte. */
.pillar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--c-accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}

/* Pastille noire, glyphe bicolore posé dessus, et une bague lumineuse qui
   tourne lentement autour. Trois couches empilées sans z-index négatif :
   ::before porte la bague, ::after la pastille qui la recouvre sauf sur
   2 px de bord, le SVG passe au-dessus des deux. */
.pillar__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box);
  height: var(--icon-box);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(13, 13, 15, 0.22);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.pillar__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    transparent 0 54%,
    var(--c-accent) 70%,
    var(--icon-ink-2) 79%,
    var(--c-accent) 86%,
    transparent 94% 100%);
  animation: icon-ring var(--icon-ring) linear infinite;
}

/* La pastille elle-même : noir, relevé d'un halo bleu en haut à gauche pour
   éviter un aplat mort, comme le bloc sombre plus bas dans la page. */
.pillar__icon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 34% 26%, rgba(37, 136, 246, 0.42), transparent 62%),
    var(--c-dark);
}

/* z-index explicite : sans lui, ::after est peint APRÈS le contenu et
   recouvrirait le glyphe. */
.pillar__icon svg { position: relative; z-index: 1; }

/* Les trois bagues sont décalées pour ne pas tourner à l'unisson. */
.pillars .pillar:nth-child(2) .pillar__icon::before { animation-delay: calc(var(--icon-ring) / -3); }
.pillars .pillar:nth-child(3) .pillar__icon::before { animation-delay: calc(var(--icon-ring) / -1.5); }

@keyframes icon-ring { to { transform: rotate(360deg); } }
.pillar__icon svg { width: var(--icon-size); height: var(--icon-size); }
/* Deux tons dans un même glyphe : trait blanc, parties secondaires en bleu clair. */
.pillar__icon .ico-1 { stroke: var(--icon-ink); }
.pillar__icon .ico-2 { stroke: var(--icon-ink-2); }
.pillar__icon .ico-2-fill { fill: var(--icon-ink-2); stroke: none; }

/* Cartes 01 et 02 : le cercle et son compteur sur une même ligne. */
.pillar__viz {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.pillar__viz .pillar__icon { margin-bottom: 0; }

.pillar__metric {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  /* Bleu d'accent et non blanc : le compteur est posé sur la carte blanche,
     à côté du cercle, pas à l'intérieur du dégradé. */
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.viz { width: var(--icon-size); height: var(--icon-size); }

/* ---- Carte 01 : mallette dont les pièces montent en cascade --------- */
.viz__bar {
  fill: var(--icon-ink);
  transform-box: fill-box;
  transform-origin: bottom;
}
/* Joint du rabat dans la couleur de la pastille, fermoir en accent. */
.viz__bar--seam  { fill: var(--c-dark); }
.viz__bar--clasp { fill: var(--c-accent); }
/* Sans JavaScript, les pièces sont déjà à leur taille finale. */
.js .pillar__viz .viz__bar {
  transform: scaleY(0.06);
  opacity: 0;
  transition: transform 520ms var(--ease), opacity 220ms var(--ease);
}
.js .pillar__viz.is-playing .viz__bar { transform: scaleY(1); opacity: 1; }
.js .pillar__viz .viz__bar:nth-child(1) { transition-delay: 0ms; }
.js .pillar__viz .viz__bar:nth-child(2) { transition-delay: var(--viz-stagger); }
.js .pillar__viz .viz__bar:nth-child(3) { transition-delay: calc(var(--viz-stagger) * 2); }
.js .pillar__viz .viz__bar:nth-child(4) { transition-delay: calc(var(--viz-stagger) * 3); }
.js .pillar__viz .viz__bar:nth-child(5) { transition-delay: calc(var(--viz-stagger) * 4); }

/* ---- Carte 02 : horloge qui se trace, puis l'étincelle de l'IA ------ */
.viz__line {
  fill: none;
  stroke: var(--icon-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz__spark {
  fill: var(--icon-ink);
  transform-box: fill-box;
  transform-origin: center;
}
/* --viz-len est la longueur réelle du tracé, posée par script.js. */
.js .pillar__viz .viz__line {
  stroke-dasharray: var(--viz-len, 44);
  stroke-dashoffset: var(--viz-len, 44);
  transition: stroke-dashoffset var(--viz-draw) var(--ease);
}
.js .pillar__viz.is-playing .viz__line { stroke-dashoffset: 0; }
.js .pillar__viz .viz__spark {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  transition-delay: calc(var(--viz-draw) * 0.8);
}
.js .pillar__viz.is-playing .viz__spark { opacity: 1; transform: scale(1); }

.pillar__title {
  font-size: calc(var(--fs-h3) * 1.15);   /* titres des cartes « Important » +15 % */
  line-height: var(--lh-head);
  margin-bottom: calc(var(--sp-4) * 1.25);   /* écart titre / texte : 20 px (12 px à l'origine) */
}

.pillar__text {
  color: var(--c-text-soft);
  line-height: 1.45;   /* interligne resserré d'environ 12 % (1,65 hérité du corps de texte) */
}

@media (hover: hover) and (pointer: fine) {
  .pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(26, 26, 26, 0.05), 0 22px 44px var(--c-accent-glow);
  }
  .pillar:hover::after { opacity: 1; }
  .pillar:hover .pillar__icon {
    transform: translateY(-3px) scale(1.07) rotate(-4deg);
    box-shadow: 0 12px 26px rgba(13, 13, 15, 0.30), 0 0 22px var(--c-accent-glow);
  }
  /* La bague accélère au survol de la carte. */
  .pillar:hover .pillar__icon::before { animation-duration: calc(var(--icon-ring) / 3); }
}

/* Emplacement témoignage — activé en décommentant le bloc dans index.html */
.quote {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}
.quote cite { display: block; margin-top: var(--sp-3); font-style: normal; font-weight: 600; color: var(--c-text); }

/* =========================================================================
   6. Bandeau intermédiaire
   ========================================================================= */
/* La section ne porte que le rythme vertical : le bloc sombre est centré,
   le crème de la page reste visible de chaque côté. */
.band { padding-block: calc(var(--section-y) / 2); }

/* Le halo radial évite un noir totalement plat : à peine 7 % de blanc au
   centre, posé sur le fond sombre. */
.band__card {
  max-width: var(--card-wrap);
  margin-inline: auto;
  padding: var(--band-y) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: 0;   /* coins carrés, propres à ce bloc */
  background:
    radial-gradient(ellipse 72% 62% at 50% 42%, rgba(255, 255, 255, 0.07), transparent 72%),
    var(--c-dark);
  color: #FFFFFF;
}
/* Le titre respire plus large que le --wrap-narrow des autres sections. */
.band__card .narrow { max-width: 880px; }

/* Surtitre du bloc sombre : plus grand et plus espacé que les surtitres
   des sections claires, l'indentation compense l'espace que letter-spacing
   ajoute après la dernière lettre d'un texte centré. */
.band__eyebrow {
  font-size: var(--fs-band-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--band-gap-sm);
}

.band__title {
  /* Titre du bloc sombre : 10 % sous --fs-h2-xl, qui sert aux autres titres. */
  font-size: calc(var(--fs-h2-xl) * 0.9);
  line-height: var(--lh-display);
  text-wrap: balance;
  margin-bottom: var(--band-gap-sm);
}

.band__sub {
  font-size: var(--fs-band-sub);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-dark-soft);
  margin-bottom: var(--band-gap-md);
  text-wrap: pretty;
}
/* Seconde partie du titre, en bleu d'accent. */
.band__accent { color: var(--c-accent); }



/* =========================================================================
   6 bis. Comment ça marche
   ========================================================================= */
.steps .narrow { margin-bottom: var(--sp-8); }
/* Sans titre de section, le surtitre sert de titre : même gabarit que les
   autres surtitres, mais en noir. */
.steps .eyebrow { color: var(--c-text); }

.steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
}

/* Grand numéro bleu suivi d'un trait qui file vers la droite : les trois
   cartes se lisent comme une progression. */
.step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.step__head::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-soft));
  transform-origin: left center;
}

.step__num {
  font-size: clamp(1.875rem, 1.6rem + 0.9vw, 2.25rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  margin-bottom: var(--sp-3);
}

.step__text { color: var(--c-text-soft); }

@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* =========================================================================
   7. FAQ
   ========================================================================= */
.faq .center { margin-bottom: var(--sp-8); }

.accordion { border-top: 1px solid var(--c-border); }

.acc { border-bottom: 1px solid var(--c-border); }
.acc h3 { margin: 0; font-size: inherit; letter-spacing: normal; }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-head);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.acc__btn:hover { color: var(--c-accent); }

.acc__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }

.acc__panel { overflow: hidden; }
.acc__panel p {
  padding-bottom: var(--sp-5);
  max-width: 62ch;
  color: var(--c-text-soft);
}

/* =========================================================================
   8. Fondateur
   ========================================================================= */
.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  /* Section resserrée : photo et texte tiennent ensemble dans ~780 px,
     centrés (le padding de .wrap s'ajoute de chaque côté). */
  max-width: calc(780px + var(--gutter) * 2);
}

/* Le fond gris est l'état par défaut : il tient lieu de placeholder tant que
   assets/fondateur.jpg n'est pas chargé, et reste visible si le fichier est
   absent. L'image ne se révèle qu'une fois chargée avec succès (classe posée
   par script.js), ce qui évite toute image cassée et tout clignotement. */
.founder__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--c-placeholder);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* En pile (mobile et tablette), la photo est bridée puis centrée : en pleine
     largeur elle écraserait le texte qui la suit. */
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}
.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .founder__media:not(.is-loaded) img { visibility: hidden; }

.founder__body p + p { margin-top: var(--sp-4); }
/* Logo du header inséré dans la dernière phrase, à la place du mot
   « Hera.ops ». Le PNG est découpé sur la boîte d'encre du wordmark : son
   bas coïncide avec la ligne de base des lettres, d'où l'alignement sur la
   ligne de base du texte plutôt que middle, qui le ferait descendre. */
.founder__logo {
  display: inline-block;
  width: auto;
  height: 1.05em;
  vertical-align: baseline;
  margin-inline-end: 0.1em;
}
/* Présentation mise en forme comme une citation du fondateur : texte en
   noir et en italique, grands guillemets français bleus restés droits.
   Geist n'a pas de version italique : le navigateur penche les lettres. */
.founder__quote { margin: 0; color: var(--c-text); font-style: italic; font-size: 0.85em; }   /* texte -15 % */
/* line-height: 0 : le guillemet agrandi ne rehausse pas la ligne qui le
   porte ; le léger décalage vertical le recentre sur les minuscules. */
/* Chiffres d'audience et icônes sociales, sous la photo : même bord gauche
   que la photo, et bridés à sa largeur quand les colonnes sont empilées.
   Élément de grille à part pour que, en deux colonnes, le texte puisse se
   centrer sur la photo seule. La marge négative ramène l'écart de grille
   (32 px) à 24 px sous la photo. */
.founder__meta {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  margin-top: calc(var(--sp-5) - var(--sp-6));
}

/* Chiffres d'audience sous la photo : deux statistiques côte à côte,
   alignées à gauche sur la photo, sans cadre. Chiffre de 20 à 24 px en
   graisse fine, libellé gris de 12 px. */
.stats {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}
.stats__value {
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.stats__label {
  white-space: nowrap;         /* « vues à travers les plateformes » sur une seule ligne */
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--c-text-soft);
}

/* Liens sociaux sous les chiffres, alignés à gauche comme eux : icônes
   posées en masque, comme les logos d'outils, dans la couleur officielle de
   chaque application ; légère transparence au survol. Facebook et Instagram viennent de simple-icons ;
   LinkedIn, retiré de simple-icons, vient de Bootstrap Icons (licence MIT).
   Lien de 32 px autour d'une icône de 22 px + écart de 8 px = 18 px entre
   deux icônes. La marge gauche de -5 px compense le vide du lien pour que
   la première icône tombe sur le bord gauche des chiffres. */
.social {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0 -5px;
  padding: 0;
  list-style: none;
}
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  transition: opacity var(--t-fast) var(--ease);
}
.social__link:hover { opacity: 0.75; }
.social__icon {
  width: 22px;
  height: 22px;
  background: var(--c-text);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
/* Couleurs officielles des marques, seules valeurs de couleur codées en dur
   hors des jetons, comme les logos d'outils : bleu Facebook (simple-icons),
   bleu LinkedIn, et dégradé de l'icône d'application pour Instagram. */
.social__icon--facebook  { background: #0866FF; }
.social__icon--linkedin  { background: #0A66C2; }
.social__icon--instagram {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

.founder__qmark {
  font-size: clamp(0.95625rem, 0.816rem + 0.51vw, 1.275rem);   /* -25 %, -20 % puis -15 % : 15,3 à 20,4 px */
  font-weight: var(--fw-bold);
  line-height: 0;
  font-style: normal;
  color: var(--c-accent);
  vertical-align: -0.12em;
}

/* =========================================================================
   9. CTA final
   ========================================================================= */
.final {
  border-top: 1px solid var(--c-border);
  /* Espace avant le footer élargi. Il est fait de deux morceaux, la marge
     basse de la section et la marge haute du footer : le facteur porte sur
     leur somme, et tout est ajouté ici pour ne pas toucher au footer des
     pages légales. En mobile, où le bouton et le footer se touchaient
     presque, le supplément monte à 48,5 %, soit un espace total augmenté de
     10 % puis encore de 10 % ; il revient à 10 % dès 768 px. */
  --final-extra: 0.485;
  padding-bottom: calc(var(--section-y) / 2 + (var(--section-y) / 2 + var(--sp-6)) * var(--final-extra));
}
.final .btn { margin-top: var(--sp-7); }

/* =========================================================================
   10. Footer
   ========================================================================= */
.footer {
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.footer__brand { font-weight: 700; color: var(--c-text); letter-spacing: var(--ls-tight); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); }

/* Footer de l'accueil : trois colonnes, puis une ligne de mentions légales.
   Tout est aligné à gauche et porté par .footer--home, si bien que les pages
   légales gardent leur footer centré sur une seule ligne. */
.footer--home .footer__inner {
  display: grid;
  /* Mobile : la marque occupe toute la largeur, Navigation et Suivez-nous se
     partagent la ligne suivante, à deux colonnes égales. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--sp-6) var(--sp-5);
  text-align: left;
}
.footer__col--brand { grid-column: 1 / -1; }

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Colonne de marque : logo, ligne de présentation puis le bouton sombre du
   header. L'ensemble est 15 % plus grand que sa première version. Les jetons
   --btn-sm-* sont redéclarés ici plutôt qu'au travers de --scale-header :
   ceux de :root y sont déjà calculés, alors que ceux-ci se résolvent sur la
   colonne et emportent donc le bouton. Le header garde ses valeurs. */
.footer__col--brand {
  --btn-sm-fs:   calc(var(--fs-small) * var(--scale-nav) * var(--scale-header) * 1.265 * 1.15);
  --btn-sm-h:    calc(38px * var(--scale-nav) * var(--scale-header) * 1.15);
  --btn-sm-py:   calc(var(--sp-2) * var(--scale-nav) * var(--scale-header) * 1.15);
  --btn-sm-px:   calc(var(--btn-sm-pad-x) * var(--scale-nav) * var(--scale-header) * 1.15);
  --btn-sm-arrow-pl: calc(14px * var(--scale-nav) * var(--scale-header) * 1.15);
  gap: calc(var(--sp-4) * 1.15);
}
.footer__logo { display: block; }
/* Logo plus discret qu'en haut de page : 80 % de la hauteur du header, puis
   agrandi de 15 % avec le reste de la colonne, soit 92 %. */
.footer__logo img { width: auto; height: calc(var(--logo-h) * 0.8 * 1.15); }
.footer__tagline {
  margin: 0;
  max-width: 32ch;
  font-size: calc(var(--fs-small) * 1.15);
  color: var(--c-text-soft);
}

/* Titres des deux colonnes de droite : discrets, sur le modèle des surtitres
   du site, en noir pour se détacher des liens gris. */
.footer__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__link {
  color: var(--c-text-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer__link:hover { color: var(--c-accent); }

/* Icônes sociales du footer : empilées, suivies du nom du réseau, et en gris
   plutôt qu'aux couleurs de marque. Les trois classes de ces sélecteurs
   passent devant .social__icon--facebook et consorts, dégradé Instagram
   compris ; la section fondateur, elle, garde ses couleurs. */
.footer--home .social--stack .social__icon {
  background: var(--c-text-soft);
  transition: background-color var(--t-fast) var(--ease);
}
/* Survol aligné sur les autres liens du footer : passage au bleu d'accent,
   icône et nom ensemble, au lieu de l'atténuation utilisée plus haut. */
.footer--home .social__link--named:hover { opacity: 1; }
.footer--home .social__link--named:hover .social__icon { background: var(--c-accent); }
.footer--home .social__link--named:hover .social__name { color: var(--c-accent); }
.social__name { transition: color var(--t-fast) var(--ease); }

.social--stack {
  flex-direction: column;
  gap: var(--sp-1, 4px);
  margin: 0 0 0 -5px;
}
.social__link--named {
  width: auto;
  height: auto;
  justify-content: flex-start;
  gap: var(--sp-2);
  padding: 4px 5px;
  text-decoration: none;
}
.social__name { color: var(--c-text-soft); }

/* Ligne de mentions légales : détachée par un filet discret, plus petite et
   plus grise que le reste du footer. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-soft);
}
.footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer__legal a:hover { color: var(--c-accent); }
.footer__links a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--c-text); }

/* =========================================================================
   Apparition au scroll
   ========================================================================= */
/* L'état masqué n'est appliqué que si JavaScript est actif (classe .js posée
   dans le <head>), sinon le contenu resterait invisible pour toujours. */
/* L'apparition au scroll passe par `translate`, pas par `transform` : les
   deux propriétés se composent, si bien que le soulèvement au survol d'une
   carte n'est plus écrasé par `.js .reveal.is-visible`, plus spécifique. */
.reveal { transition: opacity 600ms var(--ease), translate 600ms var(--ease); }
.js .reveal { opacity: 0; translate: 0 16px; }
.js .reveal.is-visible { opacity: 1; translate: none; }
.js .reveal:nth-child(2) { transition-delay: 60ms; }
.js .reveal:nth-child(3) { transition-delay: 120ms; }
.js .reveal:nth-child(4) { transition-delay: 180ms; }

/* Les trois cartes « Pourquoi nous » apparaissent décalées de 100 ms. */
.js .pillar.reveal:nth-child(1) { transition-delay: 0ms; }
.js .pillar.reveal:nth-child(2) { transition-delay: var(--pillar-stagger); }
.js .pillar.reveal:nth-child(3) { transition-delay: calc(var(--pillar-stagger) * 2); }

/* Étapes « Comment ça marche » : même cascade que les cartes, mais le délai
   ne porte que sur l'apparition, pas sur le survol. Le trait sous chaque
   numéro se remplit juste après l'arrivée de sa carte. */
.js .step.reveal {
  transition:
    opacity 600ms var(--ease) var(--step-delay, 0ms),
    translate 600ms var(--ease) var(--step-delay, 0ms),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.js .step.reveal:nth-child(2) { --step-delay: var(--pillar-stagger); }
.js .step.reveal:nth-child(3) { --step-delay: calc(var(--pillar-stagger) * 2); }
.js .step .step__head::after {
  transform: scaleX(0);
  transition: transform var(--step-line) var(--ease) calc(var(--step-delay, 0ms) + 300ms);
}
.js .step.is-visible .step__head::after { transform: scaleX(1); }

/* =========================================================================
   Palier tablette — 768 px
   ========================================================================= */
@media (min-width: 768px) {
  /* Le bouton du header ne s'agrandit qu'à partir d'ici : à 375 px, logo
     agrandi + bouton agrandi + burger ne tiennent pas sur une ligne. */
  :root {
    --scale-nav: var(--scale-up);
    --scale-logo: calc(var(--scale-up) * 1.15);
    --nav-inset: var(--gutter);   /* la barre s'aligne alors sur .wrap */
    --nav-pad-x: var(--sp-5);
    --nav-gap-x: var(--sp-4);
    --btn-sm-pad-x: var(--sp-5);
    --btn-fin-pad-x: var(--sp-7);
  }
  .nav__actions { gap: var(--sp-3); }

  /* L'espace avant le footer garde un supplément plus mesuré qu'en mobile :
     0,21 porte l'espace total à +10 % par rapport au premier réglage. */
  .final { --final-extra: 0.21; }

  .nav__menu { display: flex; }
  .nav__burger { display: none; }
  .nav__actions { margin-left: 0; }

  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

  .steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .step { padding: var(--sp-6); }

  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; }
  /* Accueil : les trois colonnes passent côte à côte, la marque plus large
     que les deux listes. */
  .footer--home .footer__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-7);
  }
  /* La marque reprend une seule cellule : elle ne s'étend sur toute la
     largeur qu'en mobile. */
  .footer__col--brand { grid-column: auto; }
}

/* =========================================================================
   Palier desktop — 1024 px
   ========================================================================= */
@media (min-width: 1024px) {
  /* De la place pour respirer : les liens s'écartent seulement ici, le
     palier 768 px étant le plus contraint du header. */
  :root { --nav-menu-gap: var(--sp-6); }

  .founder__grid {
    grid-template-columns: 0.85fr 1fr;
    grid-template-areas:
      "photo text"
      "meta  .";
    column-gap: var(--sp-7);   /* écart resserré, à l'échelle du conteneur de 780 px */
    row-gap: var(--sp-5);      /* 24 px entre la photo et ses chiffres */
  }
  /* En deux colonnes, la photo reprend toute la largeur de sa colonne, et le
     texte occupe seulement la rangée de la photo : il se centre sur le
     milieu de la photo, pas sur l'ensemble photo + chiffres + icônes. */
  .founder__media { grid-area: photo; max-width: none; }
  .founder__meta  { grid-area: meta; max-width: none; margin-top: 0; }
  .founder__body  { grid-area: text; align-self: center; }

  /* Constat : texte ~57 %, visuel ~43 %, centrés verticalement. */
  .problem__grid {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
}

/* =========================================================================
   Accessibilité — mouvement réduit
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  /* Lignes figées, mais rendues consultables par défilement manuel. */
  .marquee { animation: none; }
  .tools__rows > * { overflow-x: auto; }
  .tools__rows { -webkit-mask-image: none; mask-image: none; }
  /* Aucun déplacement au survol non plus. */
  .btn:hover { transform: none; }
  .btn--arrow:hover .btn__icon svg { transform: none; }
  .pillar:hover { transform: none; box-shadow: none; }
  .pillar:hover::after { opacity: 0; }
  .pillar:hover .pillar__icon { transform: none; box-shadow: none; }
  /* Bague immobile, orientée pour rester lisible. */
  .pillar__icon::before { animation: none; transform: rotate(115deg); }
  /* Les deux graphiques s'affichent directement dans leur état final. */
  .js .pillar__viz .viz__bar  { transform: none; opacity: 1; }
  .js .pillar__viz .viz__line { stroke-dashoffset: 0; }
  .js .pillar__viz .viz__spark { opacity: 1; transform: none; }
  /* Mockup du Constat : les quatre tâches affichées et cochées d'emblée. */
  .js .tasks .task { opacity: 1; translate: none; }
  .js .tasks .task__check svg { transform: none; }
  /* Étapes : trait déjà plein, aucun déplacement au survol. */
  .js .step .step__head::after { transform: none; }
  .step:hover { transform: none; box-shadow: none; }
}

/* =========================================================================
   Impression
   ========================================================================= */
@media print {
  .nav, .tools, .band .btn, .skip-link { display: none; }
  body { background: #FFFFFF; }
  .js .reveal { opacity: 1; translate: none; }
}

/* =========================================================================
   Pages légales (mentions-legales.html, politique-confidentialite.html)
   ========================================================================= */
.legal {
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: calc(var(--section-y) / 2);
}

.legal__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  margin-bottom: var(--sp-3);
}

.legal__meta {
  font-size: var(--fs-small);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}

.legal h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
}

.legal p { color: var(--c-text-soft); }
.legal p + p { margin-top: var(--sp-4); }

.legal ul {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-5);
  color: var(--c-text-soft);
}
.legal li + li { margin-top: var(--sp-2); }

.legal a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--c-accent-ink); }