/* ============================================================
   TrajetPrim'CSE — design system « Soft Depth v3 »
   Transposé du site CSE (cse-poleintermaide.fr) : même matière
   (verre lumineux, liseré --rim intégré à l'ombre, reflet rasant),
   même palette froide, mêmes polices (Nunito + Manrope).
   Les NOMS de variables et de classes historiques de TrajetPrim'
   sont conservés (--indigo, .neu, .btn…) : les pages suivent sans
   être réécrites.
   PRÊT-NUIT : aucune couleur en dur dans les composants — le futur
   thème sombre ne sera qu'un bloc [data-theme="night"] de variables.
   ============================================================ */

:root{
  /* --- Palette JOUR (celle du site CSE) --- */
  --bg:#eef1f7;
  --bg-2:#e6ebf5;
  --ink:#1e2640;
  --ink-soft:#5a6488;

  /* La marque : --indigo est le nom historique de TrajetPrim',
     sa valeur est le teal du CSE. Ne pas « corriger ». */
  --indigo:#2596be;
  --indigo-dk:#17708f;
  --indigo-lt:#dcedf6;
  --indigo-dim:rgba(37,150,190,.12);

  /* Compagnes de palette (venues du CSE, pour les accents) */
  --violet:#6d63f0;
  --violet-dk:#4b40d6;
  --coral:#ff7a66;
  --amber:#f5a623;
  --green:#16a34a;
  --green-dk:#0d8a3d;
  --green-lt:#e7f4ec;

  /* Accent gains : VERT. --orange est le nom historique (l'orange
     d'origine a changé de couleur avant nous) — les pages y tiennent. */
  --orange:#16a34a;
  --orange-lt:#e7f4ec;
  --orange-dim:rgba(22,163,74,.12);

  /* Texte : les 3 noms TrajetPrim' + l'alias --txt que certaines
     pages consomment sans qu'il ait jamais été défini (réparé ici). */
  --txt-h:var(--ink);
  --txt-body:#333b5c;
  --txt-muted:var(--ink-soft);
  --txt:var(--txt-body);

  /* États (texte foncé sur fond pastel : contraste tenu) */
  --success:#15803d;   --success-bg:#e7f4ec;
  --error:#c2372a;     --error-bg:#fdefec;
  --info:#0369a1;      --info-bg:#e9f4fb;
  --warning:#9a5b1d;   --warning-bg:#fdf3e4;

  /* --- La matière Soft Depth v3 --- */
  --glass:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.75);
  --glass-blur:18px;
  --card:rgba(255,255,255,.78);   /* un cran plus transparent que le CSE (.84) :
                                     le fond d'ici est plus pâle, le verre doit se voir */
  --menu:rgba(255,255,255,.97);   /* menus déroulés : quasi opaques, lisibles */

  /* Ombres : le liseré de lumière --rim et la tranche --rim-bas sont
     INTÉGRÉS à l'ombre — toute carte porte le reflet de bord sans le
     répéter classe par classe. --sh-dark/--sh-light : noms historiques
     des pages, recalés sur les valeurs froides du CSE. */
  --sh-lo:rgba(244,250,255,.55);
  --sh-hi:rgba(38,55,90,.16);
  --sh-dark:rgba(38,55,90,.16);
  --sh-light:rgba(244,250,255,.75);
  --rim:rgba(255,255,255,.95);
  --rim-bas:rgba(70,92,140,.14);
  --sheen:rgba(255,255,255,.46);
  --shadow: -8px -8px 18px var(--sh-lo), 10px 13px 30px var(--sh-hi), inset 0 1.5px 0 var(--rim), inset 0 -1.5px 0 var(--rim-bas);
  --shadow-in: inset 3px 3px 8px var(--sh-hi), inset -3px -3px 8px var(--sh-lo);
  --shadow-hover: -10px -10px 22px var(--sh-lo), 16px 22px 44px var(--sh-hi), inset 0 1.5px 0 var(--rim), inset 0 -1.5px 0 var(--rim-bas);

  /* Rayons (échelle historique, recalée sur la générosité du CSE) */
  --r-xs:8px;
  --r-sm:14px;
  --r-md:22px;
  --r-lg:30px;
  --radius:var(--r-md);
  --radius-lg:var(--r-lg);

  /* ⚠️ --ease porte DURÉE + COURBE : les pages écrivent
     « transition: all var(--ease) ». Une courbe seule = durée 0. */
  --easing:cubic-bezier(.22,.61,.36,1);
  --ease:.22s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   THÈME NUIT — transposé du site CSE (mêmes valeurs, noms d'ici).
   Une règle : les variables portent TOUT le thème. Si un composant
   a besoin d'une exception, elle vit dans le bloc « exceptions
   nuit » plus bas, jamais dans le composant lui-même.
   ============================================================ */
[data-theme="night"]{
  --bg:#0e1326;
  --bg-2:#0a0f1f;
  --ink:#eef1fb;
  --ink-soft:#9aa6cf;

  /* La marque s'éclaircit pour rester lisible en TEXTE sur fond
     sombre (teal nuit du CSE). ⚠️ Les composants qui posent du texte
     BLANC sur un dégradé de marque gardent les teintes du jour via
     les exceptions nuit : --indigo-dk sert aux deux rôles, il ne
     peut pas être clair et foncé à la fois. */
  --indigo:#43c4e6;
  --indigo-dk:#7fe3ff;
  --indigo-lt:rgba(67,196,230,.16);
  --indigo-dim:rgba(67,196,230,.14);

  --violet:#9b91ff;
  --violet-dk:#b7aeff;
  --coral:#ff9d8c;
  --amber:#ffc266;
  --green:#4ade80;
  --green-dk:#8ceeb1;
  --green-lt:rgba(34,197,94,.15);

  --orange:#4ade80;
  --orange-lt:rgba(34,197,94,.15);
  --orange-dim:rgba(34,197,94,.15);

  --txt-body:#c6d0ec;

  /* États : texte CLAIR sur teinte sombre translucide (l'inverse du
     jour). Les fonds translucides restent calculables : ils se posent
     toujours sur --card, elle-même posée sur --bg. */
  --success:#8ceeb1;   --success-bg:rgba(34,197,94,.16);
  --error:#ffb3a8;     --error-bg:rgba(255,122,102,.14);
  --info:#8fd8ff;      --info-bg:rgba(56,189,248,.14);
  --warning:#ffd79a;   --warning-bg:rgba(255,194,102,.14);

  --glass:rgba(30,40,70,.5);
  --glass-brd:rgba(150,170,220,.18);
  --glass-blur:20px;
  --card:rgba(28,38,68,.68);
  --menu:rgba(18,25,48,.97);

  --sh-lo:rgba(90,110,170,.14);
  --sh-hi:rgba(0,0,0,.55);
  --sh-dark:rgba(0,0,0,.55);
  --sh-light:rgba(90,110,170,.14);
  --rim:rgba(170,200,255,.28);
  --rim-bas:rgba(4,9,22,.42);
  --sheen:rgba(210,230,255,.09);
  --shadow: -6px -6px 16px var(--sh-lo), 10px 14px 30px var(--sh-hi), inset 0 1.5px 0 var(--rim), inset 0 -1.5px 0 var(--rim-bas);
  --shadow-in: inset 3px 3px 9px var(--sh-hi), inset -3px -3px 9px var(--sh-lo);
  --shadow-hover: -8px -8px 20px var(--sh-lo), 16px 22px 46px var(--sh-hi), inset 0 1.5px 0 var(--rim), inset 0 -1.5px 0 var(--rim-bas);
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
/* La TOILE DU NAVIGATEUR (ce qu'on voit entre deux pages, en tirant au-delà
   du bas) : sans « color-scheme », elle reste BLANCHE même en nuit — c'est le
   flash blanc au changement de page (leçon du site CSE). base.html pose la
   même chose en style inline dès le <head> pour tenir la fenêtre d'avant ce
   fichier ; le script de thème efface l'inline et rend la main à ces règles. */
:root[data-theme="night"]{color-scheme:dark}
:root:not([data-theme="night"]){color-scheme:light}
html{scroll-behavior:smooth}
/* ⚠️ PAS de display:flex sur body : combiné à overflow-x:hidden il peut
   casser position:sticky selon les configurations (constat Vincent 24/07,
   barres qui ne suivaient plus le scroll chez lui). Recette du site CSE :
   body en flux normal, le pied de page se cale par le min-height du layout. */
body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--txt-body);
  background:radial-gradient(circle at 50% -10%, var(--bg-2), var(--bg) 55%);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* ⚠️ PAS de transition de fond ici (ligne retirée le 27/07). Elle promettait
     un fondu jour/nuit qui n'a JAMAIS existé : Chrome ne crée aucune transition
     pour « background-image ». Mesuré au banc, en déclenchant la bascule puis
     en demandant la liste des animations réellement en cours : color,
     background-color, box-shadow, outline-color, scrollbar-color... et pas un
     seul background-image. Le fond a toujours changé d'un seul coup.
     Un vrai fondu demanderait deux calques et une transition d'OPACITÉ. */
}
h1,h2,h3{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.02em;color:var(--txt-h)}
a{color:inherit}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:8px}

