/* ==========================================================================
   Charte SOSCC v1.0 — composants communs (servi en /charte/composants.css)
   Un même élément a le même dessin partout : en-tête, boutons, onglets, segments,
   cartes, pastilles, tableaux, champs, bandeaux, état vide, fenêtre, toast.
   À charger après /charte/soscc.css et la feuille de famille (outils.css, vitrine.css),
   et avant la feuille propre de la page.
   Valeurs : uniquement des jetons (charte/jetons.json → soscc.css). Rien en dur.
   Planche de référence : /charte/composants.html. Règle : CHARTE.md, « Composants communs ».

   Les « ponts » (:where([data-surface="…"]) .classe-locale, même poids qu'une classe locale, si bien que la mise en page propre de la surface garde la main) rattachent les classes
   qu'une surface produit déjà par son JavaScript au dessin commun, sans toucher
   à sa logique. Une page nouvelle utilise directement les classes cc-* et .btn.
   ========================================================================== */

/* ---------- Échelle d'espacements (rappel : jetons de base.css) ----------
   --e-1 4 px · --e-2 8 · --e-3 12 · --e-4 16 · --e-5 24 · --e-6 32 · --e-7 48 · --e-8 72
   Hauteurs : --cible 48 (boutons, champs, onglets) · --cible-compacte 44 (barres d'outils,
   segments, boutons dans une liste) · --puce-h 32 (puces de filtre) · --pastille-h 24 (pastilles).
   Textes : --t-titre-page 24 · --t-titre-section 20 · --t-titre-carte 16 · --t-commande 15 ·
   --t-commande-compacte 14 · --t-petit 13 · --t-etiquette 12. */

/* ---------- En-tête d'application ---------- */
.cc-entete,
:where([data-surface="demo"]) .barre {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--entete-h); padding: var(--e-2) var(--e-4);
  background: var(--c-surface-pleine);
  border-bottom: var(--trait-l) solid var(--c-trait);
  color: var(--c-texte);
  position: relative; z-index: 6;
}
.cc-entete-marque { display: flex; align-items: center; gap: var(--e-3); flex: none; min-width: 0; }
.cc-entete .logo-horizontal, :where([data-surface="demo"]) .barre-marque .logo-horizontal { height: 34px; }
.cc-entete-titre { margin: 0; font: var(--f-poids-titre) var(--t-titre-carte)/1.15 var(--f-titre); letter-spacing: var(--f-titre-esp); }
.cc-entete-sous-titre,
:where([data-surface="demo"]) .barre-marque .module { display: block; margin: 0; font: 600 var(--t-petit)/1.2 var(--f-texte); color: var(--c-texte-2); }
.cc-entete-actions { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
@media (max-width: 720px) { .cc-entete .logo-horizontal, :where([data-surface="demo"]) .barre-marque .logo-horizontal { height: 26px; } .cc-entete-sous-titre { display: none; } }

/* ---------- Boutons ----------
   .btn (base.css) = 48 px, rayon --r-bouton, gras. Variantes : .btn-principal · .btn-second ·
   .btn-neutre · .btn-discret · .btn-danger · .btn-icone · taille .btn-compact. */
.btn-discret { background: transparent; color: var(--c-texte-2); border-color: var(--c-trait); }
.btn-discret:hover { color: var(--c-accent); border-color: var(--c-accent); filter: none; }
.btn-danger { background: var(--n-rouge-fond); color: var(--n-rouge-encre); }
.btn-danger:hover { background: var(--n-rouge); color: var(--n-noir-encre); filter: none; }
.btn-icone { min-width: var(--cible); padding: 0 var(--e-2); }
.btn-compact { min-height: var(--cible-compacte); padding: 0 var(--e-3); font-size: var(--t-commande-compacte); }
.btn-compact.btn-icone { min-width: var(--cible-compacte); }
.btn[aria-pressed="true"]:not(.btn-principal) { background: var(--c-accent-doux); color: var(--c-accent); border-color: var(--c-accent); }

/* Bouton neutre compact (lien d'action, outil rond) : même dessin partout */
.cc-bouton,
:where([data-surface="demo"]) .pt-lien,
:where([data-surface="demo"]) .pt-rond {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: var(--cible-compacte); min-width: var(--cible-compacte); padding: 0 var(--e-3);
  border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait);
  background: var(--c-surface-forte); color: var(--c-texte);
  font: 700 var(--t-commande-compacte)/1.2 var(--f-texte); text-decoration: none; text-align: left;
  cursor: pointer; transition: border-color var(--mvt), color var(--mvt), background-color var(--mvt);
}
.cc-bouton:hover, .cc-bouton[aria-pressed="true"],
:where([data-surface="demo"]) .pt-lien:hover, :where([data-surface="demo"]) .pt-lien.cite, :where([data-surface="demo"]) .pt-lien[aria-pressed="true"],
:where([data-surface="demo"]) .pt-rond:hover { border-color: var(--c-accent); color: var(--c-accent); }
:where([data-surface="demo"]) .pt-actions .btn,
:where([data-surface="demo"]) .segments .btn,
:where([data-surface="demo"]) .photo-btn { min-height: var(--cible-compacte); padding: 0 var(--e-4); font-size: var(--t-commande); }
:where([data-surface="demo"]) .segments .btn[aria-pressed="true"] { background: var(--c-accent); color: var(--c-sur-accent); border-color: transparent; }
/* Bouton « ajouter » (pointillés) */
.cc-ajout,
:where([data-surface="demo"]) .pt-ajout {
  width: 100%; min-height: var(--cible-compacte); border-radius: var(--r-m);
  border: var(--trait-l) dashed var(--c-trait); background: none; color: var(--c-texte-2);
  font: 700 var(--t-commande-compacte)/1 var(--f-texte); cursor: pointer;
}
.cc-ajout:hover, :where([data-surface="demo"]) .pt-ajout:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* Bouton texte (« ‹ Retour ») */
.cc-lien-texte,
:where([data-surface="demo"]) .retour { background: none; border: 0; padding: var(--e-2) 0; min-height: var(--cible-compacte); color: var(--c-accent); font: 700 var(--t-commande)/1.2 var(--f-texte); cursor: pointer; }

