/* STUDIOLEJ — version créative : nuit, flash, traits fins. */

:root {
  --noir: #000;
  --blanc: #F2F2F0;
  --gris: #8A8E96;
  --trait: rgba(242, 242, 240, .2);
  --voile: rgba(242, 242, 240, .08);
  --bleu: #0E3DB7;
  --turquoise: #39CFB1;
  --rouge: #E5202B;
  --degrade: linear-gradient(90deg, var(--bleu), var(--turquoise));
  --marge: clamp(18px, 5vw, 76px);
  --hud: clamp(10px, 2.2vw, 26px);
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--noir); color: var(--blanc); font-family: Archivo, system-ui, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
img, canvas, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
::selection { background: var(--blanc); color: #000; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evite { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--blanc); color: #000; padding: 12px 16px; }
.evite:focus { top: 12px; }

.large { font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; }
.etroit { font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; }
.osd { font-family: VT323, "JetBrains Mono", monospace; font-size: 21px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1.5px solid var(--blanc); transition: background .18s, color .18s; }
.bouton--plein { background: var(--blanc); color: #000; }
.bouton--fil { background: rgba(0, 0, 0, .35); color: var(--blanc); }
.bouton b, .point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); }
@media (hover: hover) {
  .bouton--plein:hover { background: #000; color: var(--blanc); }
  .bouton--fil:hover { background: var(--blanc); color: #000; }
}

/* ── Ouverture ── */
.ouverture { position: fixed; inset: 0; z-index: 100; background: #000; display: none; place-items: center; }
.js-anime .ouverture { display: grid; }
.ouverture { overflow: hidden; touch-action: none; }   /* sous le voile, le doigt ne fait pas défiler la page */
/* Le cadre de la vidéo est plus large que le logo (qui en occupe les trois quarts) : au téléphone il déborde de l'écran
   des deux côtés, exprès, pour que le logo lui-même soit grand et bien centré. Pas plus de 108vw : pendant la rotation
   le logo s'approche à 5,6 % du bord gauche du cadre, et à 120vw son filet sortait de l'écran (13 px à 390 px de large).
   La première ligne sert aux navigateurs qui ne connaissent pas l'unité svh. */
.ouverture__logo { position: absolute; left: 50%; top: 46%; width: min(108vw, 780px, 104vh); width: min(108vw, 780px, 104svh); aspect-ratio: 5 / 3; transform: translate(-50%, -50%); }
.ouverture__etat { position: absolute; left: 50%; bottom: 18svh; transform: translateX(-50%); color: var(--gris); animation: cligne 1s steps(1) infinite; }
.flash { position: fixed; inset: 0; z-index: 110; background: #fff; opacity: 0; pointer-events: none; }
.ouverture__passer { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); color: var(--gris); opacity: 0; animation: apparait .4s 1.4s forwards; white-space: nowrap; }
@keyframes apparait { to { opacity: .8; } }

/* ── Le viseur fixe ── */
/* Deux voiles, en haut et en bas, pour que le viseur reste lisible par-dessus le contenu qui défile. */
body::before, body::after { content: ""; position: fixed; left: 0; right: 0; z-index: 50; pointer-events: none; }
body::before { top: 0; height: calc(92px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .82) 45%, rgba(0, 0, 0, 0) 100%); }
body::after { bottom: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, 0) 100%); }
.hud { position: fixed; z-index: 60; inset: calc(var(--hud) + env(safe-area-inset-top, 0px)) calc(var(--hud) + env(safe-area-inset-right, 0px)) calc(var(--hud) + env(safe-area-inset-bottom, 0px)) calc(var(--hud) + env(safe-area-inset-left, 0px)); pointer-events: none; mix-blend-mode: difference; color: #fff; }
.hud i { position: absolute; width: 20px; height: 20px; border: 2px solid #fff; }
.hud i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hud i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hud i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.hud i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud__lieu { position: absolute; left: 30px; bottom: 2px; }
.hud__bpm { position: absolute; right: 30px; bottom: 2px; }

.barre { position: fixed; z-index: 70; left: 0; right: 0; top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: 10px; padding: calc(var(--hud) + 6px) calc(var(--hud) + 30px + env(safe-area-inset-right, 0px)) 0 calc(var(--hud) + 30px + env(safe-area-inset-left, 0px)); pointer-events: none; }
.barre > * { pointer-events: auto; }
.barre__rec { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; min-height: 44px; mix-blend-mode: difference; color: #fff; }
.barre__rec b { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
.barre__tc { margin-left: 6px; opacity: .85; }
/* Sous 390 px de large (iPhone SE, mini, affichage agrandi), REC + compteur + Son + Menu ne tiennent pas : le bouton Menu
   sortait de l'écran (et la page défilait de 5 px en largeur à 320 px). Le compteur s'efface, les boutons restent. */
@media (max-width: 389px) { .barre__tc { display: none; } }
.barre__nav { display: none; gap: 26px; margin-right: 12px; }
.barre__nav a { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; padding: 12px 0; mix-blend-mode: difference; color: #fff; }
.barre__nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.barre .bouton { min-height: 44px; padding: 8px 12px; font-size: 11px; }
.barre__reserver { display: none; }
.barre__son[aria-pressed="true"] { background: var(--blanc); color: #000; }
@media (min-width: 900px) {
  .barre__nav { display: flex; }
  .barre__reserver { display: inline-flex; }
  .barre__menu { display: none; }
}

.menu { position: fixed; inset: 0; z-index: 65; background: #000; display: flex; flex-direction: column; justify-content: center; padding: 90px var(--marge) 80px; }
.menu[hidden] { display: none; }
.menu__liens { display: flex; flex-direction: column; gap: 6px; }
.menu__liens a { font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; font-size: clamp(34px, 10.5vw, 84px); text-decoration: none; padding: 8px 0; }
.menu__liens a:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--blanc); }
.menu__pied { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; }
.menu__pied a { display: inline-flex; align-items: center; min-height: 44px; }   /* deux zones de 44 px, l'une sous l'autre, sans se chevaucher */

/* ── Le viseur (héros) ── */
.viseur { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; }
.viseur__fond { position: absolute; inset: -4% 0; z-index: 0; will-change: transform; }
.viseur__fond picture, .viseur__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.viseur__photo { object-fit: cover; object-position: 62% 38%; filter: grayscale(1) contrast(1.3) brightness(.74); }
@media (orientation: portrait) { .viseur__photo { object-position: 40% 30%; } }
.viseur::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .1) 32%, rgba(0, 0, 0, .34) 62%, #000 100%); }
.viseur__teinte { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(14, 61, 183, .36), rgba(57, 207, 177, .1) 70%); mix-blend-mode: color; }
.balayage { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .2) 2px 3px); }
.viseur__ondes { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; height: 40%; pointer-events: none; }
.viseur__contenu { position: absolute; z-index: 4; left: var(--marge); right: var(--marge); top: 50%; transform: translateY(-60%); }
.viseur__titre { overflow: hidden; }
.mot { width: 100%; height: auto; overflow: visible; }
.plaques { margin-top: clamp(10px, 1.8vw, 18px); display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: clamp(15px, 2.2vw, 26px); }
.plaques span { background: var(--blanc); color: #000; padding: .14em .44em .1em; white-space: nowrap; }
.plaques .vide { background: none; color: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--blanc); }
.viseur__appel { position: absolute; z-index: 5; left: var(--marge); right: var(--marge); bottom: clamp(58px, 10svh, 96px); display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Bienvenue ── */
.manifeste { padding: clamp(90px, 18vw, 220px) var(--marge); border-top: 1.5px solid var(--bleu); }
.manifeste__texte { font-size: clamp(36px, 7.6vw, 108px); line-height: .98; max-width: 15em; }
.manifeste__texte .mot-m { display: inline-block; opacity: .16; transition: opacity .12s linear; }
.manifeste__texte .mot-m.est-lu { opacity: 1; }

/* ── La bande qui défile ── */
.bande { overflow: hidden; padding: clamp(10px, 2vw, 24px) 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.bande__piste { white-space: nowrap; font-size: clamp(40px, 9.4vw, 128px); line-height: 1.02; will-change: transform; }
.bande__piste--fil { color: transparent; -webkit-text-stroke: 1.5px var(--blanc); }
.bande__piste i { font-style: normal; color: var(--turquoise); -webkit-text-stroke: 0; }

/* ── Titres de section ── */
.titre { font-size: clamp(38px, 8vw, 116px); }
[data-titre] .ligne-t { overflow: hidden; display: block; padding-bottom: .06em; margin-bottom: -.06em; }
/* Le cache posé sur chaque ligne d'un titre coupait l'accent des capitales (« EN VIDÉO ») : il monte d'un cran, sans rien déplacer. */
[data-titre] > div[aria-hidden] { padding-top: .2em; margin-top: -.2em; }

/* ── Services ── */
.services { padding: clamp(40px, 8vw, 110px) var(--marge) clamp(70px, 12vw, 160px); }
.service { margin-top: clamp(46px, 8vw, 110px); padding-top: clamp(20px, 3vw, 34px); border-top: 1px solid var(--trait); display: grid; gap: clamp(22px, 4vw, 44px); position: relative; }
.service::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: var(--degrade); transform: scaleX(var(--trace, 1)); transform-origin: 0 50%; }
.js-anime .service { --trace: 0; }
.service h3 { font-size: clamp(25px, 5.2vw, 62px); }
@media (max-width: 340px) { .service h3 { font-size: 23px; } }   /* à 320 px, « PROFESSIONNEL » dépassait de 5 px et la page défilait en largeur */
.service__texte p { margin-top: 14px; color: var(--gris); max-width: 34ch; font-size: clamp(16px, 1.45vw, 19px); }
.service__texte .service__geste { color: var(--turquoise); margin-top: 18px; max-width: none; font-size: 11px; }
@media (min-width: 900px) {
  .service { grid-template-columns: 5fr 7fr; align-items: start; }
  .service--large { grid-template-columns: 1fr; }
  .service--large .service__texte { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: end; }
  .service--large .service__texte p { margin-top: 0; }
  .service--large .service__geste { grid-column: 1 / -1; }
}
/* Les liens dans le texte d'un service (NX, THRRN) : la zone à toucher (44 px de haut) est un calque transparent qui
   déborde du mot sans déplacer la phrase ; le contour du clavier, lui, reste serré sur le mot. Sur les côtés, 4 px
   seulement : la zone ne couvre pas le « ou » qui sépare les deux noms. */
.service__texte a { position: relative; color: var(--blanc); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.service__texte a::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) { .service__texte a:hover { color: var(--turquoise); } }

.ecran, .console { border: 1.5px solid var(--blanc); border-radius: 0 0 18px 18px; position: relative; overflow: hidden; background: #000; }
.ecran__tete, .ecran__pied, .console__pied { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--gris); }
.ecran__tete { border-bottom: 1px solid var(--trait); }
.ecran__pied, .console__pied { border-top: 1px solid var(--trait); }
.ecran__tete span, .ecran__pied span, .console__pied span { display: inline-flex; align-items: center; gap: 8px; }
.ecran canvas { width: 100%; height: clamp(170px, 30vw, 320px); }
.ecran--master canvas { height: clamp(200px, 32vw, 340px); }

.console__pont { position: relative; height: clamp(150px, 26vw, 320px); border-bottom: 1.5px solid var(--blanc); }
.console__pont canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.console__g, .console__d { position: absolute; top: 10px; color: var(--gris); }
.console__g { left: 12px; }
.console__d { right: 12px; color: var(--turquoise); }
.tranches { display: grid; grid-template-columns: repeat(4, 1fr); }
.tranche { position: relative; padding: 14px 0 18px; border-right: 1px solid var(--trait); display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.tranche:last-child { border-right: 0; }
.tranche__nom { font-size: clamp(15px, 1.9vw, 23px); }
.tranche.est-muette .tranche__nom { color: var(--gris); text-decoration: line-through; }
.potard { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--blanc); position: relative; }
.potard::after { content: ""; position: absolute; left: 50%; top: 4px; width: 1.5px; height: 13px; background: var(--blanc); transform-origin: 50% 17px; transform: translateX(-50%) rotate(var(--a, 0deg)); }
.ms { --ecart: 6px; --dehors: 7px; display: flex; gap: var(--ecart); }
.ms button { position: relative; font-family: "JetBrains Mono", monospace; font-size: 11px; width: 34px; height: 30px; border: 1px solid var(--trait); color: var(--gris); }
/* La zone à toucher dépasse du dessin : 44 px de haut ; entre M et S, jusqu'au milieu de l'écart ; côté extérieur, un peu
   plus, sans atteindre la tranche voisine. (44 px de large ne tiennent pas : huit boutons sur 351 px à 390 px de large.) */
.ms button::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: calc(var(--ecart) / -2); right: calc(var(--ecart) / -2); }
.ms button:first-child::before { left: calc(var(--dehors) * -1); }
.ms button:last-child::before { right: calc(var(--dehors) * -1); }
/* Sous 360 px, les M et S d'une tranche débordaient sur ceux de la voisine : ils rétrécissent un peu. */
@media (max-width: 359px) { .ms { --ecart: 4px; --dehors: 4px; } .ms button { width: 30px; } }
.ms button[aria-pressed="true"] { background: var(--blanc); color: #000; border-color: var(--blanc); }
.voie { position: relative; width: 100%; height: clamp(190px, 30vw, 270px); display: flex; justify-content: center; gap: 14px; }
.fente { position: relative; width: 44px; height: 100%; touch-action: none; cursor: ns-resize; }
.fente::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--trait); }
.capuchon { position: absolute; left: 50%; top: calc((1 - var(--v, .7)) * 100%); width: 38px; height: 18px; transform: translate(-50%, -50%); background: var(--blanc); }
.capuchon::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; background: #000; transform: translateY(-50%); }
.fente:focus-visible { outline-offset: 0; }
.niveau { display: flex; flex-direction: column-reverse; gap: 3px; height: 100%; }
.niveau u { display: block; width: 10px; flex: 1; background: var(--voile); text-decoration: none; }
@media (min-width: 900px) { .tranches { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 899px) { .tranche[data-large] { display: none; } }

.bascule { position: absolute; left: 12px; bottom: 12px; display: flex; border: 1.5px solid var(--blanc); }
.bascule__b { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; min-height: 44px; padding: 10px 16px; }
.bascule__b[aria-pressed="true"] { background: var(--blanc); color: #000; }
.sceau { position: absolute; right: 4%; bottom: 8%; width: clamp(96px, 26%, 190px); height: auto; filter: invert(1); transform: rotate(-9deg); pointer-events: none; }
.js-anime .sceau { opacity: 0; transform: rotate(-9deg) scale(1.7); }
.js-anime .sceau.est-pose { opacity: 1; transform: rotate(-9deg) scale(1); transition: transform .12s cubic-bezier(.3, 1.6, .5, 1), opacity .05s; }

/* ── Pourquoi ── */
.pourquoi { padding: clamp(40px, 8vw, 110px) 0 clamp(60px, 10vw, 140px); overflow: hidden; }
.pourquoi .titre { padding: 0 var(--marge); }
.arguments { margin-top: clamp(30px, 6vw, 80px); border-bottom: 1px solid var(--trait); }
.argument { border-top: 1px solid var(--trait); padding: clamp(16px, 2.6vw, 34px) var(--marge); position: relative; }
.argument__t { display: block; font-size: clamp(27px, 6.2vw, 92px); line-height: .98; color: var(--blanc); transition: color .25s; will-change: transform; }
.js-anime .argument__t { color: var(--gris); }
.js-anime .argument.est-actif .argument__t { color: var(--blanc); }
.argument::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--degrade); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--sortie); }
.argument.est-actif::after { transform: scaleX(1); }

