/* ============================================================================
   HYGIPACK.EU — Site marketing V1
   ----------------------------------------------------------------------------
   Châssis commun (en-tête, pied de page, sections) et pages :
   /, /fonctionnalites, /tarifs, /a-propos, /demo.

   Se charge APRÈS /assets/styles.css, qui fournit les jetons de marque, la
   base typographique et le reset. Ce fichier n'y touche pas : les quatre pages
   historiques (/support et les trois pages juridiques) restent intactes.

   Toutes les classes sont préfixées `hp-` : aucune collision possible avec
   styles.css ni avec en-action.css.

   Valeurs issues du Design System v1.0
   (livrables/hygipack-design-system/tokens/tokens.css).
   Aucune ressource tierce au runtime : pas de CDN, pas de script externe. Les
   trois fontes sont servies par Hygipack depuis /assets/fonts/, déclarées dans
   styles.css. Les mockups sont du HTML/CSS, jamais des images.
   ============================================================================ */

:root {
  /* Jetons absents de styles.css, repris tels quels du Design System. */
  --hp-white:        #FFFFFF;
  --hp-sky:          #7FB0E8;
  --hp-night-deep:   #0A1F3E;
  --hp-night-footer: #0A1F3E;

  /* Direction artistique V1-3 (1C finale).
     Cinq surfaces de contenu et rien d'autre : blanc, bleu pale, bleu nuit,
     bleu Hygipack, pre-footer. Plus le fond du bloc anime et le footer.
     Aucune teinte nouvelle ne doit etre introduite en dehors de ce bloc. */
  --hp-tint:         #EEF3FC;   /* bleu pale, sections produit claires        */
  --hp-kicker-night: #9CC2F0;   /* surtitres et icones sur fond sombre        */
  --hp-blue-top:     #2A63E0;   /* depart du degrade du bouton primaire       */

  --hp-surf-night:   radial-gradient(55% 70% at 85% 20%, rgba(76,134,255,.28), rgba(76,134,255,0) 70%),
                     linear-gradient(160deg, #0E2A52 0%, #123A78 100%);
  --hp-surf-blue:    radial-gradient(60% 80% at 85% 10%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
                     linear-gradient(160deg, #1C56D6 0%, #1747B8 100%);
  --hp-surf-hero:    radial-gradient(55% 75% at 80% 40%, rgba(28,86,214,.16), rgba(28,86,214,0) 70%),
                     linear-gradient(180deg, #F4F7FD 0%, #E9F0FB 100%);
  --hp-surf-hero-pg: radial-gradient(55% 90% at 88% 0%, rgba(28,86,214,.13), rgba(28,86,214,0) 70%),
                     linear-gradient(180deg, #F4F7FD 0%, #E9F0FB 100%);
  --hp-surf-prefoot: radial-gradient(50% 120% at 50% 0%, rgba(28,86,214,.10), rgba(28,86,214,0) 70%),
                     linear-gradient(180deg, #F2F6FD 0%, #E4ECFA 100%);
  --hp-surf-stage:   linear-gradient(170deg, #0A1F3E 0%, #0E2A52 55%, #12387A 100%);

  --hp-success:      #16A34A;
  --hp-success-bg:   #E6F6ED;
  --hp-success-text: #15803D;
  --hp-warning:      #D97706;
  --hp-warning-bg:   #FBF1DE;
  --hp-warning-text: #B45309;
  --hp-danger:       #DC2626;
  --hp-danger-bg:    #FDECEC;
  --hp-danger-text:  #B91C1C;
  --hp-danger-line:  #F6D4D4;

  --hp-surface-app:  #F1F5F9;
  --hp-surface-soft: #F4F7FB;
  --hp-line-soft:    #EEF2F6;
  --hp-line-strong:  #DDE5EE;

  /* Fontes servies localement (@font-face dans styles.css). Les piles de repli
     ci-dessous servent pendant le chargement et pour les caractères hors
     sous-ensemble latin. */
  --hp-font-display: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hp-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hp-ease: cubic-bezier(.4, 0, .2, 1);
  --hp-ease-reveal: cubic-bezier(.2, .7, .2, 1);

  /* Contraste du texte, DA V1-3 : paragraphes #475569, metadonnees #64748B au
     minimum. Le #94A3B8 ne porte plus aucun texte ; il ne reste que sur les
     placeholders de formulaire, qui ont leur propre jeton (#A3AFBD). */
  --hp-ink-muted:  #475569;
  --hp-ink-subtle: #64748B;

  --hp-shell: 1200px;
  --hp-gutter: clamp(18px, 3vw, 32px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.hp-page { background: var(--hp-surface); overflow-x: hidden; }

.hp-shell {
  max-width: var(--hp-shell);
  margin: 0 auto;
  padding-inline: var(--hp-gutter);
}

.hp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--hp-blue); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--hp-radius-control) 0; font-size: 14px;
}
.hp-skip:focus { left: 0; color: #fff; }

.hp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hp-i { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }
.hp-i-blue { color: var(--hp-blue); }
.hp-i-ok { color: var(--hp-success-text); }
.hp-i-warn { color: var(--hp-warning-text); }
.hp-i-danger { color: var(--hp-danger-text); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.hp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hp-line-soft);
}

.hp-header-row {
  min-height: 66px;
  display: flex; align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
}

.hp-logo { display: block; flex: 0 0 auto; }
.hp-logo img { height: 26px; width: auto; display: block; }

.hp-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.hp-nav a {
  font-size: 13.5px; font-weight: 500; color: var(--hp-ink-strong);
  text-decoration: none; padding: 8px 11px; border-radius: 9px;
  white-space: nowrap;
}
.hp-nav a:hover { color: var(--hp-ink-title); background: var(--hp-surface-soft); }
.hp-nav a[aria-current="page"] { color: var(--hp-blue); }

.hp-header-cta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.hp-burger {
  display: none;
  border: 1px solid var(--hp-line-control); background: var(--hp-surface);
  border-radius: 10px; padding: 9px 10px; cursor: pointer; color: var(--hp-ink-strong);
  line-height: 0;
}
.hp-burger:hover { border-color: var(--hp-ink-subtle); }
.hp-burger .hp-i { width: 18px; height: 18px; }

.hp-menu { display: none; border-top: 1px solid var(--hp-line-soft); background: var(--hp-surface); }
.hp-menu[data-open] { display: block; }
.hp-menu-inner { display: flex; flex-direction: column; padding-block: 8px 14px; }
.hp-menu-inner > a {
  font-size: 15px; font-weight: 500; color: var(--hp-ink-strong);
  text-decoration: none; padding: 11px 0;
  border-bottom: 1px solid var(--hp-surface-soft);
}
.hp-menu-inner > a:hover { color: var(--hp-blue); }

/* Les deux CTA, empiles en bas du menu deroulant (regles mobile V1-3). */
.hp-menu-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.hp-menu-cta .hp-btn { width: 100%; }

/* Libelle du CTA primaire de l'en-tete : complet par defaut, abrege sous 900px,
   la ou la navigation passe au burger. Les deux libelles sont dans le DOM ;
   c'est l'affichage qui bascule, jamais le contenu accessible. */
.hp-cta-short { display: none; }
@media (max-width: 900px) {
  .hp-cta-long { display: none; }
  .hp-cta-short { display: inline; }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

/* Systeme d'appel a l'action V1-3.
   Deux libelles sur tout le site : « Reserver une demo » (primaire, toujours en
   premier) et « Demander un essai de 14 jours » (secondaire). Seule abreviation
   autorisee : « Demo » et « Essai 14 jours », dans l'en-tete.
   Un seul gabarit de page (.hp-btn-lg) ; .hp-btn seul reste la version compacte
   de l'en-tete. Deux jeux de couleurs : fond clair, fond sombre ou bleu. */

.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--hp-font-sans); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: 10px; padding: 9px 13px; font-size: 13px;
  border: 1px solid transparent;
  transition: background .2s var(--hp-ease), border-color .2s var(--hp-ease), color .2s var(--hp-ease);
}

/* Gabarit de page : 15px / 600, padding 14px 22px, radius 12. */
.hp-btn-lg { font-size: 15px; padding: 14px 22px; border-radius: 12px; }

/* --- Sur fond clair --- */
.hp-btn-primary {
  background: linear-gradient(180deg, var(--hp-blue-top), var(--hp-blue)); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(28, 86, 214, .65);
}
.hp-btn-primary:hover { background: var(--hp-blue-strong); color: #fff; }
.hp-btn-ghost {
  background: var(--hp-surface); color: var(--hp-ink-title);
  border-color: #D5DEEA;
}
.hp-btn-ghost:hover { border-color: var(--hp-blue); color: var(--hp-blue); }

/* --- Sur fond sombre ou bleu --- */
.hp-btn-light { background: #fff; color: var(--hp-night); border-color: transparent; }
.hp-btn-light:hover { background: var(--hp-blue-veil); color: var(--hp-night); }
.hp-btn-outline-light {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42);
}
.hp-btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.hp-btn:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; }
.hp-btn-light:focus-visible, .hp-btn-outline-light:focus-visible { outline-color: var(--hp-sky); }

.hp-btn-block { width: 100%; margin-top: 20px; }
/* Bouton volontairement inactif : la maquette ne soumet rien. */
.hp-btn-off { background: var(--hp-line); color: var(--hp-ink-subtle); box-shadow: none; cursor: default; }

.hp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hp-mt-22 { margin-top: 22px; }
.hp-mt-26 { margin-top: 26px; }

.hp-ok { color: var(--hp-success-text); }
.hp-warn { color: var(--hp-warning-text); }
.hp-danger { color: var(--hp-danger-text); }

/* --------------------------------------------------------------------------
   Sections et titres
   -------------------------------------------------------------------------- */

/* Rythme vertical V1-3. Une section standard, une section produit plus aeree,
   et la section qui suit un hero de page, qui repart de plus haut. */
.hp-section { padding-block: clamp(56px, 6.5vw, 96px); }
.hp-section-product { padding-block: clamp(64px, 7.5vw, 104px); }
.hp-section-tight { padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px); }

/* Les cinq surfaces. Jamais deux surfaces identiques a la suite, jamais trois
   sections claires sans une section teintee ou sombre entre elles. Le changement
   de surface fait la separation : pas de filet, pas de degrade de transition. */
.hp-section-soft  { background: var(--hp-tint); }
.hp-section-night { background: var(--hp-surf-night); color: rgba(255, 255, 255, .84); }
.hp-section-blue  { background: var(--hp-surf-blue);  color: rgba(255, 255, 255, .84); }

.hp-kicker {
  font-family: var(--hp-font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--hp-blue);
  margin: 0;
}
.hp-section-night .hp-kicker,
.hp-section-blue .hp-kicker { color: var(--hp-kicker-night); }

.hp-h2 {
  font-family: var(--hp-font-display); font-weight: 700;
  font-size: clamp(26px, 3.1vw, 40px); line-height: 1.1;
  letter-spacing: -.033em; color: var(--hp-ink-title);
  margin: 12px 0 0; text-wrap: pretty;
}
.hp-section-night .hp-h2,
.hp-section-blue .hp-h2 { color: #fff; }

.hp-h3 {
  font-family: var(--hp-font-display); font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2;
  letter-spacing: -.02em; color: var(--hp-ink-title); margin: 0;
}

.hp-lede {
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65;
  color: var(--hp-ink-muted); margin: 16px 0 0; max-width: 62ch;
}
.hp-section-night .hp-lede,
.hp-section-blue .hp-lede { color: rgba(255, 255, 255, .84); }

.hp-head-center { text-align: center; max-width: 720px; margin-inline: auto; }
.hp-head-center .hp-lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Hero d'accueil : surface HERO, halo derriere le telephone. */
.hp-hero {
  padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px);
  background: var(--hp-surf-hero);
  overflow-x: clip;
}

/* Hero des pages secondaires : meme famille, halo plus haut et plus discret. */
.hp-hero-page {
  padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px);
  background: var(--hp-surf-hero-pg);
  overflow-x: clip;
}

.hp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}

.hp-hero h1 {
  font-family: var(--hp-font-display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06;
  letter-spacing: -.035em; color: var(--hp-ink-title);
  margin: 14px 0 0; text-wrap: balance;
}
.hp-hero-page h1 {
  font-family: var(--hp-font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.07;
  letter-spacing: -.035em; color: var(--hp-ink-title);
  margin: 14px 0 0; text-wrap: balance;
}
.hp-hero .hp-lede, .hp-hero-page .hp-lede { font-size: clamp(15px, 1.25vw, 18px); }
.hp-hero .hp-cta-row { margin-top: 26px; }

.hp-reassure {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0;
  padding: 0; list-style: none;
  font-size: 12.5px; color: var(--hp-ink-muted);
}
.hp-reassure li { display: flex; align-items: center; gap: 7px; }

.hp-hero-visual { display: flex; justify-content: center; position: relative; }

/* Carte flottante réutilisable autour d'un mockup. */
.hp-float {
  position: absolute; background: var(--hp-surface);
  border: 1px solid var(--hp-line); border-radius: var(--hp-radius-card);
  padding: 11px 13px; box-shadow: 0 18px 36px -16px rgba(15, 30, 46, .4);
  max-width: 190px;
}
.hp-float-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.hp-float-sub { font-size: 10.5px; color: var(--hp-ink-subtle); margin-top: 3px; line-height: 1.45; }
.hp-float-report { right: -8%; bottom: 12%; }

/* --------------------------------------------------------------------------
   Mockups produit — traitement V1-3
   ----------------------------------------------------------------------------
   Chaque section produit montre un vrai ecran Hygipack, jamais une illustration.
   Le mockup est une preuve : il est grand, cadre haut, et porte l'ombre.

   en-action.css n'est PAS modifie. `.phone` y garde ses dimensions de scene
   (286px, la valeur voulue par la DA pour le bloc anime) ; les surcouches
   ci-dessous ne s'appliquent qu'aux mockups figes, hors scene.
   -------------------------------------------------------------------------- */

/* Halo derriere le produit. Un seul par section, toujours derriere, jamais
   devant du contenu. */
.hp-mock { position: relative; display: flex; justify-content: center; }
.hp-mock::before {
  content: ''; position: absolute; z-index: 0;
  width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(28, 86, 214, .16), rgba(28, 86, 214, 0));
  pointer-events: none;
}
.hp-section-night .hp-mock::before,
.hp-section-blue .hp-mock::before {
  background: radial-gradient(closest-side, rgba(90, 150, 255, .32), rgba(90, 150, 255, 0));
}
.hp-mock > * { position: relative; z-index: 1; }

/* Mockup fige du hero et des sections produit : reutilise les ecrans definis
   par en-action.css, sans la mecanique de scene. Ne jamais redessiner ces
   ecrans ici. Bezel #0F1E2E 8px, radius 34, conformement a la DA. */
.hp-phone-static {
  height: auto;
  width: min(330px, 78vw);
  border: 8px solid var(--hp-ink-title);
  border-radius: 34px;
  box-shadow: 0 34px 70px -28px rgba(28, 86, 214, .6), 0 0 0 1px rgba(28, 86, 214, .12);
}
.hp-phone-static > .scr { flex: 1; min-height: 0; }

/* Sur fond sombre ou bleu : anneau clair et ombre noire, pas d'ombre bleue. */
.hp-section-night .hp-phone-static,
.hp-section-blue .hp-phone-static {
  box-shadow: 0 0 0 1px rgba(160, 195, 255, .24), 0 36px 70px -28px rgba(0, 0, 0, .6);
}

/* Le telephone ne descend jamais sous 250px. */
@media (max-width: 600px) {
  .hp-phone-static { width: min(300px, 86vw); border-width: 7px; border-radius: 30px; }
}
@media (max-width: 380px) {
  .hp-phone-static { width: min(280px, 88vw); }
}

/* --------------------------------------------------------------------------
   Intégration de la section « Hygipack en action »
   ----------------------------------------------------------------------------
   Le prototype validé (commit 105a03e) est repris SANS redessin : ni son HTML,
   ni en-action.css, ni en-action.js ne sont modifiés. Seuls deux ajustements
   d'intégration sont posés ici, parce que la home a un en-tête collant que la
   page de test isolée n'avait pas :
     1. la scène colle SOUS l'en-tête, sinon les deux se recouvrent ;
     2. sa hauteur est réduite d'autant, pour qu'elle tienne dans la fenêtre.
   -------------------------------------------------------------------------- */

:root { --hp-header-h: 66px; }

.has-js .stage {
  top: var(--hp-header-h);
  height: calc(100vh - var(--hp-header-h));
  height: calc(100svh - var(--hp-header-h));
}

@media (max-width: 380px) {
  .has-js .stage { height: calc(92svh - var(--hp-header-h)); }
}

/* Fond de scene, DA V1-3 (surface SC).
   La sequence garde UN SEUL fond du debut a la fin : plus aucune bascule clair
   -> navy. La DA remplace l'aplat par le degrade SC, plus un halo bleu FIXE
   derriere le telephone, qui donne la profondeur sans bouger d'une etape a
   l'autre.

   Pose ici et non dans en-action.css, qui reste fige : site.css se charge
   apres, cette regle l'emporte, et la mecanique de scene n'est pas touchee.
   en-action.js continue d'ecrire --night sans effet visuel, comme avant. */
.has-js .stage-bg {
  background: var(--hp-surf-stage);
}
.has-js .stage-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 52% at 70% 52%, rgba(90, 150, 255, .30), rgba(90, 150, 255, 0) 70%);
}

/* Sans JavaScript, la scene se lit comme une suite de blocs empiles. Le fond
   sombre est porte par la piste elle-meme, sinon les six etapes tomberaient sur
   la surface claire de la page.

   Les encres claires sont declarees ICI et pas seulement sur `.has-js .stage` :
   en-action.css ne les pose qu'en mode JavaScript, et un fond sombre herite
   sinon des encres foncees par defaut, donc d'un texte illisible. Les
   composants lisent deja `var(--ink, …)` : il suffit de renseigner la variable. */
.stage-track {
  background: var(--hp-surf-stage);
  --ink:       #fff;
  --ink-soft:  rgba(255, 255, 255, .84);
  --ink-faint: rgba(255, 255, 255, .66);
}
.stage-track .hp-kicker { color: var(--hp-kicker-night); }

/* Etape 6 : CTA primaire blanc (deja defini par en-action.css) et CTA
   secondaire, conformement aux regles CTA sur fond sombre. Le gabarit du
   primaire est conserve tel quel, seul le second jeu de couleurs est ajoute. */
.copy-cta-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.copy-cta-2 {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
}
.copy-cta-2:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

@media (max-width: 600px) {
  .copy-cta-wrap { flex-direction: column; align-items: stretch; }
  .copy-cta { text-align: center; }
}

/* --------------------------------------------------------------------------
   Bloc anime — composition mobile (V3)
   ----------------------------------------------------------------------------
   Anatomie mesuree a 390x844, etape 2, avant correction :

     header reel            67px
     .stage        haut 67  hauteur 778   = calc(100svh - 66px), c'est la scene
     .stage-inner  haut 67  hauteur 548   <- V2 la laissait a `height: auto`
     groupe        haut 87  hauteur 528   copy 114 + 18 + points + 14 + 364
     espace au-dessus       20px
     espace SOUS le mockup  230px         <- le defaut
     .stage-track           4220px (500vh)

   DEUX HAUTEURS A NE PAS CONFONDRE.

   `.stage-track` (4220px) est la PISTE DE DEFILEMENT : elle n'existe que pour
   donner de la course au recit en six etapes, et ne participe a aucune
   composition. `.stage` (778px) est la FENETRE COLLANTE dans laquelle la scene
   se compose. Le vide ne venait donc pas de la piste : il venait du placement
   du groupe dans la fenetre. V2 le calait en haut, tout le jeu tombait dessous.

   CORRECTION EN DEUX NIVEAUX.

   Niveau 1, le groupe reste ajuste a son contenu. Deux rangees `auto`, aucune
   en `1fr`, `min-height: 0` sur la pile, et l'etape ACTIVE remise dans le flux.
   Rien n'absorbe la hauteur libre A L'INTERIEUR du groupe : les ecarts de 18 et
   14px sont fixes et ne bougent pas d'une etape a l'autre.

   Niveau 2, ce groupe est place comme UN BLOC dans la fenetre. C'est le role
   d'`align-content`, qui deplace le groupe de rangees sans rien redistribuer
   entre elles — a condition qu'aucune rangee ne soit en `1fr`, ce qui etait le
   defaut de V1. Le `padding-bottom` decale l'axe de centrage vers le haut :
   l'espace au-dessus devient plus petit que l'espace en dessous, sans jamais
   toucher aux ecarts internes.

   Une etape plus haute, comme la 6 avec ses deux CTA, remonte donc
   naturellement dans la fenetre. Aucune reserve commune n'est imposee.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* La fenetre garde sa hauteur : c'est elle qui donne l'espace a repartir. */
  .has-js .stage { align-items: stretch; }

  .has-js .stage-inner {
    /* La rangee du texte reste calee en haut, sous une respiration constante.
       La rangee du mockup prend le reste de la fenetre, et le telephone y est
       CENTRE : l'ecart sous la progression et l'ecart au bas de la scene
       deviennent egaux, quelle que soit la hauteur de l'etape active.

       Le `1fr` n'est pas le defaut de V1. V1 combinait `1fr` ET
       `align-items: flex-end`, qui collait le telephone au bas de la rangee et
       entassait tout le vide au-dessus. Ici la rangee absorbe le reste, mais le
       telephone est centre dedans : c'est exactement ce qu'on cherche. Les
       ecarts INTERNES du groupe texte (18px) ne sont pas touches. */
    grid-template-rows: auto 1fr;
    align-items: start;
    height: 100%;
    gap: 0;
    padding-top: clamp(28px, 5svh, 56px);
    padding-bottom: 0;
  }

  /* Niveau 1 : la pile suit l'etape affichee, pas la plus haute des six. */
  .has-js .copy-stack { min-height: 0; margin-top: 0; }
  .has-js .copy.is-on { position: relative; inset: auto; }

  .has-js .dots { margin-top: 18px; }   /* texte -> progression */

  /* CTA de l'etape 6 : ils dimensionnent leur etape, et elle seule. */
  .copy-cta-wrap { margin-top: 12px; gap: 6px; }
  .copy-cta { font-size: 13px; padding: 8px 14px; border-radius: 10px; }

  /* Le telephone est centre dans la rangee, verticalement et horizontalement.
     `align-self: stretch` est indispensable : la grille aligne ses items sur
     `start`, ce qui dimensionnait cette cellule a son contenu au lieu de lui
     faire remplir la rangee `1fr`. Le centrage interne restait alors sans
     effet et le telephone collait a la progression (ecart mesure : 0px). */
  .has-js .stage-visual {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    min-height: 0;
    /* Respiration minimale, jamais franchie : c'est elle qui garantit que le
       telephone ne touche ni la progression ni le bas de la scene, meme a
       l'etape 6 ou la zone disponible est la plus courte. */
    padding-block: 22px;
    overflow: hidden;
  }

  /* Maillon intermediaire : sans hauteur definie ici, le `max-height: 100%`
     du telephone n'aurait aucune reference et ne bornerait rien. */
  .has-js .phone-move {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Taille du mockup : nominale ambitieuse, puis BORNEE par la zone reellement
     disponible sous la progression.

     `aspect-ratio` tient les proportions : quand `max-height` rogne la hauteur,
     la largeur suit, le telephone n'est jamais deforme. Le ratio 250/460 est
     celui deja en vigueur sur mobile, il n'est pas invente ici.

     Consequence voulue : a l'etape 6, plus haute a cause de ses deux CTA, la
     zone est plus courte et le telephone se reduit un peu tout seul. C'est une
     seule regle, pas un traitement par etape.

     `svh` et non `vh` : sur Safari iOS, `vh` vise le viewport barres masquees
     et deborderait tant que la barre est affichee. */
  .phone {
    aspect-ratio: 250 / 460;
    width: auto;
    height: min(492px, 62svh);
    max-height: 100%;
    max-width: min(268px, 68vw);
    border-radius: 26px;
    box-shadow: 0 24px 52px -26px rgba(0, 0, 0, .7);
  }
  .phone-move { transform-origin: center; }
}

/* Tres petits ecrans : meme composition, telephone un cran plus bas. */
/* Tres petits ecrans : meme regle, bornes un cran plus basses. */
@media (max-width: 380px) {
  .phone { height: min(440px, 58svh); max-width: min(240px, 70vw); }
}

}

}

