/* ===========================================================================
   TEC'OFFICE M08 — ACCUEIL : feuille des scenes de la page (scenes-index.js)
   ---------------------------------------------------------------------------
   Regle d'or : rien n'est jamais cache par cette feuille seule.
   Chaque etat de depart passe par une variable dont la valeur par defaut
   laisse le trait entier, ou par une classe que SEUL le script pose, et
   seulement quand GSAP est la. Sans GSAP, la page est celle d'avant.
   =========================================================================== */

/* variables animees. --f-k / --f-k2 pilotent des pseudo-elements (::before,
   ::after) : elles doivent donc s'heriter, sinon le pseudo-element garde la
   valeur initiale et le trait ne se trace jamais. --cx / --cb ne servent que
   sur l'element lui-meme : non heritees. */
@property --f-k  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --f-k2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --cx   { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --cb   { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---- 1. ENVELOPPES NEUTRES -----------------------------------------------
   .pzoom porte le zoom lent des medias : l'image garde son propre survol. */
.pzoom { display: block; width: 100%; height: 100%; }
.calm-fig .pzoom { height: auto; }

/* boites posees par le script autour d'un mot, d'une ligne, d'un texte libre */
si-lg, si-li { display: block; }
/* le masque d'une ligne laisse respirer accents et jambages */
si-lg { clip-path: inset(-.4em -.3em -.2em -.3em); }
si-li { will-change: transform; }

/* ---- 2. FILETS QUI SE TRACENT ---------------------------------------------
   Le temps du trace, la bordure est remplacee par un trait identique
   (meme epaisseur, meme couleur, lues sur la page) qui pousse depuis la
   gauche. Le script retire la classe a la fin : la vraie bordure revient. */
.f-t, .f-b { position: relative; }
.f-t { border-top-color: transparent !important; }
.f-b { border-bottom-color: transparent !important; }
.f-t::before, .f-b::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: var(--f-w, 1px); background: var(--f-c, currentColor);
  transform: scaleX(var(--f-k, 1)); transform-origin: left center;
  pointer-events: none;
}
.f-t::before { top: calc(-1 * var(--f-w, 1px)); }
.f-b::after  { bottom: calc(-1 * var(--f-w, 1px)); }

/* sur-titre et regle du titre du hero */
.hero .eyebrow.si-trait::before,
.hero h1.si-trait::after { transform: scaleX(var(--f-k, 1)); transform-origin: left center; }

/* cartouche PL-01 : le trait court, puis la grande ligne de rappel */
.plref.si-pl::before { transform: scaleX(var(--f-k2, 1)); transform-origin: left center; }
.plref.si-pl::after  { transform: scaleX(var(--f-k, 1));  transform-origin: left center; }

/* cartouche FIG. : son trait de rappel vers l'image */
.figtag.si-fig::after { transform: scaleX(var(--f-k, 1)); transform-origin: left center; }

/* ---- 3. CADRE DE PLANCHE (sections sombres) -------------------------------
   --cx : 1 = trait du haut replie au centre, 0 = trait entier.
   --cb : part de la hauteur encore a tracer (1 = rien, 0 = cadre ferme).
   Les 3 px de marge gardent les equerres d'angle (::before en inset -1px). */
.tframe.si-cadre {
  clip-path: inset(-3px calc(var(--cx) * 50% - 3px) calc(var(--cb) * 100% - 3px) calc(var(--cx) * 50% - 3px));
}

/* ---- 4. IMPRESSION : jamais une planche a moitie tracee sur papier ------- */
@media print {
  [data-mouv="si"], [data-mouv="si"] * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* ===========================================================================
   PASSE DU 07/10 (apres-midi) — ce qui doit SE VOIR
   Yann : « niveau animation ou design t'as pas fait grand chose de plus ».
   1. le hero s'agrandit : la planche va jusqu'au bord droit de l'ecran ;
   2. les solutions sont reperees SUR le plan (01 a 04), cliquables ;
   3. « Du plan a la realite » : planche epinglee, le plan devient une vraie photo ;
   4. « En vrai » : deux rangs de vraies photos qui glissent en sens contraires.
   Regle d'or inchangee : sans GSAP (ou mouvement reduit), tout est visible.
   =========================================================================== */

/* ---- 1. HERO PLUS GRAND ------------------------------------------------- */
@media (min-width: 1101px) {
  .hero-grid {
    max-width: none;
    padding-left: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
    padding-right: 0;
    grid-template-columns: clamp(400px, 35vw, 520px) minmax(0, 1fr);
  }
  .stage { border-radius: 8px 0 0 8px; min-height: min(72vh, 680px); }
  /* plan plus grand : la cote du haut ne doit pas traverser le cartouche */
  .stage-in { padding-top: max(clamp(54px, 6.6vh, 78px), 100px); }
}

/* ---- 2. LES SOLUTIONS SUR LE PLAN -------------------------------------- */
.solplan { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  transition: opacity .3s cubic-bezier(.23,1,.32,1), visibility .3s; }
.stage.is2d .solplan { opacity: 0; visibility: hidden; }
.sp { position: absolute; inset: 0; pointer-events: none; color: var(--ink); text-decoration: none; }
.sp-trait { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-trait line { stroke: var(--ink); stroke-width: 1.5; opacity: 1;
  transition: opacity .2s ease, stroke-width .2s ease; }
.sp-pt { position: absolute; left: var(--mx); top: var(--my); width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; color: var(--ink); pointer-events: auto;
  box-shadow: 0 8px 18px -8px rgba(19,19,18,.55);
  transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.23,1,.32,1); }
.sp-pt::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* zone de toucher */
.sp-pt::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--ink);
  opacity: 0; pointer-events: none; }
