/* À 2 mains — direction artistique « Rue des enseignes » (v3, 06/10/2026)
   La nuit tombe sur une rue commerçante. Chaque métier a sa couleur de néon,
   et tout se regarde dans un viseur de caméra qui verrouille ce qu'on survole. */

:root {
  --nuit: #2B1810;
  --bouteille: #C7271B;
  --creme: #FEF4DD;
  --creme-fonce: #FBE6BC;
  --encre: #2B1810;
  --or: #FFC529;
  --or-clair: #FFD65F;
  --rouge: #C7271B;

  /* Les enseignes : une couleur par métier */
  --braise: #FFC529;
  --rose: #FFC529;
  --bleu: #FFC529;
  --feuille: #FFC529;

  --font: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --titre: "Lilita One", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --mono: "Nunito", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(2.6rem, min(1.1rem + 6.2vw, 11.5vh), 6.4rem); /* plafonné par la hauteur d'écran : le hero tient sur un portable */
  --t-h2: clamp(2.1rem, 1.25rem + 3.4vw, 4.1rem);
  --t-h3: clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
  --t-chapo: clamp(1.05rem, .98rem + .4vw, 1.28rem);
  --t-mono: .75rem;

  --arrondi: 1.4rem;
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --max: 78rem;
  --entete: 4.25rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --doux: rgba(254, 244, 221, .78);
  --trait: rgba(254, 244, 221, .16);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--entete);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme);
  font: 400 1.0625rem/1.58 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}
.section--creme :focus-visible { outline-color: var(--encre); }

.evitement {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; background: var(--or); color: var(--encre); font-weight: 700;
}
.evitement:focus { top: 1rem; }

/* Souris précise : le viseur remplace le curseur natif (sauf dans les champs) */
.pointeur body, .pointeur a, .pointeur button, .pointeur summary, .pointeur label { cursor: none; }
.pointeur input:not([type="range"]), .pointeur textarea, .pointeur select { cursor: auto; }

/* ---------- Typographie ---------- */

h1, h2, .temps__titre, .livrables__titre {
  font-family: var(--titre); font-weight: 400;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2, .temps__titre { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
h1 em, h2 em, .temps__titre em { font-style: normal; color: var(--or); }
.insecable { white-space: nowrap; }

.chapo {
  font-size: var(--t-chapo);
  line-height: 1.5;
  max-width: 38em;
  color: var(--doux);
}

.etiquette, .num, .cadre__plan, .cadre__mention, .scene__credit, .scene__tc, .entete__tc, .hero__note, .scene__indice {
  font: 500 var(--t-mono)/1.3 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.etiquette { color: var(--or); }

/* Bouton pause des boucles (WCAG 2.2.2) : affiché par index.js quand les vidéos tournent */
.pause {
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; border: 1px solid var(--trait); border-radius: var(--arrondi); background: none; cursor: pointer;
  font: 500 var(--t-mono)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--doux);
  transition: border-color .25s, color .25s;
}
.pause::before { content: "❚❚"; font-size: .7em; letter-spacing: -.1em; }
.pause[aria-pressed="true"]::before { content: "▶"; }
.pause:hover { border-color: currentColor; color: var(--encre); }
.pause span:last-child, .pause[aria-pressed="true"] span:first-child { display: none; }
.pause[aria-pressed="true"] span:last-child { display: inline; }
html.est-en-pause .scene__indice i::after { animation: none; }

/* Le chapo qui s'allume mot à mot (voir index.js) */
.fx .mots .m { opacity: .3; transition: opacity .35s var(--ease); }
.fx .mots .m.est-allume { opacity: 1; }

/* ---------- Boutons : le remplissage part du point d'entrée de la souris ---------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .7rem 1.35rem;
  border: 2px solid var(--or); border-radius: var(--arrondi);
  background: var(--or); color: var(--encre);
  --fond: var(--encre); --texte: var(--creme);
  font-weight: 800; font-size: 1.02rem; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  transform: translate(var(--bx2, 0px), var(--by2, 0px));
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--bx, 50%); top: var(--by, 50%);
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fond);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.btn:hover, .btn:focus-visible { color: var(--texte); }
.btn:active { transition-duration: .1s; }
.btn svg { position: relative; z-index: 1; }

.btn--contour { background: transparent; color: inherit; border-color: currentColor; --fond: var(--creme); --texte: var(--encre); }
.btn--encre { background: var(--encre); border-color: var(--encre); color: var(--creme); --fond: var(--or); --texte: var(--encre); }
.btn--petit { min-height: 2.5rem; padding: .4rem .9rem; font-size: .92rem; }
.btn--large { width: 100%; min-height: 3.5rem; font-size: 1.1rem; }
.section--creme .btn--contour { --fond: var(--encre); --texte: var(--creme); }
.section--creme .btn--contour:hover, .section--creme .btn--contour:focus-visible { border-color: var(--encre); }

/* ---------- En-tête ---------- */

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--entete); padding: 0 var(--gouttiere);
  color: var(--creme);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.entete.est-pleine { background: rgba(43, 24, 16, .96); box-shadow: 0 1px 0 rgba(254, 244, 221, .12); }

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; white-space: nowrap;
}
.logo svg:first-child { transition: transform .6s var(--ease); }
.logo:hover svg:first-child { transform: scale(1.08) rotate(-4deg); }

.nav { display: flex; gap: clamp(.9rem, 2.2vw, 1.8rem); margin-left: auto; }
.nav a {
  position: relative; padding: .4rem 0; font-weight: 500; font-size: .98rem; text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--or), var(--or)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease), color .2s;
}
.nav a:hover, .nav a[aria-current="true"] { background-size: 100% 2px; }
.nav a[aria-current="true"] { color: var(--or); }
.entete__menu { display: none; }

.entete__tc {
  display: flex; align-items: center; gap: .45rem; margin: 0;
  color: rgba(254, 244, 221, .6); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .4s var(--ease);
}
.entete.est-pleine .entete__tc { opacity: 1; }
.rec { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rouge); flex: none; }

/* ---------- La scène : film collant, trois temps qui passent devant ---------- */