/* ---------- Segments (choix exclusif : postes, clair/sombre/auto, oui/non) ---------- */
.cc-segments,
:where([data-surface="demo"]) .postes,
:where([data-surface="demo"]) .pt-modes,
:where([data-surface="demo"]) .pt-seg {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait);
  background: var(--c-surface-forte);
}
.cc-segments > button,
:where([data-surface="demo"]) .postes button,
:where([data-surface="demo"]) .pt-modes button,
:where([data-surface="demo"]) .pt-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: calc(var(--cible-compacte) - 8px); padding: 0 var(--e-3);
  border: 0; border-radius: calc(var(--r-bouton) - 3px);
  background: none; color: var(--c-texte-2);
  font: 700 var(--t-commande-compacte)/1.1 var(--f-texte); white-space: nowrap; cursor: pointer;
}
.cc-segments > button:hover,
:where([data-surface="demo"]) .postes button:hover, :where([data-surface="demo"]) .pt-modes button:hover, :where([data-surface="demo"]) .pt-seg button:hover { color: var(--c-texte); }
.cc-segments > button[aria-pressed="true"], .cc-segments > button[aria-selected="true"],
:where([data-surface="demo"]) .postes button[aria-pressed="true"],
:where([data-surface="demo"]) .pt-modes button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-sur-accent); }
/* Réponses de contrôle : la couleur du niveau, avec le mot (Oui / Non / Sans objet) */
.cc-segments > button.ok[aria-pressed="true"], :where([data-surface="demo"]) .pt-seg button[aria-pressed="true"].ok { background: var(--n-vert-fond); color: var(--n-vert-encre); }
.cc-segments > button.ko[aria-pressed="true"], :where([data-surface="demo"]) .pt-seg button[aria-pressed="true"].ko { background: var(--n-rouge-fond); color: var(--n-rouge-encre); }
.cc-segments > button.na[aria-pressed="true"], :where([data-surface="demo"]) .pt-seg button[aria-pressed="true"].na,
:where([data-surface="demo"]) .pt-seg button[aria-pressed="true"].neutre { background: var(--c-accent-doux); color: var(--c-accent); }
:where([data-surface="demo"]) .pt-seg button.ok { color: var(--n-vert-encre); }
:where([data-surface="demo"]) .pt-seg button.ko { color: var(--n-rouge-encre); }

