/* ==========================================================================
   Velook — feuille de style
   1. Tokens · 2. Base · 3. Layout · 4. Header · 5. Hero · 6. Contenu
   7. Composants · 8. Sidebar · 9. Footer · 10. Responsive · 11. A11y & print
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* couleurs — clair */
  --paper:#FFFFFF;      --wash:#F2F5F7;     --wash-2:#E8EDF1;
  --ink:#12212B;        --mut:#54666F;      --faint:#8798A3;
  --rule:#DDE4E9;       --rule-2:#C4D0D8;
  --navy:#0F3554;       --navy-2:#1B4E77;   --navy-d:#0A2439;
  --acc:#B04F20;        --acc-d:#C25A28;    --acc-w:#FCF0E9;

  /* espacement — échelle 4 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:104px;

  /* typographie */
  --ff-ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-rd:"Source Serif 4",Georgia,"Times New Roman",serif;
  --t-xs:12px; --t-sm:13.5px; --t-base:15px; --t-md:16px; --t-lg:17.5px;
  --t-xl:19px; --t-2xl:21px; --t-3xl:25px; --t-4xl:29px; --t-5xl:36px;

  /* divers */
  --r-sm:3px; --r-md:5px; --r-lg:8px;
  --sh-1:0 1px 2px rgba(10,36,57,.05);
  --sh-2:0 14px 30px -14px rgba(10,36,57,.26);
  --sh-3:0 18px 40px -12px rgba(10,36,57,.24);
  --ease:cubic-bezier(.2,.7,.3,1);
  --measure:68ch;
  --shell:1240px;
  --head-h:88px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1519;      --wash:#151F26;     --wash-2:#1C282F;
  --ink:#E6EDF1;        --mut:#9BADB8;      --faint:#748691;
  --rule:#22303A;       --rule-2:#31414C;
  --navy:#7FB6D8;       --navy-2:#9BC8E4;   --navy-d:#0A1B25;
  --acc:#F08A55;        --acc-d:#F5A377;    --acc-w:#2A1A12;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 14px 30px -14px rgba(0,0,0,.65);
  --sh-3:0 18px 40px -12px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#0E1519;      --wash:#151F26;     --wash-2:#1C282F;
  --ink:#E6EDF1;        --mut:#9BADB8;      --faint:#748691;
  --rule:#22303A;       --rule-2:#31414C;
  --navy:#7FB6D8;       --navy-2:#9BC8E4;   --navy-d:#0A1B25;
  --acc:#F08A55;        --acc-d:#F5A377;    --acc-w:#2A1A12;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 14px 30px -14px rgba(0,0,0,.65);
  --sh-3:0 18px 40px -12px rgba(0,0,0,.7);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-md)/1.6 var(--ff-ui);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--acc);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:99;background:var(--acc);color:#fff;
  padding:var(--s2) var(--s3);border-radius:var(--r-sm)}

/* ---------- 3. LAYOUT ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--s6)}
.wrap{max-width:var(--shell);margin-inline:auto;padding:var(--s7) var(--s6) var(--s11);
  display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:var(--s10);align-items:start}
main{min-width:0}

/* ---------- 4. HEADER ---------- */
.hd{background:var(--paper);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40}
.hd-in{max-width:var(--shell);margin-inline:auto;padding-inline:var(--s6);
  display:flex;align-items:center;gap:var(--s6);min-height:var(--head-h)}
.logo{flex:none;display:block}
.logo img{height:58px;width:auto}
.nav-l0{display:flex;list-style:none}
.nav-l0>li{position:relative}
.nav-l0>li>a{display:flex;align-items:center;gap:var(--s1);text-decoration:none;
  font-weight:600;font-size:var(--t-base);padding:30px var(--s4);
  border-bottom:3px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease)}
