@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

/* Une grille éditoriale d'après le site de référence, aux couleurs douces de l'espace privé (une par rubrique) : barre fixe qui devient pleine après l'image d'ouverture,
   moitiés pleine largeur, mosaïque à cinq colonnes, annuaire en 3:4.    Même système que l'espace privé : une seule famille (Inter Tight, la condensée ne sert qu'au logo), espaces en multiples de 8 px,
   échelle typographique 1,25 sur une base de 16 px, interlignes sur une grille de 4 px, un seul arrondi de 4 px pour tout ce qui
   a un bord (boutons, champs, encadrés). Les photos restent à bords francs. */
:root{
  --bg:#ffffff;
  --fg:#000000;
  --muted:#696969;
  --soft:#bdbdbd;
  --ink2:#1f2024;
  --hero1:#4f4f4f;
  --hero2:#5c5c5c;
  --hero3:#6a6a6a;
  --ph-label:#4a4a4a;
  --f-body:'Inter Tight',Helvetica,Arial,sans-serif;
  --f-logo:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  /* Espaces */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s7:56px;--s8:64px;--s9:72px;--s12:96px;--s15:120px;--s17:136px;--s20:160px;--s24:192px;--s26:208px;
  /* Échelle 1,25 : 12,8 / 16 / 20 / 25 / 31,25 / 39 / 48,8 */
  --t-1:.8rem;--t0:1rem;--t1:1.25rem;--t2:1.5625rem;--t3:1.953rem;--t4:2.441rem;--t5:3.052rem;
  --l-1:16px;--l0:24px;--l1:28px;--l2:32px;--l3:40px;--l4:48px;--l5:56px;
  /* Un seul arrondi */
  --r:4px;
  --gx:40px;
  --gl:max(var(--gx),env(safe-area-inset-left,0px));
  --gr:max(var(--gx),env(safe-area-inset-right,0px));
  --nav-h:56px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;font-family:var(--f-body);font-size:var(--t0);line-height:var(--l0);font-weight:400;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
img{display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gx{padding-left:var(--gl);padding-right:var(--gr)}
.skip{position:absolute;left:-9999px;top:var(--s1);z-index:200;background:var(--fg);color:var(--bg);padding:var(--s1) var(--s2);border-radius:var(--r);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;text-transform:uppercase}
.skip:focus{left:var(--gl)}
.ul{text-decoration:underline;text-underline-offset:3px}
.upper{text-transform:uppercase}


/* NAV */
#nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:99;font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#nav.solid{background:var(--bg);color:var(--fg)}
#nav.over{background:transparent;color:#fff}
.nav-in{height:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-left:var(--gl);padding-right:var(--gr)}
.logo-w{display:flex;align-items:center;height:100%}
.logo{font-family:var(--f-logo);font-weight:700;text-transform:none;line-height:1;font-size:var(--t3);letter-spacing:.01em;white-space:nowrap;transition:font-size .2s}
#nav.big .logo{font-size:var(--t5)}
.nav-links{display:flex;align-items:center;gap:var(--s3)}
.nl:hover{text-decoration:underline;text-underline-offset:4px}
.btn-become{display:inline-flex;align-items:center;height:var(--s4);padding:0 var(--s3);background:var(--fg);color:var(--bg);font-weight:700;letter-spacing:.04em;border:1px solid var(--fg);border-radius:var(--r)}
.btn-become:hover{background:var(--bg);color:var(--fg)}
#nav.over .btn-become{background:#fff;color:#000;border-color:#fff}
#nav.over .btn-become:hover{background:transparent;color:#fff}
.lang{display:flex;gap:var(--s1);align-items:center;font-weight:600}
.lang a{opacity:.7;text-transform:uppercase}
.lang a[aria-current]{opacity:1}
.lang a:hover{opacity:1}
.menu-btn{display:none;width:var(--s5);height:var(--s5);align-items:center;justify-content:center}
.menu-btn svg{display:block}

/* MENU */
#menu{position:fixed;inset:0;background:var(--bg);color:var(--fg);z-index:120;overflow-y:auto;display:block}
#menu[hidden]{display:none}
body.lock{overflow:hidden}
.menu-top{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-left:var(--gl);padding-right:var(--gr)}
.menu-top button{width:var(--s5);height:var(--s5);display:flex;align-items:center;justify-content:center}
.menu-nav{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;padding-top:var(--s7);padding-left:var(--gl);padding-right:var(--gr)}
.menu-nav a{font-size:var(--t2);line-height:var(--l2);font-weight:600;text-transform:uppercase}
.menu-nav a.mbecome{margin-top:var(--s1);display:inline-flex;align-items:center;height:var(--s6);padding:0 var(--s3);border-radius:var(--r);background:var(--fg);color:var(--bg);font-size:var(--t-1);line-height:var(--l-1);letter-spacing:.04em}
.menu-sec{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;padding-top:var(--s5);padding-left:var(--gl);padding-right:var(--gr)}
.menu-sec a{font-size:var(--t2);line-height:var(--l2);font-weight:600;text-transform:uppercase}
.menu-lang{display:flex;gap:var(--s1);font-weight:600;text-transform:uppercase;padding-top:var(--s1)}
.menu-lang a{opacity:.7;font-size:var(--t-1);line-height:var(--l-1)}
.menu-lang a[aria-current]{opacity:1}
.menu-legal{padding-top:var(--s12);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));padding-left:var(--gl);padding-right:var(--gr);text-transform:uppercase}
.menu-legal li{margin-bottom:var(--s1)}
.menu-legal li.gap{margin-top:var(--s4)}
.menu-legal .cp{color:var(--muted)}

