/* haplo-dialog — feuille de style principale (Catppuccin Mocha) */
:root{--base:#111111;--mantle:#181825;--crust:#0b0b0b;--surface0:#313244;--surface1:#45475a;--overlay0:#6c7086;--text:#cdd6f4;--subtext:#a6adc8;--blue:#89b4fa;--green:#a6e3a1;--yellow:#f9e2af;--red:#f38ba8;--mauve:#cba6f7;--teal:#94e2d5;--peach:#fab387;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background-color:var(--base);color:var(--text);line-height:1.65;}
a{color:var(--blue);text-decoration:none;}a:hover{text-decoration:underline;}
header{background:var(--mantle);border-bottom:2px solid var(--blue);padding:1.2rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.brand{display:flex;align-items:center;gap:1rem;}
.brand img{border-radius:12px;}
header h1{font-size:1.7rem;color:var(--blue);}
header p{color:var(--subtext);font-size:.9rem;}
nav{display:flex;gap:1.2rem;flex-wrap:wrap;}
nav a{color:var(--subtext);font-size:.88rem;}nav a:hover{color:var(--text);}
.hero{text-align:center;padding:3.5rem 2rem 2.5rem;background:linear-gradient(135deg,var(--mantle) 0%,var(--base) 100%);}
.hero h2{font-size:2.3rem;color:var(--text);margin-bottom:1rem;line-height:1.25;}
.hero .lead{font-size:1.15rem;color:var(--subtext);max-width:680px;margin:0 auto 1.6rem;}
.badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem;}
.badge{background:var(--surface0);border:1px solid var(--surface1);border-radius:20px;padding:.3rem .8rem;font-size:.8rem;color:var(--subtext);}
.badge.green{border-color:var(--green);color:var(--green);}.badge.blue{border-color:var(--blue);color:var(--blue);}.badge.mauve{border-color:var(--mauve);color:var(--mauve);}
.code-demo{background:var(--crust);border:1px solid var(--surface1);border-radius:8px;padding:1.4rem;max-width:720px;margin:0 auto 1.8rem;text-align:left;overflow-x:auto;}
.code-demo pre{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.86rem;color:var(--text);white-space:pre;}
.sh{color:var(--subtext);}.kw{color:var(--mauve);}.str{color:var(--green);}.tag{color:var(--blue);}.attr{color:var(--yellow);}.val{color:var(--peach);}.cmd{color:var(--teal);}
.code-result{max-width:720px;margin:-.4rem auto 1.8rem;text-align:center;}
.code-result img{max-width:100%;height:auto;border:1px solid var(--surface1);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.35);}
/* Capture d'écran adaptée au thème : sombre par défaut, claire en thème clair.
   Piloté par html[data-theme] (posé avant le rendu) → bascule sans clignotement. */
.code-result .shot-light{display:none;}
html[data-theme="light"] .code-result .shot-dark{display:none;}
html[data-theme="light"] .code-result .shot-light{display:inline;}
.code-result figcaption{margin-top:.7rem;font-size:.82rem;color:var(--subtext);line-height:1.5;max-width:560px;margin-left:auto;margin-right:auto;}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn{padding:.7rem 1.4rem;border-radius:6px;font-weight:600;font-size:.92rem;cursor:pointer;}
.btn-primary{background:var(--blue);color:var(--crust);}.btn-secondary{background:var(--surface0);color:var(--text);border:1px solid var(--surface1);}
.btn:hover{opacity:.9;text-decoration:none;}
.stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:2rem;background:var(--mantle);text-align:center;}
.stat-num{font-size:2.4rem;font-weight:700;color:var(--blue);}.stat-label{color:var(--subtext);font-size:.82rem;}
section{padding:3rem 2rem;max-width:1120px;margin:0 auto;}
section h3{font-size:1.55rem;color:var(--blue);margin-bottom:.6rem;}
section .sub{color:var(--subtext);margin-bottom:1.6rem;max-width:760px;}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;}
.why{background:var(--surface0);border-radius:8px;padding:1.3rem;border-top:3px solid var(--surface1);}
.why .icon{font-size:1.7rem;margin-bottom:.5rem;}
.why h4{color:var(--text);margin-bottom:.4rem;}
.why p{color:var(--subtext);font-size:.88rem;}
.ports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;}
.port-card{background:var(--surface0);border-radius:8px;padding:1.2rem;border-left:4px solid var(--surface1);}
.port-card.flagship{border-left-color:var(--blue);}.port-card.production{border-left-color:var(--green);}.port-card.stable{border-left-color:var(--yellow);}.port-card.beta{border-left-color:var(--mauve);}
.port-card .binary{font-family:monospace;font-size:1.2rem;color:var(--blue);}
.port-card .toolkit{color:var(--subtext);font-size:.83rem;margin:.2rem 0;}
.port-card .widgets{color:var(--teal);font-size:.83rem;}
.port-card .status{float:right;font-size:.78rem;}
.pc-blurb{color:var(--subtext);font-size:.84rem;margin:.6rem 0;}
.pc-links{display:flex;gap:1.2rem;font-size:.85rem;}
.tree-port{background:var(--surface0);border-radius:8px;margin-bottom:.7rem;padding:.4rem .9rem;}
.tree-port summary{cursor:pointer;padding:.5rem 0;font-size:.95rem;}
.tree-port summary .t-bin{font-family:monospace;color:var(--blue);font-weight:700;}
.tree-port summary .t-tk{color:var(--subtext);font-size:.82rem;}
.tree-port summary .t-badge{color:var(--teal);font-size:.78rem;margin-left:.4rem;}
.tree-docs,.tree-ref{padding:.5rem 0 .7rem;border-top:1px solid var(--surface1);}
.tree-docs strong,.tree-ref strong{display:block;color:var(--peach);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;}
.tree-docs a,.tree-ref a{display:inline-block;background:var(--crust);border:1px solid var(--surface1);border-radius:5px;padding:.18rem .55rem;margin:.15rem;font-size:.82rem;}
footer{background:var(--mantle);border-top:1px solid var(--surface1);padding:2rem;text-align:center;color:var(--subtext);font-size:.85rem;}
footer a{color:var(--blue);}

