/* ═══════════════════════════════════════════════════════════════
   SORALCO — Wireframe avancé · phase 0 « famille Halston »
   Structure, proportions, échelle et rythme MESURÉS sur
   halston-architecture-template.webflow.io à 1920 px (2026-07-27).
   UN seul changement de palette (consigne Katherine) :
   fonds rouge/bourgogne Halston → marine SORALCO (#0A192F / #002854).
   Tout le reste de l'ambiance Halston est conservé tel quel :
   greige chauds, échelle display, graisses, interlettrages, rythme.
   Typo : Stack A FIGÉ (bascule 2026-07-30, arbitrage Katherine) —
   Outfit au display (300 géants, 400 titres) + Instrument Sans au corps (500)
   et aux micro-étiquettes (600, interlettrage 0.08em). Zéro mono.
   General Sans et JetBrains Mono (typo relevée sur la démo) sont retirés.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Ambiance Halston (mesurée) */
  --greige:        #F6F1E8;   /* fond principal — beige chaud SORALCO (essai Katherine 2026-07-28) */
  --greige-2:      #E9DFCF;   /* ex-#D1D1CD (gris neutre banni) → sable-b chaud */
  --greige-carte:  #F1EAE0;   /* ex-#E2E2DE (gris neutre banni) → sable-a chaud */
  --encre-chaude:  #0D152D;   /* ex-#232019 (quasi-noir Halston) : aucun noir sur le site */
  --creme:         #EDEAE3;   /* CORPS de texte sur fonds sombres */
  --beige-titre:   #F6F1E8;   /* TITRES sur fonds sombres (regle figee 2026-07-17) */

  /* LE changement de palette : bourgogne → marine SORALCO */
  --marine-encre:  #0D152D;   /* marine encre, révisé 2026-07-28 : plus rien de noir sur le site */
  --marine:        #002854;   /* remplace le bourgogne #583939 */
  --marine-voile:  #5D7292;   /* remplace le rose poudré #8A7474 (même clarté) */

  /* Signature SORALCO (micro-doses, règle ferme) */
  --cuivre:        #A8795A;

  /* Placeholders média : univers champagne validé (planches) */
  --champ-a: #E3D4BC; --champ-b: #D8C6AB; --champ-c: #C9B394;
  --sable-a: #F1EAE0; --sable-b: #E9DFCF; --sable-c: #DFD2BC;

  --filet:        rgba(13,21,45,0.18);
  --filet-clair:  rgba(237,234,227,0.24);

  --ease:    cubic-bezier(0.23, 1, 0.32, 1);
  --ressort: cubic-bezier(0.34, 1.9, 0.5, 0.9);

  --gout: 16px;               /* gouttière de page Halston */

  /* Échelle display mesurée (px @1920 → vw, plafonds généreux :
     jamais de typo qui plafonne petit sur grand écran) */
  --t-geant:   clamp(64px, 9vw, 240px);      /* 172.8 @1920 */
  --t-bandeau: clamp(34px, 3vw, 80px);       /* 57.6 */
  --t-journal: clamp(38px, 3.55vw, 95px);    /* 68 */
  --t-h1:      clamp(30px, 2.5vw, 67px);     /* 48 */
  --t-citation:clamp(24px, 1.78vw, 47px);    /* 34 */
  --t-grand:   clamp(20px, 1.46vw, 39px);    /* 28 */
  --t-espace:  clamp(22px, 2vw, 54px);       /* 38.4, interlettrage 0.5em */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* l'attribut hidden doit gagner sur les display: flex/grid des composants */
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  background: var(--greige);
  color: var(--encre-chaude);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── Stack A : Outfit sur le display, les titres et les grands corps ─── */
.hero-h1, .titre-section, .titre-journal, .journal-titre, .bandeau-titre, .mandat-nom,
.projet-pill, .apropos-mission, .citation-texte, .final-titre, .manifeste-lignes,
.manifeste-promesse, .titre-espace, .grand-corps, .liste-irritants li, .entete-intro,
.ligne-verite p, .prix-sousligne, .rangee .nom, .rangee .nom-grand, .question-texte,
.stat .quoi, .panneau-menu-liens a, .hero-page-titre, .hero-page-intro, .dossier-desc,
.confirmation-titre, .confirmation-texte {
  font-family: 'Outfit', sans-serif;
}
/* préfixe html : gagne sur les graisses 500 déclarées plus bas dans les
   gabarits de sections (relevées sur General Sans, caduques en Outfit) */
html .typo-ligne, html .mot-geant, html .hero-wordmark, html .final-mot, html .stat .nombre {
  font-family: 'Outfit', sans-serif; font-weight: 300;
}
html .hero-h1, html .titre-section, html .titre-journal, html .journal-titre, html .hero-page-titre { font-weight: 400; }

/* Lecture fluide (regle Katherine 2026-07-30) : aucun retour force en pleine
   phrase — les grands titres se coupent naturellement, lignes equilibrees. */
.hero-h1, .hero-page-titre, .apropos-mission, .manifeste-lignes, .final-titre, .rideau-texte {
  text-wrap: balance;
}

/* ─────────── Utilitaires ─────────── */
.mono-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mono-label.voile { opacity: 0.55; }
.pill-label {
  display: inline-block;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--filet);
  padding: 4px 10px; border-radius: 3px;
  color: var(--encre-chaude);
  background: transparent;
}
.pill-label.sombre { border-color: var(--filet-clair); color: var(--creme); }
/* LE POINT CUIVRE — echo du point du logo. Version 2 (bascule 2026-07-30) :
   le point d'Outfit aux graisses display est un vrai cercle (remplissage
   mesure 0,781 en 300, 0,802 en 400 ; un cercle parfait fait 0,785).
   On colore donc le GLYPHE REEL, plus de cercle dessine par-dessus.
   L'ancien mecanisme overlay (General Sans, point carre arrondi 0,80-0,855)
   est retire — voir git avant bascule si besoin. Le caractere reste dans le
   texte (lecture, extraction IA, lecteurs d'ecran). */
.pt, .pt-anim {
  color: var(--cuivre);
  /* l'interlettrage du titre ajouterait un blanc apres le point final */
  letter-spacing: 0;
}
.puce { color: transparent; position: relative; }
.puce::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.34em; height: 0.34em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cuivre);
}
.filet { height: 1px; background: var(--filet); width: 100%; }
.filet-haut { height: 1px; background: var(--filet); width: 100%; }

/* Placeholders média : blocs de teinte + étiquette discrète */
.ph {
  position: relative;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 18px 20px;
  overflow: hidden;
}
.ph.plein { position: absolute; inset: 0; }

