/* ═══════════════════════════════════════════════════════════════════════════
   LEWIN PROD — feuille de style (v4)

   Système graphique repris de site-v3 (le site en ligne) : trois registres de
   ton, dans cet ordre — le papier, le studio, la salle. Melodrama pour les
   titres, Poppins italique pour le texte courant, IBM Plex Mono pour les
   métadonnées et le timecode. Le rouge n'intervient qu'en filet.

   DEUX RÈGLES QUI COMMANDENT LE RESTE :

   1. 100 % flexbox. Aucune grille CSS — site-v3 en utilise, pas nous : la
      maquette doit rester reproductible 1:1 en conteneurs Elementor.

   2. Dans les sections sombres, les titres déclarent leur couleur à la
      source, section par section. Un titre Melodrama qui hérite de l'encre
      sur du noir tombe à 1,09 de contraste — le piège est documenté dans
      site-v3 et il est fermé ici d'office.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── couleurs ─────────────────────────────────────────────────────────── */
  --papier:      #E7E6E1;   /* le papier — os minéral, légèrement froid */
  --papier-pale: #F2F1EE;   /* surface relevée */
  --studio:      #B5B1AD;   /* le fond de studio, prélevé sur la vidéo */
  --encre:       #14151A;   /* le texte */
  --noir:        #08090C;   /* la salle de projection */
  --sourdine:    #5E5F64;   /* texte secondaire — 5,1:1 sur le papier */
  --accent:      #E1214B;   /* uniquement en filet : pastille, jauge, puce */

  /* ── typographie ──────────────────────────────────────────────────────── */
  /* Cette variable s'appelait `--display`. Elementor pose `--display: flex`
     sur chacun de ses conteneurs : à l'intérieur, la variable du site était
     écrasée et tous les titres demandaient la police « flex », qui n'existe
     pas. Ne jamais reprendre un nom qu'un tiers peut poser sur un ancêtre :
     --display, --gap, --width, --align-items, --order. */
  --titre-police: "Melodrama", "Didot", "Bodoni MT", Georgia, serif;
  --texte:  "Poppins", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ── mesures ──────────────────────────────────────────────────────────── */
  /* Échelle revue à la baisse le 15/08/2026 : la première mise en ligne
     sortait à 147 px de titre géant et 160 px de respiration sur un écran de
     1280 — chaque widget occupait trop de place. L'échelle de titres a été
     réduite d'environ un quart, le rythme vertical d'un tiers. Les rapports
     entre les niveaux sont conservés : c'est une réduction, pas un
     redessin.

     La marge latérale, elle, n'a PAS bougé — et c'est délibéré. Les cadres
     tiennent leur hauteur d'un `aspect-ratio` : la rétrécir élargit les
     colonnes et rend donc les images PLUS hautes. Pour réduire un média, on
     resserre la mesure (`--largeur`), jamais la marge. */
  --marge:   clamp(20px, 5vw, 88px);
  --respire: clamp(56px, 8vh, 104px);
  --filet:       1px solid rgb(20 21 26 / 0.14);
  --filet-clair: 1px solid rgb(255 255 255 / 0.16);
  --largeur: 1440px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  /* Le fond est déclaré sur html ET sur body : le thème en pose un sur body,
     et selon l'ordre d'insertion des feuilles il peut passer devant. */
  background: var(--papier);
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  /* Le plancher reste à 14,5 px : le corps est en Poppins ITALIQUE, dont l'œil
     est plus petit qu'en romain. En dessous, la lecture sur téléphone décroche. */
  font-size: clamp(14.5px, 0.4vw + 12.5px, 15.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
     défilement et casserait tout `position: sticky`. */
  overflow-x: clip;
}

/* …et une troisième fois, avec du poids. Astra peint son blanc sur le
   conteneur de page — `.ast-page-builder-template` et `.ast-plain-container`
   sont des classes portées par <body>. Une classe (0,1,0) bat `body` seul
   (0,0,1) quel que soit l'ordre des feuilles.

   Et le papier n'est pas un aplat : deux voiles très larges — un froid en
   haut à gauche, un chaud en bas à droite — lui donnent l'inégalité d'une
   matière éclairée, sans qu'aucun dégradé ne se lise comme tel. `fixed`
   garde la lumière en place pendant que la page défile. */
