/* ═══════════════════════════════════════════════════════════════════════════
   SITE MARKETING TÉSÉO — V5 (22 août 2026, soir)
   ---------------------------------------------------------------------------
   Direction : un récit continu, calme et premium. UN fond (ivoire) +
   DEUX moments vert forêt (prototypes, CTA final) + UNE pointe d'ocre
   (import) ; l'ocre profond signe les micro-labels, le bleu est réservé
   aux studios, le rose a disparu. Typo : Inter (celle d'Attio) partout,
   Cormorant italic en accent rare. Échelles dérivées de jetons.js.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --page: #fdfcf8;
  --wash: #f6f2e8;
  --ocrefond: #f9f2e2;
  --card: #ffffff;
  --paper: #fbf8f1;
  --ink: #2b2620;
  --ink-soft: #5a534a;
  --ink-muted: #9a9388;
  --line: #e8e0cf;
  --line-strong: #cdc6b4;
  --vert: #00664F;
  --vert-sombre: #00523f;
  --vert-nuit: #1b3a2c;
  --ocre: #c49a48;
  --ocre-prof: #8a6a1f;
  --bleu: #387ba2;
  --succes: #5c7546;
  --creme-voile: rgba(253, 252, 248, 0.78);
  --p: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --serif-lecture: 'Newsreader', 'Times New Roman', Georgia, serif;   /* le manifeste */
  --ui: 'Inter', -apple-system, sans-serif;       /* la vraie UI des mockups */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --ombre-sm: 0 2px 6px rgba(43, 38, 32, .10);
  --ombre-md: 0 8px 24px rgba(43, 38, 32, .14);
  --ombre-lg: 0 24px 60px rgba(43, 38, 32, .16);
  --t1: 140ms; --t2: 200ms; --t3: 320ms;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.mk {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--f); font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ocre-prof); outline-offset: 3px; border-radius: 4px; }

