/* =========================================================
   Styles par page + responsive
   (desktop ≥ 1200 · tablette 810–1199 · mobile < 810)
   ========================================================= */

/* =================== ACCUEIL =================== */

/* ---------- Hero : vidéo fixe, la page glisse dessus ---------- */
.hero { position: relative; height: 100vh; min-height: calc(680 * var(--u)); overflow: hidden; background: #000; }
.hero-media { position: absolute; inset: 0; will-change: transform; }
/* La vidéo garde son format 16:9 et ses bandes noires (ni étirée, ni recadrée, ni zoomée).
   Image utile : de 11,5 % à 88,5 % de la hauteur (bandes cinémascope de 248 px sur 2160). */
.hero-media .vbox {
  position: relative; margin: 0 auto; width: min(100%, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9;
  opacity: .2; transform: scale(1.15); transition: opacity 1.5s var(--spring), transform 1.5s var(--spring);
}
.loaded .hero-media .vbox { opacity: 1; transform: none; }
/* Showreel sans bandes noires : <div class="vbox full"> dans index.html → la vidéo remplit tout le hero */
.hero-media .vbox.full { width: 100%; height: 100%; aspect-ratio: auto; margin-top: 0; }
.hero-media .vbox.full video { object-fit: cover; }
.hero-media .vbox.full .vig {
  background:
    linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.75) 80%, #000 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%);
}
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* vignettage : fondu vers le noir en haut (sous la nav) et surtout en bas, bords assombris */
.hero-media .vig {
  position: absolute; inset: calc(-1 * var(--u)); pointer-events: none;
  background:
    linear-gradient(#000 0%, #000 11.5%, rgba(0,0,0,.55) 17%, rgba(0,0,0,.15) 32%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.92) 84%, #000 88.5%, #000 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%);
}
.hero-head { position: absolute; left: calc(var(--m) + var(--col)); right: var(--m); top: 35.1%; z-index: 2; }
.reel { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); text-transform: uppercase; font-size: calc(15 * var(--u)); transition: gap .7s var(--spring); }
.reel svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform 2s .05s var(--spring); }
.reel:hover { gap: calc(16 * var(--u)); }
.reel:hover svg { transform: rotate(360deg); }
.hero h1 { font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: calc(-2 * var(--u)); }
.hero-line { position: absolute; left: 0; right: 0; top: 52.6%; height: calc(1 * var(--u)); background: var(--w10); z-index: 2; }
.hero-left { position: absolute; left: var(--m); width: calc(430 * var(--u)); top: 57.2%; z-index: 2; }
.hero-left p + p { margin-top: calc(19 * var(--u)); }
.hero-left .js-btn { margin-top: calc(32 * var(--u)); width: var(--col); }

