/* =========================================================================
   OURAYA COFFRE · LA FEUILLE COMMUNE DE L'APPLICATION
   -------------------------------------------------------------------------
   Posée sur /lumiere.css (charte « La lumière ») : jetons, polices, .btn,
   .champ, .carte, .bascule, .barre, la lampe. Ce fichier ajoute le cadre de
   l'application (barre compacte, colonne, tiroir, jauge) et les composants de
   public/app/ui.js. Chaque écran pose ses propres règles dans
   public/coffre/ecrans/<module>.css, jamais ici.

   AUCUNE COULEUR EN DUR hors des jetons ci-dessous. Les quatre tons (info,
   attention, danger, succès) sont des jetons, redéfinis pour la nuit dans les
   DEUX blocs, comme la charte : l'un suit le système, l'autre le choix forcé.
   Une retouche de l'un se reporte dans l'autre.

   PIÈGES :
   1. « .panneau » appartient à la charte (l'aplat sombre). Le panneau qui
      glisse depuis la droite s'appelle « .panneau-droit ».
   2. La charte donne à h1, h2 et section des tailles d'affiche. Dans
      l'application, on les ramène par :where(), qui ne pèse rien : une classe
      d'écran l'emporte toujours.
   3. Un élément en « hidden » n'anime pas son entrée. ui.js retire l'attribut,
      puis pose « .ouvert » à l'image suivante.
   4. 100vh compte la barre d'adresse d'un téléphone : on écrit 100dvh, avec
      100vh en repli.
   ========================================================================= */

/* ================================================================ JETONS == */
:root{
  --colonne:280px;
  --hauteur-barre-coffre:64px;

  --c-info:#2F5E8C;
  --c-info-voile:rgba(47,94,140,.10);
  --c-attention:var(--accent);
  --c-attention-aplat:var(--accent-aplat);
  --c-attention-voile:var(--accent-voile);
  --c-danger:#B23A22;
  --c-danger-voile:rgba(178,58,34,.09);
  --sur-danger:#FFFFFF;
  --c-succes:#2E6B45;
  --c-succes-voile:rgba(46,107,69,.10);
  --voile-modal:rgba(20,29,46,.38);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --c-info:#8DB8E8;
    --c-info-voile:rgba(141,184,232,.12);
    --c-danger:#F08A70;
    --c-danger-voile:rgba(224,100,75,.13);
    --sur-danger:#1A0804;
    --c-succes:#7FCB98;
    --c-succes-voile:rgba(127,203,152,.12);
    --voile-modal:rgba(0,0,0,.6);
  }
}
:root[data-theme="sombre"]{
  --c-info:#8DB8E8;
  --c-info-voile:rgba(141,184,232,.12);
  --c-danger:#F08A70;
  --c-danger-voile:rgba(224,100,75,.13);
  --sur-danger:#1A0804;
  --c-succes:#7FCB98;
  --c-succes-voile:rgba(127,203,152,.12);
  --voile-modal:rgba(0,0,0,.6);
}


/* ============================================================ LE CADRE == */
/* Le contenu passe devant la lampe par son rang, sans z-index (charte). */
.coffre{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.corps{position:relative;display:flex;flex:1 1 auto;min-height:0}
.vue{position:relative;flex:1 1 auto;min-width:0;outline:none}
.ecran{min-height:100%}
/* Le focus posé par le routeur sur le titre d'un écran sert aux lecteurs
   d'écran ; il n'a pas à dessiner un cadre autour du titre. */
.vue [tabindex="-1"]:focus{outline:none}

/* En session, la page ne défile plus : la vue défile seule, la barre et la
   colonne restent en place au-dessus d'une liste de dix mille fichiers. */
body[data-cadre="complet"]{height:100vh;height:100dvh;overflow:hidden}
body[data-cadre="complet"] .coffre{height:100%;min-height:0}
body[data-cadre="complet"] .vue{overflow:auto;overscroll-behavior:contain}

/* Hors session : ni colonne, ni recherche, ni envoi, ni compte. */
body:not([data-cadre="complet"]) [data-session],
body:not([data-cadre="complet"]) .colonne,
body:not([data-cadre="complet"]) .voile-colonne{display:none !important}
body[data-cadre="nu"] .barre-coffre{display:none}

.hors-ecran{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Un formulaire qui n'existe que pour les gestionnaires de mots de passe
   (ui.formeMotDePasse) : ses champs se rangent comme s'il n'était pas là. */
.forme-contenu{display:contents}
.sans-script{max-width:44ch;margin:18vh auto;padding:0 var(--marge);text-align:center;color:var(--texte-doux)}


/* ====================================================== BARRE DU HAUT == */
.barre.barre-coffre{flex:none}
/* En session, la barre est une surface dès le départ : elle ne dépend pas du
   défilement de la page, qui ne défile plus. Hors session, elle garde le
   comportement de la charte (transparente, puis posée). */
body[data-cadre="complet"] .barre.barre-coffre{
  position:relative;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--trait);
}
.barre-rang{
  position:relative;
  display:flex;align-items:center;gap:12px;
  height:var(--hauteur-barre-coffre);
  padding-inline:var(--marge);
}
.barre-coffre .marque img{width:140px}
.barre-espace{flex:1 1 auto;min-width:0}

.barre-fil{flex:0 1 auto;min-width:0;overflow:hidden;margin-left:10px}

/* LA RECHERCHE. Le texte part dans le fragment de l'URL, jamais dans ?q=. */
.recherche{position:relative;display:flex;align-items:center;margin:0}
.recherche-champ{
  display:flex;align-items:center;gap:8px;
  width:clamp(200px,24vw,340px);height:40px;
  padding:0 8px 0 12px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-pastille);
  box-shadow:var(--creux-ombre);
  color:var(--texte-faible);
  transition:border-color .25s, box-shadow .25s;
}
.recherche-champ:focus-within{border-color:var(--accent-trait);box-shadow:var(--creux-ombre),0 0 0 1px var(--accent-trait)}
.recherche-champ input{
  appearance:none;-webkit-appearance:none;
  flex:1 1 auto;min-width:0;
  border:0;background:none;outline:none;
  color:var(--texte);font:inherit;font-size:.93rem;
  padding:0;
}
.recherche-champ input::-webkit-search-cancel-button{display:none}
.recherche-champ input::placeholder{color:var(--texte-faible);opacity:.8}
.recherche-touche{
  flex:none;
  font:400 11px/1 var(--f-technique);
  padding:3px 6px;border:1px solid var(--trait-net);border-radius:var(--r-net);
  color:var(--texte-faible);
}
/* Préfixés par .recherche : sans cela, « .bouton-nu », plus loin, les rallume. */
.recherche .recherche-ouvrir,.recherche .recherche-fermer{display:none}