/* ---------- FINITIONS TRANSVERSES (l'effet fini) ---------- */
/* la sélection de texte aux couleurs de la maison */
::selection{background:color-mix(in srgb,var(--indigo) 24%,transparent)}
/* l'ascenseur discret, arrondi, aux gris de la palette */
html{scrollbar-color:color-mix(in srgb,var(--ink-soft) 42%,transparent) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-soft) 38%,transparent);
  border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-soft) 58%,transparent);
  border:3px solid transparent;background-clip:content-box}

/* lien d'évitement (accessibilité, comme le site CSE) */
.skip{position:absolute;left:-9999px;top:12px;z-index:2000;background:var(--menu);color:var(--txt-h);
  font-weight:800;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow)}
.skip:focus{left:12px}

/* les messages flash entrent en douceur (jamais si animations réduites) */
@media (prefers-reduced-motion:no-preference){
  .flash{animation:flash-entre .45s cubic-bezier(.22,.61,.36,1) both}
  @keyframes flash-entre{from{opacity:0;transform:translateY(-8px)}}
}

/* ---------- LE FOND : un ciel FIXE, sans aucune animation ----------
   Transposition immobile du ciel CSE : nappe azur en haut, lueur ambrée
   du matin à droite, assise violette au bas. position:fixed — un ciel
   ne défile pas avec la page. Des dégradés peints une fois : zéro coût. */
.fond{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    /* le halo de présence derrière le haut de page : teal + violet,
       FIXES — la lumière des aurores du CSE, sans leur mouvement */
    radial-gradient(34% 26% at 26% 2%, rgba(37,150,190,.20), transparent 70%),
    radial-gradient(28% 22% at 52% 0%, rgba(109,99,240,.14), transparent 72%),
    radial-gradient(58% 46% at 16% -8%, rgba(120,190,235,.36), transparent 68%),
    radial-gradient(44% 38% at 88% -6%, rgba(255,206,150,.22), transparent 70%),
    radial-gradient(72% 52% at 50% 110%, rgba(109,99,240,.12), transparent 72%);
  /* ⚠️ Pas de transition ici non plus, même raison que sur le body : elle ne
     produisait rien du tout. Et quand bien même Chrome fondrait les dégradés,
     ce ciel en a 5 le jour contre 13 la nuit ; deux listes de longueurs
     différentes ne s'interpolent pas. */
}
/* La nuit : clair de lune en haut à droite, lueurs teal/violet assagies, et
   une poignée d'étoiles FIXES (des points de dégradé, zéro animation — les
   leçons perf mobile du CSE restent la règle ici). */
[data-theme="night"] .fond{
  background:
    radial-gradient(1.4px 1.4px at 12% 9%,  rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.1px 1.1px at 31% 17%, rgba(255,255,255,.5),  transparent 100%),
    radial-gradient(1.6px 1.6px at 47% 6%,  rgba(255,255,255,.7),  transparent 100%),
    radial-gradient(1px   1px   at 63% 21%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(1.3px 1.3px at 71% 11%, rgba(255,255,255,.6),  transparent 100%),
    radial-gradient(1px   1px   at 88% 24%, rgba(255,255,255,.38), transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 7%,  rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1.1px 1.1px at 22% 30%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 33%, rgba(255,255,255,.3),  transparent 100%),
    /* le clair de lune, puis les lueurs de la maison */
    radial-gradient(30% 24% at 82% -4%, rgba(210,230,255,.16), transparent 70%),
    radial-gradient(34% 26% at 26% 2%,  rgba(67,196,230,.16),  transparent 70%),
    radial-gradient(28% 22% at 52% 0%,  rgba(155,145,255,.14), transparent 72%),
    radial-gradient(72% 52% at 50% 110%, rgba(155,145,255,.12), transparent 72%);
}

/* ---------- LA MATIÈRE : verre et relief ----------
   .neu / .neu-lg : les cartes. Fond translucide (la lumière du ciel passe
   au travers), liseré via var(--shadow), reflet rasant en ::before —
   court (34 %) pour ne jamais délaver le texte. */
.neu,.neu-lg{
  position:relative;
  background:var(--card);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.neu{border-radius:var(--r-md)}
.neu-lg{border-radius:var(--r-lg)}
.neu::before,.neu-lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,var(--sheen),transparent 34%);
}
.neu-inset{
  background:var(--bg);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-in);
}

/* ---------- HEADER : la barre FLOTTANTE du CSE ----------
   Détachée des bords, arrondie, en verre : c'est la signature du site.
   La grille intérieure (logo · titre · nav) ne change pas. */
