/* breezz.css : styles des sections de /breezz/ (B01 à B12), au-dessus de base.css.
   Mobile d'abord (390, WebView Instagram), puis 768 / 900 (pins, pointeur fin, ajoutés par breezz.js) / 1200.
   Couleurs : uniquement les tokens de base.css (aplats LUT). Aucun dégradé décoratif, aucune ombre.
   Tour 4 : vidéo dès le plan 2 de la bande-annonce (PiP face caméra agrandie, liseré turquoise), « candidature » dit
   dès le haut, bandeau 50 km sur une rangée (plus de compteur), 4 Reels « déjà tournés » en cadres égaux, BOOST avec
   le visage, concepts calés sur la marge, premier mois en frise J1 → J30, tableau de bord replié, fin en deux colonnes.
   Règle de casse : .mega = cartons en capitales (50 KM, 8 REELS, BOOST, ON EN PARLE) ; .title = phrase en bas de casse. */

@property --sp { syntax: '<number>'; inherits: true; initial-value: 50; }

/* ---------------------------------------------------------------- rythme de page
   Lien envoyé en DM : sections plus serrées que sur l'accueil (la page se lit en une minute). */
html[data-page="breezz"] { --sec-y: clamp(52px, 6.4vw, 96px); }

/* ---------------------------------------------------------------- utilitaires de page */
.k { margin: 0 0 8px; color: var(--muted); }
.nw { white-space: nowrap; }
.magnet { display: inline-block; padding: 12px; margin: -12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 2px solid currentColor; border-radius: var(--r-pill);
  font-weight: 700; font-stretch: 87%; font-size: 17px; line-height: 1;
  transition: transform var(--d-tap) linear;
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--encre); color: var(--bz-ciel); border-color: var(--encre); }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover { background: var(--fg); color: var(--bg); } }

/* Titres condensés (Archivo 62 %) : sans espacement de mots, « Écouter et » se lisait « Écouteret ».
   Règle de page : toute ligne en largeur serrée reçoit .14em entre les mots. */
html[data-page="breezz"] :is(.title, .mega) { word-spacing: .12em; }
html[data-page="breezz"] :is(.trailer__title, .tplan__big, .trajet__title, .route__end, .diag__k, .concept__title,
  .concept__hook, .anim__big, .anim__side, .plan__title, .frise__t, .series__name, .needs__t, .goals__k,
  .goals__strike, .commit__v, .ugc__f, .concept__label li, .end__t, .crail__a) { word-spacing: .14em; }

/* Repli « Voir les N autres » : un vrai bouton (carré plein + libellé lisible), pas un libellé HUD */
.tmore { border-top: 1px solid var(--line); }
.tmore__sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 4px 0; color: var(--fg);
  font-weight: 700; font-stretch: 87%; font-size: 16px; line-height: 1.2;
}
.tmore__sum::-webkit-details-marker { display: none; }
.tmore__sum::before {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  background: var(--fg); color: var(--bg); font-weight: 700; font-size: 18px; line-height: 1;
}
.tmore[open] > .tmore__sum::before { content: "−"; }
@media (hover: hover) { .tmore__sum:hover { text-decoration: underline; text-underline-offset: .2em; } }

/* Storyboard texte (écrans des concepts) */
.sb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb__f {
  aspect-ratio: 9 / 16; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 7px; border: 1px solid var(--encre);
  background: var(--bz-ciel); color: var(--encre);
}
.sb__k { font-size: 12px; }
.sb__tc { font-size: 12px; color: var(--encre-2); }
.sb__t { margin-top: 4px; font-weight: 600; font-stretch: 87%; font-size: 13px; line-height: 1.25; }

/* Référence de style : vignette 9:16 + la vraie boucle muette de mon Reel (carte active, survol, focus) */
.ref {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: end;
  padding: 0; text-align: left; text-decoration: none; color: inherit; background: none; border: 0;
}
.ref__media { position: relative; display: block; width: 150px; aspect-ratio: 9 / 16; overflow: hidden; border: 2px solid currentColor; background: var(--encre); }
.ref__thumb, .ref__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref__video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-ui) linear; }
.ref.is-playing .ref__video { opacity: 1; }
.ref__play {
  position: absolute; z-index: 1; left: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--encre); color: var(--bz-ciel); font-size: 12px; line-height: 1;
}
.ref__txt { font-weight: 600; font-stretch: 87%; font-size: 15px; line-height: 1.3; padding-bottom: 2px; }
@media (hover: hover) {
  .ref:hover .ref__thumb { transform: scale(1.04); transition: transform var(--d-ui) var(--ease-out); }
  .ref:hover .ref__txt { text-decoration: underline; text-underline-offset: .18em; }
}
.ref--none { display: block; margin: 0; border: 1px dashed currentColor; padding: 12px; font-weight: 600; font-stretch: 87%; }
.ref--none .link { font-weight: 700; white-space: nowrap; }

/* ================================================================ B01 Bande-annonce */
.trailer { position: relative; }
.trailer__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.trailer__player { min-width: 0; }
/* Hauteur réservée dès le HTML (pas de décalage quand les plans s'initialisent) */
.trailer__frame { position: relative; width: 100%; height: min(58svh, 177.78vw); background: var(--nuit); }
html:not(.js):not(.rp) .trailer__frame { height: auto; }
.trailer__story { height: 100%; --focus: var(--neon); }
/* Le cadre est plus bas qu'un 9:16 plein (titre visible sous le lecteur) : la grille des plans suit le cadre. */
:is(.js, .rp) .trailer__story { grid-template-rows: minmax(0, 100%); }
:is(.js, .rp) .trailer__story .story__items { height: 100%; min-height: 0; grid-template-rows: minmax(0, 100%); overflow: hidden; }
:is(.js, .rp) .trailer__story .story__item { height: 100%; min-height: 0; }
.tplan { overflow: hidden; background: var(--nuit); }
.tplan[data-lut] { background: var(--bg); color: var(--fg); }
html:not(.js):not(.rp) .tplan { aspect-ratio: 9 / 16; }
.tplan__photo, .tplan__photo img { display: block; width: 100%; height: 100%; }
.tplan__photo img { object-fit: cover; object-position: 50% 24%; }
.tplan__video { display: block; width: 100%; height: 100%; object-fit: cover; }
html:not(.js):not(.rp) .tplan .reel__fallback { top: 12px; bottom: auto; }

.tplan__cap { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 1; margin: 0; pointer-events: none; }
.tplan__pave {
  background: var(--nuit); color: var(--pellicule);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 2px 8px; font-weight: 700; font-stretch: 87%; font-size: 17px; line-height: 1.5;
}
.tplan__tag { display: table; margin-bottom: 10px; }

.tplan__flat {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  padding: 84px 20px 26px; pointer-events: none;
}
.tplan__flat > * { margin: 0; }
.tplan__flat .chips, .tplan__flat a { pointer-events: auto; position: relative; z-index: 3; }
.tplan__big { font-weight: 900; font-stretch: 62%; font-size: var(--t-l); line-height: .92; text-wrap: balance; }
.tplan--look .tplan__big { font-size: clamp(40px, 12vw, 64px); }
.tplan__detail { font-weight: 600; font-stretch: 87%; font-size: 18px; line-height: 1.35; max-width: 30ch; }
.tplan__bulle { align-self: flex-start; font-size: clamp(24px, 7vw, 34px); }
.tplan__down { align-self: flex-start; font-weight: 700; font-size: 17px; }
html:not(.js):not(.rp) .tplan--look, html:not(.js):not(.rp) .tplan--idea { aspect-ratio: auto; }
html:not(.js):not(.rp) .tplan__flat { padding-top: 32px; }

/* PiP face caméra (plan 1) : vignette + « avec le son » = un seul lien, en bas à GAUCHE, sur l'écran de la salle :
   dans le recadrage 9:16, le visage est à droite et doit rester dégagé. */
