/* ============================================================
   STYLES COMMUNS À TOUT LE SITE GIP FIPAN (accueil + 4 pôles)
   Les couleurs propres à chaque pôle sont dans css/poles.css
   ============================================================ */

/* ============================================================
   COULEURS — uniquement celles de la charte GIP FIPAN
   (logos CFA / GIP FIPAN + couleurs d'accent du modèle PowerPoint CFA)
   Les versions "pâles" sont les mêmes couleurs en transparence.
   ============================================================ */
:root{
  /* Logo CFA */
  --cfa-rose:#E3696C; --cfa-orange:#F1900A;
  /* Bandeau GIP FIPAN */
  --turquoise:#00AAB0; --turquoise-clair:#62C2D8;
  /* Accents du modèle CFA */
  --violet:#E369DA; --jaune:#FBAE40; --orange:#F26B43; --ciel:#62BAEA;
  /* Autres couleurs de la famille GIP FIPAN */
  --marine:#203F81; --vert:#1BA553;

  --grad-cfa:linear-gradient(90deg,var(--p-1),var(--p-2));
  --grad-gip:linear-gradient(90deg,var(--turquoise),var(--turquoise-clair));

  /* Teintes pâles (couleur de la charte + transparence) */
  --turquoise-pale:#00AAB01A; --ciel-pale:#62BAEA22; --jaune-pale:#FBAE402B;
  --rose-pale:#E3696C1C; --orange-pale:#F26B431F; --violet-pale:#E369DA1F;
  --vert-pale:#1BA5531C; --marine-pale:#203F8114;

  /* Neutres (texte lisible, contraste AA minimum) */
  --encre:#1d1d1b; --gris:#454542; --gris-doux:#62625e; --bord:#e3e1da; --bord-input:#bdbbb3; --fond:#f7f6f3; --blanc:#fff;
  --focus:#203F81;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%}
html.grand-texte{font-size:115%}
body{font-family:"Marianne",Arial,sans-serif;background:var(--fond);color:var(--encre);line-height:1.6;font-size:1rem;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-weight:700;line-height:1.25}
button{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--marine)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.lien-evitement{position:absolute;left:-999px;top:8px;background:var(--marine);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.lien-evitement:focus{left:8px}

.conteneur{max-width:920px;margin:0 auto;padding:0 16px;width:100%;flex:1}
.vue{display:none;animation:apparait .25s ease}
.vue.active{display:block}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- En-tête ---------- */
header{background:var(--blanc);border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:20}
.barre{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;max-width:920px;margin:0 auto}
.logo{display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:2px}
@media(max-width:370px){.mot-rapide{display:none}}
.outils{display:flex;gap:8px;align-items:center}
.btn-outil{background:var(--blanc);border:1px solid var(--bord-input);border-radius:10px;padding:7px 11px;font-size:.85rem;font-weight:700;cursor:pointer}
.btn-outil[aria-pressed="true"]{background:var(--marine-pale);border-color:var(--marine)}
.btn-sortie{background:var(--orange);border:none;border-radius:10px;padding:8px 13px;font-size:.85rem;font-weight:700;cursor:pointer;color:var(--encre);white-space:nowrap}
.btn-sortie:hover{filter:brightness(1.05)}

/* ---------- Accueil ---------- */
.hero{position:relative;overflow:hidden;background:var(--blanc);border:1px solid var(--bord);border-radius:20px;margin:22px 0;min-height:250px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.hero-texte{padding:32px 28px;position:relative;z-index:2}
.hero .sur{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:var(--p-grad-btn);color:var(--p-texte);margin-bottom:12px}
.hero h1{font-size:1.85rem;font-weight:800;margin-bottom:12px}
.hero p{font-size:1rem;color:var(--gris);max-width:480px}
.hero-visuel{position:relative;min-height:200px}
.hero-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Bandeaux superposés, comme dans le modèle PowerPoint CFA */
.bandeau{position:absolute;right:0;height:22%;border-radius:0}
.b1{top:14%;width:92%;background:var(--band1)}
.b2{top:30%;width:70%;background:var(--band2)}
.b3{top:52%;width:84%;background:var(--band3)}
.b4{top:70%;width:56%;background:var(--band4)}
.hero-visuel.avec-image .bandeau{opacity:.75;height:14%}
.hero-visuel.avec-image .b1{top:auto;bottom:16%} .hero-visuel.avec-image .b2{top:auto;bottom:0}
.hero-visuel.avec-image .b3,.hero-visuel.avec-image .b4{display:none}
@media(max-width:640px){.hero{grid-template-columns:1fr}.hero-visuel{min-height:120px;order:-1}.hero-texte{padding:22px 20px}.hero h1{font-size:1.5rem}}

.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:6px 0 22px}
.carte{position:relative;text-align:left;border-radius:16px;padding:22px 18px 18px;border:1px solid var(--bord);cursor:pointer;background:var(--blanc);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;gap:6px}
.carte::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--c)}
.carte:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.carte .ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--cp)}
.carte h2{font-size:1.05rem;margin-top:6px}
.carte p{font-size:.88rem;color:var(--gris)}
.carte .fleche{margin-top:auto;padding-top:6px;font-weight:700;font-size:.85rem;color:var(--marine)}
.c-informer{--c:var(--grad-gip);--cp:var(--turquoise-pale)}
.c-droits{--c:var(--ciel);--cp:var(--ciel-pale)}
.c-mediateur{--c:var(--jaune);--cp:var(--jaune-pale)}
.c-signaler{--c:var(--p-grad);--cp:var(--p-pale);border:2px solid var(--p-1)}
.lien-suivi{text-align:center;font-size:.9rem;color:var(--gris);margin-bottom:10px}
.lien-suivi button{background:none;border:none;color:var(--marine);font-weight:700;text-decoration:underline;cursor:pointer}