/* ── La phrase ── */
.phrase { position: relative; }
.phrase__cadre { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: grid; place-items: center; overflow: hidden; background: #000; color: var(--blanc); padding: 0 var(--marge); }
.phrase__cadre.est-inverse { background: var(--blanc); color: #000; }
.phrase__onde { position: absolute; inset: 0; width: 100%; height: 100%; }
.phrase__texte { position: relative; font-size: clamp(30px, 9.5vw, 150px); line-height: .92; width: 100%; min-width: 0; white-space: nowrap; }
.phrase__texte span { display: block; }
.js-anime .phrase__texte span { visibility: hidden; }
.js-anime .phrase__texte span.est-la { visibility: visible; }
.phrase__texte span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px currentColor; -webkit-text-stroke-color: var(--blanc); }
.est-inverse .phrase__texte span:nth-child(2) { -webkit-text-stroke-color: #000; }

/* ── Les images ── */
.images { padding: clamp(60px, 10vw, 140px) 0 clamp(50px, 8vw, 110px); }
.images .titre, .images__geste { padding: 0 var(--marge); }
.images__geste { margin-top: 16px; color: var(--gris); }
.rushes { margin-top: clamp(26px, 5vw, 60px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--marge) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rushes::-webkit-scrollbar { display: none; }
.rush { flex: 0 0 auto; scroll-snap-align: center; }
.rush--paysage { width: 86vw; }
.rush--portrait { width: 70vw; }
.rush__cadre { display: block; position: relative; width: 100%; border: 1.5px solid var(--blanc); overflow: hidden; background: #111; }
.rush__cadre img { width: 100%; height: auto; filter: grayscale(1) contrast(1.25) brightness(.9); transition: filter .5s; }
.rush__cadre::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .16) 2px 3px); transition: opacity .5s; }
.rush.est-couleur .rush__cadre img { filter: none; }
.rush.est-couleur .rush__cadre::after { opacity: 0; }
.rush__hud { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; justify-content: space-between; font-size: 18px; text-shadow: 0 0 6px rgba(0, 0, 0, .9); z-index: 1; }
.rush figcaption { margin-top: 10px; color: var(--gris); }
@media (min-width: 900px) {
  .rushes { display: grid; grid-template-columns: 52fr 24fr 24fr; align-items: start; gap: 18px; overflow: visible; }
  .rush--paysage, .rush--portrait { width: auto; }
  .rush:nth-child(2) { margin-top: 12%; }
  .rush:nth-child(3) { margin-top: 34%; }
}
@media (hover: hover) { .rush__cadre:hover img { filter: none; } .rush__cadre:hover::after { opacity: 0; } }

/* ── En vidéo : les reels, dans les mêmes cadres que les rushes ── */
.video { padding: clamp(20px, 4vw, 60px) 0 clamp(50px, 8vw, 110px); }
.video .titre, .video__tout { padding: 0 var(--marge); }
/* 6 px de marge en haut, dans la bande qui défile : le contour du focus autour d'un cadre n'y est pas coupé. */
.reels { margin-top: calc(clamp(26px, 5vw, 60px) - 6px); display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--marge) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reels::-webkit-scrollbar { display: none; }
/* position: relative garde l'annonce cachée des lecteurs d'écran (.sr) dans la bande : sinon, au-delà du bord, elle élargissait la page. */
.reel { position: relative; flex: 0 0 auto; width: min(86vw, 400px); scroll-snap-align: center; }
.reels--seul .reel { width: min(100%, 400px); }
/* Avant le clic : un cadre vertical dessiné ici, sans rien d'Instagram. Après : la hauteur est celle qu'annonce Instagram. */
.reel__cadre { position: relative; aspect-ratio: 3 / 4; border: 1.5px solid var(--blanc); background: #000; overflow: hidden; }
.reel__cadre.est-charge { aspect-ratio: auto; background: #fff; }
/* Le focus du clavier dans la vidéo chargée : le contour se trace autour du cadre (l'intégration, elle, n'en montre aucun).
   Seulement au clavier (classe posée par script.js) : après un toucher ou un clic, pas de cadre turquoise. */
.clavier .reel__cadre.est-charge:focus-within { outline: 2px solid var(--turquoise); outline-offset: 3px; }
/* Le cadre d'avant le clic est une grille : le code du viseur, le triangle dans la place qui reste, les ondes, puis le titre et le bouton.
   Rien ne se chevauche, même dans un cadre étroit (téléphone de 320 px, titre sur deux lignes). */
.reel__lire { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; width: 100%; padding: 8px 0 14px; text-align: left; }
.reel__lire:focus-visible { outline-offset: -6px; }
.reel__hud { display: flex; justify-content: space-between; margin: 0 10px; font-size: 18px; }
.reel__triangle { place-self: center; width: clamp(46px, 17%, 72px); height: auto; aspect-ratio: 1; overflow: visible; transition: color .18s; }
.reel__ondes { width: 100%; height: auto; aspect-ratio: 3.8; transform-origin: 50% 100%; transition: transform .5s var(--sortie); }
.reel__bas { display: grid; justify-items: start; gap: 12px; margin: clamp(14px, 6%, 26px) 14px 0; }
.reel__titre { font-size: clamp(21px, 6.2vw, 28px); line-height: .96; overflow-wrap: anywhere; }
.reel__note { color: var(--gris); }
@media (hover: hover) {
  .reel__lire:hover .reel__triangle { color: var(--turquoise); }
  .reel__lire:hover .reel__ondes { transform: scaleY(1.35); }
  .reel__lire:hover .bouton { background: #000; color: var(--blanc); }
}
.reel__attente { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 44px 14px 14px; text-align: center; }
.reel__attente .reel__hud { position: absolute; left: 0; right: 0; top: 8px; }
.reel__etat { color: var(--gris); animation: cligne 1s steps(1) infinite; }
.reel__etat.est-muet { color: var(--blanc); animation: none; }
/* L'intégration charge sous le panneau d'attente, à sa vraie largeur, et ne se montre qu'une fois sa hauteur connue. */
.reel__insta { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; }
.est-charge .reel__insta { position: static; opacity: 1; pointer-events: auto; }
.reel figcaption { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 14px; color: var(--gris); }
.reel figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); text-underline-offset: 4px; }
.video__tout { margin-top: clamp(18px, 3vw, 34px); }
.video__tout .bouton { white-space: normal; text-align: center; }
@media (min-width: 900px) {
  .reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 400px)); gap: 26px 18px; overflow: visible; padding-bottom: 0; }
  .reel, .reels--seul .reel { width: auto; }
  /* Une seule vidéo : à gauche le titre en haut et le lien vers le compte en bas, face au pied du cadre ; le cadre à droite
     (la composition de « Composition sur mesure » : le texte d'un côté, l'écran de l'autre). */
  .video--seul { display: grid; grid-template-columns: 1fr minmax(300px, 400px); column-gap: 40px; align-items: start; padding-left: var(--marge); padding-right: var(--marge); }
  .video--seul .titre, .video--seul .video__tout, .video--seul .reels { padding: 0; }
  .video--seul .reels { grid-column: 2; grid-row: 1; margin-top: 0; grid-template-columns: 1fr; }
  .video--seul .titre { grid-column: 1; grid-row: 1; align-self: start; }
  .video--seul .video__tout { grid-column: 1; grid-row: 1; align-self: end; margin-top: 0; }
}