.pip {
  --pip-w: min(31vw, 124px, 15.5svh);
  /* Bord droit calé à 44 % du cadre : la vignette couvre entièrement l'enseigne « MEMBRE » de l'écran de la salle
     (sinon un morceau blanc dépasse à droite de la vignette et passe pour un défaut d'affichage). */
  position: absolute; z-index: 3; left: max(10px, calc(44% - var(--pip-w))); bottom: 58px; width: var(--pip-w);
  display: grid; gap: 0; text-decoration: none; color: inherit;
}
/* Liseré turquoise : on voit tout de suite que c'est une vidéo qui tourne, pas une vignette */
.pip__fig { display: block; width: 100%; aspect-ratio: 9 / 16; border: 3px solid var(--bz-turquoise); border-bottom: 0; background: var(--nuit); overflow: hidden; }
.pip__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pip__label {
  display: grid; gap: 1px; padding: 6px 7px 7px;
  background: var(--bz-turquoise); color: var(--encre);
  font-weight: 700; font-stretch: 87%; font-size: 12px; line-height: 1.15;
}
.pip__l2 { font-size: 14px; }
.pip__play { display: inline-block; font-size: 11px; margin-right: 2px; vertical-align: 1px; }
@media (hover: hover) { .pip:hover .pip__label { background: var(--blanc); } }
.pip:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
/* Téléphone : vignette plus large, recadrée en 3:4 sur le visage (le face caméra se voit mieux) ; elle couvre toute
   l'enseigne de l'écran de la salle, de 5 % à 43 % de la largeur du cadre. */
@media (max-width: 599px) {
  .pip { --pip-w: 40%; left: 4%; bottom: 66px; }
  .pip__fig { aspect-ratio: 3 / 4; }
  .pip__video { object-position: 50% 28%; }
}
/* « ▶ SON » du Reel (plan 3) */
.pip__sound {
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: var(--blanc); color: var(--encre);
  font-weight: 700; font-stretch: 87%; font-size: 15px; letter-spacing: .02em;
}
@media (hover: hover) { .pip__sound:hover { background: var(--bz-framboise); } }
.tplan__sound { position: absolute; z-index: 3; top: 70px; right: 8px; }

/* Commandes du lecteur */
.trailer__story .story__bars { top: 10px; }
.trailer__story .story__controls { top: 20px; }
.trailer__story .story__count { font-size: 12px; }
/* Téléphone : les segments suffisent (pas de « PLAN 1 / 4 ») ; « Passer » est inutile, le titre est juste dessous.
   On garde la pause (WCAG 2.2.2) et le tap à droite pour avancer, comme une story. */
@media (max-width: 599px) {
  .trailer__story .story__count, .trailer__story .story__skip { display: none; }
}
/* Plan 3 sur aplat pêche (clair) : segments à l'encre */
.trailer[data-plan="3"] .trailer__story { --story-bar: rgba(13, 15, 20, .25); --story-fill: var(--encre); }

/* Texte : sous le lecteur sur mobile, TOUJOURS visible (le titre ne dépend pas du plan affiché).
   Ordre de lecture : titre → présentation → boutons → sommaire « En 30 secondes ». */
.trailer__text { display: contents; }
.trailer__head { padding: 16px var(--marge) 0; min-width: 0; }
.trailer__kicker { margin: 0 0 10px; color: var(--encre-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.trailer__apply { display: inline-block; padding: 4px 8px 3px; background: var(--encre); color: var(--bz-ciel); }
.trailer__title { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(32px, 9vw, 46px); line-height: .98; text-wrap: balance; color: var(--encre); }
/* Coupe mot à mot : opacity (pas visibility) pour que le H1 reste lu par les lecteurs d'écran */
.trailer__title .tt.is-cutting .w:not(.is-on) { opacity: 0; }

.trailer__more { padding: 18px var(--marge) 6px; min-width: 0; }
.trailer__lead { margin: 0; max-width: 52ch; }
.trailer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.trailer__dm { margin: 16px 0 0; color: var(--muted); }
.trailer__home { margin: 14px 0 0; font-weight: 700; }
.trailer__home .link { display: inline-flex; align-items: center; min-height: 44px; }

/* « En 30 secondes » : juste sous le titre (lien envoyé en DM, lu en quelques secondes) */
.tldr { padding: 18px var(--marge) 34px; min-width: 0; }
.tldr__k { margin: 0 0 6px; color: var(--muted); }
.tldr__list { margin: 0; padding: 0; list-style: none; }
.tldr__a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 8px; align-items: baseline;
  min-height: 44px; padding: 10px 0;
  border-top: 1px solid var(--encre); text-decoration: none; color: inherit;
  font-weight: 700; font-stretch: 87%; font-size: 18px; line-height: 1.22;
}
.tldr__list li:last-child .tldr__a { border-bottom: 1px solid var(--encre); }
.tldr__n { color: var(--muted); }
.tldr__go { justify-self: end; }
@media (hover: hover) {
  .tldr__a { transition: background-color var(--d-tap) linear; }
  .tldr__a:hover { background: var(--encre); color: var(--bz-ciel); }
  .tldr__a:hover .tldr__n { color: var(--bz-ciel); }
}

/* Polices : le texte du héros apparaît une fois Archivo chargée (pas de saut de mise en page).
   Filet de sécurité : visible après 1,6 s quoi qu'il arrive ; sans JS, visible tout de suite. */
.js .trailer__text > * { opacity: 0; animation: bz-show 0s linear 1.6s forwards; }
.js.bz-fonts .trailer__text > * { opacity: 1; animation: none; }
@keyframes bz-show { to { opacity: 1; } }

@media (max-width: 899px) {
  .trailer { padding-top: var(--topbar-h); }
}
/* Téléphone : la bande-annonce laisse la place à l'étiquette « Candidature » et aux premières lignes du titre,
   même dans la fenêtre plus courte du navigateur intégré d'Instagram. */
@media (max-width: 599px) {
  .trailer__frame { height: min(52svh, 177.78vw); }
}
@media (min-width: 768px) and (max-width: 899px) {
  .trailer__frame { height: min(66svh, 900px); width: calc(min(66svh, 900px) * 9 / 16); margin-inline: auto; }
  .trailer__head, .trailer__more, .tldr { width: min(100%, 640px); margin-inline: auto; padding-inline: 0; }
}

@media (min-width: 900px) {
  .trailer { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--topbar-h) + 2svh) 0 4svh; }
  .trailer__grid {
    width: 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); padding-inline: var(--marge);
    grid-template-rows: 1fr auto auto auto 1fr; align-items: start;
  }
  .trailer__player { grid-column: 1 / span 5; grid-row: 1 / -1; align-self: center; justify-self: center; }
  .trailer__frame { height: min(84svh, 820px); width: auto; aspect-ratio: 9 / 16; }
  .pip { left: 12px; bottom: 80px; width: 42%; }
  .pip__label { padding: 9px 10px 10px; font-size: 14px; }
  .pip__l2 { font-size: 17px; }
  .tplan__sound { top: 72px; right: 10px; }
  .trailer__head { grid-column: 7 / -1; grid-row: 2; padding: 0; align-self: end; }
  .trailer__more { grid-column: 7 / -1; grid-row: 3; padding: 24px 0 0; }
  .tldr { grid-column: 7 / -1; grid-row: 4; padding: 26px 0 0; }
  .tldr__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goutt); }
  .tldr__list li:nth-last-child(2) .tldr__a { border-bottom: 1px solid var(--encre); }
  .tldr__a { font-size: 16px; min-height: 52px; padding: 9px 0; }
  .trailer__kicker { margin-bottom: 18px; }
  .trailer__title { font-size: clamp(44px, 4.3vw, 74px); line-height: .94; }
  .trailer__lead { font-size: var(--t-base); }
  .trailer__ctas { margin-top: 20px; }
  .trailer__dm { margin-top: 12px; }
  .trailer__home { margin-top: 6px; }
}
@media (min-width: 1200px) {
  .trailer__player { grid-column: 2 / span 4; }
}

/* ================================================================ B02 50 km : un bandeau logistique (une rangée, pas de compteur)
   Le chiffre ne bouge plus : il ne peut plus afficher « 34 KM » sous « 50 KM ». */
