:root{--sand:#f6f3ec;--stone:#ece7dc;--white:#fff;--ink:#1b2533;--ink-2:#344155;--muted:#5d6775;--navy:#333E50;--navy-d:#252e3d;--yellow:#E8B021;--yellow-d:#cf9a12;--yellow-soft:#fbe9b8;--line:rgba(27,37,51,.12);--f-head:"Archivo",system-ui,sans-serif;--f-body:"Inter",system-ui,sans-serif;--r:14px;--r-lg:24px;--shadow-sm:0 10px 26px -14px rgba(27,37,51,.3);--ease:cubic-bezier(.2,.7,.2,1);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.narrow{max-width:760px;margin-inline:auto}
h1,h2,h3{font-family:var(--f-head);line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
a{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.45em;border-radius:999px;border:2px solid transparent;font:600 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-signal{background:var(--yellow);color:var(--ink);box-shadow:0 12px 30px -10px rgba(232,176,33,.75)}
.btn-signal:hover{background:var(--yellow-d)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
header{position:sticky;top:0;z-index:40;background:rgba(246,243,236,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark svg{width:38px;height:38px;display:block}
.brand-mark rect{fill:var(--navy)}.brand-mark rect:first-child{fill:var(--ink-2)}
.brand-mark circle{fill:var(--yellow);stroke:var(--sand);stroke-width:2.5}
.brand-name{font:700 1.15rem/1 var(--f-head);color:var(--ink)}
.brand-name strong{color:var(--navy);font-weight:900;background:linear-gradient(transparent 62%,var(--yellow-soft) 62%)}
nav{display:flex;gap:28px}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-2)}
nav a[aria-current]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--yellow)}
header .btn{padding:.7em 1.15em;font-size:.92rem}
.nav-m{display:none}
@media (max-width:980px){nav{display:none}.nav-m{display:inline-block;margin-left:auto;font-weight:600;font-size:.92rem;color:var(--ink-2);text-decoration:none}}
.tag{display:inline-block;font:600 .76rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.crumbs{font-size:.86rem;color:var(--muted);padding-top:28px}
.crumbs a{color:var(--muted)}
/* Liste */
.c-hero{padding:28px 0 36px}
.c-hero h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);font-weight:900;margin:.3em 0 .35em}
.c-hero p{color:var(--ink-2);max-width:60ch;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:18px;padding-bottom:56px}
.card{background:var(--white);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .25s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card h2{font-size:1.28rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card .meta{margin-top:auto;font-size:.82rem;color:var(--muted)}
.guides-band{background:var(--navy);color:var(--white);border-radius:var(--r-lg);padding:28px;margin-bottom:56px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.guides-band h2{font-size:1.5rem;grid-column:1/-1}
.guides-band .tag{color:var(--yellow)}
.g-item{background:rgba(255,255,255,.07);border-radius:var(--r);padding:18px}
.g-item b{display:block;font-family:var(--f-head);font-size:1.1rem;margin-bottom:4px}
.g-item p{margin:0 0 10px;opacity:.85;font-size:.93rem}
.g-item a{color:var(--yellow);font-weight:600}
/* Article */
.a-head{padding:20px 0 8px}
.a-head h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);font-weight:900;margin:.35em 0 .4em}
.a-meta{font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px}
.chapo{font-size:1.18rem;color:var(--ink-2);margin:20px 0 8px;line-height:1.6}
.a-body h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);margin:1.8em 0 .5em}
.a-body h3{font-size:1.2rem;margin:1.4em 0 .4em}
.a-body p,.a-body li{color:var(--ink)}
.a-body ul,.a-body ol{padding-left:1.25em}
.a-body li{margin:.35em 0}
.encart{background:var(--yellow-soft);border-radius:var(--r);padding:16px 18px;margin:1.6em 0}
.encart p{margin:0}
.tableau{overflow-x:auto;margin:1em 0}
.tableau table{border-collapse:collapse;width:100%;min-width:30rem;background:var(--white);border-radius:var(--r);overflow:hidden;font-size:.95rem}
.tableau th,.tableau td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tableau th{background:var(--navy);color:var(--white);font-weight:600}
/* Guide */
.guide{background:var(--navy);color:var(--white);border-radius:var(--r-lg);padding:26px;margin:2.4em 0;display:grid;gap:12px}
.guide .tag{color:var(--yellow)}
.guide h2{font-size:1.5rem;margin:0}
.guide p,.a-body .guide p{margin:0;color:rgba(255,255,255,.88)}
.a-body .guide h2{margin:0;color:#fff}
.guide form{display:grid;gap:10px;margin-top:6px}
.guide .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.guide .row{grid-template-columns:1fr}}
.guide input[type=text],.guide input[type=email]{width:100%;padding:.85em 1em;border-radius:12px;border:0;font:inherit;font-size:1rem;color:var(--ink)}
.guide label.ok{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;opacity:.85;line-height:1.45}
.guide label.ok input{margin-top:.2em;width:18px;height:18px;flex:none;accent-color:var(--yellow)}
.guide .g-err{color:#ffd27a;font-size:.88rem;min-height:1.2em;margin:0}
.guide .btn{justify-self:start}
.g-done a.btn{margin-top:6px}
/* FAQ, CTA, liés */
.faq{margin:2.4em 0}
.faq h2{font-size:1.6rem;margin-bottom:.6em}
.faq details{background:var(--white);border-radius:var(--r);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.faq summary{font-weight:600;cursor:pointer}
.faq details p{margin:.6em 0 0;color:var(--ink-2)}
.cta{background:var(--yellow-soft);border-radius:var(--r-lg);padding:26px;margin:2.4em 0;display:grid;gap:12px}
.cta h2{font-size:1.5rem}
.cta p{margin:0;color:var(--ink-2)}
.cta .row{display:flex;flex-wrap:wrap;gap:10px}
.related{padding:8px 0 56px}
.related h2{font-size:1.4rem;margin-bottom:14px}
.related .cards{padding-bottom:0}
footer{background:var(--navy-d);color:rgba(255,255,255,.82);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:28px}
footer a{color:rgba(255,255,255,.85);text-decoration:none}
footer a:hover{text-decoration:underline}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer button{background:none;border:0;padding:0;color:rgba(255,255,255,.85);font:inherit;cursor:pointer}
.sticky-cta{display:none}
@media (max-width:860px){.sticky-cta{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(246,243,236,.95);backdrop-filter:blur(12px);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--line)}footer{padding-bottom:76px}}
.legal-page h2{font-size:1.25rem;margin:1.6em 0 .4em}