/* ═══════════════════════════════════════════════════════════
   KolorBar — site vitrine
   DA v2 « Le geste et la matière » — ivoire, caramel, espresso,
   touches de sauge. Mobile-first. CSS pur, zéro dépendance.

   Sources des visuels : kolorbar-site/sources/ (non déployé).
   Les WebP de img/ en sont dérivés — pour en régénérer,
   redimensionner + convertir en qualité 82.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* nudes */
  --n50:#FBF6F1; --n100:#F5E9DE; --n200:#EAD6C4; --n300:#DCBBA0;
  --n400:#CE9E7C; --n500:#C0895F; --n600:#A5714B; --n700:#7E5638; --n900:#3B2C22;
  /* structure */
  --canvas:#FDFBF8; --surface:#FFFFFF; --rail:#F4EEE7; --line:#EDE6DD;
  --packshot:#F6F0EA;              /* fond exact des packshots */
  --espresso:#241C16;              /* sections sombres */
  --ink:#221B15; --muted:#75685C;
  /* sémantiques */
  --success:#5E9E76; --warn:#DDA23E; --danger:#C65A45;
  /* ombres */
  --shadow:0 8px 20px rgba(59,44,34,.08);
  --shadow-lift:0 30px 60px -28px rgba(59,44,34,.35), 0 4px 14px rgba(59,44,34,.07);
  --display:ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",system-ui,sans-serif;
  /* rythme */
  --gutter:clamp(20px, 5vw, 40px);
  --section-y:clamp(72px, 11vw, 148px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--display); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; height:auto; }
a { color:inherit; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }

.wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:max(var(--gutter), env(safe-area-inset-left)); }
.wrap.narrow { max-width:780px; }
.center { text-align:center; }

.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--n50); padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus { left:0; }
:focus-visible { outline:2.5px solid var(--n600); outline-offset:3px; border-radius:6px; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:0 26px; min-height:52px;
  font-family:var(--display); font-size:16px; font-weight:700;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease, box-shadow .25s ease;
}
.btn-primary { background:var(--n500); color:#FFF9F3; box-shadow:0 10px 24px -12px rgba(120,80,50,.7); }
.btn-primary:hover { background:var(--n600); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(120,80,50,.75); }
.btn-ghost { background:transparent; color:var(--n700); border-color:color-mix(in srgb, var(--n500) 55%, transparent); }
.btn-ghost:hover { background:color-mix(in srgb, var(--n500) 9%, transparent); transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.985); }
.btn-s { min-height:44px; font-size:15px; padding:0 18px; }
.btn-l { min-height:58px; font-size:17px; padding:0 32px; }

.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.center .cta-row, .cta-row.center, .final .cta-row { justify-content:center; }

/* ── Typo commune ────────────────────────────────────────── */
.kicker {
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--n600); margin:0 0 16px;
}
h1 {
  font-size:clamp(42px, 9vw, 86px); font-weight:900; letter-spacing:-.032em;
  line-height:1.02; margin:0 0 22px;
}
h1 em { font-style:normal; color:var(--n500); }
h2 {
  font-size:clamp(28px, 4.6vw, 46px); font-weight:800; letter-spacing:-.028em;
  line-height:1.1; margin:0 0 18px;
}
h2 small {
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  color:var(--n500); text-transform:uppercase; margin-bottom:14px; letter-spacing:.16em;
}
h3 { font-size:clamp(18px, 2vw, 21px); font-weight:800; letter-spacing:-.01em; margin:0 0 10px; }
.lede { font-size:clamp(17px, 2vw, 21px); color:var(--muted); max-width:58ch; margin:0 0 14px; }
.micro-note { font-size:13.5px; color:var(--muted); margin:16px 0 0; }
.section { padding-block:var(--section-y); }
.section-head { margin-bottom:clamp(36px, 5vw, 64px); }
.section-head.center { text-align:center; }
.section-head.center .lede { margin-inline:auto; }

/* ── En-tête ─────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease;
}
.topbar.scrolled { border-bottom-color:var(--line); }
.topbar-in {
  max-width:1200px; margin-inline:auto; padding:12px max(var(--gutter), env(safe-area-inset-left));
  display:flex; align-items:center; gap:20px;
}
.logo { display:flex; align-items:center; gap:9px; font-size:21px; font-weight:900; letter-spacing:-.025em; text-decoration:none; }
.logo-word span { color:var(--n500); }
.logo-bol { width:28px; height:28px; flex:none; }
.logo.small { font-size:19px; justify-content:center; margin:0; }
.nav { display:none; gap:26px; margin-left:auto; }
.nav a { text-decoration:none; font-size:15px; font-weight:600; color:var(--muted); transition:color .2s; }
.nav a:hover { color:var(--ink); }
.topbar-in > .btn { margin-left:auto; }
@media (min-width:960px){ .nav{display:flex} .topbar-in > .btn{margin-left:0} }

/* ═══ 1 · HERO ════════════════════════════════════════════ */
/* ═══ Retour de paiement Stripe (?abonnement=merci) ═══════ */
.merci-abo {
  background:color-mix(in srgb, var(--success) 14%, var(--surface));
  border-bottom:1px solid color-mix(in srgb, var(--success) 32%, var(--line));
}
.merci-abo p { margin:0; padding-block:14px; font-size:15px; color:var(--ink); }
.merci-abo strong { color:color-mix(in srgb, var(--success) 62%, var(--n900)); }

.hero { position:relative; }
.hero-media { overflow:hidden; }   /* confine le zoom du parallaxe */
.hero-media img {
  display:block; width:100%; height:clamp(520px, 86vh, 720px);
  object-fit:cover; object-position:72% center;
}
.hero-copy { padding:clamp(32px,7vw,52px) max(var(--gutter),env(safe-area-inset-left)) clamp(48px,8vw,72px); max-width:1200px; margin-inline:auto; }
.hero-copy .lede { max-width:46ch; }

/* Mobile : le titre se pose SUR la photo. Une bannière seule, suivie du
   texte plus bas, se lit comme une image décorative — ici elle porte le
   message. Voile dégradé pour que l'ivoire reste lisible sur la photo. */
