/*
Theme Name: La Houle Media
Theme URI: https://diginoone.be
Author: diginoone
Author URI: https://diginoone.be
Description: Thème bloc sur mesure de La Houle Media (Liège). Les pages sont en blocs natifs, modifiables dans l'éditeur ; les coordonnées se règlent dans le menu « La Houle Media ».
Version: 1.1.1
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-houle-media
*/

/* La Houle Media : feuille de style unique.
   Identité reprise des brochures : fond noir, texte gris clair, bleu électrique #008cff, Poppins (titres ExtraBold serrés). */

@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/poppins-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
/* Police de secours aux mêmes proportions que Poppins : le texte ne saute pas quand la vraie police arrive */
@font-face { font-family: "Poppins repli"; src: local("Arial"); size-adjust: 113.1%; ascent-override: 92.8%; descent-override: 30.9%; line-gap-override: 8.8%; }

:root {
  --nuit: #050505;
  --encre: #111111;
  --ligne: #262626;
  --ecume: #d5d5d5;
  --blanc: #ffffff;
  --bleu: #008cff;
  --bleu-clair: #3aa6ff;
  --gris: #9a9a9a;
  --bord: rgba(213, 213, 213, .5);
  --entete: 72px;
  --gouttiere: clamp(20px, 5vw, 56px);
  --rayon: 20px;
  --police: "Poppins", "Poppins repli", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--ecume);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--bleu); outline-offset: 3px;
}
::selection { background: var(--bleu); color: var(--nuit); }
section[id], [id] { scroll-margin-top: calc(var(--entete) + 12px); }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  background: var(--bleu); color: var(--nuit); font-weight: 700; padding: 12px 18px; border-radius: 10px; text-decoration: none;
}
.evitement:focus { top: 16px; }


/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 8px 24px; border: 2px solid transparent; border-radius: 999px;
  font: 700 .98rem/1.2 var(--police); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, translate .25s;
}
.btn--bleu { background: var(--bleu); color: var(--nuit); }
.btn--bleu:hover { background: var(--bleu-clair); }
.btn--bleu:focus-visible { outline-color: var(--blanc); }
.btn--contour { border-color: var(--bord); color: var(--blanc); background: transparent; }
.btn--contour:hover { border-color: var(--bleu); color: var(--bleu); }
.btn--grand { min-height: 56px; padding: 10px 30px; font-size: 1.02rem; }
.btn svg { flex: none; }
.btn--fleche svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.btn--fleche:hover svg { transform: translateX(4px); }

/* Titres de section : chaque mot monte de derrière un cache (préparé par le script) */
/* Marges intérieures compensées : les lettres serrées (dernier S, accents) ne sont pas rognées par le cache */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em .14em .08em; margin: -.24em -.14em -.08em; }
.mot > span { display: inline-block; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.entete.is-scrolled, .menu-ouvert .entete { background: rgba(5, 5, 5, .9); border-color: #1c1c1c; }
/* La vague de l'accueil efface l'en-tête pendant son passage : menu ouvert, il reste toujours net.
   Le flou de l'en-tête (après défilement) enfermerait le menu dans la barre du haut : on le coupe, le menu est opaque. */
html.menu-ouvert .entete { opacity: 1 !important; pointer-events: auto !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports (backdrop-filter: blur(1px)) {
  .entete.is-scrolled { background: rgba(5, 5, 5, .72); backdrop-filter: blur(14px) saturate(140%); }
}
.entete__barre { position: relative; z-index: 2; height: var(--entete); display: flex; align-items: center; gap: 16px; }
.marque {
  margin-right: auto; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--blanc); font-weight: 800; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
}
.marque span { margin-left: .45em; color: var(--ecume); font-weight: 400; letter-spacing: .32em; }
.nav { display: none; }
.nav__liste { display: flex; gap: clamp(18px, 2.1vw, 38px); list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ecume); font-size: .95rem; font-weight: 500; text-decoration: none; transition: color .2s;
}
.nav__liste a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--bleu);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
/* Liens principaux en petites capitales espacées, comme les repères de section ; le sous-menu garde l'écriture normale */
.nav__liste > li > a { padding: 0; color: var(--gris); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.nav__liste > li > a::after { left: 0; right: .2em; bottom: 11px; height: 1px; }
.nav__liste a:hover { color: var(--blanc); }
.nav__liste a:hover::after, .nav__liste a.is-actif::after { transform: scaleX(1); }
.nav__liste a.is-actif { color: var(--blanc); }
/* Page en cours soulignée ; sur l'accueil, la section en cours prend le relais */
.nav__liste a[aria-current="page"] { color: var(--blanc); }
.nav__liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav__liste:has(.is-actif) a[aria-current="page"]:not(.is-actif, :hover)::after { transform: scaleX(0); }
/* Sous-menu Services : au survol à la souris, à la flèche au clavier et au doigt */
.nav__groupe { position: relative; display: flex; align-items: center; }
.nav__groupe > a { padding-right: 2px; }
.nav__groupe > a::after { right: 2px; }
.nav__fleche { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gris); cursor: pointer; transition: color .2s; }
.nav__chevron { width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.nav__sous {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; margin: 0; padding: 8px; list-style: none;
  background: var(--encre); border: 1px solid var(--ligne); border-radius: 14px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
/* Pont invisible : le sous-menu reste ouvert pendant que la souris descend */
.nav__sous::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav__sous a { display: flex; min-height: 44px; padding: 0 12px; border-radius: 8px; white-space: nowrap; transition: color .2s, background-color .2s; }
.nav__sous a::after { display: none; }
.nav__sous a:hover { background: var(--nuit); }
.nav__groupe.is-ouvert .nav__fleche { color: var(--blanc); }
.nav__groupe.is-ouvert .nav__chevron { transform: translateY(1px) rotate(225deg); }
.nav__groupe.is-ouvert .nav__sous { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .nav__groupe:hover .nav__fleche { color: var(--blanc); }
  .nav__groupe:hover .nav__chevron { transform: translateY(1px) rotate(225deg); }
  .nav__groupe:hover .nav__sous { opacity: 1; visibility: visible; transform: none; }
}
.nav__groupe.is-ferme .nav__sous { opacity: 0; visibility: hidden; }
.entete__cta { display: none; min-height: 44px; padding: 6px 20px; font-size: .92rem; }
.burger {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--bord); border-radius: 999px; background: transparent; color: var(--blanc);
  font: 700 .9rem var(--police); cursor: pointer;
}
.burger__traits { position: relative; width: 18px; height: 10px; }
.burger__traits span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s, top .3s; }
.burger__traits span:first-child { top: 0; }
.burger__traits span:last-child { top: 8px; }
.burger[aria-expanded="true"] .burger__traits span:first-child { top: 4px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits span:last-child { top: 4px; transform: rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--entete) + 24px) var(--gouttiere) calc(32px + env(safe-area-inset-bottom));
  background: var(--nuit);
}
.menu-mobile[hidden] { display: none; }
/* Même écriture que le menu de l'ordinateur : petites capitales espacées.
   Un seul élément principal en bleu (choisi par le script) : celui qu'on touche, sinon Services déplié,
   sinon la section à l'écran, sinon la page en cours. */