.scene { position: relative; background: var(--nuit); --h: 0; --p: 0; --e: 0; }
.scene__cadre {
  position: absolute; inset: 0;
  transform: scale(calc(1 + var(--p) * .06 + var(--e) * .6));
  transform-origin: 62% 46%;
  will-change: transform;
}
/* L'iris se referme sur la vitrine pendant l'entrée */
.scene__iris {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(52% 48% at 62% 46%, transparent 28%, rgba(43, 24, 16, .55) 52%, rgba(43, 24, 16, .99) 74%);
  opacity: var(--e);
}
.scene .temps--entree { min-height: 72vh; min-height: 72lvh; pointer-events: none; }
.scene__fond {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  margin-bottom: -100vh; margin-bottom: -100lvh;
  overflow: hidden; isolation: isolate;
}
.scene__image, .scene__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
.scene__video { opacity: 0; transition: opacity .7s var(--ease); }
.scene.video-prete .scene__video { opacity: 1; }
.scene__voile {
  position: absolute; inset: 0;
  background:
    var(--grain),
    linear-gradient(90deg, rgba(43, 24, 16, .82) 0%, rgba(43, 24, 16, .55) 32%, rgba(43, 24, 16, 0) 62%),
    linear-gradient(180deg, rgba(43, 24, 16, .6) 0%, rgba(43, 24, 16, 0) 22%),
    linear-gradient(0deg, rgba(43, 24, 16, .92) 0%, rgba(43, 24, 16, 0) 26%);
}

.viseur {
  position: absolute; inset: .7rem; pointer-events: none;
  --c: rgba(254, 244, 221, .85); --l: 18px; --e: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--e) var(--l) no-repeat;
}
.scene__viseur { inset: calc(var(--entete) + .4rem) 1.1rem 2.6rem; --l: 26px; --c: rgba(254, 244, 221, .55); }

.scene__credit, .scene__tc {
  position: absolute; bottom: .95rem; margin: 0; z-index: 2;
  color: rgba(254, 244, 221, .7);
}
.scene__credit { left: calc(var(--gouttiere) + 1.2rem); }
.scene__tc { right: calc(var(--gouttiere) + 1.2rem); display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.scene__barre {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; z-index: 2;
  background: var(--or); transform-origin: left; transform: scaleX(var(--p));
}
html:not(.fx) .scene__tc, html:not(.fx) .scene__barre, html:not(.fx) .entete__tc { display: none; }

.temps {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100lvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--entete) + 1.5rem) var(--gouttiere) 4.5rem calc(var(--gouttiere) + 1.2rem);
}
.temps__in { display: grid; gap: 1.3rem; justify-items: start; width: min(46rem, 54%); }
.temps--1 .temps__in { gap: 1.5rem; }
.temps--2, .temps--3 { justify-content: flex-end; }
.temps--2 .temps__in, .temps--3 .temps__in { width: min(42rem, 52%); padding-bottom: 1.5rem; }

/* Le hero s'efface et recule pendant que la devanture s'allume */
.fx .temps--1 .temps__in {
  will-change: transform, opacity;
  opacity: calc(1 - var(--h) * 1.5);
  transform: translateY(calc(var(--h) * -70px)) scale(calc(1 - var(--h) * .07));
  transform-origin: left center;
}
.scene.est-sous .temps--1 .temps__in { pointer-events: none; }