/* ---------- À propos (accueil) ---------- */
.about { position: relative; padding-bottom: var(--sp); }
/* photo de Hippo en tournage en fond de section, sous un voile sombre (lisibilité du grand texte à droite) */
.about-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.about-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; }
.about-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(#000, rgba(0,0,0,.2) 22%, rgba(0,0,0,.25) 70%, #000), linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 75%); }
.about > :not(.about-bg) { position: relative; z-index: 1; }
.about-grid { margin-top: var(--sp); grid-template-rows: auto auto; }
.about-grid .big { grid-row: 1; padding: 0 0 0 0; }
.about-grid .left { grid-row: 1 / 3; align-self: end; padding-right: calc(30 * var(--u)); }
.about-grid .more { grid-row: 2; margin-top: calc(46 * var(--u)); }
@keyframes tick { to { transform: translateX(calc(-50% - calc(2 * var(--u)))); } }

/* ---------- Projets en scroll horizontal épinglé (copie du composant Framer « Card - Project ») ----------
   Carte rectangulaire, média à 200 % de large en parallaxe. Survol : le média se resserre à 85 % de large
   (ratio 1,75) au-dessus de la miniature floutée, et l'extrait vidéo du projet se lance dans ce cadre. */
.featured { --cw: min(calc(var(--vw) * .7146), calc((100vh - calc(175 * var(--u))) * 1.32)); }
.hs { position: relative; margin-top: calc(20 * var(--u)); }
.hs-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hs-track { display: flex; align-items: flex-end; padding-left: var(--m); will-change: transform; }
.hs-title { width: var(--col); flex: none; padding-right: calc(10 * var(--u)); }
.pcard { position: relative; width: var(--cw); flex: none; display: block; margin-left: calc(4 * var(--u)); }
.pcard.first { margin-left: calc(var(--col) + calc(33 * var(--u))); }
.pcard-media { position: relative; height: calc(var(--cw) * .708); overflow: hidden; background: #111; }
.pcard-bg { position: absolute; inset: 0; filter: brightness(.45) blur(calc(5 * var(--u))); opacity: 0; transition: opacity 1s var(--spring); }
.pcard-bg img, .pcard-par img { width: 100%; height: 100%; object-fit: cover; }
.pcard-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transition: width 1.5s var(--spring), height 1.5s var(--spring), left 1.5s var(--spring), top 1.5s var(--spring); }
.pcard-par { position: absolute; left: 0; top: 0; width: 200%; height: 100%; will-change: transform; }
.pcard-in > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.pcard.playing .pcard-in > video { opacity: 1; }
.pcard:hover .pcard-bg { opacity: 1; }
/* survol : média à 85 % de large, ratio 1,75 (85 / 1,75 / 0,708 ≈ 68,6 % de haut) */
.pcard:hover .pcard-in { width: 85%; height: 68.6%; left: 7.5%; top: 15.7%; }
.pcard .brk { inset: calc(14 * var(--u)); }
.pcard:hover .brk { opacity: 1; }
.pcard-cap { padding-top: calc(10 * var(--u)); display: grid; gap: calc(4 * var(--u)); height: calc(57 * var(--u)); align-content: start; }
.pcard-cap .cats { color: var(--w50); display: flex; gap: calc(6 * var(--u)); }
.after-h { padding-top: 0; }

/* ---------- Process / accordéon ---------- */
.proc-head { margin-top: var(--sp); }
.acc { margin-top: calc(60 * var(--u)); padding-bottom: var(--sp); }
.acc-list-wrap { display: block; }
.acc-h {
  position: sticky; top: var(--top, 0); z-index: 4; height: calc(70 * var(--u));
  display: flex; align-items: center; padding: 0 calc(20 * var(--u)) 0 calc(10 * var(--u)); background: var(--bg-1); cursor: pointer;
  border-bottom: calc(1 * var(--u)) solid var(--w10);
}
.acc-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--u)); height: calc(2 * var(--u)); background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.acc-h:hover::after, .acc-item.open .acc-h::after { transform: scaleX(1); }
.acc-h .num { width: calc(36 * var(--u)); align-self: flex-start; padding-top: calc(14 * var(--u)); color: var(--w50); font-size: calc(10 * var(--u)); }
.acc-h .h-30 { flex: 1; }
.acc-ic { position: relative; width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform .6s var(--spring); }
.acc-ic i { position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); background: #fff; transition: all .5s var(--spring); }
.acc-ic i:nth-child(1) { transform: translate(0, calc(-6 * var(--u))); } .acc-ic i:nth-child(2) { transform: translate(calc(-6 * var(--u)), 0); }
.acc-ic i:nth-child(3) { transform: translate(calc(6 * var(--u)), 0); } .acc-ic i:nth-child(4) { transform: translate(0, calc(6 * var(--u))); }
.acc-h:hover .acc-ic { transform: rotate(180deg); }
.acc-item.open .acc-ic { transform: none; }
.acc-item.open .acc-ic i { left: calc(-1 * var(--u)); top: calc(6.5 * var(--u)); width: calc(18 * var(--u)); height: calc(3 * var(--u)); }
.acc-item.open .acc-ic i:nth-child(odd) { transform: rotate(45deg); }
.acc-item.open .acc-ic i:nth-child(even) { transform: rotate(-45deg); }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1s var(--spring); }
.acc-item.open .acc-b { grid-template-rows: 1fr; }
.acc-b > div { overflow: hidden; min-height: 0; }
.acc-desc { max-width: calc(560 * var(--u)); padding: calc(30 * var(--u)) 0 calc(24 * var(--u)); }
.acc-strip { overflow: hidden; height: calc(268 * var(--u)); }
.acc-strip .row { display: flex; gap: calc(2 * var(--u)); width: max-content; height: 100%; animation: tick 28s linear infinite; }
.acc-strip .row > div { width: calc(268 * var(--u)); height: calc(268 * var(--u)); flex: none; }
.acc-strip img { width: 100%; height: 100%; object-fit: cover; }
.acc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)) 0; padding: calc(22 * var(--u)) 0 calc(40 * var(--u)); font-size: calc(12 * var(--u)); }
.acc-list li { display: flex; align-items: center; }

/* ---------- Expertise / terrain de jeu ---------- */
.exp-head { margin-top: var(--sp); align-items: end; }
.exp-head h2 { grid-column: 1 / 4; max-width: calc(640 * var(--u)); }
.ground { margin-top: calc(74 * var(--u)); height: calc(413 * var(--u)); }
.ground > div { position: relative; height: calc(413 * var(--u)); }
.ground .gt { background: var(--bg-1); display: flex; align-items: center; justify-content: flex-end; padding-right: calc(20 * var(--u)); }
.ground .gt h3 { font-size: calc(22 * var(--u)); }
.g-arrows { position: absolute; left: calc(20 * var(--u)); bottom: calc(20 * var(--u)); display: flex; gap: calc(4 * var(--u)); }
.g-arrows button { width: calc(36 * var(--u)); height: calc(36 * var(--u)); background: var(--w05); color: #fff; display: grid; place-items: center; transition: background .3s; }
.g-arrows button:hover { background: var(--brand); }
.g-arrows svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.wheel { overflow: hidden; background: var(--bg-1); }
.wheel-list { position: absolute; left: 0; right: 0; top: 0; transition: transform 1s var(--spring); will-change: transform; }
.wheel-row { position: relative; height: calc(59 * var(--u)); display: flex; align-items: center; padding-left: calc(16 * var(--u)); color: var(--w15); transition: color .6s .1s var(--spring); cursor: pointer; }
.wheel-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(8 * var(--u)); background: repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(6 * var(--u))); }
.wheel-row::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .6s .1s var(--spring); z-index: 0; }
.wheel-row span { position: relative; z-index: 1; }
.wheel-row.on { color: #fff; }
.wheel-row.on::after { transform: none; }
.ground .gimg { overflow: hidden; }
.ground .gimg .ph { position: absolute; inset: 0; transition: opacity .35s, filter .35s, transform .6s var(--spring); }
.ground .gimg.glitch .ph { filter: blur(calc(6 * var(--u))) saturate(2) hue-rotate(40deg); transform: scale(1.04); }
.ground .gimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .35s, transform .6s var(--spring); }
.ground .gimg.glitch img { filter: blur(calc(6 * var(--u))) saturate(2) hue-rotate(40deg); transform: scale(1.04); }

