/* ============================================================================
   PREST'HYG — FEUILLE DE STYLE AUTONOME
   ----------------------------------------------------------------------------
   Compatible WordPress / Elementor.

   RÈGLES D'ENCAPSULATION — elles ne doivent jamais être assouplies :

   1. TOUTES les règles descendent de `.presthyg-page`. Rien ne peut fuir vers
      le thème, le header, les menus ou les autres pages du site.
   2. TOUTES les classes sont préfixées `presthyg-`. Aucune collision possible
      avec Elementor (`elementor-*`), le thème, ou un plugin.
   3. Les variables sont préfixées `--ph-` et déclarées sur `.presthyg-page`,
      JAMAIS sur `:root` — une variable posée sur `:root` est globale et peut
      écraser celle d'un autre composant qui porterait le même nom.
   4. Aucun sélecteur d'élément nu. Le seul endroit où un nom de balise
      apparaît est la remise à zéro du § 2, et il y est toujours précédé de
      `.presthyg-page` : c'est un sélecteur descendant encapsulé, pas un
      sélecteur générique. Il est nécessaire — les thèmes WordPress imposent
      des marges aux titres et aux listes qui casseraient la mise en page.

   SOMMAIRE
     01 · Tokens               07 · Flotte
     02 · Remise à zéro        08 · Univers
     03 · Primitives           09 · Produits & marques
     04 · Héros                10 · Chiffres
     05 · Intro / manifeste    11 · Livraison
     06 · Siège social         12 · Services, équipe, histoire, contact
                               13 · Pied de page
                               14 · Responsive
                               15 · Mouvement réduit
   ========================================================================== */

/* ============================================================================
   01 · TOKENS
   ----------------------------------------------------------------------------
   Socle dérivé des deux couleurs de marque, relevées dans le logo officiel :
     #0E2D43  marine  → rampe INK
     #007B9A  bleu    → rampe AQUA
   Tous les couples texte/fond utilisés sont audités AA (4.5:1), les éléments
   non-textuels à 3:1. Les ratios sont notés en commentaire : ce sont eux qui
   justifient chaque valeur, ne les changez pas à l'œil.
   ========================================================================== */

.presthyg-page {
  /* — Rampe INK : marine de marque + neutres froids accordés ------------- */
  --ph-ink-0:   #FAFBFC;   /* fond clair principal                          */
  --ph-ink-50:  #F3F7F9;   /* fond de section alterné                       */
  --ph-ink-100: #EAEFF3;   /* surfaces surélevées                           */
  --ph-ink-200: #D9E2E8;   /* séparateurs                                   */
  --ph-ink-300: #BFCBD4;   /* bordures de carte                             */
  --ph-ink-400: #99ABB8;   /* icônes discrètes                              */
  --ph-ink-500: #6C899D;   /* bordure fonctionnelle — 3.55:1 sur ink-0  ✓   */
  --ph-ink-600: #476A83;   /* texte secondaire     — 5.54:1 sur ink-0  ✓AA  */
  --ph-ink-700: #294F6B;   /* texte courant        — 8.36:1 sur ink-0  ✓AAA */
  --ph-ink-800: #173C57;   /* surface sombre surélevée                      */
  --ph-ink-900: #0E2D43;   /* MARINE DE MARQUE     — 13.74:1 sur ink-0 ✓AAA */
  --ph-ink-950: #071C2B;   /* fond sombre profond : héros, pied de page     */

  /* — Rampe AQUA : accent de marque --------------------------------------
     Règle d'or : sur fond sombre on n'utilise JAMAIS aqua-600 (2.91:1 sur
     ink-900, échec). On monte à aqua-400 ou aqua-300. */
  --ph-aqua-50:  #EFF8FA;
  --ph-aqua-100: #DBF0F5;
  --ph-aqua-200: #B3E7F4;
  --ph-aqua-300: #70E2FF;  /* surtitre sur sombre — 11.58:1 sur ink-950 ✓AAA */
  --ph-aqua-400: #1FD2FF;  /* lien/accent sombre  —  7.95:1 sur ink-900 ✓AAA */
  --ph-aqua-500: #00ABD6;  /* survol, halos, brume                           */
  --ph-aqua-600: #007B9A;  /* BLEU DE MARQUE — blanc dessus 4.88:1      ✓AA  */
  --ph-aqua-700: #00647D;  /* lien sur clair 6.50:1 ✓AA + anneau de focus    */
  --ph-aqua-800: #004F63;  /* état pressé                                    */

  /* — Alias sémantiques : les règles consomment ceux-ci, pas les rampes -- */
  --ph-surface:         var(--ph-ink-0);
  --ph-surface-alt:     var(--ph-ink-50);
  --ph-surface-raised:  #FFFFFF;
  --ph-surface-inverse: var(--ph-ink-900);
  --ph-surface-deep:    var(--ph-ink-950);

  --ph-text-strong:     var(--ph-ink-900);
  --ph-text-default:    var(--ph-ink-700);
  --ph-text-muted:      var(--ph-ink-600);
  --ph-text-inverse:    #FFFFFF;
  --ph-text-inverse-muted: var(--ph-ink-200);

  --ph-border-subtle:   var(--ph-ink-200);
  --ph-border-default:  var(--ph-ink-300);
  --ph-border-inverse:  rgba(255, 255, 255, 0.14);

  --ph-accent:          var(--ph-aqua-600);
  --ph-accent-hover:    var(--ph-aqua-500);
  --ph-accent-link:     var(--ph-aqua-700);
  --ph-accent-inverse:  var(--ph-aqua-400);
  --ph-focus:           var(--ph-aqua-700);
  --ph-focus-inverse:   var(--ph-aqua-400);

  /* — Typographie --------------------------------------------------------
     Manrope pour les titres et les libellés (géométrique, moderne, très
     lisible en gros corps), Inter pour la lecture. Les deux se replient sur
     la pile système : si Google Fonts est bloqué, la page reste juste.
     Pour changer de police, ces deux lignes suffisent. */
  --ph-font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ph-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ph-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Échelle fluide, mobile d'abord. Plancher à 16px sur le corps de texte :
     en dessous, la lecture prolongée devient pénible. */
  /* Plafond à 5rem et non 6.5 : au-delà, le titre déborde sur les véhicules
     et sur le logo de la façade, que le cahier des charges impose de laisser
     lisibles. */
  --ph-t-display: clamp(2.5rem, 1.15rem + 5.2vw, 5rem);
  --ph-t-h1:      clamp(2.25rem, 1.3rem + 4.1vw, 4.25rem);
  --ph-t-h2:      clamp(1.875rem, 1.25rem + 2.7vw, 3.25rem);
  --ph-t-h3:      clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --ph-t-lead:    clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  --ph-t-body:    clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --ph-t-small:   0.9375rem;
  --ph-t-label:   0.75rem;

  /* — Rythme vertical ---------------------------------------------------- */
  --ph-section-y:  clamp(5rem, 3rem + 8vw, 11rem);
  --ph-gutter:     clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --ph-max:        76rem;   /* largeur de lecture, alignée sur le site actuel */

  /* — Rayons : 16 à 24px. Au-delà on perd le sérieux industriel. --------- */
  --ph-r-sm:   8px;
  --ph-r-md:   16px;
  --ph-r-lg:   20px;
  --ph-r-xl:   24px;
  --ph-r-pill: 999px;

  /* — Élévation : ombres teintées marine, jamais noires ------------------ */
  --ph-e1: 0 1px 2px rgba(14, 45, 67, 0.06), 0 1px 1px rgba(14, 45, 67, 0.04);
  --ph-e2: 0 4px 14px rgba(14, 45, 67, 0.07), 0 1px 3px rgba(14, 45, 67, 0.05);
  --ph-e3: 0 14px 34px rgba(14, 45, 67, 0.10), 0 4px 10px rgba(14, 45, 67, 0.05);
  --ph-e4: 0 28px 60px rgba(14, 45, 67, 0.14), 0 10px 20px rgba(14, 45, 67, 0.07);

  /* — Mouvement : un vocabulaire unique pour toute la page --------------- */
  --ph-ease:      cubic-bezier(0.16, 1, 0.3, 1);      /* sortie expo         */
  --ph-ease-io:   cubic-bezier(0.65, 0, 0.35, 1);     /* entrée/sortie       */
  --ph-d-micro:   260ms;   /* survols, bascules      (brief : 200–400 ms)    */
  --ph-d-element: 700ms;   /* apparition d'un bloc   (brief : 500–900 ms)    */
  --ph-d-section: 950ms;   /* transition de section  (brief : 700–1200 ms)   */

  /* — Socle ------------------------------------------------------------- */
  position: relative;
  isolation: isolate;              /* les z-index du héros restent internes  */
  overflow-x: clip;                /* aucun débordement horizontal possible  */
  background-color: var(--ph-surface);
  color: var(--ph-text-default);
  font-family: var(--ph-font-sans);
  font-size: var(--ph-t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   02 · REMISE À ZÉRO ENCAPSULÉE
   ----------------------------------------------------------------------------
   Strictement limitée à l'intérieur de `.presthyg-page`. Les thèmes WordPress
   imposent des marges et des tailles aux titres, listes et figures ; sans ce
   garde-fou, le rythme vertical de la page dépendrait du thème installé.
   ========================================================================== */

/* ⚠️ NOTER LE `:where()`. Il n'est pas cosmétique.

   `.presthyg-page h1` vaut (0,1,1) en spécificité, soit PLUS que
   `.presthyg-hero__title` (0,1,0) : la remise à zéro écraserait alors les
   marges de toutes les classes de composants, et la page se retrouverait
   compactée. `:where()` annule la part « élément » du sélecteur, qui retombe
   à (0,1,0) — à égalité avec les composants, donc départagé par l'ordre du
   fichier, et le composant, écrit plus bas, l'emporte.

   Face au thème WordPress, (0,1,0) reste supérieur à `h1` (0,0,1) ou à
   `body p` (0,0,2) : la remise à zéro fait toujours son travail. Elle
   perdrait contre un sélecteur du type `.entry-content p` (0,1,1) ; si votre
   thème en pose un et que le rythme vertical se dérègle, voir INTEGRATION.md
   § « Conflits de thème ». */
.presthyg-page *,
.presthyg-page *::before,
.presthyg-page *::after { box-sizing: border-box; }

.presthyg-page :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, dt, blockquote) {
  margin: 0;
  padding: 0;
}

.presthyg-page :where(ul, ol) { list-style: none; }

.presthyg-page :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
  /* `height: auto` est INDISPENSABLE, pas cosmétique.

     Les attributs `width` et `height` du HTML — qu'il faut garder, ils
     réservent la place et évitent le décalage de mise en page au chargement —
     sont traduits par le navigateur en hauteur CSS. Une hauteur ainsi fixée
     n'est plus `auto`, et `aspect-ratio` est alors purement et simplement
     ignoré : l'image du siège s'affichait en 1136 × 1080 au lieu de
     1136 × 568, soit un recadrage trois fois trop serré. */
  height: auto;
}

