/* Carbonix — charte graphique partagée (app.carbonix.me)
   Poppins + IBM Plex Mono, crème/navy clair + navy sombre, accent mère vert→teal→bleu.
   Fournit les tokens du thème (noms charte + noms hérités des pages) → toute page
   qui référence var(--bg)/var(--card)/var(--fg)/… adopte la charte automatiquement. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* charte */
  --f-sans:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#F4F7F6; --bg2:#EDF2F0; --surface:#FFFFFF; --line:#E3E8E6;
  --ink:#16293D; --ink-2:#4B5B6E; --ink-3:#8A95A3; --soft:#E3F3EC;
  /* noms hérités des pages */
  --card:#FFFFFF; --card2:#F4F6F5; --fg:#16293D; --mut:#4B5B6E;
  --accent:#0E9F4E; --accent2:#007BFF; --ok:#0E9F4E; --warn:#C45A00; --err:#D64545;
  /* bouton principal : vert uni foncé, texte blanc lisible (≥ 4,5:1) dans les deux thèmes */
  --btn:#0B7A3C; --btn-hover:#096632;
  --shadow:0 1px 2px rgba(16,41,61,.06),0 8px 24px rgba(16,41,61,.06);
}
[data-theme="dark"]{
  --bg:#0F1E2E; --bg2:#12233C; --surface:#152739; --line:#26394D;
  --ink:#E9F0F4; --ink-2:#A8B7C6; --ink-3:#7E8FA1; --soft:#12352E;
  --card:#152739; --card2:#1B2E44; --fg:#E9F0F4; --mut:#A8B7C6;
  --accent:#2FC77A; --accent2:#3B9EFF; --ok:#2FC77A; --warn:#FF9A2E; --err:#FF6B6B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1E2E; --bg2:#12233C; --surface:#152739; --line:#26394D;
    --ink:#E9F0F4; --ink-2:#A8B7C6; --ink-3:#7E8FA1; --soft:#12352E;
    --card:#152739; --card2:#1B2E44; --fg:#E9F0F4; --mut:#A8B7C6;
    --accent:#2FC77A; --accent2:#3B9EFF; --ok:#2FC77A; --warn:#FF9A2E; --err:#FF6B6B;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.35);
  }
}

/* base */
body{font-family:var(--f-sans);background:var(--bg);color:var(--ink)}
h1,h2,h3{font-family:var(--f-sans);font-weight:700;letter-spacing:-.01em}
a{color:var(--accent)}
.mono,[class*="mono"]{font-family:var(--f-mono)}
::selection{background:rgba(14,159,78,.18)}

/* logo cube Carbonix (remplace la pastille « C ») */
.cx-logo{width:30px;height:30px;display:inline-block;flex:0 0 auto}

/* boutons charte */
.btn.primary,.btn-primary{background:var(--btn);border:0;color:#fff}
.btn.primary:hover,.btn-primary:hover{background:var(--btn-hover)}

/* sélecteur de langue (identique aux apps) */
.lang{position:relative;display:inline-flex;align-items:center}
.lang select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:500 .82rem var(--f-sans);padding:7px 28px 7px 12px;border-radius:999px;cursor:pointer}
.lang select:hover{color:var(--ink);border-color:var(--ink-3)}
.lang::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* bascule de thème Clair/Sombre (segmenté, comme la vitrine) */
.cxtheme{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.cxtheme button{border:0;background:transparent;color:var(--ink-3);width:30px;height:26px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cxtheme button svg{width:15px;height:15px}
html[data-theme="light"] .cxtheme button[data-t="light"],html[data-theme="dark"] .cxtheme button[data-t="dark"]{background:var(--bg2);color:var(--ink)}