/* ================================================
   THEME-GARDE.CSS — L'identité de la page de garde, partout
   ------------------------------------------------
   La page de garde (index.html, css/garde.css) fixe la référence :
   « atelier de papier chaud, encre graphite ». Toile de lin, surfaces
   blanches, encre graphite, une seule famille (Switzer), boutons en
   capsule, filets de 1 px. Le vert #4CC02B est rationné aux états.

   Ce fichier porte ces jetons sur les AUTRES pages qui en relèvent :
   menus (accueil, catalogue, matiere, compte, mentions légales),
   connexion et admin. Les épreuves et la correction n'en font pas
   partie (décision du 2026-10-08 : test séparé plus tard).

   Activation : `class="g-theme"` sur <body>, et ce fichier chargé
   APRÈS cover.css / compte.css / admin.css, AVANT menus.css (qui
   remappe ses propres jetons `--m-*` sur ceux-ci).

   Les valeurs reprennent celles de garde.css à l'identique : toute
   évolution de la palette se fait dans les deux fichiers.
   ================================================ */

body.g-theme {
  /* ── Surfaces (empilement par température) ── */
  --g-canvas:  #EDEDE8;
  --g-surface: #FFFFFF;
  --g-stone:   #DBDBD2;
  --g-pebble:  #C0C0C0;

  /* ── Encres ── */
  --g-ink:     #141414;
  --g-text:    #292929;
  --g-nav:     #353535;
  --g-caption: #6F6F6E;
  --g-label:   #5C5C5C;
  --g-muted:   #8F8F8E;

  /* ── Filets ── */
  --g-hairline: #000000;
  --g-quartz:   #D0D0C8;

  /* ── Chromatique rationnée ── */
  --g-pulse: #4CC02B;
  --g-red:      #9E3B26;
  --g-red-soft: #F1E3DE;

  --g-on-ink:   #FFFFFF;

  --g-r-xs:   3.75px;
  --g-r-sm:   6px;
  --g-r:      12px;
  --g-r-pill: 200px;
  --g-r-full: 9999px;

  --g-font: "Switzer", "Inter", "Manrope", "DM Sans",
            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Pages sur cover.css (connexion, admin, compte) ──
     Leurs composants lisent `--o-*` : on les remappe ici. Le sélecteur
     (0,1,1) bat `.cover-page` (0,1,0) ; le bloc sombre plus bas
     (0,2,1) bat `[data-theme="dark"] .cover-page` (0,2,0). */
  --o-ink:        var(--g-text);
  --o-ink-soft:   var(--g-nav);
  --o-blue:       var(--g-ink);
  --o-blue-deep:  var(--g-text);
  --o-blue-text:  var(--g-ink);
  --o-btn-bg:     var(--g-ink);
  --o-blue-tint:  var(--g-stone);
  --o-gold:       var(--g-ink);
  --o-gold-tint:  var(--g-stone);
  --o-accent:     var(--g-ink);
  --o-surface:    var(--g-surface);
  --o-surface-2:  var(--g-surface);
  --o-mist:       var(--g-canvas);
  --o-line:       var(--g-quartz);
  --o-shadow:     none;
  --o-shadow-sm:  none;

  /* ── Variables génériques de common.css ── */
  --bg-page:            var(--g-canvas);
  --bg-card:            var(--g-surface);
  --bg-subtle:          var(--g-canvas);
  --bg-sidebar:         var(--g-surface);
  --border:             var(--g-quartz);
  --border-strong:      var(--g-label);
  --text-primary:       var(--g-text);
  --text-secondary:     var(--g-nav);
  --text-muted:         var(--g-label);
  --primary-blue:       var(--g-ink);
  --primary-blue-hover: var(--g-text);
  --primary-blue-light: var(--g-stone);
  --primary-blue-soft:  var(--g-quartz);

  font-family: var(--g-font);
  font-weight: 400;
  color: var(--g-nav);
  background: var(--g-canvas);       /* écrase les halos de cover.css */
  -webkit-font-smoothing: antialiased;
}