.topbar{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:20px;
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:0 10px 30px rgba(20,30,60,.10);
  padding:0 1.1rem;
  height:68px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:sticky;
  top:14px;
  /* CENTRÉ : sur grand écran, barre et colonne se tiennent au milieu —
     tout collait à gauche avec un vide à droite (constat Vincent). */
  width:calc(100% - 28px);
  max-width:1380px;
  margin:14px auto 0;
  z-index:1100;
}
.topbar-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.topbar-app-name{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:1.05rem;font-weight:800;letter-spacing:-.02em;
  color:var(--indigo-dk);
  /* background-IMAGE, jamais « background: » : la forme courte
     réinitialise background-clip:text et le texte disparaît. */
  background-image:linear-gradient(120deg,var(--indigo),var(--violet));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.topbar-nav{justify-self:end}
.mobile-logout,.mobile-aide{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  color:var(--txt-muted);text-decoration:none;
  transition:all var(--ease);
}
.mobile-logout:hover{color:var(--error);background:var(--error-bg)}
.mobile-aide:hover{color:var(--indigo);background:var(--indigo-dim)}
.mobile-aide.active{color:var(--indigo)}
.mobile-logout svg,.mobile-aide svg{width:18px;height:18px}

.topbar-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}

/* ── LA MARQUE À L'ÉCRAN ───────────────────────────────────────────────────
   Le dessin de l'icône de l'écran d'accueil, détouré de sa tuile marine, posé
   comme le site CSE pose sa virgule (demande Vincent 24/07). Il remplace le
   logo complet : le nom n'y est plus dessiné, il est écrit à côté, une fois.

   DEUX fichiers, un par thème, et pas un seul : les teintes de l'icône sont
   calées sur le marine. La tuile retirée, le vert #4ade80 tombe à 1,54:1 sur
   le fond clair — invisible. Le jour porte donc le vert profond de la charte.
   Et le TRACÉ s'inverse d'un thème à l'autre : foncé sur le fond clair, clair
   sur le fond nuit, où un tracé sombre ferait 1,02:1.
   Les deux bouts du trajet ne se ressemblent pas : teal sur la goutte du
   fond, ORANGE sur celle du premier plan — le seul point d'arrivée du regard.
   L'œil des gouttes, lui, est un trou : il prend le fond de page, quel que
   soit le thème. marque_sources\scripts\marque_ecran.py refabrique tout, les
   teintes y sont des paramètres.

   Bascule en DISPLAY et non en opacity : les deux marques sont dans le flux,
   la transparente écarterait le nom d'une largeur de marque. */
/* Le LOGO COMPLET, celui de la production : le nom est dessiné dedans, donc
   l'image seule suffit et la barre reste étroite. La variante « marque
   détourée + nom écrit à côté » (règles .tp-marque, ci-dessus en commentaire)
   n'avait jamais été validée et n'était arrivée ici que par un `git add -u`
   malheureux : le nom en texte prenait 123 px et poussait le bouton jour/nuit
   hors de l'écran sur téléphone. Mesuré le 25/07 : 62 px de débordement à
   390 px, 0 une fois le nom retiré. La prod, elle, n'a jamais débordé
   (capture iPhone de Vincent, tout tient).
   Le macro, les deux images et le générateur restent dans le dépôt pour le
   jour où la marque à l'écran sera tranchée. */
.tp-logo-img{height:82px;width:auto;flex-shrink:0;transition:transform var(--ease)}
.topbar-logo:hover .tp-logo-img{transform:scale(1.04)}

.logo-text-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}
.logo-subtitle{font-size:.58rem;font-weight:700;color:var(--txt-muted);text-transform:uppercase;letter-spacing:.1em}
.logo-tagline{font-size:.58rem;font-weight:700;color:var(--indigo-dk);letter-spacing:.04em}

/* Chip points (gains) dans la topbar : verre teinté de vert */
.pts-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  background:color-mix(in srgb,var(--green) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  color:var(--success);
  padding:.45rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:800;text-decoration:none;
  transition:all var(--ease);white-space:nowrap;
}
.pts-chip:hover{background:var(--green);color:#fff;transform:translateY(-1px)}
.pts-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}

.topbar-nav{display:flex;align-items:center;gap:.25rem}

.nav-link{
  text-decoration:none;color:var(--txt-muted);font-size:.85rem;
  font-weight:700;padding:.45rem .8rem;border-radius:11px;
  transition:all var(--ease);white-space:nowrap;
}
.nav-link:hover{color:var(--txt-h);background:rgba(127,150,200,.14)}
.nav-link.active{color:var(--txt-h);background:rgba(127,150,200,.18)}

.nav-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;font-weight:800;padding:.4rem .85rem;
  border-radius:999px;text-decoration:none;transition:all var(--ease);
}
.nav-pill-admin{
  background:color-mix(in srgb,var(--amber) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  color:var(--warning);
}
.nav-pill-admin:hover{transform:translateY(-1px)}

.nav-user{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;color:var(--txt-muted);font-weight:600;
  text-decoration:none;cursor:pointer;
}
.nav-user-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--violet));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:800;
  box-shadow:0 8px 18px color-mix(in srgb,var(--indigo) 35%,transparent);
  transition:transform var(--ease),box-shadow var(--ease);
}
.nav-user:hover .nav-user-avatar{transform:translateY(-1px);
  box-shadow:0 12px 24px color-mix(in srgb,var(--indigo) 45%,transparent)}

.tel-rappel{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--card);border:1px solid var(--glass-brd);
  border-left:5px solid var(--indigo);
  border-radius:var(--r-sm);box-shadow:var(--shadow);
  padding:.7rem 1rem;margin-bottom:1.25rem;font-size:.85rem;font-weight:600;color:var(--txt-body)}
.tel-rappel:hover{box-shadow:var(--shadow-hover)}
/* Le lien porte désormais tout le contenu : la bande est devenue un
   conteneur, pour pouvoir loger le « Plus tard » à côté (un bouton dans un
   lien, c'est du HTML invalide, et le clic partirait sur le lien). */
.tel-rappel-lien{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;
  text-decoration:none;color:inherit}
.tel-rappel-ic{font-size:1.1rem;flex-shrink:0}
.tel-rappel-txt{flex:1;min-width:0}
.tel-rappel-cta{font-weight:800;white-space:nowrap;flex-shrink:0;color:var(--indigo-dk)}
/* Une croix plutôt que les mots « Plus tard » : la bande est fine, et à
   390 px le texte du rappel occupe déjà deux lignes. Même comportement que
   les autres reports (7 jours de silence, abandon après 3). */
.tel-rappel-plus-tard{flex-shrink:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:1.15rem;line-height:1;color:var(--txt-muted);
  width:30px;height:30px;border-radius:9px;transition:all var(--ease)}
