/* ═══════════ Appli des licenciés — THÈME COMMUN (lot G, 09/10/2026) ═══════════
   Chargé le premier des feuilles styles/appli-*.css (modules-pages/espace-licencie.mjs), après styles/espace-licencie.css.
   Tous les lots de l'appli (fil, connexion, notifications, licence, communauté…) utilisent CES variables plutôt que des
   couleurs écrites en dur : le mode sombre et le contraste (WCAG AA, vérifié par db/test-appli-design.mjs) suivent tout seuls.

   MODE SOMBRE
   - automatique : préférence du téléphone (prefers-color-scheme) ;
   - forcé : <html data-theme="clair|sombre"> (choix gardé par js/appli-coquille.js : Plus › Apparence) ;
   - js/appli-coquille.js pose aussi la classe html.app-sombre quand le thème EFFECTIF est sombre : c'est elle qui assombrit les
     anciens éléments el-* (voir plus bas) ; vos propres règles n'ont besoin que des variables --app-*.

   COULEURS DE LA CHARTE (fixes, identiques en clair et en sombre)
     --app-klein #001CA8 · --app-minuit #191970 · --app-noir #120D16 · --app-fumee #F5F5F5 · --app-cranberry #950714
     --app-rouge #F32837 · --app-blanc #FFFFFF
   RÔLES (changent en sombre) — couples testés AA (texte normal ≥ 4,5:1)
     --app-fond            fond de l'appli (derrière les cartes)
     --app-surface         carte, feuille, barre            --app-surface-2   zone enfoncée (ligne, champ, pastille neutre)
     --app-surface-3       encore plus marquée              --app-surface-verre  barre translucide (avec backdrop-filter)
     --app-texte           texte courant                     --app-texte-doux  texte secondaire (méta, dates)
     --app-titre           titres (Midnight en clair)        --app-accent      liens, icônes actives (Klein en clair)
     --app-accent-fond     fond des boutons principaux       --app-sur-accent  texte posé sur --app-accent-fond
     --app-accent-voile    fond léger teinté Klein           --app-alerte      filet/fond d'alerte (rouge charte)
     --app-alerte-texte    texte d'alerte lisible            --app-alerte-voile  fond léger d'alerte
     --app-pastille        fond des compteurs (blanc dessus) --app-trait       bordures fines
     --app-sur-photo       texte posé sur photo (blanc)      --app-voile-photo dégradé à poser sur une photo pour lire le texte
     --app-degrade         dégradé de marque Klein → Midnight (carte de licence, en-têtes)
     --app-degrade-story   anneau des « stories » (Klein → rouge)
   ÉLÉVATIONS  --app-ombre-1 (carte posée) · --app-ombre-2 (carte au survol, barre) · --app-ombre-3 (feuille, fenêtre)
   RAYONS      --app-rayon-s 10px · --app-rayon-m 16px · --app-rayon-l 22px · --app-rayon-xl 28px · --app-rayon-rond 999px
   ESPACEMENTS --app-esp-1 .25rem · -2 .5rem · -3 .75rem · -4 1rem · -5 1.5rem · -6 2rem · -7 3rem
   TYPOGRAPHIE --app-police-titre (Montserrat) · --app-police-texte (Cabin)
               --app-t-xs .75rem · --app-t-s .875rem · --app-t-m 1rem · --app-t-l 1.25rem · --app-t-xl 1.6rem · --app-t-xxl 2.1rem
   MOUVEMENT   --app-duree-courte 140ms · --app-duree 240ms · --app-duree-longue 420ms · --app-courbe (sortie douce)
               --app-courbe-ressort (léger rebond) — toutes à ~0 si prefers-reduced-motion (rien à faire de votre côté).
   GABARIT     --app-haut / --app-bas (encoche et barre d'accueil : safe-area) · --app-hauteur-onglets (barre d'onglets du bas)
               --app-z-barre 1400 · --app-z-feuille 1600 · --app-z-bandeau 1700
   CLASSES UTILES (préfixe app-, à combiner avec vos classes préfixées)
     .app-carte (surface + rayon + ombre) · .app-apparait (apparition douce quand la carte entre à l'écran, gérée par la coque)
     .app-bouton / .app-bouton-plein / .app-bouton-discret · .app-puce (étiquette) · .app-squelette (chargement)
   JS : window.FFAppliDesign (js/appli-coquille.js) : vibrer(ms), theme(), definirTheme('auto'|'clair'|'sombre'),
        media(region, onglet) → { image, video }, illustration(region) → URL du dessin de la région. */

