/* ══════════════════════════════════════════════════════════════════════
   BGFI Taskflow — coque de la charte BGFI
   Source : CHARTE_DESIGN_BGFI.md, sections 3 (coque), 4 (connexion),
   5 (étoile en filigrane).

   Chargée APRÈS « app.css ». Elle porte la barre latérale, l'en-tête, le
   pied, l'en-tête de page, l'étoile et les écrans d'accès — tout ce dont
   les règles d'origine ont été retirées d'app.css. Les 36 écrans, eux,
   gardent leurs propres règles : ce sont les jetons qui les habillent.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 1. Gabarit général ════════════════════════════════════════════════ */

.coque {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-height: 100vh;
}
.coque.rail-replie { grid-template-columns: 4.6rem minmax(0, 1fr); }
.coque.sans-rail { grid-template-columns: minmax(0, 1fr); }

.coque-droite { display: flex; flex-direction: column; min-width: 0; }

.contenu {
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Lien d'évitement : premier élément focalisable, invisible tant qu'il
   n'a pas le focus. Sans lui, la navigation au clavier traverse les
   trente entrées du rail avant d'atteindre le contenu. */
.saut-contenu {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--accent); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; text-decoration: none;
}
.saut-contenu:focus { left: 0; top: 0; }

/* ══ 2. Barre latérale ═════════════════════════════════════════════════ */

.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  background: linear-gradient(180deg, var(--sb-bg), var(--sb-bg-2));
  border-right: 1px solid var(--sb-line);
  color: var(--sb-text);
  display: flex; flex-direction: column;
  overflow: hidden;              /* contient l'étoile en filigrane */
  isolation: isolate;
}
/* Étoile en filigrane, bas à droite — décorative, jamais cliquable. */
.rail::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -70px; bottom: -60px; width: 320px; height: 320px; opacity: .06;
  background: #fff;
  -webkit-mask: var(--etoile) center / contain no-repeat;
          mask: var(--etoile) center / contain no-repeat;
}

.rail-marque {
  display: block; text-decoration: none; color: inherit;
  padding: 1.1rem 1.1rem 1rem;
  border-bottom: 1px solid var(--sb-line);
}
.rail-marque:hover .rail-nom { color: #fff; }
/* Le logo BGFI Services est bien plus haut que large que l'ancien logo BGFI
   Bank horizontal : a hauteur egale il paraissait minuscule. */
.rail-logo { height: 2.4rem; width: auto; max-width: 100%; object-fit: contain; object-position: left; display: block; }
.rail-embleme { display: none; height: 2.1rem; width: auto; }
.rail-nom {
  display: block; margin-top: .75rem;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
.rail-nom .court { color: var(--sauge); }
.rail-soustitre {
  display: block; margin-top: .2rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sb-muted);
}

.rail-nav {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: .9rem .7rem; display: flex; flex-direction: column; gap: .12rem;

  /* La barre de défilement du menu, peinte aux couleurs du rail.
     Laissée au navigateur, elle arrive **blanche** : la page est en thème
     clair, et Windows peint alors une bande grise qui tranche sur le marine
     du rail — une rayure claire sur toute la hauteur.

     `color-scheme: dark` suffit à la plupart des navigateurs : il leur dit
     que CETTE zone est sombre, et ils dessinent leurs pièces natives en
     conséquence (flèches comprises). `scrollbar-color` donne le ton exact,
     et `thin` l'affine. Les trois vont ensemble : le premier habille ce que
     les deux autres ne gouvernent pas. */
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/* Les navigateurs WebKit ignorent encore `scrollbar-color` sur certaines
   versions : on leur parle dans leur langue, avec les mêmes tons. */
.rail-nav::-webkit-scrollbar { width: 8px; }
.rail-nav::-webkit-scrollbar-track { background: transparent; }
.rail-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.rail-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); }
.rail-rubrique {
  margin: .9rem .45rem .3rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-muted);
}
.rail-rubrique:first-child { margin-top: .1rem; }

.rail-nav a,
.rail-nav summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; border-radius: var(--radius-sm);
  color: var(--sb-muted); text-decoration: none;
  font-size: .86rem; font-weight: 500; line-height: 1.3;
}
.rail-nav a i, .rail-nav summary i { width: 1.1rem; font-size: 1.1rem; text-align: center; flex: none; opacity: .9; }
.rail-nav a:hover, .rail-nav summary:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.rail-nav a[aria-current="page"] {
  position: relative;
  background: rgba(255, 255, 255, .10);
  color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sauge);        /* liseré gauche sauge */
}
/* Petite étoile sauge à droite de l'entrée active. */
.rail-nav a[aria-current="page"]::after {
  content: ""; margin-left: auto; flex: none;
  width: .8rem; height: .8rem; opacity: .8; background: var(--sauge);
  -webkit-mask: var(--etoile) center / contain no-repeat;
          mask: var(--etoile) center / contain no-repeat;
}

.rail-groupe > summary { cursor: pointer; list-style: none; }
.rail-groupe > summary::-webkit-details-marker { display: none; }
.rail-groupe > summary .chevron { margin-left: auto; font-size: .7rem; transition: transform .15s ease-out; }
.rail-groupe[open] > summary { color: #fff; }
.rail-groupe[open] > summary .chevron { transform: rotate(90deg); }
.rail-sous { display: flex; flex-direction: column; gap: .1rem; padding: .1rem 0 .35rem .3rem; }
.rail-sous a { padding-left: 2.4rem; font-size: .82rem; }
.rail-sous a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sauge); }

.rail-pastille {
  margin-left: auto; min-width: 1.25rem; text-align: center;
  font-size: .68rem; font-weight: 700; padding: .05rem .35rem;
  border-radius: 999px; background: var(--rouge); color: #fff;
}
.rail-nav a[aria-current="page"] .rail-pastille + ::after { margin-left: .4rem; }

/* Le logo editeur est desormais en tete du rail : le reprendre ici ferait
   doublon. Le pied ne porte plus que la mention imposee par la charte. */