.bouton-envoyer{flex:none}

/* LE COMPTE : l'initiale dans un rond. */
.pastille-compte{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--accent-trait);
  background:var(--accent-voile);
  color:var(--accent);
  font:600 15px/1 var(--f-titre);
  cursor:pointer;
  transition:border-color .25s;
}
.pastille-compte:hover{border-color:var(--accent)}

/* LES MENUS de la barre (Envoyer, compte). */
.menu-boite{position:relative;flex:none}
.menu{
  position:absolute;right:0;top:calc(100% + 8px);
  z-index:10;
  display:flex;flex-direction:column;
  min-width:220px;max-width:calc(100vw - 24px);
  padding:6px;
  background:var(--surface-haute);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-profonde);
}
.menu [role=menuitem]{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:0;border-radius:var(--r-net);
  background:none;
  color:var(--texte);
  font:inherit;font-size:.95rem;line-height:1.3;
  text-align:left;text-decoration:none;
  cursor:pointer;
}
.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:var(--fond-creux);outline:none}
.menu hr{border:0;border-top:1px solid var(--trait);margin:6px 4px}
.menu-adresse{
  margin:0;padding:8px 12px 4px;
  font:400 12px/1.4 var(--f-technique);
  color:var(--texte-faible);
  overflow-wrap:anywhere;
}
.menu-adresse:empty,.menu-adresse:empty + hr{display:none}


/* ============================================================ BANDEAUX == */
.bandeaux{display:flex;flex-direction:column;flex:none;position:relative}
.bandeaux:empty{display:none}
.bandeau{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  padding:10px var(--marge);
  background:var(--c-info-voile);
  border-bottom:1px solid var(--trait);
  color:var(--texte);
  font-size:.93rem;line-height:1.45;
}
.bandeau > .icone{flex:none;color:var(--c-info)}
.bandeau > p{flex:1 1 280px;margin:0}
.bandeau-actions{display:flex;flex-wrap:wrap;gap:8px}
.bandeau[data-ton="attention"]{background:var(--c-attention-voile)}
.bandeau[data-ton="attention"] > .icone{color:var(--c-attention)}
.bandeau[data-ton="danger"]{background:var(--c-danger-voile);box-shadow:inset 3px 0 0 var(--c-danger)}
.bandeau[data-ton="danger"] > .icone{color:var(--c-danger)}
.bandeau[data-ton="succes"]{background:var(--c-succes-voile)}
.bandeau[data-ton="succes"] > .icone{color:var(--c-succes)}


/* LE BANDEAU DE L'APPLICATION DE BUREAU (app/bandeau-applis.js). Une bande
   fine sous la barre, toujours en tête des bandeaux : le texte et les
   boutons à gauche, le ruban de lumière qui s'enroule dans la partie libre,
   à droite (docs/visuels-applis.md), la croix au bout. Un voile du fond
   de page couvre la gauche du ruban : le texte garde son contraste. */
.bandeau-applis{
  position:relative;
  overflow:hidden;
  flex:none;
  background:var(--fond);
  border-bottom:1px solid var(--trait);
  transition:height .42s var(--sortie), opacity .3s var(--sortie);
}
@media (prefers-reduced-motion:no-preference){
  .bandeau-applis{animation:bandeau-applis-entree .7s var(--sortie) both}
  @keyframes bandeau-applis-entree{from{opacity:0;transform:translateY(-6px)}}
}
.bandeau-applis.ferme{opacity:0}
/* Le filet de lumière qui court sous le bandeau. */
.bandeau-applis::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(to right,transparent,var(--accent-trait) 30%,var(--accent) 70%,transparent);
  opacity:.8;
  pointer-events:none;
}
.bandeau-applis-fond{position:absolute;inset:0;pointer-events:none}
.bandeau-applis-fond picture{height:100%}
.bandeau-applis-fond img{
  width:100%; height:100%;
  object-fit:cover; object-position:right center;
  /* Le ruban s'arrête avant la croix : elle garde son contraste la nuit. */
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 96px);
  mask-image:linear-gradient(to left,transparent 0,#000 96px);
}
.bandeau-applis-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--fond) 0%,
    color-mix(in srgb,var(--fond) 92%,transparent) 34%,
    color-mix(in srgb,var(--fond) 45%,transparent) 62%,
    transparent 82%);
}
.bandeau-applis-corps{
  position:relative;
  display:flex; align-items:center; gap:12px 18px;
  min-height:72px;
  padding:12px var(--marge);
}
.bandeau-applis-icone{
  flex:none;
  width:40px; height:40px;
  border-radius:22.5%;
  box-shadow:0 0 0 1px var(--trait), 0 6px 18px -8px var(--source-halo);
}
/* Le texte garde une mesure : les boutons restent sur le voile, à gauche du
   ruban, au lieu d'être poussés sur sa boucle claire. */
