/* =========================================================================
   Suite Atelier — charte graphique commune (6 novembre 2026)
   Chargée par le serveur dans TOUTES les pages (accueil, modules, admin,
   connexion). Elle donne les mêmes couleurs, polices et la même barre du haut.
   Pour un nouveau module : ajouter sa couleur ci-dessous (html[data-module=…])
   et son nom dans barre.js.
   ========================================================================= */

/* ---------- Polices (fichiers sur le serveur, pas de Google) ---------- */
@font-face { font-family: "Lexend"; src: url("/interface/polices/lexend-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/interface/polices/lexend-latin-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/interface/polices/lexend-latin-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/interface/polices/atkinson-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/interface/polices/atkinson-latin-400-italique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/interface/polices/atkinson-latin-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

/* ---------- Couleurs de la marque ---------- */
:root {
  --sa-fond: #F7F5F0;      /* fond des pages */
  --sa-carte: #FFFFFF;     /* cartes, panneaux */
  --sa-encre: #23313A;     /* texte, barre du haut */
  --sa-doux: #5B6670;      /* texte secondaire */
  --sa-trait: #E4DED3;     /* bordures */
  --sa-moutarde: #E0A526;  /* touche de la marque (jamais pour du texte) */
  --sa-rouge: #B3261E;     /* supprimer, erreur */
  --sa-vert-ok: #2E7D32;   /* réussite */
  --sa-titres: "Lexend", "Segoe UI", system-ui, sans-serif;
  --sa-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --sa-h-barre: 56px;
  /* couleur du module (par défaut : la marque) */
  --sa-m: #23313A; --sa-m-fonce: #182229; --sa-m-clair: #ECEAE4;
}

/* ---------- Une couleur par secteur ---------- */
html[data-module="menuiserie"]      { --sa-m: #A0561A; --sa-m-fonce: #7F4413; --sa-m-clair: #F6E8DC; }
html[data-module="palettes"]        { --sa-m: #7A4E2D; --sa-m-fonce: #5E3B21; --sa-m-clair: #F0E6DD; }
html[data-module="espaces-verts"]   { --sa-m: #2E7D32; --sa-m-fonce: #23622A; --sa-m-clair: #E3F1E3; }
html[data-module="conditionnement"] { --sa-m: #1F63B5; --sa-m-fonce: #184E8F; --sa-m-clair: #E2ECF8; }
html[data-module="machines"]        { --sa-m: #6B4FA0; --sa-m-fonce: #553E80; --sa-m-clair: #ECE6F5; }
html[data-module="horticulture"]    { --sa-m: #A8327E; --sa-m-fonce: #84275F; --sa-m-clair: #F6E1EF; }
html[data-module="metallerie"]      { --sa-m: #3E5C76; --sa-m-fonce: #2F475B; --sa-m-clair: #E3E9EF; }
html[data-module="image"]           { --sa-m: #B83A5E; --sa-m-fonce: #922E4B; --sa-m-clair: #F7E3E9; }
html[data-module="vecteur"]         { --sa-m: #0E7C86; --sa-m-fonce: #0A5E66; --sa-m-clair: #DDF0F1; }
html[data-module="admin"]           { --sa-m: #4A5560; --sa-m-fonce: #363F48; --sa-m-clair: #E8EAEC; }

/* ---------- Les anciennes couleurs des modules suivent la charte ----------
   (chaque module avait ses propres variables : on les redirige ici) */
html[data-module] {
  --fond: var(--sa-fond); --bg: var(--sa-fond);
  --bord: var(--sa-trait); --trait: var(--sa-trait);
  --texte: var(--sa-encre); --doux: var(--sa-doux);
  --carte: var(--sa-carte); --panneau: var(--sa-carte);
  --rouge: var(--sa-rouge); --alerte: var(--sa-rouge);
  --bleu: var(--sa-m); --bleu2: var(--sa-m-fonce);
}
html[data-module="espaces-verts"] { --vert: var(--sa-m); --vert-clair: var(--sa-m-clair); }
html[data-module="palettes"] { --bois: var(--sa-m); --bois-clair: var(--sa-m-clair); }
html[data-module="admin"], html[data-module="accueil"] { --bleu: var(--sa-encre); --bleu2: #3A4A55; }

/* ---------- Polices partout ---------- */
html[data-module] body { font-family: var(--sa-texte); background: var(--sa-fond); color: var(--sa-encre); }
html[data-module] button, html[data-module] input, html[data-module] select, html[data-module] textarea { font-family: inherit; }
html[data-module] h1, html[data-module] h2, html[data-module] h3, html[data-module] legend, html[data-module] th { font-family: var(--sa-titres); }
html[data-module] .page-a4, html[data-module] .page-a4 h1 { font-family: var(--sa-texte); } /* fiches atelier : chiffres très lisibles */

/* ---------- Boutons communs ---------- */
html[data-module] button { border-radius: 10px; }
html[data-module] button.danger, html[data-module] .danger { color: var(--sa-rouge); }
.sa-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 2px solid var(--sa-encre); background: #fff; color: var(--sa-encre); font: 600 17px var(--sa-titres); text-decoration: none; cursor: pointer; }
.sa-bouton.principal { background: var(--sa-m); border-color: var(--sa-m); color: #fff; }
.sa-bouton.supprimer { background: var(--sa-rouge); border-color: var(--sa-rouge); color: #fff; }
:focus-visible { outline: 3px solid var(--sa-moutarde); outline-offset: 2px; }

/* ---------- La barre du haut, la même partout ---------- */
.sa-barre { position: relative; z-index: 40; flex: none; display: flex; align-items: center; gap: 12px; min-height: var(--sa-h-barre); padding: 0 16px; background: var(--sa-encre); color: #fff; font: 16px/1.2 var(--sa-titres); box-shadow: inset 0 -5px 0 var(--sa-m); padding-bottom: 5px; box-sizing: border-box; }
html[data-module="accueil"] .sa-barre { box-shadow: inset 0 -5px 0 var(--sa-moutarde); }
.sa-barre a { color: #fff; text-decoration: none; }
.sa-marque { display: flex; align-items: center; gap: 10px; min-height: 44px; border-radius: 10px; padding: 0 6px 0 0; }
.sa-marque:hover .sa-nom { text-decoration: underline; }
.sa-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--sa-moutarde); display: grid; place-items: center; flex: none; }
.sa-logo svg { width: 25px; height: 25px; }
.sa-nom { font-weight: 700; font-size: 19px; white-space: nowrap; }
.sa-fil { color: #8C99A3; font-size: 20px; }
.sa-module { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 17px; white-space: nowrap; }
.sa-module:hover { text-decoration: underline; }
.sa-pastille { width: 14px; height: 14px; border-radius: 4px; background: var(--sa-m); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.sa-espace { flex: 1; }
.sa-compte { display: flex; align-items: center; gap: 10px; font: 15px var(--sa-texte); color: #C5CDD3; }
.sa-initiales { width: 32px; height: 32px; border-radius: 50%; background: var(--sa-moutarde); color: var(--sa-encre); display: grid; place-items: center; font: 700 13px var(--sa-titres); flex: none; }
.sa-sortir { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid #4A5A66; border-radius: 10px; color: #fff; font: 600 14px var(--sa-titres); }
.sa-sortir:hover { border-color: #fff; }
@media (max-width: 720px) {
  .sa-barre { gap: 8px; padding: 0 10px 5px; }
  .sa-nom { font-size: 16px; }
  .sa-compte .sa-qui { display: none; }
  .sa-module { font-size: 15px; }
}
@media (max-width: 480px) { .sa-marque .sa-nom { display: none; } }

/* Les anciens boutons « ⌂ Suite » et logos « JB » sont remplacés par la barre */
html.sa-barre-on a[href="/"]:not(.sa-garder), html.sa-barre-on .logo-carre, html.sa-barre-on #lienDeconnexion { display: none !important; }

/* Pages qui occupent tout l'écran : on laisse la place de la barre */
html.sa-barre-on body:not(.apercu) #app { height: calc(100vh - var(--sa-h-barre)); height: calc(100dvh - var(--sa-h-barre)); }

/* Jamais de barre à l'impression ni dans les aperçus */
body.apercu .sa-barre { display: none; }
@media print { .sa-barre { display: none !important; } }

/* ---------- Droits fins (6 novembre) ----------
   stockage-partage.js ajoute html.sans-supprimer / sans-creer / sans-modifier selon le compte.
   On cache les boutons de suppression connus des modules (le serveur refuse de toute façon). */
html.sans-supprimer #bSupprimer, html.sans-supprimer #btnSupprSite, html.sans-supprimer #zSuppr, html.sans-supprimer #fSuppr,
html.sans-supprimer [data-cl], html.sans-supprimer [data-msuppr], html.sans-supprimer [data-ss],
html.sans-supprimer #purge-ajouts, html.sans-supprimer #suppr-ref { display: none !important; }