.int { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.int--large { max-width: 1240px; }
.int--tete { text-align: center; max-width: 880px; }

/* ── Typographie ────────────────────────────────────────────────────────── */
.titre {
  font-family: var(--p); font-weight: 500; letter-spacing: -0.011em;
  line-height: 1.1; text-wrap: balance;
  font-size: clamp(28px, 3.4vw, 42px);
}
h1.titre { font-size: clamp(38px, 5vw, 64px); font-weight: 600; letter-spacing: -0.02em; line-height: 0.96; }
.eyebrow {
  font-family: var(--f); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ocre-prof);
  margin-bottom: 14px;
}
.section__sous {
  color: var(--ink-soft); font-size: 17.5px; max-width: 600px; margin-top: 16px;
}
.int--tete .section__sous { margin-left: auto; margin-right: auto; }
.accent-serif {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px); color: var(--vert); text-align: center;
  margin-top: 44px;
}
.reassurance {
  font-family: var(--f); font-size: 13px; font-weight: 500;
  color: var(--ink-muted); margin-top: 14px;
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: var(--r-md);
  font-family: var(--p); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; text-decoration: none;
  transition: transform var(--t2) ease, background var(--t2) ease,
              border-color var(--t2) ease, box-shadow var(--t2) ease;
  white-space: nowrap;
}
.btn--primary { background: var(--vert); color: var(--page); }
.btn--primary:hover { background: var(--vert-sombre); transform: translateY(-1px); box-shadow: var(--ombre-sm); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn--cream { background: var(--page); color: var(--vert); }
.btn--cream:hover { background: #ffffff; transform: translateY(-1px); box-shadow: var(--ombre-sm); }
.btn--contour { background: transparent; color: var(--page); border: 1px solid rgba(253, 252, 248, .45); }
.btn--contour:hover { border-color: rgba(253, 252, 248, .9); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ── La bande noire d'annonce (elle défile, le header colle) ────────────── */
.annonce {
  background: #101010; text-align: center;
}
.annonce a {
  display: inline-block; padding: 10px 20px;
  font-family: var(--f); font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  color: rgba(253, 252, 248, 0.85); text-decoration: none;
}
.annonce b { color: #fdfcf8; font-weight: 600; }
.annonce a:hover b { text-decoration: underline; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/*  ✦ Roxane 22 août — « header transparent en haut de page, posé au-dessus du
    hero ; au scroll il devient blanc, de façon fluide et discrète ».
    Il reste COLLANT et dans le flux : la photo du hero remonte derrière lui
    par un décalage négatif (voir .hero2__photo), plutôt que de passer le
    header en `fixed` — ce qui aurait obligé chaque autre page à compenser
    sa hauteur, et cassé le calage de la piste. */
.hd {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 252, 248, 0);
  border-bottom: 1px solid transparent;
  transition: background 420ms ease, border-color 420ms ease, backdrop-filter 420ms ease;
}
.hd--compact {
  background: rgba(253, 252, 248, .92); backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.hd__int {
  /*  Roxane 22 août : « le contenu sur toute la largeur, mais adapte en
      fonction de la taille de l'écran ». Les marges suivent la fenêtre au
      lieu d'un cadre fixe de 1240 px qui laissait 200 px vides de chaque
      côté sur un grand écran. */
  max-width: 1720px; margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 52px);
  display: flex; align-items: center; gap: 28px;
  height: 72px; transition: height var(--t3) ease;
}
.hd--compact .hd__int { height: 60px; }
.hd__logo { display: flex; align-items: baseline; gap: 11px; text-decoration: none; }
.hd__logo img { height: 30px; width: auto; align-self: center; }
/*  Le mot « Desk » à côté de la marque : c'est le nom du produit, pas une
    décoration. Capitales espacées, discret, il ne concurrence pas le logo. */
.hd__desk {
  font-family: var(--f); font-size: 11.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-muted);
}
/*  ⚠️ La navigation se cale à GAUCHE, à la suite du logo, comme sur la
    maquette — et pas centrée. Centrée, elle tombait sur les cheveux du
    mannequin et « Tarifs » devenait illisible. Ici elle reste sur la
    partie claire du mur, quelle que soit la largeur. */
.hd__nav { display: flex; gap: 26px; margin: 0 auto 0 clamp(26px, 5vw, 92px); }
.hd__lien {
  font-family: var(--p); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
  color: var(--ink-soft); transition: color var(--t1) ease;
}
.hd__lien:hover { color: var(--ink); }
.hd__actions { display: flex; align-items: center; gap: 16px; }
.hd__actions .btn { height: 38px; padding: 0 18px; font-size: 14px; }
/*  La pastille bordée faisait « badge d'appli ». Sur un header transparent
    posé sur une photo, un simple mot suffit. */
.hd__langue {
  font-family: var(--f); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
  text-decoration: none; color: var(--ink-muted); transition: color var(--t1) ease;
}
.hd__langue:hover { color: var(--ink); }
.hd__burger { display: none; }

/* ── Sections : le rythme ───────────────────────────────────────────────── */
.section { padding: clamp(64px, 8vw, 110px) 0; background: var(--page); }
.section--wash { background: var(--wash); }
.section--ocre { background: var(--ocrefond); }
.section--serre { padding: clamp(56px, 7vw, 92px) 0; }
.section .int--tete { margin-bottom: clamp(34px, 4vw, 54px); }

/* La grande section vert forêt */
.foret { background: var(--vert); color: var(--page); padding: clamp(72px, 9vw, 120px) 0; }
.foret .eyebrow { color: var(--ocre); }
.foret .titre { color: var(--page); }
.foret__tete {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(34px, 4vw, 54px);
}
.foret__sous { color: rgba(253, 252, 248, .75); font-size: 17px; max-width: 460px; }
.foret .repro { box-shadow: 0 30px 80px rgba(0, 0, 0, .3); border-color: rgba(253, 252, 248, .12); }

/* ── Hero V2 : dense, produit dans le premier viewport ──────────────────── */
/* ⚠️ `overflow-x: clip` et surtout PAS `hidden` : hidden établit un
   conteneur de défilement et tue le `position: sticky` de la piste (piège
   déjà payé avec .pf-body). Et le clip doit être ICI, sur toute la largeur :
   posé sur .hero2__haut il rognait la photo à la largeur du conteneur
   (340 px de photo perdus sur un écran de 1920). */
.hero2 { position: relative; background: var(--page); padding: 0; overflow-x: clip; }
/*  Le hero suit la fenêtre, pas un cadre de 1240 px : c'est ce qui
    supprime les bandes vides sur les côtés d'un grand écran. Les autres
    sections gardent leur largeur — on ne touche que le haut de page. */
.hero2 .int--large { max-width: 1720px; padding: 0 clamp(20px, 3.2vw, 52px); }
.hero2__haut { position: relative; display: grid; grid-template-columns: minmax(0, 44%) 1fr; align-items: start; }
.hero2__texte { text-align: left; padding: clamp(40px, 7vh, 104px) 0 clamp(40px, 6vh, 78px); position: relative; z-index: 2; }
/*  ✦ Roxane 22 août — « une headline très grande, sans-serif, classique,
    dense, très lisible ; l'esprit Attio : simple, fort, premium ».
    Le titre du hero ne suit plus l'échelle des titres de section : il monte
    à 68 px et se serre (interligne 1.02, chasse resserrée). C'est lui qui
    porte la page ; tout le reste peut rester calme. */
.hero2 h1.hero2__titre {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.02; letter-spacing: -0.028em; font-weight: 500;
  max-width: 11ch; text-wrap: balance; margin: 0;
}
.hero2__sous {
  color: var(--ink-soft); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55;
  max-width: 42ch; margin: clamp(18px, 2.6vh, 26px) 0 0;
}
.hero2__ctas { display: flex; gap: 26px; align-items: center; margin-top: clamp(26px, 4vh, 42px); flex-wrap: wrap; }
.hero2__lien {
  font-family: var(--p); font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding-bottom: 5px; border-bottom: 1.5px solid var(--ocre);
  transition: border-color var(--t2) ease, color var(--t2) ease;
}
.hero2__lien:hover { color: var(--vert); border-color: var(--vert); }
/*  De la place sous le cadre pour la barre, qui est passée dessous. */
.hero2__scene { position: relative; z-index: 3; margin-top: clamp(18px, 3vh, 40px); padding-bottom: clamp(58px, 8vh, 86px); }

/* ── La piste : la visite avance au SCROLL, elle ne se joue plus seule ──── */
/*  Roxane, 22 août : « ça va super vite, ça fait un peu peur ». La scène
    devient collante pendant --course, et chaque tranche fait une étape.
    Les trois valeurs (7 étapes, la course, le pas) restent liées : si le
    nombre d'écrans change, ajuster --course, pas le pas. */
/*  ⚠️ 22 août, 2ᵉ passe — « tant qu'à faire, que l'animation commence plus
    tard dans le scroll ». La piste porte maintenant 7 étapes PLUS une
    amorce de 0,55 étape pendant laquelle on reste sur le premier écran :
    on a le temps de le regarder avant que la visite ne démarre.
    ⚠️ Les trois valeurs restent liées : si AMORCE change dans
    marketing.js, ce 7.55 doit suivre, sinon les étapes se décalent. */
.hero2__piste { position: relative; z-index: 3; height: calc(100vh + 7.55 * 40vh); }
.hero2__collant { position: sticky; top: 84px; padding-bottom: clamp(24px, 4vh, 52px); }
/*  Roxane, 22 août : « en bas à droite de l'écran d'animation, en discret,
    sans la grosse pastille ». Aligné sur le bord droit du cadre (760 px
    centré), d'où le calc(50% - 380px). */
/*  ✦ Roxane 22 août, 23h55 — « mets le Faites défiler pour avancer et le
    Passer la visite CENTRÉS en dessous de l'animation, avec un peu
    d'espacement et un peu plus gros ». Ils étaient alignés sur le bord droit
    du cadre, en tout petit : on ne les voyait pas. Centrés sous l'écran,
    ils deviennent la légende de la visite. */
.hero2__cmd {
  position: absolute; z-index: 5; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.2vw, 30px);
}
.hero2__indice {
  font-family: var(--f); font-size: 14px; color: var(--ink-soft);
  transition: opacity 400ms ease;
}
.hero2__indice.parti { opacity: 0; }
/*  La jauge : sept tirets, un par univers. Elle répond à une seule
    question, mais la plus importante au premier scroll : « est-ce que ça
    va durer longtemps ? ». Aucun tiret ne change de taille selon l'état,
    sinon la ligne sauterait à chaque étape. */
.jauge {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; align-items: center;
}
.jauge__pas {
  width: 22px; height: 3px; border-radius: 999px;
  background: var(--line-strong); opacity: .55;
  transition: background 420ms ease, opacity 420ms ease;
}
.jauge__pas.vu { background: var(--vert); opacity: .38; }
.jauge__pas.actif { background: var(--vert); opacity: 1; }

.hero2__passer {
  background: none; border: 0; cursor: pointer; padding: 3px 0;
  font-family: var(--f); font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); border-radius: 0;
  transition: color var(--t2) ease, border-color var(--t2) ease;
}
.hero2__passer:hover { color: var(--vert); border-color: var(--vert); }

/* les pastilles de la barre latérale deviennent des repères cliquables */
.ch__nav i { cursor: pointer; }
.ch__nav i::after { content: ''; position: absolute; inset: -6px; }
.ch__nav i { position: relative; }
.ch__nav i:hover { background: rgba(253, 252, 248, .42); }
.ch[data-etat="0"] .ch__nav i:nth-child(1):hover, .ch[data-etat="1"] .ch__nav i:nth-child(2):hover,
.ch[data-etat="2"] .ch__nav i:nth-child(3):hover, .ch[data-etat="3"] .ch__nav i:nth-child(4):hover,
.ch[data-etat="4"] .ch__nav i:nth-child(5):hover, .ch[data-etat="5"] .ch__nav i:nth-child(6):hover,
.ch[data-etat="6"] .ch__nav i:nth-child(7):hover { background: var(--ocre); }
/* les étapes déjà vues gardent une trace, pour savoir où l'on en est */
.ch__nav i.vue { background: rgba(196, 154, 72, .45); }

/* ── La photo : elle saigne à droite et se fond dans le crème ───────────── */
/*  ✦ Roxane 22 août — « la photo doit occuper toute la partie droite, monter
    haut dans le hero, dialoguer avec le texte, et ne pas ressembler à une
    image collée dans une carte ».
    Le décalage négatif du haut la fait remonter DERRIÈRE le header, qui est
    transparent en haut de page : la photo part donc du bord supérieur de la
    fenêtre. Le fondu de gauche (le masque) fait le reste — le mur du studio
    se dissout dans l'ivoire de la page, sans bord net. */
.hero2__photo {
  /*  ⚠️ 22 août, 23h (Roxane : « fais-le commencer vraiment en haut de
      l'écran, sans mettre un effet blanc dégradé »). La photo REMONTE donc
      derrière le header, qui est transparent en haut de page : elle part du
      bord supérieur de la fenêtre. Plus aucun fondu en haut — le fond de
      cette planche est du crème presque identique à celui de la page, la
      jonction se fait toute seule. */
  --hd: 72px;
  position: absolute; left: 34%; top: calc(-1 * var(--hd)); right: calc(50% - 50vw); z-index: 1;
  /*  ⚠️ 22 août, 3ᵉ photo — la composition a CHANGÉ de nature. Avant : un
      mannequin à droite d'un mur vide, on rognait la moitié gauche pour le
      recentrer. Maintenant : un MUR DE MOODBOARD dont le contenu occupe
      43 %→96 % de la largeur de l'image. Si on rogne, on coupe l'échantillon
      de tissu et la photo de campagne du bord gauche du panneau.
      Le cadre est donc réglé pour montrer la largeur ENTIÈRE (rapport du
      cadre ≈ rapport de l'image, 1,5 contre 1,6 : 6 % de rogne seulement,
      alignés à droite), et le fondu de gauche ne mange que le mur vide. */
  /*  ⚠️ Un RAPPORT, pas une hauteur : c'est lui qui garantit qu'on ne rogne
      jamais la largeur, donc que le panneau reste entier quelle que soit la
      fenêtre. 1,74 > 1,60 (le rapport de l'image) → `cover` cale sur la
      largeur et rogne le BAS, qui est du mur vide. */
  /*  ⚠️ 4ᵉ photo — la planche descend jusqu'à 88 % de la hauteur de l'image
      (contre 79 % pour la précédente) et commence à 30 % de sa largeur
      (contre 43 %). Le rapport se rapproche donc de celui de l'image (1,65
      contre 1,60) : on ne rogne presque plus le bas, et jamais la largeur. */
  aspect-ratio: 1.65; height: auto; pointer-events: none;
}
/*  ⚠️ PAS de voile blanc sur la photo (Roxane, 22 août : « ne mets pas de
    halo blanc, fais exactement comme le visuel »). C'est le CADRAGE qui
    règle la lisibilité du header : le cadre est haut et étroit, il coupe le
    mur vide à gauche de la photo, et le mannequin se retrouve au centre —
    donc loin de « Se connecter », comme sur la maquette. */
.hero2__img, .hero2__attente {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%;
  /*  Le fondu du bas commençait à 58 % : sur cette image il avalait les
      photos du bas du panneau, qui sont du CONTENU. Repoussé à 78 %. */
  /*  Fondus resserrés : le contenu part de plus à gauche et descend plus bas,
      un fondu trop large mangerait l'échantillon de tissu de gauche et la
      photo d'archive du bas. Le fond de cette planche est du crème presque
      identique à celui de la page : elle se fond toute seule. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 100%),
                      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 100%),
              linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero2__attente { display: grid; place-items: center; padding: 4% 14% 16%; }
.hero2__attente img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ── Les repères posés sur la photo ─────────────────────────────────────── */
.hero2__annos { position: absolute; inset: 0; }
.hero2__anno {
  position: absolute; display: flex; align-items: center;
  font-family: var(--ui); font-size: 13px; color: var(--ink);
  animation: hero-monte 620ms cubic-bezier(.2, .7, .2, 1) both;
}
/*  ✦ Roxane 22 août — pastille en verre dépoli (« un effet vraiment glass »).
    ⚠️ `backdrop-filter` ne floute que ce qui est SOUS l'élément : le fond doit
    rester très translucide, sinon il n'y a plus rien à flouter et on retombe
    sur l'aplat crème d'avant.
    ⚠️ 3ᵉ photo (le mur de moodboard) — les trois repères se posent
    maintenant TOUS sur le mur vide, à gauche, et pointent vers le panneau :
    libellé, filet, puis point. Posés SUR le panneau ils se perdaient dans une
    image déjà chargée, et masquaient le contenu qu'ils étaient censés
    désigner. Sur le mur, ils se lisent comme la légende d'une planche.
    `row-reverse` inverse l'ordre visuel des deux enfants ; le filet passe
    donc de l'autre côté du libellé. */
.hero2__anno { font-size: 12.5px; letter-spacing: -.005em; color: var(--ink); flex-direction: row-reverse; }
.hero2__anno i {
  width: 5px; height: 5px; flex: none; border-radius: 999px;
  background: var(--ink-soft); opacity: .85;
}
.hero2__anno b {
  position: relative; font-weight: 500; white-space: nowrap; color: var(--ink);
  margin-right: 46px; padding: 5px 14px; border-radius: 999px;
  background: rgba(253, 252, 248, .30);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 2px 10px rgba(43, 38, 32, .10), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hero2__anno b::before {
  content: ''; position: absolute; right: -40px; top: 50%; width: 34px; height: 1px;
  background: var(--ink-soft); opacity: .38;
}
.hero2__anno--1 { left: 22%; top: 15%; animation-delay: 1150ms; }
.hero2__anno--2 { left: 18%; top: 41%; animation-delay: 1350ms; }
.hero2__anno--3 { left: 11%; top: 66%; animation-delay: 1550ms; }
.hero2__anno--2 { top: 34%; animation-delay: 1350ms; }
.hero2__anno--3 { top: 53%; animation-delay: 1550ms; }

/* ── La coquille des reproductions (UI = Inter) ─────────────────────────── */
.repro {
  display: flex; background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--ombre-lg); overflow: hidden;
  text-align: left; font-family: var(--ui);
  color: var(--ink);   /* un mockup reste encre, même posé sur la section verte */
}
.repro__side {
  width: 50px; flex: none; background: var(--vert-nuit);
  display: flex; flex-direction: column; align-items: center;
  gap: 13px; padding: 15px 0;
}
.repro__logo { width: 21px; height: 21px; border-radius: 6px; background: rgba(253, 252, 248, .92); }
.repro__dot { width: 15px; height: 15px; border-radius: 5px; background: rgba(253, 252, 248, .16); }
.repro__dot--on { background: var(--ocre); }
.repro__body { flex: 1; min-width: 0; padding: 20px 24px; }

.rp-entete { display: flex; justify-content: space-between; align-items: center; }
.rp-entete__espace { font-family: var(--ui); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rp-entete__saison { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.rp-avatars { display: flex; }
.rp-avatars span {
  width: 25px; height: 25px; border-radius: 999px; background: var(--wash);
  border: 1.5px solid var(--page); box-shadow: 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
  color: var(--ink-soft); margin-left: -6px;
}
.rp-onglets { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.rp-onglet { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); padding: 7px 12px 9px; border-bottom: 2px solid transparent; }
.rp-onglet--actif { color: var(--ink); border-bottom-color: var(--vert); }
.rp-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 16px; }
.rp-carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform var(--t2) ease, box-shadow var(--t2) ease; }
.rp-carte__img { aspect-ratio: 4 / 4.2; background: var(--paper); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.rp-carte__img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--t3) ease; }
.rp-carte:hover .rp-carte__img img { transform: translateY(-2px) scale(1.01); }
.rp-carte__nom { font-size: 12.5px; font-weight: 600; padding: 9px 12px 2px; }
.rp-carte__ligne { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 10px; font-size: 12px; color: var(--ink-soft); }
.rp-chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rp-chip--ocre { background: rgba(196, 154, 72, .16); color: var(--ocre-prof); }
.rp-chip--vert { background: rgba(92, 117, 70, .14); color: var(--succes); }
.rp-chip--bleu { background: rgba(56, 123, 162, .13); color: var(--bleu); }
.rp-titrecarte { font-family: var(--ui); font-size: 15px; font-weight: 600; }

/* ── Moodboard : titre asymétrique + îlot ───────────────────────────────── */
.mbtete {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 70px);
  align-items: end; margin-bottom: 26px;
}
.mbtete__sous { color: var(--ink-soft); font-size: 16.5px; padding-bottom: 6px; }
.mb__toile {
  position: relative; height: clamp(340px, 40vw, 470px);
  background: var(--paper);
  background-image: radial-gradient(rgba(43, 38, 32, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--ombre-md); overflow: hidden;
}
.mb__item {
  position: absolute; background: #fff; padding: 8px 8px 24px;
  box-shadow: var(--ombre-sm); border: 1px solid var(--line);
}
.mb__item img { width: 100%; height: 100%; object-fit: cover; }
.mb__item--1 { left: 6%; top: 12%; width: 21%; aspect-ratio: 3/4; transform: rotate(-2.4deg); }
.mb__item--2 { left: 31%; top: 7%; width: 24%; aspect-ratio: 3/4; transform: rotate(1.6deg); }
.mb__item--3 { right: 22%; bottom: 9%; width: 22%; aspect-ratio: 4/3.6; transform: rotate(-1.2deg); }
.mb__item--4 { right: 4%; top: 14%; width: 19%; aspect-ratio: 3/4; transform: rotate(2.2deg); }
.mb__pin { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 999px; background: var(--ocre); box-shadow: 0 2px 4px rgba(43, 38, 32, .3); }
.mb__postit {
  position: absolute; left: 12%; bottom: 14%; width: 124px; padding: 13px;
  background: #fdf3c9; box-shadow: var(--ombre-sm); transform: rotate(1.8deg);
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35;
}
.mb__swatch { position: absolute; left: 56%; top: 62%; width: 38px; height: 38px; border-radius: 999px; box-shadow: var(--ombre-sm); border: 3px solid #fff; }
.mb__swatch--2 { left: 60%; top: 74%; }
.mbpied { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.mbpied__note { font-size: 13px; color: var(--ink-muted); max-width: 520px; }
.ilot { position: relative; }
.ilot__voile {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(253, 252, 248, 0) 30%, var(--creme-voile));
  border-radius: var(--r-lg);
}
.ilot__lancer { box-shadow: var(--ombre-md); }

/* ── Le prototype épinglé ───────────────────────────────────────────────── */
.repro--sample .repro__body { padding: 0; }
.sp { display: grid; grid-template-columns: 1.5fr 1fr; }
.sp__photo { position: relative; min-height: 450px; background: var(--wash); }
.sp__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sp__pin {
  position: absolute; width: 30px; height: 30px; border-radius: 999px;
  background: var(--page); border: 2px solid var(--ocre-prof);
  display: grid; place-items: center; box-shadow: var(--ombre-sm);
}
.sp__pin i { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ocre-prof); }
.sp__pin--1 { left: 30%; top: 24%; }
.sp__pin--2 { left: 56%; top: 44%; }
.sp__pin--3 { left: 38%; top: 70%; }
.rv.in .sp__pin { animation: pin-pop 460ms cubic-bezier(.34, 1.4, .5, 1) backwards; }
.rv.in .sp__pin--2 { animation-delay: 140ms; }
.rv.in .sp__pin--3 { animation-delay: 280ms; }
@keyframes pin-pop { from { transform: scale(0); } }
.sp__version {
  position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; align-items: center;
  background: rgba(253, 252, 248, .94); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; font-family: var(--mono); font-size: 11px;
}
.sp__version span { color: var(--ink-muted); }
.sp__v2 { color: var(--vert); }
.sp__panneau { padding: 24px; display: flex; flex-direction: column; gap: 13px; background: var(--page); font-family: var(--ui); }
.sp__retour { display: flex; gap: 12px; font-size: 13px; line-height: 1.45; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sp__num { font-family: var(--mono); font-size: 10px; color: var(--ocre-prof); border: 1px solid var(--line-strong); border-radius: 999px; width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.sp__etat { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; margin-top: 5px; color: var(--ink-muted); }
.sp__etat--ok { color: var(--succes); }
.sp__envoi {
  margin-top: auto; align-self: flex-start; background: var(--vert); color: var(--page);
  font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: var(--r-md);
}

/* ── Le fil du produit : chronologie avec preuves ───────────────────────── */
.repro--fil .repro__body { padding: 20px 22px; }
.fil__entete { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fil__entete .rp-avatars { margin-left: auto; }
.fil__produit { width: 40px; height: 46px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; padding: 4px; }
.fil__produit img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fil__liste { position: relative; padding: 16px 0 4px 24px; }
.fil__trait { position: absolute; left: 7px; top: 20px; bottom: 14px; width: 2px; background: var(--line-strong); transform-origin: top; }
.rv.in .fil__trait { animation: fil-grandit 900ms ease both; }
@keyframes fil-grandit { from { transform: scaleY(0); } }
.fil__evt {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-family: var(--ui);
  opacity: 0; transform: translateY(8px);
}
.rv.in .fil__evt { animation: evt-entre 420ms ease forwards; animation-delay: calc(180ms + var(--i) * 130ms); }
@keyframes evt-entre { to { opacity: 1; transform: none; } }
.fil__point {
  position: absolute; left: -22px; width: 11px; height: 11px; border-radius: 999px;
  background: var(--page); border: 2.5px solid var(--ocre-prof);
}
.fil__point--ok { background: var(--succes); border-color: var(--succes); }
.fil__corps { flex: 1; min-width: 0; }
.fil__haut { display: flex; align-items: baseline; gap: 10px; }
.fil__haut b { font-size: 13.5px; font-weight: 600; }
.fil__date { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
.fil__detail { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.fil__detail em { font-style: italic; color: var(--ocre-prof); }
.fil__vignette { width: 42px; height: 50px; flex: none; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.fil__vignette img { width: 100%; height: 100%; object-fit: cover; }
.fil__badge {
  width: 28px; height: 28px; flex: none; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--ocre-prof);
  background: var(--page); border: 2px solid var(--ocre-prof);
}
.fil__badge--ok { color: var(--page); background: var(--succes); border-color: var(--succes); font-size: 12px; }

/* ── Le shooting ────────────────────────────────────────────────────────── */
.sh3 { display: flex; align-items: stretch; gap: 18px; font-family: var(--ui); }
.sh3__col { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 17px; box-shadow: var(--ombre-sm); }
.sh3__titre { font-family: var(--ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh3__deja { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: none; background: rgba(92, 117, 70, .14); color: var(--succes); padding: 3px 8px; border-radius: 999px; }
.sh3__fleche { align-self: center; color: var(--ocre-prof); font-size: 20px; }
.sh3__biblio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh3__biblio span { aspect-ratio: 1/1.05; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8px; position: relative; }
.sh3__biblio img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sh3__item--cible { outline: 2px solid var(--ocre); outline-offset: 2px; }
.sh3__look { position: relative; }
.sh3__look > img { width: 100%; aspect-ratio: 3/3.2; object-fit: cover; border-radius: var(--r-sm); }
.sh3__tag {
  position: absolute; left: 10px; top: 10px; background: var(--ink); color: var(--page);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.sh3__legende { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.sh3__prise { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.sh3__prise:last-child { border-bottom: 0; }
.sh3__prise--fait { color: var(--ink); }
.sh3__coche { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center; font-size: 10px; color: var(--succes); }
.sh3__prise--fait .sh3__coche { border-color: var(--succes); background: rgba(92, 117, 70, .1); }

/* ── Les splits ─────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
/* ⚠️ Bornée au desktop : `.section--ocre .split` bat `.split` en spécificité,
   donc hors media query elle garderait DEUX colonnes sur téléphone et ferait
   déborder la page (la bascule responsive ne peut pas la reprendre). */
@media (min-width: 1021px) {
  .section--ocre .split { grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 60px); }
}
.split--large { grid-template-columns: 1.5fr 1fr; }
.split .titre { font-size: clamp(26px, 3vw, 38px); }
.split__txt .section__sous { margin: 14px 0 0; }
.split__cta { margin-top: 26px; }
.split__visuel { position: relative; }
.badge-exemple {
  position: absolute; top: -11px; right: 14px; z-index: 2;
  font-family: var(--f); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--ink-muted);
  padding: 3px 10px; border-radius: 999px;
}

/* ── L'import : fichiers → workspace ────────────────────────────────────── */
.imp2 { display: flex; align-items: center; gap: 14px; min-width: 0; }
.imp2__fichiers { display: flex; flex-direction: column; gap: 10px; flex: 0 0 176px; min-width: 0; }
.imp2__fichier {
  display: flex; align-items: center; gap: 9px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--ombre-sm);
  padding: 10px 12px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft);
  opacity: 0; transform: translateX(-18px);
}
.in .imp2__fichier { animation: fichier-entre 460ms ease forwards; animation-delay: calc(var(--i) * 150ms); }
@keyframes fichier-entre { to { opacity: 1; transform: none; } }
.imp2__doc { width: 18px; height: 22px; flex: none; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px 7px 3px 3px; }
.imp2__fleche { color: var(--ocre-prof); font-size: 20px; opacity: 0; }
.in .imp2__fleche { animation: fichier-entre 400ms ease forwards; animation-delay: 420ms; }
.imp2__cadre {
  flex: 1; min-width: 0; display: flex; background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--ombre-md); overflow: hidden; font-family: var(--ui);
}
.imp2__side { width: 38px; flex: none; background: var(--vert-nuit); display: flex; justify-content: center; padding-top: 13px; }
.imp2__side .repro__logo { width: 18px; height: 18px; }
.imp2__corps { flex: 1; min-width: 0; padding: 16px; }
/* ⚠️ `1fr` vaut minmax(AUTO, 1fr) : les pistes refusaient de descendre sous
   la largeur de leur libellé, et le 4ᵉ compteur (« identité de marque »)
   sortait du cadre, coupé. minmax(0, 1fr) autorise le rétrécissement. */
.imp2__compteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.imp2__compteur { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.imp2__compteur b { font-family: var(--p); font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.imp2__compteur { min-width: 0; }
.imp2__compteur span { font-size: 10.5px; color: var(--ink-muted); display: block; line-height: 1.3; }
.imp2__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.imp2__mini {
  aspect-ratio: 1/1.15; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: grid; place-items: center; padding: 6px; overflow: hidden;
  opacity: 0; transform: scale(.7);
}
.imp2__mini img { max-height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.in .imp2__mini { animation: mini-pop 380ms cubic-bezier(.34, 1.3, .5, 1) forwards; animation-delay: calc(1150ms + var(--i) * 90ms); }
@keyframes mini-pop { to { opacity: 1; transform: none; } }
.split__visuel .accent-serif { margin-top: 22px; text-align: right; font-size: clamp(21px, 2.2vw, 26px); }

/* ── Le studio, en grand ────────────────────────────────────────────────── */
.repro--studio { display: grid; grid-template-columns: 250px 1fr; font-family: var(--ui); }
.st__clients { background: var(--vert-nuit); padding: 16px 0; display: flex; flex-direction: column; gap: 2px; }
.st__client { display: flex; align-items: center; gap: 11px; color: rgba(253, 252, 248, .62); font-size: 13px; padding: 9px 16px; border-left: 2px solid transparent; }
.st__client--actif { color: #fdfcf8; background: rgba(253, 252, 248, .07); border-left-color: var(--ocre); }
.st__pastille { width: 27px; height: 27px; flex: none; border-radius: 8px; background: rgba(253, 252, 248, .14); display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; }
.st__client--actif .st__pastille { background: var(--ocre); color: var(--vert-nuit); }
.st__noms { display: flex; flex-direction: column; min-width: 0; }
.st__noms b { font-weight: 600; }
.st__noms em { font-style: normal; font-size: 10.5px; opacity: .65; }
.st__espace { padding: 20px 24px; }
.st__entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.st__action {
  margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 15px; font-size: 13px;
}
.st__ouvrir { background: var(--vert); color: var(--page); font-size: 11.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px; }
.st__apercu { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.st__bloc { aspect-ratio: 4/3.3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.st__bloc img { width: 100%; height: 100%; object-fit: cover; }

/* ── CTA final ──────────────────────────────────────────────────────────── */
.finale { background: var(--vert); color: var(--page); text-align: center; padding: clamp(72px, 9vw, 120px) 0; }
.finale .titre { color: var(--page); font-size: clamp(30px, 4vw, 48px); }
.finale__logo { margin: 0 auto 22px; opacity: .9; }
.finale__sous { color: rgba(253, 252, 248, .78); font-size: 17.5px; max-width: 540px; margin: 14px auto 0; }
.hero2__ctas--centre { justify-content: center; }
.reassurance--cream { color: rgba(253, 252, 248, .55); }

/* ── Pages secondaires ──────────────────────────────────────────────────── */
.hero--page { background: var(--page); text-align: center; padding: clamp(56px, 8vh, 100px) 0 clamp(44px, 6vw, 80px); }
.hero--page .hero2__sous { margin: 16px auto 0; }
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.piliers--quatre { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.8vw, 36px); }
.pilier { border-top: 2px solid var(--vert); padding-top: 18px; }
.pilier__no { font-family: var(--f); font-size: 11.5px; font-weight: 600; color: var(--ocre-prof); margin-bottom: 9px; letter-spacing: 0.06em; }
.pilier h3 { font-family: var(--p); font-size: 17px; font-weight: 600; margin-bottom: 7px; letter-spacing: -0.01em; }
.pilier p { font-size: 14px; color: var(--ink-soft); }
.nuage { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.nuage li { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px; background: var(--card); }
.moments { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 84px); }
.moment { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.moment--inverse .moment__txt { order: 2; }
.moment--inverse .moment__img { order: 1; }
.moment__no { font-family: var(--f); font-size: 11.5px; font-weight: 600; color: var(--ocre-prof); margin-bottom: 10px; letter-spacing: 0.06em; }
.moment__txt h3 { font-family: var(--p); font-size: clamp(21px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.moment__txt p { color: var(--ink-soft); max-width: 440px; }
.moment__img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--ombre-md); background: var(--paper); }
.moment__img img { width: 100%; aspect-ratio: 4/4.2; object-fit: cover; }

/* ── Tarifs ─────────────────────────────────────────────────────────────── */
.pl-beta {
  max-width: 720px; margin: 0 auto 36px; text-align: center;
  background: rgba(196, 154, 72, .1); border: 1px solid rgba(196, 154, 72, .4);
  color: var(--ocre-prof); border-radius: var(--r-md); padding: 13px 22px; font-size: 13.5px; line-height: 1.55;
}
/*  ✦ 23 août — LA LECTURE EN CINQ SECONDES. Quatre mots avant les cartes :
    « je découvre », « je construis ma marque », « on travaille ensemble »,
    « on structure l'organisation ». Le tableau exhaustif existe plus bas ;
    ici on veut qu'un fondateur sache en un coup d'oeil laquelle est la sienne. */
.pl-resume {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 820px; margin: 0 auto 30px;
}
.pl-resume__x {
  display: flex; flex-direction: column; gap: 2px; text-align: center;
  padding: 12px 8px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line);
}
.pl-resume__x b { font-family: var(--p); font-size: 15px; font-weight: 600; }
.pl-resume__x span { font-size: 12px; color: var(--ink-muted); }
.pl-bascule { display: flex; justify-content: center; gap: 6px; margin-bottom: 36px; }
.pl-bascule__btn {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 9px 20px; font-family: var(--p); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all var(--t1) ease;
}
.pl-bascule__btn span { font-size: 11px; color: var(--ocre-prof); font-family: var(--f); }
.pl-bascule__btn--actif { background: var(--ink); color: var(--page); border-color: var(--ink); }
.pl-bascule__btn--actif span { color: var(--ocre); }
.pl-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pl-carte {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 13px;
}
.pl-carte--pop { border-color: var(--ocre); box-shadow: var(--ombre-md); }
.pl-pop {
  position: absolute; top: -11px; left: 24px; font-family: var(--f); font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; background: var(--ocre); color: #fff;
  padding: 4px 12px; border-radius: 999px;
}
.pl-nom { font-family: var(--p); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pl-tagline { font-size: 13.5px; color: var(--ink-soft); }
.pl-prix { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; }
.pl-prix b { font-family: var(--p); font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pl-prix em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.pl-limites { border-top: 1px solid var(--line); }
.pl-lim { display: flex; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pl-lim span { color: var(--ink-muted); }
.pl-carte .btn { margin-top: 6px; width: 100%; }
.pl-mention { font-size: 11.5px; color: var(--ink-muted); text-align: center; }
.pl-maison {
  margin-top: 20px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 26px; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; flex-wrap: wrap;
}
.pl-maison__droite { display: flex; align-items: center; gap: 18px; }
/*  Le PLANCHER de Maison, pas un « sur devis » muet : « À partir de 279 €
    /espace/mois ». Même composition que le prix d'une carte, en plus petit. */
.pl-devis { display: flex; align-items: baseline; gap: 6px; font-family: var(--p); }
.pl-devis i { font-style: normal; font-family: var(--f); font-size: 11.5px; color: var(--ink-muted); }
.pl-devis b { font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pl-devis em { font-style: normal; font-family: var(--f); font-size: 11.5px; color: var(--ink-muted); }
/*  ✦ 23 août — « N éditeur(s) compris, puis 19 € par éditeur supplémentaire ».
    C'est CETTE ligne qui remplace l'ancienne contradiction (« 59 €/éditeur »
    au-dessus de « Éditeurs : illimité ») : il n'y avait nulle part où écrire
    ce que le prix contient vraiment. */
.pl-sieges {
  display: flex; flex-direction: column; gap: 1px; margin: -6px 0 2px;
  font-size: 12.5px; line-height: 1.45;
}
.pl-sieges b { font-weight: 600; color: var(--ink); }
.pl-sieges span { color: var(--ink-muted); font-size: 11.5px; }
.pl-mention--gauche { text-align: left; margin-top: 6px; }
.pl-lecteurs { text-align: center; font-size: 13px; color: var(--ink-muted); margin-top: 24px; }
.pl-lecteurs--fin { margin-top: 8px; font-size: 12px; }
/*  Ce que Maison ajoute et qui N'EXISTE PAS ENCORE. À part du tableau, et dit :
    une case cochée pour une fonction absente est un mensonge, un paragraphe
    « nous le construisons avec vous » est une conversation. */
.pl-futur {
  margin-top: 22px; background: var(--card); border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg); padding: 22px 26px;
}
.pl-futur h3 { font-family: var(--p); font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.pl-futur ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; list-style: none; }
.pl-futur li { font-size: 13px; color: var(--ink-soft); padding-left: 16px; position: relative; }
.pl-futur li::before { content: '+'; position: absolute; left: 0; color: var(--ocre-prof); font-weight: 700; }
.pl-futur p { margin-top: 14px; font-size: 12px; color: var(--ink-muted); }
.cmp-cadre { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
/*  ⚠️ 640 et non 560 depuis que Maison est une QUATRIÈME colonne : au-dessous,
    les libellés de fonctions se cassent sur trois lignes. Le cadre défile. */
.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.cmp th, .cmp td { padding: 10px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); }
.cmp thead th { font-family: var(--p); font-size: 15px; font-weight: 600; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp-oui { color: var(--vert); font-weight: 600; }
.cmp-non { color: var(--line-strong); }
.cmp-note { font-size: 11.5px; color: var(--ink-muted); }
.faqs { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.faq { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 15px 0; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; font-family: var(--p); font-size: 20px; font-weight: 400; color: var(--ocre-prof); transition: transform var(--t2) ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 15px; color: var(--ink-soft); font-size: 14px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ft { background: var(--page); border-top: 1px solid var(--line); padding: 56px 0 0; }
.ft__int { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.ft__marque { max-width: 260px; }
.ft__baseline { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft); margin-top: 12px; }
.ft__cols { display: flex; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap; }
.ft__titre { font-family: var(--f); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: 12px; }
.ft__lien { display: block; font-size: 14px; color: var(--ink-soft); text-decoration: none; padding: 4px 0; }
.ft__lien:hover { color: var(--ink); }
.ft__mention { text-align: center; font-size: 12.5px; color: var(--ink-muted); border-top: 1px solid var(--line); margin-top: 46px; padding: 20px 28px; }

/* ── Apparitions au scroll ──────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 560ms ease, transform 560ms ease; transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .piliers, .piliers--quatre { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .split, .split--large { grid-template-columns: 1fr; }
  .split--large .split__txt { order: 1; }
  .split--large .split__visuel { order: 2; }
  .pl-grille { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .pl-resume { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
  .pl-futur ul { grid-template-columns: 1fr; }
  .pl-maison { flex-direction: column; align-items: stretch; }
  .pl-maison__droite { justify-content: space-between; }
  .rp-grille { grid-template-columns: repeat(2, 1fr); }
  .moment { grid-template-columns: 1fr; }
  .moment--inverse .moment__txt { order: 1; }
  .moment--inverse .moment__img { order: 2; }
  .mbtete, .foret__tete { grid-template-columns: 1fr; align-items: start; gap: 10px; }
  .imp2 { flex-direction: column; align-items: stretch; }
  .imp2__fichiers { flex-direction: row; flex-wrap: wrap; flex: none; }
  .imp2__fleche { display: none; }
  .repro--studio { grid-template-columns: 1fr; }
  .st__clients { flex-direction: row; overflow-x: auto; padding: 10px; }
  .st__client { border-left: 0; border-radius: 8px; flex: none; }
}
@media (max-width: 720px) {
  /*  ⚠️ 23 août — le menu mobile (panneau, bouton, pied) vit maintenant dans
      le bloc MOBILE en fin de feuille, à partir de 1020 px : à 768 px la
      ligne de liens ne tenait déjà plus. Ne pas remettre de règles .hd__nav
      ici, elles se battraient avec lui. */
  .hero2 { padding-top: 40px; }
  .sp { grid-template-columns: 1fr; }
  .sp__photo { min-height: 300px; }
  .sh3 { flex-direction: column; }
  .sh3__fleche { transform: rotate(90deg); align-self: flex-start; margin-left: 20px; }
  .imp2__compteurs { grid-template-columns: 1fr 1fr; }
  .imp2__grille { grid-template-columns: repeat(3, 1fr); }
  .piliers, .piliers--quatre { grid-template-columns: 1fr; }
  .mbpied { flex-direction: column; align-items: flex-start; }
  .hd__actions { gap: 10px; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .rv.in .sp__pin, .rv.in .fil__trait { animation: none; }
  .rv.in .fil__evt { animation: none; opacity: 1; transform: none; }
  .in .imp2__fichier, .in .imp2__fleche, .in .imp2__mini { animation: none; opacity: 1; transform: none; }
  .fil__evt { opacity: 1; transform: none; }
  .imp2__fichier, .imp2__fleche, .imp2__mini { opacity: 1; transform: none; }
  .btn, .hd, .hd__int, .mb__item { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V3 (22 août) — l'effet wow : hero qui s'assemble, post-it vivant, téléphone,
   exode des outils, liège, épingles flottantes, barre ADN, accents de section.
   Tout respecte prefers-reduced-motion (bloc en fin de fichier).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les eyebrows prennent l'accent de leur section ─────────────────────── */
.eyebrow { color: var(--acc, var(--ocre-prof)); }

/* ── Le liège — exactement celui du moodboard de l'app ──────────────────── */
.mb__toile--liege {
  background-color: #cda062;
  background-image: url(/assets/moodboard/cork.svg);
  background-repeat: repeat; background-size: 512px 512px;
  border-color: #b98d52;
}
.mb__toile--liege .mb__postit { box-shadow: 0 5px 13px rgba(40, 36, 20, 0.28); }

/* ── Le post-it vivant ──────────────────────────────────────────────────── */
/* ⚠️ `position: relative` OBLIGATOIRE : le post-it libéré est en absolute
   DANS cette section. Sans repère ici, il se positionnerait par rapport à la
   page entière et partirait à des milliers de pixels. */
.section--equipe { position: relative; padding: clamp(48px, 6vw, 88px) 0; overflow: hidden; }
.dpost-scene { position: relative; height: 264px; }
/* La classe .sh-shell (extraite du site) apporte les variables du post-it,
   mais AUSSI son fond crème #FFFAF2 : sur l'ivoire de la page, un pavé rosé.
   Ici on ne veut que les variables — le fond de la page fait le reste. */
.dpost-scene.sh-shell { background: transparent; }
.ilot .sh-shell { background: transparent; }
.dpost {
  position: absolute; width: 190px; left: 50%; top: 8px;
  --dx: -50%; --dy: 0px; --dr: -1.4deg; --ds: 1;
  opacity: 0;
}
/* plus précis que .sh-postit et .sh-postit--flat : c'est NOTRE transform */
.dpost.sh-postit, .dpost.sh-postit:hover {
  transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(var(--ds));
  transition: transform 700ms cubic-bezier(0.3, 0.75, 0.3, 1), opacity 320ms ease;
}
.dpost.colle { opacity: 1; }
.dpost.claque.sh-postit {
  transition: transform 380ms cubic-bezier(0.2, 1.45, 0.4, 1), opacity 200ms ease;
}
.dpost.envol.sh-postit {
  --dx: calc(-50% + 44vw); --dy: -230px; --dr: 22deg; --ds: 0.85;
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.45, -0.05, 0.7, 0.4), opacity 780ms ease 120ms;
}
/* la face du composant partagé est pensée pour un conteneur bloc ; ici le
   markup la porte en <span> : on rétablit le bloc, sinon min-height est
   ignoré et l'avion s'ancre n'importe où. */
.dpost .sh-postit__face { display: block; min-height: 190px; }
.dpost .sh-postit__sheet { display: block; }
.dpost__txt {
  font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3;
  color: #3a3328; white-space: pre-wrap;
}
.dpost__caret {
  display: inline-block; width: 2px; height: 17px; background: #3a3328;
  vertical-align: -3px; margin-left: 1px; opacity: 0;
}
.dpost.ecrit .dpost__caret { opacity: 1; animation: dpost-clignote 800ms steps(2) infinite; }
@keyframes dpost-clignote { 50% { opacity: 0; } }
.dpost__envoi {
  position: absolute; right: 7px; bottom: 7px; width: 27px; height: 27px;
  border-radius: 999px; display: grid; place-items: center;
  background: rgba(43, 38, 32, 0.08); color: #3a3328;
  opacity: 0; transition: opacity 300ms ease, transform 160ms ease, background 160ms ease;
}
.dpost.pret .dpost__envoi { opacity: 1; }
.dpost__envoi.clic { transform: scale(0.8); background: var(--vert); color: #fdfcf8; }
.dcur {
  position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(43, 38, 32, 0.35));
  transition: transform 750ms cubic-bezier(0.35, 0.7, 0.3, 1), opacity 300ms ease;
}
.dcur.la { opacity: 1; }
.dpost-legende { text-align: center; font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }

/* ── Le téléphone : le feed qui se remplit ──────────────────────────────── */
.tel-scene { position: relative; display: flex; gap: 30px; align-items: center; justify-content: center; min-height: 600px; }
.tel-pile { position: relative; width: 116px; height: 260px; flex: none; }
.tel-pile__label {
  position: absolute; top: 0; left: 0; font-family: var(--f); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ocre-prof);
}
.tel-pile__carte {
  position: absolute; left: 8px; width: 88px; aspect-ratio: 3 / 4; border-radius: 10px;
  overflow: hidden; border: 2px solid #ffffff; box-shadow: var(--ombre-md); background: var(--wash);
}
.tel-pile__carte img { width: 100%; height: 100%; object-fit: cover; }
.tel-pile__carte--3 { top: 46px; transform: rotate(-5deg); }
.tel-pile__carte--2 { top: 38px; transform: rotate(4deg); }
.tel-pile__carte--1 { top: 30px; transform: rotate(-1deg); z-index: 2; transition: transform 800ms cubic-bezier(0.3, 0.75, 0.3, 1), opacity 300ms ease; }
/* Le fantôme : la copie qui vole de la pile jusqu'à sa case du feed. Il vit
   dans la scène, pas dans le téléphone, donc rien ne le fait dériver. */
.tel-fantome {
  position: absolute; z-index: 6; margin: 0; pointer-events: none;
  border-radius: 10px; overflow: hidden; border: 2px solid #fff; background: var(--wash);
  box-shadow: var(--ombre-md);
  transition: transform 800ms cubic-bezier(0.3, 0.75, 0.3, 1);
}
.tel-fantome img { width: 100%; height: 100%; object-fit: cover; }
.tel {
  position: relative; width: 292px; flex: none; background: #1a1a17;
  border-radius: 46px; padding: 10px; box-shadow: 0 34px 80px rgba(43, 38, 32, 0.35);
}
.tel__ile { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 84px; height: 23px; border-radius: 999px; background: #000; z-index: 3; }
.tel__ecran { background: var(--page); border-radius: 37px; overflow: hidden; height: 566px; position: relative; }
.tel-colonne { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tel-plateformes {
  display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; box-shadow: var(--ombre-sm);
}
.tel-plateforme {
  font-family: var(--p); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 6px 16px; border-radius: 999px; transition: all var(--t2) ease;
}
.tel-plateforme--active { background: var(--ink); color: var(--page); }
.tel__contenu { transition: transform 900ms cubic-bezier(0.3, 0.7, 0.3, 1); will-change: transform; }
.tel__vue { animation: tel-fondu 360ms ease; }
.tel__vue--tt { display: none; }
.tel--tt .tel__vue--ig { display: none; }
.tel--tt .tel__vue--tt { display: block; }
@keyframes tel-fondu { from { opacity: 0; } }
.tel__barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: 44px 16px 8px; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink);
}
.tel__barre--centre { justify-content: center; }
.tel__burger { display: flex; flex-direction: column; gap: 3px; }
.tel__burger i { width: 15px; height: 1.5px; background: var(--ink); }
.tel__profil { display: flex; align-items: center; gap: 14px; padding: 6px 16px 0; }
.tel__profil--tt { justify-content: center; gap: 22px; padding-top: 8px; }
.tel__avatar-photo {
  width: 62px; height: 62px; flex: none; border-radius: 999px; overflow: hidden;
  border: 2px solid var(--line); padding: 2px; background: var(--page);
}
.tel__avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.tel__avatar-photo--centre { display: block; margin: 4px auto 0; width: 66px; height: 66px; }
.tel__stat { display: flex; flex-direction: column; align-items: center; font-family: var(--ui); }
.tel__stat b { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tel__stat em { font-style: normal; font-size: 10.5px; color: var(--ink-soft); }
.tel__bio { padding: 8px 16px 0; font-family: var(--ui); font-size: 11.5px; line-height: 1.45; color: var(--ink); display: flex; flex-direction: column; }
.tel__bio b { font-weight: 700; }
.tel__bio--centre { text-align: center; padding-top: 4px; }
.tel__lien { color: var(--bleu); }
.tel__actions { display: flex; gap: 6px; padding: 9px 16px 0; }
.tel__actions span {
  flex: 1; text-align: center; font-family: var(--ui); font-size: 11.5px; font-weight: 600;
  background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; color: var(--ink);
}
.tel__stories { display: flex; gap: 12px; padding: 11px 16px 2px; }
.tel__story { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tel__story-rond {
  width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
  border: 2px solid var(--ocre); padding: 2px; background: var(--page);
}
.tel__story-rond img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.tel__story em { font-style: normal; font-family: var(--ui); font-size: 9px; color: var(--ink-soft); }
.tel__tabs { display: flex; margin-top: 8px; border-top: 1px solid var(--line); }
.tel__tab {
  flex: 1; display: grid; place-items: center; padding: 8px 0 7px;
  color: var(--ink-muted); border-bottom: 1.5px solid transparent;
  transition: color var(--t2) ease, border-color var(--t2) ease;
}
.tel__tab--actif { color: var(--ink); border-bottom-color: var(--ink); }
.tel__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.tel--reels .tel__grille--ig { display: none; }
.tel__grille--reels { display: none; }
.tel--reels .tel__grille--reels { display: grid; animation: tel-fondu 360ms ease; }
.tel__c--haut { aspect-ratio: 9 / 14; }
.tel__lecture {
  position: absolute; left: 5px; bottom: 5px;
  font-family: var(--ui); font-size: 9px; font-weight: 600; color: #ffffff;
  background: rgba(26, 26, 23, 0.55); padding: 2px 6px; border-radius: 999px;
}
.tel__c { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--wash); }
.tel__c img { width: 100%; height: 100%; object-fit: cover; }
.tel__c--vide::after {
  content: ''; position: absolute; inset: 5px; border: 1.5px solid var(--line-strong);
  border-radius: 6px; opacity: 0.65; transition: opacity 300ms ease;
}
.tel__c--vide img { opacity: 0; transform: scale(0.55) translateY(-16px); }
.tel__c--vide.recu img {
  opacity: 1; transform: none;
  transition: transform 480ms cubic-bezier(0.34, 1.3, 0.5, 1), opacity 280ms ease;
}
.tel__c--vide.recu::after { opacity: 0; }
.puces { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.puce b { display: block; font-family: var(--f); font-weight: 700; font-size: 14.5px; color: var(--vert); }
.puce span { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ── L'exode des outils ─────────────────────────────────────────────────── */
/*  ⚠️ 22 août — les tuiles s'envolent VERS L'EXTÉRIEUR : sans rognage, elles
    élargissent le document et la page gagne une barre de défilement
    horizontale (801 px mesurés sur un écran de 1600). Le rognage se pose
    sur la SECTION, pleine largeur, pour qu'elles sortent bien de l'écran
    au lieu de buter sur le conteneur. `clip` et pas `hidden` : hidden
    créerait un conteneur de défilement (piège déjà payé sur .pf-body). */
#exode-outils { overflow-x: clip; }

/* ── L'exode : les outils RENTRENT dans la boîte, au fil du scroll ───────── */
/*  ✦ Roxane 22 août, 23h20 — « une fois qu'elle disparaît on ne comprend pas
    trop ». Avant : les tuiles s'enfuyaient hors de l'écran et laissaient un
    vide ; on ne savait pas ce qui venait de se passer, et c'était joué une
    fois pour toutes. Maintenant elles convergent vers la boîte Téséo, une par
    une, PILOTÉES PAR LE DÉFILEMENT : on avance, elles rentrent ; on remonte,
    elles ressortent. Le geste est réversible, donc relisible.
    ⚠️ Le déplacement se fait sur `left`/`top` (posés en variables par le
    composant) et non sur `transform` : le `transform` porte déjà la rotation
    de chaque tuile, et l'écraser ferait sauter l'inclinaison au départ. */
.exode { position: relative; height: 360px; }
.exode__tuile {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: rotate(var(--r, 0deg));
  transition: left 820ms cubic-bezier(.4, 0, .2, 1), top 820ms cubic-bezier(.4, 0, .2, 1),
              transform 820ms cubic-bezier(.4, 0, .2, 1), opacity 520ms ease;
}
.exode__tuile:not(.rentre) { animation: exode-flotte 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -520ms); }
@keyframes exode-flotte { 50% { transform: rotate(var(--r, 0deg)) translateY(-7px); } }
.exode__tuile b {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  font-family: var(--p); font-weight: 600; font-size: 22px; box-shadow: var(--ombre-md);
}
.exode__tuile em {
  font-style: normal; font-family: var(--f); font-size: 12px; font-weight: 600;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
  padding: 1px 9px; border-radius: 999px; white-space: nowrap;
}
/*  Rentrée : la tuile rejoint le centre, rapetisse et s'efface DANS la boîte.
    L'animation de flottement est coupée, sinon elle reprend la main sur le
    transform à mi-course. */
.exode__tuile.rentre {
  left: 50%; top: 50%; animation: none; opacity: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) * 2)) scale(.16);
}

/*  La boîte est là DÈS LE DÉBUT : c'est la destination, pas une révélation.
    Elle n'annonce plus « Tout, au même endroit » sur elle-même — la phrase
    est passée en légende, en petit, sous la scène (demande de Roxane). */
.exode__teseo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; padding: 22px 34px;
  background: var(--vert); border-radius: 20px;
  box-shadow: 0 26px 64px rgba(0, 102, 79, 0.34);
  transition: transform 420ms cubic-bezier(.2, 1.3, .4, 1), box-shadow 420ms ease;
}
/*  Un battement bref à chaque outil qui rentre : sans lui, rien ne dit que la
    boîte a REÇU quelque chose. */
.exode__teseo.recoit {
  transform: translate(-50%, -50%) scale(1.055);
  box-shadow: 0 30px 72px rgba(0, 102, 79, 0.44);
}
.exode__legende {
  text-align: center; font-family: var(--f); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); margin: 18px 0 0;
}

/* ── Les épingles flottent (post-pop) ───────────────────────────────────── */
@keyframes epingle-flotte { 50% { transform: translateY(-4px); } }
.rv.in .sp__pin { animation: pin-pop 460ms cubic-bezier(.34, 1.4, .5, 1) backwards, epingle-flotte 3.8s ease-in-out 1.4s infinite; }
.rv.in .sp__pin--2 { animation-delay: 140ms, 1.9s; }
.rv.in .sp__pin--3 { animation-delay: 280ms, 2.4s; }
.mb__pin { animation: epingle-flotte 4.4s ease-in-out infinite; }
.mb__item--3 .mb__pin { animation-delay: -2s; }

/* ── Le studio vit : l'espace actif change tout seul ────────────────────── */
.st__client { transition: background var(--t3) ease, color var(--t3) ease, border-color var(--t3) ease; cursor: default; }
.st__maj { animation: st-fondu 420ms ease; }
@keyframes st-fondu { from { opacity: 0; transform: translateY(4px); } }

/* ── Responsive des nouveautés ──────────────────────────────────────────── */
@media (max-width: 1020px) {
  .tel-scene { min-height: 0; flex-wrap: wrap; }
  .tel-pile { display: none; }
  #tel-cur { display: none; }
  .exode { height: 420px; }
  .exode__teseo { padding: 18px 26px; }
}
@media (max-width: 720px) {
  .tel { width: 250px; }
  .tel__ecran { height: 480px; }
  .dpost-scene { height: 220px; }
  .exode__tuile b { width: 46px; height: 46px; font-size: 18px; }
}

/* ── Mouvement réduit : chaque démo montre son état FINAL, sans théâtre ─── */
@media (prefers-reduced-motion: reduce) {
  .dpost { opacity: 1; }
  .dpost.sh-postit, .dpost.sh-postit:hover { transition: none; }
  .dpost__caret, .dcur { display: none; }
  .dpost.pret .dpost__envoi { opacity: 1; }
  .tel__c--vide img { opacity: 1; transform: none; transition: none; }
  .tel__c--vide::after { display: none; }
  .tel-pile__carte--1 { transition: none; }
  /*  Mouvement réduit : les outils sont déjà rentrés, la boîte les a reçus.
      L'état final, sans le trajet. */
  .exode__tuile { animation: none; transition: none; opacity: 0; }
  .exode__teseo { transform: translate(-50%, -50%); transition: none; }
  .st__maj { animation: none; }
  .tel__contenu, .tel__vue, .tel-plateforme { transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V4 (22 août) — les gestes Attio : le beam qui parcourt une bordure, le rail
   des sections à gauche, le manifeste qui se colore au fil du scroll.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le beam : un filet lumineux qui tourne autour de la bordure ────────── */
@property --lueur-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.lueur { position: relative; border-radius: var(--r-lg); }
/* ⚠️ La carte de l'exode est POSITIONNÉE (absolute) et porte aussi .lueur :
   sans ceci, la règle ci-dessus la remet en flux et elle s'étire sur toute
   la largeur de la scène. */
.exode__teseo.lueur { position: absolute; }
.lueur::before {
  content: ''; position: absolute; inset: -1.5px; z-index: 1;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--lueur-angle),
    transparent 0deg, transparent 300deg,
    rgba(196, 154, 72, 0.9) 330deg, var(--vert) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lueur-tourne 7s linear infinite;
  pointer-events: none;
}
.lueur--vert::before {
  background: conic-gradient(from var(--lueur-angle),
    transparent 0deg, transparent 300deg,
    rgba(253, 252, 248, 0.9) 335deg, var(--ocre) 352deg, transparent 360deg);
}
@keyframes lueur-tourne { to { --lueur-angle: 360deg; } }
.lueur > .repro { position: relative; z-index: 0; }
.ch__cadre.lueur::before { z-index: 5; }

/* ── Le manifeste : gris, puis chaque mot s'encre au fil du scroll ──────── */
.manifeste { padding: clamp(90px, 12vw, 170px) 0; }
/* Roxane, 22 août : « une typo un peu dans ce genre » (la citation d'Attio) :
   un serif classique, régulier, grand et serré. Newsreader en coupe display
   (font-optical-sizing) ; la couleur de repos reste sable, pas gris-bleu. */
.manifeste__texte {
  max-width: 960px; margin: 0 auto; text-align: center; text-wrap: balance;
  font-family: var(--serif-lecture); font-weight: 400; letter-spacing: -0.012em;
  font-size: clamp(30px, 3.7vw, 54px); line-height: 1.12; font-optical-sizing: auto;
}
.manifeste__texte .mot { color: #cfc6b2; transition: color 240ms ease; }
.manifeste__texte .mot--vu { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lueur::before { animation: none; display: none; }
  .manifeste__texte .mot { color: var(--ink); transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V5 (22 août, soir) — le fil principal : une ligne de couture qui se trace,
   six états qui s'allument à son passage. Pas un stepper : des preuves.
   ═══════════════════════════════════════════════════════════════════════ */
.filp { position: relative; padding-top: 6px; }
.filp__ligne {
  position: absolute; left: 5%; right: 5%; top: 121px; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.filp__trace {
  display: block; height: 100%; width: 100%; background: var(--vert);
  transform: scaleX(0); transform-origin: left;
  transition: transform 2600ms cubic-bezier(0.3, 0.6, 0.3, 1) 200ms;
}
.filp.joue .filp__trace { transform: scaleX(1); }
.filp__etapes { display: flex; justify-content: space-between; gap: 12px; }
.filp__etape {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; opacity: 0; transform: translateY(10px);
  transition: opacity 480ms ease, transform 480ms ease;
  transition-delay: calc(140ms + var(--i) * 430ms);
}
.filp.joue .filp__etape { opacity: 1; transform: none; }
.filp__txt { display: flex; flex-direction: column; align-items: center; }
.filp__visu { height: 96px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px; }
.filp__pt {
  width: 12px; height: 12px; border-radius: 999px; background: var(--page);
  border: 2.5px solid var(--line-strong); margin-bottom: 14px; position: relative; z-index: 1;
  transition: border-color 300ms ease, background 300ms ease;
  transition-delay: calc(260ms + var(--i) * 430ms);
}
.filp.joue .filp__pt { border-color: var(--vert); background: var(--vert); }
.filp__etape b { font-family: var(--f); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.filp__det { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.filp__pola {
  display: block; width: 66px; aspect-ratio: 3/3.7; background: #fff;
  padding: 5px 5px 14px; border: 1px solid var(--line); box-shadow: var(--ombre-sm);
  transform: rotate(-2deg); position: relative;
}
.filp__pola img { width: 100%; height: 100%; object-fit: cover; }
.filp__pola--photo { transform: rotate(1.8deg); }
.filp__pin { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; border-radius: 999px; background: var(--ocre); box-shadow: 0 2px 4px rgba(43, 38, 32, .3); }
.filp__dir {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-sm); padding: 12px 14px;
}
.filp__pastilles { display: flex; gap: 5px; }
.filp__pastilles i { width: 16px; height: 16px; border-radius: 999px; }
.filp__dir em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-muted); }
.filp__prod {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-sm); padding: 8px 12px 6px; width: 74px;
}
.filp__prod img { height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.filp__prod em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-soft); }
.filp__coche { color: var(--succes); font-weight: 700; }
.filp__minipin {
  position: absolute; top: 10px; right: 8px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--page); border: 1.5px solid var(--ocre-prof); display: grid; place-items: center;
  font-style: normal; font-family: var(--mono); font-size: 8px; color: var(--ocre-prof);
}
@media (max-width: 900px) {
  .filp__ligne { display: none; }
  .filp__pt { display: none; }
  .filp__etapes { display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 30px; }
  .filp__visu { margin-bottom: 10px; }
  /* sans ligne à suivre, la cascade n'a pas à durer 2,7 s */
  .filp__etape { transition-delay: calc(80ms + var(--i) * 120ms); }
}
@media (max-width: 560px) {
  .filp__etapes { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .filp__trace { transform: scaleX(1); transition: none; }
  .filp__etape { opacity: 1; transform: none; transition: none; }
  .filp__pt { border-color: var(--vert); background: var(--vert); transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V5 (22 août, soir) — le rideau : « Votre marque existe déjà » glisse
   par-dessus le manifeste et le dévoile (le geste vu chez Attio).
   ---------------------------------------------------------------------------
   Mécanique : le manifeste est collant (sticky, top:0, un écran de haut) et
   remonté d'un écran (margin-top négatif) : il est déjà EN PLACE derrière la
   section import, qui est au-dessus de lui (z-index) et défile normalement.
   Le spacer .rvl__course donne au manifeste sa course de maintien : 1,4 écran,
   le temps que le rideau sorte (1 écran) puis que les mots finissent de
   s'encrer. Tout est exprimé dans la MÊME unité (svh, vh en repli) : les
   trois valeurs doivent rester égales, sinon le manifeste bave au-dessus ou
   en dessous du rideau.
   ═══════════════════════════════════════════════════════════════════════ */
.rvl { position: relative; }
.rvl__rideau {
  position: relative; z-index: 2;
  /* au moins un écran, sinon le manifeste dépasse au-dessus du rideau et
     recouvre le bas de la section Studios */
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.rvl .rvl__revele {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100svh;
  margin-top: -100vh; margin-top: -100svh;
  padding: 0; display: flex; align-items: center;
  background: var(--page);
}
.rvl__course { height: 140vh; height: 140svh; }
@media (max-width: 720px) {
  /* sur téléphone, la section import est plus haute qu'un écran : le rideau
     est naturellement complet ; on raccourcit juste la course */
  .rvl__course { height: 120vh; height: 120svh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6 (22 août, soir) — LA CHORÉGRAPHIE DU HERO
   ---------------------------------------------------------------------------
   Une interface centrale (.ch__cadre) qui traverse quatre états, des
   satellites (.ch__sat) qui la complètent, un curseur de démonstration.
   Pilotage : data-etat (vue visible) + classes cumulatives e0..e3 (les
   animations internes d'une vue restent jouées une fois la vue quittée : la
   sortie en fondu ne « saute » pas) + .la/.part sur les satellites + .final.
   .ch--fixe (reduced-motion, ?fixe=1) : tout à l'état final, sans théâtre.
   ═══════════════════════════════════════════════════════════════════════ */
.ch { position: relative; max-width: 1184px; height: clamp(470px, 56vh, 620px); margin: 0 auto; font-family: var(--ui); color: var(--ink); }

/* ── L'interface centrale ───────────────────────────────────────────────── */
.ch__cadre {
  position: absolute; left: 50%; top: 0; width: 760px; height: clamp(430px, 51vh, 560px); margin-left: -380px;
  display: flex; background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--ombre-lg); overflow: hidden;
  opacity: 0; transform: translateY(var(--py, 0px)) translateY(26px) scale(.985);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
}
.ch.pose .ch__cadre { opacity: 1; transform: translateY(var(--py, 0px)); }
.ch.final .ch__cadre { transition: opacity 700ms ease; }
.ch__side { width: 50px; flex: none; background: var(--vert-nuit); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 15px 0; }
.ch__nav { display: flex; flex-direction: column; gap: 11px; }
.ch__nav i { width: 14px; height: 14px; border-radius: 5px; background: rgba(253, 252, 248, .16); transition: background 400ms ease; }
.ch[data-etat="0"] .ch__nav i:nth-child(1), .ch[data-etat="1"] .ch__nav i:nth-child(2),
.ch[data-etat="2"] .ch__nav i:nth-child(3), .ch[data-etat="3"] .ch__nav i:nth-child(4),
.ch[data-etat="4"] .ch__nav i:nth-child(5), .ch[data-etat="5"] .ch__nav i:nth-child(6),
.ch[data-etat="6"] .ch__nav i:nth-child(7) { background: var(--ocre); }
.ch__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch__barre { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 12px; border-bottom: 1px solid var(--line); }
.ch__fil { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ch__titre { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.ch__vues { position: relative; flex: 1; min-height: 0; }
.ch__vue {
  position: absolute; inset: 0; padding: 18px 36px 20px 22px;   /* à droite : la marge sous le satellite */
  opacity: 0; transform: translateY(14px) scale(.99); pointer-events: none;
  transition: opacity 560ms ease, transform 560ms cubic-bezier(.2,.7,.2,1);
}
.ch.e0 .ch__vue[data-vue="0"], .ch.e1 .ch__vue[data-vue="1"], .ch.e2 .ch__vue[data-vue="2"], .ch.e3 .ch__vue[data-vue="3"],
.ch.e4 .ch__vue[data-vue="4"], .ch.e5 .ch__vue[data-vue="5"], .ch.e6 .ch__vue[data-vue="6"] { transform: translateY(-10px) scale(.99); }
.ch[data-etat="0"] .ch__vue[data-vue="0"], .ch[data-etat="1"] .ch__vue[data-vue="1"],
.ch[data-etat="2"] .ch__vue[data-vue="2"], .ch[data-etat="3"] .ch__vue[data-vue="3"],
.ch[data-etat="4"] .ch__vue[data-vue="4"], .ch[data-etat="5"] .ch__vue[data-vue="5"],
.ch[data-etat="6"] .ch__vue[data-vue="6"] { opacity: 1; transform: none; }

/* ── Les gestes communs aux sept écrans ─────────────────────────────────── */
@keyframes ch-trace { to { stroke-dashoffset: 0; } }
@keyframes ch-fondu { to { opacity: 1; } }
@keyframes ch-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes ch-entre { to { opacity: 1; transform: none; } }
@keyframes ch-etire { to { transform: scaleX(1); } }
.ch__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ch__tete b, .mq__bloc > b, .cc__tete b, .sp2__tete b, .sh2__tete b, .rs__tete b, .md__tete b, .dt__tete b { font-size: 12.5px; font-weight: 600; }
.sp2__tete, .sh2__tete, .rs__tete, .md__tete, .dt__tete, .cc__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sp2__tete em, .sh2__tete em, .rs__tete em, .md__tete em, .dt__tete em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-muted); }
.ch__carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
/* chaque bloc porteur d'un --i entre en cascade quand son écran est atteint */
/* ⚠️ Bornée à .ch : le chapitre en écran partagé utilise aussi data-vue, et
   cette règle y éteignait les cartes de propagation. */
.ch [data-vue] [style*="--i"] { opacity: 0; transform: translateY(10px); }
.ch.e0 .ch__vue[data-vue="0"] [style*="--i"], .ch.e1 .ch__vue[data-vue="1"] [style*="--i"],
.ch.e2 .ch__vue[data-vue="2"] [style*="--i"], .ch.e3 .ch__vue[data-vue="3"] [style*="--i"],
.ch.e4 .ch__vue[data-vue="4"] [style*="--i"], .ch.e5 .ch__vue[data-vue="5"] [style*="--i"],
.ch.e6 .ch__vue[data-vue="6"] [style*="--i"] {
  animation: ch-entre 460ms cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(160ms + var(--i) * 110ms);
}

/* ── 0 · Identité graphique ─────────────────────────────────────────────── */
.mq { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 12px; height: 100%; }
.mq__logo {
  grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between;
  background: var(--vert-nuit); color: var(--page); border-radius: var(--r-md); padding: 18px 20px;
}
.mq__mot { font-family: var(--serif-lecture); font-size: 30px; letter-spacing: -.01em; line-height: 1; }
.mq__logo em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.mq__bloc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.mq__bloc > b { display: block; margin-bottom: 10px; }
.mq__bloc--large { grid-column: 1 / -1; }
.mq__swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 11.5px; }
.mq__swatches span { display: flex; align-items: center; gap: 8px; }
.mq__swatches i { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
.mq__swatches em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); margin-left: auto; }
.mq__typos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--ink-soft); }
.mq__t1 { font-family: var(--serif-lecture); font-size: 26px; line-height: 1; }
.mq__t2 { font-family: var(--p); font-size: 22px; font-weight: 600; line-height: 1; }
.mq__univers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mq__univers span { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.mq__univers img { width: 100%; height: 100%; object-fit: cover; }

/* ── 1 · Conception collection ──────────────────────────────────────────── */
.cc { display: grid; grid-template-columns: 0.95fr auto 1.25fr auto 1.05fr; gap: 12px; align-items: stretch; height: 100%; }
.cc__col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cc__fleche { align-self: center; color: var(--ocre-prof); font-size: 18px; }
.cc__polas { position: relative; height: 118px; }
.cc__pola { position: absolute; left: 4%; top: 6%; width: 50%; aspect-ratio: 3 / 3.4; background: #fff; padding: 4px 4px 12px; border: 1px solid var(--line); box-shadow: var(--ombre-sm); transform: rotate(-3deg); }
.cc__pola--2 { left: auto; right: 4%; top: 14%; transform: rotate(2.5deg); }
.cc__pola img { width: 100%; height: 100%; object-fit: cover; }
.cc__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.cc__pills span { font-size: 10.5px; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.cc__prop { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; row-gap: 7px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.cc__prop .cc__mini { grid-row: 1 / span 2; align-self: start; }
.cc__prop .cc__etat, .cc__prop .cc__codifier { grid-column: 2; justify-self: start; }
.cc__prop--cible { border-color: var(--line-strong); }
.cc__mini { width: 36px; height: 40px; flex: none; background: var(--paper); border-radius: 6px; display: grid; place-items: center; padding: 3px; }
.cc__mini img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cc__mini--grand { width: 58px; height: 64px; }
.cc__propTxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc__propTxt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc__propTxt b { font-weight: 600; }
.cc__propTxt em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.cc__etat { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); }
.cc__codifier {
  font-size: 11px; font-weight: 600; color: var(--page); background: var(--vert); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap; transition: transform 160ms ease, background 300ms ease;
}
.cc__codifier.clic { transform: scale(.94); }
.cc__codifier b { display: none; font-weight: 600; }
.ch.codifie .cc__codifier { background: var(--succes); }
.ch.codifie .cc__codifier span { display: none; }
.ch.codifie .cc__codifier b { display: inline; }
.cc__vide { flex: 1; border: 1px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--ink-muted); padding: 10px; }
.cc__fiche { display: none; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--vert); border-radius: 8px; background: var(--page); font-size: 12px; }
.cc__ref { font-family: var(--mono) !important; letter-spacing: .04em; }
.ch.codifie .cc__vide { display: none; }
.ch.codifie .cc__fiche { display: flex; animation: ch-pop 520ms cubic-bezier(.2, .9, .3, 1.06) both; }

/* ── 2 · Suivi de production ────────────────────────────────────────────── */
.sp2 { display: flex; flex-direction: column; height: 100%; }
.sp2__liste { display: flex; flex-direction: column; }
.sp2__rang { display: grid; grid-template-columns: 34px 1.2fr 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sp2__no { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
.sp2__rang b { font-weight: 600; }
.sp2__rang span { color: var(--ink-soft); }
.sp2__jalons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; padding-top: 16px; }
.sp2__jalon { position: relative; padding-top: 12px; font-size: 11px; }
.sp2__jalon::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--line); border-radius: 2px; }
.sp2__jalon--fait::before { background: var(--vert); }
.sp2__jalon i { position: absolute; left: 0; top: -1px; width: 10px; height: 10px; border-radius: 999px; background: var(--page); border: 2px solid var(--line-strong); }
.sp2__jalon--fait i { background: var(--vert); border-color: var(--vert); }
.sp2__jalon b { display: block; font-weight: 600; }
.sp2__jalon em { font-style: normal; color: var(--ink-muted); }

/* ── 3 · Shooting ───────────────────────────────────────────────────────── */
.sh2 { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.sh2__looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sh2__look { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; font-size: 12px; }
.sh2__photo { display: block; aspect-ratio: 3 / 2.6; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; }
.sh2__photo img { width: 100%; height: 100%; object-fit: cover; }
.sh2__look b { display: block; font-weight: 600; }
.sh2__look em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.sh2__call { background: var(--card); border: 1px solid var(--vert); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sh2__call .sh2__tete { margin-bottom: 2px; }
.sh2__heure { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-soft); }
.sh2__heure b { font-family: var(--mono); font-size: 10.5px; color: var(--ink); flex: none; }

/* ── 4 · Réseaux sociaux ────────────────────────────────────────────────── */
.rs { display: flex; flex-direction: column; height: 100%; }
.rs__semaine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; flex: 1; }
.rs__jour { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs__jour > em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.rs__libre { flex: 1; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.rs__post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px; font-size: 10.5px; }
.rs__vignette { display: block; aspect-ratio: 3 / 3.4; border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.rs__vignette img { width: 100%; height: 100%; object-fit: cover; }
.rs__post b { display: block; font-weight: 600; line-height: 1.25; }
.rs__pf { display: inline-block; margin-top: 5px; font-style: normal; font-size: 9px; font-weight: 600; border-radius: 999px; padding: 2px 7px; background: var(--wash); color: var(--ink-soft); }
.rs__pf--tt { background: var(--ink); color: var(--page); }

/* ── 5 · Médiathèque ────────────────────────────────────────────────────── */
.md { display: flex; flex-direction: column; height: 100%; }
/*  ✦ Roxane 22 août — « dans Médiathèque, mets les visuels au format
    portrait ». Une médiathèque de mode est pleine de silhouettes : en
    paysage, on ne voyait qu'une tranche du vêtement. Une seule rangée de
    portraits vaut mieux que deux rangées de paysages. */
/*  ✦ 2ᵉ passe — « deux fois moins hautes, sur deux lignes, au format carré ».
    Six colonnes sur deux rangées : la largeur d'une colonne et la hauteur
    d'une rangée tombent au même chiffre, les visuels sont donc carrés sans
    qu'on ait à forcer un rapport. */
.md__grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; }
.md__visuel { position: relative; min-height: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.md__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.md__visuel em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 9.5px; font-weight: 600; background: rgba(253, 252, 248, .92); border-radius: 999px; padding: 2px 7px; }
.md__badge { position: absolute; right: 6px; top: 6px; font-size: 9px; font-weight: 600; background: var(--succes); color: var(--page); border-radius: 999px; padding: 2px 7px; opacity: 0; transform: scale(.6); }
.md__badge--modif { background: var(--ocre-prof); opacity: 1; transform: none; }
.ch.valide .md__visuel--cible { box-shadow: 0 0 0 2px var(--vert); }
.ch.valide .md__visuel--cible .md__badge { animation: ch-pop 460ms cubic-bezier(.34, 1.4, .5, 1) forwards; }

/* ── 6 · Sales Kit ──────────────────────────────────────────────────────── */
.dt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; height: 100%; }
.dt__lookbook, .dt__commandes { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; }
.dt__page { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; flex: 1; }
.dt__cover { display: block; border-radius: var(--r-sm); overflow: hidden; }
.dt__cover img { width: 100%; height: 100%; object-fit: cover; }
.dt__lignes { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dt__ligne { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.dt__ligne:last-child { border-bottom: 0; }
.dt__ligne b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt__mini { width: 24px; height: 28px; flex: none; background: var(--paper); border-radius: 5px; display: grid; place-items: center; padding: 2px; overflow: hidden; }
.dt__mini img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dt__cmd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.dt__cmd:last-child { border-bottom: 0; }
.dt__cmd > span { display: flex; flex-direction: column; }
.dt__cmd b { font-weight: 600; }
.dt__cmd em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }

/* ── Les satellites ─────────────────────────────────────────────────────── */
.ch__sat {
  position: absolute; width: 250px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--ombre-md); padding: 13px 15px 14px;
  font-size: 12px; z-index: 3;
  opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .2, 1);
}
.ch__sat.la { opacity: 1; transform: translateY(var(--py, 0px)); }
.ch__sat.part { opacity: 0; transform: translateY(-16px) scale(.97); }
.ch.final .ch__sat.la { transition: opacity 620ms ease; animation: ch-flotte 6.4s ease-in-out infinite; }
.ch.final .ch__sat--l1.la { animation-delay: -2.1s; }
.ch.final .ch__sat--l2.la { animation-delay: -4.3s; }
@keyframes ch-flotte { 50% { transform: translateY(calc(var(--py, 0px) - 5px)); } }
.ch__sat--r1 { right: 0; top: 74px; width: 258px; }
.ch__sat--l1 { left: 10px; top: 92px; width: 230px; }
.ch__sat--l2 { left: 28px; bottom: 12px; width: 250px; }
.sat__titre { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.sat__titre em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); letter-spacing: .04em; }
.sat__signal { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink-muted); }
.sat__signal b { flex: 1; font-weight: 500; color: var(--ink); }
.sat__signal em { font-style: normal; font-family: var(--mono); font-size: 10px; }
.sat__signal--haut { color: var(--vert); }
.sat__signal--haut em { color: var(--vert); }
.sat__spark { width: 60px; height: 18px; flex: none; }
.sat__swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sat__swatches span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.sat__swatches i { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.sat__note { margin-top: 10px; font-size: 11px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 8px; }
.sat__anneau { display: flex; align-items: center; gap: 14px; }
.sat__anneau svg { width: 76px; height: 76px; flex: none; }
.sat__legende { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.sat__legende span { display: flex; align-items: center; gap: 7px; }
.sat__legende span b { margin-left: auto; font-weight: 600; }
.sat__legende i { width: 8px; height: 8px; border-radius: 999px; }
.sat__legende em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); margin-top: 3px; }
.pa__ligne { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-soft); opacity: 0; transform: translateX(6px); }
.pa__ligne b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pa__ligne--total { border-top: 1px solid var(--line); color: var(--ink); margin-top: 2px; padding-top: 7px; }
.pa__ligne--fine { font-size: 11px; padding: 3px 0; }
.ch__sat.la .pa__ligne { animation: ch-entre 420ms ease forwards; animation-delay: calc(250ms + var(--i, 3) * 120ms); }
.pa__barre { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--wash); margin: 8px 0 10px; }
.pa__barre i { display: block; width: var(--w); height: 100%; transform: scaleX(0); transform-origin: left; }
.ch__sat.la .pa__barre i { animation: ch-etire 800ms cubic-bezier(.2, .7, .2, 1) forwards; }
.ch__sat.la .pa__barre i:nth-child(1) { animation-delay: 800ms; }
.ch__sat.la .pa__barre i:nth-child(2) { animation-delay: 1000ms; }
.ch__sat.la .pa__barre i:nth-child(3) { animation-delay: 1200ms; }
.pa__vente { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; opacity: 0; }
.pa__vente b { font-family: var(--p); font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch__sat.la .pa__vente { animation: ch-fondu 500ms ease 1300ms forwards; }
.pa__ok { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--vert); background: rgba(0, 102, 79, .07); border-radius: 6px; padding: 6px 9px; opacity: 0; }
.ch__sat.la .pa__ok { animation: ch-fondu 500ms ease 1900ms forwards; }
.py { display: flex; align-items: center; gap: 14px; }
.py__forme { position: relative; width: 112px; height: 96px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.py__niveau { display: block; height: 28px; transform: scaleY(0); transform-origin: bottom; opacity: 0; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.py__niveau--premium { width: 44%; height: 26px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.py__niveau--coeur { width: 72%; height: 32px; }
.py__niveau--entree { width: 100%; height: 32px; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.ch__sat.la .py__niveau { animation: py-monte 620ms cubic-bezier(.3, .8, .3, 1) forwards; animation-delay: calc(250ms + (2 - var(--i)) * 230ms); }
@keyframes py-monte { to { transform: none; opacity: 1; } }
.py__marque {
  position: absolute; right: -6px; top: 34px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--ink); color: var(--page); font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  opacity: 0; transform: translateX(-6px);
}
.py__marque i { width: 6px; height: 6px; border-radius: 999px; background: var(--ocre); }
.ch__sat.la .py__marque { animation: ch-entre 460ms ease 1250ms forwards; }
.py__legende { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; line-height: 1.25; white-space: nowrap; }
.py__legende span { display: flex; flex-direction: column; }
.py__legende b { font-weight: 600; font-size: 11.5px; }
.py__legende em { font-style: normal; color: var(--ink-muted); }
.pa__ok { white-space: nowrap; }

/* pièces communes aux nouveaux satellites (V6.3) */
.sat__persona { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 8px; }
.sat__persona > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sat__persona b { font-weight: 600; }
.sat__persona em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.sat__avatar { width: 34px; height: 34px; flex: none; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.sat__avatar--petit { width: 26px; height: 26px; }
.sat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sat__lignes { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--ink-soft); }
.sat__lignes > span { display: flex; align-items: center; gap: 8px; }
.sat__lignes b { font-weight: 600; color: var(--ink); }
.sat__lignes--rangs { gap: 8px; }
.sat__rang > span { display: flex; flex-direction: column; min-width: 0; }
.sat__rang em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.sat__pastille { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--vert-nuit); color: var(--page); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 10px; }
.sat__ok { margin-left: auto; font-style: normal; color: var(--succes); font-size: 11px; }
.sat__vert { color: var(--vert); font-weight: 600; }
.sat__lignes--idees i { width: 6px; height: 6px; border-radius: 999px; background: var(--ocre); flex: none; }
.sat__bench { display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; }
.sat__marque { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.sat__marque > span { grid-column: 1; color: var(--ink-soft); }
.sat__marque > span em { font-style: normal; color: var(--vert); font-weight: 600; }
.sat__marque b { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.sat__marque i { grid-column: 1; display: block; height: 6px; width: var(--w); border-radius: 999px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; }
.sat__marque--vous i { background: var(--vert); }
.ch__sat.la .sat__marque i { animation: ch-etire 800ms cubic-bezier(.2, .7, .2, 1) 500ms forwards; }
.sat__retourPhoto { position: relative; height: 92px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; }
.sat__retourPhoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sat__pin { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 999px; background: var(--page); border: 1.5px solid var(--ocre-prof); font-family: var(--mono); font-size: 8px; color: var(--ocre-prof); display: grid; place-items: center; }
.sat__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sat__reels span { position: relative; aspect-ratio: 9 / 13; border-radius: 6px; overflow: hidden; }
.sat__reels img { width: 100%; height: 100%; object-fit: cover; }
.sat__reels i { position: absolute; left: 5px; bottom: 4px; font-style: normal; font-size: 9px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.sat__actions { display: flex; gap: 6px; margin-top: 4px; }
.sat__btn { flex: 1; text-align: center; font-size: 11px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 4px; transition: transform 160ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sat__btn--plein { background: var(--vert); color: var(--page); border-color: var(--vert); }
.sat__btn.clic { transform: scale(.95); }
.sat__publie { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--vert); background: rgba(0, 102, 79, .07); border-radius: 6px; padding: 6px 9px; opacity: 0; transform: translateY(6px); }
.ch.valide .sat__publie { animation: ch-entre 420ms ease forwards; }
.sat__facture { display: flex; flex-direction: column; margin-top: 8px; font-size: 11.5px; }
.sat__facture > span { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.sat__facture b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sat__total { color: var(--ink) !important; font-weight: 600; }
.sat__total b { font-family: var(--p); font-size: 15px; }

/* ── L'état fixe : reduced-motion et ?fixe=1 montrent la fin, sans jouer ── */
.ch--fixe, .ch--fixe * { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.ch--fixe .dcur { display: none; }
.hero2--sanspiste .hero2__piste { height: auto; }
.hero2--sanspiste .hero2__collant { position: static; }
.hero2--sanspiste .hero2__cmd { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ch__sat--r1 { right: -10px; }
  .ch__sat--l1 { left: 2px; }
  .ch__sat--l2 { left: 12px; }
}
@media (max-width: 1020px) {
  .hero2__cmd { position: static; justify-content: center; margin-top: 20px; }
  .hero2__haut { grid-template-columns: 1fr; }
  .hero2__texte { text-align: center; padding-top: 0; }
  .hero2 h1.hero2__titre { max-width: none; margin: 0 auto; }
  .hero2__sous { margin-left: auto; margin-right: auto; }
  .hero2__ctas { justify-content: center; }
  .hero2__photo {
    position: relative; left: 0; right: 0; top: 0; order: -1;
    /*  ⚠️ `aspect-ratio` DOIT être annulé ici. Avec un rapport ET une hauteur
        imposée, la boîte se donne la largeur qui va avec (340 × 1,74 = 592 px)
        et emporte toute la colonne du hero : sur un écran de 390 px, le titre
        sortait de l'écran, rogné par le `overflow-x: clip` de .hero2 — donc
        SANS barre de défilement pour le signaler. */
    aspect-ratio: auto; min-height: 0;
    height: clamp(230px, 42vw, 360px); margin: 0 0 24px;
  }
  .hero2__img, .hero2__attente {
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
    border-radius: var(--r-lg);
  }
  /*  Les repères restent des filets, ici aussi : la pastille crème qu'ils
      portaient sur téléphone remettait exactement le look qu'on vient de
      retirer sur grand écran. */
  .hero2__anno { font-size: 11px; }
  .hero2__anno b { margin-right: 32px; padding: 4px 11px; }
  .hero2__anno b::before { width: 24px; right: -28px; }
  .hero2__anno--1 { left: 4%; top: 12%; }
  .hero2__anno--2 { left: 2%; top: 40%; }
  .hero2__anno--3 { left: 3%; top: 66%; }
  .hero2__anno--1 { top: 12%; } .hero2__anno--2 { top: 32%; } .hero2__anno--3 { top: 52%; }
  .hero2__scene { margin-top: 24px; }
  .ch { height: auto; }
  .ch__cadre { position: relative; left: 0; top: 0; width: 100%; height: 500px; margin: 0; }
  .ch__sat { display: none; }
}
@media (max-width: 720px) {
  .ch__cadre { height: 540px; }
  .ch__side { width: 40px; }
  .ch__vue { padding: 14px; }
  .ch__barre { padding: 12px 14px 10px; }
  .mq { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mq__bloc--large { grid-column: auto; }
  .mq__univers { grid-template-columns: repeat(2, 1fr); }
  .cc { grid-template-columns: 1fr; }
  .cc__fleche { display: none; }
  .cc__polas { height: 96px; }
  .sp2__rang { grid-template-columns: 30px 1fr auto; }
  .sp2__rang > span { display: none; }
  .sp2__jalons { grid-template-columns: 1fr 1fr; }
  .sh2__looks { grid-template-columns: 1fr 1fr; }
  .sh2__look:nth-child(3) { display: none; }
  .rs__semaine { grid-template-columns: repeat(3, 1fr); }
  .rs__jour:nth-child(n+4) { display: none; }
  .md__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .dt { grid-template-columns: 1fr; }
  .dt__page { grid-template-columns: 1fr; }
  .dt__cover { display: none; }
  .dt__ligne { white-space: nowrap; }
  .dt__tete { flex-direction: column; gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6.1 (22 août) — LE HAUT DU HERO
   ---------------------------------------------------------------------------
   Roxane : « c'est trop fade, ça fait site basic ». Trois causes traitées :
   l'eyebrow répétait le sous-titre, le sous-titre était un catalogue de six
   mots, et la réassurance doublonnait la bande noire. Gestes : un titre en
   deux temps (le second en serif italique, celui du manifeste), une cascade
   d'entrée, et une frise qui LÉGENDE la chorégraphie en dessous — elle
   s'encre au fil de la démonstration, comme le manifeste en bas de page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La cascade d'entrée (au chargement, une seule fois) ────────────────── */
.hero2__titre, .hero2__sous, .hero2__ctas, .hero2__photo {
  animation: hero-monte 760ms cubic-bezier(.2, .7, .2, 1) both;
}
.hero2__titre { animation-delay: 60ms; }
.hero2__photo { animation-delay: 180ms; animation-duration: 950ms; }
.hero2__sous { animation-delay: 260ms; }
.hero2__ctas { animation-delay: 360ms; }
@keyframes hero-monte { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .hero2__titre, .hero2__sous, .hero2__ctas,
  .hero2__photo, .hero2__anno { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6.2 (22 août) — LE SHOOTING, PRÉPARÉ DE BOUT EN BOUT
   ---------------------------------------------------------------------------
   Un plan de travail : sept cartes qui se posent en cascade, et au centre le
   moment fort — deux produits quittent la bibliothèque et composent le Look
   06. Chaque carte porte une vraie fonction (Casting, Moodboard, Looks, Shot
   list, Lieux, Matériel, Call sheet), jamais un bloc décoratif.
   ═══════════════════════════════════════════════════════════════════════ */
.prep {
  position: relative; display: grid; grid-template-columns: 224px minmax(0, 1fr) 198px;
  gap: 16px; align-items: start; font-family: var(--ui); color: var(--ink);
}
.prep__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/*  La colonne de droite ne porte plus que la call sheet : elle est étroite,
    et « Call sheet » / « Envoyée à l'équipe » se coupaient chacun en deux
    sur la même ligne. En colonne, le titre garde sa ligne. */
.prep__col--d .prep__tete { flex-direction: column; align-items: flex-start; gap: 2px; }
.prep__carte, .prep__look {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-sm); padding: 13px 14px;
  opacity: 0; transform: translateY(16px);
}
.prep.joue .prep__carte, .prep.joue .prep__look {
  animation: ch-entre 620ms cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i) * 170ms);
}
.prep__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.prep__tete b { font-size: 12.5px; font-weight: 600; }
.prep__tete em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; }

/* Casting */
.prep__equipe { display: flex; flex-direction: column; gap: 8px; }
.prep__pers { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.prep__avatar { width: 30px; height: 30px; flex: none; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.prep__avatar img { width: 100%; height: 100%; object-fit: cover; }
.prep__pers span span, .prep__pers > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.prep__pers b { font-weight: 600; }
.prep__pers em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.prep__ok { margin-left: auto; font-style: normal; font-size: 11px; color: var(--succes); }

/* Moodboard du shoot */
.prep__planche {
  position: relative; height: 116px; border-radius: var(--r-sm); overflow: hidden;
  background-color: #cda062; background-image: url(/assets/moodboard/cork.svg); background-size: 340px 340px;
}
.prep__pola { position: absolute; background: #fff; padding: 3px 3px 9px; box-shadow: 0 4px 10px rgba(40, 36, 20, .3); }
.prep__pola img { width: 100%; height: 100%; object-fit: cover; }
.prep__pola--1 { left: 6%; top: 12%; width: 32%; aspect-ratio: 3/3.6; transform: rotate(-4deg); }
.prep__pola--2 { left: 36%; top: 22%; width: 30%; aspect-ratio: 3/3.6; transform: rotate(2.5deg); }
.prep__pola--3 { right: 6%; top: 10%; width: 30%; aspect-ratio: 3/3.6; transform: rotate(-1.5deg); }

/* Le look : la bibliothèque nourrit la silhouette */
/*  ⚠️ Les trois looks passent AVANT la bibliothèque dans le partage : ce
    sont eux qu'on regarde, et à 1fr chacun ils tombaient à 90 px de large
    — trois colonnes écrasées où plus rien n'était lisible. */
.prep__look { display: grid; grid-template-columns: minmax(0, .72fr) auto minmax(0, 1.75fr); gap: 12px; align-items: stretch; }
.prep__biblio, .prep__cadre-look { min-width: 0; display: flex; flex-direction: column; }
.prep__pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prep__piece {
  aspect-ratio: 1/1.05; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; padding: 7px; overflow: hidden;
  transition: transform 900ms cubic-bezier(.3, .75, .3, 1), opacity 400ms ease;
}
.prep__piece img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.prep__piece.prise { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert); }
/* Le fantôme : la copie qui vole vers le look. L'original reste rangé dans
   la bibliothèque — un produit ne disparaît pas parce qu'on l'utilise. */
.prep__fantome {
  position: absolute; z-index: 5; margin: 0; pointer-events: none;
  box-shadow: var(--ombre-md); background: var(--card);
  transition: transform 900ms cubic-bezier(.3, .75, .3, 1);
}
.prep__fleche { align-self: center; color: var(--ocre-prof); font-size: 18px; }
.prep__mannequin {
  position: relative; flex: 1; min-height: 132px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px dashed var(--line-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px;
}
.prep__slot {
  width: 62%; border-radius: 6px; display: grid; place-items: center;
  border: 1px dashed var(--line-strong); transition: border-color 300ms ease, background 300ms ease;
}
.prep__slot--haut { height: 58%; }
.prep__slot--bas { height: 32%; width: 44%; }
.prep__slot img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transform: scale(.86); }
.prep__slot.plein { border-style: solid; border-color: var(--vert); background: var(--card); }
.prep__slot.plein img { opacity: 1; transform: none; transition: opacity 420ms ease, transform 520ms cubic-bezier(.3, 1.2, .4, 1); }
.prep__compte { color: var(--ink-muted); transition: color 300ms ease; }
.prep__compte.plein { color: var(--vert); }

/* Shot list */
.prep__prises { display: flex; flex-direction: column; gap: 2px; }
.prep__prise { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid var(--line); }
.prep__prise:last-child { border-bottom: 0; }
.prep__case {
  width: 17px; height: 17px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 5px;
  display: grid; place-items: center; font-style: normal; font-size: 10px; color: transparent;
  transition: all 300ms ease;
}
.prep__prise.fait { color: var(--ink); }
.prep__prise.fait .prep__case, .prep__item--pret .prep__case {
  border-color: var(--succes); background: rgba(92, 117, 70, .12); color: var(--succes);
}

/* Lieux & itinéraire */
.prep__carte-lieu { position: relative; height: 78px; border-radius: var(--r-sm); overflow: hidden; }
.prep__carte-lieu > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.4) brightness(1.16) contrast(.92); }
.prep__carte-lieu::after { content: ''; position: absolute; inset: 0; background: rgba(43, 38, 32, .18); }
.prep__trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.prep__trace path {
  fill: none; stroke: var(--page); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(43, 38, 32, .5));
  stroke-dashoffset: 200;
}
.prep.joue .prep__trace path { animation: ch-trace 1400ms linear 900ms forwards; }
.prep__point { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 999px; background: var(--ocre); border: 2px solid var(--page); box-shadow: 0 1px 3px rgba(43, 38, 32, .4); }
.prep__point--a { left: 11%; top: 68%; }
.prep__point--b { left: 86%; top: 24%; background: var(--vert); }
.prep__trajet {
  position: absolute; z-index: 2; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 9px;
  background: rgba(253, 252, 248, .92); border-radius: 999px; padding: 2px 7px; color: var(--ink);
}
.prep__adresses { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; font-size: 11.5px; color: var(--ink-soft); }
.prep__adresses span { display: flex; align-items: center; gap: 7px; }
.prep__adresses i { width: 7px; height: 7px; border-radius: 999px; background: var(--ocre); flex: none; }
.prep__adresses span:last-child i { background: var(--vert); }

/* Matériel */
.prep__items { display: flex; flex-direction: column; gap: 6px; }
.prep__item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-muted); }
.prep__item--pret { color: var(--ink); }

/* Call sheet */
.prep__horaires { display: flex; flex-direction: column; gap: 7px; }
.prep__heure { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.prep__heure b { font-family: var(--mono); font-size: 10.5px; color: var(--ink); flex: none; }
.prep__carte--call { border-color: var(--vert); box-shadow: 0 8px 22px rgba(0, 102, 79, .12); }

@media (max-width: 1020px) {
  .prep { grid-template-columns: 1fr 1fr; }
  .prep__col--c { grid-column: 1 / -1; order: -1; }
  #prep-cur { display: none; }
}
@media (max-width: 720px) {
  .prep { grid-template-columns: 1fr; }
  .prep__look { grid-template-columns: 1fr; }
  .prep__fleche { transform: rotate(90deg); justify-self: center; }
  .prep__mannequin { min-height: 128px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6.2 — LE SUIVI DE PRODUCTION : on épingle, l'atelier reçoit
   ═══════════════════════════════════════════════════════════════════════ */
.repro--suivi .repro__body { padding: 0; }
.sv { position: relative; display: grid; grid-template-columns: 1.45fr 1fr; }
.sv__photo { position: relative; min-height: 430px; background: var(--wash); }
.sv__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sv__version {
  position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; align-items: center;
  background: rgba(253, 252, 248, .94); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; font-family: var(--mono); font-size: 11px; z-index: 3;
}
.sv__version span { color: var(--ink-muted); }
.sv__v2 { color: var(--ink-muted); transition: color 400ms ease; }
.sv.envoye .sv__v2 { color: var(--vert); }
.sv__pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px;
  background: var(--page); border: 2px solid var(--ocre-prof);
  display: grid; place-items: center; box-shadow: var(--ombre-sm); z-index: 2;
  opacity: 0; transform: scale(0);
}
.sv__pin i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ocre-prof); }
.sv__pin.posee { animation: pin-pop 460ms cubic-bezier(.34, 1.4, .5, 1) forwards, epingle-flotte 3.8s ease-in-out 1s infinite; }
@keyframes pin-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.sv__panneau { padding: 22px 24px; display: flex; flex-direction: column; background: var(--page); font-family: var(--ui); }
.sv__vide {
  margin-top: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 14px; text-align: center; font-size: 12.5px; color: var(--ink-muted);
  transition: opacity 300ms ease;
}
.sv__vide.parti { opacity: 0; display: none; }
.sv__liste { display: flex; flex-direction: column; margin-top: 12px; }
.sv__retour {
  display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.45;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(6px);
}
.sv__retour.la { opacity: 1; transform: none; transition: opacity 320ms ease, transform 320ms ease; }
.sv__num {
  font-family: var(--mono); font-size: 10px; color: var(--ocre-prof); flex: none;
  border: 1px solid var(--line-strong); border-radius: 999px; width: 24px; height: 24px;
  display: grid; place-items: center;
}
.sv__txt { min-height: 19px; }
.sv__envoi {
  position: relative; margin-top: auto; align-self: flex-start; background: var(--vert); color: var(--page);
  font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: var(--r-md);
  transition: transform 160ms ease, background 300ms ease, opacity 300ms ease;
}
.sv__envoi b { display: none; font-weight: 500; }
.sv__envoi.clic { transform: scale(.96); }
.sv.envoye .sv__envoi { background: var(--succes); }
.sv.envoye .sv__envoi span { display: none; }
.sv.envoye .sv__envoi b { display: inline; }
.sv__atelier {
  display: flex; align-items: center; gap: 11px; margin-top: 14px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 14px; font-size: 12.5px;
  opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2, .8, .3, 1);
}
.sv.envoye .sv__atelier { opacity: 1; transform: none; transition-delay: 420ms; }
.sv__atelier > span:nth-child(2) { display: flex; flex-direction: column; }
.sv__atelier b { font-weight: 600; }
.sv__atelier em { font-style: normal; font-size: 11px; color: var(--ink-muted); }
.sv__attente { margin-left: auto; text-align: right; }
.sv__rond { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--succes); box-shadow: 0 0 0 4px rgba(92, 117, 70, .16); }
.foret .repro--suivi { box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }

@media (max-width: 720px) {
  .sv { grid-template-columns: 1fr; }
  .sv__photo { min-height: 280px; }
  #sv-cur { display: none; }
}

/* ── Mouvement réduit : les deux scènes montrent leur état final ────────── */
@media (prefers-reduced-motion: reduce) {
  .prep__carte, .prep__look { opacity: 1; transform: none; animation: none !important; }
  .prep__trace path { stroke-dashoffset: 0; animation: none !important; }
  .prep__fantome { display: none; }
  .sv__pin { opacity: 1; transform: none; animation: none !important; }
  .sv__retour { opacity: 1; transform: none; }
  .sv__vide { display: none; }
  .sv__atelier { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6.4 (22 août) — LE PRINCIPE : une info changée ici, à jour partout
   ---------------------------------------------------------------------------
   La démo sticky racontait un parcours, comme le hero : redondant. Le
   principe n'est pas un parcours, c'est la SIMULTANÉITÉ. La fiche en haut,
   les quatre usages en bas, quatre courbes entre les deux. Chaque valeur est
   un empilement avant/après dans la MÊME cellule de grille : rien ne saute
   quand elle bascule.
   ═══════════════════════════════════════════════════════════════════════ */
.prop { position: relative; font-family: var(--ui); color: var(--ink); }
.prop__source {
  position: relative; z-index: 2; width: min(430px, 100%); margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-md); padding: 14px 16px 16px;
}
.prop__tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.prop__tete b { font-size: 12.5px; font-weight: 600; }
.prop__tete em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-muted); }
.prop__champ {
  position: relative; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; font-size: 13px;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 160ms ease;
}
.prop__champ.clic { transform: scale(.99); }
.prop__champ.ouvert, .prop.change .prop__champ { border-color: var(--vert); box-shadow: 0 0 0 2px rgba(0, 102, 79, .12); }
.prop__nom { color: var(--ink-muted); flex: none; }
.prop__chevron { margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg) translateY(-2px); flex: none; }
.prop__val { display: grid; flex: 1; min-width: 0; }
.prop__val em { grid-area: 1 / 1; font-style: normal; font-weight: 600; transition: opacity 420ms ease, transform 420ms ease; }
.prop__apres { opacity: 0; transform: translateY(7px); color: var(--vert); }
.prop.change .prop__source .prop__avant { opacity: 0; transform: translateY(-7px); }
.prop.change .prop__source .prop__apres { opacity: 1; transform: none; }
.prop__menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: 3;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.2, .8, .3, 1);
}
.prop__menu.ouvert { opacity: 1; transform: none; }
.prop__menu em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-muted); padding: 4px 8px 6px; }
.prop__opt { font-size: 12.5px; padding: 7px 9px; border-radius: 6px; transition: background 200ms ease, color 200ms ease; }
.prop__opt--survol { background: var(--wash); }
.prop__opt--choisie { background: rgba(0, 102, 79, .1); color: var(--vert); font-weight: 600; }
.prop__pont { position: relative; height: 78px; }
.prop__liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prop__lien {
  fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
.prop.maj .prop__lien {
  stroke: var(--vert);
  animation: ch-trace 620ms cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i) * 180ms);
}
.prop__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prop__carte {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 14px; min-width: 0; transition: border-color 400ms ease, box-shadow 400ms ease;
}
.prop__carte b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.prop__carte .prop__val { font-size: 12.5px; }
.prop__carte .prop__val em { font-weight: 500; }
.prop__legende { display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-muted); margin-top: 8px; }
.prop.maj .prop__carte { border-color: rgba(0, 102, 79, .45); box-shadow: 0 6px 18px rgba(0, 102, 79, .1); transition-delay: calc(300ms + var(--i) * 180ms); }
.prop.maj .prop__carte .prop__avant { opacity: 0; transform: translateY(-7px); transition-delay: calc(320ms + var(--i) * 180ms); }
.prop.maj .prop__carte .prop__apres { opacity: 1; transform: none; transition-delay: calc(320ms + var(--i) * 180ms); }
.prop__bilan {
  margin: 26px auto 0; text-align: center; font-family: var(--serif-lecture); font-style: italic;
  font-size: clamp(19px, 2.1vw, 25px); color: var(--vert); font-optical-sizing: auto;
  opacity: 0; transform: translateY(8px); transition: opacity 620ms ease, transform 620ms ease;
}
.prop.maj .prop__bilan { opacity: 1; transform: none; transition-delay: 1250ms; }

@media (max-width: 900px) {
  .prop__cartes { grid-template-columns: 1fr 1fr; }
  .prop__pont { height: 46px; }
  .prop__liens { display: none; }
  #prop-cur { display: none; }
}
@media (max-width: 560px) {
  .prop__cartes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .prop__lien { stroke-dashoffset: 0; stroke: var(--vert); animation: none !important; }
  .prop__val em { transition: none; }
  .prop__bilan { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6.8 (22 août) — À PLUSIEURS : la démo collaborative, le post-it à côté
   ---------------------------------------------------------------------------
   Le post-it occupait toute la largeur pour lui seul. Il devient le
   compagnon d'une démonstration du travail à plusieurs : présence, épingle
   posée par quelqu'un d'autre, validation tracée, notification.
   ═══════════════════════════════════════════════════════════════════════ */
/*  ⚠️ 22 août, 3ᵉ passe (Roxane : « il y a l'animation post-it et l'autre,
    on ne sait pas où regarder, c'est le bordel »). Il n'y a plus deux
    colonnes qui s'animent en parallèle : UNE scène, une seule séquence
    (épingle → validation → post-its), et les trois points en dessous. */
.equipe { display: block; }
.equipe__demo { max-width: 940px; margin: 0 auto; }
.equipe .puces { margin-top: clamp(26px, 4vh, 44px); }
.equipe .puce b { color: var(--vert); }
.puces--rangee { flex-direction: row; gap: clamp(20px, 3vw, 44px); }
.puces--rangee .puce { flex: 1 1 0; min-width: 0; }

/*  ⚠️ Roxane 22 août — le post-it se colle À GAUCHE du cadre, dans la marge,
    et non plus par-dessus la photo : la pièce reste entièrement visible et
    le papier a l'air posé à côté de l'écran, comme sur son bureau.
    Il ne sort du cadre que s'il y a vraiment la place (voir plus bas) ;
    sinon il reprend sa position d'origine, en bas à gauche de la photo. */
.equipe__postit { position: absolute; left: 3%; bottom: 10px; width: 218px; z-index: 5; }
.equipe__postit .dpost-scene { height: 214px; }
/*  1440 px, pas moins : en dessous, la marge à gauche du cadre ne fait plus
    246 px et le post-it sortait de la section (qui rogne ce qui dépasse).
    Le calcul : marge = (fenêtre - 1160) / 2 + 110, il faut 14 + 26 + 206. */
@media (min-width: 1440px) {
  .equipe__postit { left: auto; right: calc(100% + 26px); bottom: auto; top: 4px; width: 206px; }
}
.equipe__postit .dpost.envol.sh-postit { --dx: calc(-50% + 130px); --dy: -180px; }

/* ── La scène collaborative ─────────────────────────────────────────────── */
.eq { position: relative; font-family: var(--ui); color: var(--ink); }
.eq__cadre {
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--ombre-md); overflow: hidden;
}
.eq__tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.eq__tete b { font-size: 13.5px; font-weight: 600; display: block; }
.eq__presents { display: flex; align-items: center; gap: 7px; font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.eq__presents i { width: 7px; height: 7px; border-radius: 999px; background: var(--succes); box-shadow: 0 0 0 3px rgba(92, 117, 70, .18); }
.eq__corps { display: grid; grid-template-columns: 1fr 1fr; }
/*  Le point d'épingle vit ici : l'épingle et sa fenêtre de saisie s'y
    accrochent toutes les deux. Il est placé à DROITE de la photo pour ne
    pas passer sous les post-its qui se collent en bas à gauche. */
.eq__photo { position: relative; min-height: 262px; background: var(--wash); --pin-x: 62%; --pin-y: 21%; }
.eq__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/*  ⚠️ L'épingle est copiée sur celle de l'app (écran des revues) : rond
    PLEIN couleur accent, bord crème de 2 px, numéro en chiffres monospace
    gras. Avant, c'était un rond crème bordé d'ocre — l'inverse. Roxane :
    « un truc qui ressemble vraiment aux épingles qu'on vient piner ». */
.eq__pin {
  position: absolute; left: var(--pin-x); top: var(--pin-y); width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 999px; background: var(--ocre-prof); border: 2px solid var(--page);
  display: grid; place-items: center; z-index: 3;
  box-shadow: 0 1px 5px rgba(43, 38, 32, .32), 0 0 0 3px rgba(138, 106, 31, .28);
  opacity: 0; transform: scale(0);
}
.eq__pin i { font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--page); }

/*  La fenêtre de saisie de l'épingle, comme dans l'app : elle s'ouvre au
    point cliqué, on écrit ce qui ne va pas, on coche, l'épingle se pose. */
.eq__saisie {
  /*  ⚠️ Comme dans l'app : la fenêtre est bornée pour ne jamais sortir du
      cadre de la photo, même si l'épingle est posée tout à droite. */
  position: absolute; left: min(var(--pin-x), calc(100% - 244px)); top: var(--pin-y); margin: 16px 0 0 -12px;
  display: flex; align-items: center; gap: 6px; width: 236px; max-width: 84%;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--ombre-md); padding: 6px; z-index: 4;
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: top left;
  transition: opacity 260ms ease, transform 300ms cubic-bezier(.3, .9, .3, 1.05);
  pointer-events: none;
}
.eq__saisie.la { opacity: 1; transform: none; }
.eq__saisieChamp {
  flex: 1; min-width: 0; position: relative;
  background: var(--page); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px; font-size: 12px; line-height: 1.35; min-height: 30px;
}
.eq__saisieTxt { color: var(--ink); }
.eq__saisieInvite { color: var(--ink-muted); transition: opacity 200ms ease; }
.eq__saisie.rempli .eq__saisieInvite { opacity: 0; }
.eq__saisie.ecrit .eq__saisieTxt::after {
  content: ''; display: inline-block; width: 1.5px; height: 12px; margin-left: 1px;
  background: var(--ocre-prof); vertical-align: -2px; animation: dpost-clignote 800ms steps(2) infinite;
}
.eq__saisieOk {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; color: var(--vert);
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.eq__saisieOk.clic { transform: scale(.82); background: var(--vert); color: var(--page); }

/*  Le type de l'épingle, comme dans l'app : une validation, c'est quelqu'un
    qui décide — il valide, ou il demande des modifications. */
.eq__type {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ocre-prof); background: rgba(196, 154, 72, .16);
  border-radius: 999px; padding: 2px 8px; margin-bottom: 6px;
}
.eq__pin.posee { animation: pin-pop 460ms cubic-bezier(.34, 1.4, .5, 1) forwards, epingle-flotte 3.8s ease-in-out 1s infinite; }
.eq__panneau { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--page); }
.eq__bulle {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 13px; font-size: 12.5px; line-height: 1.45;
  opacity: 0; transform: translateY(8px); transition: opacity 340ms ease, transform 340ms ease;
}
.eq__bulle.la { opacity: 1; transform: none; }
.eq__bulle b { display: block; font-weight: 600; color: var(--bleu); margin-bottom: 3px; }
.eq__bulleTxt { min-height: 18px; display: block; color: var(--ink-soft); }
.eq__statut { margin-top: auto; display: grid; }
.eq__attente, .eq__ok { grid-area: 1 / 1; transition: opacity 400ms ease, transform 400ms ease; }
.eq__attente {
  justify-self: start; font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  color: var(--ocre-prof); background: rgba(196, 154, 72, .16); border-radius: 999px; padding: 5px 12px;
}
.eq__ok { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); }
.eq__ok i {
  font-style: normal; width: 24px; height: 24px; flex: none; border-radius: 999px;
  background: var(--succes); color: var(--page); display: grid; place-items: center; font-size: 12px;
}
.eq__ok b { display: block; font-size: 12.5px; font-weight: 600; }
.eq__ok em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.eq.valide .eq__attente { opacity: 0; transform: translateY(-8px); }
.eq.valide .eq__ok { opacity: 1; transform: none; }
.eq__notif {
  position: absolute; right: 10px; top: -14px; display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--page); border-radius: 999px; padding: 8px 15px;
  font-size: 12px; box-shadow: var(--ombre-md); z-index: 4;
  opacity: 0; transform: translateY(-10px) scale(.96);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .9, .3, 1.05);
}
.eq__notif.la { opacity: 1; transform: none; }
.eq__cloche { width: 7px; height: 7px; border-radius: 999px; background: var(--ocre); flex: none; }
.eq__cur {
  position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(43, 38, 32, .3));
  transition: transform 760ms cubic-bezier(.35, .7, .3, 1), opacity 280ms ease;
}
.eq__cur.la { opacity: 1; }
.eq__cur em {
  font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--page);
  border-radius: 999px; padding: 2px 8px; margin: 10px 0 0 -3px; white-space: nowrap;
}
.eq__cur--h { color: var(--bleu); }
.eq__cur--h em { background: var(--bleu); }
.eq__cur--m { color: var(--ocre-prof); }
.eq__cur--m em { background: var(--ocre-prof); }