.tel-rappel-plus-tard:hover{background:var(--indigo-dim);color:var(--txt-body)}

/* ---------- SIDEBAR (desktop) : un panneau de verre flottant ---------- */
.layout{display:flex;min-height:calc(100vh - 82px);padding:20px 14px 0;gap:20px;
  max-width:1380px;margin:0 auto;width:100%}

.sidebar{
  width:230px;flex-shrink:0;
  padding:1.1rem .9rem;
  display:flex;flex-direction:column;gap:.25rem;
  background:var(--card);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  align-self:flex-start;
  position:sticky;top:96px;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
}
.sidebar-section{
  font-size:.65rem;font-weight:800;color:var(--txt-muted);
  text-transform:uppercase;letter-spacing:.1em;
  padding:.75rem .5rem .25rem;
}
.sidebar-link{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--txt-muted);
  font-size:.85rem;font-weight:600;
  padding:.55rem .75rem;border-radius:11px;
  transition:all var(--ease);
}
.sidebar-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.sidebar-link:hover{color:var(--txt-h);background:rgba(127,150,200,.14);transform:translateX(2px)}
.sidebar-link.active{
  color:#fff;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-dk));
  font-weight:800;
  box-shadow:0 10px 20px -6px color-mix(in srgb,var(--indigo) 55%,transparent),
    inset 0 1.5px 0 rgba(255,255,255,.3);
}
/* ---------- CONTENU ---------- */
.content{flex:1;padding:.5rem .5rem 2rem;max-width:1100px;min-width:0}

/* ---------- BOTTOM NAV (mobile) : la pilule flottante ----------
   Même langage que la barre du haut : détachée des bords, arrondie,
   en verre. Le bouton + déborde au-dessus, comme avant. */
.bottom-nav{
  display:none;
  position:fixed;left:10px;right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:24px;
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:0 18px 44px rgba(20,30,60,.22);
  padding:.4rem 0 .45rem;
  z-index:300;
}
.bottom-nav-items{display:flex;justify-content:space-around}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  text-decoration:none;color:var(--txt-muted);
  font-size:.65rem;font-weight:700;padding:.35rem .5rem;
  border-radius:var(--r-xs);transition:all var(--ease);min-width:56px;
}
.bottom-nav-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.bottom-nav-item.active{color:var(--indigo-dk)}
.bottom-nav-plus{width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-dk));border:none;
  display:flex;align-items:center;justify-content:center;margin-top:-22px;flex-shrink:0;cursor:pointer;
  box-shadow:0 10px 24px color-mix(in srgb,var(--indigo) 42%,transparent),inset 0 1.5px 0 rgba(255,255,255,.35)}
.bottom-nav-plus svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.6}
.nav-plus-menu{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:320;
  transform:translateX(-50%) translateY(10px);
  background:var(--menu);border:1px solid var(--glass-brd);border-radius:var(--r-sm);padding:.5rem;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 18px 44px rgba(20,30,60,.22);display:flex;flex-direction:column;gap:.25rem;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s}
.nav-plus-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-plus-item{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:var(--r-xs);
  font-size:.92rem;font-weight:700;color:var(--txt-h);text-decoration:none;white-space:nowrap}
.nav-plus-item:hover{background:var(--indigo-dim)}
.nav-plus-item svg{width:18px;height:18px;stroke:var(--indigo);fill:none;stroke-width:2}

/* ---------- MESSAGES FLASH ---------- */
.flashes{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.flash{
  display:flex;align-items:center;gap:.65rem;
  padding:.8rem 1rem;border-radius:var(--r-sm);
  background:var(--card);border:1px solid var(--glass-brd);
  border-left:5px solid var(--indigo);
  box-shadow:var(--shadow);
  font-size:.875rem;font-weight:700;color:var(--txt-body);
}
.flash-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--indigo)}
.flash.success{border-left-color:var(--green)}
.flash.success .flash-dot{background:var(--green)}
.flash.error{border-left-color:var(--coral)}
.flash.error .flash-dot{background:var(--coral)}
.flash.info{border-left-color:var(--amber)}
.flash.info .flash-dot{background:var(--amber)}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.7rem 1.3rem;border-radius:var(--r-sm);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.875rem;font-weight:700;cursor:pointer;
  text-decoration:none;border:none;
  transition:all .3s var(--easing);user-select:none;white-space:nowrap;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}

.btn-primary{
  background:linear-gradient(135deg,var(--indigo),var(--indigo-dk));
  color:#fff;
  box-shadow:0 10px 24px color-mix(in srgb,var(--indigo) 42%,transparent);
  position:relative;overflow:hidden;
}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px color-mix(in srgb,var(--indigo) 55%,transparent)}
/* la brillance réservée : un éclat qui traverse au survol */
.btn-primary::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .6s var(--easing)}
.btn-primary:hover::after,.btn-primary:focus-visible::after{left:140%}
.btn-primary:active{transform:translateY(0)}

.btn-secondary{
  background:var(--card);color:var(--indigo-dk);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}

.btn-danger{
  background:color-mix(in srgb,var(--coral) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);
  color:var(--error);
}
.btn-danger:hover{background:var(--error);color:#fff}

.btn-sm{padding:.45rem .9rem;font-size:.8rem}
.btn-full{width:100%}

/* Badge points dans la sidebar */
.sidebar-gains{justify-content:space-between}
.sidebar-pts-badge{
  font-size:.68rem;font-weight:800;
  background:color-mix(in srgb,var(--green) 14%,transparent);
  color:var(--success);
  padding:.1rem .45rem;border-radius:999px;margin-left:auto;
}
.sidebar-link.active .sidebar-pts-badge{background:rgba(255,255,255,.25);color:#fff}

/* ---------- FORMULAIRES ----------
   Le langage du CSE : le CREUX est réservé aux champs de saisie
   (ombre interne), le relief aux cartes. */
.form-group{margin-bottom:1.15rem}
.form-group label{
  display:block;font-size:.8rem;font-weight:800;
  color:var(--txt-muted);
  letter-spacing:.03em;margin-bottom:.4rem;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:.75rem 1rem;
  border:1px solid var(--glass-brd);
  border-radius:var(--r-sm);font-size:.9rem;
  color:var(--txt-h);font-family:inherit;font-weight:600;
  background:var(--bg);
  box-shadow:var(--shadow-in);
  outline:none;transition:outline-color var(--ease);
  -webkit-appearance:none;appearance:none;
}
.form-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer;
}
/* iOS : un champ de date VIDE n'affiche aucun texte, donc sa ligne n'a pas de
   hauteur et le champ s'affiche plus fin que ses voisins — puis il reprend la
   bonne taille dès qu'une date est choisie (constaté par Vincent sur « Jusqu'au »
   des trajets récurrents). Chromium ne le montre pas : il écrit jj/mm/aaaa.
   On impose donc la hauteur d'une ligne, calculée sur le même modèle que les
   autres champs : deux fois le padding, plus une ligne de texte, plus la
   bordure. En em/rem, donc ça suit l'agrandissement mobile de la racine. */
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"]{
  min-height:calc(1.5rem + 1.4em + 2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--ink-soft);opacity:.7}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:3px solid var(--indigo);outline-offset:2px;
}
/* iOS : les champs date décalent la valeur dans la cellule → on normalise.
   Et un datetime-local impose une largeur intrinsèque qui DÉBORDE de sa
   carte sur iPhone (photo Vincent 24/07) : on le bride. */