.nav-l0>li:hover>a,.nav-l0>li:focus-within>a{color:var(--navy);border-bottom-color:var(--acc)}
.chev{width:10px;height:6px;opacity:.5;flex:none}
.nav-l1{position:absolute;top:100%;left:0;min-width:274px;list-style:none;
  background:var(--paper);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-3);padding:var(--s2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.nav-l0>li:hover .nav-l1,.nav-l0>li:focus-within .nav-l1{opacity:1;visibility:visible;transform:none}
.nav-l1 a{display:block;padding:11px var(--s3);text-decoration:none;font-size:14.5px;
  border-radius:var(--r-sm);color:var(--ink);transition:background .13s var(--ease)}
.nav-l1 a:hover{background:var(--wash);color:var(--navy)}
.nav-l1 a.is-rj{color:var(--acc-d);font-weight:600}
.sub-toggle{display:none}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.search{display:flex;align-items:center;gap:var(--s2);background:var(--wash);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:9px var(--s3);
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.search:focus-within{border-color:var(--navy);background:var(--paper)}
.search svg{width:15px;height:15px;color:var(--mut);flex:none}
.search input{background:none;border:0;color:var(--ink);font:inherit;font-size:14px;
  width:168px;outline:none;min-width:0}
.search input::placeholder{color:var(--faint)}
.cta{background:var(--acc);color:#fff;text-decoration:none;font-weight:700;
  font-size:14.5px;padding:11px var(--s4);border-radius:var(--r-sm);white-space:nowrap;
  transition:background .15s var(--ease)}
.cta:hover{background:var(--acc-d)}
.burger{display:none}
.burger-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* ---------- 5. HERO ---------- */
.hero{background:var(--navy-d);color:#fff;border-bottom:4px solid var(--acc)}
.hero-in{max-width:var(--shell);margin-inline:auto;padding:var(--s7) var(--s6)}
.hero-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.hero-in p{margin-top:var(--s2);font-size:var(--t-2xl);font-weight:600;max-width:40ch}
.hero-home{padding:var(--s10) 0 var(--s9);border-bottom:1px solid var(--rule)}
.hero-home h1{font-size:clamp(34px,5vw,var(--t-5xl));line-height:1.04;letter-spacing:-.032em;
  font-weight:800;margin-bottom:var(--s5);max-width:22ch}
.hero-sub{font-family:var(--ff-rd);font-size:var(--t-2xl);line-height:1.5;
  color:var(--mut);margin-bottom:var(--s7);max-width:56ch}
.hero-stat{display:inline-flex;align-items:baseline;gap:var(--s3);background:var(--wash);
  border-left:3px solid var(--acc);padding:var(--s3) var(--s5);border-radius:0 var(--r-sm) var(--r-sm) 0}
.hero-stat strong{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.hero-stat span{font-size:var(--t-sm);color:var(--mut)}
.crumb{max-width:var(--shell);margin-inline:auto;padding:var(--s6) var(--s6) 0;
  font-size:var(--t-xs);color:var(--faint);display:flex;gap:var(--s2);align-items:center}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--navy);text-decoration:underline}
.crumb em{font-style:normal;color:var(--mut)}

/* ---------- 6. CONTENU ---------- */
.art h1{font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:800;margin-bottom:var(--s5)}
.art h2{font-size:var(--t-3xl);line-height:1.2;font-weight:700;margin:var(--s9) 0 var(--s3);
  padding-top:var(--s5);border-top:2px solid var(--navy)}
.art h3{font-size:var(--t-xl);line-height:1.3;font-weight:700;margin:var(--s7) 0 var(--s2)}
.art p,.art li{font-family:var(--ff-rd);font-size:var(--t-lg);line-height:1.72}
.art p{margin-bottom:var(--s5);max-width:var(--measure)}
.art ul,.art ol{margin-bottom:var(--s5);padding-left:var(--s6);max-width:var(--measure)}
.art li{margin-bottom:var(--s2)}
.art li::marker{color:var(--acc)}
.art img{width:100%;margin:var(--s7) 0;border-radius:var(--r-sm);background:var(--wash)}
.art a{color:var(--navy);text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-color:var(--rule-2)}
.art a:hover{text-decoration-color:var(--navy)}
.art strong{font-weight:600}
.art blockquote{margin:var(--s7) 0;padding-left:var(--s5);border-left:3px solid var(--acc);
  color:var(--mut);font-style:italic}
.art table{width:100%;border-collapse:collapse;margin:var(--s6) 0;font-size:var(--t-base);
  font-family:var(--ff-ui)}
.art th{background:var(--wash);font-weight:600;text-align:left}
.art td,.art th{border:1px solid var(--rule);padding:10px var(--s3)}
.art hr{border:0;border-top:1px solid var(--rule);margin:var(--s8) 0}
.cat-head{padding:var(--s8) 0 var(--s1);border-bottom:2px solid var(--navy);margin-bottom:var(--s2)}
.cat-head .hero-k{display:block;color:var(--acc-d);margin-bottom:var(--s3)}
.cat-head h1{font-size:clamp(28px,3.8vw,42px);line-height:1.08;font-weight:800;
  margin-bottom:var(--s4);max-width:20ch}
.cat-lede{font-family:var(--ff-rd);font-size:var(--t-xl);line-height:1.55;color:var(--mut);
  margin-bottom:var(--s6);max-width:60ch}
.sec-h{font-size:var(--t-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);margin-bottom:var(--s5);padding-bottom:var(--s3);border-bottom:2px solid var(--navy)}
.block{padding-top:var(--s9)}

/* ---------- 7. COMPOSANTS ---------- */
.stack{display:flex;flex-direction:column}
.media{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s10);
  align-items:center;padding:var(--s9) 0;border-bottom:1px solid var(--rule)}
.media.flip{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.media.flip .m-media{order:2}
.m-media{margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--wash)}
.m-media img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0}
.m-body h2{font-size:var(--t-4xl);line-height:1.16;font-weight:700;margin-bottom:var(--s3);
  border:0;padding:0}