/* ---------- Chiffres ---------- */
.stats-sec { padding: var(--sp) 0; }
.stats { margin-top: calc(60 * var(--u)); }
.stat { position: relative; min-height: calc(170 * var(--u)); }
.stat > div { position: relative; padding: calc(20 * var(--u)); }
.stat .num-wrap { display: flex; align-items: flex-start; height: calc(90 * var(--u)); font-family: var(--f-title); font-weight: 600; font-size: calc(90 * var(--u)); line-height: 1; letter-spacing: calc(-4 * var(--u)); }
.stat .plus, .stat .pct { background: var(--gta-pick); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .plus { font-family: var(--f-text); font-size: calc(28 * var(--u)); font-weight: 400; margin-right: calc(4 * var(--u)); letter-spacing: 0; }
.stat .pct { font-family: var(--f-text); font-weight: 400; font-size: calc(28 * var(--u)); margin: calc(28 * var(--u)) 0 0 calc(8 * var(--u)); letter-spacing: 0; }
.stat h3 { margin-top: calc(16 * var(--u)); }
.stat .desc { align-self: center; }
.stat .line-t { position: absolute; left: 0; right: 0; top: 0; height: calc(1 * var(--u)); background: var(--w15); transform: scaleX(0); transform-origin: left; transition: transform 1.4s .2s var(--spring); }
.stat .line-l { position: absolute; left: 0; top: 0; bottom: 0; width: calc(1 * var(--u)); background: var(--w15); transform: scaleY(0); transform-origin: top; transition: transform 1.4s .4s var(--spring); }
.stat.in .line-t { transform: none; } .stat.in .line-l { transform: none; }

/* =================== À PROPOS =================== */
.ap-hero { position: relative; height: 100vh; min-height: calc(680 * var(--u)); overflow: hidden; }
.ap-hero .bgm { position: absolute; left: 0; right: 0; top: -15%; height: 130%; will-change: transform; }
.ap-hero .bgm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ap-hero .bgm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.45) 55%, rgba(0,0,0,.75)); }
.ap-hero-in { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u)); z-index: 2; }
.ap-stats { height: calc(60 * var(--u)); align-items: center; border-top: calc(1 * var(--u)) solid var(--w15); border-bottom: calc(1 * var(--u)) solid var(--w15); margin-bottom: calc(40 * var(--u)); }
.ap-stats p { padding-right: calc(20 * var(--u)); }
.ap-hero .sub { margin-top: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); }
.who-grid { margin-top: var(--sp); row-gap: calc(40 * var(--u)); }
.who-imgs { grid-row: 1 / 4; display: grid; gap: calc(10 * var(--u)); align-content: start; }
.who-imgs > div { aspect-ratio: 295 / 215; overflow: hidden; background: #111; }
.who-imgs img { width: 100%; height: 100%; object-fit: cover; }
.who-p1 { grid-column: 3 / 4; padding-right: calc(20 * var(--u)); }
.who-p2 { grid-column: 3 / 4; padding-right: calc(20 * var(--u)); margin-top: calc(60 * var(--u)); }
.stats2 { margin-top: calc(60 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; }
.stats2 .stat { display: grid; grid-template-columns: 1fr 1fr; }
.who-sec + .sec { padding-top: calc(60 * var(--u)); }   /* même écart qu'entre les photos et les chiffres */

.steps-intro { margin-top: var(--sp); }
.steps { margin-top: calc(60 * var(--u)); }
.steps-sec { padding-bottom: 0; }
.steps-sec + .sec { padding-top: calc(var(--sp) - calc(20 * var(--u))); }   /* 80 + les 20 sous les étapes : même écart qu'entre la timeline et le titre */
.why-sec { padding-bottom: 0; }   /* le tableau touche la bande CTA */
.step { position: relative; padding-bottom: calc(20 * var(--u)); }
.step .ru { position: relative; height: calc(41 * var(--u)); }
.step .ru::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(12 * var(--u)); background: var(--w15); -webkit-mask: url("../assets/tex/ruler-mask.png") repeat-x 0 0 / calc(59.3 * var(--u)) calc(22.1 * var(--u)); mask: url("../assets/tex/ruler-mask.png") repeat-x 0 0 / calc(59.3 * var(--u)) calc(22.1 * var(--u)); }
.step .ru b { position: absolute; left: 0; bottom: 0; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--brand); }
.step .ru span { position: absolute; left: 0; top: 0; }
.step .copy { padding: calc(30 * var(--u)) calc(30 * var(--u)) 0 calc(20 * var(--u)); }
.step h3 { margin-bottom: calc(10 * var(--u)); }
.step[data-rv] { transform: translateX(calc(150 * var(--u))); transition: opacity 1s var(--spring), transform 1.4s cubic-bezier(.25, 1.25, .4, 1); transition-delay: var(--rd, 0s); }
.step[data-rv].in { transform: none; }

.why-head { margin-top: var(--sp); }
.why { margin-top: calc(60 * var(--u)); grid-auto-rows: calc(405 * var(--u)); }
.wcard { position: relative; padding: calc(30 * var(--u)); background: rgba(255,255,255,.03); display: flex; flex-direction: column; }
.wcard .pxi { width: calc(66 * var(--u)); height: calc(66 * var(--u)); flex: none; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: calc(2 * var(--u)); }
.wcard .pxi i { background: var(--pc); opacity: .15; }
.wcard .pxi i.o { opacity: 1; animation: pxblink var(--t) ease-in-out var(--d) infinite; }
@keyframes pxblink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.wcard h3 { margin: calc(30 * var(--u)) 0 calc(20 * var(--u)); }   /* titres alignés juste sous l'icône, même hauteur sur les 6 cartes */
.wcard p { color: rgba(255,255,255,.75); }
.wcta { position: relative; background: #000; padding: calc(30 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
/* photo de tournage + voile du dégradé de la charte */
.wcta .wbg { position: absolute; inset: 0; z-index: 0; }
.wcta .wbg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--spring); }
.wcta:hover .wbg img { transform: scale(1.04); }
.wcta .wbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(43,2,84,.92) 0%, rgba(79,70,186,.55) 40%, rgba(198,63,191,.45) 70%, rgba(255,145,82,.35) 100%); }
.wcta h3 { max-width: calc(266 * var(--u)); }