.menu-mobile__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.menu-mobile__liste > li { border-bottom: 1px solid var(--ligne); }
.menu-mobile__lien {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 60px; padding: 0;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  color: var(--ecume); font: 600 1rem/1.2 var(--police); letter-spacing: .2em; text-transform: uppercase;
  text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .2s;
}
.menu-mobile__num { min-width: 1.5rem; color: var(--gris); font-size: .7rem; letter-spacing: .1em; transition: color .2s; }
.menu-mobile__lien .nav__chevron { margin: 0 6px 0 auto; }
.menu-mobile__lien[aria-expanded="true"] .nav__chevron { transform: translateY(1px) rotate(225deg); }
.menu-mobile__lien.is-allume, .menu-mobile__lien:active,
.menu-mobile__lien.is-allume .menu-mobile__num, .menu-mobile__lien:active .menu-mobile__num { color: var(--bleu); transition: none; }
.menu-mobile__sous { list-style: none; margin: -6px 0 0; padding: 0 0 12px calc(1.5rem + 18px); }
.menu-mobile__sous a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--gris); font-size: .98rem; font-weight: 500; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: color .2s;
}
.menu-mobile__sous a:active, .menu-mobile__sous a.is-touche, .menu-mobile__sous a[aria-current="page"] { color: var(--bleu); transition: none; }
.menu-mobile__sous:has(.is-touche) a[aria-current="page"]:not(.is-touche) { color: var(--gris); }
@media (hover: hover) {
  .menu-mobile__lien:not(.is-allume):hover, .menu-mobile__sous a:not([aria-current="page"], .is-touche):hover { color: var(--blanc); }
}
/* Les lignes arrivent l'une après l'autre à l'ouverture */
@media (prefers-reduced-motion: no-preference) {
  .menu-mobile:not([hidden]) .menu-mobile__liste > li, .menu-mobile:not([hidden]) .menu-mobile__pied,
  .menu-mobile__sous:not([hidden]) li { animation: menu-entree .4s cubic-bezier(.2, .7, .2, 1) both; }
  .menu-mobile__liste > li:nth-child(2) { animation-delay: .03s; }
  .menu-mobile__liste > li:nth-child(3) { animation-delay: .06s; }
  .menu-mobile__liste > li:nth-child(4) { animation-delay: .09s; }
  .menu-mobile__liste > li:nth-child(5) { animation-delay: .12s; }
  .menu-mobile__liste > li:nth-child(6) { animation-delay: .15s; }
  .menu-mobile:not([hidden]) .menu-mobile__pied { animation-delay: .18s; }
}
@keyframes menu-entree { from { opacity: 0; transform: translateY(8px); } }
.menu-mobile__pied { display: grid; gap: 12px; }
.menu-mobile__pied p { margin: 4px 0 0; color: var(--gris); font-size: .95rem; }
html.menu-ouvert { overflow: hidden; }

@media (min-width: 700px) {
  .entete__cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .burger, .menu-mobile { display: none !important; }
  /* Menu vraiment centré dans la page, logo à gauche et bouton à droite */
  .entete__barre { display: grid; grid-template-columns: 1fr auto 1fr; }
  .marque { margin-right: 0; justify-self: start; }
  .entete__cta { justify-self: end; white-space: nowrap; }
}
/* Petits ordinateurs : le menu se resserre pour laisser respirer le logo et le bouton */
@media (min-width: 1100px) and (max-width: 1279px) {
  .entete__barre { grid-template-columns: auto 1fr auto; }
  .nav { justify-self: center; }
  .nav__liste { gap: 14px; }
  .nav__liste > li > a { letter-spacing: .12em; }
  .entete__cta { padding-inline: 16px; }
}