.rail-pied {
  border-top: 1px solid var(--sb-line);
  padding: .85rem 1.1rem;
}
.rail-pied span { font-size: .68rem; line-height: 1.4; color: var(--sb-muted); }

/* Rail replié : icônes seules. */
.rail-replie .rail-logo,
.rail-replie .rail-nom,
.rail-replie .rail-soustitre,
.rail-replie .rail-rubrique,
.rail-replie .rail-sous,
.rail-replie .rail-pied span,
.rail-replie .rail-nav a span,
.rail-replie .rail-nav summary span,
.rail-replie .rail-groupe > summary .chevron,
.rail-replie .rail-nav a[aria-current="page"]::after { display: none; }
.rail-replie .rail-embleme { display: block; margin-inline: auto; }
.rail-replie .rail-marque { padding-inline: .5rem; text-align: center; }
.rail-replie .rail-nav a,
.rail-replie .rail-nav summary { justify-content: center; padding-inline: .5rem; }
.rail-replie .rail-pied { display: none; }
.rail-replie .rail-pastille {
  position: absolute; transform: translate(.7rem, -.6rem);
  min-width: .95rem; font-size: .6rem; padding: 0 .2rem;
}
.rail-replie .rail-nav a { position: relative; }

/* ══ 3. En-tête ════════════════════════════════════════════════════════ */

.entete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Filet dégradé marine → bleu → sauge sous la bordure. */
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--marine), var(--bleu-bgfi), var(--sauge));
  opacity: .55;
}

.entete-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 2.4rem; min-width: 2.4rem; padding-inline: .6rem;
  border-radius: .7rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.entete-bouton:hover { background: var(--surface-2); border-color: var(--muted-2); }
.entete-bouton:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.entete-bouton.pleine { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 999px; padding-inline: .9rem; }
.entete-bouton.pleine:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.entete-bouton.nu { border-color: transparent; background: transparent; }
.entete-bouton.nu:hover { background: var(--surface-2); }

.entete-titre { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.entete-titre h1 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-titre .fil-ariane { font-size: .75rem; }

.entete-espace { flex: 1; }

.recherche {
  display: flex; align-items: center; gap: .5rem;
  height: 2.4rem; padding-inline: .85rem; min-width: 16rem; max-width: 22rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted);
}
.recherche:focus-within { border-color: var(--accent); outline: 3px solid var(--ring); }
.recherche input { flex: 1; min-width: 0; border: 0; background: none; font-size: .82rem; color: var(--text); }
.recherche input:focus { outline: none; }
.recherche kbd {
  font: 600 .65rem/1 "Inter", system-ui, sans-serif; color: var(--muted);
  border: 1px solid var(--border); border-radius: .3rem; padding: .22rem .35rem; background: var(--surface);
}

/* Réservé aux lectures d'écran : retiré du flux visuel sans être retiré de
   l'arbre d'accessibilité (« display:none » le masquerait aussi aux lecteurs). */
.hors-ecran {
  /* « margin:-1px » retire du flux le pixel residuel. L'element reste en
     position absolue — c'est ce qui le sort du flux sans le retirer de
     l'arbre d'accessibilite — mais il doit alors etre ancre par un parent
     positionne, sinon il se place par rapport au document : pose dans la
     derniere colonne d'un tableau large, il allonge la page de plusieurs
     centaines de pixels. D'ou « position:relative » sur les cellules qui
     l'emploient, ci-dessous. */
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.theme-etiquette { font-size: .8rem; }
@media (max-width: 1439px) { .theme-etiquette { display: none; } }
.chevron-compte { font-size: .7rem; }

.entete-filet { width: 1px; height: 1.6rem; background: var(--border); flex: none; }
.entete-logo { height: 1.7rem; width: auto; flex: none; }
.entete-logo.sombre { display: none; }
:root[data-theme="sombre"] .entete-logo.clair { display: none; }
:root[data-theme="sombre"] .entete-logo.sombre { display: block; }

/* Emplacement réservé aux boutons « Guide » et « Aide » de la charte
   (section 3.2, points 6 et 7). Le moteur de guide n'étant pas encore
   livré, aucun bouton mort n'est posé : le lot « guide audio » viendra
   les insérer ici sans toucher au reste de l'en-tête. */
.entete-guide { display: contents; }

.cloche { position: relative; }
.cloche .pastille {
  position: absolute; top: -.2rem; right: -.2rem;
  min-width: 1.05rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--rouge); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}

.compte { position: relative; }
.compte-bouton { gap: .55rem; padding-right: .75rem; }
.compte-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.compte-ident { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.compte-ident strong { font-size: .78rem; font-weight: 600; }
.compte-ident span { font-size: .66rem; color: var(--muted); }

/* ── Panneaux déroulants de l'en-tête (thème, compte) ── */
.panneau {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40;
  min-width: 15rem; padding: .55rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 18px 48px rgba(11, 37, 69, .18);
}
.panneau[hidden] { display: none; }
.panneau-titre {
  padding: .3rem .55rem .45rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.panneau a, .panneau button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .55rem; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font-size: .83rem; text-align: left; text-decoration: none;
}
.panneau a:hover, .panneau button:hover { background: var(--surface-2); }
.panneau hr { border: 0; border-top: 1px solid var(--border); margin: .4rem .25rem; }

/* Aperçus de thème : la pastille montre réellement les couleurs du thème. */
.theme-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.theme-choix button { flex-direction: column; align-items: stretch; gap: .4rem; padding: .5rem; }
.theme-apercu {
  height: 2.2rem; border-radius: .45rem; border: 1px solid var(--border);
  display: flex; overflow: hidden;
}
.theme-apercu i { width: 30%; background: var(--marine); }
.theme-apercu em { flex: 1; }
.theme-choix button[aria-checked="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.theme-nom { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; }
.theme-nom .fa-check { margin-left: auto; color: var(--accent); }
.theme-choix button:not([aria-checked="true"]) .fa-check { visibility: hidden; }

/* ══ 4. En-tête de page et étoile ══════════════════════════════════════ */

:root { --etoile: url("../img/brand/etoile.png"); }

/* La classe de l'application s'appelle « page-head » : on l'habille plutôt
   que de renommer vingt-sept gabarits pour un nom de classe. */
.page-head, .carte { position: relative; isolation: isolate; }
.page-head::before, .carte::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--accent);
  -webkit-mask: var(--etoile) center / contain no-repeat;
          mask: var(--etoile) center / contain no-repeat;
}
.page-head::before { right: .5rem; top: -1.4rem; width: 6.5rem; height: 6.5rem; opacity: .07; }
.carte::before { right: .6rem; bottom: .6rem; width: 4.2rem; height: 4.2rem; opacity: .045; }
.carte.sans-etoile::before, .page-head.sans-etoile::before { display: none; }

