/* Jalon — charte ORA. Marine #12263F · or #C9A24B · fond #F1F4F8
   alerte #D9891C · réussite #2B7A5B · gris #96A2B3. Titres Lora, texte sans-serif système. */
@font-face{font-family:Lora;src:url(/polices/lora-latin.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{
  --marine:#12263F; --or:#C9A24B; --fond:#F1F4F8; --alerte:#D9891C; --reussite:#2B7A5B; --gris:#96A2B3;
  --marine-clair:#1C3557; --encre:#1B2739; --encre-douce:#5A6675; --trait:#DFE5EE; --blanc:#FFFFFF;
  --rouge:#C0392B;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ombre:0 1px 2px rgba(18,38,63,.06),0 4px 14px rgba(18,38,63,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
h1,h2,h3,.lora{font-family:Lora,Georgia,serif;font-weight:600;letter-spacing:-.01em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.cache{display:none!important}

/* ── En-tête ──────────────────────────────────────────────────────────── */
.entete{background:var(--marine);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 16px}
.entete .marque{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.entete h1{font-size:23px;margin:0;color:#fff}
.entete .sous{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}

/* Prochaine échéance du portefeuille */
.echeance{margin-top:14px;background:var(--marine-clair);border:1px solid rgba(201,162,75,.35);border-radius:14px;
  padding:13px 14px;display:flex;align-items:center;gap:14px}
.echeance .compteur{flex:0 0 auto;text-align:center;min-width:62px}
.echeance .compteur b{display:block;font-family:Lora,Georgia,serif;font-size:27px;line-height:1;color:var(--or)}
.echeance .compteur span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.echeance .quoi{min-width:0}
.echeance .titre{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:3px}
.echeance .nom{font-size:14px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.echeance .meta{font-size:12px;color:rgba(255,255,255,.66);margin-top:2px}
.echeance.vide{display:block;padding:14px;color:rgba(255,255,255,.66);font-size:13px;text-align:center}

/* ── Résumé ───────────────────────────────────────────────────────────── */
.resume{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px 0}
.tuile{background:var(--blanc);border-radius:12px;padding:10px 8px;text-align:center;box-shadow:var(--ombre)}
.tuile b{display:block;font-family:Lora,Georgia,serif;font-size:22px;line-height:1.1;color:var(--marine)}
.tuile.alerte b{color:var(--alerte)} .tuile.demarrer b{color:var(--gris)}
.tuile span{font-size:11px;color:var(--encre-douce);display:block;margin-top:1px}

/* ── Filtres ──────────────────────────────────────────────────────────── */
/* Les puces passent à la ligne plutôt que d'être coupées au bord de l'écran. */
.filtres{display:flex;flex-wrap:wrap;gap:5px;padding:14px 16px 4px}
.puce{flex:0 0 auto;border:1px solid var(--trait);background:var(--blanc);color:var(--encre-douce);
  border-radius:999px;padding:6px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.puce.on{background:var(--marine);border-color:var(--marine);color:#fff}
.puce .pastille{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:1px}

/* ── Liste des projets ────────────────────────────────────────────────── */
.liste{padding:8px 16px 18px;display:flex;flex-direction:column;gap:10px}
.carte{background:var(--blanc);border-radius:14px;box-shadow:var(--ombre);overflow:hidden;
  display:flex;text-align:left;width:100%;padding:0}
.carte .feu{flex:0 0 5px;align-self:stretch}
.carte .corps{flex:1;min-width:0;padding:13px 14px 12px}
.feu-rouge{background:var(--rouge)} .feu-orange{background:var(--alerte)}
.feu-vert{background:var(--reussite)} .feu-gris{background:var(--gris)}
.carte .haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.carte h3{margin:0;font-size:16px;color:var(--marine);line-height:1.25}
.carte .lieu{font-size:12px;color:var(--encre-douce);margin-top:2px}
.etiquette{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:5px;
  background:var(--fond);color:var(--marine)}
.etiquette.ora{background:#EFE7D4;color:#8A6D24}

/* Barre d'avancement — jamais 0 % là où rien n'est mesuré */
.avancement{margin-top:11px}
.avancement .ligne{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--encre-douce);margin-bottom:5px;gap:8px}
.avancement .ligne .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avancement .ligne b{color:var(--marine);font-size:13px;flex:0 0 auto}
.jauge{height:7px;border-radius:4px;background:#E7ECF3;overflow:hidden}
.jauge i{display:block;height:100%;border-radius:4px;background:var(--marine)}
.jauge.rouge i{background:var(--rouge)} .jauge.orange i{background:var(--alerte)} .jauge.vert i{background:var(--reussite)}
.jauge.nonmesure{background:repeating-linear-gradient(135deg,#E7ECF3 0 6px,#F4F7FB 6px 12px)}
.nonmesure-txt{font-size:12px;color:var(--gris);font-style:italic}

/* Prochain jalon */
.jalon{margin-top:11px;padding-top:10px;border-top:1px solid var(--trait);display:flex;align-items:center;gap:9px;font-size:13px}
.jalon .pt{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gris)}
.jalon .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--encre)}
.jalon .quand{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--encre-douce)}
.jalon.proche .pt{background:var(--alerte)} .jalon.proche .quand{color:var(--alerte)}
.jalon.depasse .pt{background:var(--rouge)} .jalon.depasse .quand{color:var(--rouge)}
.jalon.aucun{color:var(--gris);font-style:italic}

/* Raison du feu / donnée manquante */
.motif{margin-top:9px;font-size:12.5px;color:var(--encre-douce);display:flex;gap:7px;align-items:flex-start}
.motif .ic{flex:0 0 auto;font-size:12px;line-height:1.35}
.manque{margin-top:7px;font-size:12px;color:var(--gris);background:#FBF6EC;border-radius:8px;padding:6px 9px}

/* ── Barre d'onglets ──────────────────────────────────────────────────── */
.onglets{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--trait);display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);z-index:20}
.onglets button{padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--gris)}
.onglets button.on{color:var(--marine)}
.onglets svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onglets button.on .pastilleAlerte{background:var(--alerte)}

/* ── Écrans à venir / états ───────────────────────────────────────────── */
.attente{padding:56px 28px;text-align:center;color:var(--encre-douce)}
.attente h2{font-size:19px;color:var(--marine);margin:0 0 8px}
.attente p{font-size:14px;margin:0 auto;max-width:280px}
.attente .badge{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--or);border:1px solid rgba(201,162,75,.45);border-radius:999px;padding:4px 11px}
.vide{padding:40px 24px;text-align:center;color:var(--encre-douce);font-size:14px}
.chargement{padding:40px;text-align:center;color:var(--gris);font-size:14px}

/* ── Connexion ────────────────────────────────────────────────────────── */
.connexion{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:28px 24px;background:var(--marine)}
.connexion .boite{background:#fff;border-radius:18px;padding:26px 22px;box-shadow:0 20px 48px rgba(0,0,0,.24)}
.connexion h1{font-size:26px;margin:0 0 3px;color:var(--marine)}
.connexion .sous{font-size:13px;color:var(--encre-douce);margin:0 0 20px}
.champ{margin-bottom:13px}
.champ label{display:block;font-size:12px;font-weight:600;color:var(--encre-douce);margin-bottom:5px}
.champ input{width:100%;border:1px solid var(--trait);border-radius:10px;padding:11px 12px;font-size:16px;background:#FBFCFE}
.champ input:focus{outline:2px solid rgba(18,38,63,.18);border-color:var(--marine)}
.bouton{width:100%;background:var(--marine);color:#fff;border-radius:10px;padding:13px;font-size:15px;font-weight:600;margin-top:6px}
.bouton.or{background:var(--or);color:var(--marine)}
.erreur{background:#FDECEA;color:var(--rouge);border-radius:9px;padding:9px 11px;font-size:13px;margin-bottom:12px}
.lien{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--encre-douce);text-decoration:underline}

/* Bandeau hors-ligne + file d'attente (repris d'AviGest) */
#bandeauHorsLigne{background:var(--alerte);color:#fff;font-size:12.5px;font-weight:600;text-align:center;padding:7px 12px}
/* La file d'attente s'annonce en haut, collée sous l'en-tête : au bas de l'écran
   elle recouvrait le bouton d'enregistrement selon la position de défilement. */
#badgeFile{position:sticky;top:0;z-index:30;display:block;width:100%;background:var(--marine);
  color:#fff;font-size:13px;font-weight:600;text-align:center;padding:9px 14px;
  border-bottom:2px solid var(--or);box-shadow:0 2px 10px rgba(18,38,63,.18)}
#badgeFile.refus{background:var(--rouge);border-bottom-color:#8E2018}

/* ── Fiche projet ─────────────────────────────────────────────────────── */
#vueFiche{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
.ficheHaut{display:flex;align-items:flex-start;gap:10px}
.retour{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;line-height:1}
.entete .titreProjet{font-size:21px;margin:0;color:#fff;line-height:1.2}
.entete .sousProjet{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:3px}
.jetons{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.jeton{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.88)}
.jeton.feuRouge{background:rgba(192,57,43,.22);color:#FFB4A9}
.jeton.feuOrange{background:rgba(217,137,28,.22);color:#F3C171}
.jeton.feuVert{background:rgba(43,122,91,.24);color:#8FD3B4}
.jeton.feuGris{background:rgba(150,162,179,.2);color:#C6CEDA}

.encartAlerte{margin:14px 16px 0;border-radius:12px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;font-size:13.5px}
.encartAlerte.orange{background:#FDF2E2;color:#8A5510;border:1px solid #F0D5A8}
.encartAlerte.rouge{background:#FDECEA;color:#96271B;border:1px solid #F3C4BD}
.encartAlerte b{display:block;font-size:14px;margin-bottom:2px}
.encartAlerte .ic{flex:0 0 auto;font-size:15px;line-height:1.2}

.bloc{background:var(--blanc);border-radius:14px;box-shadow:var(--ombre);margin:10px 16px;padding:13px 14px}
.bloc h4{margin:0 0 3px;font-size:15px;color:var(--marine);font-family:Lora,Georgia,serif;font-weight:600}
.bloc .detail{font-size:12.5px;color:var(--encre-douce)}
.bloc .valeurForte{font-size:15px;font-weight:700;color:var(--marine)}
.ligneEntre{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.releveLigne{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--encre-douce);
  padding:6px 0;border-top:1px solid var(--trait)}
.releveLigne .v{font-weight:700;color:var(--encre);flex:0 0 auto}
.puceStatut{font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:5px;flex:0 0 auto}
.st-fait{background:#E4F1EB;color:var(--reussite)} .st-en_retard{background:#FDECEA;color:var(--rouge)}
.st-a_venir{background:var(--fond);color:var(--encre-douce)} .st-en_cours{background:#FDF2E2;color:#8A5510}
.barreBudget{height:6px;border-radius:4px;background:#E7ECF3;overflow:hidden;margin-top:7px;display:flex}
.barreBudget i{height:100%} .barreBudget .engage{background:var(--or)} .barreBudget .decaisse{background:var(--marine)}
.legende{display:flex;gap:12px;font-size:11.5px;color:var(--encre-douce);margin-top:6px}
.legende i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}

.blocVide{margin:10px 16px;padding:22px 16px;text-align:center;color:var(--gris);font-size:13.5px;
  background:#FBFCFD;border:1px dashed var(--trait);border-radius:14px}

.titreSection{margin:20px 16px 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.histoLigne{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--trait);font-size:13px}
.histoLigne:first-child{border-top:0}
.histoLigne .quand{flex:0 0 58px;font-size:11.5px;color:var(--gris);line-height:1.35}
.histoLigne .quoi{flex:1;min-width:0}
.histoLigne .qui{font-size:11.5px;color:var(--encre-douce);margin-top:2px}
.histoLigne .source{display:inline-block;font-size:10.5px;padding:2px 6px;border-radius:4px;background:var(--fond);color:var(--encre-douce);margin-left:5px}
.histoLigne img{margin-top:7px;border-radius:8px;max-width:130px;display:block}
.plus{display:block;width:100%;text-align:center;padding:10px;font-size:13px;font-weight:600;color:var(--marine)}

.barreAction{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));padding:10px 16px;
  background:linear-gradient(to top,var(--fond) 62%,rgba(241,244,248,0));z-index:15}

/* ── Saisie ───────────────────────────────────────────────────────────── */
.formulaire{padding:16px 16px 26px}
.formulaire select,.formulaire textarea,.formulaire input[type=date],.formulaire input[type=text]{
  width:100%;border:1px solid var(--trait);border-radius:10px;padding:11px 12px;font-size:16px;background:#FBFCFE;
  font-family:inherit;color:var(--encre);-webkit-appearance:none;appearance:none}
.formulaire select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235A6675' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.formulaire textarea{resize:vertical}
.avecUnite{display:flex;align-items:center;gap:9px}
.avecUnite input{flex:1}
.avecUnite span{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--encre-douce);min-width:26px}
.bascule{display:flex;gap:6px}
.bascule button{flex:1;border:1px solid var(--trait);background:var(--blanc);border-radius:10px;padding:10px;
  font-size:14px;font-weight:600;color:var(--encre-douce)}
.bascule button.on{background:var(--marine);border-color:var(--marine);color:#fff}
.derniere{margin-top:8px;font-size:13px;color:var(--encre-douce);background:var(--blanc);border-radius:10px;
  padding:10px 12px;box-shadow:var(--ombre)}
.derniere b{color:var(--marine)}
.derniere .jamais{color:var(--gris);font-style:italic}
.boutonSecondaire{width:100%;border:1px dashed var(--trait);background:var(--blanc);border-radius:10px;padding:12px;
  font-size:14px;font-weight:600;color:var(--encre-douce)}
#sPhotoApercu{margin-top:9px;position:relative;display:inline-block}
#sPhotoApercu img{border-radius:10px;max-width:150px;display:block}
#sPhotoApercu button{position:absolute;top:6px;right:6px;background:rgba(18,38,63,.82);color:#fff;border-radius:50%;
  width:26px;height:26px;font-size:15px;line-height:1}
#saisieMessage{border-radius:10px;padding:11px 13px;font-size:13.5px;margin-bottom:12px}
#saisieMessage.ok{background:#E4F1EB;color:var(--reussite)}
#saisieMessage.attente{background:#FDF2E2;color:#8A5510}
#saisieMessage.ko{background:#FDECEA;color:var(--rouge)}

/* ── Onglet Rapports ──────────────────────────────────────────────────── */
.entete .marque button.sous{background:rgba(255,255,255,.12);border-radius:8px;padding:5px 10px;letter-spacing:.06em}
.etatLien{margin-top:13px;border-radius:12px;padding:11px 13px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.etatLien.vivant{background:rgba(43,122,91,.2);color:#9EDCBE}
.etatLien.rompu{background:rgba(192,57,43,.24);color:#FFB4A9}
.etatLien.absent{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.etatLien b{display:block;margin-bottom:2px}
.etatLien .pt{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px;background:currentColor}

/* width:100% AVEC une marge latérale déborde de l'écran et fait apparaître une barre
   de défilement horizontale, qui rogne la barre d'onglets. On retire la largeur des marges. */
.docLigne{display:flex;width:calc(100% - 32px);box-sizing:border-box;text-align:left;background:var(--blanc);
  border-radius:14px;box-shadow:var(--ombre);margin:10px 16px;padding:13px 14px;gap:11px;align-items:flex-start}
.docLigne .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--fond);color:var(--marine);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.docLigne .ic.lisible{background:#EFE7D4;color:#8A6D24}
.docLigne .corps{flex:1;min-width:0}
.docLigne h4{margin:0 0 2px;font-size:14.5px;color:var(--marine);font-family:Lora,Georgia,serif;font-weight:600;line-height:1.25}
.docLigne .detail{display:block;font-size:12px;color:var(--encre-douce)}
.docLigne .attente{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;
  background:#FDF2E2;color:#8A5510;padding:3px 8px;text-align:left}

.prop{background:var(--blanc);border-radius:14px;box-shadow:var(--ombre);margin:10px 16px;padding:13px 14px}
.prop .haut{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prop .quoi{font-size:14.5px;color:var(--marine);font-weight:600}
.prop .valeur{font-size:15px;font-weight:700;color:var(--marine);flex:0 0 auto}
.prop .type{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.prop .citation{margin-top:9px;font-size:12.5px;color:var(--encre-douce);border-left:3px solid var(--or);
  padding:6px 0 6px 10px;background:#FBFAF6;border-radius:0 8px 8px 0;font-style:italic}
.prop .confiance{margin-top:8px;font-size:11.5px;color:var(--gris)}
.prop .boutons{display:flex;gap:6px;margin-top:11px}
.prop .boutons button{flex:1;border-radius:9px;padding:9px;font-size:13px;font-weight:600;border:1px solid var(--trait);background:var(--blanc);color:var(--encre-douce)}
.prop .boutons button.oui{background:var(--marine);border-color:var(--marine);color:#fff}
.prop.decidee{opacity:.72}
.prop .verdict{margin-top:9px;font-size:12px;font-weight:600;padding:6px 9px;border-radius:8px}
.prop .verdict.appliquee{background:#E4F1EB;color:var(--reussite)}
.prop .verdict.corrigee{background:#EFE7D4;color:#8A6D24}
.prop .verdict.ignoree{background:var(--fond);color:var(--encre-douce)}
.prop .inconnue{margin-top:8px;font-size:12px;background:#FDECEA;color:#96271B;border-radius:8px;padding:6px 9px}
.prop .correction{display:flex;gap:6px;margin-top:9px}
.prop .correction input{flex:1;border:1px solid var(--trait);border-radius:9px;padding:9px 11px;font-size:16px;background:#FBFCFE}

.resumeIA{background:var(--marine);color:#fff;border-radius:14px;margin:10px 16px;padding:14px}
.resumeIA .titre{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:7px}
.resumeIA li{font-size:13.5px;line-height:1.5;margin-bottom:4px;color:rgba(255,255,255,.92)}
.resumeIA ul{margin:0;padding-left:17px}
.actionLigne{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--trait);font-size:13.5px}
.actionLigne:first-child{border-top:0}
.actionLigne .coche{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--trait);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--reussite)}
.actionLigne.faite .coche{background:var(--reussite);border-color:var(--reussite);color:#fff}
.actionLigne.faite .txt{text-decoration:line-through;color:var(--gris)}
.actionLigne .qui{font-size:11.5px;color:var(--encre-douce);margin-top:2px}
.actionLigne .qui.retard{color:var(--rouge);font-weight:600}

/* ── Onglet Alertes ───────────────────────────────────────────────────── */
#vueFiche{padding-bottom:calc(186px + env(safe-area-inset-bottom))}
.pushBandeau{margin:14px 16px 0;background:var(--blanc);border-radius:12px;box-shadow:var(--ombre);padding:12px 14px;
  display:flex;gap:11px;align-items:center;font-size:13px;color:var(--encre-douce)}
.pushBandeau button{flex:0 0 auto;background:var(--marine);color:#fff;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:600}
.pushBandeau.actif{background:#E4F1EB;color:var(--reussite);box-shadow:none}
.pushBandeau.actif button{background:transparent;color:var(--reussite);border:1px solid rgba(43,122,91,.35)}
.pushBandeau .txt{flex:1;min-width:0}

.ligneAlerte{display:flex;gap:11px;background:var(--blanc);border-radius:14px;box-shadow:var(--ombre);
  margin:9px 16px;padding:12px 14px;align-items:flex-start;width:calc(100% - 32px);box-sizing:border-box;text-align:left}
.ligneAlerte .pt{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px}
.ligneAlerte .pt.rouge{background:var(--rouge)} .ligneAlerte .pt.orange{background:var(--alerte)} .ligneAlerte .pt.info{background:var(--gris)}
.ligneAlerte .corps{flex:1;min-width:0}
.ligneAlerte .msg{font-size:13.5px;color:var(--encre);line-height:1.4}
.ligneAlerte .quand{font-size:11.5px;color:var(--gris);margin-top:3px}
.ligneAlerte .vu{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--encre-douce);
  border:1px solid var(--trait);border-radius:8px;padding:6px 10px;align-self:center}
.ligneAlerte.lue{opacity:.6}