/* Médias réels plein cadre (vidéo/image) : même grammaire que les placeholders */
.media-plein {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ph.champagne {
  background:
    radial-gradient(ellipse 60% 50% at 38% 42%, rgba(255,246,228,0.75), rgba(255,246,228,0) 70%),
    linear-gradient(135deg, var(--champ-a) 0%, var(--champ-b) 45%, var(--champ-c) 100%);
}
.ph.champagne.sombre {
  background:
    radial-gradient(ellipse 60% 50% at 38% 42%, rgba(255,240,214,0.35), rgba(255,240,214,0) 70%),
    linear-gradient(135deg, #B49B78 0%, #9D8767 50%, #86714F 100%);
}
.ph.sable { background: linear-gradient(150deg, var(--sable-a) 0%, var(--sable-b) 60%, var(--sable-c) 100%); }
.ph-label {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(13,21,45,0.55);
}

/* Voile champagne des révélations média (grammaire validée) */
.voile-champagne {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #F6F1E8, #E9DCC4);
  transform: translateY(0);
  transition: transform 600ms var(--ease);
}
[data-revele-solo] { position: relative; }
[data-revele-solo] .ph, [data-revele-solo] .media-plein { transform: scale(1.12); transition: transform 750ms var(--ease); }
[data-revele-solo].revele .ph, [data-revele-solo].revele .media-plein { transform: scale(1); transition-duration: 1300ms; }
[data-revele-solo].revele .voile-champagne { transform: translateY(-101%); transition-duration: 1000ms; }

/* Survol vivant : zoom lent 1.05× / 1.1 s (une fois révélé) */
@media (hover: hover) and (pointer: fine) {
  [data-revele-solo].revele:hover .ph,
  [data-revele-solo].revele:hover .media-plein { transform: scale(1.05); transition: transform 1100ms var(--ease); }
}

/* Révélations masquées RÉVERSIBLES (principe Halston validé) :
   état de base = replié ; .revele = déployé ; délais à l'aller seulement */
.ligne-masque { display: block; overflow: hidden; }
.ligne-masque > span {
  display: block;
  transform: translateY(112%);
  transition: transform 550ms var(--ease);
}
.revele .ligne-masque > span { transform: translateY(0); transition-duration: 900ms; }
.revele .ligne-masque:nth-child(2) > span { transition-delay: 110ms; }
.revele .ligne-masque:nth-child(3) > span { transition-delay: 220ms; }
.revele .ligne-masque:nth-child(4) > span { transition-delay: 330ms; }

.pt-anim {
  display: inline-block;
  transform: scale(0.4); opacity: 0;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
  transform-origin: center 70%;
}
.revele .pt-anim { transform: scale(1); opacity: 1; transition: transform 700ms var(--ressort) 650ms, opacity 150ms var(--ease) 650ms; }
/* dans une vague de lettres, le point reprend la cadence là où elle s'arrête */
.revele [data-lettres] .pt-anim {
  transition: transform 700ms var(--ressort) calc(var(--i, 0) * 25ms + 200ms),
              opacity 150ms var(--ease) calc(var(--i, 0) * 25ms + 200ms);
}

/* Éléments simples qui montent */
[data-revele] .monte, .hero-infos .hero-col {
  opacity: 0; transform: translateY(18px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}
[data-revele].revele .monte, .hero-infos.revele .hero-col {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hero-infos.revele .hero-col:nth-child(2) { transition-delay: 110ms; }
.hero-infos.revele .hero-col:nth-child(3) { transition-delay: 220ms; }

/* Liens « point à ressort » (Option 1 figée) */
.lien-ressort {
  color: inherit; text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 11px;
}
.lien-ressort .libelle { position: relative; padding-bottom: 3px; }
.lien-ressort .libelle::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--filet);
  transition: background 250ms var(--ease);
}
.lien-ressort .point {
  width: 6.5px; height: 6.5px; border-radius: 50%;
  background: var(--cuivre);
  transition: transform 600ms var(--ressort);
}
.nav .lien-ressort { color: var(--marine); }
.lien-ressort:hover .point { transform: scale(1.9); }
.lien-ressort:hover .libelle::after { background: currentColor; }
.lien-ressort:active .point { transform: scale(0.6); transition-duration: 120ms; }

/* ═══ BOUTON « COLLISION » (mécanique du pen kjbrum/wBBLXx, transposée) ═══
   Deux billes entrent par les côtés, se percutent au centre à mi-parcours,
   puis éclatent en un disque qui remplit le bouton. Le libellé bascule AU
   MOMENT DE L'IMPACT (delay 360 ms) — sans ce retard, le texte devient
   illisible pendant ~200 ms. Le filet marine ne s'évapore pas : il tient
   le bouton pendant le remplissage (vocabulaire SORALCO du filet fin).
   --collision-full ≈ 1,43 × √(L² + H²) : à recalculer si le bouton grandit. */
.btn-contour {
  --collision-dot: 22px;
  --collision-full: 420px;
  --collision-fond: var(--marine);
  --collision-texte: var(--greige);

  position: relative;
  display: inline-flex; align-items: center; gap: 26px;
  overflow: hidden;          /* le clip fait le remplissage */
  isolation: isolate;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--marine); text-decoration: none;
  border: 1px solid rgba(0,40,84,0.45);
  padding: 13px 20px;
  background: transparent;
  cursor: pointer;
  transition: color 240ms var(--ease) 360ms, transform 160ms var(--ease);
}
.btn-contour > * { position: relative; z-index: 2; }
.btn-contour::before, .btn-contour::after {
  content: ""; position: absolute; z-index: 1; top: 50%;
  width: var(--collision-dot); height: var(--collision-dot);
  border-radius: 50%;
  transition: left 500ms ease-in-out, right 500ms ease-in-out,
              width 500ms ease-in-out, height 500ms ease-in-out;
}
/* la bille d'approche gauche est cuivre : un éclat de signature à l'impact,
   aussitôt recouvert par la marine (ordre de peinture du DOM) */
.btn-contour::before {
  left: calc(var(--collision-dot) * -1);
  transform: translate(-50%, -50%);
  background: var(--cuivre);
}
.btn-contour::after {
  right: calc(var(--collision-dot) * -1);
  transform: translate(50%, -50%);
  background: var(--collision-fond);
}
@keyframes collision-gauche {
  0%   { left: calc(var(--collision-dot) * -1); }
  50%  { left: 50%; width: var(--collision-dot); height: var(--collision-dot); }
  100% { left: 50%; width: var(--collision-full); height: var(--collision-full); }
}
@keyframes collision-droite {
  0%   { right: calc(var(--collision-dot) * -1); }
  50%  { right: 50%; width: var(--collision-dot); height: var(--collision-dot); }
  100% { right: 50%; width: var(--collision-full); height: var(--collision-full); }
}
.btn-contour:hover, .btn-contour:focus-visible { color: var(--collision-texte); }
.btn-contour:hover::before, .btn-contour:focus-visible::before { animation: collision-gauche 800ms both; }
.btn-contour:hover::after,  .btn-contour:focus-visible::after  { animation: collision-droite 800ms both; }
.btn-contour:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.btn-contour .plus { font-weight: 400; transition: transform 400ms var(--ease); }
.btn-contour:hover .plus { transform: rotate(90deg); }
.btn-contour:active { transform: scale(0.97); }
/* Sur fond sombre : billes beige, texte marine à l'arrivée */
.btn-contour.clair {
  color: var(--creme); border-color: rgba(237,234,227,0.5);
  --collision-fond: var(--creme);
  --collision-texte: var(--marine-encre);
}
@media (prefers-reduced-motion: reduce) {
  .btn-contour { transition: background 150ms linear, color 150ms linear; }
  .btn-contour:hover, .btn-contour:focus-visible {
    background: var(--collision-fond); color: var(--collision-texte);
  }
  .btn-contour:hover::before, .btn-contour:hover::after,
  .btn-contour:focus-visible::before, .btn-contour:focus-visible::after { animation: none; }
}
@media (hover: none) {
  .btn-contour:active { background: var(--collision-fond); color: var(--collision-texte); }
  .btn-contour:active::before, .btn-contour:active::after { animation: none; }
}

/* ═══════════════ RIDEAU D'ENTRÉE ═══════════════
   Motif « hero-display-preload » relevé sur Halston (mesures à 1920) :
   voile plein écran z-9999, ligne de catégorie alignée à gauche et calée
   au centre vertical, maintien ~1,6 s, puis remontée translateY 0 → -100%
   en ~800 ms avec ease-out marqué, qui découvre la page déjà en place.
   Transposition SORALCO : marine encre, texte beige chaud, révélation par
   masques (grammaire figée) et point cuivre à ressort en dernier temps. */
.rideau {
  display: none;                 /* sans JavaScript, aucun rideau */
  position: fixed; inset: 0; z-index: 9999;
  background: var(--marine-encre);
  align-items: center;
  padding: 0 var(--gout);
  pointer-events: none;
  transform: translateY(0);
}
.js .rideau { display: flex; }
.js .rideau.leve {
  transform: translateY(-100%);
  transition: transform 850ms var(--ease);
}
.rideau.fini { display: none; }
.rideau-texte {
  color: var(--beige-titre);
  font-size: clamp(24px, 2.2vw, 58px);
  font-weight: 500; text-transform: uppercase; line-height: 1.15;
  letter-spacing: 0.01em;
}
/* pendant le rideau, la page ne défile pas */
body.rideau-actif { overflow: hidden; }

/* ═══════════════ NAV ═══════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gout);
  height: 48px;
  background: transparent;
  transition: background 350ms var(--ease), box-shadow 350ms var(--ease);
}
.nav.avec-fond { background: rgba(246,241,232,0.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--filet); }
.nav-gauche { display: flex; align-items: center; gap: 18px; }
.nav-logo img { display: block; height: 17px; width: auto; }
.nav-menu-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--marine); color: var(--creme);
  border: none; padding: 8px 14px; border-radius: 2px; cursor: pointer;
  transition: background 300ms var(--ease), transform 160ms var(--ease);
}
.nav-menu-pill:hover { background: var(--marine-encre); }
.nav-menu-pill:active { transform: scale(0.97); }
.nav-menu-pill .traits { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-menu-pill .traits i { display: block; width: 15px; height: 1.5px; background: var(--creme); }
.nav-centre { display: flex; gap: 34px; }
.nav-centre a {
  color: var(--marine); text-decoration: none;
  font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em;
  position: relative; padding-bottom: 2px;
}
.nav-centre a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--marine);
  transform: scaleX(0); transform-origin: right;
  transition: transform 350ms var(--ease);
}
.nav-centre a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-centre a:active { opacity: 0.6; }

/* Le point cuivre voyageur : la section active porte le point du logo sous son lien.
   Ressort à l'arrivée — le vocabulaire du logo appliqué à l'orientation. */
.nav-centre a::before {
  content: ""; position: absolute;
  left: 50%; bottom: -9px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: var(--cuivre);
  transform: scale(0); opacity: 0;
  transition: transform 600ms var(--ressort), opacity 150ms var(--ease);
}
.nav-centre a.actif::before { transform: scale(1); opacity: 1; }

/* Le CTA nav n'apparaît qu'une fois le hero passé : tant que le bouton
   « Écrivez-moi » du hero est à l'écran, la nav n'en montre pas un deuxième. */
.nav-droite .lien-ressort {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.nav.passe-hero .nav-droite .lien-ressort {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* ═══ VOLET DE CONTACT RAPIDE (motif du menu « More » de Halston) ═══
   Panneau qui descend sous la barre, aligné à droite, fond beige chaud,
   filet fin. Il ne remplace pas la page contact : il capte l'élan. */
.nav-contact {
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.nav-contact .libelle::after { background: var(--filet); }
.nav-contact[aria-expanded="true"] .point { transform: scale(1.9); }
.nav-contact[aria-expanded="true"] .libelle::after { background: currentColor; }

.volet-contact {
  position: fixed; z-index: 120;
  top: 48px; right: var(--gout);
  width: min(420px, calc(100vw - 2 * var(--gout)));
  background: var(--greige);
  border: 1px solid var(--filet);
  box-shadow: 0 24px 60px rgba(10,25,47,0.14);
  padding: 26px 24px 22px;
  transform-origin: top right;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease);
}
.volet-contact.ouvert { opacity: 1; transform: translateY(0); }
.volet-form { display: flex; flex-direction: column; gap: 18px; }
.volet-titre {
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--marine);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--filet);
}
.volet-contact .form-champ label { font-size: 11px; letter-spacing: 0.12em; }
.volet-contact .form-champ input,
.volet-contact .form-champ textarea { font-size: 15px; }
.volet-contact .btn-pilule { align-self: flex-start; padding: 13px 18px; font-size: 13px; gap: 20px; }
.volet-pied {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}
.volet-pied .lien-ressort { font-size: 11px; letter-spacing: 0.12em; color: var(--marine); }
.volet-confirmation { display: flex; flex-direction: column; gap: 10px; }
.volet-confirmation .confirmation-titre { font-size: clamp(20px, 1.5vw, 30px); }
.volet-confirmation .confirmation-texte { font-size: 16px; }
/* les lignes du volet entrent en cascade, comme le menu « More » */
.volet-contact.ouvert .volet-titre,
.volet-contact.ouvert .form-champ,
.volet-contact.ouvert .btn-pilule,
.volet-contact.ouvert .volet-pied { animation: monte-volet 520ms var(--ease) both; }
.volet-contact.ouvert .form-champ:nth-of-type(1) { animation-delay: 60ms; }
.volet-contact.ouvert .form-champ:nth-of-type(2) { animation-delay: 110ms; }
.volet-contact.ouvert .form-champ:nth-of-type(3) { animation-delay: 160ms; }
.volet-contact.ouvert .btn-pilule { animation-delay: 210ms; }
.volet-contact.ouvert .volet-pied { animation-delay: 260ms; }
@keyframes monte-volet {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .volet-contact { display: none; }   /* sur mobile, le menu plein écran porte le contact */
}

/* Burger (mobile seulement) : deux traits qui deviennent un X */
.burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: 130;
}
.burger .trait {
  display: block; width: 22px; height: 1.5px;
  background: var(--marine);
  transition: transform 420ms var(--ease), background 300ms var(--ease);
}
/* la nav (contexte d'empilement z:90) doit passer AU-DESSUS du panneau (z:120)
   quand le menu est ouvert, sinon le X est enterré sous le voile marine */
body.menu-ouvert .nav { z-index: 130; background: transparent; box-shadow: none; }
body.menu-ouvert .nav .nav-logo, body.menu-ouvert .nav-centre, body.menu-ouvert .nav-droite .lien-ressort { visibility: hidden; }
body.menu-ouvert .burger { visibility: visible; }
body.menu-ouvert .burger .trait { background: var(--beige-titre); }
body.menu-ouvert .burger .trait:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.menu-ouvert .burger .trait:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Panneau menu plein écran : marine encre, cascade masquée réversible */
.panneau-menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--marine-encre);
  display: flex; align-items: center;
  padding: 0 8vw;
  opacity: 0; pointer-events: none;
  transition: opacity 450ms var(--ease);
}
body.menu-ouvert .panneau-menu { opacity: 1; pointer-events: auto; }
.panneau-menu-liens { display: flex; flex-direction: column; gap: 10px; }
.panneau-menu-liens a {
  color: var(--beige-titre); text-decoration: none;
  font-size: clamp(30px, 8.6vw, 44px);
  font-weight: 500; text-transform: uppercase; line-height: 1.15;
}
.panneau-menu-liens a:active { opacity: 0.6; }
.panneau-menu-liens .ligne-masque > span { transform: translateY(112%); transition: transform 450ms var(--ease); }
body.menu-ouvert .panneau-menu-liens .ligne-masque > span { transform: translateY(0); transition-duration: 750ms; }
body.menu-ouvert .panneau-menu-liens a:nth-child(2) .ligne-masque > span { transition-delay: 60ms; }
body.menu-ouvert .panneau-menu-liens a:nth-child(3) .ligne-masque > span { transition-delay: 120ms; }
body.menu-ouvert .panneau-menu-liens a:nth-child(4) .ligne-masque > span { transition-delay: 180ms; }
body.menu-ouvert .panneau-menu-liens a:nth-child(5) .ligne-masque > span { transition-delay: 240ms; }
body.menu-ouvert .panneau-menu-liens a:nth-child(6) .ligne-masque > span { transition-delay: 300ms; }

/* ═══ B01 · HERO ═══ */
.hero { padding-top: 48px; }
.hero-texte { padding: 0 var(--gout); }
.hero-h1 {
  font-size: var(--t-h1);
  font-weight: 500; text-transform: uppercase; line-height: 1;
  letter-spacing: 0;
  padding: 44px 0 56px;
  max-width: 30ch;
  color: var(--marine);   /* Marine SORALCO #002854 — règle Katherine 2026-07-28 */
}
.hero-infos {
  display: grid;
  grid-template-columns: 1fr auto;   /* colonne « reconnaissance » retirée (itération Katherine) */
  align-items: end;
  gap: 40px;
  padding-bottom: 52px;
}
/* Le filet du hero court d'un bord à l'autre (itération Katherine) : il ne
   coiffe plus la seule colonne des disciplines, il ouvre toute la largeur. */
.filet-hero { height: 1px; background: var(--filet); margin-bottom: 26px; }
.hero-col.disciplines { display: flex; flex-direction: column; gap: 2px; max-width: 810px; }
.hero-col.disciplines span {
  font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--marine); /* bourgogne Halston → marine */
  line-height: 1.45;
}
.hero-col.reconnaissance .mono-label { opacity: 0.6; display: block; margin-bottom: 8px; }
.hero-col.reconnaissance p { font-size: 20px; font-weight: 500; line-height: 1.45; }
.hero-col.action {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.micro-mention {
  font-size: 14px; font-weight: 500;
  color: var(--marine);
}
.hero-media {
  position: relative; height: 100vh; min-height: 640px;
  overflow: hidden;
}
/* Kicker de catégorie (contenu v4) : au-dessus du H1, grammaire des étiquettes SORALCO */
.hero-kicker {
  padding-top: 40px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--marine);
}
.hero-kicker + .hero-h1 { padding-top: 24px; }