/* ---------- Éléments communs ---------- */
.panneau{background:var(--blanc);border:1px solid var(--bord);border-radius:18px;padding:24px;margin:18px 0}
@media(max-width:560px){.panneau{padding:18px}}
.fil{display:inline-block;font-size:.88rem;color:var(--gris);margin:18px 0 0;cursor:pointer;background:none;border:none;font-weight:500}
.fil:hover{color:var(--marine);text-decoration:underline}
.titre-vue{font-size:1.5rem;font-weight:800;margin:12px 0 4px}
.titre-vue:focus{outline:none}
.sous-titre{color:var(--gris);font-size:.95rem;margin-bottom:16px}
.souligne{display:inline-block;height:6px;width:64px;border-radius:3px;background:var(--p-grad);margin:2px 0 10px}

.btn{border:none;border-radius:12px;padding:12px 22px;font-size:.98rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.98)}
.btn-principal{background:var(--p-grad-btn);color:var(--p-texte)}
.btn-gip{background:var(--grad-gip);color:var(--encre)}
.btn-marine{background:var(--marine);color:#fff}
.btn-blanc{background:var(--blanc);color:var(--encre);border:1px solid var(--bord-input)}
.btn-petit{font-size:.82rem;padding:8px 14px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-confirmer{background:var(--orange);color:var(--encre)}

.progression{display:flex;gap:6px;margin:18px 0 8px}
.progression div{flex:1;height:7px;border-radius:4px;background:#e9e7e1}
.progression div.fait{background:var(--p-grad)}
.etape-info{font-size:.85rem;color:var(--gris);margin-bottom:6px;font-weight:500}

.grille-cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tuile{border:1px solid var(--bord);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;background:var(--blanc);transition:border-color .12s,background .12s}
.tuile:hover{border-color:var(--p-1)}
.tuile[aria-pressed="true"]{border:2px solid var(--p-1);background:var(--p-pale)}
.tuile .ic{font-size:1.45rem;display:block}
.tuile .nom{font-size:.85rem;margin-top:6px;display:block}
.tuile[aria-pressed="true"] .nom{font-weight:700}

.option-urgence{width:100%;text-align:left;border:1px solid var(--bord);border-radius:14px;padding:15px 16px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;background:var(--blanc);margin-bottom:10px}
.option-urgence:hover{border-color:var(--turquoise)}
.option-urgence[aria-pressed="true"]{border:2px solid var(--turquoise);background:var(--turquoise-pale)}
.option-urgence.danger[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-pale)}
.option-urgence .ic{font-size:1.4rem;margin-top:2px}
.option-urgence .t{font-size:.98rem;font-weight:700;display:block}
.option-urgence .d{font-size:.85rem;color:var(--gris);display:block}
.alerte-danger{background:var(--orange-pale);border:2px solid var(--orange);border-radius:14px;padding:18px;margin-top:14px;display:none}
.alerte-danger.visible{display:block}
.alerte-danger h3{font-size:1.05rem;margin-bottom:8px}
.alerte-danger p{font-size:.92rem}
.numeros{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.numero{background:var(--blanc);border:2px solid var(--orange);border-radius:12px;padding:10px 16px;text-align:center;text-decoration:none;color:var(--encre);min-width:96px}
.numero b{display:block;font-size:1.35rem;font-weight:800}
.numero span{font-size:.72rem}

label,.etiquette{display:block;font-size:.85rem;color:var(--gris);margin:12px 0 5px;font-weight:700}
.obligatoire{color:var(--orange);font-weight:800}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],textarea,select{width:100%;border:1px solid var(--bord-input);border-radius:10px;padding:11px 13px;font-size:.95rem;font-family:inherit;background:var(--blanc);color:var(--encre)}
textarea{min-height:120px;resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:3px solid var(--turquoise-clair);border-color:var(--turquoise)}
.aide-champ{font-size:.78rem;color:var(--gris-doux);margin-top:4px}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.deux-col{grid-template-columns:1fr}}
.case{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin-top:16px;cursor:pointer;color:var(--encre);font-weight:400}
.case input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--marine)}
.encart{border-radius:14px;padding:13px 15px;display:flex;gap:11px;align-items:flex-start;font-size:.88rem;line-height:1.55;margin-top:16px}
.encart .ic{font-size:1.1rem;margin-top:1px;flex-shrink:0}
.encart.confid{background:var(--turquoise-pale);border:1px solid var(--turquoise)}
.encart.delai{background:var(--jaune-pale);border:1px solid var(--jaune)}
.encart.astuce{background:var(--violet-pale);border:1px solid var(--violet)}
.encart.alerte{background:var(--orange-pale);border:1px solid var(--orange)}

