/* Charte GBUM 2026 — écrans PUBLICS : vitrine (public_base.html et ce qui
   l'étend), connexion, code de validation, mot de passe oublié, activation.
   Esaïe, 21/10/2026 : « la page d'accueil de l'app (avant la connexion) ainsi
   que la page de connexion n'ont pas été refondues ».

   Pourquoi elles ne l'étaient pas : ces gabarits n'étendent PAS base.html.
   Ils chargent leurs feuilles eux-mêmes et n'avaient ni charte-2026.css ni la
   classe « charte-2026 » sur <body> — or c'est base.html seul qui les posait.
   Le partiel templates/_charte_2026_tete.html les leur donne, selon
   apparence.effective() (réglage national, ou cookie si rien n'est imposé),
   exactement comme base.html. Sans l'apparence 2026, rien ici n'est chargé.

   Même ton que la v2 validée des écrans connectés et que l'écran d'attente de
   la grande salle : fond neutre #F7F6F3, surfaces blanches, l'indigo réservé
   à UNE carte (comme le bandeau de l'accueil connecté), jamais à un fond
   entier ; le crème seulement en touches ; Inter partout. L'accent se lit par
   --primary / --on-primary / --sur-encre-accent, pour suivre la palette.
   Interdits respectés : jamais de blanc sur orange, jamais d'orange sur blanc
   (chiffres et liens sur fond clair en indigo), pas d'or sur crème. */

/* ============================================================== commun */
body.charte-2026.site-public,
body.charte-2026.page-connexion {
  font-family: 'Inter', Arial, sans-serif; background-color: var(--bg); color: var(--text);
  /* Les étiquettes posées sur l'indigo prennent l'accent (orange, ambre) ;
     un accent foncé (bleu, rouge, vert) s'y lirait mal : lavande, alors. */
  --v26-sur-indigo: var(--sur-encre-accent);
}
body.charte-2026.v26-palette-bleu, body.charte-2026.v26-palette-rouge, body.charte-2026.v26-palette-vert { --v26-sur-indigo: var(--lavande); }
body.charte-2026 .v26-sur {
  display: block; margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--lavande-fonce);
}
/* Les logos : chacun dans une tuile blanche arrondie ; l'IFES, déjà sur fond
   indigo, garde un filet pour se détacher. */
