/* ═══════════════════════════════════════════════════════════
   RAVICO — site vitrine
   Jetons repris de Ravico/DesignSystem/Theme.swift et
   Ravico/Features/Report/PDFReportTheme.swift.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* App — Theme.swift */
  --sand:#f4f1ea;
  --paper:#ffffff;
  --ink:#1a1a17;
  --teal:#0f6b63;
  --teal-dk:#0b544e;
  --teal-lt:#4fc9bd;
  --urgent:#c8321f;
  --claim:#b8720a;
  --info:#0a84ff;
  --sec:#77776e;
  --ter:#a8a397;
  --muted:#57574f;
  --line:#e2ded4;

  /* Document — PDFReportTheme.swift */
  --doc-ink:#14161c;
  --doc-muted:#6d7486;
  --doc-faint:#8a91a3;
  --doc-line:#e3e5ea;
  --doc-surface:#fafbfc;
  --doc-accent:#0e6e63;
  --doc-accent-bg:#e3f0ed;
  --doc-danger:#cf3b2f;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --shell:1280px;
  --gut:clamp(20px,5vw,64px);
  --r:18px;                       /* Theme.Radius.card */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ── Type ────────────────────────────────────────────────── */
.mono{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.eyebrow--dark{color:var(--teal-lt)}

.h2{
  font-size:clamp(2rem,4.1vw,3.4rem);
  line-height:1.04;letter-spacing:-.032em;font-weight:600;
  text-wrap:balance;
}
.sec-head{max-width:760px;margin-bottom:clamp(44px,6vw,80px)}

/* ── Boutons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:12px;
  font-size:15px;font-weight:550;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn--solid{background:var(--teal);color:#fff}
.btn--solid:hover{background:var(--teal-dk);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--sm{padding:10px 18px;font-size:14px;border-radius:10px}
.btn--lg{padding:17px 32px;font-size:16px}
.btn--full{width:100%;margin-top:auto}

/* ── Navigation ──────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-top:max(14px,env(safe-area-inset-top));padding-bottom:14px;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(244,241,234,.82);backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--line)}
.nav.is-dark{color:var(--sand)}
.nav.is-dark.is-stuck{background:rgba(26,26,23,.72);border-bottom-color:rgba(244,241,234,.14)}
.nav.is-dark .nav__links a{color:rgba(244,241,234,.66)}
.nav.is-dark .nav__links a:hover{color:#fff}
.nav.is-dark .btn--solid{background:var(--teal-lt);color:var(--ink)}
.nav.is-dark .btn--solid:hover{background:#6ad6cb}
.nav__inner{display:flex;align-items:center;gap:32px}
.nav__brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:600;font-size:17px;letter-spacing:-.02em;
}
.nav__brand img{border-radius:7px}
.nav__links{display:flex;gap:28px;margin-left:auto;font-size:15px}
.nav__links a{text-decoration:none;color:var(--muted);position:relative;padding-block:4px}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ═══ 1. HERO ═══════════════════════════════════════════════ */
.hero{padding-top:clamp(120px,16vh,190px);position:relative}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hero__title{
  font-size:clamp(2.5rem,5.9vw,5rem);
  line-height:.99;letter-spacing:-.042em;font-weight:600;
  margin-bottom:28px;text-wrap:balance;
}
.hero__sub{font-size:clamp(1rem,1.35vw,1.19rem);color:var(--muted);max-width:52ch;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:44px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.hero__meta li{display:flex;align-items:center;gap:9px}
.hero__meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal-lt);flex:none}

.hero__rule{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(48px,8vh,96px);padding-bottom:22px;
  color:var(--muted);
}
.hero__rule::after{content:"";flex:1;height:1px;background:var(--line)}
.scroll-hint{display:block;width:1px;height:26px;background:linear-gradient(var(--ter),transparent);animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Scène 3D + repli */
.stage{position:relative;aspect-ratio:3/4;width:100%;max-width:620px;margin-inline:auto}
/* L'appareil ne flotte pas dans le vide : un halo très sourd derrière,
   une ombre de contact sous lui. Rien de plus. */
.stage::before,.stage::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.stage::before{
  left:50%;top:50%;width:74%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(15,107,99,.13),rgba(15,107,99,0) 68%);
}
.stage::after{
  left:50%;bottom:9%;width:46%;height:54px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(26,26,23,.2),rgba(26,26,23,0) 70%);
  filter:blur(10px);
}
#phone-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.stage.is-3d #phone-canvas{display:block}
.stage.is-3d .stage__fallback{opacity:0;pointer-events:none}
.stage__fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .6s var(--ease);
}
.device{
  position:relative;width:min(72%,340px);aspect-ratio:402/874;
  background:var(--ink);border-radius:44px;padding:9px;
  box-shadow:0 2px 2px rgba(26,26,23,.05),0 28px 60px -24px rgba(26,26,23,.42),
             0 60px 120px -40px rgba(15,107,99,.22);
  will-change:transform;
}
.device__notch{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:31%;height:22px;background:#000;border-radius:12px;z-index:2;
}
.device__screen{width:100%;height:100%;object-fit:cover;border-radius:36px;background:var(--sand)}