/* --------------------------------------------------------------------------
   Grilles de contenu
   -------------------------------------------------------------------------- */

/* Ces trois grilles sont portees par des <ul>/<ol> : sans reset, le navigateur
   dessine une puce ou un numero a cote de chaque carte, decale hors de la
   grille. Defaut de longue date, corrige ici avec la DA. */
.hp-grid, .hp-chain, .hp-qa { list-style: none; padding-left: 0; }

.hp-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(28px, 3.5vw, 44px); }
.hp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.hp-card {
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card-lg); padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--hp-elev-1);
}
.hp-card .hp-h3 { margin-top: 12px; }
.hp-card p { font-size: 14px; line-height: 1.6; color: var(--hp-ink-muted); margin-top: 8px; }

.hp-card-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--hp-blue-veil); color: var(--hp-blue);
  display: flex; align-items: center; justify-content: center;
}
.hp-card-icon .hp-i { width: 19px; height: 19px; }

/* Questions du bloc « Le vrai test » */
.hp-qa { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(26px, 3vw, 40px); }
.hp-qa li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card); padding: 16px 18px;
}
.hp-qa-num {
  font-family: var(--hp-font-mono); font-size: 11px; color: var(--hp-blue);
  padding-top: 2px; flex: 0 0 auto;
}
.hp-qa-q { font-size: 15.5px; font-weight: 600; color: var(--hp-ink-title); }
.hp-qa-a { font-size: 13.5px; color: var(--hp-ink-muted); margin-top: 4px; }