/* ---------- Titres communs ---------- */
.num { display: flex; align-items: center; gap: 14px; margin: 0 0 1.1rem; color: var(--gris); font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
/* Petite vague bleue devant chaque repère de section (dessin dans /images/vaguelette.svg) */
.num::before {
  content: ""; width: 38px; height: 8px; background: var(--bleu); flex: none;
  /* Motif de vague répété qui glisse vers la droite, bouts fondus */
  -webkit-mask: url("assets/images/vaguelette.svg?v=2") 0 50% / 16px 8px repeat-x, linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask: url("assets/images/vaguelette.svg?v=2") 0 50% / 16px 8px repeat-x, linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-composite: intersect;
  animation: vaguelette 2.4s linear infinite;
}
@keyframes vaguelette { to { -webkit-mask-position: 16px 50%, 0 0; mask-position: 16px 50%, 0 0; } }
.titre {
  margin: 0 0 .45em; color: var(--ecume);
  font-size: clamp(2.6rem, 8.4vw, 6.2rem); font-weight: 800; line-height: .98; letter-spacing: -.055em;
  text-transform: uppercase; text-wrap: balance;
}
.chapeau { color: var(--blanc); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.45; }

.section { padding-block: clamp(88px, 11vw, 168px); }
.section--encre { background: var(--encre); }

.entete-section { display: grid; gap: 0 clamp(32px, 6vw, 96px); }
.entete-section__texte { max-width: 46ch; color: var(--ecume); }
@media (min-width: 960px) {
  .entete-section { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .entete-section .num, .entete-section .titre { grid-column: 1; }
  .entete-section .titre { margin: 0; }
  .entete-section__texte { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 .5em; }
}

/* ---------- Haut de page ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--entete) + clamp(20px, 4vh, 56px)) 0 clamp(84px, 11vh, 130px);
}
.hero::before {
  content: ""; position: absolute; inset: auto -10% -30% -10%; height: 70%; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 80%, rgba(0, 140, 255, .16), transparent 70%);
  animation: lueur 16s ease-in-out infinite alternate;
}
@keyframes lueur { from { transform: translateX(-8%) scale(1); } to { transform: translateX(10%) scale(1.15); } }
/* La vague du logo, en grand derrière le haut de page (image fixe, remplacée par la version animée si possible) */
.hero__vague {
  position: absolute; z-index: 0; pointer-events: none;
  right: -30vw; bottom: 70px; width: 150vw; aspect-ratio: 872 / 492; opacity: .7;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 32%);
  mask-image: linear-gradient(to top, transparent 0%, #000 32%);
}
.hero__vague picture, .hero__vague img, .pied__vague picture, .pied__vague img, .vague-toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__vague picture, .pied__vague picture { transition: opacity 1s ease; }
.vague-toile { opacity: 0; transition: opacity 1s ease; }
.is-anime > .vague-toile { opacity: 1; }
.is-anime > picture { opacity: 0; }
.hero__grille { position: relative; z-index: 1; display: grid; gap: 22px; grid-template-areas: "titre" "bas"; }
.hero__meta { display: none; }
.hero__titre {
  grid-area: titre; margin: 0; color: var(--ecume);
  font-size: clamp(4.6rem, 25.5vw, 9rem); font-weight: 800; line-height: .84; letter-spacing: -.065em; text-transform: uppercase;
}
.hero__visuel { display: block; }
.hero__titre .ligne { display: block; overflow: hidden; padding: .02em 0 .06em; margin-bottom: -.04em; }
.hero__titre .ligne > span { display: inline-block; }
.hero__titre .lettre { display: inline-block; will-change: transform; }
/* Après l'entrée, les lettres peuvent dépasser de leur ligne quand la houle les soulève */
.hero.is-pret .ligne { overflow: visible; }
.hero__accroche [data-mot] { transition: color .6s ease; }
.hero__accroche [data-mot].is-bleu { color: var(--bleu); }
.hero__bas { grid-area: bas; }
.hero__accroche { margin: 0 0 20px; color: var(--blanc); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.45; max-width: 32ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
/* Fond sombre derrière le bouton à contour : il reste lisible quand il passe sur l'écume de la vague */
.hero__actions .btn--contour { background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__zone { position: relative; padding: 4px 12px 4px 8px; margin-left: -8px; border-radius: 999px; background: rgba(5, 5, 5, .7); }
.hero__zone { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ecume); font-size: .95rem; font-weight: 500; }
.hero__zone svg { color: var(--bleu); }

@media (min-width: 600px) and (max-width: 959px) {
  .hero__grille {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "titre titre" "bas .";
    gap: 32px 24px; align-items: center;
  }
  .hero__titre { font-size: min(24vw, 12rem); }
  .hero__vague { right: -12vw; bottom: 60px; width: 95vw; opacity: .8; }
}
@media (min-width: 960px) {
  .hero__grille {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "titre meta" "bas .";
    gap: 8px clamp(24px, 4vw, 64px); align-items: center;
  }
  .hero__meta {
    grid-area: meta; display: block; align-self: start; justify-self: end; margin: 0;
    color: var(--ecume); font-size: .95rem; font-weight: 500; text-align: right; line-height: 1.4;
  }
  .hero__meta span { display: block; color: var(--gris); font-weight: 400; }
  /* Le titre suit aussi la hauteur de l'écran : les boutons restent visibles sans défiler, même sur un portable */
  .hero__titre { font-size: max(4.5rem, min(12.2vw, 11.75rem, calc((100svh - 330px) / 2.8))); align-self: end; }
  .hero__bas { padding-top: 20px; }
  .hero__vague {
    right: -4vw; bottom: clamp(40px, 8vh, 100px); width: min(1240px, 76vw, calc((100svh - 150px) * 1.77)); opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 26%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 26%);
    mask-composite: intersect;
  }
}

/* La ligne de houle */
.houle { position: absolute; left: 0; right: 0; bottom: 18px; height: clamp(56px, 8vw, 110px); pointer-events: none; }
.houle svg { width: 100%; height: 100%; overflow: visible; }
.houle__ligne { fill: none; stroke: var(--bleu); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.houle__ligne--fond { stroke-opacity: .35; stroke-width: 1.5; }

/* ---------- Bande qui défile ---------- */
.defile { overflow: hidden; background: var(--bleu); color: var(--nuit); padding: 16px 0; }
.defile__piste { display: flex; align-items: center; width: max-content; animation: defile 40s linear infinite; }
.defile__piste span {
  padding: 0 .7em; white-space: nowrap;
  font-size: clamp(1.25rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; line-height: 1.2;
}
.defile__piste i { flex: none; width: .45em; height: .45em; border-radius: 50%; background: var(--nuit); font-size: clamp(1.25rem, 2.6vw, 2.2rem); }
@keyframes defile { to { transform: translateX(-50%); } }
/* Quand GSAP pilote la bande (vitesse qui suit le défilement), l'animation CSS s'arrête */
.defile--js .defile__piste { animation: none; }

/* ---------- /01 L'agence ---------- */
#agence { padding-bottom: 0; }
.agence { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; }
@media (min-width: 960px) {
  .agence { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .agence__tete { grid-column: 1 / -1; }
}
.agence__tete .titre { margin: 0; }
.agence__texte > p:not(.num):not(.chapeau):not(.objectif) { font-size: 1.1rem; }
.objectif {
  margin: 1.6em 0 0; padding: 1.1em 0 1.1em 1.4em; border-left: 3px solid var(--bleu);
  color: var(--blanc); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.45;
}
.objectif span { color: var(--bleu); font-weight: 800; }

.lecteur { margin: 0; }
.lecteur__cadre {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 2px solid var(--ecume); border-radius: var(--rayon); background: #0b0b0b;
}
.lecteur__cadre picture, .lecteur__cadre img { width: 100%; height: 100%; }
.lecteur__cadre img { object-fit: cover; object-position: center 35%; }
.lecteur__cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 42%); }
.lecteur__point { position: absolute; z-index: 2; top: 16px; right: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--ecume); }
.lecteur__barre { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 14px; color: var(--ecume); }
.lecteur__piste { position: relative; flex: 1; height: 2px; background: rgba(213, 213, 213, .55); }
.lecteur__curseur {
  position: absolute; top: 50%; left: 30%; width: 11px; height: 11px; border-radius: 50%; background: var(--ecume);
  transform: translate(-50%, -50%); animation: lecture 14s linear infinite;
}
.lecteur__piste::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: var(--bleu); animation: lecture-piste 14s linear infinite; }
@keyframes lecture { from { left: 6%; } to { left: 94%; } }
@keyframes lecture-piste { from { width: 6%; } to { width: 94%; } }
.lecteur figcaption { margin-top: 14px; color: var(--gris); font-size: .95rem; }

.bandeau { padding-block: clamp(72px, 10vw, 136px) clamp(88px, 11vw, 168px); }
.bandeau-photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--rayon); }
.bandeau-photo picture, .bandeau-photo img { width: 100%; height: clamp(260px, 38vw, 520px); }
.bandeau-photo img { object-fit: cover; object-position: center 55%; }
.bandeau-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 5, 5, .85), rgba(5, 5, 5, 0) 55%); }
.bandeau-photo figcaption {
  position: absolute; z-index: 1; left: clamp(20px, 3.5vw, 48px); bottom: clamp(18px, 3.5vw, 44px);
  color: var(--blanc); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 500;
}
.bandeau-photo figcaption span {
  display: block; color: var(--blanc); font-size: clamp(3rem, 10vw, 8.5rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; text-transform: uppercase;
  padding-top: .12em;
}

/* ---------- /02 Services ---------- */
.services { margin-top: clamp(44px, 5vw, 72px) !important; border-top: 1px solid var(--ligne); }
/* L'inclinaison au survol est animée par le script (GSAP), pas par une transition CSS */
.service, .formule, .option { transition: border-color .3s, box-shadow .3s; }
.service { position: relative; border-bottom: 1px solid var(--ligne); }
.service__num { color: var(--gris); font-size: .78rem; font-weight: 600; letter-spacing: .22em; }
.service h3 { margin: 0; color: var(--ecume); font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; transition: color .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.service p { margin: 0; max-width: 44ch; color: var(--gris); }
.service:hover h3, .service__bloc:focus-visible h3 { color: var(--bleu); transform: translateX(8px); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px !important; }
.puces li { padding: 6px 13px; border: 1px solid #3a3a3a; border-radius: 999px; color: var(--ecume); font-size: .86rem; font-weight: 500; line-height: 1.3; }

/* ---------- /03 Approche ---------- */
.approche { display: grid; gap: clamp(36px, 5vw, 96px); }
@media (min-width: 960px) {
  .approche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .approche__gauche { position: sticky; top: calc(var(--entete) + 32px); }
}
.approche__photo { margin: 12px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon); }
.approche__photo picture, .approche__photo img { width: 100%; height: 100%; }
.approche__photo img { object-fit: cover; }
.etapes-cadre { position: relative; }
/* Ligne de progression le long des étapes, remplie au défilement (seulement avec le script) */
.etapes__progression { display: none; }
html.js .etapes__progression {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ligne);
}
.etapes__progression span { display: block; width: 100%; height: 100%; background: var(--bleu); transform: scaleY(0); transform-origin: top; }
html.js .etapes { padding-left: clamp(22px, 3vw, 36px); }
.etape {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px);
  padding-block: clamp(30px, 4.5vw, 60px); border-top: 1px solid var(--ligne);
  transition: opacity .7s ease;
}
.etape:last-child { border-bottom: 1px solid var(--ligne); }
.etape__num {
  min-width: 1.6em; color: transparent; -webkit-text-stroke: 1.5px var(--gris);
  font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; line-height: .85; letter-spacing: -.06em;
  transition: color .7s ease, -webkit-text-stroke-color .7s ease;
}
.etape h3 { margin: 4px 0 10px; color: var(--blanc); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.etape p { margin: 0; font-size: 1.08rem; }
.etape.is-on .etape__num { color: var(--bleu); -webkit-text-stroke-color: var(--bleu); }
html.js .etape:not(.is-on) { opacity: .4; }

/* ---------- /04 Projets ---------- */
.univers { display: grid; gap: clamp(36px, 4vw, 44px) clamp(20px, 3vw, 40px); margin-top: clamp(44px, 5vw, 72px) !important; }
@media (min-width: 700px) { .univers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .univers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .univers__carte:nth-child(2) { margin-top: 88px; }
}
.univers__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: #0b0b0b; }
.univers__photo picture, .univers__photo img, .univers__zoom { width: 100%; height: 100%; }
.univers__photo img { object-fit: cover; }
/* Le survol passe par un cadre : la vidéo garde son animation d'apparition, sans conflit de transition */
.univers__photo img, .univers__zoom { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.univers__carte:hover .univers__photo img { transform: scale(1.045); }
.univers__carte:nth-child(2) img { object-position: 72% center; }
.univers__carte:nth-child(3) img { object-position: center 18%; }
.univers__carte h3 { margin: 22px 0 8px; color: var(--blanc); font-size: clamp(1.3rem, 1.9vw, 1.55rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.univers__carte p { margin: 0; }
/* Réalisations récentes (réels Instagram) */
.realisations {
  display: grid; gap: clamp(40px, 5vw, 88px);
  margin-top: clamp(64px, 8vw, 120px); padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--ligne);
}
@media (min-width: 960px) {
  .realisations { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
  .telephone-reel { position: sticky; top: calc(var(--entete) + 32px); }
}
.telephone-reel { margin: 0; justify-self: center; width: min(72vw, 340px); }
.telephone-reel__ecran {
  aspect-ratio: 9 / 16; overflow: hidden; border: 7px solid #1d1d1d; border-radius: 34px;
  box-shadow: 0 0 0 1.5px var(--bord), 0 40px 90px -40px rgba(0, 140, 255, .55);
}
.telephone-reel__ecran picture, .telephone-reel__ecran img { width: 100%; height: 100%; }
.telephone-reel__ecran img { object-fit: cover; }
.telephone-reel figcaption { margin-top: 14px; color: var(--gris); font-size: .92rem; text-align: center; }
.realisations__titre { color: var(--blanc); font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; text-transform: uppercase; }
.realisations__note { margin: 10px 0 22px; color: var(--gris); font-size: .92rem; }
.realisations__items a {
  display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0;
  border-top: 1px solid var(--ligne); color: inherit; text-decoration: none;
}
.realisations__items li:last-child a { border-bottom: 1px solid var(--ligne); }
.realisations__items time { color: var(--gris); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.realisation__nom { color: var(--blanc); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; transition: color .25s; }
.realisation__texte { color: var(--ecume); font-size: .98rem; }
.realisation__voir { display: inline-flex; align-items: center; gap: 8px; color: var(--ecume); font-size: .92rem; font-weight: 700; }
.realisation__voir::after { content: "↗"; color: currentColor; font-size: 1.1em; transition: transform .25s; }
.realisations__items a:hover .realisation__nom { color: var(--bleu); }
.realisations__items a:hover .realisation__voir::after { transform: translate(2px, -2px); }
@media (min-width: 640px) {
  .realisations__items a { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
  .realisations__items time { grid-row: 1 / span 2; }
  .realisation__texte { grid-column: 2; }
  .realisation__voir { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
}
.citation { margin: 34px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--bleu); }
.citation p { margin: 0; color: var(--blanc); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; line-height: 1.5; }

.projets__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--ligne);
}
.projets__pied p { margin: 0; color: var(--gris); font-size: .95rem; max-width: 60ch; }

/* ---------- /05 Formules ---------- */
.formules { display: grid; gap: 20px; margin-top: clamp(44px, 5vw, 72px) !important; }
@media (min-width: 900px) { .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formule {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px); background: var(--encre);
  border: 1.5px solid var(--bord); border-radius: var(--rayon);
}
.formule--avant { border: 2px solid var(--bleu); box-shadow: 0 24px 70px -30px rgba(0, 140, 255, .55); }
/* Au survol (ou au clavier), le contour passe en bleu */
.formule:hover, .formule:focus-within, .vip:hover, .vip:focus-within, .option:hover, .option:focus-within { border-color: var(--bleu); }
.formule:hover, .formule:focus-within { box-shadow: 0 24px 70px -34px rgba(0, 140, 255, .5); }
.formule--avant:hover, .formule--avant:focus-within { box-shadow: 0 28px 80px -26px rgba(0, 140, 255, .75); }
.vip { transition: border-color .3s, box-shadow .3s; }
.formule__cat { margin: 0; color: var(--gris); font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.formule__nom { margin: .45em 0 .25em; color: var(--blanc); font-size: clamp(1.45rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; }
.formule__prix { margin: 0; color: var(--gris); font-size: 1rem; }
.formule__prix strong { color: var(--blanc); font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.formule__cle { margin: 18px 0 14px; padding-top: 18px; border-top: 1px solid var(--ligne); color: var(--blanc); font-weight: 500; }
.coches { margin: 0 0 30px !important; }
.coches li { position: relative; padding-left: 30px; margin: .5em 0; }
.coches li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 7px;
  border-left: 2.5px solid var(--bleu); border-bottom: 2.5px solid var(--bleu); transform: rotate(-45deg);
}
.formule__btn { margin-top: auto; width: 100%; }

.vip {
  display: grid; gap: clamp(32px, 4vw, 72px); margin-top: 20px;
  padding: clamp(28px, 4.2vw, 60px); border: 1.5px solid var(--bord); border-radius: calc(var(--rayon) + 4px);
  background: radial-gradient(90% 120% at 0% 0%, rgba(0, 140, 255, .13), transparent 60%), var(--encre);
}
@media (min-width: 960px) { .vip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); } }
.vip__nom { margin: .2em 0 .25em; color: var(--ecume); font-size: clamp(3.2rem, 7vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.vip__chapeau { color: var(--blanc); font-size: 1.1rem; }
.formule__prix--grand { margin-bottom: 26px; }
.formule__prix--grand strong { color: var(--bleu); font-size: clamp(3rem, 5vw, 4.4rem); }
.vip__accroche { margin: 0 0 28px; padding-bottom: 16px; border-bottom: 2px solid var(--bleu); color: var(--blanc); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.vip__liste { display: grid; gap: 26px 36px; }
@media (min-width: 640px) { .vip__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vip__liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.vip__liste svg { color: var(--gris); margin-top: 2px; }
.vip__liste h4 { margin: 0 0 6px; color: var(--blanc); font-size: .95rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.vip__liste p { margin: 0; font-size: .97rem; line-height: 1.6; }

.options { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 800px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option { padding: clamp(24px, 2.8vw, 36px); background: var(--encre); border: 1.5px solid var(--bord); border-radius: var(--rayon); }
.option--bleu { border: 2px solid var(--bleu); }
.option h3 { margin: .45em 0 .55em; color: var(--blanc); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.option__ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.option__prix { margin: 0; color: var(--blanc); font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.option p:last-child { margin-bottom: 0; }
.tirets { margin: 0 0 1em !important; }
.tirets li { position: relative; padding-left: 26px; color: var(--blanc); }
.tirets li::before { content: "—"; position: absolute; left: 0; color: var(--gris); }
.option__note { color: var(--gris); font-size: .92rem; }
.petites-lignes { margin: 30px 0 0; color: var(--gris); font-size: .92rem; }

/* ---------- /06 Contact ---------- */
/* Les lignes du grand titre arrivent de côté : la section coupe ce qui dépasse */
.contact { overflow-x: hidden; }
.titre--geant { font-size: clamp(2.6rem, 9vw, 8.2rem); line-height: .95; margin: 0 0 .3em; }
.titre--geant span { display: block; padding-top: .06em; }
.titre--geant .bleu { color: var(--bleu); }
.contact__sous-titre { margin: 0; padding-bottom: 28px; border-bottom: 2px solid var(--bleu); color: var(--ecume); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.contact__grille { display: grid; gap: clamp(44px, 5vw, 88px); margin-top: clamp(44px, 5vw, 72px); }
@media (min-width: 1000px) { .contact__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.contact__titre { margin-bottom: 18px; color: var(--blanc); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.coordonnees { margin: 30px 0 !important; padding: 10px; border: 2px solid var(--bleu); border-radius: var(--rayon); }
.coordonnees a {
  display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 10px 14px; border-radius: 12px;
  color: var(--blanc); text-decoration: none; transition: background-color .25s;
}
.coordonnees a:hover { background: rgba(0, 140, 255, .12); }
.coordonnees svg { flex: none; color: var(--gris); }
.coordonnees span { font-weight: 700; overflow-wrap: anywhere; line-height: 1.35; }
.coordonnees small { display: block; color: var(--gris); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ensemble { display: grid; gap: 24px; }
@media (min-width: 640px) { .ensemble { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ensemble h3 { margin-bottom: 8px; color: var(--blanc); font-size: .95rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.ensemble p { margin: 0; font-size: .97rem; }

/* Formulaire */
.formulaire {
  position: relative; padding: clamp(24px, 3.2vw, 44px);
  background: var(--nuit); border: 1.5px solid var(--bord); border-radius: calc(var(--rayon) + 4px);
}
.formulaire__titre { color: var(--blanc); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.formulaire__aide { margin: 6px 0 24px; color: var(--gris); font-size: .92rem; }
.champ { margin-bottom: 18px; }
.champ-duo { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .champ-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.champ label { display: block; margin-bottom: 8px; color: var(--blanc); font-size: .95rem; font-weight: 500; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: #0e0e0e; color: var(--blanc); border: 1.5px solid #8a8a8a; border-radius: 12px;
  font: 400 1rem/1.5 var(--police); transition: border-color .2s;
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("assets/fleche-liste.svg");
  background-repeat: no-repeat; background-position: right 16px center;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--ecume); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); }
.champ [aria-invalid="true"] { border-color: #ff7a7a; }
.champ__erreur { margin: 8px 0 0; color: #ff9b9b; font-size: .9rem; font-weight: 500; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__legal { margin: 4px 0 18px; color: var(--gris); font-size: .88rem; }
/* Lien dans une phrase : zone cliquable de 44 px sans agrandir la ligne */
.formulaire__legal a, .prose a:not(.btn), .faq details a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.faq details a { color: var(--blanc); text-underline-offset: 3px; }
.formulaire__legal a { color: var(--ecume); text-underline-offset: 3px; }
.formulaire__envoi { width: 100%; }
.formulaire__statut { margin: 16px 0 0; color: var(--blanc); font-weight: 500; }
.formulaire__statut:empty { display: none; }
.formulaire__statut.is-ok { padding: 14px 16px; border-left: 3px solid var(--bleu); background: rgba(0, 140, 255, .1); border-radius: 0 10px 10px 0; }
.formulaire__note { margin: 14px 0 0; color: var(--gris); font-size: .85rem; }

/* ---------- Pied de page ---------- */
.pied { padding: clamp(64px, 8vw, 96px) 0 32px; background: #000; border-top: 1px solid #1c1c1c; }
.pied__haut { display: grid; gap: 40px; }
@media (min-width: 760px) { .pied__haut { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.pied__logo { position: relative; width: 240px; margin-bottom: 12px; }
.pied__logo > picture { display: block; }
/* Position de la vague dans le logo : images/logo/vague.png posée sur images/logo/logo-cadre.png (886 × 780) */
.pied__vague { position: absolute; left: .9%; top: .5%; width: 98.4%; height: 63.1%; pointer-events: none; }
.pied p { color: var(--gris); }
.pied__titre { margin-bottom: 10px; color: var(--blanc); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pied__col ul { list-style: none; margin: 0; padding: 0; }
/* Taille liée à la largeur sur petit téléphone : l'e-mail et son icône tiennent sur une ligne */
.pied__col a, .pied__col span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ecume); font-size: min(1rem, 4.1vw); text-decoration: none; overflow-wrap: anywhere; }
.pied__col svg { flex: none; }
.pied__col a:hover { color: var(--bleu); }
.pied__bas {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px;
  margin-top: 48px; padding-top: 20px; color: var(--gris); font-size: .92rem;
}
.pied__bas::before { content: ""; position: absolute; top: 0; left: var(--gouttiere); right: var(--gouttiere); height: 1px; background: #1c1c1c; }
.pied__bas p { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
.pied__legal a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ecume);
  text-decoration: underline; text-decoration-color: rgba(213, 213, 213, .4); text-underline-offset: 4px;
}
.pied__legal a:hover { color: var(--bleu); }
.pied__credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); font-weight: 700; text-underline-offset: 4px; }
.pied__credit a:hover { color: var(--bleu); }

/* ---------- Barre d'actions sur téléphone ---------- */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, .72); border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: transform .35s ease;
}
.barre-mobile .btn { min-height: 50px; padding-inline: 12px; font-size: .94rem; }
.barre-mobile.is-cachee { transform: translateY(110%); }
body { padding-bottom: 86px; }
@media (min-width: 900px) {
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Pages légales et 404 ---------- */
.page-simple { padding: calc(var(--entete) + clamp(56px, 8vw, 104px)) 0 clamp(72px, 9vw, 120px); }
.page-simple .titre { font-size: clamp(2.4rem, 7vw, 5rem); }
.prose { max-width: 72ch; }
.prose h2 { margin: 2.2em 0 .6em; color: var(--blanc); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.prose a:not(.btn) { color: var(--blanc); text-underline-offset: 3px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .4em 0; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .defile__piste, .lecteur__curseur, .lecteur__piste::before, .hero::before { animation: none; }
  .univers__photo img, .univers__zoom, .etape, .etape__num, .nav__sous, .nav__chevron { transition: none; }
}

/* ---------- Haut de page : grande vague au centre, nom en bas à gauche, texte et boutons à droite ---------- */
.hero--centre { --l: min(160vw, 940px, calc(36svh * 1.77)); justify-content: flex-end; padding-bottom: clamp(36px, 6vh, 64px); }
/* Téléphone et tablette : la vague a sa propre place en haut, le texte commence toujours en dessous */
@media (max-width: 959px) {
  .hero--centre { justify-content: flex-start; padding-top: calc(var(--entete) + 1vh + var(--l) * .5); }
  .hero--centre::after { height: 40%; }
  .hero--centre .hero__grille { grid-template-columns: minmax(0, 1fr); }
}
/* Les lettres du titre sont séparées pour l'animation : une ligne ne doit jamais se couper au milieu d'un mot */
.hero__titre .ligne > span { white-space: nowrap; }
.hero--centre::before { inset: 0 -10% auto -10%; height: 80%; background: radial-gradient(45% 55% at 50% 45%, rgba(0, 140, 255, .14), transparent 70%); }
/* Fondu sombre en bas : la grande vague s'efface derrière le titre, le texte et les boutons */
.hero--centre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .82) 38%, rgba(5, 5, 5, 0) 100%);
}
.hero__filigrane {
  position: absolute; z-index: 0; left: 50%; top: calc(var(--entete) + 2vh); transform: translateX(-50%); margin: 0;
  color: rgba(213, 213, 213, .045); font-size: clamp(9rem, 30vw, 30rem); font-weight: 800; line-height: .8;
  letter-spacing: -.07em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none;
}
/* Centrée sans transform (GSAP anime déjà la position de la vague) */
.hero--centre .hero__vague {
  left: 50%; right: auto; top: calc(var(--entete) + 1vh); bottom: auto; margin-left: calc(var(--l) / -2);
  width: var(--l); opacity: 1;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-composite: add;
}
.hero--centre .hero__grille { grid-template-areas: "gauche" "bas"; gap: 24px; align-items: end; }
.hero__gauche { grid-area: gauche; }
.hero__etiquette {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  color: var(--gris); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-wrap: balance;
}
.hero__etiquette::before { content: ""; width: 28px; height: 1.5px; background: var(--bleu); flex: none; }
.hero--centre .hero__titre { font-size: clamp(3.4rem, 16vw, 9rem); line-height: .9; }
.hero--centre .ligne--bleu { color: var(--bleu); }
.hero__texte { margin: 0 0 18px; max-width: 34ch; color: var(--ecume); font-size: 1rem; line-height: 1.55; }
.hero--centre .hero__actions { margin: 0; }
@media (min-width: 960px) {
  .hero--centre { --l: min(1500px, 96vw, calc((100svh - 120px) * 1.77)); }
  .hero--centre .hero__grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "gauche bas"; gap: 40px; }
  .hero--centre .hero__titre { font-size: min(8.6vw, 9rem, calc((100svh - 200px) / 4.2)); }
  .hero--centre .hero__bas { justify-self: end; padding: 0 0 .6em; }
}

/* ---------- Accueil : la vague animée (deferlante.js) ----------
   Le haut de page reste en place pendant que la vague déferle, puis la page remonte et l'écume dégouline dessus.
   Sans animation, le haut de page reste celui d'origine, avec l'image fixe de la vague. */
.deferlante__toile { display: none; }
.deferlante__scene { position: relative; overflow: hidden; }
.deferlante.is-actif { position: relative; z-index: 2; height: 308svh; pointer-events: none; }
.deferlante.is-actif a, .deferlante.is-actif button { pointer-events: auto; }
.deferlante.is-actif .deferlante__scene { position: sticky; top: 0; height: 100svh; }
.deferlante.is-actif .deferlante__toile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.deferlante.is-actif .hero { height: 100svh; min-height: 0; }
.deferlante.is-actif .hero__vague { visibility: hidden; }
.deferlante.is-actif .hero__titre { will-change: transform; }
.deferlante.is-actif + * { margin-top: -100svh; }
/* Pendant l'arrivée, le logo reste net : le fondu sombre du haut de page et le mot Houle n'apparaissent qu'une fois le cadre crevé */
.deferlante .hero::before, .deferlante .hero::after, .deferlante .hero__filigrane { transition: opacity 1.1s ease; }
.deferlante.is-intro .hero::before, .deferlante.is-intro .hero::after, .deferlante.is-intro .hero__filigrane { opacity: 0; }
/* Un flou au-dessus d'une vidéo se recalcule à chaque image : on le coupe tant que la vague occupe l'écran */
.vague-en-cours .entete.is-scrolled, .deferlante.is-actif .btn--contour { -webkit-backdrop-filter: none; backdrop-filter: none; }
.vague-en-cours .entete.is-scrolled { background: rgba(5, 5, 5, .55); }

/* ---------- Pages intérieures (services, réalisations, formules, contact) ---------- */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--entete) + clamp(28px, 5vw, 72px)) 0 clamp(56px, 7vw, 104px); }
.page-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto 30%; height: 90%; pointer-events: none;
  background: radial-gradient(50% 50% at 60% 50%, rgba(0, 140, 255, .13), transparent 70%);
}
.page-hero__grille { position: relative; display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .page-hero__grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
/* Taille bornée par le mot le plus long (« ACCOMPAGNEMENT ») : rien ne déborde sur un petit téléphone */
.page-hero .titre { font-size: clamp(2rem, 9.2vw, 6.4rem); margin-bottom: .35em; hyphens: auto; -webkit-hyphens: auto; }
.page-hero__intro { max-width: 48ch; color: var(--blanc); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.5; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* « En bref » : la réponse courte en haut de page, que Google et les IA reprennent telle quelle */
.en-bref { max-width: 58ch; margin: 30px 0 0; padding: 20px 22px 18px; background: rgba(17, 17, 17, .72); border: 1px solid var(--ligne); border-left: 3px solid var(--bleu); border-radius: 12px; }
.en-bref__titre { margin: 0 0 6px; color: var(--bleu); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.en-bref ul { margin: 0; padding: 0; list-style: none; }
.en-bref li { position: relative; margin: .55em 0 0; padding-left: 22px; color: var(--ecume); font-size: .95rem; line-height: 1.55; }
.en-bref li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--bleu); }
/* Qui écrit la page et quand elle a été mise à jour (même date que dateModified dans le JSON-LD) */
.signature { margin: 14px 0 0; color: var(--gris); font-size: .82rem; }
.signature a { color: var(--ecume); text-underline-offset: 3px; }
.signature a:hover { color: var(--bleu); }
.signature time { white-space: nowrap; }
/* Titres en questions : plus longs que les titres d'un mot, donc plus petits pour ne pas écraser la page */
.titre.titre--question { font-size: clamp(1.75rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.045em; }
.page-hero__visuel { justify-self: center; width: min(74vw, 340px); margin: 0; }
.page-hero__visuel--large { width: 100%; max-width: 520px; }
.page-hero__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); }
.page-hero__photo picture, .page-hero__photo img { width: 100%; height: 100%; }
.page-hero__photo img { object-fit: cover; }

/* Fil d'Ariane */
.fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0 0 14px; padding: 0; color: var(--gris); font-size: .9rem; }
.fil li + li::before { content: "/"; margin-right: 8px; color: #6e6e6e; }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ecume); text-decoration: none; }
.fil a:hover { color: var(--bleu); }
.fil [aria-current="page"] { color: var(--blanc); }

/* Cartes de contenu */
.cartes { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px) !important; }
@media (min-width: 700px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte { padding: clamp(24px, 2.8vw, 36px); background: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon); transition: border-color .3s; }
.section--encre .carte { background: var(--nuit); }
.carte:hover { border-color: var(--bleu); box-shadow: 0 24px 70px -34px rgba(0, 140, 255, .5); }
.carte > svg { color: var(--gris); }
.carte h3 { margin: 18px 0 8px; color: var(--blanc); font-size: clamp(1.15rem, 1.6vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.carte p { margin: 0; }

/* Lien avec flèche */
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: var(--blanc); font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: "→"; color: currentColor; transition: transform .25s; }
.lien-fleche:hover { color: var(--bleu); }
.lien-fleche:hover::after { transform: translateX(4px); }
.suite { margin-top: clamp(32px, 4vw, 48px); }

/* Questions fréquentes (dépliables, sans script) */
/* Page À propos : fiche d'identité et tableau des tarifs */
.fiche { margin: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid var(--ligne); }
.fiche > div { display: grid; gap: 2px 32px; padding-block: 14px; border-bottom: 1px solid var(--ligne); }
@media (min-width: 700px) { .fiche > div { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; } }
.fiche dt { color: var(--gris); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.fiche dd { margin: 0; color: var(--blanc); }
.fiche__liens { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fiche__liens a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; overflow-wrap: anywhere; text-underline-offset: 3px; }
.fiche__liens a:hover { color: var(--bleu); }
.tarifs { width: 100%; margin-top: clamp(28px, 4vw, 44px); border-collapse: collapse; }
.tarifs th, .tarifs td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.tarifs thead th { color: var(--gris); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tarifs tbody th { color: var(--blanc); font-weight: 700; }
.tarifs th:last-child, .tarifs td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.tarifs td:last-child { color: var(--blanc); font-weight: 700; }
.tarifs__note { margin: 14px 0 0; color: var(--gris); font-size: .92rem; }
.faq { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ligne); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0;
  color: var(--blanc); font-size: clamp(1.02rem, 1.4vw, 1.15rem); font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ecume); font-size: 1.7rem; font-weight: 500; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
.faq details p { margin: 0 0 22px; max-width: 70ch; }

/* Bandeau final d'appel à l'action */
.cta-bande { padding-block: clamp(72px, 9vw, 136px); background: var(--encre); border-top: 1px solid var(--ligne); }
.cta-bande .titre { margin-bottom: .3em; }
.cta-bande p { max-width: 52ch; font-size: 1.1rem; }
.cta-bande .page-hero__actions { margin-top: 24px; }

/* Deux façons de travailler */
.duo { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 800px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Page Réalisations */
.projets-liste { display: grid; gap: clamp(64px, 8vw, 120px); margin-top: clamp(48px, 6vw, 80px) !important; }
.projet { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .projet { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .projet:nth-child(even) .projet__media { order: 2; }
}
.projet__media { justify-self: center; width: min(78vw, 340px); margin: 0; }
.projet__media--large { width: 100%; max-width: 620px; }
.cadre-169 { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon); }
.cadre-169 picture, .cadre-169 img { width: 100%; height: 100%; }
.cadre-169 img { object-fit: cover; }
.projet time { color: var(--gris); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.projet h2 { margin: 10px 0 14px; color: var(--blanc); font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-transform: uppercase; }
.projet__texte p { font-size: 1.08rem; }
.projet__lieux { color: var(--gris); font-size: .95rem; }
@media (min-width: 900px) { .formules--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
.page-hero.contact { overflow-x: hidden; }
/* Pages services : le titre partage la largeur avec l'image, il ne doit pas passer dessous */
@media (min-width: 960px) { .page-hero__grille .titre { font-size: min(5.4vw, 5rem); } }

/* ---------- Accueil court : aperçus qui renvoient vers les pages ---------- */
/* Carte service entièrement cliquable */
.service__bloc { display: grid; gap: 12px; padding: clamp(28px, 3.6vw, 52px) 0; color: inherit; text-decoration: none; }
.service__bloc .lien-fleche { margin-top: 4px; }
@media (min-width: 900px) {
  .service__bloc { grid-template-columns: 5.5rem minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: center; gap: 0 clamp(24px, 3vw, 48px); }
  .service__bloc .lien-fleche { margin: 0; font-size: 0; }
  .service__bloc .lien-fleche::after { font-size: 1.6rem; }
  .service:hover .lien-fleche::after { transform: translateX(6px); }
}
.service:hover .lien-fleche, .service__bloc:focus-visible .lien-fleche { color: var(--bleu); }
.service__bloc:focus-visible { outline: 3px solid var(--bleu); outline-offset: 8px; border-radius: 12px; }

/* Trois réalisations en vignettes */
.apercu-projets { display: grid; gap: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 32px); margin-top: clamp(40px, 5vw, 64px) !important; }
@media (min-width: 700px) { .apercu-projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.apercu-projets a { display: block; color: inherit; text-decoration: none; }
.apercu-projets .univers__photo { aspect-ratio: 4 / 5; }
.apercu-projets a:hover .univers__photo img,
.apercu-projets a:hover .univers__zoom { transform: scale(1.045); }
.apercu-projets__date { display: block; margin-top: 18px; color: var(--gris); font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.apercu-projets__nom { display: block; margin-top: 4px; color: var(--blanc); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; transition: color .25s; }
.apercu-projets a:hover .apercu-projets__nom { color: var(--bleu); }

/* Quatre formules en une ligne chacune ; contour bleu au survol */
.mini-formules { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px) !important; }
@media (min-width: 640px) { .mini-formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mini-formules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-formules a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px;
  background: var(--nuit); border: 1.5px solid var(--bord); border-radius: var(--rayon);
  color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .3s;
}
.mini-formules a:hover, .mini-formules a:focus-visible { border-color: var(--bleu); box-shadow: 0 24px 70px -34px rgba(0, 140, 255, .5); }
.mini-formules__nom { color: var(--blanc); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.mini-formules .formule__prix { margin-top: auto; }
.mini-formules .formule__prix strong { font-size: clamp(2rem, 3vw, 2.6rem); }

/* Bandeau de contact de l'accueil */
.contact__rapide { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Téléphone : boutons sur toute la largeur, texte un peu plus petit pour que l'adresse e-mail tienne sur une ligne */
@media (max-width: 559px) {
  .contact__rapide .btn--grand { width: 100%; padding-inline: 14px; font-size: min(1.02rem, 3.6vw); overflow-wrap: anywhere; }
}

/* ---------- Vidéos (boucles muettes des réalisations et bande démo) ---------- */
.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0b0b; }
.lecteur__cadre .clip { position: absolute; inset: 0; }
.cadre-169.lecteur__cadre::after { background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 32%); }
.projet__date { color: var(--gris); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
@media (min-width: 900px) {
  .projet { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .projet:nth-child(even) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .projet__media--large { max-width: none; }
}

/* ---------- Réalisations : les projets commencent tout de suite sous le titre ---------- */
.page-realisations .page-hero + .section { padding-top: clamp(28px, 4vw, 56px); }
.page-realisations .projets-liste { margin-top: 0 !important; }

/* ---------- Grain de film très léger sur tout le site ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("assets/images/grain.png?v=2") repeat;
  animation: grain 1s steps(1) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; }
  17% { background-position: -48px 32px; }
  33% { background-position: 40px -56px; }
  50% { background-position: -72px -16px; }
  67% { background-position: 24px 72px; }
  83% { background-position: 64px 8px; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------- Petites animations au survol ----------
   Cartes et formules : contour bleu et légère montée. Services : titre et numéro bleus, un trait bleu se dessine sous la ligne.
   La montée passe par la propriété « translate » pour ne pas gêner les animations d'apparition (GSAP utilise « transform »). */
.carte, .formule, .vip, .option, .mini-formules a { transition: border-color .3s, box-shadow .3s, translate .4s cubic-bezier(.2, .7, .2, 1); }
.carte > svg { transition: color .3s; }
.carte:hover > svg { color: var(--bleu); }
.service__num { transition: color .3s; }
.service:hover .service__num, .service:focus-within .service__num { color: var(--bleu); }
.service::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bleu);
  transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.service:hover::after, .service:focus-within::after { transform: scaleX(1); }
.marque span { transition: color .3s; }
.marque:hover span { color: var(--bleu); }
.cadre-169 .clip { transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.projet:hover .cadre-169 .clip { scale: 1.035; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* « !important » car GSAP écrit « translate: none » directement sur les éléments qui apparaissent au défilement */
  .carte:hover, .formule:hover, .vip:hover, .option:hover, .mini-formules a:hover { translate: 0 -6px !important; }
  .btn:hover { translate: 0 -2px; }
}

/* ---------- Décors repris des visuels de Lucas : le phare, la gerbe d'eau, l'accroche ----------
   Images sans texte découpées dans ses posts (images/deco/). Bords fondus dans le noir par des masques. */
.mission { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 80px); }
.mission__grille { display: grid; gap: 0; align-items: center; }
.mission__phrase {
  margin: 0; max-width: 21ch; color: var(--blanc);
  font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance;
}
.mission__phrase .bleu { color: var(--bleu); }
.mission__phare {
  margin: 0; justify-self: center; width: min(100%, 520px); aspect-ratio: 2 / 3;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
.mission__phare picture, .mission__phare img { display: block; width: 100%; height: 100%; }
/* Cadrage repris tel quel par l'animation de l'eau (site.js lit object-position) */
.mission__phare img { object-fit: cover; object-position: 50% 35%; }
@media (min-width: 900px) {
  .mission__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); }
  .mission__phare { justify-self: end; aspect-ratio: 9 / 16; }
  .mission__phare img { object-position: 50% 45%; }
}

.deco-coin { position: relative; overflow: hidden; }
.deco-coin > .wrap { position: relative; z-index: 1; }
.deco-gerbe {
  position: absolute; top: 0; right: 0; z-index: 0; width: clamp(200px, 34vw, 480px); aspect-ratio: 439 / 520;
  pointer-events: none; mix-blend-mode: screen; opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 40%, transparent 100%);
}

.accroche {
  position: relative; margin: 0 auto clamp(72px, 9vw, 128px); padding-bottom: clamp(36px, 4.5vw, 56px); max-width: 24ch;
  color: var(--blanc); font-size: clamp(1.6rem, 3.3vw, 2.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  text-align: center; text-wrap: balance;
}
.accroche .bleu { color: var(--bleu); }
.accroche::before, .accroche::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(620px, 86vw); translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--bleu) 50%, transparent);
}
.accroche::after { height: 2px; }
.accroche::before { height: 10px; bottom: -4px; opacity: .55; filter: blur(8px); }
@media (max-width: 959px) { .page-hero .deco-gerbe { top: var(--entete); width: clamp(170px, 44vw, 300px); } }
/* Le bloc mission se rapproche de la photo de Liège : le haut fondu du phare fait déjà office d'espace */
.mission { padding-block: 0 clamp(24px, 4vw, 64px); margin-top: calc(-1 * clamp(24px, 5vw, 96px)); }
@media (min-width: 900px) { .mission__phare { width: min(100%, 390px); } }

/* ---------- Le phare s'allume et éclaire « Notre mission » ----------
   Faisceau et halo (sur la lampe) créés par site.js. En mode « écran » : ils éclaircissent ce qu'ils couvrent,
   comme une vraie lumière. Le faisceau est dans un calque de la section, fondu en haut et en bas pour n'y être
   jamais coupé net ; le flou est sur le faisceau, la forme de cône sur son ::before (le col reste fin à la lampe). */
.phare-lumiere {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 140px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 140px), transparent);
}
.phare-faisceau { position: absolute; opacity: 0; transform-origin: 100% 50%; filter: blur(12px); will-change: transform, opacity; }
.phare-faisceau::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(235, 245, 255, .85), rgba(120, 190, 255, .42) 22%, rgba(0, 140, 255, .15) 65%, transparent);
  clip-path: polygon(100% calc(50% - 8px), 0 0, 0 100%, 100% calc(50% + 8px));
}
.phare-halo {
  position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(200, 230, 255, .8) 10%, rgba(0, 140, 255, .35) 32%, transparent 68%);
}

/* ---------- Les vagues ajoutées bougent comme celle du logo ----------
   La gerbe et l'eau au pied du phare sont animées par le même moteur que la vague du logo (site.js, WebGL) :
   l'image fixe reste affichée tant que l'animation n'a pas démarré, ou si elle ne peut pas tourner. */
.deco-gerbe picture, .deco-gerbe img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.deco-gerbe img { object-fit: cover; }
.mission__phare { position: relative; overflow: hidden; }
.deco-gerbe picture, .mission__phare picture { transition: opacity 1s ease; }
/* La gerbe glisse aussi un peu au défilement, si le navigateur sait le faire */
@supports (animation-timeline: view()) {
  .deco-gerbe { animation: gerbe-derive linear both; animation-timeline: view(); }
  @keyframes gerbe-derive { from { translate: 0 -24px; } to { translate: 0 48px; } }
}
/* En pause hors de l'écran (site.js ajoute « en-vue ») */
.num::before, .deco-gerbe { animation-play-state: paused; }
.num.en-vue::before, .deco-gerbe.en-vue, .decors-libres .num::before, .decors-libres .deco-gerbe { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .num::before, .deco-gerbe { animation: none !important; }
}


/* ==========================================================================
   Adaptations à WordPress. À l'affichage, le HTML est celui du site validé (voir inc/blocs.php) :
   il ne reste qu'à neutraliser ce que WordPress ajoute autour.
   ========================================================================== */

/* Barre d'administration (connecté) : l'en-tête fixe passe dessous */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }