/* CropPlanner — feuille de style unique.
   Parti pris : thème SOMBRE assumé, comme l'app. Un outil qui s'utilise huit heures
   par jour sur des images ne se présente pas sur fond blanc. Les couleurs de crops
   (ambre, rose, vert) sont exactement celles que l'app cycle sur les cadrages.      */

:root{
  --bg:#0d0e10;            /* fond de page — un cran sous le canvas de l'app       */
  --surface:#131518;       /* sections alternées                                   */
  --card:#191c20;          /* cartes                                               */
  --card-2:#1f2328;        /* contrôles surélevés                                  */
  --line:#252a30;          /* filets                                               */
  --line-soft:#1c2025;
  --text:#eef1f4;
  --muted:#98a1ab;
  --dim:#6d757e;
  --accent:#35b6cb;        /* cyan de l'app, remonté pour rester lisible sur noir  */
  --accent-hi:#7fe3f2;
  --accent-ink:#04222a;    /* texte SUR l'accent                                   */
  --amber:#f5a524;
  --pink:#e64980;
  --green:#51cf66;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r:14px;                /* rayon commun */
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.08;font-weight:640}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
code{
  font-family:var(--mono);font-size:.87em;color:var(--accent-hi);
  background:rgba(53,182,203,.1);border:1px solid rgba(53,182,203,.18);
  padding:.1em .4em;border-radius:5px;white-space:nowrap;
}
::selection{background:rgba(53,182,203,.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);
  color:var(--accent-ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.wrap--narrow{width:min(760px,calc(100% - 48px))}
.wrap--wide{width:min(1280px,calc(100% - 48px))}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.4);
  background:rgba(13,14,16,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.head.is-stuck{border-bottom-color:var(--line-soft);background:rgba(13,14,16,.88)}
.head__in{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.02em}
.logo{width:22px;height:22px;color:var(--accent);flex:none}
.brand__name{font-size:17px}
.head__nav{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--muted)}
.head__nav a{transition:color .2s}
.head__nav a:hover{color:var(--text)}
.head__end{display:flex;align-items:center;gap:14px}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;transition:.2s}
.lang:hover{color:var(--accent);border-color:rgba(53,182,203,.45)}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);font-weight:620;font-size:15px;
  padding:11px 20px;border-radius:10px;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.btn:hover{background:var(--accent-hi);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(53,182,203,.6)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:8px 15px;font-size:14px}
.btn--lg{padding:14px 26px;font-size:16px}
.btn--full{width:100%;margin-top:22px}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:var(--card-2);border-color:var(--dim);box-shadow:none;color:var(--text)}

/* ── Typo commune ────────────────────────────────────────────────────────── */
.eyebrow,.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.kicker{margin-bottom:14px}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted);line-height:1.62;max-width:60ch}
.accent{background:linear-gradient(100deg,var(--accent-hi),var(--accent) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fineprint{color:var(--dim);font-size:14px;line-height:1.6;max-width:70ch}

/* ── Héros ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(64px,9vw,110px) 0 clamp(56px,7vw,90px);text-align:center}
.hero::before{ /* halo d'accent */
  content:"";position:absolute;inset:-220px 0 auto;height:640px;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 50% 34%,rgba(53,182,203,.17),transparent 70%)}