.presthyg-page :where(h1, h2, h3, h4) {
  font-family: var(--ph-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ph-text-strong);
  text-wrap: balance;
}

.presthyg-page :where(p) { text-wrap: pretty; }

.presthyg-page :where(a) { color: inherit; }

/* Anneau de focus jamais supprimé : aqua-700 sur clair (6.50:1),
   aqua-400 sur sombre (7.95:1). C'est la seule façon de naviguer au clavier. */
.presthyg-page :focus-visible {
  outline: 2px solid var(--ph-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.presthyg-inverse :focus-visible { outline-color: var(--ph-focus-inverse); }

.presthyg-page ::selection {
  background-color: var(--ph-aqua-300);
  color: var(--ph-ink-950);
}

/* Masquer visuellement sans retirer aux lecteurs d'écran. */
.presthyg-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   03 · PRIMITIVES
   ========================================================================== */

/* — Cibles d'ancre ------------------------------------------------------
   Si votre header WordPress est fixe ou « sticky », un lien vers
   #presthyg-univers amène le titre de section SOUS le header. Cette marge
   l'en écarte. ⚙️ AJUSTEZ `--ph-header` à la hauteur réelle de votre header
   (voir INTEGRATION.md § 6). Mettez 0 si le header défile avec la page. */
.presthyg-page { --ph-header: 5rem; }
.presthyg-page [id] { scroll-margin-top: calc(var(--ph-header) + 1.5rem); }

/* — Coquille de section : largeur de lecture et rythme vertical uniques. -- */
.presthyg-section {
  position: relative;
  padding-block: var(--ph-section-y);
  background-color: var(--ph-surface);
}
.presthyg-section--alt   { background-color: var(--ph-surface-alt); }
.presthyg-section--dark  { background-color: var(--ph-surface-inverse); }
.presthyg-section--deep  { background-color: var(--ph-surface-deep); }

.presthyg-shell {
  width: 100%;
  max-width: var(--ph-max);
  margin-inline: auto;
  padding-inline: var(--ph-gutter);
}
.presthyg-shell--wide { max-width: 88rem; }

/* — Inversion : tout ce qui est sur fond sombre porte cette classe. ------- */
.presthyg-inverse { color: var(--ph-text-inverse-muted); }
/* `:where()` ici aussi : sans lui, cette règle (0,1,1) écraserait la couleur
   des titres définie par les classes de composants (0,1,0). */
.presthyg-inverse :where(h1, h2, h3, h4) { color: var(--ph-text-inverse); }

/* — Surtitre technique --------------------------------------------------- */
.presthyg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ph-font-mono);
  font-size: var(--ph-t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-accent-link);
}
.presthyg-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
}
.presthyg-inverse .presthyg-eyebrow { color: var(--ph-aqua-300); }

/* — En-tête de section --------------------------------------------------- */
.presthyg-head { max-width: 46rem; }
.presthyg-head__title {
  margin-top: 1.25rem;
  font-size: var(--ph-t-h2);
}
.presthyg-head__intro {
  margin-top: 1.5rem;
  font-size: var(--ph-t-lead);
  line-height: 1.55;
  color: var(--ph-text-muted);
  max-width: 42rem;
}
.presthyg-inverse .presthyg-head__intro { color: var(--ph-text-inverse-muted); }

/* — Boutons -------------------------------------------------------------- */
.presthyg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;               /* cible tactile confortable              */
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--ph-r-sm);
  font-family: var(--ph-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ph-d-micro) var(--ph-ease),
    border-color var(--ph-d-micro) var(--ph-ease),
    color var(--ph-d-micro) var(--ph-ease),
    transform var(--ph-d-micro) var(--ph-ease),
    box-shadow var(--ph-d-micro) var(--ph-ease);
}
.presthyg-btn__icon {
  width: 1rem; height: 1rem;
  flex: none;
  transition: transform var(--ph-d-micro) var(--ph-ease);
}
.presthyg-btn:hover .presthyg-btn__icon { transform: translateX(3px); }

.presthyg-btn--primary {
  background-color: var(--ph-accent);
  color: #FFFFFF;                  /* 4.88:1 sur aqua-600 ✓AA               */
  box-shadow: var(--ph-e2);
}
.presthyg-btn--primary:hover {
  background-color: var(--ph-accent-hover);
  color: var(--ph-ink-950);        /* aqua-500 est trop clair pour du blanc */
  transform: translateY(-2px);
  box-shadow: var(--ph-e3);
}
.presthyg-btn--secondary {
  border-color: var(--ph-border-default);
  background-color: var(--ph-surface-raised);
  color: var(--ph-text-strong);
}
.presthyg-btn--secondary:hover {
  border-color: var(--ph-accent);
  color: var(--ph-accent-link);
  transform: translateY(-2px);
  box-shadow: var(--ph-e2);
}
.presthyg-btn--ghost-inverse {
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.presthyg-btn--ghost-inverse:hover {
  border-color: var(--ph-aqua-400);
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* — Lien fléché ---------------------------------------------------------- */
.presthyg-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ph-accent-link);
  text-decoration: none;
  transition: gap var(--ph-d-micro) var(--ph-ease);
}
.presthyg-link:hover { gap: 0.75rem; text-decoration: underline; text-underline-offset: 4px; }
.presthyg-link__icon { width: 0.9rem; height: 0.9rem; flex: none; }
.presthyg-inverse .presthyg-link { color: var(--ph-aqua-300); }

/* — Carte ---------------------------------------------------------------- */
.presthyg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-lg);
  background-color: var(--ph-surface-raised);
  box-shadow: var(--ph-e1);
  transition:
    transform var(--ph-d-micro) var(--ph-ease),
    box-shadow var(--ph-d-micro) var(--ph-ease),
    border-color var(--ph-d-micro) var(--ph-ease),
    background-color var(--ph-d-micro) var(--ph-ease);
}
.presthyg-card:hover {
  transform: translateY(-3px);
  border-color: var(--ph-ink-300);
  box-shadow: var(--ph-e3);
}
.presthyg-card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-sm);
  background-color: var(--ph-aqua-50);
  color: var(--ph-accent-link);
  transition: transform var(--ph-d-micro) var(--ph-ease),
              background-color var(--ph-d-micro) var(--ph-ease);
}
.presthyg-card:hover .presthyg-card__icon {
  transform: translateY(-2px) scale(1.04);
  background-color: var(--ph-aqua-100);
}
.presthyg-card__icon svg { width: 1.375rem; height: 1.375rem; }
.presthyg-card__title { font-size: 1.1875rem; }
.presthyg-card__text {
  margin-top: 0.75rem;
  font-size: var(--ph-t-small);
  color: var(--ph-text-muted);
}

/* Variante sombre. */
.presthyg-card--dark {
  border-color: var(--ph-border-inverse);
  background-color: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}
.presthyg-card--dark:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--ph-e4);
}
.presthyg-card--dark .presthyg-card__title { color: #FFFFFF; }
.presthyg-card--dark .presthyg-card__text { color: var(--ph-text-inverse-muted); }
.presthyg-card--dark .presthyg-card__icon {
  border-color: var(--ph-border-inverse);
  background-color: rgba(31, 210, 255, 0.10);
  color: var(--ph-aqua-300);
}

/* — Étiquette ------------------------------------------------------------ */
.presthyg-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-pill);
  background-color: var(--ph-surface-alt);
  font-size: 0.8125rem;
  color: var(--ph-text-muted);
}
.presthyg-inverse .presthyg-tag {
  border-color: var(--ph-border-inverse);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--ph-text-inverse-muted);
}

/* — Grain argentique : casse le banding des dégradés sur écran 8 bits. --- */
.presthyg-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

/* — Révélation au scroll : état initial, retiré par le JavaScript. -------
   `.presthyg-is-ready` n'est posé sur la page que si le script tourne ET que
   le mouvement riche est autorisé. Sans script, rien n'est jamais masqué. */
.presthyg-page.presthyg-is-ready .presthyg-reveal {
  opacity: 0;
  transform: translateY(18px);
}

/* — État initial du texte du héros --------------------------------------
   Posé par le petit script synchrone en tête du HTML, avant le premier
   rendu : c'est ce qui évite de voir le titre apparaître d'un coup puis
   se faire réanimer. Ce même script retire la classe au bout de 3 s si
   presthyg-home.js n'a jamais démarré — sans ce filet, un fichier bloqué
   laisserait le titre invisible pour toujours. */
.presthyg-page.presthyg-js [data-presthyg-hero-in] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  will-change: opacity, transform;
}

/* ============================================================================
   04 · HÉROS
   ----------------------------------------------------------------------------
   Empilement des calques, du fond vers l'avant :

     1  __media          la photo, seul élément qui subit le travelling
     2  __fog            brume animée (canvas 2D, résolution réduite)
     3  __sun            halo solaire, positionné sur le soleil de la photo
     4  __shimmer        reflets lents sur vitrages et carrosseries
     5  __particles      quelques poussières lumineuses
     6  __veil           voile de lisibilité (gradient marine)
     7  __condensation   voile de verre embué — retiré après l'intro
     8  __wave           onde de révélation — retirée après l'intro
     9  __content        texte
    10  __fade           fondu vers la section suivante

   Le bâtiment, les véhicules et le sol ne bougent JAMAIS l'un par rapport à
   l'autre : le travelling s'applique à l'image entière, d'un bloc. C'est ce
   qui distingue un cinemagraph d'un faux effet 3D.
   ========================================================================== */

