/* Charte graphique GBUM 2026 — « nouvelle apparence », au choix de chacun.
   (Esaïe, 20/10/2026 : « que les gens puissent choisir la nouvelle version ou
   l'ancienne, les écrans doivent être les mêmes ».)

   Cette feuille ne redessine aucun écran : même HTML, mêmes parcours. Elle
   redéfinit les variables que app.css, refonte.css et finition.css lisent,
   puis raffine chaque composant sous « body.charte-2026 ». Elle n'est chargée
   que si l'apparence 2026 est active (Paramètres → Apparence) ; la retirer
   rend l'apparence classique, à l'octet.

   Raffinement du 20/10/2026 (Esaïe : « plus de travail, plus de raffinement,
   plus de shining ») : en-tête de page indigo à filet or, cartes à deux
   niveaux d'ombre, tableaux zébrés, boutons et champs à états visibles,
   hiérarchie Inter, halo jaune clair derrière le hero de l'accueil.
   Retour d'Esaïe le soir même (20 h) : « la bande gauche entièrement indigo,
   c'est bizarre » et « le ton orangeâtre dérange » — la barre latérale est
   donc CLAIRE (blanc, texte indigo, entrée active crème à barre orange), le
   fond de page est un gris très légèrement chaud (#F7F6F3), les cartes sont
   blanches et le crème #FFF7E8 ne sert plus qu'en touches (entrée active,
   encadrés, surlignage). Gardés tels quels : le hero indigo de l'accueil,
   l'en-tête indigo, la page d'attente de la grande salle.

   Charte (16/10/2026) : indigo #251F4F (fonds, titres), orange #FC7106
   (boutons, mots clés), or #F9A533 (traits fins), jaune clair #FFE17E (halos),
   crème #FFF7E8 (fond clair), gris lavande #A6A4B4 (secondaire sur indigo).
   Couples permis : blanc/indigo, orange/indigo, indigo/orange, indigo/crème.
   Interdits : blanc sur orange, orange sur blanc, or sur crème, or sur orange.
   Police unique : Inter (servie par nous, static/polices/inter-*.woff2).

   Palettes (app/apparence.py) : l'accent se lit TOUJOURS par les variables
   --primary, --primary-bord, --primary-hover, --primary-press, --on-primary,
   --focus, --sur-encre-accent, --soft ; les teintes dérivées de l'accent
   passent par color-mix(), pour suivre la palette choisie sans la connaître. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../polices/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../polices/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* La charte, nommée. */
  --indigo: #251F4F; --indigo-2: #2D2660; --indigo-3: #1B1740;
  --orange: #FC7106; --or: #F9A533; --jaune: #FFE17E; --creme-2026: #FFF7E8;
  --lavande: #A6A4B4; --lavande-fonce: #6E6B8A;
  /* Fond de page neutre, surfaces blanches, bordures grises à peine chaudes. */
  --fond: #F7F6F3; --fond-2: #F2F1ED; --bord: #ECE8E1; --ligne: #F0EDE7;
  /* Teinte indigo très claire : fonds de pastilles, boutons doux, tuiles d'icônes. */
  --indigo-tint: #EFEDF5; --indigo-tint-2: #E3E0EE; --indigo-bord: #D9D6E6;
  /* Ombres à deux niveaux : posée, puis soulevée (survol). Teintées indigo. */
  --ombre-1: 0 1px 2px rgba(37, 31, 79, .04), 0 3px 10px rgba(37, 31, 79, .06);
  --ombre-2: 0 2px 4px rgba(37, 31, 79, .05), 0 14px 34px rgba(37, 31, 79, .10);
  --halo: 0 0 0 1px rgba(255, 225, 126, .35), 0 10px 40px -6px rgba(255, 225, 126, .55);

  /* app.css */
  --bg: #F7F6F3;
  --panel: #FFFFFF;
  --panel2: #F2F1ED;
  --border: #ECE8E1;
  --line: #F0EDE7;
  --text: #251F4F;
  --muted: #5B577A;
  --faint: #6A6688;
  --primary: #FC7106;
  --primary-bord: #D95F00;
  --primary-hover: #FF8A2E;
  /* Texte « en couleur d'accent » sur fond clair (pastilles, dates, chiffres) :
     la charte proscrit l'orange sur blanc ou crème, il se dit en indigo. Les
     palettes foncées (bleu, rouge, vert) le remplacent par leur accent foncé. */
  --primary-press: #251F4F;
  --soft: #FFF7E8;        /* le crème de la charte, en touche seulement */
  --grad: linear-gradient(135deg, #2D2660 0%, #251F4F 55%, #1B1740 100%);
  --on-primary: #251F4F;
  --shadow: var(--ombre-1);
  --display: 'Inter', Arial, sans-serif;
  --ui: 'Inter', Arial, sans-serif;
  --ok: #251F4F;
  --ok-bg: #FFF2C4;
  --live: #A81F12;
  --focus: #FC7106;

  /* refonte.css */
  --creme: #F7F6F3;
  --sable: #F2F1ED;
  --encre: #251F4F;
  --terre: #251F4F;
  --trait: #ECE8E1;
  --trait-sable: #E3DFD6;
  --trait-encre: #3A3468;
  --bord-controle: #8E89AD;
  --sur-encre: #FFFFFF;
  --sur-encre-2: #A6A4B4;
  --sur-encre-accent: #FC7106;
  --sur-terre: #FFFFFF;
  --sur-terre-2: #FFE17E;
  --duree-courte: 160ms;
}