/* Entrée du titre, ligne par ligne, avec un flou de mise au point */
h1 .l { display: inline-block; }
.fx h1 .l { animation: mise-au-point 1s var(--ease) both; }
.fx h1 .l:nth-child(2) { animation-delay: .1s; }
.fx h1 em .l:nth-child(1) { animation-delay: .22s; }
.fx h1 em .l:nth-child(2) { animation-delay: .32s; }
.fx .temps--1 .chapo, .fx .temps--1 .actions, .fx .temps--1 .hero__note, .fx .temps--1 .etiquette { animation: mise-au-point .9s var(--ease) both; }
.fx .temps--1 .etiquette { animation-delay: 0s; }
.fx .temps--1 .chapo { animation-delay: .45s; }
.fx .temps--1 .actions { animation-delay: .55s; }
.fx .temps--1 .hero__note { animation-delay: .65s; }
@keyframes mise-au-point {
  from { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__note { color: rgba(254, 244, 221, .72); }

.scene__indice {
  position: absolute; left: calc(var(--gouttiere) + 1.2rem); bottom: 3.2rem; margin: 0;
  display: flex; align-items: center; gap: .7rem; color: rgba(254, 244, 221, .6);
  opacity: calc(1 - var(--h) * 3);
}
.scene__indice i { width: 2.2rem; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.fx .scene__indice i::after {
  content: ""; position: absolute; inset: 0; background: var(--or);
  transform: translateX(-100%); animation: file 1.8s var(--ease) infinite;
}
@keyframes file { to { transform: translateX(100%); } }
.scene__indice span:last-child { color: var(--or); }
html:not(.fx) .scene__indice { display: none; }

@media (orientation: portrait) {
  .scene__image, .scene__video { object-position: 50% 50%; }
  .scene__voile {
    background:
      var(--grain),
      linear-gradient(180deg, rgba(43, 24, 16, .85) 0%, rgba(43, 24, 16, .62) 26%, rgba(43, 24, 16, 0) 46%),
      linear-gradient(0deg, rgba(43, 24, 16, .96) 0%, rgba(43, 24, 16, .8) 24%, rgba(43, 24, 16, 0) 46%);
  }
  .temps { padding: calc(var(--entete) + 1.4rem) calc(var(--gouttiere) + .6rem) 4.2rem; }
  .temps__in, .temps--2 .temps__in, .temps--3 .temps__in { width: auto; }
  .temps--1 { justify-content: space-between; }
  .temps--1 .chapo { font-size: 1rem; line-height: 1.45; }
  .scene__viseur { inset: calc(var(--entete) + .2rem) .7rem 2.4rem; }
  .scene__credit, .scene__indice { left: calc(var(--gouttiere) + .6rem); }
  .scene__tc { right: calc(var(--gouttiere) + .6rem); }
}

/* ---------- Sections ---------- */

.section { position: relative; padding: var(--section) 0; }
.section--nuit { background: var(--nuit); color: var(--creme); --doux: rgba(254, 244, 221, .74); --trait: rgba(254, 244, 221, .16); }
.section--bouteille { background: var(--bouteille); color: var(--creme); --doux: rgba(254, 244, 221, .8); --trait: rgba(254, 244, 221, .2); }
.section--creme {
  background: var(--grain), var(--creme); color: var(--encre);
  --doux: rgba(43, 24, 16, .76); --trait: rgba(43, 24, 16, .2);
}
.section--creme .etiquette { color: var(--encre); }
.section--creme h2 em, .section--creme .temps__titre em {
  color: inherit;
  box-shadow: inset 0 -.36em 0 0 var(--or);
}

/* La salle noire (Ce qu'on filme) : on vient d'entrer, le titre se met au point dans le noir */
.section--cinema { padding-top: clamp(3rem, 7vw, 6rem); }
.section--cinema .tete { max-width: 64rem; }
.section--cinema h2 { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6.2rem); }
.section--cinema h2 .l { display: inline-block; }
.fx .section--cinema .tete h2 .l { opacity: 0; }
.fx .section--cinema .tete.est-vu h2 .l { animation: mise-au-point 1.1s var(--ease) both; }
.fx .section--cinema .tete.est-vu h2 em .l { animation-delay: .35s; }
.fx .section--cinema .tete.est-vu .chapo { animation: mise-au-point .9s var(--ease) .7s both; }
.fx .section--cinema .tete.est-vu .pause { animation: mise-au-point .9s var(--ease) .9s both; }
.section--cinema .pause { border-color: var(--trait); color: var(--doux); }
.section--cinema .pause:hover { color: var(--creme); }
#livrables .livrables { margin-top: 0; padding-top: 0; border-top: 0; }

/* Bord de pellicule : perforations entre une section sombre et une section crème */
.section--pellicule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background:
    radial-gradient(circle at 50% 50%, var(--creme) 0 3.5px, transparent 4.5px) 0 0 / 22px 22px repeat-x,
    linear-gradient(var(--nuit), var(--nuit)) 0 0 / 100% 14px no-repeat;
  background-color: transparent;
}
.section--pellicule { padding-top: calc(var(--section) + 14px); }
#tarifs::before, #methode::before { --nuit: var(--bouteille); }
#methode::before { --nuit: #2B1810; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--max)); margin-inline: auto; }
.tete { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 58rem; }

/* Apparition : un fondu qui monte, avec un léger flou de mise au point */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.fx .revele:not(.plan) { filter: blur(6px); }
.js .revele.est-vu { opacity: 1; transform: none; filter: none; }

/* ---------- Ce qu'on filme : quatre enseignes ---------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 58rem; margin-inline: auto; gap: clamp(1rem, 2vw, 1.75rem); perspective: 1400px; }
.plan { display: grid; gap: .8rem; align-content: start; --c: var(--braise); }
.plan[data-enseigne="rose"] { --c: var(--rose); }
.plan[data-enseigne="bleu"] { --c: var(--bleu); }
.plan[data-enseigne="feuille"] { --c: var(--feuille); }
.plan:nth-child(2) { transition-delay: .08s; margin-top: 2.5rem; }
.plan:nth-child(3) { transition-delay: .16s; }
.plan:nth-child(4) { transition-delay: .24s; margin-top: 2.5rem; }
.plan p { color: var(--doux); font-size: 1rem; }
.plan h3 { position: relative; padding-top: .8rem; }
.plan h3::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2.4rem; height: 3px; background: var(--c);
  box-shadow: 0 0 0 0 var(--c); transition: width .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover h3::before, .plan.est-allume h3::before { width: 4.5rem; box-shadow: 0 0 14px 1px var(--c); }

.cadre {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--arrondi); background: var(--nuit);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  box-shadow: 0 0 0 1px rgba(43, 24, 16, .12), 0 14px 30px -18px rgba(43, 24, 16, .5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cadre video, .cadre .halo, .cadre::after { position: absolute; inset: 0; }
.cadre video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.fx .cadre video { animation: respiration 14s ease-in-out infinite alternate; }
@keyframes respiration { to { scale: 1.08; translate: 0 -1.5%; } }
html.est-en-pause .cadre video { animation-play-state: paused; }
.cadre::after {
  content: ""; pointer-events: none;
  background: linear-gradient(180deg, rgba(43, 24, 16, .5) 0%, rgba(43, 24, 16, 0) 22%, rgba(43, 24, 16, 0) 76%, rgba(43, 24, 16, .62) 100%);
}
.halo {
  pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--c) 55%, transparent), transparent 70%);
  transition: opacity .4s var(--ease);
}
.cadre:hover, .plan.est-allume .cadre {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 26px 60px -20px color-mix(in srgb, var(--c) 60%, transparent);
}
.cadre:hover video, .plan.est-allume .cadre video { filter: none; transform: scale(1.04); }
.cadre:hover .halo { opacity: 1; }
.cadre .viseur, .cadre__plan, .cadre__mention { z-index: 2; }
.cadre__plan, .cadre__mention { position: absolute; left: 1.25rem; color: var(--creme); }
.cadre__plan { top: 1.2rem; display: grid; }
.cadre__tc { display: none; color: var(--rouge); }
.cadre__tc::before { content: "● "; }
.cadre:hover .cadre__num, .plan.est-allume .cadre__num { display: none; }
.cadre:hover .cadre__tc, .plan.est-allume .cadre__tc { display: block; }
.cadre__mention { bottom: 1.15rem; opacity: .8; }

.livrables {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4rem, 8vw, 7.5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--trait);
}
.livrables__titre { font-size: var(--t-h2); position: sticky; top: calc(var(--entete) + 2rem); align-self: start; }
.livrables__liste li {
  display: grid; grid-template-columns: 3.2rem minmax(0, 14rem) minmax(0, 1fr); gap: .4rem 1.5rem; align-items: baseline;
  padding: 1.5rem 0; border-bottom: 1px solid var(--trait); --c: var(--braise);
}
.livrables__liste li[data-enseigne="rose"] { --c: var(--rose); }
.livrables__liste li[data-enseigne="bleu"] { --c: var(--bleu); }
.livrables__liste li[data-enseigne="feuille"] { --c: var(--feuille); }
.livrables__liste li:first-child { padding-top: 0; }
.livrables__liste p { color: var(--doux); }
.livrables__liste .num { color: var(--encre); background: var(--c); padding: .25rem .4rem; border-radius: .6rem; justify-self: start; }
.num { color: var(--or); }

/* ---------- Terrain : les vrais Reels, l'équipe ---------- */

.preuve { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr); gap: clamp(1.25rem, 2.4vw, 2.25rem); align-items: start; }
.preuve__reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.25rem); align-items: start; }
.reel { margin: 0; display: grid; gap: .8rem; }
.reel:nth-child(2) { margin-top: 2.5rem; transition-delay: .08s; }
.reel__ecran {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--arrondi); background: #2B1810;
  box-shadow: 0 0 0 1px rgba(254, 244, 221, .14), 0 26px 60px -26px rgba(0, 0, 0, .75);
}
.reel__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__vrai {
  position: absolute; top: 1.2rem; left: 1.25rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem;
  background: rgba(43, 24, 16, .72); border-radius: .6rem; color: var(--creme);
  font: 500 var(--t-mono)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.reel__son {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 1; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1rem;
  border: 0; border-radius: var(--arrondi); background: var(--or); color: var(--encre);
  font-weight: 800; font-size: .95rem; white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.reel__son:hover { background: var(--or-clair); transform: translateX(-50%) translateY(-2px); }
.reel__son span:last-child, .reel__son[aria-pressed="true"] span:nth-of-type(1) { display: none; }
.reel__son[aria-pressed="true"] span:last-child { display: inline; }
.reel__son[aria-pressed="true"] { background: var(--creme); }
.reel__son:not([aria-pressed="true"]) .reel__ondes { opacity: .35; }
.reel figcaption { color: var(--doux); font-size: 1rem; line-height: 1.4; }
.reel figcaption b { color: var(--creme); }

.pourquoi { display: grid; gap: 1.2rem; align-content: start; justify-items: start; }
.pourquoi ol { display: grid; gap: 1rem; counter-reset: p; }
.pourquoi li { counter-increment: p; position: relative; padding-left: 2.3rem; color: var(--doux); }
.pourquoi li::before {
  content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: .2em;
  font: 500 var(--t-mono)/1.3 var(--mono); color: var(--or);
}
.pourquoi li b { display: block; color: var(--creme); font-weight: 700; }
.pourquoi__note { color: var(--doux); font-size: .95rem; }

.equipe {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--trait); border-radius: var(--arrondi); background: rgba(43, 24, 16, .35);
}
.equipe__texte { display: grid; gap: .6rem; }
.equipe__texte p { color: var(--doux); }

/* ---------- Bande d'appel ---------- */

.bande { background: var(--or); color: var(--encre); padding: clamp(1.4rem, 3vw, 2.2rem) 0; }
.bande__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; }
.bande p { max-width: 42rem; font-size: 1.12rem; line-height: 1.35; }
.bande b { font-family: var(--titre); font-weight: 400; }