body.ast-page-builder-template,
body.ast-plain-container,
body.ast-separate-container,
body {
  background-color: var(--papier);
  background-image:
    radial-gradient(120% 90% at 12% -8%,  rgb(255 255 255 / 0.55), transparent 62%),
    radial-gradient(110% 80% at 92% 106%, rgb(181 177 173 / 0.40), transparent 58%);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* Le grain. Une trame de bruit à 3,5 % sur toute la page, en `multiply` :
   elle mord le papier et ne fait rien sur les sections noires, où il n'y a
   plus de lumière à retirer. C'est elle qui sépare « un gris clair » de « du
   papier ». Elle se place sous le curseur (9999). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: 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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media print { body::after { display: none; } }

/* Le corps de texte est en Poppins italique. Les éléments de formulaire
   n'héritent pas de la police du document : il faut les nommer. */
body,
button, input, textarea, select, optgroup {
  font-style: italic;
  font-family: var(--texte);
}

/* L'italique s'arrête au texte courant : les titres en Melodrama et les
   métadonnées en mono reprennent leur dessin droit. */
.titre-geant, .titre-moyen, .titre-bloc, .titre-petit,
.mono, .etiquette, .tc,
.tete__nom, .menu a, .tete__nav a, .tete__lien-contact,
.bouton, .renvoi, .champ__label, .champ__erreur, .devis__etat, .puce span,
.faits dd, .contact__gros, .defile__lot, .plateau__titre,
.faq__item summary, .site__nom, .etape__jour, .pied__reseaux a, .pied__titre {
  font-style: normal;
}
/* seule exception : l'emphase dans les grands titres reste en italique */
.titre-geant em, .titre-moyen em { font-style: italic; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* les chiffres qui changent de valeur ne doivent pas faire danser la ligne */
.tc, .faits dd, .etape__jour, .chiffre__val { font-variant-numeric: tabular-nums; }

/* Le thème Astra colore tous les <button> au survol et au focus avec son
   bleu : chaque état déclare donc son propre fond, sans exception. */
button:hover, button:focus { background-color: inherit; color: inherit; }

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  padding: 14px 24px; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; font-style: normal;
}
.evitement:focus { left: 0; }


/* ── Typographie ─────────────────────────────────────────────────────────── */

.mono, .etiquette, .tc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sourdine);
}
.etiquette { display: block; margin: 0 0 clamp(13px, 2.2vh, 25px); }
.etiquette--clair { color: rgb(255 255 255 / 0.5); }

/* La pastille rouge est le point du logo, remis au travail : elle signifie
   « en cours ». C'est le seul motif répété du site. */