/* ===== Thème clair (Catppuccin Latte) ===== */
html[data-theme="light"]{--base:#eff1f5;--mantle:#e6e9ef;--crust:#dce0e8;--surface0:#ccd0da;--surface1:#bcc0cc;--overlay0:#9ca0b0;--text:#4c4f69;--subtext:#5c5f77;--blue:#1e66f5;--green:#40a02b;--yellow:#df8e1d;--red:#d20f39;--mauve:#8839ef;--teal:#179299;--peach:#fe640b;}
/* Pas de transition sur le fond ni la couleur du texte : quand la valeur vient
   d'une variable CSS qui change (bascule de thème), Chromium lance la transition
   mais ne repeint jamais la valeur finale — la page restait sombre en thème clair.
   Mesuré : transition:none => bascule correcte. La bascule est donc instantanée. */

/* ===== Barre d'outils (thème + langue) ===== */
.toolbar{display:flex;gap:.5rem;align-items:center;}
.toolbar button{background:var(--surface0);color:var(--text);border:1px solid var(--surface1);border-radius:6px;padding:.35rem .6rem;font-size:.82rem;cursor:pointer;font-family:inherit;line-height:1;display:inline-flex;align-items:center;gap:.35rem;transition:border-color .15s,color .15s;}
.toolbar button:hover{border-color:var(--blue);color:var(--blue);}
.toolbar .lang-btn{font-weight:700;letter-spacing:.03em;min-width:2.4rem;justify-content:center;}

/* ===== Fiches des ports : spécifications ===== */
.pc-specs{list-style:none;margin:.7rem 0 .2rem;padding:0;display:grid;gap:.3rem;}
.pc-specs li{font-size:.8rem;color:var(--subtext);display:flex;gap:.5rem;align-items:baseline;}
.pc-specs li b{color:var(--text);font-weight:600;min-width:6.6rem;flex:0 0 auto;}

/* ===== Visionneuse Markdown (doc.html) ===== */
.md-wrap{max-width:900px;margin:0 auto;padding:2.5rem 2rem 4rem;}
.md-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--surface1);}
.md-toolbar .md-file{font-family:monospace;color:var(--peach);font-size:.95rem;}
.md-back{font-size:.9rem;white-space:nowrap;}
.md-body{color:var(--text);line-height:1.7;}
.md-body>*:first-child{margin-top:0;}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{color:var(--blue);margin:1.7rem 0 .7rem;line-height:1.3;}
.md-body h1{font-size:1.9rem;border-bottom:2px solid var(--surface1);padding-bottom:.3rem;}
.md-body h2{font-size:1.45rem;border-bottom:1px solid var(--surface1);padding-bottom:.25rem;}
.md-body h3{font-size:1.18rem;}
.md-body h4{font-size:1.02rem;color:var(--peach);}
.md-body h5,.md-body h6{font-size:.95rem;color:var(--teal);}
.md-body p{margin:.7rem 0;}
.md-body ul,.md-body ol{margin:.6rem 0 .6rem 1.5rem;}
.md-body li{margin:.25rem 0;}
.md-body a{color:var(--blue);}
.md-body strong{color:var(--text);}
.md-body code{background:var(--crust);border:1px solid var(--surface1);border-radius:4px;padding:.08rem .35rem;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.86em;color:var(--peach);}
.md-body pre{background:var(--crust);border:1px solid var(--surface1);border-radius:8px;padding:1rem 1.2rem;overflow-x:auto;margin:1rem 0;}
.md-body pre code{background:none;border:none;padding:0;color:var(--text);font-size:.85rem;}
.md-body blockquote{border-left:4px solid var(--mauve);background:var(--surface0);padding:.5rem 1rem;margin:1rem 0;color:var(--subtext);border-radius:0 6px 6px 0;}
.md-body table{border-collapse:collapse;margin:1rem 0;font-size:.88rem;display:block;overflow-x:auto;}
.md-body th,.md-body td{border:1px solid var(--surface1);padding:.45rem .7rem;text-align:left;}
.md-body th{background:var(--surface0);color:var(--text);}
.md-body tr:nth-child(even) td{background:var(--mantle);}
.md-body hr{border:none;border-top:1px solid var(--surface1);margin:1.7rem 0;}
.md-body img{max-width:100%;border-radius:6px;}
.md-status{color:var(--subtext);padding:2rem 0;}
.md-status.error{color:var(--red);}