input[type="date"],input[type="time"],input[type="datetime-local"]{
  -webkit-appearance:none;appearance:none;max-width:100%;min-width:0}
input[type="date"]::-webkit-date-and-time-value{margin:0;text-align:left;line-height:1.3}
input[type="date"]::-webkit-calendar-picker-indicator{margin:0 0 0 auto;opacity:.55;cursor:pointer}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-divider{height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-brd) 30%,var(--glass-brd) 70%,transparent);
  margin:1.25rem 0;
}
.form-hint{font-size:.75rem;color:var(--txt-muted);margin-top:.3rem}
.checkbox-group{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--glass-brd);background:var(--bg);
  box-shadow:var(--shadow-in);
}
.checkbox-group input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--indigo)}
.checkbox-group label{font-size:.875rem;font-weight:600;color:var(--txt-body);cursor:pointer;margin:0;text-transform:none;letter-spacing:0}

/* ---------- TOGGLE UNIVERSEL ---------- */
label.app-toggle{
  display:flex !important;align-items:center !important;gap:.75rem !important;
  cursor:pointer;padding:.65rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--glass-brd) !important;background:var(--bg) !important;
  box-shadow:var(--shadow-in);
  text-transform:none !important;letter-spacing:normal !important;
  font-size:.88rem !important;font-weight:600 !important;
  color:var(--txt-body) !important;margin-bottom:0 !important;
  transition:border-color var(--ease),background var(--ease);
  width:100%;box-sizing:border-box;
}
label.app-toggle:hover{border-color:var(--indigo) !important}
label.app-toggle input[type=checkbox]{display:none !important}
.app-toggle-slider{
  width:40px;height:22px;border-radius:999px;flex-shrink:0;
  background:color-mix(in srgb,var(--ink-soft) 32%,transparent);
  position:relative;transition:background .22s;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.12);
}
.app-toggle-slider::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  background:#fff;top:3px;left:3px;
  transition:transform .22s;box-shadow:1px 1px 4px rgba(0,0,0,.2);
}
label.app-toggle input:checked + .app-toggle-slider{background:var(--indigo)}
label.app-toggle input:checked + .app-toggle-slider::after{transform:translateX(18px)}

/* ---------- PR PICKER (sélecteur point de rassemblement) ---------- */
.pr-picker-wrap{display:flex;flex-direction:column;gap:.5rem}
.pr-search-outer{position:relative}
.pr-badge-wrap{margin-top:.3rem}
.pr-type-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:800;padding:.2rem .55rem;
  border-radius:999px;
}
.pr-type-metro{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--violet)}
.pr-type-tram{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--success)}
.pr-type-gare{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--warning)}
.pr-type-autre{background:color-mix(in srgb,var(--ink-soft) 14%,transparent);color:var(--txt-muted)}

.pr-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:200;
  background:var(--menu);border:1px solid var(--glass-brd);border-radius:var(--r-sm);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 18px 44px rgba(20,30,60,.22);
  max-height:280px;overflow-y:auto;
}
.pr-group-header{
  padding:.45rem .85rem .3rem;
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--txt-muted);
  border-bottom:1px solid var(--glass-brd);position:sticky;top:0;
  background:var(--menu);
}
.pr-option{display:flex;flex-direction:column;padding:.5rem .85rem;cursor:pointer;transition:background .12s}
.pr-option:hover{background:var(--indigo-dim)}
.pr-opt-nom{font-size:.86rem;font-weight:700;color:var(--txt-h)}
.pr-opt-desc{font-size:.72rem;color:var(--txt-muted);margin-top:.1rem}

.pr-select-details{margin-top:.25rem}
.pr-select-summary{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;
  font-size:.78rem;color:var(--txt-muted);font-weight:700;
  padding:.3rem .1rem;list-style:none;
}
.pr-select-summary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0;transition:transform .2s}
details[open] .pr-select-summary svg{transform:rotate(180deg)}
.lieu-libre-toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.4rem;padding:.3rem .6rem;
  font-size:.78rem;font-weight:700;color:var(--txt-muted);
  background:none;border:1px dashed color-mix(in srgb,var(--ink-soft) 45%,transparent);
  border-radius:var(--r-xs);cursor:pointer;
  transition:all var(--ease);
}
.lieu-libre-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.lieu-libre-toggle:hover{color:var(--indigo);border-color:var(--indigo)}
.lieu-libre-toggle.active{color:var(--indigo-dk);background:var(--indigo-lt);border-color:var(--indigo);border-style:solid}

.pr-select-native{
  width:100%;margin-top:.4rem;
  border-radius:var(--r-xs);
  box-shadow:var(--shadow-in);
  font-size:.84rem;max-height:180px;
}

/* ---------- CARTES ---------- */
.card{padding:1.5rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.card-title{display:flex;align-items:center;gap:.6rem}
.card-title h2{font-size:1.05rem;font-weight:800;color:var(--txt-h);letter-spacing:-.01em}

/* Le « verre lumineux » du CSE : la pastille d'icône est une tuile de
   verre teintée de sa famille, glyphe en trait dégradé (defs gn-* dans
   base.html, repli couleur unie) + halo. Mix sur TRANSPARENT, pas sur
   --card : la tuile laisse voir la lumière derrière elle. */
.card-icon{
  position:relative;width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--glow,var(--indigo));
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--glow,var(--indigo)) 26%,transparent),
    color-mix(in srgb,var(--glow,var(--indigo)) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--glow,var(--indigo)) 55%,transparent);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),
    0 10px 20px -8px color-mix(in srgb,var(--glow,var(--indigo)) 65%,transparent);
}
.card-icon::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 82% at 28% 10%,rgba(255,255,255,.32),rgba(255,255,255,0) 55%)}
.card-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--glow,var(--indigo)) 70%,transparent))}
.card-icon.indigo{--glow:var(--indigo)}
.card-icon.indigo svg{stroke:url(#gn-t) var(--indigo)}
.card-icon.green{--glow:var(--green)}
.card-icon.green svg{stroke:url(#gn-g) var(--green)}
.card-icon.red{--glow:var(--coral)}
.card-icon.red svg{stroke:url(#gn-c) var(--coral)}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--indigo-dim);color:var(--indigo-dk);
  font-size:.72rem;font-weight:800;
  padding:.15rem .55rem;border-radius:999px;min-width:24px;
}
.badge-success{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--success)}
.badge-error{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--error)}

/* ---------- DIRECTION TAG ---------- */
.dir-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:800;padding:.2rem .55rem;
  border-radius:999px;text-transform:uppercase;letter-spacing:.06em;
}
.dir-aller{background:color-mix(in srgb,var(--indigo) 14%,transparent);color:var(--indigo-dk)}
.dir-retour{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--success)}

/* ---------- TABLES (génériques, pour la passe page par page) ---------- */
.table-wrap{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse;font-size:.9rem}
.liste th{text-align:left;padding:10px 12px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-muted);border-bottom:1px solid var(--glass-brd)}
.liste td{padding:11px 12px;border-bottom:1px solid var(--glass-brd);font-weight:600;color:var(--txt-h);vertical-align:middle}
.liste tr:last-child td{border-bottom:none}