body.charte-2026 .v26-logos { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.charte-2026 .v26-logos img, body.charte-2026 .v26-logo, body.charte-2026 .v26-pied-logo {
  display: block; width: auto; height: 44px; max-width: none; margin: 0; flex: none;
  padding: 4px; border-radius: 11px; background: #FFFFFF; border: 1px solid var(--bord);
  box-shadow: var(--ombre-1); box-sizing: border-box;
}
body.charte-2026 img.v26-ifes {
  display: block; width: auto; height: 44px; max-width: none; flex: none; padding: 0; margin: 0;
  border-radius: 11px; background: var(--indigo); border: 1px solid var(--indigo-bord);
  box-shadow: var(--ombre-1); box-sizing: border-box; object-fit: cover;
}
/* La phrase sur les réseaux filtrés : discrète, indigo doux, sans encadré. */
body.charte-2026 .reseau-mobile {
  font-size: 13.5px; line-height: 1.6; color: var(--faint); max-width: 52ch;
  margin-left: auto; margin-right: auto;
}

/* ====================================================== vitrine : en-tête */
body.charte-2026.site-public .entete-pub {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  background: rgba(255, 255, 255, .94); border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--or), 0 6px 18px -12px rgba(37, 31, 79, .30);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
}
body.charte-2026.site-public .marque-pub { gap: 12px; flex: none; }
body.charte-2026.site-public .marque-pub img {
  width: auto; height: 42px; padding: 4px; border-radius: 11px; background: #FFFFFF;
  border: 1px solid var(--bord); box-shadow: var(--ombre-1); box-sizing: border-box;
}
body.charte-2026.site-public .marque-pub b {
  font-family: inherit; font-size: 17px; font-weight: 800; color: var(--indigo); letter-spacing: -.01em;
}
body.charte-2026.site-public .marque-pub i { font-size: 12.5px; color: var(--lavande-fonce); letter-spacing: .02em; }
body.charte-2026.site-public .menu-pub {
  margin-left: auto; gap: 2px; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
body.charte-2026.site-public .menu-pub a {
  color: #46426E; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 9px 11px;
  white-space: nowrap; transition: background-color 160ms ease, color 160ms ease;
}
body.charte-2026.site-public .menu-pub a:hover { background: var(--fond); color: var(--indigo); }
body.charte-2026.site-public .v26-entete-droite { display: flex; align-items: center; gap: 12px; flex: none; }
body.charte-2026.site-public .btn-pub {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 12px; text-decoration: none;
  background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary-bord);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: background-color 160ms ease, transform 140ms ease;
}
body.charte-2026.site-public .btn-pub:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); }
body.charte-2026.site-public .v26-entete-droite .v26-ifes { height: 42px; }
body.charte-2026.site-public .bandeau-brouillon { background: var(--soft); color: var(--indigo); border-bottom-color: #EFE3C9; }

body.charte-2026.site-public .corps-pub { max-width: 1100px; padding: 0 24px 40px; }

/* ===================================================== vitrine : le haut */
/* Deux cartes côte à côte, comme l'accueil connecté : le bandeau indigo
   (titre, chapeau, actions) et la carte blanche des faits. Sur téléphone,
   elles s'empilent : l'indigo reste UNE carte, pas tout l'écran. */
body.charte-2026.site-public .v26-heros {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: 20px;
  align-items: stretch; padding: 28px 0 0;
}
body.charte-2026.site-public .v26-heros > div:first-child {
  position: relative; overflow: hidden; border-radius: 20px; color: #FFFFFF;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 3.6vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(560px 280px at 92% -12%, rgba(255, 225, 126, .17), transparent 64%),
    radial-gradient(420px 240px at -6% 110%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%),
    linear-gradient(135deg, #2F2866 0%, #251F4F 52%, #1B1740 100%);
  box-shadow: 0 24px 50px -22px rgba(37, 31, 79, .55), var(--halo);
}
body.charte-2026.site-public .v26-heros > div:first-child::before {
  content: ""; position: absolute; left: 40%; 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;
}
body.charte-2026.site-public .v26-heros > div:first-child > * { position: relative; z-index: 1; }
body.charte-2026.site-public .v26-heros .v26-sur { color: var(--v26-sur-indigo); margin-bottom: 14px; }
body.charte-2026.site-public .v26-heros h1 {
  font-family: inherit; font-size: clamp(32px, 3.9vw, 50px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.08; color: #FFFFFF; margin: 0 0 16px; text-wrap: balance;
}
body.charte-2026.site-public .v26-heros .chapo { color: #D6D4E2; font-size: 17px; line-height: 1.6; max-width: 54ch; margin: 0; }
body.charte-2026.site-public .v26-heros .actions { margin-top: 26px; gap: 12px; }
body.charte-2026.site-public .v26-heros .btn-ghost {
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .55); color: #FFFFFF;
}
body.charte-2026.site-public .v26-heros .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #FFFFFF; color: #FFFFFF; }
body.charte-2026.site-public .v26-heros .btn-primary:focus-visible { box-shadow: 0 0 0 3px #251F4F, 0 0 0 6px var(--primary); }

body.charte-2026.site-public .v26-heros .heros-faits {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 20px; padding: 24px 26px;
  color: var(--text); box-shadow: var(--ombre-1); display: flex; flex-direction: column; justify-content: center;
}
body.charte-2026.site-public .v26-heros .heros-faits .v26-logos { margin-bottom: 22px; }
body.charte-2026.site-public .v26-heros .heros-faits dl { gap: 16px; }
body.charte-2026.site-public .v26-heros .heros-faits dt {
  font-family: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--indigo);
}
body.charte-2026.site-public .v26-heros .heros-faits dd { color: var(--muted); font-size: 13.5px; }
body.charte-2026.site-public .v26-heros .heros-devise {
  font-family: inherit; font-style: normal; font-weight: 700; color: var(--indigo); font-size: 15px;
  margin-top: 22px; padding-top: 16px; border-top: 0; position: relative;
}
body.charte-2026.site-public .v26-heros .heros-devise::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--or), rgba(249, 165, 51, 0));
}