/* Chaîne HACCP en 7 étapes */
.hp-chain {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: clamp(28px, 3.5vw, 44px);
}
.hp-chain li {
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card); padding: 16px;
}
.hp-chain-num {
  font-family: var(--hp-font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--hp-ink-subtle);
}
.hp-chain h3 { font-size: 14.5px; font-weight: 600; color: var(--hp-ink-title); margin: 10px 0 0; }
.hp-chain p { font-size: 12.5px; line-height: 1.5; color: var(--hp-ink-muted); margin-top: 5px; }

.hp-note {
  margin-top: 20px; font-size: 13px; color: var(--hp-ink-muted);
  display: flex; gap: 8px; align-items: flex-start;
}

/* Segments desservis */
.hp-segments {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: clamp(24px, 3vw, 36px); padding: 0; list-style: none;
}
.hp-segments li {
  display: flex; align-items: center; gap: 8px;
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: 99px; padding: 9px 16px;
  font-size: 13.5px; color: var(--hp-ink-strong);
}

/* Emplacement réservé, jamais un faux contenu. */
.hp-slot {
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px dashed var(--hp-line-strong); border-radius: var(--hp-radius-card-lg);
  padding: clamp(22px, 3vw, 34px); text-align: center; background: var(--hp-surface);
}
.hp-slot-label {
  font-family: var(--hp-font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--hp-ink-subtle);
}
.hp-slot p { font-size: 14px; color: var(--hp-ink-muted); margin-top: 10px; }