/* =================== PROJETS =================== */
.bh-title.pj { top: calc(342 * var(--u)); top: calc(80vh * .497); }
.bh-sub.pj { top: calc(80vh * .497 + calc(218 * var(--u))); }
.pj-wrap { margin-top: var(--sp); padding-bottom: var(--sp); align-items: start; }
.filters { position: sticky; top: calc(80 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); padding-right: calc(20 * var(--u)); }
.filters .chip { font-family: var(--f-mono); font-size: calc(12 * var(--u)); letter-spacing: calc(.6 * var(--u)); text-transform: uppercase; font-weight: 400; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: calc(81 * var(--u)); }
.pitem { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pitem.hide { display: none; }
.pitem.fade { opacity: 0; transform: translateY(calc(16 * var(--u))); }
.pthumb { position: relative; height: calc(218 * var(--u)); overflow: hidden; background: #111; }
.pthumb { display: block; }
.pthumb .base, .pthumb .large { position: absolute; inset: 0; overflow: hidden; }
.pthumb img, .pthumb video { width: 100%; height: 100%; object-fit: cover; }
.pthumb .base { transition: filter .6s; }
/* survol : l'extrait apparaît dans un cadre centré (retrait égal sur les 4 côtés) */
.pthumb .large { opacity: 0; transform: scale(1.06); transition: opacity .5s, transform .9s var(--spring); clip-path: inset(0); }
.pitem:hover .pthumb .large { opacity: 1; transform: scale(.84); }
.pitem:hover .pthumb .base { filter: brightness(.45) blur(calc(5 * var(--u))); }
.pitem .cap { padding: calc(10 * var(--u)) calc(16 * var(--u)) 0 0; }   /* 16 px : les titres de deux colonnes voisines ne se touchent plus */
.pitem .cap h3 a { transition: color .3s; }
.pitem .cap h3 a:hover { background: var(--gta-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pitem .cap .yr { margin-top: calc(5 * var(--u)); color: var(--w50); }
.pitem .cap .cats { margin-top: calc(5 * var(--u)); color: var(--w50); display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }

/* =================== FICHE PROJET =================== */
.pd-hero { position: relative; height: 100vh; min-height: calc(680 * var(--u)); overflow: hidden; }
.pd-hero .media { position: absolute; inset: 0; }
.pd-hero .grad { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.1) 40%, rgba(0,0,0,.8)); pointer-events: none; }
.pd-back { position: absolute; top: calc(105 * var(--u)); left: var(--m); z-index: 3; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(26 * var(--u)); padding-right: calc(16 * var(--u)); background: var(--w05); transition: background .4s; }
.pd-back:hover { background: var(--w10); }
.pd-back .bi { width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: grid; place-items: center; background: var(--w05); }
.pd-back svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
/* titre + description empilés et ancrés en bas : un titre long repousse le texte au lieu de le chevaucher */
.pd-hero-txt { position: absolute; left: calc(var(--m) + var(--col)); right: var(--m); bottom: 10vh; z-index: 2; }
.pd-hero .desc { margin: calc(24 * var(--u)) 0 0 var(--col); width: min(calc(560 * var(--u)), calc(var(--col) * 2)); font-size: calc(18 * var(--u)); line-height: 1.2; letter-spacing: calc(-.4 * var(--u)); }
.pd-video { margin-top: calc(60 * var(--u)); padding-bottom: var(--sp); }
.pd-video .media { aspect-ratio: 16 / 9; }
.pd-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* projet hébergé sur YouTube : lecteur intégré (mode confidentialité renforcée) sur toute la largeur du cadre 16:9 */
.pd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.facts { margin: calc(60 * var(--u)) var(--m) 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(114 * var(--u)); gap: 0; background: #000; }
/* séparations identiques, verticales comme horizontales (demande de Hippo, 9 octobre 2026) : bordure noire de 1 unité à droite et en bas
   de chaque case. À gauche, même bordure noire, exactement sous la ligne de la grille du site (les deux sont arrondies au pixel de la même
   façon) : la ligne y prend la teinte de la case au lieu d'éclaircir le trait. */
.facts > div { background: var(--w10); background-clip: padding-box; padding: calc(20 * var(--u)) calc(24 * var(--u)); border: 0 solid #000; border-width: 0 calc(1 * var(--u)) calc(1 * var(--u)); }
.facts > div .k { color: var(--w50); margin-bottom: calc(14 * var(--u)); }
.facts > div .v { line-height: 1.5; text-transform: none; }
.facts .mat { grid-column: 4; grid-row: 1 / span var(--rows, 2); }
.facts > .tall { grid-row: span 2; }   /* pas de case vide : la case s'étire en hauteur comme Prestations (calculé dans js/project.js) */
.story-h { margin-top: calc(60 * var(--u)); }
.pd-info.no-story { padding-bottom: var(--sp); }   /* fiche sans textes (GMR) : respiration avant « Autres projets » */
.story { margin-top: calc(60 * var(--u)); padding-bottom: var(--sp); }
/* rythme unique : chaque bloc commence sur un filet, même retrait au-dessus et au-dessous, quelle que soit sa longueur */
.story-row { padding: calc(30 * var(--u)) var(--m) calc(60 * var(--u)); align-items: start; position: relative; }   /* garde la marge latérale de .g4 : titres et textes alignés sur la grille ; pas de trait entre les lignes (choix de Hippo) */
.story-row h3 { padding-right: calc(20 * var(--u)); }
.story-row:last-child { padding-bottom: 0; }   /* le dernier bloc ne s'ajoute pas à l'écart de fin de section */
.story-row .ps p { line-height: 1.3; }
.story-row .ps p + p { margin-top: calc(14 * var(--u)); }
.story-row .ps { padding-right: calc(20 * var(--u)); }
.other-h { margin-top: calc(60 * var(--u)); }
.other { position: relative; margin: calc(60 * var(--u)) var(--m) 0; }
.oc-view { overflow: hidden; }
.oc-track { display: flex; align-items: flex-start; transition: transform .8s var(--spring); will-change: transform; }
.oc-track .ocard { flex: none; width: 25%; }
/* flèches à gauche et à droite, centrées sur les miniatures (modèle des flèches du terrain de jeu, fond noir pour rester visibles sur l'image) */
.oc-arr { position: absolute; top: calc(109 * var(--u)); transform: translateY(-50%); z-index: 3; width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; transition: background .3s; }
.oc-arr:hover, .oc-arr:focus-visible { background: var(--brand); }
.oc-arr svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.oc-arr.prev { left: 0; } .oc-arr.next { right: 0; }
.other-back { margin-top: calc(60 * var(--u)); padding-bottom: var(--sp); }   /* bouton « Retour aux projets » sous les cartes */
.ocard .pthumb { cursor: none; }
.ocard .cap { padding-top: calc(10 * var(--u)); }
.ocard .cap .t-mono { color: var(--w50); margin-top: calc(5 * var(--u)); }

/* =================== CONTACT =================== */
.bh-title.ct { top: calc(80vh * .32); }
.bh-sub.ct { top: calc(80vh * .32 + calc(282 * var(--u))); }
.ct-info { padding: calc(20 * var(--u)) var(--m) calc(40 * var(--u)); border-top: calc(1 * var(--u)) solid var(--w10); row-gap: calc(8 * var(--u)); }
.ct-info > div { padding-right: calc(20 * var(--u)); }
.ct-info .clock { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.ct-info .clock::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: var(--gta); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ct-info a:hover { background: var(--gta-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-form-wrap { margin-top: calc(40 * var(--u)); padding-bottom: var(--sp); }
.form { background: var(--bg-2); padding: calc(50 * var(--u)) calc(30 * var(--u)); }
.fld { display: block; margin-bottom: calc(30 * var(--u)); }
.fld .t-mono { display: block; margin-bottom: calc(15 * var(--u)); }
.fld input, .fld textarea { width: 100%; height: calc(30 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--w20); font-size: calc(16 * var(--u)); transition: border-color .3s; padding: 0; }
.fld textarea { height: calc(96 * var(--u)); resize: vertical; border: calc(1 * var(--u)) solid var(--w20); padding: calc(10 * var(--u)); }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,.35); }
.fld input:focus, .fld textarea:focus { border-image: var(--gta) 1; }
.fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.consent { display: flex; gap: calc(12 * var(--u)); align-items: flex-start; margin: 0 0 calc(30 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.4; cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.5); flex: none; margin-top: calc(2 * var(--u)); cursor: pointer; }
.consent input:checked { background: var(--gta); border-color: transparent; box-shadow: inset 0 0 0 calc(2 * var(--u)) #191919; }
.consent a { text-decoration: underline; }
.fbtn.btn { height: calc(50 * var(--u)); }
.fbtn:disabled { opacity: .6; cursor: progress; }
.form-msg { margin-top: calc(14 * var(--u)); font-size: calc(12 * var(--u)); min-height: calc(14 * var(--u)); color: #fff; }
.hp { position: absolute !important; left: calc(-9999 * var(--u)) !important; width: calc(1 * var(--u)); height: calc(1 * var(--u)); overflow: hidden; }

/* =================== MENTIONS / DOCUMENTS =================== */
.bh-title.lg { top: calc(80vh * .47); }
.bh-sub.lg { top: calc(80vh * .47 + calc(218 * var(--u))); }
.ml-list { margin-top: var(--sp); padding-bottom: var(--sp); }
.ml-item { position: relative; display: flex; justify-content: space-between; align-items: flex-end; min-height: calc(160 * var(--u)); padding: calc(30 * var(--u)); background: var(--bg-1); margin-bottom: calc(4 * var(--u)); overflow: hidden; transition: background .5s var(--ease); }
.ml-item:hover { background: var(--brand); }
.ml-item:last-child { margin-bottom: 0; }
.ml-item > h2, .ml-item > .d { position: relative; z-index: 2; }
.ml-item .d { text-align: right; }
.ml-item .d .t-mono:first-child { color: var(--w50); margin-bottom: calc(8 * var(--u)); }
.lg-body { margin-top: calc(50 * var(--u)); padding-bottom: var(--sp); align-items: start; }
.lg-side { position: sticky; top: calc(100 * var(--u)); display: grid; gap: calc(40 * var(--u)); padding: calc(110 * var(--u)) calc(20 * var(--u)) 0; }
.lg-side .k { color: var(--w50); margin-bottom: calc(7 * var(--u)); }
.lg-content { background: var(--bg-1); padding: calc(60 * var(--u)) calc(30 * var(--u)); }
.lg-content h2 { font-family: var(--f-title); font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1.05; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; margin: calc(24 * var(--u)) 0 calc(20 * var(--u)); }
.lg-content h2:first-child { margin-top: 0; }
.lg-content p { line-height: 1.1; margin-bottom: calc(14 * var(--u)); }
.lg-content p + h2 { margin-top: calc(24 * var(--u)); }
/* bouton « Retour documents légaux » : dans la colonne collante, il suit le défilement et s'arrête au niveau du carrousel */
.lg-back { font-family: var(--f-text); }
/* carrousel des trois documents : deux cases collées à la fiche, séparées par la ligne centrale de la grille */
.lg-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: calc(1 * var(--u)) solid var(--w15); }
.lg-cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: calc(40 * var(--u)); padding: calc(30 * var(--u)); background: var(--bg-1); transition: background .4s; }
.lg-cell:hover { background: var(--w10); }
.lg-cell.next { text-align: right; align-items: flex-end; }
.lg-next { display: block; }
.lg-next::after { content: ""; position: absolute; inset: 0; }   /* toute la case est cliquable */
.lg-next .t-mono { color: var(--w50); margin-bottom: calc(14 * var(--u)); }
.lg-count { color: var(--w50); height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
.lg-cell .pips { position: relative; z-index: 1; display: flex; gap: calc(4 * var(--u)); }
.lg-cell .pips a { position: relative; width: calc(40 * var(--u)); height: calc(24 * var(--u)); }
.lg-cell .pips a::before { content: ""; position: absolute; left: 0; right: 0; top: calc(11 * var(--u)); height: calc(2 * var(--u)); background: var(--w15); transition: background .3s; }
.lg-cell .pips a:hover::before { background: var(--w50); }
.lg-cell .pips a.on::before { background: var(--brand); }

/* =================== 404 =================== */
.nf { height: 100vh; display: grid; place-items: center; text-align: center; }
.nf .h-80 { font-size: calc(200 * var(--u)); background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf p { margin: calc(24 * var(--u)) auto calc(34 * var(--u)); max-width: calc(420 * var(--u)); }
.nf .acts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)); width: min(calc(560 * var(--u)), calc(100vw - calc(40 * var(--u)))); margin: 0 auto; }

/* =========================================================
   Tablette (810–1199)
   ========================================================= */
@media (max-width: 1199px) {
  :root { --m: calc(30 * var(--u)); }
  .gridlines { grid-template-columns: repeat(2, 1fr); }
  .gridlines i:nth-child(n+3) { display: none; }
  .gridlines i:nth-child(2) { border-right: calc(1 * var(--u)) solid var(--w15); }
  .h-80 { font-size: calc(64 * var(--u)); letter-spacing: calc(-3 * var(--u)); }
  .h-60 { font-size: calc(48 * var(--u)); letter-spacing: calc(-2.4 * var(--u)); }
  .h-50 { font-size: calc(48 * var(--u)); }
  .hero-head { left: var(--m); }
  .about-grid .big { grid-column: 2 / 5; }
  .about-grid .left { grid-column: 1 / 2; }
  .pcard.first { margin-left: calc(40 * var(--u)); }
  .acc { grid-template-columns: 1fr; }
  .acc > .c24 { grid-column: 1 / -1; }
  .exp-head h2 { grid-column: 1 / 4; }
  .stats > .stat, .stats-sec .stat { grid-column: 1 / -1; }
  .bh-sub { left: calc(var(--m) + var(--col) * 2); width: calc(var(--col) * 2 - calc(20 * var(--u))); }
  .who-h2 { font-size: calc(48 * var(--u)); }
  .featured { --cw: min(calc(var(--vw) * .86), calc((100vh - calc(175 * var(--u))) * 1.32)); }   /* cartes plus larges : moins de vide au-dessus et au-dessous du défilement horizontal */
  .tl-lab { font-size: calc(11 * var(--u)); letter-spacing: 0; }   /* les libellés longs étaient rognés entre 810 et 860 px */
  .lg-back { width: calc(250 * var(--u)); }   /* colonne trop étroite pour le libellé : le bouton déborde sur la 2e colonne, vide */
  .lg-nav { grid-template-columns: minmax(0, 1fr); }
  .lg-cell.next { border-top: calc(1 * var(--u)) solid var(--w15); }
  .why { grid-auto-rows: auto; }
  .why > * { min-height: calc(360 * var(--u)); }
  .why .c1, .why .c2, .why .c4 { grid-column: span 2; }
  .why .gap { display: none; }
  .why .wcta { grid-column: 1 / -1; min-height: calc(260 * var(--u)); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pj-wrap .filters { grid-column: 1 / -1; position: relative; top: 0; padding-bottom: calc(40 * var(--u)); }
  .pj-wrap .pgrid { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .facts .mat { grid-column: 1 / -1; grid-row: auto; }
  .story-row h3 { grid-column: 1 / 3; }
  .story-row .ps { grid-column: 3 / 5; }   /* 2 colonnes : titre collé à gauche, texte dans la colonne de droite (demande de Hippo) */
  .story-h h2, .other-h h2 { grid-column: 1 / -1; }   /* fiches, 2 colonnes : grands titres collés à gauche, sur la 1re ligne de la grille (demande de Hippo) */
  .pd-hero-txt { left: var(--m); }
  .oc-track .ocard { width: 50%; }   /* tablette : 2 cartes visibles */
  .other-back > div { grid-column: 1 / 3; }   /* « Voir les projets » : même largeur qu'une carte */
  .pd-hero .desc { margin-left: calc(var(--col) * 2); width: calc(var(--col) * 2); padding-right: calc(20 * var(--u)); }   /* texte d'intro dans la colonne de droite */
  .facts { grid-auto-rows: auto; }
  .facts > .tall { grid-row: auto; }
  .facts > .tall-t { grid-row: span 2; }
  /* footer tablette (grille à 2 colonnes) : liens sur toute la colonne de gauche ; à droite, les 6 réseaux sur une ligne
     sur toute la colonne, puis e-mail, téléphone et lieu l'un sous l'autre, puis le logo */
  .ftr .fnav { grid-column: 1 / 3; }
  .ftr .fsoc { grid-column: 1 / 3; grid-template-columns: repeat(6, 1fr); }
  .ftr .flip { padding: calc(14 * var(--u)); }
  .ftr .finfo { grid-template-columns: minmax(0, 1fr); }
  .ftr .fcell.wide { grid-column: 1; }
}

/* =========================================================
   Mobile (< 810)
   ========================================================= */
@media (max-width: 809px) {
  .exp-head p { margin-top: calc(20 * var(--u)); }
  :root { --m: calc(20 * var(--u)); --col: calc(var(--vw) - var(--m) * 2); --sp: calc(60 * var(--u)); }
  .gridlines { grid-template-columns: 1fr; }
  .gridlines i:nth-child(n+2) { display: none; }
  .gridlines i:first-child { border-right: calc(1 * var(--u)) solid var(--w15); }
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .g4 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .h-80 { font-size: calc(44 * var(--u)); letter-spacing: calc(-2 * var(--u)); line-height: .9; }
  .h-60 { font-size: calc(38 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .h-50 { font-size: calc(34 * var(--u)); letter-spacing: calc(-1.4 * var(--u)); }
  .h-40 { font-size: calc(28 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .h-30 { font-size: calc(24 * var(--u)); }
  .t-mono-s { font-size: calc(11 * var(--u)); }   /* 10 était trop petit sur téléphone */
  .tl-row { grid-template-columns: 1fr; }
  .tl-lab:not(.on) { display: none; }
  .tl-lab.on { grid-column: 1 / -1; margin: 0; font-size: calc(12 * var(--u)); letter-spacing: calc(.6 * var(--u)); }
  .menu-tiles { grid-template-columns: 1fr 1fr; }
  .mtile { height: calc(84 * var(--u)); padding: calc(14 * var(--u)); }
  .mcard .h-30 { font-size: calc(17 * var(--u)); }
  .menu-socials .msoc { height: calc(50 * var(--u)); }
  .hdr { padding: calc(4 * var(--u)) calc(14 * var(--u)); }

  .hero h1 { font-size: calc(28 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .hero h1 br { display: none; }
  .hero-media .vbox { width: 100%; margin-top: calc(34 * var(--u)); }
  .hero-head { top: calc(calc(34 * var(--u)) + 56.25vw + calc(24 * var(--u))); }
  .hero-line { top: calc(calc(34 * var(--u)) + 56.25vw + calc(190 * var(--u))); }
  .hero-left { width: auto; right: var(--m); top: calc(calc(34 * var(--u)) + 56.25vw + calc(214 * var(--u))); }
  .about-grid .left { order: 2; padding: 0; }
  .about-grid .big { margin-bottom: calc(30 * var(--u)); }
  .about-grid .more { margin-top: calc(30 * var(--u)); order: 3; }
  .hs { height: auto !important; margin-top: calc(30 * var(--u)); }
  .hs-pin { position: relative; height: auto; overflow: visible; display: block; }
  .hs-track { display: block; transform: none !important; padding: 0 var(--m); }
  .hs-title { width: auto; margin-bottom: calc(30 * var(--u)); }
  .featured { --cw: calc(var(--vw) - var(--m) * 2); }
  .pcard, .pcard.first { margin: 0 0 calc(30 * var(--u)); }
  .pcard-media { height: calc(var(--cw) * .75); }
  .pcard-cap { height: auto; }   /* la légende passe sur deux lignes : elle ne déborde plus sur la carte suivante */
  .acc-h { top: 0 !important; position: relative; padding-left: calc(10 * var(--u)); }
  .acc-list { grid-template-columns: 1fr; }
  .acc-strip, .acc-strip .row > div { height: calc(160 * var(--u)); }
  .acc-strip .row > div { width: calc(160 * var(--u)); }
  .ground { height: auto; }
  .ground > div { height: auto; }
  .ground .gt { padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(70 * var(--u)); justify-content: flex-start; }
  .ground .wheel { height: calc(295 * var(--u)); }
  .ground .gimg { height: calc(280 * var(--u)); }
  .stat { grid-template-columns: 1fr !important; }
  .stat .desc { padding-top: 0; }
  .stats2 { grid-template-columns: 1fr; }
  .stat .num-wrap { font-size: calc(70 * var(--u)); height: calc(70 * var(--u)); }

  .ap-stats { height: auto; padding: calc(14 * var(--u)) var(--m); gap: calc(8 * var(--u)); }
  .who-p1, .who-p2 { margin-top: 0; }
  .who-imgs { grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--u)); }
  .steps .step { margin-bottom: calc(30 * var(--u)); }
  .steps .step:last-child { margin-bottom: 0; }
  .step[data-rv] { transform: translateX(calc(40 * var(--u))); }
  .why > * { grid-column: 1 / -1 !important; min-height: calc(300 * var(--u)); }

  .beam-hero { height: 86vh; min-height: calc(560 * var(--u)); }
  .bh-title { width: calc(var(--vw) - var(--m) * 2); }
  .bh-title.pj, .bh-title.lg, .bh-title.ct { top: 30%; }
  .bh-sub, .bh-sub.pj, .bh-sub.lg, .bh-sub.ct { left: var(--m); width: calc(var(--vw) - var(--m) * 2); top: auto; bottom: calc(50 * var(--u)); }
  .pgrid { grid-template-columns: 1fr; row-gap: calc(40 * var(--u)); }
  .pthumb { height: 58vw; }
  .oc-track .ocard { width: 100%; }   /* mobile : 1 carte visible */
  .oc-arr { top: 29vw; }
  .pd-hero-txt { left: var(--m); bottom: 8vh; }
  .pd-hero .desc { margin: calc(16 * var(--u)) 0 0; width: 100%; padding-right: 0; font-size: calc(15 * var(--u)); }
  .facts { grid-template-columns: 1fr; }
  .facts > .tall-t { grid-row: auto; }
  .story-row h3 { margin-bottom: calc(20 * var(--u)); }
  .fld2 { grid-template-columns: 1fr; gap: 0; }
  .form { padding: calc(30 * var(--u)) calc(20 * var(--u)); }
  .ml-item { flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); }
  .ml-item .d { text-align: left; }
  .lg-side { position: relative; top: 0; padding: 0 0 calc(30 * var(--u)); grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
  .lg-content { padding: calc(30 * var(--u)) calc(20 * var(--u)); }
  .lg-back { grid-column: 1 / -1; width: auto; }
  .lg-cell { padding: calc(20 * var(--u)); gap: calc(24 * var(--u)); }
  .lg-content h2 { font-size: calc(26 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .nf .h-80 { font-size: calc(110 * var(--u)); }
  .nf .acts { grid-template-columns: 1fr; }
  .story-row { padding: calc(24 * var(--u)) var(--m) calc(40 * var(--u)); }
  .story-row:last-child { padding-bottom: 0; }

  .cta-band { --fh: calc(136 * var(--u)); --gap: calc(38 * var(--u)); }
  .ch-in { gap: calc(20 * var(--u)); }
  .clap { --cu: calc(.78 * var(--u)); }
  .ch-t { font-size: calc(34 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); }
  .ch-tx { --lg: calc(10 * var(--u)); }
  .ch-tx .t-mono-s { font-size: calc(11 * var(--u)); letter-spacing: calc(.6 * var(--u)); }
  .film { -webkit-mask-size: calc(18 * var(--u)) 100%; mask-size: calc(18 * var(--u)) 100%; }
  .film-track { top: calc(22 * var(--u)); bottom: calc(22 * var(--u)); }
  .film-track .fr.ph-img { width: calc(164 * var(--u)); }
  .film-track .fr.tx { font-size: calc(44 * var(--u)); letter-spacing: calc(-2 * var(--u)); padding: 0 calc(22 * var(--u)); }
  /* footer mobile : une colonne, dans l'ordre liens, réseaux (6 sur une ligne), coordonnées, logo */
  .ftr-in { padding-top: calc(30 * var(--u)); }
  .ftr-top { grid-template-rows: auto auto calc(90 * var(--u)); row-gap: 0; }
  .fnav { margin-bottom: calc(20 * var(--u)); }   /* écart sous les liens seulement : la case du logo touche celle du lieu */
  .fright, .finfo { grid-template-columns: minmax(0, 1fr); }
  .fsoc, .finfo, .fcell.wide { grid-column: 1; }
  .fsoc { grid-template-columns: repeat(6, 1fr); }
  .flip { padding: calc(8 * var(--u)); }
  .flip svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .fnav a, .fcell { font-size: calc(13 * var(--u)); }
  .fcell { height: calc(46 * var(--u)); }
  .flogo { padding: calc(17 * var(--u)) calc(16 * var(--u)); }
  .flogo-in { gap: calc(1 * var(--u)); }
  .flogo svg { height: calc(56 * var(--u)); }
  .reg { margin-top: calc(2 * var(--u)); font-size: calc(28 * var(--u)); }
}

/* =========================================================
   Écrans tactiles : zones de toucher plus hautes (l'apparence ne change pas)
   et libellé fixe sur la bande CTA, qui n'a pas de survol
   ========================================================= */
@media (hover: none) {
  .reel { padding: calc(12 * var(--u)) 0; margin: calc(-12 * var(--u)) 0 calc(-2 * var(--u)); }
  .ct-info a, .pitem .cap h3 a { display: inline-block; padding: calc(12 * var(--u)) 0; margin: calc(-12 * var(--u)) 0; }
  .pd-back::after, .lg-cell .pips a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-10 * var(--u)); bottom: calc(-10 * var(--u)); }
  .cta-tag { display: flex; }
}

/* =========================================================
   Téléphone couché (paysage, hauteur < 500 px) : le haut de l'accueil tient dans l'écran
   (demande de Hippo, 9 octobre 2026)
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { height: 100vh; height: 100svh; min-height: 0; }
  .hero-media .vbox, .hero-media .vbox.full { width: 100%; height: 100%; margin-top: 0; aspect-ratio: auto; }
  .hero-media .vbox video { object-fit: cover; }
  .hero-head { left: var(--m); right: var(--m); top: calc(72 * var(--u)); }
  .hero h1 { font-size: calc(26 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .hero h1 br { display: none; }
  .hero-line { display: none; }
  .hero-left {
    left: var(--m); right: var(--m); width: auto; top: auto; bottom: calc(16 * var(--u));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(200 * var(--u)), 34%); column-gap: calc(24 * var(--u)); align-items: end;
  }
  .hero-left p { grid-column: 1; font-size: calc(13 * var(--u)); }
  .hero-left p + p { margin-top: calc(8 * var(--u)); }
  .hero-left .js-btn { grid-column: 2; grid-row: 1 / 3; margin-top: 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .film-track { animation: none !important; }
  [data-rv], .chars .ch { opacity: 1 !important; transform: none !important; }
}
.todo { background: var(--brand); color: #fff; padding: 0 calc(4 * var(--u)); }   /* lueur de la charte sous voile 40 % : blanc ≥ 4,97:1 */

/* très petits téléphones : clap de fin de la page Contact resserré pour que le titre tienne */
@media (max-width: 369px) {
  .ch-in { gap: calc(16 * var(--u)); }
  .clap { --cu: calc(.68 * var(--u)); }
  .ch-t { font-size: calc(26 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
}