.pastille {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
  animation: pulsation 3s ease-in-out infinite;
}
@keyframes pulsation { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Les titres déclarent leur couleur au lieu de l'hériter : un conteneur
   Elementor impose la sienne, et l'héritage la laissait passer. */
.titre-geant {
  font-family: var(--titre-police);
  font-weight: 400;
  font-size: clamp(2.5rem, 8.4vw, 8.4rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--encre);
}
.titre-moyen {
  font-family: var(--titre-police);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.9vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.titre-bloc {
  font-family: var(--titre-police);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.25vw, 1.3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(14px, 2.2vh, 24px);
  color: var(--encre);
}
.titre-petit {
  font-family: var(--titre-police);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.05vw, 1.14rem);
  line-height: 1.2;
  color: var(--encre);
}

.chapeau {
  font-size: clamp(0.95rem, 0.75vw + 0.72rem, 1.14rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* La marge négative de la dernière ligne fusionnerait avec celle de la
   section et lui volerait sa respiration : le titre ferme donc son propre
   contexte de marges. */
.titre-geant, .titre-moyen, .titre-bloc, .titre-petit { display: flow-root; }

/* Le masque doit contenir les jambages. Avec une interligne à 0.86, les
   glyphes descendent de 0.20em sous la boîte de ligne : le « g » de « L'image
   d'abord » était tranché net par l'`overflow: hidden`. On réserve 0.22em, et
   on reprend l'excédent en marge négative. */
.ligne {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.14em;
}
.ligne > span, .ligne > em { display: block; }

.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════ SECTIONS SOMBRES — LA SALLE ══
   Les sections noires posent `color: #fff` et tout en hérite — sauf les
   titres, qui déclarent leur propre couleur : une déclaration explicite bat
   toujours l'héritage. On règle la question à la source, pour que les titres
   ajoutés plus tard depuis Elementor soient couverts d'office. */

.salle {
  background: var(--noir);
  color: #fff;
}
.salle .titre-geant,
.salle .titre-moyen,
.salle .titre-bloc,
.salle .titre-petit { color: #fff; }
.salle .mono, .salle .etiquette, .salle .tc { color: rgb(255 255 255 / 0.5); }
.salle .section__note, .salle .chapeau { color: rgb(255 255 255 / 0.78); }


/* ── Mise en page ────────────────────────────────────────────────────────── */
/* Chaque classe correspond à un conteneur Elementor. Rien d'autre. */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
}

.section { padding: var(--respire) var(--marge); }
.section--pale { background: var(--papier-pale); }
.section--serree { padding-block: calc(var(--respire) * 0.55); }

.section__tete {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 54px);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(28px, 3.6vw, 56px);
}
.section__tete > div { flex: 1 1 min(520px, 100%); }
.section__note { flex: 1 1 min(360px, 100%); max-width: 42ch; color: var(--sourdine); }

.rangee { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.4vw, 40px); }
.colonne { display: flex; flex-direction: column; gap: clamp(16px, 1.9vw, 26px); }

.col-2 { flex: 1 1 clamp(260px, 46%, 100%); min-width: 0; }
.col-3 { flex: 1 1 clamp(240px, 29%, 100%); min-width: 0; }
.col-4 { flex: 1 1 clamp(200px, 21%, 100%); min-width: 0; }


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

.tete {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px var(--marge) 13px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, padding .4s ease;
}
.tete.est-posee {
  background: rgb(231 230 225 / 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgb(20 21 26 / 0.12);
  padding-block: 10px;
}
/* Sur le plan d'ouverture, l'en-tête est posé sur du noir : il passe au blanc
   tant qu'il n'a pas pris son fond de papier.

   Le modificateur est indispensable. Sans lui, la règle visait toute
   `.tete:not(.est-posee)` — et les pages qui commencent par une section de
   papier (réalisations, contact, pages légales, 404) affichaient une
   navigation blanche sur fond clair : invisible jusqu'au premier défilement.
   Seules les pages dont la première section est sombre portent la classe. */
.tete--claire:not(.est-posee) .tete__nom,
.tete--claire:not(.est-posee) .tete__nav a,
.tete--claire:not(.est-posee) .tete__lien-contact { color: #fff; }
.tete--claire:not(.est-posee) .tete__sous { color: rgb(255 255 255 / 0.6); }
.tete--claire:not(.est-posee) .tete__burger span { background: #fff; }

.tete__marque { display: flex; align-items: baseline; gap: 12px; }
.tete__nom {
  font-family: var(--titre-police);
  font-size: 1.1rem; letter-spacing: -0.01em; color: var(--encre);
  white-space: nowrap;
  transition: color .4s ease;
}
.tete__sous {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sourdine);
  transition: color .4s ease;
}

.tete__nav { display: flex; gap: clamp(14px, 1.6vw, 26px); }
.tete__nav a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre);
  padding-block: 6px; position: relative;
  transition: color .3s ease;
}
/* Le filet se tire de gauche à droite au survol ; sur la page courante il est
   déjà tiré, et rouge. */
.tete__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.tete__nav a:hover::after, .tete__nav a:focus-visible::after { transform: scaleX(1); }
.tete__nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

.tete__droite { display: flex; align-items: center; gap: 20px; }

.tete__lien-contact {
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre);
  padding: 9px 15px;
  border: 1px solid rgb(20 21 26 / 0.2);
  transition: border-color .3s ease, background .3s ease, color .4s ease;
}
.tete__lien-contact:hover { border-color: var(--accent); background: rgb(225 33 75 / 0.07); }
.tete:not(.est-posee) .tete__lien-contact { border-color: rgb(255 255 255 / 0.3); }