.bandeau-applis-texte{flex:0 1 auto;min-width:0;max-width:540px}
.bandeau-applis-titre{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  font-family:var(--f-titre); font-weight:500; font-size:.97rem; line-height:1.3;
  letter-spacing:-.015em;
  color:var(--texte);
}
.bandeau-applis-essai{
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--accent-trait);
  border-radius:var(--r-net);
  background:var(--accent-voile);
  font:400 10px/1 var(--f-technique);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.bandeau-applis-phrase{
  margin:3px 0 0;
  font-size:.86rem; line-height:1.45;
  color:var(--texte-doux);
}
.bandeau-applis-actions{
  flex:none;
  display:flex; align-items:center; gap:10px 20px;
  margin-left:8px;
}
.bandeau-applis-telecharger{white-space:nowrap}
.bandeau-applis-plus{white-space:nowrap;text-shadow:0 0 10px var(--fond),0 0 3px var(--fond)}
/* Préfixé : « .bouton-nu », plus loin, la rendrait transparente. Une tuile
   opaque, la croix au contraste du texte, jour comme nuit. */
.bandeau-applis .bandeau-applis-fermer{
  margin-left:auto;
  background:var(--fond);
  border:1px solid var(--trait);
  color:var(--texte);
}
.bandeau-applis .bandeau-applis-fermer:hover{background:var(--fond-creux)}
@media (max-width:899px){
  .bandeau-applis-fond::after{
    background:linear-gradient(90deg,
      var(--fond) 0%,
      color-mix(in srgb,var(--fond) 90%,transparent) 50%,
      color-mix(in srgb,var(--fond) 40%,transparent) 85%,
      transparent 100%);
  }
}
/* Téléphone : le texte sur toute la largeur, les boutons dessous, la croix
   dans le coin. Le ruban recadré sur sa boucle reste en fond, voilé. */
@media (max-width:719px){
  .bandeau-applis-corps{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    padding:14px 52px 14px var(--marge);
  }
  .bandeau-applis-icone{width:34px;height:34px}
  .bandeau-applis-actions{grid-column:1 / -1;margin-left:0;flex-wrap:wrap}
  .bandeau-applis .bandeau-applis-fermer{position:absolute;top:8px;right:8px;margin:0}
  .bandeau-applis-fond img{object-position:right bottom}
  .bandeau-applis-fond::after{
    background:linear-gradient(to bottom,
      color-mix(in srgb,var(--fond) 94%,transparent) 0%,
      color-mix(in srgb,var(--fond) 82%,transparent) 55%,
      color-mix(in srgb,var(--fond) 55%,transparent) 100%);
  }
}
/* Téléphone, sans bouton de téléchargement (Android, iPhone, Windows…) :
   une seule ligne, le titre et « En savoir plus ». Le message n'appelle
   aucune action ici ; il ne prend pas un cinquième de l'écran. */
@media (max-width:719px){
  .bandeau-applis.compact .bandeau-applis-phrase,
  .bandeau-applis.compact .bandeau-applis-fond,
  .bandeau-applis.compact .bandeau-applis-icone{display:none}
  .bandeau-applis.compact .bandeau-applis-corps{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:4px 14px;
    min-height:0;
    padding:10px 52px 10px var(--marge);
  }
  .bandeau-applis.compact .bandeau-applis-titre{font-size:.9rem}
  .bandeau-applis.compact .bandeau-applis-actions{margin:0}
  .bandeau-applis.compact .bandeau-applis-fermer{top:50%;transform:translateY(-50%)}
}
@media print{.bandeau-applis{display:none}}


/* ======================================================= LA COLONNE == */
.colonne{
  position:relative;
  flex:none;
  display:flex;flex-direction:column;gap:4px;
  width:var(--colonne);
  padding:16px 12px 12px;
  background:var(--fond-creux);
  border-right:1px solid var(--trait);
  overflow-y:auto;overscroll-behavior:contain;
}
.colonne-nav{display:flex;flex-direction:column;gap:2px}
.colonne-nav a{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;
  border-radius:var(--r-bloc);
  color:var(--texte-doux);
  text-decoration:none;
  font-size:.97rem;line-height:1.3;
  transition:background .2s, color .2s;
}
.colonne-nav a:hover{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--texte)}
.colonne-nav a[aria-current="page"]{
  background:var(--surface);
  color:var(--texte);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-courte);
}
.colonne-nav a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;
  border-radius:2px;background:var(--accent-aplat);
}
.colonne-nav a[aria-current="page"] .icone{color:var(--accent)}
.colonne-nav b[data-compte]{
  margin-left:auto;
  font:400 12px/1 var(--f-technique);
  color:var(--texte-faible);
  font-variant-numeric:tabular-nums;
}
.colonne-filet{border:0;border-top:1px solid var(--trait);margin:12px}
.arbre{padding-left:6px}
.arbre:empty{display:none}
.colonne-pied{margin-top:auto;padding:18px 12px 6px}