/* Les textes fondateurs : vision, thème de l'année, mission. */
body.charte-2026.site-public .v26-fondements {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; margin-top: 20px;
}
body.charte-2026.site-public .v26-fond {
  position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid var(--bord);
  border-radius: 16px; padding: 20px 22px; box-shadow: var(--ombre-1);
  transition: box-shadow 180ms ease, transform 160ms ease;
}
body.charte-2026.site-public .v26-fond::before {
  content: ""; position: absolute; left: 22px; width: 28px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primary);
}
body.charte-2026.site-public .v26-fond:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
body.charte-2026.site-public .v26-fond .v26-sur { margin: 4px 0 8px; }
body.charte-2026.site-public .v26-fond b {
  display: block; font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--indigo);
}
body.charte-2026.site-public .v26-fond i { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
body.charte-2026.site-public .v26-mission p:last-child {
  margin: 0; font-size: 15.5px; line-height: 1.6; font-weight: 500; color: var(--indigo);
}

/* ===================================================== vitrine : bandes */
body.charte-2026.site-public .bande { padding: 52px 0 4px; }
body.charte-2026.site-public .bande + .bande { padding-top: 44px; }
body.charte-2026.site-public .bande h2, body.charte-2026.site-public .appel h2 {
  font-family: inherit; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  color: var(--indigo); margin: 0 0 16px;
}
body.charte-2026.site-public .bande h2::after {
  content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--primary); margin-top: 10px;
}
body.charte-2026.site-public .lire-pub p { font-size: 16px; line-height: 1.65; color: var(--text); }
body.charte-2026.site-public .pilier {
  border-radius: 16px; border-color: var(--bord); box-shadow: var(--ombre-1);
  transition: box-shadow 180ms ease, transform 160ms ease;
}
body.charte-2026.site-public .pilier:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
body.charte-2026.site-public .pilier b { font-family: inherit; font-size: 17px; font-weight: 700; color: var(--indigo); }
body.charte-2026.site-public .pilier span { color: var(--muted); }
body.charte-2026.site-public .ville-pub {
  background: var(--indigo-tint); border-color: var(--indigo-bord); color: var(--indigo); font-weight: 600; font-size: 14px;
}
body.charte-2026.site-public .carte-ville { border-radius: 16px; border-color: var(--bord); box-shadow: var(--ombre-1); }
body.charte-2026.site-public .carte-ville h3 { font-family: inherit; font-weight: 700; color: var(--indigo); }
body.charte-2026.site-public .carte-ville .cel { border-left-color: var(--primary); }
body.charte-2026.site-public .tuile { border-radius: 12px; }
body.charte-2026.site-public .citation {
  font-family: inherit; font-weight: 500; color: var(--indigo); background: #FFFFFF;
  border: 1px solid var(--bord); border-inline-start: 4px solid var(--primary); border-radius: 0 16px 16px 0;
  box-shadow: var(--ombre-1);
}
body.charte-2026.site-public .citation cite { color: var(--lavande-fonce); }
body.charte-2026.site-public .devise-volets .volet { border-radius: 16px; border-top-color: var(--primary); box-shadow: var(--ombre-1); }
body.charte-2026.site-public .devise-volets .volet h3 { font-family: inherit; font-weight: 700; color: var(--indigo); }
body.charte-2026.site-public .base-doctrinale li::before {
  font-family: inherit; font-weight: 800; color: var(--indigo); background: var(--indigo-tint); border-color: var(--indigo-bord);
}
body.charte-2026.site-public .formulaire-pub label { color: var(--muted); }
body.charte-2026.site-public .formulaire-pub textarea { border-color: var(--bord-controle); border-radius: 12px; }
body.charte-2026.site-public .formulaire-pub textarea:focus {
  border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.charte-2026.site-public .membre .portrait { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--indigo-bord); }
/* L'écran d'attente de la grande salle (apprécié tel quel) : charte-2026.css
   habille « .attente » en carte pour l'accueil connecté ; ici, rien. */
body.charte-2026.site-public #page-attente.attente {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}

/* L'appel final : une carte blanche, un trait d'accent — pas un aplat crème. */
body.charte-2026.site-public .appel {
  position: relative; overflow: hidden; margin-top: 52px; padding: 30px 30px 28px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(255, 225, 126, .20), transparent 70%),
    #FFFFFF;
  border: 1px solid var(--bord); border-radius: 20px; box-shadow: var(--ombre-1);
}
body.charte-2026.site-public .appel::before {
  content: ""; position: absolute; left: 30px; width: 32px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primary);
}
body.charte-2026.site-public .appel .lire-pub p { color: var(--muted); }
body.charte-2026.site-public .reseau-mobile { margin-top: 26px !important; text-align: center; }