/* 320 vh — la valeur de la sauvegarde du 04/08, et elle n'est pas arbitraire :
   il faut cette course pour que la brume ait le temps de se lever sans donner
   l'impression de défiler dans le vide. En dessous de ~250 vh, la dissipation
   devient un fondu ; au-delà de ~400 vh, l'attente devient pesante.
   ⚙️ Réglable ici, et ici seulement. */
.presthyg-hero {
  position: relative;
  /* Mobile : 145 vh. La séquence garde son impact — la brume se lève, le zoom
     recule, le titre passe en contour — mais l'utilisateur atteint le contenu
     en moins d'un écran et demi. Le palier bureau est plus bas (voir juste
     après). */
  height: 145vh;
  background-color: var(--ph-ink-950);
  color: var(--ph-text-inverse-muted);
}

/* Bureau : 190 vh, et non les 320 vh de la sauvegarde du 04/08.

   Les 320 vh d'origine avaient été calibrés pour un héros dont le texte
   restait épinglé pendant toute la course. Ici la brume, le zoom et le passage
   du titre en contour se jouent tous entre 0 et 70 % de l'avancement : au-delà,
   il ne se passait plus rien et le dernier écran et demi défilait à vide.

   190 vh conserve l'intégralité de la séquence — vérifiée image par image —
   et supprime le temps mort. L'enchaînement vers « 01 — L'entreprise » devient
   continu. ⚙️ Réglable ici, et ici seulement. */
@media (min-width: 48em) {
  .presthyg-hero { height: 190vh; }
}

/* Le décor ET le texte tiennent dans ce conteneur, haut d'un écran, qui reste
   devant les yeux pendant que la section défile derrière lui.

   `sticky` et non `position: fixed` comme dans le prototype Next.js : un
   élément fixe se rattache au viewport et échappe à son conteneur, ce qui,
   dans Elementor, le ferait passer par-dessus le header et le pied de page du
   thème. `sticky` reste borné à sa section — même rendu, aucun effet de bord.

   `svh` plutôt que `vh` : sur mobile, `vh` inclut la barre d'adresse et le bas
   du héros passerait sous le pli au chargement. */
.presthyg-hero__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.presthyg-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* — Plans de profondeur ---------------------------------------------------
   Le JavaScript n'écrit QUE trois nombres sur `.presthyg-hero` :
   `--ph-mx` / `--ph-my` (position du pointeur, −1 → 1, lissée) et
   `--ph-scroll` (avancement dans le héros, 0 → 1).

   Chaque calque décide ensuite LUI-MÊME de son amplitude, en CSS. C'est ce
   qui crée la profondeur : la brume et le halo se déplacent davantage, et en
   sens inverse, de la photo. Un seul écrivain, plusieurs lecteurs — aucune
   chaîne de `transform` à recomposer à chaque frame en JavaScript. */
.presthyg-hero {
  --ph-mx: 0;
  --ph-my: 0;
  --ph-scroll: 0;
}

/* Héros figé. Le JavaScript pose cette classe quand la version animée est
   refusée pour une raison AUTRE que `prefers-reduced-motion` : appareil peu
   puissant, connexion en économie de données, interrupteur `forcerStatique`.
   Dans ces cas-là, la requête média du § 15 ne s'applique pas — c'est donc
   ici, et seulement ici, que les animations s'arrêtent. */
.presthyg-hero.presthyg-is-static .presthyg-hero__image,
.presthyg-hero.presthyg-is-static .presthyg-hero__parallax {
  animation: none;
  transform: none;
}
.presthyg-hero.presthyg-is-static .presthyg-hero__sun::before,
.presthyg-hero.presthyg-is-static .presthyg-hero__sun-core {
  animation: none;
}
.presthyg-hero.presthyg-is-static .presthyg-hero__sun {
  opacity: 0.8;
  transform: none;
}

/* Héros sorti de l'écran : le JavaScript pose cette classe et toutes les
   animations de calque s'arrêtent. Elles tournent sur le compositeur, mais
   autant ne pas l'occuper pour des pixels que personne ne regarde. */
.presthyg-hero.presthyg-is-paused .presthyg-hero__image,
.presthyg-hero.presthyg-is-paused .presthyg-hero__fog-band,
.presthyg-hero.presthyg-is-paused .presthyg-hero__sun::before,
.presthyg-hero.presthyg-is-paused .presthyg-hero__sun-core,
.presthyg-hero.presthyg-is-paused .presthyg-hero__glass-sweep,
.presthyg-hero.presthyg-is-paused .presthyg-hero__vehicle-sweep,
.presthyg-hero.presthyg-is-paused .presthyg-hero__particle {
  animation-play-state: paused;
}

/* — 1. La photo -----------------------------------------------------------
   DEUX enveloppes imbriquées, et c'est délibéré : `transform` n'est pas
   cumulatif sur un même élément, la dernière déclaration écrase les autres.
   En les imbriquant, le travelling CSS et le parallaxe JavaScript
   s'additionnent naturellement, sans qu'aucun des deux ait à connaître
   l'existence de l'autre. */
/* `inset: -22px` et non 0 : le parallaxe déplace ce calque de ±9 px et le
   travelling ajoute ±0,6 % de translation. Sans cette marge, le bord droit de
   la photographie se découvrait par instants — une couture verticale nette,
   parfaitement visible. La marge absorbe les deux déplacements. */
.presthyg-hero__parallax {
  position: absolute;
  inset: -22px;
  /* Le TRAVELLING AVANT du 04/08 : on démarre nettement zoomé et on recule à
     mesure qu'on descend. C'est ce mouvement qui donne l'impression que le
     bâtiment « sort » de la brume plutôt qu'il n'apparaît en fondu.

     Amplitude de 14 % — la valeur exacte de la sauvegarde du 04/08, rétablie
     depuis que la photo fait 5504 px de large. Au moment où le zoom est
     maximal, la brume l'est aussi et le bâtiment n'est que deviné ; la
     netteté ne redevient visible qu'en fin de course, à l'échelle 1. Les deux
     courbes sont volontairement synchronisées. */
  transform:
    translate3d(
      calc(var(--ph-mx) * 9px),
      calc(var(--ph-my) * 9px + var(--ph-scroll) * 1.6%),
      0
    )
    scale(calc(1.14 - var(--ph-scroll) * 0.14));
  will-change: transform;
}

.presthyg-hero__image {
  position: absolute;
  inset: 0;
  /* Origine calée sur le bâtiment, pas sur le centre du cadre : le zoom
     converge vers le logo de la façade plutôt que vers le bitume. */
  transform-origin: 56% 56%;
  animation: presthyg-travelling 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* Travelling continu. Amplitude 3,2 % de zoom et 1,1 % de translation sur
   18 secondes : assez pour que l'œil enregistre le mouvement, assez peu pour
   qu'il ne le décrive pas. `alternate` fait repartir l'animation en marche
   arrière au lieu de revenir brutalement au début — aucun saut de boucle.

   ⚙️ Pour accentuer : montez le `scale` de l'image « to » (max conseillé
   1.10 avec une photo ≥ 3840 px ; la photo actuelle fait 1536 px de large et
   ne supporte pas davantage sans perte de netteté visible). */
/* Le plancher est à 1.02, pas à 1.00 : la translation de ±0,6 % a besoin
   d'une réserve d'échelle pour ne jamais découvrir le bord de la photo. */
@keyframes presthyg-travelling {
  from { transform: scale(1.012) translate3d(-0.45%,  0.30%, 0); }
  to   { transform: scale(1.032) translate3d( 0.50%, -0.35%, 0); }
}

.presthyg-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
}

/* — 2a. Brume volumétrique (canvas 2D) ------------------------------------
   Composition NORMALE, pas `screen`. Le shader d'origine fait un `mix()`
   entre la photo et la couleur de brume : en `screen`, une brume dont le
   corps est marine (ink-900) n'assombrirait rien et l'effet disparaîtrait.
   L'alpha calculé par le canvas porte exactement la densité du `mix()`.

   Aucun `filter: blur()` : le tampon fait 384 px, étiré en plein écran, et
   l'agrandissement bilinéaire du navigateur le lisse déjà. Un flou CSS plein
   écran recalculé à chaque frame serait exactement le filtre coûteux en
   continu que le cahier des charges demande d'éviter. */
.presthyg-hero__fog {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  /* `max-width: none` est INDISPENSABLE. La remise à zéro du § 02 applique
     `max-width: 100%` à tous les canvas ; elle ramenait ici la largeur de
     106 % à 100 %, et les 3 % de débordement prévus à droite disparaissaient.
     Résultat : une couture verticale nette sur le bord droit, la brume
     s'arrêtant net au milieu de la photo. */
  max-width: none;
  opacity: 0;                     /* levée par le JS une fois la brume prête */
  transition: opacity 1.4s var(--ph-ease);
  transform: translate3d(calc(var(--ph-mx) * -15px), calc(var(--ph-my) * -9px), 0);
  will-change: transform;
  pointer-events: none;
}

/* — 2b. Nappes de brume rasantes (CSS) ------------------------------------
   Elles passent DEVANT les véhicules, au ras du bitume, là où une brume de
   petit matin stagne réellement. Trois nappes, trois durées premières entre
   elles (43 / 67 / 89 s) : elles ne peuvent jamais se resynchroniser, donc
   l'œil ne trouve pas de motif. Chacune est en `alternate`, ce qui supprime
   le saut de fin de boucle.

   Elles s'arrêtent à 92 % de la hauteur et ne montent jamais au-dessus de
   52 % : ni le bâtiment, ni le logo de la façade, ni le texte ne sont
   touchés. */