/* ---------- ÉTAT VIDE ---------- */
.empty-state{text-align:center;padding:3rem 1rem}
.empty-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.6}
.empty-title{font-size:.95rem;font-weight:800;color:var(--txt-h);margin-bottom:.3rem;font-family:'Manrope',sans-serif}
.empty-sub{font-size:.85rem;color:var(--txt-muted)}

/* ---------- FOOTER ---------- */
footer{
  text-align:center;padding:1.5rem;
  color:var(--txt-muted);font-size:.75rem;font-weight:600;
  border-top:1px solid var(--glass-brd);
  margin-top:auto;
}

/* ---------- LA VOIX DES CARTES ----------
   Beaucoup de cartes titrent avec des div : ces classes leur donnent la
   voix des titres (Manrope) et une sous-ligne d'explication, comme les
   cartes du site CSE (un titre + la phrase qui explique). */
.t-carte{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.02rem;color:var(--txt-h);letter-spacing:-.01em;line-height:1.25}
.st-carte{font-size:.8rem;font-weight:600;color:var(--txt-muted);line-height:1.45}
.t-section{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.05rem;color:var(--txt-h);letter-spacing:-.01em}
.nombre{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- LES TITRES : encre + mot d'accent en dégradé ----------
   Le motif du site CSE (« Ton CSE, » en encre, « à ton service. » en
   dégradé) : le titre parle ENCRE, seul le mot d'accent porte le
   dégradé via un <span class="grad"> — jamais le titre entier
   (correction Vincent 24/07). La taille suit la hiérarchie de l'info :
   les blocs locaux ne redisent plus font-size ni couleur. */
.page-title{
  font-size:clamp(1.65rem,2.4vw,2.05rem);
  color:var(--txt-h);
  line-height:1.12;
}
/* ⚠️ background-IMAGE, jamais « background: » : la forme courte
   réinitialise background-clip:text et le texte disparaît. */
.grad{
  background-image:linear-gradient(118deg,var(--indigo),var(--violet) 58%,var(--coral) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;
  animation:derive-grad 9s ease-in-out infinite alternate;
}
@keyframes derive-grad{to{background-position:100% 50%}}
/* Téléphone : le corail (au bout du dégradé) tomberait hors champ —
   on le rapproche et on dézoome (leçon CSE). */
@media (max-width:640px){
  .grad{
    background-image:linear-gradient(118deg,var(--indigo),var(--violet) 45%,var(--coral) 85%);
    background-size:130% auto;
  }
}

/* ---------- LE SURVOL QUI SOULÈVE (cartes cliquables seulement) ----------
   Une carte de FORMULAIRE ne bouge pas : le relief au survol est le
   langage de ce qui se clique. */
@media (hover:hover){
  a.neu,a.neu-lg,.neu[onclick],.neu-lg[onclick]{
    transition:transform .35s var(--easing),box-shadow .35s var(--easing);
  }
  a.neu:hover,a.neu-lg:hover,.neu[onclick]:hover,.neu-lg[onclick]:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
  }
}

/* ---------- LE LISERÉ VIVANT (carte vedette, transposé du site CSE) ----------
   Un anneau conique qui TOURNE autour de la carte : masque = seul le bord
   de 2 px est peint, le texte ne bouge JAMAIS. Couleurs par --lis1/2/3
   (teal/violet/corail par défaut). S'éteint si animations réduites. */
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.vedette{position:relative}
.vedette::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:2px;pointer-events:none;
  background:conic-gradient(from var(--angle),
    transparent 0%,
    color-mix(in srgb,var(--lis1,var(--indigo)) 90%,transparent) 12%,
    color-mix(in srgb,var(--lis2,var(--violet)) 85%,transparent) 30%,
    transparent 46%,
    color-mix(in srgb,var(--lis3,var(--coral)) 75%,transparent) 62%,
    transparent 78%,
    color-mix(in srgb,var(--lis1,var(--indigo)) 90%,transparent) 92%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:ronde 9s linear infinite}
@keyframes ronde{to{--angle:360deg}}
@media (prefers-reduced-motion:reduce){.vedette::after{animation:none}}

/* ---------- REVEAL AU SCROLL (posé par le petit script de base.html) ---------- */
.rv{opacity:0;transform:translateY(26px);transition:.7s var(--easing)}
.rv.in{opacity:1;transform:none}

/* ---------- TRANSITIONS ENTRE PAGES (navigateurs compatibles) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-sortie .16s ease both}
  ::view-transition-new(root){animation:vt-entree .28s ease both}
}
@keyframes vt-sortie{to{opacity:0;transform:translateY(8px)}}
@keyframes vt-entree{from{opacity:0;transform:translateY(-8px)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px){
  /* VERRE ALLÉGÉ sur petits écrans (18/20 → 12px), transposé du site CSE.
     Deux effets, tous deux voulus : le verre laisse davantage voir à travers
     (constat de Vincent, la barre paraissait plus laiteuse qu'au CSE), et
     surtout chaque surface de verre re-échantillonne son arrière-plan à
     CHAQUE frame de défilement — c'est le coût du scroll, et il pèse d'autant
     plus depuis que la barre du haut reste collée à l'écran.
     ⚠️ Déclaré ICI, après le bloc [data-theme="night"] : à spécificité égale
     c'est la dernière règle qui gagne, donc les 20px de la nuit tombent aussi. */
  :root{--glass-blur:12px}

  /* ---- LISIBILITÉ TÉLÉPHONE (audit 24/07 : 50 % des textes sous 13 px,
     photos iPhone de Vincent à l'appui) ----
     1) La RACINE grandit : tout ce qui est en rem monte de ~9 % d'un coup
        (le corps de l'aide passe de 13,3 à 14,5 px). */
  html{font-size:17.5px}

  .sidebar{display:none}
  .layout{padding:12px 10px 0;gap:0;min-height:calc(100vh - 66px)}
  .content{padding:.25rem .4rem 6.5rem;max-width:100%}
  .bottom-nav{display:block}
  footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .form-row{grid-template-columns:1fr}

  .mobile-logout,.mobile-aide{display:flex}

  /* 2) La barre du haut DÉFILE avec la page sur téléphone : collée en
     sticky flottant, le contenu saignait dans ses interstices et elle
     s'empilait avec les barres de Safari (photos Vincent). La navigation
     vit dans la pilule du bas ; l'identité n'a pas besoin de coller. */
  /* La barre FLOTTE aussi sur téléphone (choix Vincent 24/07), comme
     « header.nav » du site CSE. Elle avait été figée en static le même jour :
     des deux constats d'origine, celui des barres de Safari empilées ne vaut
     plus dans l'app posée sur l'écran d'accueil (usage réel), et l'interstice
     de 8 px reste assumé. Retour arrière = remettre position:static ici. */
  .topbar{position:sticky;top:8px;padding:0 .6rem;height:56px;grid-template-columns:auto 1fr auto;
    margin:8px auto 0;width:calc(100% - 16px);border-radius:17px}

  /* 3) PLANCHERS de taille pour les petits textes récurrents.
     « vers le site » mérite d'être VU (Vincent, photo iPhone) :
     plus grand ET en encre de corps, plus en gris effacé. */
  .bottom-nav-item{font-size:.7rem}
  .st-carte{font-size:.84rem}
  .liste-sub{font-size:.86rem;color:var(--txt-body);font-weight:700}
  .badge{font-size:.75rem}
  .pts-chip{font-size:.75rem}

  /* 4) Le régime des mots : ce qui est marqué .det (précisions entre
     parenthèses, compléments) s'efface sur téléphone. */
  .det{display:none}
  .topbar-center{display:none}
  /* Le logo rétrécit ; le nom reste dessiné dedans, rien à ajouter à côté. */
  .tp-logo-img{height:52px}
  .topbar-nav{display:flex;align-items:center;gap:.4rem}
  .topbar-nav .nav-link{display:none}
  .pts-chip{font-size:.72rem;padding:.22rem .55rem}
  .nav-user span.nav-link{display:none}
}
@media (min-width:769px){
  .bottom-nav{display:none !important}
}