:root{
  --app-klein:#001CA8;--app-minuit:#191970;--app-noir:#120D16;--app-fumee:#F5F5F5;--app-cranberry:#950714;--app-rouge:#F32837;--app-blanc:#FFFFFF;
  --app-fond:#F5F5F5;--app-surface:#FFFFFF;--app-surface-2:#F1F2F7;--app-surface-3:#E6E8F2;--app-surface-verre:rgba(255,255,255,.86);
  --app-texte:#120D16;--app-texte-doux:#57525E;--app-titre:#191970;--app-accent:#001CA8;--app-accent-fond:#001CA8;--app-sur-accent:#FFFFFF;
  --app-accent-voile:rgba(0,28,168,.07);--app-alerte:#F32837;--app-alerte-texte:#950714;--app-alerte-voile:rgba(243,40,55,.08);
  --app-pastille:#950714;--app-trait:rgba(18,13,22,.1);--app-sur-photo:#FFFFFF;
  --app-voile-photo:linear-gradient(180deg,rgba(18,13,22,.15) 0%,rgba(18,13,22,.05) 35%,rgba(25,25,112,.78) 100%);
  --app-degrade:linear-gradient(135deg,#001CA8 0%,#191970 100%);
  --app-degrade-story:conic-gradient(from 210deg,#001CA8,#191970,#950714,#F32837,#001CA8);
  --app-ombre-1:0 1px 2px rgba(25,25,112,.06),0 6px 18px rgba(25,25,112,.07);
  --app-ombre-2:0 2px 6px rgba(25,25,112,.08),0 14px 32px rgba(25,25,112,.12);
  --app-ombre-3:0 -4px 18px rgba(25,25,112,.08),0 24px 60px rgba(18,13,22,.22);
  --app-rayon-s:10px;--app-rayon-m:16px;--app-rayon-l:22px;--app-rayon-xl:28px;--app-rayon-rond:999px;
  --app-esp-1:.25rem;--app-esp-2:.5rem;--app-esp-3:.75rem;--app-esp-4:1rem;--app-esp-5:1.5rem;--app-esp-6:2rem;--app-esp-7:3rem;
  --app-police-titre:Montserrat,var(--police-display,system-ui),sans-serif;--app-police-texte:Cabin,system-ui,-apple-system,sans-serif;
  --app-t-xs:.75rem;--app-t-s:.875rem;--app-t-m:1rem;--app-t-l:1.25rem;--app-t-xl:1.6rem;--app-t-xxl:2.1rem;
  --app-duree-courte:140ms;--app-duree:240ms;--app-duree-longue:420ms;
  --app-courbe:cubic-bezier(.2,.8,.2,1);--app-courbe-ressort:cubic-bezier(.34,1.56,.64,1);
  --app-haut:env(safe-area-inset-top,0px);--app-bas:env(safe-area-inset-bottom,0px);--app-hauteur-onglets:4.1rem;
  --app-z-barre:1400;--app-z-feuille:1600;--app-z-bandeau:1700;
}
/* Sombre : automatique (sauf choix « clair ») ou forcé. Les deux blocs doivent rester identiques. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --app-fond:#0F0C14;--app-surface:#1B1724;--app-surface-2:#241F31;--app-surface-3:#2E2840;--app-surface-verre:rgba(27,23,36,.84);
    --app-texte:#F5F5F5;--app-texte-doux:#BDB8C7;--app-titre:#E4E7FF;--app-accent:#9DABFF;--app-accent-fond:#2541D8;--app-sur-accent:#FFFFFF;
    --app-accent-voile:rgba(157,171,255,.1);--app-alerte:#F32837;--app-alerte-texte:#FF8F98;--app-alerte-voile:rgba(243,40,55,.14);
    --app-pastille:#D01426;--app-trait:rgba(255,255,255,.1);
    --app-voile-photo:linear-gradient(180deg,rgba(15,12,20,.3) 0%,rgba(15,12,20,.1) 35%,rgba(15,12,20,.88) 100%);
    --app-ombre-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.28);
    --app-ombre-2:0 2px 6px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.4);
    --app-ombre-3:0 -4px 18px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="sombre"]{
  --app-fond:#0F0C14;--app-surface:#1B1724;--app-surface-2:#241F31;--app-surface-3:#2E2840;--app-surface-verre:rgba(27,23,36,.84);
  --app-texte:#F5F5F5;--app-texte-doux:#BDB8C7;--app-titre:#E4E7FF;--app-accent:#9DABFF;--app-accent-fond:#2541D8;--app-sur-accent:#FFFFFF;
  --app-accent-voile:rgba(157,171,255,.1);--app-alerte:#F32837;--app-alerte-texte:#FF8F98;--app-alerte-voile:rgba(243,40,55,.14);
  --app-pastille:#D01426;--app-trait:rgba(255,255,255,.1);
  --app-voile-photo:linear-gradient(180deg,rgba(15,12,20,.3) 0%,rgba(15,12,20,.1) 35%,rgba(15,12,20,.88) 100%);
  --app-ombre-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.28);
  --app-ombre-2:0 2px 6px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.4);
  --app-ombre-3:0 -4px 18px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* Mouvement réduit : toutes les durées tombent à presque rien (les animations des lots aussi, si elles utilisent ces variables). */
@media (prefers-reduced-motion:reduce){
  :root{--app-duree-courte:1ms;--app-duree:1ms;--app-duree-longue:1ms;--app-courbe-ressort:linear}
}

/* ── Classes utiles communes (préfixe app-) ── */
.app-carte{background:var(--app-surface);color:var(--app-texte);border-radius:var(--app-rayon-l);box-shadow:var(--app-ombre-1);border:1px solid var(--app-trait)}
.app-bouton{display:inline-flex;gap:.5rem;align-items:center;justify-content:center;min-height:2.75rem;padding:.6rem 1.15rem;border-radius:var(--app-rayon-rond);border:1.5px solid var(--app-accent);background:transparent;color:var(--app-accent);font:700 var(--app-t-s)/1.2 var(--app-police-titre);cursor:pointer;text-decoration:none;transition:transform var(--app-duree-courte) var(--app-courbe),background-color var(--app-duree) var(--app-courbe)}
.app-bouton:active{transform:scale(.96)}
.app-bouton:focus-visible{outline:3px solid var(--app-accent);outline-offset:2px}
.app-bouton-plein{background:var(--app-accent-fond);border-color:var(--app-accent-fond);color:var(--app-sur-accent)}
.app-bouton-discret{border-color:transparent;background:var(--app-surface-2);color:var(--app-titre)}
.app-puce{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .6rem;border-radius:var(--app-rayon-rond);background:var(--app-accent-voile);color:var(--app-accent);font:700 var(--app-t-xs)/1.5 var(--app-police-titre);letter-spacing:.03em}
.app-squelette{border-radius:var(--app-rayon-s);background:linear-gradient(90deg,var(--app-surface-2) 0%,var(--app-surface-3) 50%,var(--app-surface-2) 100%);background-size:200% 100%;animation:app-reflet 1.4s linear infinite}
@keyframes app-reflet{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.app-squelette{animation:none}}

/* ── Anciens éléments el-* en mode sombre (classe html.app-sombre posée par js/appli-coquille.js, appli ouverte) ──
   Les variables --el-* qui servent de COULEUR DE TEXTE prennent les teintes claires ; les fonds qui utilisaient ces mêmes
   variables sont rétablis ci-dessous avec les couleurs fixes de la charte. */
html.app-sombre.el-appli-active{color-scheme:dark;background:var(--app-fond)}
html.app-sombre.el-appli-active body{background:var(--app-fond);color:var(--app-texte)}
html.app-sombre.el-appli-active .el-page{background:var(--app-fond);
  --el-noir:var(--app-texte);--el-doux:var(--app-texte-doux);--el-trait:var(--app-trait);--el-fumee:var(--app-surface-2);
  --el-minuit:var(--app-titre);--el-klein:var(--app-accent);--el-cranberry:var(--app-alerte-texte)}
html.app-sombre.el-appli-active :is(.el-s,.el-afaire,.el-afaire-ico,.el-tuile,.el-plus-menu,.el-actu details,.el-filtre,.el-onglet:hover,.el-ch-dl div,.el-com,.el-champ input,.el-champ select,.el-champ textarea){background-color:var(--app-surface)}
html.app-sombre.el-appli-active :is(.el-doc-ico,.el-exemple){background-color:var(--app-surface-3)}
html.app-sombre.el-appli-active :is(.el-exalto,.el-app-tete,.el-filtre[aria-pressed="true"],.el-s-une,.el-date,.el-ch-rang,.el-secu-rev,.el-res-barre span,.el-carte,.el-bouton-plein:hover){background-color:var(--app-minuit)}
html.app-sombre.el-appli-active :is(.el-demo-pastille,.el-bouton-plein,.el-app-avatar,.el-etiq-une,.el-ch-fichier-btn,.el-ch-note,.el-ch-barre i,.el-res.est-moi .el-res-barre span,.el-bulle.est-licencie,.el-bascule input:checked+.el-bascule-piste,.el-carte:hover){background-color:var(--app-accent-fond);border-color:var(--app-accent-fond)}
html.app-sombre.el-appli-active .el-comment-liste li::before,html.app-sombre.el-appli-active .el-ch-leg-trace::before{background-color:var(--app-minuit)}
html.app-sombre.el-appli-active .el-onglet[aria-current="page"]::before,html.app-sombre.el-appli-active .el-ch-diag li::before{background-color:var(--app-accent-fond)}
html.app-sombre.el-appli-active :is(.el-licence-carte,.el-video-facade){background-image:linear-gradient(135deg,#191970,#001CA8)}
html.app-sombre.el-appli-active .el-video-facade:hover{background-image:linear-gradient(135deg,#120D16,#191970)}
html.app-sombre.el-appli-active :is(.el-bouton-blanc,.el-app-bouton[data-el-installer]){color:var(--app-minuit)}
html.app-sombre.el-appli-active :is(.el-exalto,.el-app-tete,.el-s-une,.el-date,.el-carte,.el-licence-carte) :is(h2,h3,h4,b,.el-titre,.el-s-titre,.el-une-titre){color:inherit}
html.app-sombre.el-appli-active .el-s-une{color:#fff}
html.app-sombre.el-appli-active .el-demo-avis{background:var(--app-accent-voile);border-color:rgba(157,171,255,.3)}
html.app-sombre.el-appli-active :is(.el-afaire-ligne.est-urgent){background:var(--app-alerte-voile)}
html.app-sombre.el-appli-active :is(.el-afaire-ligne.est-vigilance){background:rgba(255,143,152,.08)}
html.app-sombre.el-appli-active .el-onglet-nb{box-shadow:0 0 0 2px var(--app-surface)}
html.app-sombre.el-appli-active :is(img,video):not(.apc-media *){filter:brightness(.92)}