/* ---------- Puces de filtre (avec compteur) ---------- */
.cc-puces,
:where([data-surface="demo"]) .pt-filtres { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.cc-puce,
:where([data-surface="demo"]) .pt-filtres button {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--puce-h); padding: 0 var(--e-3);
  border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait);
  background: none; color: var(--c-texte-2);
  font: 700 var(--t-etiquette)/1 var(--f-texte); cursor: pointer;
}
.cc-puce[aria-pressed="true"], .cc-puce.on,
:where([data-surface="demo"]) .pt-filtres button[aria-pressed="true"] { background: var(--c-accent-doux); color: var(--c-accent); border-color: transparent; }
.cc-puce .nb, :where([data-surface="demo"]) .pt-filtres .nb { font-variant-numeric: tabular-nums; opacity: .8; }

/* ---------- Onglets ---------- */
.cc-onglets,
:where([data-surface="demo"]) .pt-onglets { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cc-onglets::-webkit-scrollbar { display: none; }
.cc-onglets > button, .cc-onglets > a,
:where([data-surface="demo"]) .pt-onglets button {
  flex: none; display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--cible-compacte); padding: 0 var(--e-3);
  border: 0; border-bottom: var(--onglet-trait) solid transparent; border-radius: 0;
  background: none; color: var(--c-texte-2); text-decoration: none;
  font: 700 var(--t-commande)/1 var(--f-texte); white-space: nowrap; cursor: pointer;
}
.cc-onglets > button:hover, .cc-onglets > a:hover, :where([data-surface="demo"]) .pt-onglets button:hover { color: var(--c-texte); }
.cc-onglets > [aria-selected="true"], .cc-onglets > [aria-current="page"], .cc-onglets > .on,
:where([data-surface="demo"]) .pt-onglets button[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.cc-onglets .nb, :where([data-surface="demo"]) .pt-onglets .nb { margin-left: var(--e-1); padding: 1px 7px; border-radius: var(--r-bouton); background: var(--c-accent-doux); font-size: var(--t-etiquette); font-variant-numeric: tabular-nums; }

/* Menu de modules (rail vertical) */
.cc-rail { display: flex; flex-direction: column; gap: 2px; }
.cc-rail > a, .cc-rail > button {
  display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible-compacte); padding: 0 var(--e-3);
  border: 0; border-radius: var(--r-m); background: none; color: var(--c-texte-2);
  font: 700 var(--t-commande)/1.2 var(--f-texte); text-decoration: none; text-align: left; cursor: pointer;
}
.cc-rail > a:hover, .cc-rail > button:hover { background: var(--c-surface-forte); color: var(--c-texte); }
.cc-rail > [aria-current="page"], .cc-rail > [aria-current="true"], .cc-rail > .on { background: var(--c-accent-doux); color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }

/* ---------- Cartes et panneaux ---------- */
.cc-carte,
:where([data-surface="demo"]) .pt-cadre,
:where([data-surface="demo"]) .accueil {
  margin: 0 0 var(--e-3); padding: var(--e-4);
  border-radius: var(--r-l); border: var(--trait-l) solid var(--c-bord);
  background: var(--c-surface); color: var(--c-texte);
  box-shadow: var(--o-1);
}
:where([data-surface="demo"]) .accueil, :where([data-surface="demo"]) .pt-infos .pt-cadre { background: var(--c-surface-forte); }
.cc-carte > h2, .cc-carte > h3,
:where([data-surface="demo"]) .pt-cadre > h2, :where([data-surface="demo"]) details.pt-cadre > summary {
  margin: 0 0 var(--e-2); font: var(--f-poids-titre) var(--t-titre-carte)/1.3 var(--f-titre); letter-spacing: var(--f-titre-esp);
}
.cc-carte > h2 small, .cc-carte > h3 small,
:where([data-surface="demo"]) .pt-cadre > h2 small, :where([data-surface="demo"]) details.pt-cadre > summary small { font: 500 var(--t-petit)/1.2 var(--f-texte); color: var(--c-texte-2); letter-spacing: 0; }
.cc-panneau {
  padding: var(--e-5); border-radius: var(--r-l); border: var(--trait-l) solid var(--c-bord);
  background: var(--c-surface-forte); box-shadow: var(--o-1);
  -webkit-backdrop-filter: var(--verre); backdrop-filter: var(--verre);
}
/* Étiquette de section (petit titre au-dessus d'un bloc) */
.cc-etiquette,
:where([data-surface="demo"]) .etiquette,
:where([data-surface="demo"]) .pt-titre { margin: 0 0 var(--e-2); font: 700 var(--t-etiquette)/1.3 var(--f-texte); color: var(--c-texte-3); letter-spacing: .01em; }