.solplan.vu .sp-pt::after { animation: sp-onde 3.2s cubic-bezier(.23,1,.32,1) infinite; }
.solplan.vu .sp:nth-child(2) .sp-pt::after { animation-delay: .8s; }
.solplan.vu .sp:nth-child(3) .sp-pt::after { animation-delay: 1.6s; }
.solplan.vu .sp:nth-child(4) .sp-pt::after { animation-delay: 2.4s; }
@keyframes sp-onde { 0% { transform: scale(1); opacity: .55; } 65%, 100% { transform: scale(2.4); opacity: 0; } }
html.doux .solplan.vu .sp-pt::after { animation: none; }

.sp-lab { position: absolute; pointer-events: auto; display: grid; grid-template-columns: auto auto; column-gap: 9px;
  width: max-content; max-width: 220px; padding: 8px 12px 9px 10px; background: rgba(242,241,237,.93);
  border-bottom: 1.5px solid var(--ink); border-radius: 3px 3px 0 0;
  transition: background .2s ease, color .2s ease; }
.sp-lab b { grid-row: 1 / span 2; font-family: var(--mono); font-weight: 400; font-size: 9.5px; color: var(--mute);
  padding-top: 2px; transition: color .2s ease; }
.sp-lab strong { font-family: var(--disp); font-weight: 800; font-size: 12.5px; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.sp-lab strong::after { content: "→"; font-weight: 400; display: inline-block; margin-left: 7px;
  transition: transform .2s cubic-bezier(.23,1,.32,1); }
.sp-lab em { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--mute); margin-top: 2px;
  transition: color .2s ease; }
.sp-tr .sp-lab { right: -2%; top: -1%; }
.sp-tl .sp-lab { left: 1.5%; top: 5%; }
.sp-bl .sp-lab { left: 1.5%; bottom: -1%; }
.sp-br .sp-lab { right: -2%; bottom: 7%; }
@media (hover: hover) and (pointer: fine) {
  .sp:hover .sp-pt { background: var(--ink); color: var(--paper); transform: scale(1.14); }
  .sp:hover .sp-trait line { opacity: 1; stroke-width: 1.8; }
  .sp:hover .sp-lab { background: var(--ink); color: var(--paper); }
  .sp:hover .sp-lab b, .sp:hover .sp-lab em { color: #c9c8c2; }
  .sp:hover .sp-lab strong::after { transform: translateX(4px); }
}
.sp:active .sp-pt { transform: scale(.94); }
.sp:focus-visible { outline: none; }
.sp:focus-visible .sp-lab { outline: 2px solid var(--ink); outline-offset: 3px; }
.sp:focus-visible .sp-pt { background: var(--ink); color: var(--paper); }

/* legende (ecrans etroits : les etiquettes n'ont pas la place sur le plan) */
.sp-legende { display: none; }
@media (max-width: 1100px) {
  .sp-lab, .sp-trait { display: none; }
  .sp-legende { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; list-style: none; margin: 18px 0 0; padding: 0; }
  .sp-legende li { border-top: 1px solid var(--line2); }
  .sp-legende a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
    min-height: 56px; padding: 10px 0; color: var(--ink); text-decoration: none; }
  .sp-legende a::after { content: "→"; color: var(--mute); transition: transform .2s cubic-bezier(.23,1,.32,1); }
  .sp-legende a:active::after { transform: translateX(4px); }
  .sp-legende b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--ink); font-family: var(--mono); font-weight: 400; font-size: 9.5px; }
  .sp-legende span { font-size: 12px; line-height: 1.4; color: var(--mute); }
  .sp-legende strong { display: block; font-family: var(--disp); font-weight: 800; font-size: 13px;
    letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
}
@media (max-width: 600px) {
  .sp-legende { grid-template-columns: 1fr; }
  .sp-pt { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 8.5px; }
}

/* ---- 3. DU PLAN A LA REALITE ------------------------------------------- */
.pr { padding: var(--sp) 0 0; }
.pr-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.pr-texte .plref { margin-bottom: 0; }
.pr-h2 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 4.4vw, 74px);
  line-height: .92; letter-spacing: -.04em; margin: clamp(18px, 2.6vh, 28px) 0 clamp(26px, 4vh, 44px); }
.pr-etapes { list-style: none; margin: 0 0 clamp(26px, 4vh, 40px); padding: 0; }
.pr-e { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 4px 12px; padding: 16px 0 17px;
  border-top: 1px solid var(--line); }
.pr-e:last-child { border-bottom: 1px solid var(--line); }
.pr-e > b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; color: var(--mute);
  padding-top: 4px; transition: color .3s ease; }
.pr-e strong { display: block; font-family: var(--disp); font-weight: 800; font-size: clamp(16px, 1.25vw, 19px);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.pr-e i { display: block; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--mute); margin-top: 5px; max-width: 46ch; }
.pr-e::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.23,1,.32,1); }

.pr-planche { position: relative; }
.pr-c { position: relative; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); }
.pr-m { aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; }
.pr-plan { color: var(--ink);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 40px,
              linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 100%, var(--white); }
.pr-plan svg { width: 86%; height: auto; }
.pr-iso { background: radial-gradient(70% 70% at 50% 46%, #fff 0%, var(--paper) 100%); }
.pr-iso img { width: 94%; height: auto; filter: drop-shadow(0 30px 40px rgba(19,19,18,.22)); }
.pr-photo img { width: 100%; height: 100%; object-fit: cover; }
.pr-c figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--mono); font-size: 9px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink); background: rgba(242,241,237,.94);
  padding: 6px 10px 5px; border-radius: 2px; }
.pr-c figcaption b { font-weight: 400; color: var(--mute); margin-right: 8px; }
.pr-cote, .pr-cadre { display: none; }

/* sequence jouee a l'arrivee : grand ecran + GSAP seulement (classe posee par le script) */
.pr.pr-sequence .pr-planche { aspect-ratio: 3 / 2; max-height: calc(100vh - 150px); }
.pr.pr-sequence .pr-c { position: absolute; inset: 0; margin: 0; }
.pr.pr-sequence .pr-m { height: 100%; aspect-ratio: auto; }
.pr.pr-sequence .pr-e { opacity: .34; transition: opacity .35s ease; }
.pr.pr-sequence .pr-e.on { opacity: 1; }
.pr.pr-sequence .pr-e.on > b { color: var(--ink); }
.pr.pr-sequence .pr-e.on::before { transform: scaleX(1); }
.pr.pr-sequence .pr-cadre { display: block; position: absolute; inset: -12px; border: 1px solid var(--line2);
  border-radius: 12px; pointer-events: none; }
.pr.pr-sequence .pr-cote { display: block; position: absolute; left: -46px; top: 0; bottom: 0; width: 22px; }
.pr-cote-ln, .pr-cote-k { position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.pr-cote-k { background: var(--ink); width: 2px; left: 9.5px; transform-origin: top center; }
.pr-cote span { position: absolute; right: 26px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: var(--mute); transform: translateY(-50%); }
.pr-cote span:nth-of-type(1) { top: 0; }
.pr-cote span:nth-of-type(2) { top: 50%; }
.pr-cote span:nth-of-type(3) { top: 100%; }
@media (max-width: 899px) {
  .pr-in { grid-template-columns: 1fr; }
}

/* ---- 4. EN VRAI : deux rangs de vraies photos -------------------------- */
.ev { margin-top: clamp(70px, 10vh, 130px); overflow: hidden; }
.ev-rang { display: flex; gap: clamp(12px, 1.3vw, 20px); padding: 0 var(--pad); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.ev-rang::-webkit-scrollbar { display: none; }
.ev-rang + .ev-rang { margin-top: clamp(12px, 1.3vw, 20px); }
.ev-c { position: relative; flex: 0 0 auto; height: clamp(220px, 36vh, 400px); border-radius: 6px; overflow: hidden;
  scroll-snap-align: start; background: var(--paper2); color: var(--ink); text-decoration: none; }
.ev-p { aspect-ratio: 3 / 4; }
.ev-l { aspect-ratio: 4 / 3; }
.ev-c img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.23,1,.32,1); }
.ev-cap { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; max-width: calc(100% - 20px); letter-spacing: .1em !important;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  background: rgba(242,241,237,.94); padding: 6px 9px 5px; border-radius: 2px;
  transition: background .2s ease, color .2s ease; }