/* LE geste Halston : mot-symbole géant posé sur le bas de la vidéo,
   révélé lettre à lettre (masques réversibles), point cuivre à ressort en dernier.
   Échelle mesurée sur la démo : 288 px @1920 = 15 vw. */
/* Le VRAI mot-symbole, à l'échelle Halston (mesurée : 288 px @1920 = 15 vw).
   Il est monobloc en SVG : la cascade est obtenue en superposant huit copies,
   chacune découpée en une tranche verticale par clip-path, qui montent avec
   un décalage. Le point cuivre du logo arrive donc en dernier, tout seul. */
.hero-wordmark {
  position: absolute; z-index: 3;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(92vw, 1760px);
  aspect-ratio: 340.7 / 43.3;
  pointer-events: none;
}
.hero-wordmark .tranche { position: absolute; inset: 0; display: block; overflow: hidden; }
.hero-wordmark .tranche img {
  display: block; width: 100%; height: 100%;
  transform: translateY(112%);
  transition: transform 520ms var(--ease);
}
.hero-wordmark.revele .tranche img { transform: translateY(0); transition-duration: 880ms; }
.hero-wordmark .tranche:nth-child(1) { clip-path: inset(0 87.5% 0 0); }
.hero-wordmark .tranche:nth-child(2) { clip-path: inset(0 75% 0 12.5%); }
.hero-wordmark .tranche:nth-child(3) { clip-path: inset(0 62.5% 0 25%); }
.hero-wordmark .tranche:nth-child(4) { clip-path: inset(0 50% 0 37.5%); }
.hero-wordmark .tranche:nth-child(5) { clip-path: inset(0 37.5% 0 50%); }
.hero-wordmark .tranche:nth-child(6) { clip-path: inset(0 25% 0 62.5%); }
.hero-wordmark .tranche:nth-child(7) { clip-path: inset(0 12.5% 0 75%); }
.hero-wordmark .tranche:nth-child(8) { clip-path: inset(0 0 0 87.5%); }
.hero-wordmark.revele .tranche:nth-child(2) img { transition-delay: 55ms; }
.hero-wordmark.revele .tranche:nth-child(3) img { transition-delay: 110ms; }
.hero-wordmark.revele .tranche:nth-child(4) img { transition-delay: 165ms; }
.hero-wordmark.revele .tranche:nth-child(5) img { transition-delay: 220ms; }
.hero-wordmark.revele .tranche:nth-child(6) img { transition-delay: 275ms; }
.hero-wordmark.revele .tranche:nth-child(7) img { transition-delay: 330ms; }
/* la dernière tranche porte le point cuivre : elle arrive détachée, en ressort */
.hero-wordmark.revele .tranche:nth-child(8) img {
  transition: transform 760ms var(--ressort) 470ms;
}

/* Pause vidéo (a11y, motif Halston) : cercle discret, coin bas droit du média */
.video-pause {
  position: absolute; z-index: 4;
  right: 26px; bottom: 26px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,21,45,0.32);
  border: 1px solid rgba(246,241,232,0.5);
  cursor: pointer;
  transition: background 300ms var(--ease), transform 160ms var(--ease);
}
.video-pause:hover { background: rgba(13,21,45,0.55); }
.video-pause:active { transform: scale(0.94); }
.video-pause:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
/* deux barres = lecture en cours ; triangle = en pause */
.video-pause .ico {
  width: 12px; height: 14px;
  border-left: 3.5px solid var(--beige-titre);
  border-right: 3.5px solid var(--beige-titre);
}
.video-pause.en-pause .ico {
  width: 0; height: 0; border: none;
  border-left: 12px solid var(--beige-titre);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* ═══ B01bis · MANIFESTE (déclaration centrée, sur beige) ═══ */
.manifeste {
  padding: 150px var(--gout) 140px 6%;   /* le texte demarre une colonne plus a droite */
  display: grid; grid-template-columns: 1.62fr 1fr;
  gap: 4vw; align-items: center;
}
/* Conteneur elargi (itération Katherine 2026-07-28) : 36em bridait le texte
   à 648 px dans une colonne de 939 px. Il occupe maintenant sa colonne. */
.manifeste-corps {
  max-width: 58em;
  display: flex; flex-direction: column; align-items: flex-start;
}
.manifeste-lignes {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.35;
  color: var(--marine-encre);
  text-wrap: pretty;   /* pas de mot orphelin en fin de phrase */
}
.manifeste .filet { margin: 44px 0 40px; }
.manifeste-promesse {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.35;
  color: var(--marine);
  text-wrap: pretty;
}
/* Zone réservée : image à fond transparent, posée sur le beige */
.manifeste-media {
  position: relative; overflow: hidden;
  height: 34vw; min-height: 380px; max-height: 620px;
}

/* ═══ B02 · CHIFFRES — épinglé, scrubé, DEUX CADENCES ═══
   Mécanique mesurée sur la section « Achievements » de Halston :
   la course d'épinglage est découpée en 19 pas ; chaque élément dure 10 pas
   et démarre un pas après le précédent. Le point-clé : la GRILLE (filets,
   marqueurs, voiles de vignettes) est cadencée par RANGÉE (5 pas), le TEXTE
   est cadencé par MOT (10 pas). Le texte avance donc deux fois moins vite :
   la grille se construit d'abord, les mots la remplissent ensuite.
   Aucune opacité animée nulle part — que des masques et des échelles. */
.chiffres { height: 250vh; position: relative; }
.chiffres-colle {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  padding: 96px var(--gout) 0;
}
.chiffres-colle > .etiquette-pastille { position: absolute; top: 52px; left: var(--gout); }
.chiffres-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  height: 100%; align-items: center;
}

/* La pellicule ne bouge pas : chaque vignette se découvre sous son voile,
   balayé de la gauche vers la droite (pur balayage, opacité constante). */
/* Les images passent PAR-DESSUS les filets de rangee (arbitrage Katherine 2026-07-31) */
.pellicule { display: flex; gap: 26px; align-items: center; padding-right: 40px; position: relative; z-index: 3; }
.vignette {
  position: relative; overflow: hidden;
  width: 152px; height: 128px; flex: 0 0 auto;
}
.vignette .ph { position: absolute; inset: 0; padding: 8px 10px; }
.voile-vignette {
  position: absolute; inset: 0; z-index: 2;
  background: var(--greige);
  transform: translateX(0);
  will-change: transform;
}

/* Le rail vertical central n'est jamais animé : il est là dès le départ. */
.stats { position: relative; border-left: 1px solid rgba(13,21,45,0.65); }
.stat {
  display: flex; align-items: baseline; gap: 4%;
  padding: 26px 0 26px 6%;
  position: relative;
}
/* Le filet s'ouvre EN CROIX depuis le rail : deux moitiés, même cadence,
   l'une vers la gauche par-dessus les vignettes, l'autre vers la droite. */
.filet-rangee {
  position: absolute; top: 0; height: 1px;
  background: var(--filet);
  will-change: transform;
}
.filet-rangee.gauche { right: 100%; width: 100vw; transform: scaleX(0); transform-origin: right; }
.filet-rangee.droite { left: 0; right: 0; transform: scaleX(0); transform-origin: left; }
.stat:first-child .filet-rangee { display: none; }
/* Le marqueur : un segment épais posé sur le rail, qui pousse du milieu
   vers le haut et vers le bas. */
/* NB : pas de margin-top en % — un pourcentage de marge se calcule sur la
   LARGEUR du parent, ce qui décalait le marqueur de 280 px vers le haut.
   Le recentrage passe par translateY(-50%), combiné au scaleY dans le JS. */
.marqueur {
  position: absolute; left: -2px; top: 50%;
  width: 3px; height: 62%;
  background: var(--marine);
  transform: translateY(-50%) scaleY(0); transform-origin: center;
  will-change: transform;
}

/* Chaque mot vit dans un masque à la hauteur exacte de sa ligne :
   il monte de translateY(100%) à 0, on voit d'abord le haut des glyphes. */
.stat .masque { display: block; overflow: clip; }
.stat .mot { display: block; transform: translateY(100%); will-change: transform; }
.stat .nombre {
  flex: 0 0 auto;
  font-size: clamp(40px, 4vw, 107px);  /* 76,8 px @1920 */
  font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--marine);
}
/* Le libellé accompagne le chiffre, il ne rivalise pas avec lui. */
.stat .quoi {
  font-size: clamp(15px, 1.06vw, 23px);
  font-weight: 500; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--marine-encre);
  text-wrap: pretty;
}
/* Le placeholder garde l'ÉCHELLE du chiffre qu'il attend : sans ce
   font-size:inherit, la règle utilitaire .reserve (12 px) s'applique
   directement au mot et écrase l'héritage de .nombre. */
.stat .mot.reserve {
  font-size: inherit; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  border: 1px dashed var(--filet);
  padding: 0 0.12em;
  letter-spacing: 0.08em;
}