.presthyg-hero__fog-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Les nappes se lèvent avec le reste : à mi-course il n'en reste qu'un
     tiers, en fin de course plus rien. */
  opacity: calc(1 - var(--ph-scroll) * 0.92);
  transform: translate3d(calc(var(--ph-mx) * -22px), calc(var(--ph-my) * -12px), 0);
  will-change: transform;
}

.presthyg-hero__fog-band {
  position: absolute;
  left: -55%;
  width: 210%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(222, 240, 250, 0.40) 0%,
    rgba(208, 232, 246, 0.19) 48%,
    rgba(198, 225, 241, 0.06) 72%,
    transparent 88%
  );
  /* PAS de `mix-blend-mode: screen` ici, et ce n'est pas un oubli : le
     conteneur `__fog-layers` porte un `transform` pour le parallaxe, ce qui
     crée un contexte d'empilement. Le fond des nappes serait alors le
     conteneur lui-même — transparent — et non la photographie. La
     déclaration n'aurait donc aucun effet, tout en laissant croire le
     contraire à la relecture. La composition normale, avec des alphas
     ajustés, donne exactement le rendu voulu. */
  will-change: transform;
}
.presthyg-hero__fog-band--1 { top: 54%; height: 30%; opacity: 0.40; animation: presthyg-fog-a 43s ease-in-out infinite alternate; }
.presthyg-hero__fog-band--2 { top: 65%; height: 26%; opacity: 0.30; animation: presthyg-fog-b 67s ease-in-out infinite alternate; }
.presthyg-hero__fog-band--3 { top: 74%; height: 34%; opacity: 0.24; animation: presthyg-fog-c 89s ease-in-out infinite alternate; }

@keyframes presthyg-fog-a {
  from { transform: translate3d(-13%,  1.5%, 0) scaleY(1);    }
  to   { transform: translate3d( 12%, -1.5%, 0) scaleY(1.16); }
}
@keyframes presthyg-fog-b {
  from { transform: translate3d( 14%, -1%, 0) scaleY(1.12); }
  to   { transform: translate3d(-11%,  2%, 0) scaleY(0.94); }
}
@keyframes presthyg-fog-c {
  from { transform: translate3d(-8%, -1.5%, 0) scaleY(0.96); }
  to   { transform: translate3d(16%,  1%,   0) scaleY(1.2);  }
}

/* — 3. Halo solaire -------------------------------------------------------
   Calé sur le soleil RÉEL de la photo : bas à gauche, au-dessus de la ligne
   d'arbres, à environ 4 % / 34 % du cadre. Ce n'est pas un halo décoratif
   posé au centre — il prolonge la source lumineuse existante.

   ⚙️ POUR RECALER après un changement de photo : ajustez `left` et `top`
   ci-dessous jusqu'à ce que le centre du halo coïncide avec le soleil. */
.presthyg-hero__sun {
  position: absolute;
  left: -17%;
  top: 1%;
  width: 42%;
  aspect-ratio: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--ph-mx) * -28px), calc(var(--ph-my) * -16px), 0);
  will-change: transform;
}
/* Nappe large : la diffusion atmosphérique autour du soleil. */
.presthyg-hero__sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 158, 0.40) 0%,
    rgba(255, 190, 118, 0.20) 30%,
    rgba(255, 178, 94, 0.06) 56%,
    transparent 74%
  );
  animation: presthyg-sun-breath 13s ease-in-out infinite alternate;
}
/* Cœur : plus petit, plus blanc, respire à un autre rythme. La différence de
   période entre les deux couches suffit à faire « vivre » la lumière. */
.presthyg-hero__sun-core {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 247, 232, 0.52) 0%,
    rgba(255, 226, 176, 0.24) 34%,
    transparent 70%
  );
  animation: presthyg-sun-core 9s ease-in-out infinite alternate;
}
@keyframes presthyg-sun-breath {
  from { opacity: 0.68; transform: scale(0.97) translate3d(0, 0, 0); }
  to   { opacity: 1;    transform: scale(1.07) translate3d(1.5%, -1%, 0); }
}
@keyframes presthyg-sun-core {
  from { opacity: 0.55; transform: scale(0.92); }
  to   { opacity: 1;    transform: scale(1.10); }
}

/* — 4. Reflet des vitrages ------------------------------------------------
   Cadré sur le bloc bureaux de la photo. `overflow: hidden` sur le conteneur
   est la garantie structurelle que le reflet NE PEUT PAS déborder sur le
   béton, le ciel, les véhicules ou le texte : il est géométriquement
   impossible qu'il sorte de cette boîte.

   ⚙️ ZONE À RECALER si vous changez de photo : les quatre valeurs ci-dessous
   sont en pourcentage du cadre. Repérez les vitrages sur votre image et
   reportez-les ici. */
.presthyg-hero__glass-reflection {
  position: absolute;
  left: 16%;
  top: 22%;
  width: 33%;
  height: 17%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Fondu sur les bords : sans lui, la boîte se devine comme un rectangle. */
  -webkit-mask-image: radial-gradient(78% 88% at 50% 50%, #000 32%, transparent 86%);
  mask-image: radial-gradient(78% 88% at 50% 50%, #000 32%, transparent 86%);
  transform: translate3d(calc(var(--ph-mx) * -5px), calc(var(--ph-my) * -3px), 0);
}
.presthyg-hero__glass-sweep {
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(188, 228, 255, 0.20) 46%,
    rgba(255, 255, 255, 0.46) 50%,
    rgba(188, 228, 255, 0.20) 54%,
    transparent 62%
  );
  animation: presthyg-glass-sweep 11s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Le balayage n'occupe qu'une fraction du cycle : entre deux passages, la
   vitre est simplement une vitre. Un reflet permanent serait un néon. */
@keyframes presthyg-glass-sweep {
  0%,  8%  { transform: translate3d(-130%, 0, 0); opacity: 0; }
  16%      { opacity: 1; }
  46%      { opacity: 1; }
  58%, 100%{ transform: translate3d( 130%, 0, 0); opacity: 0; }
}

/* — 5. Reflet des carrosseries -------------------------------------------
   Cadré sur les deux rangées de véhicules. Opacité volontairement très
   faible (0.22 au pic, contre 0.46 pour les vitrages) : une carrosserie
   laquée renvoie une lumière douce, pas un éclat métallique. Les coverings,
   les logos et les couleurs ne sont jamais touchés — `screen` n'éclaircit
   que ce qui est déjà clair, et le masque radial éteint les bords.

   ⚙️ ZONE À RECALER : mêmes remarques que pour les vitrages. */
.presthyg-hero__vehicle-reflection {
  position: absolute;
  left: 5%;
  top: 38%;
  width: 84%;
  height: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(72% 82% at 50% 46%, #000 26%, transparent 84%);
  mask-image: radial-gradient(72% 82% at 50% 46%, #000 26%, transparent 84%);
  transform: translate3d(calc(var(--ph-mx) * -8px), calc(var(--ph-my) * -5px), 0);
}
.presthyg-hero__vehicle-sweep {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    98deg,
    transparent 40%,
    rgba(214, 238, 255, 0.12) 47%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(214, 238, 255, 0.12) 53%,
    transparent 60%
  );
  /* Déphasé de 4 s par rapport aux vitrages : les deux reflets ne doivent
     jamais passer en même temps, sinon on lit un seul grand balayage. */
  animation: presthyg-vehicle-sweep 16s ease-in-out infinite 4s;
  will-change: transform, opacity;
}
@keyframes presthyg-vehicle-sweep {
  0%,  6%  { transform: translate3d(-120%, 0, 0); opacity: 0; }
  18%      { opacity: 1; }
  52%      { opacity: 1; }
  66%, 100%{ transform: translate3d( 120%, 0, 0); opacity: 0; }
}

/* — 6. Particules ---------------------------------------------------------
   Poussières prises dans la lumière rasante. Douze au maximum : au-delà,
   elles cessent d'être « presque imperceptibles » et deviennent de la neige. */
.presthyg-hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--ph-mx) * -18px), calc(var(--ph-my) * -11px), 0);
}
.presthyg-hero__particle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 240, 214, 0.9);
  box-shadow: 0 0 8px 2px rgba(255, 216, 150, 0.4);
  opacity: 0;
  animation: presthyg-float linear infinite;
}
@keyframes presthyg-float {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0); }
  14%  { opacity: 0.8; }
  76%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translate3d(30px, -120px, 0); }
}

/* — 7. Voile de lisibilité ------------------------------------------------
   Sans lui, le titre blanc passe sur le ciel du lever de soleil et tombe
   sous 4.5:1. */
.presthyg-hero__veil {
  position: absolute;
  inset: 0;
  background:
    /* Renfort elliptique en bas à gauche, exactement sous le bloc de texte.
       Sans lui, l'accroche passe sur les carrosseries blanches des Yaris et
       le contraste tombe sous 4.5:1. Ancré bas — le soleil, à mi-hauteur,
       n'est pas touché. */
    radial-gradient(
      76% 58% at 16% 94%,
      rgba(7, 28, 43, 0.74) 0%,
      rgba(7, 28, 43, 0.30) 44%,
      transparent 72%
    ),
    /* Vertical : dense sous le texte, relâché très vite. Au-delà de 48 % de
       la hauteur il ne reste presque rien — c'est là que se trouvent la ligne
       de toit et le logo de la façade. */
    linear-gradient(
      to top,
      rgba(7, 28, 43, 0.90) 0%,
      rgba(7, 28, 43, 0.60) 22%,
      rgba(7, 28, 43, 0.10) 48%,
      rgba(7, 28, 43, 0.22) 100%
    ),
    linear-gradient(
      to right,
      rgba(7, 28, 43, 0.34) 0%,
      rgba(7, 28, 43, 0.06) 38%,
      transparent 60%
    );
  pointer-events: none;
}

/* — 8. Condensation -------------------------------------------------------
   Un voile de verre embué, pas une salle de bain : aucune goutte, aucune
   coulure. Le fond de la scène est réellement flouté par `backdrop-filter`,
   et un masque diagonal découvre l'image nette au passage de l'onde.

   `--ph-cond` est piloté image par image par le JavaScript, en même temps
   que l'onde et légèrement en retard sur elle : c'est ce décalage qui donne
   l'impression que c'est l'onde qui nettoie, et non un fondu joué en
   parallèle.

   L'élément est RETIRÉ DU DOM à la fin de l'introduction. */