/* HERO */
#app{outline:none;min-height:60vh}
.site{min-height:100vh}
.hero{position:relative;height:calc(100vh - 128px);height:calc(100svh - 128px);min-height:480px;overflow:hidden;color:#fff;background:var(--hero1)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.slide.on{opacity:1}
.slide.s1{background:var(--hero1)}
.slide.s2{background:var(--hero2)}
.slide.s3{background:var(--hero3)}
.slide .lab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:600;text-transform:uppercase;color:#d0d0d0;text-align:center}
.hero-roster{position:absolute;left:var(--edge);top:50%}
.hero-title{text-transform:uppercase}
.hero-cats{margin-top:var(--s2)}
.hero-cats a{display:block;text-transform:uppercase;opacity:.65}
.hero-cats a:hover{opacity:1}
.hero-leg{position:absolute;left:var(--edge);bottom:var(--s5)}
.hero-leg b{font-weight:600}
.hero-base{position:absolute;right:var(--edge);bottom:var(--s5);max-width:min(520px,50%);text-align:right}

/* SPLIT */
.sec{margin-top:var(--s8)}
.split{display:grid;grid-template-columns:1fr 1fr}
.split a{position:relative;display:block;aspect-ratio:.837;overflow:hidden;color:#fff}
.split .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.split .leg{position:absolute;left:var(--gl);bottom:var(--s5);right:var(--gr);text-transform:uppercase;z-index:2}
.split .leg b{font-weight:600}
.split a:hover .leg{text-decoration:underline;text-underline-offset:3px}

/* PLACEHOLDERS */
.ph{position:relative;display:block;width:100%;background:var(--ph,#d9d9d9);overflow:hidden}
.ph .ph-l{position:absolute;left:var(--s2);bottom:var(--s2);right:var(--s2);font-weight:600;text-transform:uppercase;color:var(--ph-label)}
.r34{aspect-ratio:3/4}.r45{aspect-ratio:4/5}.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}
.dark .ph-l,.split .ph .ph-l{color:#ececec}
.split .ph .ph-l{top:var(--s2);bottom:auto}

/* LATEST / MOSAIC */
.latest{max-width:var(--max);margin-left:auto;margin-right:auto;padding-top:var(--s3);padding-bottom:var(--s3);padding-left:var(--gl);padding-right:var(--gr)}
.latest>h2,.sect-title{margin:0 0 var(--s4)}
.lgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s5);align-items:start}
.lcard{display:block;min-width:0}
.lcard.w2{grid-column:span 2}
.lcard figcaption,.cap{padding:var(--s2) 0 0}
.cap b{display:block;font-weight:600}
.cap span{display:block}
.cap em{display:block;font-style:normal;font-weight:400;color:var(--muted);margin-top:var(--s1)}
.lcard:hover .cap span{text-decoration:underline;text-underline-offset:2px}
.lcard.soon{cursor:default}
.lcard.soon .cap span{color:var(--muted)}
.viewall{display:block;text-align:center;margin:var(--s8) 0 0;padding-left:var(--gl);padding-right:var(--gr)}
.viewall:hover{text-decoration:underline;text-underline-offset:4px}

/* FOOTER */
#foot{max-width:var(--max);margin:0 auto;padding-top:var(--s24);padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));text-transform:uppercase}
.foot-cols{display:grid;grid-template-columns:376px 376px 1fr}
.foot-cols li{margin-bottom:var(--s1)}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-cp{margin-top:var(--s4);color:var(--muted)}

.prose h2:first-child{margin-top:0}
.prose .note{margin-bottom:var(--s1);max-width:62ch}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prose p{font-size:var(--t0);line-height:var(--l0);max-width:62ch;margin-bottom:var(--s2);text-wrap:pretty}
.bul{margin:0 0 var(--s2);max-width:62ch}
.bul li{position:relative;padding-left:var(--s3);margin-bottom:var(--s1);line-height:var(--l0)}
.bul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;background:currentColor}
.steps{margin:0 0 var(--s2);max-width:62ch;counter-reset:s}
.steps li{display:grid;grid-template-columns:var(--s6) 1fr;column-gap:var(--s1);padding:var(--s3) 0;border-top:1px solid var(--fg)}
.steps li:last-child{border-bottom:1px solid var(--fg)}
.steps .st{margin:0 0 var(--s1)}
.steps p{margin:0;line-height:var(--l0)}
.note{border:1px solid var(--fg);border-radius:var(--r);padding:var(--s2);font-weight:600;max-width:62ch;margin-bottom:var(--s2)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--s6);padding:0 var(--s4);border:1px solid var(--fg);border-radius:var(--r);background:var(--fg);color:var(--bg);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.btn:hover{background:var(--bg);color:var(--fg)}
.btn.alt{background:var(--bg);color:var(--fg)}
.btn.alt:hover{background:var(--fg);color:var(--bg)}
.btn[disabled]{opacity:.5;cursor:default}
details.q{border-top:1px solid var(--fg)}
details.q:last-child{border-bottom:1px solid var(--fg)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";flex:none}
details.q[open] summary::after{content:"\00d7"}
details.q p{max-width:62ch;margin:0 0 var(--s3);line-height:var(--l0)}

.copy{margin-left:var(--s1);text-transform:uppercase;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline}

/* DIRECTORY */
.viewtog{font-size:var(--t0);line-height:var(--l0);white-space:nowrap}
.viewtog button{font-weight:400}
.viewtog button[aria-pressed="true"]{font-weight:600}
.dcard{display:block;min-width:0}
.dcard:hover .dname{text-decoration:underline;text-underline-offset:3px}
.you-box span{font-size:var(--t5);line-height:1;font-weight:400}
.dlist a:hover{text-decoration:underline;text-underline-offset:5px}

/* MODEL */
.mslide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.mslide.on{opacity:1}
.mslides::before{content:"";display:block;aspect-ratio:3/4}
.mx a:hover{text-decoration:underline;text-underline-offset:3px}

.by{margin-top:var(--s3)}
.fig{margin:var(--s5) 0}
.fig figcaption{text-transform:uppercase;padding-top:var(--s1)}
.related{margin-top:var(--s9);border-top:1px solid var(--fg);padding-top:var(--s3)}
.related .lbl{font-weight:600;text-transform:uppercase;margin-bottom:var(--s2)}
.related a{display:block}
.related a:hover span{text-decoration:underline;text-underline-offset:3px}
.cta{margin-top:var(--s7);border:1px solid var(--fg);border-radius:var(--r);padding:var(--s4) var(--s3)}
.cta p{font-size:var(--t1);line-height:var(--l1);font-weight:600;max-width:32ch}
.cta .btns{margin-top:var(--s3)}
.catnav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--t0);line-height:var(--l0)}
.catnav a{opacity:.55}
.catnav a[aria-current="true"]{opacity:1;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.catnav a:hover{opacity:1}

/* FORM : champs et boutons à 48 px, un seul arrondi */
.fgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3)}
.fgrid .wide{grid-column:1/-1}
.fld{margin-bottom:var(--s4);min-width:0;border:0;padding:0}
.fld>label,.fld>legend{display:block;margin-bottom:var(--s1);padding:0}
.in{display:block;width:100%;height:var(--s6);border:1px solid var(--fg);border-radius:var(--r);background:var(--bg);color:var(--fg);font:inherit;font-size:var(--t0);padding:0 var(--s2);-webkit-appearance:none;appearance:none}
select.in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s2) center;padding-right:var(--s5)}
textarea.in{height:auto;min-height:128px;padding:var(--s1) var(--s2);resize:vertical;line-height:var(--l0)}
.fld.bad .in{border-width:2px;padding-left:15px}
.err{font-weight:600;margin-top:var(--s1)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s1)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.opt span{display:flex;align-items:center;height:var(--s6);padding:0 var(--s3);border:1px solid var(--fg);border-radius:var(--r);font-size:var(--t0);line-height:var(--l0)}
.opt input:checked+span{background:var(--fg);color:var(--bg)}
.opt input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.fld.bad .opt span{border-width:2px}
.fld>label.chk{display:flex;font-size:var(--t0);line-height:var(--l0);font-weight:400;text-transform:none;margin-bottom:0}
fieldset.fld{margin-left:0;margin-right:0;min-inline-size:0}
.chk{display:flex;gap:var(--s2);align-items:flex-start;line-height:var(--l0);cursor:pointer;position:relative}
.chk input{position:absolute;opacity:0;width:var(--s3);height:var(--s3);margin:0;left:0;top:0;cursor:pointer}
.chk .box{flex:none;width:var(--s3);height:var(--s3);border:1px solid var(--fg);border-radius:var(--r);display:grid;place-items:center;background:var(--bg)}
.chk input:checked+.box::after{content:"";width:12px;height:12px;border-radius:2px;background:var(--fg)}
.chk input:focus-visible+.box{outline:2px solid var(--fg);outline-offset:3px}
.fld.bad .chk .box{border-width:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panel{border:1px solid var(--fg);border-radius:var(--r);padding:var(--s3);margin-top:var(--s5);max-width:62ch}
.panel h2{margin:0 0 var(--s2)}
.panel p{line-height:var(--l0);margin-bottom:var(--s2)}
.panel textarea{width:100%;min-height:200px;border:1px solid var(--fg);border-radius:var(--r);padding:var(--s1) var(--s2);font:inherit;font-size:var(--t-1);line-height:var(--l0);background:var(--bg);color:var(--fg)}
.formfoot{margin-top:var(--s2);max-width:62ch}

/* INBOX */
.inbox-row{border-top:1px solid var(--fg);padding:var(--s3) 0;display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
.inbox-row dl{margin:0;display:grid;grid-template-columns:160px 1fr;gap:var(--s1) var(--s2);font-size:var(--t0);line-height:var(--l0);min-width:0}
.inbox-row dt{font-weight:600;text-transform:uppercase;font-size:var(--t-1);line-height:var(--l0)}
.inbox-row dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* LANGUAGE BAR */
#langbar{position:fixed;left:0;right:0;bottom:0;z-index:98;background:var(--bg);border-top:1px solid var(--fg);padding:var(--s1) var(--gr) calc(var(--s1) + env(safe-area-inset-bottom,0px)) var(--gl);display:flex;align-items:center;gap:var(--s3);font-weight:600;text-transform:uppercase}
#langbar[hidden]{display:none}
#langbar .go{text-decoration:underline;text-underline-offset:3px}
#langbar .x{margin-left:auto;font-size:var(--t1);line-height:1;width:var(--s5);height:var(--s5)}

/* TABLET AND PHONE */
@media (max-width:1024px){
  :root{--gx:16px}
  .nav-in{justify-content:space-between}
  .hero{height:calc(100vh - 104px);height:calc(100svh - 104px)}
  .hero-leg{bottom:var(--s3)}
  .hero-base{bottom:var(--s7);left:var(--gl);right:var(--gr);max-width:none;text-align:left}
  .split .leg{bottom:var(--s3)}
  .lgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s2);row-gap:var(--s4)}
  .lcard.w2{grid-column:span 2}
  .lgrid .lcard:not(.w2) .ph{aspect-ratio:3/4!important}
  .slide .lab{top:26%}
  #foot{padding-top:var(--s15)}
  .foot-cols{grid-template-columns:1fr 1fr;column-gap:var(--s3)}
  .foot-cols ul:last-child{grid-column:1/-1}
}
@media (max-width:600px){
  .split{grid-template-columns:1fr}
  .split a{aspect-ratio:.808}
  .foot-cols{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .inbox-row{grid-template-columns:1fr}
  .inbox-row dl{grid-template-columns:1fr}
  .steps li{grid-template-columns:var(--s5) 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- static site additions ---------- */
.muted{color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 var(--s1)}
.crumbs li+li::before{content:"/";margin-right:var(--s1);font-weight:400}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.partof{margin-top:var(--s3)}
.hero-fig{margin:var(--s5) 0}
.hero-fig img,.fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#e6e6e6}
.short{border:1px solid var(--fg);border-radius:var(--r);padding:var(--s3) var(--s3) var(--s1);margin:0 0 var(--s5);max-width:62ch}
.short .lbl,.toc .lbl,.related .lbl{margin:0 0 var(--s2)}
.short .bul{margin:0 0 var(--s2)}
.toc{margin:0 0 var(--s6);max-width:62ch}
.toc ol{counter-reset:t;border-top:1px solid var(--fg)}
.toc li{counter-increment:t;border-bottom:1px solid var(--soft)}
.toc li a{display:grid;grid-template-columns:var(--s4) 1fr;padding:var(--s1) 0;font-size:var(--t0);line-height:var(--l0)}
.toc li a::before{content:counter(t);font-weight:600}
.toc li a:hover span,.toc li a:hover{text-decoration:underline;text-underline-offset:3px}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:600}
.num{margin:0 0 var(--s2);max-width:62ch;counter-reset:n}
.num li{position:relative;padding-left:var(--s4);margin-bottom:var(--s1);line-height:var(--l0);counter-increment:n}
.num li::before{content:counter(n)".";position:absolute;left:0;font-weight:600}
.chart{margin:var(--s5) 0;max-width:100%}
.chart .ct{font-weight:600;text-transform:uppercase;margin:0 0 var(--s2)}
.chart figcaption{text-transform:uppercase;padding-top:var(--s2)}
.chart .cn{font-size:var(--t-1);line-height:var(--l-1);margin-top:var(--s2);color:var(--muted)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:var(--t0);line-height:var(--l0);min-width:520px}
.cmp th,.cmp td{border-top:1px solid var(--fg);padding:var(--s2) var(--s3) var(--s2) 0;text-align:left;vertical-align:top}
.cmp thead th{font-weight:600;text-transform:uppercase;border-top:0;border-bottom:1px solid var(--fg);padding-top:0}
.cmp tbody th{font-weight:600;width:26%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:1px solid var(--fg)}
.cmp.compact{min-width:0}
@media (max-width:560px){.cmp.compact th,.cmp.compact td{padding-right:var(--s2)}.cmp.compact tbody th{width:38%}}
.barlist li{display:grid;grid-template-columns:minmax(112px,224px) 1fr auto;gap:var(--s2);align-items:center;padding:var(--s2) 0;border-top:1px solid var(--fg);font-size:var(--t0);line-height:var(--l0)}
.barlist li:last-child{border-bottom:1px solid var(--fg)}
.bt{display:block;height:var(--s2);border-radius:var(--r);background:#e6e6e6;overflow:hidden}
.bt i{display:block;height:100%;background:var(--fg)}
.bt i.g1{background:#8c8c8c}.bt i.g2{background:#bdbdbd}
.bv{font-weight:600;white-space:nowrap}
.checklist{max-width:62ch}
.checklist li{position:relative;padding:var(--s2) 0 var(--s2) var(--s5);border-top:1px solid var(--fg);line-height:var(--l0)}
.checklist li:last-child{border-bottom:1px solid var(--fg)}
.checklist li::before{content:"";position:absolute;left:0;top:var(--s2);width:var(--s3);height:var(--s3);border:1.5px solid var(--fg);border-radius:var(--r)}
.checklist li::after{content:"";position:absolute;left:9px;top:20px;width:6px;height:11px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(40deg)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--fg);border-left:1px solid var(--fg)}
.week li{border-right:1px solid var(--fg);border-bottom:1px solid var(--fg);padding:var(--s2);min-height:120px}
.week b{display:block;font-weight:600;text-transform:uppercase;margin-bottom:var(--s1)}
.week span{display:block;font-size:var(--t-1);line-height:var(--l-1)}
.tl li{display:grid;grid-template-columns:144px 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--fg);line-height:var(--l0)}
.tl li:last-child{border-bottom:1px solid var(--fg)}
.tl b{font-size:var(--t-1);line-height:var(--l0);font-weight:600;text-transform:uppercase}
.defs{max-width:62ch;margin:0 0 var(--s3)}
.defs>div{display:grid;grid-template-columns:minmax(112px,192px) 1fr;gap:var(--s2);border-top:1px solid var(--fg);padding:var(--s2) 0;line-height:var(--l0)}
.defs>div:last-child{border-bottom:1px solid var(--fg)}
.defs dt{font-size:var(--t-1);font-weight:600;text-transform:uppercase;line-height:var(--l0)}
.defs dd{margin:0}
.say{max-width:62ch}
.say li{padding:var(--s2) 0;border-top:1px solid var(--fg);font-size:var(--t1);line-height:var(--l1)}
.say li:last-child{border-bottom:1px solid var(--fg)}
.pull{font-size:var(--t3);line-height:var(--l3);font-weight:600;letter-spacing:-.02em;margin:var(--s7) 0!important;max-width:24ch!important;text-wrap:balance}
.faqs{margin-top:var(--s8)}
.faqs>h2{margin:0 0 var(--s2)}
.faqs .qa h3{margin:var(--s4) 0 var(--s1)}
.faqs .qa p{margin-bottom:0}
.faqs.accordion>h2{position:absolute;left:-9999px}
.faqs.accordion{margin-top:0}
.guide{margin-top:var(--s8)}
.guide h2,.sources h2{margin:0 0 var(--s3)}
.guide li a{display:block;padding:var(--s2) 0;border-top:1px solid var(--fg)}
.guide li:last-child a{border-bottom:1px solid var(--fg)}
.guide li a span{display:block}
.guide li a small{display:block;font-size:var(--t0);line-height:var(--l0);margin-top:var(--s1);color:var(--muted);max-width:62ch}
.guide li a:hover span{text-decoration:underline;text-underline-offset:3px}
.sources{margin-top:var(--s7)}
.sources .bul li span{color:var(--muted);font-size:var(--t-1)}
.sources a{text-decoration:underline;text-underline-offset:3px}
.note-review{font-size:var(--t-1);line-height:var(--l0);max-width:62ch;margin-top:var(--s6);color:var(--muted)}
.editorial{margin-top:var(--s2)}
.hubmore{margin-top:var(--s3)}
.hubmore span{margin-left:var(--s2);color:var(--muted);font-weight:400}
.hubintro{margin-top:var(--s6)}
.hubintro p{max-width:62ch}
.subsec{margin-top:var(--gap-sec)}
.subsec>h2{margin:0 0 var(--s2)}
.sublead{max-width:62ch;line-height:var(--l0);margin:0 0 var(--s3)}
.lcard .thumb{display:block;position:relative;background:#e6e6e6;overflow:hidden}
.lcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lcard.pillar .cap b::before{content:"Guide";display:inline-block;margin-right:var(--s1);padding:0 4px;border:1px solid currentColor;border-radius:var(--r);font-size:inherit;line-height:inherit}
html[lang="fr"] .lcard.pillar .cap b::before{content:"Guide"}
.intro{max-width:var(--max);margin-left:auto;margin-right:auto;padding-top:var(--s3);padding-bottom:var(--s3)}
.intro-t{max-width:40ch}
.intro-l{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s4);font-size:var(--t0);font-weight:600}
.topics{max-width:var(--max);margin-left:auto;margin-right:auto}
.topics>h2{margin-bottom:var(--s4)}
.topics ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.topics a{display:block;border-top:1px solid var(--fg);padding-top:var(--s2);height:100%}
.topics b{display:block}
.topics span{display:block;margin-top:var(--s1);font-size:var(--t0);line-height:var(--l0)}
.topics em{display:block;margin-top:var(--s2);font-style:normal;text-transform:uppercase;font-weight:600;color:var(--muted)}
.topics a:hover b{text-decoration:underline;text-underline-offset:3px}
.before{border:1px solid var(--fg);border-radius:var(--r);padding:var(--s3) var(--s3) var(--s1);margin-top:var(--s5);max-width:62ch}
.before h2{margin:0 0 var(--s2)}
.before p{margin-bottom:var(--s2)}
.before p a{font-weight:600}
.dlist[hidden],.dgrid[hidden]{display:none}
.dlist .you a{font-style:normal}
@media (max-width:1024px){
  .week{grid-template-columns:1fr;border-left:0}
  .week li{display:grid;grid-template-columns:var(--s9) 1fr;min-height:0;border-right:0;border-top:0;padding:var(--s2) 0;border-bottom:1px solid var(--fg)}
  .week{border-top:1px solid var(--fg)}
  .week b{margin:0}
  .topics ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pull{font-size:var(--t2);line-height:var(--l2)}
  .tl li{grid-template-columns:96px 1fr}
}
@media (max-width:600px){
  .topics ul{grid-template-columns:1fr}
  .barlist li{grid-template-columns:1fr auto;gap:var(--s1) var(--s2)}
  .barlist .bt{grid-column:1/-1;order:3}
  .defs>div{grid-template-columns:1fr;gap:0}
}

/* real photos (see photos.py) replace the grey placeholders; always black and white, whatever the file */
.ph img,.slide img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.slide.has-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 40%),linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 45%)}
.split .ph.has-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 42%)}

