/* ══════════════════════════════════════════════════════════════════
   ARBORESCENCE — Charte graphique des supports de formation
   Fichier unique partagé par toutes les fiches et tous les parcours.
   Modifier ici = modifier partout. Écran clair, écran sombre, papier.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FCFCFB; --bg-2:#F4F7F2; --surface:#FFFFFF;
  --ink:#1A2620; --ink-2:#4E6055; --ink-3:#7C8C82;
  --hair:#E0E7DD; --hair-2:#CBD6C6;
  --c1:#19834A;   /* sève — structure */
  --c2:#2178A6;   /* eau — information */
  --c3:#BE7C18;   /* lumière — attention */
  --s1:#C7E3D0; --s2:#A3D2B3; --s3:#7BBE93; --s4:#529E71; --s5:#2E7C51; --s6:#175937;
  --display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --body:"Seravek","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:"Cascadia Code",Consolas,ui-monospace,monospace;
  --shadow:0 1px 2px rgba(26,38,32,.04), 0 10px 30px -18px rgba(26,38,32,.20);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1A1A19; --bg-2:#141A16; --surface:#1F2621;
  --ink:#E9EFE9; --ink-2:#A6B6AA; --ink-3:#7E8E83;
  --hair:#2C352E; --hair-2:#3A453C;
  --c1:#35A868; --c2:#1C8FCC; --c3:#B8891F;
  --s1:#1D4A33; --s2:#266743; --s3:#33865A; --s4:#46A672; --s5:#6BC191; --s6:#9AD8B4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.7);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#1A1A19; --bg-2:#141A16; --surface:#1F2621;
  --ink:#E9EFE9; --ink-2:#A6B6AA; --ink-3:#7E8E83;
  --hair:#2C352E; --hair-2:#3A453C;
  --c1:#35A868; --c2:#1C8FCC; --c3:#B8891F;
  --s1:#1D4A33; --s2:#266743; --s3:#33865A; --s4:#46A672; --s5:#6BC191; --s6:#9AD8B4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.7);
  color-scheme:dark;}
:root[data-theme="light"]{
  --bg:#FCFCFB; --bg-2:#F4F7F2; --surface:#FFFFFF;
  --ink:#1A2620; --ink-2:#4E6055; --ink-3:#7C8C82;
  --hair:#E0E7DD; --hair-2:#CBD6C6;
  --c1:#19834A; --c2:#2178A6; --c3:#BE7C18;
  --s1:#C7E3D0; --s2:#A3D2B3; --s3:#7BBE93; --s4:#529E71; --s5:#2E7C51; --s6:#175937;
  color-scheme:light;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
     font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased}
main{max-width:840px; margin:0 auto; padding:0 26px 80px}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; letter-spacing:-.01em; text-wrap:balance}
p,li{max-width:70ch}
a{color:var(--c1)}
:is(a,button,summary,input):focus-visible{outline:2px solid var(--c1); outline-offset:3px; border-radius:4px}

/* ── marque ─────────────────────────────────────── */
.mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.mark svg{width:24px; height:28px; overflow:visible; flex:none}
.mark span{font-family:var(--display); font-size:.96rem; letter-spacing:.2em; text-transform:uppercase}

/* ── bandeau de fiche ───────────────────────────── */
.top{padding:44px 0 26px; border-bottom:1px solid var(--hair)}
.fam{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; margin:26px 0 0}
.fam.socle{color:var(--c2)} .fam.produire{color:var(--c1)}
.fam.programmer{color:var(--c3)} .fam.ia{color:var(--c2)} .fam.crypto{color:var(--c3)}
h1{font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.14; margin:.2em 0 .35em}
.sous{color:var(--ink-2); font-size:1.03rem; margin:0; max-width:62ch}
.meta{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:22px}
.pill{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; border:1px solid var(--hair-2);
      color:var(--ink-2); border-radius:99px; padding:4px 12px}
.pill.acc{border-color:color-mix(in srgb,var(--c3) 45%,transparent); color:var(--c3)}

/* ── blocs ──────────────────────────────────────── */
section{padding:34px 0 0}
h2{font-size:1.3rem; margin:0 0 .5em; display:flex; align-items:baseline; gap:.5em}
h2 .n{font-family:var(--mono); font-size:.72rem; color:var(--c3); letter-spacing:.1em; flex:none}
h3{font-size:1.03rem; margin:1.4em 0 .25em}
.obj{background:var(--bg-2); border:1px solid var(--hair); border-left:2px solid var(--c1);
     border-radius:0 12px 12px 0; padding:16px 20px; margin:0}
.obj p{margin:0; max-width:none}
.obj b{color:var(--ink)}