/* ---------- Pastilles ----------
   Niveaux : .niv .niv-orange .niv-rouge .niv-noir (base.css), toujours couleur + icône + mot.
   Pastille neutre ou d'information : .cc-pastille (+ -accent, -vert, -orange, -rouge, -noir).
   État d'une donnée : .cc-donnee-verifiee · .cc-donnee-a-confirmer · .cc-donnee-savoir. */
.cc-pastille,
:where([data-surface="demo"]) .pt-etat,
:where([data-surface="demo"]) .pt-origine,
:where([data-surface="demo"]) .terrain,
:where([data-surface="demo"]) .pastille,
:where([data-surface="demo"]) .base-n {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: var(--pastille-h); padding: 0 var(--e-2);
  border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait);
  background: var(--c-surface-forte); color: var(--c-texte-2);
  font: 700 var(--t-etiquette)/1.2 var(--f-texte); font-variant-numeric: tabular-nums; white-space: nowrap;
}
:where([data-surface="demo"]) .pastille { margin-left: var(--e-2); }
:where([data-surface="demo"]) .base-n { margin-left: var(--e-1); }
.cc-pastille-accent, :where([data-surface="demo"]) .pt-origine, :where([data-surface="demo"]) .terrain, :where([data-surface="demo"]) .pt-etat.recu { background: var(--c-accent-doux); color: var(--c-accent); border-color: transparent; }
:where([data-surface="demo"]) .pt-origine, :where([data-surface="demo"]) .terrain { color: var(--c-texte-2); }
.cc-pastille-vert, .cc-donnee-verifiee, :where([data-surface="demo"]) .pt-etat.rendu, :where([data-surface="demo"]) .pastille, :where([data-surface="demo"]) .etat-vert { background: var(--n-vert-fond); color: var(--n-vert-encre); border-color: transparent; }
.cc-pastille-orange, .cc-donnee-a-confirmer, :where([data-surface="demo"]) .pt-etat.atelier, :where([data-surface="demo"]) .pt-etat.a_restituer, :where([data-surface="demo"]) .etat-orange { background: var(--n-orange-fond); color: var(--n-orange-encre); border-color: transparent; }
.cc-pastille-rouge { background: var(--n-rouge-fond); color: var(--n-rouge-encre); border-color: transparent; }
.cc-pastille-noir { position: relative; overflow: hidden; padding-left: var(--e-4); background: var(--n-noir-fond); color: var(--n-noir-encre); border-color: transparent; }
.cc-pastille-noir::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .5em; background: repeating-linear-gradient(-45deg, var(--n-rayure) 0 4px, var(--n-noir-fond) 4px 8px); }
.cc-donnee-savoir { background: var(--c-accent-doux); color: var(--c-accent); border-color: transparent; }
:where([data-surface="demo"]) .etat-gris { background: var(--c-surface-forte); color: var(--c-texte-2); }
.cc-donnee-verifiee::before { content: "✓"; }
.cc-donnee-a-confirmer::before { content: "?"; }
.cc-donnee-savoir::before { content: "⚒"; }
.cc-pastille-lien, :where([data-surface="demo"]) .pt-etat.lien { background: none; border-style: dashed; }
/* Code ou référence (police de texte, chiffres alignés) */
.cc-code,
:where([data-surface="demo"]) .pt-code { display: inline-block; padding: var(--e-1) var(--e-2); border-radius: var(--r-s); border: var(--trait-l) solid var(--c-trait); background: var(--c-surface-forte); font: 700 var(--t-commande-compacte)/1.2 var(--f-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tableaux ---------- */
.cc-tableau,
:where([data-surface="demo"]) .stats { width: 100%; border-collapse: collapse; font-size: var(--t-commande-compacte); font-variant-numeric: tabular-nums; color: var(--c-texte); }
.cc-tableau th { padding: var(--e-2) var(--e-3); text-align: left; font: 700 var(--t-etiquette)/1.3 var(--f-texte); color: var(--c-texte-3); border-bottom: var(--trait-l) solid var(--c-trait); }
.cc-tableau td,
:where([data-surface="demo"]) .stats td { padding: var(--e-2) var(--e-3); border-top: var(--trait-l) solid var(--c-trait); vertical-align: top; }
.cc-tableau .nombre, .cc-tableau td.nombre, .cc-tableau th.nombre { text-align: right; }
.cc-tableau tbody tr:hover td { background: color-mix(in srgb, var(--c-accent) 6%, transparent); }

/* ---------- Champs (les <input>, <select>, <textarea> eux-mêmes sont dessinés par base.css) ---------- */
.cc-champ,
:where([data-surface="demo"]) .pt-champ { display: block; margin: var(--e-3) 0 0; font: 700 var(--t-petit)/1.3 var(--f-texte); color: var(--c-texte-2); }
.cc-champ > input, .cc-champ > select, .cc-champ > textarea,
:where([data-surface="demo"]) .pt-champ input { display: block; width: 100%; margin-top: var(--e-1); font-weight: 400; }
.cc-champ .aide { display: block; margin-top: var(--e-1); font-weight: 500; color: var(--c-texte-3); }
.cc-champ.erreur > input, .cc-champ.erreur > select, .cc-champ.erreur > textarea { border-color: var(--n-rouge); }
.cc-champ .message-erreur { display: block; margin-top: var(--e-1); color: var(--n-rouge-encre); }
/* Liste déroulante compacte (barre d'outils) : même hauteur que les boutons de la barre */
.cc-select-compact,
:where([data-surface="demo"]) .pt-select { min-height: var(--cible-compacte); padding: 0 var(--e-2); border-radius: var(--r-bouton); font: 700 var(--t-commande-compacte)/1 var(--f-texte); }
.cc-case { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible-compacte); cursor: pointer; }

/* ---------- Bandeaux : démo, hors ligne, alerte, danger ---------- */
.cc-bandeau,
:where([data-surface="demo"]) .bandeau-hors-ligne { margin: 0; padding: var(--e-2) var(--e-4); font: 600 var(--t-petit)/1.4 var(--f-texte); text-align: center; background: var(--c-accent-doux); color: var(--c-accent); }
.cc-bandeau-demo { background: var(--c-accent-doux); color: var(--c-accent); }
.cc-bandeau-hors-ligne, :where([data-surface="demo"]) .bandeau-hors-ligne { background: var(--n-orange-fond); color: var(--n-orange-encre); }
.cc-bandeau-alerte { background: var(--n-rouge-fond); color: var(--n-rouge-encre); }
/* ---------- Encart d'état (décision d'Alex du 10/10 : proposition 1, remplace le liseré latéral) ----------
   Couleur + icône dessinée + mot ; aucun bord épais. Variantes : cc-encart-vert | -orange | -rouge. */
.cc-encart { --e: var(--c-accent); --f: var(--c-accent-doux); --t: var(--c-accent); display: flex; gap: var(--e-3); align-items: flex-start; margin: 0 0 var(--e-3); padding: var(--e-3); border-radius: var(--r-m); background: var(--f); border: 1px solid color-mix(in srgb, var(--t) 38%, transparent); color: var(--c-texte); font: 500 var(--t-commande-compacte)/1.45 var(--f-texte); }
.cc-encart-vert { --e: var(--n-vert-encre); --f: var(--n-vert-fond); --t: var(--n-vert); }
.cc-encart-orange { --e: var(--n-orange-encre); --f: var(--n-orange-fond); --t: var(--n-orange); }
.cc-encart-rouge { --e: var(--n-rouge-encre); --f: var(--n-rouge-fond); --t: var(--n-rouge); }
.cc-encart > .cc-encart-ico { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--c-surface-pleine); color: var(--e); }
.cc-encart > .cc-encart-ico svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-encart p { margin: 0; }
.cc-encart .cc-encart-titre { margin-bottom: var(--e-1); font-weight: 700; color: var(--e); }
/* Encadré d'alerte dans un écran (à vérifier, à venir) */
.cc-encadre,
:where([data-surface="demo"]) .a-venir { display: grid; gap: var(--e-1); margin: 0 0 var(--e-3); padding: var(--e-3); border-radius: var(--r-m); border: 2px dashed var(--n-orange); background: var(--n-orange-fond); color: var(--c-texte); font-size: var(--t-commande-compacte); }
.cc-encadre strong, :where([data-surface="demo"]) .a-venir strong { color: var(--n-orange-encre); font-size: var(--t-commande); }
/* Danger, arrêt : noir, bande jaune et noire */
.cc-danger,
:where([data-surface="demo"]) .danger,
:where([data-surface="demo"]) .pt-alerte { position: relative; overflow: hidden; margin: 0 0 var(--e-3); padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 14px); border-radius: var(--r-l); border: 0; background: var(--n-noir-fond); color: var(--n-noir-encre); }
.cc-danger::before,
:where([data-surface="demo"]) .danger::before,
:where([data-surface="demo"]) .pt-alerte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: repeating-linear-gradient(-45deg, var(--n-rayure) 0 8px, var(--n-noir-fond) 8px 16px); }
.cc-danger h2, .cc-danger p, .cc-danger li, :where([data-surface="demo"]) .danger h2, :where([data-surface="demo"]) .danger p, :where([data-surface="demo"]) .danger li { color: var(--n-noir-encre); }
/* Message de réussite */
.cc-succes,
:where([data-surface="demo"]) .message-ok { margin: 0; padding: var(--e-3); border-radius: var(--r-m); background: var(--n-vert-fond); color: var(--n-vert-encre); font-weight: 700; }