.trajet { --line: var(--encre); padding-block: clamp(28px, 4vw, 56px); }
.trajet__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px 16px; }
.trajet__km { margin: 0; display: flex; align-items: flex-end; gap: .06em; font-weight: 900; font-stretch: 62%; font-size: clamp(76px, 22vw, 150px); line-height: .8; }
.trajet__v { line-height: .8; }
.trajet__unit { font-size: .34em; line-height: 1; padding-bottom: .04em; }
.trajet__title { margin: 0; padding-bottom: .04em; font-weight: 900; font-stretch: 62%; font-size: clamp(27px, 7.2vw, 44px); line-height: .95; text-wrap: balance; }
/* Faits logistiques : filets horizontaux seuls, 2 × 2 */
.trajet__facts { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goutt); }
.trajet__facts li { font-weight: 700; font-stretch: 87%; font-size: 16px; line-height: 1.25; padding: 9px 0; border-top: 1px solid var(--encre); text-wrap: balance; }
.trajet__facts li:nth-last-child(-n+2) { border-bottom: 1px solid var(--encre); }
.route { display: none; }
@media (min-width: 900px) {
  .trajet__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); row-gap: 26px; }
  .trajet__km { grid-column: 1 / span 3; }
  .trajet__title { grid-column: 4 / span 4; font-size: clamp(32px, 2.9vw, 46px); }
  .trajet__facts { grid-column: 8 / -1; }
  .trajet__facts li { font-size: 17px; }
  /* Schéma Dannemarie → frontière → Courfaivre : tracé une fois à l'arrivée, sans chiffre qui défile */
  .route { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
  .route__end { font-weight: 600; font-stretch: 75%; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
  .route__track { position: relative; height: 3px; }
  .route__line { position: absolute; inset: 0; background: var(--encre); transform-origin: 0 50%; }
  .route__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--encre); }
  .route__dot--from { left: 0; }
  .route__dot--to { left: 100%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--bz-turquoise); border: 4px solid var(--encre); }
  .route__border { position: absolute; left: 44%; top: -9px; bottom: -9px; border-left: 2px dashed var(--encre); }
  .route__border i { position: absolute; bottom: calc(100% + 5px); left: 0; transform: translateX(-50%); font-style: normal; font-weight: 600; font-stretch: 75%; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
}
/* ================================================================ B04 Diagnostic : deux colonnes typographiques */
.diag { --line: var(--filet-clair); }
.diag__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.diag__title { margin: 0 0 16px; }
.diag__intro { margin: 0; max-width: 46ch; }
.diag__quote { margin: 0; padding: 16px 0 0; border-top: 2px solid var(--encre); }
.diag__quote p { margin: 0; font-size: var(--t-l); line-height: 1.06; max-width: 22ch; }
.diag__col { min-width: 0; }
.diag__k { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 900; font-stretch: 62%; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; }
.diag__sw { flex: none; width: 14px; height: 14px; border: 1px solid var(--encre); background: var(--bz-turquoise); }
.diag__col--margin .diag__sw { background: var(--bz-framboise); }
.diag__list { margin: 0; padding: 0; list-style: none; }
.diag__list li { padding: 12px 0; border-top: 1px solid var(--line); }
.diag__list strong { font-weight: 700; }
.diag__col > .diag__list > li:first-child { border-top: 2px solid var(--encre); }
/* Le relevé du compte : en petit, à la fin (un point de départ chiffré, pas une vitrine) */
.diag__releve { padding-top: 12px; border-top: 1px solid var(--encre); }
.diag__rk { margin: 0 0 8px; color: var(--muted); }
.diag__figs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.diag__figs > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.diag__v { flex: none; font-weight: 900; font-stretch: 62%; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.diag__figs dd { margin: 0; color: var(--muted); font-size: var(--t-s); line-height: 1.25; }
@media (min-width: 900px) {
  .diag__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); row-gap: 44px; align-items: start; }
  .diag__head { grid-column: 1 / span 6; }
  .diag__quote { grid-column: 8 / -1; align-self: end; }
  .diag__col--keep { grid-column: 1 / span 6; padding-right: clamp(0px, 2vw, 32px); }
  .diag__col--margin { grid-column: 7 / -1; }
  .diag__releve { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px; }
  .diag__rk { margin: 0; }
  .diag__figs { display: flex; flex-wrap: wrap; gap: 10px 36px; }
}

/* ================================================================ B11 Déjà tourné : 4 cadres 9:16 égaux, légendes sur la même ligne
   Une seule étiquette « TOURNÉ + MONTÉ PAR MOI » pour les quatre (règle : une par section, en tête). */
.proof__head { margin-bottom: 26px; display: grid; gap: 16px; }
.proof__head .title { margin: 0; }
.proof__side { display: grid; gap: 14px; min-width: 0; }
.proof__bridge { margin: 0; max-width: 40ch; }
.proof__credit { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-stretch: 87%; font-size: 15px; line-height: 1.3; }
.proof__tag { --tag-bg: var(--bz-turquoise); }
.proof__reels {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--marge) 6px; scroll-padding-inline: var(--marge); scrollbar-width: thin;
}
.proof__reel { flex: 0 0 80vw; scroll-snap-align: start; margin: 0; min-width: 0; }
.proof__reel .reel__frame { aspect-ratio: 9 / 16; }
.proof__reel .reel__frame video { width: 100%; height: 100%; object-fit: cover; }
.proof__reel .reel__cap { padding: 10px 2px 0; display: grid; gap: 2px; align-content: start; }
.proof__reel .reel__credit { margin: 0; color: var(--muted); }
.proof__open { font-weight: 700; font-size: 15px; justify-self: start; text-align: left; }
.proof__ig { justify-self: start; }
@media (pointer: fine) { .proof__reel .reel__cap { gap: 8px; } .proof__open { margin-top: 4px !important; } }
/* Deux cibles empilées (« Voir en entier » puis « Voir sur Instagram ») : chacune garde sa propre hauteur de 44 px.
   Le socle agrandit .link au doigt avec un padding compensé par des marges négatives : empilées, les deux zones se
   recouvraient (27 px) et le lien Instagram, posé dessus, captait le tap destiné au lecteur. */
.proof__reel .reel__cap .link { margin-block: 0; }
@media (pointer: coarse) {
  .proof__reel .reel__cap .link { padding-block: 11px 12px; min-height: 44px; }
  .proof__reel .reel__cap .link::after { bottom: 11px; }
}
.proof__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.proof__count { margin: 0; min-width: 4em; text-align: center; }
.proof__body { display: grid; gap: 26px; margin-top: 30px; }
.proof__body p { margin: 0; max-width: 60ch; }
.proof__lead, .proof__club { display: grid; gap: 12px; align-content: start; min-width: 0; }
.proof__pace { font-weight: 700; font-stretch: 87%; font-size: var(--t-m); line-height: 1.25; }
.proof__src { color: var(--muted); }
/* Encart Club des Gourmands : filet épais, deux chiffres du brief, l'idée pour BREEZZ, puis le lien portfolio */
.proof__club { padding-top: 14px; border-top: 2px solid var(--encre); }
.proof__club-k { color: var(--encre-2); }
.proof__figs { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 30px; }
.proof__figs > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.proof__v { font-weight: 900; font-stretch: 62%; font-size: clamp(46px, 4.4vw, 68px); line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof__figs dd { margin: 0; font-weight: 700; font-stretch: 87%; font-size: 17px; line-height: 1.2; }
.proof__link { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
  .proof__reels {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto;
    column-gap: var(--goutt); row-gap: 0; overflow: visible; scroll-snap-type: none; padding: 0 var(--marge);
  }
  .proof__reel { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .proof__nav { display: none; }
}
/* Desktop : titre et chapeau sur la même ligne haute ; dessous, la phrase forte à gauche, l'encart à droite */
@media (min-width: 900px) {
  .proof__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: start; margin-bottom: 34px; }
  .proof__head .title { grid-column: 1 / span 6; }
  .proof__side { grid-column: 8 / -1; padding-top: .35em; }
  .proof__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: start; margin-top: 44px; }
  .proof__lead { grid-column: 1 / span 6; padding-top: 16px; }
  .proof__club { grid-column: 8 / -1; }
  .proof__pace { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.18; }
}

/* ================================================================ B05 8 Reels prêts à tourner */
.concepts__pin { position: relative; padding-block: var(--sec-y); overflow: clip; }
.concepts__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.concepts__head > * { min-width: 0; }
.concepts__title { margin: 0; font-size: clamp(44px, 11vw, 120px); }
.concepts__sub { margin: 0; max-width: 56ch; }
.concepts__note { margin: 8px 0 0; color: var(--muted); }
.h-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .h-fine { display: inline; } .h-touch { display: none; } }

