/* ============================================================
   ANIMA — passe de couleur (retour #2 de Michaël, 2026-09-25) : la couleur aide à LIRE et à DISTINGUER.
   Pilotée par un attribut sur <html> (posé en dur dans index.html en production ; en préversion, un outil d aperçu le faisait varier) :
     · absent (ou « Aucune » dans l'aperçu) : comportement actuel inchangé, aucune règle ne s'applique ;
     · data-couleur="sobre"    : la couleur signale l'interactif et l'état (survol, focus, actif, boutons, puces) ;
     · data-couleur="affirmee" : tout le sobre + des BANDES pleines d'accent en alternance avec le blanc
       (jamais deux bandes colorées adjacentes, au plus deux par écran), pastille pleine pour l'entrée active
       de la navigation, filet d'accent sous les titres de rubrique, puce d'icône colorée au repos.
   Règles de goût : la couleur est rare et signifiante, le blanc sépare ; aucun décalage de mise en page au
   survol (les lavis débordent par box-shadow, jamais par padding ou margin) ; transitions ≤ 150 ms, coupées
   sous prefers-reduced-motion ; le survol n'existe pas au tactile : :active et :focus-visible portent le même
   message. Jetons sémantiques de css/tokens.css seulement (tests/charte.test.mjs), valables pour les quatre
   palettes (actuelle, A, B, C) en clair et en sombre ; contrastes vérifiés par tests/palette.test.mjs.
   Les trois moments restent UNE famille de teinte (--m, --m-bande, --m-fond) : rien ici n'en ajoute.
   ============================================================ */

/* ---------- Réglages communs aux deux intensités ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) {
  --cl-deb: .6rem;   /* débord du lavis de survol des lignes collées au bord (box-shadow, sans décalage) */
}

/* Transitions courtes sur tout ce que cette feuille colore */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(
  .nav-l, .sousnav a, .esp-lien, .creer-liste a, .ligne, .prio, .rub, .ens-sejour a, .cartes > a, .cartes > li,
  .c-menu-item, .rch-item, .rec-fiche, .rec-chip, .tile, .role-case, .portail-entree, .sj-onglet, .mission,
  .c-btn, .rec-cta, .sf-btn, .auth-submit, .profil-ghost-btn, .retour-btn, .rch-btn, .sel-sejour-btn, .top-avatar,
  .lien-suite, .lien-discret, .lien-bouton, .esp-lien .ico, .creer-liste .ico
) {
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* ---------- Focus clavier : un seul anneau, à l'encre d'accent ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :where(a, button, summary, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):not(.rch-champ input):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-filet);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }

/* ---------- Barre haute : navigation, recherche, séjour, profil ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .nav-l:is(:hover, :active, :focus-visible) { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .nav-l.est-active { color: var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .nav-l.est-active::after { background: var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .nav-l:focus-visible { outline-offset: -4px; }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.rch-btn, .sel-sejour-btn, .retour-btn):is(:hover, :active, :focus-visible),
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sel-sejour-btn[aria-expanded="true"] {
  border-color: var(--survol-filet); color: var(--survol-texte);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sel-sejour-btn:is(:hover, :active, :focus-visible) .sel-sejour-sur { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .top-avatar:is(:hover, :active, :focus-visible, .est-active) {
  border-color: var(--survol-filet); background: var(--survol-fond); color: var(--survol-texte);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .brand-lien:is(:active, :focus-visible) .wordmark { color: var(--accent); }

/* Menus déroulants et palette de recherche : l'entrée survolée ou choisie au clavier se teinte */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .c-menu-item:is(:hover, :active, :focus-visible) { background: var(--survol-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .c-menu-item:is(:hover, :active, :focus-visible) b { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .c-menu-item.est-actif { border-left-color: var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rch-item:is(:hover, :active, .est-actif) { background: var(--survol-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rch-item:is(:hover, :active, .est-actif) b { color: var(--survol-texte); }

/* ---------- Sous-navigations (domaine, portail, profil) ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sousnav a:is(:hover, :active, :focus-visible) { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sousnav a.est-actif { color: var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sousnav a.est-actif::after { background: var(--accent); }
/* dans une bande teintée (domaine, portail), la sous-navigation garde l'encre de la bande */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .bande-domaine .sousnav a.est-actif { color: var(--teinte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .bande-domaine .sousnav a:not(.est-actif):is(:hover, :active) { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .bande-domaine .sousnav a.est-actif::after { background: var(--teinte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .bande-portail .sousnav a:is(.est-actif, :hover, :active) { color: inherit; }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .bande-portail .sousnav a.est-actif::after { background: currentColor; }

/* ---------- Lignes collées au bord : lavis d'accent qui déborde + barre d'accent à gauche ----------
   Entrées d'Outils et de Réseau, liste « Créer » de l'accueil, lignes de liste, priorités, planning. */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.esp-lien, .creer-liste a, .ligne, .c-planning-ligne):is(:hover, :active, :focus-visible),
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .prio:is(:hover, :active, :has(.prio-lien:focus-visible)) {
  background-color: var(--survol-fond);
  box-shadow: calc(-1 * var(--cl-deb)) 0 0 var(--survol-fond), var(--cl-deb) 0 0 var(--survol-fond),
    calc(-1 * var(--cl-deb) - 3px) 0 0 var(--survol-filet);
  outline-offset: calc(var(--cl-deb) + 3px);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .prio:has(.prio-lien:focus-visible) { outline-offset: calc(var(--cl-deb) + 5px); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.esp-lien, .creer-liste a):is(:hover, :active, :focus-visible) :is(b, .ico),
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .ligne:is(:hover, :active, :focus-visible) :is(.ligne-titre, .ligne-ico, .ligne-chevron),
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .prio:is(:hover, :active, :has(.prio-lien:focus-visible)) .prio-lien {
  color: var(--survol-texte);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.esp-lien, .creer-liste a, .ligne, .prio):is(:hover, :active, :focus-visible) :is(small, .ligne-sous, .prio-texte) { color: var(--texte-2); }

/* ---------- Cartes et tuiles (avec leur propre marge intérieure) ---------- */
/* Séjours de l'accueil : la famille du MOMENT (lavis --m-fond, nom à l'encre --m), pas l'accent */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .ens-sejour a:is(:hover, :active, :focus-visible) { background: var(--survol-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .ens-sejour a:is(:hover, :active, :focus-visible) .ens-nom { color: var(--survol-texte); }
/* Rubriques d'un séjour : le filet et l'icône gardent la teinte sourde du domaine ; le survol est d'accent */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rub:is(:hover, :active, :has(.rub-lien:focus-visible)) { background: var(--survol-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rub:not(.est-vide):is(:hover, :active, :has(.rub-lien:focus-visible)) .rub-nom { color: var(--survol-texte); }
/* Cartes (accueil « Toujours ouverts », portails, sommaires) */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .cartes > a:is(:hover, :active, :focus-visible),
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .cartes > li:has(> a:hover, > a:active, > a:focus-visible) { background: var(--survol-fond); }
/* Fiches de poste, candidats, tuiles historiques, cases de rôle */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.rec-fiche, .tile, .role-case):is(:hover, :active, :focus-visible) {
  background: var(--survol-fond); border-color: var(--survol-filet); transform: none;
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-fiche:is(:hover, :active, :focus-visible) .rec-fiche-titre,
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .tile:is(:hover, :active, :focus-visible) .th h3 { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .tile .th { background: transparent; }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .role-case:has(input:checked) { background: var(--accent-fond); }
/* Filtres (chips) : l'actif est un lavis d'accent bordé ; le survol en annonce la couleur */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-chip:is(:hover, :active, :focus-visible) { color: var(--survol-texte); border-color: var(--survol-filet); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-chip.active .rec-chip-n { color: var(--accent); }
/* Quête « premiers pas » : la mission suivante et son étiquette portent l'accent */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .mission h3 a:is(:hover, :active, :focus-visible) { color: var(--survol-texte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .mission.est-suivante { background: var(--accent-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .mission.est-suivante .etiquette { color: var(--accent); border-color: var(--accent); }

/* ---------- Onglets des moments : l'actif est déjà une bande pleine ; le toucher dit la même chose que le survol ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .sj-onglet:not(.est-actif):is(:active, :focus-visible) { background: var(--m-fond); color: var(--texte); }

/* ---------- Portails (Ressources) : aucun décalage au survol, une barre claire à gauche ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .portail-entree:is(:hover, :active, :focus-visible) {
  padding-left: 0;
  background: var(--survol-fond);
  box-shadow: calc(-1 * var(--cl-deb)) 0 0 var(--survol-fond), calc(-1 * var(--cl-deb) - 3px) 0 0 var(--sur-portail);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .portail-entree:is(:active, :focus-visible) b { text-decoration: underline; text-underline-offset: 4px; }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.portail, .bande-portail) :focus-visible { outline-color: var(--sur-portail); }

/* ---------- Liens texte ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.lien-suite, .lien-discret, .lien-bouton, .ariane-l, .ac-carte-liens a, .sj-actions a):is(:hover, :active, :focus-visible) { color: var(--survol-texte); }

/* ---------- Boutons : primaire plein d'accent, secondaire en contour d'accent ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.c-btn-plein, .rec-cta, .sf-btn-primary, .auth-submit) {
  background: var(--accent); border-color: var(--accent); color: var(--sur-accent); filter: none;
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.c-btn-plein, .rec-cta, .sf-btn-primary, .auth-submit):is(:hover, :active, :focus-visible):not(:disabled) {
  background: var(--survol-plein); border-color: var(--survol-plein); color: var(--survol-plein-encre); filter: none;
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.c-btn:not(.c-btn-plein), .sf-btn:not(.sf-btn-primary, .sf-btn-danger), .profil-ghost-btn):not(:is(.portail, .bande-portail) *) {
  color: var(--accent); border-color: var(--accent);
}
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.c-btn:not(.c-btn-plein), .sf-btn:not(.sf-btn-primary, .sf-btn-danger), .profil-ghost-btn):not(:is(.portail, .bande-portail) *):is(:hover, :active, :focus-visible):not(:disabled) {
  background: var(--survol-fond); color: var(--survol-texte); border-color: var(--survol-filet);
}

/* ---------- Puces d'état ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-badge-accent { border-color: var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.pastille-ok, .pastille-alerte, .pastille-critique) { box-shadow: inset 0 0 0 1px currentColor; }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-badge-ok { border-color: var(--ok); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-badge-warn { border-color: var(--alerte); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .rec-badge-crit { border-color: var(--critique); }

/* ---------- Fenêtres modales : un filet d'accent en tête ---------- */
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.cdlg-box, .rec-sheet, .pe-picker, .rch) { border-top: 3px solid var(--accent); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.rec-sheet-close):is(:hover, :active, :focus-visible) { color: var(--survol-texte); background: var(--survol-fond); }
:root:is([data-couleur="sobre"], [data-couleur="affirmee"]) .pe-picker-it:is(:hover, :active, :focus-visible) { background: var(--survol-fond); color: var(--survol-texte); }


/* ============================================================
   AFFIRMÉE : bandes pleines d'accent, pastille active, filets de rubrique, puces d'icône
   ============================================================ */

/* ---------- Bandes pleines : désormais les VOLETS du langage de surface (css/coque.css, alternance posée par
   js/coque.js alternerVolets) ; les têtes de page restent claires partout (uniformisation 2026-09-25). Les anciennes
   règles « tête en bande d'accent », « avancement en bande » et « portails alternés » sont retirées. ---------- */

/* ---------- Navigation haute : l'entrée active en pastille pleine (cible 44 px) ---------- */
:root[data-couleur="affirmee"] .nav-haut { gap: clamp(.1rem, .6vw, .5rem); }
:root[data-couleur="affirmee"] .nav-haut .nav-l { align-self: center; height: 44px; padding: 0 .8rem; border-radius: 22px; }
:root[data-couleur="affirmee"] .nav-haut .nav-l::after { display: none; }
:root[data-couleur="affirmee"] .nav-haut .nav-l:not(.est-active):is(:hover, :active, :focus-visible) { background: var(--survol-fond); color: var(--survol-texte); }
:root[data-couleur="affirmee"] .nav-haut .nav-l.est-active { background: var(--accent); color: var(--sur-accent); }
:root[data-couleur="affirmee"] .nav-haut .nav-l.est-active:is(:hover, :active, :focus-visible) { background: var(--survol-plein); color: var(--survol-plein-encre); }
:root[data-couleur="affirmee"] .nav-haut .nav-l:focus-visible { outline-offset: 2px; }
/* navigation basse (téléphone) : l'icône de l'entrée active dans une pastille pleine */
:root[data-couleur="affirmee"] .nav-bas .nav-l.est-active::after { display: none; }
:root[data-couleur="affirmee"] .nav-bas .nav-l.est-active .ico {
  color: var(--sur-accent); background: var(--accent); border-radius: 9px;
  box-shadow: 0 0 0 3px var(--accent), -9px 0 0 3px var(--accent), 9px 0 0 3px var(--accent);
}

/* ---------- Titres de rubrique : un filet d'accent ---------- */
:root[data-couleur="affirmee"] .kicker::before { background: var(--accent); opacity: 1; height: 2px; }
:root[data-couleur="affirmee"] .col-titre { border-bottom-color: var(--accent); }
:root[data-couleur="affirmee"] .col-titre .ico { color: var(--accent); }
/* page d'un séjour : les titres de colonne prennent l'encre du moment (même famille que la bande) */
:root[data-couleur="affirmee"] .sj .rubrique-tete.sj-col-tete { border-bottom: 2px solid var(--m); }
:root[data-couleur="affirmee"] .sj .col-titre { color: var(--m); }
:root[data-couleur="affirmee"] .sj .col-titre .ico { color: var(--m); }

/* ---------- Catégories : puce d'icône colorée au repos ---------- */
:root[data-couleur="affirmee"] :is(.esp-lien, .creer-liste a) .ico {
  color: var(--accent); background: var(--accent-fond); border-radius: 50%; box-shadow: 0 0 0 5px var(--accent-fond);
}
:root[data-couleur="affirmee"] :is(.esp-lien, .creer-liste a):is(:hover, :active, :focus-visible) .ico {
  color: var(--survol-plein-encre); background: var(--survol-plein); box-shadow: 0 0 0 5px var(--survol-plein);
}
/* cartes de l'accueil (Outils, Réseau, Réglementation, Animer) : une seule couleur, l'accent, au lieu de quatre teintes */
:root[data-couleur="affirmee"] .ac-cartes .ac-carte { border-left-color: var(--accent); }
:root[data-couleur="affirmee"] .ac-cartes .ac-carte :is(h3, b) { color: var(--accent); }

/* ---------- Fenêtres modales : en-tête en bande pleine ---------- */
:root[data-couleur="affirmee"] :is(.rec-sheet-head) { background: var(--accent-bande); color: var(--sur-portail); border-bottom-color: transparent; }
:root[data-couleur="affirmee"] :is(.rec-sheet-title, .rec-sheet-close) { color: var(--sur-portail); }
:root[data-couleur="affirmee"] :is(.rec-sheet-close):is(:hover, :active, :focus-visible) { background: var(--portail-filet); color: var(--sur-portail); outline-color: var(--sur-portail); }
:root[data-couleur="affirmee"] :is(.rec-sheet) { border-top-color: var(--accent-bande); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  :root:is([data-couleur="sobre"], [data-couleur="affirmee"]) * { transition: none !important; }
}
@media print {
  :root:is([data-couleur="sobre"], [data-couleur="affirmee"]) :is(.bande-simple, .bande-profil, .bande-portail, .ac-bonjour, .esp-tete, .portail, .quete-avancement) {
    background: transparent; color: inherit; box-shadow: none;
  }
}

/* Sombre : les grands volumes restent graphite ; le pétrole ponctue les actions. */
:root[data-theme="sombre"][data-couleur="affirmee"] .nav-haut .nav-l.est-active {
  background: var(--s3); color: var(--texte);
  box-shadow: inset 0 -2px 0 var(--accent);
}
:root[data-theme="sombre"][data-couleur="affirmee"] .nav-haut .nav-l.est-active:is(:hover, :active, :focus-visible) {
  background: var(--survol-fond); color: var(--survol-texte);
}
:root[data-theme="sombre"][data-couleur="affirmee"] .nav-bas .nav-l.est-active .ico {
  background: var(--s3); color: var(--accent); box-shadow: none;
}
:root[data-theme="sombre"][data-couleur="affirmee"] :is(.esp-lien, .creer-liste a) .ico {
  background: var(--s3); color: var(--texte-2); box-shadow: 0 0 0 5px var(--s3);
}
:root[data-theme="sombre"][data-couleur="affirmee"] .ac-cartes .ac-carte :is(h3, b) { color: var(--texte); }
:root[data-theme="sombre"][data-couleur="affirmee"] .ac-cartes .ac-carte { border-left-color: var(--ligne-2); }
:root[data-theme="sombre"][data-couleur="affirmee"] .ac-cartes .ac-carte:is(:hover, :focus-visible) { border-left-color: var(--accent); }
:root[data-theme="sombre"] :is(.org-onglet.est-actif, .fiche-chip.on, .rt-verdict-btn.on, .inf-aisance-opt.on, .inf-soin-opt.on) {
  background: var(--s3); color: var(--texte); border-color: var(--accent); box-shadow: none;
}
:root[data-theme="sombre"] :is(.org-onglet.est-actif, .fiche-chip.on, .rt-verdict-btn.on, .inf-aisance-opt.on, .inf-soin-opt.on):is(:hover, :focus-visible) {
  background: var(--survol-fond); color: var(--survol-texte);
}