/* ===================================================== vitrine : le pied */
body.charte-2026.site-public .pied-pub {
  background: #FFFFFF; border-top: 0; box-shadow: inset 0 1px 0 var(--or); margin-top: 48px;
}
body.charte-2026.site-public .pied-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 14px 16px; padding: 26px 24px 30px; max-width: 1100px;
}
body.charte-2026.site-public .pied-inner > div { display: flex; flex-direction: column; gap: 2px; }
body.charte-2026.site-public .pied-inner b { font-family: inherit; font-size: 16px; font-weight: 800; color: var(--indigo); }
body.charte-2026.site-public .pied-inner span { color: var(--muted); max-width: 62ch; }
body.charte-2026.site-public .pied-inner nav {
  grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--ligne); gap: 6px 18px;
}
body.charte-2026.site-public .pied-inner nav a { color: #46426E; font-weight: 500; }
body.charte-2026.site-public .pied-inner nav a:hover {
  color: var(--indigo); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px;
}
body.charte-2026.site-public .pied-inner .v26-pied-logo { height: 40px; }

/* ===================================================== vitrine : mobile */
@media (max-width: 860px) {
  /* L'en-tête sur téléphone : une ligne d'identité (GBUM, bouton, IFES),
     puis les rubriques qui défilent à l'horizontale — rien n'est caché
     derrière un menu à ouvrir, et l'en-tête reste bas. */
  body.charte-2026.site-public .entete-pub {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque droite" "menu menu";
    gap: 8px 10px; padding: 10px 16px 0;
  }
  body.charte-2026.site-public .marque-pub { grid-area: marque; min-width: 0; gap: 10px; }
  body.charte-2026.site-public .marque-pub img { height: 38px; }
  body.charte-2026.site-public .marque-pub b { font-size: 16px; }
  body.charte-2026.site-public .v26-entete-droite { grid-area: droite; gap: 10px; }
  body.charte-2026.site-public .v26-entete-droite .v26-ifes { height: 38px; }
  body.charte-2026.site-public .btn-pub { padding: 9px 13px; font-size: 13.5px; }
  body.charte-2026.site-public .menu-pub {
    grid-area: menu; width: auto; margin: 0 -16px; padding: 0 12px 8px; gap: 2px;
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 32px), transparent 100%);
  }
  body.charte-2026.site-public .menu-pub::-webkit-scrollbar { display: none; }
  body.charte-2026.site-public .menu-pub a { font-size: 13.5px; padding: 8px 10px; }

  body.charte-2026.site-public .corps-pub { padding: 0 16px 32px; }
  body.charte-2026.site-public .v26-heros { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 16px; }
  body.charte-2026.site-public .v26-heros > div:first-child { padding: 26px 22px 24px; border-radius: 18px; }
  body.charte-2026.site-public .v26-heros h1 { font-size: clamp(28px, 7.6vw, 36px); }
  body.charte-2026.site-public .v26-heros .chapo { font-size: 15.5px; }
  body.charte-2026.site-public .v26-heros .actions { margin-top: 20px; gap: 10px; }
  body.charte-2026.site-public .v26-heros .heros-faits { padding: 18px 20px; border-radius: 18px; }
  body.charte-2026.site-public .v26-heros .heros-faits .v26-logos { margin-bottom: 16px; }
  body.charte-2026.site-public .v26-heros .heros-faits dt { font-size: 26px; min-width: 56px; }
  body.charte-2026.site-public .v26-fondements { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  body.charte-2026.site-public .v26-fond { padding: 18px 20px; }
  body.charte-2026.site-public .bande { padding-top: 40px; }
  body.charte-2026.site-public .bande + .bande { padding-top: 36px; }
  body.charte-2026.site-public .bande h2, body.charte-2026.site-public .appel h2 { font-size: 22px; }
  body.charte-2026.site-public .appel { padding: 24px 20px 22px; border-radius: 18px; margin-top: 40px; }
  body.charte-2026.site-public .appel::before { left: 20px; }
  body.charte-2026.site-public .pied-inner { padding: 22px 16px 26px; }
}
@media (max-width: 480px) {
  body.charte-2026.site-public .marque-pub i { display: none; }
  /* Le bandeau reste une carte, pas tout l'écran : l'étiquette (déjà dite
     par l'en-tête et le pied) cède sa place au titre. */
  body.charte-2026.site-public .v26-heros .v26-sur { display: none; }
  body.charte-2026.site-public .v26-heros .actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* =========================================================== connexion */
body.charte-2026.page-connexion {
  background:
    radial-gradient(720px 420px at 100% 0%, rgba(255, 225, 126, .16), transparent 70%),
    radial-gradient(640px 420px at 0% 100%, rgba(37, 31, 79, .05), transparent 70%),
    var(--bg);
}
body.charte-2026 .carte-connexion {
  max-width: 1000px; border-radius: 22px; border: 1px solid var(--bord); background: #FFFFFF;
  box-shadow: var(--ombre-2);
}
/* Le volet de marque : la carte indigo de l'accueil connecté. */
body.charte-2026 .banner.volet-marque {
  position: relative; overflow: hidden; border: 0; border-radius: 0; color: #FFFFFF; min-height: 540px;
  padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background:
    radial-gradient(560px 280px at 92% -12%, rgba(255, 225, 126, .17), transparent 64%),
    radial-gradient(420px 240px at -6% 110%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%),
    linear-gradient(135deg, #2F2866 0%, #251F4F 52%, #1B1740 100%);
  box-shadow: none;
}
body.charte-2026 .volet-marque::before {
  content: ""; position: absolute; left: 35%; top: -40%; width: 70%; 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;
}
body.charte-2026 .volet-marque > * { position: relative; z-index: 1; }
body.charte-2026 .volet-marque .v26-marque { display: flex; align-items: center; gap: 12px; }
body.charte-2026 .volet-marque .v26-nom { min-width: 0; }
body.charte-2026 .volet-marque .v26-nom .nom { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #FFFFFF; line-height: 1.15; }
body.charte-2026 .volet-marque .v26-nom .sous { font-size: 12.5px; color: var(--lavande); margin-top: 3px; line-height: 1.4; }
body.charte-2026 .volet-marque .v26-logo { border-color: rgba(255, 255, 255, .25); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .35); }
body.charte-2026 .volet-marque .v26-logo.v26-ifes { margin-left: auto; padding: 0; background: var(--indigo); border-color: rgba(255, 255, 255, .30); }
body.charte-2026 .volet-marque .v26-sur { color: var(--v26-sur-indigo); margin: 0 0 6px; }
body.charte-2026 .volet-marque .v26-vision {
  margin: 0 0 18px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #FFFFFF;
}
body.charte-2026 .volet-marque .accroche {
  display: block; font-family: inherit; font-size: clamp(30px, 1.3rem + 1.8vw, 42px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; margin: 0; text-wrap: balance; color: #FFFFFF;
}
body.charte-2026 .volet-marque .v26-theme { margin-top: 24px; padding-top: 16px; position: relative; line-height: 1.5; }
body.charte-2026 .volet-marque .v26-theme::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--or), rgba(249, 165, 51, 0));
}
body.charte-2026 .volet-marque .v26-theme b { display: block; font-weight: 700; color: #FFFFFF; font-size: 16.5px; }
body.charte-2026 .volet-marque .v26-theme .ref { display: block; color: var(--lavande); font-size: 13px; margin-top: 2px; }
body.charte-2026 .volet-marque .v26-bas { display: block; color: #D6D4E2; font-size: 14px; margin: 0; max-width: none; }
body.charte-2026 .volet-marque .v26-hub { color: #D6D4E2; font-size: 14px; line-height: 1.6; max-width: 38ch; margin: 0; }
body.charte-2026 .volet-marque .v26-cadenas {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--lavande);
}
body.charte-2026 .volet-marque .v26-cadenas svg { color: var(--v26-sur-indigo); flex: none; }

/* Le volet du formulaire. */
body.charte-2026 .volet-formulaire { padding: clamp(28px, 4vw, 52px) clamp(22px, 3.6vw, 48px); }
body.charte-2026 .volet-formulaire > .serif:first-child {
  font-size: 30px !important; font-weight: 800; letter-spacing: -.025em; color: var(--indigo); line-height: 1.1;
}
body.charte-2026 .volet-formulaire > .serif:first-child::after {
  content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--primary); margin: 12px 0 4px;
}
body.charte-2026 .volet-formulaire > .faint { color: var(--muted); font-size: 15px; }
body.charte-2026.page-connexion .note { color: var(--muted); }
body.charte-2026.page-connexion a.note, body.charte-2026.page-connexion .note a {
  color: var(--indigo); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--indigo-bord); text-underline-offset: 3px;
}
body.charte-2026.page-connexion a.note:hover, body.charte-2026.page-connexion .note a:hover { text-decoration-color: var(--primary); }
body.charte-2026.page-connexion .reseau-mobile { color: var(--faint); font-size: 13.5px; margin-bottom: 0; }
/* Le message d'erreur : une carte blanche au filet rouge, lisible. */
body.charte-2026.page-connexion .c-alerte {
  background: #FFFFFF !important; border: 1px solid #F0C9C0 !important; border-inline-start: 3px solid #B8232F !important;
  border-radius: 12px !important; color: #8E1A24 !important; font-weight: 500; box-shadow: var(--ombre-1);
}
body.charte-2026.page-connexion .card.f-panneau {
  background: #FFFFFF !important; border: 1px solid var(--bord); border-inline-start: 3px solid var(--primary);
  border-radius: 12px; box-shadow: var(--ombre-1);
}