.points{display:grid; gap:14px; margin-top:6px}
.pt{background:var(--surface); border:1px solid var(--hair); border-radius:13px; padding:17px 20px; box-shadow:var(--shadow)}
.pt h3{margin:0 0 .25em; font-size:1.02rem}
.pt p{margin:0; color:var(--ink-2); font-size:.95rem}
.pt code,code{font-family:var(--mono); font-size:.9em; background:var(--bg-2);
  border:1px solid var(--hair); border-radius:5px; padding:1px 5px}

figure{margin:26px 0 6px; background:var(--surface); border:1px solid var(--hair);
       border-radius:14px; padding:22px 24px 16px; box-shadow:var(--shadow)}
figure svg{display:block; max-width:100%; height:auto; margin:0 auto}
figcaption{font-size:.85rem; color:var(--ink-2); margin-top:14px; max-width:none}
.svgwrap{overflow-x:auto}

.retenir{background:color-mix(in srgb,var(--c3) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c3) 30%,var(--hair)); border-radius:14px; padding:20px 24px}
.retenir ul{margin:0; padding-left:1.15em}
.retenir li{margin:.3em 0; font-size:.96rem}
.retenir li b{color:var(--ink)}

.exo{border:1px dashed var(--hair-2); border-radius:14px; padding:20px 24px; background:var(--bg-2)}
.exo p{margin:0 0 .5em}
.exo .ind{font-size:.88rem; color:var(--ink-3); margin:0}

details.flash{border:1px solid var(--hair); border-radius:11px; background:var(--surface);
  padding:12px 18px; margin:9px 0}
details.flash summary{cursor:pointer; font-weight:600; font-size:.96rem}
details.flash summary::marker{color:var(--c1)}
details.flash p{margin:.6em 0 0; color:var(--ink-2); font-size:.94rem}

pre{background:#12261A; color:#9AD8B4; border-radius:11px; padding:15px 18px;
    overflow-x:auto; font-family:var(--mono); font-size:.87rem; line-height:1.55}
pre b{color:#E9B767; font-weight:400}

/* ── sommaire / index ──────────────────────────── */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{display:block; background:var(--surface); border:1px solid var(--hair); border-radius:15px;
      padding:20px 22px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
      transition:transform .25s, border-color .25s, box-shadow .25s}
.card:hover{transform:translateY(-4px); border-color:var(--c1); box-shadow:0 2px 4px rgba(0,0,0,.06),0 22px 44px -22px rgba(0,0,0,.28)}
.card .k{font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:7px}
.card h3{margin:0 0 .3em; font-size:1.04rem}
.card p{margin:0; font-size:.89rem; color:var(--ink-2)}
.card .d{font-family:var(--mono); font-size:.72rem; color:var(--c3); margin-top:10px; display:block}
@media (prefers-reduced-motion:reduce){ .card,.card:hover{transition:none; transform:none} }

.toc{list-style:none; padding:0; margin:14px 0 0; counter-reset:t}
.toc li{counter-increment:t; border-bottom:1px solid var(--hair); padding:11px 0; display:flex; gap:14px; align-items:baseline}
.toc li:last-child{border-bottom:none}
.toc li::before{content:counter(t,decimal-leading-zero); font-family:var(--mono); font-size:.74rem; color:var(--c3); flex:none}
.toc a{text-decoration:none; color:inherit; font-size:1rem}
.toc a:hover{color:var(--c1)}
.toc .dur{margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--ink-3); flex:none}

/* ── navigation bas de page ────────────────────── */
.nav2{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
      border-top:1px solid var(--hair); margin-top:44px; padding-top:20px; font-size:.9rem}
.nav2 a{text-decoration:none}
footer{border-top:1px solid var(--hair); margin-top:40px; padding-top:20px;
       font-size:.8rem; color:var(--ink-3)}
footer p{max-width:none; margin:.3em 0}

/* ── impression : c'est un support, il doit sortir propre ── */
@media print{
  :root{--bg:#fff; --bg-2:#fff; --surface:#fff; --ink:#000; --ink-2:#333; --ink-3:#555;
        --hair:#bbb; --hair-2:#999; color-scheme:light}
  body{font-size:10.5pt; background:#fff}
  main{max-width:none; padding:0}
  .pt,figure,.retenir,.exo,.card,details.flash{box-shadow:none; break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  section{break-inside:auto}
  pre{background:#f4f4f4; color:#000; border:1px solid #bbb}
  pre b{color:#000; font-weight:700}
  details.flash{border:1px solid #bbb}
  details.flash[open] p, details.flash p{display:block}
  .nav2,.noprint{display:none}
  .fiche{break-after:page}
  .fiche:last-child{break-after:auto}
  a{color:#000; text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555}
}