.m-body p{font-family:var(--ff-rd);font-size:var(--t-lg);line-height:1.68;color:var(--mut);
  margin-bottom:var(--s3)}
.m-link{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--t-base);
  color:var(--navy);text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:2px;
  transition:color .15s var(--ease)}
.m-link:hover{color:var(--acc-d)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  gap:var(--s6);margin:var(--s7) 0 var(--s8)}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--rule-2)}
.c-media{margin:0;background:var(--wash);overflow:hidden}
.c-media img{width:100%;aspect-ratio:3/2;object-fit:cover;margin:0;border-radius:0;
  transition:transform .35s var(--ease)}
.card:hover .c-media img{transform:scale(1.04)}
.c-body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;
  gap:var(--s2);flex:1}
.c-body h3{font-size:18.5px;line-height:1.26;font-weight:700;margin:0}
.c-body p{font-family:var(--ff-rd);font-size:var(--t-base);line-height:1.6;color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.c-link{margin-top:auto;padding-top:var(--s2);font-weight:700;font-size:14px;color:var(--navy);
  text-decoration:none;display:inline-flex;gap:var(--s1);align-items:center;
  transition:color .15s var(--ease)}
.card:hover .c-link{color:var(--acc-d)}

.postgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:var(--s7) var(--s6)}
.postgrid a{display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;height:100%}
.p-media{margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--wash)}
.p-media img{width:100%;aspect-ratio:16/10;object-fit:cover;margin:0;border-radius:0;
  transition:transform .35s var(--ease)}
.postgrid a:hover .p-media img{transform:scale(1.04)}
.p-body{display:flex;flex-direction:column;gap:var(--s1)}
.p-body time{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-d);font-variant-numeric:tabular-nums}
.p-body span{font-weight:700;font-size:var(--t-lg);line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s var(--ease)}
.postgrid a:hover .p-body span{color:var(--navy)}
.p-body em{font-style:normal;font-family:var(--ff-rd);font-size:14.5px;line-height:1.5;
  color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s8);margin:var(--s7) 0}