/* Code de validation, mot de passe oublié, activation : une seule carte. */
body.charte-2026.page-connexion .card.carte-simple {
  width: 460px; max-width: 100%; border-radius: 20px; border: 1px solid var(--bord); background: #FFFFFF;
  box-shadow: var(--ombre-2); padding: clamp(24px, 3vw, 34px);
}
body.charte-2026 .carte-simple .brand {
  justify-content: flex-start !important; gap: 12px; padding: 0 0 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--ligne);
}
body.charte-2026 .carte-simple .brand .logo {
  height: 42px; width: auto; padding: 4px; border-radius: 11px; background: #FFFFFF;
  border: 1px solid var(--bord); box-shadow: var(--ombre-1); box-sizing: border-box;
}
body.charte-2026 .carte-simple .brand .name { color: var(--indigo); font-weight: 800; font-size: 16px; }
body.charte-2026 .carte-simple .brand .sub { color: var(--lavande-fonce); font-size: 12.5px; }
body.charte-2026 .carte-simple .brand .v26-ifes { height: 42px; margin-left: auto; }
body.charte-2026 .carte-simple > .serif {
  font-size: 24px !important; font-weight: 800; letter-spacing: -.02em; color: var(--indigo); line-height: 1.15;
}
body.charte-2026 .carte-simple .muted { color: var(--muted); }
body.charte-2026 .carte-simple a:not(.btn) {
  color: var(--indigo); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--indigo-bord); text-underline-offset: 3px;
}
body.charte-2026 .carte-simple a:not(.btn):hover { text-decoration-color: var(--primary); }