/* LA JAUGE. Neutre au repos, ambre à 85 %, rouge à 97 % (interface §3.2).
   La corbeille compte dans le quota : une seconde teinte, plus pâle. */
.jauge-boite{display:flex;flex-direction:column;gap:8px}
.jauge-texte{margin:0;font-size:.9rem;color:var(--texte-doux)}
.jauge-texte strong{color:var(--texte);font-weight:600}
.jauge-volume{
  display:flex;
  height:6px;border-radius:var(--r-pastille);
  background:var(--trait);
  overflow:hidden;
}
.jauge-volume i{display:block;height:100%;transition:width .5s var(--sortie)}
.jauge-fichiers{background:var(--texte-doux)}
.jauge-corbeille{background:color-mix(in srgb,var(--texte-doux) 38%,transparent)}
.jauge-volume[data-seuil="attention"] .jauge-fichiers{background:var(--c-attention-aplat)}
.jauge-volume[data-seuil="attention"] .jauge-corbeille{background:color-mix(in srgb,var(--c-attention-aplat) 40%,transparent)}
.jauge-volume[data-seuil="plein"] .jauge-fichiers{background:var(--c-danger)}
.jauge-volume[data-seuil="plein"] .jauge-corbeille{background:color-mix(in srgb,var(--c-danger) 40%,transparent)}
.jauge-note{margin:0;font-size:.8rem;color:var(--texte-faible)}
.jauge-reste{margin:0;font-size:.86rem;color:var(--c-danger);font-weight:500}
.jauge-lien{
  font:400 12px/1.3 var(--f-technique);letter-spacing:.02em;
  color:var(--texte-faible);text-decoration:none;
}
.jauge-lien:hover{color:var(--accent)}

/* LE TIROIR : sous 900 px, la colonne glisse depuis la gauche. C'est une
   navigation, pas une édition, d'où ce seul panneau venu de ce côté. */
.voile-colonne{
  position:fixed;left:0;right:0;bottom:0;top:var(--hauteur-barre-coffre);
  z-index:69;
  background:var(--voile-modal);
  opacity:0;transition:opacity .22s var(--sortie);
}
.voile-colonne.ouvert{opacity:1}
@media (max-width:899px){
  .barre-fil{display:none}
  .colonne{
    position:fixed;left:0;bottom:0;top:var(--hauteur-barre-coffre);
    z-index:70;
    width:min(300px,86vw);
    transform:translateX(-102%);
    transition:transform .22s var(--sortie);
    box-shadow:var(--ombre-profonde);
  }
  .colonne.ouverte{transform:none}
}
@media (min-width:900px){
  .bouton-tiroir,.voile-colonne{display:none !important}
}


/* ====================================================== TYPOGRAPHIE == */
/* :where() ne pèse rien : la moindre classe d'écran l'emporte. */
:where(.vue,.panneau-droit) h1{
  font-size:clamp(1.65rem,2.6vw,2.25rem);
  font-weight:300;line-height:1.12;letter-spacing:-.035em;
}
:where(.vue,.panneau-droit) h2{
  font-size:clamp(1.2rem,1.6vw,1.4rem);
  font-weight:400;line-height:1.25;letter-spacing:-.025em;
}
:where(.vue,.panneau-droit) h3{font-size:1.05rem;font-weight:500;line-height:1.35;letter-spacing:-.015em}
:where(.vue,.panneau-droit) section{padding-block:0}

/* Mises en page d'écran, disponibles pour tous. */
.page{padding:clamp(20px,3vw,40px) clamp(16px,3vw,40px) 64px;max-width:1180px}
.page-large{max-width:none}
.page-tete{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 20px;margin-bottom:clamp(18px,2.4vw,28px);
}
.page-tete > div{min-width:0}
.page-tete .mention{margin-top:6px}
.page-actions{display:flex;flex-wrap:wrap;gap:10px}
.titre-page{
  font-family:var(--f-titre);
  font-size:clamp(1.65rem,2.6vw,2.25rem);
  font-weight:300;line-height:1.12;letter-spacing:-.035em;
  margin:0;
}
/* Hors session : une carte au centre (connexion, ouverture, lien reçu). */
.ecran-centre{
  display:grid;place-items:center;
  min-height:calc(100vh - var(--hauteur-barre-coffre));
  min-height:calc(100dvh - var(--hauteur-barre-coffre));
  padding:clamp(24px,6vh,64px) var(--marge);
}
.carte-centree{width:min(440px,100%)}
.carte-large{width:min(720px,100%)}
.pile{display:flex;flex-direction:column;gap:14px}
.rangee{display:flex;flex-wrap:wrap;align-items:center;gap:10px}


/* =========================================================== BOUTONS == */
.btn .icone{flex:none}
.btn.petit{padding:9px 14px;font-size:.88rem;gap:8px}
.btn.seule-icone{padding:11px}
.btn.petit.seule-icone{padding:8px}
.btn.danger{--fond-btn:var(--c-danger);--texte-btn:var(--sur-danger)}
.btn.creux.danger{
  --fond-btn:transparent;--texte-btn:var(--c-danger);
  border-color:color-mix(in srgb,var(--c-danger) 45%,transparent);
}
.btn[aria-busy="true"]{cursor:progress}