/* Rail 01 → 08 : une ligne, une barre de progression, le titre du concept actif à côté du compteur */
.concepts__nav { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px 18px; }
.crail { grid-column: 1 / -1; min-width: 0; }
.crail__list { margin: 0; padding: 0; list-style: none; display: flex; }
.crail__a {
  display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; color: var(--muted);
  font-weight: 900; font-stretch: 62%; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums;
}
.crail__a[aria-current="true"] { color: var(--fg); }
@media (hover: hover) { .crail__a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; } }
.crail__bar { position: relative; display: block; width: calc(44px * 8); max-width: 100%; height: 3px; background: var(--line); }
.crail__fill { position: absolute; inset: 0; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--cp, .125)); }
.concepts__now { display: flex; align-items: baseline; gap: 12px; margin: 0; min-width: 0; }
.concepts__count { flex: none; }
.concepts__ttl { font-weight: 700; font-stretch: 87%; font-size: 18px; line-height: 1.2; min-width: 0; }
.concepts__hint { margin: 0; justify-self: end; color: var(--muted); white-space: nowrap; }
@media (max-width: 599px) {
  /* Téléphone : « Glissez → » juste sous le rail 01–08 (comme sur la pellicule de l'accueil) ;
     le titre actif garde deux lignes réservées */
  .concepts__hint { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-top: -2px; }
  .concepts__now { grid-column: 1 / -1; grid-row: 3; min-height: 46px; }
}

.concepts__track {
  display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  padding: 4px var(--marge) 18px; scrollbar-width: thin;
}
.concepts__track:focus-visible { outline-offset: -3px; }
/* Téléphone : carte calée sur la marge, ~12 % de la suivante visible (on comprend qu'il faut glisser) */
/* Téléphone : pas de cadre autour de la carte ; la maquette 9:16 porte la carte (un seul encadrement) */
.concept {
  flex: 0 0 min(82vw, 440px); scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; padding: 0;
  border: 0; background: none; color: var(--fg);
}
@media (min-width: 768px) {
  .concept { padding: 12px; border: 1px solid var(--encre); background: var(--bg); }
  .concepts:not(.is-pinned) .concept[data-card-lut="peche"] { --bg: var(--bz-peche); --fg: var(--encre); --muted: var(--encre-2); }
  .concepts:not(.is-pinned) .concept[data-card-lut="noir"]  { --bg: var(--bz-noir);  --fg: var(--pellicule); --muted: var(--cendre); --focus: var(--neon); }
  .concepts:not(.is-pinned) .concept[data-card-lut="ciel"]  { --bg: var(--bz-papier); --fg: var(--encre); --muted: var(--encre-2); }
}

.concept__screen {
  --scr-h: min(56svh, calc(min(82vw, 440px) * 16 / 9 - 40px));
  position: relative; align-self: flex-start;
  height: var(--scr-h); aspect-ratio: 9 / 16; max-width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 50px 12px 12px; overflow: hidden; isolation: isolate;
  border: 2px solid var(--encre);
}
.concept__screen > * { position: relative; z-index: 1; margin: 0; }
@media (max-width: 767px) {
  /* Téléphone : l'écran garde la largeur 9:16 mais peut grandir en hauteur si son contenu ne tient pas
     (concept 06 à 390 px, 05 / 06 / 08 à 360 px : la bulle et le 3e plan étaient coupés par overflow: hidden). */
  .concept__screen { height: auto; min-height: var(--scr-h); aspect-ratio: auto; width: min(100%, calc(var(--scr-h) * 9 / 16)); }
}
.concept__tag { position: absolute !important; top: 14px; left: 12px; z-index: 6 !important; }
.concept__hook { font-weight: 900; font-stretch: 62%; font-size: calc(var(--scr-h) * .074); line-height: .94; text-wrap: balance; margin-block: auto; }
.concept__screen--day .concept__hook { margin-block: 0 auto; font-size: calc(var(--scr-h) * .08); }
@media (max-width: 480px) { .concept__screen--day .concept__hook { font-size: calc(var(--scr-h) * .064); } }
.concept__screen--photo .concept__hook { margin-block: auto 0; }
.concept__screen--label .concept__hook { margin-block: auto 10px; }
.concept__screen .sb { gap: 6px; }
.concept__screen .sb__f { aspect-ratio: 9 / 14; padding: 6px 5px; }
.concept__screen .sb__t { font-size: 12px; }
.concept__bulle { align-self: flex-start; font-size: 15px; padding: 9px 13px 10px; max-width: 92%; }
.concept__bulle::after { left: 14px; }
@media (max-width: 480px) {
  /* Storyboard en liste compacte : cadrage + timecode à gauche, action à droite (12 px minimum) */
  .sb { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .concept__screen .sb { gap: 3px; }
  .sb__f, .concept__screen .sb__f { aspect-ratio: auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 8px; padding: 5px 7px; }
  .sb__k, .sb__tc { grid-column: 1; font-size: 12px; letter-spacing: .04em; }
  .sb__t, .concept__screen .sb__t { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; font-size: 13px; }
}

.concept__half { position: absolute !important; z-index: 0 !important; }
/* Concept 02 : « 18 H. BOOST, 150 MG. » suit le flux (juste au-dessus du storyboard) et porte lui-même la moitié
   noire (::before, 12 px au-dessus du texte jusqu'au bas de l'écran). Avant (tour 5), il était en absolu à 44 % et le
   storyboard le recouvrait : 18 px à 1440, 32 px à 1280, entièrement sur téléphone. */
.concept__half--noir { display: none; }
.concept__screen--day .concept__hook--night { margin-block: 0; color: var(--pellicule); }
.concept__screen--day .concept__hook--night::before {
  content: ""; position: absolute; z-index: -1; top: -12px; bottom: -200vh; left: -100vw; right: -100vw; background: var(--bz-noir);
}
.concept__half--framboise { top: 0; bottom: 0; right: 0; width: 50%; background: var(--bz-framboise); }
.concept__screen--photo { color: var(--pellicule); background: var(--bz-noir); }
.concept__photo { position: absolute !important; inset: 0 0 42% 0; z-index: 0 !important; display: block; }
.concept__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.concept__pave { background: var(--nuit); color: var(--pellicule); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .14em; }
.concept__topo { position: absolute !important; inset: 0; z-index: 0 !important; width: 100%; height: 100%; }
.concept__topo path { fill: none; stroke: var(--encre); stroke-width: 1.4; opacity: .12; }
.concept__label { list-style: none; padding: 0; display: grid; }
.concept__label li { border-top: 2px solid var(--encre); padding: 2px 0 3px; font-weight: 900; font-stretch: 62%; font-size: calc(var(--scr-h) * .056); line-height: 1; }
.concept__label li:last-child { border-bottom: 2px solid var(--encre); }

/* --- Concept 01 : écran partagé interactif. Les mots occupent chacun leur moitié ; les boutons ont leur
       bande pleine en bas de l'écran (rien ne peut passer derrière). --sp est posé sur l'écran. */
.concept__screen--vs { padding: 0; background: var(--encre); transition: --sp var(--d-whip) var(--ease-inout); }
.vs__split { position: absolute !important; inset: 0 0 60px 0; z-index: 0 !important; overflow: hidden; container-type: size; }
html:not(.js):not(.rp) .vs__split { bottom: 0; }
.vs__layer { position: absolute; inset: 0; }
.vs__layer--cafe { background: var(--encre); color: var(--bz-ciel); }
.vs__layer--breezz { background: var(--bz-peche); color: var(--encre); clip-path: inset(calc(var(--sp) * 1%) 0 0 0); }
.vs__word {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center;
  font-weight: 900; font-stretch: 62%; font-size: min(36cqw, 17cqh); line-height: .86; white-space: nowrap;
}
.vs__word--cafe { bottom: calc((100 - var(--sp)) * 1% + max(8cqh, 34px)); }
.vs__word--breezz { top: calc(var(--sp) * 1% + max(8cqh, 40px)); font-size: min(30cqw, 17cqh); }
/* Les trois infos sont toujours là, sous BREEZZ ? ; pendant l'aller-retour, une seule est « allumée » */
.vs__info {
  position: absolute; left: 12px; right: 12px; top: calc(var(--sp) * 1% + max(8cqh, 40px) + 17cqh); margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.vs__info span {
  display: inline-block; padding: 3px 9px 2px; border: 1px solid var(--encre); background: var(--encre); color: var(--bz-peche);
  font-weight: 700; font-stretch: 87%; font-size: max(14px, 5cqw); line-height: 1.3;
  transition: background-color var(--d-ui) linear, color var(--d-ui) linear;
}
.vs__split[data-i] .vs__info span { background: transparent; color: var(--encre); }
.vs__split[data-i="0"] .vs__info span:nth-child(1),
.vs__split[data-i="1"] .vs__info span:nth-child(2),
.vs__split[data-i="2"] .vs__info span:nth-child(3) { background: var(--encre); color: var(--bz-peche); }
/* Écran court (fenêtre réduite de la WebView Instagram) : une seule info à la fois, jamais sur la bande des boutons */
@container (max-height: 420px) {
  .vs__info span { display: none; }
  .vs__split:not([data-i]) .vs__info span:nth-child(1),
  .vs__split[data-i="0"] .vs__info span:nth-child(1),
  .vs__split[data-i="1"] .vs__info span:nth-child(2),
  .vs__split[data-i="2"] .vs__info span:nth-child(3) { display: inline-block; }
}
.vs__bulle {
  position: absolute; left: 50%; top: calc(var(--sp) * 1%); z-index: 2; margin: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, 5.6cqw, 20px); text-align: left; width: max-content; max-width: 84%; white-space: normal;
}
.vs__sides {
  position: absolute !important; left: 0; right: 0; bottom: 0; height: 60px; z-index: 3 !important;
  display: flex; justify-content: center; align-items: center; gap: 6px; padding-inline: 10px;
  background: var(--encre); border-top: 1px solid rgba(237, 234, 227, .22);
}
.vs__side {
  min-height: 44px; padding: 0 12px; flex: 0 1 auto;
  background: var(--nuit); color: var(--pellicule); border: 1px solid var(--pellicule);
  font-weight: 600; font-stretch: 75%; font-size: 13px; letter-spacing: .06em;
}
.vs__side[aria-pressed="true"] { background: var(--pellicule); color: var(--nuit); }
.vs__side:focus-visible { outline-color: var(--bz-turquoise); }
.vs__cap { position: absolute !important; top: 52px; left: 10px; right: 10px; z-index: 3 !important; display: grid; gap: 3px; justify-items: start; pointer-events: none; }
.vs__split:not([data-team=""]) ~ .vs__cap { visibility: hidden; }
/* Camp choisi : la question finale prend la place de la bulle, sur la ligne de partage */
.vs__end {
  display: none; position: absolute !important; left: 50%; z-index: 4 !important;
  top: calc((100% - 60px) * var(--sp) / 100); transform: translate(-50%, -50%);
  font-size: 15px; width: max-content; max-width: calc(100% - 40px);
}
.vs__split:not([data-team=""]) ~ .vs__end { display: block; }
.vs__split:not([data-team=""]) .vs__bulle { visibility: hidden; }

/* --- Concept 05 : boucle plein cadre, le compte à rebours EST l'image */
.concept__screen--chrono .concept__hook { margin-block: 0; }
.chrono {
  position: relative; margin-block: auto !important; align-self: center;
  display: flex; align-items: flex-start; gap: .04em;
  font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--encre);
}
.chrono__n { font-size: calc(var(--scr-h) * .4); font-variant-numeric: tabular-nums; min-width: 1.06em; text-align: right; }
.chrono__u { font-size: calc(var(--scr-h) * .1); padding-top: .1em; }
.chrono__loop { position: absolute; left: 0; right: 0; bottom: -12px; height: 4px; background: rgba(11, 12, 14, .2); }
.chrono__fill { position: absolute; inset: 0; background: var(--encre); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); transition: transform 1s linear; }
.chrono.is-wrap .chrono__fill { transition: none; }