/* Bloc de démonstration du pilotage */
.hp-panel {
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card-lg); padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--hp-elev-1);
}
.hp-panel-head {
  font-family: var(--hp-font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hp-ink-subtle);
  display: flex; justify-content: space-between; gap: 10px;
}

.hp-score { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.hp-ring {
  position: relative; width: 92px; height: 92px; flex: 0 0 auto; border-radius: 50%;
  /* 338.4deg = 94 % de 360. Valeur reelle affichee sans JavaScript. */
  background: conic-gradient(var(--hp-success) var(--ring, 338.4deg), var(--hp-line) var(--ring, 338.4deg));
}
.hp-js .hp-ring { --ring: 0deg; }
.hp-ring-hole {
  position: absolute; inset: 9px; border-radius: 50%; background: var(--hp-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hp-ring-value {
  font-family: var(--hp-font-display); font-weight: 700; font-size: 26px; letter-spacing: -.03em;
  color: var(--hp-ink-title);
}
.hp-ring-unit { font-size: 10px; color: var(--hp-ink-subtle); }

.hp-gauges { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.hp-gauge-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.hp-bar { height: 7px; border-radius: 99px; background: var(--hp-line-soft); margin-top: 6px; overflow: hidden; }
/* Etat REEL par defaut, etat anime seulement quand JavaScript est la.
   Sans JS, une jauge a `width: 0` affichait une barre vide et l'anneau du score
   affichait « 0 /100 » a cote du libelle « Tres bon suivi » : le site annoncait
   une valeur fausse. Les regles `.hp-js` qui suivent remettent l'etat de depart
   a zero pour l'animation, et le script ecrit ensuite la valeur en style inline,
   qui l'emporte sur les deux. */
.hp-bar span {
  display: block; height: 100%; border-radius: 99px;
  transition: width 1.1s var(--hp-ease);
}
.hp-bar span[data-fill="100"] { width: 100%; }
.hp-bar span[data-fill="72"]  { width: 72%; }
.hp-bar span[data-fill="44"]  { width: 44%; }
.hp-js .hp-bar span { width: 0; }
.hp-bar-ok { background: var(--hp-success); }
.hp-bar-warn { background: var(--hp-warning-text); }
.hp-bar-danger { background: var(--hp-danger); }

.hp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hp-pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.hp-pill-ok { background: var(--hp-success-bg); color: var(--hp-success-text); }
.hp-pill-warn { background: var(--hp-warning-bg); color: var(--hp-warning-text); }
.hp-pill-danger { background: var(--hp-danger-bg); color: var(--hp-danger-text); }
.hp-pill-blue { background: var(--hp-blue-veil); color: var(--hp-blue); }

.hp-rows { margin-top: 14px; }
.hp-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--hp-ink-strong);
  border-bottom: 1px solid var(--hp-surface-soft); padding: 9px 0;
}
.hp-row:last-child { border-bottom: 0; }

/* Démonstration HYGI de la page d'accueil.
   Deux intentions seulement : relevé de température et préparation d'étiquettes.
   HYGI n'est pas un assistant généraliste et n'est jamais présenté comme tel. */
.hp-hygi {
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card-lg); padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--hp-elev-1);
}
.hp-hygi-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hp-font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--hp-ink-subtle);
}
.hp-hygi-mic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--hp-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hp-hygi-mic .hp-i { width: 16px; height: 16px; }
.hp-hygi-quote {
  background: var(--hp-surface-soft); border-radius: var(--hp-radius-card);
  padding: 16px; margin-top: 14px;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; min-height: 5em;
  color: var(--hp-ink-title);
}
.hp-hygi-caret { color: var(--hp-blue); }