.bouton-nu{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 10px;
  border:0;border-radius:var(--r-net);
  background:none;
  color:var(--texte-doux);
  font:inherit;font-size:.93rem;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.bouton-nu:hover{background:var(--fond-creux);color:var(--texte)}
.bouton-nu.seule-icone{width:40px;height:40px;padding:0;flex:none}
.bouton-nu.petit.seule-icone{width:32px;height:32px}
.bouton-lien{
  display:inline;
  padding:0;border:0;background:none;
  color:var(--accent);
  font:inherit;font-weight:500;
  text-decoration:underline;text-decoration-color:var(--accent-trait);text-underline-offset:.22em;
  cursor:pointer;
}
.bouton-lien:hover{text-decoration-color:var(--accent)}
.point-attente{
  display:inline-block;flex:none;
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  animation:battement 1.2s var(--entree-sortie) infinite;
}


/* =========================================================== CHAMPS == */
/* La charte pose .champ, son libellé en capitales d'instrument, et le champ
   creusé. On y ajoute l'aide, l'erreur, l'œil et la case. */
.champ-aide{margin:0;font-size:.84rem;line-height:1.5;color:var(--texte-faible)}
.champ-erreur{margin:0;font-size:.87rem;line-height:1.45;color:var(--c-danger)}
.champ[data-erreur] input,
.champ[data-erreur] textarea,
.champ[data-erreur] .liste-declencheur{border-color:color-mix(in srgb,var(--c-danger) 65%,transparent)}

.champ-mdp{position:relative}
.champ-mdp input{padding-right:54px}
.champ-oeil{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  width:40px;height:40px;
  border:0;border-radius:var(--r-net);
  background:none;color:var(--texte-faible);
  cursor:pointer;
}
.champ-oeil:hover{color:var(--texte);background:var(--trait)}

.case-champ{margin:0 0 18px;display:flex;flex-direction:column;gap:6px}
.case-champ .champ-aide{padding-left:32px}
.case{position:relative;display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.97rem;line-height:1.45}
.case input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.case-boite{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;margin-top:1px;
  border:1px solid var(--trait-net);border-radius:var(--r-net);
  background:var(--fond-creux);box-shadow:var(--creux-ombre);
  transition:background .2s, border-color .2s;
}
.case-boite::after{
  content:"";width:10px;height:5px;
  border-left:2px solid var(--sur-accent);border-bottom:2px solid var(--sur-accent);
  transform:translateY(-1px) rotate(-45deg) scale(0);
  transition:transform .15s var(--sortie);
}
.case input:checked + .case-boite{background:var(--accent-aplat);border-color:var(--accent-aplat)}
.case input:checked + .case-boite::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.case input:focus-visible + .case-boite{outline:2px solid var(--accent);outline-offset:2px}
.case-champ .champ-erreur{padding-left:32px}
.case-champ[data-erreur] .case-boite{border-color:var(--c-danger)}
.case-texte a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* LA LISTE DÉROULANTE. Le déclencheur a l'allure d'un champ ; la liste vit
   au niveau du document, en position fixe, pour qu'aucun panneau ne la coupe. */
.liste-declencheur{
  appearance:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;
  padding:14px 14px 14px 16px;
  background:var(--fond-creux);
  border:1px solid var(--trait);border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
  color:var(--texte);
  font:inherit;font-size:1rem;line-height:1.45;text-align:left;
  cursor:pointer;
  transition:border-color .25s, box-shadow .25s;
}
.liste-declencheur:hover{border-color:var(--trait-net)}
.liste-declencheur[aria-expanded="true"]{border-color:var(--accent-trait);box-shadow:var(--creux-ombre),0 0 0 1px var(--accent-trait)}
.liste-declencheur .icone{flex:none;color:var(--texte-faible);transition:transform .2s var(--sortie)}
.liste-declencheur[aria-expanded="true"] .icone{transform:rotate(180deg)}
.liste-valeur{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liste-valeur.vide{color:var(--texte-faible)}
.liste-popup{
  position:fixed;z-index:120;
  display:flex;flex-direction:column;
  background:var(--surface-haute);
  border:1px solid var(--trait-net);border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-profonde);
  overflow:hidden;
}
.liste-recherche{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:6px 12px;
  border-bottom:1px solid var(--trait);
  color:var(--texte-faible);
}
.liste-recherche input{
  flex:1 1 auto;min-width:0;
  padding:8px 0;border:0;background:none;outline:none;
  color:var(--texte);font:inherit;font-size:.95rem;
}
.liste-popup [role=listbox]{flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:6px;overflow:auto;outline:none}
.liste-option{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:var(--r-net);cursor:pointer;line-height:1.35}
.liste-option.actif{background:var(--fond-creux)}
.liste-option[aria-selected="true"]{color:var(--accent);font-weight:500}
.liste-option[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.liste-detail{font-size:.83rem;font-weight:380;color:var(--texte-faible)}
.liste-aucune{padding:10px 12px;color:var(--texte-faible);font-size:.93rem}

/* LES ONGLETS : des liens, chacun avec son URL. */
.onglets{
  display:flex;gap:2px;
  margin-bottom:clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--trait);
  overflow-x:auto;scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:-1px;padding:10px 14px;
  border-bottom:2px solid transparent;
  color:var(--texte-doux);
  font-size:.95rem;text-decoration:none;white-space:nowrap;
  transition:color .2s, border-color .2s;
}
.onglet:hover{color:var(--texte)}
.onglet[aria-current="page"]{color:var(--texte);border-bottom-color:var(--accent-aplat)}
.onglet-compte{font:400 12px/1 var(--f-technique);color:var(--texte-faible)}
/* À 375 px, les cinq onglets de la recherche débordaient de 60 px : « Autres »
   n'apparaissait qu'en faisant glisser la bande. */
@media (max-width:520px){
  .onglet{padding-inline:8px;font-size:.92rem}
}

.fil ol{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;min-width:0}
.fil li{display:flex;align-items:center;gap:4px;min-width:0;font-size:.93rem;color:var(--texte-doux)}
.fil li + li::before{content:"›";color:var(--texte-faible);padding:0 3px}
.fil a,.fil li > span{max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil a{color:var(--texte-doux);text-decoration:none}
.fil a:hover{color:var(--texte)}
.fil [aria-current]{color:var(--texte);font-weight:500}
.fil-replie .bouton-nu{padding:2px 6px}


/* ================================================== PANNEAU DE DROITE == */
.voile-panneau{
  position:fixed;inset:0;z-index:85;
  background:var(--voile-modal);
  opacity:0;transition:opacity .22s var(--sortie);
}
.voile-panneau.ouvert{opacity:1}
.panneau-droit{
  position:fixed;top:0;right:0;bottom:0;z-index:86;
  display:flex;flex-direction:column;
  width:min(800px,100vw);
  background:var(--surface);
  border-left:1px solid var(--trait);
  box-shadow:inset 1px 0 0 var(--arete-lumiere-faible),var(--ombre-profonde);
  transform:translateX(100%);
  transition:transform .22s var(--sortie);
  outline:none;
}
.panneau-droit[data-largeur="520"]{width:min(520px,100vw)}
.panneau-droit.ouvert{transform:none}
.panneau-tete{
  position:sticky;top:0;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 16px 24px;
  border-bottom:1px solid var(--trait);
  background:var(--surface);
}
.panneau-titre{
  margin:0;min-width:0;
  font:500 1.25rem/1.3 var(--f-titre);letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.panneau-corps{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px}
.panneau-actions{
  position:sticky;bottom:0;flex:none;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--trait);
  background:var(--surface);
}
@media (max-width:820px){
  .panneau-droit,.panneau-droit[data-largeur="520"]{width:100vw;border-left:0}
  .panneau-corps{padding:20px var(--marge)}
  .panneau-tete{padding-left:var(--marge)}
  .panneau-actions{padding-inline:var(--marge)}
}


/* ============================================================ MODALE == */
/* Elle ne sert qu'à confirmer. Création et édition passent par le panneau. */
dialog.modale{
  width:min(480px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow:auto;
  margin:auto;
  padding:28px 28px 22px;
  border:1px solid var(--trait);border-radius:var(--r-bloc);
  background:var(--surface-haute);
  color:var(--texte);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-profonde);
}
dialog.modale::backdrop{background:var(--voile-modal)}
dialog.modale[open]{animation:modale-entree .18s var(--sortie)}
@keyframes modale-entree{from{opacity:0}to{opacity:1}}
.modale-icone{
  display:grid;place-items:center;
  width:44px;height:44px;margin-bottom:16px;
  border-radius:50%;
  background:var(--c-info-voile);color:var(--c-info);
}
.modale[data-ton="attention"] .modale-icone{background:var(--c-attention-voile);color:var(--c-attention)}
.modale[data-ton="danger"] .modale-icone{background:var(--c-danger-voile);color:var(--c-danger)}
.modale[data-ton="succes"] .modale-icone{background:var(--c-succes-voile);color:var(--c-succes)}
.modale-titre{margin:0 0 8px;font:500 1.3rem/1.3 var(--f-titre);letter-spacing:-.02em}
.modale-contexte{margin:0 0 14px;color:var(--texte-doux)}
.modale-consequences{display:grid;gap:7px;margin:0 0 20px;padding-left:1.15em;color:var(--texte-doux);font-size:.95rem;line-height:1.5}
.modale-consequences li::marker{color:var(--texte-faible)}
.modale .champ{margin-bottom:16px}
/* Les choix qui accompagnent le geste (« retirer aussi… »), sous les conséquences. */
.modale-cases{display:grid;gap:12px;margin:0 0 20px}
.modale-cases .case-champ{margin:0}
.modale-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:6px}
@media (max-width:520px){
  dialog.modale{padding:24px 20px 18px}
  .modale-actions{flex-direction:column-reverse}
  .modale-actions .btn{width:100%}
}


/* =================================================== NOTIFICATIONS == */
.toasts{
  position:fixed;left:16px;bottom:16px;z-index:95;
  display:flex;flex-direction:column;gap:8px;
  width:min(420px,calc(100vw - 32px));
  pointer-events:none;
}
/* En session, sur ordinateur, les messages s'ouvrent à droite de la colonne :
   ils ne couvrent ni la jauge ni la navigation. */
@media (min-width:900px){
  body[data-cadre="complet"] .toasts{left:calc(var(--colonne) + 16px)}
}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 8px 12px 14px;
  background:var(--surface-haute);
  border:1px solid var(--trait);border-left:3px solid var(--c-info);
  border-radius:var(--r-bloc);
  box-shadow:var(--ombre-profonde);
  color:var(--texte);
  font-size:.93rem;line-height:1.45;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s var(--sortie), transform .2s var(--sortie);
}
.toast.visible{opacity:1;transform:none}
.toast > .icone{flex:none;margin-top:1px;color:var(--c-info)}
.toast > p{flex:1 1 auto;margin:0;padding-top:1px}
.toast .bouton-lien{flex:none;margin-top:1px}
.toast .bouton-nu{margin:-5px 0}
.toast[data-ton="succes"]{border-left-color:var(--c-succes)}
.toast[data-ton="succes"] > .icone{color:var(--c-succes)}
.toast[data-ton="attention"]{border-left-color:var(--c-attention-aplat)}
.toast[data-ton="attention"] > .icone{color:var(--c-attention)}
.toast[data-ton="danger"]{border-left-color:var(--c-danger)}
.toast[data-ton="danger"] > .icone{color:var(--c-danger)}