.twocol h3{font-size:var(--t-lg);margin-bottom:var(--s2)}

.rj-box{background:var(--acc-w);border:1px solid var(--rule);border-left:3px solid var(--acc);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s6);margin:var(--s8) 0;
  display:flex;flex-direction:column;gap:var(--s3)}
.rj-lab{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d)}
.rj-box p{font-family:var(--ff-ui);font-size:var(--t-md);line-height:1.5;max-width:64ch}
.rj-btn{align-self:flex-start;background:var(--navy);color:var(--paper);text-decoration:none;
  font-weight:700;font-size:14.5px;padding:11px var(--s5);border-radius:var(--r-sm);
  transition:background .15s var(--ease)}
.rj-btn:hover{background:var(--navy-2)}
.share{display:flex;align-items:center;gap:var(--s2);padding-top:var(--s6);
  border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--faint)}
.share span{letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-right:var(--s1)}
.share a{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:var(--r-sm);color:var(--mut);text-decoration:none;font-weight:700;font-size:13px;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.share a:hover{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.form-todo{background:var(--wash);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s5);margin:var(--s7) 0;font-family:var(--ff-ui);font-size:var(--t-md)}

/* ---------- 8. SIDEBAR ---------- */
.side{position:sticky;top:calc(var(--head-h) + var(--s4));display:flex;flex-direction:column;gap:var(--s6)}
.side-block{background:var(--wash);border-radius:var(--r-md);padding:var(--s5)}
.side-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin-bottom:var(--s3)}
.side-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.side-list a{text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.35;
  display:block;transition:color .15s var(--ease)}
.side-list a:hover{color:var(--acc-d)}
.side-list a.is-rj{color:var(--acc-d);font-weight:700}
.side-list a.is-ext::after{content:"↗";font-size:11px;margin-left:var(--s1);opacity:.55}
.side-list--sm a{font-size:var(--t-sm);font-weight:400;color:var(--mut)}

