/* ============================================================
   Les dix styles de la démonstration Adjoint.
   ------------------------------------------------------------
   Chargé APRÈS app.css. Chaque style redéfinit les jetons que
   app.css consomme déjà — aucun balisage n'est touché.

       <body data-style="ardoise" data-metier="sanitaire">

   Règle de couleur, posée une fois pour toutes :
   le MÉTIER garde son accent (c'est le signal du métier devant
   le prospect), le STYLE prend tout le reste — fond, surfaces,
   typographie, densité, formes.
   Deux exceptions, assumées : Ardoise et Console sont des mondes
   monochromes, leur accent leur appartient et bat le métier.
   ============================================================ */

/* ---------- 1. Nordique — le style d'origine, laissé intact ---------- */
body[data-style="nordique"] {
  /* rien : ce sont les valeurs de :root dans app.css */
}

/* ---------- 2. Carnet — papier réglé, mine de crayon ---------- */
body[data-style="carnet"] {
  --bg:#efe9da; --surface:#f5f1e6; --surface2:#e2d9c4;
  --line:#c3b596; --text:#221f1a; --muted:#6b6353;
  --ok:#3e6b44; --warn:#8a6a1e; --bad:#a83a2c;
  --radius:3px;

  --font:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-titre:"Courier Prime",ui-monospace,monospace;
  --font-chiffre:"Courier Prime",ui-monospace,monospace;
  --taille:15.5px; --interligne:1.4;
  --titre-casse:none; --titre-espace:0; --titre-graisse:700;
  --dense:.85; --bordure:1px; --ombre:none;
}
/* la marge rouge du cahier, le long du contenu */
body[data-style="carnet"] main {
  border-left:1px solid rgba(168,58,44,.4);
  margin-left:6px;
}
body[data-style="carnet"] .badge {
  border:2px solid currentColor; background:transparent;
  border-radius:2px; text-transform:uppercase; letter-spacing:.04em;
  font-family:var(--font-titre); transform:rotate(-2.5deg);
}