.tete__burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
}
.tete__burger span {
  display: block; width: 24px; height: 1px; background: var(--encre);
  transition: transform .35s ease, opacity .25s ease, background .4s ease;
}
.tete__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.tete__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Tiroir mobile */
.menu {
  position: fixed; inset: 0; z-index: 890;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 100px var(--marge) var(--marge);
  background: var(--papier);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.menu.est-ouvert { transform: translateX(0); }
.menu a {
  font-family: var(--titre-police);
  font-size: clamp(1.6rem, 5.6vw, 2.4rem);
  line-height: 1.25; color: var(--encre);
  padding-block: 10px;
  border-bottom: var(--filet);
  transition: color .25s ease, padding-left .3s ease;
}
.menu a:hover, .menu a:focus-visible { color: var(--accent); padding-left: 10px; }
.menu__pied { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; }
.menu__pied a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 0; padding: 0;
}
body.menu-ouvert { overflow: hidden; }

@media (max-width: 1080px) {
  .tete__nav, .tete__lien-contact { display: none; }
  .tete__burger { display: flex; }
}


/* ── Ouverture ───────────────────────────────────────────────────────────── */

.ouverture {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 118px var(--marge) clamp(28px, 4vh, 50px);
  background: var(--noir);
  color: #fff;
}
.ouverture__fond { position: absolute; inset: 0; z-index: 0; }

/* Le plan est légèrement surdimensionné : le suivi de souris le déplace de
   quelques dizaines de pixels, et sans cette réserve on verrait le bord. */
.ouverture__fond video, .ouverture__fond img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.ouverture__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--noir) 2%, rgb(8 9 12 / 0.55) 42%, rgb(8 9 12 / 0.30) 100%),
    rgb(8 9 12 / 0.30);
}
.ouverture__contenu {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--largeur); margin-inline: auto;
}
.ouverture .titre-geant { color: #fff; }
.ouverture .chapeau { color: rgb(255 255 255 / 0.82); }
/* `.mono` porte le gris sourdine, calibré pour le papier (5,1:1). Sur le noir
   de l'ouverture il tombait à 3,13:1 — l'ardoise du plan devenait illisible.
   Même correctif que dans la salle. */
.ouverture .mono, .ouverture .etiquette { color: rgb(255 255 255 / 0.55); }

.ouverture__bas {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(22px, 3vw, 48px);
  margin-top: clamp(24px, 3vw, 42px);
}
.ouverture__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.faits {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 2.8vw, 48px);
  padding-top: 17px;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.faits > div { display: flex; flex-direction: column; gap: 4px; }
.faits dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.5); font-style: normal;
}
.faits dd {
  font-family: var(--titre-police);
  font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1; color: #fff;
}

/* L'ardoise : les informations d'un plan, telles qu'on les note */
.ouverture__ardoise {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 7px 17px; align-items: center;
  width: 100%; max-width: var(--largeur);
  margin: clamp(22px, 3vh, 40px) auto 0;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

/* Ouverture de page intérieure : même dispositif, deux tiers de hauteur. */
.ouverture--page { min-height: clamp(350px, 50svh, 490px); padding-top: 136px; }
.ouverture--page .titre-geant { font-size: clamp(2.2rem, 5.9vw, 5.2rem); }


/* ── Boutons ─────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--encre); color: var(--papier);
  border: 1px solid var(--encre);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.bouton:hover, .bouton:focus-visible {
  background: transparent; color: var(--encre); border-color: var(--encre);
}
.bouton__fleche { transition: transform .3s ease; }
.bouton:hover .bouton__fleche { transform: translateX(5px); }

.bouton--2 { background: transparent; color: var(--encre); border-color: rgb(20 21 26 / 0.24); }
.bouton--2:hover, .bouton--2:focus-visible { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* Sur fond noir, les deux boutons s'inversent. */
.salle .bouton, .ouverture .bouton {
  background: var(--papier); color: var(--encre); border-color: var(--papier);
}
.salle .bouton:hover, .ouverture .bouton:hover {
  background: transparent; color: #fff; border-color: #fff;
}
.salle .bouton--2, .ouverture .bouton--2 {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3);
}
.salle .bouton--2:hover, .ouverture .bouton--2:hover {
  background: #fff; color: var(--encre); border-color: #fff;
}