/* --- Concept 06 : la carte (positions réelles, à vol d'oiseau) */
.concept__screen--map .concept__hook { margin-block: auto 0; }
.cmap { display: block; width: 100%; height: auto; margin-block: 4px auto !important; overflow: visible; }
.cmap__dash { fill: none; stroke: var(--encre); stroke-width: 1.4; stroke-dasharray: 4 4; }
.cmap__spot { fill: var(--bz-peche); stroke: var(--encre); stroke-width: 2; }
.cmap__hq { fill: var(--bz-turquoise); stroke: var(--encre); stroke-width: 2; }
.cmap__ask { fill: var(--blanc); stroke: var(--encre); stroke-width: 1.4; stroke-dasharray: 3 3; }
.cmap__q { font-family: var(--font); font-weight: 900; font-size: 16px; fill: var(--encre); }
.cmap__t { font-family: var(--font); font-weight: 700; font-stretch: 75%; font-size: 13.5px; letter-spacing: .05em; fill: var(--encre); }
.cmap__t--note { font-size: 12px; fill: var(--encre-2); letter-spacing: .06em; }

/* --- Animatic (concepts 03 et 04) : trois plans en coupe franche, le texte d'écran et le cadrage.
       Sans JS / mouvement réduit / lecture auto OFF : écran fixe ci-dessus (storyboard texte). */
.anim { position: absolute !important; inset: 0; z-index: 5 !important; visibility: hidden; }
.concept__screen.is-anim .anim { visibility: visible; }
.anim__f {
  position: absolute; inset: 0; isolation: isolate; visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 56px 14px 92px; background: var(--bz-noir); color: var(--pellicule);
}
.concept__screen.is-anim[data-f="1"] .anim__f--1,
.concept__screen.is-anim[data-f="2"] .anim__f--2,
.concept__screen.is-anim[data-f="3"] .anim__f--3 { visibility: visible; }
.anim__f > * { margin: 0; }
.anim__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.anim__big { font-weight: 900; font-stretch: 62%; font-size: calc(var(--scr-h, 520px) * .095); line-height: .9; text-wrap: balance; }
.anim__big--2 { color: var(--neon); }
.anim__ref { position: absolute; top: 46px; right: 10px; padding: 3px 6px 2px; background: var(--nuit); color: var(--pellicule); font-size: 12px; }
.anim__bulle { align-self: flex-start; margin-top: auto !important; font-size: 15px; max-width: 92%; }
.anim__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 3px; justify-items: start; }
.anim__k { padding: 3px 6px 2px; background: var(--neon); color: var(--nuit); font-size: 12px; }
.anim__t { padding: 3px 7px 4px; background: var(--nuit); color: var(--pellicule); font-weight: 600; font-stretch: 87%; font-size: 14px; line-height: 1.3; }
.anim__bars { position: absolute; top: 6px; left: 10px; right: 10px; z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.anim__bars li { height: 3px; background: rgba(237, 234, 227, .35); }
.concept__screen[data-f="1"] .anim__bars li:nth-child(-n+1),
.concept__screen[data-f="2"] .anim__bars li:nth-child(-n+2),
.concept__screen[data-f="3"] .anim__bars li { background: var(--pellicule); }
.anim__f--duo { background: var(--bz-peche); color: var(--encre); }
.anim__f--duo::before { content: ""; position: absolute; inset: 0 0 0 50%; z-index: -1; background: var(--bz-framboise); }
.anim__f--duo .anim__big { background: var(--blanc); padding: 6px 10px 8px; align-self: flex-start; max-width: 92%; }
.anim__side { position: absolute; top: 40%; width: 50%; padding: 0 8px; text-align: center; font-weight: 900; font-stretch: 62%; font-size: calc(var(--scr-h, 520px) * .058); line-height: .92; overflow-wrap: normal; }
.anim__side--l { left: 0; }
.anim__side--r { right: 0; }
.concept__screen--blind .anim__bars li { background: rgba(11, 12, 14, .25); }
.concept__screen--blind[data-f="1"] .anim__bars li:nth-child(-n+1),
.concept__screen--blind[data-f="2"] .anim__bars li:nth-child(-n+2),
.concept__screen--blind[data-f="3"] .anim__bars li { background: var(--encre); }

/* --- Panneau de la carte */
.concept__panel { display: grid; gap: 10px; align-content: start; padding: 18px 4px 4px; }
.concept__panel > * { margin: 0; }
.concept__num {
  display: block; font-weight: 900; font-stretch: 62%; font-size: 56px; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--fg);
}
.concept__title { font-weight: 900; font-stretch: 62%; font-size: clamp(28px, 2.3vw, 36px); line-height: .95; text-wrap: balance; }
.concept__panel .k { margin: 4px 0 0; }
.concept__why { font-size: 16px; line-height: 1.5; }
.concept__sheet { justify-self: start; margin-top: 2px; }
.js .plan, .rp .plan { display: none; }
.plan { border-top: 1px solid currentColor; padding-top: 12px; }

