/* Couleurs des pages Web, au choix de chaque compte (bouton des couleurs de l'en-tête), comme le fond des consoles :
   gris, bleu, vert, sable, lilas. La couleur du logiciel est l'attribut data-couleur de <html> (Matos sable, Logos vert,
   Hypnos bleu) ; socle-apparence.js le remplace par le choix du compte. Chaque couleur a sa version claire et sa version sombre,
   comme le reste de socle.css (data-theme). Chargé après socle.css, et par la page d'aide. */
/* Gris */
:root[data-couleur="gris"] {
  --fond: #f1f2f4; --carte: #ffffff; --bordure: #d0d4da; --discret: #555d66; --barre: #e3e5e9;
  --accent: #4b5563; --accent-survol: #2563c9; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-couleur="gris"]:not([data-theme="clair"]) {
    --fond: #16181c; --carte: #22252b; --bordure: #3a3f47; --discret: #9aa3ad; --barre: #2a2e35;
    --accent: #aab4c3; --accent-survol: #ffb366; --sur-accent: #15181d;
  }
}
:root[data-couleur="gris"][data-theme="sombre"] {
  --fond: #16181c; --carte: #22252b; --bordure: #3a3f47; --discret: #9aa3ad; --barre: #2a2e35;
  --accent: #aab4c3; --accent-survol: #ffb366; --sur-accent: #15181d;
}
/* Bleu */
:root[data-couleur="bleu"] {
  --fond: #edf3fb; --carte: #ffffff; --bordure: #c5d5ea; --discret: #555d66; --barre: #d6e5f7;
  --accent: #2563c9; --accent-survol: #c2410c; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-couleur="bleu"]:not([data-theme="clair"]) {
    --fond: #131a24; --carte: #1c2532; --bordure: #344459; --discret: #9aa3ad; --barre: #1f2d40;
    --accent: #6ea2ff; --accent-survol: #ffb366; --sur-accent: #0d1b33;
  }
}
:root[data-couleur="bleu"][data-theme="sombre"] {
  --fond: #131a24; --carte: #1c2532; --bordure: #344459; --discret: #9aa3ad; --barre: #1f2d40;
  --accent: #6ea2ff; --accent-survol: #ffb366; --sur-accent: #0d1b33;
}
/* Vert */
:root[data-couleur="vert"] {
  --fond: #eef7ec; --carte: #ffffff; --bordure: #c4dcbf; --discret: #555d66; --barre: #d3eecd;
  --accent: #1d7432; --accent-survol: #b45309; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-couleur="vert"]:not([data-theme="clair"]) {
    --fond: #131b15; --carte: #1c2820; --bordure: #34493a; --discret: #9aa3ad; --barre: #1f3326;
    --accent: #5cc977; --accent-survol: #ffb366; --sur-accent: #0b2414;
  }
}
:root[data-couleur="vert"][data-theme="sombre"] {
  --fond: #131b15; --carte: #1c2820; --bordure: #34493a; --discret: #9aa3ad; --barre: #1f3326;
  --accent: #5cc977; --accent-survol: #ffb366; --sur-accent: #0b2414;
}
/* Sable */
:root[data-couleur="sable"] {
  --fond: #fbf5e6; --carte: #ffffff; --bordure: #e3d3ab; --discret: #555d66; --barre: #f6e3b4;
  --accent: #8a5000; --accent-survol: #2563c9; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-couleur="sable"]:not([data-theme="clair"]) {
    --fond: #1b1812; --carte: #28241b; --bordure: #4a4231; --discret: #9aa3ad; --barre: #352d1c;
    --accent: #e3b55a; --accent-survol: #8ab4ff; --sur-accent: #2a1d00;
  }
}
:root[data-couleur="sable"][data-theme="sombre"] {
  --fond: #1b1812; --carte: #28241b; --bordure: #4a4231; --discret: #9aa3ad; --barre: #352d1c;
  --accent: #e3b55a; --accent-survol: #8ab4ff; --sur-accent: #2a1d00;
}
/* Lilas */
:root[data-couleur="lilas"] {
  --fond: #f5effb; --carte: #ffffff; --bordure: #d8c9ec; --discret: #555d66; --barre: #e9dcf7;
  --accent: #6b3fb8; --accent-survol: #c2410c; --sur-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-couleur="lilas"]:not([data-theme="clair"]) {
    --fond: #18151f; --carte: #241f2e; --bordure: #433a55; --discret: #9aa3ad; --barre: #2d253b;
    --accent: #b99aff; --accent-survol: #ffb366; --sur-accent: #1e0f3d;
  }
}
:root[data-couleur="lilas"][data-theme="sombre"] {
  --fond: #18151f; --carte: #241f2e; --bordure: #433a55; --discret: #9aa3ad; --barre: #2d253b;
  --accent: #b99aff; --accent-survol: #ffb366; --sur-accent: #1e0f3d;
}

/* En-tête teinté de la couleur choisie, comme le fond des consoles */
.barre { background: var(--barre, var(--carte)); }

/* Bouton des couleurs (en-tête, à côté de l'aide) : rond comme le bouton d'aide, palette dessinée en SVG */
.bouton-couleurs { width: 28px; height: 28px; padding: 0; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent);
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bouton-couleurs svg { width: 16px; height: 16px; fill: currentColor; }
.bouton-couleurs:hover, .bouton-couleurs[aria-expanded="true"] { background: var(--accent); color: var(--sur-accent); }
.bouton-couleurs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fenêtre des couleurs : une pastille par couleur, puis clair ou sombre */
.apparence-choix { margin: 14px 0 0; padding: 10px 14px 12px; border: 1px solid var(--bordure); border-radius: 6px; }
.apparence-choix legend { padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--texte); }
.apparence-options { display: flex; flex-wrap: wrap; gap: 8px; }
.formulaire .apparence-option { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--bordure);
  border-radius: 20px; color: var(--texte); font-size: 15px; cursor: pointer; margin: 0; position: relative; }
.apparence-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apparence-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.apparence-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.apparence-option .par-defaut { color: var(--discret); font-weight: normal; font-size: 13px; }
.pastille { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--discret); }
#fiche-apparence { width: min(640px, calc(100vw - 32px)); }
.pastille-gris { background: linear-gradient(135deg, #e3e5e9 50%, #4b5563 50%); }
.pastille-bleu { background: linear-gradient(135deg, #d6e5f7 50%, #2563c9 50%); }
.pastille-vert { background: linear-gradient(135deg, #d3eecd 50%, #1d7432 50%); }
.pastille-sable { background: linear-gradient(135deg, #f6e3b4 50%, #8a5000 50%); }
.pastille-lilas { background: linear-gradient(135deg, #e9dcf7 50%, #6b3fb8 50%); }
.pastille-auto { background: linear-gradient(135deg, #ffffff 50%, #1c1f24 50%); }
.pastille-clair { background: #ffffff; }
.pastille-sombre { background: #1c1f24; }