.presthyg-hero__condensation {
  position: absolute;
  inset: 0;
  --ph-cond: 0%;
  backdrop-filter: blur(26px) saturate(0.55) brightness(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(0.55) brightness(1.2);
  background-color: rgba(226, 240, 246, 0.34);
  -webkit-mask-image:
    linear-gradient(104deg,
      transparent calc(var(--ph-cond) - 26%),
      rgba(0, 0, 0, 0.55) calc(var(--ph-cond) - 9%),
      #000 calc(var(--ph-cond) + 4%));
  mask-image:
    linear-gradient(104deg,
      transparent calc(var(--ph-cond) - 26%),
      rgba(0, 0, 0, 0.55) calc(var(--ph-cond) - 9%),
      #000 calc(var(--ph-cond) + 4%));
  pointer-events: none;
}
/* Repli pour les navigateurs sans `backdrop-filter` : un voile clair qui se
   dissipe. Moins spectaculaire, mais jamais un rectangle opaque. */
.presthyg-no-backdrop .presthyg-hero__condensation {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(222, 238, 246, 0.62);
}

/* — 9. Onde de révélation -------------------------------------------------
   Une pellicule d'eau qui passe : un trait lumineux fin, un halo bleuté
   court, et rien derrière. Ni éclaboussure, ni déformation de la photo. */
.presthyg-hero__reveal-wave {
  position: absolute;
  top: -25%;
  left: 0;
  width: 40%;
  height: 150%;
  background: linear-gradient(
    104deg,
    transparent 0%,
    rgba(112, 226, 255, 0.14) 40%,
    rgba(198, 244, 255, 0.62) 62%,
    rgba(255, 255, 255, 0.98) 70%,
    rgba(198, 244, 255, 0.52) 77%,
    rgba(112, 226, 255, 0.10) 88%,
    transparent 97%
  );
  box-shadow: 0 0 90px 30px rgba(112, 226, 255, 0.18);
  mix-blend-mode: screen;
  transform: translate3d(-150%, 0, 0) skewX(-13deg);
  will-change: transform, opacity;
  pointer-events: none;
}
/* — 9. Contenu ----------------------------------------------------------- */
.presthyg-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ph-max);
  margin-inline: auto;
  padding-inline: var(--ph-gutter);
  padding-block: clamp(5rem, 4rem + 6vw, 8rem) clamp(7rem, 5rem + 8vw, 10rem);
}
.presthyg-hero__eyebrow { color: var(--ph-aqua-300); }
.presthyg-hero__title {
  max-width: 17ch;
  margin-top: 1.5rem;
  font-size: var(--ph-t-display);
  line-height: 0.96;
  letter-spacing: -0.032em;
  color: #FFFFFF;
  /* Ombre portée très douce : garantit la lisibilité même si le voile est
     allégé un jour, sans donner l'aspect « texte détouré ». */
  text-shadow: 0 2px 30px rgba(7, 28, 43, 0.55);
}
/* Le titre ne disparaît pas en fondu quand on quitte le héros : il devient
   CONTOUR. C'est la transposition du « texte derrière le sujet » de la
   sauvegarde du 04/08 — obtenue sans détourer la photo. Le JavaScript
   interpole l'épaisseur et l'opacité du remplissage au fil du scroll. */
.presthyg-hero__title {
  -webkit-text-stroke: 0 rgba(31, 210, 255, 0);
}

.presthyg-hero__lead {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: var(--ph-t-lead);
  line-height: 1.55;
  color: var(--ph-ink-100);
  text-shadow: 0 1px 16px rgba(7, 28, 43, 0.6);
}
.presthyg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* — Invite au scroll ----------------------------------------------------- */
.presthyg-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}
.presthyg-hero__scroll-label {
  font-family: var(--ph-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.presthyg-hero__scroll-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 2.75rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
}
.presthyg-hero__scroll-rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1rem;
  background-color: var(--ph-aqua-400);
  animation: presthyg-descend 2.4s var(--ph-ease-io) infinite;
}
@keyframes presthyg-descend {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(275%); }
}

/* — 10. Fondu vers la section suivante ----------------------------------
   Le héros ne doit pas se terminer sur une ligne droite : la section qui
   suit émerge du bas de l'image. */
.presthyg-hero__fade {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: -1px;
  height: clamp(6rem, 12vh, 11rem);
  background: linear-gradient(to bottom, transparent, var(--ph-ink-950) 92%);
  pointer-events: none;
}

/* ============================================================================
   05 · INTRO / MANIFESTE
   ----------------------------------------------------------------------------
   Prolonge le fond sombre du héros puis bascule vers le clair : c'est cette
   section qui absorbe la transition, pour qu'aucune arête ne sépare le héros
   du reste de la page.
   ========================================================================== */

.presthyg-intro {
  position: relative;
  background: linear-gradient(to bottom, var(--ph-ink-950) 0%, var(--ph-ink-900) 62%, var(--ph-ink-900) 100%);
  /* Haut réduit : le héros se termine sur un fondu vers l'encre, et cette
     section reprend la même couleur. Une réserve trop généreuse ici créait
     une bande vide entre les deux — exactement la « sensation de vide »
     signalée. Le bas garde le rythme normal des sections. */
  padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem) var(--ph-section-y);
  overflow: hidden;
}
.presthyg-intro__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}
.presthyg-intro__statement {
  font-family: var(--ph-font-display);
  font-size: var(--ph-t-h2);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: #FFFFFF;
  max-width: 22ch;
}
.presthyg-intro__accent { color: var(--ph-aqua-300); }
.presthyg-intro__body { max-width: 34rem; }
.presthyg-intro__body p + p { margin-top: 1.25rem; }
.presthyg-intro__pillars {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  background-color: var(--ph-border-inverse);
  border-block: 1px solid var(--ph-border-inverse);
}
.presthyg-intro__pillar {
  padding: 1.75rem 0;
  background-color: var(--ph-ink-900);
}
.presthyg-intro__pillar-k {
  display: block;
  font-family: var(--ph-font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ph-aqua-300);
  font-variant-numeric: tabular-nums;
}
.presthyg-intro__pillar-v {
  display: block;
  margin-top: 0.625rem;
  font-size: var(--ph-t-small);
  color: var(--ph-text-inverse-muted);
}

/* ============================================================================
   06 · SIÈGE SOCIAL
   ========================================================================== */

.presthyg-siege__media {
  position: relative;
  margin-top: 3.5rem;
  border-radius: var(--ph-r-xl);
  overflow: hidden;
  box-shadow: var(--ph-e4);
  background-color: var(--ph-ink-950);
}
.presthyg-siege__img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--ph-d-section) var(--ph-ease);
}
.presthyg-siege__media:hover .presthyg-siege__img { transform: scale(1); }
.presthyg-siege__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 3.5rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(7, 28, 43, 0.9), transparent);
  color: #FFFFFF;
  font-family: var(--ph-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.presthyg-siege__facts {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}
.presthyg-siege__fact {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ph-border-subtle);
}
.presthyg-siege__fact-k {
  display: block;
  font-family: var(--ph-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ph-text-strong);
  font-variant-numeric: tabular-nums;
}
.presthyg-siege__fact-v {
  display: block;
  margin-top: 0.625rem;
  font-size: var(--ph-t-small);
  color: var(--ph-text-muted);
}

/* ============================================================================
   08 · UNIVERS — PISTE HORIZONTALE
   ----------------------------------------------------------------------------
   Mise en page reprise de la sauvegarde du 04/08. Deux dispositions, un seul
   DOM :

     · < 1024 px — empilement vertical classique. Le scroll horizontal sur
       téléphone entre en conflit avec le geste de retour et casse le rebond
       natif : il n'est jamais monté ici.
     · ≥ 1024 px — le cadre occupe exactement une hauteur d'écran, il est
       épinglé par GSAP, et la piste est translatée horizontalement au rythme
       du scroll vertical.

   Sans GSAP, la disposition verticale s'applique partout : la section reste
   parfaitement lisible, elle perd seulement son défilement latéral.
   ========================================================================== */

.presthyg-univers {
  position: relative;
  background-color: var(--ph-ink-950);
}

.presthyg-univers__head {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ph-max);
  margin-inline: auto;
  padding: var(--ph-section-y) var(--ph-gutter) 0;
  flex-shrink: 0;
}
.presthyg-univers__title {
  max-width: 16ch;
  margin-top: 1.25rem;
  font-size: var(--ph-t-h2);
  color: #FFFFFF;
}
.presthyg-univers__intro {
  margin-top: 1.25rem;
  max-width: 30rem;
  color: var(--ph-text-inverse-muted);
}

/* Piste : colonne sur mobile, rangée tirée par le scroll sur grand écran. */
.presthyg-univers__track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem var(--ph-gutter) var(--ph-section-y);
}

.presthyg-univers__card {
  display: grid;
  gap: 1.5rem;
  flex-shrink: 0;
}

.presthyg-univers__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ph-r-lg);
  background-color: var(--ph-ink-900);
  aspect-ratio: 4 / 3;
}
.presthyg-univers__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teinte de marque : les photos viennent de décors très différents — couloir
   d'hôpital très clair, atelier très sombre. Ce voile les ramène toutes dans
   la même lumière et garantit le contraste du nom en surimpression. */
.presthyg-univers__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 28, 43, 0.86) 0%, rgba(7, 28, 43, 0.14) 52%, rgba(7, 28, 43, 0.08) 100%);
  pointer-events: none;
}
/* Filet lumineux qui balaie le visuel à l'entrée — signature du 04/08. */
.presthyg-univers__scanline {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ph-aqua-400), transparent);
  box-shadow: 0 0 12px 1px rgba(31, 210, 255, 0.6);
  opacity: 0.7;
  pointer-events: none;
}