/* ---------- 9. FOOTER ---------- */
.ft{background:var(--navy-d);color:#B9CEDD;margin-top:var(--s6)}
.ft-in{max-width:var(--shell);margin-inline:auto;padding:var(--s9) var(--s6) var(--s7)}
.ft-brand{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s7)}
.ft-brand img{height:46px;width:auto}
.ft-brand p{font-size:var(--t-sm);max-width:42ch}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--s6)}
.ft-col{display:flex;flex-direction:column;gap:var(--s2)}
.ft-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--s1)}
.ft-col a{color:#B9CEDD;text-decoration:none;font-size:var(--t-sm);transition:color .15s var(--ease)}
.ft-col a:hover{color:var(--acc)}
.ft-legal{margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.13);font-size:var(--t-xs)}
.ft-legal a{color:#B9CEDD;text-decoration:none}
.ft-legal a:hover{text-decoration:underline}

/* ---------- 10. RESPONSIVE ---------- */
@media (max-width:1180px){
  :root{--shell:100%}
  .wrap{gap:var(--s8)}
}
@media (max-width:1000px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .side{position:static}
  .side-block{background:transparent;padding:0;border-top:1px solid var(--rule);padding-top:var(--s5)}
  .media{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding:var(--s8) 0}
  .media.flip{grid-template-columns:minmax(0,1fr)}
  .media.flip .m-media{order:0}
  .m-media img{aspect-ratio:16/9}
  .m-body h2{font-size:var(--t-3xl)}
}
@media (max-width:1100px){
  .hd-in{flex-wrap:wrap;gap:var(--s3);min-height:64px;padding-block:var(--s2)}
  .logo img{height:46px}
  .hd-right{order:4;width:100%;display:none;gap:var(--s3);flex-direction:column;align-items:stretch}
  .burger-cb:checked ~ .hd-right{display:flex;padding-bottom:var(--s4)}
  .hd-right .search{width:100%}
  .hd-right .search input{width:100%}
  .hd-right .cta{text-align:center;justify-content:center}
  .burger{display:flex;flex-direction:column;gap:5px;margin-left:auto;cursor:pointer;
    padding:var(--s2);border-radius:var(--r-sm)}
  .burger span{width:24px;height:2px;background:var(--navy);display:block;border-radius:1px}
  .burger-cb:focus-visible + .burger{outline:2px solid var(--acc);outline-offset:2px}
  .nav{display:none;order:3;width:100%}
  .burger-cb:checked ~ .nav{display:block;padding-bottom:var(--s4)}
  .nav-l0{flex-direction:column}
  .nav-l0>li>a{padding:13px 0;border-bottom:1px solid var(--rule);border-left:0;
    justify-content:space-between}
  .nav-l0>li:hover>a{border-bottom-color:var(--rule)}
  .nav-l1{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;padding:var(--s1) 0 var(--s3) var(--s4);background:transparent}
  .nav-l1 a{padding:9px 0;color:var(--mut)}
  .chev{transform:rotate(-90deg)}
  .hero-in{padding-block:var(--s6)}
  .hero-in p{font-size:var(--t-xl)}
}
@media (max-width:640px){
  :root{--s10:40px;--s11:48px;--head-h:64px}
  .wrap{padding:var(--s5) var(--s5) var(--s10)}
  .shell,.hd-in,.hero-in,.ft-in,.crumb{padding-inline:var(--s5)}
  .hero-home{padding:var(--s8) 0 var(--s7)}
  .hero-sub{font-size:var(--t-xl)}
  .hero-stat{width:100%;flex-direction:column;gap:var(--s1);align-items:flex-start}
  .art p,.art li{font-size:var(--t-md)}
  .art h2{margin-top:var(--s8)}
  .cards,.postgrid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .ft-brand{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .rj-box{padding:var(--s5)}
  .share{flex-wrap:wrap}
}

/* ---------- 11. A11Y & PRINT ---------- */
@media (prefers-contrast:more){
  :root{--rule:#9AA9B3;--mut:#33454F}
  .card,.search{border-width:2px}
}
@media print{
  .hd,.side,.ft,.share,.rj-box,.cta,.search,.burger{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{display:block;padding:0;max-width:none}
  .art a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .art img{max-width:12cm;page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
}

/* ---------- 12. CIBLES TACTILES (mobile) ---------- */
@media (hover:none) and (pointer:coarse){
  /* 44px minimum sur toute cible cliquable, sans casser la mise en page :
     on étire la zone de contact verticalement via un pseudo-élément. */
  .side-list a,.ft-col a,.ft-legal a,.c-link,.m-link,.crumb a{position:relative}
  .side-list a::after,.ft-col a::after,.ft-legal a::after,
  .c-link::after,.m-link::after,.crumb a::after{
    content:"";position:absolute;inset:50% 0 auto;transform:translateY(-50%);
    height:44px;min-height:100%}
  .side-list{gap:var(--s3)}
  .side-list a{padding-block:var(--s2)}
  .ft-col{gap:var(--s3)}
  .ft-legal{line-height:2.2}
  .burger{padding:var(--s3) var(--s3);min-height:44px;justify-content:center;margin-right:calc(var(--s3) * -1)}
  .share a{width:44px;height:44px}
  .nav-l0>li>a{min-height:48px}
  .nav-l1 a{min-height:44px;display:flex;align-items:center}
  .cta,.rj-btn{min-height:44px;display:inline-flex;align-items:center}
  .search{min-height:44px}
}

/* ============ v4 — SPEC-REFONTE ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 5.1 — la home n'avait aucun conteneur : elle ne s'alignait pas sur le header */
body.t-home main{max-width:var(--shell);margin-inline:auto;padding:0 var(--s6) var(--s11)}

/* état actif de la navigation (3.2 §0) */
.nav-l0>li.is-current>a{color:var(--navy);border-bottom-color:var(--acc)}
.nav-l1 a[aria-current="page"]{background:var(--wash);color:var(--navy);font-weight:600}

/* fil d'Ariane en <ol> */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.crumb li+li::before{content:"›";margin-right:var(--s2);color:var(--rule-2)}
.crumb [aria-current]{color:var(--mut)}

/* 5.2 — carte typographique de rubrique, sans vignette */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--s6)}
.tcard{border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:0 0 var(--r-md) var(--r-md);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.tcard:hover{border-top-color:var(--acc);box-shadow:var(--sh-2)}
.tcard h3{font-size:var(--t-xl);line-height:1.24;font-weight:700}
.tcard h3 a{text-decoration:none;color:var(--ink)}
.tcard:hover h3 a{color:var(--navy)}
.tcard>p{font-family:var(--ff-rd);font-size:var(--t-base);line-height:1.55;color:var(--mut)}
.tc-subs{list-style:none;display:flex;flex-direction:column;gap:var(--s1);
  padding-top:var(--s3);border-top:1px solid var(--rule)}
.tc-subs a{font-size:14px;font-weight:500;text-decoration:none;color:var(--navy);
  display:inline-flex;align-items:center;gap:var(--s1)}
.tc-subs a::before{content:"›";color:var(--acc);font-weight:700}
.tc-subs a:hover{text-decoration:underline;text-underline-offset:2px}
.tc-count{margin-top:auto;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.cat-count{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}

/* 3.2 §5 — toutes les pages, groupées et repliables */
.grp{border-bottom:1px solid var(--rule)}
.grp summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) 0;cursor:pointer;font-weight:700;font-size:var(--t-md);list-style:none}
.grp summary::-webkit-details-marker{display:none}
.grp summary::after{content:"+";font-size:var(--t-xl);font-weight:400;color:var(--acc);
  order:3;line-height:1;transition:transform .18s var(--ease)}
.grp[open] summary::after{content:"−"}
.grp summary span{flex:1}
.grp summary a{text-decoration:none;color:var(--ink)}
.grp summary a:hover{color:var(--navy)}
.grp summary em{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--faint);
  background:var(--wash);padding:2px var(--s2);border-radius:99px;font-variant-numeric:tabular-nums}
.plist{list-style:none;padding:0 0 var(--s4);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s1) var(--s6)}
.plist li{border-bottom:1px dotted var(--rule)}
.plist a{display:block;padding:9px 0;text-decoration:none;font-size:var(--t-base);
  line-height:1.35;color:var(--ink);transition:color .13s var(--ease)}
.plist a:hover{color:var(--acc-d)}
.plist--dated{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.plist--dated time{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc-d);margin-bottom:2px}
.plist--dated span{font-weight:600;font-size:var(--t-md);line-height:1.32;display:block}
.plist--dated em{display:none}

/* liste numérotée des questions fréquentes */
.qlist{counter-reset:q;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 var(--s7)}
.qlist li{counter-increment:q;border-bottom:1px solid var(--rule);position:relative;
  padding:var(--s3) 0 var(--s3) var(--s7)}
.qlist li::before{content:counter(q);position:absolute;left:0;top:var(--s3);
  font-size:var(--t-sm);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.qlist a{text-decoration:none;font-size:var(--t-base);line-height:1.4;color:var(--ink)}
.qlist a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:2px}

/* sommaire d'article */
.toc{background:var(--wash);border-radius:var(--r-md);padding:var(--s5);margin-bottom:var(--s7)}
.toc-h{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin-bottom:var(--s3)}
.toc ol{list-style:decimal;padding-left:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.toc a{font-size:var(--t-base);color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--navy);text-decoration:underline}

/* en-tête d'article : plus de bandeau sombre redondant (3.3 §2) */
.art-head{margin-bottom:var(--s6)}
.art-head h1{font-size:clamp(30px,3.6vw,42px);line-height:1.08;font-weight:800}
/* le filet de H2 saute quand le H2 suit immédiatement le H1 (3.3 §4a) */
.art-head + .art h2:first-child,.toc + h2{border-top:0;padding-top:0}

/* 4. images selon leur nature */
.art img.img-composite,.art img.img-infographie{object-fit:contain;width:auto;max-width:100%;
  margin-inline:auto;background:transparent}
.art img.img-petit{width:auto;max-width:280px;margin-inline:0}

/* sidebar : des liens qui se voient comme des liens (3.2 §7) */
.side-list a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:2px}
.side-list a:hover{text-decoration-color:var(--navy)}
.side-list--sm a{color:var(--mut)}