/* Renvoi de fin de section : un lien qui se souligne */
.renvoi {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(26px, 3vw, 44px);
  padding-bottom: 6px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre);
  border-bottom: 1px solid rgb(20 21 26 / 0.24);
  transition: border-color .3s ease, color .3s ease;
}
.renvoi:hover, .renvoi:focus-visible { border-bottom-color: var(--accent); color: var(--accent); }
.renvoi span { transition: transform .3s ease; }
.renvoi:hover span { transform: translateX(5px); }
.salle .renvoi { color: #fff; border-bottom-color: rgb(255 255 255 / 0.3); }
.salle .renvoi:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ── Médias ──────────────────────────────────────────────────────────────── */
/* Pas de coin arrondi : le registre est celui du tirage, pas de l'interface.
   Elementor : conteneur + widget Image + widget Éditeur de texte. */

.media { display: block; }

.cadre {
  position: relative; overflow: hidden;
  background: var(--studio);
}
.cadre img, .cadre video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.media:hover .cadre img { transform: scale(1.035); }

/* La ligne de plateau : format, focale, lieu. Ce sont les informations qu'un
   opérateur note sur son ardoise, pas de la décoration. */
.plateau {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px;
  margin-top: 11px; padding-top: 10px;
  border-top: var(--filet);
}
.plateau__titre {
  font-family: var(--titre-police);
  font-size: clamp(0.92rem, 1vw, 1.05rem);
  line-height: 1.2; color: var(--encre);
  margin-right: auto;
  transition: color .25s ease;
}
.salle .plateau { border-top-color: rgb(255 255 255 / 0.16); }
.salle .plateau__titre { color: #fff; }
a.media:hover .plateau__titre { color: var(--accent); }
.plateau .mono { white-space: nowrap; }

/* Formats — volontairement mélangés : on ne tourne pas tout au même format. */
.r-scope { aspect-ratio: 2.39 / 1; }
.r-large { aspect-ratio: 16 / 9; }
.r-ecran { aspect-ratio: 16 / 10; }
.r-photo { aspect-ratio: 4 / 5; }
.r-haut  { aspect-ratio: 2 / 3; }
.r-pano  { aspect-ratio: 2 / 1; }

.galerie { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 24px); }
.galerie > *       { flex: 1 1 clamp(240px, 30%, 100%); min-width: 0; }
.galerie > .large  { flex: 1 1 clamp(280px, 47%, 100%); }
.galerie > .pleine { flex: 1 1 100%; }

.embed__cadre {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--noir); border: 1px solid rgb(255 255 255 / 0.14);
}
.embed__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ── Les métiers ─────────────────────────────────────────────────────────── */
/* Trois colonnes séparées par un filet vertical — pas de carte, pas de fond.
   Le registre papier ne supporte pas la boîte : il supporte le filet. */

.metier {
  display: flex; flex-direction: column; gap: 13px;
  /* Remplit sa colonne : sans hauteur pleine, le `margin-top: auto` du renvoi
     n'a rien contre quoi pousser et les trois liens restent à des hauteurs
     différentes. */
  height: 100%;
  padding-left: clamp(16px, 1.8vw, 26px);
  border-left: var(--filet);
}
.salle .metier { border-left-color: rgb(255 255 255 / 0.16); }
.metier__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.metier p { color: var(--sourdine); }
.salle .metier p { color: rgb(255 255 255 / 0.7); }
.metier ul { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.metier li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sourdine);
  font-style: normal;
}
.metier li::before { content: ""; width: 4px; height: 4px; background: var(--accent); flex: 0 0 auto; }
.salle .metier li { color: rgb(255 255 255 / 0.5); }
/* `auto` et non une valeur fixe : les trois colonnes n'ont pas la même
   longueur de texte, et un écart fixe laissait les renvois à trois hauteurs
   différentes. La marge automatique les pousse au bas de leur colonne, donc
   sur une même ligne. */
.metier .renvoi { margin-top: auto; padding-top: 13px; align-self: flex-start; }


/* ── Le déroulé ──────────────────────────────────────────────────────────── */
/* La numérotation est légitime : J+0, J+7, J+21 sont des jours réels. */

.deroule { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.4vw, 38px); }
.etape {
  flex: 1 1 clamp(240px, 29%, 100%); min-width: 0;
  display: flex; flex-direction: column; gap: 11px;
  padding-top: 17px; border-top: 1px solid rgb(20 21 26 / 0.24);
}
.etape__jour { font-family: var(--mono); font-size: clamp(1.25rem, 1.85vw, 1.65rem); color: var(--accent); line-height: 1; }
.etape p { color: var(--sourdine); }
.salle .etape { border-top-color: rgb(255 255 255 / 0.28); }
.salle .etape p { color: rgb(255 255 255 / 0.7); }


/* ── Chiffres ────────────────────────────────────────────────────────────── */