.nav-etapes{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--bord)}

.choix-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.grille-dispo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:6px}
.dispo{border:1px solid var(--bord);border-radius:14px;padding:13px;text-align:center;cursor:pointer;background:var(--blanc)}
.dispo:hover{border-color:var(--turquoise)}
.dispo[aria-pressed="true"]{border:2px solid var(--turquoise);background:var(--turquoise-pale)}
.dispo b{font-size:.92rem;display:block}
.dispo span{font-size:.78rem;color:var(--gris)}

/* ---------- Confirmation et suivi ---------- */
.conf-centre{text-align:center;padding:14px 0}
.rond-vert{width:64px;height:64px;border-radius:50%;background:var(--vert-pale);border:2px solid var(--vert);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.9rem;font-weight:800}
.boite-code{background:var(--blanc);border:2px solid var(--p-1);border-radius:16px;padding:20px;max-width:400px;margin:18px auto 10px;position:relative;overflow:hidden}
.boite-code::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--p-grad)}
.boite-code .etiq{font-size:.85rem;color:var(--gris);margin-bottom:6px}
.boite-code .code{font-size:1.75rem;font-weight:800;letter-spacing:.08em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.boite-code .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.et-maintenant{text-align:left;max-width:460px;margin:20px auto 0;background:var(--turquoise-pale);border-radius:14px;padding:16px 18px;font-size:.88rem}
.et-maintenant b{display:block;margin-bottom:8px;font-size:.95rem}
.et-maintenant ol{padding-left:20px}
.et-maintenant li{margin-bottom:5px}

.frise{margin-top:8px;list-style:none}
.jalon{display:flex;gap:14px}
.jalon .colonne{display:flex;flex-direction:column;align-items:center}
.jalon .rond{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
.jalon .trait{width:3px;flex:1;min-height:22px;background:var(--bord)}
.jalon.fait .rond{background:var(--vert);color:#fff}
.jalon.fait .trait{background:var(--vert)}
.jalon.actuel .rond{border:3px solid var(--turquoise);background:var(--turquoise-pale)}
.jalon.futur .rond{border:2px solid var(--bord);background:var(--blanc)}
.jalon .contenu{padding-bottom:16px}
.jalon .contenu b{font-size:.92rem;display:block}
.jalon.futur .contenu b{color:var(--gris-doux);font-weight:400}
.jalon .contenu span{font-size:.78rem;color:var(--gris)}
.badge-statut{background:var(--turquoise-pale);border:1px solid var(--turquoise);font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:16px;display:inline-block}

/* ---------- Fiches et quiz ---------- */
.liste-fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.fiche-carte{text-align:left;border:1px solid var(--bord);border-left:5px solid var(--fc,var(--turquoise));border-radius:14px;padding:16px;background:var(--blanc);cursor:pointer;transition:box-shadow .15s}
.fiche-carte:hover{box-shadow:0 6px 16px rgba(0,0,0,.07)}
.fiche-carte h3{font-size:.98rem;margin-bottom:4px}
.fiche-carte p{font-size:.8rem;color:var(--gris)}
.fiche-carte .meta{font-size:.74rem;color:var(--gris-doux);margin-top:8px;display:block}
.entete-fiche{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.section-fiche{margin-bottom:20px}
.section-fiche h3{font-size:.85rem;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.section-fiche div{font-size:1rem;line-height:1.7}
.section-fiche.exemples div{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:1.1rem;background:var(--fond);border-left:4px solid var(--violet);padding:12px 16px;border-radius:0 12px 12px 0}
.bloc-quiz{background:var(--turquoise-pale);border:1px solid var(--turquoise);border-radius:16px;padding:20px;margin-top:22px}
.bloc-quiz h3{font-size:1.05rem;margin-bottom:4px}
.bloc-quiz .q{font-size:1.02rem;margin:12px 0;font-weight:500}
.points-quiz{display:flex;gap:5px;margin-top:4px}
.points-quiz span{width:22px;height:6px;border-radius:3px;background:#00AAB040}
.points-quiz span.ok{background:var(--vert)} .points-quiz span.ko{background:var(--orange)} .points-quiz span.cours{background:var(--turquoise)}
.btns-vf{display:flex;gap:10px}
.btn-vf{flex:1;max-width:140px;background:var(--blanc);border:2px solid var(--turquoise);border-radius:12px;padding:11px;font-size:1rem;font-weight:700;cursor:pointer}
.btn-vf:hover:not(:disabled){background:var(--turquoise-pale)}
.btn-vf:disabled{opacity:.55;cursor:default}
.retour-quiz{margin-top:12px;border-radius:12px;padding:12px 14px;font-size:.9rem;display:none}
.retour-quiz.bon{display:block;background:var(--vert-pale);border:1px solid var(--vert)}
.retour-quiz.faux{display:block;background:var(--orange-pale);border:1px solid var(--orange)}
.score-quiz{font-size:.8rem;color:var(--gris);margin-top:10px}

.bloc-rps{border-left:6px solid var(--bc);border-radius:0 18px 18px 0}
.etapes-med{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:10px;counter-reset:etape}
.etapes-med div{background:var(--fond);border-radius:12px;padding:14px;font-size:.88rem;counter-increment:etape}
.etapes-med div::before{content:counter(etape);display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--jaune);font-weight:800;align-items:center;justify-content:center;margin-bottom:6px}
.carte-mediateur{border:1px solid var(--bord);border-radius:16px;padding:18px;background:var(--blanc)}
.badge-dept{font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:14px;display:inline-block;margin-bottom:10px}

/* ---------- Pied de page ---------- */
footer{padding:22px 16px;font-size:.82rem;color:var(--gris);border-top:1px solid var(--bord);margin-top:34px;background:var(--blanc)}
.pied{max-width:920px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.pied .urgence b{font-weight:800}
.pied nav{display:flex;gap:14px;flex-wrap:wrap}
.pied nav button{background:none;border:none;color:var(--gris);text-decoration:underline;cursor:pointer;font-size:.82rem}

/* ---------- Admin ---------- */
.bandeau-demo{background:var(--jaune-pale);border:1px solid var(--jaune);border-radius:12px;padding:10px 14px;font-size:.8rem;margin:14px 0}
.nav-admin{display:flex;gap:6px;margin:16px 0;flex-wrap:wrap;border-bottom:1px solid var(--bord)}
.onglet-admin{background:none;border:none;font-size:.9rem;color:var(--gris);cursor:pointer;padding:8px 10px;border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500}
.onglet-admin[aria-selected="true"]{color:var(--encre);font-weight:700;border-bottom-color:var(--p-1)}
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.compteur{border-radius:12px;padding:13px;border:1px solid}
.compteur p{font-size:.78rem;color:var(--gris)}
.compteur b{font-size:1.6rem;font-weight:800}
.stats{margin-bottom:18px}
.stat-ligne{display:grid;grid-template-columns:170px 1fr 30px;gap:10px;align-items:center;font-size:.8rem;margin-bottom:5px}
.stat-ligne .barre-fond{background:var(--fond);border-radius:4px;height:12px;overflow:hidden}
.stat-ligne .barre-val{height:100%;background:var(--grad-gip);border-radius:4px}
@media(max-width:560px){.stat-ligne{grid-template-columns:110px 1fr 24px}}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filtres select,.filtres input{width:auto;font-size:.82rem;padding:7px 10px}
.table-defile{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th{text-align:left;padding:9px 8px;color:var(--gris);font-weight:700;border-bottom:1px solid var(--bord);white-space:nowrap}
td{padding:10px 8px;border-bottom:1px solid #efede7}
tr.ligne-demande{cursor:pointer}
tr.ligne-demande:hover,tr.ligne-demande:focus{background:var(--fond);outline:none}
tr.prioritaire{background:var(--orange-pale)}
.puce{padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:700;white-space:nowrap;display:inline-block}
.puce.danger{background:var(--orange)}
.puce.rapide{background:var(--jaune)}
.puce.preoc{background:var(--ciel-pale);border:1px solid var(--ciel)}
.puce.info{background:#efede7}
.commentaire{border-left:4px solid var(--turquoise);background:var(--fond);padding:9px 13px;margin-bottom:9px;font-size:.84rem;border-radius:0 8px 8px 0}
.commentaire.msg{border-left-color:var(--p-1)}
.commentaire .meta{font-size:.72rem;color:var(--gris);margin-top:4px}
.zone-depot{border:2px dashed var(--turquoise);border-radius:16px;padding:26px;text-align:center;background:var(--turquoise-pale);margin-bottom:10px}
.zone-depot.survol{background:#00AAB033}
.zone-depot p{font-size:.85rem}
.apercu-import{border:1px solid var(--bord);border-radius:12px;overflow:hidden;margin:14px 0}
.bandeau-apercu{background:var(--jaune-pale);padding:10px 14px;font-size:.84rem;font-weight:700;border-bottom:1px solid var(--jaune)}
tr.anomalie{background:var(--orange-pale)}
.liste-admin-fiches{display:flex;flex-direction:column;gap:7px}
.item-admin-fiche{text-align:left;width:100%;border:1px solid var(--bord);border-radius:12px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:var(--blanc);font-size:.84rem}
.item-admin-fiche:hover{border-color:var(--p-1)}
.item-admin-fiche[aria-current="true"]{border:2px solid var(--p-1);background:var(--p-pale)}
.etat{font-size:.72rem;font-weight:700}
.etat.publiee{color:#0e6e33} .etat.brouillon{color:#8a4b00} .etat.vide{color:var(--gris-doux)}
.deux-panneaux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px}
@media(max-width:720px){.deux-panneaux{grid-template-columns:1fr}}
.q-item{border:1px solid var(--bord);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--blanc)}
.historique{list-style:none;font-size:.8rem;color:var(--gris)}
.historique li{padding:3px 0}
.apercu-hero{border:1px solid var(--bord);border-radius:14px;overflow:hidden;margin-top:12px}

.bandeau-demo-public{background:var(--jaune);font-size:.82rem;font-weight:700;text-align:center;padding:7px 16px}
.bandeau-serveur-test{background:var(--marine);color:var(--blanc);font-size:.82rem;text-align:center;padding:7px 16px}
.en-bref{background:var(--marine-pale);border:1px solid var(--marine);border-radius:14px;padding:14px 16px;margin-top:16px;font-size:.88rem}
.en-bref h3{font-size:.95rem;margin-bottom:6px}
.en-bref ul{padding-left:18px}
.en-bref li{margin-bottom:3px}
.liste-donnees h2{font-size:1.05rem;margin:18px 0 6px}
.liste-donnees h2:first-child{margin-top:0}
.liste-donnees p,.liste-donnees li{font-size:.93rem}
.liste-donnees ul{padding-left:20px}
.liste-donnees li{margin-bottom:4px}
.puce.retard{background:var(--orange)} .puce.ok{background:var(--vert-pale);border:1px solid var(--vert)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--encre);color:#fff;padding:12px 20px;border-radius:12px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50;max-width:calc(100% - 32px);text-align:center}
.toast.visible{opacity:1}