.ages {
  display: flex; align-items: baseline; gap: .12em;
  font-family: var(--titre); font-weight: 400; font-size: clamp(5rem, 9vw, 8rem); line-height: .8; letter-spacing: -.04em;
  color: var(--or); font-variant-numeric: tabular-nums;
}
.ages__et { font-size: .42em; font-weight: 400; color: var(--creme); margin: 0 .1em; }
.materiel { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.materiel li {
  padding: .35rem .6rem; border: 1px solid var(--trait); border-radius: .6rem;
  font: 500 var(--t-mono)/1.3 var(--mono); letter-spacing: .04em;
  transition: border-color .3s, color .3s;
}
.materiel li:hover { border-color: var(--or); color: var(--or); }

/* ---------- Tarifs : la carte ---------- */

.essai {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 2rem;
  background: var(--or); border-radius: var(--arrondi); position: relative; overflow: hidden;
}
.essai::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .35), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.essai:hover::after { opacity: 1; }
.essai > div { display: grid; gap: .5rem; max-width: 40rem; position: relative; z-index: 1; }
.essai .btn { position: relative; z-index: 1; }
.essai h3 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-family: var(--titre); font-weight: 400; }

.carte {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--encre); border-radius: var(--arrondi);
  background: rgba(255, 255, 255, .34);
}
.formule {
  position: relative; display: grid; gap: 1rem; align-content: start; grid-template-rows: auto auto auto auto 1fr auto auto;
  padding: clamp(1.4rem, 2.6vw, 2.4rem); isolation: isolate;
  transition: background .4s var(--ease);
}
.formule::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(300px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--or) 38%, transparent), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.formule:hover::after { opacity: 1; }
.formule + .formule { border-left: 2px dotted var(--trait); }
.formule--conseil { background: var(--creme-fonce); }
.formule h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-family: var(--titre); font-weight: 400; }
.formule__pour { color: var(--doux); min-height: 3.2em; }
.prix { font: 400 1rem/1 var(--mono); }
.prix b { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.7rem); font-weight: 600; letter-spacing: -.04em; }
.tampon {
  position: absolute; top: 1.3rem; right: 1.2rem; transform: rotate(7deg);
  padding: .3rem .6rem; border: 2px solid var(--encre); border-radius: .6rem;
  font: 600 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: transform .5s var(--ease);
}
.formule:hover .tampon { transform: rotate(-4deg) scale(1.08); }

.lignes { display: grid; gap: .55rem; align-content: start; }
.lignes li { display: flex; align-items: baseline; gap: .5rem; }
.lignes li i { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--trait); transform: translateY(-.28em); }
.lignes li span:last-child { font: 500 .95rem/1.3 var(--mono); text-align: right; }
.plus { padding-top: .9rem; border-top: 1px solid var(--trait); font-size: .98rem; color: var(--doux); }
.plus b { color: var(--encre); }

.web { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem 3rem; align-items: start; }
.lignes--web li { font-size: 1.08rem; }

/* ---------- Méthode : la ligne se trace au défilement ---------- */

.etapes {
  position: relative; --p: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.5rem);
  padding-top: 1.6rem;
}
.etapes::before, .etapes::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; }
.etapes::before { background: var(--trait); }
.etapes::after { background: var(--or); transform-origin: left; transform: scaleX(var(--p)); }
.etapes li { display: grid; gap: .8rem; align-content: start; position: relative; padding-top: .4rem; }
.etapes li::before {
  content: ""; position: absolute; top: calc(-1.6rem - .45rem + 1.5px); left: 0;
  width: .95rem; height: .95rem; border-radius: 50%; background: var(--creme); border: 3px solid var(--trait);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s;
}
.etapes li.est-allumee::before { border-color: var(--or); background: var(--or); box-shadow: 0 0 0 6px rgba(255, 197, 41, .25); }
.etapes .num { color: var(--doux); transition: color .4s; }
.etapes li.est-allumee .num { color: var(--encre); }
.etapes li:nth-child(2) { transition-delay: .08s; }
.etapes li:nth-child(3) { transition-delay: .16s; }
.etapes li:nth-child(4) { transition-delay: .24s; }
.etapes p { color: var(--doux); font-size: 1rem; }