.ev-cap b { font-weight: 400; color: var(--mute); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .ev-c:hover img { transform: scale(1.06); }
  .ev-c:hover .ev-cap { background: var(--ink); color: var(--paper); }
  .ev-c:hover .ev-cap b { color: #c9c8c2; }
}
.ev-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ev.ev-anime .ev-rang { overflow: visible; scroll-snap-type: none; width: max-content; }
.ev-pied { max-width: var(--maxw); margin: clamp(26px, 4vh, 40px) auto 0; padding: 0 var(--pad);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* la cafeteria (paysage) remplace le hall : cadrage un peu plus haut */
.calm-fig img { object-position: 50% 55%; }

/* chaque planche garde sa legende pour elle : la photo (C) recouvre tout le volume (B) */
.pr-c { isolation: isolate; }
.pr.pr-sequence .pr-c1 { z-index: 1; }
.pr.pr-sequence .pr-c2 { z-index: 2; }
.pr.pr-sequence .pr-c3 { z-index: 3; }

/* ===========================================================================
   PASSE RESPONSIVE DU 07/10 — telephones et tablettes
   Yann : « optimise a mort les versions responsive… visuellement parfait ».
   Tout est borne a max-width 1279 px (ou moins) : le bureau (>= 1280 px)
   ne bouge pas d'un pixel. Rien n'est cache ici : ces regles ne posent que
   des tailles, des grilles et des marges (la regle d'or tient toujours).
   =========================================================================== */

/* cartouche FIG. en deux morceaux (voir A) : rendu inchange sur grand ecran */
.figtag i, .pr-c figcaption i, .calm-fig figcaption i, .knock .over i, .ctc-foot i { font-style: normal; }

/* ---- A. TABLETTES ET TELEPHONES (<= 1100 px) ----------------------------- */
@media (max-width: 1100px) {
  /* tete de planche : la legende mono passe sous le titre, alignee a gauche
     (a 768 px elle flottait au milieu de la ligne, entre titre et marge) */
  .sec-head .sec-tag { flex: 1 0 100%; margin-left: 0; text-align: left; max-width: none; line-height: 1.8; }
  .sec-head h2 { font-size: clamp(38px, 5.4vw, 56px); }
  .pole h3, .pr-e strong, .pquote blockquote { text-wrap: balance; }
  /* paragraphes : pas de dernier mot seul sur sa ligne (« 20 ans. », « equipes. ») */
  .hero .lede, .sec-lede, .pole p, .pr-e i, .cta-main > p, .ctc-list i { text-wrap: pretty; }
  /* legendes des photos « en vrai » : le texte passe sous le numero au lieu
     de s'enrouler dans une colonne de 120 px a cote */
  .ev-cap { display: block; text-wrap: balance; }
  .ev-cap b { margin-right: 8px; }
  /* sans GSAP (mouvement reduit) les rangs se font defiler au doigt : la carte
     s'aimante sur la gouttiere, pas contre le bord de l'ecran */
  .ev-rang { scroll-padding-inline: var(--pad); }
  /* cartouche FIG. des fiches : numero au-dessus, legende pleine largeur
     (sinon le texte s'enroule a cote du numero et finit sur un « · ») */
  .figtag { flex-direction: column; align-items: flex-start; gap: 3px; }
  .figtag .ft-s { display: none; }
  .figtag .ft-b { display: block; }
  .calm-fig figcaption { text-wrap: balance; }
}

/* ---- A bis. DU PLAN A LA REALITE epinglee sur tablette paysage ----------
   La cote 01-02-03 se loge a 46 px a gauche de la planche : avec la gouttiere
   de 41 px, ses chiffres tombaient dans le texte des etapes (« chaque 03 »). */
@media (min-width: 900px) and (max-width: 1100px) {
  .pr.pr-sequence .pr-in { column-gap: 84px; }
}
/* preuve et appel final : sur tablette paysage et telephone couche, deux
   colonnes comme sur le bureau (la colonne unique etirait le verbatim et la
   cartouche sur toute la largeur, et doublait la hauteur des sections) */
@media (min-width: 960px) and (max-width: 1100px),
       (min-width: 700px) and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .proof-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(28px, 3.6vw, 44px); }
}

