/* Blog Botte à Botte : la charte de la marque (design system du 13/10), en version douce et aérée.
   prairie = action et liens · flot = le groupe seulement (ici : rien, sauf l'anneau de focus) · aucune bordure gauche. */
:root{
  --ground:#F6F8F4;--surface:#FFFFFF;--ink:#15241D;--muted:#536359;--line:#DCE4DD;
  --prairie:#1F6F55;--on-prairie:#FFFFFF;--prairie-tint:#E8F3ED;
  --flot:#E2B23C;--flot-tint:#FBF1D3;--flot-ink:#8A5A00;
  --fd:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--fb:"Source Sans 3","Segoe UI",system-ui,sans-serif;--fm:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r-s:8px;--r-m:10px;--r-l:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0F1814;--surface:#16231D;--ink:#E7EFEA;--muted:#9DB0A5;--line:#2A3B33;
  --prairie:#4FB892;--on-prairie:#0B1511;--prairie-tint:#1C3329;--flot:#E8BF55;--flot-tint:#33290F;--flot-ink:#E8BF55;}}
:root[data-theme="dark"]{
  --ground:#0F1814;--surface:#16231D;--ink:#E7EFEA;--muted:#9DB0A5;--line:#2A3B33;
  --prairie:#4FB892;--on-prairie:#0B1511;--prairie-tint:#1C3329;--flot:#E8BF55;--flot-tint:#33290F;--flot-ink:#E8BF55;}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--ground);color:var(--ink);font:18px/1.65 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--prairie);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible,.btn2:focus-visible{outline:3px solid var(--flot);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.saut{position:absolute;left:-999px}.saut:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:9}
.lab{font:700 13px/1.3 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--prairie);margin:0 0 8px}
.muted{color:var(--muted)}.petit{font-size:15px}
/* en-tête */
.tete{background:var(--surface);border-bottom:1px solid var(--line)}
.tete-in{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.marque{font:800 22px/1 var(--fd);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--prairie)}
.preprod{font:500 12px var(--fm);background:var(--flot-tint);color:var(--flot-ink);padding:5px 10px;border-radius:999px;margin-left:auto}
.ariane{font-size:14px;color:var(--muted);margin:22px 0 0}
.ariane a{color:var(--muted)}
/* titres */
h1{font:800 clamp(32px,5.2vw,52px)/1.1 var(--fd);letter-spacing:-.02em;margin:0 0 16px}
h2{font:700 clamp(25px,3.4vw,34px)/1.15 var(--fd);margin:0 0 12px}
h3{font:700 21px/1.25 var(--fd);margin:0 0 6px}
.lede{font-size:20px;color:var(--muted);max-width:720px;margin:0 0 22px}
/* boutons */
.btn{display:inline-block;font:700 17px var(--fb);background:var(--prairie);color:var(--on-prairie);border-radius:var(--r-m);padding:13px 22px;text-decoration:none}
.btn2{display:inline-block;font:700 17px var(--fb);color:var(--prairie);border:1.5px solid var(--prairie);border-radius:var(--r-m);padding:12px 20px;text-decoration:none}
.actions{display:flex;gap:12px;flex-wrap:wrap}
/* accueil */
.une{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding:48px 0 24px}
@media(max-width:860px){.une{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:28px}}
.une-img img,.art-img img{border-radius:var(--r-l);aspect-ratio:16/10;object-fit:cover;width:100%}
figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.sec{margin:64px 0}
.cartes3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:860px){.cartes3{grid-template-columns:minmax(0,1fr)}}
.carte{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.carte:hover{border-color:var(--prairie)}
.carte p{margin:0;color:var(--muted)}
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.item{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:var(--ink)}
.item:hover{border-color:var(--prairie)}
.item img{aspect-ratio:16/9;object-fit:cover;width:100%}
.item-vide{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--prairie-tint);color:var(--prairie);font:800 56px var(--fd)}
.item-t{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.item-t b{font:700 20px/1.25 var(--fd)}
.item-t .muted{font-size:16px;line-height:1.5}
.pastilles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pastilles a{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:16px}
.pastilles a:hover{border-color:var(--prairie);color:var(--prairie)}
/* rubrique et article */
.entete{padding:28px 0 8px;max-width:780px}
.meta-art{font:400 14px var(--fm);color:var(--muted);margin:0}
.art{max-width:760px}
.art-img{margin:12px 0 28px}
.prose h2{margin-top:44px}
.prose h3{margin-top:28px}
.prose p,.prose li{max-width:70ch}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose table{border-collapse:collapse;width:100%;margin:18px 0;font-size:16px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{font-weight:700;background:var(--prairie-tint)}
.prose blockquote{margin:20px 0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.def-courte{background:var(--prairie-tint);border-radius:var(--r-m);padding:16px 18px;font-size:19px;margin:8px 0 24px}
.avert{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--prairie);border-radius:var(--r-m);padding:14px 18px;font-size:16px;color:var(--muted);margin:22px 0}
.encadre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;margin:24px 0}
.nu{list-style:none;margin:0;padding:0}.nu li{margin:6px 0}
.sources{margin-top:44px;font-size:15px;color:var(--muted)}
.sources h2{font-size:21px}
.sources ol{padding-left:20px}.sources li{margin:6px 0;overflow-wrap:anywhere}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 24px;position:sticky;top:0;background:var(--ground);padding:10px 0;z-index:2}
.az a{font:500 16px var(--fm);min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);text-decoration:none}
.lettre{margin:28px 0}
.lettre h2{font-size:28px;color:var(--prairie)}
.defs{margin:0;display:grid;gap:12px}
.defs div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 18px}
.defs dt{font:700 19px/1.3 var(--fd)}
.defs dt a{color:var(--ink);text-decoration:none}.defs dt a:hover{color:var(--prairie)}
.defs dd{margin:4px 0 0;color:var(--muted);font-size:16px}
/* appel à l'action */
.cta{background:var(--prairie-tint);border-radius:var(--r-l);padding:30px 28px;margin:64px 0 0;max-width:760px}
.cta-t{font:700 23px/1.25 var(--fd);margin:0 0 10px}
.cta p{margin:0 0 16px}
/* pied */
.pied{margin-top:72px;background:var(--surface);border-top:1px solid var(--line);padding:36px 0 28px;font-size:16px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:20px}
@media(max-width:860px){.pied-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.pied-grille{grid-template-columns:minmax(0,1fr)}}
.pied a{color:var(--ink)}
.pied .marque{font-size:20px;display:block;margin:0 0 8px}
mark{background:var(--flot-tint);color:var(--flot-ink);padding:0 4px;border-radius:4px}
@media(max-width:520px){.tete-in{gap:6px 14px}.nav{gap:4px 14px}.nav a{font-size:15px}.marque{width:100%}.preprod{margin-left:0}}
figure{margin:0}