/* ===================== Articles : mise en page magazine ===================== */
/* Titre et grand visuel côte à côte, sommaire collant sur le côté, sections numérotées (01, 02…) avec le même trait que l'espace privé. */
.art-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:start}
.art-hero{margin:0;aspect-ratio:4/5;overflow:hidden;background:#e6e6e6}
.art-hero img{display:block;width:100%;height:100%;object-fit:cover}
.art-body{display:grid;grid-template-columns:minmax(0,720px)}
.art-body.has-side{grid-template-columns:256px minmax(0,720px);column-gap:var(--s8)}
.art-main{min-width:0}
.art-side .toc{position:sticky;top:calc(var(--nav-h) + var(--s3));margin:0;max-height:calc(100vh - var(--nav-h) - var(--s6));overflow:auto}
.art-side .toc ol{border-top:2px solid var(--fg)}
.art-side .toc li{border-bottom:1px solid #e2e2e2}
.art-side .toc li a{grid-template-columns:var(--s4) 1fr;padding:var(--s1) 0;font-size:var(--t-1);line-height:var(--l-1);color:var(--muted)}
.art-side .toc li a[aria-current],.art-side .toc li a:hover{color:var(--fg);text-decoration:none}
.art-side .toc li a[aria-current]::before,.art-side .toc li a:hover::before{color:var(--fg)}
.toc li a::before{content:counter(t,decimal-leading-zero)}
/* « En bref » : un bloc noir, le premier repère de la page */
.art .short{background:var(--fg);color:var(--bg);border-color:var(--fg);padding:var(--s4) var(--s4) var(--s2);margin:0 0 var(--s7);max-width:none}
.art .short .bul li::before{background:var(--bg)}
.art .short a{color:inherit}
/* Sections numérotées : le numéro, le trait, le titre */
/* La frise : un rail et des jalons */
.tl{position:relative;padding-left:var(--s5)}
.tl::before{content:"";position:absolute;left:7px;top:var(--s3);bottom:var(--s3);width:2px;background:var(--fg)}
.tl li{display:block;position:relative;padding:var(--s2) 0;border-top:0}
.tl li:last-child{border-bottom:0}
.tl li i{position:absolute;left:calc(-1 * var(--s5));top:var(--s3);width:var(--s2);height:var(--s2);border-radius:var(--r);background:var(--fg)}
.tl b{display:block;margin-bottom:var(--s1)}
.tl span{display:block}
/* Les listes à cocher : un panneau gris clair */
.chart.check{background:#f4f4f4;border-radius:var(--r);padding:var(--s3)}
.chart.check .checklist{max-width:none}
.chart.check .checklist li{border-top-color:#d6d6d6}
.chart.check .checklist li:last-child{border-bottom:0}
.chart.check .checklist li:first-child{border-top:0}
/* Les phrases à reprendre : des cartes */
.say ul{display:grid;gap:var(--s2)}
.say li,.say li:last-child{border:1px solid var(--fg);border-radius:var(--r);padding:var(--s3)}
/* Les tableaux : un en tête noir */
.tablewrap{border-radius:var(--r)}
.cmp thead th{background:var(--fg);color:var(--bg);padding:var(--s1) var(--s2);border-bottom:0}
.cmp tbody th,.cmp tbody td{padding-left:var(--s2)}
/* Les citations : le trait épais au dessus */
.pull{border-top:2px solid var(--fg);padding-top:var(--s3)}
/* À lire aussi : des cartes avec leur image */
.related .rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);border-top:2px solid var(--fg);padding-top:var(--s3)}
.related a.rcard{display:block;padding:0;text-transform:none;font-size:var(--t0);line-height:var(--l0)}
.rcard .thumb{display:block;aspect-ratio:4/5;overflow:hidden;background:#e6e6e6}
.rcard .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.rcard:hover .thumb img{transform:scale(1.03)}
.related a.rcard small{display:block;margin:var(--s2) 0 0;font-size:var(--t-1);line-height:var(--l-1);font-weight:600;text-transform:uppercase}
.rcard .rt{display:block;margin-top:var(--s1);font-size:var(--t1);line-height:var(--l1);font-weight:600}
.rcard:hover .rt{text-decoration:underline;text-underline-offset:3px}
.art>.related .hubmore{margin-top:var(--s4)}
@media (max-width:1024px){
  .art-top{grid-template-columns:1fr;gap:var(--s4)}
  .art-hero{aspect-ratio:16/9}
  .art-body,.art-body.has-side{grid-template-columns:minmax(0,1fr)}
  .art-side .toc{position:static;max-height:none;margin:0 0 var(--s6)}
  .art-side .toc li a{font-size:var(--t0);line-height:var(--l0)}
  .related .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
}
@media (max-width:600px){
  .art .short{padding:var(--s3) var(--s3) var(--s1)}
  .chart.check{padding:var(--s2)}
}
.related .hubmore a{display:inline;padding:0;font-size:var(--t-1);line-height:var(--l-1);text-transform:uppercase}

/* ===================== Les couleurs de l'espace privé ===================== */
/* Une couleur douce par rubrique, la crème et le beige pour les encadrés, le vert tendre pour ce qui est coché.
   Le noir reste pour le texte, les boutons et les filets ; les couleurs disent de quelle rubrique on parle. */
:root{
  --done:#e8f8d6;--done-l:#a6d98a;--done-t:#2f6b16;
  --cream:#fbfaf3;--tan:#d6c19d;--tan-t:#6b5a3a;
  --wait:#fff4d6;--wait-l:#e7c66c;--wait-t:#7a5a00;
  --info:#edf3ff;--info-l:#a9c2ec;--info-t:#22468a;
  --rose:#fde8f0;--rose-l:#eaa6c3;--rose-t:#8f1d4f;
  --lilac:#f0ecff;--lilac-l:#b9a9ef;--lilac-t:#4b3a9a;
  --c:var(--cream);--c-l:var(--tan);--c-t:var(--tan-t);
}
[data-cat="body-health"]{--c:var(--rose);--c-l:var(--rose-l);--c-t:var(--rose-t)}
[data-cat="desire-exploration"]{--c:var(--lilac);--c-l:var(--lilac-l);--c-t:var(--lilac-t)}
[data-cat="privacy-safety"]{--c:var(--info);--c-l:var(--info-l);--c-t:var(--info-t)}
[data-cat="inside-agency"]{--c:var(--wait);--c-l:var(--wait-l);--c-t:var(--wait-t)}

/* L'étiquette de rubrique : la même que dans l'espace privé, avec son « • » */
.lcard[data-cat] .cap b,.rcard small,.topics a[data-cat] b{display:inline-flex;align-items:center;gap:var(--s1);height:var(--s3);padding:0 var(--s1);margin-bottom:var(--s1);border:1px solid var(--c-l);border-radius:var(--r);background:var(--c);color:var(--c-t);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;text-transform:uppercase}
.lcard[data-cat] .cap b::after,.rcard small::after,.topics a[data-cat] b::after{content:"\2022"}
.related a.rcard small{display:inline-flex}
.lcard.pillar .cap b::before{border-radius:var(--r)}
.topics a[data-cat]{border-top:2px solid var(--c-l)}
.topics a[data-cat]:hover b{text-decoration:none;border-color:var(--c-t)}

/* L'article prend la couleur de sa rubrique */
.art .crumbs a{color:var(--c-t)}
.art .short{background:var(--c);color:var(--fg);border:1px solid var(--c-l)}
.art .short .bul li::before{background:var(--c-t)}
.art .short .lbl{color:var(--c-t)}
.art .prose h2::before{color:var(--c-t)}
.art-side .toc li a[aria-current],.art-side .toc li a[aria-current]::before{color:var(--c-t)}
.art-side .toc ol{border-top-color:var(--c-l)}
.tl::before{background:var(--c-l,var(--fg))}
.tl li i{background:var(--c-t,var(--fg))}
.art .cmp thead th{background:var(--c-t)}
.art .pull{border-top-color:var(--c-l)}
.art .prose a{text-decoration-color:var(--c-l)}
.art .prose a:hover{text-decoration-color:var(--c-t)}
.related .rgrid{border-top-color:var(--fg)}
.hub .crumbs a{color:var(--c-t)}
.hub .catnav a[aria-current="true"]{text-decoration-color:var(--c-l);text-decoration-thickness:3px}

/* Les listes à cocher : crème et beige, coches vert tendre, comme les pièces de la semaine */
.chart.check{background:var(--cream);border:1px solid var(--tan)}
.chart.check .checklist li{border-top-color:rgba(0,0,0,.08)}
.checklist li::before{border-color:var(--done-l);background:var(--done)}
.checklist li::after{border-color:var(--done-t)}
/* Les phrases à reprendre : cartes à la couleur de la rubrique */
.art .say li{background:var(--c);border-color:var(--c-l)}
/* Les encadrés de l'agence : crème et beige */
.cta,.before,.you-box{background:var(--cream);border-color:var(--tan)}
.note{background:var(--wait);border-color:var(--wait-l)}
.panel{background:var(--cream);border-color:var(--tan)}
/* Les barres des graphiques : les couleurs des revenus */
.bt i{background:#a07cf0}.bt i.g1{background:#5b8def}.bt i.g2{background:#9db4d8}


/* ===================== Devenir modèle : une étape à la fois ===================== */
/* La ligne des cinq étapes : le numéro, le trait, le nom ; le même motif que l'espace privé */
.steps-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s6)}
.steps-nav li{display:grid;gap:var(--s1);color:var(--muted)}
.steps-nav .n{font-size:var(--t-1);line-height:var(--l-1);font-weight:600}
.steps-nav .t{position:relative;padding-top:var(--s2);border-top:2px solid #e2e2e2;font-size:var(--t-1);line-height:var(--l-1);font-weight:600;text-transform:uppercase}
.steps-nav .t::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.steps-nav li.now,.steps-nav li.done{color:var(--fg)}
.steps-nav li.now .t::before{transform:scaleX(1)}
.steps-nav li.done .t::before{transform:scaleX(1);background:var(--done-l)}
.steps-nav li.done .n::after{content:"  \2713";color:var(--done-t)}
/* Chaque étape : un grand titre, les champs, Retour et Continuer */
.step+.step{margin-top:var(--s8)}
#apply.stepped .step{margin-top:0}
#apply.stepped .step:not(.on){display:none}
#apply.stepped .step.on{animation:stepin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-h{margin:0 0 var(--s4);outline:none}
.step-n{display:block;margin-bottom:var(--s1);color:var(--muted)}
.step-a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s1)}
#apply:not(.stepped) .step-a{display:none}
.step .btns{margin-top:var(--s3)}
/* Le récapitulatif avant l'envoi : crème et beige, comme les encadrés de l'agence */
.recap{background:var(--cream);border:1px solid var(--tan);border-radius:var(--r);padding:var(--s3);margin:0 0 var(--s4)}
.recap .lbl{margin:0 0 var(--s2)}
.recap dl{margin:0}
.recap dl>div{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:var(--s2);align-items:baseline;padding:var(--s1) 0;border-top:1px solid rgba(0,0,0,.08)}
.recap dt{font-size:var(--t-1);line-height:var(--l0);font-weight:600;text-transform:uppercase}
.recap dd{margin:0;overflow-wrap:anywhere}
.recap button{font-size:var(--t-1);font-weight:600;text-transform:uppercase}
@media (max-width:1024px){
}
@media (max-width:600px){
  .steps-nav{gap:var(--s1)}
  .steps-nav .t span{display:none}
  .recap dl>div{grid-template-columns:1fr auto}
  .recap dd{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){#apply.stepped .step.on{animation:none}}


/* ===================== Corrections et nouvelles pièces ===================== */
/* L'étiquette de rubrique : un bloc à part entière, jamais collé à l'image ni plus large que la carte */
.lcard[data-cat] .cap b,.rcard small,.topics a[data-cat] b{display:flex;width:max-content;max-width:100%;height:auto;min-height:var(--s3);padding:4px var(--s1);white-space:normal;margin:0 0 var(--s1)}
.lcard .cap{padding-top:var(--s2)}
.related a.rcard small{display:flex}





/* ===================== Gabarit commun et rôles typographiques ===================== */
/* Les mêmes rôles que l'espace privé, sur l'échelle 1,25 (base 16 px), interlignes sur la grille de 8 :
     Titre de page     h1   49 / 56   (39 / 48 tablette, 31 / 40 téléphone)   600
     Titre de section  h2   31 / 40   (25 / 32 téléphone)                     600
     Sous titre        h3   20 / 28   (16 / 24 sur les petites cartes)        600
     Chapeau                20 / 28                                           400
     Texte                  16 / 24                                           400
     Étiquette              12,8 / 16, capitales espacées                     600 (400 dans le pied de page)
   Les capitales ne servent qu'aux étiquettes : jamais aux titres ni aux phrases.
   Chaque page intérieure s'ouvre au même endroit, avec le même en tête : une ligne de repère (fil d'Ariane ou étiquette),
   le h1, le chapeau. Tout tient dans le même cadre de 1440 px que la barre et le pied de page, donc chaque titre
   commence exactement sous le logo. */
:root{--max:1440px;--top:calc(var(--nav-h) + var(--s12));--gap-head:var(--s8);--gap-sec:var(--s12);
  --edge:max(var(--gl),calc((100% - var(--max)) / 2 + var(--gx)))}
.wrap{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--gl);padding-right:var(--gr)}
.page{padding-top:var(--top)}

/* h1 */
.disp{font-family:var(--f-body);font-size:var(--t5);line-height:var(--l5);font-weight:600;letter-spacing:-.025em;text-wrap:balance;max-width:24ch}
.disp em{font-style:normal;font-weight:inherit}
/* h2 */
.sect-title,.latest>h2,.topics>h2,.subsec>h2,.prose h2,.h2,.faqs>h2,.guide h2,.sources h2,.step-h,.dlist a,.intro-t{font-size:var(--t3);line-height:var(--l3);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
/* h3 */
.prose h3,.faqs .qa h3,details.q summary,.steps .st,.panel h2,.before h2,.guide li a span,.cap span,.rcard .rt,.dname,.cta p{font-size:var(--t1);line-height:var(--l1);font-weight:600;letter-spacing:-.01em}
/* chapeau */
.lead,.say li,.hero-base{font-size:var(--t1);line-height:var(--l1);font-weight:400;text-wrap:pretty}
.lead{margin-top:var(--s3);max-width:48ch}
/* étiquettes */
.kick,.crumbs ol,.by,.partof,.editorial,.hubmore,.related .lbl,.short .lbl,.toc .lbl,.step-n,.recap .lbl,.recap dt,.recap button,.fld>label,.fld>legend,
.cbox-k,.cbox-copy,.copy,.mx,.viewtog,.viewall,.hero-title,.hero-cats a,.hero-leg,.split .leg,.ph .ph-l,.slide .lab,.fig figcaption,.chart figcaption,.chart .ct,
.cmp thead th,.week b,.tl b,.defs dt,.inbox-row dt,.topics em,.steps-nav .t,.steps-nav .n,.menu-lang,#langbar{font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#foot,.menu-legal{font-size:var(--t-1);line-height:var(--l-1);font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.err{font-size:var(--t-1);line-height:var(--l-1);font-weight:600}
.formfoot{font-size:var(--t-1);line-height:var(--l-1)}
.kick{color:var(--muted)}

/* L'en tête de page */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s6)}
.phead-t{min-width:0;flex:1 1 480px}
.phead .crumbs,.phead .kick{margin:0 0 var(--s3)}
.crumbs [aria-current]{color:var(--muted)}
/* Le repère tient toujours sur une ligne : le dernier élément se coupe plutôt que de pousser le titre vers le bas */
.phead .crumbs ol{flex-wrap:nowrap;min-width:0}
.phead .crumbs li{white-space:nowrap}
.phead .crumbs li:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.phead-a{flex:none}
.phead+*{margin-top:var(--gap-head)}
.phead+.catnav{margin-top:var(--s5)}
.psec{margin-top:var(--gap-sec)}
.catnav+*{margin-top:var(--gap-head)}
.morelist{display:grid;gap:var(--s2)}
.morelist .hubmore{margin:0}

/* Article : le titre et le grand visuel partent de la même ligne */
.art-top.phead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:start}
.art-top .disp{max-width:22ch}
.art-top .lead{max-width:40ch}
.art>.related{margin-top:var(--gap-sec);border-top:0;padding-top:0}
.art .faqs{margin-top:var(--s9)}
/* Sections numérotées, dans les articles comme dans les pages longues : le numéro, le trait, le titre */
.art .prose,.prose.numbered{counter-reset:h}
.prose h2{margin:var(--s8) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--s4) 0 var(--s1)}
.art .prose h2,.prose.numbered h2{counter-increment:h}
.art .prose h2::before,.prose.numbered h2::before{content:counter(h,decimal-leading-zero);display:block;padding-bottom:var(--s1);margin-bottom:var(--s2);border-bottom:2px solid var(--fg);color:var(--c-t);font-size:var(--t-1);line-height:var(--l-1);letter-spacing:.04em}