.hp-hygi-card {
  margin-top: 14px; border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-card); padding: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--hp-ease), transform .45s var(--hp-ease);
}
.hp-hygi-card[data-shown] { opacity: 1; transform: none; }
.hp-hygi-card-label {
  font-family: var(--hp-font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hp-ink-subtle);
}
.hp-hygi-name { font-size: 13.5px; font-weight: 600; color: var(--hp-ink-title); }
.hp-hygi-meta { font-size: 11px; color: var(--hp-ink-subtle); margin-top: 2px; }
.hp-hygi-value { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.hp-hygi-actions { display: flex; gap: 8px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .hp-hygi-card { opacity: 1; transform: none; transition: none; }
  .hp-hygi-caret { display: none; }
}

/* Bloc Audit Pro */
.hp-audit-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; }
.hp-audit-stat .hp-audit-num {
  font-family: var(--hp-font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.03em; color: #fff;
}
.hp-audit-stat span { display: block; font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 2px; }

/* Lien tertiaire : texte seul, jamais un bouton (regles CTA V1-3). */
.hp-link-tertiary {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: var(--hp-blue);
}
.hp-link-tertiary:hover { color: var(--hp-blue-strong); text-decoration: underline; }
.hp-section-night .hp-link-tertiary,
.hp-section-blue .hp-link-tertiary { color: #fff; }
.hp-section-night .hp-link-tertiary:hover,
.hp-section-blue .hp-link-tertiary:hover { color: #fff; opacity: .82; }
.hp-link-tertiary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Page Fonctionnalités
   -------------------------------------------------------------------------- */

.hp-pillar { padding-block: clamp(40px, 5vw, 68px); }
.hp-pillar-alt { background: var(--hp-surface-page); }
.hp-pillar-num {
  font-family: var(--hp-font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--hp-blue);
}

/* --------------------------------------------------------------------------
   Page Tarifs
   -------------------------------------------------------------------------- */

.hp-cycle {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px;
  background: var(--hp-line-soft); margin-top: 22px;
}
.hp-cycle button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--hp-font-sans); font-size: 13px; font-weight: 600;
  color: var(--hp-ink-muted); padding: 8px 16px; border-radius: 8px;
}
.hp-cycle button[aria-pressed="true"] {
  background: var(--hp-surface); color: var(--hp-ink-title); box-shadow: 0 1px 2px rgba(15, 30, 46, .1);
}

.hp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.hp-plan {
  display: flex; flex-direction: column;
  background: var(--hp-surface); border: 1px solid var(--hp-line);
  border-radius: 18px; padding: 24px; box-shadow: 0 1px 2px rgba(15, 30, 46, .04);
}
.hp-plan-featured {
  border: 1.5px solid var(--hp-blue);
  box-shadow: 0 16px 40px -22px rgba(28, 86, 214, .55);
}
.hp-plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-plan-name { font-family: var(--hp-font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.hp-plan-who { font-size: 13px; line-height: 1.55; color: var(--hp-ink-muted); margin-top: 8px; min-height: 3em; }
.hp-plan-price-label { font-size: 11.5px; color: var(--hp-ink-subtle); margin-top: 18px; }
.hp-plan-price {
  font-family: var(--hp-font-display); font-weight: 700; font-size: 30px;
  letter-spacing: -.03em; color: var(--hp-ink-title); margin-top: 2px;
}
.hp-plan-unit { font-size: 12.5px; color: var(--hp-ink-muted); }
.hp-plan-note { font-size: 11.5px; color: var(--hp-ink-subtle); margin-top: 6px; }
.hp-plan-features { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.hp-plan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--hp-ink-strong); }
.hp-plan-features .hp-i { color: var(--hp-success-text); margin-top: 3px; }
.hp-plan .hp-btn { margin-top: auto; width: 100%; }
.hp-plan-features { margin-bottom: 20px; }

.hp-faq { margin-top: clamp(30px, 4vw, 48px); max-width: 760px; }
.hp-faq details {
  border-bottom: 1px solid var(--hp-line);
}
.hp-faq summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative;
  font-size: 15.5px; font-weight: 600; color: var(--hp-ink-title);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--hp-ink-subtle); border-bottom: 2px solid var(--hp-ink-subtle);
  transform: rotate(45deg); transition: transform .25s var(--hp-ease);
}
.hp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hp-faq p { font-size: 14px; line-height: 1.65; color: var(--hp-ink-muted); padding: 0 0 18px; margin: 0; }