/* ---------- État vide ---------- */
.cc-vide,
:where([data-surface="demo"]) .pt-vide { max-width: 520px; margin: 0 auto; padding: var(--e-7) var(--e-4); text-align: center; color: var(--c-texte-2); }
.cc-vide h2, :where([data-surface="demo"]) .pt-vide h2 { font-size: var(--t-titre-section); }

/* ---------- Fenêtre modale ---------- */
.cc-fenetre,
:where([data-surface="demo"]) .pt-fenetre {
  width: min(var(--fenetre-largeur), calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: var(--e-5); border-radius: var(--r-l); border: var(--trait-l) solid var(--c-trait);
  background: var(--c-surface-pleine); color: var(--c-texte); font-family: var(--f-texte); box-shadow: var(--o-2);
}
.cc-fenetre::backdrop, :where([data-surface="demo"]) .pt-fenetre::backdrop { background: color-mix(in srgb, var(--c-fond) 70%, transparent); }
.cc-fenetre h2, :where([data-surface="demo"]) .pt-fenetre h2 { margin: 0 0 var(--e-1); padding-right: 52px; font-size: var(--t-titre-section); }
.cc-fenetre-fermer, :where([data-surface="demo"]) .pt-fermer { position: absolute; top: var(--e-3); right: var(--e-3); }

/* ---------- Toast ---------- */
.cc-toast,
:where([data-surface="demo"]) .pt-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100vw - 32px); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-bouton); background: var(--c-accent); color: var(--c-sur-accent);
  font: 700 var(--t-commande)/1.3 var(--f-texte); text-align: center; box-shadow: var(--o-2);
}