/* Annuaire */
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s3)}
.dcard .ph{aspect-ratio:3/4}
.you-box{aspect-ratio:3/4;border:1px solid var(--tan);border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--cream)}
.dname{display:block;padding-top:var(--s2)}
.dlist a{display:block;padding:var(--s1) 0}
.viewtog button{text-transform:inherit;letter-spacing:inherit}

/* Fiche modèle : même gabarit que l'article, le nom à gauche, les photos à droite */
.mtop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:start}
.mtop>.phead{display:block}
.mtop .mslider{margin-top:0;position:relative}
.mslides{position:relative;width:100%}
.mx{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s4)}
.mnote{margin-top:var(--s2);max-width:48ch;color:var(--muted)}
.mctrl{display:flex;gap:var(--s1);margin-top:var(--s2)}
.marr{width:var(--s6);height:var(--s6);display:flex;align-items:center;justify-content:center;border:1px solid var(--fg);border-radius:var(--r);background:var(--bg)}
.marr svg{width:9px;height:18px}
.marr:hover{background:var(--fg);color:var(--bg)}



@media (max-width:1024px){
  :root{--top:calc(var(--nav-h) + var(--s7));--gap-head:var(--s6);--gap-sec:var(--s9)}
  .disp{font-size:var(--t4);line-height:var(--l4)}
  .art-top.phead,.mtop{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s2)}
}
@media (max-width:600px){
  :root{--top:calc(var(--nav-h) + var(--s5))}
  .disp{font-size:var(--t3);line-height:var(--l3)}
  .sect-title,.latest>h2,.topics>h2,.subsec>h2,.prose h2,.h2,.faqs>h2,.guide h2,.sources h2,.step-h,.dlist a,.intro-t{font-size:var(--t2);line-height:var(--l2)}
  .cap span,.dname{font-size:var(--t0);line-height:var(--l0)}
  .phead-a{flex:1 1 100%}
}