/* ---------- 3. Ardoise — sombre par construction, grosses cibles ---------- */
body[data-style="ardoise"] {
  --bg:#14171a; --surface:#1e2429; --surface2:#2a333a;
  --line:#323c44; --text:#e9eff4; --muted:#93a1ac;
  --ok:#4fbf7a; --warn:#ffa51f; --bad:#ff6b5a;
  --radius:12px;

  --font:"Barlow",system-ui,sans-serif;
  --font-titre:"Barlow Condensed","Barlow",sans-serif;
  --font-chiffre:"Barlow",system-ui,sans-serif;
  --taille:16.5px; --interligne:1.45;
  --titre-casse:uppercase; --titre-espace:.02em; --titre-graisse:600;
  --dense:1.3; --bordure:1px; --ombre:none;
}
/* monde monochrome : l'ambre bat la couleur du métier */
body[data-style="ardoise"][data-metier] { --accent:#ffa51f; --accent-text:#14171a; }
body[data-style="ardoise"] { --st-nouveau:#93a1ac; --st-encours:#ffa51f;
  --st-termine:#4fbf7a; --st-facture:#b79bd8; --st-annule:#ff6b5a; }

/* ---------- 4. Grille — des filets, aucune ombre ---------- */
body[data-style="grille"] {
  --bg:#ffffff; --surface:#ffffff; --surface2:#f4f4f4;
  --line:#d8d8d8; --text:#0a0a0a; --muted:#6f6f6f;
  --radius:0px;

  --font:"Archivo",system-ui,sans-serif;
  --font-titre:"Archivo",system-ui,sans-serif;
  --font-chiffre:"Archivo",system-ui,sans-serif;
  --taille:14.5px; --interligne:1.35;
  --titre-casse:none; --titre-espace:-.01em; --titre-graisse:700;
  --dense:.8; --bordure:1px; --ombre:none;
}
body[data-style="grille"] .badge { border-radius:0; }
body[data-style="grille"] aside button[aria-current="true"] {
  background:none; color:var(--accent);
  box-shadow:inset 0 -3px 0 var(--accent); border-radius:0;
}

/* ---------- 5. Bloc — bordure épaisse, ombre dure ---------- */
body[data-style="bloc"] {
  --bg:#f2efe6; --surface:#ffffff; --surface2:#ffd84d;
  --line:#111111; --text:#111111; --muted:#4a4a4a;
  --ok:#137a4a; --warn:#c2551f; --bad:#d83a1e;
  --radius:0px;

  --font:"Archivo",system-ui,sans-serif;
  --font-titre:"Archivo Black","Archivo",sans-serif;
  --font-chiffre:"DM Mono",ui-monospace,monospace;
  --taille:15px; --interligne:1.4;
  --titre-casse:uppercase; --titre-espace:-.01em; --titre-graisse:400;
  --dense:1.15; --bordure:3px; --ombre:5px 5px 0 #111111;
}
body[data-style="bloc"] .badge { border:2px solid var(--line); border-radius:0; }
body[data-style="bloc"] aside button[aria-current="true"] { border-radius:0; }

/* ---------- 6. Atelier — éditorial, un filet, pas d'ombre ---------- */
body[data-style="atelier"] {
  --bg:#f4f5f2; --surface:#ffffff; --surface2:#e9ebe5;
  --line:#d5d9d0; --text:#1c1f1c; --muted:#61685f;
  --ok:#2a4b3c; --warn:#a8863a; --bad:#8c3a2e;
  --radius:2px;

  --font:"Karla",system-ui,sans-serif;
  --font-titre:"Fraunces",Georgia,serif;
  --font-chiffre:"Karla",system-ui,sans-serif;
  --taille:15px; --interligne:1.6;
  --titre-casse:none; --titre-espace:0; --titre-graisse:600;
  --dense:1.25; --bordure:1px; --ombre:none;
}

/* ---------- 7. Tableur — très dense, chiffres alignés ---------- */
body[data-style="tableur"] {
  --bg:#fafafb; --surface:#ffffff; --surface2:#f1f3f6;
  --line:#e2e5ea; --text:#191c21; --muted:#626a75;
  --ok:#17703f; --warn:#8a5a00; --bad:#c0332b;
  --radius:4px;

  --font:"IBM Plex Sans",system-ui,sans-serif;
  --font-titre:"IBM Plex Sans",system-ui,sans-serif;
  --font-chiffre:"IBM Plex Mono",ui-monospace,monospace;
  --taille:13.5px; --interligne:1.35;
  --titre-casse:none; --titre-espace:0; --titre-graisse:600;
  --dense:.62; --bordure:1px; --ombre:none;
}
/* la zébrure des tableaux, marque de fabrique du style */
body[data-style="tableur"] .lines tbody tr:nth-child(even) { background:var(--surface2); }

/* ---------- 8. Tactile — surfaces douces, creux et lumière ---------- */
body[data-style="tactile"] {
  --bg:#e9ecf1; --surface:#eff2f7; --surface2:#e1e6ee;
  --line:#d5dae3; --text:#242a33; --muted:#6b7482;
  --ok:#2f9e77; --warn:#c08a2e; --bad:#c9524a;
  --radius:20px;

  --font:"Nunito",system-ui,sans-serif;
  --font-titre:"Nunito",system-ui,sans-serif;
  --font-chiffre:"Nunito",system-ui,sans-serif;
  --taille:15.5px; --interligne:1.5;
  --titre-casse:none; --titre-espace:0; --titre-graisse:800;
  --dense:1.2; --bordure:0px;
  --ombre:-5px -5px 12px rgba(255,255,255,.9), 5px 6px 14px rgba(38,50,71,.14);
}
body[data-style="tactile"] .badge { box-shadow:var(--ombre); }

/* ---------- 9. Console — phosphore, chasse fixe ---------- */
body[data-style="console"] {
  --bg:#0b0f0c; --surface:#101614; --surface2:#18211c;
  --line:#23342a; --text:#7be38b; --muted:#4d7159;
  --ok:#7be38b; --warn:#e8b94a; --bad:#e8705a;
  --radius:0px;

  --font:"JetBrains Mono",ui-monospace,monospace;
  --font-titre:"JetBrains Mono",ui-monospace,monospace;
  --font-chiffre:"JetBrains Mono",ui-monospace,monospace;
  --taille:13.5px; --interligne:1.55;
  --titre-casse:uppercase; --titre-espace:.05em; --titre-graisse:700;
  --dense:.72; --bordure:1px; --ombre:none;
}
/* monde monochrome : le phosphore bat la couleur du métier */
body[data-style="console"][data-metier] { --accent:#e8b94a; --accent-text:#0b0f0c; }
body[data-style="console"] { --st-nouveau:#4d7159; --st-encours:#e8b94a;
  --st-termine:#7be38b; --st-facture:#9ad4c4; --st-annule:#e8705a; }
body[data-style="console"] .badge {
  background:transparent; border:0; border-radius:0; padding:2px 0;
}
body[data-style="console"] .badge::before { content:"["; }
body[data-style="console"] .badge::after  { content:"]"; }

/* ---------- 10. Fil — bulles, angle vif côté émetteur ---------- */
body[data-style="fil"] {
  --bg:#ffffff; --surface:#f1f3f6; --surface2:#e7eaef;
  --line:#e2e6ec; --text:#15181d; --muted:#6b7480;
  --ok:#0e6e6b; --warn:#96701c; --bad:#b3443a;
  --radius:16px;

  --font:"Manrope",system-ui,sans-serif;
  --font-titre:"Manrope",system-ui,sans-serif;
  --font-chiffre:"Roboto Mono",ui-monospace,monospace;
  --taille:15px; --interligne:1.5;
  --titre-casse:none; --titre-espace:0; --titre-graisse:700;
  --dense:1.05; --bordure:0px; --ombre:none;
}
/* les fiches prennent la forme d'une bulle */
body[data-style="fil"] .card { border-bottom-left-radius:4px; }

/* ---------- 11. Matériel — cartes, ombres douces ---------- */
body[data-style="materiel"] {
  --bg:#f6f9fb; --surface:#ffffff; --surface2:#e6eff4;
  --line:#dce3e8; --text:#191c1e; --muted:#5b6368;
  --ok:#2f7d4f; --warn:#a8791f; --bad:#b3261e;
  --radius:16px;

  --font:"Roboto",system-ui,sans-serif;
  --font-titre:"Roboto",system-ui,sans-serif;
  --font-chiffre:"Roboto Mono",ui-monospace,monospace;
  --taille:15px; --interligne:1.5;
  --titre-casse:none; --titre-espace:0; --titre-graisse:500;
  --dense:1.05; --bordure:0px;
  --ombre:0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
}

/* ============================================================
   Le sélecteur de style, dans le menu, sous celui du métier
   ============================================================ */
.theme{padding:0 10px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.theme label{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;
             text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.theme select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;
              background:var(--surface);font-size:13px;color:var(--text);
              font-family:var(--font)}

/* Le bloc métier perd sa bordure : c'est celui du style qui ferme les deux. */
.metier{border-bottom:0;margin-bottom:0;padding-bottom:8px}
.metier select{background:var(--surface);color:var(--text);font-family:var(--font)}