/* Valeurs de la charte (§3.3 et §7) : le titre de page passe de 20 px à
   1,55 rem / 800, et la phrase d'explication prend la teinte « muted ». */
.page-head h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.page-head .surtitre {
  display: block; margin-bottom: .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.page-head .muted { font-size: .9rem; color: var(--muted); max-width: 70ch; }
.page-head .actions { margin-left: auto; }

/* ══ 5. Pied de page ═══════════════════════════════════════════════════ */

.pied {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--muted);
}
.pied .droite { margin-left: auto; }

/* ══ 6. Écrans d'accès (connexion, code, mot de passe) ═════════════════
   **Deux volets** : à gauche la marque, les étoiles BGFI et le propos, sur le
   marine ; à droite le formulaire, seul, sur fond clair. C'est l'agencement
   de la charte (§4), retrouvé après un premier essai en miroir.

   Toute la matière de la charte reste employée : dégradé marine à 120°,
   étoile en **masque** CSS (§5), sauge comme seule couleur de mise en valeur,
   bannière du siège en texture, les deux logos.

   Le volet de gauche ne porte **rien d'indispensable** : sous 1024 px il se
   replie en un bandeau qui ne garde que la marque, sans que l'on perde un
   moyen d'entrer.
   ══════════════════════════════════════════════════════════════════════ */

.acces {
  min-height: 100svh;              /* « svh » : sur mobile, « vh » compte la
                                      barre d'adresse rétractée. */
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  background: var(--surface);
  color: var(--text);
}

/* ── Volet droit : le formulaire, et la mention d'éditeur ───────────── */

.acces-volet {
  display: flex; flex-direction: column;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(1.25rem, 4vh, 3rem) clamp(1.25rem, 5vw, 4rem);
  /* Le volet défile lui-même si la fenêtre est très basse : la page, elle,
     ne défile jamais — c'est la grille à deux volets qui tient l'écran. */
  max-height: 100svh; overflow-y: auto;
}

/* La marque, en tête du propos : le nom et son sous-titre, rien d'autre.
   L'emblème qui la précédait est sorti le 2026-10-22 — le logo de l'éditeur,
   en haut du volet, dit déjà la maison. */
.acces-marque {
  position: relative;
  display: grid; justify-items: start; row-gap: .15rem;
  margin-bottom: clamp(1.1rem, 3vh, 2rem);
}
.acces-nom {
  /* La marque porte l ecran : elle se lit comme sur le SGC et le SMQ, autour
     de 52 px a 1440 px, la ou elle plafonnait a 17 px et passait derriere la
     phrase d accroche. Sous 1024 px le bandeau replie la ramene a une taille
     de titre (voir les petits ecrans, plus bas). */
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.3rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: #fff;
}
.acces-nom b { font-weight: 800; color: var(--sauge); }
.acces-soustitre {
  font-size: clamp(.68rem, .55rem + .25vw, .8rem); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #9fb0c6;
}

.acces-centre {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  /* La colonne de lecture d'un formulaire : au-delà, l'œil perd la ligne. */
  width: 100%; max-width: 26rem; margin-inline: auto;
}

/* Le pied du volet droit ne porte plus qu'une mention : le logo BGFI Bank
   l'encombrait sous un formulaire déjà signé par la marque du volet gauche
   (retrait demandé le 2026-10-16). Aligné sur la colonne du formulaire, pas
   sur le bord du volet. */
.acces-pied {
  width: 100%; max-width: 26rem; margin-inline: auto;
  font-size: .72rem; color: var(--muted);
}


/* ── La « carte » : à plat sur le fond clair ─────────────────────────────
   Le nom de classe reste `acces-carte` : les six écrans d'accès s'en servent,
   et seul l'habillage change. Plus d'ombre ni de fond propre — la carte
   flottante avait un sens au-dessus d'une photo, pas sur un volet clair. */

.acces-carte { width: 100%; }
.acces-carte h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text);
}
.acces-carte .aide {
  margin-top: .45rem; font-size: .88rem; line-height: 1.55; color: var(--muted);
}

.acces-form {
  margin-top: clamp(1.1rem, 2.6vh, 1.6rem);
  display: flex; flex-direction: column; gap: clamp(.8rem, 1.8vh, 1.1rem);
}

.acces-champ { display: flex; flex-direction: column; gap: .4rem; }
.acces-champ .ligne-label { display: flex; align-items: baseline; gap: .5rem; }
.acces-champ label { font-size: .82rem; font-weight: 600; color: var(--text); }
.acces-champ .oubli { margin-left: auto; font-size: .78rem; color: var(--accent); }
.acces-champ .oubli:hover { text-decoration: underline; }
.acces-champ input {
  height: 2.9rem; padding-inline: .9rem;
  border: 1px solid var(--border); border-radius: .6rem;
  background: var(--surface); color: var(--text);
  font-size: .92rem; width: 100%;
}
.acces-champ input::placeholder { color: var(--muted-2); }
.acces-champ input:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--accent);
}
.acces-champ.en-erreur input { border-color: var(--rouge); }
.acces-champ .erreur { font-size: .78rem; color: var(--rouge); }

