/* vue_alertes.css : LA PAGE DES ALERTES (DECISIONS 34.1 et 34.1 bis).
   Oeuvre originale, projet Kedros (R17) ; ce fichier est SERVI : aucun nom propre.

   « Il faut que ce soit joli, lisible et absolument interactif. » Le mot joli a ete
   employe trois fois : ce n'est pas un ornement, c'est la condition pour qu'une page
   quotidienne soit ouverte tous les jours. La revue precedente est morte de ne pas
   l'etre.

   TOUT EST SCOPE SOUS #vue-alertes : cette feuille ne peut rien casser ailleurs, et
   elle n'invente aucune couleur. La palette est celle de la charte (app.css) ; les
   seules teintes propres sont les etats d'urgence, derives des variables existantes.

   LA PAGE RESTE COURTE A CENT ALERTES : une alerte tient en UNE ligne, elle se deplie
   a la demande. C'est la regle qui gouverne toutes les tailles ci-dessous. */

#vue-alertes{padding:0 0 60px}
#vue-alertes .al-page{max-width:1280px;margin:0 auto;padding:18px 22px}

/* --- L'en-tete --------------------------------------------------------------- */
#vue-alertes .al-tete{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--trait)}
#vue-alertes .al-titre{flex:1;min-width:260px}
#vue-alertes .al-titre h2{margin:0}
#vue-alertes .al-titre .sous{margin:4px 0 0}
#vue-alertes .al-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#vue-alertes .al-actions input[type=search]{min-width:240px}

/* --- Les filtres, en pastilles qui portent leur compte ----------------------- */
#vue-alertes .al-filtres{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
#vue-alertes .al-filtres button{font:inherit;font-size:.86rem;cursor:pointer;
  padding:5px 12px;border-radius:999px;border:1px solid var(--trait);
  background:var(--blanc);color:var(--encre);display:inline-flex;align-items:center;
  gap:7px;transition:background .15s ease,border-color .15s ease}
#vue-alertes .al-filtres button:hover{background:var(--fond)}
#vue-alertes .al-filtres button[aria-pressed=true]{background:var(--accent);
  border-color:var(--accent);color:var(--creme)}
#vue-alertes .al-filtres button .n{font-variant-numeric:tabular-nums;opacity:.75}
#vue-alertes .al-filtres button[aria-pressed=true] .n{opacity:.9}

/* --- Le bandeau de lot, qui n'apparait que s'il sert ------------------------- */
#vue-alertes .al-lot{position:sticky;top:8px;z-index:4;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap;margin:12px 0;padding:10px 14px;
  border:1px solid var(--accent);border-radius:var(--rayon);
  background:var(--accent-clair);box-shadow:var(--ombre)}
#vue-alertes .al-lot.cache{display:none}
#vue-alertes .al-lot span{font-weight:500;margin-right:auto}

/* --- Un bloc par dossier : la chemise qu'on ouvre ---------------------------- */
#vue-alertes .al-dossier{margin-top:16px;border:1px solid var(--trait);
  border-radius:var(--rayon);background:var(--blanc);overflow:hidden;
  box-shadow:var(--ombre)}
#vue-alertes .al-dossier-tete{display:flex;gap:12px;align-items:center;
  flex-wrap:wrap;padding:12px 16px;background:var(--fond);
  border-bottom:1px solid var(--trait)}
#vue-alertes .al-dossier-tete h3{margin:0;font-size:1.02rem;flex:1;min-width:200px}
#vue-alertes .al-dossier-tete .pastilles{display:flex;gap:6px;flex-wrap:wrap}
#vue-alertes .al-dossier-tete button{font:inherit;font-size:.84rem}
#vue-alertes .al-dossier.replie .al-lignes{display:none}

/* Une chemise par personne. Les doublons restent tous accessibles dans leur pli. */
#vue-alertes .al-personne{border-top:1px solid var(--trait)}
#vue-alertes .al-personne:first-child{border-top:none}
#vue-alertes .al-personne-tete{display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;padding:8px 16px;background:var(--fond)}
#vue-alertes .al-personne-tete h4{margin:0;flex:1;font-size:.92rem}
#vue-alertes .al-personne-tete span{font-size:.8rem;opacity:.7}
#vue-alertes .al-personne.lue>.al-personne-tete{opacity:.62}
#vue-alertes .al-ligne.lue .al-resume{opacity:.62}
#vue-alertes .al-doublons{border-top:1px solid var(--trait)}
#vue-alertes .al-doublons>summary{display:flex;gap:10px;align-items:center;
  padding:10px 16px;cursor:pointer}
#vue-alertes .al-doublons>summary span{flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#vue-alertes .al-doublons>summary b{font-size:.8rem;padding:2px 8px;
  border-radius:999px;background:var(--accent-clair);color:var(--accent)}
#vue-alertes .al-doublons-detail{padding-left:20px;border-top:1px dashed var(--trait)}

/* --- Une alerte : une ligne, qui se deplie ----------------------------------- */
#vue-alertes .al-ligne{border-top:1px solid var(--trait)}
#vue-alertes .al-ligne:first-child{border-top:none}
#vue-alertes .al-resume{display:flex;gap:10px;align-items:center;padding:10px 16px;
  cursor:pointer;transition:background .12s ease}