/* ---------- ANIMATIONS RÉDUITES ----------
   *::before/::after explicites : le sélecteur universel * ne cible PAS
   les pseudo-éléments (leçon du site CSE). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- LA BASCULE JOUR/NUIT SE FAIT D'UN SEUL BLOC ----------
   C'est LE correctif du clignotement constaté sur Android le 27/07.
   Le fond, lui, bascule instantanément (Chrome n'anime pas background-image).
   Mais tout le reste traîne derrière : le body fait glisser sa couleur sur
   .5 s, et chaque composant qui porte « transition: all var(--ease) » anime
   ensemble background-color, box-shadow, color, outline-color... 16 relevées
   rien que sur la page de connexion, bien davantage sur le tableau de bord.
   Avec le garde-fou, la même mesure en compte 0.
   Or ces surfaces sont du VERRE : pendant ces .3 à .5 s, chacune force son
   backdrop-filter à re-flouter le fond à CHAQUE image. C'est ce déluge de
   repeints qui clignote sur téléphone.
   base.html pose data-bascule juste avant de changer data-theme et le retire
   à l'image suivante : rien n'anime, un seul repeint, la bascule est nette.
   ⚠️ animation:none serait une FAUSSE bonne idée ici : ça relancerait les
   boucles infinies (liseré tournant de .vedette) et ferait sauter le décor. */
:root[data-bascule] *,
:root[data-bascule] *::before,
:root[data-bascule] *::after{
  transition:none!important;
}

/* ============================================================
   NUIT — EXCEPTIONS DE COMPOSANTS
   Tout ce qui ne peut pas suivre les variables seules. Chaque
   règle dit pourquoi elle existe.
   ============================================================ */

/* Texte BLANC sur dégradé de marque : la nuit, --indigo/--indigo-dk
   s'éclaircissent pour servir de texte — un dégradé clair sous du blanc
   deviendrait illisible. Ces composants gardent les teintes du JOUR :
   sur fond sombre, elles restent exactement aussi lisibles qu'en jour. */