/* Fiche « Plan de tournage » (aussi dans le bottom sheet) */
.plan__title { margin: 0 0 14px; font-weight: 900; font-stretch: 62%; font-size: var(--t-l); line-height: .95; padding-right: 48px; }
.plan__dl { margin: 0; display: grid; gap: 14px; }
.plan__row { display: grid; gap: 4px; }
.plan__row dt { color: var(--muted); }
.plan__row dd { margin: 0; }
.plan__steps { list-style: decimal; padding-left: 1.3em; display: grid; gap: 6px; }
.plan__note { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--encre); }
.sheet .plan__row--s { grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; }

/* Pellicule épinglée (desktop, pointeur fin, mouvement) */
.concepts.is-pinned .concepts__pin {
  height: 100vh; height: 100svh; padding: calc(var(--topbar-h) + 12px) 0 16px;
  display: flex; flex-direction: column;
  --scr-h: min(62svh, calc(100svh - 336px));
  --card-w: calc(var(--scr-h) * 9 / 16 + 28px + 360px);
}
.concepts.is-pinned .concepts__head { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; column-gap: 40px; row-gap: 12px; margin-bottom: 12px; }
.concepts.is-pinned .concepts__title { font-size: clamp(52px, 5.4vw, 92px); grid-column: 1; }
.concepts.is-pinned .concepts__meta { grid-column: 2; align-self: end; justify-self: end; max-width: 52ch; }
.concepts.is-pinned .concepts__sub { font-size: 16px; max-width: 52ch; }
.concepts.is-pinned .concepts__nav { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 28px; }
.concepts.is-pinned .crail { grid-column: auto; }
.concepts.is-pinned .concepts__ttl { font-size: 20px; }
/* Carte active calée sur la marge gauche (sous le titre). La barre 01–08 sert de tête de lecture (plus de filet
   vertical sous la carte). Fondu limité aux 60 derniers pixels : il ne coupe plus de texte. */
.concepts.is-pinned .concepts__viewport {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
}
.concepts.is-pinned .concepts__track {
  flex: 1; min-height: 0; overflow: visible; scroll-snap-type: none;
  gap: 64px; align-items: center; width: max-content;
  padding: 0 var(--marge);
  position: relative; z-index: 1; will-change: transform;
}
.concepts.is-pinned .concept {
  flex: 0 0 auto; flex-direction: row; align-items: flex-end; gap: 28px; width: var(--card-w);
  padding: 0; border: 0; background: none; color: inherit;
  transform: scale(.92); transform-origin: 50% 100%; transition: transform 240ms var(--ease-out);
}
.concepts.is-pinned .concept.is-active { transform: none; }
.concepts.is-pinned .concept__screen { --scr-h: inherit; height: var(--scr-h); flex: none; align-self: auto; transition: opacity 240ms linear; }
.concepts.is-pinned .concept__panel { width: 360px; flex: none; padding: 0 0 2px; gap: 8px; transition: opacity 240ms linear; }
/* Cartes voisines : seule la maquette 9:16 se devine (aperçu voulu) ; leur texte n'apparaît qu'une fois la carte
   active (ou au focus clavier, qui la rend active), jamais coupé par le bord de l'écran. */
.concepts.is-pinned .concept:not(.is-active) .concept__panel { opacity: 0; }
.concepts.is-pinned .concept:not(.is-active) .concept__screen { opacity: .55; }
.concepts.is-pinned .concept:not(.is-active) .concept__panel:focus-within { opacity: 1; }
.concepts.is-pinned .concept__num { display: none; }
.concepts.is-pinned .concept__why { font-size: 15px; line-height: 1.45; }
.concepts.is-pinned .concept__sheet { min-height: 44px; }
/* Écrans d'ordinateur bas (1280×720, 1366×768, 1280×800) : la maquette fait < 500 px de haut, le storyboard en
   3 vignettes n'y tient plus (textes coupés, bulle rognée). On le retire de la maquette : il reste en entier dans
   « Plan de tournage » (hook, déroulé, durée), et la maquette montre ce qu'on verrait à l'écran : texte + question. */
@media (min-width: 768px) and (max-height: 835px) {
  .concept__screen .sb { display: none; }
}


@media (min-width: 768px) {
  .concepts__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .concepts__title, .concepts__nav { grid-column: 1 / -1; }
  .concepts__nav { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; }
  .crail { grid-column: auto; }
}

/* ================================================================ B07 Le premier mois : une frise J1 → J30 (pas de cases à cocher)
   Téléphone : frise verticale. Desktop : la règle J1 → J30, puis les semaines en escalier, largeur = nombre de jours. */
.month { --line: var(--filet-clair); }
.month__head .title { margin: 0 0 12px; }
.month__sub { margin: 0; max-width: 52ch; font-weight: 700; font-stretch: 87%; font-size: var(--t-m); line-height: 1.25; }
.frise { margin-top: 28px; }
.ruler { display: none; }
.frise__weeks { margin: 0; padding: 0; list-style: none; display: grid; }
.frise__w { position: relative; min-width: 0; padding: 0 0 16px 24px; border-left: 2px solid var(--encre); }
.frise__w:last-child { padding-bottom: 2px; }
.frise__w::before { content: ""; position: absolute; left: -9px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--bz-turquoise); border: 2px solid var(--encre); }
.frise__w > * { margin: 0; }
.frise__days { color: var(--muted); }
.frise__w > .frise__t { margin: 3px 0 8px; font-weight: 900; font-stretch: 62%; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; text-wrap: balance; }
.frise__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 12px; min-height: 44px; }
.frise__sum::-webkit-details-marker { display: none; }
.frise__sum::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; background: var(--encre); color: var(--bz-papier); font-weight: 700; font-size: 18px; }
.frise__d[open] > .frise__sum::after { content: "−"; }
.frise__sum > .frise__t { margin: 2px 0 0; font-weight: 900; font-stretch: 62%; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; text-wrap: balance; }
.frise__d[open] > .frise__list { margin-top: 8px; }
.frise__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.frise__list li { position: relative; padding-left: 1.3em; font-size: 16px; line-height: 1.45; }
.frise__list li::before { content: "—"; position: absolute; left: 0; }

.month__foot { display: grid; gap: 22px; margin-top: 34px; }
.month__rhythm { margin: 0; max-width: 46ch; font-weight: 700; font-stretch: 87%; font-size: var(--t-m); line-height: 1.3; }
.month__rhythm .hud { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.month__more { border-bottom: 1px solid var(--line); }
.month__more .rdv { padding: 8px 0 22px; display: grid; gap: 24px; }

/* Semaine type (dans le repli) */
.wk { margin: 0; padding: 0; list-style: none; display: grid; }
.wk__day, .wk__rest {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 0; border-top: 1px solid var(--encre);
}
.wk__rest { grid-template-columns: auto minmax(0, 1fr); border-bottom: 1px solid var(--encre); }
.wk__d { grid-column: 1; }
.wk__slot { grid-column: 2; display: grid; gap: 1px; padding: 6px 10px 7px; border: 1px solid var(--encre); min-width: 0; }
.wk__slot--reel { background: var(--bz-turquoise); }
.wk__slot--carousel { background: var(--bz-peche); }
.wk__kind { font-size: 12px; }
.wk__name { font-weight: 700; font-stretch: 87%; font-size: 15px; line-height: 1.25; }
.wk__only { color: var(--muted); font-size: 12px; }
.wk__restt { color: var(--muted); font-weight: 600; font-stretch: 87%; }
.wk__story { position: absolute; left: 0; bottom: 4px; width: 34px; height: 4px; background: var(--bz-framboise); }
.wk__rest .wk__story { display: none; }
@media (max-width: 899px) { .wk__day--free { display: none; } }
.series__list { margin: 0; padding: 0; list-style: none; }
.series__row { display: grid; gap: 4px; padding: 14px 0 16px; border-top: 1px solid var(--filet-clair); }
.series__row > * { margin: 0; }
.series__name { font-weight: 900; font-stretch: 62%; font-size: clamp(24px, 2vw, 30px); line-height: 1; }
.series__rhythm { color: var(--muted); }
.series__idea { max-width: 58ch; }

/* Ce dont j'ai besoin de vous : encadré court, sans montant */
.needs { padding: 12px 16px 14px; border: 2px solid var(--encre); background: var(--bz-ciel); display: grid; gap: 10px; min-width: 0; }
.needs__t { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; }
.needs__d { display: grid; gap: 10px; }
.needs__d:not([open]) { gap: 0; }
.needs__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 12px; min-height: 44px; }
.needs__sum::-webkit-details-marker { display: none; }
.needs__sum::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; background: var(--encre); color: var(--bz-ciel); font-weight: 700; font-size: 18px; }
.needs__d[open] > .needs__sum::after { content: "−"; }
.needs__d > * + * { margin-top: 0; }
.needs__list { margin: 0; padding: 0; list-style: none; display: grid; }
.needs__list li { position: relative; padding: 7px 0 7px 1.4em; border-top: 1px solid var(--filet-clair); font-size: 16px; line-height: 1.4; }
.needs__list li::before { content: "→"; position: absolute; left: 0; }
.needs__me { margin: 6px 0 0; font-weight: 700; font-stretch: 87%; font-size: 18px; line-height: 1.25; }