/* ---- B. TABLETTES (601 a 1100 px) ---------------------------------------- */
@media (min-width: 601px) and (max-width: 1100px) {
  /* hero : un titre a l'echelle de l'ecran, pas une version telephone etiree */
  .hero h1 { font-size: clamp(46px, 7.2vw, 62px); }
  .hero .lede { font-size: 17px; max-width: 62ch; }

  /* trois poles : deux colonnes, fiches de meme hauteur, photo 4:3 */
  .poles { grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 28px); }
  .pmedia { height: auto; aspect-ratio: 4 / 3; }
  .pbody { padding: clamp(22px, 2.6vw, 30px); gap: 10px; }
  .pole p { font-size: 15px; }

  .pr-h2 { line-height: .98; }
  .calm-say { font-size: clamp(32px, 4.6vw, 44px); }
  .cta h2 { font-size: clamp(42px, 6vw, 58px); }

  /* etiquettes mono de 8 a 9 px : un cran au-dessus sur tablette */
  .figtag, .fref, .ev-cap, .calm-fig figcaption em, .pr-c figcaption { font-size: 9.5px; }
  .calm-fig figcaption, .stat .lbl, .ctc-lab, .ctc-foot, .mks-lab, .pquote footer { font-size: 10px; }
  .stage-cart { font-size: 9.5px; }
  .sp-legende strong { font-size: 14px; }
  .sp-legende span { font-size: 13px; }

  /* cafeteria : la photo ne fait que 290 a 350 px de haut ; le voile du bureau
     (fin a 46 %) croisait son palier de 134 px et tracait une marche nette */
  .calm-fig::after { background: linear-gradient(to top, rgba(11,10,8,.93) 0, rgba(11,10,8,.74) 62px,
    rgba(11,10,8,.3) 134px, rgba(11,10,8,0) max(46%, 200px)); }

  /* SUR-MESURE et appel final : moins de papier vide autour du bandeau */
  .knock { margin-top: clamp(84px, 10vh, 120px); }
  .cta { margin-top: clamp(84px, 10vh, 120px); }
}

/* ---- C. DU PLAN A LA REALITE, version empilee de tablette (601-899) ----- */
@media (min-width: 601px) and (max-width: 899px) {
  /* le plan et le volume cote a cote, la realisation en grand dessous :
     on lit la sequence d'un coup d'oeil au lieu de trois planches de 450 px */
  .pr-planche { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pr-c { margin: 0; }
  .pr-c3 { grid-column: 1 / -1; }
  .pr-c3 .pr-m { aspect-ratio: 16 / 9; max-height: 74vh; }
  /* largeur imposee : avec un ratio, le plafond de hauteur se reportait sur la
     largeur et la photo ne couvrait plus que 60 % de sa planche (telephone couche) */
  .pr-c .pr-m { width: 100%; }
  .pr-c .pr-photo { display: block; }
  .pr-h2 { font-size: clamp(50px, 7.6vw, 66px); }
}

/* ---- D. LEGENDES DES PLANCHES EMPILEES (<= 899 px) ----------------------
   La legende quitte l'image et se pose dessous, comme sous une figure de
   rapport : elle ne masque plus le bas du plan (accueil, impression). */
@media (max-width: 899px) {
  .pr-c figcaption { position: static; background: none; border-top: 1px solid var(--line);
    padding: 11px 14px 10px; border-radius: 0; line-height: 1.6; text-wrap: balance; }
  .pr-h2 { line-height: .98; }
  .pr-in { row-gap: clamp(40px, 6vh, 56px); }
}

/* ---- E. HERO EN DEUX COLONNES : tablette paysage (960-1100) et telephone
   couche (hauteur <= 520 px). Texte a gauche, planche a droite, legende des
   reperes sous la planche : la premiere vue montre enfin le plan. -------- */
@media (min-width: 960px) and (max-width: 1100px),
       (min-width: 700px) and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 32px; row-gap: 0; align-items: center; }
  .hero-left { grid-row: 1 / span 2; }
  .stage { grid-column: 2; grid-row: 1; }
  .sp-legende { grid-column: 2; grid-row: 2; align-self: start; }
  .hero h1 { font-size: calc((100vw - 2 * var(--pad) - 32px) * .05); }
  .hero .lede { font-size: 15.5px; }
  .hero-ctas { gap: 16px 22px; }
  .stage-in { padding: 92px 26px 66px 30px; }
  .stage-cart { max-width: calc(100% - 96px); }
  .sp-legende { gap: 0 16px; }
  .sp-legende a { min-height: 52px; gap: 8px; grid-template-columns: 32px 1fr auto; }
  /* appel final en deux colonnes (voir plus haut) : titre a la mesure de sa colonne */
  .cta h2 { font-size: clamp(34px, 4.6vw, 48px); }
}
@media (min-width: 700px) and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 22px; }
  .hero h1 { margin: 18px 0 18px; }
  .hero h1::after { margin-top: 16px; }
  .hero-ctas { margin-top: 22px; }
  .scrollhint { display: none; }
  .stage-in { padding-top: 84px; padding-bottom: 60px; }
  .cote-v, .scalebar { display: none; }
  /* planches et photos jamais plus hautes que l'ecran couche */
  .pr-c .pr-m { max-height: calc(100vh - 110px); }
  .pr-c1 .pr-m, .pr-c2 .pr-m { aspect-ratio: 4 / 3; }
  .knock, .cta { margin-top: 64px; }
  /* la legende des reperes passe sous les deux colonnes : deux colonnes
     de 370 px au lieu de deux colonnes de 190 px ou chaque etiquette se cassait */
  .hero-left { grid-row: 1; }
  .sp-legende { grid-column: 1 / -1; grid-row: 2; margin-top: 22px; }
}