/* ===================== Contact : une adresse, rien d'autre ===================== */
/* La fenêtre n'a ni cadre ni ombre : un voile blanc et un flou couvrent la page, l'adresse est posée au milieu,
   en taille de titre mais en graisse normale. La croix prend exactement la place du menu. La page Contact reprend
   exactement la même composition, au centre de l'écran. */
.cbox{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px) saturate(.9);backdrop-filter:blur(24px) saturate(.9);animation:cfade .3s ease both}
.cbox[hidden]{display:none}
.cbox-bar{flex:none;height:var(--nav-h);width:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:flex-end;padding-left:var(--gl);padding-right:var(--gr)}
.cbox-x{width:var(--s5);height:var(--s5);display:grid;place-items:center;margin-right:calc(-1 * var(--s1));border-radius:var(--r);opacity:.7;transition:opacity .2s}
.cbox-x:hover{opacity:1}
.cbox-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gr) var(--nav-h) var(--gl);animation:crise .5s cubic-bezier(.2,.7,.2,1) .05s both}
.cbox-k{color:var(--muted);margin:0 0 var(--s3)}
.cbox-mail{font-size:var(--t4);line-height:var(--l4);font-weight:400;letter-spacing:-.02em;overflow-wrap:anywhere}
.cbox-mail a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--soft);text-underline-offset:8px;transition:text-decoration-color .2s}
.cbox-mail a:hover{text-decoration-color:var(--fg)}
.cbox-copy{margin-top:var(--s4);color:var(--muted);transition:color .2s}
.cbox-copy:hover,.cbox-copy.done{color:var(--fg)}
.cbox-copy.done::before{content:"\2713";margin-right:var(--s1)}
.csolo{display:flex;min-height:100vh;min-height:100svh;padding-top:var(--nav-h)}
.csolo .cbox-in{animation:crise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes cfade{from{opacity:0}to{opacity:1}}
@keyframes crise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:600px){.cbox-mail{font-size:var(--t2);line-height:var(--l2)}}
@media (prefers-reduced-motion:reduce){.cbox,.cbox-in{animation:none}}