.hero::after{ /* trame « bleu de plan », effacée sur les bords */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 30%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 30%,#000,transparent 72%)}
.hero>*{position:relative}
.hero h1{font-size:clamp(38px,6.4vw,68px);margin-bottom:26px}
.hero .lead{margin-inline:auto;text-align:center;max-width:64ch}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.trust{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-size:14px;color:var(--dim)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* ── Maquette de l'app ───────────────────────────────────────────────────── */
.stagewrap{margin-top:clamp(48px,6vw,76px);position:relative}
.stagewrap::before{content:"";position:absolute;inset:8% 6% -6%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(53,182,203,.24),transparent 66%);
  filter:blur(52px);pointer-events:none}
.app{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#212326;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;
  font-size:12px}
.app__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 13px;
  background:#2d2d2d;border-bottom:1px solid #0e0e0e}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#3f4348}
.dots i:first-child{background:#e5484d}.dots i:nth-child(2){background:#e8a23d}
.dots i:nth-child(3){background:#3da46a}
.app__title{color:var(--muted);font-size:11.5px;letter-spacing:-.01em}
.app__body{display:grid;grid-template-columns:186px 1fr 204px;height:clamp(330px,42vw,540px)}
.app__files,.app__insp{background:#2d2d2d;display:flex;flex-direction:column;min-width:0}
.app__files{border-right:1px solid #0e0e0e}
.app__insp{border-left:1px solid #0e0e0e}
.pane-head{padding:9px 12px;color:var(--dim);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-family:var(--mono);border-bottom:1px solid #363636}
.fl-list{padding:6px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.fl{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:7px;min-width:0}
.fl__thumb{width:26px;height:32px;border-radius:3px;flex:none;
  background:linear-gradient(160deg,#4b5058,#25282c)}
.fl__txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fl__txt b{font-weight:520;font-size:11px;color:#c9ced4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl__txt i{font-style:normal;font-size:10px;color:var(--dim)}
.fl--active{background:#424242}
.fl--active .fl__txt b{color:#fff}
.fl--active .fl__thumb{box-shadow:0 0 0 1.5px var(--accent)}
.fl--todo .fl__txt i{color:#7a6338}
.app__main{display:flex;flex-direction:column;background:#161616;min-width:0}
.viewbar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;
  background:#2d2d2d;border-bottom:1px solid #0e0e0e}
.segs{display:flex;gap:2px;background:#222;border-radius:7px;padding:2px}
.seg{padding:3px 11px;border-radius:5px;font-size:10.5px;color:var(--dim)}
.seg.is-on{background:#424242;color:#fff}
.zoom{width:76px;height:3px;background:#222;border-radius:2px;position:relative}
.zoom i{position:absolute;left:58%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#c9ced4}
.stage{position:relative;flex:1;margin:14px;display:grid;place-items:center;
  background:#0c0c0c;overflow:hidden;isolation:isolate}
/* L'image est PORTRAIT et centrée dans un canvas paysage — comme dans l'app,
   où le master occupe la place qu'il occupe, pas celle de la fenêtre. */
.img{position:relative;aspect-ratio:3/2;height:100%;max-width:100%;box-shadow:0 0 0 1px #000}
.photo{position:absolute;inset:0;width:100%;height:100%;display:block}

.crop{position:absolute;border:1.5px solid var(--c);border-radius:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);animation:cropin .6s var(--ease) both;animation-delay:var(--d)}
.crop__tag{position:absolute;top:0;left:0;display:flex;align-items:center;gap:5px;
  background:var(--c);color:#111;font-size:9.5px;font-weight:640;padding:2px 6px;
  border-radius:0 0 4px 0;white-space:nowrap;letter-spacing:0}
.crop--tagr .crop__tag{left:auto;right:0;border-radius:0 0 0 4px}
.crop__tag em{font-style:normal;font-family:var(--mono);font-size:9px;opacity:.62}
.crop--on{border-width:2px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 26px -4px var(--c)}
.crop--on::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.14) 33.3% 33.5%,transparent 33.6%,
             transparent 66.4%,rgba(255,255,255,.14) 66.5% 66.7%,transparent 66.8%)}
.h{position:absolute;width:7px;height:7px;background:#fff;border:1px solid rgba(0,0,0,.55);border-radius:1px}
.h--nw{left:-4px;top:-4px}.h--n{left:calc(50% - 3.5px);top:-4px}.h--ne{right:-4px;top:-4px}
.h--e{right:-4px;top:calc(50% - 3.5px)}.h--se{right:-4px;bottom:-4px}
.h--s{left:calc(50% - 3.5px);bottom:-4px}.h--sw{left:-4px;bottom:-4px}
.h--w{left:-4px;top:calc(50% - 3.5px)}
@keyframes cropin{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

.insp{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.insp__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px}
.insp__row span{color:var(--dim)}
.insp__row b{font-weight:520;color:#c9ced4;font-family:var(--mono);font-size:10px}
.insp__bars{padding:16px 12px;display:flex;flex-direction:column;gap:14px;
  border-top:1px solid #363636;margin-top:6px}
.sl{height:3px;border-radius:2px;background:#1c1c1c;position:relative}
.sl i{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#c9ced4;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.app__status{display:flex;align-items:center;height:26px;padding:0 13px;background:#2d2d2d;
  border-top:1px solid #0e0e0e;color:var(--dim);font-size:10.5px;font-family:var(--mono)}

/* ── Piliers ─────────────────────────────────────────────────────────────── */
.pillars{padding:clamp(44px,6vw,72px) 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.pillar{padding-top:22px;border-top:1px solid var(--line)}
.pillar h3{font-size:20px;margin-bottom:10px}
.pillar p{color:var(--muted);font-size:15.5px;line-height:1.62}
.pillar .kicker{color:var(--dim);margin-bottom:12px}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{padding:clamp(72px,9.5vw,124px) 0}
.sec--alt{background:var(--surface);border-block:1px solid var(--line-soft)}
.sec__head{max-width:64ch;margin-bottom:clamp(38px,4.6vw,60px)}
.sec__head h2{font-size:clamp(28px,3.9vw,44px)}
.sec__lead{color:var(--muted);font-size:17px;margin-top:18px;line-height:1.62}

/* Cartes de fonctions — les équerres de recadrage apparaissent au survol. */
.cards{gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.card{position:relative;background:var(--card);padding:30px 28px 32px;transition:background .25s}
.cards .card:last-child:nth-child(3n+1){grid-column:1/-1}
.cards .card:last-child:nth-child(3n+2){grid-column:span 2}
.card:hover{background:var(--card-2)}
.card::before,.card::after{content:"";position:absolute;width:13px;height:13px;
  border:1.5px solid var(--accent);opacity:0;transition:opacity .25s,transform .25s var(--ease)}
.card::before{top:14px;left:14px;border-right:0;border-bottom:0;transform:translate(4px,4px)}
.card::after{bottom:14px;right:14px;border-left:0;border-top:0;transform:translate(-4px,-4px)}
.card:hover::before,.card:hover::after{opacity:.85;transform:none}
.card__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(53,182,203,.11);border:1px solid rgba(53,182,203,.2);color:var(--accent);margin-bottom:20px}
.ico{width:20px;height:20px}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;line-height:1.6}
.more{margin-top:34px;color:var(--dim);font-size:14.5px;line-height:1.7;max-width:82ch}
.more span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-right:10px}

/* ── Étapes ──────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.step{position:relative;padding-top:24px;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--accent)}
.step__n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--accent);margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:10px}
.step p{color:var(--muted);font-size:15.5px;line-height:1.62}

/* ── Formules ────────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 28px 32px;display:flex;flex-direction:column}
.plan--hi{border-color:rgba(53,182,203,.42);background:linear-gradient(180deg,rgba(53,182,203,.07),transparent 42%),var(--card);
  box-shadow:0 24px 60px -30px rgba(53,182,203,.55)}
.plan__badge{position:absolute;top:-11px;left:28px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;font-weight:600}
.plan__name{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;margin-bottom:18px}
.plan__price{display:flex;align-items:baseline;gap:7px;letter-spacing:-.035em}
.plan__price b{font-size:clamp(32px,3.6vw,40px);font-weight:650;line-height:1}
.plan__price span{color:var(--dim);font-size:15px;letter-spacing:-.01em}
.plan__suffix{color:var(--dim);font-size:13.5px;margin-top:9px;line-height:1.5;min-height:3.2em}
/* « Tarif de lancement » : AMBRE et pas cyan — l'accent désigne ce qu'on recommande,
   l'ambre ce qui est provisoire. Même code couleur que les mentions à compléter. */
.plan__launch{display:inline-block;margin-top:14px;padding:3px 9px;border-radius:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);background:rgba(245,165,36,.1);border:1px solid rgba(245,165,36,.26)}
.plan__launch--off{visibility:hidden}
.plan__list{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;flex:1}
.plan__list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--muted);line-height:1.5}
.plan__list li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;
  border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg)}

/* Bascule du rythme de paiement — 100 % CSS : elle fonctionne sans JavaScript.
   Le libellé peut passer à la ligne : « Annuel mensualisé » ne tient pas sur un
   téléphone étroit, et une étiquette tronquée serait pire qu'une étiquette haute. */
.switch__box{position:absolute;opacity:0;width:0;height:0}
.switch__track{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:#101215;border:1px solid var(--line);border-radius:9px;padding:3px;
  margin-bottom:20px;cursor:pointer;user-select:none}
.switch__opt{position:relative;z-index:1;text-align:center;padding:6px 4px;font-size:12px;
  line-height:1.25;color:var(--muted);transition:color .25s}
.switch__knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);
  background:var(--accent);border-radius:6px;transition:transform .28s var(--ease)}
.switch__box:checked+.switch__track .switch__knob{transform:translateX(calc(100% + 2px))}
.switch__box:not(:checked)+.switch__track .switch__opt:nth-child(1),
.switch__box:checked+.switch__track .switch__opt:nth-child(2){color:var(--accent-ink);font-weight:600}
.switch__box:focus-visible+.switch__track{outline:2px solid var(--accent);outline-offset:2px}
.plan__price--b,.plan__suffix--b{display:none}
.switch__box:checked~.plan__price--a,.switch__box:checked~.plan__suffix--a{display:none}
.switch__box:checked~.plan__price--b{display:flex}
.switch__box:checked~.plan__suffix--b{display:block}
.plans+.fineprint{margin-top:26px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.qas{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;cursor:pointer;font-size:17px;font-weight:560;letter-spacing:-.015em;
  list-style:none;transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-hi)}
.chev{width:18px;height:18px;flex:none;color:var(--dim);transition:transform .3s var(--ease),color .2s}
.qa[open] .chev{transform:rotate(180deg);color:var(--accent)}
.qa__a{padding:0 44px 24px 2px;animation:fade .3s var(--ease)}
.qa__a p{color:var(--muted);font-size:15.5px;line-height:1.68}
@keyframes fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ── Appel final ─────────────────────────────────────────────────────────── */
.final{position:relative;text-align:center;padding:clamp(84px,10vw,132px) 0;overflow:hidden}
.final::before{content:"";position:absolute;inset:auto 0 -60% 0;height:520px;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(53,182,203,.2),transparent 70%)}
.final>*{position:relative}
.final h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:22px}
.final .lead{margin-inline:auto}
.final .fineprint{margin:26px auto 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em}

/* ── Pied ────────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-soft);background:var(--surface);padding:52px 0 0}
.foot__in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px}
.foot__brand p{color:var(--dim);font-size:14.5px;margin-top:12px;max-width:34ch}
.foot__cols{display:flex;gap:28px;flex-wrap:wrap;font-size:14.5px;color:var(--muted)}
.foot__cols a:hover{color:var(--accent)}
.foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding:20px 0 26px;color:var(--dim);font-size:12.5px}
.foot__bar span:last-child{font-family:var(--mono);letter-spacing:.02em}

/* ── Pages de texte (mentions légales) ───────────────────────────────────── */
.doc{padding:clamp(48px,6vw,84px) 0 clamp(72px,9vw,112px)}
.doc__back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);
  margin-bottom:26px;transition:color .2s}
.doc__back:hover{color:var(--accent)}
.doc__back svg{width:16px;height:16px}
.doc h1{font-size:clamp(30px,4.2vw,46px);margin-bottom:12px}
.doc__meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--dim)}
.doc section{margin-top:clamp(36px,4.2vw,54px)}
.doc h2{position:relative;font-size:19px;padding-top:24px;border-top:1px solid var(--line)}
.doc h2::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--accent)}
.doc p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:15px}
.doc strong{color:var(--text);font-weight:600}
.doc a:not(.doc__back){color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:not(.doc__back):hover{color:var(--accent-hi)}
/* Fiche d'identité : libellés à gauche, valeurs à droite, alignées sur une colonne. */
.rows{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:11px 26px;margin-top:20px;
  font-size:15px}
.rows dt{color:var(--dim)}
.rows dd{margin:0;color:var(--text)}
/* Une mention encore vide doit sauter aux yeux : on ne livre pas une page trouée. */
.todo{color:var(--amber);font-family:var(--mono);font-size:13px}

/* ── Apparition au défilement ────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ── Adaptations ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .grid-3,.steps,.plans{grid-template-columns:1fr 1fr}
  .cards .card:last-child:nth-child(odd){grid-column:1/-1}
  .plan--hi{order:-1;grid-column:1/-1}
  .app__insp{display:none}
  .app__body{grid-template-columns:170px 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap,.wrap--narrow,.wrap--wide{width:calc(100% - 36px)}
  .head__nav{display:none}
  .head__in{gap:14px}
  .brand__name{font-size:16px}
  .grid-3,.steps,.plans{grid-template-columns:1fr}
  .cards{border-radius:12px}
  .app__files{display:none}
  .app__body{grid-template-columns:1fr;height:min(58vw,400px)}
  .cta .btn{flex:1 1 auto}
  .qa__a{padding-right:8px}
  .rows{grid-template-columns:1fr;gap:3px 0}
  .rows dd{margin-bottom:12px}
  .stagewrap{margin-inline:-8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;
    transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}