@media (max-width: 1020px) {
  .eq__cur { display: none; }
  .puces--rangee { flex-direction: column; gap: 16px; }
}
@media (max-width: 720px) {
  .eq__corps { grid-template-columns: 1fr; }
  .eq__photo { min-height: 220px; }
  /*  Sur téléphone la photo n'est pas assez large pour porter un post-it
      collé à côté de l'épingle : le post-it reprend sa place dans le flux,
      sous le cadre, et reste déplaçable une fois libéré. */
  .equipe__postit { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 14px; }
  .equipe__postit .dpost-scene { height: 236px; }
  .eq__saisie { left: 4px; width: auto; right: 4px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eq__pin { opacity: 1; transform: none; animation: none !important; }
  .eq__bulle { opacity: 1; transform: none; }
  .eq__notif { opacity: 1; transform: none; }
  .eq__attente { opacity: 0; }
  .eq__ok { opacity: 1; transform: none; }
}

/* ── Les deux post-its : un qui part, un qui reste (V6.10) ──────────────── */
#dpost2 { top: 18px; }
.dpost-legende { transition: opacity 300ms ease; }
.dpost-legende.a-vous { color: var(--vert); font-weight: 600; }

/*  Le bleu, une fois libéré : il quitte sa scène pour la section, on écrit
    dedans et on le déplace. `touch-action: none` est indispensable, sinon le
    navigateur tactile prend le geste pour un défilement. */
.dpost.libre {
  position: absolute; left: 0; top: 0; margin: 0; z-index: 20;
  cursor: grab; touch-action: none; opacity: 1;
}
.dpost.libre, .dpost.libre.sh-postit, .dpost.libre.sh-postit:hover {
  transform: rotate(-1.4deg); transition: box-shadow 200ms ease, transform 200ms ease;
}
.dpost.libre:hover { transform: rotate(-1.4deg) translateY(-2px); }
.dpost.libre.prise { cursor: grabbing; transform: rotate(0.6deg) scale(1.03); transition: none; }
.dpost.libre .dpost__txt { outline: none; cursor: text; }
.dpost.libre .dpost__txt:focus { background: rgba(255, 255, 255, .35); border-radius: 4px; }
.dpost.libre .dpost__caret { display: none; }
.dpost__poignee {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 30px; height: 4px; border-radius: 999px; background: rgba(43, 38, 32, .16);
  opacity: 0; transition: opacity 200ms ease;
}
.dpost.libre:hover .dpost__poignee { opacity: 1; }

/* L'étiquette « Envoyé à Hugo », près des avatars de présence */
.eq__qui { display: flex; align-items: center; gap: 10px; }
.eq__envoye {
  font-size: 11px; font-weight: 600; color: var(--page); background: var(--ink);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity 380ms ease, transform 380ms ease;
}
.eq__envoye.la { opacity: 1; transform: none; }
.rp-avatars span.recu {
  animation: ch-pop 480ms cubic-bezier(.34, 1.4, .5, 1);
  box-shadow: 0 0 0 1px var(--ocre), 0 0 0 4px rgba(196, 154, 72, .3);
}

@media (prefers-reduced-motion: reduce) {
  #dpost2 { opacity: 1; }
  .eq__envoye { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORATION (22 août) — LE CHAPITRE EN ÉCRAN PARTAGÉ · /accueil-sticky-v2
   ---------------------------------------------------------------------------
   Cinq sections existantes réassemblées : le récit défile à gauche, la scène
   reste en place à droite et traverse les cinq animations. Rien n'est
   dupliqué : ce sont les mêmes composants, les mêmes textes.
   ⚠️ Ce bloc ne sert QUE la page d'exploration. /accueil ne le rencontre pas.
   ═══════════════════════════════════════════════════════════════════════ */
/*  ⚠️ overflow-x: clip (et surtout PAS overflow: hidden) : « clip » ne crée
    pas de conteneur de défilement, donc le fil et la scène restent collants.
    C'est la même précaution que sur .hero2. */
.chap { padding: clamp(40px, 6vh, 90px) 0 0; overflow-x: clip; }
.chap__int { display: grid; grid-template-columns: minmax(0, 33%) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.chap__gauche { position: relative; }

/*  ⚠️ 22 août, 2ᵉ passe — le débordement vers la droite est ANNULÉ : Roxane,
    « les animations sont un peu trop collées à droite ». Le chapitre suit
    maintenant la fenêtre comme le hero, avec une vraie marge de chaque côté,
    au lieu de sortir du cadre. */
.chap__int { max-width: 1720px; padding: 0 clamp(20px, 3.2vw, 52px); }

/*  ⚠️ 22 août — LE FIL D'ÉTAPES A ÉTÉ RETIRÉ (Roxane : « on retire le Créer,
    Développer et tout »). Ses règles (.pas, .pas__item, .pas__no, .pas__nom)
    ont été supprimées avec lui : elles ne servaient plus rien et leur fond
    opaque, ajouté pour empêcher le titre de passer dessous, n'a plus d'objet.
    Ne pas les remettre sans remettre le fil. */

/* ── Le récit : un temps par écran, ni carrousel ni clic ────────────────── */
.chap__flux { display: flex; flex-direction: column; }
/*  ✦ Roxane 22 août — « ce n'est pas fluide, il faudrait que ça fasse comme
    sur pitch.com : quand on scrolle, le prochain texte et la prochaine
    animation apparaissent ».
    Avant : un seul temps visible à la fois, les autres à opacity 0. Le texte
    ne DÉFILAIT pas, il clignotait sur place à des positions fixes — d'où la
    sensation de saccade. Maintenant chaque temps occupe un écran et monte
    naturellement avec la page ; c'est le visuel, à droite, qui reste fixé et
    change. Deux textes peuvent se croiser pendant la transition : c'est
    exactement ce que fait la référence, et c'est ce qui rend le mouvement
    continu. */
.chap__txt {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 10vh 0 6vh;
}
.chap__titre, .chap__sous { transition: opacity 420ms ease; }
/*  Le temps qui n'est pas en scène s'atténue à peine : on garde le fil du
    récit sans le faire disparaître. */
.chap__txt:not(.actif) .chap__titre, .chap__txt:not(.actif) .chap__sous { opacity: .34; }
.chap__titre { font-size: clamp(24px, 2.5vw, 34px); margin-bottom: 14px; }
.chap__sous { color: var(--ink-soft); font-size: 16.5px; max-width: 42ch; }

/* ── La scène : elle ne quitte pas l'écran de tout le chapitre ──────────── */
.chap__droite { position: relative; }
.chap__scene {
  position: sticky; top: 0; height: 100vh;
  padding: clamp(88px, 11vh, 116px) 0 clamp(28px, 5vh, 56px);
  display: flex; align-items: center;
}
.chap__vue {
  position: absolute; inset: clamp(88px, 11vh, 116px) 0 clamp(28px, 5vh, 56px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  /* la continuité tient à ça : on ne coupe pas, on décale et on échelonne */
  transform: translateY(18px) scale(.985);
  transition: opacity 520ms ease, transform 640ms cubic-bezier(.2, .7, .2, 1);
}
.chap__vue.sortie { opacity: 0; transform: translateY(-14px) scale(.99); }
.chap__vue.active { opacity: 1; transform: none; pointer-events: auto; }
.chap__vue > * { width: 100%; }

/* Chaque animation garde sa forme, mais tient dans la scène commune. */
.chap__vue .prop__source { width: min(400px, 100%); }
.chap__vue .prop__pont { height: 54px; }
.chap__vue .prop__cartes { gap: 10px; }
.chap__vue .prop__bilan { margin-top: 18px; font-size: clamp(17px, 1.8vw, 21px); }
.chap__vue .sv__photo { min-height: 340px; }
.chap__vue .repro--suivi, .chap__vue .repro--fil { box-shadow: var(--ombre-lg); }
.chap__vue .prep { grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; }
.chap__vue .prep__carte, .chap__vue .prep__look { padding: 10px 11px; }
/* colonnes étroites : les en-têtes passent sur deux lignes plutôt que de
   se chevaucher (« Bibliothèque produit » et « Composer le look ») */
.chap__vue .prep__tete { flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 7px; }
.chap__vue .prep__look { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.55fr); gap: 8px; }
.chap__vue .prep__mannequin { min-height: 104px; }
.chap__vue .prep__planche { height: 92px; }
.chap__vue .prep__carte-lieu { height: 62px; }
.chap__vue .prep__avatar { width: 26px; height: 26px; }
.chap__vue .tel-scene { min-height: 0; gap: 26px; }

/* ── Téléphone et petits écrans : plus de colonne collante ──────────────── */
@media (max-width: 1020px) {
  .chap__int { grid-template-columns: 1fr; gap: 0; }
  .chap__txt { min-height: 0; padding: 0 0 20px; }
  .chap__txt:not(.actif) .chap__titre, .chap__txt:not(.actif) .chap__sous { opacity: 1; }
  .chap__droite { display: none; }
  /* La scène revient dans le flux : une vue sous son texte, comme avant. */
  .chap__vue--mobile { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: clamp(36px, 7vw, 64px); }
  .chap__vue--mobile .prep { grid-template-columns: 1fr 1fr; }
  .chap__vue--mobile .prep__col--d { display: flex; }
}
@media (max-width: 720px) {
  .chap__vue--mobile .prep { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .chap__titre, .chap__sous { transition: none; }
  .chap__txt:not(.actif) .chap__titre, .chap__txt:not(.actif) .chap__sous { opacity: 1; }
  .chap__vue { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILET : /marketing.js n'est jamais arrivé
   ---------------------------------------------------------------------------
   Le gabarit pose « mk-pret » sur <html> dès le <head>, et marketing.js
   confirme aussitôt qu'il a pris la main. S'il ne répond pas au bout de 4 s
   (cache vide + réseau qui lâche, requête avalée, onglet gelé), le filet
   remplace « mk-pret » par « mk-secours ».
   Sans ce filet la page ne dégradait pas, elle cassait : tout le contenu
   restait à opacity 0 et les pistes réservaient des milliers de pixels de
   vide pour des visites qui ne démarreraient jamais. En secours, on rend
   simplement la page lisible : rien de caché, aucune course à vide.
   ⚠️ Ne pas transformer ces règles en état par défaut : en marche normale
   c'est « mk-pret » qui est posé, et rien de tout ceci ne s'applique.
   ═══════════════════════════════════════════════════════════════════════ */
.mk-secours .rv,
.mk-secours .chap__txt,
.mk-secours .chap__vue {
  opacity: 1; transform: none; transition: none; pointer-events: auto;
}
/* Le hero : plus de piste de 380 vh, plus de bloc collant. */
.mk-secours .hero2__piste { height: auto; }
.mk-secours .hero2__collant { position: static; }
.mk-secours .hero2__cmd, .mk-secours .hero2__indice { display: none; }
/* Le chapitre à écran partagé : les temps se lisent l'un sous l'autre. */
.mk-secours .chap__scene { position: static; height: auto; padding: 0 0 40px; }
.mk-secours .chap__vue { position: relative; inset: auto; margin-bottom: 40px; }
.mk-secours .chap__txt { min-height: 0; padding: 30px 0 10px; }

/*  ⚠️ Ce composant s'appelait `.ft` — LE MÊME NOM QUE LE PIED DE PAGE.
    Il héritait donc de son fond et de sa bordure haute : une ligne
    parasite traversait la colonne de droite du chapitre, 58 px au-dessus
    du cadre. Renommé `.ftec`. Ne pas réutiliser `.ft` : c'est pris. */
/* ═══════════════════════════════════════════════════════════════════════════
   L'OUTIL DE FICHE TECHNIQUE (22 août) — temps « Développer » du chapitre
   ---------------------------------------------------------------------------
   Repris de l'outil réel, sans rien réinventer :
     · UNE silhouette à plat, le tracé exact de l'app. C'est la ligne de cote
       qui bouge, jamais le dessin — vingt SVG à la main auraient été vingt
       occasions de diverger ;
     · la cote est rouge #D8232A à double tête, avec ses barres
       perpendiculaires : c'est la norme des fiches d'usine ;
     · les mesures gardent leur nom anglais (la fiche part à l'usine) et leur
       alias français en dessous, comme dans la bibliothèque.
   ═══════════════════════════════════════════════════════════════════════ */
.ftec { position: relative; font-family: var(--ui); color: var(--ink); max-width: 780px; margin: 0 auto; }
.ftec__cadre {
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--ombre-md); overflow: hidden;
}
.ftec__tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.ftec__tete b { display: block; font-size: 13.5px; font-weight: 600; }
.ftec__tete em { display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin-top: 3px; }
.ftec__gamme { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: var(--ink-soft); background: var(--wash); border-radius: 999px; padding: 4px 11px; }
.ftec__corps { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.ftec__croquis { background: var(--wash); border-right: 1px solid var(--line); display: grid; place-items: center; padding: 16px 10px; }
/*  ⚠️ Largeur EXPLICITE : dans une cellule `place-items: center`, l'élément
    est en largeur ajustée au contenu, et `width: 100%` n'a plus de
    référence — le croquis retombait à la moitié de sa taille. */
.ftec__croquis svg { width: 172px; max-width: 100%; height: auto; display: block; }
.ftec__silhouette { fill: var(--card); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }

/*  La cote : elle se dessine quand sa ligne arrive dans le tableau. */
.ftec__cote { opacity: 0; transition: opacity 320ms ease; }
.ftec__cote line { stroke: #D8232A; stroke-width: 1.6; }
.ftec__coteRond { fill: #D8232A; }
.ftec__coteL { fill: #fdfcf8; font-family: var(--mono); font-size: 6.5px; font-weight: 700; text-anchor: middle; }
.ftec__cote.la { opacity: 1; animation: ftec-cote 420ms cubic-bezier(.34, 1.4, .5, 1) both; }
@keyframes ftec-cote { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.ftec__droite { position: relative; padding: 14px 16px 16px; min-height: 258px; }
.ftec__champ {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: 12.5px; color: var(--ink-soft);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ftec.ouvre .ftec__champ { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(0, 102, 79, .12); }
.ftec__chevron { width: 7px; height: 7px; border-right: 1.6px solid var(--ink-muted); border-bottom: 1.6px solid var(--ink-muted); transform: rotate(45deg) translate(-2px, -2px); }

/*  La bibliothèque des mesures : « Tout ajouter » pose le groupe entier. */
.ftec__biblio {
  position: absolute; left: 16px; right: 16px; top: 52px; z-index: 3;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--ombre-md); padding: 6px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.3, .9, .3, 1.05);
}
.ftec.ouvre .ftec__biblio { opacity: 1; transform: none; }
.ftec__biblioItem { padding: 6px 9px; font-size: 12px; border-radius: 6px; }
.ftec__biblioItem em { font-style: normal; color: var(--ink-muted); margin-left: 7px; font-size: 11px; }
.ftec__tout {
  margin-top: 4px; padding: 7px 9px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--vert);
  transition: transform 160ms ease, background 160ms ease;
}
.ftec__tout.clic { transform: scale(.97); background: rgba(0, 102, 79, .1); border-radius: 6px; }

.ftec__table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.ftec__table thead th, .ftec__table thead td {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 400; text-align: right; padding: 0 0 7px; border-bottom: 1px solid var(--line);
}
.ftec__table thead th { text-align: left; }
.ftec__ligne { opacity: 0; transform: translateY(6px); transition: opacity 340ms ease, transform 380ms ease; }
.ftec__ligne.la { opacity: 1; transform: none; }
.ftec__ligne th {
  display: flex; align-items: baseline; gap: 8px; text-align: left; font-weight: 400;
  padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line);
}
.ftec__ligne th i {
  font-style: normal; flex: none; width: 15px; height: 15px; border-radius: 999px;
  background: #D8232A; color: #fdfcf8; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  display: grid; place-items: center; transform: translateY(1px);
}
.ftec__ligne th span { display: block; min-width: 0; }
.ftec__ligne th em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-muted); }
.ftec__ligne td {
  text-align: right; padding: 7px 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--ink-soft); width: 42px;
}

@media (max-width: 720px) {
  .ftec__corps { grid-template-columns: 1fr; }
  .ftec__croquis { border-right: 0; border-bottom: 1px solid var(--line); }
  .ftec__croquis svg { width: 138px; }
  .ftec__droite { min-height: 0; }
  .ftec__ligne th em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ftec__cote { opacity: 1; animation: none !important; }
  .ftec__ligne { opacity: 1; transform: none; }
}

/* ── La petite fenêtre « À vous » ────────────────────────────────────────── */
/*  ✦ Roxane 22 août — « mets le À vous : écrivez dedans… dans un pop-up où
    tu mets d'accord j'ai compris, et ça disparaît ». Elle s'ouvre quand le
    post-it bleu devient libre, à côté de lui, et ne revient pas. */
.dpost-aide {
  position: absolute; z-index: 7; width: 232px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre-md); padding: 13px 14px 12px;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity 300ms ease, transform 360ms cubic-bezier(.3, .9, .3, 1.05);
}
.dpost-aide.la { opacity: 1; transform: none; pointer-events: auto; }
.dpost-aide p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 11px; }
.dpost-aide__ok {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--page);
  background: var(--vert); border: 0; border-radius: 999px; padding: 7px 15px; cursor: pointer;
  transition: background 200ms ease, transform 140ms ease;
}
.dpost-aide__ok:hover { background: var(--vert-nuit); }
.dpost-aide__ok:active { transform: scale(.97); }
.dpost-aide__ok:focus-visible { outline: 2px solid var(--ocre-prof); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dpost-aide { transition: none; }
}

/* ── Le hero : le cadre s'ouvre, les satellites restent sur les côtés ───── */
/*  ✦ Roxane 22 août, deux demandes qui tirent en sens inverse : « le contenu
    sur toute la largeur, j'ai trop d'espace sur les côtés » ET « les blocs
    genre Price Architect doivent toujours être là, en dehors de l'écran
    principal, à droite et à gauche ».
    L'accord se fait ainsi : le CONTENEUR prend presque toute la fenêtre
    (c'est lui qui supprime les marges vides), le cadre s'ouvre autant que
    possible, et les satellites occupent ce qui reste de chaque côté en
    chevauchant légèrement son bord. Ce ne sont plus des marges vides : la
    composition va d'un bord à l'autre.
    Les 760 px d'origine du cadre n'existaient que pour eux ; il en fait
    maintenant le double. */
/*  ⚠️ 2ᵉ passe (Roxane) — « mets les blocs style Price Architect qui ne
    chevauchent pas l'écran principal, pour faire respirer un peu plus », et
    « le bloc un peu moins large et un peu plus haut ».
    La marge latérale doit donc dépasser la largeur d'un satellite (250 px)
    plus un jeu : ils se posent À CÔTÉ du cadre, ils ne mordent plus dessus.
    Le cadre y perd en largeur — c'est le prix, et c'est ce qu'elle demande —
    et le regagne en hauteur. */
.hero2__scene { --marge-sat: clamp(150px, 17.5vw, 296px); }
.hero2__scene .ch { max-width: none; height: clamp(470px, 57vh, 640px); }
.hero2__scene .ch__cadre {
  left: var(--marge-sat); right: var(--marge-sat); width: auto; margin-left: 0;
  height: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/*  La commande (jauge + « Passer la visite ») suivait le bord du cadre de
    760 px : elle se cale maintenant sur celui du cadre élargi. */
.hero2__scene .hero2__cmd { left: 0; right: 0; bottom: auto; top: calc(100% + clamp(20px, 3vh, 34px)); }
/*  Les satellites se posent au bord du conteneur et débordent SUR le cadre :
    ils sont dehors, mais ils le touchent — sinon ils flottent dans le vide. */
.hero2__scene .ch__sat--r1 { right: 0; top: 78px; }
/*  Roxane : « le bloc Tendances chevauche la pyramide d'offre ». Les deux
    partagent la colonne de gauche : Tendances remonte en haut du cadre, la
    pyramide reste en bas, et il reste de l'air entre les deux. */
.hero2__scene .ch__sat--l1 { left: 0; top: 24px; }
.hero2__scene .ch__sat--l2 { left: 14px; bottom: 10px; }
@media (max-width: 1020px) {
  .hero2__scene .ch { height: clamp(400px, 46vh, 520px); }
  .hero2__scene { --marge-sat: 0px; }
}

/* ── La fiche produit qu'on crée (temps « Créer ») ───────────────────────── */
/*  ✦ Roxane 22 août, 2ᵉ passe — la source n'est plus un champ « Matière »
    mais une VRAIE mini fiche produit. Ce qu'on veut faire comprendre a
    changé : ce n'est pas « je modifie une donnée et elle se propage », c'est
    « je crée une fiche, et je la retrouve partout où elle sert ». */
.prop__mini { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.prop__visuel {
  width: 62px; height: 62px; flex: none; border-radius: var(--r-sm);
  background: var(--wash); border: 1px solid var(--line); overflow: hidden;
  display: grid; place-items: center;
}
.prop__visuel img { width: 84%; height: 84%; object-fit: contain; }
.prop__infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prop__infos b { font-size: 13.5px; font-weight: 600; }
.prop__infos em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.prop__prix { font-size: 12.5px; font-weight: 600; color: var(--vert); margin-top: 2px; }
.prop__creer {
  position: relative; display: grid; place-items: center; height: 36px;
  border-radius: 999px; background: var(--vert); color: var(--page);
  font-size: 12.5px; font-weight: 600;
  transition: transform 160ms ease, background 320ms ease;
}
.prop__creer.clic { transform: scale(.975); }
.prop__creerA, .prop__creerB { grid-area: 1 / 1; transition: opacity 320ms ease, transform 320ms ease; }
.prop__creerB { opacity: 0; transform: translateY(6px); }
.prop.change .prop__creer { background: var(--vert-nuit); }
.prop.change .prop__creerA { opacity: 0; transform: translateY(-6px); }
.prop.change .prop__creerB { opacity: 1; transform: none; }

/* ── Les looks du shooting : trois looks, trois tailles ──────────────────── */
/*  ✦ Roxane 22 août — « montre un look où il y a 4 produits, un où il y en a
    3 et un où il y en a 5, comme dans la conception des looks ». Un look n'a
    pas un nombre de pièces fixe : la silhouette à deux emplacements le
    laissait croire. Trois cartes côte à côte le disent d'un coup d'œil, et
    c'est celle du milieu que la démo compose. */
.prep__looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; min-width: 0; }
.prep__lk {
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.prep__lk--actif { border-color: var(--vert); box-shadow: 0 0 0 2px rgba(0, 102, 79, .1); }
/*  Les cartes de look sont étroites : nom et compte l'un sous l'autre, sinon
    « Look 05 » et « 3 pièces » se coupent chacun en deux. */
.prep__lkTete { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.prep__lkTete b { font-size: 11.5px; font-weight: 600; }
.prep__lkTete em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--ink-muted); }
.prep__lkGrille { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.prep__lkPiece {
  aspect-ratio: 1; border-radius: var(--r-sm); background: var(--wash);
  border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center;
}
.prep__lkPiece img { width: 88%; height: 88%; object-fit: contain; }
/*  ⚠️ Les emplacements héritaient des styles de l'ancienne silhouette
    (.prep__slot--haut / --bas, image en `max-height`, bord vert) : une fois
    remplis par la démo, leurs visuels étaient plus petits que les voisins et
    encadrés de vert. Ils se comportent maintenant comme n'importe quelle
    pièce du look — c'est bien la même chose. */
.prep__lkPiece.prep__slot { border-style: dashed; border-color: var(--line-strong); padding: 0; height: auto; width: auto; }
.prep__lkPiece.prep__slot.plein { border-style: solid; border-color: var(--line); background: var(--wash); }
.prep__lkPiece.prep__slot img { width: 88%; height: 88%; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 1020px) {
  .prep__looks { grid-template-columns: 1fr; }
  .prep__lkGrille { grid-template-columns: repeat(4, 1fr); }
}

/* ── Le Sales Kit : une vraie page de lookbook ───────────────────────────── */
/*  ✦ Roxane 22 août — « dans Sales Kit, fais un truc qui ressemble plus à
    notre lookbook ». La liste de trois prix ne ressemblait à rien de ce que
    voit un acheteur. On reprend la page qu'il a sous les yeux : le visuel du
    produit à gauche, sa fiche à droite (référence, matière, wholesale, prix
    client, tailles), et en dessous le tableau où il pose ses quantités. */
/*  Le numéro de page se posait EN ABSOLU sur « généré depuis la collection »
    et les deux se chevauchaient. Il prend sa place dans la ligne. */
.dt__tete { display: flex; align-items: baseline; gap: 10px; }
.dt__tete em { margin-right: auto; }
.dt__page-no { flex: none; font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); }
.dt__page { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: 14px; align-items: start; }
.dt__visuel {
  aspect-ratio: 4 / 5; border-radius: var(--r-sm); background: var(--wash);
  border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center;
}
.dt__visuel img { width: 84%; height: 84%; object-fit: contain; }
.dt__fiche { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dt__nom { font-size: 14px; font-weight: 600; }
.dt__ref { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--ink-muted); }
.dt__matiere { font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
.dt__prix { display: flex; gap: 20px; flex-wrap: wrap; }
.dt__prix span { display: flex; flex-direction: column; gap: 1px; }
.dt__prix em { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.dt__prix b { font-size: 13px; font-weight: 600; }
.dt__taille {
  font-size: 10.5px; font-family: var(--mono); background: var(--wash);
  border-radius: 999px; padding: 2px 9px; align-self: flex-start;
}
.dt__quantites { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.dt__qTete b { font-size: 11px; font-weight: 600; }
.dt__qLigne {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) 52px 52px;
  gap: 8px; align-items: center; padding: 6px 0; font-size: 11.5px;
}
.dt__qLigne--entete {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.dt__qSku { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }
.dt__qCase {
  border: 1px solid var(--vert); border-radius: 6px; padding: 3px 0;
  text-align: center; font-weight: 600; background: var(--page);
}
.dt__qTotal {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 11.5px;
}
.dt__qTotal b { font-size: 13px; font-weight: 600; }
@media (max-width: 720px) {
  .dt__page { grid-template-columns: 1fr; }
  .dt__qLigne { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .dt__qLigne span:nth-child(2) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORATION — LE MUR QUI SE COMPOSE · /accueil-hero-epingle
   ---------------------------------------------------------------------------
   Idée de Roxane : le texte au centre, et les images, couleurs, croquis et
   matières qui viennent s'épingler de partout sur le fond à l'arrivée.
   ⚠️ 2ᵉ passe — LE FOND N'EST PLUS NOIR (« c'est trop dark comparé au reste
   du site, ce serait bien un fond style papier blanc cassé beige »). Tout
   suit : le voile devient CLAIR au lieu de sombre, le texte revient à
   l'encre, le header reprend ses couleurs normales, et les ombres des pièces
   s'allègent — une ombre calculée pour du noir devient une tache sur du
   papier.
   ⚠️ Ce bloc ne sert QUE cette page d'exploration.
   ═══════════════════════════════════════════════════════════════════════ */
.hp {
  position: relative; min-height: 100vh; min-height: 100svh;
  margin-top: -72px; padding-top: 72px;
  display: grid; place-items: center;
  /*  Un papier, pas un aplat : le grain vient d'un dégradé très doux, il
      évite l'effet « surface plastique » d'une couleur unie plein écran. */
  background: #efeadd;
  background-image: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
                    radial-gradient(90% 70% at 85% 100%, rgba(196, 154, 72, .10) 0%, rgba(196, 154, 72, 0) 70%);
  overflow: hidden; isolation: isolate;
}

/*  ✦ Roxane : « je ne veux pas de barre classique, j'aime bien quand le
    contenu est en background du menu ; mets un petit effet glass sur le menu
    uniquement ». Ce ne sont donc PAS le header ni une bande qui reçoivent le
    verre, mais chaque groupe d'éléments : le menu, la langue, la connexion.
    Le mur continue de défiler derrière, entre eux et autour d'eux.
    ⚠️ `backdrop-filter` ne floute que ce qui est SOUS l'élément : le fond
    doit rester très translucide, sinon il n'y a plus rien à flouter et on
    retombe sur la barre pleine qu'elle refuse. */
.hp-page .hd:not(.hd--compact) .hd__nav,
.hp-page .hd:not(.hd--compact) .hd__lien--login,
.hp-page .hd:not(.hd--compact) .hd__langue,
.hp-page .hd:not(.hd--compact) .hd__logo {
  background: rgba(253, 252, 248, .40);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(43, 38, 32, .09), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.hp-page .hd:not(.hd--compact) .hd__nav { padding: 9px 22px; }
.hp-page .hd:not(.hd--compact) .hd__logo { padding: 5px 18px 5px 12px; }
.hp-page .hd:not(.hd--compact) .hd__lien--login { padding: 9px 17px; }
.hp-page .hd:not(.hd--compact) .hd__langue { padding: 9px 13px; }
/*  Sur le verre, l'encre franche : le gris clair de « DESK » et des liens
    disparaissait dès qu'une photo passait dessous. */
.hp-page .hd:not(.hd--compact) .hd__desk,
.hp-page .hd:not(.hd--compact) .hd__lien,
.hp-page .hd:not(.hd--compact) .hd__langue { color: var(--ink); }

/* ── Le mur ─────────────────────────────────────────────────────────────── */
.hp__mur { position: absolute; inset: 0; z-index: 0; }

/*  ⚠️ 23 août — PLUS DE PARALLAXE NI DE CALQUES. Les trois plans étaient des
    boîtes `inset: 0` empilées : celui du dessus avalait les clics des deux
    autres, et 15 pièces sur 18 ne se déplaçaient plus. Retiré avec le
    mouvement, que Roxane n'aimait pas non plus.
    Leçon générale : un calque plein écran posé au-dessus d'éléments
    interactifs les rend inatteignables, même transparent. Il lui faut
    `pointer-events: none`, ou il ne doit pas exister.
    Ce qui fait vivre le mur maintenant : la lumière qui dérive et le grain.
    Ni l'une ni l'autre ne touchent aux images. */

/*  ── LA LUMIÈRE : une nappe chaude qui traverse le papier, très lentement.
    Elle donne de la vie même sans curseur — donc aussi sur téléphone, où la
    parallaxe n'existe pas. 24 s : assez lent pour qu'on ne la « voie » pas
    bouger, assez présent pour que la page ne soit jamais tout à fait la
    même. */
.hp__lumiere {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 50% 50%, rgba(255, 252, 242, .72) 0%, rgba(255, 252, 242, 0) 70%);
  animation: hp-lumiere 24s ease-in-out infinite alternate;
}
@keyframes hp-lumiere {
  from { transform: translate(-14%, -8%) scale(1); }
  to { transform: translate(16%, 10%) scale(1.18); }
}

/*  ── LE GRAIN : ce qui fait qu'un beige devient du PAPIER.
    Un bruit fin, en multiplication, à 4 % — invisible si on le cherche,
    déterminant si on l'enlève. Généré en SVG, aucun fichier à charger. */
.hp__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/*  ✦ Roxane : « ce serait ouf de pouvoir bouger les photos où on veut, comme
    sur le moodboard ». Chaque pièce s'attrape et se pose ailleurs.
    ⚠️ Pointer Events + setPointerCapture + `touch-action: none` (leçon du
    lasso Safari) : avec mousemove seul, le glissé se perd dès qu'on sort de
    l'élément. */
/*  ⚠️ `user-select: none` ET `-webkit-user-drag: none` : sans eux, attraper
    une photo lance le glisser-déposer natif du navigateur, qui envoie un
    `pointercancel` et tue le déplacement au premier mouvement. Le symptôme
    est trompeur : les pastilles de couleur (sans image) bougeaient très bien,
    seules les photos et les croquis restaient collés. */
.hp__piece {
  cursor: grab; touch-action: none; pointer-events: auto;
  user-select: none; -webkit-user-select: none;
}
.hp__piece img { -webkit-user-drag: none; user-drag: none; }
.hp__piece:hover { box-shadow: 0 16px 34px rgba(43, 38, 32, .20), 0 2px 6px rgba(43, 38, 32, .12); }
/*  ⚠️ NE PAS mettre `animation: none` ici. Poser puis retirer la classe
    RELANCE l'animation d'arrivée : avec son délai et son `backwards`, la
    pièce repartait à son point de départ au moment du lâcher — elle sautait
    de 70 px en arrière. L'animation est figée une fois pour toutes en JS, à
    la prise. */
.hp__piece.prise {
  cursor: grabbing; z-index: 5;
  box-shadow: 0 26px 52px rgba(43, 38, 32, .26), 0 3px 9px rgba(43, 38, 32, .16);
}
/*  `--rr` est la rotation EFFECTIVE : celle du bureau (`--r`, posée en ligne),
    ou celle du téléphone (`--rm`) quand la feuille mobile la substitue. Une
    propriété posée en ligne ne peut pas être reprise par une media query ;
    cette indirection, si. */
.hp__piece {
  --rr: var(--r);
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--rr));
  border-radius: 3px; background: #fdfcf8; padding: 7px 7px 9px;
  box-shadow: 0 12px 28px rgba(43, 38, 32, .16), 0 1px 4px rgba(43, 38, 32, .10);
  animation: hp-epingle 900ms cubic-bezier(.18, .9, .28, 1.08) backwards;
  animation-delay: calc(320ms + var(--d) * 105ms);
}
@keyframes hp-epingle {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
               rotate(calc(var(--rr) * 3)) scale(.86);
  }
}
.hp__piece img { display: block; width: 100%; height: auto; border-radius: 1px; }
.hp__piece--photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.hp__piece--croquis { background: #fbf8f1; }
.hp__piece--croquis img { aspect-ratio: 1 / 1.1; object-fit: contain; padding: 6px; }
/*  Une matière n'est pas une couleur : on lui donne un tissage. */
.hp__aplat { display: block; aspect-ratio: 1; border-radius: 1px; }
.hp__piece--matiere .hp__aplat {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 5px),
                    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 5px);
  background-blend-mode: overlay;
}
.hp__piece--matiere { padding: 6px 6px 8px; }
.hp__piece--couleur { padding: 6px 6px 16px; }
/*  La punaise : une bille, pas une icône. Elle arrive juste après sa pièce. */
.hp__pin {
  position: absolute; left: 50%; top: -6px; width: 13px; height: 13px;
  margin-left: -6.5px; border-radius: 999px; background: var(--pin, #c0392b);
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .35), inset 2px 2px 3px rgba(255, 255, 255, .5),
              0 2px 5px rgba(43, 38, 32, .32);
  animation: hp-pin 420ms cubic-bezier(.34, 1.5, .5, 1) backwards;
  animation-delay: calc(700ms + var(--d) * 105ms);
}
@keyframes hp-pin { from { opacity: 0; transform: translateY(-14px) scale(.5); } }

/*  ⚠️ IL N'Y A PLUS DE VOILE sur le mur (Roxane : « retire l'overlay, ce
    n'est pas joli »). Le fond papier et les pièces claires laissent le titre
    en encre parfaitement lisible sans rien poser dessus — c'est le passage au
    papier qui l'a rendu possible ; sur le fond noir d'avant, le voile était
    la condition pour lire quoi que ce soit.
    Ce qui reste à traiter, c'est le HEADER : lui passe forcément sur des
    pièces. Voir plus bas — verre dépoli sur les éléments du menu, pas de
    barre pleine (« j'aime bien quand le contenu est en background du menu »). */

/* ── Le texte ───────────────────────────────────────────────────────────── */
.hp__texte {
  position: relative; z-index: 2; text-align: center;
  max-width: min(1100px, 90vw); padding: 0 20px;
}
@keyframes hp-texte { from { opacity: 0; transform: translateY(14px); } }
/*  Le titre se LÈVE au lieu d'apparaître : un rideau qui remonte, plus un
    léger décalage. Une apparition en fondu, à cette taille, fait « écran de
    chargement » ; un rideau fait « affiche qu'on dévoile ». */
.hp__titre {
  animation: hp-rideau 1100ms cubic-bezier(.16, .84, .24, 1) 160ms backwards;
}
@keyframes hp-rideau {
  from { clip-path: inset(0 0 108% 0); transform: translateY(26px); }
  to { clip-path: inset(0 0 -12% 0); transform: none; }
}
.hp__sous { animation: hp-texte 900ms cubic-bezier(.2, .7, .2, 1) 620ms backwards; }
.hp__ctas { animation: hp-texte 900ms cubic-bezier(.2, .7, .2, 1) 780ms backwards; }
/*  ✦ La typo de la référence (frame.io) : très grand, interligne serré, chasse
    resserrée, graisse moyenne. C'est la TAILLE qui fait le premium, pas un
    effet — d'où le passage de 78 à 96 px et l'interligne à 0.98. */
.hp h1.hp__titre {
  /*  ⚠️ Interligne et chasse encore resserrés (0.98 → 0.90, −.028 → −.040) :
      à cette taille, les lignes doivent former un bloc, pas une liste. Ne pas
      descendre plus bas — les jambages du « q » de « marque » viendraient
      toucher le « t » de « tout » à la ligne suivante. */
  font-size: clamp(42px, 6.6vw, 96px); line-height: .90; letter-spacing: -.040em;
  font-weight: 500; color: var(--ink); max-width: 13ch; margin: 0 auto;
  text-wrap: balance;
}
.hp__sous {
  color: var(--ink-soft); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55;
  max-width: 46ch; margin: clamp(22px, 3.4vh, 34px) auto 0;
}
.hp__ctas { display: flex; gap: 28px; align-items: center; justify-content: center; margin-top: clamp(30px, 4.6vh, 50px); flex-wrap: wrap; }
/*  ✦ Roxane : « mets le bouton Commencer gratuitement en blanc ». Sur ce
    papier beige, le blanc ressort mieux que le vert et laisse la couleur aux
    pièces épinglées. */
/*  ✦ Le bouton en verre dépoli, comme les pastilles du menu : le mur passe
    derrière et se floute. Même règle que là-haut — le fond reste très
    translucide, sinon il n'y a plus rien à flouter et on retombe sur l'aplat
    blanc d'avant. */
.hp__ctas .btn--primary {
  background: rgba(253, 252, 248, .46); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: 0 6px 22px rgba(43, 38, 32, .11), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background var(--t2) ease, box-shadow var(--t2) ease;
}
.hp__ctas .btn--primary:hover {
  background: rgba(253, 252, 248, .68);
  box-shadow: 0 10px 30px rgba(43, 38, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.hp__lien {
  font-family: var(--p); font-size: 15.5px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding-bottom: 5px; border-bottom: 1.5px solid var(--ocre);
  transition: border-color var(--t2) ease, color var(--t2) ease;
}
.hp__lien:hover { color: var(--vert); border-color: var(--vert); }

/*  L'écran produit démarre plus bas : « pour que ce ne soit pas étouffant ».
    La piste garde sa mécanique, elle commence simplement après un écran
    entier de respiration. */
/*  ⚠️ 23 août — la visite ne suit plus le mur, elle suit « De l'idée au
    lancement » (Roxane). Cette marge existait pour ne pas étouffer le mur,
    qui n'a aucune marge basse ; une section normale, elle, en a déjà une.
    Réduite d'autant, sinon les deux s'ajoutent et creusent un trou. */
.hp-suite { padding-top: clamp(10px, 2vh, 28px); }

@media (max-width: 1020px) {
  .hp__piece { --w: calc(var(--wm, 130px)); width: var(--wm, 130px); }
  .hp__piece--photo { --wm: 132px; }
  .hp__piece--croquis { --wm: 104px; }
  .hp__piece--couleur, .hp__piece--matiere { --wm: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp__piece, .hp__pin, .hp__texte, .hp__titre, .hp__sous, .hp__ctas,
  .hp__lumiere { animation: none; }
  .hp__titre { clip-path: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (23 août 2026) — LA VERSION TÉLÉPHONE, CONÇUE POUR LE TÉLÉPHONE
   ---------------------------------------------------------------------------
   Principe : tout ce qui suit vit DERRIÈRE une media query. Au-dessus de
   1020 px, pas une ligne ne s'applique : le desktop est la référence et ne
   bouge pas. Deux paliers :
     · ≤ 1020 px — « tactile » (tablette + téléphone) : menu en panneau, mur
       non déplaçable, canvas du moodboard à l'échelle 1, cibles de 44 px ;
     · ≤ 720 px — « téléphone » : recomposition section par section (le mur
       en portrait, la visite en gros plan, le fil en chronologie verticale,
       le shooting en carrousel, le téléphone qui sort du bas de l'écran).
   Règles d'or : transform + opacity seulement, jamais de largeur animée ;
   `100svh` pour les scènes (la barre d'adresse de Safari ne fait pas sauter
   la page) ; rien n'est remplacé par une image fixe.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le pied du menu mobile (connexion, bouton, langue) n'existe que dans le
   panneau : sur grand écran la navigation reste la ligne de liens d'avant. */
.hd__nav-pied { display: none; }

/* ── ≤ 1020 : TACTILE ───────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  /* — LE HEADER : UNE BARRE FLOTTANTE, D'UN SEUL TENANT ——————————————— */
  /*  ✦ Roxane 23 août — « une barre de menu comme sur Raycast ». Avant, le
      verre était posé sur CHAQUE groupe (le logo, le menu, la connexion),
      pour que le mur continue de défiler entre eux. Sur téléphone il ne reste
      que trois éléments : trois pastilles séparées font un bricolage, une
      seule capsule fait une barre. Elle flotte (marge tout autour), elle ne
      touche aucun bord, et le mur passe dessous.
      ⚠️ La marge vient du PADDING de `.hd`, pas d'une marge sur `.hd__int` :
      une marge supérieure sur l'enfant s'échapperait du parent (fusion des
      marges) et la barre collerait au haut de l'écran. */
  /*  ⚠️ Le header lui-même ne porte PLUS aucun verre sur téléphone — ni en
      haut de page, ni en état compact (où la feuille du grand écran lui pose
      un `backdrop-filter`). Même raison que ci-dessus : c'est un ancêtre du
      panneau `fixed`, et le moindre filtre le recale sur le header. Tout le
      verre vit sur `.hd__int::before`, qui ne contient rien. */
  .hd, .hd--compact {
    padding: 10px 12px 0; background: transparent;
    border-bottom: 0; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /*  ⚠️⚠️ LE VERRE EST SUR UN PSEUDO-ÉLÉMENT, JAMAIS SUR `.hd__int`.
      `backdrop-filter` (comme `transform` ou `filter`) fait de l'élément le
      BLOC CONTENEUR de ses descendants en `position: fixed`. Or le panneau du
      menu (`.hd__nav`) vit DANS `.hd__int` : posé dessus, le filtre le
      recalait sur la barre au lieu de la fenêtre — panneau haut de 41 px,
      coincé sous le header. Le pseudo-élément n'est pas un ancêtre du
      panneau : il floute sans rien contenir. */
  .hd__int {
    position: relative;
    height: 56px; gap: 8px; padding: 0 8px 0 14px; margin: 0; max-width: none;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 6px 24px rgba(43, 38, 32, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: border-color 420ms ease, box-shadow 420ms ease;
  }
  .hd__int::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: rgba(253, 252, 248, .72);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    transition: background 420ms ease;
  }
  .hd--compact .hd__int { height: 56px; }
  .hd__logo img { height: 26px; }
  .hd__logo { gap: 9px; }
  .hd__logo-clair { display: none; }
  .hd__desk { font-size: 10.5px; letter-spacing: .15em; }
  .hd__langue, .hd__int > .hd__actions > .hd__lien--login { display: none; }
  .hd__actions { gap: 6px; margin-left: auto; }
  .hd__actions .btn { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 999px; }
  .hd__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; background: none; border: 0; cursor: pointer;
    border-radius: 999px; flex: none;
    /*  ⚠️ La feuille de Chrome pose `align-items: flex-start` sur tout <button> :
        les trois traits, des <span> sans largeur propre, tombaient à 0 px et
        le bouton était invisible — depuis le début, pas seulement ici. */
    align-items: stretch;
  }
  .hd__burger span { display: block; width: 100%; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform var(--t2) ease, background var(--t2) ease; }
  .hd--ouvert .hd__burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .hd--ouvert .hd__burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  /*  ⚠️ `backdrop-filter` sur le header ferait de lui le bloc conteneur du
      panneau `fixed` — il se positionnerait par rapport au header et non à la
      fenêtre. Le verre est donc sur `.hd__int`, jamais sur `.hd`. */
  .hd--ouvert .hd__int::before { background: rgba(253, 252, 248, .97); }

  /* — Au-dessus du mur, la barre passe en verre SOMBRE — */
  /*  Le mur reçoit maintenant un voile noir (voir plus bas) : une barre claire
      y ferait une tache. Elle s'assombrit tant qu'on est sur le mur, et
      redevient ivoire dès que la page défile sur le contenu crème. */
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__int {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .14);
  }
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__int::before { background: rgba(18, 15, 12, .48); }
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__logo-encre { display: none; }
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__logo-clair { display: block; }
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__desk { color: rgba(255, 255, 255, .72); }
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__burger span { background: #fdfcf8; }
  /*  ✦ « Un bouton Commencer plus design, avec un effet glass. » Sur le verre
      sombre, le vert plein faisait pastille : le bouton devient du verre lui
      aussi, et c'est l'encre blanche qui le porte. */
  .hp-page .hd:not(.hd--compact):not(.hd--ouvert) .hd__actions .btn--primary {
    background: rgba(255, 255, 255, .16); color: #fdfcf8;
    border: 1px solid rgba(255, 255, 255, .30);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  /*  Les pastilles de verre par groupe n'ont plus lieu d'être : la capsule
      les remplace. (Elles restent en place sur grand écran.)
      ⚠️ La règle qui les pose s'écrit `.hp-page .hd:not(.hd--compact) .hd__logo`
      (0,4,0) : il faut la MÊME spécificité pour la défaire, sinon le logo
      garde sa pastille claire au milieu de la barre sombre.
      ⚠️ Et surtout PAS `.hd__nav` ici : sur téléphone c'est le panneau du
      menu, et lui a besoin de son fond. */
  .hp-page .hd:not(.hd--compact) .hd__logo,
  .hp-page .hd:not(.hd--compact) .hd__lien--login,
  .hp-page .hd:not(.hd--compact) .hd__langue {
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* — Le panneau : la navigation devient une page, sous le header — */
  .hd__nav, .hp-page .hd:not(.hd--compact) .hd__nav {
    display: flex; position: fixed; top: 66px; left: 0; right: 0; bottom: 0; z-index: 99;
    flex-direction: column; gap: 0; margin: 0; padding: 12px 24px max(28px, env(safe-area-inset-bottom));
    background: rgba(253, 252, 248, .97);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 320ms;
  }
  .hd--compact .hd__nav { top: 66px; }
  /*  ⚠️ Même spécificité que la règle « verre » du mur (.hp-page .hd:not(.hd--compact) .hd__nav),
      sinon, sur la page d'accueil en haut de page, le panneau ouvert restait invisible. */
  .hd--ouvert .hd__nav, .hp-page .hd--ouvert:not(.hd--compact) .hd__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s, 0s, 0s; }
  .hd__nav .hd__lien, .hp-page .hd:not(.hd--compact) .hd__nav .hd__lien {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 27px; font-weight: 500; letter-spacing: -.022em; color: var(--ink);
    padding: 15px 0; border-bottom: 1px solid var(--line); min-height: 58px;
    opacity: 0; transform: translateY(10px);
    transition: opacity 360ms ease, transform 440ms cubic-bezier(.2, .7, .2, 1), color var(--t1) ease;
  }
  .hd__nav .hd__lien::after {
    content: ''; width: 8px; height: 8px; flex: none; margin-right: 6px;
    border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted);
    transform: rotate(-45deg);
  }
  .hd--ouvert .hd__nav .hd__lien, .hp-page .hd--ouvert:not(.hd--compact) .hd__nav .hd__lien { opacity: 1; transform: none; }
  .hd--ouvert .hd__nav .hd__lien:nth-child(1) { transition-delay: 50ms; }
  .hd--ouvert .hd__nav .hd__lien:nth-child(2) { transition-delay: 100ms; }
  .hd--ouvert .hd__nav .hd__lien:nth-child(3) { transition-delay: 150ms; }
  .hd--ouvert .hd__nav .hd__lien:nth-child(4) { transition-delay: 200ms; }
  .hd__nav-pied {
    display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 26px;
    opacity: 0; transform: translateY(8px); transition: opacity 360ms ease 260ms, transform 420ms cubic-bezier(.2, .7, .2, 1) 260ms;
  }
  .hd--ouvert .hd__nav-pied { opacity: 1; transform: none; }
  .hd__nav-pied .btn { height: 54px; width: 100%; font-size: 16px; border-radius: 12px; }
  .hd__nav-pied .hd__lien--login, .hd__nav .hd__nav-pied .hd__lien--login {
    display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0;
    font-size: 16px; font-weight: 500; color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 12px; opacity: 1; transform: none;
  }
  .hd__nav-pied .hd__lien--login::after { display: none; }
  .hd__nav-langue {
    display: block; text-align: center; padding: 12px; text-decoration: none;
    font-family: var(--f); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  }
  html.mk-menu, html.mk-menu body { overflow: hidden; }

  /* — LE MUR PASSE DERRIÈRE UN VOILE : on le regarde, on n'y touche plus — */
  /*  ✦ Roxane 23 août — « beaucoup plus d'overlay noir et les écritures en
      blanc, parce qu'on ne doit pas pouvoir bouger les images comme sur
      l'ordinateur ». Le raisonnement est juste, et c'est lui qui fait la
      différence entre les deux versions : sur grand écran le mur est une
      MATIÈRE qu'on attrape, il doit rester clair et net. Au doigt il ne se
      déplace pas — il devient un DÉCOR, et un décor se met en retrait pour
      laisser passer le titre.
      ⚠️ Le voile s'efface complètement sur les derniers pour cent : sans ça,
      le noir buterait net contre le crème de la section suivante. */
  .hp::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /*  ⚠️ La PREMIÈRE couche est celle du dessus. Le bas ne s'efface pas vers
        la transparence (on reverrait les photos en pleine lumière, et le noir
        buterait net sur la section suivante) : il se RÉSOUT vers le crème de
        la page, et la jonction devient invisible. */
    /*  ✦ 23 août (2ᵉ passe, Roxane) — « l'overlay est trop noir, il faut voir
        derrière les images, et le dégradé du dessous est trop brutal ».
        Deux corrections, et la seconde comptait autant que la première :
        · LE VOILE. Il valait .86 à .88, PLUS un halo central de .52 : au
          centre, l'encre cumulée montait à ~0,93 — les photos avaient
          disparu. Divisé par deux (.40 à .52), halo à .26 : au centre on est
          vers 0,64, le titre blanc tient, et le mur redevient un mur.
        · LA JONCTION. Le crème arrivait en onze pour cent de hauteur
          (0 à 89 %, plein à 100) : une arête. Elle prend maintenant seize
          pour cent avec quatre paliers, et le bouton, qui vit à 83 %, reste
          au-dessus du premier — sinon un bouton de verre blanc sur du crème
          devient invisible. */
    background:
      linear-gradient(to bottom,
                      rgba(253, 252, 248, 0) 84%, rgba(253, 252, 248, .16) 90%,
                      rgba(253, 252, 248, .48) 95%, rgba(253, 252, 248, .82) 98%,
                      var(--page) 100%),
      radial-gradient(122% 60% at 50% 44%, rgba(10, 9, 7, .26) 0%, rgba(10, 9, 7, 0) 100%),
      linear-gradient(to bottom, rgba(10, 9, 7, .40) 0%, rgba(10, 9, 7, .50) 28%,
                      rgba(10, 9, 7, .52) 76%, rgba(10, 9, 7, .50) 100%);
  }
  .hp h1.hp__titre { color: #fdfcf8; text-shadow: 0 2px 18px rgba(10, 9, 7, .5); }
  .hp__sous { color: rgba(253, 252, 248, .90); text-shadow: 0 1px 12px rgba(10, 9, 7, .45); }
  .hp__lien { color: #fdfcf8; }

  /* — Le titre descend, et l'action tombe sous le pouce — */
  /*  ✦ « Mets le texte Construisez votre marque plus bas. » Centré, il posait
      le titre au quart haut de l'écran et laissait le mur vide en dessous.
      Calé en bas, le regard descend le long des pièces jusqu'au titre, et le
      bouton arrive là où le pouce se tient déjà. */
  .hp { align-items: end; padding-bottom: clamp(90px, 15vh, 150px); }

  /* — Le bouton en verre, cerclé d'un filet qui tourne — */
  /*  ✦ « Effet glass, les bords un peu plus arrondis, avec une espèce de ligne
      brillante qui tourne autour, comme sur Raycast. » Le filet tournant
      existe déjà dans la maison (`.lueur`, sur le cadre du hero et la boîte
      Téséo) : un dégradé conique dont l'angle s'anime, masqué pour ne laisser
      que le contour. Ici il est blanc et ocre, jamais vert — sur le voile
      noir, le vert s'éteint.
      ⚠️ `mask-composite: exclude` évide le centre : sans lui, le dégradé
      remplirait le bouton au lieu d'en dessiner le bord. */
  /*  ⚠️ 23 août (2ᵉ passe) — LE VERRE S'ASSOMBRIT PARCE QUE LE VOILE S'ÉCLAIRE.
      Ce bouton était réglé pour un mur voilé à .88 : du blanc sur du verre
      blanc y tenait. Le voile passé à .50, le même verre laissait son texte
      se dissoudre — et il vit à 83 % de la hauteur, là où le crème commence à
      monter. On teinte donc le verre d'encre plutôt que de lumière. */
  .hp__ctas .btn--primary {
    position: relative; border-radius: 999px;
    background: rgba(18, 16, 13, .34); color: #fdfcf8;
    border: 1px solid rgba(255, 255, 255, .30);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .26);
  }
  .hp__ctas .btn--primary:hover {
    background: rgba(18, 16, 13, .44);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .30);
  }
  .hp__ctas .btn--primary::after {
    content: ''; position: absolute; inset: -1.5px; z-index: 1;
    border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--lueur-angle),
      rgba(255, 255, 255, .16) 0deg, rgba(255, 255, 255, .16) 228deg,
      rgba(255, 255, 255, .46) 286deg, #ffffff 330deg,
      rgba(255, 240, 214, .95) 346deg, rgba(255, 255, 255, .16) 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: lueur-tourne 4.5s linear infinite;
    pointer-events: none;
  }

  /* — Le mur : plus de déplacement au doigt, une composition qui vit — */
  /*  Un doigt posé sur une pièce doit FAIRE DÉFILER la page, pas l'attraper :
      `touch-action: none` volait le geste. Les pièces deviennent décoratives
      et la page redevient entièrement défilable. Ce qui les anime : l'arrivée
      (inchangée), une dérive très lente, et une profondeur au défilement
      (`translate`, propriété indépendante, composée avec `transform`). */
  .hp { margin-top: -66px; padding-top: 66px; }
  .hp__piece {
    pointer-events: none; touch-action: auto; cursor: default;
    translate: 0 calc(var(--hp-scroll, 0px) * var(--pz, .12));
    animation: hp-epingle 900ms cubic-bezier(.18, .9, .28, 1.08) backwards,
               hp-derive calc(9s + var(--d) * .45s) ease-in-out infinite alternate;
    animation-delay: calc(320ms + var(--d) * 105ms), calc(1240ms + var(--d) * 105ms);
    --ddx: calc((var(--d) - 8) * .35px);
    --ddy: calc(-2px - var(--d) * .18px);
    --ddr: calc(.35deg + var(--d) * .045deg);
  }
  .hp__piece, .hp__piece:hover { box-shadow: 0 10px 24px rgba(43, 38, 32, .15), 0 1px 3px rgba(43, 38, 32, .10); }
  .hp h1.hp__titre { font-size: clamp(40px, 7.2vw, 72px); }
  .hp__sous { max-width: 40ch; }

  /* — Le chapitre en colonne : la piste ne doit jamais s'élargir — */
  /*  ⚠️ `1fr` vaut minmax(AUTO, 1fr) : le carrousel du shooting (sept cartes
      de côté) donnait à la colonne une largeur minimale de deux mille pixels,
      et TOUT le chapitre sortait de l'écran — titres coupés, téléphone hors
      champ. minmax(0, 1fr) borne la colonne à l'écran. */
  .chap__int { grid-template-columns: minmax(0, 1fr); }
  .chap__gauche, .chap__flux, .chap__vue--mobile, .chap__vue--mobile > * { min-width: 0; max-width: 100%; }
  /*  Les faux curseurs des démonstrations : sur un écran tactile, une flèche
      de souris qui se promène ne raconte rien. Les gestes restent joués. */
  .dcur { display: none; }

  /* — La visite : plus de satellites (déjà), et une légende compacte — */
  .hero2__cmd { flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
  .hero2__indice { flex-basis: 100%; order: -1; text-align: center; font-size: 12.5px; }
  .hero2__passer { padding: 11px 0; font-size: 14px; }

  /* — Cibles tactiles — */
  .btn { min-height: 44px; }
  .ft__lien { padding: 10px 0; }
  .hero2__lien, .hp__lien { padding: 12px 0 8px; }
  .pl-bascule__btn { min-height: 44px; }
  /* les onglets de l'écran collection (page Produit) défilent au lieu de se couper */
  .rp-onglets { overflow-x: auto; scrollbar-width: none; }
  .rp-onglets::-webkit-scrollbar { display: none; }
  .rp-onglet { white-space: nowrap; flex: none; }

  /* — Le moodboard : le vrai canvas, à l'échelle du doigt — */
  /*  Le bundle de l'îlot rend la planche à une largeur LOGIQUE égale à la
      largeur de l'écran (voir construire-essai.mjs) : une image de 150 px
      fait 150 px, une poignée de 36 px fait 36 px. Ce qui suit grossit les
      seules pièces de l'outil qui restaient trop petites pour un doigt. */
  .ilot .ldc { min-height: 44px; font-size: 13.5px; padding-left: 14px; padding-right: 14px; }
  .ilot .ldc--primary { flex: 1 1 100%; }
  .ilot [data-mb-item] { touch-action: pan-y; }
  .ilot [data-mb-item] img, .ilot .mb-poignee-etirer { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
  .ilot button[data-tip] { width: 42px !important; height: 42px !important; }
  /*  La punaise (31 × 33) garde sa taille à l'écran — l'agrandir changerait
      la planche — mais sa zone de toucher s'étend à 45 px tout autour. */
  .ilot .mb-pin-btn::after { content: ''; position: absolute; inset: -7px; }
  .ilot [data-mb-item] > div[style*="nwse-resize"] {
    width: 38px !important; height: 38px !important; right: -14px !important; bottom: -14px !important; border-radius: 12px !important;
  }
  .ilot [data-mb-freecanvas] textarea { font-size: 16px !important; }   /* iOS zoome sous 16 px */
  /*  ✦ Roxane 23 août — « réfléchir à des trucs plus simples pour la
      cropper ». Le recadrage lui-même est déjà bon au doigt (plein écran,
      trois actions écrites) ; ce qui ne l'était pas, ce sont ses POIGNÉES :
      12 px de côté. Elles gardent leur dessin — huit petits points blancs
      qui se lisent bien — et gagnent une zone de toucher de 44 px.
      ⚠️ PAS de préfixe `.ilot` ici : la fenêtre de recadrage est montée à la
      RACINE de la page, pas dans l'îlot. Le sélecteur y était sans effet, et
      rien ne le signalait. Cette feuille ne sert que les pages marketing :
      les seules poignées qu'elle peut rencontrer sont celles de la planche. */
  [style*="-resize"]::after { content: ''; position: absolute; inset: -16px; }
  /*  Annuler · Image entière · Valider le recadrage : de vraies cibles. */
  .ldc { min-height: 44px; }
}
/*  Le scotch de la planche : la copie de 640 px (41 Ko) à la place du PNG de
    2 Mo de l'app, sur tous les écrans — à 300 px de large, on ne voit aucune
    différence. Les punaises suivent le même chemin dans construire-essai.mjs. */
.ilot .sh-tape { background-image: url(/assets/marketing/tape.png); }
@media (max-width: 1020px) {

  /* — Le coût : le filet lumineux tournant repeint un dégradé à chaque image — */
  .lueur::before { animation: none; background: conic-gradient(from 300deg, transparent 0deg, transparent 300deg, rgba(196, 154, 72, .9) 330deg, var(--vert) 352deg, transparent 360deg); }
  .lueur--vert::before { background: conic-gradient(from 300deg, transparent 0deg, transparent 300deg, rgba(253, 252, 248, .9) 335deg, var(--ocre) 352deg, transparent 360deg); }
}
@keyframes hp-derive {
  from { transform: translate(-50%, -50%) rotate(var(--rr)); }
  to { transform: translate(calc(-50% + var(--ddx, 2px)), calc(-50% + var(--ddy, -3px))) rotate(calc(var(--rr) + var(--ddr, .5deg))); }
}

/* ── Tablette debout (721 – 1020) : le mur s'écarte du texte ───────────── */
/*  Les positions du bureau sont pensées pour un écran large. Debout, les
    pièces de la bande du milieu venaient mordre sur le sous-titre : on les
    écarte du centre de 15 %, sans toucher à leur hauteur. */
@media (min-width: 721px) and (max-width: 1020px) {
  .hp__piece { left: calc(50% + (var(--x) - 50%) * 1.15); }
}

/* ── ≤ 720 : TÉLÉPHONE ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* — Échelle et respirations — */
  .int { padding: 0 20px; }
  .section { padding: 54px 0; }
  .section--serre { padding: 46px 0; }
  .section .int--tete { margin-bottom: 24px; }
  .titre { font-size: clamp(27px, 7.6vw, 33px); line-height: 1.08; }
  .section__sous { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .hd__actions .btn { height: 40px; padding: 0 14px; font-size: 14px; }

  /* — Le mur, recomposé pour le portrait — */
  /*  Chaque pièce porte ses coordonnées TÉLÉPHONE (--xm, --ym, --lm, --rm) à
      côté de celles du bureau : pas « les positions desktop × 0,4 », une
      autre composition. Les pièces encadrent le texte (deux bandes, haut et
      bas, et trois éclats sur les bords) ; celles qui n'ont pas de place
      sont retirées, pas écrasées. */
  /*  ⚠️ Cette valeur ARRIVE APRÈS celle du bloc tactile et la remplace : c'est
      ici qu'on règle la hauteur du titre sur téléphone, pas plus haut. */
  .hp { padding-bottom: clamp(104px, 17vh, 156px); }
  .hp__piece { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: var(--lm, var(--w)); --rr: var(--rm, var(--r)); padding: 5px 5px 7px; }
  .hp__piece--couleur { padding: 5px 5px 12px; }
  .hp__piece--hors-m { display: none; }
  .hp__pin { width: 11px; height: 11px; margin-left: -5.5px; top: -5px; }
  .hp__texte { padding: 0 10px; max-width: none; }
  .hp h1.hp__titre { font-size: clamp(36px, 10.8vw, 46px); line-height: .94; letter-spacing: -.036em; max-width: 9.2ch; }
  .hp__sous { font-size: 16px; line-height: 1.5; max-width: 30ch; margin-top: 20px; }
  .hp__ctas { flex-direction: column; gap: 16px; margin-top: 30px; }
  .hp__ctas .btn--primary { min-width: 250px; height: 54px; font-size: 15.5px; }
  /*  ✦ « Retire le Créez votre moodboard ici. » Un seul geste proposé au
      pouce. Le lien n'est pas supprimé du site : il reste dans le pied de
      page final, et sur grand écran il n'a pas bougé. */
  .hp__lien { display: none; }
  .hp__lumiere { background: radial-gradient(46% 36% at 50% 50%, rgba(255, 252, 242, .72) 0%, rgba(255, 252, 242, 0) 70%); }

  /* — LA VISITE DEVIENT UN CARROUSEL QU'ON FAIT GLISSER ——————————————— */
  /*  ✦ Roxane 23 août — « quand je scrolle à droite il faut qu'on voie la page
      suivante ; enlève Passer la visite et Faites défiler pour avancer ; mets
      juste les points de la barre de défilement, centrés, pour qu'on
      comprenne. »
      Sur grand écran, la visite avance au défilement VERTICAL : l'écran reste
      collé et son contenu change. Debout, ce geste n'existe pas — on fait
      glisser. Les sept écrans se rangent donc côte à côte dans un vrai
      conteneur défilant, aimanté, et les points en dessous disent où l'on en
      est. C'est le geste que le pouce connaît déjà, et la page perd au
      passage les 3 100 px de piste dont elle n'avait plus besoin.
      ⚠️ `overflow-y: hidden` : sans lui, un conteneur qui défile en X défile
      aussi en Y et vole le défilement de la page. */
  .hero2__piste { height: auto; }
  .hero2__collant { position: static; padding-bottom: 0; }
  .ch__vues {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .ch__vues::-webkit-scrollbar { display: none; }
  .ch__vue {
    position: relative; inset: auto; flex: 0 0 100%; min-width: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
    opacity: 1; transform: none; pointer-events: auto; transition: none;
  }
  /*  L'écran en scène ne se distingue plus par son opacité (ils sont tous
      là) : c'est la position qui le dit. On neutralise donc les règles qui
      faisaient entrer et sortir les vues. */
  .ch__vue.sortie, .ch[data-etat] .ch__vue { opacity: 1; transform: none; }
  /*  Il ne reste que les points, centrés. */
  .hero2__indice, .hero2__passer { display: none; }
  .hero2__cmd { margin-top: 14px; gap: 0; }
  .jauge { gap: 6px; }
  .jauge__pas { width: 18px; height: 4px; cursor: pointer; }
  .jauge__pas.actif { width: 26px; }

  /* — La visite : le logiciel de près — */
  /*  Le cadre prend la largeur de l'écran (moins 12 px), sa hauteur suit la
      fenêtre, et chaque écran est RECADRÉ autour de ce qui compte : on ne
      rétrécit pas l'interface, on choisit ce qu'on montre. La piste est
      plus courte (36 svh par étape) : une visite se lit en trois écrans. */
  .hp-suite { padding-top: 8px; }
  .hero2 .int--large { padding: 0 12px; }
  /*  ⚠️ PLUS DE PISTE sur téléphone : la visite se fait glisser (carrousel,
      plus haut dans ce même bloc). Cette ligne réservait 3 138 px de
      défilement pour une mécanique qui n'existe plus ici — et comme elle vient
      APRÈS, elle gagnait. Ne pas la remettre sans retirer le carrousel. */
  .hero2__scene { margin-top: 0; padding-bottom: 24px; }
  .hero2__scene .ch { height: min(500px, calc(100svh - 200px)); min-height: 420px; }
  .hero2__scene .ch__cadre { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
  .ch__side { width: 34px; gap: 12px; padding: 12px 0; }
  .ch__side .repro__logo { width: 17px; height: 17px; }
  .ch__nav { gap: 9px; }
  .ch__nav i { width: 12px; height: 12px; border-radius: 4px; }
  .ch__barre { padding: 11px 12px 9px; }
  .ch__titre { font-size: 14px; }
  .ch__fil { font-size: 9px; }
  .ch__barre .rp-avatars span { width: 22px; height: 22px; font-size: 9px; }
  .ch__vue { padding: 11px 12px 12px; }
  .ch__tete { margin-bottom: 9px; }
  .jauge__pas { width: 16px; }
  /* 0 · identité : logo, palette et typos côte à côte, l'univers en bas */
  .mq { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 8px; align-content: start; }
  .mq__logo { padding: 13px 14px; }
  .mq__mot { font-size: 24px; }
  .mq__logo em { font-size: 8.5px; }
  .mq__bloc { padding: 10px 11px; }
  .mq__bloc > b { margin-bottom: 8px; font-size: 12px; }
  .mq__swatches { grid-template-columns: 1fr; gap: 6px; font-size: 11px; }
  .mq__swatches em { display: none; }
  .mq__swatches i { width: 18px; height: 18px; }
  .mq__typos { gap: 6px 8px; font-size: 10px; }
  .mq__t1 { font-size: 22px; }
  .mq__t2 { font-size: 19px; }
  .mq__univers { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  /* 1 · collection : propositions → bible (les inspirations, on les a vues) */
  .cc { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 8px; align-content: start; }
  .cc__col:first-child, .cc__fleche { display: none; }
  .cc__col { padding: 10px 11px; gap: 7px; }
  .cc__prop { padding: 7px; font-size: 11.5px; }
  .cc__vide { padding: 12px 10px; }
  /* 2 · suivi de production */
  .sp2__rang { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 9px 2px; font-size: 12px; }
  .sp2__jalons { gap: 10px 14px; padding-top: 14px; font-size: 10.5px; }
  /* 3 · shooting */
  .sh2 { gap: 10px; }
  .sh2__looks { gap: 8px; }
  .sh2__photo { aspect-ratio: 3 / 2.2; }
  .sh2__call { padding: 10px 12px; gap: 5px; }
  /* 4 · réseaux : trois jours suffisent */
  .rs__semaine { gap: 6px; }
  .rs__post { padding: 5px; }
  /* 5 · médiathèque : trois colonnes, deux rangées, et ça remplit */
  .md__grille { gap: 6px; }
  /* 6 · sales kit : la page de lookbook, visuel à côté de la fiche */
  .dt { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 8px; align-content: start; }
  .dt__lookbook, .dt__commandes { padding: 10px 11px; }
  .dt__page { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .dt__nom { font-size: 13px; }
  .dt__prix { gap: 12px; }
  .dt__quantites { margin-top: 8px; padding-top: 8px; }
  .dt__qLigne { grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; padding: 5px 0; font-size: 11px; }
  .dt__qLigne span:nth-child(2) { display: none; }
  .dt__commandes .dt__tete { margin-bottom: 4px; }
  .dt__cmd { padding: 7px 0; font-size: 11.5px; }

  /* — Huit outils : la scène resserrée autour de la boîte — */
  .exode { height: 330px; }
  .exode__tuile { left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
  .exode__tuile b { width: 48px; height: 48px; font-size: 19px; border-radius: 13px; }
  .exode__tuile em { font-size: 11px; padding: 1px 8px; }
  .exode__teseo { padding: 16px 22px; border-radius: 16px; }
  .exode__teseo img { height: 24px; }
  .exode__legende { margin-top: 12px; font-size: 13px; }

  /* — Le fil : une chronologie verticale, la couture descend — */
  /*  Sur grand écran la ligne traverse l'écran de gauche à droite et six
      états s'allument à son passage. Debout, c'est la même couture : elle
      descend le long du bord, chaque état arrive en face d'elle, image à
      gauche, mot à droite. Rien n'est supprimé, tout se lit. */
  .filp { padding: 2px 0 0; }
  .filp__ligne { display: block; left: 9px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .filp__trace { transform: scaleY(0); transform-origin: top; transition: transform 2200ms cubic-bezier(.3, .6, .3, 1) 160ms; }
  .filp.joue .filp__trace { transform: scaleY(1); }
  .filp__etapes { display: flex; flex-direction: column; gap: 16px; }
  .filp__etape {
    position: relative; flex-direction: row; align-items: center; text-align: left; gap: 14px;
    padding-left: 28px; min-height: 64px; transition-delay: calc(140ms + var(--i) * 330ms);
  }
  .filp__pt { display: block; position: absolute; left: 4px; top: 50%; margin: -6px 0 0; transition-delay: calc(260ms + var(--i) * 330ms); }
  .filp__visu { width: 80px; height: auto; flex: none; margin: 0; align-items: center; justify-content: center; }
  .filp__txt { align-items: flex-start; text-align: left; min-width: 0; }
  .filp__etape b { font-size: 15.5px; }
  .filp__det { font-size: 13px; margin-top: 2px; }
  .filp__pola { width: 58px; }
  .filp__prod { width: 66px; padding: 6px 8px 5px; }
  .filp__prod img { height: 44px; }

  /* — Le moodboard, en portrait et au doigt — */
  #moodboard .int--large { padding: 0 12px; }
  .mbtete { margin-bottom: 16px; }
  .mbtete__sous { font-size: 15.5px; padding-bottom: 0; }
  .mb__toile { height: 440px; }
  .mbpied { margin-top: 14px; }
  .mbpied__note { font-size: 12.5px; }

  /* — À plusieurs — */
  .section--equipe { padding: 46px 0; }
  .eq__photo { min-height: 250px; }
  .eq__panneau { padding: 14px 16px; gap: 12px; }
  .equipe .puces { margin-top: 26px; }

  /* — Le chapitre : six temps, six rythmes — */
  /*  Un titre puis un visuel, six fois de suite, ce serait une liste. Chaque
      temps a donc sa forme : une carte et ses quatre destinations, l'outil
      de fiche technique bord à bord, le prototype sur une bande vert forêt,
      la chronologie, le carrousel du shooting, le téléphone qui sort du bas. */
  .chap { padding-top: 42px; }
  .chap__int { padding: 0 20px; }
  .chap__txt { padding: 0 0 18px; }
  .chap__titre { font-size: 27px; margin-bottom: 10px; }
  .chap__sous { font-size: 15.5px; }
  .chap__vue--mobile { margin-bottom: 54px; }
  /*  ✦ Roxane 23 août — « décale un peu l'animation à droite, elle est trop
      collée sur la gauche ». Elle saignait des deux bords (marges négatives) :
      contre le bord gauche de l'écran, ça se lit comme un défaut de calage,
      pas comme un parti pris. Elle rentre dans la colonne, comme les autres. */
  .chap__vue--mobile[data-cle="technique"] .ftec__cadre { border-radius: var(--r-lg); }
  /*  ✦ Roxane 23 août — « retire le fond vert derrière ». Sur grand écran, la
      bande vert forêt est un des deux moments de couleur de la page ; debout,
      elle enfermait l'écran dans un cadre et ajoutait 48 px de hauteur à un
      bloc qui devait déjà tenir sur un écran. */
  .chap__vue--mobile[data-cle="sample"] .repro { box-shadow: var(--ombre-lg); }
  .chap__vue--mobile[data-cle="contenu"] { margin-left: -20px; margin-right: -20px; margin-bottom: 0; }

  /* 1 · créez une fois : la fiche en haut, quatre destinations en grille, reliées */
  .chap__vue .prop__source, .prop__source { width: 100%; padding: 12px 14px 14px; }
  .prop__pont, .chap__vue .prop__pont { height: 44px; position: relative; }
  .prop__pont::before, .prop__pont::after {
    content: ''; position: absolute; background: var(--line-strong); border-radius: 2px;
    transition: background 400ms ease, transform 520ms cubic-bezier(.4, 0, .2, 1);
  }
  .prop__pont::before { left: 50%; top: 0; width: 2px; height: 24px; margin-left: -1px; transform: scaleY(0); transform-origin: top; }
  .prop__pont::after { left: 25%; right: 25%; top: 24px; height: 2px; transform: scaleX(0); transition-delay: 320ms; }
  .prop.maj .prop__pont::before, .prop.maj .prop__pont::after { background: var(--vert); transform: none; }
  .prop__cartes, .chap__vue .prop__cartes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prop__carte { position: relative; padding: 11px 12px; }
  .prop__carte::before { content: ''; position: absolute; left: 50%; top: -20px; width: 2px; height: 20px; margin-left: -1px; background: var(--line-strong); transform: scaleY(0); transform-origin: top; transition: transform 360ms ease, background 360ms ease; }
  .prop.maj .prop__carte::before { transform: none; background: var(--vert); transition-delay: calc(380ms + var(--i) * 120ms); }
  .prop__carte b { font-size: 12px; margin-bottom: 6px; }
  .prop__carte .prop__val { font-size: 12px; }
  .prop__legende { font-size: 9px; margin-top: 6px; }
  .prop__bilan, .chap__vue .prop__bilan { margin-top: 16px; font-size: 17px; }

  /* 2 · fiche technique : le croquis, puis le tableau entier */
  .ftec__tete { padding: 12px 16px; }
  .ftec__croquis { padding: 12px 10px 10px; }
  .ftec__croquis svg { width: 126px; }
  .ftec__droite { padding: 12px 14px 14px; }
  .ftec__table { font-size: 11.5px; margin-top: 10px; }
  .ftec__ligne th { padding-right: 6px; }
  .ftec__ligne td { width: 40px; }

  /* 3 · prototype : la photo en grand, les épingles à la taille d'un doigt */
  /*  ✦ Roxane 23 août — « ce serait cool de voir le texte et toute l'animation
      sur l'écran ». Mesuré : titre 154 + vue 682 = 836 pour 778 de place
      utile. On rend les 60 px manquants sur la photo et les marges du
      panneau, sans toucher au nombre de retours affichés — ce sont eux qui
      racontent la scène. */
  .sv__photo, .chap__vue .sv__photo { min-height: 236px; }
  .sv__pin { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .sv__pin i { font-size: 10.5px; }
  .sv__panneau { padding: 13px 14px 14px; }
  .sv__retour { padding: 8px 0; font-size: 12.5px; line-height: 1.4; }
  .sv__num { width: 22px; height: 22px; }
  .sv__vide { margin-top: 10px; padding: 11px; font-size: 12px; }
  .sv__liste { margin-top: 8px; }
  .sv__envoi { padding: 11px 16px; font-size: 12.5px; }
  .sv__atelier { margin-top: 10px; padding: 9px 12px; font-size: 12px; }

  /* 4 · la mémoire du produit : la chronologie, telle quelle, plus aérée */
  .repro--fil .repro__body { padding: 16px 14px; }
  .fil__evt { padding: 8px 0; }

  /* 5 · le shooting : un carrousel, une carte par outil, le look d'abord */
  /*  Sept cartes l'une sous l'autre faisaient deux mille pixels de mosaïque.
      Elles défilent maintenant de côté, aimantées une par une, la suivante
      dépassant assez pour qu'on comprenne qu'il y en a d'autres. Le look
      composé ouvre la marche : c'est le moment fort. */
  .chap__vue--mobile .prep, .prep {
    display: flex; gap: 12px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 20px 14px; margin: 0 -20px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .prep::-webkit-scrollbar { display: none; }
  .chap__vue--mobile .prep, .prep { min-width: 0; }
  .chap__vue--mobile .prep__col, .prep__col { display: contents; }
  .prep__carte, .prep__look, .chap__vue .prep__carte, .chap__vue .prep__look {
    flex: 0 0 min(80vw, 340px); scroll-snap-align: center; margin: 0; padding: 12px 13px;
  }
  .prep__look { order: -2; }
  .prep__carte--shot { order: -1; }
  .prep__look, .chap__vue .prep__look { grid-template-columns: 1fr; gap: 10px; }
  .prep__fleche { display: none; }
  .prep__pieces { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .prep__looks { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .prep__lk { padding: 7px; gap: 6px; }
  .prep__lkGrille { grid-template-columns: 1fr 1fr; gap: 4px; }
  .prep__carte--call .prep__heure:nth-child(n+11) { display: none; }
  .prep__planche, .chap__vue .prep__planche { height: 120px; }
  .prep__carte-lieu, .chap__vue .prep__carte-lieu { height: 86px; }

  /* 6 · le feed : le téléphone prend l'écran, coupé en bas, la pile au-dessus */
  /*  Un petit téléphone dessiné DANS un téléphone, c'est absurde. Ici le
      mockup fait la largeur de l'écran et sort du bas, comme s'il montait
      vers vous ; la pile « À planifier » se tient au-dessus, d'où la carte
      vole jusqu'à sa case. */
  /*  ⚠️ `flex-wrap: nowrap` n'est pas décoratif : la règle tablette pose
      `wrap`, et dans une colonne bornée en hauteur, ce qui ne tient plus
      passe dans une DEUXIÈME colonne — le téléphone partait à droite, hors
      champ, et il ne restait qu'un trait noir au bord de l'écran. */
  /*  ✦ Roxane 23 août — « on ne voit pas le téléphone en entier, il faut qu'on
      voie tout sur un écran ». Le mockup sortait du bas volontairement (il
      « montait » vers vous) : debout, ça revenait à en couper le tiers, et la
      grille du feed passait sous le pli.
      Le téléphone est donc ENTIER, et sa hauteur se calcule sur la place qui
      reste réellement : la fenêtre, moins la barre, moins le titre et son
      sous-titre, moins la pile au-dessus. `svh` et pas `vh` : la barre
      d'adresse de Safari ne doit pas faire déborder ce qui tenait juste. */
  .chap__vue .tel-scene, .tel-scene {
    min-height: 0; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px;
    overflow: visible; padding: 0 14px;
  }
  .tel-pile {
    display: flex; position: relative; width: 100%; height: auto; flex-wrap: nowrap; gap: 8px;
    justify-content: center; align-items: flex-end; padding-top: 20px;
  }
  .tel-pile__label { left: 50%; transform: translateX(-50%); top: 0; white-space: nowrap; font-size: 10px; }
  .tel-pile__carte { position: relative; top: auto; left: auto; width: 50px; }
  .tel-pile__carte--3 { transform: rotate(-5deg) translateY(3px); }
  .tel-pile__carte--2 { transform: rotate(4deg); }
  .tel-pile__carte--1 { transform: rotate(-1deg); }
  .tel-colonne { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .tel-plateformes { padding: 3px; }
  .tel-plateforme { font-size: 12px; padding: 5px 14px; }
  /*  ⚠️ 23 août (2ᵉ passe, Roxane) — ON NE RÉTRÉCIT PAS QU'EN HAUTEUR.
      La passe précédente bornait la HAUTEUR de l'écran et laissait la largeur
      à sa valeur d'origine : le téléphone devenait un carré. Mesuré avant
      correction — rapport largeur/hauteur de 0,842 à 390 px, 0,760 à 360,
      là où un iPhone vaut 0,46 et le mockup du bureau 0,481.
      La hauteur reste pilotée par la place disponible ; la LARGEUR en découle,
      par `aspect-ratio`. Le cadre, lui, épouse l'écran (`width: fit-content`)
      au lieu d'imposer sa propre largeur. Un mockup d'iPhone qui n'a pas les
      proportions d'un iPhone ne raconte plus rien. */
  .tel {
    width: fit-content; max-width: 100%; margin: 0 auto; padding: 7px;
    border-radius: 38px; box-shadow: 0 16px 40px rgba(43, 38, 32, .30);
  }
  .tel__ecran {
    height: min(560px, calc(100svh - 396px)); min-height: 300px;
    aspect-ratio: 272 / 566; width: auto;
    border-radius: 31px;
  }
  .tel__ile { width: 62px; height: 17px; top: 15px; }
  /*  À cette largeur, l'en-tête du profil doit se resserrer, sinon les
      chiffres passent à la ligne et poussent la grille hors de l'écran. */
  .tel__barre { padding: 32px 12px 6px; font-size: 12.5px; }
  .tel__profil { gap: 10px; padding: 4px 12px 0; }
  .tel__avatar-photo { width: 50px; height: 50px; }
  .tel__stat b { font-size: 12px; }
  .tel__stat em { font-size: 9.5px; }
  .tel__bio { padding: 6px 12px 0; font-size: 10.5px; }
  .tel__actions { padding: 7px 12px 0; }
  .tel__actions span { font-size: 10.5px; padding: 5px 0; }
  .tel__stories { gap: 9px; padding: 9px 12px 2px; }
  .tel__story-rond { width: 38px; height: 38px; }
  .tel__story em { font-size: 8px; }

  /* — L'import — */
  .imp2__fichiers { gap: 8px; }
  .imp2__fichier { padding: 9px 11px; font-size: 10px; }
  .imp2__corps { padding: 12px; }
  .imp2__compteur b { font-size: 21px; }
  .split__visuel .accent-serif { text-align: center; margin-top: 18px; }
  .split__cta { margin-top: 20px; }

  /* — Le manifeste, et la finale — */
  .manifeste { padding: 0; }
  .manifeste__texte { font-size: clamp(28px, 8.2vw, 36px); line-height: 1.15; }
  .rvl__course { height: 100svh; }
  .finale { padding: 64px 0 70px; }
  .finale .titre { font-size: clamp(28px, 7.6vw, 34px); }
  .finale__sous { font-size: 16px; }
  .finale .hero2__ctas { flex-direction: column; gap: 14px; margin-top: 28px; }
  .finale .hero2__ctas .btn { min-width: 236px; }
  .ft { padding-top: 44px; }
  .ft__int { gap: 30px; }
  .ft__cols { gap: 22px 36px; }
  .ft__mention { margin-top: 34px; padding: 18px 20px; font-size: 12px; }
}

/* ── Très petit téléphone (360) ─────────────────────────────────────────── */
@media (max-width: 400px) {
  .hp h1.hp__titre { font-size: clamp(34px, 10.4vw, 40px); }
  .hero2__scene .ch { min-height: 400px; }
  .ch__vue { padding: 10px; }
  .ftec__ligne td { width: 36px; }
  .ftec__table { font-size: 11px; }
  .ftec__droite { padding: 10px 12px 12px; }
  .prop__cartes, .chap__vue .prop__cartes { gap: 8px; }
  .prop__carte { padding: 10px; }
  .exode__tuile em { font-size: 10px; }
  .tel { width: fit-content; }
  /*  ✦ Sur un petit téléphone (714 px de place utile au lieu de 778), deux
      temps débordaient encore : le prototype et le feed. On rend la
      différence sur la photo et sur l'écran du mockup — jamais sur le nombre
      d'informations montrées, qui est ce qui raconte la scène. */
  .sv__photo, .chap__vue .sv__photo { min-height: 190px; }
  /*  ⚠️ LE NOMBRE RETRANCHÉ EST MESURÉ, PAS DEVINÉ. Il vaut tout ce qui
      entoure l'écran dans ce temps du chapitre : le titre (183 px à 360 —
      il passe à trois lignes), le cadre du mockup, les cartes « à planifier »,
      le sélecteur de plateforme, et la marge basse. À 368, le compte tombait
      juste tant qu'un plafond de 366 bornait l'écran ; depuis que la hauteur
      décide (et que la largeur en découle), c'est ce nombre-là qui décide, et
      il était trop petit de 27 px à 360 × 780. */
  .tel__ecran { height: min(560px, calc(100svh - 404px)); min-height: 264px; }
  .tel-pile__carte { width: 44px; }
  .tel-pile { padding-top: 18px; }
}

/* ── Mouvement réduit : la version mobile montre ses états finaux ───────── */
@media (prefers-reduced-motion: reduce) {
  .hp__piece { animation: none; translate: none; }
  /*  Le filet qui tourne autour du bouton est une animation continue : il se
      fige sur un angle, le contour reste dessiné. */
  .hp__ctas .btn--primary::after { animation: none; }
  .hd__nav, .hd__nav .hd__lien, .hd__nav-pied { transition: none; }
  .hd--ouvert .hd__nav .hd__lien, .hd--ouvert .hd__nav-pied { opacity: 1; transform: none; }
  .prop__pont::before, .prop__pont::after, .prop__carte::before { transition: none; transform: none; background: var(--vert); }
  .filp__trace { transform: none; }
}

/* ── Îlot moodboard : extrait de site/app.html au build ────────────── */
.sh-shell {
    
    
    --sh-bg:           #FFFAF2;
    --sh-bg-2:         #FFFAF2;
    --sh-card:         #ffffff;
    --sh-paper:        #FFFAF2;
    --sh-ink:          #1a1a17;
    --sh-ink-2:        #3a3a32;
    --sh-mute:         #7a7466;
    --sh-mute-2:       #a59c87;
    --sh-line:         #cdc6b4;
    --sh-line-soft:    #ede4cd;
    --sh-accent:       #1b3a2c;          
    --sh-accent-warm:  #b8842e;          
    --sh-ok:           #5c7546;
    --sh-pending:      #c89045;
    --sh-error:        #c74545;
    
    
    --sh-font-display: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sh-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
    --sh-font-mono:    "Inter", ui-monospace, monospace;
    --sh-font-hand:    "Inter", ui-sans-serif, system-ui, sans-serif;

    background: var(--sh-bg);
    font-family: var(--sh-font-body);
    color: var(--sh-ink-2);
  }
.sh-polaroid {
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(43,38,32,0.22);
    display: inline-block;
  }
.sh-polaroid__img {
    display: block;
    
    background: transparent;
    border-radius: 4px;
  }
.sh-polaroid__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 8px 7px;
    text-align: center;
    font-family: var(--sh-font-hand);
    font-size: 14px; line-height: 1.2;
    color: #fdfcf8;
    background: linear-gradient(to top, rgba(15,11,8,0.6), transparent);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
.sh-note {
    position: relative;
    background:
      linear-gradient(135deg, rgba(202,178,128,0.10) 0%, rgba(202,178,128,0) 60%),
      linear-gradient(180deg, var(--sh-paper) 0%, #e6dcc5 100%);
    border: 1px solid rgba(170,150,100,0.22);
    border-radius: 4px;
    padding: 18px 20px 22px;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.08),
      0 8px 22px rgba(43,38,32,0.10);
    font-family: var(--sh-font-hand);
    font-size: 17px; line-height: 1.45;
    color: var(--sh-ink-2);
  }
.sh-note__label {
    font-family: var(--sh-font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sh-mute); margin-bottom: 6px;
    display: block;
  }
.sh-postit {
    --pi-top: #FEF7A8;
    --pi-bot: #FBE877;
    --pi-edge: #ECD866;
    position: relative;
    display: block;
    transform: rotate(-1.4deg);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }
.sh-postit--flat { transform: none; will-change: auto; }
.sh-postit--flat:hover { transform: translateY(-2px); }
.sh-postit__sheet {
    position: absolute; inset: 0;
    background: var(--pi-edge);
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(40,36,20,0.12);
    transition: transform 300ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
.sh-postit__sheet--1 { transform: translate(3px, 4px) rotate(1.7deg); }
.sh-postit__sheet--2 { transform: translate(-3px, 6px) rotate(-1.3deg); }
.sh-postit__face {
    position: relative;
    z-index: 1;
    border-radius: 2px;
    padding: 24px 20px 22px;
    color: #3a3328;
    
    background: linear-gradient(178deg, var(--pi-top) 0%, var(--pi-bot) 100%);
    box-shadow:
      0 1px 1px rgba(40,36,20,0.07),
      0 5px 13px rgba(40,36,20,0.10);
    transition: box-shadow 260ms ease;
  }
.sh-postit__face::after {
    content: "";
    position: absolute; right: 0; bottom: 0;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, rgba(40,36,20,0) 52%, rgba(40,36,20,0.055) 64%, rgba(255,255,255,0.16) 68%);
    border-radius: 0 0 3px 0;
    pointer-events: none;
  }
.sh-postit:hover { transform: rotate(0deg) translateY(-3px); }
.sh-postit:hover .sh-postit__sheet--1 { transform: translate(6px, 8px) rotate(3.2deg); }
.sh-postit:hover .sh-postit__sheet--2 { transform: translate(-6px, 9px) rotate(-2.6deg); }
.sh-postit:hover .sh-postit__face {
    box-shadow:
      0 2px 3px rgba(40,36,20,0.09),
      0 11px 22px rgba(40,36,20,0.14);
  }
.sh-postit__label {
    font-family: var(--sh-font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(58,51,40,0.55); margin-bottom: 8px;
    display: block;
  }
.sh-postit__text {
    width: 100%; border: none; outline: none; background: transparent;
    resize: none;
    
    
    font-family: 'Caveat', 'Inter', ui-sans-serif, system-ui, cursive;
    font-size: 21px; line-height: 1.3; color: #3a3328;
    padding: 0;
  }
.sh-postit__text::placeholder { color: rgba(58,51,40,0.4); }
.sh-postit--yellow { --pi-top:#FEF7A8; --pi-bot:#FBE877; --pi-edge:#ECD866; }
.sh-postit--blue { --pi-top:#CFE8FB; --pi-bot:#AAD2F3; --pi-edge:#97C1E4; }
.sh-postit--pink { --pi-top:#FBD3E4; --pi-bot:#F5B4D0; --pi-edge:#E6A1BE; }
.sh-postit--orange { --pi-top:#FEE1B8; --pi-bot:#FBC684; --pi-edge:#EDB673; }
.sh-postit--green { --pi-top:#DBEFC2; --pi-bot:#C0E298; --pi-edge:#ADCF84; }
.sh-postit { transform: none; }
.sh-postit__sheet { display: none; }
.sh-postit__face { box-shadow: none; }
.sh-pinboard {
    position: relative;
    background-color: #cda062;
    background-image: url(/assets/moodboard/cork.svg);
    background-repeat: repeat;
    background-size: 512px 512px;
    border-radius: 14px;
    padding: 28px;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--sh-line);
  }
.sh-postit--flat > .sh-postit__face { flex: 1; min-height: 0; }