/* haplo-dialog — gabarit commun des sous-sites (mutualisé).
   Mise en page nav + contenu, jetons de thème sombre par défaut ;
   subsite-theme.css (chargé ensuite) applique le thème clair.
   Toutes les pages partagent les mêmes noms de variables (--bg, --fg, …). */

:root{
  --bg:#111111;--bg2:#181825;--bg3:#313244;--fg:#cdd6f4;--fg2:#a6adc8;
  --accent:#89b4fa;--green:#a6e3a1;--yellow:#f9e2af;--red:#f38ba8;--mauve:#cba6f7;--border:#45475a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',Ubuntu,system-ui,sans-serif;font-size:16px;
  background-color:var(--bg);color:var(--fg);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ── Ossature : barre latérale + contenu ── */
.layout{display:flex;min-height:100vh}
nav{
  width:230px;min-width:230px;background:var(--bg2);border-right:1px solid var(--border);
  padding:1rem 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
nav h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2);padding:.6rem 1.1rem .25rem}
nav a{
  display:block;padding:.32rem 1.1rem;color:var(--fg2);text-decoration:none;
  font-size:.9rem;border-left:2px solid transparent;transition:color .12s,border-color .12s,background .12s;
}
nav a:hover,nav a.active{color:var(--accent);border-left-color:var(--accent);background:var(--bg3)}
.sep{border-top:1px solid var(--border);margin:.5rem 0}

main{flex:1;min-width:0;padding:2.4rem clamp(1.2rem,4vw,3.4rem);max-width:880px}

/* ── Typographie ── */
h1{color:var(--accent);font-size:2rem;line-height:1.25;margin-bottom:.6rem;border-bottom:1px solid var(--border);padding-bottom:.45rem}
h2{color:var(--green);font-size:1.4rem;margin:2rem 0 .6rem;scroll-margin-top:1rem}
h3{color:var(--yellow);font-size:1.13rem;margin:1.4rem 0 .35rem;scroll-margin-top:1rem}
h4{color:var(--fg);font-size:1rem;margin:1.1rem 0 .25rem}
p{margin-bottom:.9rem}
a{color:var(--accent)}
ul,ol{padding-left:1.5rem;margin-bottom:.9rem}
li{margin-bottom:.25rem}
img{max-width:100%;height:auto}

/* ── Captures de widgets ──
   Les captures sont à l'échelle 1:1 du rendu réel : les agrandir les rend floues.
   La figure les CADRE, elle ne les étire jamais au-delà de leur taille native.
   Corrigé le 2026-09-03 : les pages déclaraient width="620" alors qu'aucune
   capture ne dépasse 620 px (médiane 360) — toutes étaient affichées agrandies. */
.widget-shot{margin:1.3rem 0;padding:1.1rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;text-align:center}
.widget-shot img{width:auto;max-width:100%;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.widget-shot figcaption{margin:.75rem auto 0;max-width:52ch;font-size:.85em;color:var(--fg2);line-height:1.5}

/* ── Code ── */
code{background:var(--bg3);color:var(--red);padding:.1em .35em;border-radius:3px;font-size:.9em;font-family:'Fira Code',ui-monospace,monospace}
pre{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:1rem 1.1rem;overflow-x:auto;margin:1.1rem 0;line-height:1.55}
pre code{background:none;color:var(--green);padding:0;font-size:.88em}

/* ── Tableaux ── */
table{border-collapse:collapse;width:100%;margin:1.1rem 0;font-size:.92em}
th{background:var(--bg3);color:var(--accent);text-align:left;padding:.55rem .8rem}
td{padding:.5rem .8rem;border-bottom:1px solid var(--border)}
tr:hover td{background:var(--bg3)}

/* ── Encarts ── */
blockquote{border-left:3px solid var(--yellow);padding:.5rem 1rem;background:var(--bg2);margin:1.1rem 0;color:var(--fg2)}
.badge{display:inline-block;background:var(--bg3);color:var(--accent);border:1px solid var(--accent);border-radius:12px;padding:.1em .6em;font-size:.78em;margin:.1em .2em}
.banner{background:var(--bg3);border:1px solid var(--yellow);border-radius:6px;padding:.6rem 1rem;margin-bottom:1.5rem;color:var(--yellow);font-size:.9em}
.ok{color:var(--green)}.warn{color:var(--yellow)}.err{color:var(--red)}
footer{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--border);color:var(--fg2);font-size:.84em}

/* ── Adaptation petits écrans : la barre passe en bandeau horizontal ── */
@media (max-width:720px){
  .layout{flex-direction:column}
  nav{
    width:auto;min-width:0;height:auto;max-height:42vh;position:static;
    border-right:none;border-bottom:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:.15rem .35rem;padding:.7rem .9rem;
  }
  nav h2{width:100%;padding:.35rem .2rem .15rem}
  nav a{border-left:none;border-radius:4px;padding:.3rem .6rem}
  nav a:hover,nav a.active{border-left-color:transparent}
  main{padding:1.3rem 1.15rem;max-width:100%}
}