@media (max-width: 780px) {
  body.charte-2026.page-connexion { padding: 12px; align-items: flex-start; }
  body.charte-2026 .carte-connexion { max-width: 480px; border-radius: 20px; }
  body.charte-2026 .banner.volet-marque { min-height: 0; padding: 20px 20px 22px; gap: 18px; }
  body.charte-2026 .volet-marque .v26-logo { height: 40px; }
  body.charte-2026 .volet-marque .v26-nom .nom { font-size: 17px; }
  body.charte-2026 .volet-marque .v26-vision { margin-bottom: 12px; font-size: 14px; }
  body.charte-2026 .volet-marque .accroche { font-size: 26px; }
  body.charte-2026 .volet-marque .v26-theme { margin-top: 16px; padding-top: 12px; }
  body.charte-2026 .volet-marque .v26-theme b { font-size: 15px; }
  body.charte-2026 .volet-marque .v26-bas { display: none; }
  body.charte-2026 .volet-formulaire { padding: 24px 20px 26px; }
  body.charte-2026 .volet-formulaire > .serif:first-child { font-size: 26px !important; }
}
@media (max-width: 460px) {
  /* Téléphone tenu droit : l'identité, la devise, le thème — puis le
     formulaire, sans avoir à défiler longtemps. */
  body.charte-2026 .volet-marque .v26-vision { display: none; }
  body.charte-2026 .volet-marque .v26-nom .sous { font-size: 12px; }
  body.charte-2026 .volet-marque .accroche { display: block; font-size: 23px; }
  body.charte-2026 .card.carte-simple { padding: 22px 20px; }
  body.charte-2026 .carte-simple .brand .sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.charte-2026 .v26-heros > div:first-child::before, body.charte-2026 .volet-marque::before { animation: none !important; }
  body.charte-2026.site-public .pilier:hover, body.charte-2026.site-public .v26-fond:hover,
  body.charte-2026.site-public .btn-pub:hover { transform: none; }
}