[data-theme="night"] .btn-primary,
[data-theme="night"] .bottom-nav-plus,
[data-theme="night"] .sidebar-link.active{
  background:linear-gradient(135deg,#2596be,#17708f);
}
[data-theme="night"] .nav-user-avatar{
  background:linear-gradient(145deg,#2596be,#6d63f0);
}
[data-theme="night"] .btn-primary{
  box-shadow:0 10px 24px rgba(37,150,190,.35);
}
[data-theme="night"] .pts-chip:hover{background:#16a34a}

/* Même règle pour les composants que les PAGES dessinent dans leurs styles
   embarqués (avatars à initiales, icônes d'admin, cartes radio) : le dégradé
   de marque sous texte blanc garde les teintes du jour. Le !important de
   .admin-card-icon bat un style posé en attribut inline. */
[data-theme="night"] .mt-avatar,
[data-theme="night"] .tc-avatar{background:linear-gradient(135deg,#2596be,#6d63f0)}
[data-theme="night"] .compte-avatar{background:linear-gradient(145deg,#2596be,#17708f)}
[data-theme="night"] .user-avatar,
[data-theme="night"] .fiche-avatar,
[data-theme="night"] .ins-avatar,
[data-theme="night"] .icon-permanent,
[data-theme="night"] .radio-card input:checked + .radio-label{
  background:linear-gradient(135deg,#2596be,#17708f);
}
[data-theme="night"] .admin-card-icon{background:linear-gradient(135deg,#2596be,#17708f)!important}

/* Badge « toi » du classement (mes_gains) : --indigo sur teinte --indigo-lt
   mesuré à 4,36:1 en nuit — le teal clair repasse largement le seuil. */
[data-theme="night"] .rank-vous{color:var(--indigo-dk)}

/* Ombres portées écrites en dur (bleu-gris jour) : la nuit, une ombre
   claire ferait un halo — on repasse au noir profond. */
[data-theme="night"] .topbar{box-shadow:0 10px 30px rgba(0,0,0,.38)}
[data-theme="night"] .nav-plus-menu,
[data-theme="night"] .pr-dropdown{box-shadow:0 18px 44px rgba(0,0,0,.55)}

/* Le bouton jour/nuit — le « .toggle » du site CSE, transposé.
   Veilleuse colorée permanente : un repère discret, pas un phare. */
.theme-toggle{
  width:40px;height:40px;border-radius:13px;border:none;cursor:pointer;
  display:grid;place-items:center;flex:none;
  background:var(--card);color:var(--ink);
  box-shadow:var(--shadow),0 0 10px rgba(37,150,190,.38),0 0 20px rgba(109,99,240,.20);
  transition:all .3s var(--easing);
}
.theme-toggle:hover,.theme-toggle:focus-visible{
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover),0 0 16px rgba(37,150,190,.72),0 0 32px rgba(109,99,240,.45);
}
.theme-toggle svg{width:19px;height:19px}
@media (max-width:768px){
  .theme-toggle{width:36px;height:36px;border-radius:11px}
  .theme-toggle svg{width:17px;height:17px}
}

/* ============================================================
   MINI-VISITE du tableau de bord — la petite voiture (visite_tp.js)
   Poli au volant, Cospi à l'arrière. La voiture roule sur une route
   pointillée fixée au bas de l'écran ; le projecteur (spot) éclaire
   la carte dont elle parle. Sous la fête (3000), au-dessus du reste.
   ============================================================ */
.tpv{
  position:fixed;inset:0;z-index:2500;
  /* Teintes de la voiture, validées au banc du 25/07 */
  --tpv-c1:#2fa8d0;--tpv-c2:#17708f;
  --tpv-vitre:#e9f4fb;--tpv-vitre2:#bfe0f2;
  --tpv-pneu:#26324e;--tpv-jante:#f2f6fb;
  --tpv-trace-c:#7cc7e3;--tpv-phare:#ffd23f;--tpv-feu:#ff7a66;
  --tpv-poli:#f5b840;--tpv-cospi:#f0997b;--tpv-meche:#f472a0;
  --tpv-ombre:rgba(38,55,90,.18);
  --tpv-bulle:rgba(255,255,255,.97);--tpv-bulle-txt:#1e2640;
  --tpv-voile:rgba(14,19,38,.48);
  animation:tpv-entre .3s ease-out both;
}
[data-theme="night"] .tpv{
  --tpv-c1:#43c4e6;--tpv-c2:#1d84ab;
  --tpv-vitre:#10233c;--tpv-vitre2:#1b3a5c;
  --tpv-pneu:#232f4e;--tpv-jante:#dfe8fa;
  --tpv-trace-c:#3fa4c8;--tpv-phare:#ffd764;--tpv-feu:#ff9d8c;
  --tpv-poli:#ffc266;--tpv-cospi:#ff9d8c;--tpv-meche:#ff9dc6;
  --tpv-ombre:rgba(0,0,0,.5);
  --tpv-bulle:rgba(20,28,52,.97);--tpv-bulle-txt:#eef1fb;
  --tpv-voile:rgba(2,5,14,.6);
}
@keyframes tpv-entre{from{opacity:0}to{opacity:1}}
.tpv.bye{opacity:0;transition:opacity .24s ease}

/* Le projecteur : un trou de lumière, le voile est son ombre portée. */
.tpv-spot{
  position:fixed;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 200vmax var(--tpv-voile);
  transition:all .45s var(--easing);
}
.tpv-spot.on{box-shadow:0 0 0 200vmax var(--tpv-voile),
  0 0 0 2.5px color-mix(in srgb,var(--indigo) 75%,transparent),
  0 0 22px color-mix(in srgb,var(--indigo) 45%,transparent)}

/* La route : pointillés au bas de l'écran, au-dessus de la barre mobile. */
.tpv-route{
  position:fixed;left:0;right:0;bottom:30px;height:0;
  border-top:2.5px dashed color-mix(in srgb,var(--indigo) 45%,transparent);
  opacity:.55;
}
.tpv-scene{
  position:fixed;left:0;bottom:6px;width:150px;
  transform:translateX(-160px);
  transition:transform .85s cubic-bezier(.45,.05,.35,1);
}
.tpv-auto{display:block;width:100%;height:auto}

/* La bulle : rectangle arrondi, police BD, pointe indépendante qui reste
   au-dessus de la voiture quand la bulle se décale pour tenir à l'écran. */
.tpv-bulle{
  position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(calc(-50% + var(--decale,0px)));
  width:max-content;max-width:min(320px,calc(100vw - 20px));
  background:var(--tpv-bulle);color:var(--tpv-bulle-txt);
  border-radius:22px;padding:.8rem 1.05rem .65rem;
  box-shadow:0 14px 34px var(--tpv-ombre);
}
.tpv-pointe{
  position:absolute;bottom:calc(100% + 3px);left:64px;
  border:10px solid transparent;border-top:13px solid var(--tpv-bulle);
  border-bottom:0;border-right-width:4px;
}
.tpv-texte{
  margin:0 0 .45rem;text-align:center;
  font-family:'Comic Neue','Comic Sans MS',cursive;
  font-weight:700;font-size:.92rem;line-height:1.42;
}
.tpv-texte.in{animation:tpv-mot .3s ease-out both}
@keyframes tpv-mot{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.tpv-bas{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.tpv-pts{display:flex;gap:4px}
.tpv-pts i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--indigo) 22%,transparent)}
.tpv-pts i.on{background:var(--indigo)}
.tpv-btns{display:flex;gap:.45rem}
.tpv-btns button{
  border:none;cursor:pointer;font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem;font-weight:800;border-radius:999px;padding:.42rem .8rem;
  transition:transform .18s ease;
}
.tpv-btns button:active{transform:scale(.96)}
.tpv-passer{background:transparent;color:var(--txt-muted)}
.tpv-suivant{
  background:linear-gradient(135deg,#2596be,#17708f);color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--indigo) 40%,transparent);
}

/* Les animations de roulage : roues et trace ne tournent qu'en mouvement. */
.tpv .tpv-rayons{transform-box:fill-box;transform-origin:center;
  animation:tpv-roule 1.05s linear infinite paused}
.tpv .tpv-trace{stroke-dasharray:6 7;animation:tpv-file .9s linear infinite paused}
.tpv .tpv-caisse{animation:tpv-trotte 1.15s ease-in-out infinite}
.tpv.roule .tpv-rayons,.tpv.roule .tpv-trace{animation-play-state:running}
@keyframes tpv-roule{to{transform:rotate(360deg)}}
@keyframes tpv-file{to{stroke-dashoffset:13}}
@keyframes tpv-trotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}

@media (max-width:768px){
  .tpv-scene{width:118px;bottom:calc(96px + env(safe-area-inset-bottom))}
  .tpv-route{bottom:calc(116px + env(safe-area-inset-bottom))}
  .tpv-pointe{left:50px}
  .tpv-texte{font-size:.88rem}
}

/* Calme demandé (réglage Confort ou système) : tout s'arrête, tout est net. */
@media (prefers-reduced-motion:reduce){
  .tpv,.tpv-texte.in{animation:none}
  .tpv-scene,.tpv-spot{transition:none}
  .tpv .tpv-rayons,.tpv .tpv-trace,.tpv .tpv-caisse{animation:none}
}
html.a11y-calme .tpv,html.a11y-calme .tpv-texte.in{animation:none}
html.a11y-calme .tpv-scene,html.a11y-calme .tpv-spot{transition:none}
html.a11y-calme .tpv .tpv-rayons,html.a11y-calme .tpv .tpv-trace,html.a11y-calme .tpv .tpv-caisse{animation:none}