/* Champ mot de passe avec bouton œil. */
.acces-secret { position: relative; display: flex; }
.acces-secret input { padding-right: 2.9rem; }
.acces-secret button {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: .5rem;
  background: none; color: var(--muted); cursor: pointer;
}
.acces-secret button:hover { background: var(--surface-2); color: var(--text); }
.acces-secret button:focus-visible { outline: 3px solid var(--ring); }

.acces-case { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--muted); }
.acces-case input { width: auto; height: auto; margin: 0; accent-color: var(--accent); }

.acces-envoi {
  width: 100%; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: .6rem; cursor: pointer;
  background: var(--accent); color: var(--sur-accent);
  font-size: .95rem; font-weight: 700;
  transition: background-color 140ms ease;
}
.acces-envoi:hover { background: var(--accent-hover); }
.acces-envoi:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.acces-envoi[disabled] { opacity: .72; cursor: progress; }
.acces-envoi .fa-spinner { display: none; }
.acces-envoi[disabled] .fa-spinner { display: inline-block; }
.acces-envoi[disabled] .libelle-repos { display: none; }

.acces-alerte {
  display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: .7rem;
  font-size: .84rem; line-height: 1.5;
}
.acces-alerte.erreur { background: #fbe9e7; color: #8f1d14; }
.acces-alerte.succes { background: #e2f3e2; color: #0b5c0b; }
.acces-alerte.info { background: #eef2f8; color: #33455c; }

.acces-note {
  margin-top: clamp(.9rem, 2vh, 1.2rem);
  font-size: .78rem; line-height: 1.5; color: var(--muted);
}
.acces-note a { color: var(--accent); }
.acces-securise {
  margin-top: clamp(.8rem, 1.8vh, 1.1rem); padding-top: clamp(.7rem, 1.5vh, 1rem);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; color: var(--muted);
}

/* Pavé du code à usage unique. */
.acces-code input {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.7rem; letter-spacing: .5rem; text-align: center; height: 3.4rem;
}

/* ── Volet gauche : la marque, les étoiles BGFI, le propos ─────────────
   Le marine de la charte, la bannière du siège en texture très basse, et
   cinq étoiles en masques CSS : une maîtresse, trois en retrait, une en
   sauge. Aucune n'est une image à charger pour elle-même — c'est le même
   fichier `etoile.png` employé en masque, comme partout ailleurs. */

.acces-vitrine {
  position: relative; isolation: isolate; overflow: hidden;
  /* Trois blocs répartis sur la hauteur : l'éditeur en haut, le propos au
     milieu, la signature en pied. « space-between » suffit — les deux blocs
     qui l'encadrent sont bas, le propos se retrouve centré. */
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 3.5vw, 3.25rem);
  color: #fff;
  background: linear-gradient(145deg, #0b2545 0%, #071a33 60%, #05121f 100%);
  /* Un filet clair : en thème Sombre, les deux volets sont marine et la
     coupure, sans lui, ne se voit plus. */
  border-right: 1px solid rgba(255, 255, 255, .10);
}
/* La bannière du siège, à peine présente : elle donne de la matière au fond
   sans jamais disputer la vedette aux étoiles. */
.acces-vitrine::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .16;
  background: url("../img/brand/siege-nuit.jpg") center / cover no-repeat;
  mix-blend-mode: luminosity;
}

.acces-ciel { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.acces-etoile {
  position: absolute; display: block; background: #fff;
  -webkit-mask: var(--etoile) center / contain no-repeat;
          mask: var(--etoile) center / contain no-repeat;
}
/* L'étoile maîtresse, au premier tiers : c'est elle qu'on voit. La charte
   autorise sur cet écran — et seulement ici — une rotation très lente. */
.acces-etoile--maitresse {
  left: -6%; top: 14%; width: min(46rem, 72%); aspect-ratio: 1; opacity: .13;
  animation: acces-tourner 240s linear infinite;
}
.acces-etoile--haute    { right: 8%;  top: 12%;  width: 9rem;  aspect-ratio: 1; opacity: .10; }
.acces-etoile--basse    { right: 16%; bottom: 28%; width: 5rem; aspect-ratio: 1; opacity: .07; }
.acces-etoile--lointaine{ left: 30%;  bottom: 10%; width: 3.2rem; aspect-ratio: 1; opacity: .06; }
.acces-etoile--sauge    { right: -3%; top: 48%; width: 14rem; aspect-ratio: 1; opacity: .16;
                          background: var(--sauge); }

@keyframes acces-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .acces-etoile--maitresse { animation: none; }
}

/* Le propos — marque, atouts, phrase — au milieu de l'écran. */
.acces-propos { position: relative; max-width: 34rem; }

.acces-atouts {
  display: grid; gap: .55rem; margin: 0 0 clamp(1.25rem, 3vh, 2rem); padding: 0;
  list-style: none;
}
.acces-atout {
  display: flex; align-items: center; gap: .7rem;
  font-size: .86rem; line-height: 1.4; color: #e4ebf4;
}
.acces-atout i {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  display: grid; place-items: center;
  background: var(--sauge-15); border: 1px solid var(--sauge-35); color: var(--sauge);
  font-size: .85rem;
}

.acces-phrase {
  font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem); font-weight: 600;
  line-height: 1.4; letter-spacing: -.01em; color: #fff;
}
/* En pied de volet, hors du propos : elle garde sa place quand le reste
   monte au milieu. */
.acces-signature {
  position: relative;
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sauge);
}
/* L'éditeur ouvre le volet, seul en haut à gauche, comme sur le SGC
   (2026-10-21) ; « align-self » l'empêche d'être étiré par la colonne. */
.acces-editeur { height: 2.5rem; width: auto; align-self: start; }

/* ── Petits écrans ───────────────────────────────────────────────────────
   Sous 1024 px, la charte veut « la carte seule, centrée ». Le volet de
   gauche ne disparaît pas tout à fait : il se replie en un bandeau marine qui
   garde la marque — sans lui, l'écran de connexion ne dirait plus de quelle
   application il est la porte. Les étoiles et le propos, eux, sortent. */