/* ═══ B03/B04 · SPLITS ÉDITORIAUX ═══ */
.split {
  display: grid; grid-template-columns: 2fr 3fr;
  min-height: 39vw; /* 752 @1920 */
}
.split.marine-fonce { background: #0D152D; color: var(--creme); }   /* B03 · itération Katherine 2026-07-28 */
.split.marine-voile { background: var(--marine); color: var(--creme); } /* B04 · Marine SORALCO #002854 */
.split.inverse { grid-template-columns: 3fr 2fr; }
/* Variante : le texte prend la plus grande part (sections a trois niveaux) */
.split.large-texte { grid-template-columns: 3fr 2fr; }

/* Hierarchie interne d'une section editoriale :
   etiquette (H2) · titre (H3) · strophes de corps */
.etiquette-section { align-self: flex-start; font-weight: 400; }
.titre-section {
  font-size: var(--t-h1);
  font-weight: 500; line-height: 1.15;
  text-transform: uppercase;   /* les titres sont en majuscules (arbitrage Katherine) */
  color: var(--beige-titre);   /* titre sur fond fonce = beige chaud (regle figee 2026-07-17) */
  max-width: 16ch;
}
.strophes { display: flex; flex-direction: column; gap: 26px; }
/* Liste des irritants (B03) : puce cuivre, meme echelle que le corps editorial */
.liste-irritants { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.liste-irritants li {
  position: relative;
  padding-left: 1.15em;
  max-width: 24em;                 /* em calcule sur 23,4px : meme mesure que B04 */
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.3;
  text-wrap: pretty;
}
.liste-irritants li::before {
  content: ""; position: absolute;
  left: 0; top: 0.56em;
  width: 0.3em; height: 0.3em; border-radius: 50%;
  background: var(--cuivre);
}

/* Bloc texte cale verticalement dans son split (au lieu de coller en haut) */
.split-texte.centre-vertical { justify-content: center; padding-top: 72px; padding-bottom: 72px; }
.strophes p {
  font-size: var(--t-grand);       /* meme echelle que .grand-corps (B04) */
  font-weight: 500; line-height: 1.3;
  max-width: 24em;                 /* em calcule sur 23,4px : meme mesure que B04 */
  text-wrap: pretty;
}
.split-texte { padding: 56px var(--gout); display: flex; flex-direction: column; gap: 40px; }
.split.large-texte .split-texte { padding: 96px 5vw 96px 9%; gap: 34px; }
.split-texte.bas { justify-content: flex-end; }
.split-texte.haut { justify-content: flex-start; padding-top: 8px; padding-left: 16px; }
.split.inverse .split-texte { padding-left: 16px; }
.grand-corps {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.3;
  max-width: 24em;
  text-wrap: pretty;
}
/* Verdict : la phrase courte qui clot une strophe. Elle se detache
   seule sur sa ligne, monte d'un cran d'echelle, et son point final
   passe au cuivre — les deux gestes signature, aucune couleur nouvelle. */
.verdict {
  display: block;
  margin-top: 0.5em;
  font-size: var(--t-citation);
  line-height: 1.15;
}
.split-texte .btn-contour { align-self: flex-start; }
.split-media { position: relative; overflow: hidden; margin: 16px; }
.split.marine-fonce .split-media { margin: 16px 0 0 0; }
.split.marine-voile .split-media { margin: 8px 16px 16px 16px; }

/* ═══ B05 · TYPO GÉANTE ═══ */
.typo-geante {
  padding: 96px var(--gout) 64px;
  position: relative;
}
.typo-mini-img {
  position: absolute; top: 96px; left: var(--gout);
  width: 20vw; max-width: 384px;
  height: 15vw; max-height: 288px;
  overflow: hidden;                     /* zone reservee a la mini-formation demo */
}
.typo-lignes { display: flex; flex-direction: column; }
.typo-ligne {
  font-size: var(--t-geant);
  font-weight: 600; text-transform: uppercase; line-height: 0.8;
  letter-spacing: 0;
  padding-top: 0.12em;
  color: var(--marine);   /* Marine SORALCO #002854 — règle Katherine 2026-07-28 */
}

/* ═══ RÉVÉLATION LETTRE À LETTRE, EN VAGUE OBLIQUE ═══
   Mécanique mesurée sur « Considered / Crafted / Lasting solutions » :
   1. un masque PAR LETTRE (et non par ligne) — le bord de coupe suit chaque
      glyphe : la révélation devient un escalier de fronts décalés au lieu
      d'un store qui se lève ;
   2. un skewY de 10° qui se résorbe — sur une lettre de 136 px cela vaut
      ±12 px de dénivelé, d'où la coupe diagonale et l'effet de fouet ;
   3. un stagger CONTINU de 25 ms qui traverse les trois lignes sans jamais
      se réinitialiser : ~24 lettres en mouvement simultané, un seul geste
      au lieu de trois événements successifs ;
   4. courbe power2.out = cubic-bezier(0.215, 0.61, 0.355, 1), 600 ms par
      lettre, et AUCUNE opacité animée — seul le masque cache.
   Divergence assumée : le repli reste synchrone (grammaire SORALCO figée),
   là où Halston rejoue la vague à l'envers. */
.lettre-masque { display: inline-block; overflow: clip; vertical-align: top; }
.lettre {
  display: inline-block;
  transform: translateY(100%) skewY(10deg);
  transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.revele .lettre {
  transform: translateY(0) skewY(0deg);
  transition-delay: calc(var(--i, 0) * 25ms);
}
.typo-ligne.a-droite { text-align: right; }
.typo-ligne.centre-droite { text-align: right; padding-right: 12vw; }
.typo-ligne.pleine { text-align: left; }
.typo-intro {
  margin-top: 40px;
  font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em;
  max-width: 34ch; line-height: 1.5;
}

/* Emplacements en attente de texte : visibles mais discrets */
.reserve {
  color: var(--marine);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  border: 1px dashed var(--filet);
  padding: 6px 10px; display: inline-block;
}

/* ═══ B06 · BANDEAUX MÉDIA ═══ */
.bandeaux { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--gout); }
/* Panneau sable : le titre et ses deux bandeaux se lisent comme un seul bloc,
   détaché du fond de page (itération Katherine). Le filet coiffe le titre. */
.panneau-sable { background: var(--sable-a); padding-bottom: 64px; }
.entete-section.bandeaux-entete { padding-bottom: 0; }   /* le filet -> intro se regle par la marge de l intro (20 px, Halston) */
.bandeau-media {
  position: relative; height: 33vw; min-height: 430px; max-height: 640px;
  overflow: hidden;
  cursor: pointer;
}
.bandeau-media .ph.plein::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,21,45,0) 62%, rgba(13,21,45,0.45) 100%);
}
/* Etiquette de section posee sur un filet : grammaire « majuscules espacees »
   des liens SORALCO, pas la pastille mono du wireframe */

.etiquette-rang {
  padding-top: 16px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--marine);
}
/* En-tete de section UNIFIE : etiquette -> titre -> filet -> intro.
   Meme structure sur S3, S3ter, S4, S4bis, S5bis. */
.entete-section { padding: 110px 0 46px; }
.entete-section .etiquette-rang { display: block; padding-top: 0; padding-bottom: 18px; }
/* ÉTIQUETTE DE SECTION — cadre complet, motif « • ACHIEVEMENTS » / « • ACTION »
   mesuré sur Halston : filet fin sur les quatre côtés, rayon 3 px, puce cuivre.
   Une seule et même étiquette partout (itération Katherine, 2026-07-29). */
.etiquette-pastille {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 18px;
  padding: 5px 11px;
  border: 1px solid var(--filet);
  border-radius: 3px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
  background: transparent;
}
.etiquette-pastille .puce { font-size: 12px; }
/* sur fond sombre : le filet et le texte passent en clair */
.etiquette-pastille.claire { border-color: var(--filet-clair); color: var(--creme); }
.entete-section .filet { margin-top: 0; }
.entete-intro {
  margin-top: 20px;   /* filet -> contenu : 20 px, mesure Halston */
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.3;
  max-width: 32em;
  color: var(--marine-encre);
  text-wrap: pretty;
}

/* Titre de section, traitement « Journal » de Halston :
   display 56px @1600, majuscules, interligne 1, puis filet pleine largeur */
.titre-journal {
  font-size: var(--t-journal);
  font-weight: 500; text-transform: uppercase; line-height: 1;
  color: var(--marine);
  padding-bottom: 45px;   /* titre -> filet : 45 px, mesure Halston (Journal 68px -> 45px) */
}
.etiquette-rang .puce { margin-right: 6px; }

/* Filet fin, visible au repos, cale sur le bord haut de la barre */
.bandeau-barre::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(237,234,227,0.4);
  transition: opacity 300ms var(--ease);
}
.bandeau-media:hover .bandeau-barre::before,
.bandeau-media:focus-within .bandeau-barre::before { opacity: 0; }

/* LA BARRE : transparente au repos, Marine SORALCO plein au survol.
   Trois zones — chiffre a gauche, titre au centre, description a droite. */
.bandeau-barre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 30px;
  padding: 26px 18px;
  background: transparent;
  transition: background 420ms var(--ease);
}
.bandeau-media:hover .bandeau-barre,
.bandeau-media:focus-within .bandeau-barre { background: var(--marine); }
.bandeau-media:hover .bandeau-filet,
.bandeau-media:focus-within .bandeau-filet { opacity: 0; }

.bandeau-titre {
  position: relative;
  overflow: hidden;          /* le panneau de balayage reste enferme dans le titre */
  grid-column: 2;
  text-align: center;
  color: var(--beige-titre);
  font-size: clamp(20px, 1.85vw, 42px);   /* echelle Halston mesuree : 30px @1920 */
  font-weight: 500; text-transform: uppercase; line-height: 1;
  letter-spacing: 0.01em;
  padding: 5px 16px;
  white-space: nowrap;
}
/* Panneau qui balaie derriere le titre (mecanique Halston) */
.bandeau-titre .fond-titre {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(237,234,227,0.14);
  transform: translateX(-105%);
  transition: transform 600ms var(--ease);
}
.bandeau-titre .mot { position: relative; z-index: 1; }
.bandeau-media:hover .fond-titre,
.bandeau-media:focus-within .fond-titre { transform: translateX(0); }

/* Teaser, metrique et lien VISIBLES par defaut (regle v6, 2026-07-30) :
   le survol enrichit l'etat (barre marine, balayage), il ne revele jamais
   de contenu — le hover n'existe pas sur mobile. */