/* Emplacement visible tant que la capture n'est pas déposée */
.shot--missing{
  background:
    repeating-linear-gradient(-45deg,#e8e4da 0 10px,#efece3 10px 20px);
  position:relative;
}
.shot--missing::after{
  content:attr(data-missing);
  position:absolute;inset:0;display:grid;place-items:center;padding:16px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.7;
}

/* ═══ 2. LE PROBLÈME ════════════════════════════════════════ */
.problem{
  background:var(--ink);color:var(--sand);
  margin-top:clamp(60px,10vh,140px);
  padding-block:clamp(90px,14vh,170px);
}
.problem__lines{display:grid;gap:clamp(34px,4.6vw,58px);max-width:1060px}
.problem__line{
  font-size:clamp(1.5rem,3.35vw,2.7rem);
  line-height:1.22;letter-spacing:-.026em;font-weight:400;
  color:#e9e5db;position:relative;padding-left:clamp(46px,6vw,88px);
  text-wrap:pretty;
}
.problem__num{
  position:absolute;left:0;top:.62em;color:var(--teal-lt);
  font-size:11px;letter-spacing:.1em;
}
.problem .word{display:inline-block;will-change:transform,opacity}

/* ═══ 3. SCROLLYTELLING ═════════════════════════════════════ */
.scrolly{background:var(--sand);position:relative}
.scrolly__pin{min-height:100vh;display:flex;align-items:center;padding-block:clamp(80px,12vh,120px)}
.scrolly__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:center;width:100%;
}
.steps{margin-top:clamp(32px,4vw,52px);display:grid;gap:2px}
.step{
  display:flex;gap:18px;padding:16px 18px;border-radius:14px;
  transition:background .5s var(--ease),opacity .5s var(--ease);
  opacity:.45;
}
.step.is-active{opacity:1;background:rgba(15,107,99,.055)}
.step__n{color:var(--muted);padding-top:5px;flex:none;transition:color .5s var(--ease)}
.step.is-active .step__n{color:var(--teal)}
.step h3{font-size:16px;font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.55;max-width:46ch}