/* ===== Héro enrichi ===== */
.hero-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;color:var(--mauve);margin-bottom:.9rem;}
.hero h2{background:linear-gradient(120deg,var(--blue) 0%,var(--mauve) 55%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.hero-highlights{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:740px;margin:0 auto 1.7rem;}
.hero-highlights .hl{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface0);border:1px solid var(--surface1);border-radius:9px;padding:.42rem .85rem;font-size:.85rem;color:var(--text);transition:border-color .15s,transform .15s;}
.hero-highlights .hl{text-decoration:none;cursor:pointer;}
.hero-highlights .hl:hover{border-color:var(--blue);transform:translateY(-2px);text-decoration:none;}
.hero-highlights .hl:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.hero-highlights .hl-i{font-size:1.05rem;line-height:1;}

/* ===== Bouton / liens « don » ===== */
.btn-donate{background:linear-gradient(120deg,var(--red),var(--mauve));color:var(--crust);font-weight:700;}
.btn-donate:hover{opacity:.92;}
.nav-donate{color:var(--red)!important;font-weight:700;}
.nav-donate:hover{color:var(--mauve)!important;}
.footer-donate{display:inline-block;border:1px solid var(--red);color:var(--red);border-radius:20px;padding:.3rem .9rem;font-size:.82rem;font-weight:600;}
.footer-donate:hover{background:var(--red);color:var(--crust);text-decoration:none;}

/* ===== Boutons « copier » sur les blocs de code ===== */
.code-demo{position:relative;}
.code-host{position:relative;}
.copy-btn{position:absolute;top:.55rem;right:.55rem;z-index:2;background:var(--surface0);color:var(--subtext);border:1px solid var(--surface1);border-radius:6px;padding:.25rem .6rem;font-family:inherit;font-size:.72rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,border-color .15s,color .15s;}
.code-demo:hover .copy-btn,.code-host:hover .copy-btn,.copy-btn:focus-visible{opacity:1;}
.copy-btn:hover{border-color:var(--blue);color:var(--blue);}
.copy-btn.copied{border-color:var(--green);color:var(--green);opacity:1;}
.copy-btn.failed{border-color:var(--red);color:var(--red);opacity:1;}
@media(hover:none){.copy-btn{opacity:1;}}

/* ===== Tableau comparatif ===== */
.cmp-wrap{overflow-x:auto;border:1px solid var(--surface1);border-radius:8px;}
.cmp-table{border-collapse:collapse;width:100%;min-width:680px;font-size:.86rem;}
.cmp-table th,.cmp-table td{padding:.55rem .7rem;border-bottom:1px solid var(--surface1);text-align:center;}
.cmp-table thead th{background:var(--surface0);color:var(--text);font-weight:700;border-bottom:2px solid var(--surface1);}
.cmp-table thead th:first-child{text-align:left;}
.cmp-table tbody th{text-align:left;font-weight:500;color:var(--text);background:var(--mantle);white-space:nowrap;}
.cmp-table tbody tr:hover td,.cmp-table tbody tr:hover th{background:var(--surface0);}
.cmp-table .me{background:rgba(137,180,250,.10);}
.cmp-table thead th.me{background:var(--blue);color:var(--crust);}
.cmp-yes{color:var(--green);font-weight:700;}
.cmp-no{color:var(--red);}
.cmp-part{color:var(--yellow);font-weight:700;}
.cmp-na{color:var(--overlay0);}
.cmp-num{font-weight:700;color:var(--teal);}
.cmp-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.9rem;font-size:.8rem;color:var(--subtext);}
.cmp-legend span{display:inline-flex;align-items:center;gap:.35rem;}