#vue-alertes .al-resume:hover{background:var(--fond)}
#vue-alertes .al-resume input[type=checkbox]{flex:0 0 auto;cursor:pointer}
#vue-alertes .al-resume .chevron{flex:0 0 auto;width:14px;opacity:.55;
  transition:transform .15s ease}
#vue-alertes .al-ligne.ouverte .chevron{transform:rotate(90deg)}
#vue-alertes .al-resume .titre{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#vue-alertes .al-resume .qui{font-size:.8rem;opacity:.7;white-space:nowrap}

/* Les etats d'urgence. La terre brulee d'alerte est deja la seule exception assumee
   de la charte (voir app.css) : on ne fabrique pas une couleur de plus, on module. */
#vue-alertes .puce{flex:0 0 auto;font-size:.74rem;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 9px;border-radius:999px;
  border:1px solid var(--trait);background:var(--blanc)}
#vue-alertes .puce::before{display:inline-block;margin-right:4px;font-weight:700}
#vue-alertes .puce.depassee{background:var(--etat-bloquant-fond);border-color:var(--etat-bloquant-texte);color:var(--etat-bloquant-texte)}
#vue-alertes .puce.depassee::before{content:"!"}
#vue-alertes .puce.imminente{background:var(--etat-verifier-fond);border-color:var(--etat-verifier-texte);color:var(--etat-verifier-texte)}
#vue-alertes .puce.imminente::before{content:"◇"}
#vue-alertes .puce.a_venir{background:var(--accent-clair);border-color:var(--doux);
  color:var(--accent)}
#vue-alertes .puce.a_venir::before{content:"›"}
#vue-alertes .puce.calme{opacity:.8}

/* --- Le detail deplie -------------------------------------------------------- */
#vue-alertes .al-detail{display:none;padding:2px 16px 16px 48px;
  border-top:1px dashed var(--trait);background:var(--blanc)}
#vue-alertes .al-ligne.ouverte .al-detail{display:block}
#vue-alertes .al-detail p{margin:8px 0}
#vue-alertes .al-detail .origine{font-size:.84rem;opacity:.78}
#vue-alertes .al-detail .retour{font-size:.86rem;color:var(--alerte)}
#vue-alertes .al-propositions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
#vue-alertes .al-gestes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
#vue-alertes .al-gestes input[type=date]{font:inherit}
#vue-alertes .al-gestes .mot{flex:1;min-width:220px}
#vue-alertes .al-histo{margin-top:10px;font-size:.84rem;opacity:.8}
#vue-alertes .al-histo li{margin:2px 0}

/* --- Ce qui est tu : range, jamais cache (R4) -------------------------------- */
#vue-alertes .al-tues{margin:10px 16px 14px}
#vue-alertes .al-tues>summary{cursor:pointer;font-size:.86rem;opacity:.75}
#vue-alertes .al-tues .al-resume{padding-left:0}

#vue-alertes .al-vide{margin-top:28px;padding:26px;text-align:center;
  border:1px dashed var(--trait);border-radius:var(--rayon);background:var(--blanc)}

/* --- La revue du jour : sections et cartes (resserrage du 27 aout 2026) ------ */
#vue-alertes .al-section{margin-top:18px}
#vue-alertes .al-section>summary{display:flex;gap:10px;align-items:center;
  cursor:pointer;list-style:none;padding:8px 2px;border-bottom:1px solid var(--trait)}
#vue-alertes .al-section>summary::-webkit-details-marker{display:none}
#vue-alertes .al-section>summary h3{margin:0;font-size:1.04rem;display:inline}
#vue-alertes .al-section>summary .n{font-variant-numeric:tabular-nums;
  font-size:.84rem;opacity:.7;padding:1px 9px;border:1px solid var(--trait);
  border-radius:999px}
#vue-alertes .al-section:not([open])>summary{opacity:.75}
#vue-alertes .al-section-technique>summary h3{opacity:.85;font-size:.96rem}
#vue-alertes .al-section-vide{margin:12px 2px;font-size:.9rem;opacity:.72}
#vue-alertes .al-section-note{margin:26px 2px 0;font-size:.82rem;opacity:.62}
#vue-alertes .al-carte{margin-top:12px}
#vue-alertes .al-carte-tete{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 16px;background:var(--fond);
  border-bottom:1px solid var(--trait)}
#vue-alertes .al-carte-tete .titre{font-weight:600;flex:1;min-width:200px}
#vue-alertes .al-carte-tete .al-carte-dossier{font-size:.82rem;opacity:.72}
#vue-alertes .al-carte .al-propositions{padding:8px 16px 0}
#vue-alertes .al-carte-membres{margin:6px 16px 12px}
#vue-alertes .al-carte-membres>summary{cursor:pointer;font-size:.86rem;opacity:.78}

/* --- Le telephone : la page doit rester tenable a 375 px --------------------- */
@media (max-width:720px){
  #vue-alertes .al-page{padding:14px 12px}
  /* Le champ de recherche prend sa PROPRE ligne : partage avec trois boutons, il
     tombait a dix-huit pixels de large, mesure a 375 px. */
  #vue-alertes .al-actions{width:100%}
  #vue-alertes .al-actions input[type=search]{min-width:0;flex:1 1 100%;order:-1}
  #vue-alertes .al-detail{padding-left:16px}
  #vue-alertes .al-doublons-detail{padding-left:8px}
  #vue-alertes .al-resume .qui{display:none}
}