/* La scène morph */
.morph{
  position:relative;margin-inline:auto;
  height:min(70vh,660px);aspect-ratio:210/297;width:auto;
  border-radius:6px;overflow:hidden;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(26,26,23,.05),0 34px 74px -32px rgba(26,26,23,.34);
}
.morph__layer{position:absolute;inset:0;margin:0}
.morph__photo{overflow:hidden}
.morph__photo img{width:100%;height:100%;object-fit:cover}
.morph__ink{position:absolute;inset:0;width:100%;height:100%}
.morph__ink .ink-shape{fill:none;stroke:var(--urgent);stroke-width:9;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.morph__ink .ink-arrow{fill:none;stroke:var(--urgent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400}
.morph__ink .ink-head{fill:var(--urgent);opacity:0}
.morph__ink .ink-label rect{fill:var(--urgent)}
.morph__ink .ink-label text{fill:#fff;font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:1.6px}
.morph__ink .ink-label{opacity:0}

.morph__doc{background:var(--paper);opacity:0}
.morph__caption{color:var(--muted);margin-top:16px;letter-spacing:.11em;text-align:center}

/* La page de rapport : la première page d'un vrai PDF généré par l'app. */
.doc{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}

/* ═══ 4. FONCTIONNALITÉS ════════════════════════════════════ */
.features{padding-block:clamp(90px,13vh,160px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.3vw,30px);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card:hover{
  transform:translateY(-4px);border-color:#d3cec2;
  box-shadow:0 1px 2px rgba(26,26,23,.04),0 22px 44px -22px rgba(26,26,23,.26);
}
.card--wide{grid-column:span 2}
.card--full{grid-column:1/-1}
.card__k{color:var(--muted);margin-bottom:16px;letter-spacing:.11em}
.card h3{font-size:1.22rem;font-weight:600;letter-spacing:-.022em;line-height:1.22;margin-bottom:9px}
.card p{font-size:15px;color:var(--muted);line-height:1.58}
.card--accent{background:var(--teal);border-color:var(--teal);color:#fff}
.card--accent .card__k{color:rgba(255,255,255,.55)}
.card--accent p{color:rgba(255,255,255,.82)}
.card--accent:hover{border-color:var(--teal-dk)}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tags li{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--teal);
  border:1px solid rgba(15,107,99,.28);border-radius:100px;padding:6px 12px;
}
.codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.codes span{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  background:var(--sand);color:var(--muted);font-size:10.5px;letter-spacing:.04em;
}

/* ═══ 6. TARIFS ═════════════════════════════════════════════ */
.pricing{padding-block:clamp(90px,13vh,160px)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;max-width:820px;margin-inline:auto}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(26,26,23,.24)}
.plan--featured{background:var(--ink);border-color:var(--ink);color:var(--sand)}
.plan--featured .plan__note{color:rgba(244,241,234,.55)}
.plan--featured .plan__list li{color:rgba(244,241,234,.74);border-color:rgba(244,241,234,.14)}
.plan--featured .plan__list li::before{background:var(--teal-lt)}
.plan--featured .btn--solid{background:var(--teal-lt);color:var(--ink)}
.plan--featured .btn--solid:hover{background:#6ad6cb}
.plan__k{color:var(--muted);display:flex;align-items:center;gap:10px;letter-spacing:.11em}
.plan--featured .plan__k{color:rgba(244,241,234,.5)}
.plan__badge{
  font-style:normal;background:rgba(15,107,99,.1);color:var(--teal);
  border-radius:100px;padding:4px 9px;letter-spacing:.05em;
}
.plan--featured .plan__badge{background:rgba(79,201,189,.16);color:var(--teal-lt)}
.plan__price{display:flex;align-items:baseline;margin-top:20px}
.plan__price b{font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.plan__price span{font-size:15px;color:var(--muted)}
.plan--featured .plan__price span{color:rgba(244,241,234,.55)}
.plan__note{font-size:14px;color:var(--muted);margin-top:8px}
.plan__list{margin:26px 0 30px;display:grid;gap:0}
.plan__list li{
  font-size:14.5px;color:var(--muted);padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid var(--line);
}
.plan__list li:last-child{border-bottom:0}
.plan__list li::before{
  content:"";position:absolute;left:0;top:1.28em;width:6px;height:6px;
  border-radius:50%;background:var(--teal);
}
.plans__included{
  max-width:820px;margin:14px auto 0;border:1px solid var(--line);border-radius:var(--r);
  padding:20px clamp(22px,2.6vw,36px);display:grid;gap:12px;
}
.plans__included p{font-size:12px;color:var(--muted);letter-spacing:.11em}
.plans__included ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px}
.plans__included li{font-size:14.5px;padding-left:16px;position:relative}
.plans__included li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--teal);
}
.plans__foot{margin-top:22px;font-size:14px;color:var(--muted);text-align:center}

/* ═══ 7. FAQ ════════════════════════════════════════════════ */
.faq{padding-bottom:clamp(90px,13vh,160px)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px)}
.faq__head{position:sticky;top:110px;align-self:start}
.faq__contact{margin-top:20px;font-size:15px;color:var(--muted)}
.faq__contact a{color:var(--teal);text-underline-offset:3px}
.faq__list{display:grid;gap:0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:flex;align-items:flex-start;gap:20px;
  font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:550;letter-spacing:-.02em;line-height:1.35;
  transition:color .3s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--teal)}
.qa summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.35em;
  width:12px;height:12px;
  background:
    linear-gradient(currentColor,currentColor) center/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 12px no-repeat;
  transition:transform .4s var(--ease);
}
.qa[open] summary::after{transform:rotate(90deg);background-size:12px 1px,1px 0}
.qa p{padding:0 44px 24px 0;color:var(--muted);font-size:15.5px;max-width:68ch}