@media (min-width: 900px) {
  .frise { margin-top: 26px; }
  .ruler { display: block; }
  .ruler__inner { position: relative; height: 40px; }
  .ruler__inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--encre); }
  .ruler__t { position: absolute; bottom: 0; left: calc(var(--d) / 30 * 100%); width: 1px; height: 8px; background: var(--encre); }
  .ruler__t--m { width: 2px; height: 20px; margin-left: -1px; }
  .ruler__t i { position: absolute; bottom: 24px; left: 0; transform: translateX(-50%); font-style: normal; font-weight: 600; font-stretch: 75%; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
  .ruler__t:first-child { margin-left: 0; }
  .ruler__t:first-child i { transform: none; }
  .ruler__t:last-child { margin-left: -2px; }
  .ruler__t:last-child i { left: auto; right: 0; transform: none; }
  .ruler__head { display: none; }
  .month.is-scrub .ruler__head { display: block; position: absolute; bottom: -10px; height: 34px; left: 0; width: 3px; margin-left: -1px; background: var(--bz-framboise); will-change: transform; }
  .frise__weeks { grid-template-columns: 7fr 7fr 7fr 9fr; align-items: start; }
  .frise__w { padding: 18px 22px 0 16px; }
  .frise__w::before { display: none; }
  .frise__w[data-week="2"] { margin-top: 26px; }
  .frise__w[data-week="3"] { margin-top: 52px; }
  .frise__w[data-week="4"] { margin-top: 78px; }
  .frise__days { display: inline-block; padding: 3px 8px 2px; border: 1px solid var(--encre); background: var(--bz-ciel); color: var(--encre); }
  .month.is-scrub .frise__w.is-on .frise__days { background: var(--bz-turquoise); }
  .month.is-scrub .frise__w.is-on { border-left-color: var(--bz-framboise); }
  .frise__sum { cursor: default; display: block; min-height: 0; margin-top: 12px; }
  .frise__sum::after { display: none; }
  .frise__d[open] > .frise__list { margin-top: 10px; }
  .frise__list li { font-size: 15px; line-height: 1.42; }
  .month__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); row-gap: 28px; margin-top: 54px; align-items: start; }
  .month__rhythm { grid-column: 1 / span 6; }
  .needs { grid-column: 8 / -1; grid-row: 1; padding: 22px 24px 24px; }
  .needs__sum { cursor: default; display: block; min-height: 0; }
  .needs__sum::after { display: none; }
  .month__more { grid-column: 1 / -1; }
  .wk { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wk__rest { display: none; }
  .wk__day, .wk__day:last-child { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; min-height: 140px; padding: 18px 10px 10px; border: 1px solid var(--encre); margin: 0 -1px 0 0; gap: 8px; }
  .wk__d, .wk__slot { grid-column: 1; }
  .wk__name { font-size: 14px; }
  .wk__slot .wk__name + .wk__name { border-top: 1px solid rgba(11, 12, 14, .3); padding-top: 3px; margin-top: 2px; }
  .wk__story { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; }
  .series__row { grid-template-columns: 4fr 2fr 6fr; column-gap: var(--goutt); align-items: baseline; }
}

/* ================================================================ B08 Faire parler */
.talk { --line: var(--encre); }
.talk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ugc { margin: 0; display: grid; gap: 12px; justify-items: start; }
/* Carte #MonBreezz : un exemple rempli, valeurs fictives annoncées comme telles ; la courbe tient ~40 % de la hauteur */
.ugc__card {
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 5;
  background: var(--encre); color: var(--bz-ciel); padding: 20px 20px 18px;
}
.ugc__inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.ugc__inner > * { margin: 0; }
.ugc__ex { color: var(--bz-turquoise); font-size: 12px; }
.ugc__trace { flex: 1 1 auto; min-height: 0; width: 100%; max-height: 40%; }
.ugc__trace polyline { fill: none; stroke: var(--bz-turquoise); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--draw, 0); }
.ugc__trace circle { fill: var(--bz-turquoise); }
.ugc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ugc__f { font-weight: 900; font-stretch: 62%; font-size: clamp(32px, 9vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(221, 243, 241, .28); padding-top: 8px; }
.ugc__f--range { font-size: clamp(22px, 6vw, 30px); }
.ugc__val { display: inline-block; border-bottom: 3px solid transparent; }
/* Animation (mouvement autorisé, ≥ 768 px) : la carte se remplit quand la courbe est tracée ; sans JS, elle est déjà
   remplie. Téléphone : valeurs toujours affichées (étiquette « exemple rempli »), seule la courbe se trace. */
@media (min-width: 768px) {
  .bz-ugc-anim .ugc__card:not(.is-filled) .ugc__val { color: transparent; border-bottom-color: var(--bz-turquoise); }
}
.ugc__tagline { font-weight: 800; font-stretch: 100%; font-size: var(--t-m); color: var(--bz-turquoise); }
.ugc__concept { position: absolute; right: 14px; bottom: 18px; }
.ugc__cap { max-width: 40ch; margin: 0; }
.talk__kicker { margin: 0 0 12px; max-width: 40ch; font-weight: 700; font-stretch: 87%; font-size: 17px; line-height: 1.3; }
.talk__body .title { margin: 0 0 22px; }
.ideas { margin: 0; padding: 0; list-style: none; }
.idea { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--encre); }
.idea__n { padding-top: 4px; }
.idea__t { margin: 0; max-width: 58ch; }
.ideas__more .tmore { border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre); }
.ideas--more .idea:first-child { border-top: 1px solid var(--encre); }
@media (min-width: 900px) {
  .talk__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: start; }
  .ugc { grid-column: 1 / span 5; position: sticky; top: calc(var(--topbar-h) + 32px); }
  .ugc__card { max-width: 440px; padding: 26px 26px 22px; }
  .ugc__f { font-size: clamp(40px, 3.4vw, 54px); }
  .ugc__f--range { font-size: clamp(26px, 2.2vw, 32px); }
  .talk__body { grid-column: 7 / -1; }
}