.presthyg-univers__kicker {
  font-family: var(--ph-font-mono);
  font-size: var(--ph-t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-aqua-300);
}
.presthyg-univers__name {
  margin-top: 1rem;
  font-size: var(--ph-t-h3);
  color: #FFFFFF;
}
.presthyg-univers__text {
  margin-top: 1.25rem;
  color: var(--ph-text-inverse-muted);
}
.presthyg-univers__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

/* Jauge d'avancement : masquée tant qu'il n'y a pas de piste horizontale. */
.presthyg-univers__gauge { display: none; }

@media (min-width: 64em) {
  /* Le cadre est une colonne d'exactement une hauteur d'écran : en-tête et
     jauge fixes, la piste prend le reste. Sans cette contrainte, les cartes
     débordent sous le pli une fois la section épinglée. */
  /* Le cadre occupe TOUTE la hauteur de l'écran : c'est lui que ScrollTrigger
     épingle, et un cadre plus court que le viewport laisserait une bande vide
     sous la piste — 544 px mesurés sur un écran 1440. */
  .presthyg-univers__frame {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  .presthyg-univers__head {
    padding-top: clamp(4rem, 2rem + 5vw, 7rem);
    padding-bottom: 0.5rem;
  }
  .presthyg-univers__head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
  }
  .presthyg-univers__title { margin-top: 1.25rem; }
  .presthyg-univers__intro { margin-top: 0; padding-bottom: 0.5rem; font-size: 0.9375rem; }

  /* C'est la PISTE qui est plafonnée, pas le cadre.

     Sans `max-height`, elle s'étirait à toute la hauteur disponible : sur un
     27 pouces en 1440 px, la carte atteignait 1077 px alors que son média
     plafonne à 30 rem — il restait plus de 500 px de vide autour de l'image et
     la section paraissait se disloquer. Le plafond à 36 rem garde une carte
     d'environ 540 px à toutes les résolutions, exactement sa taille sur un
     écran de portable. `margin-block: auto` la recentre dans la hauteur
     restante. */
  .presthyg-univers__track {
    flex-direction: row;
    width: max-content;
    flex: 1;
    min-height: 0;
    max-height: 36rem;
    margin-block: auto;
    gap: 2.5rem;
    padding: 0 14vw 1rem max(var(--ph-gutter), calc((100vw - var(--ph-max)) / 2));
    will-change: transform;
  }

  /* La largeur suit celle de l'écran au lieu d'être figée à 44 rem.

     Figée, elle laissait défiler quatre cartes de front sur un ultra-large :
     les animations d'entrée de plusieurs cartes se jouaient alors en même
     temps, ce qui donnait exactement l'impression de déclenchements « au
     mauvais moment ». En liant la largeur au viewport, on garde environ deux
     cartes visibles quelle que soit la résolution — et donc le même rythme. */
  .presthyg-univers__card {
    width: clamp(30rem, 46vw, 54rem);
    height: 100%;
    grid-template-columns: 0.9fr 1fr;
    align-items: center;
    gap: 2.25rem;
  }
  .presthyg-univers__media {
    height: 100%;
    max-height: min(30rem, 100%);
    aspect-ratio: auto;
  }
  .presthyg-univers__text { font-size: 0.9375rem; }

  .presthyg-univers__gauge {
    display: block;
    width: 100%;
    max-width: var(--ph-max);
    margin-inline: auto;
    flex-shrink: 0;
    padding: 0 var(--ph-gutter) 2rem;
  }
  .presthyg-univers__gauge::before {
    content: "";
    display: block;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .presthyg-univers__gauge-fill {
    height: 1px;
    margin-top: -1px;
    width: 100%;
    transform-origin: left;
    transform: scaleX(0);
    background-color: var(--ph-aqua-400);
  }
}

/* ============================================================================
   09 · PRODUITS & MARQUES
   ----------------------------------------------------------------------------
   Les photos produit ne sont JAMAIS retouchées : étiquettes, logos, formes et
   couleurs restent ceux des fichiers fournis. Toute la mise en scène (fond,
   halo, ombre portée, profondeur) est faite en CSS, derrière l'image.

   `mix-blend-mode: multiply` fond le blanc du studio dans le fond clair de la
   carte sans toucher au produit : le blanc devient neutre, les couleurs de
   l'étiquette sont préservées. C'est ce qui remplace un détourage, qui aurait
   mordu dans les bouteilles blanches sur fond blanc.
   ========================================================================== */

.presthyg-produits__hero {
  position: relative;
  margin-top: 3.5rem;
  border-radius: var(--ph-r-xl);
  overflow: hidden;
  box-shadow: var(--ph-e4);
}
.presthyg-produits__hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.presthyg-produits__grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
  margin-top: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
}
.presthyg-produits__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem 1.75rem;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-lg);
  /* Lumière de studio : un halo doux en haut, une base légèrement plus dense
     — la même logique qu'un fond de prise de vue en cyclorama. */
  background:
    radial-gradient(80% 55% at 50% 8%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(to bottom, var(--ph-ink-0) 0%, var(--ph-ink-50) 100%);
  overflow: hidden;
  transition:
    transform var(--ph-d-micro) var(--ph-ease),
    box-shadow var(--ph-d-micro) var(--ph-ease),
    border-color var(--ph-d-micro) var(--ph-ease);
}
.presthyg-produits__card:hover {
  transform: translateY(-3px);
  border-color: var(--ph-ink-300);
  box-shadow: var(--ph-e3);
}
/* Scène produit : boîte de dimensions FIXES, l'image s'y inscrit en
   `object-fit`. On ne s'appuie pas sur `max-height: 100%` — sur un élément
   remplacé dont la largeur vient d'être clampée, le navigateur recalcule la
   hauteur et n'applique plus la contrainte : les bidons sortaient de leur
   cadre et passaient sous le texte. */
.presthyg-produits__stage {
  position: relative;
  width: 100%;
  height: clamp(9rem, 7rem + 8vw, 13rem);
}
/* Halo derrière le produit. */
.presthyg-produits__stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 6%;
  width: 78%; height: 78%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 171, 214, 0.10) 0%, rgba(0, 171, 214, 0) 68%);
}
/* Ombre au sol : une ellipse, pas un rectangle flouté. */
.presthyg-produits__stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2%;
  width: 62%; height: 10%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(14, 45, 67, 0.22) 0%, rgba(14, 45, 67, 0) 72%);
  transition: width var(--ph-d-micro) var(--ph-ease), opacity var(--ph-d-micro) var(--ph-ease);
}
.presthyg-produits__card:hover .presthyg-produits__stage::after { width: 56%; opacity: 0.8; }
.presthyg-produits__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Le produit « pose » sur l'ombre au sol plutôt que de flotter au centre. */
  object-position: center bottom;
  mix-blend-mode: multiply;
  transition: transform var(--ph-d-section) var(--ph-ease);
}
.presthyg-produits__card:hover .presthyg-produits__img { transform: translateY(-6px) scale(1.02); }

/* Variante « scène » : une photographie d'ambiance, pas une découpe sur fond
   blanc. `multiply` y assombrirait toute l'image au lieu d'en fondre le fond,
   et l'ombre au sol n'a plus de sens sous un décor. */
.presthyg-produits__stage--photo::before,
.presthyg-produits__stage--photo::after { display: none; }
.presthyg-produits__stage--photo .presthyg-produits__img {
  mix-blend-mode: normal;
  object-fit: cover;
  object-position: center;
  border-radius: var(--ph-r-md);
}
.presthyg-produits__gamme {
  margin-top: 1.25rem;
  font-family: var(--ph-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-accent-link);
}
.presthyg-produits__name {
  margin-top: 0.5rem;
  font-size: 1rem;
  text-align: center;
}
/* Titre long : une phrase complète à la place d'un intitulé court. Corps
   réduit et interlignage resserré, sinon la carte double de hauteur et
   déséquilibre toute la grille. */
.presthyg-produits__name--long {
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.presthyg-produits__desc {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  text-align: center;
  color: var(--ph-text-muted);
}
.presthyg-produits__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ph-border-subtle);
}

/* — Marques partenaires : bandeau défilant -------------------------------
   Chaque logo est posé dans un CADRE de dimensions identiques. C'est ce qui
   fait toute la différence : sans lui, un logo 5:1 écrase visuellement un
   logo carré et la bande paraît désordonnée. */
.presthyg-marques__track {
  position: relative;
  margin-top: 4rem;
  overflow: hidden;
  /* Fondu sur les bords : le bandeau ne doit pas se couper net. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.presthyg-marques__rail {
  display: flex;
  width: max-content;
  animation: presthyg-marquee 64s linear infinite;
}
/* Pause au survol ET à la prise de focus clavier : sans le second, un logo
   attrapé au Tab s'échappe sous le doigt. */
.presthyg-marques__track:hover .presthyg-marques__rail,
.presthyg-marques__track:focus-within .presthyg-marques__rail {
  animation-play-state: paused;
}
@keyframes presthyg-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.presthyg-marques__lane {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.presthyg-marques__item { padding-inline: 0.75rem; }
.presthyg-marques__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.75rem;
  height: 7rem;
  padding-inline: 1.5rem;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-md);
  background-color: #FFFFFF;
  transition:
    transform var(--ph-d-micro) var(--ph-ease),
    border-color var(--ph-d-micro) var(--ph-ease),
    box-shadow var(--ph-d-micro) var(--ph-ease);
}
.presthyg-marques__frame:hover {
  transform: translateY(-4px);
  border-color: var(--ph-ink-300);
  box-shadow: var(--ph-e2);
}
.presthyg-marques__logo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.presthyg-marques__note {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  /* ink-600 et non ink-500 : sur fond clair, ink-500 plafonne à 3.55:1 et
     échoue le contraste AA pour du texte courant. Le prototype du 04/08
     portait déjà ce défaut. */
  color: var(--ph-text-muted);
}

/* — Certifications : grille de six --------------------------------------
   Grille statique et non carrousel : à six éléments, un défilement n'apporte
   rien et complique la lecture. Le défilement est réservé aux 26 marques
   partenaires, où il se justifie. */