/* --------------------------------------------------------------------------
   Page Démo
   -------------------------------------------------------------------------- */

.hp-demo-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 56px); align-items: start;
}

.hp-demo-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.hp-demo-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--hp-ink-strong); }
.hp-demo-points .hp-i { color: var(--hp-blue); margin-top: 3px; }

.hp-steps { display: flex; align-items: center; gap: 10px; }
.hp-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hp-ink-subtle); }
.hp-step-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--hp-line-soft); color: var(--hp-ink-subtle);
}
.hp-step-on { color: var(--hp-ink-title); }
.hp-step-on .hp-step-dot { background: var(--hp-blue); color: #fff; }
.hp-step-done .hp-step-dot { background: var(--hp-success-bg); color: var(--hp-success-text); }
.hp-step-sep { flex: 1; height: 1px; background: var(--hp-line); min-width: 18px; }

.hp-form-card {
  background: var(--hp-surface-page); border: 1px solid var(--hp-line);
  border-radius: 18px; padding: clamp(20px, 2.4vw, 28px);
}
.hp-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hp-form-title { font-family: var(--hp-font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.hp-form-step { font-family: var(--hp-font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--hp-ink-subtle); }

.hp-form-error {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--hp-danger-bg); border: 1px solid var(--hp-danger-line);
  border-radius: 11px; padding: 11px 13px; margin-top: 16px;
  font-size: 13px; color: var(--hp-danger-text);
}

.hp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.hp-field-wide { grid-column: 1 / -1; }
.hp-field label { display: block; font-size: 12px; font-weight: 600; color: var(--hp-ink-strong); margin-bottom: 6px; }
.hp-input {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--hp-surface); border: 1px solid var(--hp-line-strong);
  border-radius: 11px; padding: 12px 13px; font-size: 14px;
  font-family: var(--hp-font-sans); color: var(--hp-ink-title);
}
.hp-input-empty { color: #A3AFBD; }
.hp-input-error { border: 1.5px solid var(--hp-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }
.hp-input-chevron { color: var(--hp-ink-subtle); }
.hp-field-msg { font-size: 11.5px; color: var(--hp-danger-text); margin-top: 6px; }
/* Mention de champ facultatif. Design System §07, règle 4 : « un champ facultatif porte la
   mention (option) en gris dans son libellé, tout le reste est obligatoire ». Le poids
   redescend à 500 et la teinte à ink-subtle pour que la mention ne concurrence pas le libellé. */
.hp-field label .hp-optional { font-weight: 500; color: var(--hp-ink-subtle); }

.hp-form-legal { font-size: 11.5px; line-height: 1.55; color: var(--hp-ink-subtle); margin-top: 14px; }

.hp-slots-note {
  font-family: var(--hp-font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hp-ink-subtle); margin-top: 6px;
}
.hp-days { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.hp-day {
  border: 1px solid var(--hp-line-strong); background: var(--hp-surface);
  border-radius: 12px; padding: 10px 14px; text-align: center; min-width: 64px;
  font-family: var(--hp-font-sans); cursor: pointer; color: var(--hp-ink-title);
}
.hp-day[aria-pressed="true"] { border-color: var(--hp-blue); background: var(--hp-blue-veil); color: var(--hp-blue); }
.hp-day-dow { font-size: 10.5px; color: var(--hp-ink-subtle); display: block; }
.hp-day[aria-pressed="true"] .hp-day-dow { color: var(--hp-blue); }
.hp-day-num { font-family: var(--hp-font-display); font-weight: 700; font-size: 17px; display: block; }

.hp-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-top: 16px; }
.hp-slot-btn {
  border: 1px solid var(--hp-line-strong); background: var(--hp-surface);
  border-radius: 10px; padding: 11px 8px; font-size: 13.5px; font-weight: 600;
  font-family: var(--hp-font-sans); color: var(--hp-ink-title); cursor: pointer;
}
.hp-slot-btn[aria-pressed="true"] { border-color: var(--hp-blue); background: var(--hp-blue-veil); color: var(--hp-blue); }
.hp-slot-btn[disabled] {
  color: var(--hp-ink-subtle); text-decoration: line-through;
  background: var(--hp-surface-page); cursor: not-allowed;
}

.hp-confirm-head { display: flex; align-items: center; gap: 12px; }
.hp-confirm-mark {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--hp-success-bg); color: var(--hp-success-text);
  display: flex; align-items: center; justify-content: center;
}
.hp-confirm-mark .hp-i { width: 22px; height: 22px; }
.hp-recap { margin-top: 20px; }
.hp-recap-label {
  font-family: var(--hp-font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hp-ink-subtle);
}

/* Bandeau d'état de la maquette : les cinq états sont des ancres de revue,
   pas une fonctionnalité. Aucune soumission n'est câblée dans ce bloc. */
.hp-states {
  background: var(--hp-night); color: #fff;
  padding: 12px 0;
}
.hp-states-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-states-label {
  font-family: var(--hp-font-mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.hp-states-row a {
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); text-decoration: none;
}
.hp-states-row a[aria-current="page"] { background: #fff; color: var(--hp-ink-title); }

/* --------------------------------------------------------------------------
   Page À propos
   -------------------------------------------------------------------------- */

.hp-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: clamp(28px, 3.5vw, 44px); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

/* Footer V1-3 : #0A1F3E uni, sans gradient ni halo. C'est le passage du
   pre-footer clair au footer nuit qui fait la separation : pas de filet, pas de
   degrade de transition, et plus jamais deux fonds sombres consecutifs. */
.hp-footer {
  background: var(--hp-night-footer); color: rgba(255, 255, 255, .7);
  padding-block: clamp(44px, 5vw, 64px) clamp(26px, 3vw, 34px);
}
.hp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.hp-footer-brand img { height: 24px; width: auto; display: block; }
.hp-footer-brand p { font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 260px; }
.hp-footer-col-title {
  font-family: var(--hp-font-mono); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--hp-kicker-night);
}
.hp-footer-links { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.hp-footer-links a { font-size: 13px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.hp-footer-links a:focus-visible { outline: 2px solid var(--hp-sky); outline-offset: 3px; border-radius: 4px; }
.hp-footer-links a:hover { color: #fff; }
.hp-footer-bottom {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-family: var(--hp-font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   Révélation au scroll
   Opacité 0 → 1 et translation 16 px, 700 ms, une seule fois.
   L'état initial n'est posé que si JavaScript est actif : sans lui, tout est
   visible immédiatement.
   -------------------------------------------------------------------------- */

.hp-js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--hp-ease-reveal), transform .7s var(--hp-ease-reveal);
}
.hp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Points de rupture V1-3. Le mobile n'est pas un desktop retreci : la
   navigation, les CTA, les cartes et les mockups changent de regle. */

@media (max-width: 980px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-visual { order: -1; }
  .hp-demo-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Seuil de bascule vers le menu burger.
   Mesure : avec cinq liens de navigation, la barre demande 463px et n'en
   dispose que 455 a 885px, 460 a 890px. Elle ne tient qu'a partir de 895px.
   Le seuil passe donc de 880 a 900px, avec une marge : en dessous, la
   navigation serait rognee sans que rien ne le signale. Valeur unique, reprise
   a l'identique par la bascule du libelle du CTA ci-dessous. */
@media (max-width: 900px) {
  .hp-nav { display: none; }
  .hp-burger { display: inline-flex; }
  .hp-header-cta .hp-btn-ghost { display: none; }
}

/* < 600px : les deux CTA passent en pleine largeur, empiles, primaire en
   premier. Les cartes flottantes disparaissent, le pilotage devient un
   carrousel a aimantation. */
@media (max-width: 600px) {
  .hp-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hp-cta-row .hp-btn-lg { width: 100%; }
  .hp-float { display: none; }

  .hp-grid { margin-top: clamp(22px, 5vw, 30px); }
  .hp-card { padding: 20px; }

  .hp-pilot-cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--hp-gutter) * -1);
    padding-inline: var(--hp-gutter);
    scrollbar-width: none;
  }
  .hp-pilot-cards::-webkit-scrollbar { display: none; }
  .hp-pilot-cards > * { scroll-snap-align: start; }

  .hp-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .hp-header-cta .hp-btn { font-size: 12.5px; padding: 8px 11px; }
  .hp-logo img { height: 22px; }
  .hp-score { gap: 14px; }
  .hp-audit-stats { gap: 16px; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hp-bar span { transition: none; }
}

/* --------------------------------------------------------------------------
   Page HACCP & conformité
   -------------------------------------------------------------------------- */

.hp-chain-trace {
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--hp-line);
  font-size: 11.5px; line-height: 1.45; color: var(--hp-ink-subtle);
}
.hp-chain-trace .hp-i { color: var(--hp-success-text); margin-top: 2px; }

/* Les deux colonnes du périmètre : ce qui est vérifié, ce qui ne l'est pas.
   Elles ne doivent jamais être fusionnées ni allégées. */
.hp-claims {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: clamp(28px, 3.5vw, 44px);
}
.hp-claim {
  border-radius: var(--hp-radius-card-lg); padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--hp-line); background: var(--hp-surface);
}
.hp-claim-yes { border-color: #CDE9D9; background: #F4FBF7; }
.hp-claim-no { border-color: var(--hp-line-strong); background: var(--hp-surface-page); }
.hp-claim-head { display: flex; align-items: center; gap: 10px; }
.hp-claim-yes .hp-claim-head .hp-i { color: var(--hp-success-text); }
.hp-claim-no .hp-claim-head .hp-i { color: var(--hp-ink-muted); }
.hp-claim ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.hp-claim li {
  font-size: 14px; line-height: 1.55; color: var(--hp-ink-strong);
  padding-left: 16px; position: relative;
}
.hp-claim li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hp-ink-subtle);
}
.hp-claim-yes li::before { background: var(--hp-success-text); }

/* Réservation en ligne pas encore ouverte : on l'annonce, et on donne un canal
   qui fonctionne. À remplacer par le bouton du tunnel quand il sera branché. */
.hp-soon {
  margin-top: 20px; padding: 16px;
  border: 1px solid var(--hp-blue-line); border-radius: var(--hp-radius-card);
  background: var(--hp-blue-veil);
}
.hp-soon-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--hp-blue);
}
.hp-soon-text {
  font-size: 13px; line-height: 1.55; color: var(--hp-ink-strong); margin-top: 8px;
}
.hp-soon .hp-btn { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Tunnel de démonstration
   -------------------------------------------------------------------------- */

/* Champ piège. Sorti de l'écran plutôt que masqué en display:none : certains
   robots ignorent les champs non rendus, celui-ci doit rester « remplissable ». */
.hp-honeypot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* `hidden` doit l'emporter sur toute règle de display. Sans cela, un élément masqué
   dont la classe déclare `display: flex` reste visible : c'est ce qui faisait apparaître
   un bandeau d'erreur vide sous les créneaux. */
[hidden] { display: none !important; }

.hp-slot-day + .hp-slot-day { margin-top: 18px; }
.hp-slot-day-title {
  font-size: 13px; font-weight: 600; color: var(--hp-ink-title);
  margin: 0 0 8px;
}

/* Champs réels du formulaire : mêmes jetons que les vues de maquette. */
select.hp-input, input.hp-input {
  appearance: none; -webkit-appearance: none;
  font-size: 14px; line-height: 1.4;
}
input.hp-input::placeholder { color: #A3AFBD; }
.hp-input:focus-visible {
  outline: none; border-color: var(--hp-blue); box-shadow: var(--hp-focus-ring);
}
select.hp-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--hp-ink-subtle) 50%),
                    linear-gradient(135deg, var(--hp-ink-subtle) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Créneau retenu, sur l'écran de confirmation. Plus appuyé que `hp-plan-note` :
   c'est l'information que le visiteur cherche en arrivant sur cet écran. */
.hp-confirm-slot {
  font-size: 13px; line-height: 1.5; font-weight: 600;
  color: var(--hp-ink-strong); margin-top: 4px;
}

/* Bouton d'envoi pendant la soumission. */
.hp-btn[data-busy] { opacity: .6; cursor: progress; }
.hp-btn:disabled { background: var(--hp-line); color: var(--hp-ink-subtle); box-shadow: none; cursor: default; }
.hp-btn-ghost:disabled { background: var(--hp-surface); }

/* --------------------------------------------------------------------------
   Pre-footer, dernier bloc avant le pied de page
   ----------------------------------------------------------------------------
   DA V1-3 : toute page commerciale finit par le pre-footer clair puis le footer
   nuit. Demo et Tarifs n'en ont pas : la page est deja une conversion.

   Le pre-footer porte seul la respiration du bas de page. La section qui le
   precede reduit sa marge basse, sinon les deux paddings se cumulent et
   produisent jusqu'a 190 px de vide sur grand ecran, soit deux fois la
   respiration voulue. Sans prise en charge de :has(), la regle est ignoree et
   l'espacement reste simplement plus genereux : aucune regression possible.
   -------------------------------------------------------------------------- */

.hp-prefooter {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--hp-surf-prefoot);
}
.hp-prefooter .hp-h2 { color: var(--hp-night); }
.hp-prefooter .hp-lede { color: var(--hp-ink-muted); }
.hp-prefooter .hp-cta-row { justify-content: center; }

main > section:has(+ .hp-prefooter) { padding-bottom: clamp(32px, 3.5vw, 48px); }