@media (max-width:899px){
  .hero { display:grid; }
  .hero > * { grid-area:1/1; }
  .hero::after {
    content:""; grid-area:1/1; z-index:1; pointer-events:none;
    background:linear-gradient(to top,
      rgba(28,20,14,.88) 0%, rgba(28,20,14,.72) 34%,
      rgba(28,20,14,.34) 62%, rgba(28,20,14,.06) 100%);
  }
  .hero-copy { position:relative; z-index:2; align-self:end; color:#FFF7EE; }
  .hero-copy h1 { color:#FFF7EE; }
  .hero-copy h1 em { color:var(--n300); }
  .hero-copy .kicker { color:var(--n300); }
  .hero-copy .lede { color:rgba(255,247,238,.86); }
  .hero-copy .micro-note { color:rgba(255,247,238,.68); }
  .hero-copy .btn-ghost { color:#FFF7EE; border-color:rgba(255,247,238,.55); }
  .hero-copy .btn-ghost:hover { background:rgba(255,247,238,.12); }
}

@media (min-width:900px){
  .hero { display:grid; }
  .hero > * { grid-area:1/1; }
  .hero-media img { height:min(90vh, 840px); object-position:76% center; }
  .hero::after {
    content:""; grid-area:1/1; z-index:1; pointer-events:none;
    background:linear-gradient(100deg,
      rgba(253,251,248,.97) 0%, rgba(253,251,248,.93) 26%,
      rgba(253,251,248,.72) 44%, rgba(253,251,248,0) 66%);
  }
  .hero-copy {
    position:relative; z-index:2; align-self:center; width:100%;
    padding-block:0;
  }
  .hero-copy > * { max-width:min(46ch, 52%); }
  .hero-copy .cta-row { max-width:none; }
}
@media (min-width:1400px){ .hero-media img { object-position:70% center; } }

/* ═══ 2 · BANDEAU CHIFFRE (espresso) ══════════════════════ */
.band { background:var(--espresso); color:var(--n100); padding-block:clamp(48px,7vw,78px); }
.band-in { display:grid; gap:20px; align-items:center; }
.band-num {
  font-size:clamp(58px,11vw,104px); font-weight:900; letter-spacing:-.045em;
  margin:0; color:var(--n400); line-height:.95; font-variant-numeric:tabular-nums;
}
.band-txt { margin:0; max-width:56ch; font-size:clamp(16px,1.9vw,19px); color:color-mix(in srgb, var(--n200) 82%, transparent); }
@media (min-width:820px){ .band-in { grid-template-columns:auto 1fr; gap:52px; } }

/* ═══ 3 · LE PROBLÈME ═════════════════════════════════════ */
.probleme-grid { display:grid; gap:clamp(36px,6vw,72px); align-items:center; }
@media (min-width:900px){ .probleme-grid { grid-template-columns:1fr 1fr; } }
.probleme-copy p { color:var(--muted); }
.probleme-copy strong { color:var(--ink); }
.probleme-figure { margin:0; position:relative; border-radius:28px; overflow:hidden; background:var(--packshot); }
.probleme-figure img {
  display:block; width:100%; aspect-ratio:5/4; object-fit:cover;
  /* recadré sur le tourbillon de couleur qui part dans le siphon */
  object-position:64% 76%;
}
/* Le chiffre se pose en haut, sur la pierre nue : au bas de la photo il
   masquait justement la couleur qui s'écoule — le sujet de la section. */
.evier {
  position:absolute; left:0; right:0; top:0; display:grid; gap:2px;
  padding:clamp(20px,3vw,30px) clamp(20px,3vw,30px) clamp(30px,5vw,48px);
  background:linear-gradient(to bottom, rgba(238,230,222,.96) 52%, rgba(238,230,222,0));
}
.evier-num {
  font-size:clamp(38px,6vw,58px); font-weight:900; letter-spacing:-.035em;
  color:var(--danger); line-height:1; font-variant-numeric:tabular-nums;
}
.evier-txt { font-size:15px; color:var(--n700); font-weight:600; }

/* ═══ 4 · LA SOLUTION — trio ══════════════════════════════ */
.solution { background:var(--n50); }
.trio { display:grid; gap:clamp(36px,5vw,44px); }
@media (min-width:820px){ .trio { grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,44px); } }
.trio-media {
  border-radius:24px; overflow:hidden; background:var(--packshot);
  margin-bottom:22px; aspect-ratio:4/3;
}
.trio-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.trio-item:hover .trio-media img { transform:scale(1.045); }
.trio-item p { color:var(--muted); margin:0; }

/* ═══ 5 · SIGNATURE — le bol se remplit ═══════════════════ */
.etapes { padding-block:var(--section-y) 0; }
.seq {
  position:relative; display:grid; gap:0;
  padding-inline:max(var(--gutter),env(safe-area-inset-left));
  max-width:1200px; margin-inline:auto;
}
.seq-sticky {
  position:sticky; top:64px; z-index:2;
  display:grid; justify-items:center; gap:12px;
  padding-block:18px 14px; background:var(--canvas);
}
.seq-sticky::after {
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1);
  background:var(--canvas); box-shadow:0 12px 16px -14px rgba(59,44,34,.4);
  pointer-events:none;
}
/* ── LE BOL — « Porcelaine photoréaliste » ────────────────
   Reprend la géométrie MESURÉE dans l'application (ajustement de cercle
   sur 352 points du bord) : le bol n'est pas au centre de sa photo.
     centre (49,77 % ; 47,76 %) · céramique 32,22 % · halo 35,5 %
     surface du mélange : 56 % max · 400 g = bol visuellement plein
   La surface est DESSINÉE et croît en continu — l'app proscrit
   explicitement les paliers d'images. */
.bol { position:relative; width:min(58vw, 300px); aspect-ratio:1;
  --mix:#B0794C; --mix-clair:#C69A74; --mix-sombre:#885D39; }
.bol-photo { position:absolute; inset:0; width:100%; height:100%; display:block; }

.bol-mix {
  position:absolute; width:56%; aspect-ratio:1;
  left:21.77%; top:19.76%;            /* centré sur le centre RÉEL du bol */
  transform:scale(.749); opacity:1;      /* repli : bol rempli */
  will-change:transform;
}
/* Traces de spatule : rotation lente, comme dans l'app (26 s). */
.bol-tourbillon { transform-origin:50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .bol-tourbillon { animation:tourne 26s linear infinite; }
}
@keyframes tourne { to { transform:rotate(360deg); } }

.bol-halo { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bol-halo circle { fill:none; stroke-width:9; stroke-linecap:round; }
.halo-piste { stroke:var(--line); stroke-opacity:.85; }
.halo-jauge {
  stroke:var(--n500);
  stroke-dasharray:1673; stroke-dashoffset:0;        /* 2π × 266,25 */
  transform:rotate(-90deg); transform-origin:49.77% 47.76%;
}

/* Le poids se lit DANS le bol, sur la matière — comme dans l'app. */
.bol-poids {
  position:absolute; left:0; right:0; top:47.76%; transform:translateY(-50%);
  margin:0; text-align:center; font-size:clamp(19px,4.4vw,30px); font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:#FFF9F1; text-shadow:0 2px 10px rgba(80,44,18,.5);
}
.bol-poids small { font-size:.5em; font-weight:700; opacity:.72; }
.seq-steps { list-style:none; margin:0; padding:0 0 var(--section-y); display:grid; gap:clamp(44px,9vw,88px); }
.seq-step { max-width:46ch; }
.seq-step p { color:var(--muted); margin:0; }
.step-n {
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--n500); color:#FFF9F3; font-size:18px; font-weight:800; margin-bottom:16px;
  box-shadow:0 8px 18px -10px rgba(120,80,50,.8);
}
/* mobile : numéro en ligne avec le titre — pas de pastille coupée en deux
   quand l'étape passe sous le bol collant */
@media (max-width:899px){
  .seq-step { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; }
  .seq-step .step-n { width:36px; height:36px; font-size:16px; margin:0; }
  .seq-step h3 { margin:0; }
  .seq-step p { grid-column:2; margin-top:10px; }
}
@media (min-width:900px){
  .seq { max-width:860px; }
  .seq-sticky { top:0; height:100vh; align-content:center; padding-block:0; background:none; }
  .seq-sticky::after { display:none; }
  .bol { width:min(38vw, 440px); }
  .seq-steps { padding-block:22vh 26vh; gap:32vh; }
}

/* ═══ 6 · FORMULES QUI APPRENNENT ═════════════════════════ */
.apprend { background:var(--n50); }
.apprend-grid { display:grid; gap:clamp(40px,6vw,80px); align-items:center; }
@media (min-width:900px){ .apprend-grid { grid-template-columns:1.05fr .95fr; } }
.apprend-copy > p { color:var(--muted); }
.learn { margin-top:30px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px 26px; box-shadow:var(--shadow); }
.learn-title { font-size:14.5px; font-weight:800; color:var(--ink); margin:0 0 14px; }
.learn-row { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted); }
.learn-row b { font-variant-numeric:tabular-nums; font-size:18px; color:var(--ink); }
.learn-row.ok { border-bottom:none; }
.learn-row.ok, .learn-row.ok b { color:var(--success); font-weight:800; }
.learn-note { font-size:13px; color:var(--muted); margin:10px 0 0; }

/* Cadre iPad ------------------------------------------------ */
.ipad {
  margin:0; position:relative; border-radius:clamp(20px,2.6vw,32px);
  background:linear-gradient(155deg,#3A322B 0%,#1D1712 46%,#2A231D 100%);
  padding:clamp(7px,1vw,12px);
  box-shadow:var(--shadow-lift);
  justify-self:center; width:min(100%, 420px);
}
.ipad::before {                     /* reflet vitre */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(148deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%);
}
.ipad img {
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center;
  border-radius:clamp(12px,1.7vw,20px);
}

/* ═══ 7 · IMMERSIF — consultation ═════════════════════════ */
.immersive { position:relative; display:grid; isolation:isolate; overflow:hidden; }
.immersive > * { grid-area:1/1; }
.immersive-bg { width:100%; height:100%; min-height:clamp(520px,88vh,860px); object-fit:cover; object-position:58% center; }
.immersive::after {
  content:""; grid-area:1/1; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(28,21,16,.93) 6%, rgba(28,21,16,.72) 38%, rgba(28,21,16,.18) 68%, rgba(28,21,16,.28) 100%);
}
.immersive-in { position:relative; z-index:2; align-self:end; padding-block:clamp(40px,7vw,84px); color:var(--n50); }
.immersive-in h2 { color:#FFF9F3; }
.immersive-in h2 small { color:var(--n300); }
.immersive-in .lede { color:color-mix(in srgb, var(--n100) 88%, transparent); }
.immersive-in .ticks li { color:#FFF9F3; }
.immersive-in .ticks li::before { color:#8FCBA4; }
@media (min-width:900px){
  .immersive-bg { object-position:50% center; }
  /* le texte reste aligné sur la grille du site, il n'est pas recentré */
  .immersive-in > * { max-width:760px; }
}

/* listes cochées */
.ticks { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:11px; }
@media (min-width:640px){ .ticks { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .ticks { grid-template-columns:repeat(3,1fr); } }
.ticks li { padding-left:28px; position:relative; font-weight:600; font-size:16px; }
.ticks li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--success); font-weight:800; }
.ticks.small { grid-template-columns:1fr !important; gap:9px; font-size:15px; margin:16px 0 24px; }

/* bénéfice isolé */
.benefice-seul { padding-block:clamp(48px,7vw,88px); }
.benefice {
  font-size:clamp(19px,2.6vw,27px); line-height:1.5; font-weight:600;
  color:var(--n700); margin:0; text-align:center; text-wrap:balance;
}
.benefice strong { color:var(--ink); font-weight:800; }

/* ═══ 8 · PILOTAGE — sombre ═══════════════════════════════ */
.pilotage { background:var(--espresso); color:var(--n100); padding-block:var(--section-y); }
.pilotage-grid { display:grid; gap:clamp(38px,5vw,64px); align-items:center; }
@media (min-width:960px){ .pilotage-grid { grid-template-columns:.85fr 1.15fr; } }
.pilotage h2 { color:#FFF9F3; }
.pilotage h2 small { color:var(--n400); }
.pilotage .lede { color:color-mix(in srgb, var(--n200) 80%, transparent); }
.pilotage .micro-note { color:color-mix(in srgb, var(--n300) 62%, transparent); }
.dash { display:grid; gap:14px; }
@media (min-width:560px){ .dash { grid-template-columns:repeat(2,1fr); } }
.stat {
  background:color-mix(in srgb, #FFFFFF 6%, transparent);
  border:1px solid color-mix(in srgb, var(--n300) 17%, transparent);
  border-radius:22px; padding:22px 24px;
  transition:background .3s ease, transform .3s ease;
}
.stat:hover { background:color-mix(in srgb, #FFFFFF 10%, transparent); transform:translateY(-3px); }
.stat-label { font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:color-mix(in srgb, var(--n300) 72%, transparent); margin:0 0 10px; }
.stat-num { font-size:clamp(30px,3.6vw,40px); font-weight:800; letter-spacing:-.03em; margin:0; color:#FFF9F3; font-variant-numeric:tabular-nums; line-height:1; }
.stat-num.accent { color:var(--n400); }
.stat-sub { font-size:13px; margin:9px 0 0; color:color-mix(in srgb, var(--n300) 62%, transparent); }
.stat-sub.up { color:#8FCBA4; font-weight:700; }

/* ═══ 9 · PACKSHOT pesée ══════════════════════════════════ */
.packshot { background:#FCF6F3; }   /* ton moyen des bords du packshot */
.packshot-grid { display:grid; gap:clamp(34px,5vw,72px); align-items:center; }
@media (min-width:900px){ .packshot-grid { grid-template-columns:1fr .9fr; } }
.packshot-media { margin:0; }
/* Les bords de la photo se dissolvent dans la section : le fond du
   packshot n'est pas uni (#FAF4F0 → #FEF8F5), aucune couleur unie ne
   pourrait masquer la jointure. */
.packshot-media img {
  display:block; width:100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite:intersect;
}
.packshot-copy p { color:var(--muted); }

/* ═══ 10 · DÉCOUVERTE ═════════════════════════════════════ */
.decouverte { padding-block:var(--section-y); }
.decouverte-in { display:grid; gap:clamp(36px,5vw,72px); align-items:center; }
@media (min-width:900px){ .decouverte-in { grid-template-columns:1fr 1fr; } }
.decouverte-title { font-size:clamp(30px,5vw,52px); }
.decouverte-title em { font-style:normal; color:var(--n500); }
.points { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; }
@media (min-width:520px){ .points { grid-template-columns:repeat(2,1fr); } }
.points li { font-weight:700; color:var(--n700); padding-left:28px; position:relative; }
.points li::before { content:"✓"; position:absolute; left:0; color:var(--success); font-weight:800; }
.decouverte-media { margin:0; border-radius:28px; overflow:hidden; background:var(--packshot); }
.decouverte-media img { display:block; width:100%; }

/* ═══ 11 · OFFRES ═════════════════════════════════════════ */
.offres { background:var(--n50); }
.offers { display:grid; gap:20px; align-items:start; }
@media (min-width:900px){ .offers { grid-template-columns:repeat(3,1fr); } }
.offer {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:26px; padding:30px 28px;
  box-shadow:var(--shadow); position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.offer:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.offer > p { color:var(--muted); }
.offer .btn { margin-top:auto; width:100%; }
.offer-price { font-size:21px; font-weight:800; color:var(--ink) !important; margin:2px 0 14px; }
.offer.featured { border:2px solid var(--n500); }
.offer-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--n500); color:#FFF9F3; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:5px 15px;
  border-radius:999px; white-space:nowrap; margin:0;
}

/* ═══ 12 · FAQ ════════════════════════════════════════════ */
.faq {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  margin-top:12px; overflow:hidden; transition:box-shadow .3s ease;
}
.faq[open] { box-shadow:var(--shadow); }
.faq summary {
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px;
  font-size:16.5px; font-weight:700; position:relative; min-height:44px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:""; position:absolute; right:24px; top:50%; width:13px; height:13px;
  border-right:2.5px solid var(--n500); border-bottom:2.5px solid var(--n500);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s ease;
}
.faq[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.faq p { margin:0; padding:0 24px 22px; color:var(--muted); }

/* ═══ 13 · FINAL ══════════════════════════════════════════ */
.final { padding-block:clamp(80px,12vw,140px); text-align:center; background:var(--n50); }
.final-in { display:grid; justify-items:center; }
.final-bol { width:clamp(78px,10vw,110px); height:auto; margin-bottom:20px; }
.final-title { font-size:clamp(30px,5.4vw,56px); font-weight:900; letter-spacing:-.032em; line-height:1.08; margin:0 0 16px; }
.final .lede { margin-inline:auto; }

/* ═══ Footer ══════════════════════════════════════════════ */
.footer { border-top:1px solid var(--line); padding-block:44px 40px; text-align:center; }
.footer-in { display:grid; gap:9px; justify-items:center; }
.footer p { margin:0; color:var(--muted); font-size:14.5px; }
.footer nav { font-size:14.5px; color:var(--muted); }
.footer nav a { text-decoration:none; }
.footer nav a:hover { color:var(--ink); }
.footer .micro-note { margin-top:6px; }

/* ═══════════════════════════════════════════════════════════
   MOTION — animations pilotées par le défilement, en CSS pur.
   Tout est sous @supports + prefers-reduced-motion : sans
   support, le contenu reste visible et lisible.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* apparition progressive générique */
    .section-head, .trio-item, .probleme-copy, .probleme-figure,
    .apprend-copy, .ipad, .stat, .offer, .faq, .final-in > *,
    .band-in > *, .packshot-media, .packshot-copy,
    .decouverte-copy, .decouverte-media, .benefice, .seq-step {
      animation:apparait linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
    @keyframes apparait {
      from { opacity:0; transform:translateY(22px); }
      to   { opacity:1; transform:none; }
    }

    /* léger parallaxe sur les photos immersives */
    .immersive-bg, .hero-media img {
      animation:parallaxe linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes parallaxe {
      from { transform:scale(1.08) translateY(-2.2%); }
      to   { transform:scale(1.08) translateY(2.2%); }
    }

    /* inclinaison douce de l'iPad */
    .ipad-tilt {
      animation:apparait linear both, redresse linear both;
      animation-timeline:view(), view();
      animation-range:entry 4% cover 20%, entry 0% cover 42%;
    }
    @keyframes redresse {
      from { transform:perspective(1400px) rotateY(-11deg) rotateX(5deg) translateY(14px); }
      to   { transform:perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(0); }
    }


  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ═══ 5bis · COMPOSEZ UNE FORMULE — le bol EN COUPE ════════
   Géométrie relevée au pixel dans l'application (rules/bol-coupe.ts) :
   repère 1260×692, cavité du bord y=114 au fond y=558, axe x=630.
   Le produit épouse le contour de la cavité (masque SVG), chaque produit
   garde SA strate séparée d'un filet clair, et le niveau se bloque à 82 %
   de la hauteur — le bol ne paraît jamais déborder. */
.coupe-sec { background:var(--n50); }
.coupe-grid { display:grid; gap:clamp(28px,4vw,56px); align-items:center; }
@media (min-width:900px){ .coupe-grid { grid-template-columns:1.05fr .95fr; } }

.coupe { position:relative; margin:0; }
.coupe-photo { display:block; width:100%; height:auto; }
.coupe-svg { position:absolute; inset:0; width:100%; height:100%; }
.coupe-lecture {
  position:absolute; left:0; right:0; top:48.5%;   /* centre de la cavité */
  transform:translateY(-50%); display:grid; gap:2px; text-align:center;
  pointer-events:none;
}
.coupe-total {
  font-size:clamp(26px,4.6vw,40px); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--ink); transition:color .4s ease, text-shadow .4s ease;
}
.coupe-total small { font-size:.5em; font-weight:700; opacity:.7; }
.coupe-nom {
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .4s ease;
}
/* le produit est monté derrière le texte : encre claire (règle de l'app) */
.coupe.sur-produit .coupe-total,
.coupe.sur-produit .coupe-nom {
  color:#FFF9F1; text-shadow:0 2px 10px rgba(80,44,18,.55);
}

.coupe-titre {
  margin:0 0 14px; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.cartes { display:grid; gap:10px; }
@media (min-width:520px){ .cartes { grid-template-columns:repeat(2,1fr); } }
/* Carte produit : pastille-jauge + nom + rôle + dose (maquette v4). */
.carte {
  display:flex; align-items:center; gap:12px; min-height:76px;
  padding:12px 14px; border-radius:18px; cursor:pointer; text-align:left;
  background:var(--surface); border:1.5px solid var(--line);
  font-family:var(--display);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.carte:hover { border-color:color-mix(in srgb, var(--n500) 50%, transparent); }
.carte:active { transform:scale(.985); }
.carte.est-dans-bol { border-color:var(--n500); box-shadow:var(--shadow); }
.carte-pastille { width:52px; height:52px; flex:none; transform:rotate(-90deg); }
.carte-pastille circle { fill:none; stroke-width:5; }
.carte-piste { stroke:var(--rail); }
.carte-jauge { stroke-linecap:round; transition:stroke-dashoffset .45s cubic-bezier(.22,.7,.28,1); }
.carte-txt { display:grid; gap:1px; min-width:0; }
.carte-nom { font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.carte-role { font-size:11.5px; font-weight:600; color:var(--muted); }
.carte-dose { font-size:13px; font-weight:800; color:var(--n600); font-variant-numeric:tabular-nums; }
.carte.est-dans-bol .carte-dose { color:var(--success); }
.coupe-aide { font-size:13px; color:var(--muted); margin:14px 0 12px; }

/* ═══ 5ter · LE MINUTEUR — cadran + couleurs en pause ══════
   Cadran repris de DurationDial : 1 à 120 min, zéro en haut, sens
   horaire, graduation toutes les 5 min et marquée toutes les 15.
   Cartes reprises de PauseBoard : coiffeur, cliente, prestation, temps
   restant, jauge — et clignotement rouge une fois le temps écoulé. */
.pause-sec { background:var(--canvas); }
.pause-grid { display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
@media (min-width:900px){ .pause-grid { grid-template-columns:auto 1fr; } }

.cadran-col { display:grid; justify-items:center; gap:16px; }
.cadran-boite { position:relative; width:min(72vw,278px); }
.cadran { display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
.cadran:active { cursor:grabbing; }
.cadran:focus-visible { outline:3px solid var(--n500); outline-offset:6px; border-radius:50%; }
.cadran-piste { fill:none; stroke:var(--rail); stroke-width:10; }
.cadran-arc { fill:none; stroke:var(--n600); stroke-width:10; stroke-linecap:round; }
.cadran-arc-plein { fill:none; stroke:var(--n600); stroke-width:10; display:none; }
.cadran-bouton { fill:var(--surface); stroke:var(--n600); stroke-width:4; }
.cadran-grad { stroke:var(--line); stroke-width:1.5; }
.cadran-grad.majeur { stroke:var(--muted); stroke-width:2; }
.cadran-val {
  position:absolute; inset:0; margin:0; display:grid; place-content:center;
  text-align:center; pointer-events:none; line-height:1;
}
.cadran-val span { font-size:clamp(38px,8vw,52px); font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.cadran-val small { display:block; margin-top:6px; font-size:15px; font-weight:700; color:var(--muted); }
.cadran-aide { font-size:13px; color:var(--muted); margin:0; text-align:center; }

.board-titre {
  margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
/* align-items:start — chaque carte prend SA hauteur, sans être étirée sur
   celle de la carte échue, plus haute à cause de ses boutons de relance. */
.board-cartes { display:grid; gap:12px; align-items:start; }
@media (min-width:1100px){ .board-cartes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pause-carte {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:13px 15px; display:grid; gap:2px; font-family:var(--display);
  /* le contenu se pose en haut : sans quoi la grille l'étire sur toute la
     hauteur de la rangée, imposée par la carte échue qui est plus haute */
  align-content:start;
  animation:carteEntre .34s cubic-bezier(.22,.7,.28,1) both;
}
/* Les marges par défaut des <p> ne fusionnent PAS entre elles dans une
   grille : sans cette remise à zéro, chaque ligne s'écartait de ~38 px. */
.pause-carte p { margin:0; }
@keyframes carteEntre { from { opacity:0; transform:translateY(10px) scale(.98); } }
.pc-tete { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pc-staff { font-size:13px; font-weight:700; color:var(--n600); }
.pc-fermer {
  border:0; background:none; padding:2px 4px; margin:-2px -4px; cursor:pointer;
  font-size:16px; line-height:1; color:var(--muted); border-radius:8px;
}
.pc-fermer:hover { color:var(--ink); background:var(--rail); }
.pc-client { font-size:16.5px; font-weight:700; color:var(--ink); }
.pc-presta { font-size:12.5px; color:var(--muted); }
.pc-temps {
  margin-top:6px; font-size:21px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.pc-temps.bientot { color:var(--warn); }
.pc-rail { height:5px; border-radius:99px; background:var(--rail); overflow:hidden; margin-top:8px; }
.pc-jauge { height:100%; border-radius:99px; background:var(--n500); transition:width 1s linear; }

/* Temps écoulé : la carte réclame qu'on s'occupe d'elle. */
.pause-carte.finie { border:2px solid var(--danger); text-align:center; justify-items:center; }
/* L'app clignote toutes les 0,9 s : sur un iPad posé au labo, à trois
   mètres, c'est un signal. Sur un écran qu'on a sous le nez, ça passe pour
   un défaut d'affichage. Même intention — la carte respire — mais lentement
   et sur un écart de teinte étroit. */
@media (prefers-reduced-motion: no-preference) {
  .pause-carte.finie { animation:carteEntre .34s cubic-bezier(.22,.7,.28,1) both, bat 2.6s ease-in-out infinite; }
}
@keyframes bat { 0%,100% { background:#C65A4512; } 50% { background:#C65A4522; } }
.pc-fini-titre { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--danger); }
.pc-depasse { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pc-relance { font-size:12px; color:var(--muted); margin-top:8px; }
.pc-puces { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:7px; }
.pc-puce {
  border:1px solid var(--n300); background:var(--surface); color:var(--n700);
  font-family:var(--display); font-size:12.5px; font-weight:700;
  padding:6px 11px; border-radius:99px; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.pc-puce:hover { background:var(--n100); border-color:var(--n500); }
.pc-ok { border-color:var(--line); color:var(--muted); }
.board-vide { font-size:14px; color:var(--muted); padding:18px 0; }

/* Confirmation de lancement : la pose est consignée dans la fiche client,
   c'est ce qui distingue KolorBar d'un minuteur de cuisine. */
.pose-ok {
  display:flex; align-items:center; gap:7px; justify-content:center;
  font-size:13px; font-weight:600; color:var(--success);
  min-height:20px; opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease, transform .3s ease;
}
.pose-ok.vu { opacity:1; transform:none; }
.pose-ok svg { flex:none; }

/* ═══ 5bis · L'ATELIER — la scène continue ═════════════════
   Un seul bol traverse les trois gestes. La bascule coupe → dessus est un
   VRAI pivot 3D : les deux photographies partagent le même axe et la même
   perspective, et se croisent à 90°, là où chacune est vue par la tranche
   donc invisible. Aucune ne « disparaît » : elles se relaient.
   Le pas de la piste (400 vh) est ce qui donne le temps au geste. */
.scene { padding-block:var(--section-y) 0; }
.scene-piste { height:560vh; position:relative; }
.scene-sticky {
  position:sticky; top:0; height:100vh;
  display:grid; align-content:center; gap:clamp(12px,2vh,26px);
  padding-inline:max(var(--gutter),env(safe-area-inset-left));
  max-width:1200px; margin-inline:auto;
}
@media (min-width:960px){
  .scene-sticky { grid-template-columns:1.06fr .94fr; align-items:center; gap:clamp(28px,4vw,64px); }
}

/* Le plan : la balance au fond, le bol par-dessus, même centre. */
.scene-plan {
  position:relative; width:min(74vw, 46vh, 460px); aspect-ratio:1;
  margin-inline:auto; perspective:1200px;
  /* décor pur : la balance déborde du carré (127 %) et, en colonne sur
     mobile, recouvrait les cartes de l'acte 1 — les clics passaient dans
     l'image au lieu du bouton. Rien ici n'est cliquable. */
  pointer-events:none;
}
/* La balance monte ENTRE les deux vues : au-dessus de la coupe qui s'en va,
   sous le bol vu du dessus qui se pose. Elle masque donc entièrement le
   raccord — on ne voit jamais les deux bols se superposer. */
.scene-balance {
  position:absolute; left:50%; top:52%; width:127%; height:auto; z-index:2;
  transform:translate(-50%,-50%) translateY(var(--bal-y, 120%)) scale(var(--bal-s, .96));
  opacity:var(--bal-o, 0);
  filter:drop-shadow(0 26px 34px rgba(59,44,34,.19));
  will-change:transform, opacity;
}
.scene-bol { position:absolute; inset:0; }
/* Pas de pivot : on ne fait pas semblant de tourner un objet plat. On CHANGE
   DE POINT DE VUE — la coupe descend et s'efface, la vue du dessus arrive
   d'en haut et se pose. Les deux se croisent, il n'y a jamais de vide. */
.face {
  position:absolute; inset:0; margin:0;
  transform:translateY(var(--f-y, 0)) scale(var(--f-s, 1));
  opacity:var(--f-o, 1); will-change:transform, opacity;
}
.face-coupe  { z-index:1; --f-y:var(--c-y, 0); --f-s:var(--c-s, 1); --f-o:var(--c-o, 1);
               filter:blur(var(--c-flou, 0px)); }
.face-zenith { z-index:3; --f-y:var(--z-y, 0); --f-s:var(--z-s, 1); --f-o:var(--z-o, 0); }
/* Un CADRE aux dimensions exactes de la photo : toutes les surcouches
   (jauge, mélange, lecture) ont été mesurées EN POURCENTAGE DE L'IMAGE.
   Sans ce cadre elles se caleraient sur le carré de la scène, et se
   décaleraient d'autant que la photo n'est ni carrée ni à la même échelle.
   Les deux largeurs sont choisies pour que le DIAMÈTRE du bol soit
   identique d'une face à l'autre — sinon il change de taille en pivotant :
   coupe, le bol fait 85,4 % de la largeur de sa photo · dessus, 74,8 %. */
.cadre { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cadre img { display:block; width:100%; height:auto; }
.cadre-coupe { width:117.1%; }
.cadre-zenith { width:133.7%; }

.coupe-svg { position:absolute; inset:0; width:100%; height:100%; }
.coupe-lecture {
  position:absolute; left:0; right:0; top:48.5%; transform:translateY(-50%);
  display:grid; gap:2px; text-align:center; pointer-events:none;
}

/* Face du dessus : le mélange, le halo-jauge et le poids (géométrie
   mesurée dans l'app — centre 49,77 % / 47,76 %, céramique 32,22 %). */
.zen-mix {
  position:absolute; left:21.77%; top:19.76%; width:56%; aspect-ratio:1;
  border-radius:50%;
  /* la teinte est CELLE de la formule composée : les produits empilés en
     couches à l'acte 1 reparaissent ici mélangés en une seule matière. */
  background:radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--mix-c, #B0794C) 74%, #FFF3E4),
    var(--mix-c, #B0794C) 60%,
    color-mix(in srgb, var(--mix-c, #B0794C) 76%, #2A1B0E));
  transform:scale(var(--mix-s, .12)); opacity:var(--mix-o, 0);
  will-change:transform;
}
.zen-halo { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.zen-halo circle { fill:none; stroke-width:9; stroke-linecap:round; }
.zen-piste { stroke:var(--line); stroke-opacity:.85; }
.zen-jauge {
  stroke:var(--n500); stroke-dasharray:1671;
  stroke-dashoffset:var(--halo, 1671);
  transform:rotate(-90deg); transform-origin:49.77% 47.76%;
}
.zen-poids {
  position:absolute; left:0; right:0; top:47.76%; transform:translateY(-50%);
  margin:0; text-align:center; font-size:clamp(20px,4.6vw,32px); font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:#FFF9F1; text-shadow:0 2px 10px rgba(80,44,18,.5);
  opacity:var(--mix-o, 0);
}
.zen-poids small { font-size:.5em; font-weight:700; opacity:.72; }

/* Les deux actes occupent la MÊME case : l'un s'efface, l'autre paraît. */
.scene-panneau { display:grid; }
.acte {
  grid-area:1/1; transition:opacity .45s ease, transform .45s cubic-bezier(.22,.7,.28,1);
}
.acte[aria-hidden="true"] { opacity:0; transform:translateY(14px); pointer-events:none; }
.acte2-txt { color:var(--muted); font-size:15px; margin:0 0 16px; }
.acte2-liste { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.acte2-liste li {
  display:flex; align-items:center; gap:11px; font-size:14.5px;
  padding:10px 13px; border-radius:14px; background:var(--surface); border:1px solid var(--line);
}
.acte2-pastille { width:13px; height:13px; border-radius:50%; flex:none; }
.acte2-liste b { margin-left:auto; font-variant-numeric:tabular-nums; font-size:14px; }

@media (max-width:959px){
  .scene-piste { height:480vh; }
  /* le bandeau est collant lui aussi : sans cette réserve, il rognait le
     haut de la balance, que « align-content:center » centrait sur toute
     la hauteur d'écran, bandeau compris. */
  .scene-sticky { padding-block-start:62px; }
  .scene-plan { width:min(70vw, 34vh, 300px); }
  .scene-panneau { max-width:520px; margin-inline:auto; width:100%; }
}

/* ═══ 5ter · LA REPESÉE — vue de face ══════════════════════
   Le bol revient sur la balance avec son reste. Vue de face : on voit
   la spatule dépasser du bol, et l'écart entre préparé et utilisé. */
.repesee { background:var(--n50); }
/* (ancienne grille de repesée, la scène l'a absorbée) */ .rep-grid { display:grid; gap:clamp(30px,5vw,64px); align-items:center; }
@media (min-width:900px){ /* (ancienne grille de repesée, la scène l'a absorbée) */ .rep-grid { grid-template-columns:1fr .92fr; } }

.rep-scene {
  position:relative; aspect-ratio:1/.82; max-width:520px; margin-inline:auto; width:100%;
  display:grid; place-items:end center;
}
/* La balance vue de face : une dalle blanche. De face, une Acaia n'est rien
   d'autre — inutile de tordre la photo prise aux trois quarts. */
.rep-balance {
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  width:72%; height:12.5%; border-radius:14px;
  background:linear-gradient(#FFFFFF, #F3EDE6 62%, #E4DACE);
  box-shadow:0 16px 26px -14px rgba(59,44,34,.35), inset 0 1px 0 #fff;
}
.rep-bal-ecran {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26%; height:34%; border-radius:5px;
  background:color-mix(in srgb, var(--n700) 16%, transparent);
}
/* le bol descend et se pose — délicatement : rebond très léger, pas d'à-coup */
.rep-bol, .rep-spatule {
  position:absolute; bottom:16%; display:block;
  transform:translateY(-38px); opacity:0;
  transition:transform 1s cubic-bezier(.18,.86,.32,1.06), opacity .6s ease;
}
.rep-bol { left:50%; width:62%; margin-left:-31%; z-index:2; }
.rep-spatule {
  left:50%; width:15%; margin-left:2%; bottom:26%; z-index:1;
  transform-origin:50% 90%; transform:translateY(-38px) rotate(20deg);
}
.repesee.vu .rep-bol { transform:translateY(0); opacity:1; }
.repesee.vu .rep-spatule { transform:translateY(0) rotate(20deg); opacity:1; transition-delay:.06s; }

.rep-chiffres { margin:0 0 24px; display:grid; gap:0; }
.rep-ligne {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 2px; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.28,1);
}
.repesee.vu .rep-ligne { opacity:1; transform:none; }
.repesee.vu .rep-l1 { transition-delay:.55s; }
.repesee.vu .rep-l2 { transition-delay:.75s; }
.repesee.vu .rep-ecart { transition-delay:.95s; }
.rep-ligne dt { font-size:15px; color:var(--muted); font-weight:600; }
.rep-ligne dd {
  margin:0; font-size:clamp(24px,3.4vw,32px); font-weight:800; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.rep-ecart { border-bottom:0; }
.rep-ecart dt { color:var(--n700); font-weight:700; }
.rep-ecart dd { color:var(--n600); }
.rep-conclusion {
  margin:0 0 14px; font-size:clamp(17px,2.1vw,20px); font-weight:700; line-height:1.45;
  color:var(--ink); text-wrap:balance;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease 1.25s, transform .6s cubic-bezier(.22,.7,.28,1) 1.25s;
}
.repesee.vu .rep-conclusion { opacity:1; transform:none; }
.rep-note {
  margin:0; font-size:14px; color:var(--muted);
  opacity:0; transition:opacity .6s ease 1.6s;
}
.repesee.vu .rep-note { opacity:1; }
@media (prefers-reduced-motion: reduce){
  .rep-bol, .rep-spatule, .rep-ligne, .rep-conclusion, .rep-note { transition-duration:.01ms; }
}

/* ═══ La repesée, TROISIÈME ACTE de la même scène ══════════
   Elle se joue par-dessus la pesée, dans le même bloc collant : le bol au
   pinceau descend pendant que la vue du dessus s'efface. Une seule scène
   continue, du premier produit versé au bilan de ce qui a servi. */
.scene-balance-face {
  position:absolute; left:50%; bottom:12%; width:96%; height:auto; z-index:4;
  transform:translate(-50%, var(--bf-y, 130%));
  opacity:var(--bf-o, 0);
  filter:drop-shadow(0 14px 20px rgba(59,44,34,.20));
  will-change:transform, opacity;
}
.face-restant {
  z-index:5; --f-o:var(--r-o, 0);
  --f-y:var(--r-y, -34%); --f-s:var(--r-s, 1.04);
}
/* +7 % : le pied du bol touche le plateau au lieu de flotter */
.cadre-restant { width:117.1%; top:51%; }

.acte-3 .rep-chiffres { margin:0 0 20px; display:grid; }
.acte-3 .rep-ligne {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 2px; border-bottom:1px solid var(--line); opacity:1; transform:none;
}
.acte-3 .rep-ligne dt { font-size:14.5px; color:var(--muted); font-weight:600; }
.acte-3 .rep-ligne dd {
  margin:0; font-size:clamp(22px,3vw,29px); font-weight:800; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.acte-3 .rep-ecart { border-bottom:0; }
.acte-3 .rep-ecart dt { color:var(--n700); font-weight:700; }
.acte-3 .rep-ecart dd { color:var(--n600); }
.acte-3 .rep-conclusion {
  margin:0 0 12px; font-size:clamp(16px,2vw,19px); font-weight:700; line-height:1.45;
  color:var(--ink); text-wrap:balance; opacity:1; transform:none;
}
.acte-3 .rep-note { margin:0; font-size:13.5px; color:var(--muted); opacity:1; }

/* Les DEUX écrans de « formules qui apprennent » : à gauche ce qui était
   prévu, à droite ce qui a servi. C'est la confrontation des deux qui
   raconte l'apprentissage — un seul écran ne montrait que la composition. */
.ipad-duo { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.6vw,20px); align-items:start; }
.ipad-duo img {
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:var(--shadow-lift); background:var(--packshot);
}
.ipad-duo .duo-a { transform:translateY(clamp(8px,1.6vw,22px)) rotate(-1.4deg); }
.ipad-duo .duo-b { transform:rotate(1.4deg); }
.ipad-duo figcaption {
  grid-column:1/-1; margin-top:clamp(16px,2.4vw,26px); text-align:center;
  font-size:13.5px; color:var(--muted);
}

/* La troisième carte du trio EST le tableau de bord : barre d'adresse,
   rail de navigation, indicateurs et graphique. Les chiffres sont les VRAIS
   (relevé Koehler, 30 jours) — les mêmes que la section pilotage, pour que
   le site ne se contredise pas d'une carte à l'autre. */
.trio-dash {
  background:var(--espresso); color:var(--n100);
  display:grid; grid-template-rows:auto 1fr; align-content:start; padding:0;
  font-family:var(--display);
}
.td-barre {
  display:flex; align-items:center; gap:7px; padding:9px 12px;
  font-size:11px; font-weight:600; border-bottom:1px solid rgba(255,247,238,.12);
  color:color-mix(in srgb, var(--n200) 60%, transparent);
}
.td-point { width:7px; height:7px; border-radius:50%; background:var(--success); flex:none; }
.td-pilule {
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  padding:3px 8px; border-radius:99px; background:rgba(255,247,238,.10);
}
.td-corps { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:11px 12px 12px; }
.td-rail { display:grid; gap:7px; align-content:start; padding-top:3px; }
.td-rail i { display:block; width:4px; height:16px; border-radius:99px; background:rgba(255,247,238,.16); }
.td-rail i.on { background:var(--n400); height:22px; }
.td-vue { min-width:0; display:grid; gap:9px; align-content:start; }
.td-grille { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.td-case { background:rgba(255,247,238,.07); border-radius:10px; padding:9px 10px; display:grid; gap:1px; }
.td-case span { font-size:9.5px; color:color-mix(in srgb, var(--n200) 55%, transparent); }
.td-case b { font-size:16px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.td-case i { font-style:normal; font-size:9.5px; font-weight:700; }
.td-ok { color:var(--success); }
.td-alerte { color:var(--warn); }
.td-titre {
  margin:2px 0 0; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:color-mix(in srgb, var(--n200) 48%, transparent);
}
.td-barres { display:grid; gap:7px; }
.td-ligne { display:grid; grid-template-columns:1fr 34px; align-items:center; gap:6px 8px; }
.td-ligne span { grid-column:1; font-size:10px; color:color-mix(in srgb, var(--n200) 62%, transparent); }
.td-ligne b { grid-column:2; grid-row:1/3; font-size:11px; font-weight:800;
  text-align:right; font-variant-numeric:tabular-nums; color:var(--n200); }
.td-ligne em {
  grid-column:1; height:5px; border-radius:99px; background:rgba(255,247,238,.12);
  position:relative; display:block;
}
.td-ligne em::after {
  content:""; position:absolute; inset:0 auto 0 0; width:var(--p);
  border-radius:99px; background:linear-gradient(90deg, var(--n500), var(--n300));
}

/* ═══ RSE — moins jeter ═══════════════════════════════════
   Ton sobre et chiffré : une démarche RSE se documente, elle ne se
   proclame pas. La sauge (--success) sert d'accent, avec parcimonie. */
.rse { background:var(--n50); }
.rse-grid { display:grid; gap:clamp(28px,4vw,56px); align-items:start; }
@media (min-width:900px){ .rse-grid { grid-template-columns:.86fr 1.14fr; } }
.rse-chiffre {
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow);
}
.rse-num {
  margin:0 0 12px; font-size:clamp(38px,6vw,58px); font-weight:900;
  letter-spacing:-.04em; line-height:1; color:var(--success);
  font-variant-numeric:tabular-nums;
}
.rse-txt { margin:0 0 14px; font-size:15.5px; line-height:1.6; color:var(--ink); }
.rse-note { margin:0; font-size:13px; color:var(--muted); }
.rse-liste { list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2.4vw,26px); }
@media (min-width:640px){ .rse-liste { grid-template-columns:1fr 1fr; } }
.rse-liste h3 { margin:0 0 7px; font-size:17px; }
.rse-liste p { margin:0; font-size:14.5px; line-height:1.62; color:var(--muted); }
.rse-liste li { padding-left:16px; border-left:2px solid color-mix(in srgb, var(--success) 42%, transparent); }

/* ── Formulaire « Être rappelé » (groupes de salons) ──────────────────
   Champs à 16 px : sous cette taille, iOS zoome tout seul au focus et
   décadre la page. C'est la raison de ce nombre, pas l'esthétique. */
.form-rappel { display:grid; gap:16px; margin-top:26px; }
.form-duo { display:grid; gap:16px; }
@media (min-width:640px){ .form-duo { grid-template-columns:1fr 1fr; } }
.champ { display:grid; gap:7px; }
.champ label { font-size:14.5px; font-weight:700; color:var(--ink); }
.champ input, .champ textarea {
  font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; min-height:52px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height:108px; resize:vertical; line-height:1.6; }
.champ input::placeholder, .champ textarea::placeholder { color:var(--muted); }
.champ input:focus-visible, .champ textarea:focus-visible {
  outline:none; border-color:var(--n500);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--n500) 22%, transparent);
}
.form-rappel .btn { justify-self:start; margin-top:4px; }
.form-rappel .btn[disabled] { opacity:.55; pointer-events:none; }
.form-etat { margin:16px 0 0; font-size:15.5px; font-weight:600; color:var(--muted); }
.form-etat.ok { color:var(--success); }
.form-etat.ko { color:var(--danger); }

/* ── Socle commun : ce que les trois offres partagent ─────────────────
   Placé AVANT les cartes : le visiteur comprend d'abord que tout le
   métier est inclus partout, et ne lit ensuite les cartes que pour la
   taille de l'équipe. Sans ça, chaque carte répète douze lignes. */
.socle {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,30px); margin-bottom:clamp(20px,3vw,28px);
}
.socle h3 {
  margin:0; font-size:13px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--n500);
}
/* `.ticks.small` force une colonne unique en !important : il faut donc
   une spécificité supérieure, d'où le `.socle` en préfixe. */
.socle .ticks.small { margin:18px 0 0 !important; }
@media (min-width:640px){ .socle .ticks.small { grid-template-columns:repeat(2,1fr) !important; } }
@media (min-width:900px){ .socle .ticks.small { grid-template-columns:repeat(3,1fr) !important; } }

/* ── Bouton inactif : présent dans la maquette, sans action ───────────
   Sert d'emplacement au bouton App Store tant que l'app n'est pas
   publiée. Le curseur par défaut et l'opacité réduite disent qu'il n'y
   a rien à cliquer, sans le déguiser en bouton cassé. */
.btn-inactif {
  opacity:.5; cursor:default; box-shadow:none;
  transform:none !important;
}
.btn-inactif:hover { background:var(--n500); transform:none; box-shadow:none; }