.presthyg-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 4rem;
}
.presthyg-labels__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-md);
  background-color: var(--ph-ink-0);
  text-align: center;
  transition:
    transform var(--ph-d-micro) var(--ph-ease),
    border-color var(--ph-d-micro) var(--ph-ease),
    box-shadow var(--ph-d-micro) var(--ph-ease);
}
.presthyg-labels__item:hover {
  transform: translateY(-4px);
  border-color: var(--ph-ink-300);
  box-shadow: var(--ph-e2);
}
.presthyg-labels__img { width: 4rem; height: 4rem; object-fit: contain; }
/* Le nom est écrit, pas seulement porté par le logo : plusieurs de ces
   marques ne sont pas reconnaissables hors de leur pays d'origine. */
.presthyg-labels__name {
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ph-ink-700);
}

/* ============================================================================
   10 · CHIFFRES CLÉS
   ========================================================================== */

.presthyg-chiffres__grid {
  display: grid;
  gap: 2.5rem 2rem;
  margin-top: 3.5rem;
}
.presthyg-chiffres__item { position: relative; }
.presthyg-chiffres__rule {
  height: 1px;
  margin-bottom: 1.5rem;
  background-color: var(--ph-border-inverse);
  transform-origin: left;
}
.presthyg-chiffres__value {
  font-family: var(--ph-font-display);
  font-size: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
/* Tuile sans chiffre : la formule remplace le décompte. Corps nettement plus
   petit que les nombres voisins — une phrase à leur taille déséquilibrerait
   toute la rangée. */
.presthyg-chiffres__statement {
  font-family: var(--ph-font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

.presthyg-chiffres__label {
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #FFFFFF;
}
.presthyg-chiffres__detail {
  margin-top: 0.375rem;
  font-size: var(--ph-t-small);
  color: var(--ph-text-inverse-muted);
}

/* ============================================================================
   11 · LIVRAISON
   ========================================================================== */

.presthyg-livraison__layout {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 4rem);
  margin-top: 3.5rem;
  align-items: center;
}
.presthyg-livraison__map {
  position: relative;
  border: 1px solid var(--ph-border-inverse);
  border-radius: var(--ph-r-xl);
  background:
    radial-gradient(60% 50% at 46% 62%, rgba(0, 171, 214, 0.13), transparent 72%),
    var(--ph-ink-950);
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  overflow: hidden;
}
.presthyg-livraison__svg { width: 100%; height: auto; }

/* Zones. Le remplissage change au survol ET au focus clavier : la carte est
   utilisable sans souris. */
.presthyg-map__zone {
  cursor: pointer;
  transition: fill var(--ph-d-micro) var(--ph-ease),
              stroke var(--ph-d-micro) var(--ph-ease);
}
.presthyg-map__zone--france {
  fill: rgba(108, 137, 157, 0.26);
  stroke: rgba(191, 203, 212, 0.55);
  stroke-width: 1.4;
}
.presthyg-map__zone--france:hover,
.presthyg-map__zone--france:focus-visible,
.presthyg-map__zone.presthyg-is-active {
  fill: rgba(108, 137, 157, 0.28);
  stroke: rgba(217, 226, 232, 0.7);
}
.presthyg-map__zone--paca {
  fill: rgba(0, 171, 214, 0.34);
  stroke: var(--ph-aqua-300);
  stroke-width: 1.8;
}
.presthyg-map__zone--paca:hover,
.presthyg-map__zone--paca:focus-visible,
.presthyg-map__zone--paca.presthyg-is-active {
  fill: rgba(31, 210, 255, 0.5);
}
.presthyg-map__corsica {
  fill: rgba(108, 137, 157, 0.26);
  stroke: rgba(191, 203, 212, 0.55);
  stroke-width: 1.4;
}
.presthyg-map__line {
  fill: none;
  stroke: rgba(112, 226, 255, 0.5);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.presthyg-map__city { fill: var(--ph-aqua-300); }
.presthyg-map__city-label {
  fill: var(--ph-ink-200);
  font-family: var(--ph-font-sans);
  font-size: 13px;
  font-weight: 500;
}
.presthyg-map__depot-ring { fill: none; stroke: var(--ph-aqua-300); stroke-opacity: 0.4; }
.presthyg-map__depot-pulse {
  fill: none;
  stroke: var(--ph-aqua-400);
  transform-box: fill-box;
  transform-origin: center;
  animation: presthyg-pulse 3.4s var(--ph-ease-io) infinite;
}
@keyframes presthyg-pulse {
  0%   { transform: scale(0.55); opacity: 0.85; }
  100% { transform: scale(1.9);  opacity: 0; }
}
.presthyg-map__depot-label {
  fill: #FFFFFF;
  font-family: var(--ph-font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* Infobulle. */
.presthyg-livraison__tip {
  position: absolute;
  z-index: 3;
  min-width: 14rem;
  max-width: 18rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--ph-border-inverse);
  border-radius: var(--ph-r-md);
  background-color: rgba(7, 28, 43, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ph-e4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ph-d-micro) var(--ph-ease),
              transform var(--ph-d-micro) var(--ph-ease);
  pointer-events: none;
}
.presthyg-livraison__tip.presthyg-is-visible { opacity: 1; transform: translateY(0); }
.presthyg-livraison__tip-title {
  font-family: var(--ph-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-aqua-300);
}
.presthyg-livraison__tip-detail {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FFFFFF;
}
.presthyg-livraison__tip-note {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ph-ink-300);
}

/* Légende — l'information ne repose jamais sur la couleur seule, et reste
   lisible sans JavaScript. */
.presthyg-livraison__legend {
  display: grid;
  gap: 1px;
  margin-top: 1.5rem;
  background-color: var(--ph-border-inverse);
  border: 1px solid var(--ph-border-inverse);
  border-radius: var(--ph-r-md);
  overflow: hidden;
}
.presthyg-livraison__legend-item {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background-color: var(--ph-ink-950);
}
.presthyg-livraison__swatch {
  flex: none;
  width: 0.875rem; height: 0.875rem;
  margin-top: 0.3rem;
  border-radius: 4px;
}
.presthyg-livraison__swatch--paca {
  background-color: rgba(31, 210, 255, 0.5);
  border: 1px solid var(--ph-aqua-300);
}
.presthyg-livraison__swatch--france {
  background-color: rgba(108, 137, 157, 0.3);
  border: 1px solid rgba(191, 203, 212, 0.6);
}
.presthyg-livraison__legend-title { font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; }
.presthyg-livraison__legend-text {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--ph-text-inverse-muted);
}
.presthyg-livraison__delays { margin-top: 0; }
/* Colonne de gauche dimensionnée sur le plus long libellé (« 24–48 h ») et
   non-sécable : à 5.5rem, ce délai passait à la ligne et le « h » se
   retrouvait seul sous le nombre. */
.presthyg-livraison__delay {
  display: grid;
  grid-template-columns: minmax(6.75rem, auto) 1fr;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ph-border-inverse);
}
.presthyg-livraison__delay:last-child { border-bottom: 1px solid var(--ph-border-inverse); }
.presthyg-livraison__delay-k {
  font-family: var(--ph-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--ph-aqua-300);
  font-variant-numeric: tabular-nums;
}
/* « Partenaires » à la place d'une durée : le mot est plus long qu'un nombre,
   il lui faut un corps plus petit pour tenir dans la même colonne. */
.presthyg-livraison__delay-k--mot { font-size: 1.125rem; letter-spacing: -0.01em; }

.presthyg-livraison__delay-zone { font-size: 1.0625rem; font-weight: 600; color: #FFFFFF; }
.presthyg-livraison__delay-cond {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--ph-text-inverse-muted);
}

/* ============================================================================
   12 · SERVICES · ÉQUIPE · HISTOIRE · CONTACT
   ========================================================================== */

.presthyg-services__grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
  margin-top: 3.5rem;
}
/* La première carte occupe deux colonnes : une grille d'icônes strictement
   régulière est exactement ce que le brief demande d'éviter. */
.presthyg-services__grid > .presthyg-card:first-child {
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(0, 171, 214, 0.08), transparent 70%),
    var(--ph-surface-raised);
}

.presthyg-equipe__grid {
  display: grid;
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2rem);
  margin-top: 3.5rem;
}
.presthyg-equipe__card {
  position: relative;
  border-radius: var(--ph-r-lg);
  overflow: hidden;
  background-color: var(--ph-ink-900);
  border: 1px solid var(--ph-border-inverse);
}
.presthyg-equipe__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0.9;
  transition: transform var(--ph-d-section) var(--ph-ease), opacity var(--ph-d-micro) var(--ph-ease);
}
.presthyg-equipe__card:hover .presthyg-equipe__img { transform: scale(1.03); opacity: 1; }
.presthyg-equipe__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 3rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(7, 28, 43, 0.94) 12%, transparent);
}
.presthyg-equipe__role {
  font-family: var(--ph-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-aqua-300);
}
.presthyg-equipe__title { margin-top: 0.5rem; font-size: 1.125rem; color: #FFFFFF; }
.presthyg-equipe__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ph-ink-200);
}
/* — Histoire : frise du 04/08 -------------------------------------------
   Un rail vertical gris, doublé d'un trait de marque qui se REMPLIT au fil
   du scroll, et un jalon par date. C'est le remplissage progressif qui donne
   à la frise sa lecture chronologique — sans lui, ce n'est qu'une liste. */
.presthyg-histoire__list {
  position: relative;
  margin-top: 5rem;
  padding-left: 2.5rem;
}
.presthyg-histoire__rail,
.presthyg-histoire__rail-fill {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 7px;
  width: 1px;
}
.presthyg-histoire__rail { background-color: var(--ph-border-subtle); }
.presthyg-histoire__rail-fill {
  background-color: var(--ph-accent);
  transform-origin: top;
  transform: scaleY(0);
}
.presthyg-histoire__item {
  position: relative;
  padding-bottom: 4rem;
}
.presthyg-histoire__item:last-child { padding-bottom: 0; }
.presthyg-histoire__dot {
  position: absolute;
  top: 0.9rem;
  left: -2.5rem;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ph-accent);
  border-radius: 50%;
  background-color: var(--ph-ink-0);
}
/* L'année est le repère de lecture de la frise : on la traite comme un
   chiffre clé, pas comme une étiquette. Corps display, chiffres à chasse
   fixe pour que les six dates s'alignent parfaitement à la verticale. */