/* ---------- Titres d'écran ---------- */
.cc-titre-page { margin: 0; font-size: var(--t-titre-page); }
.cc-titre-section { margin: 0 0 var(--e-2); font-size: var(--t-titre-section); }

/* ---------- Atelier : cibles de 88 px (contexte atelier) ---------- */
[data-contexte="atelier"] .cc-bouton, [data-contexte="atelier"] .cc-segments > button, [data-contexte="atelier"] .cc-onglets > button { min-height: var(--cible); }

/* ---------- Surface sans marge intérieure (conteneur d'écran : volet, zone de sortie) ---------- */
.cc-surface { border-radius: var(--r-l); border: var(--trait-l) solid var(--c-bord); background: var(--c-surface); box-shadow: var(--o-1); -webkit-backdrop-filter: var(--verre); backdrop-filter: var(--verre); }

/* ==========================================================================
   Ponts : SOS Élec (/elec/, data-surface="elec")
   ========================================================================== */
:where([data-surface="elec"]) body > header.tete-app { min-height: var(--entete-h); background: var(--c-surface-pleine); border-bottom: var(--trait-l) solid var(--c-trait); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where([data-surface="elec"]) .tete-app .atelier { font: 600 var(--t-petit)/1.2 var(--f-texte); color: var(--c-texte-2); }
:where([data-surface="elec"]) .profils, :where([data-surface="elec"]) .pal-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait); background: var(--c-surface-forte); }
:where([data-surface="elec"]) .profil, :where([data-surface="elec"]) .pal-mode button { min-height: calc(var(--cible-compacte) - 8px); padding: var(--e-1) var(--e-3); border: 0; border-radius: calc(var(--r-bouton) - 3px); background: none; color: var(--c-texte-2); font: 700 var(--t-commande-compacte)/1.15 var(--f-texte); cursor: pointer; box-shadow: none; }
:where([data-surface="elec"]) .profil small { font-weight: 500; font-size: var(--t-etiquette); }
:where([data-surface="elec"]) .profil:hover, :where([data-surface="elec"]) .pal-mode button:hover { color: var(--c-texte); background: none; }
:where([data-surface="elec"]) .profil.on, :where([data-surface="elec"]) .pal-mode button.on { background: var(--c-accent); color: var(--c-sur-accent); }
:where([data-surface="elec"]) .nav-it { min-height: var(--cible-compacte); padding: 0 var(--e-3); border: 0; border-radius: var(--r-m); background: none; color: var(--c-texte-2); font: 700 var(--t-commande)/1.2 var(--f-texte); text-decoration: none; }
:where([data-surface="elec"]) .nav-it:hover { background: var(--c-surface-forte); color: var(--c-texte); }
:where([data-surface="elec"]) .nav-it.on { background: var(--c-surface-forte); color: var(--c-texte); }
:where([data-surface="elec"]) .nav-it.actif { background: var(--c-accent-doux); color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }
:where([data-surface="elec"]) .socle .grp { font: 700 var(--t-etiquette)/1.3 var(--f-texte); color: var(--c-texte-3); letter-spacing: .01em; }
:where([data-surface="elec"]) .projet, :where([data-surface="elec"]) .saisie, :where([data-surface="elec"]) .sortie { border-radius: var(--r-l); border: var(--trait-l) solid var(--c-bord); background: var(--c-surface); box-shadow: var(--o-1); -webkit-backdrop-filter: var(--verre); backdrop-filter: var(--verre); }
:where([data-surface="elec"]) .projet h2 { font-size: var(--t-titre-page); }
:where([data-surface="elec"]) .projet .etiq, :where([data-surface="elec"]) .socle-note { font-size: var(--t-etiquette); }
:where([data-surface="elec"]) .projet .etiq { font-weight: 700; color: var(--c-accent); }
:where([data-surface="elec"]) .onglets { border-bottom: var(--trait-l) solid var(--c-trait); background: var(--c-nav); }
:where([data-surface="elec"]) .onglet { min-height: var(--cible-compacte); padding: 0 var(--e-3); border: 0; border-bottom: var(--onglet-trait) solid transparent; border-radius: 0; background: none; color: var(--c-texte-2); font: 700 var(--t-commande)/1 var(--f-texte); cursor: pointer; }
:where([data-surface="elec"]) .onglet:hover { color: var(--c-texte); background: none; }
:where([data-surface="elec"]) .onglet.on { color: var(--c-accent); border-bottom-color: var(--c-accent); }
:where([data-surface="elec"]) .onglet.second { font-weight: 600; }
:where([data-surface="elec"]) .pin, :where([data-surface="elec"]) .verdict, :where([data-surface="elec"]) .app-l .b230 { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--pastille-h); padding: 0 var(--e-2); border-radius: var(--r-bouton); border: 0; font: 700 var(--t-etiquette)/1.2 var(--f-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where([data-surface="elec"]) .pin { min-height: 0; padding: 1px var(--e-2); margin-left: var(--e-1); }
:where([data-surface="elec"]) .pin, :where([data-surface="elec"]) .v-a_confirmer, :where([data-surface="elec"]) .app-l .b230 { background: var(--n-orange-fond); color: var(--n-orange-encre); }
:where([data-surface="elec"]) .v-sourcee { background: var(--n-vert-fond); color: var(--n-vert-encre); }
:where([data-surface="elec"]) .v-corrigee { background: var(--n-rouge-fond); color: var(--n-rouge-encre); }
:where([data-surface="elec"]) .imp, :where([data-surface="elec"]) details.avance .in button { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); min-height: var(--cible-compacte); padding: 0 var(--e-3); border-radius: var(--r-bouton); border: var(--trait-l) solid var(--c-trait); background: var(--c-surface-forte); color: var(--c-texte); font: 700 var(--t-commande-compacte)/1.2 var(--f-texte); cursor: pointer; }
:where([data-surface="elec"]) .imp:hover, :where([data-surface="elec"]) details.avance .in button:hover { border-color: var(--c-accent); color: var(--c-accent); }
:where([data-surface="elec"]) .saisie .go { min-height: var(--cible); padding: 0 var(--e-5); border: 0; border-radius: var(--r-bouton); background: var(--c-accent); color: var(--c-sur-accent); font: 700 var(--t-commande)/1.15 var(--f-texte); cursor: pointer; }
:where([data-surface="elec"]) .bloc, :where([data-surface="elec"]) .cc { border-radius: var(--r-l); border: var(--trait-l) solid var(--c-bord); background: var(--c-surface); box-shadow: var(--o-1); }
:where([data-surface="elec"]) .cc { border: 1px solid color-mix(in srgb,var(--n-vert) 40%,transparent); }
:where([data-surface="elec"]) .cc.cc-orange { border-color: color-mix(in srgb,var(--n-orange) 40%,transparent); }
:where([data-surface="elec"]) .cc.cc-rouge { border-color: color-mix(in srgb,var(--n-rouge) 40%,transparent); }
:where([data-surface="elec"]) .bloc > h3, :where([data-surface="elec"]) .cc h4 { font: var(--f-poids-titre) var(--t-titre-carte)/1.3 var(--f-titre); letter-spacing: var(--f-titre-esp); }
:where([data-surface="elec"]) .bloc > h3 .compte { font: 600 var(--t-petit)/1.2 var(--f-texte); color: var(--c-texte-2); letter-spacing: 0; }
:where([data-surface="elec"]) .vue h2 { font-size: var(--t-titre-section); }
:where([data-surface="elec"]) .saisie-titre { font-size: var(--t-titre-carte); }
:where([data-surface="elec"]) table.tab, :where([data-surface="elec"]) table.tab-prix { width: 100%; border-collapse: collapse; font-size: var(--t-commande-compacte); font-variant-numeric: tabular-nums; }
:where([data-surface="elec"]) table.tab th, :where([data-surface="elec"]) table.tab-prix th { padding: var(--e-2) var(--e-3); text-align: left; font: 700 var(--t-etiquette)/1.3 var(--f-texte); color: var(--c-texte-3); border-bottom: var(--trait-l) solid var(--c-trait); }
:where([data-surface="elec"]) table.tab td, :where([data-surface="elec"]) table.tab-prix td { padding: var(--e-2) var(--e-3); border-bottom: var(--trait-l) solid var(--c-trait); vertical-align: top; }
:where([data-surface="elec"]) label { font-size: var(--t-petit); color: var(--c-texte-2); }
:where([data-surface="elec"]) select { min-height: var(--cible); padding: .6em .9em; border-radius: var(--r-m); border: var(--trait-l) solid var(--c-trait); background: var(--c-surface-forte); color: var(--c-texte); font: inherit; }
:where([data-surface="elec"]) .outils select { min-height: var(--cible-compacte); padding: 0 var(--e-2); border-radius: var(--r-bouton); font: 700 var(--t-commande-compacte)/1 var(--f-texte); }
:where([data-surface="elec"]) details.journal summary, :where([data-surface="elec"]) details.cc-regle summary, :where([data-surface="elec"]) details.avance summary { min-height: var(--cible-compacte); font-size: var(--t-commande-compacte); }

@media print {
  .cc-carte, .cc-panneau { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cc-toast, .cc-bandeau-hors-ligne { display: none !important; }
}