/* =========================================================== typographie */
body.charte-2026,
body.charte-2026 .serif,
body.charte-2026 h1, body.charte-2026 h2, body.charte-2026 h3,
body.charte-2026 button, body.charte-2026 input, body.charte-2026 select, body.charte-2026 textarea,
body.charte-2026 kbd {
  font-family: 'Inter', Arial, sans-serif;
}
body.charte-2026 { font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); }
body.charte-2026 h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
body.charte-2026 h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
body.charte-2026 h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
body.charte-2026 .serif { font-weight: 700; letter-spacing: -.012em; }
body.charte-2026 .section-title {
  font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--indigo);
  margin: 32px 2px 14px;
}
body.charte-2026 .section-title:first-child { margin-top: 0; }
body.charte-2026 .section-title > a.faint { color: var(--muted); }
body.charte-2026 .section-title > a.faint:hover { color: var(--indigo); }
body.charte-2026 .vide .titre { font-family: 'Inter', Arial, sans-serif; font-weight: 700; }
body.charte-2026 .post .ptitle { font-weight: 700; letter-spacing: -.01em; }
/* Chiffres alignés en colonne, partout où l'on compare. */
body.charte-2026 td, body.charte-2026 th,
body.charte-2026 .datechip, body.charte-2026 .chiffre .n, body.charte-2026 .solde-val,
body.charte-2026 .occup, body.charte-2026 .reel, body.charte-2026 .barre-val,
body.charte-2026 .ligne-info { font-variant-numeric: tabular-nums; }
body.charte-2026 ::selection { background: var(--jaune); color: var(--indigo); }
body.charte-2026 :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ======================================================= barre latérale */
/* Claire : blanc, texte indigo, rubriques lavande foncé, entrée active crème
   à barre orange. (Esaïe, 20/10 20 h : la bande indigo « c'est bizarre ».) */
body.charte-2026 .sidebar {
  background: #FFFFFF; border-right: 1px solid var(--bord); color: var(--indigo); padding: 22px 14px;
}
body.charte-2026 .brand { gap: 12px; padding: 2px 6px 22px; }
body.charte-2026 .brand .logo {
  height: 42px; padding: 5px; border-radius: 11px; background: #FFFFFF;
  border: 1px solid var(--bord); box-shadow: var(--ombre-1);
}
body.charte-2026 .brand .name { color: var(--indigo); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
body.charte-2026 .brand .sub { color: var(--lavande-fonce); font-size: 12.5px; letter-spacing: .02em; }

body.charte-2026 .sidebar .rech-declencheur {
  background: var(--fond); border: 1px solid var(--bord); color: var(--muted); border-radius: 12px; margin-bottom: 16px;
}
body.charte-2026 .sidebar .rech-declencheur:hover { background: #FFFFFF; border-color: var(--indigo-bord); color: var(--indigo); }
body.charte-2026 .sidebar kbd { background: #FFFFFF; border-color: var(--bord); color: var(--lavande-fonce); font-size: 12px; }

body.charte-2026 .sidebar .nav-item {
  color: #46426E; border-radius: 11px; font-weight: 500; padding: 10px 12px;
  transition: background-color 160ms ease, color 160ms ease;
}
body.charte-2026 .sidebar .nav-item svg { opacity: .85; transition: opacity 160ms ease; }
body.charte-2026 .sidebar .nav-item:hover { background: var(--fond); color: var(--indigo); }
body.charte-2026 .sidebar .nav-item:hover svg { opacity: 1; }
body.charte-2026 .sidebar .nav-item.active {
  color: var(--indigo); font-weight: 700; background: #FFF7E8; box-shadow: none;
}
body.charte-2026 .sidebar .nav-item.active svg { opacity: 1; }
/* La barre d'accent : 3 px, au bord gauche de la pastille crème. */
body.charte-2026 .sidebar .nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--primary); box-shadow: none;
}
body.charte-2026 .sidebar .nav-item:focus-visible { outline-color: var(--focus); }
body.charte-2026 .nav-badge, body.charte-2026 .pastille-nav {
  background: var(--primary); color: var(--on-primary);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
body.charte-2026 .sidebar .nav-rubrique { margin: 4px 0 2px; }
body.charte-2026 .sidebar .nav-rubrique > summary {
  color: var(--lavande-fonce); font-size: 11.5px; letter-spacing: .11em; font-weight: 700;
  padding: 9px 12px; border-radius: 10px;
}
body.charte-2026 .sidebar .nav-rubrique > summary:hover { background: var(--fond); color: var(--indigo); }
body.charte-2026 .sidebar .nav-rubrique[open] > summary { color: var(--indigo); }
body.charte-2026 .sidebar .nav-rubrique > summary .chevron { opacity: .6; }
body.charte-2026 .sidebar .nav-rubrique-corps { margin-left: 11px; padding-left: 6px; border-left: 1px solid var(--bord); }
body.charte-2026 .sidebar .nav-rubrique .nav-item { padding-left: 11px; }
body.charte-2026 .sidebar-bottom { gap: 8px; }
/* Un filet or au-dessus du bas de barre et de la carte du compte. */
body.charte-2026 .sidebar-bottom::before {
  content: ""; display: block; height: 1px; margin: 6px 8px 8px;
  background: linear-gradient(90deg, var(--or), rgba(249, 165, 51, 0));
}
body.charte-2026 .sidebar .user-card {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 13px; padding: 10px;
  box-shadow: var(--ombre-1); position: relative;
}
body.charte-2026 .sidebar .user-card::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--or), rgba(249, 165, 51, .15));
}
body.charte-2026 .sidebar .user-card .meta .n { color: var(--indigo); font-weight: 700; }
body.charte-2026 .sidebar .user-card .meta .r { color: var(--lavande-fonce); }
body.charte-2026 .sidebar .user-card .meta .r span { color: var(--indigo); font-weight: 700; }
body.charte-2026 .sidebar .user-card .avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--indigo-bord); }
body.charte-2026 .sidebar .lien-quitter { color: var(--lavande-fonce); }
body.charte-2026 .sidebar .lien-quitter:hover { background: var(--fond); color: var(--indigo); }

