/* ==========================================================================
   DOSSIER SOS VILLAGES D'ENFANTS — design « glass lisible »
   Principe : le verre reste décoratif, jamais devant du texte.
   Surfaces de texte opaques, contrastes élevés, aucune surcharge visuelle.
   Palette « Night Football » : #1a1a2e · #00d4aa · #e94560 · #ffd700
   ========================================================================== */
:root{
  --fond:#131530;
  --fond-2:#191c38;
  /* surfaces en verre : translucides, texte toujours lisible dessus */
  --surface:rgba(32,36,62,.72);
  --surface-2:rgba(41,46,78,.68);
  --surface-3:rgba(52,58,96,.7);
  --entete:rgba(21,24,44,.9);
  --bord:rgba(255,255,255,.14);
  --bord-fort:rgba(255,255,255,.24);
  --txt:#f4f5fa;
  --txt2:#c2c7dc;
  --txt3:#9298b4;
  --accent:#00d4aa;
  --accent-sombre:#04231e;
  --or:#ffd700;
  --rouge:#e94560;
  --orange:#ff9f43;
  --vert:#2fd68a;
  --bleu:#5aa9ff;
  --violet:#a98bff;
  --r:18px;
  --r-s:12px;
  --ombre:0 14px 40px rgba(0,0,0,.38);
  /* reflet supérieur : la signature du verre Apple */
  --reflet:inset 0 1px 0 rgba(255,255,255,.10);
  --flou:blur(22px) saturate(170%);
  --flou-leger:blur(14px) saturate(150%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--txt);
  font:16px/1.66 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#4de8c6}
strong,b{font-weight:660}
.discret{color:var(--txt3);font-size:.86em}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- fond : halos très discrets, jamais derrière du texte ---------- */
.fond{position:fixed;inset:0;z-index:-1;overflow:hidden;opacity:1}
.fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,21,48,.55),rgba(19,21,48,.86))}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;animation:derive 30s ease-in-out infinite}
.b1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#00d4aa,transparent 66%)}
.b2{width:40vw;height:40vw;right:-10vw;top:2vh;background:radial-gradient(circle,#5aa9ff,transparent 66%);animation-delay:-10s}
.b3{width:42vw;height:42vw;left:20vw;bottom:-18vw;background:radial-gradient(circle,#e94560,transparent 66%);animation-delay:-18s}
@keyframes derive{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3vw,2vh) scale(1.06)}66%{transform:translate(-2vw,3vh) scale(.96)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* ==========================================================================
   EN-TÊTE — barre d'application compacte + bandeau d'onglets soulignés
   · la barre (marque, catégories, actions) défile puis disparaît
   · le bandeau d'onglets reste collé en haut : 40 px occupés en continu
   ========================================================================== */
.entete{
  position:sticky;top:0;z-index:40;height:56px;background:var(--entete);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  box-shadow:0 6px 26px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);
}
/* Barre d'en-tête. Nom VOLONTAIREMENT distinct de `.barre` (la barre de filtres des
   pages) : deux composants qui partagent un nom de classe se contaminent — ici
   l'en-tête recevait `display:flex` et la barre de filtres recevait le padding de
   l'en-tête. */
.barre-entete{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:center;gap:14px;height:100%;padding:0 clamp(12px,2.4vw,26px);
}
.marque{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.marque-icone{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,rgba(0,212,170,.22),rgba(90,169,255,.16));
  border:1px solid var(--bord-fort);font-size:17px;
}
.marque-texte{display:flex;flex-direction:column;min-width:0}
.marque-texte strong{font-size:.93rem;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marque-texte small{color:var(--txt3);font-size:.71rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* contrôle segmenté : les 3 catégories, toujours visibles, formant un seul bloc */
.cats{
  display:flex;gap:3px;padding:3px;border-radius:12px;justify-self:center;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid var(--bord);
}
.cat{
  padding:7px 16px;border-radius:9px;white-space:nowrap;font-size:.8rem;
  font-weight:650;color:var(--txt3);text-decoration:none;
  transition:background .16s,color .16s;
}
.cat:hover{color:var(--txt)}
.cat.actif{
  color:var(--accent-sombre);background:linear-gradient(140deg,#3fe6c4,#00d4aa);
  box-shadow:var(--reflet);font-weight:700;
}

.entete-actions{display:flex;gap:8px;flex:none;align-items:center}
.puce-action{
  font-size:.79rem;padding:7px 12px;border-radius:100px;background:var(--surface-2);
  border:1px solid var(--bord);color:var(--txt);white-space:nowrap;
}
.puce-action:hover{background:var(--surface-3);border-color:var(--bord-fort)}
.puce-action.alerte{background:rgba(233,69,96,.16);border-color:rgba(233,69,96,.42);color:#ff9aab}
.puce-action.alerte:hover{background:rgba(233,69,96,.26)}
.puce-action.discret{background:transparent;color:var(--txt2)}

/* bandeau d'onglets : souligné (léger), défilable, collé sous la barre */
.nav{
  position:sticky;top:56px;z-index:40;background:var(--entete);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);
  border-bottom:1px solid var(--bord);
  box-shadow:0 10px 22px -16px rgba(0,0,0,.9);
}
.nav-liens{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding:0 clamp(8px,2.4vw,22px);
}
.nav-liens::-webkit-scrollbar{display:none}
.pill{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
  padding:12px 13px;font-size:.85rem;color:var(--txt3);text-decoration:none;
  background:none;border:0;border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s;
}
.pill:hover{color:var(--txt)}
.pill.actif{color:var(--txt);font-weight:700;border-bottom-color:var(--accent)}
.pill.actif .badge{background:var(--accent-sombre);color:#7df0d8}
.badge{background:var(--rouge);color:#fff;border-radius:100px;font-size:.68rem;padding:1px 7px;font-weight:700}

/* téléphone : la barre ne reste PAS collée (elle ne mange pas d'écran en continu),
   seul le bandeau d'onglets reste, tout en haut, sur 40 px. */
@media (max-width:760px){
  .entete{position:static;height:auto}
  .nav{top:0}
  .barre-entete{
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
    gap:8px 10px;height:auto;padding:9px 12px 10px;
  }
  .marque{grid-column:1;grid-row:1}
  .entete-actions{grid-column:2;grid-row:1}
  .cats{
    grid-column:1 / -1;grid-row:2;justify-self:stretch;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  }
  .cat{text-align:center;padding:9px 4px;font-size:.79rem}
  .pill{padding:12px 11px;font-size:.83rem}
}
@media (max-width:430px){
  .marque-texte small{display:none}
  .cat{font-size:.75rem;padding:8px 3px}
}

/* ---------- structure ---------- */
.contenu{max-width:1200px;margin:0 auto;padding:clamp(22px,3.4vw,42px) clamp(14px,3vw,34px) 96px}
.titre-page{margin:0 0 6px;font-size:clamp(1.6rem,3.6vw,2.2rem);letter-spacing:-.028em;line-height:1.14;font-weight:700}
.chapeau{color:var(--txt2);max-width:78ch;margin:0 0 28px;font-size:1.02rem}
section{margin:36px 0}
h2.sec{font-size:1.2rem;letter-spacing:-.015em;margin:0 0 6px;display:flex;align-items:center;gap:10px;font-weight:680}
h2.sec + .aide{color:var(--txt3);font-size:.9rem;margin:0 0 16px;max-width:82ch}
h3{font-size:1.02rem;letter-spacing:-.01em;margin:0 0 8px;font-weight:660}
p{margin:.55em 0}

/* ---------- cartes : surface opaque, verre en accent seulement ---------- */
.carte{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--ombre),var(--reflet);
  backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger);
}
.carte.carte-lien{transition:transform .18s,border-color .18s,background .18s;display:block;color:inherit}
.carte.carte-lien:hover{transform:translateY(-3px);border-color:var(--bord-fort);background:var(--surface-2)}
.grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grille.serre{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.grille.large{grid-template-columns:repeat(auto-fill,minmax(370px,1fr))}

/* ---------- KPI ---------- */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.75}
.kpi .valeur{font-size:clamp(1.6rem,3.4vw,2.05rem);font-weight:720;letter-spacing:-.032em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .libelle{color:var(--txt2);font-size:.87rem;margin-top:3px}
.kpi .note{color:var(--txt3);font-size:.76rem;margin-top:9px}
.kpi.accent .valeur{color:var(--accent)}
.kpi.rouge .valeur{color:#ff7089}
.kpi.vert .valeur{color:var(--vert)}
.kpi.or .valeur{color:var(--or)}

/* ---------- étiquettes ---------- */
.et{display:inline-block;text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;padding:3px 9px;
  border-radius:100px;background:var(--surface-3);border:1px solid var(--bord);color:var(--txt2);font-weight:640}
.et.critique{background:rgba(233,69,96,.2);border-color:rgba(233,69,96,.5);color:#ff97a8}
.et.elevee{background:rgba(255,159,67,.18);border-color:rgba(255,159,67,.46);color:#ffc28a}
.et.moyenne{background:rgba(255,215,0,.16);border-color:rgba(255,215,0,.42);color:#ffe370}
.et.a_verifier{background:rgba(90,169,255,.17);border-color:rgba(90,169,255,.45);color:#9cc7ff}
.et.vert{background:rgba(47,214,138,.17);border-color:rgba(47,214,138,.45);color:#79e8b7}
.et.gris{color:var(--txt3);background:var(--surface-2)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--bord-fort);color:var(--txt);font:inherit;font-size:.86rem;
  transition:background .16s,transform .16s}
.btn:hover{background:var(--surface-3);transform:translateY(-1px)}
.btn.primaire{background:linear-gradient(140deg,#3fe6c4,#00d4aa);color:var(--accent-sombre);border-color:transparent;font-weight:680}
.btn.petit{padding:6px 12px;font-size:.8rem}
.btn.discret{color:var(--txt2)}
.btn.filtre-carte.actif{background:linear-gradient(140deg,#3fe6c4,#00d4aa);color:var(--accent-sombre);border-color:transparent;font-weight:680}

/* ---------- tableaux ---------- */
.enveloppe{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bord);border-radius:var(--r);
  background:var(--surface);backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger)}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:560px}
thead th{position:sticky;top:0;background:var(--surface-2);text-align:left;padding:12px 14px;font-size:.73rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt3);border-bottom:1px solid var(--bord);cursor:pointer;white-space:nowrap}
thead th:hover{color:var(--txt)}
tbody td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
tbody tr:hover{background:rgba(255,255,255,.04)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.neg{color:#ff8199}
td.pos{color:#6fe6ae}
.cellule-principale{font-weight:620}
.cellule-secondaire{color:var(--txt3);font-size:.82rem;overflow-wrap:anywhere}
/* noms de fichiers : un nom long et sans espace ne doit jamais elargir la page (390 px) */
.nom-fichier{overflow-wrap:anywhere;word-break:break-word}

/* ---------- filtres ---------- */
.barre{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.barre input[type=search],.barre select{background:var(--surface-2);border:1px solid var(--bord);color:var(--txt);
  border-radius:100px;padding:10px 16px;font:inherit;font-size:.87rem;min-width:155px}
.barre input[type=search]{flex:1;min-width:210px}
.barre input:focus,.barre select:focus{outline:2px solid rgba(0,212,170,.55);outline-offset:1px}
.compteur{color:var(--txt3);font-size:.82rem;margin-left:auto}

/* ---------- lexique / bulle ---------- */
.lex{background:rgba(0,212,170,.11);border-bottom:1px dashed rgba(0,212,170,.5);cursor:help;border-radius:3px;padding:0 2px;color:inherit}
.lex:hover{background:rgba(0,212,170,.22)}
.bulle{position:fixed;z-index:90;max-width:350px;padding:14px 16px;border-radius:14px;
  background:#20233a;border:1px solid var(--bord-fort);box-shadow:0 16px 44px rgba(0,0,0,.55);
  font-size:.85rem;line-height:1.55;color:var(--txt)}
.bulle strong{display:block;margin-bottom:6px;color:var(--accent);font-size:.88rem}
.bulle small{display:block;margin-top:8px;color:var(--txt3);font-size:.77rem}

/* ---------- fenêtre pièce ---------- */
.voile{position:fixed;inset:0;z-index:100;background:rgba(6,7,16,.8);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);display:grid;place-items:center;padding:clamp(8px,2.5vw,32px)}
.voile[hidden],.bulle[hidden]{display:none !important}
.fenetre{width:min(1180px,100%);height:min(92vh,100%);display:flex;flex-direction:column;
  background:rgba(24,27,48,.94);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--bord-fort);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.66),var(--reflet)}
.fenetre-tete{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:15px 20px;
  border-bottom:1px solid var(--bord);background:var(--surface-2)}
.fenetre-tete h3{margin:0;font-size:1rem}
.fenetre-tete p{margin:3px 0 0}
.fenetre-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fenetre-corps{flex:1;min-height:0;background:#33364d;display:grid;place-items:center;overflow:auto}
.fenetre-corps iframe{width:100%;height:100%;border:0;background:#fff}
.fenetre-corps img{max-width:100%;max-height:100%;display:block}
.message-piece{padding:34px;text-align:center;color:#e8e8f0;max-width:540px}
.message-piece a{color:var(--accent)}

/* ---------- incohérences ---------- */
.inc{border-left:3px solid var(--bord-fort)}
.inc.critique{border-left-color:var(--rouge)}
.inc.elevee{border-left-color:var(--orange)}
.inc.moyenne{border-left-color:var(--or)}
.inc.a_verifier{border-left-color:var(--bleu)}
.inc-tete{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.inc-rang{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--surface-3);
  border:1px solid var(--bord-fort);font-size:.82rem;font-weight:700;flex:none}
details{margin-top:13px}
summary{cursor:pointer;color:var(--accent);font-size:.87rem;list-style:none;font-weight:560}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ "}
details[open] summary::before{content:"▾ "}
.preuve{background:rgba(0,0,0,.3);border:1px solid var(--bord);border-radius:var(--r-s);padding:12px 14px;margin:9px 0;font-size:.86rem}
.preuve .piece{color:var(--accent);font-weight:620;font-size:.82rem;display:block;margin-bottom:4px}
/* une piece citee est ouvrable : soit elle s'ouvre dans la fenetre, soit elle renvoie
   vers la page qui liste toutes les pieces du meme type */
a.piece.lien-piece-piece{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;text-decoration-color:rgba(0,212,170,.55);cursor:pointer}
a.piece.lien-piece-piece:hover{color:#8ff2dd;text-decoration-color:#8ff2dd}
a.piece.lien-piece-piece .ouverture{font-weight:500;font-size:.76rem;color:var(--txt3)}
.courrier{white-space:pre-wrap;font-size:.85rem;line-height:1.68;background:rgba(0,0,0,.36);border:1px solid var(--bord);
  border-radius:var(--r-s);padding:15px;max-height:350px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;color:#e6e8f2}

/* ==========================================================================
   CALENDRIER — vue mensuelle type agenda, barres de période cliquables
   ========================================================================== */
.cal-annee{margin-bottom:10px}
.cal-mois{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:16px 16px 12px;box-shadow:var(--ombre),var(--reflet);
  backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger);
}
.cal-mois-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cal-mois-tete h3{margin:0;font-size:1.02rem;text-transform:capitalize;letter-spacing:-.01em}
.cal-mois-tete .totaux{font-size:.78rem;color:var(--txt3);font-variant-numeric:tabular-nums;text-align:right}
.cal-mois-tete .totaux b{color:var(--accent);font-weight:680}
.cal-entetes{display:grid;grid-template-columns:repeat(7,1fr);gap:0 4px;margin-bottom:4px}
.cal-entetes span{text-align:center;font-size:.64rem;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.06em;font-weight:680;padding:2px 0}
.cal-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 4px;margin-bottom:3px;position:relative}
.cal-sem.avec-bandes{grid-auto-rows:auto;row-gap:2px}
/* une barre de période : elle part du premier jour et va au dernier jour */
.cal-bande{
  grid-column:1/8;height:25px;border-radius:7px;display:flex;align-items:center;gap:7px;
  padding:0 9px;font-size:.73rem;font-weight:640;cursor:pointer;overflow:hidden;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);transition:filter .15s,transform .15s;
}
.cal-bande:hover{filter:brightness(1.22);transform:translateY(-1px)}
.cal-bande.travaille{background:linear-gradient(90deg,rgba(0,212,170,.92),rgba(0,212,170,.66));color:#04231e}
.cal-bande.sansbulletin{background:linear-gradient(90deg,rgba(233,69,96,.92),rgba(233,69,96,.66));color:#fff}
.cal-bande.sanscontrat{background:linear-gradient(90deg,rgba(255,159,67,.92),rgba(255,159,67,.66));color:#33200a}
.cal-bande.incertain{background:linear-gradient(90deg,rgba(169,139,255,.9),rgba(169,139,255,.62));color:#1c1436}
.cal-bande .duree{font-variant-numeric:tabular-nums}
.cal-bande .montant{font-variant-numeric:tabular-nums;opacity:.94}
.cal-bande .drapeau{font-size:.75rem;opacity:.9}
.cal-num{
  aspect-ratio:1/1;display:grid;place-items:center;border-radius:7px;font-size:.76rem;
  color:var(--txt3);background:rgba(255,255,255,.028);font-variant-numeric:tabular-nums;
}
.cal-num.hors{opacity:.34}
.cal-num.plein{background:rgba(0,212,170,.09);color:var(--txt2)}
.cal-num.aujourdhui{outline:1px solid var(--or);color:var(--or);font-weight:700}
.cal-legende{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--txt2);margin:0 0 18px}
.cal-legende i{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:7px;vertical-align:-1px}
.cal-nav{display:flex;align-items:center;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.cal-nav .an{font-size:.85rem;color:var(--txt2);padding:7px 13px;border-radius:100px;background:var(--surface-2);
  border:1px solid var(--bord);cursor:pointer}
.cal-nav .an.actif{background:linear-gradient(140deg,#3fe6c4,#00d4aa);color:var(--accent-sombre);border-color:transparent;font-weight:680}
.cal-vide{padding:22px;text-align:center;color:var(--txt3);font-size:.86rem}

/* anciennes classes conservées pour compatibilité */
.mois{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);padding:14px}
.jours{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.j{padding:5px 2px;border-radius:8px;text-align:center;font-size:.76rem;color:var(--txt3)}
.legende{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--txt2);margin:0 0 16px}
.legende i{width:11px;height:11px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* ---------- barres de statistiques ---------- */
.jauge{height:9px;border-radius:100px;background:rgba(255,255,255,.09);overflow:hidden;display:flex}
.jauge i{display:block;height:100%}
.barre-h{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:.85rem}
.barre-h .nom{width:155px;flex:none;color:var(--txt2)}
.barre-h .piste{flex:1;height:10px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.barre-h .piste i{display:block;height:100%;background:linear-gradient(90deg,#00d4aa,#5aa9ff)}
.barre-h .val{width:100px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)}

/* ---------- divers ---------- */
.note{background:rgba(0,212,170,.09);border:1px solid rgba(0,212,170,.3);border-radius:var(--r-s);padding:14px 16px;font-size:.89rem}
.note.alerte{background:rgba(233,69,96,.1);border-color:rgba(233,69,96,.36)}
.note.atention{background:rgba(255,159,67,.1);border-color:rgba(255,159,67,.36)}
ul.propre{padding-left:0;list-style:none;margin:12px 0}
ul.propre li{padding:8px 0 8px 27px;position:relative;border-bottom:1px solid rgba(255,255,255,.055)}
ul.propre li:last-child{border-bottom:0}
ul.propre li::before{content:"•";position:absolute;left:8px;color:var(--accent)}
ul.propre.manque li::before{content:"✗";color:var(--rouge);font-size:.82em}
ul.propre.ok li::before{content:"✓";color:var(--vert);font-size:.87em}
.pied{max-width:1200px;margin:0 auto;padding:28px clamp(14px,3vw,34px) 60px;border-top:1px solid var(--bord);color:var(--txt3);font-size:.81rem}
.pied p{max-width:94ch}
.lien-piece{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;padding:5px 11px;border-radius:100px;
  background:rgba(0,212,170,.12);border:1px solid rgba(0,212,170,.36);color:#5fe8cb;white-space:nowrap}
.lien-piece:hover{background:rgba(0,212,170,.24);color:#8ff2dd}

/* ---------- connexion ---------- */
.connexion{min-height:100vh;display:grid;place-items:center;padding:20px}
.connexion form{width:min(400px,100%)}
.connexion input{width:100%;margin:12px 0;background:var(--surface-2);border:1px solid var(--bord);color:var(--txt);
  border-radius:100px;padding:13px 18px;font:inherit}
.connexion input:focus{outline:2px solid rgba(0,212,170,.55);outline-offset:1px}

/* ---------- responsive ---------- */
@media (max-width:760px){
  /* (les anciennes regles d'en-tete propres a ce bloc ont ete retirees :
     l'en-tete est decrit integralement dans le bloc MOBILE plus bas) */
  .grille,.grille.serre,.grille.large{grid-template-columns:1fr}
  .barre-h .nom{width:100px}
  .fenetre{height:96vh;border-radius:14px}
  .fenetre-tete{flex-direction:column}
  .fenetre-actions{justify-content:flex-start}
  .contenu{padding-bottom:72px}
  .cal-bande{height:23px;font-size:.69rem;padding:0 6px}
  .cal-num{font-size:.7rem}
  .cal-mois{padding:13px 11px 10px}
}
@media print{
  .fond,.entete,.pied,.barre,.btn{display:none}
  body{background:#fff;color:#000}
  .carte,.enveloppe,.cal-mois{border-color:#999;background:#fff;box-shadow:none}
}

/* ==========================================================================
   LECTEUR DE PIÈCES (pdf.js) — le document s'affiche dans la fenêtre
   quel que soit le navigateur, mobile compris.
   ========================================================================== */
.lecteur{display:flex;flex-direction:column;height:100%;width:100%}
.lecteur-barre{
  display:flex;align-items:center;gap:9px;padding:10px 14px;flex-wrap:wrap;
  background:rgba(30,34,58,.82);backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger);
  border-bottom:1px solid var(--bord);
}
.lecteur-page{
  font-size:.83rem;color:var(--txt2);font-variant-numeric:tabular-nums;
  padding:5px 12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--bord);
}
.lecteur-page-zone{
  flex:1;min-height:0;overflow:auto;background:#3a3d55;
  display:flex;align-items:flex-start;justify-content:center;padding:14px;
  -webkit-overflow-scrolling:touch;
}
.lecteur-page-zone iframe{width:100%;height:100%;border:0;background:#fff;border-radius:8px}
.pdf-page{display:block;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);background:#fff}
.lecteur-attente{color:#e6e8f4;font-size:.9rem;margin:auto;text-align:center;padding:30px}
@media (max-width:760px){
  .lecteur-barre{padding:8px 10px;gap:6px}
  .lecteur-barre .btn.petit{padding:6px 10px;font-size:.76rem}
  .lecteur-page{font-size:.78rem;padding:4px 9px}
  .lecteur-page-zone{padding:8px}
}

/* ---------- CORRECTIF DE DÉBORDEMENT (cause du « pas responsive ») ----------
   Un élément de grille ou un flex enfant refuse de rétrécir sous la largeur de son
   contenu (min-width:auto). Un tableau large faisait donc élargir TOUTE la page. */
/* Protection contre le débordement horizontal. On utilise `clip` et NON `hidden` :
   `overflow-x:hidden` force `overflow-y` a devenir `auto`, ce qui transforme html et
   body en conteneurs de defilement — et annule alors `position:sticky` pour TOUS
   leurs enfants (l'en-tete ne se collait plus du tout). `clip` decoupe sans creer
   de conteneur de defilement. */
html,body{max-width:100%;overflow-x:clip}
.marque,.marque-texte,.entete-haut>*,.contenu>*,section,.carte,.enveloppe,.grille>*,
.nav,.nav-groupe,.nav-liens,.lecteur,.lecteur-page-zone{min-width:0}
.grille{grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.grille.serre{grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr))}
.grille.large{grid-template-columns:repeat(auto-fill,minmax(min(370px,100%),1fr))}
.enveloppe{max-width:100%}
.marque-texte strong,.marque-texte small{max-width:100%}
img,canvas,iframe,svg{max-width:100%}

/* ==========================================================================
   MOBILE — mise en page dédiée
   (L'ancien bouton de menu et son panneau repliable ont été supprimés : les trois
   catégories tiennent dans la barre, les onglets dans le bandeau collant.)
   ========================================================================== */
@media (max-width:760px){
  /* --- en-tête : barre compacte, titre tronqué proprement --- */
  /* grille plutot que flex : le titre ne peut plus etre ecrase a une largeur nulle */
  .marque{width:100%;gap:9px;overflow:hidden;min-width:0}
  .marque-texte{width:100%;overflow:hidden}
  .marque-icone{width:32px;height:32px;border-radius:10px;font-size:16px}
  .marque-texte strong{font-size:.88rem}
  .marque-texte small{display:none}
  .entete-actions{gap:6px;flex:0 0 auto}
  .entete-actions .puce-action{padding:7px 10px;font-size:.76rem}
  /* « Quitter » reste visible : il n'y a plus de panneau pour l'accueillir. */

  /* --- contenu : typographie et espacements mobiles --- */
  .contenu{padding:18px 12px 84px}
  .titre-page{font-size:1.42rem;line-height:1.2}
  .chapeau{font-size:.95rem;margin-bottom:20px}
  h2.sec{font-size:1.06rem}
  h2.sec + .aide{font-size:.86rem}
  section{margin:26px 0}
  .carte{padding:16px 15px;border-radius:15px}
  .grille,.grille.serre,.grille.large{gap:11px}
  .kpi .valeur{font-size:1.5rem}
  .barre{gap:8px}
  .barre input[type=search],.barre select{min-width:0;width:100%;padding:11px 15px}
  .compteur{margin-left:0;width:100%;text-align:left}
  .btn{padding:10px 15px;font-size:.85rem}
  .btn.petit{padding:8px 12px}

  /* --- tableaux : défilement horizontal propre, sans élargir la page --- */
  .enveloppe{border-radius:13px;-webkit-overflow-scrolling:touch;overflow-x:auto}
  table{font-size:.82rem;min-width:520px}
  thead th,tbody td{padding:9px 11px}

  /* --- fenêtre de consultation : plein écran sur téléphone --- */
  .voile{padding:0}
  .fenetre{width:100%;height:100%;max-height:100%;border-radius:0;border:0}
  .fenetre-tete{padding:12px 14px;gap:10px}
  .fenetre-tete h3{font-size:.94rem}
  .fenetre-actions{width:100%;justify-content:flex-start;gap:7px}
  .fenetre-actions .btn{flex:1 1 auto;justify-content:center}
  .lecteur-barre{padding:8px 10px;gap:6px}
  .lecteur-barre .btn.petit{flex:0 0 auto;padding:8px 11px}
  .lecteur-page-zone{padding:6px}

  /* --- lexique : bulle flottante remplacée par une feuille en bas d'écran --- */
  .bulle{
    left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    max-width:none;width:100%;border-radius:18px 18px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.6);
    animation:monte .2s ease-out;
    max-height:70vh;overflow-y:auto;
  }
  .bulle::after{
    content:"Toucher pour fermer";display:block;margin-top:12px;text-align:center;
    font-size:.74rem;color:var(--txt3);
  }
  .bulle strong{font-size:.98rem}
  .bulle{font-size:.92rem}
  @keyframes monte{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}

  /* --- calendrier --- */
  .cal-mois{padding:12px 10px 9px;border-radius:14px}
  .cal-mois-tete h3{font-size:.95rem}
  .cal-mois-tete .totaux{font-size:.74rem}
  .cal-bande{height:24px;font-size:.7rem;padding:0 7px;border-radius:6px}
  .cal-num{font-size:.72rem;border-radius:5px}
  .cal-nav{gap:6px}
  .cal-nav .an{padding:7px 12px;font-size:.8rem}
  .cal-legende{font-size:.78rem;gap:9px;flex-direction:column;gap:6px}
  .cal-entetes span{font-size:.6rem}
}

@media (max-width:430px){
  .cal-bande .montant{display:none}      /* sur très petit écran : jours seulement */
  .cal-bande{height:22px;font-size:.68rem}
}

@media (max-width:760px){.mot-anomalies{display:none}}

/* marque : sur téléphone, seul le nom du dossier reste (l'organisation est masquée
   pour garder la barre sur une seule ligne) */
@media (max-width:430px){
  .marque-texte strong{white-space:nowrap;line-height:1.2}
}

/* barres du calendrier : une couleur par site */
.cal-bande.lionangers{background:linear-gradient(90deg,rgba(0,212,170,.94),rgba(0,212,170,.66));color:#04231e}
.cal-bande.sainteluce{background:linear-gradient(90deg,rgba(90,169,255,.94),rgba(90,169,255,.66));color:#06162e}
.cal-bande .maison{font-weight:780;letter-spacing:-.01em;margin-right:2px}
.cal-bande .duree,.cal-bande .montant{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .cal-bande .maison{font-size:.74rem}
  .cal-bande .montant{display:none}
}

.fiche-agenda{padding:4px 2px;text-align:left;width:100%}
.fenetre-corps:has(.fiche-agenda){background:var(--fond-2);display:block;padding:18px;overflow:auto}


/* ==========================================================================
   CALENDRIER — rendu type Google Agenda : barres continues, titre répété
   ========================================================================== */
.cal-sem{grid-template-columns:repeat(7,1fr);gap:3px 0}
.cal-num{margin:0 2px;border-radius:6px}
.cal-bande{
  margin:0 2px;height:23px;border-radius:6px;font-size:.72rem;font-weight:640;
  letter-spacing:-.005em;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.cal-bande .maison{font-weight:760}
.cal-bande.travaille{background:linear-gradient(180deg,#00d4aa,#00bfa0);color:#04231e}
.cal-bande.lionangers{background:linear-gradient(180deg,#00d4aa,#00bfa0);color:#04231e}
.cal-bande.sainteluce{background:linear-gradient(180deg,#5aa9ff,#3f8fe8);color:#06162e}
.cal-bande.sansbulletin{background:linear-gradient(180deg,#e94560,#d13a54);color:#fff}
.cal-bande.sanscontrat{background:linear-gradient(180deg,#ff9f43,#e88b2f);color:#33200a}
.cal-mois-tete .totaux b{font-weight:760}
.cal-entetes{margin-bottom:6px}

/* (L'ancien menu mobile plein écran a été retiré : les 3 catégories et les onglets
   sont désormais accessibles directement dans la barre et le bandeau.) */

/* ==========================================================================
   CALENDRIER v2 — un mois à la fois, barres DANS les cases des jours
   (inspiré de la vue mensuelle Google Agenda sur mobile)
   ========================================================================== */
.cal-barre{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--bord);border-radius:14px;
  padding:11px 14px;margin-bottom:18px;box-shadow:var(--reflet);
  backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger);
}
.cal-modes{display:flex;gap:4px;background:rgba(0,0,0,.25);padding:4px;border-radius:100px}
.cal-modes .mode{
  border:0;background:transparent;color:var(--txt2);font:inherit;font-size:.82rem;font-weight:560;
  padding:7px 14px;border-radius:100px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.cal-modes .mode:hover{color:var(--txt)}
.cal-modes .mode.actif{background:linear-gradient(140deg,#3fe6c4,#00d4aa);color:var(--accent-sombre);font-weight:700}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav .fleche{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--bord);background:var(--surface-2);
  color:var(--txt);font-size:.95rem;cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.cal-nav .fleche:hover{background:var(--surface-3);border-color:var(--bord-fort)}
.cal-titre{font-size:.98rem;font-weight:700;min-width:150px;text-align:center;letter-spacing:-.01em}
.cal-barre .compteur{margin-left:auto}
.cal-barre select{
  background:var(--surface-2);border:1px solid var(--bord);color:var(--txt);border-radius:100px;
  padding:9px 14px;font:inherit;font-size:.84rem;
}

/* --- carte d'un mois --- */
.mois-carte{
  background:var(--surface);border:1px solid var(--bord);border-radius:16px;padding:14px 14px 10px;
  box-shadow:var(--ombre),var(--reflet);max-width:820px;margin:0 auto 18px;
  backdrop-filter:var(--flou-leger);-webkit-backdrop-filter:var(--flou-leger);
}
.mois-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.mois-tete h3{margin:0;font-size:1.06rem;font-weight:720;letter-spacing:-.015em}
.mois-totaux{display:flex;gap:12px;align-items:baseline;font-size:.8rem;color:var(--txt3);flex-wrap:wrap}
.mois-totaux b{color:var(--accent);font-weight:720;font-size:.86rem}
.mois-totaux .vide{color:var(--txt3)}
.suite-info{font-size:.74rem;color:var(--orange)}
.entetes-semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:5px}
.entetes-semaine span{
  text-align:center;font-size:.63rem;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;
}
/* --- une semaine : les cases + les barres posées DEDANS --- */
.semaine{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.case-jour{
  border-radius:9px;background:rgba(255,255,255,.045);position:relative;padding:3px 5px;
}
.case-jour.hors{opacity:.32}
.case-jour.travaille{background:rgba(0,212,170,.12)}
.case-jour.auj{box-shadow:inset 0 0 0 1px var(--or)}
.num-jour{font-size:.7rem;color:var(--txt3);font-weight:620;font-variant-numeric:tabular-nums;line-height:1}
.case-jour.travaille .num-jour{color:var(--txt2)}
.case-jour.auj .num-jour{color:var(--or);font-weight:800}
/* --- la barre : elle flotte au-dessus des cases, à l'intérieur du bloc semaine --- */
.evt{
  position:absolute;height:19px;border-radius:6px;display:flex;align-items:center;gap:5px;
  padding:0 7px;font-size:.69rem;font-weight:640;overflow:hidden;white-space:nowrap;
  cursor:pointer;z-index:3;border:0;box-shadow:0 1px 3px rgba(0,0,0,.32);
  transition:filter .14s,transform .14s;
}
.evt:hover{filter:brightness(1.16);transform:translateY(-1px)}
.evt.lionangers{background:linear-gradient(180deg,#00d4aa,#00bfa0);color:#04231e}
.evt.sainteluce{background:linear-gradient(180deg,#5aa9ff,#3f8fe8);color:#06162e}
.evt.sansbulletin{background:linear-gradient(180deg,#e94560,#d13a54);color:#fff}
.evt.sanscontrat{background:linear-gradient(180deg,#ff9f43,#e88b2f);color:#33200a}
.evt .maison{font-weight:800}
.evt .duree,.evt .montant{font-variant-numeric:tabular-nums;opacity:.92}
.evt .fleche-suite{font-size:.8rem;opacity:.85;flex:none}
.cal-vide{padding:26px;text-align:center;color:var(--txt3)}

@media (max-width:760px){
  .cal-barre{gap:8px;padding:10px;border-radius:13px}
  .cal-modes{width:100%;justify-content:space-between}
  .cal-modes .mode{padding:8px 10px;font-size:.78rem;flex:1;text-align:center}
  .cal-nav{width:100%;justify-content:space-between}
  .cal-titre{flex:1;min-width:0;font-size:.94rem}
  .cal-barre select{flex:1}
  .cal-barre .compteur{margin-left:0;width:100%;text-align:center;font-size:.76rem}
  .mois-carte{padding:11px 9px 8px;border-radius:13px}
  .mois-tete h3{font-size:.98rem}
  .mois-totaux{font-size:.75rem;gap:8px}
  .semaine{gap:3px}
  .case-jour{border-radius:7px;padding:2px 4px}
  .num-jour{font-size:.66rem}
  .evt{height:17px;font-size:.65rem;padding:0 5px;border-radius:5px}
  .evt .montant{display:none}
  .entetes-semaine span{font-size:.58rem}
}
@media (max-width:430px){ .evt .duree{display:none} }

/* pastille de lexique : discrète, jamais un vrai soulignement */
.lex{
  background:rgba(0,212,170,.13);border-bottom:1px dotted rgba(0,212,170,.55);
  border-radius:3px;padding:0 2px;cursor:help;color:inherit;
}
.lex:hover{background:rgba(0,212,170,.26);border-bottom-style:solid}

/* ================================================================
   ARCHIVE DES MAILS — presentation type « client de messagerie »
   ================================================================ */
.mail-filtres{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:20px 0 12px;
  padding:14px;border-radius:16px;background:rgba(32,36,62,.55);
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.mail-filtres input[type=search],.mail-filtres select{
  padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(12,14,30,.75);color:#e8ecff;font:14px inherit;min-height:40px}
.mail-recherche{flex:1 1 260px;min-width:200px}
.mail-filtres select{flex:0 1 auto}
.mail-case{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#b9c0e0;white-space:nowrap;cursor:pointer}
.mail-case input{width:17px;height:17px;accent-color:#00d4aa}
.mail-compteur{margin:0 0 14px;font-size:13.5px;color:#b9c0e0}

.mail-grille{display:grid;grid-template-columns:210px minmax(280px,1fr) minmax(360px,1.5fr);
  gap:14px;align-items:start}
.mail-colonne{border-radius:18px;background:rgba(32,36,62,.5);
  border:1px solid rgba(255,255,255,.08);padding:14px;min-width:0}
.mail-dossiers{max-height:78vh;overflow:auto}
.mail-liste{max-height:78vh;overflow:auto}
.mail-lecture{max-height:78vh;overflow:auto}

.mail-arbre{list-style:none;margin:0;padding:0}
.mail-arbre a{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:9px;
  color:#c6cce8;text-decoration:none;font-size:13.5px;line-height:1.3}
.mail-arbre a:hover{background:rgba(0,212,170,.12);color:#fff}
.mail-arbre a.actif{background:rgba(0,212,170,.2);color:#fff;font-weight:600}
.mail-arbre b{font-size:11.5px;color:#7f8bb5;font-weight:600}
.mail-arbre span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mail-messages{list-style:none;margin:0;padding:0}
.mail-messages li{border-bottom:1px solid rgba(255,255,255,.06)}
.mail-messages li:last-child{border-bottom:0}
.mail-messages a{display:block;padding:9px 10px;text-decoration:none;color:inherit;border-radius:10px}
.mail-messages a:hover{background:rgba(255,255,255,.05)}
.mail-messages li.selection a{background:rgba(0,212,170,.16);box-shadow:inset 3px 0 0 #00d4aa}
.mail-l1{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#8b95bd}
.mail-exp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;text-align:right}
.mail-sujet{font-size:13.5px;font-weight:600;color:#eef1ff;margin:2px 0;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mail-l2{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#7f8bb5}
.mail-dossier-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-pj{color:#ffd700;white-space:nowrap}
.mail-vide-msg{padding:16px;color:#b9c0e0;font-size:13.5px}
.mail-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;font-size:13px;color:#b9c0e0}

.mail-entete h2{margin:0 0 4px;font-size:19px;line-height:1.3;color:#fff}
.mail-champs{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:12px 0 0;font-size:13px}
.mail-champs dt{color:#8b95bd;font-weight:600}
.mail-champs dd{margin:0;color:#dde2f7;overflow-wrap:anywhere}

.mail-pieces{margin:14px 0}
.mail-pieces-liste{display:flex;flex-wrap:wrap;gap:8px}
.mail-piece{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.28);font-size:12.5px;max-width:100%}
.mail-piece a{color:#ffd700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-piece a:hover{text-decoration:underline}
.mail-dl{color:#c6cce8 !important;font-weight:700}

.mail-corps{width:100%;height:430px;border:1px solid rgba(255,255,255,.1);
  border-radius:14px;background:#12142a;margin-top:12px;display:block}

.mail-fil{margin-top:16px}
.mail-fil ul{list-style:none;margin:0;padding:0}
.mail-fil a{display:flex;gap:12px;padding:7px 10px;border-radius:9px;text-decoration:none;
  color:#c6cce8;font-size:13px}
.mail-fil a:hover{background:rgba(255,255,255,.05)}
.mail-fil li.actif a{background:rgba(0,212,170,.18);color:#fff;font-weight:600}

.mail-accueil{text-align:center;padding:60px 20px;color:#b9c0e0}
.disque-grand{font-size:44px;margin:0 0 10px}
.connexion-carte input[type=password]{width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);background:rgba(12,14,30,.75);color:#e8ecff;font:15px inherit;margin-top:7px}
.alerte-boite{padding:10px 13px;border-radius:10px;background:rgba(233,69,96,.16);
  border:1px solid rgba(233,69,96,.4);color:#ffb3c1;font-size:13.5px}

@media (max-width:1080px){
  .mail-grille{grid-template-columns:190px 1fr}
  .mail-lecture{grid-column:1 / -1;max-height:none}
}
@media (max-width:760px){
  .mail-grille{grid-template-columns:1fr}
  .mail-dossiers,.mail-liste{max-height:none}
  .mail-dossiers{order:2}
  .mail-liste{order:1}
  .mail-lecture{order:3}
  .mail-corps{height:360px}
  .mail-filtres{padding:11px}
  .mail-filtres select{flex:1 1 140px}
}
.mail-lien-invitations{margin:-6px 0 12px;font-size:13px}
.mail-lien-invitations a{color:#00d4aa;text-decoration:none}
.mail-lien-invitations a:hover{text-decoration:underline}

/* ================================================================
   ARCHIVE MAIL — corrections de mise en page (pleine largeur, mobile)
   ================================================================ */
/* la page mail occupe toute la largeur disponible (le dossier reste a 1200px) */
.contenu:has(.mail-grille){
  max-width:100%;
  padding-left:clamp(10px,1.4vw,22px);
  padding-right:clamp(10px,1.4vw,22px);
}
.mail-grille{grid-template-columns:clamp(180px,15vw,240px) minmax(300px,1.05fr) minmax(420px,1.7fr);gap:12px}
.mail-colonne{max-height:calc(100vh - 250px)}
.mail-dossiers,.mail-liste{max-height:calc(100vh - 250px)}
.mail-lecture{max-height:calc(100vh - 250px)}
.mail-corps{height:min(62vh,620px)}
/* barres de defilement discretes */
.mail-colonne{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.mail-colonne::-webkit-scrollbar{width:8px;height:8px}
.mail-colonne::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:8px}
.mail-colonne::-webkit-scrollbar-track{background:transparent}
.mail-messages li a{padding:10px 12px}
.mail-sujet{font-size:13.8px}

@media (max-width:1200px){
  .mail-grille{grid-template-columns:200px 1fr}
  .mail-lecture{grid-column:1 / -1;max-height:none}
}
@media (max-width:760px){
  /* sur mobile : plus aucune barre de defilement interne, tout coule normalement */
  .contenu:has(.mail-grille){padding-left:10px;padding-right:10px}
  .mail-grille{grid-template-columns:1fr;gap:10px}
  .mail-dossiers,.mail-liste,.mail-lecture{
    max-height:none;overflow:visible;border-radius:14px;padding:12px}
  .mail-dossiers{order:3}
  .mail-liste{order:1}
  .mail-lecture{order:2}
  .mail-arbre{max-height:none;overflow:visible}
  .mail-corps{height:52vh}
  .mail-filtres{gap:8px;padding:11px}
  .mail-filtres input[type=search],.mail-filtres select{width:100%;flex:1 1 100%}
  .mail-filtres .btn{flex:1 1 auto}
  .mail-champs{grid-template-columns:1fr;gap:1px}
  .mail-champs dt{margin-top:7px}
  .mail-piece{width:100%}
  .mail-piece a{flex:1 1 auto;min-width:0}
  /* tableaux d'invitations : on masque les colonnes secondaires */
  .mail-page-invitations .tbl th:nth-child(3),
  .mail-page-invitations .tbl td:nth-child(3),
  .mail-page-invitations .tbl th:nth-child(4),
  .mail-page-invitations .tbl td:nth-child(4){display:none}
  .tableau-defilant{overflow-x:auto}
  .mail-page-invitations .tbl{min-width:0}
}
.mail-sig{margin:0 0 9px;font-size:12.5px}
.mail-sig a{color:#8b95bd;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25)}
.mail-sig a:hover{color:#00d4aa;border-bottom-color:#00d4aa}
.mail-adr{display:block;padding:1px 0;overflow-wrap:anywhere}
.mail-grille{grid-template-columns:clamp(200px,17vw,272px) minmax(300px,1.02fr) minmax(440px,1.78fr)}
@media (max-width:1200px){.mail-grille{grid-template-columns:210px 1fr}}
@media (max-width:760px){.mail-grille{grid-template-columns:1fr}}
/* ---- dossier de preuves issues des mails ---- */
.preuves{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px}
.preuve{padding:15px 16px;border-radius:15px;background:rgba(32,36,62,.55);
  border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:8px}
.preuve header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px;color:#8b95bd}
.preuve-date{color:#00d4aa;font-weight:700;letter-spacing:.02em}
.preuve-de{color:#c6cce8}
.preuve-dossier{margin-left:auto;padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.06);font-size:10.5px}
.preuve h3{margin:0;font-size:14.5px;line-height:1.38;color:#eef1ff;font-weight:650}
.preuve-analyse{margin:0;font-size:13px;line-height:1.6;color:#b9c0e0}
.preuve-liens{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 0}
.preuve-liens .discret{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:760px){.preuves{grid-template-columns:1fr}}
.grilles-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.grille-ref{padding:14px 16px;border-radius:14px;background:rgba(12,14,30,.5);
  border:1px solid rgba(255,255,255,.09)}
.grille-ref h3{margin:0 0 10px;font-size:14px;color:#00d4aa}
.grille-ref dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0;font-size:13px}
.grille-ref dt{color:#8b95bd}
.grille-ref dd{margin:0;text-align:right;color:#dde2f7;font-variant-numeric:tabular-nums}
.grille-ref dt.tot,.grille-ref dd.tot{border-top:1px solid rgba(255,255,255,.14);
  padding-top:6px;margin-top:4px;font-weight:700;color:#fff}
.demo-note{margin:10px 0 0;font-size:13.2px;line-height:1.65;color:#c6cce8;
  padding-left:12px;border-left:3px solid rgba(0,212,170,.45)}
@media (max-width:760px){.grilles-cmp{grid-template-columns:1fr}}
/* ---- lecture d'un message depuis la zone principale ---- */
.fil-ariane{margin:0 0 16px;font-size:13.5px}
.fil-ariane a{color:#00d4aa;text-decoration:none}
.fil-ariane a:hover{text-decoration:underline}
.message-lecture{border-radius:18px;background:rgba(32,36,62,.5);
  border:1px solid rgba(255,255,255,.09);padding:20px}
.mail-corps-plein{height:min(66vh,700px)}

/* ==========================================================================
   Correctifs de classes : ces classes sont utilisées par les gabarits mais
   n'existaient PAS dans cette feuille — le conteneur des anomalies, la date des
   messages et le nom de marque n'étaient donc pas mis en forme.
   ========================================================================== */
.grille-filtrable{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.t-nom{white-space:nowrap}
.mail-date{color:var(--txt3);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mail-vide{border-top:1px solid var(--bord);margin-top:6px;padding-top:6px}

/* Attribut hidden : une classe d'auteur qui définit display l'emporte sinon sur la
   règle [hidden] du navigateur, et l'élément resterait visible malgré hidden="". */
[hidden]{display:none !important}

@media (max-width:760px){
  .grille-filtrable{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
}

/* ==========================================================================
   BOÎTES DE REGROUPEMENT (page « Bulletins de paie ») : une boîte par période
   de travail, avec un en-tête lisible et un tableau d'une ligne par bulletin.
   ========================================================================== */
.boite{padding:0;overflow:hidden}
.boite-tete{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--bord);
}
.boite-titre{margin:0;font-size:1.02rem;letter-spacing:-.015em;font-weight:700}
.boite-sous{margin:3px 0 0;color:var(--txt3);font-size:.83rem}
.boite-totaux{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--txt2);align-items:baseline}
.boite-totaux b{font-size:1rem;color:var(--txt);font-variant-numeric:tabular-nums}
.boite-etats{display:flex;gap:7px;flex-wrap:wrap;margin:0;padding:11px 18px 0}
.boite-pieces{margin:0;padding:12px 18px 15px;font-size:.83rem;line-height:1.9}
.boite .enveloppe,.boite table{border-radius:0}
/* une période travaillée sans fiche de paie est une alerte : elle ne doit pas
   passer inaperçue au milieu des autres boîtes */
.boite.vide{border-left:3px solid rgba(233,69,96,.6)}
/* Bulletin partage : quand une session est partagee, l'employeur etablit UNE fiche de
   paie qui couvre deux periodes de travail. La somme ne doit etre comptee qu'une fois,
   mais la fiche doit rester VISIBLE sur l'autre periode — sans quoi la page annoncait a
   tort « aucun bulletin de paie » sur une periode pourtant travaillee. */
.boite-partage{background:rgba(90,150,215,.10);border:1px solid rgba(90,150,215,.32);
  border-radius:10px;padding:11px 13px;margin:11px 0 2px}
.boite-partage p{margin:0;font-size:.88rem;line-height:1.55}
.boite-partage p + p{margin-top:9px;padding-top:9px;border-top:1px solid rgba(90,150,215,.22)}
.boite-partage .et{margin-right:7px}
.et.info{background:rgba(90,150,215,.16);color:#245c96;border:1px solid rgba(90,150,215,.38)}

@media (max-width:760px){
  .boite-tete{padding:12px 13px;gap:8px}
  .boite-totaux{gap:12px}
  .boite-etats{padding:10px 13px 0}
  .boite-pieces{padding:10px 13px 13px}
  .boite-titre{font-size:.96rem}
}

/* ==========================================================================
   TEXTES OFFICIELS (page « Lois & convention »)
   ========================================================================== */
.texte-legal{padding:16px 18px}
.tl-titre{margin:0 0 8px;font-size:1.03rem;letter-spacing:-.015em;font-weight:700}
.tl-contenu{margin:0 0 12px;color:var(--txt2);font-size:.9rem;max-width:88ch}
.tl-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0}
/* Lecture d'un texte de loi : fond opaque, texte respirant, sélection facile */
.texte-loi{background:var(--fond-2);border-radius:14px;padding:4px}
.texte-loi pre{
  white-space:pre-wrap;word-wrap:break-word;margin:0;padding:18px;
  font:13.4px/1.72 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--txt2);max-height:70vh;overflow:auto;
}
@media (max-width:760px){
  .texte-legal{padding:13px}
  .tl-contenu{font-size:.86rem}
  .texte-loi pre{font-size:12.4px;padding:13px}
}