/* ===================== Devenir modèle : comme la fenêtre Contact ===================== */
/* Une colonne au centre, rien autour. Chaque écran a la même forme : la mention, une grande phrase en graisse normale,
   puis ce qu'il faut remplir. Les champs n'ont qu'un trait dessous ; la progression est un trait fin en cinq segments,
   absent de l'écran d'accueil. La page de remerciement reprend la même colonne. */
.asolo{min-height:100vh;min-height:100svh;padding-left:var(--gl);padding-right:var(--gr)}
.acol{max-width:640px;margin:0 auto}
.asolo .steps-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);margin:0 0 var(--s6)}
.asolo .steps-nav .n,.asolo .steps-nav .t>span{display:none}
.asolo .steps-nav .t{padding-top:0;border-top:2px solid #ececec}
.asolo .steps-nav li.done .t::before{background:var(--fg)}
#apply[data-cur="0"] .steps-nav{visibility:hidden}
.asolo .step-h{font-size:var(--t4);line-height:var(--l4);font-weight:400;letter-spacing:-.02em;margin:0 0 var(--s6);text-wrap:balance}
.asolo .step-h em{font-style:normal}
.asolo .step-n{color:var(--muted);margin:0 0 var(--s3)}
.asolo #apply.stepped .step.on{animation:crise .45s cubic-bezier(.2,.7,.2,1)}
.a-note{color:var(--muted);max-width:52ch;margin:calc(-1 * var(--s3)) 0 var(--s4)}
.a-links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:0 0 var(--s6);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.a-links a{text-decoration:underline;text-decoration-color:var(--soft);text-underline-offset:4px}
.a-links a:hover{text-decoration-color:var(--fg)}
/* Les champs : un trait, pas de cadre */
.asolo .fgrid{column-gap:var(--s4)}
.asolo .fld{margin-bottom:var(--s5)}
.asolo .fld>label,.asolo .fld>legend{color:var(--muted)}
.asolo .fld>label.chk{color:var(--fg)}
.asolo .in{height:var(--s7);border:0;border-bottom:1px solid var(--soft);border-radius:0;padding:0;background-color:transparent;font-size:var(--t1);transition:border-color .2s,box-shadow .2s}
.asolo select.in{background-position:right 0 center;padding-right:var(--s4)}
.asolo textarea.in{min-height:var(--s12);padding:var(--s1) 0;line-height:var(--l1)}
.asolo .in:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
.asolo .in::placeholder{color:var(--soft)}
.asolo .fld.bad .in{border-bottom:2px solid var(--fg);padding-left:0}
.asolo .opt span{border-color:var(--soft);font-size:var(--t0)}
.asolo .opt input:checked+span{border-color:var(--fg)}
.asolo .chk .box{border-color:var(--soft)}
/* Retour : un simple mot ; Continuer : le bouton */
.asolo .step-a{margin-top:var(--s2)}
.asolo [data-act="back"]{border:0;background:none;min-height:var(--s6);padding:0;color:var(--muted);letter-spacing:.04em}
.asolo [data-act="back"]:hover{color:var(--fg);background:none}
/* Le récapitulatif : des lignes, sans encadré */
.asolo .recap{background:none;border:0;border-radius:0;padding:0}
.asolo .recap dl>div{border-top-color:#ececec}
.asolo .formfoot{color:var(--muted)}
/* Merci */
.a-next{margin:var(--s8) 0 var(--s2)}
.asolo .steps{max-width:none}
@media (max-width:600px){
  .asolo .step-h{font-size:var(--t2);line-height:var(--l2);margin-bottom:var(--s5)}
  .asolo .steps-nav{margin-bottom:var(--s5)}
}
@media (prefers-reduced-motion:reduce){.asolo #apply.stepped .step.on{animation:none}}
/* Sur un écran tactile, un bouton touché ne reste pas dans son état de survol */
@media (hover:none){.btn:hover{background:var(--fg);color:var(--bg)}.btn.alt:hover{background:var(--bg);color:var(--fg)}.asolo [data-act="back"]:hover{color:var(--muted)}}

/* ===================== Devenir modèle : un écran fixe ===================== */
/* Chaque étape tient dans la hauteur de l'écran : la page ne défile pas, seul le contenu change.
   Pas de pied de page sous Contact, Devenir modèle et Merci. Sur un très petit écran, la page peut encore défiler plutôt que de couper. */
.asolo{padding-top:calc(var(--nav-h) + var(--s8))}
.asolo .steps-nav{margin-bottom:var(--s5)}
.asolo .step-h{margin-bottom:var(--s5)}
.asolo .fld{margin-bottom:var(--s4)}
.asolo .step-a{margin-top:var(--s3)}
/* Les photos : quatre cadres, le dessin du cadrage attendu, puis la photo choisie */
.shot-note{margin:calc(-1 * var(--s3)) 0 var(--s4)}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.shot{position:relative;display:grid;gap:var(--s1);cursor:pointer;min-width:0}
.shot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.shot-f{position:relative;display:grid;place-items:center;aspect-ratio:3/4;border:1px dashed var(--soft);border-radius:var(--r);background:#fafafa;overflow:hidden;transition:border-color .2s,background .2s}
.shot-f svg{width:44%;height:auto;fill:none;stroke:#b5b5b5;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.shot-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-f::after{content:"+";position:absolute;right:var(--s1);bottom:4px;font-size:var(--t1);line-height:var(--l1);color:#9a9a9a}
.shot:hover .shot-f{border-color:var(--fg);background:var(--bg)}
.shot input:focus-visible+.shot-f{outline:2px solid var(--fg);outline-offset:3px}
.shot.has .shot-f{border-style:solid;border-color:var(--fg)}
.shot.has .shot-f::after{content:"\2713";right:6px;bottom:6px;width:var(--s3);height:var(--s3);display:grid;place-items:center;border-radius:var(--r);background:var(--fg);color:var(--bg);font-size:var(--t-1);line-height:1}
.shot-l{font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.shot.has .shot-l{color:var(--fg)}
.fld.bad .shot:not(.has) .shot-f{border-color:var(--fg);border-style:solid}
/* Le récapitulatif : une ligne par étape */
.asolo .recap{margin:0 0 var(--s4)}
.asolo .recap dl>div{grid-template-columns:minmax(96px,30%) minmax(0,1fr) auto;padding:var(--s1) 0;align-items:baseline}
.asolo .recap dt{color:var(--muted)}
.asolo .recap dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asolo .step[data-step="8"] .fld{margin-bottom:var(--s2)}
@media (max-width:600px){
  .asolo{padding-top:calc(var(--nav-h) + var(--s4))}
  .asolo .steps-nav{margin-bottom:var(--s4)}
  .asolo .step-h{margin-bottom:var(--s4)}
  .shots{gap:var(--s1)}
  .shot-f::after{display:none}
  .shot.has .shot-f::after{display:grid;width:var(--s2);height:var(--s2);font-size:10px;right:4px;bottom:4px}
  .asolo .recap dl>div{grid-template-columns:88px minmax(0,1fr) auto;gap:0 var(--s2)}
  .asolo .recap dd{grid-column:auto;grid-row:auto}
}
/* Écrans peu hauts : des marges plus serrées pour que la dernière étape tienne encore sans défiler */
@media (max-height:760px){
  .asolo{padding-top:calc(var(--nav-h) + var(--s4))}
  .asolo .steps-nav{margin-bottom:var(--s3)}
  .asolo .step-h{margin-bottom:var(--s3)}
  .asolo .step-n{margin-bottom:var(--s2)}
  .asolo .fld{margin-bottom:var(--s3)}
  .asolo .recap{margin-bottom:var(--s3)}
  .asolo .recap dl>div{padding:4px 0}
  .asolo .step-a{margin-top:var(--s2)}
}
@media (max-height:700px) and (max-width:600px){
  .asolo{padding-top:calc(var(--nav-h) + var(--s2))}
  .asolo .step-h{font-size:var(--t1);line-height:var(--l1)}
  .shot-note{margin-bottom:var(--s3)}
  .asolo .steps-nav{margin-bottom:var(--s2)}
  .asolo .recap dl>div{padding:2px 0}
}
/* La progression compte autant de traits que d'étapes */
.asolo .steps-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* ===================== Corrections du 30 octobre, après midi ===================== */
/* La légende des cartes est un bloc : son espace du haut sépare toujours l'étiquette de couleur de l'image */
.lcard .cap{display:block;padding-top:var(--s2)}
.related a.rcard small{margin-top:var(--s2)}
/* Le blog et ses rubriques s'ouvrent sur les quatre couleurs, comme l'accueil */
.phead+.tnav{margin-top:var(--s5)}
.tnav+*{margin-top:var(--gap-head)}
.tnav ul{gap:var(--s2)}
.tnav a,.tnav a[data-cat]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);height:100%;padding:var(--s2);background:var(--c);border:1px solid var(--c-l);border-radius:var(--r);transition:border-color .2s,background .2s}
.tnav a[data-cat] b{margin:0;background:var(--bg)}
.tnav span{margin:0}
.tnav em{margin-top:auto;padding-top:var(--s1)}
.tnav a:hover,.tnav a[aria-current]{border-color:var(--c-t)}
.tnav a:hover b{text-decoration:none}
/* Sur une page de rubrique, la sienne reste en couleur, les autres s'effacent */
.tnav.cur a:not([aria-current]){background:var(--bg)}
.tnav.cur a:not([aria-current]) b{background:var(--c)}
.tnav.cur span{display:none}
@media (max-width:600px){.tnav ul{grid-template-columns:repeat(2,minmax(0,1fr))}.tnav span{display:none}}

/* Annuaire : deux grandes colonnes, chaque créatrice en grand */
.dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s3)}
.dname{padding-top:var(--s2);font-size:var(--t3);line-height:var(--l3);font-weight:600;letter-spacing:-.02em}
.you-box span{font-size:var(--t5);line-height:var(--l5)}
@media (max-width:1024px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s2)}.dname{font-size:var(--t2);line-height:var(--l2)}}
@media (max-width:600px){.dgrid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* L'âge : un nombre entre un moins et un plus, dont les chiffres roulent comme un compteur */
.roll{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.roll-b{flex:none;width:var(--s7);height:var(--s7);display:grid;place-items:center;border:1px solid var(--soft);border-radius:var(--r);background:var(--bg);color:var(--fg);transition:border-color .2s,background .2s,opacity .2s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.roll-b:hover{border-color:var(--fg)}
.roll-b:active{background:var(--cream)}
.roll.at-min [data-roll="-1"],.roll.at-max [data-roll="1"]{opacity:.35}
.roll-on .roll-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.roll-in{width:120px;font-size:var(--t3)}
.roll-n{display:flex;font-size:5.96rem;line-height:1;height:1em;overflow:hidden;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;border-radius:var(--r)}
.roll-n:focus-visible{outline:2px solid var(--fg);outline-offset:6px}
.roll-n.grab{cursor:grabbing}
.roll-c{display:block;height:1em;overflow:hidden}
.roll-s{display:flex;flex-direction:column;will-change:transform}
.roll-s span{display:block;height:1em;line-height:1;text-align:center}
.roll-u{align-self:flex-end;padding-bottom:var(--s2);color:var(--muted);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.roll-on .roll-u{order:4}
.roll-on [data-roll="-1"]{order:1}.roll-on .roll-n{order:2}.roll-on [data-roll="1"]{order:3}

/* L'accord : une phrase, puis la poignée à faire glisser */
.slide-t{max-width:52ch;margin:0 0 var(--s3)}
.slide-t a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--soft)}
.slide-on .slide-box{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.swipe{position:relative;height:var(--s7);border:1px solid var(--soft);border-radius:var(--r);background:#f6f6f4;overflow:hidden;user-select:none;-webkit-user-select:none;transition:border-color .3s,background .3s}
.slide-fill{position:absolute;left:0;top:0;bottom:0;width:var(--s7);background:var(--cream)}
.slide-l,.slide-ok{position:absolute;inset:0;display:grid;place-items:center;padding-left:var(--s7);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.slide-l{background:linear-gradient(90deg,var(--muted) 40%,#c9c9c9 50%,var(--muted) 60%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.2s linear infinite}
.slide-ok{opacity:0;color:var(--done-t);padding-left:0;padding-right:var(--s7);transition:opacity .3s .1s}
.slide-k{position:absolute;left:4px;top:4px;width:calc(var(--s7) - 10px);height:calc(var(--s7) - 10px);display:grid;place-items:center;border-radius:var(--r);background:var(--fg);color:var(--bg);cursor:grab;touch-action:none;z-index:2;transition:background .3s}
.swipe.grab .slide-k{cursor:grabbing}
.slide-k .ck{display:none}
.swipe.done{border-color:var(--done-l);background:var(--done)}
.swipe.done .slide-fill{background:var(--done)}
.swipe.done .slide-l{opacity:0!important}
.swipe.done .slide-ok{opacity:1}
.swipe.done .slide-k{background:var(--done-t);cursor:pointer}
.swipe.done .slide-k .ar{display:none}
.swipe.done .slide-k .ck{display:block}
.fld.bad .swipe{border-color:var(--fg)}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}

/* Les photos : deux croquis, recadrés pour les photos de la tête à la taille, et la carte « Privé » */
.shot-f{background:var(--cream);border:1px solid #ebe4d4;border-style:solid;place-items:end center}
.shot-f svg{width:auto;height:88%;fill:initial;stroke:none;margin-bottom:6%}
.shot-f.half svg{height:100%;margin:0}
.shot-f i{position:absolute;left:var(--s1);top:6px;font-style:normal;font-size:var(--t-1);line-height:var(--l-1);font-weight:600;color:#b9ab90}
.shot-f::after{display:none}
.shot:hover .shot-f{border-color:var(--tan);background:#f7f3e8}
.shot.has .shot-f{border-color:var(--fg)}
.shot.has .shot-f::after{display:grid}
.shot.has .shot-f i{display:none}
.pcard{display:grid;gap:var(--s1);margin-top:var(--s4);padding:var(--s2);background:var(--c);border:1px solid var(--c-l);border-radius:var(--r);max-width:52ch}
.pcard b{display:inline-flex;align-items:center;gap:6px;justify-self:start;height:var(--s3);padding:0 var(--s1);border:1px solid var(--c-l);border-radius:var(--r);background:var(--bg);color:var(--c-t);font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pcard b::after{content:"\2022"}
.pcard p{margin:0;color:var(--fg)}
@media (max-width:600px){
  .roll{gap:var(--s2)}.roll-b{width:var(--s6);height:var(--s6)}.roll-n{font-size:4.77rem}
  .pcard{margin-top:var(--s3);padding:var(--s1) var(--s2) var(--s2)}
  .shot-f i{display:none}
}
@media (max-height:760px){.pcard{margin-top:var(--s3)}}
@media (prefers-reduced-motion:reduce){.slide-l{animation:none;background:none;color:var(--muted)}}
/* Sur téléphone, le récapitulatif tient en lignes simples : le nom de l'étape sur une ligne, la valeur coupée si elle est longue */
@media (max-width:600px){.asolo .recap dl>div{grid-template-columns:118px minmax(0,1fr) auto}.asolo .recap dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slide-t{margin-bottom:var(--s2)}}

/* ===================== Candidature : espacements et planche photos ===================== */
/* Un intitulé se colle à son propre champ et s'éloigne du champ précédent : on sait toujours ce qu'on remplit */
.asolo .fld{margin-bottom:var(--s5)}
.asolo .fld>label,.asolo .fld>legend{margin-bottom:4px}
.asolo .in{height:var(--s6)}
@media (max-height:760px){.asolo .fld{margin-bottom:var(--s4)}}

/* Les photos : une planche de casting. Quatre grands cadres numérotés, un exemple flouté en bleu, le lien pour ajouter la sienne.
   La planche sort de la colonne pour respirer, et sa taille suit la hauteur de l'écran pour que l'étape tienne sans défiler. */
.step[data-step="5"] .fld{margin-bottom:0}
.shots{--sw:min(960px,calc(100vw - var(--gl) - var(--gr)),calc((100vh - 470px) * 3 + 72px));width:var(--sw);margin-left:calc((100% - var(--sw)) / 2);grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
@supports (height:100svh){.shots{--sw:min(960px,calc(100vw - var(--gl) - var(--gr)),calc((100svh - 470px) * 3 + 72px))}}
.shot{display:grid;gap:var(--s2);justify-items:center}
.shot-f,.shot.has .shot-f{display:block;width:100%;aspect-ratio:3/4;border:1px solid var(--soft);border-radius:0;background:var(--info);overflow:hidden}
.shot-f svg{position:absolute;inset:0;width:100%;height:100%;margin:0}
.shot-f i,.shot.has .shot-f i{position:absolute;left:-1px;top:-1px;width:var(--s5);height:var(--s5);display:grid;place-items:center;background:var(--bg);border:1px solid var(--soft);font-style:normal;font-size:var(--t1);line-height:1;font-weight:400;color:var(--fg);z-index:3}
.shot-l{display:inline-flex;align-items:center;gap:6px;color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-align:center}
.shot:hover .shot-f{border-color:var(--info-l);background:var(--info)}
.shot:hover .shot-l{text-decoration-thickness:2px}
/* La photo ajoutée garde le voile bleu : on voit le cadrage, rien de plus */
.shot-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.08);z-index:1}
.shot.has .shot-f::before{content:"";position:absolute;inset:0;background:#6f93dc;mix-blend-mode:color;opacity:.7;z-index:2;pointer-events:none}
.shot.has .shot-f::after{content:"\2713";position:absolute;right:var(--s1);bottom:var(--s1);left:auto;top:auto;width:var(--s4);height:var(--s4);display:grid;place-items:center;border-radius:var(--r);background:var(--info-t);color:var(--bg);font-size:var(--t0);line-height:1;z-index:3}
.shot.has .shot-l{color:var(--info-t)}
.fld.bad .shot:not(.has) .shot-f{border-color:var(--fg)}
/* La carte « Privé » sur une ligne */
.pcard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);max-width:none;margin-top:var(--s4)}
@media (max-width:600px){
  /* Sur téléphone, les quatre photos en deux rangées : tout est visible, rien ne défile de côté */
  .shots{--sw:auto;width:auto;margin-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2)}
  .shot{min-width:0}
  .shot-f i,.shot.has .shot-f i{width:var(--s4);height:var(--s4);font-size:var(--t0)}
  .shot-l{flex-wrap:wrap;justify-content:center}
  .pcard{flex-direction:column;align-items:flex-start}
}
/* Le champ et son intitulé forment un bloc serré (40 px jusqu'au trait) ; deux champs sont séparés par 56 px */
.asolo .fld{margin-bottom:var(--s7)}
.asolo .fld>label,.asolo .fld>legend{margin-bottom:0}
.asolo .in{height:var(--s5);padding-top:var(--s1)}
.asolo select.in{padding-top:var(--s1)}
.asolo textarea.in{padding-top:var(--s1)}
@media (max-height:760px){.asolo .fld{margin-bottom:var(--s6)}}
.step[data-step="5"] .fld,.step[data-step="8"] .fld{margin-bottom:0}
/* Les exemples sont des illustrations : fond bleu pâle, sans voile */
.shot-f{background:#e3e8f3}
.shot:hover .shot-f{border-color:#1e3a8a}

/* Aperçu seulement : la barre de revue du formulaire « Devenir modèle » */
.rv{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--soft);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.08);max-width:calc(100vw - 32px);overflow-x:auto}
.rv-k{padding:0 8px;font-size:var(--t-1);line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.rv button{flex:none;min-width:32px;height:32px;padding:0 8px;border:0;border-radius:var(--r);background:transparent;color:var(--fg);font:inherit;font-size:var(--t-1);line-height:16px;cursor:pointer;white-space:nowrap}
.rv button:hover{background:#f2f2f2}
.rv button[aria-current="step"]{background:var(--fg);color:var(--bg)}
.rv .rv-fill{margin-left:4px;border:1px solid var(--fg)}
.rv button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (max-width:760px){.rv{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:none}body.rv-on .asolo{padding-bottom:64px}}
@media (max-width:760px){.rv-k{display:none}.rv .rv-fill{order:-1;margin:0 4px 0 0}}

/* Cases à cocher (« Comment avez-vous entendu parler de nous ? ») */
.chks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.chk{position:relative;display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--s4);cursor:pointer;font-size:var(--t0);line-height:var(--l0)}
.chk input{position:absolute;left:0;top:50%;width:20px;height:20px;margin:-10px 0 0;opacity:0;cursor:pointer}
.chk-b{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--soft);border-radius:var(--r);background:var(--bg);transition:background .15s,border-color .15s}
.chk:hover .chk-b{border-color:var(--fg)}
.chk input:checked+.chk-b{background:var(--fg);border-color:var(--fg)}
.chk input:checked+.chk-b::after{content:"";width:10px;height:5px;border-left:1.8px solid var(--bg);border-bottom:1.8px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.chk input:focus-visible+.chk-b{outline:2px solid var(--fg);outline-offset:2px}
.fld.bad .chk-b{border-color:var(--fg);border-width:2px}

/* Les exemples illustrés (images) : en couleur, sans le voile des photos ajoutées */
.shot-f img.ex{filter:none;z-index:0}

/* collaboration de marque, page modèle */
.mcollab{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line, rgba(0,0,0,.12));display:grid;gap:var(--s2);max-width:42ch}
.mcollab p{margin:0}
.mcollab-k{font-size:var(--t-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.mcollab .btn{justify-self:start}
.mcollab-m{font-size:var(--t-1);opacity:.7;user-select:all}

/* six entrées dans la barre : le menu plein écran prend le relais plus tôt */
@media (max-width:1320px){#nav.big .logo{font-size:var(--t3)}.nav-links{display:none}.menu-btn{display:flex}}
/* Les exemples des quatre photos entrent l'un après l'autre, puis respirent doucement. */
@keyframes exIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes exBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
#apply .step.on .shot-f img.ex{animation:exIn .7s cubic-bezier(.2,.7,.2,1) both,exBreath 6s ease-in-out .9s infinite}
#apply .step.on .shot:nth-child(2) .shot-f img.ex{animation-delay:.12s,1.02s}
#apply .step.on .shot:nth-child(3) .shot-f img.ex{animation-delay:.24s,1.14s}
#apply .step.on .shot:nth-child(4) .shot-f img.ex{animation-delay:.36s,1.26s}
@media (prefers-reduced-motion:reduce){#apply .step.on .shot-f img.ex{animation:none}}
/* ---- Pages de présentation (Comment ça marche, À propos) : pleine largeur, blocs aérés, peu de liens */
.show .show-body{display:grid;gap:var(--s12);margin-top:var(--s8);padding-bottom:var(--s12)}
.show .show-body>h2{margin:0 0 calc(-1 * var(--s8));font-size:var(--t-1);line-height:var(--l-1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.show .show-body>p{margin:0;max-width:34ch;font-size:var(--t3);line-height:var(--l3);letter-spacing:-.01em;text-wrap:balance}
.show .show-body>p.small{font-size:var(--t1);line-height:var(--l1);max-width:56ch;color:var(--muted)}
.journey{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--fg)}
.journey li{position:relative;padding:var(--s3) var(--s3) var(--s4) 0;border-right:1px solid #e6e6e6;min-width:0}
.journey li+li{padding-left:var(--s3)}
.journey li:last-child{border-right:0}
.jn{display:block;font-size:var(--t-1);font-weight:600;letter-spacing:.08em;color:var(--muted)}
.jt{margin:var(--s5) 0 var(--s1);font-size:var(--t2);line-height:var(--l2);font-weight:600;letter-spacing:-.01em}
.jd{margin:0;color:var(--ink2)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.sp{padding:var(--s6) var(--s5);border-radius:var(--r)}
.sp-l{background:#f4f4f2}
.sp-r{background:var(--fg);color:var(--bg)}
.sp-k{margin:0 0 var(--s4);font-size:var(--t3);line-height:var(--l3);letter-spacing:-.01em}
.sp ul{display:grid;gap:var(--s2)}
.sp li{position:relative;padding-left:var(--s4);line-height:var(--l1);font-size:var(--t1)}
.sp li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:1px;background:currentColor}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0}
.figures div{border-top:1px solid var(--fg);padding-top:var(--s3)}
.figures dt{font-size:var(--t5);line-height:var(--l5);font-weight:600;letter-spacing:-.02em}
.figures dd{margin:var(--s1) 0 0;color:var(--ink2);max-width:28ch}
.showcase{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.showcase.rev .sc-f{order:2}
.sc-f{margin:0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06);transform:perspective(1600px) rotateY(-4deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.showcase.rev .sc-f{transform:perspective(1600px) rotateY(4deg) rotateX(2deg)}
.sc-f:hover{transform:none}
.sc-bar{display:flex;gap:6px;padding:10px 12px;background:#f4f4f2;border-bottom:1px solid #e6e6e6}
.sc-bar i{width:9px;height:9px;border-radius:50%;background:#d6d6d6}
.sc-f img{display:block;width:100%;height:auto}
.sc-h{margin:0 0 var(--s3);font-size:var(--t3);line-height:var(--l3);letter-spacing:-.01em}
.sc-t ul{display:grid;gap:var(--s2)}
.sc-t li{padding-top:var(--s2);border-top:1px solid #e6e6e6;color:var(--ink2)}
.band{display:grid;gap:var(--s2);padding:var(--s12) var(--s6);background:var(--fg);color:var(--bg);border-radius:var(--r);text-align:center;justify-items:center}
.band-h{margin:0;font-size:var(--t4);line-height:var(--l4);letter-spacing:-.02em}
.band-p{margin:0;color:#bdbdbd}
.band .btns{margin-top:var(--s3)}
.btn.inv{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.btn.inv:hover{background:transparent;color:var(--bg)}
@media (prefers-reduced-motion:no-preference){.show-body>*{animation:showIn .8s cubic-bezier(.2,.7,.2,1) both}.show-body>*:nth-child(2){animation-delay:.08s}.show-body>*:nth-child(3){animation-delay:.16s}}
@keyframes showIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:1024px){.journey{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.journey li{border-right:0;border-bottom:1px solid #e6e6e6;padding-left:0!important}.journey li:nth-child(odd){padding-right:var(--s3)}
  .showcase{grid-template-columns:1fr;gap:var(--s5)}.showcase.rev .sc-f{order:0}.sc-f,.showcase.rev .sc-f{transform:none}}
@media (max-width:640px){.show .show-body{gap:var(--s9)}.show .show-body>p{font-size:var(--t2);line-height:var(--l2)}
  .journey{grid-template-columns:1fr}.journey li{padding-right:0}.jt{margin-top:var(--s2)}
  .split2,.figures{grid-template-columns:1fr}.sp{padding:var(--s4) var(--s3)}.figures dt{font-size:var(--t4);line-height:var(--l4)}
  .band{padding:var(--s8) var(--s3)}.band-h{font-size:var(--t3);line-height:var(--l3)}}
.cbox-q{margin:0 0 var(--s2);font-size:var(--t4);line-height:var(--l4);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.cbox-p{margin:0 auto var(--s5);max-width:46ch;color:var(--muted)}
.cbox-back{margin-top:var(--s5);font-size:var(--t-1)}
@media (max-width:600px){.cbox-q{font-size:var(--t3);line-height:var(--l3)}}

/* age check: shown before anything else until the visitor confirms she is 18 or older */
.agate{display:none}
.ag body{overflow:hidden}
.ag .agate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(30px) saturate(.8);backdrop-filter:blur(30px) saturate(.8);padding:var(--s5) var(--gr) var(--s5) var(--gl)}
.agate-in{max-width:34rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.agate .logo{margin:0 0 var(--s5)}
.agate-h{margin:0 0 var(--s2);font-size:var(--t3);line-height:var(--l3);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.agate-p{margin:0 0 var(--s5);color:var(--muted);max-width:42ch}
.agate-a{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.agate-yes{display:inline-flex;align-items:center;height:var(--s5);padding:0 var(--s4);background:var(--fg);color:var(--bg);font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--fg);border-radius:var(--r);transition:background .2s,color .2s}
.agate-yes:hover{background:var(--bg);color:var(--fg)}
.agate-no{color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.agate-no:hover{color:var(--fg)}