@media (max-width: 1023px) {
  .acces { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .acces-vitrine {
    padding: .9rem clamp(1.25rem, 5vw, 2rem);
    border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  /* Le bandeau replié ne garde que la marque : le logo de l'éditeur
     doublerait sa hauteur pour ne rien dire de plus. Le propos, lui, reste
     affiché — c'est lui qui porte la marque — mais perd tout le reste. */
  .acces-ciel, .acces-editeur,
  .acces-atouts, .acces-phrase, .acces-signature { display: none; }
  .acces-marque { margin-bottom: 0; }
  .acces-volet { max-height: none; }
  /* Le bandeau reprend la marque en petit : a la taille du volet de gauche,
     le nom mangerait la moitie de la hauteur avant le formulaire. */
  .acces-nom { font-size: 1.15rem; letter-spacing: .01em; }
  .acces-soustitre { font-size: .68rem; }
}

/* Fenêtre basse : le décor du volet de droite s'allège avant tout le reste,
   dans l'ordre de son utilité. Le formulaire, lui, reste entier. */
@media (max-height: 760px) {
  .acces-atouts { display: none; }
}
@media (max-height: 620px) {
  /* Sans le logo de l'éditeur, le volet n'a plus qu'un bloc : centré, il
     tient mieux qu'accroché en haut. */
  .acces-editeur { display: none; }
  .acces-vitrine { justify-content: center; }
}
@media (max-height: 540px) {
  .acces-note, .acces-securise { display: none; }
}

@media print {
  .acces-vitrine, .acces-pied { display: none; }
  .acces { display: block; }
}

/* ══ 7. Harmonisation des écrans existants ═════════════════════════════
   Quelques règles seulement : les jetons font l'essentiel du travail. On
   ne reprend ici que ce que la charte chiffre explicitement et que les
   règles d'origine ne respectaient pas.
   ══════════════════════════════════════════════════════════════════════ */

.carte { border-radius: var(--radius); }
.carte > h2, .carte > h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.carte > h2 i, .carte > h3 i { opacity: .7; margin-right: .45rem; }

/* En-têtes de tableau : capitales espacées, aux valeurs de la charte. */
.table thead th {
  background: var(--thead-bg); color: var(--thead-text);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* Un tableau plus large que la place disponible doit defiler lui-meme, jamais
   la page (charte §6.3 et §8) — y compris sur un ecran d'ordinateur.
   Le defilement est porte par un conteneur dedie, et non par le <table> :
   pose sur la balise elle-meme, « display:block » lui fait perdre sa mise en
   page de tableau, la table anonyme engendree a l'interieur prend sa largeur
   de contenu, et le tableau n'occupe plus la carte (journal, calendrier,
   evaluations se retrouvaient a moitie vides). */
.table-boite { overflow-x: auto; max-width: 100%; }

/* État vide d'un tableau : une icone, la raison, et le geste suivant quand il
   y en a un. La ligne ne prend ni le survol ni le fond des lignes de donnees,
   elle n'en est pas une. */
.ligne-vide:hover { background: transparent !important; }
.ligne-vide > td { padding: 0; }
.etat-vide {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.75rem 1.5rem; text-align: center;
}
.etat-vide > i {
  font-size: 1.6rem; color: var(--accent); opacity: .45;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.etat-vide-message { font-size: .95rem; font-weight: 600; color: var(--text); }
.etat-vide-precision { font-size: .83rem; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.etat-vide .btn { margin-top: .35rem; }

/* L'abreviation des jours garde son infobulle, mais pas le souligne pointille
   du navigateur : dans un en-tete de tableau il se lit comme un marqueur
   d'erreur. */
.cal-th abbr { text-decoration: none; cursor: help; }

/* ── En-tete de colonne triable ──────────────────────────────────────── */

.th-tri { padding: 0 !important; }
.th-tri > a {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .75rem;
  color: inherit; text-decoration: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.th-tri > a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.th-tri > a:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
/* La fleche reste discrete tant que la colonne n'est pas celle qui ordonne :
   huit fleches noires dans un en-tete se liraient comme un tri multiple. */
.th-tri > a > i { font-size: .72rem; opacity: .3; }
.th-tri.trie > a > i { opacity: 1; color: var(--accent); }
.th-tri.trie { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── Colonne d'actions ───────────────────────────────────────────────── */

/* « relative » ancre le libelle masque de l'en-tete (voir « .hors-ecran ») :
   sans cela il se positionne par rapport au document et le fait deborder. */
.col-actions { position: relative; text-align: right; white-space: nowrap; width: 1%; }
/* La colonne est volontairement serree (« width:1% ») : sans « nowrap » les
   boutons d'action s'y empilent les uns sous les autres et la ligne double
   de hauteur. */
.col-actions .actions { justify-content: flex-end; flex-wrap: nowrap; gap: .3rem; }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  /* 2,1 rem : la taille des petits boutons de la charte, et le minimum
     raisonnable pour une cible tactile dans un tableau dense. */
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--border); border-radius: .5rem;
  background: var(--surface); color: var(--muted);
  text-decoration: none; font-size: .82rem; cursor: pointer;
}
.btn-icone:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
.btn-icone:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.btn-icone.danger { color: var(--crit); }
.btn-icone.danger:hover { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

/* ── Pagination ──────────────────────────────────────────────────────── */

.pagination {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .85rem;
}
.pagination-compte { font-size: .78rem; color: var(--muted); }
/* « A droite », dit la charte : le compte reste a gauche, les liens filent. */
.pagination-liens {
  margin-left: auto; display: flex; align-items: center; gap: .25rem;
  list-style: none; padding: 0;
}
.page-lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding-inline: .5rem;
  border: 1px solid var(--border); border-radius: .5rem;
  background: var(--surface); color: var(--text);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
a.page-lien:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
a.page-lien:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.page-lien.actuel { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.page-lien[aria-disabled="true"] { opacity: .4; }
.page-ellipse { padding-inline: .25rem; color: var(--muted); }

@media (max-width: 767px) {
  .pagination { gap: .5rem; }
  .pagination-liens { margin-left: 0; }
}

.btn { font-weight: 600; text-transform: none; }

/* Texte pose sur l'accent : blanc dans les themes clairs, marine en Sombre
   ou l'accent est un bleu clair (du blanc n'y atteint que 3,5:1). */
.btn.primary, .btn.primary:hover { color: var(--sur-accent); }
.compte-avatar, .saut-contenu, .entete-bouton.pleine { color: var(--sur-accent); }

/* La rampe de priorite s'inverse en Sombre : P1 y est la teinte la plus
   claire, elle appelle donc de l'encre sombre et non du blanc. */
:root[data-theme="sombre"] .badge.prio-1,
:root[data-theme="sombre"] .badge.prio-2 { color: #071428; }
:root[data-theme="sombre"] .badge.prio-3,
:root[data-theme="sombre"] .badge.prio-4 { color: #e7edf5; }

/* ══ 8. Responsive ═════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
  .entete-logo, .entete-filet { display: none; }
}
@media (max-width: 1023px) {
  /* Le rail devient un tiroir. */
  .coque, .coque.rail-replie { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 17rem;
    transform: translateX(-100%); transition: transform .2s ease-out;
  }
  .coque.tiroir-ouvert .rail { transform: none; }
  .voile {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(7, 20, 40, .55); border: 0;
  }
  .voile[hidden] { display: none; }
  /* En tiroir, le rail reste déployé même si l'état « replié » est mémorisé. */
  .rail-replie .rail-logo, .rail-replie .rail-nom, .rail-replie .rail-soustitre,
  .rail-replie .rail-rubrique, .rail-replie .rail-sous, .rail-replie .rail-pied span,
  .rail-replie .rail-nav a span, .rail-replie .rail-nav summary span,
  .rail-replie .rail-groupe > summary .chevron { display: revert; }
  .rail-replie .rail-embleme { display: none; }
  .rail-replie .rail-nav a, .rail-replie .rail-nav summary { justify-content: flex-start; padding-inline: .65rem; }
  .rail-replie .rail-pied { display: revert; padding-inline: 1.1rem; }
  .rail-replie .rail-pastille { position: static; transform: none; min-width: 1.25rem; font-size: .68rem; padding: .05rem .35rem; }
  /* En deux colonnes le bandeau fait deux lignes : on le resserre, faute de
     quoi il deborde d'une poignee de pixels sur une tablette en portrait. */
  .acces-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .acces-atout { padding: .55rem .7rem; }
}
@media (max-width: 767px) {
  /* Le fil d'Ariane sous le titre vole la place du titre lui-meme sur un
     telephone, et il double la hauteur de l'en-tete : on le laisse au large. */
  .entete-titre .fil-ariane { display: none; }

  /* Et le titre lui-meme s'efface : cinq boutons occupent la barre, il ne lui
     restait qu'une lettre et des points de suspension — « M… » pour « Mes
     taches ». L'ecran porte deja son titre en toutes lettres juste dessous
     (constate au telephone le 2026-10-19). */
  .entete-titre h1 { display: none; }

  .recherche { display: none; }
  .compte-ident { display: none; }
  .contenu { padding: 1rem; }
  .entete { padding-inline: 1rem; }
  .pied { padding-inline: 1rem; flex-direction: column; align-items: flex-start; gap: .3rem; }
  .pied .droite { margin-left: 0; }
  .acces { padding-inline: 1rem; }
  /* Logo plus sobre en colonne etroite : la carte y est plus haute, les
     quelques pixels gagnes evitent un defilement sur un 390x640. */
  .acces-haut img { height: clamp(2.2rem, 4.4vh, 2.6rem); }
  .acces-atouts { grid-template-columns: 1fr; }
  .page-head .actions { margin-left: 0; width: 100%; }
}

/* ══ 9. Mouvement et impression ════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rail, .rail-groupe > summary .chevron { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

@media print {
  .rail, .entete, .pied, .voile, .saut-contenu { display: none !important; }
  .coque { display: block; }
  .contenu { padding: 0; max-width: none; }
  .page-head::before, .carte::before, .rail::after, .acces::after { display: none !important; }
}

/* ══ 10. Téléphone (lot 4, 2026-10-16) ═════════════════════════════════
   Les RMO sont en déplacement et n'ouvrent pas leur ordinateur : ce qui suit
   rend l'application utilisable au pouce, pas seulement affichable.

   Trois gestes, et un seul principe — **rien ne disparaît** :
   1. les tableaux s'empilent en cartes au lieu de défiler latéralement ;
   2. une barre basse met quatre destinations à portée du pouce, et le menu
      complet reste à un geste ;
   3. les cibles tactiles passent à 44 px, la taille d'un doigt.

   Tout est facultatif : sans JavaScript, les tableaux défilent comme avant et
   la barre basse n'apparaît pas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Les tableaux deviennent des cartes ─────────────────────────────────
   Chaque cellule porte le libellé de sa colonne, recopié par `js/mobile.js`.
   Sans ce libellé, une pile de valeurs sans nom serait illisible — c'est le
   défaut de toutes les tables empilées à la va-vite. */

@media (max-width: 767px) {
  /* La table entière quitte le contexte de table, pas seulement ses lignes :
     laissée en `display: table`, elle continue de répartir les largeurs entre
     colonnes, et une cellule d'actions se retrouve large de trois pixels avec
     son bouton qui déborde à gauche. */
  .table-etiquetee,
  .table-etiquetee tbody { display: block; }
  .table-etiquetee { min-width: 0; border: 0; box-shadow: none; background: none; }
  .table-etiquetee thead { position: absolute; width: 1px; height: 1px;
                           overflow: hidden; clip-path: inset(50%); }
  .table-etiquetee tbody tr {
    display: block; margin-bottom: .7rem; padding: .75rem .85rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow);
  }
  .table-etiquetee tbody tr:hover { background: var(--surface); }
  .table-etiquetee tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .3rem 0; border: 0; text-align: right;
  }
  .table-etiquetee tbody td::before {
    content: attr(data-colonne);
    flex: none; text-align: left;
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-3);
  }
  /* Une cellule sans libellé — colonne d'actions, case à cocher — n'a pas de
     ligne d'étiquette à afficher : elle prend toute la largeur. */
  .table-etiquetee tbody td:not([data-colonne]),
  .table-etiquetee tbody td[data-colonne=""] { justify-content: flex-end; }
  /* `width: 1%` est une ruse de tableau pour qu'une colonne d'actions se
     resserre sur son contenu. Hors contexte de table, le pourcentage devient
     littéral : trois pixels de large, et le bouton sort de la carte. */
  .table-etiquetee tbody td.col-actions { width: auto; }
  .table-etiquetee tbody td:not([data-colonne])::before,
  .table-etiquetee tbody td[data-colonne=""]::before { content: none; }
  /* La colonne porteuse du sens fait le titre de la carte : en tête, à gauche,
     plus grande, et sans son étiquette — on ne titre pas un titre. */
  .table-etiquetee tbody td.col-large {
    display: block; text-align: left;
    font-size: 14.5px; font-weight: 600;
    padding-bottom: .5rem; margin-bottom: .35rem;
    border-bottom: 1px solid var(--line);
  }
  .table-etiquetee tbody td.col-large::before { content: none; }
  /* La ligne « aucun résultat » garde sa pleine largeur et son centrage. */
  .table-etiquetee tbody td[colspan] { display: block; text-align: center; }
  .table-etiquetee tbody td[colspan]::before { content: none; }
  /* Le conteneur garde son `overflow-x: auto` : une table empilée n'a plus de
     largeur minimale, donc ne le fait jamais apparaître, tandis qu'une table
     qui refuse l'empilement (`data-cartes="non"`) en a toujours besoin. */
}

/* ── Barre de navigation basse ──────────────────────────────────────────
   Posée par `js/mobile.js` à partir des entrées réelles du rail : elle ne
   propose jamais un écran que le profil connecté n'a pas. */

.barre-basse { display: none; }

@media (max-width: 767px) {
  /* La hauteur de la barre, nommée une fois : 56 px de contenu plus le filet
     du haut. Elle sert ici et dans la réserve laissée au contenu — écrite en
     double, elle finit par différer d'un pixel, et le pied de page passe sous
     la barre. */
  :root { --barre-basse-h: 57px; }

  .barre-basse {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line);
    /* La barre de gestes des téléphones récents mord sur le bas de l'écran. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(7, 20, 40, .08);
  }
  .barre-basse :is(a, button) {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; min-height: 56px; padding: .35rem .25rem;
    border: 0; background: none; cursor: pointer;
    color: var(--ink-2); font-size: 10.5px; font-weight: 600;
    text-decoration: none; font-family: inherit;
  }
  .barre-basse i { font-size: 17px; }
  .barre-basse [aria-current="page"] { color: var(--accent); }
  .barre-basse [aria-current="page"] i { color: var(--accent); }

  /* La barre couvre le bas de la page : on rend au contenu la hauteur qu'elle
     prend, sans quoi la dernière ligne d'un tableau reste cachée dessous. */
  .contenu { padding-bottom: calc(var(--barre-basse-h) + 1rem + env(safe-area-inset-bottom, 0px)); }
  .pied { margin-bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom, 0px)); }
  /* La barre d'enregistrement collante d'un formulaire se pose au-dessus. */
  .barre-enregistrer { bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Cibles tactiles ────────────────────────────────────────────────────
   44 px est la taille d'un doigt. La règle vise le pointeur grossier plutôt
   qu'une largeur d'écran : une tablette tactile large en a autant besoin
   qu'un téléphone, et une fenêtre étroite sur un ordinateur, pas du tout. */

@media (pointer: coarse) {
  .btn, .entete-bouton, .rail-nav a, .rail-nav summary,
  .onglets a, .acces-envoi {
    min-height: 44px;
  }
  .btn, .onglets a { display: inline-flex; align-items: center; }
  .champ-reglage :is(input, select), .field input { height: 44px; }
  .acces-champ input { height: 48px; }
  /* Deux liens d'action collés se touchent du même doigt : on les espace. */
  .col-actions :is(a, button) + :is(a, button) { margin-left: .5rem; }
}

/* ── Format d'application installée ─────────────────────────────────────
   Lancée depuis l'écran d'accueil, la page n'a plus la barre d'adresse du
   navigateur : le haut de l'écran revient à l'application, et doit respecter
   l'encoche. */

@media (display-mode: standalone) {
  .entete { padding-top: env(safe-area-inset-top, 0px); }
}

/* ── Transitions de page ────────────────────────────────────────────────
   Changer d'écran ne doit pas claquer. Le navigateur photographie la page
   quittée, peint la suivante, et fond l'une dans l'autre.

   Le rail, l'en-tête et la barre basse portent un **nom de transition** : ils
   sont donc photographiés à part et ne participent pas au fondu du contenu.
   C'est tout l'effet recherché — le menu reste en place, seule la zone de
   travail change. Sans ces noms, le rail disparaîtrait et reviendrait à
   chaque clic, ce qui donne l'impression que l'application se recharge.

   Là où la bascule n'existe pas (Firefox, Safari), rien ne se passe et la
   page arrive d'un bloc : c'est la cascade des cartes (app.css) qui l'anime.
   Les deux chemins sont couverts, et aucun n'est nécessaire à l'usage. */

@view-transition { navigation: auto; }

.rail { view-transition-name: rail; }
.entete { view-transition-name: entete; }
.barre-basse { view-transition-name: barre-basse; }

@media (prefers-reduced-motion: no-preference) {
  /* L'écran quitté s'efface vite, le nouveau prend son temps et monte de dix
     pixels : c'est ce décalage qui se lit comme « la page arrive », et non
     comme « la page clignote ». */
  ::view-transition-old(root) { animation: page-sortie 170ms ease-in both; }
  ::view-transition-new(root) {
    animation: page-entree 320ms cubic-bezier(.22, .7, .3, 1) both;
  }

  /* Rail, en-tête, barre basse : seule l'entrée active change d'un écran à
     l'autre. Un fondu court, et surtout aucun déplacement. */
  ::view-transition-old(rail), ::view-transition-new(rail),
  ::view-transition-old(entete), ::view-transition-new(entete),
  ::view-transition-old(barre-basse), ::view-transition-new(barre-basse) {
    animation-duration: 220ms;
    animation-timing-function: ease-out;
  }

  @keyframes page-sortie { to { opacity: 0; } }
  @keyframes page-entree {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* Préférence système « moins d'animations » : l'enchaînement reste (le
   navigateur s'en sert pour passer d'une page à l'autre), mais il ne dure
   pas. On ne retire pas la transition, on lui retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Fiches en deux colonnes, au telephone (2026-10-19) ──────────────────
   Une FICHE est une table sans en-tete de colonne, dont la premiere cellule
   de chaque ligne EST l'etiquette (`th scope="row"`). `js/mobile.js` ne sait
   pas les empiler — il travaille en recopiant les `thead th` —, et elles
   restaient en deux colonnes sur 390 px : les valeurs sortaient de l'ecran,
   coupees net. « CODE COLLABORATEUR  C( ».

   Le critere est structurel et non une classe : quatre gabarits portent de
   telles fiches (profil, systeme, suppression d'un compte, et le resume de
   l'activite), et une seule d'entre elles portait la classe sur laquelle
   cette regle s'appuyait d'abord.

   `:not(:has(thead))` epargne la grille d'evaluation : elle a des en-tetes
   de colonnes, donc `mobile.js` l'empile deja en cartes, et deux mecanismes
   d'empilement sur la meme table se contrarieraient.

   `min-width: 0` autant que l'empilement : les tables portent un plancher de
   640 px, et sans lui la carte se laissait glisser lateralement sur du vide
   alors que son contenu tient dans l'ecran. `width: auto` sur les cellules
   est du meme ordre — une largeur en pourcentage devient litterale des que la
   cellule quitte le contexte de table (le piege de `.col-actions`). */

@media (max-width: 767px) {
  .table:not(:has(thead)):has(tbody th[scope="row"]) { min-width: 0; }
  .table:not(:has(thead)):has(tbody th[scope="row"]),
  .table:not(:has(thead)):has(tbody th[scope="row"]) tbody,
  .table:not(:has(thead)):has(tbody th[scope="row"]) tr,
  .table:not(:has(thead)):has(tbody th[scope="row"]) th[scope="row"],
  .table:not(:has(thead)):has(tbody th[scope="row"]) th[scope="row"] + td {
    display: block;
    width: auto;
    text-align: left;
  }
  .table:not(:has(thead)):has(tbody th[scope="row"]) tr {
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
  }
  .table:not(:has(thead)):has(tbody th[scope="row"]) tr:last-child { border-bottom: 0; }
  .table:not(:has(thead)):has(tbody th[scope="row"]) th[scope="row"] { padding: 0 0 .15rem; }
  .table:not(:has(thead)):has(tbody th[scope="row"]) th[scope="row"] + td { padding: 0; }
}
}

/* ── Proposer l'installation, et annoncer une mise a jour (2026-10-20) ───
   Deux bandeaux et une fenetre, poses par la coque. Ils ne bloquent jamais :
   le bandeau se laisse ecarter, la fenetre se ferme au clavier, et
   l'application reste entierement utilisable sans installer quoi que ce
   soit. Le marine de la charte, pas une couleur d'alerte : ce n'est pas un
   avertissement, c'est une offre. */

.bandeau-installation {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0 1.5rem 1rem;
  padding: .8rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .86rem; color: var(--text);
}
.bandeau-installation[hidden] { display: none; }
.bandeau-installation > i { color: var(--accent); font-size: 1.1rem; flex: none; }
.bandeau-installation .bandeau-actions {
  margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap;
}

/* Le bandeau de nouvelle version : pose en bas, hors du flux, pour ne pas
   deplacer ce que la personne est en train de lire. */
.bandeau-version {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  background: var(--sb-bg); color: var(--sb-text);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-size: .84rem;
}
.bandeau-version .btn {
  background: transparent; color: var(--sb-text);
  border-color: rgba(255, 255, 255, .35);
}
.bandeau-version .btn:hover { background: rgba(255, 255, 255, .12); }

/* ── La fenetre d'explication ──────────────────────────────────────────── */

.fenetre-fond {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(7, 20, 40, .55);
}
.fenetre-fond[hidden] { display: none; }
body.fenetre-ouverte { overflow: hidden; }

.fenetre {
  width: min(28rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(7, 20, 40, .45);
}
.fenetre-tete {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.1rem .6rem;
}
.fenetre-tete h2 { margin: 0; font-size: 1.05rem; }
.fenetre-pied {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .6rem 1.1rem 1.1rem;
}

.etapes-installation { margin: 0; padding: 0 1.1rem; }
ol.etapes-installation { list-style: none; counter-reset: etape; }
ol.etapes-installation li {
  counter-increment: etape;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem; line-height: 1.5;
}
ol.etapes-installation li:last-child { border-bottom: 0; }
ol.etapes-installation li::before {
  content: counter(etape);
  flex: none;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  font-size: .78rem; font-weight: 700;
}
ol.etapes-installation li svg { flex: none; margin-left: auto; color: var(--accent); }
.etapes-installation p { font-size: .88rem; line-height: 1.55; }

.message-installation { margin-bottom: 1rem; }

@media (max-width: 767px) {
  .bandeau-installation { margin-inline: 1rem; }
  .bandeau-installation .bandeau-actions { margin-left: 0; width: 100%; }
  .bandeau-version { bottom: calc(var(--barre-basse-h, 57px) + 1rem + env(safe-area-inset-bottom, 0px)); }
}