.bandeau-desc {
  grid-column: 3;
  justify-self: end; text-align: right;
  color: var(--creme);
  font-size: clamp(12px, 0.82vw, 17px);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.5;
  max-width: 58ch;
}
.bandeau-chiffre {
  grid-column: 1; justify-self: start;
  border-color: var(--filet-clair); color: var(--creme);
}
.bandeau-lien {
  grid-column: 2; grid-row: 2; justify-self: center;
  margin-top: 10px;
  color: var(--creme);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.bandeau-barre .plus-droite {
  position: absolute; right: 18px; bottom: 50%; transform: translateY(50%);
  color: var(--creme); font-size: 22px; font-weight: 300;
  transition: opacity 300ms var(--ease);
}
.bandeau-media:hover .plus-droite { opacity: 0; }



/* ═══ B07 · CITATION ═══ */
.citation {
  display: grid; grid-template-columns: 1fr 3fr;
  gap: 40px;
  padding: 64px var(--gout) 96px;
  position: relative;
}
.citation-portrait .ph { width: 12vw; min-width: 180px; max-width: 232px; height: 14.8vw; min-height: 220px; max-height: 288px; }
.citation-corps { max-width: 74%; }
.citation-corps .filet-haut { margin-bottom: 12vh; }
/* Variante sans portrait (Katherine 2026-08-08, retrait de l'image d'endossement).
   La grille passe en une colonne ; le 56 % reproduit la mesure de lecture du
   gabarit d'origine (le corps vivait dans la colonne 3fr : 74 % de ~75 %),
   pour ne pas allonger la ligne au-dela de ce qui a ete mesure sur Halston. */
.citation.sans-portrait { grid-template-columns: 1fr; }
.citation.sans-portrait .citation-corps { max-width: 56%; }
@media (max-width: 900px) {
  .citation.sans-portrait .citation-corps { max-width: 100%; }
}
.guillemets { font-size: 64px; font-weight: 600; line-height: 0.6; display: block; color: var(--marine); }
.citation-texte {
  margin-top: 36px;
  font-size: var(--t-citation);
  font-weight: 500; line-height: 1.3;
}
/* Deux tons (motif Halston) obtenus par la HIÉRARCHIE DE COULEUR, pas par une
   opacité : la tête de citation en marine encre, la suite en Marine SORALCO.
   Aucune dilution, règle de palette (Katherine, 2026-07-29). */
.citation-texte .fort { color: var(--marine-encre); }
.citation-texte .suite { color: var(--marine); }
.citation-attribution { margin-top: 44px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.citation-attribution .qui { font-size: clamp(17px, 1.2vw, 26px); font-weight: 500; color: var(--marine); }
.citation-attribution .sep { color: var(--cuivre); }
.citation-attribution .role {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}
.pill-label.flottant-droite { position: absolute; right: var(--gout); top: 42%; }

/* ═══ B08 · RÉVÉLATION ÉPINGLÉE (marine encre) ═══ */
.revelation { height: 300vh; position: relative; background: var(--marine-encre); }
.revelation-colle { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.revelation-cadre {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 2;
  /* le scrub applique un inset progressif via transform scale */
}
/* B08 : deux calques cales au pixel pres — la plaque complete s'estompe,
   le disque dore persiste seul sur le marine encre */
.revelation-cadre .objet-complet { z-index: 1; }
.revelation-cadre .objet-disque  { z-index: 2; }

.titre-espace {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3;
  width: 84%; text-align: center;
  color: var(--beige-titre);
  font-size: var(--t-espace);
  font-weight: 500; text-transform: uppercase; line-height: 1.35;
  letter-spacing: 0.26em; text-indent: 0.26em;
}
.mot-geant {
  position: absolute; z-index: 1;
  color: rgba(237,230,218,0.55); /* ex-#B9B9B4 (gris banni) → blanc cassé sable voilé, mots d'arrière-plan */
  /* echelle reduite : ce sont des noms de service, pas des mots uniques */
  font-size: clamp(34px, 6.2vw, 150px);
  font-weight: 500; text-transform: uppercase; line-height: 0.8;
  white-space: nowrap;
  will-change: transform;
}
/* trois noms de service, trois bandes horizontales distinctes :
   aucun ne partage sa ligne avec un autre */
.mot-geant.mot-haut  { top: 7vh;  left: 50%; }
.mot-geant.mot-gauche{ top: 40vh; left: 3vw; }
.mot-geant.mot-droite{ top: 73vh; right: 3vw; }
.mot-geant.mot-bas   { bottom: 6vh; left: 24vw; }
.mot-haut span, .mot-bas span { display: inline-block; }
.mini-bas {
  position: absolute; bottom: 3vh; left: 4vw; z-index: 1;
  width: 7vw; max-width: 130px; height: 5vw; max-height: 96px;
  will-change: transform;
}
.mini-bas .ph { padding: 6px 8px; }

/* ═══ B09 · RANGÉES ═══ */
.rangees {
  background: var(--marine-encre);
  color: var(--creme);
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: stretch;
  padding: 0 var(--gout) 40px;
}
.rangees-entete { padding: 110px 0 30px; flex: 0 0 auto; }
.rangees-entete .filet { background: var(--filet-clair); }
.etiquette-rang.claire { color: var(--creme); }
.rangees-entete .titre-section { margin-top: 0; padding-bottom: 45px; max-width: none; white-space: nowrap; }
/* Chaque étape est un accordéon : le survol n'est qu'un aperçu, le
   développement s'ouvre au clic — le survol n'existe pas au doigt.
   Aucune couleur ni police nouvelle : tout vient des jetons existants. */
.rangee {
  flex: 0 0 auto;
  position: relative;
  border-bottom: 1px solid rgba(168,121,90,0.35); /* filets cuivres voiles */
  margin: 0 calc(-1 * var(--gout));               /* le fond du survol va bord a bord */
  background: transparent;
  transition: background 420ms var(--ease);
}
.rangee-bascule {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 120px;                              /* mesure Halston */
  padding: 14px clamp(24px, 4vw, 80px);           /* mesure Halston : 64px @1600 */
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
}
.rangee-bascule:focus-visible { outline: 2px solid var(--cuivre); outline-offset: -3px; }
/* le volet : replié par défaut, il reste dans le DOM (extraction IA) */
.rangee-volet { display: grid; grid-template-rows: 1fr; }
.js .rangee-volet { grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease); }
.js .rangee.ouverte .rangee-volet { grid-template-rows: 1fr; }
.rangee-dev {
  overflow: hidden;
  max-width: 62em;
  padding: 0 clamp(24px, 4vw, 80px);
  font-size: clamp(15px, 1.02vw, 21px);
  font-weight: 500; line-height: 1.6;
  color: var(--creme);
  text-wrap: pretty;
}
.js .rangee.ouverte .rangee-dev { padding-bottom: 34px; }
.rangee.ouverte { background: var(--marine); }
.rangee:last-child { border-bottom: none; }

/* Titre au repos : petit, majuscules, teinte assourdie */
.rangee .nom {
  font-size: clamp(15px, 1.08vw, 24px);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.rangee .stat-mono {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: clamp(13px, 0.92vw, 20px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--creme);
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease) 120ms, transform 500ms var(--ease) 120ms;
}
.rangee.revele .nom, .rangee.revele .stat-mono { opacity: 1; transform: translateY(0); }
.rangee.revele .stat-mono { opacity: 0.9; }
.rangee.revele .nom { opacity: 0.72; }

@media (hover: hover) and (pointer: fine) {
  /* Le survol est un APERÇU : fond marine et titre en pleine lumière.
     Le développement, lui, s'ouvre au clic (le survol n'existe pas au doigt). */
  .rangee:hover { background: var(--marine); }
  .rangee.revele:hover .nom { opacity: 1; color: var(--beige-titre); }
  .rangee:hover .stat-mono { opacity: 1; }
}

/* ═══ S4 · MANDATS RÉELS — gabarit « Client / Testimonials » de Halston ═══
   En-tête en trois colonnes (1fr 4fr 1fr) : étiquette à gauche, bloc centré
   au milieu, étiquette à droite, le tout coiffé d'un filet.
   Cartes : 480 px de large, gap de 4 px seulement (elles se touchent presque),
   panneau jamais animé — il est déjà là quand le contenu arrive.
   Sans la logique de citation : ni guillemets, ni attribution personnelle. */
.mandats { padding: 64px var(--gout) 96px; }
.mandats-entete { padding-bottom: 64px; }
.mandats-grille-entete {
  display: grid; grid-template-columns: 1fr 4fr 1fr;
  gap: 16px; align-items: start;
  border-top: 1px solid var(--filet);
  padding-top: 16px;
}
.etiquette-cote {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px; line-height: 1.2; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}
.etiquette-cote.droite { justify-self: end; }
.mandats-centre {
  /* elargi : « Mandats reels. » doit tenir sur UNE ligne (Katherine 2026-07-30) */
  max-width: 900px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.mandats-centre .titre-journal { padding-bottom: 0; }
.mandats-centre .entete-intro { margin-top: 0; }

.cartes-mandats {
  display: flex; justify-content: center; align-items: stretch;
  gap: 4px;                 /* mesure Halston : les cartes se touchent presque */
  flex-wrap: wrap;
}
.carte-mandat {
  flex: 1 1 380px; max-width: 480px;
  display: flex; flex-direction: column; gap: 32px;
  padding: 48px;
  background: var(--sable-a);
  border-radius: 0;         /* le rayon 3px ne va QUE sur l'image (mesure Halston) */
}
.carte-media {
  position: relative; overflow: hidden;
  width: 50%; min-width: 192px; height: 240px;  /* ratio 4:5 mesuré */
  border-radius: 3px;
}
.carte-corps { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.carte-numero {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
  border: 1px solid var(--filet); border-radius: 3px;
  padding: 4px 10px;
}
.carte-titre {
  font-size: clamp(22px, 1.85vw, 42px);
  font-weight: 500; text-transform: uppercase; line-height: 1.05;
  color: var(--marine);
}
.carte-desc {
  font-size: clamp(15px, 1.02vw, 21px);
  font-weight: 500; line-height: 1.6;
  color: var(--marine-encre);
  text-wrap: pretty;
}
.carte-client {
  font-size: 15px; font-weight: 500;
  color: var(--marine);
  padding-top: 4px;
}
.carte-client .sep { color: var(--cuivre); }
.carte-secteur {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}

/* ═══ S4bis · CE QUE ÇA COÛTE — tableau comparatif
   Motif « awards » de Halston /disciplines, mesure pour mesure :
   en-tete a filet 2px, lignes a filet 1px, cellules 14,6px majuscules. ═══ */
.prix {
  background: var(--sable-b);            /* un cran plus dense : le panneau beige de la colonne SORALCO doit s'en détacher */
  padding: 0 var(--gout) 64px;
}
.prix > * { max-width: 1280px; margin-left: auto; margin-right: auto; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.prix-entete { padding-top: 64px; padding-bottom: 34px; }   /* mesure Halston */
.prix-cadre { overflow-x: auto; }          /* le tableau defile seul sur petit ecran */
.tableau-prix {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.tableau-prix th, .tableau-prix td {
  padding: 15px 24px 15px 0;
  vertical-align: middle;
  font-size: clamp(13px, 0.92vw, 20px);
  font-weight: 500;                      /* graisse plancher 500 (règle Katherine) */
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.45;
}
.tableau-prix thead th {
  font-weight: 500;
  color: var(--marine);
  border-bottom: 2px solid var(--marine);   /* filet double, comme Halston */
  padding-bottom: 14px;
}
/* Le logo remplace le mot SORALCO en tête de colonne */
.tableau-prix .logo-colonne { display: block; height: 20px; width: auto; margin-left: auto; }
.tableau-prix tbody th {
  font-weight: 500;
  color: var(--marine);
  width: 26%;
}
.tableau-prix tbody td {
  font-weight: 500;
  color: var(--marine-encre);
}
.tableau-prix tbody tr { border-bottom: 1px solid var(--filet); }
.tableau-prix tbody tr:last-child { border-bottom: none; }
/* La colonne SORALCO porte la reponse. Halston aligne sa derniere colonne
   a DROITE et ne la teinte pas ; on garde l'alignement, et une teinte
   deux fois plus discrete — sans elle, un comparatif a quatre colonnes ne
   se lit pas, c'est la seule deviation assumee. */
/* La colonne SORALCO porte la réponse : panneau beige chaud PLEIN, sans
   transparence (itération Katherine, 2026-07-29). */
.tableau-prix .col-soralco {
  background: #F6F1E8;
  text-align: right;
  padding-left: 28px; padding-right: 28px;
}
.tableau-prix thead .col-soralco { color: var(--marine); font-weight: 500; }
.tableau-prix td.fort { color: var(--marine); font-weight: 500; }
.prix-sousligne {
  margin-top: 54px;
  font-size: clamp(15px, 1.02vw, 22px);
  font-weight: 400; line-height: 1.7;
  max-width: 56em;
  color: var(--marine-encre);
  text-wrap: pretty;
}

/* ═══ S3ter · L'OFFRE — gabarit « Journal » de Halston ═══
   En-tête : titre display, filet pleine largeur, puis une rangée de méta
   (volets à gauche, étiquette à droite). Vignettes : média plein cadre,
   carte givrée posée dedans, radius 3 px partout (mesure Halston).
   Divergence : le fond de section reste dans la famille sable SORALCO
   (le #D1D1CD de Halston est un gris neutre, banni ici). */
.offre { background: var(--greige-2); padding: 0 var(--gout) 16px; }
.offre-entete { padding: 64px 0 48px; }
.offre-entete .titre-journal { padding-bottom: 16px; }
.offre-entete .filet { margin-bottom: 16px; }
.offre-meta {
  margin-top: 20px;   /* filet -> meta : 20 px, mesure Halston */
  display: flex; justify-content: space-between; align-items: center;
  column-gap: 32px; row-gap: 16px; flex-wrap: wrap;
}
.offre-meta .etiquette-pastille { margin-bottom: 0; }
.offre-volets { display: flex; gap: 16px; }
.offre-volets a {
  font-size: 14px; font-weight: 500; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--marine); text-decoration: none;
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 14px;
  transition: background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.offre-volets a:hover { background: var(--marine); color: var(--greige); border-color: var(--marine); }

.offre-grille { display: flex; flex-direction: column; gap: 16px; }
.offre-vignette {
  position: relative;
  height: 44vw; min-height: 520px; max-height: 840px;
  border-radius: 3px; overflow: hidden;
}
.offre-media { position: absolute; inset: 0; }
.offre-media .ph.plein::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,21,45,0.10) 0%, rgba(13,21,45,0.42) 100%);
}
/* La carte givrée : posée DANS le média, fond beige voilé + flou */
.offre-carte {
  position: absolute; z-index: 3;
  left: 5%; bottom: 8%;
  width: min(38%, 560px); min-width: 320px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 40px 36px;
  background: rgba(246,241,232,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 3px;
  transition: transform 700ms var(--ease);
}
.offre-vignette:nth-child(even) .offre-carte { left: auto; right: 5%; }
.offre-surtitre {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}
.offre-titre {
  font-size: clamp(28px, 2.6vw, 58px);
  font-weight: 500; text-transform: uppercase; line-height: 1;
  color: var(--marine);
}
.offre-desc {
  font-size: clamp(15px, 1.02vw, 21px);
  font-weight: 500; line-height: 1.5;
  color: var(--marine-encre);
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .offre-vignette:hover .offre-carte { transform: translateY(-6px); }
}

/* ═══ LA LIGNE DE VÉRITÉ — gabarit « Consultation » (footer Halston) ═══
   Un mot géant très espacé posé DERRIÈRE un cadre média ; au scroll, le
   texte et le bouton entrent en haut à gauche du cadre. */
.verite {
  position: relative;
  background: var(--marine-encre);
  padding: 110px 0 96px;
  overflow: hidden;
}
.verite-mot {
  color: rgba(237,230,218,0.5);
  font-size: var(--t-geant);
  font-weight: 500; text-transform: uppercase; line-height: 0.9;
  letter-spacing: 0.16em; text-indent: 0.16em;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 40px;
}
.verite-cadre {
  position: relative;
  height: 46vw; min-height: 520px; max-height: 880px;
  margin: -14% 36px 0;      /* le cadre remonte sur le mot : ils se chevauchent */
  overflow: hidden;
  border-radius: 3px;
}
.verite-cadre .ph.plein::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(13,21,45,0.62) 0%, rgba(13,21,45,0.18) 62%);
}
.verite-texte {
  position: absolute; z-index: 3; left: 7%; top: 12%;
  max-width: 40em;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.verite-phrase {
  color: var(--beige-titre);
  font-size: var(--t-citation);
  font-weight: 500; line-height: 1.2;
  max-width: 18em;
  text-wrap: pretty;
}
.verite-suite {
  color: var(--creme);
  font-size: clamp(15px, 1.02vw, 21px);
  font-weight: 500; line-height: 1.6;
  max-width: 34em;
  text-wrap: pretty;
}
/* entrée au scroll : le texte et le bouton montent, décalés */
.verite-texte > * { opacity: 0; transform: translateY(26px); }
.verite.vu .verite-texte > * {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.verite.vu .verite-texte > *:nth-child(2) { transition-delay: 120ms; }
.verite.vu .verite-texte > *:nth-child(3) { transition-delay: 240ms; }

/* ═══ S5 · QUI JE SUIS — grille citation relevee sur halston (.section-quote) :
   4 colonnes egales, portrait en colonne 1, contenu sur 2-4, filet en tete,
   guillemet a 64px, declaration 40,8px graisse 500 interligne 1,2,
   attribution 19,2px, etiquette calee a droite. ═══ */
.apropos {
  background: var(--greige-carte);
  padding: 0 var(--gout) 64px;
}
.apropos > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.apropos-entete { padding-top: 64px; padding-bottom: 30px; }
.definition-entite { max-width: 46em; }

.apropos-grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 56px;
}
.apropos-portrait {
  position: relative; overflow: hidden;
  grid-column: 1;
  height: 15vw; min-height: 190px; max-height: 300px;
  align-self: start;
}
.apropos-contenu { grid-column: 2 / -1; }
.apropos-contenu .filet { margin-bottom: 40px; }
.apropos-rangee { display: flex; gap: 64px; align-items: flex-start; }
.apropos-rangee .guillemets {
  flex: 0 0 auto; width: 64px;
  font-size: 64px; font-weight: 600; line-height: 0.6;
  color: var(--cuivre);
}
/* Bloc texte elargi vers la droite + bouton sous le texte, aligne a gauche
   (arbitrage Katherine 2026-07-31) */
.apropos-bloc { display: flex; flex-direction: column; gap: 32px; }
.apropos-bloc .section-action { padding-top: 12px; }
.apropos-mission {
  font-size: clamp(26px, 2.6vw, 56px);      /* 40,8px @1265 chez Halston */
  font-weight: 500; line-height: 1.2;
  color: var(--marine);
}
.apropos-parcours {
  font-size: clamp(15px, 1.06vw, 23px);
  font-weight: 400; line-height: 1.65;
  color: var(--marine-encre);
  /* plafond retire : le texte s etend jusqu au bord droit de sa colonne (arbitrage Katherine 2026-07-31) */
  max-width: none;
}
/* Le parcours en DEUX colonnes editoriales : moitie moins haut, lignes lisibles
   (arbitrage Katherine 2026-07-31 : trop de lignes en une seule colonne) */
.apropos-colonnes {
  columns: 2; column-gap: 64px;
}
.apropos-colonnes .apropos-parcours {
  break-inside: avoid;
  margin-bottom: 26px;
  text-wrap: pretty;
}
/* Même grammaire d'attribution que la citation (B07) : nom en Marine SORALCO
   à l'échelle du corps montant, rôle en micro-étiquette (Katherine 2026-07-29) */
.apropos-signature { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.apropos-signature .qui { font-size: clamp(17px, 1.2vw, 26px); font-weight: 500; color: var(--marine); }
.apropos-signature .role {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}

/* Bande d'outils : vit A LA FIN de S3bis, sur le marine encre de la section
   (arbitrage Katherine 2026-07-30). Titres et filets passent en clair. */
.atelier-bande { padding-top: 96px; }
.atelier-bande .entete-section { padding: 0; }
/* Titre de la bande : h3 centre sur deux lignes (arbitrage Katherine 2026-07-31).
   Deux lignes obtenues par largeur max + retour NATUREL equilibre — jamais de
   retour force en pleine phrase. */
.atelier-titre {
  font-size: var(--t-citation);
  font-weight: 500; text-transform: uppercase; line-height: 1.15;
  color: var(--beige-titre);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
  padding-bottom: 24px;   /* + 26 px internes a la bande : ~50 px, gamme Halston */
  text-wrap: balance;
}

/* LIGNE DE VERITE (doctrine de propriete) : traitement dedie —
   le bloc flottait sans gabarit depuis la v5 (audit Katherine 2026-07-30). */
.ligne-verite {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--filet);
  display: flex; flex-direction: column; gap: 18px;
}
.ligne-verite p {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.35;
  color: var(--marine);
  max-width: 30em;
  text-wrap: pretty;
}
.ligne-verite .prix-sousligne {
  margin-top: 0;
  font-size: clamp(15px, 1.02vw, 22px);
  font-weight: 400; line-height: 1.7;
  color: var(--marine-encre);
  max-width: 44em;
}
section.ligne-verite { margin-top: 0; border-top: 0; padding: 110px var(--gout) 72px; }

/* L'atelier : bande de logos qui defile en continu, sans a-coup ni fin visible.
   Deux suites identiques glissent de -50% : la boucle est invisible.
   Fond marine assume : les logos officiels gardent leurs couleurs. */
.atelier {
  max-width: none !important;
  margin: 0 calc(-1 * var(--gout)) !important;
  overflow: hidden;
  padding: 26px 0;
  /* marine encre sans bordure : la bande se fond dans la section (arbitrage Katherine 2026-07-31) */
  background: var(--marine-encre);
}
.atelier-piste { display: flex; width: max-content; animation: defile 70s linear infinite; }
.atelier-suite { display: flex; align-items: flex-start; gap: 57px; padding-right: 57px; white-space: nowrap; }
.atelier-entree { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.atelier-logo { display: flex; align-items: center; justify-content: center; height: 30px; }
.atelier-logo img { display: block; height: 30px; width: auto; }
.atelier-entree.kling .atelier-logo img { height: 25px; }
.atelier-entree.elevenlabs .atelier-logo img { height: 15px; }
.atelier .outil {
  font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(255,255,255,0.7);
}
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .atelier:hover .atelier-piste { animation-play-state: paused; }
}

/* ═══ B12 · APPEL COMPACT ═══ */
.appel-compact {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: 40px;
  padding: 64px var(--gout);
  min-height: 24.7vw;
}
.appel-compact .col.gauche { text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.appel-titre { font-size: var(--t-grand); font-weight: 500; line-height: 1.3; max-width: 18em; }
.appel-compact .media-boite { position: relative; height: 17.8vw; min-height: 240px; max-height: 342px; overflow: hidden; }
.appel-compact .col.droite { text-align: center; display: flex; flex-direction: column; gap: 28px; align-items: center; }
.appel-caps { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.55; }

/* ═══ S5bis · QUESTIONS FRANCHES — accordeon numerote
   Mecaniques relevees sur halston /consultation :
   panneau de section plus dense · liste dans un conteneur centre ·
   pastille sombre 40px collee au panneau creme a 50% ·
   rangees separees par un ESPACE et non par un filet ·
   rangee 80px · question 17,2px majuscules 500 · marque + qui devient x. ═══ */
.questions {
  background: var(--sable-a);          /* panneau un cran plus dense que la page */
  padding: 0 var(--gout) 96px;
}
.questions-liste {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;   /* espace, pas de filet */
}

.question { display: flex; align-items: stretch; gap: 0; }
.question-numero {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px;                          /* mesure Halston */
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 14px;
  color: var(--creme);
  background: var(--marine-encre);      /* pastille sombre, pleine hauteur */
}
.question-corps {
  flex: 1 1 auto; min-width: 0;
  background: rgba(246,241,232,0.55);   /* panneau creme a 50 %, mesure Halston */
  padding: 0 14px;
  transition: background 300ms var(--ease);
}
.question.ouverte .question-corps { background: rgba(246,241,232,0.9); }

.question-bascule {
  width: 100%; min-height: 80px;        /* rangee 80px */
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 3px 27px 3px 14px;           /* marge droite 27,2px */
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  color: var(--marine);
  transition: color 250ms var(--ease);
}
.question-texte {
  font-size: clamp(15px, 1.08vw, 24px);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.35;
}
/* la marque : un + qui devient un x (rotation 45deg), comme Halston */
.question-marque {
  position: relative; flex: 0 0 auto;
  width: 16px; height: 16px;
  transition: transform 420ms var(--ease);
}
.question-marque::before, .question-marque::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; background: var(--cuivre);
}
.question-marque::after { transform: rotate(90deg); }
.question.ouverte .question-marque { transform: rotate(45deg); }
.question.ouverte .question-bascule { color: var(--marine-encre); }
@media (hover: hover) and (pointer: fine) {
  .question-bascule:hover .question-marque::before,
  .question-bascule:hover .question-marque::after { background: var(--marine); }
}
.question-bascule:focus-visible { outline: 2px solid var(--cuivre); outline-offset: -3px; }

/* Volet : la reponse reste TOUJOURS dans le DOM (exigence GEO), elle est
   seulement repliee. Sans JavaScript, tout est ouvert d'office. */
.question-volet { display: grid; grid-template-rows: 1fr; }
.js .question-volet { grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.js .question.ouverte .question-volet { grid-template-rows: 1fr; }
.question-reponse { overflow: hidden; }
.question-reponse p {
  padding: 0 27px 22px 14px;
  font-size: clamp(15px, 1.02vw, 22px);
  font-weight: 400; line-height: 1.65;
  color: var(--marine-encre);
  max-width: 74em;
  text-wrap: pretty;
}

/* ═══ B14 · DUO EN PARALLAXE ═══ */
.duo {
  display: grid; grid-template-columns: 5fr 7fr; gap: 7%;
  padding: 96px var(--gout) 96px 9%;
  align-items: start;
  min-height: 67vw;
}
.duo-img { position: relative; overflow: hidden; will-change: transform; }
.duo-img.a { height: 36.6vw; min-height: 380px; margin-top: 15vw; }
.duo-img.b { height: 53vw; min-height: 480px; }

/* ═══ B15 · JOURNAL ═══ */
.journal { background: var(--greige-2); padding: 64px 0 0; }
.journal-entete { padding: 0 var(--gout); }
.journal-titre {
  font-size: var(--t-journal);
  font-weight: 500; text-transform: uppercase; line-height: 1;
  padding-bottom: 34px;
}
.journal-sous { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 40px; }
.journal-sous .categories { display: flex; gap: 28px; }
.journal-sous .categories span { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine); }
.billet {
  position: relative; height: 38.5vw; min-height: 480px; max-height: 740px;
  overflow: hidden; margin: 0 var(--gout) 16px;
}
.carte-givree {
  position: absolute; z-index: 3;
  width: 37%; min-width: 320px;
  padding: 56px 40px;
  background: rgba(246,241,232,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  text-align: center;
}
.carte-givree.gauche { left: 2.5%; top: 50%; transform: translateY(-50%); }
.carte-givree.droite { right: 8%; top: 50%; transform: translateY(-50%); }
.carte-givree .billet-titre { font-size: var(--t-grand); font-weight: 500; line-height: 1.3; max-width: 17em; }

/* ═══ B16 · FINAL ═══ */
.final { background: var(--marine-encre); padding-top: 110px; }
.final-mot {
  color: #EDE6DA; /* ex-#B9B9B4 (gris banni) → blanc cassé sable, règle fonds sombres */
  font-size: var(--t-geant);
  font-weight: 500; text-transform: uppercase; line-height: 0.9;
  letter-spacing: 0.11em; text-indent: 0.11em;
  text-align: center;
  padding-bottom: 90px;
  white-space: nowrap; overflow: hidden;
}
.final-cadre {
  position: relative;
  height: 51vw; min-height: 560px; max-height: 980px;
  margin: 0 36px;
  overflow: hidden;
}
.final-appel {
  position: absolute; z-index: 3; left: 8%; top: 15%;
  display: flex; flex-direction: column; gap: 30px; align-items: flex-start;
}
.final-titre {
  color: var(--beige-titre);
  font-size: var(--t-h1);
  font-weight: 500; text-transform: uppercase; line-height: 1.05;
}
.final-cadre .ph.plein::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,21,45,0.5) 0%, rgba(13,21,45,0.15) 60%);
}
.final-panneau {
  background: var(--greige);
  margin-top: 110px;
  padding: 74px var(--gout) 0;
}
.panneau-haut {
  display: grid; grid-template-columns: 2fr 2fr 2fr 2fr;
  gap: 40px; align-items: start;
  padding-bottom: 90px;
}
.masque-logo { display: inline-block; overflow: hidden; }
.logo-final {
  display: block; height: 22px; width: auto;
  transform: translateY(112%);
  transition: transform 600ms var(--ease);
}
.final-panneau.revele .logo-final { transform: translateY(0); transition-duration: 1000ms; }
.colonne-mono { display: flex; flex-direction: column; gap: 6px; }
.colonne-contact { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.colonne-contact .lien-ressort { color: var(--marine); text-transform: none; letter-spacing: 0.04em; font-size: 15px; }
.colonne-contact .tel { font-size: 15px; font-weight: 500; color: var(--marine); }
.panneau-liens {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  padding-bottom: 90px;
}
.panneau-liens ul { list-style: none; }
.panneau-liens li { padding: 0; }

/* ═══ SURVOL DES LIENS DE PIED DE PAGE ═══
   Mesure sur le footer de Halston : chaque lien porte un FILET VERTICAL à
   gauche et vit à 0,8 d'opacité ; au survol, le filet fonce et l'opacité
   monte à 1. Transition 200 ms, rien d'autre — aucun GSAP dans ce footer.
   (Mon relais de filets précédent venait du panneau « More », pas d'ici.) */
.panneau-liens a {
  display: block;
  color: var(--encre-chaude); text-decoration: none;
  font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em;
  padding: 8px 0 8px 16px;
  border-left: 1px solid var(--filet);
  opacity: 0.8;
  transition: border-color 200ms var(--ease), opacity 200ms var(--ease);
}
.panneau-liens a:hover { border-left-color: var(--marine); opacity: 1; }
.panneau-liens li.actif a { border-left-color: var(--marine); opacity: 1; font-weight: 600; }
/* Le lien de contact : changement de couleur SEC, sans transition (mesuré) */
.colonne-contact .lien-ressort { transition: none; }
.colonne-contact .lien-ressort:hover { color: var(--marine-encre); }

.panneau-bas {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--filet);
  /* marge basse dégagée : les éléments flottants (retour en haut, outils
     d'itération) ne doivent pas chevaucher la ligne de mentions */
  padding: 22px 78px 78px 0;
}

/* ═══════════════════════════════════════════════════════════
   PAGES INTÉRIEURES (Ronde 2 · architecture 3 pages)
   ═══════════════════════════════════════════════════════════ */

/* ═══ HERO DE PAGE (motif hero-contact Halston : texte, puis média plein cadre) ═══ */
.hero-page { padding-top: 48px; }
.hero-page-texte { padding: 0 var(--gout); }
.hero-page .hero-kicker { padding-top: 56px; }
.hero-page-titre {
  font-size: var(--t-journal);
  font-weight: 500; text-transform: uppercase; line-height: 1;
  color: var(--marine);
  padding: 22px 0 34px;
  max-width: 20ch;
}
.hero-page-intro {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.35;
  color: var(--marine-encre);
  max-width: 30em;
  padding-bottom: 56px;
  text-wrap: pretty;
}
.hero-page-media {
  position: relative; overflow: hidden;
  height: 46vw; min-height: 420px; max-height: 760px;
  margin: 0 var(--gout);
}

/* ═══ DOSSIER DE MANDAT (média + fiche de faits) ═══ */
.dossier { padding: 0 var(--gout); }
.dossier-entete { padding: 110px 0 40px; }
.dossier-entete .etiquette-rang { display: block; padding: 0 0 18px; }
.dossier-corps {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 3vw, 64px);
  align-items: start;
  padding-bottom: 40px;
}
.dossier.inverse .dossier-corps { grid-template-columns: 2fr 3fr; }
.dossier.inverse .dossier-media { order: 2; }
.dossier.inverse .dossier-texte { order: 1; }
.dossier-media {
  position: relative; overflow: hidden;
  height: 38vw; min-height: 360px; max-height: 660px;
}
.dossier-texte { display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.dossier-secteur {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine-encre);
}
.dossier-desc {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.3;
  color: var(--marine);
  text-wrap: pretty;
}
.dossier-faits { display: flex; flex-direction: column; }
.dossier-faits > div {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--filet);
}
.dossier-faits dt {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--marine);
}
.dossier-faits dd {
  font-size: clamp(15px, 1.02vw, 22px);
  font-weight: 400; line-height: 1.6;
  color: var(--marine-encre);
  text-wrap: pretty;
}