/* ================================================================ B09 Objectifs : ce que je tiens, puis ce qu'on mesure (replié) */
.goals__grid { display: grid; gap: 36px; }
.goals__intro { display: grid; gap: 22px; align-content: start; min-width: 0; }
.goals__title { margin: 0; }
.goals__promise { display: grid; gap: 12px; }
.goals__strike { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(44px, 4.6vw, 76px); line-height: .92; }
.goals__strike s { text-decoration: none; }
.strike__ln { position: relative; display: inline-block; }
.strike__svg { position: absolute; left: -2%; width: 104%; top: calc(50% - 12px); height: 24px; overflow: visible; pointer-events: none; }
.strike__svg path { fill: none; stroke: var(--bz-framboise); stroke-width: 6.6; stroke-linecap: butt; }
.goals__lines { display: inline; }
.goals__refuse { margin: 2px 0 0; font-size: var(--t-l); line-height: 1.05; }
.goals__real { margin: 0; max-width: 34ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .goals__strike:not(.is-struck) ~ .goals__refuse,
  .js .goals__strike:not(.is-struck) ~ .goals__real { visibility: hidden; }
}
.goals__commit { display: grid; gap: 14px; align-content: start; min-width: 0; }
.goals__k { margin: 0; font-weight: 900; font-stretch: 62%; font-size: var(--t-l); line-height: .95; }
.commit { margin: 0; padding: 0; list-style: none; display: grid; }
.commit__i { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-top: 2px solid var(--encre); }
.commit__v { font-weight: 900; font-stretch: 62%; font-size: clamp(30px, 3vw, 44px); line-height: .9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.commit__t { font-size: 16px; line-height: 1.4; }
.goals__kpi { border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet-clair); }
.kpi__t { width: 100%; margin: 4px 0 16px; border-collapse: collapse; font-size: 15px; line-height: 1.35; }
.kpi__t th, .kpi__t td { text-align: left; vertical-align: baseline; padding: 9px 10px 9px 0; border-top: 1px solid var(--filet-clair); }
.kpi__t thead th { border-top: 0; padding-top: 0; color: var(--muted); font-weight: 600; font-stretch: 75%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.kpi__t tbody th { font-weight: 600; }
.kpi__v { font-weight: 900; font-stretch: 62%; font-size: 22px; line-height: 1; white-space: nowrap; }
.kpi__v--t { font-weight: 600; font-stretch: 87%; font-size: 14px; line-height: 1.3; color: var(--muted); }
.kpi__s { color: var(--muted); font-size: 14px; padding-right: 0 !important; }
@media (max-width: 480px) {
  .commit__i { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .kpi__t, .kpi__t tbody, .kpi__t tr { display: block; }
  .kpi__t thead { display: none; }
  .kpi__t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--filet-clair); }
  .kpi__t th, .kpi__t td { padding: 0; border: 0; }
  .kpi__t tbody th { grid-column: 1; }
  .kpi__v { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .kpi__s { grid-column: 1; }
}
@media (min-width: 900px) {
  .goals__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: start; }
  .goals__intro { grid-column: 1 / span 5; }
  .goals__commit { grid-column: 7 / -1; padding-top: 6px; }
  .commit__i { grid-template-columns: 9rem minmax(0, 1fr); }
  .commit__t { font-size: 17px; }
}

/* ================================================================ B10 BOOST : devant la caméra, visage compris (bichromie noir / turquoise) */
.boost { overflow: clip; padding-top: calc(var(--sec-y) * .6); }
.boost__word { margin: 0 var(--marge) 24px; color: var(--pellicule); white-space: nowrap; line-height: .78; }
.boost__w { display: inline-block; }
.boost__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.boost__text .title { margin: 0 0 20px; }
.roles { margin: 0 0 22px; padding: 0; list-style: none; }
.role { padding: 14px 0; border-top: 1px solid var(--filet-nuit); }
.role p { margin: 0; max-width: 56ch; }
.role strong { color: var(--pellicule); }
.boost__roles { margin: 0 0 22px; border-top: 1px solid var(--filet-nuit); border-bottom: 1px solid var(--filet-nuit); }
.boost__roles .roles { margin: 0 0 4px; }
.role--more { padding: 0; }
.role--more .tmore { border-top: 0; }
.roles--more { margin: 0 0 6px; }
.boost__option { margin: 0 0 10px; color: var(--pellicule); }
.boost__outfit { margin: 0; color: var(--cendre); }
.boost__fig { margin: 0; width: 100%; }
.boost__photo { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bz-turquoise); color: var(--pellicule); }
.boost__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.boost__chrono { margin: 10px 0 0; max-width: 46ch; color: var(--pellicule); font-weight: 600; font-stretch: 87%; font-size: 15px; line-height: 1.35; }
.boost__chrono .rec { color: var(--neon); font-size: 12px; margin-right: 4px; vertical-align: 1px; }
@media (min-width: 600px) and (max-width: 899px) { .boost__fig { width: min(72%, 440px); } }
@media (min-width: 900px) { .boost__photo { aspect-ratio: 4 / 5; } }
@media (min-width: 900px) {
  .boost__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: start; }
  .boost__text { grid-column: 1 / span 6; grid-row: 1; padding-top: 12px; }
  .boost__roles { border: 0; }
  .boost__roles > .tmore__sum { display: none; }
  .boost__fig { grid-column: 8 / span 4; grid-row: 1; max-width: 460px; }
}

/* ================================================================ B12 On en parle ? : texte à gauche, dernier plan à droite (REC → J30 · FIN) */
.end { display: flex; align-items: center; }
@media (min-width: 900px) { html[data-page="breezz"] .end.sec--full { min-height: 0; padding-block: calc(var(--sec-y) * 1.15); } }
.end__grid { display: grid; gap: 22px; width: 100%; }
.end__main { display: grid; gap: 22px; min-width: 0; align-content: center; }
.end__kicker { margin: 0; max-width: 46ch; font-weight: 600; font-stretch: 87%; font-size: 17px; }
.end__title { margin: 0; display: grid; gap: 6px; }
.end__t { display: block; }
.end__accent { display: block; font-size: var(--t-xl); line-height: .95; }
.end__text { margin: 0; max-width: 52ch; font-size: var(--t-base); }
.end__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.end__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.end__email { font-weight: 700; font-stretch: 87%; font-size: var(--t-m); text-decoration-thickness: 1px; text-underline-offset: .16em; overflow-wrap: anywhere; }
.end__copy { min-height: 44px; padding: 0 16px; }
.end__dm { margin: 0; color: var(--muted); }
.end__last { margin: 0; color: var(--muted); }
/* Dernier plan : moi face caméra (image tirée de mon Reel), « Prochaine prise : à Courfaivre ? ».
   Téléphone : vignette réduite à gauche, la légende à côté ; desktop : colonne droite. */
.end__fig { margin: 0; display: grid; grid-template-columns: min(42%, 190px) minmax(0, 1fr); align-items: end; gap: 14px; }
.end__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nuit); color: var(--pellicule); }
.end__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.end__hud { position: absolute; top: 8px; z-index: 1; padding: 3px 6px 2px; background: var(--nuit); color: var(--pellicule); font-size: 12px; }
.end__hud--tl { left: 8px; }
.end__hud--tr { display: none; }
.end__hud .rec { color: var(--neon); }
.end__cap { margin: 0; color: var(--encre); font-size: 13px; letter-spacing: .04em; }
.end__fig .viseur { display: none; }
@media (min-width: 900px) {
  .end__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goutt); align-items: center; }
  .end__main { grid-column: 1 / span 7; }
  .end__fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; grid-column: 9 / -1; }
  .end__hud { top: 22px; padding: 4px 8px 3px; }
  .end__hud--tl { left: 22px; }
  .end__hud--tr { display: block; right: 22px; }
  .end__cap { font-size: var(--t-hud); letter-spacing: .08em; }
  .end__fig .viseur { display: block; }
}

/* ================================================================ Téléphone : page plus courte (lien ouvert depuis un DM)
   Rien n'est supprimé : les détails passent dans des replis (ouverts sur desktop et sans JS). */
@media (max-width: 767px) {
  .tldr__a { min-height: 44px; padding: 8px 0; font-size: 16px; }
  .proof__reel { flex-basis: 74vw; }
  .concept__num { font-size: 44px; -webkit-text-stroke-width: 1.2px; }
  /* Libellés de tournage lisibles sur iPhone : 13 px minimum, capitales condensées moins espacées */
  .ugc__ex, .sb__k, .sb__tc, .anim__k, .anim__ref, .pip__label, .cmap__t--note { font-size: 13px; letter-spacing: .02em; }
  .trailer__home { display: none; }
  .ref { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .ref__media { width: 96px; }
  .ref__txt { font-size: 14px; }
  .concept__panel { gap: 8px; padding: 14px 0 0; }
  .ugc__card { aspect-ratio: auto; }
  .ugc__inner { height: auto; }
  .ugc__trace { flex: none; height: 116px; max-height: none; }
  .ugc__concept { position: static; justify-self: start; align-self: flex-start; margin-top: 4px; }
  .frise__list li, .needs__list li { font-size: 15px; line-height: 1.42; }
  .diag__grid { gap: 26px; }
}

/* ================================================================ Dock CTA mobile (socle) : réglages de page
   Il n'apparaît qu'une fois les boutons du héros dépassés ; ensuite il reste là (version compacte en descendant). */
@media (max-width: 767px) {
  .cta-dock.bz-pre { transform: translateY(110%); }
  .cta-dock { padding-block: 6px calc(6px + var(--safe-b)); }
  .cta-dock .btn { min-height: 44px; }
}