/* ======================================================== en-tête de page */
body.charte-2026 .topbar {
  background:
    radial-gradient(640px 220px at 88% -20%, rgba(255, 225, 126, .13), transparent 65%),
    linear-gradient(90deg, #251F4F 0%, #2A2458 100%);
  color: #FFFFFF; border-bottom: 0; align-items: flex-end;
  box-shadow: inset 0 -1px 0 rgba(249, 165, 51, .55), 0 6px 18px -8px rgba(37, 31, 79, .35);
}
body.charte-2026 .topbar .title {
  font-size: clamp(26px, 1.45rem + .55vw, 32px); font-weight: 800; letter-spacing: -.022em;
  line-height: 1.08; color: #FFFFFF;
}
body.charte-2026 .topbar .subtitle {
  color: var(--lavande); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
body.charte-2026 .topbar a { color: #FFFFFF; }
body.charte-2026 .topbar .accent, body.charte-2026 .hero .accent { color: var(--sur-encre-accent); }
body.charte-2026 .topbar .btn-apparence {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); color: #FFFFFF;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
body.charte-2026 .topbar .btn-apparence:hover {
  background: rgba(255, 255, 255, .18); border-color: rgba(249, 165, 51, .7); transform: translateY(-1px);
}
body.charte-2026 .topbar .btn-apparence .pt { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
body.charte-2026 .entete-mobile .btn-apparence { border-color: var(--bord); background: #FFFFFF; color: var(--indigo); }

/* Le liseré orange en haut de page : la signature des supports GBUM. */
body.charte-2026 { border-top: 4px solid var(--primary); }

/* L'encadré posé en tête d'écran (« Recevez les alertes… ») : une carte
   légère au filet d'accent, plutôt qu'un simple trait. */
body.charte-2026 .content > .note {
  background: #FFFFFF; border: 1px solid var(--border); border-inline-start: 3px solid var(--primary);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--ombre-1); color: var(--muted);
}
body.charte-2026 .content > .note b, body.charte-2026 .content > .note strong { color: var(--indigo); }

/* ============================================================== surfaces */
body.charte-2026 .card {
  border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--ombre-1);
  transition: box-shadow 180ms ease, transform 160ms ease, border-color 160ms ease;
}
body.charte-2026 .card-tight { border-radius: 12px; }
body.charte-2026 a.card:hover, body.charte-2026 .card.cliquable:hover, body.charte-2026 .carte-camp:hover {
  box-shadow: var(--ombre-2); border-color: #DEDAD2; transform: translateY(-2px);
}
body.charte-2026 a.card:active { transform: translateY(0); box-shadow: var(--ombre-1); }
/* Un titre de carte porte un filet d'accent court sous lui. */
body.charte-2026 .card > div.serif:first-child::after,
body.charte-2026 .card > div.fw7:first-child::after,
body.charte-2026 .card > h2:first-child::after,
body.charte-2026 .card > h3:first-child::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--primary); margin: 8px 0 10px;
}
body.charte-2026 .card > div.serif:first-child, body.charte-2026 .card > div.fw7:first-child { line-height: 1.3; }
body.charte-2026 .divider, body.charte-2026 .trait-haut, body.charte-2026 .trait-bas { border-color: var(--line) !important; }
body.charte-2026 .divider { background: var(--line); }

/* Les bandeaux clairs (« Nouvelle réunion ») : crème chaud, filet d'accent. */
body.charte-2026 .banner:not(.accueil-hero):not(.volet-marque) {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 16px; color: var(--text); box-shadow: var(--ombre-1);
}
/* Les icônes d'en-tête des cartes d'action (Réunions) : posées dans une tuile. */
body.charte-2026 .grid-3 > * > .card > svg:first-child,
body.charte-2026 .grid-3 > * > .banner > svg:first-child,
body.charte-2026 .grid-2 > * > .card > svg:first-child {
  width: 46px; height: 46px; padding: 10px; border-radius: 13px; box-sizing: border-box;
  background: var(--indigo-tint); stroke: var(--indigo);
}
body.charte-2026 .grid-3 > * > .banner > svg:first-child {
  background: var(--indigo); stroke: #FFFFFF; box-shadow: 0 6px 14px -4px rgba(37, 31, 79, .45);
}
body.charte-2026 .card.center > svg:first-child {
  width: 36px; height: 36px; padding: 8px; border-radius: 10px; box-sizing: border-box;
  background: var(--indigo-tint); stroke: var(--indigo); flex: none;
}

/* ============================================================== tableaux */
body.charte-2026 .content table { border-collapse: separate; border-spacing: 0; width: 100%; }
body.charte-2026 .content th {
  background: var(--indigo); color: #FFFFFF; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 11px 12px; text-align: left;
  border-bottom: 2px solid var(--or);
}
body.charte-2026 .content th:first-child { border-top-left-radius: 10px; }
body.charte-2026 .content th:last-child { border-top-right-radius: 10px; }
body.charte-2026 .content td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
body.charte-2026 .content tbody tr:nth-child(even) > td { background: #FAF9F6; }
body.charte-2026 .content tbody tr:hover > td { background: #FFF7E8; }
body.charte-2026 .content tbody tr:last-child > td { border-bottom: 0; }
/* Listes en lignes (annuaire, livraisons, réunions) : même zébrure crème. */
body.charte-2026 .annuaire-liste { border-color: var(--border); border-radius: 16px; box-shadow: var(--ombre-1); }
body.charte-2026 .annuaire-ligne { border-bottom-color: var(--line); transition: background-color 160ms ease; }
body.charte-2026 .annuaire-ligne:nth-child(even) { background: #FAF9F6; }
body.charte-2026 .annuaire-ligne:hover { background: #FFF7E8; }
body.charte-2026 .annuaire-ligne .nom a:hover { color: var(--indigo); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }
body.charte-2026 .annuaire-ligne .avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--indigo-bord); }
body.charte-2026 .ligne-villes.entete { color: var(--muted); }
body.charte-2026 a.ligne-villes:hover, body.charte-2026 .rang-structure:hover,
body.charte-2026 .fiche-part > summary:hover, body.charte-2026 a.delivery-row:hover,
body.charte-2026 .rail-row:hover { background: #FFF7E8; }
body.charte-2026 .rail-row + .rail-row { border-top-color: var(--line); }

/* =============================================================== boutons */
body.charte-2026 .btn {
  border-radius: 12px; font-weight: 700; letter-spacing: .005em;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
              box-shadow 180ms ease, transform 140ms ease;
}
body.charte-2026 .btn:active { transform: translateY(1px); }
body.charte-2026 .btn-primary {
  background: var(--primary); border: 1px solid var(--primary-bord); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
body.charte-2026 .btn-primary:hover {
  background: var(--primary-hover); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 10px 22px -6px color-mix(in srgb, var(--primary) 75%, transparent);
}
body.charte-2026 .btn-primary:active { background: var(--primary-bord); transform: translateY(0); box-shadow: none; }
body.charte-2026 .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--primary); }
body.charte-2026 .btn-ghost {
  background: #FFFFFF; border: 1.5px solid var(--indigo); color: var(--indigo);
}
body.charte-2026 .btn-ghost:hover { background: var(--indigo-tint); border-color: var(--indigo); color: var(--indigo); }
body.charte-2026 .btn-soft { background: var(--indigo-tint); border: 1px solid var(--indigo-bord); color: var(--indigo); }
body.charte-2026 .btn-soft:hover { background: var(--indigo-tint-2); }
body.charte-2026 .btn-wa { background: var(--indigo); color: #FFFFFF; border-color: var(--indigo); }
body.charte-2026 .btn-wa:hover { background: var(--indigo-2); }
body.charte-2026 .glass { color: var(--indigo); border-color: var(--border); box-shadow: var(--ombre-2); }
body.charte-2026 .pill { color: var(--muted); border-color: var(--indigo-bord); }
body.charte-2026 .pill.active { background: var(--primary); border-color: var(--primary-bord); color: var(--on-primary); }
body.charte-2026 .pastille-ville { border-color: var(--indigo-bord); }
body.charte-2026 .pastille-ville.actif { background: var(--primary); border-color: var(--primary-bord); color: var(--on-primary); }
body.charte-2026 .tag { background: var(--indigo-tint); color: var(--indigo); font-weight: 600; }
body.charte-2026 .tag-ok { background: var(--jaune); color: var(--indigo); box-shadow: none; }
body.charte-2026 .toggle { background: var(--indigo-bord); }
body.charte-2026 .toggle.on { background: var(--primary); }

/* ========================================================== formulaires */
body.charte-2026 .field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body.charte-2026 .field input, body.charte-2026 .field select, body.charte-2026 .field textarea,
body.charte-2026 .input, body.charte-2026 select.input {
  background: #FFFFFF; border: 1px solid var(--bord-controle); border-radius: 12px; color: var(--text);
  transition: border-color 160ms ease, box-shadow 180ms ease, background-color 160ms ease;
}
body.charte-2026 .field input:hover, body.charte-2026 .field select:hover, body.charte-2026 .field textarea:hover,
body.charte-2026 .input:hover { border-color: #6E6A8E; }
body.charte-2026 .field input:focus, body.charte-2026 .field select:focus, body.charte-2026 .field textarea:focus,
body.charte-2026 .input:focus, body.charte-2026 input:focus, body.charte-2026 select:focus, body.charte-2026 textarea:focus {
  color: var(--text); border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.charte-2026 ::placeholder { color: #8F8CA6; }
/* Le menu déroulant : un chevron indigo dessiné, au lieu de celui du système. */
body.charte-2026 select.input:not([multiple]), body.charte-2026 .field select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23251F4F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
body.charte-2026 input[type="checkbox"], body.charte-2026 input[type="radio"] { accent-color: var(--primary); }
body.charte-2026 .raccourci-case { border-color: var(--border); border-radius: 12px; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
body.charte-2026 .raccourci-case:hover { border-color: var(--indigo-bord); box-shadow: var(--ombre-1); }
body.charte-2026 .raccourci-case:has(input:checked) { border-color: var(--primary); background: var(--soft); color: var(--indigo); }
body.charte-2026 .mdp-oeil:hover { color: var(--indigo); background: var(--indigo-tint); }
body.charte-2026 .mdp-verdict.ok { color: var(--indigo); }

/* =============================================================== accueil */
body.charte-2026 .banner.accueil-hero {
  background:
    radial-gradient(560px 280px at 92% -12%, rgba(255, 225, 126, .17), transparent 64%),
    radial-gradient(420px 240px at -6% 110%, rgba(252, 113, 6, .16), transparent 62%),
    linear-gradient(135deg, #2F2866 0%, #251F4F 52%, #1B1740 100%);
  color: #FFFFFF; border: 0; border-radius: 18px;
  box-shadow: 0 24px 50px -22px rgba(37, 31, 79, .55), var(--halo);
}
body.charte-2026 .accueil-hero .salut { font-weight: 800; letter-spacing: -.025em; color: #FFFFFF; }
body.charte-2026 .accueil-hero .sous { color: var(--sur-encre-accent); letter-spacing: .11em; }
body.charte-2026 .accueil-hero .verset {
  border-top: 1px solid rgba(249, 165, 51, .45); font-weight: 500; color: #FFFFFF;
}
body.charte-2026 .accueil-hero .verset .ref { color: var(--lavande); }

body.charte-2026 .attente { border-radius: 16px; border-color: var(--border); box-shadow: var(--ombre-1); transition: box-shadow 180ms ease, transform 160ms ease; }
body.charte-2026 a.attente:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
body.charte-2026 .attente.urgent { border-color: var(--primary); box-shadow: var(--ombre-1); }
body.charte-2026 .attente.urgent .t { color: var(--indigo); }
body.charte-2026 .attente .ic { background: var(--indigo-tint); border-radius: 12px; }
body.charte-2026 .attente.calme { background: #FFFFFF; border-color: var(--border); }
body.charte-2026 .attente.calme .ic { background: var(--jaune); }

body.charte-2026 .raccourci {
  border-radius: 16px; border-color: var(--border); box-shadow: var(--ombre-1);
  transition: box-shadow 180ms ease, transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
body.charte-2026 .raccourci:hover { border-color: var(--indigo-bord); background: #FFFFFF; box-shadow: var(--ombre-2); transform: translateY(-2px); color: var(--indigo); }
body.charte-2026 .raccourci .ic { background: var(--indigo-tint); color: var(--indigo); border-radius: 12px; }
body.charte-2026 .raccourci:hover .ic { background: var(--primary); color: var(--on-primary); }
body.charte-2026 .raccourci .t { color: var(--indigo); }

body.charte-2026 .datechip { background: var(--indigo-tint); color: var(--indigo); border-radius: 12px; }
body.charte-2026 .datechip .d { font-weight: 800; font-size: 16px; }
body.charte-2026 .datechip .m { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
body.charte-2026 .rail-row::before, body.charte-2026 a.delivery-row::before { background: var(--primary); }
body.charte-2026 .apercu-photos img { border-color: var(--border); box-shadow: var(--ombre-1); }
body.charte-2026 .post .author { color: var(--indigo); }
body.charte-2026 .lettre-mois .ic, body.charte-2026 .doc-vedette .dv-ic, body.charte-2026 .res-ico { color: var(--indigo); }

/* ========================================================= états & vides */
body.charte-2026 .vide { background: #FFFFFF; border: 1px dashed #D9D5CC; border-radius: 16px; color: var(--muted); }
body.charte-2026 .vide .ico { background: var(--indigo-tint); filter: none; }
body.charte-2026 .bandeau-info { background: var(--soft); border-color: #EFE3C9; box-shadow: none; }
body.charte-2026 .bandeau-info b:first-child { color: var(--indigo); }
body.charte-2026 .aide-repliee { background: var(--indigo-tint); border-color: var(--indigo-bord); }
body.charte-2026 .aide-repliee > summary, body.charte-2026 .etape-aide > summary::after,
body.charte-2026 .etape-aide > summary { color: var(--indigo); }
body.charte-2026 .etape-aide { border-color: var(--border); box-shadow: var(--ombre-1); }
body.charte-2026 .wa-icon { background: var(--indigo-tint); color: var(--indigo); }
body.charte-2026 .avail-btn.on-yes, body.charte-2026 .dispo-cell.c-yes, body.charte-2026 .resume-creneaux .cr.oui {
  background: var(--indigo); color: #FFFFFF; border-color: var(--indigo);
}
body.charte-2026 .avail-row.populaire { background: #FAF9F6; border-color: var(--indigo-bord); }
body.charte-2026 .dispo-total .dispo-cell.best { background: var(--primary); color: var(--on-primary); }
body.charte-2026 .camp-onglets a.actif { color: var(--indigo); border-bottom-color: var(--primary); }
body.charte-2026 .chiffre { border-radius: 16px; box-shadow: var(--ombre-1); }
body.charte-2026 .chiffre .n { font-weight: 800; letter-spacing: -.02em; }
body.charte-2026 .barre-piste { background: var(--indigo-tint); }
body.charte-2026 .bandeau-emprunt { background: var(--indigo-3); color: #FFFFFF; box-shadow: inset 0 -1px 0 rgba(249, 165, 51, .6); }
body.charte-2026 .bandeau-emprunt b { color: var(--sur-encre-accent); }
body.charte-2026 .barre-install { border-radius: 16px; border-color: var(--border); box-shadow: var(--ombre-2); }
body.charte-2026 .video-ph { background-color: var(--indigo); }
body.charte-2026 .cadre-video { border-radius: 16px; box-shadow: var(--ombre-2); }
body.charte-2026 .fil a:hover, body.charte-2026 .premiers-pas li::marker, body.charte-2026 .kit-liste li::marker,
body.charte-2026 .onglets-echanges .onglet-e.actif, body.charte-2026 .msg-live .a { color: var(--indigo); }
body.charte-2026 .onglets-echanges .onglet-e.actif { background: var(--indigo-tint); }
body.charte-2026 .genre-struct.t-mouvement { background: var(--indigo); }
body.charte-2026 .c-accent { color: var(--indigo) !important; }
body.charte-2026 .lien-quitter:hover { color: var(--indigo); }

/* Les cartes qui portent un filet d'accent posé en ligne (border-left:4px
   solid var(--primary)) gardent l'accent de la palette : rien à faire ici. */

/* Les grands chiffres et les liens que les gabarits écrivent en couleur
   d'accent (color:var(--primary), dans leur <style>) : orange sur blanc est
   proscrit, ils passent en indigo, gras. Tableau de bord, accompagnement,
   amis, bureaux, finissants, parcours, plan, promesses, prière. */
body.charte-2026 [class*="chiffres-"] .v, body.charte-2026 .chiffres-priere b,
body.charte-2026 .ville-carte .ratio, body.charte-2026 .jauge-obj .pc,
body.charte-2026 .bud-tab tr.poste td, body.charte-2026 .grp-act a,
body.charte-2026 .syn a:hover, body.charte-2026 .remontee .appui,
body.charte-2026 .et-en_cours, body.charte-2026 .num, body.charte-2026 .tb-vierges .villes a:hover {
  color: var(--indigo);
}
body.charte-2026 [class*="chiffres-"] .v { font-weight: 800; letter-spacing: -.02em; }
body.charte-2026 [class*="chiffres-"] { border-radius: 16px; box-shadow: var(--ombre-1); }
body.charte-2026 .et-en_cours { background: var(--soft); }
body.charte-2026 .tb-ville { border-radius: 14px; box-shadow: var(--ombre-1); }
body.charte-2026 .tb-ville.ok { border-left-color: var(--indigo); }
body.charte-2026 .tb-ville .rien { color: var(--indigo); }
body.charte-2026 .tb-vierges .villes a { border-color: var(--indigo-bord); }
body.charte-2026 .tb-vierges .villes a:hover { border-color: var(--indigo); background: var(--indigo-tint); }
body.charte-2026 [style*="color:var(--primary)"]:not([style*="background"]):not([style*="border"]),
body.charte-2026 [style*="color: var(--primary)"]:not([style*="background"]):not([style*="border"]) {
  color: var(--indigo) !important;
}

/* ================================================================ mobile */
@media (max-width: 860px) {
  body.charte-2026 .entete-mobile {
    background: #FFFFFF; color: var(--indigo); border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--or), 0 4px 14px -8px rgba(37, 31, 79, .25);
    padding: 10px 14px;
  }
  body.charte-2026 .entete-mobile img { height: 34px; padding: 3px; border-radius: 9px; background: #FFFFFF; border: 1px solid var(--bord); }
  body.charte-2026 .entete-mobile .titre { color: var(--indigo); font-weight: 800; letter-spacing: -.01em; }
  body.charte-2026 .loupe-mobile { color: var(--lavande-fonce); }
  body.charte-2026 .loupe-mobile:active { background: var(--fond); color: var(--indigo); }
  body.charte-2026 .entete-mobile .moi .avatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--indigo-bord); }
  body.charte-2026 .topbar { padding: 16px 16px 14px; box-shadow: inset 0 -1px 0 rgba(249, 165, 51, .55); }
  body.charte-2026 .topbar .title { font-size: 24px; }
  body.charte-2026 .content { padding-top: 16px; }

  body.charte-2026 .barre-mobile {
    background: #FFFFFF; border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(37, 31, 79, .08);
  }
  body.charte-2026 .barre-mobile a, body.charte-2026 .barre-mobile button { color: var(--faint); font-size: 12px; gap: 4px; }
  body.charte-2026 .barre-mobile svg { padding: 3px 9px; border-radius: 10px; box-sizing: content-box; transition: background-color 160ms ease; }
  body.charte-2026 .barre-mobile .actif { color: var(--indigo); font-weight: 700; }
  body.charte-2026 .barre-mobile .actif svg { background: #FFF7E8; box-shadow: inset 0 -2px 0 var(--primary); }
  body.charte-2026 .barre-mobile .pastille { background: var(--primary); color: var(--on-primary); }
  body.charte-2026 .voile-menu { background: rgba(27, 23, 64, .55); }
  body.charte-2026 .feuille-menu { border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(37, 31, 79, .25); }
  body.charte-2026 .feuille-menu .poignee { background: var(--indigo-bord); }
  body.charte-2026 .feuille-menu .nav-item { color: var(--text); border-radius: 11px; }
  body.charte-2026 .feuille-menu .nav-item:hover { background: var(--indigo-tint); }
  body.charte-2026 .feuille-menu .nav-item.active { color: var(--indigo); background: var(--jaune); font-weight: 700; box-shadow: none; }
  body.charte-2026 .feuille-menu .nav-item.active::before { display: none; }
  body.charte-2026 .feuille-menu .nav-rubrique > summary { color: var(--muted); }
  body.charte-2026 .feuille-menu .nav-rubrique > summary:hover { background: var(--indigo-tint); color: var(--indigo); }
  body.charte-2026 .card { border-radius: 14px; }
}

/* Lien discret pour revenir à l'ancienne apparence (dans Paramètres). */
.apparence-choix { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.apparence-choix form { display: inline; }

/* ==================================================================== vie
   Esaïe, 20/10/2026 21 h 30 : « plus vivante, dynamique ». Les classes v26-*
   sont posées par static/js/vivant-2026.js (chargé par base.html avec cette
   feuille). Léger : la seule boucle est le halo du hero, en transform/opacité. */
@view-transition { navigation: auto; }
@keyframes v26Fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes v26Monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v26Entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 1. Entrée en scène, en cascade (40 ms d'écart), une fois. Remplace le
      « gbuMonte » de finition.css sur l'accueil. */
body.charte-2026 .col-main > .card, body.charte-2026 .col-main > .section-title, body.charte-2026 .bilan { animation: none; }
body.charte-2026 .content .v26-entree {
  animation: v26Entree 260ms cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--v26-i, 0) * 40ms);
}
body.charte-2026 .content { animation: v26Fondu 120ms ease-out; }
body.charte-2026.v26-sortie .content { opacity: .55; transition: opacity 120ms ease; }

/* 2. Barre de progression : le liseré du haut se remplit d'indigo → accent. */
body.charte-2026 .v26-barre {
  position: fixed; left: 0; top: 0; height: 4px; width: 0; z-index: 1000; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-2) 60%, var(--primary) 100%);
}
body.charte-2026 .v26-barre.v26-va { opacity: 1; width: 78%; transition: width 900ms cubic-bezier(.1, .6, .2, 1), opacity 80ms; }
@keyframes v26BarreFin { 0% { width: 78%; opacity: 1; } 60% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
body.charte-2026 .v26-barre.v26-fin { animation: v26BarreFin 600ms ease-out both; }

/* 3. Indicateurs : la pastille « en direct » respire, les compteurs « popent ». */
@keyframes v26Pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 138, 128, .55); }
  50% { opacity: .75; box-shadow: 0 0 0 5px rgba(255, 138, 128, 0); }
}
body.charte-2026 .nav-live .dot, body.charte-2026 .live-pill .dot { animation: v26Pulse 2s ease-in-out infinite; }
@keyframes v26Pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
body.charte-2026 .nav-badge, body.charte-2026 .pastille-nav, body.charte-2026 .barre-mobile .pastille,
body.charte-2026 .nav-live { animation: v26Pop 420ms cubic-bezier(.2, .8, .3, 1.2) 260ms both; }

/* 4. Interactions : enfoncement, ondulation, icônes qui bougent, étiquette qui s'allume. */
body.charte-2026 .btn:active, body.charte-2026 .btn-primary:active { transform: scale(.98); }
body.charte-2026 .btn-primary { position: relative; overflow: hidden; }
body.charte-2026 .v26-onde {
  position: absolute; border-radius: 50%; background: rgba(37, 31, 79, .22); pointer-events: none;
  transform: scale(0); animation: v26Onde 520ms ease-out forwards;
}
@keyframes v26Onde { to { transform: scale(1); opacity: 0; } }
body.charte-2026 .raccourci .ic { transition: background-color 160ms ease, color 160ms ease, transform 220ms cubic-bezier(.2, .8, .3, 1.2); }
body.charte-2026 .raccourci:hover .ic { transform: rotate(-6deg) scale(1.06); }
body.charte-2026 .sidebar .nav-item svg { transition: opacity 160ms ease, transform 180ms ease; }
body.charte-2026 .sidebar .nav-item:hover svg { transform: translateX(2px); }
body.charte-2026 .field label { transition: color 160ms ease; }
body.charte-2026 .field:focus-within label {
  color: var(--indigo); text-decoration: underline; text-decoration-color: var(--primary);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
body.charte-2026 .v26-envoi { pointer-events: none; opacity: .85; }
body.charte-2026 .v26-envoi::after {
  content: ""; width: 12px; height: 12px; margin-left: 8px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: v26Tour .7s linear infinite;
}
@keyframes v26Tour { to { transform: rotate(360deg); } }
body.charte-2026 .btn-apparence .pt { transition: transform 420ms cubic-bezier(.2, .8, .3, 1.2); }
body.charte-2026 .btn-apparence.v26-tourne .pt { transform: rotate(180deg); }

/* 5. Le hero respire : un halo orange/jaune (opacité ≤ .12) dérive lentement
      derrière le texte ; le sous-titre puis le verset arrivent en fondu. */
body.charte-2026 .banner.accueil-hero { position: relative; overflow: hidden; }
body.charte-2026 .accueil-hero .hero-txt { position: relative; z-index: 1; }
body.charte-2026 .accueil-hero::before {
  content: ""; position: absolute; left: 45%; top: -40%; width: 62%; height: 150%; border-radius: 50%;
  pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 225, 126, .12), rgba(252, 113, 6, .07) 55%, transparent 100%);
  animation: v26Respire 20s ease-in-out infinite alternate;
}
@keyframes v26Respire {
  0% { transform: translate3d(-12%, 0, 0) scale(1); opacity: .65; }
  100% { transform: translate3d(22%, 14%, 0) scale(1.18); opacity: 1; }
}
body.charte-2026 .accueil-hero .sous { animation: v26Fondu 420ms ease-out 200ms both; }
body.charte-2026 .accueil-hero .verset { animation: v26Monte 520ms cubic-bezier(.2, .7, .2, 1) 380ms both; }

/* 6. Retours d'action : glissent depuis le haut ; les succès se retirent après 5 s,
      une barre de temps en bas le dit. */
@keyframes v26Glisse { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
body.charte-2026 .v26-flash {
  position: relative; overflow: hidden; animation: v26Glisse 320ms cubic-bezier(.2, .7, .2, 1) both;
  transition: opacity 260ms ease, transform 260ms ease;
}
body.charte-2026 .v26-flash.v26-minute::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; opacity: .7;
  background: var(--primary); transform-origin: left; animation: v26Minute 5s linear forwards;
}
@keyframes v26Minute { from { transform: scaleX(1); } to { transform: scaleX(0); } }
body.charte-2026 .v26-flash.v26-parti { opacity: 0; transform: translateY(-6px); }

/* 7. Recherche : un squelette gris doux qui chatoie en attendant la réponse. */
body.charte-2026 .palette-corps { position: relative; }
body.charte-2026 .palette-corps.v26-charge > * { opacity: .2; }
body.charte-2026 .palette-corps.v26-charge::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 16px; height: 96px; border-radius: 8px;
  background: linear-gradient(90deg, #ECEAE5 25%, #F7F6F3 45%, #ECEAE5 65%) 0 0 / 200% 100%;
  animation: v26Chatoie 1.1s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 60% 16px no-repeat, linear-gradient(#000 0 0) 0 28px / 100% 16px no-repeat,
                linear-gradient(#000 0 0) 0 56px / 85% 16px no-repeat, linear-gradient(#000 0 0) 0 84px / 40% 10px no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 60% 16px no-repeat, linear-gradient(#000 0 0) 0 28px / 100% 16px no-repeat,
        linear-gradient(#000 0 0) 0 56px / 85% 16px no-repeat, linear-gradient(#000 0 0) 0 84px / 40% 10px no-repeat;
}
@keyframes v26Chatoie { to { background-position: -200% 0; } }

/* 8. Mobile : la pastille de l'onglet actif glisse sous l'icône. */
@keyframes v26Glisseur { from { transform: translateX(-22px) scaleX(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  body.charte-2026 .barre-mobile .actif svg { animation: v26Glisseur 360ms cubic-bezier(.2, .8, .3, 1.2) both; }
}

/* Réglage système « réduire les animations » : tout s'efface, rien ne reste caché. */
@media (prefers-reduced-motion: reduce) {
  body.charte-2026 *, body.charte-2026 *::before, body.charte-2026 *::after { animation: none !important; transition: none !important; }
  body.charte-2026 .content .v26-entree, body.charte-2026 .accueil-hero .sous, body.charte-2026 .accueil-hero .verset,
  body.charte-2026 .nav-badge, body.charte-2026 .v26-flash { opacity: 1; transform: none; }
  body.charte-2026 .btn-primary:hover, body.charte-2026 a.card:hover, body.charte-2026 .raccourci:hover,
  body.charte-2026 a.attente:hover, body.charte-2026 .btn:active { transform: none; }
  body.charte-2026 .v26-barre { display: none; }
}