/* ═══ CTA FINAL ═════════════════════════════════════════════ */
.cta{background:var(--teal);color:#fff;padding-block:clamp(90px,14vh,160px)}
.cta__inner{text-align:center;display:grid;justify-items:center}
.cta__title{
  font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:600;text-wrap:balance;
}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cta .btn--solid{background:#fff;color:var(--teal)}
.cta .btn--solid:hover{background:var(--sand)}
.cta .btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.cta .btn--ghost:hover{border-color:#fff}
.cta__note{margin-top:28px;color:rgba(255,255,255,.88);letter-spacing:.11em}

/* ═══ PIED DE PAGE ══════════════════════════════════════════ */
.footer{background:var(--ink);color:var(--sand);padding-top:clamp(60px,8vh,92px)}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding-bottom:56px;
}
.footer__brand p{margin-top:18px;color:rgba(244,241,234,.55);font-size:14.5px;max-width:34ch;line-height:1.6}
.footer__col{display:grid;gap:11px;align-content:start;font-size:14.5px}
.footer__col h2{color:var(--ter);margin-bottom:5px;font-size:11px;font-weight:600;letter-spacing:.11em}
.footer__col a{color:rgba(244,241,234,.72);text-decoration:none;transition:color .3s var(--ease);width:fit-content}
.footer__col a:hover{color:#fff}
.footer__addr{color:rgba(244,241,234,.6);line-height:1.65}
.footer__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(244,241,234,.13);
  padding-block:24px;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  color:var(--ter);
}

/* ═══ RÉVÉLATIONS (état de départ, neutralisé si pas de JS) ══ */
.js [data-reveal],
.js [data-card]{opacity:0}
.js [data-split-lines]{opacity:0}
.js .line{display:block;overflow:hidden}
.js .line__inner{display:block}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans,.plans__included{max-width:560px}
  .plans__included ul{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;margin-inline:auto}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav__links{display:none}
  .hero{padding-top:clamp(104px,14vh,150px)}
  .hero__grid{grid-template-columns:1fr;gap:clamp(40px,7vw,60px)}
  .hero__stage{order:2}
  .stage{aspect-ratio:4/5;max-width:460px}
  .device{width:min(64%,280px)}
  .scrolly__pin{min-height:auto;display:block;padding-block:clamp(70px,10vh,110px)}
  .scrolly__grid{grid-template-columns:1fr;gap:34px}
  .scrolly__visual{order:-1}
  .step{opacity:1;background:transparent!important;padding-inline:0}
  .step__n{color:var(--teal)}
  .faq__grid{grid-template-columns:1fr}
  .faq__head{position:static}
}
@media (max-width:680px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .footer__grid{grid-template-columns:1fr}
  .hero__actions .btn,.cta__actions .btn{flex:1 1 220px}
  .problem__line{padding-left:0}
  .problem__num{position:static;display:block;margin-bottom:10px}
  .morph{aspect-ratio:3/4}
}

/* ═══ MOUVEMENT RÉDUIT ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js [data-reveal],.js [data-card],.js [data-split-lines]{opacity:1!important;transform:none!important}
  .scroll-hint{display:none}
  .step{opacity:1}
  /* L'annotation est du contenu, pas une animation : elle se montre
     d'emblée, tracée, plutôt que de rester invisible faute de mouvement. */
  .morph__ink .ink-shape,.morph__ink .ink-arrow{stroke-dashoffset:0}
  .morph__ink .ink-head,.morph__ink .ink-label{opacity:1}
}

/* Repli sans épinglage (mobile, mouvement réduit) : les deux couches
   se posent l'une sous l'autre au lieu de se superposer. */
.morph--stacked{height:auto;width:100%;aspect-ratio:auto;background:transparent;box-shadow:none;overflow:visible;display:grid;gap:14px}
.morph--stacked .morph__layer{position:relative;inset:auto}
.morph--stacked .morph__photo{border-radius:var(--r);overflow:hidden;box-shadow:0 20px 50px -26px rgba(26,26,23,.3)}
.morph--stacked .morph__doc{opacity:1;border:1px solid var(--doc-line);border-radius:var(--r);overflow:hidden}
.morph--stacked .morph__photo img,
.morph--stacked .morph__photo .shot--missing{aspect-ratio:4/3;object-fit:cover}
.morph--stacked + .morph__caption{display:none}
.morph--stacked .doc{height:auto;aspect-ratio:210/297;box-shadow:0 20px 50px -26px rgba(26,26,23,.3)}

/* ═══ PAGES LÉGALES ═════════════════════════════════════════ */
.legal{padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(80px,12vh,140px)}
.legal__head{max-width:720px;margin-bottom:clamp(40px,6vw,72px)}
.legal h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.035em;font-weight:600}
.legal__date{margin-top:16px;color:var(--muted)}
.legal__body{max-width:74ch;display:grid;gap:34px}
.legal__body section{display:grid;gap:12px}
.legal__body h2{font-size:1.28rem;font-weight:600;letter-spacing:-.022em;
  padding-top:26px;border-top:1px solid var(--line)}
.legal__body h3{font-size:1rem;font-weight:600;letter-spacing:-.015em;margin-top:6px}
.legal__body p,.legal__body li{color:var(--muted);font-size:16px;line-height:1.68}
.legal__body ul{display:grid;gap:9px;padding-left:20px;list-style:disc}
.legal__body a{color:var(--teal);text-underline-offset:3px}
.legal__body .todo{color:var(--claim);border:1px dashed rgba(184,114,10,.5);
  border-radius:8px;padding:3px 8px;font-family:var(--mono);font-size:12px;
  display:inline-block;letter-spacing:.04em}