/* ═══ CONSULTATION (motif halston /contact : média + panneau formulaire) ═══ */
.consultation {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: 110px var(--gout) 0;
}
.consultation-media { position: relative; overflow: hidden; min-height: 640px; }
/* le média suit la hauteur du panneau : la grille est en align-items:stretch */
.consultation-media .ph.plein { position: absolute; inset: 0; }
.consultation-surtitre {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 44px;
  text-align: center;
  color: var(--beige-titre);
  font-size: var(--t-bandeau);
  font-weight: 500; text-transform: uppercase; line-height: 1.1;
  letter-spacing: 0.1em; text-indent: 0.1em;
}
.consultation-panneau {
  background: var(--sable-a);
  padding: clamp(32px, 3.4vw, 68px);
  display: flex; flex-direction: column; justify-content: center;
}

/* Le formulaire : champs soulignés, aucun cadre — grammaire SORALCO */
.form { display: flex; flex-direction: column; gap: 26px; }
.form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form-champ { display: flex; flex-direction: column; gap: 8px; }
.form-champ label {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--marine);
}
.form-champ input, .form-champ textarea {
  font-family: inherit;
  font-size: clamp(15px, 1.02vw, 20px); font-weight: 500;
  color: var(--marine-encre);
  background: transparent;
  border: none; border-bottom: 1px solid rgba(0,40,84,0.32);
  padding: 8px 0 10px;
  transition: border-color 300ms var(--ease);
  resize: vertical;
}
.form-champ input:hover, .form-champ textarea:hover { border-bottom-color: var(--marine); }
.form-champ input:focus, .form-champ textarea:focus {
  outline: none; border-bottom-color: var(--cuivre); border-bottom-width: 2px;
  padding-bottom: 9px;
}
.form-champ input:user-invalid, .form-champ textarea:user-invalid { border-bottom-color: var(--cuivre); }