@media(max-width:640px){
  .tcards{grid-template-columns:minmax(0,1fr)}
  .plist,.qlist{grid-template-columns:minmax(0,1fr)}
  body.t-home main{padding-inline:var(--s5)}
}

/* recherche statique */
.search{position:relative}
.sr-box{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:320px;z-index:60;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:var(--s2);max-height:60vh;overflow-y:auto}
.sr-box a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:10px var(--s3);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:14.5px}
.sr-box a:hover,.sr-box a.is-sel{background:var(--wash);color:var(--navy)}
.sr-box em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.sr-empty{padding:var(--s3);font-size:14px;color:var(--mut)}
@media(max-width:1100px){.sr-box{position:fixed;left:var(--s5);right:var(--s5);min-width:0}}
.search--page{max-width:560px;margin:var(--s6) 0 0;padding:var(--s4) var(--s5);font-size:var(--t-md)}
.search--page input{width:100%;font-size:var(--t-md)}
.search--page .sr-box{display:none}
#results .plist em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-left:var(--s2)}

/* ============ vignettes carrées ============ */
.tc-media,.pd-media,.pl-media{margin:0;overflow:hidden;background:var(--wash);flex:none}
.tc-media img,.pd-media img,.pl-media img{width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .4s var(--ease)}

/* carte de rubrique : vignette en bandeau carré arrondi */
.tcard{padding:0;overflow:hidden;border-top-width:1px;border-radius:var(--r-md)}
.tcard>.tc-media{aspect-ratio:1/1;border-bottom:3px solid var(--navy);
  transition:border-color .2s var(--ease)}