.presthyg-histoire__year {
  font-family: var(--ph-font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ph-accent-link);
  font-variant-numeric: tabular-nums;
}
.presthyg-histoire__title {
  margin-top: 0.5rem;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
}
.presthyg-histoire__text {
  margin-top: 1rem;
  max-width: 42rem;
  color: var(--ph-text-muted);
}
/* Le jalon 2019 compte quatre paragraphes. Sans cet écart réduit entre eux,
   ils se lisent comme quatre jalons distincts. */
.presthyg-histoire__text + .presthyg-histoire__text { margin-top: 0.75rem; }
.presthyg-histoire__figure {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--ph-border-subtle);
  border-radius: var(--ph-r-md);
  background-color: var(--ph-ink-100);
}
.presthyg-histoire__img { width: 100%; height: auto; }

@media (min-width: 40em) {
  .presthyg-histoire__list { padding-left: 4rem; }
  .presthyg-histoire__rail,
  .presthyg-histoire__rail-fill { left: calc(1.5rem + 7px); }
  .presthyg-histoire__dot { left: -4rem; }
}
@media (min-width: 64em) {
  .presthyg-histoire__item {
    display: grid;
    grid-template-columns: 1fr minmax(0, 22rem);
    align-items: start;
    gap: 3rem;
  }
  .presthyg-histoire__figure { margin-top: 0; }
}

/* — Contact -------------------------------------------------------------- */
.presthyg-contact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ph-ink-900) 0%, var(--ph-ink-950) 100%);
}
.presthyg-contact__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 62% at 78% 12%, rgba(0, 171, 214, 0.22), transparent 68%);
  pointer-events: none;
}
.presthyg-contact__layout {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}
.presthyg-contact__title { font-size: var(--ph-t-h1); max-width: 15ch; }
.presthyg-contact__lead {
  margin-top: 1.5rem;
  font-size: var(--ph-t-lead);
  color: var(--ph-text-inverse-muted);
  max-width: 32rem;
}
.presthyg-contact__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.5rem; }
.presthyg-contact__panel {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--ph-border-inverse);
  border-radius: var(--ph-r-xl);
  background-color: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.presthyg-contact__row + .presthyg-contact__row {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ph-border-inverse);
}
.presthyg-contact__k {
  font-family: var(--ph-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-ink-400);
}
.presthyg-contact__v { margin-top: 0.5rem; font-size: 1rem; color: #FFFFFF; }
.presthyg-contact__v a { text-decoration: none; transition: color var(--ph-d-micro) var(--ph-ease); }
.presthyg-contact__v a:hover { color: var(--ph-aqua-300); }
.presthyg-contact__note { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--ph-ink-400); }

/* ============================================================================
   13 · PIED DE PAGE
   ----------------------------------------------------------------------------
   Présentation reprise de la sauvegarde du 04/08 : quatre colonnes sur fond
   marine, sans photo en filigrane.

   ⚠️ C'est le pied de page DU BLOC, pas celui de WordPress. Si votre thème en
   affiche déjà un, supprimez cette section du HTML (elle est délimitée par
   des commentaires) plutôt que d'empiler deux pieds de page.
   ========================================================================== */

.presthyg-footer {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2.5rem;
  background-color: var(--ph-ink-950);
  overflow: hidden;
}
.presthyg-footer__inner { position: relative; }
.presthyg-footer__grid { display: grid; gap: 2.5rem; }
/* Logo officiel. La largeur seule est déclarée : la hauteur suit le rapport
   intrinsèque du fichier (0,815), ce qui garantit qu'aucune déformation n'est
   possible, quelle que soit la taille. `clamp` le fait respirer de 92 px sur
   téléphone à 112 px sur grand écran — lisible partout, jamais envahissant. */
.presthyg-footer__logo {
  width: clamp(5.75rem, 4.5rem + 3vw, 7rem);
  height: auto;
}
.presthyg-footer__tag { margin-top: 1.25rem; max-width: 22rem; font-size: 0.9375rem; color: var(--ph-ink-300); }
.presthyg-footer__h {
  font-family: var(--ph-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-ink-400);
}
.presthyg-footer__list { margin-top: 1.25rem; display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.presthyg-footer__list a {
  color: var(--ph-ink-200);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--ph-d-micro) var(--ph-ease);
}
.presthyg-footer__list a:hover { color: var(--ph-aqua-400); text-decoration: underline; }
.presthyg-footer__address { font-style: normal; margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ph-ink-200); }
.presthyg-footer__social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.presthyg-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--ph-r-sm);
  font-size: 0.8125rem;
  color: var(--ph-ink-200);
  text-decoration: none;
  transition: border-color var(--ph-d-micro) var(--ph-ease), color var(--ph-d-micro) var(--ph-ease);
}
.presthyg-footer__social a:hover { border-color: var(--ph-aqua-400); color: #FFFFFF; }
.presthyg-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ph-border-inverse);
  font-size: 0.8125rem;
  color: var(--ph-ink-400);
}
.presthyg-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.presthyg-footer__legal a { color: var(--ph-ink-400); text-decoration: none; text-underline-offset: 4px; }
.presthyg-footer__legal a:hover { color: var(--ph-aqua-400); text-decoration: underline; }

/* ============================================================================
   14 · RESPONSIVE
   ----------------------------------------------------------------------------
   Mobile d'abord : tout ce qui précède est la version téléphone. On n'ajoute
   des colonnes qu'à partir du moment où la largeur les rend lisibles — ce
   n'est pas une version bureau compressée.
   ========================================================================== */

@media (min-width: 40em) {          /* 640px — grande tablette portrait     */
  .presthyg-intro__pillars   { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .presthyg-intro__pillar    { padding-inline: 1.5rem; }
  .presthyg-intro__pillar:first-child { padding-left: 0; }
  .presthyg-siege__facts     { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .presthyg-produits__grid   { grid-template-columns: repeat(2, 1fr); }
  .presthyg-labels           { grid-template-columns: repeat(3, 1fr); }
  .presthyg-chiffres__grid   { grid-template-columns: repeat(2, 1fr); }
  .presthyg-equipe__grid     { grid-template-columns: repeat(2, 1fr); }
  .presthyg-footer__bottom   { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 64em) {          /* 1024px — portable                    */
  .presthyg-intro__grid      { grid-template-columns: 1fr 1fr; align-items: start; }
  .presthyg-siege__layout    { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; }
  .presthyg-produits__grid   { grid-template-columns: repeat(4, 1fr); }
  .presthyg-labels           { grid-template-columns: repeat(6, 1fr); }
  .presthyg-chiffres__grid   { grid-template-columns: repeat(3, 1fr); }
  .presthyg-livraison__layout{ grid-template-columns: 1.15fr 0.85fr; }
  .presthyg-services__grid   { grid-template-columns: repeat(3, 1fr); }
  .presthyg-services__grid > .presthyg-card:first-child { grid-column: span 2; }
  .presthyg-equipe__grid     { grid-template-columns: repeat(3, 1fr); }
  .presthyg-contact__layout  { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .presthyg-footer__grid     { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; }
  .presthyg-hero__content    { padding-block: 9rem 11rem; }
}

@media (min-width: 80em) {          /* 1280px — grand écran                 */
  /* Huit tuiles : deux rangées de quatre. À six colonnes, la seconde
     rangée n'en aurait plus que deux et la grille paraîtrait tronquée. */
  .presthyg-chiffres__grid   { grid-template-columns: repeat(4, 1fr); }
  .presthyg-chiffres__value  { font-size: clamp(2.25rem, 1.4rem + 1.6vw, 3rem); }
}

/* Écrans courts (portable 13" en paysage, tablette) : le héros plein écran
   pousserait tout le contenu sous le pli. */
@media (max-height: 40em) and (min-width: 48em) {
  .presthyg-hero          { min-height: 42rem; }
  .presthyg-hero__content { padding-block: 6rem 7rem; }
}

/* ============================================================================
   15 · MOUVEMENT RÉDUIT
   ----------------------------------------------------------------------------
   Ce n'est pas un simple `animation: none`. Le même drapeau est lu côté
   JavaScript : la brume canvas n'est jamais montée, le travelling n'est pas
   installé, les compteurs affichent directement leur valeur finale, et la
   photo du bâtiment est nette dès la première frame.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .presthyg-page *,
  .presthyg-page *::before,
  .presthyg-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Le héros redevient une photographie. Pas une animation raccourcie : une
     image nette, immobile, avec son voile de lisibilité et son texte. */
  .presthyg-hero__parallax,
  .presthyg-hero__image       { transform: none; animation: none; }
  /* Le héros redevient un simple écran : plus de course de 320 vh à
     parcourir pour rien. */
  .presthyg-hero              { height: auto; }
  .presthyg-hero__viewport    { position: static; height: 100svh; }
  .presthyg-univers__frame    { height: auto; overflow: visible; }
  .presthyg-univers__track    { flex-direction: column; width: auto; transform: none; }
  .presthyg-univers__card     { width: auto; height: auto; }
  .presthyg-hero__fog,
  .presthyg-hero__fog-layers,
  .presthyg-hero__particles,
  .presthyg-hero__glass-reflection,
  .presthyg-hero__vehicle-reflection,
  .presthyg-hero__condensation,
  .presthyg-hero__reveal-wave { display: none; }
  .presthyg-hero__sun         { opacity: 0.8; transform: none; }
  .presthyg-hero__sun::before,
  .presthyg-hero__sun-core    { animation: none; }
  .presthyg-hero__scroll-rail::after { animation: none; transform: translateY(60%); }

  .presthyg-page.presthyg-is-ready .presthyg-reveal { opacity: 1; transform: none; }
  .presthyg-page.presthyg-js [data-presthyg-hero-in] { opacity: 1; transform: none; }
}

/* Impression : on ne fait pas payer d'encre pour des dégradés. */
@media print {
  .presthyg-hero__stage,
  .presthyg-contact__glow { display: none; }
  .presthyg-page { color: #000; }
}