.form-choix { border: none; display: flex; flex-direction: column; gap: 14px; }
.form-choix legend {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--marine);
  padding-bottom: 6px;
}
.pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.pilule { position: relative; cursor: pointer; }
.pilule input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pilule span {
  display: inline-block;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(0,40,84,0.32);
  font-size: 14px; font-weight: 500;
  color: var(--marine);
  transition: background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pilule:hover span { border-color: var(--marine); }
}
.pilule input:checked + span {
  background: var(--marine); color: var(--beige-titre); border-color: var(--marine);
}
.pilule input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.pilule input:active + span { transform: scale(0.97); }

/* Le bouton d'envoi adopte la MÊME forme que tous les autres boutons du
   site : rectangle à filet fin, majuscules interlettrées, animation de
   collision. La pilule marine est abandonnée (arbitrage Katherine,
   2026-07-30) — un seul dessin de bouton sur tout le site. */
.btn-pilule {
  --collision-dot: 22px;
  --collision-full: 420px;
  --collision-fond: var(--marine);
  --collision-texte: var(--greige);

  position: relative;
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  overflow: hidden; isolation: isolate;
  background: transparent; color: var(--marine);
  border: 1px solid rgba(0,40,84,0.45); border-radius: 0;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 240ms var(--ease) 360ms, transform 160ms var(--ease);
}
.btn-pilule > * { position: relative; z-index: 2; }
.btn-pilule::before, .btn-pilule::after {
  content: ""; position: absolute; z-index: 1; top: 50%;
  width: var(--collision-dot); height: var(--collision-dot);
  border-radius: 50%;
  transition: left 500ms ease-in-out, right 500ms ease-in-out,
              width 500ms ease-in-out, height 500ms ease-in-out;
}
.btn-pilule::before { left: calc(var(--collision-dot) * -1); transform: translate(-50%, -50%); background: var(--cuivre); }
.btn-pilule::after  { right: calc(var(--collision-dot) * -1); transform: translate(50%, -50%); background: var(--collision-fond); }
.btn-pilule:hover, .btn-pilule:focus-visible { color: var(--collision-texte); }
.btn-pilule:hover::before, .btn-pilule:focus-visible::before { animation: collision-gauche 800ms both; }
.btn-pilule:hover::after,  .btn-pilule:focus-visible::after  { animation: collision-droite 800ms both; }
.btn-pilule:active { transform: scale(0.97); }
.btn-pilule:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
/* le point cuivre du libellé devient le « + » des autres boutons */
.btn-pilule .point {
  width: 6.5px; height: 6.5px; border-radius: 50%;
  background: var(--cuivre);
  transition: transform 600ms var(--ressort);
}
.btn-pilule:hover .point { transform: scale(1.9); }
.btn-pilule:active .point { transform: scale(0.6); transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .btn-pilule:hover, .btn-pilule:focus-visible {
    background: var(--collision-fond); color: var(--collision-texte);
  }
  .btn-pilule:hover::before, .btn-pilule:hover::after,
  .btn-pilule:focus-visible::before, .btn-pilule:focus-visible::after { animation: none; }
}

.form-alternative {
  font-size: 15px; font-weight: 500;
  color: var(--marine-encre);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.form-alternative .lien-ressort { color: var(--marine); text-transform: none; letter-spacing: 0.04em; font-size: 15px; }
.form-erreur {
  font-size: 15px; font-weight: 500;
  color: var(--marine);
  border-left: 2px solid var(--cuivre);
  padding-left: 14px;
}
.form-confirmation { display: flex; flex-direction: column; gap: 14px; }
.confirmation-titre {
  font-size: var(--t-citation);
  font-weight: 500; text-transform: uppercase; line-height: 1.1;
  color: var(--marine);
}
.confirmation-texte {
  font-size: var(--t-grand);
  font-weight: 500; line-height: 1.35;
  color: var(--marine-encre);
  max-width: 22em;
}
.confirmation-signature { font-size: 16px; font-weight: 500; color: var(--marine); }

/* Le panneau de définition au footer (reprise GEO de la phrase d'entité) */
.panneau-definition {
  font-size: clamp(15px, 1.02vw, 21px);
  font-weight: 400; line-height: 1.6;
  color: var(--encre-chaude);
  max-width: 62em;
  padding-bottom: 70px;
  text-wrap: pretty;
}

/* Le lien de la page courante, dans la nav et le footer */
.nav-centre a.actif { color: var(--marine-encre); }

@media (max-width: 900px) {
  .hero-page .hero-kicker { padding-top: 34px; }
  .hero-page-titre { font-size: clamp(30px, 8.6vw, 48px); padding: 16px 0 24px; max-width: none; }
  .hero-page-intro { padding-bottom: 36px; }
  .hero-page-media { height: 68vw; min-height: 260px; margin: 0 var(--gout); }

  .dossier-entete { padding: 64px 0 26px; }
  .dossier-corps, .dossier.inverse .dossier-corps { grid-template-columns: 1fr; gap: 28px; }
  .dossier.inverse .dossier-media, .dossier.inverse .dossier-texte { order: 0; }
  .dossier-media { height: 66vw; min-height: 250px; }

  /* mobile : le burger porte la navigation, le CTA texte de la nav ferait doublon
     (et la capsule marine déborderait de la barre) */
  .nav-droite .lien-ressort { display: none; }

  .consultation { grid-template-columns: 1fr; margin: 56px var(--gout) 0; }
  .consultation-media { min-height: 0; height: 70vw; }
  .consultation-surtitre { font-size: clamp(16px, 5vw, 28px); bottom: 48px; }
  .consultation-panneau { padding: 34px 22px 44px; }
  .form-duo { grid-template-columns: 1fr; }
  .panneau-definition { padding-bottom: 44px; }
}

/* Rangée d'actions en fin de section : le parcours ne doit jamais s'arrêter
   dans un cul-de-sac (itération Katherine, 2026-07-29). */
.section-action {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding-top: 56px;
}
.rangees .section-action { padding: 40px 0 8px; }
.mandats .section-action, .prix .section-action { padding-top: 54px; }

/* ═══════════ Retour en haut (discret, grammaire du point a ressort) ═══════════ */
.retour-haut {
  position: fixed; bottom: 24px; right: 24px; z-index: 95;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,40,84,0.28);
  background: rgba(246,241,232,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-decoration: none;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease),
              background 300ms var(--ease), border-color 300ms var(--ease);
}
.retour-haut.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* le chevron : deux traits fins en chevron vers le haut */
.retour-haut .fleche {
  width: 11px; height: 11px;
  border-left: 1px solid var(--marine);
  border-top: 1px solid var(--marine);
  transform: rotate(45deg) translate(1px, 1px);
  transition: transform 400ms var(--ease), border-color 300ms var(--ease);
}
/* le point cuivre du logo, en veille sous le chevron */
.retour-haut .point {
  position: absolute; bottom: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cuivre);
  transform: scale(1);
  transition: transform 600ms var(--ressort);
}
@media (hover: hover) and (pointer: fine) {
  .retour-haut:hover { background: var(--marine); border-color: var(--marine); }
  .retour-haut:hover .fleche { border-color: var(--beige-titre); transform: rotate(45deg) translate(3px, 3px); }
  .retour-haut:hover .point { transform: scale(1.9); }
}
.retour-haut:active .point { transform: scale(0.6); transition-duration: 120ms; }
.retour-haut:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }



/* ═══════════ SERVICES · développements de service et atelier expliqué ═══════════
   Page services.html (v6, 2026-07-30). Reutilise le gabarit dossier de mandats ;
   uniquement des styles de contenu, palette et gammes de durees du skill. */
.service-metrique { margin-bottom: 4px; }
.service-bloc h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(17px, 1.15vw, 24px); font-weight: 500;
  color: var(--marine);
  padding-bottom: 6px;
}
.service-bloc p { line-height: 1.5; }
.dossier-renvoi { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; }
.dossier-renvoi .note { font-size: 15px; color: var(--marine-encre); line-height: 1.5; }

.atelier-explique { padding: 0 var(--gout) 96px; }
.atelier-explique .entete-intro { margin-bottom: 26px; }
.etape {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 30px;
  padding: 34px 0;
  border-top: 1px solid var(--filet);
}
.etape:last-of-type { border-bottom: 1px solid var(--filet); }
.etape-numero {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--marine-voile);
  padding-top: 6px;
}
.etape-corps { display: flex; flex-direction: column; gap: 12px; max-width: 62em; }
.etape-corps h3 {
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-grand); font-weight: 400;
  color: var(--marine);
}
.etape-corps p { line-height: 1.5; }
.etape-outils {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--marine-voile);
}
.etape-outils .sep { color: var(--cuivre); }
.atelier-cloture {
  margin-top: 34px;
  font-size: var(--t-grand); font-weight: 500; line-height: 1.3;
  color: var(--marine-encre);
  max-width: 32em;
}
/* Footer services : sous-ligne du CTA final (B6) + phrase-definition d entite (C4) */
.final-appel .final-sousligne {
  font-size: 15px; line-height: 1.5;
  color: var(--creme);
  max-width: 34em;
  margin: 14px 0 22px;
}
.final-entite {
  font-size: 15px; line-height: 1.5;
  color: var(--marine-encre); opacity: 0.8;
  max-width: 58em;
  padding-bottom: 40px;
}

/* ═══════════ Mobile ═══════════ */
@media (max-width: 900px) {
  .nav-centre { display: none; }
  .burger { display: flex; }
  .hero-kicker { padding-top: 28px; font-size: 11px; letter-spacing: 0.14em; }
  .hero-wordmark { font-size: clamp(46px, 13.5vw, 72px); bottom: -0.04em; }
  .video-pause { right: 14px; bottom: 14px; width: 38px; height: 38px; }
  .hero-h1 { font-size: clamp(34px, 9.5vw, 54px); padding: 36px 0 40px; }
  .hero-infos { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .hero-col.action { text-align: left; align-items: flex-start; }
  .hero-media { height: 72vh; min-height: 420px; }

  .manifeste { grid-template-columns: 1fr; gap: 40px; padding: 80px var(--gout) 72px; }
  .manifeste-corps { max-width: none; }
  .manifeste .filet { margin: 32px 0 30px; }
  .manifeste-media { height: 62vw; min-height: 260px; }
  .chiffres { height: auto; }
  .chiffres-colle { position: static; height: auto; padding: 80px var(--gout) 60px; }
  .chiffres-grille { grid-template-columns: 1fr; }
  .pellicule { display: none; }
  .stats { border-left: none; }
  .stat .nombre { font-size: clamp(34px, 9vw, 56px); }
  .stat .quoi { font-size: 15px; }
  .stat { padding: 18px 0; gap: 16px; }

  .split, .split.inverse, .split.large-texte { grid-template-columns: 1fr; min-height: 0; }
  .split.large-texte .split-texte { padding: 56px var(--gout); gap: 26px; }
  .titre-section { max-width: none; }
  .liste-irritants li { max-width: none; }
  .split-texte.centre-vertical { padding-top: 40px; padding-bottom: 40px; }
  .strophes { max-width: none; }
  .split-media { height: 62vw; min-height: 260px; margin: 12px !important; }
  .split-texte { padding: 40px var(--gout); }

  .typo-mini-img { display: none; }
  .typo-ligne, .mot-geant { font-size: clamp(40px, 11vw, 88px); }
  .typo-ligne.centre-droite { padding-right: 4vw; }

  .bandeau-media { height: auto; min-height: 0; }
  .bandeau-media .ph.plein { position: relative; height: 62vw; min-height: 260px; }
  .bandeau-barre::before, .bandeau-barre .plus-droite { display: none; }
  .bandeau-barre {
    position: relative; grid-template-columns: 1fr; gap: 16px;
    padding: 24px 0 0; background: transparent !important;
  }
  .bandeau-titre { grid-column: 1; text-align: left; color: var(--marine); padding: 0; white-space: normal; }
  .bandeau-titre .fond-titre { display: none; }
  .bandeau-desc {
    grid-column: 1; justify-self: start; text-align: left;
    opacity: 1; transform: none; color: var(--marine-encre);
    text-transform: none; font-size: 16px; max-width: none;
  }
  .bandeau-chiffre { grid-column: 1; justify-self: start; opacity: 1; transform: none; color: var(--marine); border-color: var(--filet); }
  .bandeau-lien { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; color: var(--marine); }
  .etape { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .atelier-explique { padding-bottom: 64px; }
  .bandeaux-entete { padding: 64px 0 24px; }
  .nav-droite .lien-ressort .libelle { font-size: 11px; letter-spacing: 0.12em; }
  .citation { grid-template-columns: 1fr; padding: 48px var(--gout) 64px; }
  .citation-corps { max-width: 100%; }
  .citation-corps .filet-haut { margin-bottom: 40px; }
  .pill-label.flottant-droite { display: none; }

  .revelation { height: auto; background: var(--marine-encre); }
  .revelation-colle { position: static; height: auto; padding: 60px 0; }
  .revelation-cadre { position: relative; height: 64vw; min-height: 280px; margin: 0 12px; transform: none !important; }
  .mot-geant { position: static; transform: none !important; text-align: center; white-space: normal; padding: 8px 12px; }
  .mot-geant.mot-haut, .mot-geant.mot-gauche, .mot-geant.mot-droite, .mot-geant.mot-bas { inset: auto; }
  .mini-bas { display: none; }
  .titre-espace { font-size: 18px; }

  .rangees { min-height: 0; padding: 0 var(--gout) 30px; }
  .rangees-entete { padding: 64px 0 20px; }
  .rangees-entete .titre-section { white-space: normal; }
  .rangee { margin: 0; }
  .rangee-bascule {
    min-height: 0; padding: 20px 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  }
  .rangee-dev { padding: 0; }
  .js .rangee.ouverte .rangee-dev { padding-bottom: 22px; }
  .rangee .nom { white-space: normal; opacity: 1 !important; }

  .clients-entete { grid-template-columns: 1fr; gap: 18px; }
  .clients-entete .coin.droite { text-align: left; }
  .clients-entete .centre { text-align: left; align-items: flex-start; }
  .damier { grid-template-columns: 1fr; column-gap: 0; }
  .case { min-height: 200px; height: auto; padding: 30px 0; }
  .case.image { height: 62vw; }

  .projets-entete { padding: 64px var(--gout) 30px; }
  .ligne-verite { padding: 44px var(--gout) 20px; }
  .mandats { padding: 48px var(--gout) 64px; }
  .mandats-grille-entete { grid-template-columns: 1fr; gap: 12px; }
  .etiquette-cote.droite { justify-self: start; }
  .mandats-centre { max-width: none; align-items: flex-start; text-align: left; margin-inline: 0; }
  .carte-mandat { flex: 1 1 100%; padding: 32px 24px; }
  .carte-media { width: 100%; height: 56vw; }
  .offre { padding: 0 var(--gout) 12px; }
  .offre-entete { padding: 48px 0 28px; }
  .offre-vignette { height: auto; min-height: 0; }
  .offre-media { position: relative; height: 62vw; min-height: 240px; }
  .offre-carte {
    position: relative; left: auto; right: auto !important; bottom: auto;
    width: 100%; min-width: 0; padding: 28px 22px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--sable-a);
  }
  .verite { padding: 64px 0 56px; }
  .verite-mot { font-size: clamp(30px, 9vw, 60px); padding-bottom: 20px; }
  .verite-cadre { margin: -6% 12px 0; height: 108vw; min-height: 420px; }
  .verite-texte { left: 7%; right: 7%; top: 8%; }
  .mandats-entete { padding: 64px 0 30px; }
  .mandats-grille { grid-template-columns: 1fr; gap: 48px; }
  .mandat-media { height: 62vw; min-height: 240px; }
  .mandats-action { padding-top: 40px; }
  .prix { padding: 0 var(--gout) 48px; }
  .prix-entete { padding-top: 48px; padding-bottom: 26px; }
  .tableau-prix th, .tableau-prix td { padding: 10px 16px 10px 0; }
  .prix-sousligne { margin-top: 36px; }
  .projet { height: 80vw; min-height: 420px; }
  .projet-fiche.gauche, .projet-fiche.droite { left: var(--gout); right: var(--gout); bottom: 10%; }

  .apropos { padding: 0 var(--gout) 48px; }
  .apropos-entete { padding-top: 48px; padding-bottom: 24px; }
  .apropos-grille { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .apropos-portrait { grid-column: 1; height: 62vw; min-height: 240px; max-height: none; }
  .apropos-contenu { grid-column: 1; }
  .apropos-colonnes { columns: 1; }
  .apropos-rangee { gap: 20px; }
  .apropos-rangee .guillemets { width: 34px; font-size: 40px; }
  .apropos-bloc { gap: 24px; }
  .atelier .outil { font-size: 8.5px; letter-spacing: 0.08em; }
  .appel-compact { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
  .appel-compact .media-boite { height: 56vw; min-height: 220px; }

  .entete-section { padding: 64px 0 30px; }
  .questions { padding: 0 var(--gout) 64px; }
  .question-numero { width: 32px; }
  .question-bascule { min-height: 68px; padding: 12px 14px 12px 10px; gap: 14px; }
  .question-reponse p { padding: 0 14px 20px 10px; }

  .duo { grid-template-columns: 1fr; padding: 64px var(--gout); min-height: 0; }
  .duo-img.a { height: 64vw; min-height: 280px; margin-top: 0; }
  .duo-img.b { height: 88vw; min-height: 340px; }

  .billet { height: auto; min-height: 0; padding: 0; }
  .billet .ph.plein { position: relative; height: 58vw; min-height: 260px; }
  .carte-givree { position: relative; inset: auto; transform: none !important; width: 100%; min-width: 0; }
  .carte-givree.gauche, .carte-givree.droite { left: auto; right: auto; top: auto; }

  .final { padding-top: 70px; }
  .final-mot { font-size: clamp(32px, 9vw, 64px); padding-bottom: 48px; }
  .final-cadre { margin: 0 12px; height: 90vw; min-height: 380px; }
  .final-appel { left: 6%; top: 10%; }
  .panneau-haut, .panneau-liens { grid-template-columns: 1fr; gap: 26px; padding-bottom: 48px; }
}

/* ═══════════ Mouvement réduit ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .retour-haut { transition: opacity 1ms; }
  .atelier-piste { animation: none; }
  .ligne-masque > span, .pt-anim, .voile-champagne, [data-revele-solo] .ph, [data-revele-solo] .media-plein,
  .stat, .rangee .nom, .rangee .stat-mono, .carte, .hero-infos .hero-col,
  .logo-final, .mot-geant, .revelation-cadre, .duo-img,
  .hero-wordmark .lettre > span, .panneau-menu, .panneau-menu-liens .ligne-masque > span {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .voile-champagne { display: none; }
}