.tcard:hover>.tc-media{border-bottom-color:var(--acc)}
.tcard:hover .tc-media img{transform:scale(1.045)}
.tcard>:not(.tc-media){margin-inline:var(--s5)}
.tcard>h3{margin-top:var(--s5)}
.tcard>.tc-count{margin-bottom:var(--s5)}

/* derniers articles : vignette carrée + texte dessous */
.postcards{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.postcards a{display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;color:var(--ink)}
.postcards .pd-media{aspect-ratio:1/1;border-radius:var(--r-md)}
.postcards a:hover .pd-media img{transform:scale(1.045)}
.pd-body{display:flex;flex-direction:column;gap:var(--s1)}
.pd-body time{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-d);font-variant-numeric:tabular-nums}
.pd-t{font-weight:700;font-size:var(--t-md);line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s var(--ease)}
.postcards a:hover .pd-t{color:var(--navy)}

/* listes de pages : petite vignette carrée à gauche */
.plist a{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0}
.plist .pl-media{width:52px;height:52px;border-radius:var(--r-sm)}
.plist a:hover .pl-media img{transform:scale(1.06)}
.plist a>span{flex:1;min-width:0}

@media(max-width:640px){
  .postcards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5)}
  .plist .pl-media{width:44px;height:44px}
}
/* rubriques : pleine largeur, la colonne latérale nuit à la lecture d'un sommaire */
.wrap--full{grid-template-columns:minmax(0,1fr)}

/* ============ hero de la home ============ */
.hero-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:var(--s10);align-items:center;padding:var(--s10) 0 var(--s9);
  border-bottom:1px solid var(--rule)}
