/* Polices hebergees avec le site : aucune requete vers un service tiers.
   Space Grotesk, Inter et Space Mono, licence SIL Open Font 1.1. */
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* =========================================================
   FIABILIS v2 · base A retravaillée
   Mobile d'abord. Desktop à partir de 900px.
   Animation : CSS + IntersectionObserver uniquement.
   Aucune bibliothèque, aucune vidéo scrubbée, aucun WebGL.
   ========================================================= */
:root{
  --blue:#1B4080;--blue-deep:#0D1F3C;--teal:#10B5A6;--teal-deep:#0A7D77;--teal-mid:#0E6E88;--teal-light:#8FE4DA;
  --green:#1FA971;--beton:#E9E4DA;--beton-2:#CFC8BA;--ink:#0E1024;--paper:#FAF9F6;--blue-wash:#E8F1F2;
  --grad:linear-gradient(90deg,#1B4080 0%,#0E6E88 52%,#10B5A6 100%);
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --maxw:1360px;--gut:20px;--navh:58px;
  --rule:rgba(14,16,36,.16);--rule-soft:rgba(14,16,36,.09);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FAF9F6;--ink:#0E1024;--beton:#E9E4DA}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.03em;line-height:1.07;text-wrap:balance}
h1{font-size:2.05rem;letter-spacing:-.04em;line-height:1.04}
h2{font-size:1.75rem}
h3{font-size:1.05rem;letter-spacing:-.018em}
p{margin:0 0 1em;text-wrap:pretty}
.nb{white-space:nowrap}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}

/* pastille de section : trait turquoise + index, code du brand book */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--teal);flex:none}
/* couches de niveau, utilisées comme transition entre sections */
.seam{height:26px;display:flex;flex-direction:column;justify-content:center;gap:5px;overflow:hidden}
.seam i{display:block;height:3px;background:var(--teal);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.seam i:nth-child(1){width:min(260px,52vw)}
.seam i:nth-child(2){width:min(160px,32vw);background:var(--teal-mid);transition-delay:.12s}
.seam i:nth-child(3){width:min(90px,18vw);background:var(--blue);transition-delay:.24s}
.js .seam i{transform:scaleX(0)}
.js .seam.in i{transform:scaleX(1)}

header{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.88);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease}
header.moved{background:rgba(250,249,246,.94);border-bottom-color:var(--rule-soft)}
/* Filet de marque sous la barre : il se depose de gauche a droite des qu'on defile. */
header::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
header.moved::after{transform:scaleX(1)}
.navr{display:flex;align-items:center;gap:12px}
.burger{width:42px;height:38px;border:1px solid var(--rule);background:transparent;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.panel{position:fixed;inset:var(--navh) 0 auto 0;background:var(--paper);border-bottom:1px solid var(--rule);
  z-index:55;padding:8px var(--gut) 22px;display:none}
.panel.open{display:block}
.panel a{display:block;padding:15px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.panel a:last-child{border-bottom:0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:var(--navh)}
.brand{display:inline-flex;align-items:baseline;text-decoration:none}
.brand b{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.035em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand b.on-dark{background:none;color:#fff}
/* trait de niveau du brand book : degrade bleu vers turquoise, extremites arrondies */
.levelline{display:block;height:6px;width:190px;max-width:70%;border-radius:3px;background:var(--grad);margin-top:10px}
nav{display:none}
.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:.85rem;padding:10px 16px;text-decoration:none;background:var(--teal-deep);color:#fff;border:1px solid var(--teal-deep);white-space:nowrap}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--o{background:transparent;color:var(--teal-deep)}
.btn--o:hover{background:var(--teal-deep);color:#fff}
.btn--t{background:var(--teal);border-color:var(--teal);color:#04201E}
.btn--t:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---------- HERO ---------- */
.hero{background:var(--beton)}
.hero-img img{width:100%;height:74vw;max-height:470px;object-fit:cover;object-position:50% 46%}
.hero-txt{padding:32px var(--gut) 40px;max-width:var(--maxw);margin:0 auto}
.sig{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--teal-deep);margin-bottom:18px}
.hero h1{max-width:14ch}
.hero .lede{margin-top:18px;color:#3A4059;max-width:52ch;font-size:1.02rem}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#6B7184;margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);line-height:1.9}

/* ---------- bande de preuve ---------- */
.proof{background:var(--paper);border-bottom:1px solid var(--rule)}
.proof .wrap{padding:30px var(--gut) 34px}
.proof-g{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.proof b{display:block;font-family:var(--display);font-weight:700;font-size:1.75rem;color:var(--blue);letter-spacing:-.04em;line-height:1}
.proof span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#6B7184;margin-top:9px;line-height:1.6}

section{padding:56px 0}
.sec-p{max-width:60ch;color:#3A4059;margin-top:16px}

/* ---------- 01 · LE CONSTAT (texte, plus de photo en fond) ---------- */
.facts3{display:grid;grid-template-columns:1fr;gap:0;margin-top:28px;border-top:2px solid var(--ink)}
.facts3>div{padding:22px 0;border-bottom:1px solid var(--rule)}
.facts3 .t{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep)}
.facts3 h3{margin:9px 0 8px;font-size:1.2rem}
.facts3 p{margin:0;color:#3A4059;font-size:.95rem;max-width:44ch}
.brake{margin-top:36px;background:var(--blue-wash);padding:28px 22px;border-left:4px solid var(--teal)}
.brake h3{font-size:1.45rem;max-width:22ch;letter-spacing:-.03em}
.brake ul{list-style:none;margin:20px 0 0;padding:0}
.brake li{font-size:1rem;color:var(--ink);padding:13px 0;border-top:1px solid rgba(14,16,36,.14);display:flex;gap:13px;align-items:baseline}
.brake li::before{content:"";width:14px;height:2px;background:var(--teal-deep);flex:none;transform:translateY(-4px)}
.shot img{width:100%;height:56vw;max-height:420px;object-fit:cover}
.shot figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#6B7184;padding:10px var(--gut) 0;max-width:var(--maxw);margin:0 auto}

/* ---------- formules : colonnes separees par des filets, pas de cartes ---------- */
.forms{display:grid;grid-template-columns:1fr;margin-top:30px;border-top:2px solid var(--ink)}
.forms>div{padding:24px 0;border-bottom:1px solid var(--rule)}
.forms .gbar{height:4px;background:var(--grad);width:72px;margin-bottom:16px}
.forms h3{font-size:1.28rem}
.forms .d{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);margin:7px 0 12px}
.forms p{margin:0;color:#3A4059;font-size:.95rem;max-width:46ch}
.forms ul{list-style:none;margin:14px 0 0;padding:0}
.forms li{font-size:.9rem;color:#4A5068;padding:7px 0;border-top:1px solid var(--rule-soft)}

/* ---------- parcours client ---------- */
.path{margin-top:30px;border-top:2px solid var(--ink)}
.path>div{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--rule)}
.path .n{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--teal-deep);padding-top:3px}
.path h3{font-size:1.1rem}
.path p{margin:6px 0 0;color:#3A4059;font-size:.94rem;max-width:50ch;grid-column:2}

/* ---------- MOMENT 2 · la cellule, organe par organe ---------- */
.cell{background:var(--paper)}
.cell-fig{position:sticky;top:var(--navh);background:var(--paper);padding:14px 0 10px;z-index:5;border-bottom:1px solid var(--rule-soft)}
.diag{width:100%;height:32svh;max-height:250px;display:block}
.diag [data-organ]{transition:opacity .45s ease}
.cell-mod[data-active] [data-organ]{opacity:.16}
.cell-mod[data-active="1"] [data-organ="mix"],
.cell-mod[data-active="2"] [data-organ="pump"],
.cell-mod[data-active="3"] [data-organ="robot"],
.cell-mod[data-active="4"] [data-organ="head"],
.cell-mod[data-active="4"] [data-organ="part"]{opacity:1}
.cell-steps{padding-top:0}
.cstep{min-height:40svh;display:flex;align-items:center;border-top:1px solid var(--rule-soft);padding:10px 0}
.cstep:first-child{border-top:0}
.cstep-in{transition:opacity .4s ease}
.js .cstep-in{opacity:.32}
.js .cstep.in .cstep-in{opacity:1}
.cstep .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--teal-deep);font-weight:700}
.cstep h3{margin:8px 0 8px;font-size:1.3rem}
.cstep p{margin:0;color:#3A4059;max-width:44ch;font-size:.97rem}

/* ---------- MOMENT 3 · bascule acheter / louer ---------- */
.swap{background:var(--beton);padding:0}
.swap h2{max-width:22ch}
.pin{padding:56px 0}
/* Section calee : le contenu reste a l'ecran pendant que le scroll alimente les barres.
   Le navigateur continue de defiler normalement, rien n'est intercepte. */
.pinwrap.pinned{height:calc(100svh + var(--track,210svh))}
.pinwrap.pinned .pin{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;justify-content:center;padding:0;overflow:hidden}
/* En conteneur flex, la marge automatique du .wrap le reduirait a la taille de
   son contenu : on lui rend la largeur pleine. */
.pinwrap.pinned .pin > .wrap{width:100%}
.swaps{margin-top:30px;border-top:2px solid var(--ink)}
.srow{padding:16px 0;border-bottom:1px solid var(--rule);--p:1}
.pinned .swaps{margin-top:20px}
.pinned .srow{padding:11px 0}
.pinned .kicker{margin-top:18px}
.pinned .sec-p{margin-top:12px}
.pinned.tight .sec-p{display:none}
.pinned.tight h2{font-size:clamp(1.45rem,2.4vw,2rem)}
.pinned.tight .srow{padding:8px 0}
.pinned.tight .kicker{display:none}
.pinned.tighter .eyebrow{margin-bottom:10px}
.pinned.tighter h2{font-size:clamp(1.2rem,2vw,1.6rem)}
.pinned.tighter .srow{padding:6px 0}
.pinned.tighter .srow .a{font-size:.88rem}
.pinned.tighter .srow .b{padding:7px 11px}
.pinned.tighter .srow .b span{font-size:.95rem}
/* Le poids se deplace de la contrainte vers la reponse : la gauche s'efface,
   la droite s'allume en fondu. Aucun balayage, pour ne pas evoquer une progression. */
.srow .a{color:#5C6278;font-size:.95rem;opacity:calc(1 - var(--p) * .72)}
.srow .b{position:relative;display:grid;margin-top:7px;padding:10px 13px}
.srow .b::before{content:"";position:absolute;inset:0;background:#fff;opacity:var(--p)}
.srow .b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);opacity:var(--p)}
.srow .b span{grid-area:1/1;position:relative;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:#9AA2B6}
.srow .b span.k{color:var(--ink);opacity:var(--p)}
.kicker{display:flex;gap:14px;margin-top:30px;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--teal-deep);letter-spacing:-.015em}
.kicker::before{content:"";width:28px;height:3px;background:var(--teal);flex:none;margin-top:.62em}

/* ---------- formules, en tableau ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:.95rem}
.tbl th,.tbl td{text-align:left;padding:16px 0;border-bottom:1px solid var(--rule)}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:2px solid var(--ink)}
.tbl .f{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.025em;display:block}
.tbl .d{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);display:block;margin-top:5px}
.tbl p{margin:9px 0 0;color:#3A4059;font-size:.93rem;max-width:52ch}

/* ---------- références ---------- */
.refs{background:var(--blue-wash)}
.gal{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#6B7184;margin-top:9px;line-height:1.7}
.partners{margin-top:32px;border-top:1px solid var(--rule);padding-top:18px}
.partners ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--blue)}

/* ---------- roles ---------- */
.duo{margin-top:28px}
.duo>div{padding:26px 22px;color:#fff}
.duo>div:first-child{background:var(--blue)}
.duo>div:last-child{background:var(--teal-deep)}
.duo .who{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.duo h3{color:#fff;font-size:1.5rem;margin:9px 0 11px}
.duo p{margin:0;color:rgba(255,255,255,.88);font-size:.95rem}

/* ---------- cta + footer ---------- */
.cta{background:var(--blue-deep);color:#fff}
.cta h2{color:#fff;max-width:13ch}
.cta p{color:#C2CAE4;max-width:46ch;margin-top:16px}
.facts{font-family:var(--mono);font-size:.74rem;margin-top:30px;border-top:2px solid var(--teal);padding-top:8px}
.facts div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.facts span:first-child{color:#9AA4C8;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
footer{background:var(--blue-deep);color:#AEB7D4;padding:0 0 44px;font-size:.88rem}
.foot{display:grid;grid-template-columns:1fr;gap:26px;padding-top:44px;border-top:1px solid rgba(255,255,255,.14)}
footer h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-light);margin:0 0 12px;font-weight:400}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:7px}
footer a{color:#D4DAEC;text-decoration:none}footer a:hover{color:#fff}
.legal{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;display:flex;flex-wrap:wrap;gap:8px 20px}
.note{background:var(--ink);color:var(--teal-light);font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;padding:9px var(--gut);text-align:center;line-height:1.7}

/* ================= DESKTOP ================= */
@media(min-width:900px){
  :root{--gut:clamp(28px,3.4vw,52px);--navh:76px}
  body{font-size:17px}
  h1{font-size:clamp(2.5rem,3.6vw,3.35rem);line-height:1.06}
  h2{font-size:clamp(1.85rem,2.6vw,2.3rem)}
  /* Mesure : 45 a 75 signes pour le texte courant, nettement moins pour les titres,
     sinon l'oeil doit balayer toute la largeur pour revenir au debut de la ligne. */
  h2{max-width:24ch}
  .hero h1{max-width:16ch}
  .hero .lede{max-width:50ch}
  .sec-p{max-width:62ch}
  h3{font-size:1.2rem}
  /* Une seule echelle de lecture : 17px de corps, 20px de chapeau, 20,5px de sous-titre.
     Les textes secondaires ne descendent plus sous le corps courant. */
  .hero .lede{font-size:1.2rem;line-height:1.55}
  .sec-p{font-size:1.06rem}
  .facts3 h3,.cstep h3,.forms h3,.path h3{font-size:1.2rem}
  .facts3 p,.cstep p,.forms p,.path p,.forms li,.srow .a{font-size:1rem}
  .cstep .n{font-size:.74rem}
  .gal figcaption{font-size:.68rem}
  .brand b{font-size:1.62rem}
  nav{display:flex;gap:30px;font-size:.96rem}
  nav a{text-decoration:none;color:#444B66;padding-bottom:3px;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
  nav a:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}
  nav a.on{color:var(--ink);border-bottom-color:var(--teal)}
  .burger{display:none}
  .btn{font-size:.93rem;padding:12px 22px}
  section{padding:clamp(56px,5vw,78px) 0}
  .seam{height:38px}

  .hero{display:grid;grid-template-columns:clamp(560px,52%,900px) 1fr;align-items:stretch}
  .hero-txt{padding:clamp(56px,6vw,88px) clamp(40px,4vw,72px) clamp(56px,6vw,88px)
    clamp(var(--gut), calc((100vw - var(--maxw))/2 + var(--gut)), 150px);
    max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center}
  .hero-img img{height:100%;max-height:none;min-height:560px}
  .proof .wrap{padding:44px var(--gut) 48px}
  .proof-g{grid-template-columns:repeat(4,1fr);gap:0}
  .proof-g>div{border-left:1px solid var(--rule);padding:0 clamp(18px,2.4vw,34px)}
  .proof-g>div:first-child{border-left:0;padding-left:0}
  .proof b{font-size:2.5rem}

  .facts3{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
  .facts3>div{border-bottom:0;border-left:1px solid var(--rule);padding:26px clamp(20px,2.4vw,34px)}
  .facts3>div:first-child{border-left:0;padding-left:0}
  .brake{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start;padding:clamp(30px,3.4vw,48px)}
  .brake ul{margin-top:0}
  .shot img{height:clamp(340px,42vw,560px);max-height:none}
  .forms{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
  .forms>div{border-bottom:0;border-left:1px solid var(--rule);padding:30px clamp(20px,2.4vw,34px)}
  .forms>div:first-child{border-left:0;padding-left:0}
  .path>div{grid-template-columns:62px 1fr 1.3fr;gap:clamp(18px,3vw,44px);align-items:baseline}
  .path p{grid-column:auto}
  .path p{margin-top:0}

  .cell-mod{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,3.4vw,52px);align-items:start}
  /* Le schema se cale a hauteur du texte de l'etape en cours. Sa hauteur reste
     celle du dessin, sinon il se detacherait trop tot faute de course. */
  .cell-fig{border-bottom:0;padding:0;top:calc(var(--navh) + 17vh);align-self:start;height:auto}
  .diag{height:auto;max-height:none}
  .cell-steps{padding-top:0}
  .cstep{min-height:36svh;align-items:center}

  .swaps{border-top-width:2px}
  .srow{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center;padding:8px 0}
  .srow .a{padding:12px 0}
  .srow .b{margin-top:0;padding:14px 18px}
  .srow .b span{font-size:1.1rem}
  .pinned .srow{padding:5px 0}
  .pinned .srow .b{padding:12px 18px}
  .pinned.tight .srow{padding:3px 0}
  .pinned.tight .srow .b{padding:10px 16px}
  .pinned.tighter .srow{padding:1px 0}
  .pinned.tighter .srow .b{padding:8px 14px}

  .gal{grid-template-columns:repeat(4,1fr);gap:14px}
  .gal img{aspect-ratio:1/1}
  .duo{display:grid;grid-template-columns:1fr 1fr}
  .duo>div{padding:clamp(28px,3.2vw,44px)}
  .cta-g{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,64px);align-items:end}
  .facts{margin-top:0}
  .foot{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- pages legales ---------- */
.lwrap{max-width:780px;margin:0 auto;padding:44px var(--gut) 20px}
.ldoc{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--navh) + 12px)}
.ldoc:last-child{border-bottom:0;margin-bottom:0}
.ldoc h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.035em}
.ldoc .lupd{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#6B7184;margin:12px 0 22px}
.lnav{display:flex;flex-wrap:wrap;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin-bottom:30px}
.lnav a{font-size:.88rem;text-decoration:none;color:#4A5068;padding:12px 0 11px;margin-right:18px;border-bottom:3px solid transparent;margin-bottom:-1px}
.lnav a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--teal)}
.lnav a:hover{color:var(--teal-deep)}
.ldoc h2{font-size:1.25rem;letter-spacing:-.02em;margin:34px 0 12px}
.ldoc h3{font-size:1.02rem;margin:22px 0 8px}
.ldoc p,.ldoc li{color:#2F3550;font-size:.98rem}
.ldoc ul{padding-left:20px;margin:0 0 1em}
.ldoc li{margin-bottom:8px}
.ldoc a{color:var(--teal-deep)}
.ldl{display:grid;grid-template-columns:1fr;margin:10px 0 18px;border-top:1px solid var(--rule)}
.ldl dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#6B7184;padding:12px 0 2px}
.ldl dd{margin:0;padding:0 0 12px;border-bottom:1px solid var(--rule-soft);font-size:.96rem}
mark.todo{background:#FFE7A8;color:#5A3D00;padding:1px 6px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
@media(min-width:760px){
  .lwrap{padding-top:64px}
  .ldl{grid-template-columns:230px 1fr}
  .ldl dt{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-soft)}
  .ldl dd{padding:13px 0}
}