/* ---------- Questions ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .tete { margin-bottom: 0; position: sticky; top: calc(var(--entete) + 2rem); }
.faq__liste { border-top: 2px solid var(--creme); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-weight: 800; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.25;
  transition: color .25s;
}
.faq summary:hover { color: var(--or); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 2px solid currentColor; border-radius: 50%;
  font: 500 1.2rem/1 var(--mono); transition: transform .35s var(--ease), background .25s, color .25s;
}
.faq details.est-ouverte summary::after { transform: rotate(45deg); background: var(--or); color: var(--encre); border-color: var(--or); }
.faq__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq details.est-ouverte .faq__corps { grid-template-rows: 1fr; }
.faq__corps > div { overflow: hidden; }
.faq details p { padding: 0 3.5rem 1.4rem 0; color: var(--doux); max-width: 44em; }
html:not(.js) .faq__corps { grid-template-rows: 1fr; }

/* ---------- La devanture allumée : profondeur à la souris ---------- */

.finale {
  position: relative; min-height: 92vh; min-height: 92svh;
  display: grid; align-items: center; overflow: hidden; isolation: isolate;
  color: var(--creme); background: var(--nuit); --mx: 0; --my: 0;
}
.finale__fond img {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 70% 50%;
  transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)) scale(1.02);
  transition: transform .7s var(--ease);
}
.finale__voile {
  position: absolute; inset: 0;
  background:
    var(--grain),
    linear-gradient(90deg, rgba(43, 24, 16, .86) 0%, rgba(43, 24, 16, .6) 36%, rgba(43, 24, 16, .05) 68%),
    linear-gradient(0deg, rgba(43, 24, 16, .9) 0%, rgba(43, 24, 16, 0) 30%),
    linear-gradient(180deg, rgba(43, 24, 16, .55) 0%, rgba(43, 24, 16, 0) 22%);
}
.finale__viseur { inset: 1.4rem 1.1rem; --l: 26px; --c: rgba(254, 244, 221, .5); }
.finale__in {
  position: relative; z-index: 1; display: grid; gap: 1.4rem; justify-items: start;
  padding: calc(var(--section) * .8) 0;
  transform: translate(calc(var(--mx) * 9px), calc(var(--my) * 6px));
  transition: transform .7s var(--ease);
}
.finale__in h2 { max-width: 12em; }
.finale__in .chapo { max-width: 30em; }
.finale__credit { bottom: 1.2rem; }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact__texte { display: grid; gap: 1.2rem; }
.contact__voix { margin-top: 1.5rem; font: 500 var(--t-mono)/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--or); }
.contact__tel {
  justify-self: start; text-decoration: none;
  font-family: var(--titre); font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(var(--or), var(--or)) 0 100% / 100% 3px no-repeat;
  padding-bottom: .12em; font-variant-numeric: tabular-nums;
  transition: color .25s, background-size .4s var(--ease);
}
.contact__tel:hover { color: var(--or); background-size: 100% .18em; }
.contact__zone { color: var(--doux); font-size: .98rem; max-width: 30em; }