.hh-text{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.hh-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-d)}
.hero-home h1{font-size:clamp(34px,4.6vw,52px);line-height:1.03;letter-spacing:-.032em;
  font-weight:800;margin:0;max-width:14ch}
.hh-sub{font-family:var(--ff-rd);font-size:var(--t-2xl);line-height:1.5;color:var(--mut);
  margin:0;max-width:46ch}
.hh-links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.hh-links a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--navy);
  border:1px solid var(--rule-2);border-radius:99px;padding:9px var(--s4);
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.hh-links a:hover{border-color:var(--navy);background:var(--navy);color:var(--paper)}
.hh-media{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:var(--s3);aspect-ratio:1/1}
.hh-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);background:var(--wash)}
.hh-media img:first-child{grid-row:span 2;border-radius:var(--r-md)}
@media(max-width:900px){
  .hero-home{grid-template-columns:minmax(0,1fr);gap:var(--s7);padding-top:var(--s8)}
  .hh-media{aspect-ratio:16/9;grid-template-rows:1fr}
  .hh-media img:first-child{grid-row:span 1}
}
@media(max-width:520px){.hh-media{aspect-ratio:3/2}.hh-links a{font-size:14px;padding:8px var(--s3)}}


/* --- Galeries Jimdo importées : les tuiles doivent rogner, pas laisser déborder --- */
.cc-m-gallery-container .thumb_sq3 > div,
.cc-m-gallery-container [class*="thumb_"] > div{overflow:hidden}
.cc-m-gallery-container .thumb_sq3 img,
.cc-m-gallery-container [class*="thumb_"] img{width:100%;height:100%;object-fit:cover;margin:0}

/* --- Petites images : ne jamais les agrandir au-delà de leur définition --- */
.art img.img-petit{width:auto;max-width:min(100%,280px);margin-inline:0;height:auto}
.art img.img-moyen{width:auto;max-width:min(100%,560px);margin-inline:0;height:auto}


/* ============ Correctifs issus de l'audit responsive ============ */

/* Hauteur réelle du header selon le palier */
@media (max-width:1100px){:root{--head-h:64px}}

/* Le teaser Klaviyo est fixé à gauche et recouvre la gouttière du contenu */
[class*="kl-teaser"]{top:auto !important;bottom:var(--s5) !important}
@media (max-width:1290px){[class*="kl-teaser"]{left:auto !important;right:0 !important}}

/* Ancres du sommaire : ne pas atterrir sous le header collant */
main [id]{scroll-margin-top:calc(var(--head-h) + var(--s5))}

/* Mosaïque du hero : 3 images, pas de case vide sous 900 px */
@media (max-width:900px){
  .hh-media{aspect-ratio:4/3;grid-template-rows:auto}
  .hh-media img:first-child{grid-row:auto}
}

/* Résultats de recherche : le libellé de rubrique volait la moitié de la ligne */
#results .plist a{align-items:baseline}
#results .plist em{flex:none;max-width:38%;text-align:right}
@media (max-width:640px){
  #results .plist a{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  #results .plist em{margin-left:0;max-width:none;text-align:left}
}

/* Cibles tactiles : listes sans vignette (plan du site, sommaires) */
@media (hover:none) and (pointer:coarse){
  .plist a{min-height:44px}
  .qlist a{display:flex;align-items:center;min-height:44px}
  .tc-subs a{min-height:44px}
}

/* Filet orphelin au-dessus du premier H2 : les sélecteurs d'origine ne matchaient pas le DOM réel */
.toc + * > h2:first-child,
.art-head + * > h2:first-child{border-top:0;padding-top:0;margin-top:var(--s7)}

/* Boîtes héritées de Jimdo à largeur fixe : ne jamais déborder la colonne */
.art [style*="width:"]{max-width:100%}
.art [class*="cc-m-video"]{width:auto !important;max-width:100%}

/* Mode sombre : le logo bleu disparaît sur fond quasi noir */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .ft-brand img{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .ft-brand img{filter:brightness(0) invert(1)}