.chiffre { display: flex; flex-direction: column; gap: 6px; }
.chiffre__val {
  font-family: var(--titre-police);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--encre);
}
.chiffre__val .suffixe { color: var(--accent); }
.chiffre__lib { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sourdine); }
.salle .chiffre__val { color: #fff; }
.salle .chiffre__lib { color: rgb(255 255 255 / 0.5); }


/* ── Témoignages ─────────────────────────────────────────────────────────── */

.avis {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding-top: 18px;
  border-top: 1px solid rgb(20 21 26 / 0.24);
}
.etoiles { display: inline-flex; gap: 3px; color: var(--accent); }
.etoiles svg { width: 14px; height: 14px; fill: currentColor; }
.avis__texte {
  font-family: var(--titre-police); font-style: normal;
  font-size: clamp(1rem, 1.15vw, 1.18rem); line-height: 1.35;
  letter-spacing: -0.01em; color: var(--encre);
}
.avis__qui { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.avis__nom { font-size: 0.92rem; color: var(--sourdine); }
.salle .avis { border-top-color: rgb(255 255 255 / 0.28); }
.salle .avis__texte { color: #fff; }
.salle .avis__nom { color: rgb(255 255 255 / 0.7); }


/* ── Accordéon ───────────────────────────────────────────────────────────── */
/* <details>/<summary> natif — l'accordéon reprend le dessin de la FAQ : des
   filets, pas une boîte. */

.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: var(--filet); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(15px, 1.7vw, 22px) 0;
  cursor: pointer; list-style: none;
  font-family: var(--titre-police);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: -0.015em; color: var(--encre);
  transition: color .25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }

.faq__signe { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.faq__signe::before, .faq__signe::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.faq__signe::before { inset: 6.5px 0 auto 0; height: 1px; }
.faq__signe::after  { inset: 0 auto 0 6.5px; width: 1px; }
.faq__item[open] .faq__signe::after { transform: rotate(90deg); }

.faq__reponse { padding-bottom: clamp(15px, 1.7vw, 22px); max-width: 68ch; color: var(--sourdine); }
.faq__reponse p { margin: 0 0 0.9em; }
.faq__reponse p:last-child { margin-bottom: 0; }
.salle .faq__item { border-bottom-color: rgb(255 255 255 / 0.16); }
.salle .faq__item summary { color: #fff; }
.salle .faq__reponse { color: rgb(255 255 255 / 0.7); }


/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact__liens { display: flex; flex-direction: column; gap: 6px; }
.contact__gros {
  /* Un <a> est inline par nature. Dans la maquette il était l'enfant direct
     d'un conteneur flex en colonne, donc il se comportait en bloc. Une fois
     converti, le convertisseur regroupe les deux coordonnées dans un même
     bloc : elles redevenaient inline et s'affichaient côte à côte, par-dessus
     le titre. On le déclare bloc — juste dans les deux contextes. */
  display: block;
  width: fit-content;
  font-family: var(--titre-police);
  font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.25;
  color: inherit; padding-block: 5px;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  transition: color .28s ease, border-color .28s ease, padding-left .3s ease;
  word-break: break-word;
}
.contact__gros:hover, .contact__gros:focus-visible {
  color: var(--accent); border-bottom-color: var(--accent); padding-left: 10px;
}


/* ── Devis ───────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: clamp(18px, 1.9vw, 25px); }
.champ { display: flex; flex-direction: column; gap: 8px; border: 0; min-width: 0; }
.champ__label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.5);
}
.champ__saisie {
  width: 100%; padding: 11px 0;
  background: transparent; border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  color: #fff;
  font-family: var(--texte); font-style: italic;
  font-size: 16px;  /* 16 px minimum : en dessous, iOS zoome au focus */
  transition: border-color .3s ease;
}
.champ__saisie::placeholder { color: rgb(255 255 255 / 0.35); }
.champ__saisie:focus { outline: none; border-bottom-color: var(--accent); }
.champ__saisie--long { resize: vertical; min-height: 104px; }

.champ__erreur {
  min-height: 1em;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  /* Le rouge de charte ne passe pas 4,5:1 en petit corps. Un message d'erreur
     doit être lisible avant d'être à la marque. */
  color: #FF8FA6;
}
.champ.est-en-erreur .champ__saisie { border-bottom-color: #FF8FA6; }

/* puces de sélection */
.puces { display: flex; flex-wrap: wrap; gap: 9px; }
.puce { position: relative; display: inline-flex; }
.puce input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.puce span {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid rgb(255 255 255 / 0.28);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.86);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.puce:hover span { border-color: rgb(255 255 255 / 0.5); }
.puce input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.paire { display: flex; flex-wrap: wrap; gap: clamp(18px, 1.9vw, 25px); }
.paire > .champ { flex: 1 1 clamp(200px, 45%, 100%); }

/* piège à robots */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.devis__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.devis__mentions { flex: 1 1 300px; font-size: 0.86rem; color: rgb(255 255 255 / 0.55); }
.devis__etat {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; min-height: 1.2em;
}
.devis__etat[data-ton="ok"] { color: #7BE0A6; }
.devis__etat[data-ton="ko"] { color: #FF8FA6; }


/* ── Défilé des clients ──────────────────────────────────────────────────── */
/* La piste est doublée dans le HTML : quand la première moitié sort, la
   seconde a pris sa place, et la translation revient à 0 sans que rien ne
   saute. */

.defile {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defile__piste { display: flex; width: max-content; animation: defile 42s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.defile__lot { display: flex; align-items: center; flex-shrink: 0; }
.defile__lot li {
  font-family: var(--titre-police);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  color: var(--sourdine);
  padding: 0 clamp(20px, 2.8vw, 42px);
  white-space: nowrap;
  transition: color .3s ease;
}
.defile__lot li:hover { color: var(--encre); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ── Pied ────────────────────────────────────────────────────────────────── */

.pied { background: var(--noir); color: #fff; padding: var(--respire) var(--marge) 28px; }
.pied__haut {
  display: flex; flex-wrap: wrap; gap: clamp(26px, 3vw, 54px);
  max-width: var(--largeur); margin-inline: auto;
}
/* Les quatre colonnes doivent tenir sur une ligne dès 1 100 px. Avec les
   anciennes bases (260 + 3 × 190 + les écarts), il en fallait 1 250 : la
   colonne « Contact » passait seule à la ligne suivante en laissant un trou. */
.pied__bloc { flex: 1 1 clamp(150px, 19%, 100%); display: flex; flex-direction: column; gap: 11px; }
.pied__bloc--large { flex: 1 1 clamp(220px, 25%, 100%); }
/* `align-self` est indispensable, pas décoratif. `.pied__bloc` est un
   conteneur flex en colonne : ses enfants héritent d'`align-items: stretch` et
   sont étirés sur toute la largeur de la colonne. Sur une image, l'étirement
   de l'axe transversal l'emporte sur `width: auto` — le logo passait à
   340 × 40, soit un ratio de 8,5 pour un dessin qui en fait 2,575. Il était
   écrasé aux trois quarts. */
.pied__logo { height: 42px; width: auto; align-self: flex-start; }
.pied__titre {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.5);
  margin-bottom: 3px;
}
.pied__reseaux { display: flex; flex-direction: column; gap: 9px; }
.pied__reseaux a { font-size: 0.92rem; color: rgb(255 255 255 / 0.86); width: fit-content; transition: color .25s ease; }
.pied__reseaux a:hover { color: var(--accent); }
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  max-width: var(--largeur); margin: clamp(34px, 3.8vw, 58px) auto 0;
  padding-top: 19px; border-top: 1px solid rgb(255 255 255 / 0.16);
}
/* .mono porte la couleur du texte secondaire sur papier : sur le fond noir du
   pied, il faut la relever. */
.pied .mono { color: rgb(255 255 255 / 0.5); }
.pied__legal { display: flex; gap: 22px; }


/* ── Pages de texte long ─────────────────────────────────────────────────── */

.legal { max-width: 72ch; }
.legal h2 {
  font-family: var(--titre-police); font-weight: 400; font-style: normal;
  font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--encre);
  margin: clamp(26px, 3vw, 40px) 0 11px;
  padding-top: clamp(17px, 1.8vw, 23px);
  border-top: var(--filet);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal p { margin: 0 0 1.05em; }
.legal ul { display: flex; flex-direction: column; margin: 0 0 16px; }
.legal ul li { padding: 9px 0; border-bottom: var(--filet); }
.legal ul li:last-child { border-bottom: none; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }


/* ── Curseur rond ────────────────────────────────────────────────────────── */
/* Le curseur système est remplacé par un point et un anneau qui le suit avec
   un temps de retard. Le mélange « difference » le garde lisible sur le papier
   comme sur le noir, sans avoir à changer sa couleur — c'est ce qui évite de
   devoir le repeindre section par section.

   Il n'apparaît qu'au pointeur fin : au doigt, un curseur dessiné n'a aucun
   sens et masquerait le contenu. La classe est posée par le script. */

.curseur { display: none; }

body.a-curseur .curseur { display: block; }
body.a-curseur, body.a-curseur * { cursor: none; }

.curseur__anneau, .curseur__point {
  position: fixed; top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}

.curseur__anneau {
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid #fff;
  transition: width .38s cubic-bezier(.16,1,.3,1),
              height .38s cubic-bezier(.16,1,.3,1),
              margin .38s cubic-bezier(.16,1,.3,1),
              background-color .38s ease,
              opacity .3s ease;
}

.curseur__point {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: #fff;
  transition: opacity .3s ease;
}

/* survol d'un élément cliquable : l'anneau s'ouvre et se remplit */
body.curseur-actif .curseur__anneau {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  background: #fff;
}
body.curseur-actif .curseur__point { opacity: 0; }

/* pendant l'appui */
body.curseur-presse .curseur__anneau { opacity: .55; }

/* Le mot posé dans l'anneau au survol d'un média : « Extrait », « Voir ».
   Il dit ce que fera le clic, ce qu'un anneau seul ne dit pas. */
.curseur__mot {
  position: fixed; top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre);
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
body.curseur-mot .curseur__mot { opacity: 1; }
body.curseur-mot .curseur__anneau {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  background: #fff;
}


/* ── Boutons magnétiques ─────────────────────────────────────────────────── */
/* Le bouton se déplace de quelques pixels vers le curseur qui l'approche.
   `will-change` seulement pendant l'interaction : posé en permanence, il
   forcerait une couche de composition par bouton. */
.bouton, .renvoi { will-change: auto; }


/* ── Révélation au défilement ────────────────────────────────────────────── */
/* L'état masqué est conditionné à la classe `js`, posée en tête de document
   par un script en ligne. Sans JavaScript la classe n'est jamais posée et
   tout s'affiche : un titre en opacity:0 qui attend un script absent est un
   titre définitivement invisible. */

.js .reveler { opacity: 0; transform: translateY(22px); }
.js .reveler.est-vue {
  opacity: 1; transform: none;
  transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1);
}


/* ── Mouvement réduit ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveler { opacity: 1 !important; transform: none !important; }
  .defile__piste { animation: none; }
  .pastille { animation: none; }
  .ouverture__fond video, .ouverture__fond img { transform: scale(1.02); }
}


/* ── Adaptations ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .section__tete { align-items: flex-start; }
  .metier { padding-left: 18px; }
  .ouverture { min-height: 92svh; }
}

@media (max-width: 640px) {
  /* Sur mobile un 2.39:1 fait 40 px de haut : on redresse les formats les
     plus étirés pour que l'image reste lisible. */
  .r-scope { aspect-ratio: 16 / 9; }
  .r-pano  { aspect-ratio: 3 / 2; }
  .faits { gap: 18px 26px; }
  .plateau { gap: 5px 10px; }
  .galerie > *, .galerie > .large { flex: 1 1 100%; }
}

/* ── Cibles tactiles ─────────────────────────────────────────────────────── */
/* WCAG 2.5.8 demande 24 × 24 px au minimum. Les liens en ligne du pied et des
   réseaux sociaux tombaient à 14 px de haut : au doigt, on vise à côté.
   On élargit la zone cliquable sans écarter le texte, en jouant sur le
   remplissage vertical plutôt que sur l'interligne — l'espacement visuel des
   listes ne bouge donc pas. */
@media (hover: none), (pointer: coarse) {
  .menu__pied a,
  .pied__reseaux a,
  .pied__legal a {
    padding-block: 11px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Le remplissage a doublé l'écart entre les liens : on le reprend. */
  .pied__reseaux { gap: 0; }
  .menu__pied { gap: 4px 18px; }
}

@media (min-width: 1800px) { :root { --marge: 110px; } }

@media print {
  .tete, .menu, .tete__burger, .ouverture__fond, .defile { display: none !important; }
  body { background: #fff; color: #000; }
}