/* ── Contact ── */
/* Arrivée par un lien (menu, « Réserver », adresse …#contact) : le titre se pose sous la barre du haut, pas dessous.
   Au bureau, la marge haute des sections suffit presque ; script.js lit cette valeur pour le défilement doux. */
main > section { scroll-margin-top: 76px; }
@media (min-width: 900px) { main > section { scroll-margin-top: 24px; } }
.contact { padding: clamp(50px, 9vw, 130px) var(--marge) clamp(70px, 12vw, 150px); }
.onglets { margin-top: clamp(28px, 5vw, 64px); }
.onglets__liste { display: flex; gap: 26px; border-bottom: 1px solid var(--trait); }
.onglets__liste[hidden] { display: none; }
.onglet { font-size: clamp(22px, 3vw, 34px); padding: 14px 0 16px; color: var(--gris); position: relative; min-height: 48px; }
.onglet[aria-selected="true"] { color: var(--blanc); }
.onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--degrade); }
.panneau[hidden] { display: none; }
.ligne { display: grid; gap: 6px; padding: clamp(18px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--trait); text-decoration: none; position: relative; }
.ligne .mono { color: var(--gris); }
.ligne__v.large { font-size: clamp(22px, 4.6vw, 60px); overflow-wrap: anywhere; }
.ligne__v--long.large { font-size: clamp(13px, 4vw, 56px); }
/* L'e-mail et l'adresse sont longs : corps réduit, et jamais de coupure au milieu d'un mot (l'e-mail ne se replie qu'après le @). */
.ligne__v--mail.large { font-size: clamp(14.5px, 4.3vw, 56px); overflow-wrap: normal; }
.ligne__v--adresse.large { font-size: clamp(13px, 3.45vw, 40px); line-height: 1.04; overflow-wrap: normal; }
.ligne__v--adresse span { display: inline-block; }
a.ligne .ligne__v { padding-right: clamp(26px, 4vw, 52px); }   /* la place de la flèche, sur toutes les lignes */
a.ligne::after { content: "↗"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(20px, 3vw, 38px); opacity: .5; transition: transform .25s var(--sortie), opacity .25s; }
@media (hover: hover) { a.ligne:hover::after { opacity: 1; transform: translate(4px, calc(-50% - 4px)); } a.ligne:hover .ligne__v { color: transparent; -webkit-text-stroke: 1.5px var(--blanc); } }
@media (min-width: 900px) {
  .ligne { grid-template-columns: 180px 1fr; align-items: center; }
  /* À côté de la colonne des intitulés, « @studio_leji_production » doit tenir sur une ligne jusqu'à la flèche. */
  .ligne__v--long.large { font-size: clamp(22px, calc((86vw - 200px) / 19.6), 54px); }
}
.horaires__resume { padding-top: clamp(24px, 3.6vw, 44px); font-size: clamp(21px, 6.7vw, 84px); }
.horaires__resume span { display: inline-block; }
.horaires { display: grid; }
.horaires[hidden] { display: none; }
.horaires div { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.horaires dt { font-size: clamp(17px, 1.6vw, 21px); }
.horaires dd { font-family: "JetBrains Mono", monospace; font-size: 13px; text-align: right; }
.horaires__note { margin-top: 18px; color: var(--gris); max-width: 40ch; font-size: clamp(16px, 1.45vw, 19px); }

/* ── Pied ── */
.pied { padding: clamp(50px, 8vw, 110px) var(--marge) calc(clamp(80px, 12vw, 130px) + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--blanc); display: grid; gap: 26px; }
.pied__logo { width: min(100%, 640px); }
.pied__logo svg { width: 100%; height: auto; }
.pied__nom { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.1; }
.pied__texte .mono { margin-top: 8px; color: var(--gris); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: 13px; }
.pied__liens a { padding: 13px 0; }
.pied__mentions { color: var(--gris); }
.pied__fin { color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.rembobine { min-height: 44px; padding: 8px 14px; color: var(--blanc); border: 1.5px solid var(--blanc); }
@media (hover: hover) { .rembobine:hover { background: var(--blanc); color: #000; } }

/* Au téléphone, « Réserver » se range sur la ligne du bas du viseur, entre le nom de la section et le tempo : il ne recouvre rien. */
.flottant { position: fixed; z-index: 62; left: 50%; bottom: calc(var(--hud) - 6px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 8px 14px; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .25s, transform .35s var(--sortie); }
.flottant.est-la { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (min-width: 900px) { .flottant { display: none; } }

.visionneuse { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .96); display: grid; place-items: center; padding: 70px 14px 30px; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1.5px solid var(--blanc); }
.visionneuse__fermer { position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); }

.grain { position: fixed; inset: -60px; z-index: 90; pointer-events: none; opacity: .1; mix-blend-mode: screen; background-size: 240px 240px; }

/* La mire : au bureau, un petit cadre de mise au point suit le pointeur et se resserre sur ce qui se clique. */
.mire { position: fixed; left: 0; top: 0; z-index: 95; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .2s, width .25s var(--sortie), height .25s var(--sortie), margin .25s var(--sortie); }
.mire.est-la { opacity: 1; }
.mire::before, .mire::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(#fff, #fff) 0 0 / 9px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 0 / 1.5px 9px no-repeat,
  linear-gradient(#fff, #fff) 100% 0 / 9px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 1.5px 9px no-repeat,
  linear-gradient(#fff, #fff) 0 100% / 9px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 100% / 1.5px 9px no-repeat,
  linear-gradient(#fff, #fff) 100% 100% / 9px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 1.5px 9px no-repeat; }
.mire::after { inset: 50%; width: 3px; height: 3px; margin: -1.5px; background: #fff; }
.mire.est-sur { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.mire.est-sur::after { background: var(--rouge); mix-blend-mode: normal; }

@keyframes cligne { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ouverture, .flash { display: none !important; }
  .manifeste__texte .mot-m { opacity: 1; }
  .phrase__texte span { visibility: visible; }
  .service::before { transform: none; }
  .argument__t { color: var(--blanc); }
  .sceau { opacity: 1; transform: rotate(-9deg); }
  * { animation: none !important; transition: none !important; }
}