.formulaire {
  display: grid; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--nuit); border-radius: var(--arrondi);
}
.champ { display: grid; gap: .45rem; }
.champ label { font: 500 var(--t-mono)/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: rgba(254, 244, 221, .8); }
.champ label span { text-transform: none; letter-spacing: 0; opacity: .7; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .8rem .9rem;
  background: rgba(254, 244, 221, .06); color: var(--creme);
  border: 0; border-bottom: 2px solid rgba(254, 244, 221, .4); border-radius: .6rem 3px 0 0;
  font-size: 1.05rem; line-height: 1.4;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.champ input::placeholder { color: rgba(254, 244, 221, .62); }
.champ select option { background: var(--nuit); color: var(--creme); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-bottom-color: var(--or); background: rgba(254, 244, 221, .1); box-shadow: 0 2px 0 0 var(--or); }
.champ textarea { resize: vertical; min-height: 5.5rem; }
.champ.est-en-erreur input { border-bottom-color: var(--rouge); box-shadow: 0 2px 0 0 var(--rouge); }
.champ__erreur { font-size: .9rem; color: #F3A092; }
.formulaire__note, .formulaire__etat { font-size: .9rem; color: rgba(254, 244, 221, .72); }
.formulaire__etat { color: var(--or); font-weight: 600; }

/* ---------- Pied de page ---------- */

.pied { background: var(--nuit); color: var(--creme); padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; border-top: 1px solid rgba(254, 244, 221, .14); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.pied__grille p { margin-top: 1rem; color: rgba(254, 244, 221, .72); max-width: 24em; }
.pied nav, .pied__contact { display: grid; gap: .6rem; align-content: start; justify-items: start; }
.pied nav a, .pied__contact a, .pied__contact button {
  padding: 0; border: 0; background: none; cursor: pointer;
  text-decoration: none; color: rgba(254, 244, 221, .86); transition: color .2s;
}
.pied nav a:hover, .pied__contact a:hover, .pied__contact button:hover { color: var(--or); }
.pied__bas {
  width: min(100% - 2 * var(--gouttiere), var(--max)); margin: 3rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(254, 244, 221, .14);
  font: 400 var(--t-mono)/1.5 var(--mono); letter-spacing: .04em; color: rgba(254, 244, 221, .62);
}

/* ---------- Barre mobile ---------- */

.barre-mobile { display: none; }

/* ---------- Mentions ---------- */

.mentions {
  width: min(92vw, 40rem); max-height: 86vh; padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 0; border-radius: var(--arrondi); background: var(--creme); color: var(--encre);
}
.mentions::backdrop { background: rgba(43, 24, 16, .78); }
.mentions__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.mentions h2 { font-size: 2rem; }
.mentions h3 { font-size: 1.1rem; margin: 1.3rem 0 .35rem; }
.mentions p { font-size: .98rem; color: rgba(43, 24, 16, .82); }
.mentions button {
  padding: .45rem .9rem; border: 2px solid var(--encre); border-radius: var(--arrondi); background: none; cursor: pointer; font-weight: 700;
}
.mentions :focus-visible { outline-color: var(--encre); }
.pointeur .mentions, .pointeur .mentions * { cursor: auto; }
.pointeur .mentions button { cursor: pointer; }

/* ---------- L'ouverture : la marque, REC, puis le viseur s'ouvre sur la rue ---------- */

.intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--nuit); color: var(--creme); pointer-events: none;
  animation: intro-sortie .6s var(--ease) 1.35s both;
}
.intro__marque { display: grid; justify-items: center; gap: .7rem; font-family: var(--titre); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; }
.intro__marque .logo__mot { animation: mise-au-point .7s var(--ease) .25s both; }
.intro__rec {
  position: absolute; left: var(--gouttiere); top: calc(var(--entete) * .9); margin: 0;
  display: flex; align-items: center; gap: .5rem; font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .14em;
  animation: intro-rec .5s steps(1, end) .3s 2;
}
.intro__viseur {
  position: absolute; left: 50%; top: 50%; width: 6rem; height: 6rem; translate: -50% -50%;
  --c: rgba(254, 244, 221, .85); --l: 22px; --e: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--e) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--e) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--e) var(--l) no-repeat;
  animation: intro-viseur .8s var(--ease) .95s both;
}
@keyframes intro-rec { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes intro-viseur { to { width: calc(100vw - 2.2rem); height: calc(100vh - var(--entete) - 3rem); } }
@keyframes intro-sortie { to { opacity: 0; visibility: hidden; } }
html:not(.fx) .intro, .intro.est-vue { display: none; }

/* ---------- Le curseur-viseur ---------- */

.curseur {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 30px; height: 30px;
  translate: calc(var(--x, -100px) - 50%) calc(var(--y, -100px) - 50%);
  color: #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s var(--ease);
  display: none;
}
.pointeur .curseur { display: block; }
.pointeur.a-curseur .curseur { opacity: 1; }
.curseur__coin { position: absolute; width: 9px; height: 9px; border: 2px solid currentColor; transition: width .25s, height .25s; }
.curseur__coin--hg { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.curseur__coin--hd { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.curseur__coin--bg { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.curseur__coin--bd { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.curseur.est-verrouille .curseur__coin { width: 16px; height: 16px; }
.curseur__point {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; translate: -50% -50%; transition: opacity .2s, transform .2s;
}
.curseur.est-verrouille .curseur__point { opacity: 0; transform: scale(0); }
.curseur__label {
  position: absolute; left: 50%; top: 100%; translate: -50% 8px;
  font: 600 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.curseur.est-verrouille .curseur__label { opacity: 1; }
/* Sur un élément large, le libellé se range dans le coin plutôt que sous le cadre */
.curseur.est-large .curseur__label { left: 10px; top: 8px; translate: 0 0; }
.curseur.est-rec .curseur__label::before { content: "● "; }
.curseur.est-presse { scale: .9; }


/* ---------- Ambiance sur le film : lueur, bokeh et phares qui montent avec le défilement ---------- */

.scene__lueur {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(55% 46% at 68% 52%, rgba(255, 197, 41, .42), transparent 70%),
    radial-gradient(70% 30% at 60% 100%, rgba(255, 197, 41, .28), transparent 70%);
  opacity: calc(var(--p) * var(--p));
}
.scene__ambiance, .finale__ambiance {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: screen; display: block;
}
.scene__ambiance {
  opacity: calc(min(1, var(--p) * 1.4));
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 42%);
          mask: linear-gradient(90deg, transparent 0, #000 42%);
}
.finale__ambiance { opacity: .9; }
html:not(.fx) .scene__ambiance, html:not(.fx) .finale__ambiance { display: none; }

/* ---------- Le téléphone 3D : il se tourne vers vous pendant le défilement ---------- */

.tel {
  position: absolute; right: clamp(2rem, 9vw, 11rem); top: 50%; z-index: 2;
  width: clamp(13rem, 17vw, 17rem); aspect-ratio: 9 / 19.2;
  translate: 0 -50%; perspective: 1500px; pointer-events: none;
  opacity: calc(min(1, max(0, (var(--q, 0) - .18) * 2.6))); --q: 0;
}
.tel__flotte { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx .tel__flotte { animation: flotte 7s ease-in-out infinite; }
.tel__corps {
  position: absolute; inset: 0; border-radius: 2.7rem; background: #0e0e10;
  transform-style: preserve-3d;
  transform: rotateY(calc(-52deg + var(--q, 0) * 56deg)) rotateX(calc(7deg - var(--q, 0) * 7deg)) translateY(calc((1 - var(--q, 0)) * 50px));
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), inset 0 0 0 1.5px #3a3a3e, 0 0 0 1px #050506;
}
.tel__corps::before, .tel__corps::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #46464b, #0b0b0d 38%, #1c1c20 68%, #4a4a4f);
}
.tel__corps::before { transform: translateZ(-11px); }
.tel__corps::after { transform: translateZ(-5px); inset: -1px; background: #17171a; }
.tel__ecran {
  position: absolute; inset: .45rem; border-radius: 2.25rem; overflow: hidden; background: #000;
  transform: translateZ(1px);
}
.tel__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tel__ilot { position: absolute; top: .65rem; left: 50%; translate: -50% 0; width: 34%; height: 1.15rem; border-radius: 1rem; background: #000; }
.tel__ui { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 42%); }
.tel__legende {
  position: absolute; left: 1rem; right: 3.4rem; bottom: 1.6rem; display: grid; gap: .15rem;
  color: #fff; font-size: .78rem; line-height: 1.25; }
.tel__legende b { font-weight: 700; }
.tel__legende span { opacity: .8; font-size: .7rem; }
.tel__icones { position: absolute; right: .85rem; bottom: 2.2rem; display: grid; gap: .9rem; }
.tel__icones i { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); }
.tel__icones i:first-child { background: var(--rouge); border-color: var(--rouge); }
.tel__barre { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; height: 2px; background: rgba(255, 255, 255, .3); }
.tel__barre i { display: block; height: 100%; width: 38%; background: #fff; }
.fx .tel__barre i { animation: lecture 5s linear infinite; }
@keyframes lecture { from { width: 0; } to { width: 100%; } }
.tel__reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%);
  background-size: 300% 100%; background-position: calc(100% - var(--q, 0) * 100%) 0;
}
@media (max-width: 1000px), (max-height: 620px) { .tel { display: none; } }



/* ---------- Néon : le mot en or s'allume en clignotant quand le titre arrive ---------- */

.fx h2 em.allume, .fx .temps__titre em.allume { animation: neon 1.1s steps(1, end) 1 both; }
@keyframes neon {
  0% { color: var(--or); text-shadow: 0 0 14px rgba(255, 197, 41, .7), 0 0 36px rgba(255, 197, 41, .35); }
  12% { color: rgba(255, 197, 41, .35); text-shadow: none; }
  20% { color: var(--or); text-shadow: 0 0 14px rgba(255, 197, 41, .7), 0 0 36px rgba(255, 197, 41, .35); }
  32% { color: rgba(255, 197, 41, .45); text-shadow: none; }
  40% { color: var(--or); text-shadow: 0 0 18px rgba(255, 197, 41, .8), 0 0 44px rgba(255, 197, 41, .4); }
  62% { color: var(--or); text-shadow: 0 0 18px rgba(255, 197, 41, .8), 0 0 44px rgba(255, 197, 41, .4); }
  100% { color: var(--or); text-shadow: none; }
}
.fx .section--creme h2 em.allume { animation: neon-bande 1.1s steps(1, end) 1 both; }
@keyframes neon-bande {
  0% { box-shadow: inset 0 -.36em 0 0 var(--or); }
  12% { box-shadow: inset 0 -.36em 0 0 rgba(255, 197, 41, .25); }
  20% { box-shadow: inset 0 -.36em 0 0 var(--or); }
  32% { box-shadow: inset 0 -.36em 0 0 rgba(255, 197, 41, .35); }
  40%, 100% { box-shadow: inset 0 -.36em 0 0 var(--or); }
}

/* ---------- Les villes : bandeau qui défile ---------- */

.villes {
  overflow: hidden; padding: .95rem 0; background: var(--nuit); color: rgba(254, 244, 221, .72);
  border-top: 1px solid rgba(254, 244, 221, .12); border-bottom: 1px solid rgba(254, 244, 221, .12);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.villes__piste {
  display: flex; width: max-content; gap: 2.4rem;
  font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.fx .villes__piste { animation: defile 52s linear infinite; }
.villes__piste span::before { content: "●"; margin-right: 2.4rem; color: var(--or); font-size: .55em; vertical-align: .15em; }
@keyframes defile { to { transform: translateX(-50%); } }
.villes:hover .villes__piste, html.est-en-pause .villes__piste { animation-play-state: paused; }

/* ---------- Écrans bas (portables 13", téléphones en paysage) ---------- */

@media (max-height: 720px) and (min-width: 761px) {
  :root { --t-hero: clamp(2.4rem, min(1rem + 6vw, 10.5vh), 6.4rem); }
  .temps { padding-top: calc(var(--entete) + .8rem); padding-bottom: 3.4rem; }
  .temps--1 .temps__in { gap: 1rem; }
  .temps--1 .chapo { font-size: 1rem; line-height: 1.45; }
  .scene__indice { display: none; }
}

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 1100px) {
}

@media (max-width: 1000px) {
  .plans {
    grid-template-columns: repeat(3, min(68vw, 22rem)); overflow-x: auto;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 1.4rem;
    scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; }
  .plan:nth-child(n) { margin-top: 0; }
  .livrables, .compte, .faq, .contact, .web { grid-template-columns: minmax(0, 1fr); }
  .livrables__titre, .faq .tete { position: static; }
  .carte { grid-template-columns: minmax(0, 1fr); }
  .formule { grid-template-rows: none; }
  .formule + .formule { border-left: 0; border-top: 2px dotted var(--trait); }
  .formule__pour { min-height: 0; }
  .etapes { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .ticket-flotte { justify-self: center; width: min(100%, 24rem); }
  .pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied__grille > div:first-child { grid-column: 1 / -1; }
  .entete__tc { display: none; }
}

@media (max-width: 860px) {
  .entete__wa { display: none; }
  .entete__menu {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 2.5rem; padding: .3rem .9rem;
    border: 2px solid currentColor; border-radius: var(--arrondi); background: none; cursor: pointer; font-weight: 700;
  }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: .5rem var(--gouttiere) 1.2rem;
    background: var(--nuit); border-bottom: 1px solid rgba(254, 244, 221, .14);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.est-ouverte { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav a { padding: .9rem 0; font-size: 1.15rem; border-bottom: 1px solid rgba(254, 244, 221, .1); }

  /* La barre de contact rapide remplace le bouton d'en-tête ; le crédit et le timecode remontent au-dessus d'elle */
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: .6rem;
    padding: .6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(43, 24, 16, .97); border-top: 1px solid rgba(254, 244, 221, .14); color: var(--creme);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .barre-mobile.est-visible { transform: none; }
  .barre-mobile .btn { min-height: 2.9rem; }
  .pied { padding-bottom: 6.5rem; }
  .scene__credit, .scene__tc { bottom: auto; top: calc(var(--entete) + .7rem); opacity: calc(1 - var(--h) * 1.3); }
  .scene__barre { bottom: auto; top: var(--entete); }
  .scene__viseur { top: calc(var(--entete) + 2.4rem); bottom: calc(1rem + 4.4rem); }
  .temps { padding-top: calc(var(--entete) + 3rem); }
}

@media (max-width: 760px) {
  :root { --entete: 3.75rem; }
  .livrables__liste li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .livrables__liste p { grid-column: 2; }
  .etapes { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 2rem; gap: 2.2rem; }
  .etapes::before, .etapes::after { width: 3px; height: 100%; left: .35rem; top: 0; }
  .etapes::after { transform-origin: top; transform: scaleY(var(--p)); }
  .etapes li::before { top: .35rem; left: calc(-2rem + .35rem - .475rem + 1.5px); }
  .faq details p { padding-right: 0; }
  .temps--1 .btn--contour { display: none; }
  .finale { min-height: 80svh; }
  .scene .temps--entree { min-height: 55vh; min-height: 55lvh; }

  .fx .revele:not(.plan) { filter: none; }
}

/* ---------- Moins d'animations ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .scene__fond { position: relative; margin-bottom: 0; height: 60vh; }
  .scene__video, .scene__tc, .scene__barre, .scene__indice, .entete__tc, .curseur { display: none; }
  .temps { min-height: 0; padding-top: 3rem; padding-bottom: 3rem; }
  .temps--2, .temps--3 { justify-content: flex-start; }
  .js .revele { opacity: 1; transform: none; filter: none; }
  .ticket { animation: none; }
  .tel, .scene__lueur, .villes__piste, .intro { animation: none; }
  .scene__cadre { transform: none; }
  .scene__iris, .temps--entree { display: none; }
  .section--cinema .tete h2 .l { opacity: 1; animation: none; }
  .etapes { --p: 1; }
  .etapes li::before { border-color: var(--or); background: var(--or); }
  .mots .m { opacity: 1; }
}

/* ---------- Prix par jour, ticket, appels de fin de section ---------- */

.prix__jour { font: 500 .85rem/1.2 var(--mono); color: var(--doux); margin-top: -.6rem; }
.apres { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.apres p { font-family: var(--titre); font-weight: 400; font-size: var(--t-h3); }
.faq__suite { grid-column: 2; margin-top: 1.4rem; color: var(--doux); }
.faq__suite a { color: var(--or); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .preuve { grid-template-columns: minmax(0, 1fr); }
  .equipe { grid-template-columns: auto minmax(0, 1fr); }
  .equipe .materiel { grid-column: 1 / -1; }
  .faq__suite { grid-column: 1; }
}
@media (max-width: 619px) {
  .preuve__reels {
    grid-template-columns: repeat(2, 72vw); overflow-x: auto;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 1rem;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .preuve__reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: center; }
  .reel:nth-child(2) { margin-top: 0; }
}
@media (max-width: 760px) {
  .equipe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Le calcul : un exemple, un métier, un chiffre (d'après la proposition Dameyo) ---------- */

.rond { position: absolute; border-radius: 50%; pointer-events: none; }
.rond--haut { top: 34%; left: -9rem; width: clamp(14rem, 26vw, 24rem); aspect-ratio: 1; background: #A81F15; }
.perte { overflow: clip; }
.perte .conteneur { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.perte__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.perte__texte { display: grid; gap: 1.2rem; max-width: 42rem; }

.metiers { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.metiers legend { float: left; margin-right: .3rem; font-weight: 800; }
.metiers label { position: relative; display: block; }
.metiers input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.metiers span {
  display: block; padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--creme); color: var(--encre); font-weight: 800; line-height: 1.2;
  transition: background .2s, transform .2s var(--ease);
}
.metiers label:hover span { transform: translateY(-2px); }
.metiers input:checked + span { background: var(--encre); color: var(--creme); }
.metiers input:focus-visible + span { outline: 2px solid var(--creme); outline-offset: 3px; }
.perte__phrase { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 800; line-height: 1.3; }

.perte__rond {
  display: grid; place-content: center; justify-items: center; gap: .1rem;
  width: clamp(16rem, 30vw, 24rem); aspect-ratio: 1; padding: 1.5rem; border-radius: 50%;
  background: var(--or); color: var(--encre); text-align: center; rotate: -4deg;
}
.perte__montant { font: 400 clamp(4rem, 2.4rem + 5.4vw, 6.6rem)/1 var(--titre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.perte__mois { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 800; line-height: 1.15; }
.perte__an { font-weight: 800; }

.perte__paye {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 2rem;
  background: var(--creme); color: var(--encre);
}
.perte__paye > div:first-child { flex: 1 1 22rem; }
.perte__titre { font: 400 clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem)/1.05 var(--titre); color: var(--rouge); }
.perte__detail { margin-top: .5rem; font-size: 1.08rem; font-weight: 700; }
.perte__actions { display: grid; gap: .7rem; justify-items: center; flex: 0 1 auto; }
.perte__essai { font-size: .95rem; font-weight: 700; text-underline-offset: 3px; }

.ecrans { display: grid; gap: 1.2rem; }
.ecrans[hidden] { display: none; }
.ecrans h3 { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.1 var(--titre); }
.ecrans ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ecran { display: grid; align-content: start; gap: .35rem; padding: 1.4rem 1.5rem; border-radius: 1.8rem; font-weight: 700; line-height: 1.3; }
.ecran b { font: 400 clamp(2.2rem, 1.8rem + 1.4vw, 3rem)/1 var(--titre); }
.ecran--jaune { background: var(--or); color: var(--encre); rotate: -1deg; }
.ecran--blanc { background: #fff; color: var(--encre); rotate: .8deg; }
.ecran--blanc b { color: var(--rouge); }
.ecran--brun { background: var(--encre); color: var(--creme); rotate: -.6deg; }
.ecran--brun b { color: var(--or); }
.ecrans__source, .perte__pied { font-size: .84rem; line-height: 1.45; color: var(--creme); }

@media (max-width: 860px) {
  .perte__haut { grid-template-columns: 1fr; }
  .perte__rond { justify-self: center; }
  .ecrans ul { grid-template-columns: 1fr; }
  .rond--haut { top: 10rem; left: -7rem; width: 13rem; }
}

/* ---------- Palette de la proposition Dameyo : rouge, jaune, crème, brun ---------- */

.section--bouteille { --doux: rgba(254, 244, 221, .96); overflow: clip; }
.section--bouteille .etiquette, .section--bouteille .num { color: var(--creme); }
.section--bouteille .conteneur { position: relative; }

/* Le film de nuit se réchauffe pour rejoindre la palette */
.scene__image, .scene__video, .finale img, .finale video { filter: sepia(.32) saturate(1.15) hue-rotate(-8deg); }

/* Grands bords arrondis entre les sections, comme sur la proposition */
.section--onglet, .section--jaune {
  z-index: 1; margin-top: -2.6rem;
  border-radius: 2.6rem 2.6rem 0 0;
}
#contact { border-radius: 2.6rem 2.6rem 0 0; margin-top: -2.6rem; z-index: 1; }

/* Page jaune : le rouge et le brun prennent le relais du jaune */
.section--jaune { background: var(--or); --doux: rgba(43, 24, 16, .88); --trait: rgba(43, 24, 16, .3); }
.section--jaune h2 em { color: var(--rouge); box-shadow: none; }
.section--jaune .btn { background: var(--encre); border-color: var(--encre); color: var(--creme); --fond: var(--creme); --texte: var(--encre); }

/* Grand rond du coin, repris de la proposition */
#terrain::before {
  content: ""; position: absolute; top: -6rem; right: -6rem;
  width: clamp(12rem, 24vw, 22rem); aspect-ratio: 1; border-radius: 50%; background: var(--or);
}

.btn { border-radius: 999px; }
.formule--conseil { background: var(--or); --doux: rgba(43, 24, 16, .88); }
.section--jaune .etapes::after { background: var(--rouge); }
.section--jaune .etapes li::before { border-color: var(--encre); }
.section--jaune .etapes li.est-allumee::before { border-color: var(--rouge); background: var(--rouge); box-shadow: 0 0 0 6px rgba(199, 39, 27, .22); }
.prix b { font-family: var(--titre); font-weight: 400; letter-spacing: 0; }

/* ---------- Les métiers pas encore tournés : du texte, aucune image ---------- */
.chezvous { display: grid; gap: 1.4rem; max-width: 58rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.chezvous h3 { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.15 var(--titre); text-wrap: balance; }
.chezvous ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.chezvous li { color: var(--doux); line-height: 1.45; }
.chezvous li b { display: block; margin-bottom: .3rem; color: var(--creme); font-size: 1.1rem; }
.chezvous .btn { justify-self: start; }
@media (max-width: 760px) { .chezvous ul { grid-template-columns: 1fr; } }