/* ---- F. TELEPHONES (<= 600 px) ------------------------------------------ */
@media (max-width: 600px) {
  /* hero — le titre se cale sur la ligne la plus longue (« LA PERFORMANCE. ») :
     plus de « LA » orphelin a 360 px, et il grandit avec l'ecran */
  .hero h1 { font-size: min(44px, calc((100vw - 2 * var(--pad)) / 8.8)); }
  .hero h1 span { white-space: nowrap; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-ctas .btn, .pr-btn, .ev-pied .btn { justify-content: space-between; width: 100%; }
  /* boutons pleine largeur : le libelle reprend sa taille (10,5 px sous 400 px) */
  .hero-ctas .btn, .pr-btn, .ev-pied .btn, .cta-row .btn { font-size: 11.5px; padding: 16px 20px; min-height: 52px; }
  .scrollhint { display: none; }

  /* planche du hero : le plan prend la largeur, la cartouche respire,
     la bascule 3D / 2D se pose sous le plan au lieu de le recouvrir */
  .stage-in { padding: 104px 12px 70px; }
  .stage-cart { font-size: 10px; letter-spacing: .1em; line-height: 1.65; max-width: calc(100% - 78px); }
  .stage-cart .sc-sep { display: none; }
  .stage-cart .sc-lieu { display: block; }
  .cote-h { top: -24px; }
  .cote { font-size: 10px; }
  /* centree sans transform : le filet anti-page-blanche (3,4 s) annule tout
     decalage de plus de 40 px qu'il trouve sur un element hors data-mouv */
  .viewcard { left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 14px; padding: 0 16px; gap: 20px; }
  .vc-opt { white-space: nowrap; }
  .vc-opt { min-height: 44px; font-size: 11px; }
  .sp-pt { font-size: 10px; }
  .sp-legende { margin-top: 14px; }
  .sp-legende b { font-size: 10px; }
  .sp-legende strong { font-size: 14.5px; }
  .sp-legende span { font-size: 14px; }

  /* tetes de planche : un titre qui tient dans sa colonne, coupe par le sens
     (« un seul / interlocuteur ») et non par le bord de l'ecran */
  .sec-head h2 { font-size: clamp(30px, 8.6vw, 38px); line-height: .98; word-spacing: .04em; }
  .sec-head .sec-tag { font-size: 10px; letter-spacing: .12em; }
  .plref { font-size: 10px; letter-spacing: .1em; }

  /* fiches des poles */
  .pole p { font-size: 15px; }
  .pole h3 { font-size: clamp(19px, 5.6vw, 22px); }
  .figtag { font-size: 10px; letter-spacing: .1em; gap: 2px; }
  .pno, .plink { font-size: 10.5px; }

  /* du plan a la realite */
  .pr-h2 { font-size: clamp(38px, 12.6vw, 54px); word-spacing: .04em; }
  .pr-e i { font-size: 15px; }
  .pr-e > b { font-size: 11.5px; }
  .pr-c { margin-bottom: 14px; }
  .pr-c figcaption { font-size: 10px; letter-spacing: .1em; padding: 10px 12px 9px; }
  .pr-c figcaption .ft-s { display: none; }
  /* 2e ligne alignee sous le texte, pas sous « FIG. A » (6 signes mono + espace) */
  .pr-c figcaption .ft-b { display: block; margin-top: 2px; padding-left: calc(4.9em + 8px); }

  /* la cafeteria : la photo entiere (4:3, plus de bandeau sombre sur les
     tables) et sa legende posee dessous, comme une planche de rapport */
  .calm-fig img { height: auto; aspect-ratio: 4 / 3; }
  .calm-fig::after { display: none; }
  /* fond plein : le zoom lent de la photo (echelle 1,1 -> 1) ne deborde pas sur la legende */
  .calm-fig figcaption { position: relative; left: auto; right: auto; bottom: auto; padding: 16px 20px 22px;
    background: var(--dark);
    font-size: 10px; letter-spacing: .1em; line-height: 1.75; text-shadow: none; text-wrap: balance; }
  .calm-fig figcaption em { font-size: 10px; letter-spacing: .12em; margin-bottom: 8px; }
  .calm-fig figcaption .ft-s { display: none; }
  .calm-fig figcaption .ft-b { display: block; }
  .fref { font-size: 10px; }
  .calm-say { font-size: clamp(24px, 6.7vw, 30px); line-height: 1.1; word-spacing: .04em; }

  /* en vrai : legendes lisibles, bouton au pouce */
  .ev-cap { font-size: 10px; letter-spacing: .08em !important; }
  /* aucune carte plus large que l'ecran : une photo paysage de 4:3 sur 304 px
     de haut faisait 405 px, jamais visible en entier sur un telephone */
  .ev-c { height: min(36vh, 70vw); }
  .ev-pied { flex-direction: column; align-items: stretch; gap: 16px; font-size: 10px; letter-spacing: .12em; line-height: 1.8; }
  .ev-pied > span { text-wrap: balance; }

  /* preuve : les quatre chiffres en 2 x 2 (icone, chiffre, legende), comme
     sur tablette — la section sombre perd 200 px de liste */
  .pstats { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .proof .stat { grid-template-columns: 1fr; row-gap: 12px; align-content: start; padding: 20px 0 18px; }
  .proof .stat .lbl { grid-column: 1; margin-top: 0; font-size: 10px; letter-spacing: .12em; line-height: 1.6; }
  .proof .sec-head h2 { word-spacing: .04em; }
  .pquote .qi, .pquote footer, .mks-lab, .mks-link { font-size: 10px; letter-spacing: .12em; }
  .mks-lab { text-wrap: balance; }
  .mks-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* SUR-MESURE : le mot sur deux lignes, en grand — la video se lit dans les
     lettres ; et moins de papier vide autour */
  .knock { margin-top: 72px; }
  .knock .kmask { padding: 46px 18px 50px; }
  .knock .kmask h2 { font-size: min(23vw, 96px); line-height: .84; }
  .knock .over { padding: 16px 18px; }
  .knock .over .top, .knock .over .bot { font-size: 10px; letter-spacing: .12em; line-height: 1.6; text-wrap: balance; }
  .knock .over .ft-s { display: none; }

  /* appel final */
  .cta { margin-top: 72px; }
  .cta h2 { font-size: clamp(34px, 9.6vw, 42px); word-spacing: .04em; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .cta-row .btn { justify-content: space-between; }
  .cta-tel { margin-top: 6px; }
  .cta-adr .cta-sep { display: none; }
  .cta-adr .cta-lieu { display: block; margin-top: 6px; }
  .ctc-lab, .cta .ctc-foot { font-size: 10px; letter-spacing: .12em; text-wrap: balance; }
  .cta .ctc-foot .ft-s { display: none; }
  .cta .ctc-foot .ft-b { display: block; }
  .ctc-list strong { font-size: 15px; }
  .ctc-list i { font-size: 14.5px; }
  .ctc-list b { font-size: 11px; }
}
/* le saut de ligne de SUR·MESURE n'existe que sur telephone */
.knock .kbr { display: none; }
@media (max-width: 600px) { .knock .kbr { display: inline; } }

/* ===========================================================================
   RELECTURE RESPONSIVE DU 07/10 (seconde passe, regard de directeur artistique)
   Toujours borne sous 1280 px : le bureau ne bouge pas d'un pixel.
   =========================================================================== */

/* mots composes et esperluettes : jamais coupes en bout de ligne
   (« cout- / copie », « apres- / vente », « ecoute & / audit », « livraison / & ») */
@media (max-width: 1279px) {
  .nw { white-space: nowrap; }
}

@media (max-width: 1100px) {
  /* legendes des photos « en vrai » : le numero au-dessus, le titre dessous,
     comme les cartouches FIG. des fiches — plus de « FIG. 08 POSTES / DE TRAVAIL » */
  .ev-cap b { display: block; margin: 0 0 3px; }
  /* (le bouton du pied de galerie : regle sortie de ce bloc, voir PASSE FINITIONS) */
  /* rythme : la cafeteria suit la planche PL-02 sans trou de 150 a 180 px */
  .calm { padding-top: var(--sp); }
  /* cibles au doigt : 44 px de haut (bascule 3D / 2D, lien du pole impression,
     e-mail de l'appel final — ce dernier par une zone elargie, sans decaler la ligne) */
  .vc-opt { min-height: 44px; }
  .mks-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cta-adr a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---- G. TABLETTES (601 a 1100 px) --------------------------------------- */
@media (min-width: 601px) and (max-width: 1100px) {
  /* etiquettes mono : 10 px partout sur tablette (elles restaient a 9,5 px :
     cartouches de tete, FIG. des fiches et des photos, planche du hero) */
  .plref, .sec-head .sec-tag, .cta .ctc-foot, .figtag, .fref, .ev-cap, .pr-c figcaption,
  .calm-fig figcaption em, .stage-cart, .pquote .qi, .mks-link, .sp-legende b, .cote { font-size: 10px; }
  /* la bande sombre suit la galerie au meme pas que les autres sections */
  .proof { margin-top: var(--sp); }
}

/* ---- G ter. APPEL FINAL EN DEUX COLONNES (tablette paysage, telephone
   couche) : la cartouche fait 340 px ; son pied finissait en
   « ... METZ (57) ET LA / MOSELLE ». Deux lignes propres, comme sur telephone. */
@media (min-width: 960px) and (max-width: 1100px),
       (min-width: 700px) and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .cta .ctc-foot .ft-s { display: none; }
  .cta .ctc-foot .ft-b { display: block; }
}

/* ---- G bis. DU PLAN A LA REALITE empilee sur tablette (601-899) ---------
   Le plan et le volume sont cote a cote (325 px chacun) : la legende de la
   Fig. B se cassait en « VOLUME 3D · / VALIDE AVANT COMMANDE », la ligne
   finissant sur le point median. Comme sur telephone : deux lignes propres,
   la seconde alignee sous le texte (7 signes mono a 0,6 + 0,15 em). */
@media (min-width: 601px) and (max-width: 899px) {
  .pr-c figcaption .ft-s { display: none; }
  .pr-c figcaption .ft-b { display: block; margin-top: 2px; padding-left: calc(5.25em + 8px); }
}

/* ---- H. TELEPHONE COUCHE (hauteur <= 520 px) ------------------------------
   Les etiquettes passent a 10 px avec la tablette (bloc G) ; ici le rythme
   des bandes, et l'adresse de l'appel final qui se cassait en
   « 14 rue des / Charpentiers » dans sa colonne de 360 px. */
@media (min-width: 700px) and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) {
  .proof { margin-top: 64px; }
  /* chiffres de la preuve dans leur colonne de 150 px : « MARQUES
     PARTENAIRES » tenait sur deux lignes et decalait le « 21 » voisin */
  .proof .stat .lbl { letter-spacing: .12em; }
  .cta-adr .cta-sep { display: none; }
  .cta-adr .cta-lieu { display: block; margin-top: 6px; }
}

/* ---- I. TELEPHONES (<= 600 px) ----------------------------------------- */
@media (max-width: 600px) {
  /* hero : en 900 et a -0,035 em, « DES ESPACES » se lisait « DESESPACES ».
     Un rien d'espace entre les mots ; la ligne la plus longue (« LA
     PERFORMANCE. », 8,65 em) tient toujours dans le diviseur de 8,8. */
  .hero h1 { word-spacing: .08em; }
  /* planche du hero en PLAN 2D : le plan descend de 20 a 25 px avec le
     defilement (parallaxe du hero) et son mur du bas venait buter contre la
     bascule VUE 3D / PLAN 2D. Un peu plus de pied de planche, plan a 86 %. */
  .stage-in { padding-bottom: 84px; }
  .plan2dwrap svg { width: 86%; }
  /* la bande sombre arrive au meme pas que SUR-MESURE et l'appel final ;
     la cafeteria aussi (la planche Fig. C et elle se suivaient a 140 px,
     plus le cadre de 9 % que la photo ouvre en arrivant) */
  .proof { margin-top: 72px; }
  .calm { padding-top: 72px; }
  .pr-c3 { margin-bottom: 0; }
  /* SUR-MESURE : a 360 px la legende du haut passe sur deux lignes et
     touchait le haut des lettres (5 px) ; de l'air au-dessus et au-dessous */
  .knock .kmask { padding: 60px 18px 58px; }
}

/* ===========================================================================
   PASSE FINITIONS DU 07/10 — defauts reels, bureau compris (>= 1280 px)
   =========================================================================== */

/* le bouton du pied de galerie heritait de la mono du pied (a toutes les
   largeurs) : il reprend la lettre de tous les autres boutons de la page */
.ev-pied .btn { font-family: var(--body); }

/* legendes du plan type (#planSVG, hero 2D et Fig. A) : 16 / 12 unites dans
   le symbole. Sur telephone le plan ne fait que 260 a 290 px de large : les
   legendes y montent encore d'un cran (7 px a l'ecran au lieu de 4,5). Les
   positions ont ete verifiees contre le mobilier : rien ne se touche. */
@media (max-width: 600px) {
  .plan-lab { font-size: 21px; }
  .plan-lab.plan-lab-s { font-size: 14px; }
}
/* tablette portrait : la Fig. A est en demi-largeur (330 px), le hero 2D non */
@media (min-width: 601px) and (max-width: 899px) {
  .pr-plan .plan-lab { font-size: 21px; }
  .pr-plan .plan-lab.plan-lab-s { font-size: 14px; }
}

/* « Du plan a la realite » : les etapes remontrent chaque etat (clic, doigt, clavier) */
.pr.pr-sequence .pr-e { cursor: pointer; border-radius: 2px; }
.pr.pr-sequence .pr-e:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pr.pr-sequence .pr-e:not(.on):hover { opacity: .7; }
}