/* La file d'envoi, en bas à droite, remplie par l'écran des fichiers. */
.cartouche-hote{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:flex;flex-direction:column;gap:8px;
  width:min(380px,calc(100vw - 32px));
}
.cartouche-hote:empty{display:none}


/* ============================================================ ÉTATS == */
.progression{display:grid;gap:6px;min-width:0}
.progression-libelle{margin:0;font-size:.93rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progression-rail{position:relative;height:6px;border-radius:var(--r-pastille);background:var(--trait);overflow:hidden}
.progression-rail i{
  display:block;height:100%;width:0;
  border-radius:inherit;
  background:var(--accent-aplat);
  transition:width .3s linear;
}
/* Deux phases, deux teintes : le chiffrement se passe sur l'appareil, l'envoi
   sur le réseau. Sans cette distinction, l'abonné croit notre serveur lent. */
.progression[data-phase="chiffrement"] .progression-rail i,
.progression[data-phase="dechiffrement"] .progression-rail i{background:var(--c-info)}
.progression[data-indeterminee] .progression-rail i{width:34%;animation:indeterminee 1.5s var(--entree-sortie) infinite}
@keyframes indeterminee{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.progression[data-etat="termine"] .progression-rail i{background:var(--c-succes)}
.progression[data-etat="echec"] .progression-rail i{background:var(--c-danger)}
.progression-texte{
  display:flex;justify-content:space-between;gap:12px;margin:0;
  font:400 12.5px/1.4 var(--f-technique);
  color:var(--texte-faible);
  font-variant-numeric:tabular-nums;
}
.progression-pourcent{color:var(--texte)}
.progression[data-etat="echec"] .progression-info{color:var(--c-danger)}

.etat-vide{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:48ch;margin:0 auto;
  padding:clamp(40px,10vh,96px) 24px;
  text-align:center;
}
.etat-vide-icone{
  display:grid;place-items:center;
  width:56px;height:56px;margin-bottom:6px;
  border-radius:50%;
  background:var(--fond-creux);border:1px solid var(--trait);
  color:var(--texte-faible);
}
.etat-vide-titre{margin:0;font:400 1.35rem/1.3 var(--f-titre);letter-spacing:-.02em}
.etat-vide-phrase{margin:0;color:var(--texte-doux)}
.etat-vide .btn{margin-top:12px}

/* Le squelette : des lignes creusées, jamais un indicateur qui tourne
   (interface §8.2). */
.squelette{display:grid;gap:14px;padding:8px 0}
.squelette[data-forme="carte"]{padding:24px;border:1px solid var(--trait);border-radius:var(--r-bloc)}
.squelette-ligne{display:flex;align-items:center;gap:14px;min-height:22px}
.squelette-ligne i{
  display:block;height:12px;border-radius:var(--r-pastille);
  background:linear-gradient(90deg,var(--fond-creux) 0%,var(--trait) 50%,var(--fond-creux) 100%);
  background-size:200% 100%;
  animation:miroir 1.8s linear infinite;
}
.squelette-ligne i.squelette-icone{flex:none;width:22px;height:22px;border-radius:var(--r-net)}
@keyframes miroir{from{background-position:100% 0}to{background-position:-100% 0}}

.pastille{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;
  border:1px solid var(--trait);border-radius:var(--r-pastille);
  background:var(--fond-creux);
  color:var(--texte-doux);
  font:400 12px/1.4 var(--f-technique);
  white-space:nowrap;
}
.pastille[data-ton="info"]{background:var(--c-info-voile);border-color:transparent;color:var(--c-info)}
.pastille[data-ton="attention"]{background:var(--c-attention-voile);border-color:transparent;color:var(--c-attention)}
.pastille[data-ton="danger"]{background:var(--c-danger-voile);border-color:transparent;color:var(--c-danger)}
.pastille[data-ton="succes"]{background:var(--c-succes-voile);border-color:transparent;color:var(--c-succes)}

/* Les tableaux (factures, partages, journal, appareils). Sur téléphone, les
   envelopper dans .tableau-defile : c'est le tableau qui défile, jamais la page. */
.tableau-defile{overflow-x:auto;max-width:100%}
.tableau{width:100%;border-collapse:collapse;font-size:.95rem}
.tableau th{
  padding:10px 12px;
  border-bottom:1px solid var(--trait);
  font:400 11.5px/1.3 var(--f-technique);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-faible);
  text-align:left;white-space:nowrap;
}
.tableau td{padding:12px;border-bottom:1px solid var(--trait);vertical-align:middle}
.tableau .nombre{text-align:right;font-family:var(--f-technique);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau tr[data-inactif] td{color:var(--texte-faible)}


/* ========================================================== TÉLÉPHONE == */
@media (max-width:719px){
  :root{--hauteur-barre-coffre:60px}
  .barre-rang{gap:6px}
  .barre-coffre .marque img{width:92px}
  .bouton-nu.seule-icone.bouton-tiroir,.recherche-ouvrir.bouton-nu.seule-icone{width:36px;height:36px}
  .bouton-envoyer span{display:none}
  .btn.petit.bouton-envoyer{padding:9px 10px}
  .pastille-compte{width:34px;height:34px;font-size:14px}
  .recherche{position:static}
  .recherche-champ{display:none}
  .recherche .recherche-ouvrir{display:inline-flex}
  .recherche-touche{display:none}
  body[data-recherche="ouverte"] .recherche-champ{
    display:flex;
    position:absolute;left:var(--marge);right:var(--marge);top:10px;bottom:10px;
    z-index:5;width:auto;height:auto;
    background:var(--surface);
  }
  body[data-recherche="ouverte"] .recherche .recherche-fermer{display:inline-flex}
  .toasts{left:12px;right:12px;bottom:12px;width:auto}
  .cartouche-hote{right:12px;left:12px;bottom:12px;width:auto}
}


/* ======================================================== IMPRESSION == */
@media print{
  .lampe,.toasts,.bandeaux,.cartouche-hote,.panneau-droit,.voile-panneau{display:none !important}
  body[data-cadre="complet"]{height:auto;overflow:visible}
}


/* ================================================ MOINS DE MOUVEMENT == */
/* La charte coupe déjà les durées. On fige ce qui, coupé, clignoterait. */
@media (prefers-reduced-motion:reduce){
  .progression[data-indeterminee] .progression-rail i{width:100%;opacity:.4;animation:none}
  .squelette-ligne i{animation:none;background:var(--fond-creux)}
  .point-attente{animation:none}
}


/* ============================================ COMPOSANTS DES PARTAGES == */
/* public/app/ui.js : interrupteur, champNombre, choixDate, tuile,
   menuContextuel (docs/partages-avances.md §12.8). */
.interrupteur-champ{margin:0 0 18px;display:grid;gap:6px}
.interrupteur-champ .champ-aide{padding-left:56px}
.interrupteur{
  display:inline-flex;align-items:center;gap:14px;justify-self:start;
  padding:4px 0;border:0;background:none;color:var(--texte);
  font:inherit;font-size:.97rem;line-height:1.4;text-align:left;cursor:pointer;
}
.interrupteur:disabled{opacity:.55;cursor:not-allowed}
.interrupteur-piste{
  position:relative;flex:none;width:42px;height:24px;border-radius:var(--r-pastille);
  background:var(--fond-creux);border:1px solid var(--trait-net);box-shadow:var(--creux-ombre);
  transition:background .18s var(--sortie),border-color .18s var(--sortie);
}
.interrupteur-pastille{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--texte-doux);transition:transform .18s var(--sortie),background .18s var(--sortie);
}
.interrupteur[aria-checked="true"] .interrupteur-piste{background:var(--accent-aplat);border-color:var(--accent-aplat)}
.interrupteur[aria-checked="true"] .interrupteur-pastille{transform:translateX(18px);background:var(--sur-accent)}
.interrupteur:focus-visible{outline:none}
.interrupteur:focus-visible .interrupteur-piste{outline:2px solid var(--accent);outline-offset:2px}

.champ input.champ-nombre{max-width:12ch;font-variant-numeric:tabular-nums}

.tuile{
  display:grid;gap:4px;padding:14px 16px;min-width:0;
  background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-bloc);
}
.tuile p{margin:0}
.tuile-libelle{font:400 11.5px/1.5 var(--f-technique);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible)}
.tuile-valeur{font-size:1.45rem;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tuile-detail{font-size:.85rem;color:var(--texte-faible)}

.choix-date-popup{width:auto;max-width:calc(100vw - 16px);padding:14px;gap:12px;overflow:auto}
.choix-date-raccourcis{display:flex;flex-wrap:wrap;gap:8px}
.choix-date-nav{display:flex;justify-content:space-between}
.choix-date-mois{display:grid;gap:18px}
.choix-date-mois.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.choix-date-grille{border-collapse:collapse;margin:0 auto}
.choix-date-grille caption{padding:0 0 8px;font-weight:500;text-transform:capitalize}
.choix-date-grille th{padding:2px 0 6px;font:400 11px/1 var(--f-technique);color:var(--texte-faible);text-transform:uppercase}
.choix-date-grille td{padding:1px;text-align:center}
.choix-date-jour{
  width:36px;height:34px;border:0;border-radius:var(--r-net);background:none;
  color:var(--texte);font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;cursor:pointer;
}
.choix-date-jour:hover:not(:disabled){background:var(--fond-creux)}
.choix-date-jour:disabled{color:var(--texte-faible);opacity:.45;cursor:default}
.choix-date-jour[aria-pressed="true"]{background:var(--accent-aplat);color:var(--sur-accent);font-weight:600}
.choix-date-jour:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.choix-date-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;border-top:1px solid var(--trait)}
.choix-date-libelle-heure{display:inline-flex;align-items:center;gap:10px;font-size:.93rem}
.choix-date-heure{
  width:7ch;padding:8px 10px;border:1px solid var(--trait-net);border-radius:10px;background:var(--fond-creux);
  color:var(--texte);font:400 .95rem var(--f-technique);font-variant-numeric:tabular-nums;
}
.choix-date-heure:focus{outline:2px solid var(--accent);outline-offset:1px}

.menu-contextuel{position:fixed;z-index:130;top:0;left:0;right:auto}
.menu-contextuel [role=menuitem]:disabled{opacity:.5;cursor:not-allowed}
.menu-contextuel [role=menuitem].danger{color:var(--c-danger)}