/* ===== Tableau « original vs haplo » (prose, aligné à gauche) ===== */
.fork-table{min-width:560px;}
.fork-table tbody th{white-space:normal;min-width:11rem;color:var(--peach);}
.fork-table td{text-align:left;vertical-align:top;}
.fork-table code{background:var(--crust);border:1px solid var(--surface1);border-radius:4px;padding:.02rem .3rem;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.82em;color:var(--peach);}
.fork-table td.me code{color:var(--blue);}

/* ===== Zoom comparatif ===== */
.kd-focus{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--surface1);}
.kd-focus h4{font-size:1.15rem;color:var(--text);margin:0 0 .5rem;}
.kd-focus .sub{margin-top:0;}
.kd-note{margin-top:1rem;font-size:.86rem;color:var(--subtext);line-height:1.6;border-left:3px solid var(--blue);padding-left:.9rem;}

/* ===== Cartes des ports : badges de rôle + survol (lisibilité) ===== */
.port-card{transition:border-color .15s,transform .15s,box-shadow .15s;}
.port-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22);}
.port-card .status{float:right;font-size:.72rem;font-weight:600;background:var(--crust);border:1px solid var(--surface1);border-radius:20px;padding:.14rem .65rem;color:var(--subtext);white-space:nowrap;}
.port-card.production .status{color:var(--green);border-color:var(--green);}
.port-card.flagship .status{color:var(--blue);border-color:var(--blue);}
.port-card.stable .status{color:var(--peach);border-color:var(--peach);}
.port-card .widgets{font-weight:600;}

/* ===== Manifeste / citation du nom ===== */
.manifesto{margin:1.4rem 0 0;font-size:1.2rem;line-height:1.55;color:var(--text);border-left:4px solid var(--mauve);padding:.5rem 0 .5rem 1.1rem;max-width:760px;font-style:italic;}

/* ===== Lisibilité sur petits écrans ===== */
@media(max-width:720px){
  header{padding:1rem 1.2rem;}
  header h1{font-size:1.4rem;}
  .hero{padding:2.6rem 1.2rem 2rem;}
  .hero h2{font-size:1.9rem;}
  .hero .lead{font-size:1.05rem;}
  .stats{gap:1.2rem;padding:1.6rem 1.2rem;}
  .stat-num{font-size:2rem;}
  section{padding:2.2rem 1.2rem;}
  section h3{font-size:1.35rem;}
  .code-demo{padding:1.1rem;}
}
@media(max-width:640px){nav{gap:.7rem .9rem;}}
@media(max-width:480px){
  .hero h2{font-size:1.6rem;}
  .cta-buttons{flex-direction:column;}
  .cta-buttons .btn{width:100%;text-align:center;}
}

/* ===== Galerie « le même script, quatre thèmes » ===== */
.theme-gallery{max-width:760px;margin:0 auto 1.8rem;}
.theme-gallery .tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
.theme-gallery .tg-grid figure{margin:0;text-align:center;}
.theme-gallery .tg-grid img{max-width:100%;height:auto;border:1px solid var(--surface1);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.3);}
.theme-gallery .tg-grid figcaption{margin-top:.4rem;font-size:.78rem;color:var(--subtext);font-family:monospace;}
.theme-gallery>figcaption{margin-top:1rem;font-size:.84rem;color:var(--subtext);line-height:1.6;text-align:center;}

/* ===== Banc de démonstration (cinq fenêtres) ===== */
#banc figure.banc{margin:1.4rem 0 0;text-align:center;}
#banc figure.banc img{max-width:100%;height:auto;border:1px solid var(--surface1);border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.4);}
#banc figure.banc .shot-light{display:none;}
html[data-theme="light"] #banc figure.banc .shot-dark{display:none;}
html[data-theme="light"] #banc figure.banc .shot-light{display:inline;}
#banc figcaption{margin-top:.9rem;font-size:.84rem;color:var(--subtext);line-height:1.6;max-width:820px;margin-left:auto;margin-right:auto;}

/* ===== Bascule d'image dans les sections de tutoriels ===== */
.tut-wrap .shot-light{display:none;}
html[data-theme="light"] .tut-wrap .shot-dark{display:none;}
html[data-theme="light"] .tut-wrap .shot-light{display:inline;}