/* Pendant sombre : la pile de surfaces s'inverse sur le graphite. */
[data-theme="dark"] body.g-theme {
  --g-canvas:  #141414;
  --g-surface: #1C1C1B;
  --g-stone:   #292929;
  --g-pebble:  #3A3A38;

  --g-ink:     #EDEDE8;
  --g-text:    #E8E8E3;
  --g-nav:     #C9C9C4;
  --g-caption: #A2A29E;
  --g-label:   #9D9D9A;
  --g-muted:   #8F8F8E;

  --g-hairline: #4A4A47;
  --g-quartz:   #303030;

  --g-red:      #DE8C74;
  --g-red-soft: #2E1F1B;

  --g-on-ink:   #141414;

  /* Rejoués : sinon `[data-theme="dark"] .cover-page` reprendrait la main. */
  --o-ink:        var(--g-text);
  --o-ink-soft:   var(--g-nav);
  --o-btn-bg:     var(--g-ink);
  --o-blue-text:  var(--g-ink);
  --o-blue-tint:  var(--g-stone);
  --o-gold-tint:  var(--g-stone);
  --o-surface:    var(--g-surface);
  --o-surface-2:  var(--g-surface);
  --o-mist:       var(--g-canvas);
  --o-line:       var(--g-quartz);
  --o-shadow:     none;
  --o-shadow-sm:  none;
}

body.g-theme::before,
body.g-theme::after { display: none; }

/* ── Une seule famille, Switzer : les titres murmurent ──
   Remplace Space Grotesk (cover.css, admin.css) et Nunito. */
body.g-theme .omega-brand,
body.g-theme .omega-word,
body.g-theme .omega-mark,
body.g-theme .connexion-title,
body.g-theme .admin-pagetitle,
body.g-theme .admin-denied h2,
body.g-theme h1, body.g-theme h2, body.g-theme h3 {
  font-family: var(--g-font);
  font-weight: 500;
  letter-spacing: -0.01em;
}
body.g-theme input,
body.g-theme select,
body.g-theme textarea,
body.g-theme button { font-family: var(--g-font); }

/* ── La marque : pastille ronde à l'encre ── */
body.g-theme .omega-mark {
  border-radius: var(--g-r-full);
  background: var(--g-ink); color: var(--g-on-ink);
  font-weight: 500;
}

/* ── Boutons : la capsule est non négociable ── */
body.g-theme .omega-btn,
body.g-theme .btn-primary,
body.g-theme .btn-ghost,
body.g-theme .auth-submit {
  border-radius: var(--g-r-pill);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  box-shadow: none;
  white-space: nowrap;   /* une capsule ne se replie pas sur deux lignes */
}
body.g-theme .omega-btn-primary,
body.g-theme .btn-primary,
body.g-theme .auth-submit {
  background: var(--g-ink); color: var(--g-on-ink);
  border: 1px solid transparent;
}
body.g-theme .omega-btn-primary:hover,
body.g-theme .btn-primary:hover:not(:disabled),
body.g-theme .auth-submit:hover:not(:disabled) {
  background: var(--g-text); color: var(--g-on-ink);
  transform: translateY(-1px); filter: none;
}
[data-theme="dark"] body.g-theme .omega-btn-primary:hover,
[data-theme="dark"] body.g-theme .btn-primary:hover:not(:disabled),
[data-theme="dark"] body.g-theme .auth-submit:hover:not(:disabled) { background: #FFFFFF; }
body.g-theme .omega-btn-ghost,
body.g-theme .omega-btn-soft {
  background: var(--g-stone); color: var(--g-ink);
  border: 1px solid transparent;
}
body.g-theme .omega-btn-ghost:hover,
body.g-theme .omega-btn-soft:hover { background: var(--g-pebble); }

/* ── Focus : le filet à l'encre, comme sur la garde ── */
body.g-theme a:focus-visible,
body.g-theme button:focus-visible {
  outline: 2px solid var(--g-hairline);
  outline-offset: 3px;
}

/* ── Champs ── */
body.g-theme .field input,
body.g-theme .field select,
body.g-theme .field textarea {
  background: var(--g-surface); color: var(--g-text);
  border: 1px solid var(--g-quartz);
  border-radius: var(--g-r-sm);
}
body.g-theme .field input:focus,
body.g-theme .field select:focus,
body.g-theme .field textarea:focus {
  border-color: var(--g-hairline);
  box-shadow: 0 0 0 3px var(--g-stone);
}

/* ══════════ CONNEXION ══════════ */
body.g-theme .omega-nav {
  background: color-mix(in srgb, var(--g-canvas) 82%, transparent);
  border-bottom: 1px solid var(--g-quartz);
}
body.g-theme .connexion-card {
  background: var(--g-surface);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-r);
  box-shadow: none;
}
body.g-theme .connexion-title { font-size: 1.6rem; font-weight: 400; color: var(--g-text); }
body.g-theme .connexion-sub { color: var(--g-caption); }
body.g-theme .auth-tab { color: var(--g-label); font-weight: 500; }
body.g-theme .connexion-card .auth-tab.active { color: var(--g-ink); border-bottom-color: var(--g-ink); }
body.g-theme .connexion-card .auth-link { color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════ ADMIN ══════════ */
body.g-theme .admin-pagetitle { font-weight: 400; color: var(--g-text); }