/* ============================================================================
SOS oPaddock - le SEUL fichier CSS.
Tokens repris des maquettes. Mobile d'abord : tout est verifie a 360px.
========================================================================== */
:root{
--primary:#10b981; --primary-dark:#059669; --primary-darker:#047857;
--primary-light:#34d399; --primary-200:#a7f3d0; --primary-100:#d1fae5; --primary-50:#ecfdf5;
--ink:#0e1c17; --text:#1f2a37; --text-soft:#4b5966; --muted:#6b7785;
--line:#e8efeb; --line-soft:#f1f6f3;
--app:#eaf3ee; --surface:#fff; --surface-2:#f5faf7;
--danger:#ef4444; --danger-dark:#dc2626;
--warning:#f59e0b; --warning-dark:#d97706;
--info:#3b82f6; --info-dark:#2563eb;
--violet:#8b5cf6; --violet-dark:#7c3aed;
--r-sm:14px; --r:18px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
--sh-xs:0 1px 2px rgba(16,24,40,.05);
--sh-sm:0 4px 14px -6px rgba(16,24,40,.12);
--sh:0 14px 36px -16px rgba(16,24,40,.20);
--font-body:'Outfit',system-ui,-apple-system,sans-serif;
--font-display:'Fraunces','Outfit',Georgia,serif;
}
*{box-sizing:border-box;min-width:0}
/* [hidden] DOIT toujours gagner. Sans ca, une regle "display:flex" plus loin
dans le fichier reaffiche un bloc que le HTML declare cache : c'est ce qui
faisait apparaitre un bouton "Retirer" orphelin sous le salon. */
[hidden]{display:none !important}
html{overflow-x:hidden}
/* AUCUN defilement horizontal. Jamais. Sur un telephone, dans le stress,
une page qui part de travers est une page qu'on quitte. */
body{margin:0;background:var(--app);color:var(--text);font-family:var(--font-body);
-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
/* Un mot trop long (une URL, un nom de lieu) ne casse jamais la mise en page. */
p,h1,h2,h3,h4,td,th,li,label,summary,b,span,div{overflow-wrap:anywhere}
table{max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4{margin:0}
a{color:inherit}
img{max-width:100%}
/* ===== BANDEAU OFFICIEL (sur CHAQUE page) ===== */
.officiel{background:#fffbeb;border-bottom:1px solid #fde68a;padding:11px 20px}
.officiel-in{max-width:1280px;margin:0 auto;display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#92400e;line-height:1.5}
.officiel svg{flex:0 0 auto;margin-top:1px;color:var(--warning-dark)}
.officiel a{color:#92400e;font-weight:700;text-decoration:underline;white-space:nowrap}
/* ===== HEADER ===== */
.header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-in{max-width:1280px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0;flex:0 1 auto}
.mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(150deg,var(--primary-light),var(--primary-dark));
display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -9px rgba(16,185,129,.8);flex:0 0 auto}
.brand-txt{min-width:0}
.brand-txt .n{font-weight:800;font-size:18px;letter-spacing:-.4px;color:var(--ink);line-height:1.1;white-space:nowrap}
.brand-txt .s{font-size:11.5px;color:var(--muted);font-weight:600}
.spacer{flex:1}
/* "Mon espace" : visible seulement si l'appareil se souvient de la personne.
Ce n'est PAS un bouton de connexion : il n'y a ni compte ni mot de passe. */
.moi-lien{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);
background:var(--primary-50);border:1px solid var(--primary-200);color:var(--primary-darker);
font-size:13px;font-weight:800;text-decoration:none;transition:.15s;white-space:nowrap}
.moi-lien:hover{background:var(--primary-100);border-color:var(--primary)}
.moi-ini{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:0 0 auto}
/* .crise-tag : remplacee par .ctag, teintee au type et lisible. */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* ===== LARGEURS ===== */
.wrap{max-width:1280px;margin:0 auto;padding:24px 20px 60px}
body.w-etroit .wrap,body.w-etroit .header-in,body.w-etroit .officiel-in{max-width:900px}
/* ===== TITRES ===== */
/* En-tête d'incident (fiche urgence) : le NOM de l'incident, bien visible. */
.inc-hero{text-align:center;margin:18px 0 4px}
.inc-hero-nom{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,4vw,37px);
letter-spacing:-.6px;line-height:1.14;color:var(--ink);margin:11px 0 5px}
.inc-hero-loc{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--muted);font-weight:600}
.inc-hero-loc .dept{font-size:11.5px;font-weight:800;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-pill);padding:1px 7px;color:var(--text-soft)}
.hero{text-align:center;padding:14px 0 26px}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(25px,4.2vw,39px);letter-spacing:-.8px;line-height:1.14;color:var(--ink)}
.hero p{color:var(--text-soft);font-size:15.5px;max-width:600px;margin:14px auto 0;line-height:1.65}
.titre{font-family:var(--font-display);font-weight:500;font-size:clamp(23px,4vw,32px);color:var(--ink);letter-spacing:-.6px;margin-bottom:6px;line-height:1.2}
.soustitre{color:var(--text-soft);font-size:15px;margin:0 0 24px;line-height:1.55}
/* ============================================================================
LE BLOC D'EVACUATION. La fonction centrale.
Dans l'urgence, on ne LIT pas : on SCANNE. Un titre, un bouton, une ligne.
========================================================================== */
.evac{max-width:640px;margin:8px auto 0;padding:26px 24px;text-align:center;
background:linear-gradient(165deg,#fff5f5,#fff);
border:2px solid #fecaca;border-radius:var(--r-xl);
box-shadow:0 20px 50px -24px rgba(239,68,68,.45)}
.evac-tag{display:inline-flex;align-items:center;gap:8px;background:#fef2f2;color:#b91c1c;
border:1px solid #fecaca;padding:7px 14px;border-radius:var(--r-pill);
font-size:12.5px;font-weight:800;margin-bottom:14px}
.evac-tag .pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite}
.evac-t{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3.4vw,29px);
color:var(--ink);letter-spacing:-.5px;line-height:1.25;margin-bottom:20px}
.evac-btn{width:100%;box-shadow:0 18px 34px -12px rgba(239,68,68,.8)}
.evac-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.55}
.evac-note b{color:var(--text-soft)}
.evac-ou{max-width:760px;margin:26px auto 0;text-align:center;font-size:13px;
font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
/* La note sous la carte : discrete, une seule ligne d'idee. */
.legende-note{font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.5}
.legende-note b{color:var(--text-soft)}
/* ===== LES 4 BOUTONS D'ACCUEIL ===== */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:24px auto 0}
.act{display:flex;align-items:center;justify-content:center;gap:11px;padding:20px;border-radius:var(--r-lg);
font-weight:800;font-size:16.5px;transition:transform .15s,box-shadow .2s;text-decoration:none;text-align:center}
.act svg{flex:0 0 auto}
.act-urgence{grid-column:1/-1;background:var(--danger);color:#fff;box-shadow:0 16px 30px -12px rgba(239,68,68,.75);font-size:18px;padding:22px}
.act-urgence:hover{background:var(--danger-dark);transform:translateY(-2px)}
.act-heberg{background:var(--primary);color:#fff;box-shadow:0 14px 28px -12px rgba(16,185,129,.8)}
.act-heberg:hover{background:var(--primary-dark);transform:translateY(-2px)}
.act-transp{background:var(--surface);color:var(--info-dark);border:2px solid #bfdbfe;box-shadow:var(--sh-xs)}
.act-transp:hover{border-color:var(--info);background:#eff6ff;transform:translateY(-2px)}
.act-aide{grid-column:1/-1;background:var(--surface);color:var(--violet-dark);border:2px solid #ddd6fe;box-shadow:var(--sh-xs)}
.act-aide:hover{border-color:var(--violet);background:#f5f3ff;transform:translateY(-2px)}
/* ===== CHIFFRES ===== */
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px auto 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;
display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sh-xs);font-size:13.5px}
.stat b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink)}
.stat span{color:var(--muted);font-weight:600}
.stat.hl b{color:var(--primary-dark)}
/* ===== LAYOUT LISTE + CARTE ===== */
.layout{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start;margin-top:30px}
/* ===== FILTRES ===== */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.filtre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
font-size:13.5px;font-weight:700;color:var(--text-soft);transition:all .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.filtre:hover{border-color:var(--primary-200);color:var(--primary-darker)}
.filtre.on{background:var(--primary-50);border-color:var(--primary);color:var(--primary-darker)}
.filtre-sel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;
font-size:13.5px;font-weight:700;color:var(--text-soft);outline:none;cursor:pointer}
.compte{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:600}
/* Groupe de filtres qu'on masque d'un bloc (box/paddock : hebergement seulement). */
.filtres-g{display:contents}
.filtres-g[hidden]{display:none}
/* Le compteur porte par chaque onglet : on voit ou il y a quelque chose AVANT
de cliquer. Un onglet vide se grise au lieu de disparaitre -- une categorie
qui saute change la position des autres sous le doigt. */
.fc{background:var(--surface-2);border-radius:var(--r-pill);padding:1px 7px;font-size:11.5px;font-weight:800;
color:var(--muted);min-width:20px;text-align:center}
.filtre.on .fc{background:var(--primary);color:#fff}
.filtre.vide{opacity:.5}
/* ===== CARTES OFFRE ===== */
.liste{display:flex;flex-direction:column;gap:13px}
.offre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px;box-shadow:var(--sh-xs)}
.offre.stale{opacity:.72;border-style:dashed}
.offre[hidden]{display:none}
/* ---------------------------------------------------------------------------
LES CARTES HORS ÉCRAN NE SONT NI CALCULÉES NI DESSINÉES.
Sur un gros incident, la page en aligne jusqu'à 600 ou 900 (300 par
catégorie). Chaque clic sur « Hébergements / Transports / Aide » filtre côté
client — donc sans recharger, c'est déjà bien — mais le navigateur devait
quand même recalculer la position et repeindre la liste ENTIÈRE, y compris
les centaines de cartes situées dix écrans plus bas que personne ne regarde.
C'est ça qu'on sentait : le filtre était instantané, l'affichage non.
`content-visibility:auto` dit au navigateur de sauter tout ce travail tant
qu'une carte n'approche pas de l'écran. Le coût du filtrage devient
proportionnel à ce qu'on VOIT, plus à ce qui existe.
`contain-intrinsic-size: auto 250px` : la hauteur supposée d'une carte pas
encore mesurée. Sans elle, la barre de défilement sauterait à chaque fois
qu'une carte se révèle. Le mot-clé `auto` fait mémoriser la vraie hauteur
une fois la carte affichée une première fois — donc plus aucun saut ensuite.
Navigateur qui ne connaît pas la propriété : elle est ignorée, on retrouve
exactement le comportement d'avant. Rien à dégrader, rien à tester en repli.
--------------------------------------------------------------------------- */
.liste > .offre{ content-visibility:auto; contain-intrinsic-size:auto 250px; }
/* LA LISTE MELANGE LES TROIS CATEGORIES : sans etiquette, on ne sait plus si
la fiche qu'on lit est une ecurie, un camion ou une paire de bras. La couleur
est la meme que sur la carte et que sur les boutons "Vous pouvez aider ?". */
.o-cat{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
padding:3px 9px;border-radius:var(--r-pill);margin-bottom:9px}
.o-cat-h{background:#ecfdf5;color:#047857}
.o-cat-t{background:#eff6ff;color:#1d4ed8}
.o-cat-a{background:#f5f3ff;color:#6d28d9}
.o-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px}
.o-nom{font-size:17.5px;font-weight:800;letter-spacing:-.3px;color:var(--ink);margin-bottom:4px}
.o-loc{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;flex-wrap:wrap}
.o-loc .dept{background:var(--surface-2);border:1px solid var(--line-soft);padding:2px 8px;border-radius:var(--r-pill);
font-size:11.5px;font-weight:700;color:var(--text-soft)}
.dist{background:var(--primary-50);color:var(--primary-darker);border:1px solid var(--primary-200);
padding:7px 13px;border-radius:var(--r-pill);font-weight:800;font-size:13.5px;white-space:nowrap;flex:0 0 auto}
.places{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.place{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 13px;min-width:78px}
.place .n{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--primary-darker);line-height:1}
.place .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:4px}
.place.zero .n{color:var(--muted)}
/* Jauge de remplissage d'une structure : ce qui est déjà pris vs le total. */
.o-jauge{margin:0 0 13px}
.o-jauge-bar{height:8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.o-jauge-bar span{display:block;height:100%;border-radius:6px;transition:width .35s ease;min-width:2px}
.o-jauge-txt{margin-top:5px;font-size:12px;color:var(--text-soft);font-weight:600}
.o-jauge-txt b{color:var(--ink)}
.o-jauge-txt span{color:var(--muted);font-weight:600}
.o-jauge.ok .o-jauge-bar span{background:#10b981}
.o-jauge.warn .o-jauge-bar span{background:#f59e0b}
.o-jauge.hot .o-jauge-bar span{background:#ef4444}
.o-jauge.hot .o-jauge-txt b{color:#ef4444}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.b{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill)}
.b-ok{background:var(--primary-50);color:var(--primary-darker);border:1px solid var(--primary-200)}
.b-info{background:#eff6ff;color:var(--info-dark);border:1px solid #bfdbfe}
.b-vio{background:#f5f3ff;color:var(--violet-dark);border:1px solid #ddd6fe}
.b-warn{background:#fffbeb;color:var(--warning-dark);border:1px solid #fde68a}
.b-fresh{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.o-foot{display:flex;align-items:center;gap:10px;padding-top:13px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
/* L'ACTION PRINCIPALE : reserver. Pas "voir un numero".
On ne fait pas appeler quelqu'un pour qu'il decouvre que la place est prise. */
.btn-resa{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;
background:var(--primary);color:#fff;font-weight:800;font-size:14.5px;
padding:12px 20px;border-radius:var(--r-pill);text-decoration:none;transition:.15s;
box-shadow:0 12px 24px -11px rgba(16,185,129,.9)}
.btn-resa:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-resa.t{background:var(--info);box-shadow:0 12px 24px -11px rgba(59,130,246,.9)}
.btn-resa.t:hover{background:var(--info-dark)}
.btn-resa.a{background:var(--violet);box-shadow:0 12px 24px -11px rgba(139,92,246,.9)}
.btn-resa.a:hover{background:var(--violet-dark)}
/* Appeler reste possible, mais en second. */
.btn-tel2{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
background:#fff;border:1.5px solid var(--line);color:var(--text-soft);
font-weight:800;font-size:13.5px;padding:12px 18px;border-radius:var(--r-pill);
text-decoration:none;transition:.15s;white-space:nowrap}
.btn-tel2:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50)}
.btn-tel2.revealed{background:var(--primary-darker);color:#fff;border-color:var(--primary-darker);
font-family:var(--font-display);font-size:15px;letter-spacing:.4px}
/* LA CIBLE : a qui on demande. Rappelee en tete du formulaire. */
.cible{display:flex;align-items:center;gap:12px;padding:15px 16px;margin-bottom:16px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.cible-ic{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:#fff}
.cible-ic.h{background:var(--primary)}
.cible-ic.t{background:var(--info)}
.cible-ic.a{background:var(--violet)}
.cible-t{min-width:0}
.cible-t b{display:block;font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.25}
.cible-t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
/* La bulle de la carte */
.pop-b{display:block;margin-top:8px;padding:9px 14px;border-radius:var(--r-pill);
background:var(--primary);color:#fff !important;font-weight:800;font-size:12.5px;
text-align:center;text-decoration:none !important}
.pop-l{display:block;margin-top:6px;text-align:center;font-size:11.5px;color:var(--muted) !important}
.btn-tel{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;font-weight:800;font-size:14.5px;
padding:11px 20px;border-radius:var(--r-pill);box-shadow:0 10px 20px -10px rgba(16,185,129,.75);transition:all .15s;text-decoration:none}
.btn-tel:hover{background:var(--primary-dark)}
.btn-tel.revealed{background:var(--primary-darker);font-family:var(--font-display);font-size:16px;letter-spacing:.5px}
.reveals{font-size:11.5px;color:var(--muted);font-weight:600}
.o-links{margin-left:auto;display:flex;gap:12px}
.o-links a,.o-links button{font-size:12.5px;color:var(--muted);font-weight:600;text-decoration:underline}
/* ===== ASIDE / CARTE ===== */
.aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-xs)}
.card h3{font-size:15px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
#carte{height:400px;border-radius:var(--r);border:1px solid var(--line)}
.legende{display:flex;gap:14px;margin-top:11px;font-size:12px;color:var(--muted);font-weight:600;flex-wrap:wrap}
.legende i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
/* legende avec l'icone du marqueur, pour la reconnaitre d'un coup d'oeil */
.legende .lg{display:inline-flex;align-items:center;gap:6px}
.legende .lg i{width:18px;height:18px;border-radius:50%;margin:0;display:grid;place-items:center;flex:0 0 auto}
/* la bulle Leaflet, aux couleurs du site */
.leaflet-popup-content{font-family:var(--font-body);font-size:13px;line-height:1.55;margin:12px 14px}
.leaflet-popup-content b{color:var(--ink);font-size:14px}
.leaflet-popup-content a{color:var(--primary-dark);font-weight:800;text-decoration:none}
.leaflet-popup-content a:hover{text-decoration:underline}
.leaflet-popup-content-wrapper{border-radius:var(--r-sm);box-shadow:var(--sh)}
/* ============================================================================
MON ESPACE. UNE seule structure, repetee : section > titre > liste > ligne.
Chaque ligne est identique : icone a gauche, texte au centre, action a droite.
C'est ce qui rend la page lisible d'un coup d'oeil au lieu d'etre un catalogue.
========================================================================== */
.me-s{margin-bottom:34px}
/* LA RUBRIQUE : un chip d'icône dégradé + un titre, dans l'esprit des grandes
cartes de l'accueil. Le chip donne à chaque section une identité couleur. */
.me-s-h{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.me-s-ic{width:40px;height:40px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
color:#fff;background:linear-gradient(140deg,var(--primary-light),var(--primary-dark));
box-shadow:0 10px 20px -11px rgba(16,185,129,.95)}
.me-s-ic.amber {background:linear-gradient(140deg,#fbbf24,#d97706);box-shadow:0 10px 20px -11px rgba(217,119,6,.9)}
.me-s-ic.info {background:linear-gradient(140deg,#60a5fa,#2563eb);box-shadow:0 10px 20px -11px rgba(37,99,235,.85)}
.me-s-ic.violet{background:linear-gradient(140deg,#a78bfa,#7c3aed);box-shadow:0 10px 20px -11px rgba(124,58,237,.85)}
.me-s-ic.slate {background:linear-gradient(140deg,#94a3b8,#475569);box-shadow:0 10px 20px -11px rgba(71,85,105,.75)}
.me-s-h h2{font-family:var(--font-display);font-weight:600;font-size:22px;
color:var(--ink);letter-spacing:-.5px;margin:0;line-height:1.15}
.me-c{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;
border-radius:var(--r-pill);background:var(--primary);color:#fff;
font-size:12px;font-weight:800}
.me-s-p{margin:-8px 0 15px 53px;font-size:13.5px;color:var(--muted);line-height:1.55}
/* La liste : des lignes soudées dans une carte douce, séparées par un filet. */
.me-l{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;box-shadow:var(--sh-sm)}
.me-i{display:flex;align-items:center;gap:14px;padding:16px 18px;
transition:background .16s}
.me-i+.me-i,.me-i+.me-d,.me-d+.me-d,.me-d+.me-i{border-top:1px solid var(--line-soft)}
.me-i:hover{background:var(--surface-2)}
.me-ic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;color:#fff}
.me-ic.h{background:var(--primary)}
.me-ic.t{background:var(--info)}
.me-ic.a{background:var(--violet)}
.me-ic.d{background:var(--danger)}
.me-ic.c{background:var(--primary-dark)}
.me-ic.n{background:var(--muted)}
.me-ic.x{background:#fff;color:var(--danger-dark);border:1.5px solid #fecaca}
.me-txt{min-width:0;flex:1}
.me-txt b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.3}
.me-txt small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.me-r{color:var(--danger-dark);font-weight:800}
.me-b{flex:0 0 auto;padding:9px 18px;border-radius:var(--r-pill);
background:#fff;border:1.5px solid var(--line);color:var(--text-soft);
font-size:13px;font-weight:800;text-decoration:none;transition:.15s;white-space:nowrap;cursor:pointer}
.me-b:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50)}
.me-b.p{background:var(--primary);border-color:var(--primary);color:#fff;
box-shadow:0 8px 16px -9px rgba(16,185,129,.85)}
.me-b.p:hover{background:var(--primary-dark)}
/* Bouton d'action destructive (effacer mes données) : rouge, mais sobre. */
.me-b-dang{border-color:#fecaca;color:var(--danger-dark);background:#fff}
.me-b-dang:hover{border-color:var(--danger);color:#fff;background:var(--danger)}
/* Capacité d'hébergement (modale communauté) : n'apparaît QUE si « héberger »
est coché — bascule pure CSS via :has(), sans JavaScript. */
#dmodal-commu .commu-places{display:none;margin-top:14px;padding:14px 15px;border-radius:var(--r);
background:var(--primary-50);border:1px solid var(--primary-200)}
#dmodal-commu form:has(input[name="heberger"]:checked) .commu-places{display:block}
/* ══════════════ ESPACE PERSO — LE HERO « MAGNIFIQUE » ══════════════
Un avatar (l'initiale) dans un rond dégradé, le bonjour en display, le tout
posé sur une carte à dégradé très doux avec un halo lumineux. C'est l'accueil :
il doit donner envie de rester. */
.me-hero{display:flex;align-items:center;gap:17px;margin:6px 0 32px;padding:22px 24px;
border-radius:var(--r-xl);position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--primary-50),var(--surface) 62%);
border:1px solid var(--primary-100);box-shadow:0 24px 46px -30px rgba(16,185,129,.55)}
.me-hero::before{content:"";position:absolute;top:-45%;right:-8%;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,rgba(16,185,129,.14),transparent 70%);pointer-events:none}
.me-hero-av{width:62px;height:62px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-display);font-weight:600;font-size:28px;color:#fff;position:relative;z-index:1;
background:linear-gradient(150deg,var(--primary-light),var(--primary-dark));
box-shadow:0 14px 26px -10px rgba(16,185,129,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.me-hero-txt{min-width:0;position:relative;z-index:1}
.me-hero-txt h1{font-family:var(--font-display);font-weight:500;font-size:clamp(25px,4.6vw,35px);
letter-spacing:-.7px;line-height:1.08;color:var(--ink);margin:0}
.me-hero-txt p{color:var(--text-soft);font-size:14.5px;margin:6px 0 0;line-height:1.5}
@media(max-width:560px){ .me-hero{padding:18px;gap:14px} .me-hero-av{width:52px;height:52px;font-size:23px} }
/* Cartes de liste (.me-l) : une ombre plus profonde et douce = plus de matière. */
.me-l{box-shadow:0 4px 14px -6px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.04)}
.me-i{transition:background .16s}
.me-i:hover .me-b{border-color:var(--primary-200)}
/* Les replis de "Ma fiche" : MEME ligne, avec un + a droite. */
.me-d>summary{display:flex;align-items:center;gap:12px;padding:14px 16px;
cursor:pointer;list-style:none;transition:background .16s}
.me-d>summary::-webkit-details-marker{display:none}
.me-d>summary::after{content:'+';margin-left:auto;font-size:22px;line-height:1;
color:var(--muted);font-weight:400;flex:0 0 auto;transition:transform .2s}
.me-d[open]>summary::after{content:'\2212'}
.me-d>summary:hover{background:var(--surface-2)}
.me-d[open]>summary{background:var(--surface-2)}
.me-d-b{padding:4px 16px 18px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
.me-d-x[open]>summary{background:#fef2f2}
.me-d-x>summary:hover{background:#fef2f2}
/* Rien du tout : on ne laisse pas une page vide sans issue. */
.me-vide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:30px 22px;text-align:center;box-shadow:var(--sh-xs)}
.me-vide b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px}
.me-vide small{display:block;font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.55}
@media(max-width:640px){
.me-i,.me-d>summary{padding:13px 13px;gap:10px}
.me-ic{width:32px;height:32px;border-radius:9px}
.me-b{padding:8px 13px;font-size:12.5px}
}
/* ============================================================================
LES PLACES, D'UN COUP D'OEIL.
UNE PLACE = UNE PASTILLE. Verte si elle est libre, pleine si elle est prise.
L'hebergeur comprend sans lire, sans compter, sans reflechir. C'est le but.
========================================================================== */
.pl{padding:0 16px 16px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
/* Les trois chiffres, en tete. Le libre est celui qui compte : il est vert. */
.pl-tot{display:flex;gap:8px;padding:12px 0 13px}
.pl-n{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:9px 6px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);
font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
text-align:center;line-height:1.2}
.pl-n b{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;
color:var(--ink);line-height:1;margin-bottom:3px}
.pl-n.libre{border-color:var(--primary-200);background:var(--primary-50)}
.pl-n.libre b{color:var(--primary-dark)}
.pl-n.pris b{color:var(--warning-dark)}
/* Une carte par unite. */
.pl-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.pl-u{padding:10px;border-radius:var(--r-sm);background:#fff;
border:1.5px solid var(--primary-200);transition:.15s}
.pl-u:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--sh-xs)}
.pl-u.full{border-color:#fde68a;background:#fffbeb}
/* UNE UNITE RESERVEE MENE A LA FICHE. On clique dessus, on voit qui arrive. */
a.pl-u{display:block;text-decoration:none;cursor:pointer}
.pl-u.pris{border-color:var(--warning);background:linear-gradient(160deg,#fffbeb,#fff)}
.pl-u.pris:hover{border-color:var(--warning-dark);transform:translateY(-2px);
box-shadow:0 10px 22px -10px rgba(245,158,11,.7)}
.pl-u.pris .pl-u-f{display:flex;align-items:center;gap:3px;color:var(--warning-dark)}
.pl-u.pris .pl-u-f b{font-weight:800}
.pl-u.pris .pl-u-f svg{margin-left:auto;flex:0 0 auto;transition:transform .15s}
.pl-u.pris:hover .pl-u-f svg{transform:translateX(2px)}
.pl-u.off{border-color:var(--line);background:var(--surface-2);opacity:.6}
.pl-u-h{display:flex;align-items:center;gap:5px;margin-bottom:8px}
.pl-u-h b{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-u-h em{font-style:normal;flex:0 0 auto;width:16px;height:16px;border-radius:5px;
display:grid;place-items:center;font-size:9.5px;font-weight:800;
background:#fef3c7;color:var(--warning-dark);border:1px solid #fde68a}
/* LES PASTILLES. C'est tout le principe. */
.pl-d{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;min-height:14px}
.pl-p{width:14px;height:14px;border-radius:5px;flex:0 0 auto;
background:var(--primary-100);border:1.5px solid var(--primary);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pl-p.on{background:var(--warning);border-color:var(--warning-dark);
box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.pl-u.off .pl-p{background:var(--line);border-color:var(--muted)}
.pl-u-f{font-size:11px;font-weight:700;color:var(--muted);line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-u.full .pl-u-f{color:var(--warning-dark)}
/* La legende : trois mots, une fois. */
.pl-lg{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;
font-size:11px;font-weight:700;color:var(--muted)}
.pl-lg span{display:inline-flex;align-items:center;gap:5px}
.pl-lg i{font-style:normal}
.pl-lg .pl-e{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;
font-size:9.5px;font-weight:800;background:#fef3c7;color:var(--warning-dark);border:1px solid #fde68a}
@media(max-width:640px){
.pl{padding:0 13px 13px}
.pl-g{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:7px}
.pl-n b{font-size:19px}
}
/* ===== FORMULAIRES ===== */
.etape{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-xs);margin-bottom:13px}
.et-h{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.et-n{width:29px;height:29px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.et-t{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.lbl{display:block;font-size:13.5px;font-weight:700;color:var(--text-soft);margin-bottom:7px;margin-top:12px}
.lbl:first-child{margin-top:0}
.inp{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:15.5px;
background:var(--surface-2);outline:none;transition:.15s;color:var(--text)}
.inp:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-50)}
textarea.inp{resize:vertical;min-height:70px}
.aide-champ{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
/* 50 / 50, et pas « 1fr 150px ».
L'ancienne regle figeait la 2e colonne a 150 px. Elle datait de l'epoque ou la
paire etait « commune (large) + code postal (etroit) ». Depuis que le code
postal passe EN PREMIER -- c'est lui qui determine le departement, et c'est
celui qu'on tape naturellement d'abord -- c'etait la COMMUNE qui se retrouvait
ecrasee dans 150 px, avec « Courseulles-sur-M... » tronque a l'ecran.
Les 7 formulaires qui utilisent .row2 pairent tous un code postal et une
commune. Deux champs de meme importance : deux colonnes egales. */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.geoloc{width:100%;padding:12px;border:1.5px dashed var(--primary-200);border-radius:var(--r-sm);
background:var(--primary-50);color:var(--primary-darker);font-weight:700;font-size:14px;
display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.geoloc:hover{border-color:var(--primary);background:var(--primary-100)}
/* LE SÉLECTEUR « Pays ». Bridé à 220 px sur grand écran — un menu déroulant
large comme la page pour y lire « France », c'est disgracieux. Mais sur un
téléphone, ce même bridage laissait le champ à moitié vide, désaligné de tous
les autres champs de la colonne : on croyait à un bug d'affichage. Sur mobile,
il prend donc toute la largeur, comme le code postal et la commune au-dessus.
Auparavant en `style=""` inline sur chacun des six formulaires concernés —
donc impossible à corriger par média : une classe, et c'est réglé partout. */
.inp-pays{max-width:220px}
@media(max-width:640px){ .inp-pays{max-width:100%} }
/* compteurs */
.cpt{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface-2);
border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:10px}
.cpt:last-child{margin-bottom:0}
.cpt-l{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.35;min-width:0}
.cpt-l small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.cpt.hot{border-color:#fed7aa;background:#fff7ed}
.cpt.hot .stp-v{color:var(--warning-dark)}
.stp{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.stp-b{width:40px;height:40px;border-radius:13px;background:#fff;border:1.5px solid var(--line);
display:inline-grid;place-items:center;font-size:21px;font-weight:700;color:var(--text-soft);line-height:1;
flex:0 0 auto;cursor:pointer;-webkit-user-select:none;user-select:none;
box-shadow:0 1px 2px rgba(16,24,40,.04);
transition:border-color .15s,color .15s,background .15s,transform .08s,box-shadow .15s}
.stp-b:hover{border-color:var(--primary);color:var(--primary-dark);background:var(--primary-50);
box-shadow:0 6px 14px -8px rgba(16,185,129,.55)}
.stp-b:active{transform:scale(.9)}
.stp-b:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.stp-v{font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--ink);min-width:30px;text-align:center;flex:0 0 auto}
/* options radio (DIV cliquable : JAMAIS un bouton dans un bouton) */
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--line);
border-radius:var(--r-sm);background:var(--surface-2);transition:.15s;cursor:pointer;width:100%}
.opt:hover{border-color:var(--primary-200)}
.opt.on,.opt:has(input:checked){border-color:var(--primary);background:var(--primary-50);
box-shadow:0 0 0 3px var(--primary-50)}
.opt input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.opt-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
/* champ du stepper : natif, donc la page marche SANS JavaScript */
.stp-i{width:58px;padding:8px 4px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink);text-align:center;
outline:none;-moz-appearance:textfield;appearance:textfield;flex:0 0 auto;
transition:border-color .15s,box-shadow .15s}
.stp-i::-webkit-outer-spin-button,.stp-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stp-i:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center}
.opt.on .rd,.opt:has(input:checked) .rd{border-color:var(--primary);background:#fff}
.opt.on .rd::after,.opt:has(input:checked) .rd::after{content:'';width:10px;height:10px;
border-radius:50%;background:var(--primary);animation:rdPop .2s cubic-bezier(.2,1.4,.4,1)}
@keyframes rdPop{from{transform:scale(0)}to{transform:scale(1)}}
.opt-txt{min-width:0;flex:1}
.opt-t{font-size:14.5px;font-weight:700;color:var(--text)}
.opt-s{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.opt .stp{margin-left:auto}
.opt .stp-b{background:#fff}
/* cartes vehicule */
.vehics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vehic{padding:16px 12px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface-2);
display:flex;flex-direction:column;align-items:center;gap:8px;transition:.15s;font-weight:800;font-size:13.5px;
text-align:center;cursor:pointer}
.vehic input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.vehic small{font-weight:500;font-size:11.5px;color:var(--muted);line-height:1.35}
.vehic.on,.vehic:has(input:checked){border-color:var(--info);background:#eff6ff;
color:var(--info-dark);box-shadow:0 0 0 3px #eff6ff}
.vehic-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--info)}
/* cases a cocher en puces */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pill);
border:1.5px solid var(--line);background:var(--surface-2);font-size:13.5px;font-weight:700;color:var(--text-soft);cursor:pointer}
.puce input{position:absolute;opacity:0;width:0;height:0}
.puce.on,.puce:has(input:checked){border-color:var(--primary);background:var(--primary-50);
color:var(--primary-darker);box-shadow:0 0 0 3px var(--primary-50)}
/* bloc repliable */
.repli{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);margin-bottom:13px;overflow:hidden}
.repli>summary{padding:18px 20px;font-size:16px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none;
display:flex;align-items:center;gap:10px}
.repli>summary::-webkit-details-marker{display:none}
.repli>summary::after{content:'+';margin-left:auto;font-size:22px;color:var(--muted);font-weight:400;line-height:1}
.repli[open]>summary::after{content:'\2212'}
.repli>summary small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
.repli-body{padding:0 20px 20px}
/* repeteur paddocks */
.rep-ligne{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px;margin-bottom:10px;background:var(--surface-2)}
.rep-ligne .rep-t{font-size:13.5px;font-weight:800;color:var(--text);margin-bottom:9px;display:flex;align-items:center}
.rep-ligne .rep-x{margin-left:auto;font-size:12px;color:var(--danger-dark);font-weight:700;text-decoration:underline}
.rep-add{width:100%;padding:11px;border:1.5px dashed var(--line);border-radius:var(--r-sm);color:var(--muted);
font-weight:700;font-size:13.5px;background:#fff}
.rep-add:hover{border-color:var(--primary-200);color:var(--primary-darker)}
.chkline{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text-soft);line-height:1.45;margin-top:8px}
/* consentement + CTA */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-soft);line-height:1.5;margin:14px 0 16px}
.cta{width:100%;padding:19px;background:var(--danger);color:#fff;border-radius:var(--r-pill);font-size:17px;
font-weight:800;box-shadow:0 16px 30px -12px rgba(239,68,68,.75);display:flex;align-items:center;
justify-content:center;gap:10px;transition:.15s;margin-top:6px;text-decoration:none}
.cta:hover{background:var(--danger-dark);transform:translateY(-2px)}
.cta-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:11px;line-height:1.5}
/* LE BOUTON PRINCIPAL. C'est lui qu'on touche au bout du formulaire, souvent
avec une main qui tremble. Il doit etre large, chaud, et repondre au doigt. */
.go{position:relative;overflow:hidden;width:100%;padding:17px 22px;border-radius:var(--r-pill);
background:linear-gradient(135deg,var(--primary-darker),var(--primary));
color:#fff;font-size:16.5px;font-weight:800;letter-spacing:-.2px;
display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
border:0;cursor:pointer;
box-shadow:0 14px 30px -12px rgba(16,185,129,.9),
inset 0 1px 0 rgba(255,255,255,.28);
transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .22s, filter .18s}
.go:hover{transform:translateY(-2px);filter:saturate(1.06);
box-shadow:0 22px 42px -14px rgba(16,185,129,1), inset 0 1px 0 rgba(255,255,255,.34)}
.go:active{transform:translateY(0) scale(.985);
box-shadow:0 8px 18px -10px rgba(16,185,129,.9), inset 0 2px 6px rgba(0,0,0,.14)}
.go:focus-visible{outline:none;box-shadow:0 0 0 4px var(--primary-100),
0 14px 30px -12px rgba(16,185,129,.9)}
.go svg{flex:0 0 auto}
/* Un halo qui balaie le bouton quand la souris passe. Une seule fois, discret. */
.go::before{content:'';position:absolute;top:0;left:-40%;width:35%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
transform:skewX(-18deg);transition:left .55s ease}
.go:hover::before{left:130%}
.go:disabled{opacity:.6;cursor:wait;transform:none;filter:grayscale(.2)}
/* Le bouton secondaire : present, mais il ne prend pas la lumiere. */
.go.sec{background:#fff;color:var(--text-soft);border:1.5px solid var(--line);
box-shadow:var(--sh-xs);font-size:15.5px}
.go.sec:hover{border-color:var(--primary);color:var(--primary-darker);
background:var(--primary-50);box-shadow:var(--sh-sm);filter:none}
.go.sec::before{display:none}
/* Le bouton qui casse quelque chose : jamais mis en avant. */
.go.dang{background:#fff;color:var(--danger-dark);border:1.5px solid #fecaca;
box-shadow:none;font-size:15.5px}
.go.dang:hover{background:#fef2f2;border-color:var(--danger);box-shadow:var(--sh-xs);filter:none}
.go.dang::before{display:none}
.rassure{text-align:center;font-size:12px;color:var(--muted);margin-top:11px;line-height:1.5}
/* alertes */
/* ============================================================================
LE MESSAGE. Confirmation, erreur, avertissement : UNE SEULE forme, partout.
La personne apprend a le lire une fois. Ensuite elle le reconnait au premier
coup d'oeil, et elle sait tout de suite si c'est bon ou si ca a rate.
========================================================================== */
.al{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:12px;
margin-bottom:16px;padding:14px 16px 15px 18px;
border-radius:var(--r);background:#fff;border:1px solid var(--line);
box-shadow:0 3px 8px -4px rgba(14,28,23,.12), 0 14px 34px -20px rgba(14,28,23,.3);
animation:alEntre .38s cubic-bezier(.16,1.05,.3,1)}
@keyframes alEntre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Le trait de couleur : on sait avant meme d'avoir lu. */
.al::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted)}
.al-i{width:30px;height:30px;border-radius:10px;flex:0 0 auto;margin-top:1px;
display:grid;place-items:center;color:#fff;background:var(--muted)}
.al-i svg{animation:alIco .45s .08s cubic-bezier(.2,1.5,.4,1) both}
@keyframes alIco{from{transform:scale(0) rotate(-25deg)}to{transform:none}}
.al-c{min-width:0;flex:1}
.al-t{display:block;font-size:14px;font-weight:800;color:var(--ink);line-height:1.3;
letter-spacing:-.2px}
.al-m{display:block;font-size:13.5px;font-weight:500;color:var(--text-soft);
line-height:1.5;margin-top:3px}
.al-t + .al-m{margin-top:3px}
/* --- Les quatre humeurs --- */
.al-ok{border-color:var(--primary-200);background:linear-gradient(150deg,var(--primary-50),#fff 65%)}
.al-ok::before{background:var(--primary)}
.al-ok .al-i{background:linear-gradient(135deg,var(--primary),var(--primary-dark));
box-shadow:0 6px 14px -5px rgba(16,185,129,.9)}
.al-err{border-color:#fecaca;background:linear-gradient(150deg,#fef2f2,#fff 65%)}
.al-err::before{background:var(--danger)}
.al-err .al-i{background:linear-gradient(135deg,var(--danger),var(--danger-dark));
box-shadow:0 6px 14px -5px rgba(239,68,68,.9)}
.al-warn{border-color:#fde68a;background:linear-gradient(150deg,#fffbeb,#fff 65%)}
.al-warn::before{background:var(--warning)}
.al-warn .al-i{background:linear-gradient(135deg,var(--warning),var(--warning-dark));
box-shadow:0 6px 14px -5px rgba(245,158,11,.9)}
.al-info{border-color:#bfdbfe;background:linear-gradient(150deg,#eff6ff,#fff 65%)}
.al-info::before{background:var(--info)}
.al-info .al-i{background:linear-gradient(135deg,var(--info),var(--info-dark));
box-shadow:0 6px 14px -5px rgba(59,130,246,.9)}
@media(prefers-reduced-motion:reduce){ .al,.al-i svg{animation:none} }
@media(max-width:640px){ .al{padding:13px 13px 14px 16px;gap:10px} }
/* ===== RESULTAT DU PARCOURS ===== */
.res{background:linear-gradient(160deg,#ecfdf5,#fff);border:2px solid var(--primary-200);border-radius:var(--r-xl);
padding:22px;box-shadow:var(--sh-sm);margin-top:20px}
.res-h{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.res-ic{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.res-t{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.3px;line-height:1.2}
.res-s{font-size:13.5px;color:var(--text-soft);margin:0 0 18px 49px}
.bloc-t{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
margin:18px 0 9px;display:flex;align-items:center;gap:7px}
.lieu{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:11px;box-shadow:var(--sh-xs)}
.lieu-h{display:flex;justify-content:space-between;align-items:flex-start;gap:11px;margin-bottom:12px}
.lieu-n{font-size:16.5px;font-weight:800;color:var(--ink)}
.lieu-v{font-size:13px;color:var(--muted);margin-top:2px}
.km{background:var(--primary-50);color:var(--primary-darker);border:1px solid var(--primary-200);
padding:6px 12px;border-radius:var(--r-pill);font-weight:800;font-size:13px;white-space:nowrap;flex:0 0 auto}
.unite{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface-2);
border:1px solid var(--line-soft);border-radius:var(--r-sm);margin-bottom:7px}
.unite:last-of-type{margin-bottom:0}
.chk{width:21px;height:21px;border-radius:6px;background:var(--primary);display:grid;place-items:center;flex:0 0 auto;color:#fff}
.u-t{font-size:14px;font-weight:700;color:var(--text)}
.u-s{font-size:12px;color:var(--muted);margin-top:1px}
.tag-e{margin-left:auto;background:#fef3c7;color:var(--warning-dark);border:1px solid #fde68a;
padding:4px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:800;flex:0 0 auto}
.foin{margin-top:11px;font-size:12.5px;color:var(--primary-darker);font-weight:700;display:flex;align-items:center;gap:6px}
.lieu.transp{border-color:#bfdbfe;background:#f8fbff}
.lieu.transp .km{background:#eff6ff;color:var(--info-dark);border-color:#bfdbfe}
.lieu.aide{border-color:#ddd6fe;background:#faf8ff}
.lieu.aide .km{background:#f5f3ff;color:var(--violet-dark);border-color:#ddd6fe}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:800;margin-top:4px}
.pill.blue{background:#eff6ff;color:var(--info-dark);border:1px solid #bfdbfe}
.pill.vio{background:#f5f3ff;color:var(--violet-dark);border:1px solid #ddd6fe}
.valide{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:16px}
.valide h3{font-size:16px;font-weight:800;margin-bottom:5px;color:var(--ink)}
.valide .why{font-size:12.5px;color:var(--muted);margin-bottom:15px;line-height:1.55}
.ia-note{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:var(--r-sm);padding:12px 14px;
font-size:13px;color:var(--violet-dark);font-weight:600;line-height:1.5;margin-bottom:14px}
/* ===== COORDINATION ===== */
.conf{background:#fff;border:2px solid var(--primary);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.conf-top{background:linear-gradient(140deg,var(--primary-darker),var(--primary));color:#fff;padding:24px 22px}
.conf-t{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.4px;display:flex;align-items:center;gap:11px;line-height:1.2}
.conf-s{font-size:14px;color:rgba(255,255,255,.93);margin:8px 0 0;line-height:1.55}
.chrono{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;margin-top:14px}
.conf-body{padding:22px}
.fiche{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.fiche-h{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;
background:var(--surface-2);border-bottom:1px solid var(--line)}
.fiche-r{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.fiche-n{font-size:17px;font-weight:800;color:var(--ink);margin-top:2px}
.st{padding:5px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800;white-space:nowrap;flex:0 0 auto}
.st-w{background:#fffbeb;color:var(--warning-dark);border:1px solid #fde68a}
.st-ok{background:var(--primary-50);color:var(--primary-darker);border:1px solid var(--primary-200)}
.st-ko{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.fiche-b{padding:16px}
.ligne{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14px;line-height:1.5}
.ligne+.ligne{border-top:1px solid var(--line-soft)}
.ligne svg{flex:0 0 auto;margin-top:2px;color:var(--muted)}
.ligne-l{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px}
.ligne-v{font-weight:700;color:var(--text)}
.ligne-v a{color:var(--primary-dark);text-decoration:none;font-weight:800}
.ligne-v small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.act-b{flex:1;min-width:130px;padding:12px;border-radius:var(--r-sm);font-weight:800;font-size:13.5px;
display:flex;align-items:center;justify-content:center;gap:7px;transition:.15s;text-decoration:none}
.act-call{background:var(--primary);color:#fff;box-shadow:0 8px 18px -9px rgba(16,185,129,.8)}
.act-call:hover{background:var(--primary-dark)}
.act-map{background:#fff;color:var(--text-soft);border:1.5px solid var(--line)}
.act-map:hover{border-color:var(--primary-200);color:var(--primary-darker)}
.recap{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.recap h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:11px}
.recap-l{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.recap-l+.recap-l{border-top:1px solid var(--line-soft)}
.recap-l span{color:var(--text-soft)}
.recap-l b{color:var(--ink);text-align:right}
.next{background:#fffbeb;border:1.5px solid #fde68a;border-radius:var(--r);padding:16px;margin-bottom:14px}
.next h4{font-size:14px;font-weight:800;color:#92400e;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.next ol{margin:0;padding-left:19px;font-size:13.5px;color:#9a3412;line-height:1.75}
.next b{color:#7c2d12}
.bas{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.bas-b{flex:1;min-width:150px;padding:13px;border-radius:var(--r-pill);font-weight:800;font-size:14px;
display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;text-decoration:none}
.bas-pdf{background:var(--ink);color:#fff}
.bas-sms{background:#fff;color:var(--text-soft);border:1.5px solid var(--line)}
.bas-x{background:#fff;color:var(--danger-dark);border:1.5px solid #fecaca}
.bas-x:hover{background:#fef2f2}
/* ===== BARRE "JE PROPOSE" ===== */
.barre{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-pill);padding:7px 7px 7px 16px;margin-bottom:22px;box-shadow:var(--sh-xs);overflow-x:auto;scrollbar-width:none}
.barre::-webkit-scrollbar{display:none}
.barre-l{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.barre-g{display:flex;gap:7px;margin-left:auto;flex:0 0 auto}
.bb{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);
font-weight:800;font-size:13px;white-space:nowrap;transition:.15s;border:1.5px solid transparent;text-decoration:none}
.bb.h{background:var(--primary-50);color:var(--primary-darker);border-color:var(--primary-200)}
.bb.t{background:#eff6ff;color:var(--info-dark);border-color:#bfdbfe}
.bb.a{background:#f5f3ff;color:var(--violet-dark);border-color:#ddd6fe}
/* ============================================================================
LE CHAT DE COORDINATION.
Il ne se ferme JAMAIS : chacun peut se parler, sans limite de temps.
Une vraie conversation : des jours, des groupes de messages, des bulles.
========================================================================== */
.chat{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
margin-bottom:14px;background:#fff;box-shadow:var(--sh-xs)}
/* --- EN-TETE --- */
.chat-h{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:13px 15px;
background:linear-gradient(150deg,var(--primary-darker),var(--primary));color:#fff}
.chat-t{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.chat-ic{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}
.chat-t b{display:block;font-size:15.5px;font-weight:800;line-height:1.25}
.chat-t small{display:block;font-size:11.5px;opacity:.85;margin-top:1px;font-weight:600}
/* INVITER QUELQU'UN.
C'etait un panneau flottant, ancre a droite du bouton. Deux problemes :
le chat est en `overflow:hidden`, donc il le DECOUPAIT ; et sur petit ecran
il partait hors de la page. On ne flotte plus : le panneau se deplie DANS
l'en-tete, sur toute la largeur. Il ne peut plus deborder de nulle part. */
.chat-inv{flex:0 0 auto}
.chat-inv[open]{width:100%;order:9} /* ouvert, il passe a la ligne, tout seul */
.chat-inv>summary{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
border-radius:var(--r-pill);background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.3);color:#fff;
font-size:12.5px;font-weight:800;cursor:pointer;list-style:none;white-space:nowrap;transition:.15s}
.chat-inv>summary::-webkit-details-marker{display:none}
.chat-inv>summary:hover{background:rgba(255,255,255,.28)}
.chat-inv-f{width:100%;margin-top:11px;padding:14px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 12px 30px -18px rgba(14,28,23,.5);
animation:deplie .22s cubic-bezier(.2,.9,.3,1)}
.chat-inv-f .inp{margin-bottom:10px}
.chat-inv-f .rassure{margin-top:10px}
.chat-inv-f .lbl{margin-bottom:5px}
/* ON DIT D'ABORD A QUOI CA SERT.
Un prenom et un numero, sans explication, personne ne sait s'il doit les
remplir ni ce que ca declenche. */
.inv-t{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);
line-height:1.3;margin-bottom:6px}
.inv-p{margin:0 0 11px;font-size:13px;line-height:1.55;color:var(--text-soft)}
.inv-p b{font-weight:800;color:var(--ink)}
/* Des exemples, pas une definition. On se reconnait dedans en une seconde. */
.inv-ex{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px;
padding-bottom:13px;border-bottom:1px dashed var(--line)}
.inv-ex span{padding:4px 10px;border-radius:var(--r-pill);
font-size:11.5px;font-weight:700;color:var(--primary-darker);
background:var(--primary-50);border:1px solid var(--primary-200)}
/* Le bouton "Inviter" reste allume tant que le panneau est ouvert. */
.chat-inv[open]>summary{background:#fff;color:var(--primary-darker);border-color:#fff}
/* --- LES PARTICIPANTS --- */
.chat-mb{display:flex;gap:6px;flex-wrap:wrap;padding:11px 15px;
border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.mb{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
font-size:11.5px;font-weight:800;background:#fff;border:1px solid var(--line);color:var(--text-soft)}
.mb i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.mb.d i{background:var(--danger)} .mb.h i{background:var(--primary)}
.mb.t i{background:var(--info)} .mb.a i{background:var(--violet)}
/* --- LE FIL --- */
.fil{padding:16px 15px;background:
radial-gradient(circle at 1px 1px, var(--line-soft) 1px, transparent 0) 0 0/18px 18px,
#fff;
max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
scroll-behavior:smooth;overscroll-behavior:contain}
.fil-vide{text-align:center;padding:34px 16px;color:var(--muted)}
.fil-vide svg{color:var(--line);margin-bottom:10px}
.fil-vide b{display:block;font-size:14.5px;color:var(--text-soft);margin-bottom:4px}
.fil-vide small{display:block;font-size:12.5px;line-height:1.55;max-width:280px;margin:0 auto}
/* Le separateur de jour : "Aujourd'hui", "Hier", puis la date. */
.fil-jour{display:flex;align-items:center;gap:11px;margin:14px 0 10px}
.fil-jour::before,.fil-jour::after{content:'';flex:1;height:1px;background:var(--line)}
.fil-jour span{font-size:11px;font-weight:800;color:var(--muted);
text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}
.fil-jour:first-child{margin-top:0}
/* Le message systeme : une pastille discrete, centree. C'est le journal de bord. */
.sys{display:inline-flex;align-items:center;gap:6px;align-self:center;max-width:92%;
margin:7px 0;padding:6px 13px;border-radius:var(--r-pill);
background:var(--primary-50);border:1px solid var(--primary-200);
font-size:11.5px;font-weight:700;color:var(--primary-darker);line-height:1.45;text-align:center}
.sys svg{flex:0 0 auto;opacity:.75}
.sys em{font-style:normal;opacity:.6;font-weight:600}
/* --- LES MESSAGES --- */
.msg{display:flex;gap:9px;max-width:80%;margin-top:9px}
.msg-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
color:#fff;font-weight:800;font-size:12.5px;background:var(--muted);
box-shadow:0 4px 10px -5px rgba(14,28,23,.5)}
.msg-av.d{background:var(--danger)} .msg-av.h{background:var(--primary)}
.msg-av.t{background:var(--info)} .msg-av.a{background:var(--violet)}
.msg-c{min-width:0}
.msg-w{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.msg-n{font-size:12.5px;font-weight:800;color:var(--ink)}
.msg-r{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
/* La bulle, avec son ergot. */
.msg-b{position:relative;padding:10px 13px 8px;font-size:14.5px;line-height:1.5;color:var(--text);
background:var(--surface-2);border:1px solid var(--line);
border-radius:3px var(--r) var(--r) var(--r);
word-wrap:break-word;overflow-wrap:anywhere}
.msg-h{display:block;text-align:right;font-size:10.5px;color:var(--muted);
font-weight:600;margin-top:3px;user-select:none}
/* Messages qui se suivent : on ne repete ni l'avatar ni le nom. */
.msg-suite{margin-top:2px}
.msg-suite .msg-av{visibility:hidden;height:0;margin:0}
.msg-suite .msg-w{display:none}
.msg-suite .msg-b{border-radius:var(--r)}
/* MES messages : a droite, en emeraude. */
.msg.moi{align-self:flex-end;flex-direction:row-reverse}
.msg.moi .msg-w{flex-direction:row-reverse}
.msg.moi .msg-b{background:linear-gradient(160deg,var(--primary),var(--primary-dark));
border-color:transparent;color:#fff;
border-radius:var(--r) 3px var(--r) var(--r);
box-shadow:0 8px 18px -12px rgba(16,185,129,.9)}
.msg.moi .msg-h{color:rgba(255,255,255,.8)}
.msg.moi.msg-suite .msg-b{border-radius:var(--r)}
.msg-photo{display:block;max-width:100%;width:240px;border-radius:11px;margin-bottom:7px;
border:1px solid rgba(0,0,0,.06);background:var(--surface-2)}
.msg-alerte{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
font-size:10.5px;font-weight:800;color:var(--warning-dark);
background:#fffbeb;border:1px solid #fde68a;padding:3px 9px;border-radius:var(--r-pill)}
.msg.moi .msg-alerte{margin-left:auto}
/* --- LA SAISIE ---
C'EST LE COEUR DU SALON. Tant que la zone d'ecriture se fond dans la page, on
ne la voit pas, on ne l'utilise pas, et les gens s'appellent au telephone au
lieu de laisser une trace. Elle doit sauter aux yeux, comme dans une vraie
messagerie : un fond blanc franc, un liseré vert en haut, un champ large,
un bouton d'envoi qui a du poids. */
.saisie{position:relative;padding:14px 15px 15px;background:#fff;
border-top:1px solid var(--line);
box-shadow:0 -10px 30px -22px rgba(14,28,23,.5)}
/* Le liseré : il annonce "c'est ici qu'on ecrit". */
.saisie::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.5}
.phrases{display:flex;gap:7px;overflow-x:auto;padding-bottom:11px;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.phrases::-webkit-scrollbar{display:none}
.phrase{flex:0 0 auto;padding:8px 14px;border-radius:var(--r-pill);background:#fff;
border:1.5px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text-soft);
white-space:nowrap;transition:.15s}
.phrase:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50);
box-shadow:0 6px 14px -8px rgba(16,185,129,.9)}
.phrase:active{transform:scale(.96)}
/* La barre d'ecriture : un seul bloc, comme dans une messagerie.
Elle s'allume en vert des qu'on la touche : on sait ou on est. */
.saisie-r{display:flex;gap:8px;align-items:center;
padding:6px 6px 6px 8px;border-radius:26px;
background:var(--surface-2);border:1.5px solid var(--line);
transition:border-color .16s, box-shadow .16s, background .16s}
.saisie-r:focus-within{background:#fff;border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-50), 0 10px 24px -16px rgba(16,185,129,.9)}
.saisie-i{flex:1;padding:12px 4px;border:0;background:none;outline:none;min-width:0;
font-size:15px;font-weight:500;color:var(--text)}
.saisie-i::placeholder{color:var(--muted);font-weight:600}
.saisie-b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
flex:0 0 auto;transition:.15s;border:0;cursor:pointer}
.saisie-photo{background:none;color:var(--muted);position:relative}
.saisie-photo:hover{color:var(--primary-dark);background:var(--primary-50)}
.saisie-photo input[type=file]{position:absolute;opacity:0;width:0;height:0}
/* LE BOUTON ENVOYER. Il a du poids, il repond au doigt, et il fait un pas en
avant des qu'il y a quelque chose a envoyer. */
.saisie-send{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
box-shadow:0 8px 18px -8px rgba(16,185,129,1), inset 0 1px 0 rgba(255,255,255,.25)}
.saisie-send svg{transition:transform .18s}
.saisie-send:hover{transform:scale(1.06)}
.saisie-send:hover svg{transform:translateX(1px)}
.saisie-send:active{transform:scale(.92)}
/* Rien a envoyer : le bouton s'efface, sans disparaitre. */
.saisie-r:not(.a-dire) .saisie-send{opacity:.4;box-shadow:none;filter:grayscale(.5)}
/* La case "reveiller tout le monde par SMS".
Elle ENGAGE : elle derange cinq personnes. On la distingue donc en orange,
et on la met dans son propre encadre pour qu'on ne la coche pas par megarde. */
.alerte-case{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 12px;
background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
cursor:pointer;user-select:none;transition:.16s}
.alerte-case:hover{border-color:#fde68a;background:#fffdf7}
.alerte-case:has(input:checked){border-color:var(--warning);background:#fffbeb}
.alerte-txt{min-width:0;flex:1}
.alerte-txt b{display:block;font-size:13px;font-weight:800;color:var(--text);line-height:1.3}
.alerte-txt small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.alerte-case .reste{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--warning-dark);
background:#fffbeb;border:1px solid #fde68a;padding:5px 10px;border-radius:var(--r-pill);
white-space:nowrap}
@media(max-width:640px){
.chat-h{padding:12px}
.fil{max-height:60vh;padding:13px 12px}
.msg{max-width:92%}
.saisie{padding:11px 12px 12px}
}
/* ===== 3 BOUTONS AIDER (bas de page) ===== */
.aider{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;margin-top:30px;text-align:center;box-shadow:var(--sh-xs)}
.aider h3{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink);margin-bottom:5px}
.aider p{font-size:13.5px;color:var(--muted);margin:0 0 17px}
.aider-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ab{padding:16px 12px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface-2);
display:flex;flex-direction:column;align-items:center;gap:8px;transition:.15s;font-weight:800;font-size:13.5px;text-decoration:none}
.ab:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.ab-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff}
.ab.h{color:var(--primary-darker)} .ab.h .ab-i{background:var(--primary)}
.ab.t{color:var(--info-dark)} .ab.t .ab-i{background:var(--info)}
.ab.a{color:var(--violet-dark)} .ab.a .ab-i{background:var(--violet)}
/* ===== CHATBOT ===== */
.bot{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;align-items:center;gap:9px;
background:var(--ink);color:#fff;padding:12px 17px;border-radius:var(--r-pill);font-weight:700;font-size:13.5px;
box-shadow:0 14px 30px -10px rgba(14,28,23,.6)}
.bot:hover{background:#1a3129}
.bot-panneau{position:fixed;right:18px;bottom:76px;z-index:100;width:min(360px,calc(100vw - 36px));
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:16px}
.bot-h{display:flex;align-items:center;margin-bottom:12px;font-size:15px}
.bot-h button{margin-left:auto;font-size:24px;color:var(--muted);line-height:1}
.bot-panneau .inp{margin-bottom:10px}
.bot-rep{margin-top:12px;padding:12px;border-radius:var(--r-sm);background:var(--primary-50);
border:1px solid var(--primary-200);color:var(--primary-darker);font-size:13.5px;line-height:1.5}
/* ===== CONSOLE ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-xs)}
.kpi .v{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--ink);line-height:1.1}
.kpi .l{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px;line-height:1.35}
.kpi.rouge{border-color:#fecaca;background:#fef2f2}
.kpi.rouge .v{color:var(--danger-dark)}
.kpi.vert .v{color:var(--primary-dark)}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;font-size:13.5px}
.tbl th{text-align:left;padding:11px 13px;background:var(--surface-2);color:var(--muted);font-size:11.5px;
text-transform:uppercase;letter-spacing:.5px;font-weight:800;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.urgent td{background:#fef2f2}
.scrollx{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-xs)}
.mini{padding:7px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:800;border:1.5px solid var(--line);
background:#fff;color:var(--text-soft);text-decoration:none;display:inline-block}
.mini:hover{border-color:var(--primary);color:var(--primary-darker)}
.mini.p{background:var(--primary);color:#fff;border-color:var(--primary)}
/* ===== IMPORT ===== */
.imp-ligne{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}
.imp-ligne.doute{border-color:#fed7aa;background:#fff7ed}
.imp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-top:9px}
.imp-g label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.imp-g .inp{padding:9px 11px;font-size:14px}
/* ============================================================================
"MON ESPACE" : TOUJOURS VISIBLE, COLLE EN BAS DE L'ECRAN.
C'est le seul point d'entree vers tout ce que la personne a fait. Il doit
etre beau, evident, et donner envie d'etre touche.
========================================================================== */
/* AUCUN FOND, AUCUNE BANDE, AUCUNE BORDURE. Le bouton flotte, seul, au-dessus
de la page. On voit le contenu passer dessous : rien n'est coupe. */
.moi-bas{position:fixed;left:0;right:0;z-index:98;
bottom:calc(14px + env(safe-area-inset-bottom, 0px));
padding:0 14px;
background:none;border:0;
pointer-events:none} /* la barre laisse passer les clics... */
.moi-bas-in{max-width:420px;margin:0 auto;padding:0;pointer-events:auto} /* ...le bouton, non. */
.moi-bas-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;
padding:11px 16px 11px 11px;
background:linear-gradient(135deg,var(--primary-darker),var(--primary));
border:0;border-radius:var(--r-pill);text-decoration:none;overflow:hidden;
box-shadow:0 10px 20px -6px rgba(14,28,23,.28),
0 18px 40px -14px rgba(16,185,129,.9),
inset 0 1px 0 rgba(255,255,255,.28);
transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .22s}
.moi-bas-btn:hover{transform:translateY(-2px);
box-shadow:0 20px 40px -14px rgba(16,185,129,.95),
inset 0 1px 0 rgba(255,255,255,.3)}
.moi-bas-btn:active{transform:translateY(0) scale(.99)}
/* Un reflet qui traverse le bouton, lentement. Discret, mais il attire l'oeil
sans clignoter : dans une urgence, on ne fait pas clignoter les choses. */
.moi-bas-btn::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
transform:skewX(-18deg);animation:reflet 5.5s ease-in-out infinite}
@keyframes reflet{0%,72%{left:-60%}92%,100%{left:120%}}
.moi-bas-btn .moi-ini{width:36px;height:36px;font-size:15px;flex:0 0 auto;
background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.42);
color:#fff;box-shadow:none}
.moi-bas-txt{min-width:0;flex:1;position:relative;z-index:1}
.moi-bas-txt b{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.25;
letter-spacing:-.2px}
.moi-bas-txt small{display:block;font-size:11.5px;color:rgba(255,255,255,.82);margin-top:1px;
line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moi-bas-btn svg{margin-left:auto;color:#fff;flex:0 0 auto;position:relative;z-index:1;
transition:transform .18s}
.moi-bas-btn:hover svg{transform:translateX(3px)}
/* Rien ne doit finir cache sous la barre. */
body:has(.moi-bas) .footer{padding-bottom:104px}
body:has(.moi-bas) .bot{bottom:92px}
body:has(.moi-bas) .bot-panneau{bottom:150px}
@media(max-width:640px){
.moi-bas{padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
.moi-bas-in{padding-right:62px}
.moi-bas-txt small{display:none}
.moi-bas-btn{padding:9px 14px 9px 9px}
.moi-bas-btn .moi-ini{width:32px;height:32px;font-size:13.5px}
body:has(.moi-bas) .footer{padding-bottom:88px}
}
@supports not selector(:has(*)){
body{padding-bottom:90px}
}
/* ===== FOOTER ===== */
.footer{background:var(--surface);border-top:1px solid var(--line);padding:28px 20px;margin-top:40px}
.footer-in{max-width:1280px;margin:0 auto;text-align:center}
.footer .off{font-size:14px;color:var(--text-soft);font-weight:600;margin-bottom:10px}
.footer .off b{color:var(--primary-dark)}
/* « On espère que vous n'aurez jamais besoin de ce site. » Plus petite et plus
pâle que la ligne au-dessus : elle se lit quand on a fini, pas avant. */
.footer-jamais{font-size:13px;font-style:italic;color:var(--muted);margin:0 0 14px}
.footer .lk{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.footer .lk a{text-decoration:none}
/* ===== TEXTE LEGAL ===== */
.legal{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;line-height:1.7;font-size:14.5px}
.legal h2{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--ink);margin:26px 0 10px}
.legal h2:first-child{margin-top:0}
.legal ul{padding-left:20px}
/* ============================================================================
LES CASES A COCHER ET LES BOUTONS RADIO
Dessinees a la main, sans image, sans dependance. C'est ce qu'on touche du
pouce dans le stress : elles doivent etre GRANDES, evidentes, et repondre.
Une case cochee doit se voir d'un coup d'oeil, sans lire.
========================================================================== */
input[type=checkbox],
input[type=radio]{
-webkit-appearance:none;appearance:none;margin:0;
width:24px;height:24px;flex:0 0 auto;
display:inline-grid;place-content:center;
background:#fff;
border:2px solid var(--line);
cursor:pointer;
transition:background .18s cubic-bezier(.2,.9,.3,1),
border-color .18s,
box-shadow .18s,
transform .12s;
}
input[type=checkbox]{border-radius:8px}
input[type=radio]{border-radius:50%}
/* Le survol : la case s'eveille, sans crier. */
input[type=checkbox]:hover:not(:disabled):not(:checked),
input[type=radio]:hover:not(:disabled):not(:checked){
border-color:var(--primary-200);background-color:var(--primary-50)}
/* Le clic : un enfoncement, pour que le doigt sente qu'il s'est passe quelque chose. */
input[type=checkbox]:active:not(:disabled),
input[type=radio]:active:not(:disabled){transform:scale(.92)}
/* LA COCHE.
Un vrai SVG en fond, pas deux bordures pivotees : le trace au CSS depend de
la boite, du padding, de l'alignement... il finit toujours par casser quelque
part. Un chevron dessine, centre, opaque : il se voit, TOUJOURS. */
input[type=checkbox]:checked{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
background-size:16px 16px;
}
input[type=radio]::before{
content:'';
width:10px;height:10px;border-radius:50%;
background:#fff;
transform:scale(0);
transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
/* COCHEE : elle change de couleur, elle grossit d'un cheveu, elle rayonne.
On ne peut pas la rater, meme du coin de l'oeil. */
input[type=checkbox]:checked,
input[type=radio]:checked{
background-color:var(--primary);
border-color:var(--primary);
box-shadow:0 6px 16px -5px rgba(16,185,129,.9),
0 0 0 4px var(--primary-50);
animation:casePop .28s cubic-bezier(.2,1.5,.4,1);
}
@keyframes casePop{0%{transform:scale(.86)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Survolee ALORS QU'ELLE EST COCHEE : elle fonce, elle garde sa coche.
(Le survol ne doit jamais toucher a background-image, sinon la coche saute.) */
input[type=checkbox]:checked:hover:not(:disabled),
input[type=radio]:checked:hover:not(:disabled){background-color:var(--primary-dark);
border-color:var(--primary-dark)}
.alerte-case input[type=checkbox]:checked:hover:not(:disabled){
background-color:var(--warning-dark);border-color:var(--warning-dark)}
input[type=radio]:checked::before{transform:scale(1)}
/* Et le texte a cote suit : il fonce, il s'epaissit. La ligne entiere dit "oui". */
.chkline:has(input:checked),
.consent:has(input:checked){color:var(--ink)}
.consent:has(input:checked) span,
.chkline:has(input:checked) span{font-weight:700;color:var(--ink)}
/* Le clavier : un anneau net, jamais le contour bleu par defaut du navigateur. */
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 4px var(--primary-100)}
/* Une case verrouillee (une place deja reservee) : elle se voit, mais on comprend
tout de suite qu'on ne peut pas y toucher. */
input[type=checkbox]:disabled,
input[type=radio]:disabled{cursor:not-allowed;opacity:.55;background-color:var(--surface-2)}
input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked{background-color:var(--muted);border-color:var(--muted);
box-shadow:none;animation:none}
/* --- Les variantes de couleur, selon ce qu'on coche --- */
/* Le consentement RGPD, et l'alerte SMS : elles engagent, on les distingue. */
.alerte-case input[type=checkbox]:checked{
background-color:var(--warning);border-color:var(--warning);
box-shadow:0 6px 16px -5px rgba(245,158,11,.9), 0 0 0 4px #fffbeb;
}
.alerte-case input[type=checkbox]:hover:not(:disabled):not(:checked){
border-color:#fde68a;background-color:#fffbeb}
/* --- La ligne entiere est cliquable, et elle le montre --- */
.chkline,.consent{cursor:pointer;user-select:none}
.chkline{align-items:center}
.chkline:hover input[type=checkbox]:not(:checked):not(:disabled),
.consent:hover input[type=checkbox]:not(:checked){
border-color:var(--primary-200);background-color:var(--primary-50)}
/* La case d'une unite proposee (ecran d'evacuation, ecran de coordination). */
.unite input[type=checkbox]{width:23px;height:23px}
.unite:hover{border-color:var(--primary-200)}
.unite:has(input:checked){background:var(--primary-50);border-color:var(--primary-200)}
/* ATTENTION, PIEGE DE SPECIFICITE.
Les puces, les options radio et les cartes vehicule dessinent DEJA leur propre
marqueur (.rd, la pastille coloree). Leur input natif doit rester INVISIBLE.
Comme ce bloc est declare APRES le leur, il faut le redire ici, sinon on verrait
deux marqueurs : le natif et le dessine. */
.opt input[type=radio],
.opt input[type=checkbox],
.puce input[type=radio],
.puce input[type=checkbox],
.vehic input[type=radio],
.vehic input[type=checkbox]{
-webkit-appearance:none;appearance:none;
position:absolute;opacity:0;width:0;height:0;
border:0;background:none;box-shadow:none;
}
.opt input::before,.puce input::before,.vehic input::before{display:none}
/* Le pouce : jamais moins de 24px, et une zone de clic large autour. */
@media(pointer:coarse){
input[type=checkbox],input[type=radio]{width:26px;height:26px}
input[type=checkbox]:checked{background-size:18px 18px}
.chkline,.consent{padding:4px 0}
/* ... sauf celles qui sont volontairement invisibles. */
.opt input,.puce input,.vehic input{width:0;height:0}
}
/* ============================================================================
LA FICHE D'ARRIVEE (page de gestion).
Une structure, pas une bouillie : QUI en haut, LES FAITS au milieu,
LA DECISION en bas. Ce qui fait mal est replie, jamais mis en avant.
========================================================================== */
.arr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs)}
.arr-ok{border-color:var(--primary-200)}
/* --- EN-TETE : qui, a gauche. Ou on en est, a droite. --- */
.arr-h{display:flex;align-items:center;gap:12px;padding:14px 16px;
background:var(--surface-2);border-bottom:1px solid var(--line)}
.arr-ok .arr-h{background:var(--primary-50);border-bottom-color:var(--primary-200)}
.arr-qui{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.arr-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--primary);color:#fff;font-size:16px;font-weight:800;
box-shadow:0 6px 14px -7px rgba(16,185,129,.9)}
.arr-n{min-width:0}
.arr-n b{display:block;font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.25}
.arr-n small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px}
/* --- CORPS : les faits, en deux colonnes. Etiquette au-dessus, valeur en dessous. --- */
.arr-b{padding:16px}
.arr-g{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.arr-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.arr-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.arr-v{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.45}
/* La liste des unites : une par ligne, alignee, jamais en paquet. */
.arr-u{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
padding:6px 0;border-bottom:1px dashed var(--line-soft);font-weight:600;color:var(--text-soft)}
.arr-u:last-child{border-bottom:0;padding-bottom:0}
.arr-u:first-child{padding-top:0}
.arr-u b{color:var(--ink);font-weight:800}
.arr-e{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:var(--r-pill);
background:#fef3c7;color:var(--warning-dark);border:1px solid #fde68a}
.arr-tel{color:var(--primary-dark);font-weight:800;text-decoration:none;font-size:16px;
letter-spacing:.3px;font-family:var(--font-display)}
.arr-tel:hover{text-decoration:underline}
.arr-info{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);
background:#fffbeb;border:1px solid #fde68a;
font-size:12.5px;color:#92400e;line-height:1.5}
.arr-info b{color:#7c2d12}
/* --- ACTIONS : la decision positive prend la place. --- */
.arr-a{display:flex;gap:9px;align-items:stretch;padding:0 16px 14px}
.arr-oui{flex:1;margin:0;display:flex}
.arr-oui .go{width:100%}
.arr-tel-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:0 20px;border-radius:var(--r-pill);flex:0 0 auto;
background:#fff;border:1.5px solid var(--line);color:var(--text-soft);
font-size:14px;font-weight:800;text-decoration:none;transition:.15s}
.arr-tel-btn:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50)}
/* --- LES REPLIS : discrets, cote a cote, sous une separation. --- */
.arr-x{display:flex;gap:18px;flex-wrap:wrap;padding:12px 16px;
border-top:1px solid var(--line-soft);background:var(--surface-2)}
.arr-x details{flex:1;min-width:160px}
.arr-x summary{font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
list-style:none;display:flex;align-items:center;gap:6px;transition:color .15s}
.arr-x summary::-webkit-details-marker{display:none}
.arr-x summary::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.arr-x summary:hover{color:var(--danger-dark)}
.arr-x details[open] summary{color:var(--danger-dark);margin-bottom:10px}
.arr-x form{padding-bottom:4px}
@media(max-width:640px){
.arr-g{grid-template-columns:1fr;gap:12px}
.arr-a{flex-direction:column}
.arr-tel-btn{padding:13px 20px}
.arr-x{flex-direction:column;gap:10px}
}
/* ============================================================================
LA REPONSE DE L'HEBERGEUR.
C'est LA seule chose qui compte sur cette page : tant qu'il n'a pas repondu,
des chevaux attendent sur une route. Donc : tout en haut, seul, distinct du
reste. Et s'il descend, la reponse le suit, collee en bas de l'ecran.
========================================================================== */
.rep{position:relative;overflow:hidden;margin:0 0 18px;padding:16px 16px 15px;
border-radius:var(--r-lg);background:#fff;
border:2px solid var(--danger);
box-shadow:0 18px 44px -20px rgba(239,68,68,.55)}
/* Le bandeau du haut : rouge franc. On ne confond pas avec le reste de la page. */
.rep::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--danger),var(--warning),var(--danger))}
.rep-h{display:flex;align-items:center;gap:8px;margin-bottom:13px;
font-size:12px;font-weight:800;color:var(--danger-dark);
text-transform:uppercase;letter-spacing:.6px}
.rep-h b{font-weight:800}
/* Le point qui bat. Lentement : on n'affole personne, on rappelle. */
.rep-pt{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:0 0 auto;
box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:repPuls 2.2s ease-out infinite}
@keyframes repPuls{
0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
/* QUI attend. Un visage, un nom, un numero qu'on peut appeler tout de suite. */
.rep-q{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:11px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.rep-av{width:40px;height:40px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
font-family:var(--font-display);font-size:17px;font-weight:600;color:#fff;
background:linear-gradient(135deg,var(--danger),var(--danger-dark));
box-shadow:0 8px 18px -8px rgba(239,68,68,.9)}
.rep-qt{min-width:0;flex:1}
.rep-qt b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.25}
.rep-qt small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.rep-tel{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
background:#fff;border:1.5px solid var(--line);color:var(--primary-dark);transition:.15s}
.rep-tel:hover{border-color:var(--primary);background:var(--primary-50);transform:translateY(-1px)}
/* CE QU'ON LUI DEMANDE, EN CLAIR.
"Une place" quatre fois ne dit rien. Combien de box, combien de paddocks,
combien de chevaux dans chacun, et y a-t-il un entier : c'est CA qui decide
s'il peut dire oui. */
.rep-s{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px;
padding-bottom:9px;border-bottom:1px dashed var(--line)}
.rep-s b{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink)}
.rep-s span{font-size:13px;font-weight:700;color:var(--muted)}
.rep-u{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.rep-ul{display:flex;align-items:center;gap:10px;padding:9px 11px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.rep-ul.ent{background:#fffbeb;border-color:#fde68a}
.rep-ui{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
color:#fff;background:var(--primary);box-shadow:0 5px 12px -6px rgba(16,185,129,.9)}
.rep-ul.ent .rep-ui{background:var(--warning);box-shadow:0 5px 12px -6px rgba(245,158,11,.9)}
.rep-ut{min-width:0;flex:1}
.rep-ut b{display:block;font-size:14px;font-weight:800;color:var(--ink);line-height:1.25}
.rep-ut small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.rep-ue{flex:0 0 auto;padding:4px 10px;border-radius:var(--r-pill);
font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
color:#fff;background:var(--warning);box-shadow:0 5px 12px -6px rgba(245,158,11,.9)}
/* UN ENTIER DANS UN PADDOCK PREND TOUT LE PADDOCK. Securite des chevaux,
pas preference. Il doit le lire AVANT de dire oui. */
.rep-uw{display:flex;align-items:center;gap:6px;margin:-2px 0 2px;padding:7px 11px;
border-radius:var(--r-sm);font-size:12px;line-height:1.45;
color:var(--warning-dark);background:#fffbeb;border:1px dashed #fde68a}
.rep-uw b{font-weight:800}
.rep-n{margin-top:9px;font-size:12.5px;color:var(--text-soft);line-height:1.55;text-align:center}
.rep-n b{color:var(--ink)}
.rep-non{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.rep-non summary{font-size:13px;font-weight:800;color:var(--danger-dark);cursor:pointer;
list-style:none;display:flex;align-items:center;gap:6px}
.rep-non summary::-webkit-details-marker{display:none}
.rep-non summary::before{content:'';width:0;height:0;flex:0 0 auto;
border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
transition:transform .18s}
.rep-non[open] summary::before{transform:rotate(90deg)}
.rep-non form{margin-top:11px}
/* --- LA BARRE COLLEE EN BAS ---
Il a scrolle, le bloc du haut est sorti de l'ecran : la reponse le suit.
Elle se pose AU-DESSUS de "Mon espace", jamais par-dessus. */
.repbas{position:fixed;left:0;right:0;bottom:0;z-index:99;padding:10px 14px;
padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
background:linear-gradient(to top, rgba(255,255,255,.99), rgba(255,255,255,.92));
-webkit-backdrop-filter:saturate(180%) blur(14px);
backdrop-filter:saturate(180%) blur(14px);
border-top:2px solid var(--danger);
box-shadow:0 -12px 34px -20px rgba(239,68,68,.7);
animation:repbasEntre .3s cubic-bezier(.2,.9,.3,1)}
@keyframes repbasEntre{from{transform:translateY(100%)}to{transform:none}}
/* Quand "Mon espace" est la, la barre se pose juste au-dessus de lui. */
body:has(.moi-bas) .repbas{bottom:calc(74px + env(safe-area-inset-bottom, 0px));
padding-bottom:10px;border-radius:var(--r-lg) var(--r-lg) 0 0;
border:2px solid var(--danger);border-bottom:0;
left:10px;right:10px}
.repbas-in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:12px}
.repbas-t{min-width:0;flex:1}
.repbas-t b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repbas-t small{display:block;font-size:11.5px;color:var(--danger-dark);font-weight:700;margin-top:1px}
.repbas-g{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.repbas-oui{display:flex;align-items:center;gap:7px;padding:12px 18px;border:0;cursor:pointer;
border-radius:var(--r-pill);color:#fff;font-size:14px;font-weight:800;white-space:nowrap;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
box-shadow:0 10px 22px -10px rgba(16,185,129,1), inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .16s, box-shadow .2s}
.repbas-oui:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(16,185,129,1)}
.repbas-oui:active{transform:translateY(0) scale(.97)}
.repbas-non{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;
text-decoration:none;padding:6px 2px}
.repbas-non:hover{color:var(--danger-dark);text-decoration:underline}
/* Rien ne doit finir cache sous les DEUX barres. */
body:has(.repbas:not([hidden])) .footer{padding-bottom:170px}
body:has(.repbas:not([hidden])) .bot{bottom:154px}
@media(max-width:640px){
.rep{padding:14px 13px 13px}
.repbas-in{gap:9px}
.repbas-t small{display:none}
.repbas-oui{padding:12px 15px}
.repbas-non{font-size:12px}
}
@media(max-width:400px){
.repbas-t{display:none} /* l'ecran est minuscule : on garde les deux boutons, c'est tout */
.repbas-g{flex:1}
.repbas-g form{flex:1}
.repbas-oui{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.rep-pt,.repbas{animation:none}
}
/* ============================================================================
LES NOTIFICATIONS. TOUJOURS EN HAUT. Sur telephone comme sur ordinateur.
Le regard part du haut : une reponse qui s'affiche en bas, on ne la voit pas.
Un clic doit TOUJOURS donner une reponse visible, sinon la personne re-clique.
========================================================================== */
.notifs{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:400;
display:flex;flex-direction:column;gap:10px;align-items:center;
width:min(440px,calc(100vw - 24px));pointer-events:none}
.notif{position:relative;width:100%;overflow:hidden;
display:flex;align-items:flex-start;gap:12px;padding:14px 14px 15px 16px;
border-radius:16px;background:rgba(255,255,255,.92);
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
border:1px solid var(--line);
box-shadow:0 4px 10px -4px rgba(14,28,23,.14),
0 22px 50px -16px rgba(14,28,23,.38);
pointer-events:auto;
animation:notifEntre .42s cubic-bezier(.16,1.1,.3,1)}
/* Elle tombe du haut, elle rebondit une fois, elle s'arrete. */
@keyframes notifEntre{
0%{opacity:0;transform:translateY(-22px) scale(.94)}
60%{opacity:1;transform:translateY(3px) scale(1.01)}
100%{opacity:1;transform:none}}
.notif-part{animation:notifSort .3s cubic-bezier(.4,0,1,.6) forwards}
@keyframes notifSort{to{opacity:0;transform:translateY(-16px) scale(.95)}}
/* Le trait de couleur a gauche : on sait si c'est bon ou mauvais avant de lire. */
.notif::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
/* L'icone, dans une pastille qui rayonne. */
.notif-i{width:30px;height:30px;border-radius:10px;flex:0 0 auto;
display:grid;place-items:center;color:#fff;margin-top:1px;
background:var(--primary);box-shadow:0 6px 14px -5px rgba(16,185,129,.9)}
.notif-i svg{animation:notifIco .45s .1s cubic-bezier(.2,1.5,.4,1) both}
@keyframes notifIco{from{transform:scale(0) rotate(-25deg)}to{transform:none}}
.notif-c{min-width:0;flex:1;padding-top:1px}
.notif-h{display:block;font-size:13.5px;font-weight:800;color:var(--ink);
line-height:1.3;letter-spacing:-.2px}
.notif-t{display:block;font-size:13px;font-weight:500;color:var(--text-soft);
line-height:1.45;margin-top:2px}
.notif-h + .notif-t{margin-top:3px}
.notif-x{margin:-2px -2px 0 0;width:26px;height:26px;border-radius:8px;flex:0 0 auto;
display:grid;place-items:center;font-size:19px;line-height:1;color:var(--muted);
background:none;border:0;cursor:pointer;transition:.15s}
.notif-x:hover{color:var(--ink);background:var(--surface-2)}
/* La barre du temps : elle se vide, on voit la notification vivre puis partir. */
.notif-j{position:absolute;left:0;bottom:0;height:3px;width:100%;
background:var(--primary);opacity:.35;transform-origin:left;
animation:notifJauge linear forwards}
@keyframes notifJauge{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* --- Les trois humeurs --- */
.notif-ok{border-color:var(--primary-200)}
.notif-ok::before,.notif-ok .notif-j{background:var(--primary)}
.notif-ok .notif-i{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.notif-warn{border-color:#fde68a}
.notif-warn::before,.notif-warn .notif-j{background:var(--warning)}
.notif-warn .notif-i{background:linear-gradient(135deg,var(--warning),var(--warning-dark));
box-shadow:0 6px 14px -5px rgba(245,158,11,.9)}
.notif-err{border-color:#fecaca}
.notif-err::before,.notif-err .notif-j{background:var(--danger)}
.notif-err .notif-i{background:linear-gradient(135deg,var(--danger),var(--danger-dark));
box-shadow:0 6px 14px -5px rgba(239,68,68,.9)}
/* Une erreur, on la sent : la carte tressaille, une fois. */
.notif-err{animation:notifEntre .42s cubic-bezier(.16,1.1,.3,1), notifSecousse .3s .4s}
@keyframes notifSecousse{0%,100%{margin-left:0}25%{margin-left:-5px}75%{margin-left:5px}}
/* LE CHAMP QUI MANQUE. La notification dit quoi faire, le champ dit ou. */
.champ-manque{animation:champManque .5s cubic-bezier(.36,.07,.19,.97);
box-shadow:0 0 0 4px rgba(239,68,68,.16) !important;border-color:var(--danger) !important}
@keyframes champManque{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){
.notif,.notif-i svg,.notif-j,.notif-err,.champ-manque{animation:none !important}
input[type=checkbox]:checked,input[type=radio]:checked{animation:none}
}
@media(max-width:640px){
.notifs{top:10px;width:calc(100vw - 20px)}
.notif{padding:13px 12px 14px 15px}
}
/* ============================================================================
UNE UNITE A CONFIRMER. Chacune se traite seule, et disparait une fois traitee.
========================================================================== */
.arr-unites{padding-bottom:6px}
.arru{display:flex;align-items:center;gap:12px;padding:11px 16px;
border-top:1px solid var(--line-soft);transition:background .18s,opacity .3s,transform .3s}
.arru:hover{background:var(--surface-2)}
.arru-ok{background:var(--primary-50)}
.arru-i{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.arru-n{min-width:0}
.arru-n b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.3}
.arru-n small{display:block;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.4}
.arru-a{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.arru-a form{margin:0}
.arru-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:var(--r-pill);
font-size:13px;font-weight:800;transition:.15s;white-space:nowrap;border:1.5px solid transparent}
.arru-ok-btn{background:var(--primary);color:#fff;box-shadow:0 8px 18px -9px rgba(16,185,129,.85)}
.arru-ok-btn:hover{background:var(--primary-dark)}
.arru-ko-btn{background:#fff;color:var(--danger-dark);border-color:#fecaca}
.arru-ko-btn:hover{background:#fef2f2;border-color:var(--danger)}
.arru-btn:disabled{opacity:.5;cursor:wait}
.arru-fait{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
color:var(--primary-darker);background:#fff;border:1px solid var(--primary-200);
padding:7px 13px;border-radius:var(--r-pill)}
.arru-encours{opacity:.55}
.arru-part{opacity:0;transform:translateX(28px)}
@media(max-width:640px){
.arru{flex-direction:column;align-items:stretch;gap:10px}
.arru-a{width:100%}
.arru-a form{flex:1}
.arru-btn{width:100%;justify-content:center;min-height:44px}
}
/* ============================================================================
LA FLUIDITE, PARTOUT.
Rien ne doit sauter, rien ne doit clignoter. Une interface qui saccade,
c'est une interface qui fait douter, et le doute coute du temps.
========================================================================== */
/* Un clic doit toujours donner une reponse physique immediate. */
a,button,summary,label,.opt,.puce,.vehic,.offre,.cpt{transition:
background-color .18s ease, border-color .18s ease, color .18s ease,
box-shadow .22s ease, transform .14s cubic-bezier(.2,.9,.3,1), opacity .18s ease}
button:active,.act:active,.go:active,.cta:active,.mini:active,
.filtre:active,.bb:active,.act-b:active,.bas-b:active{transform:scale(.97)}
/* Le formulaire : le champ actif se detache, sans agiter la page. */
.inp,.saisie-i,.stp-i{transition:border-color .18s, background-color .18s, box-shadow .18s}
/* Les blocs repliables s'ouvrent, ils ne se telecommandent pas. */
.repli-body,.repli>summary{transition:background-color .18s}
details[open]>summary~*{animation:deplie .24s cubic-bezier(.2,.9,.3,1)}
@keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Les cartes de la liste : elles se soulevent au survol, discretement. */
.offre:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
/* Une ancre (#fil) ne colle jamais sous l'en-tete fixe. */
html{scroll-behavior:smooth}
:target{scroll-margin-top:90px}
/* RESPECT DE LA PERSONNE : si elle a demande moins d'animations dans son
systeme (fatigue, vertiges, epilepsie), on les coupe TOUTES. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ============================================================================
RESPONSIVE. 90 % des gens arrivent d'un telephone, dans le stress.
Verifie a 360px, 390px et 426px. Aucun defilement horizontal, nulle part.
========================================================================== */
@media(max-width:1000px){
.layout{grid-template-columns:1fr}
.aside{position:static}
#carte{height:320px}
}
/* ---- Tablette et grand telephone ---- */
@media(max-width:760px){
.header-in{flex-wrap:wrap;row-gap:10px}
/* En-tete : le lien "Mon espace" disparait, il est en GROS en bas de page. */
.moi-lien{display:none}
.crise-tag{order:3;width:100%;justify-content:center}
.spacer{display:none}
.brand{flex:1 1 auto}
}
/* ---- Telephone ---- */
@media(max-width:640px){
.wrap{padding:18px 14px 40px}
.officiel{padding:10px 14px}
.officiel-in{font-size:12.5px}
.header-in{padding:12px 14px}
.mark{width:38px;height:38px;border-radius:11px}
.brand-txt .n{font-size:16.5px}
.brand-txt .s{font-size:11px}
/* Le bloc d'evacuation doit tenir dans l'ecran, SANS DEFILER. */
.evac{padding:20px 16px;margin-top:4px;border-radius:var(--r-lg)}
.evac-t{font-size:21px;margin-bottom:16px}
.evac-ou{margin-top:22px;font-size:12px}
/* Les boutons d'aide : l'un sous l'autre, tous cliquables au pouce. */
.actions{grid-template-columns:1fr;gap:11px}
.act,.act-urgence,.act-aide{grid-column:auto;padding:18px;font-size:16px}
.stats{gap:7px}
.stat{padding:8px 14px;font-size:12.5px}
.stat b{font-size:17px}
.row2{grid-template-columns:1fr}
.res-s{margin-left:0}
.o-top{flex-direction:column}
.dist{align-self:flex-start}
.o-foot{flex-direction:column;align-items:stretch}
.btn-tel{justify-content:center}
.o-links{margin-left:0;justify-content:center}
.compte{width:100%;margin-left:0}
/* Les places d'une offre : 3 colonnes egales, jamais de debordement. */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.place{min-width:0;padding:8px 10px}
.place .n{font-size:19px}
.place .l{font-size:10px}
.bot span{display:none}
.bot{padding:14px;border-radius:50%;right:14px;bottom:14px}
.bot-panneau{right:14px;bottom:72px;width:calc(100vw - 28px)}
.opt{flex-wrap:nowrap}
.opt .opt-s{display:none}
.stp-b{width:42px;height:42px} /* un peu PLUS grand au doigt : c'est un pouce, pas une souris */
.stp-i{width:54px}
.conf-t{font-size:20px}
.conf-top{padding:20px 16px}
.conf-body{padding:16px}
.barre{border-radius:var(--r);padding:12px;flex-direction:column;align-items:stretch;gap:10px}
.barre-g{margin-left:0;display:grid;grid-template-columns:1fr;gap:7px}
.bb{justify-content:center;padding:11px 14px}
.vehics{grid-template-columns:1fr}
.vehic{flex-direction:row;text-align:left;gap:12px}
.aider-g{grid-template-columns:1fr !important}
.msg{max-width:95%}
.fil{max-height:340px;padding:12px}
.saisie{padding:11px 12px}
.etape{padding:16px}
.repli>summary{padding:16px}
.repli-body{padding:0 16px 16px}
.cpt{flex-wrap:wrap}
/* Fiches de coordination : les boutons prennent toute la largeur. */
.acts,.bas{flex-direction:column}
.act-b,.bas-b{min-width:0;width:100%}
.kpis{grid-template-columns:repeat(2,1fr)}
.moi-bas{padding:0 14px;margin-top:28px}
.footer{padding:22px 14px}
.footer .lk{gap:12px;font-size:12.5px}
}
/* ---- Petit telephone (360px). Le plancher. ---- */
@media(max-width:400px){
.hero h1{font-size:24px}
.titre{font-size:22px}
.brand-txt .s{display:none}
.stat{padding:7px 12px;font-size:12px}
.places{grid-template-columns:repeat(3,1fr);gap:5px}
.place{padding:7px 6px}
.place .l{font-size:9px;letter-spacing:.3px}
.filtre{padding:7px 12px;font-size:12.5px}
.moi-bas-txt small{display:none}
.kpis{grid-template-columns:1fr}
}
/* ---- Le pouce : aucune cible cliquable en dessous de 44px de haut ---- */
@media(pointer:coarse){
.btn-tel,.go,.cta,.act,.mini,.filtre,.bb,.act-b,.bas-b{min-height:44px}
.stp-b{min-width:40px;min-height:40px}
}
/* ============================================================================
============================================================================
V2 : MULTI-INCIDENTS, COMMUNAUTE, MESSAGERIE, ORGANISATION
Meme grammaire visuelle que le reste : memes tokens, memes rayons, memes
ombres. Aucune nouvelle couleur, aucune nouvelle police. Quelqu'un qui a
appris a lire une page du site sait lire les nouvelles.
Mobile d'abord, verifie a 360 px. Aucun defilement horizontal, jamais.
============================================================================
========================================================================== */
/* Le logo remplace l'ancien carre en degrade : c'est une , plus une
. */
.mark{width:42px;height:42px;border-radius:13px;display:block;object-fit:contain;
box-shadow:0 8px 18px -9px rgba(16,185,129,.55);flex:0 0 auto;background:transparent}
/* Le tag d'incident est devenu un lien : on doit TOUJOURS pouvoir sortir. */
/* ===== LES CHIFFRES, EN HAUT ===== */
/* auto-fit, et non repeat(4) : la ligne de chiffres n'a pas toujours 4 tuiles.
Depuis qu'on affiche AUSSI les demandes d'évacuation, l'accueil en a 5 — avec
une grille figée à 4, la cinquième tombait seule sur une deuxième ligne. */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin:0 0 26px}
.tu{background:linear-gradient(165deg,#fff 40%,var(--surface-2));border:1px solid var(--line);
border-radius:var(--r-lg);padding:20px 16px 18px;text-align:center;position:relative;overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 26px -20px rgba(16,24,40,.5);
transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .22s, border-color .2s}
.tu:hover{transform:translateY(-3px);
box-shadow:0 1px 2px rgba(16,24,40,.05), 0 22px 40px -22px rgba(16,24,40,.55)}
/* Tuile CLIQUABLE : un KPI qui emmène droit à la rubrique où l'on agit dessus.
Discret au repos, une flèche apparaît au survol pour signaler qu'on peut cliquer. */
a.tu.tu-lien{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.tu.tu-lien::after{content:"→";position:absolute;right:12px;bottom:10px;font-size:15px;
color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .18s, transform .18s}
a.tu.tu-lien:hover::after{opacity:.85;transform:translateX(0)}
/* Le liseré de couleur en haut : il code le type, sans un mot. Un dégradé, plus vivant. */
.tu::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--line)}
.tu.h::before{background:linear-gradient(90deg,var(--primary-light),var(--primary-dark))}
.tu.t::before{background:linear-gradient(90deg,#60a5fa,var(--info-dark))}
.tu.a::before{background:linear-gradient(90deg,#a78bfa,var(--violet-dark))}
.tu.u::before{background:linear-gradient(90deg,#f87171,var(--danger-dark))}
/* .d = les demandes d'évacuation. Ambre et non rouge : le rouge dit "plus
personne pour ces chevaux", l'ambre dit "des gens attendent une réponse". */
.tu.d::before{background:linear-gradient(90deg,#fbbf24,var(--warning-dark))}
.tu.h:hover{border-color:var(--primary-200)}
.tu.t:hover{border-color:#bfdbfe}
.tu.a:hover{border-color:#ddd6fe}
.tu.u:hover{border-color:#fecaca}
.tu.d:hover{border-color:#fde68a}
.tu-n{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,4.6vw,37px);
line-height:1;color:var(--ink);letter-spacing:-1px}
/* Le grand nombre prend la couleur de son type : lisible d'un coup d'œil. */
.tu.h .tu-n{color:var(--primary-darker)}
.tu.t .tu-n{color:var(--info-dark)}
.tu.a .tu-n{color:var(--violet-dark)}
.tu.u .tu-n{color:var(--danger-dark)}
.tu.d .tu-n{color:var(--warning-dark)}
.tu-l{font-size:12.5px;font-weight:700;color:var(--text);margin-top:8px;line-height:1.3}
.tu-s{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
/* ===== LA CARTE DE L'ACCUEIL ===== */
.carte-bloc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:20px;margin:0 0 26px;box-shadow:var(--sh-xs)}
.carte-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:14px}
.carte-h h2{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink)}
#carte-index{height:420px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.carte-note{font-size:12px;color:var(--muted);margin-top:11px;line-height:1.5}
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--text-soft)}
.legende .lg{display:inline-flex;align-items:center;gap:6px}
.legende .lg::before{content:"";width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.lg-c::before{background:var(--danger)}
.lg-h::before{background:var(--primary)}
.lg-t::before{background:var(--info)}
.lg-e::before{background:var(--warning)}
.lg-a::before{background:var(--violet)}
/* ===== LA PORTEE DE L'ALERTE (tableau de bord d'une evacuation) =====
Une ligne par palier, cumulative : combien de gens joignables, combien
reellement prevenus. Le palier courant est souligne -- c'est la que s'arrete
l'alerte aujourd'hui, et c'est ce qu'on veut voir en un coup d'oeil. */
.portee{display:flex;flex-direction:column;gap:7px}
.portee-l{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-soft)}
.portee-km{width:52px;flex:0 0 auto;font-weight:800;color:var(--text)}
.portee-b{flex:1;height:8px;border-radius:var(--r-pill);background:var(--surface-2);
border:1px solid var(--line-soft);overflow:hidden}
.portee-b i{display:block;height:100%;border-radius:var(--r-pill);
background:linear-gradient(90deg,var(--primary-light),var(--primary-dark));min-width:2px}
.portee-n{width:66px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.portee-n b{color:var(--primary-darker);font-weight:800}
.portee-courant .portee-km{color:var(--warning-dark)}
.portee-courant .portee-km::after{content:" ▸"}
/* Le bouton « Autour de moi », posé DANS la carte (controle Leaflet). Il doit
se lire sur n'importe quel fond de carte : fond blanc franc, ombre portee. */
.carte-geo{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
padding:9px 15px;font:800 12.5px/1 var(--font-body);color:var(--text);cursor:pointer;
box-shadow:0 6px 18px -8px rgba(16,24,40,.5);white-space:nowrap}
.carte-geo:hover{border-color:var(--primary);color:var(--primary-darker)}
.carte-geo[data-occupe="1"]{cursor:wait;opacity:.75}
/* ===== UNE CARTE D'INCIDENT ===== */
.incs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-bottom:30px}
.inc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-xl);overflow:hidden;text-decoration:none;box-shadow:var(--sh-xs);
transition:transform .18s,box-shadow .18s,border-color .18s}
/* Toute la carte est cliquable : dans l'urgence, on ne cherche pas le lien. */
.inc:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--primary-200)}
.vign{position:relative;aspect-ratio:2/1;background:var(--surface-2);overflow:hidden}
.vign img{width:100%;height:100%;object-fit:cover;display:block}
.vign-vide{display:grid;place-items:center;font-family:var(--font-display);font-size:40px;
color:var(--line);background:var(--surface-2)}
.vign-p{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:10px;
display:grid;place-items:center;color:#fff;box-shadow:var(--sh-sm)}
.vign-incendie{background:var(--danger)}
.vign-inondation{background:var(--info)}
.vign-tempete{background:var(--violet)}
.vign-autre{background:var(--muted)}
.inc-c{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.inc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.inc-t{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
font-size:11.5px;font-weight:800;background:var(--surface-2);color:var(--text-soft)}
.inc-incendie{background:#fef2f2;color:#b91c1c}
.inc-inondation{background:#eff6ff;color:#1d4ed8}
.inc-tempete{background:#f5f3ff;color:#6d28d9}
.inc-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
color:var(--danger-dark);white-space:nowrap}
.inc-live .pulse{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite}
.inc-c h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);
line-height:1.25;margin-bottom:7px;letter-spacing:-.3px}
.inc-lieu{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);
font-weight:600;margin-bottom:13px;flex-wrap:wrap}
.inc-dep{color:var(--line);margin-left:2px}
.inc-dep::before{content:"· "}
.inc-chif{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ic{font-size:11.5px;font-weight:600;color:var(--text-soft);background:var(--surface-2);
border:1px solid var(--line-soft);padding:5px 9px;border-radius:var(--r-sm)}
.ic b{font-weight:800;color:var(--ink)}
.ic.h b{color:var(--primary-darker)}
.ic.t b{color:var(--info-dark)}
.ic.a b{color:var(--violet-dark)}
/* Les demandes d'évacuation : c'est le BESOIN, pas l'offre. Ambre, pour qu'on
voie tout de suite que cette pastille-là ne compte pas de l'aide disponible. */
.ic.d b{color:var(--warning-dark)}
.ic.d{background:#fffbeb;border-color:#fde68a}
.inc-urg{display:flex;align-items:center;gap:6px;background:#fef2f2;color:#b91c1c;
border:1px solid #fecaca;border-radius:var(--r-sm);padding:8px 11px;font-size:12.5px;
font-weight:700;margin-bottom:13px}
.inc-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--primary-darker);
font-weight:800;font-size:13.5px}
/* ===== LE BLOC COMMUNAUTE ===== */
.commu{background:
radial-gradient(130% 150% at 100% 0%, rgba(52,211,153,.18), transparent 55%),
linear-gradient(140deg,var(--primary-50),#fff);
border:1px solid var(--primary-200);border-radius:var(--r-xl);padding:30px;margin:0 0 26px;
box-shadow:0 1px 2px rgba(16,24,40,.05), 0 26px 52px -32px rgba(16,185,129,.55)}
.commu-c{padding:22px}
.commu-in{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.commu-txt{flex:1;min-width:260px}
.commu-tag{display:inline-flex;align-items:center;gap:7px;color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
padding:6px 14px;border-radius:var(--r-pill);font-size:11px;font-weight:800;letter-spacing:.4px;
text-transform:uppercase;margin-bottom:14px;
box-shadow:0 6px 16px -8px rgba(16,185,129,.9), inset 0 1px 0 rgba(255,255,255,.25)}
.commu h2{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,3vw,27px);
color:var(--ink);line-height:1.2;letter-spacing:-.5px;margin-bottom:10px}
.commu p{color:var(--text-soft);font-size:14.5px;line-height:1.65;margin:0}
/* LA PREUVE PAR LE NOMBRE.
Selecteur en « .commu .commu-tot » et pas « .commu-tot » tout court : la regle
« .commu p » juste au-dessus vaut (0,0,1,1), donc elle battrait une classe
seule quel que soit l'ordre du fichier. Le margin:0 gagnerait, et le bloc
resterait colle au paragraphe. */
.commu .commu-tot{margin:15px 0 0;font-size:13px;line-height:1.5;color:var(--text-soft)}
.commu .commu-tot b{color:var(--primary-darker);font-weight:800}
/* Trois tuiles, lues en diagonale. Elles remplacent la ligne de gris minuscule
« 205 hebergement · 166 transport · 283 aide », qui portait l'argument le plus
fort de la page dans le corps de texte le plus faible.
Le blanc translucide les detache du degrade vert de la carte sans ajouter une
couleur de plus. */
.commu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}
.commu-s{background:linear-gradient(165deg,#fff,rgba(255,255,255,.62));border:1px solid var(--primary-200);
border-radius:var(--r);padding:13px 6px;text-align:center;
box-shadow:0 10px 22px -18px rgba(16,24,40,.5);
transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s}
.commu-s:hover{transform:translateY(-2px);box-shadow:0 18px 32px -20px rgba(16,185,129,.55)}
.commu-s b{display:block;font-family:var(--font-display);font-weight:600;font-size:24px;
line-height:1;color:var(--primary-darker);letter-spacing:-.5px}
.commu-s span{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)}
.commu-go{display:flex;flex-direction:column;gap:8px;align-items:center}
.commu-go small{font-size:11.5px;color:var(--muted);font-weight:600}
.btn-commu{display:inline-flex;align-items:center;gap:8px;color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
padding:15px 26px;border-radius:var(--r-pill);font-weight:800;font-size:15px;text-decoration:none;
box-shadow:0 14px 30px -12px rgba(16,185,129,.95), inset 0 1px 0 rgba(255,255,255,.28);
transition:transform .16s, box-shadow .2s, background .2s;white-space:nowrap}
.btn-commu:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker));
transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(16,185,129,1)}
/* ===== AUCUN INCIDENT : le calme ===== */
.calme{text-align:center;padding:34px 20px 26px}
.calme-p{width:64px;height:64px;border-radius:50%;background:var(--primary-100);color:var(--primary-darker);
display:grid;place-items:center;margin:0 auto 18px}
.calme h1{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,4vw,34px);
color:var(--ink);letter-spacing:-.6px}
.calme p{color:var(--text-soft);font-size:15.5px;line-height:1.65;max-width:520px;margin:12px auto 0}
/* ===== DEUX PAVES COTE A COTE ===== */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.pave{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:22px;box-shadow:var(--sh-xs)}
.pave-l{text-align:left}
.pave-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;color:#fff}
.pave-i.h{background:var(--primary)}
.pave-i.t{background:var(--info)}
.pave h3{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:8px}
.pave p{color:var(--text-soft);font-size:14px;line-height:1.6;margin:0 0 14px}
.pave-b{display:inline-block;padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);
font-weight:700;font-size:13.5px;color:var(--text);text-decoration:none;transition:.15s}
.pave-b:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50)}
.pave-n{font-size:12.5px;color:var(--muted);line-height:1.6;margin:14px 0 0}
/* Une liste "libelle : valeur", lisible en diagonale. */
.kv{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--surface);padding:11px 14px}
.kv span{font-size:13px;color:var(--text-soft);font-weight:600}
.kv b{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
.kv b small{font-weight:600;color:var(--muted);font-size:11.5px}
.kv .vert{color:var(--primary-darker)}
.kv .rouge,.rouge{color:var(--danger-dark)}
.gris{color:var(--muted)}
.orange{color:var(--warning-dark);font-weight:700}
/* ===== FORMULAIRES : les briques communes ===== */
.bloc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:26px;box-shadow:var(--sh-xs);margin-bottom:22px}
.bloc-code{max-width:420px;margin:0 auto 18px;text-align:center}
.bloc-danger{border-color:#fecaca;background:#fffbfb}
.lb{display:block;font-size:13px;font-weight:800;color:var(--text);margin:0 0 7px}
.lb-gros{font-size:15.5px;margin-top:4px}
.sous{font-size:13.5px;color:var(--text-soft);line-height:1.6;margin:0 0 16px}
.oblig{display:inline-block;background:#fef2f2;color:#b91c1c;font-size:10px;font-weight:800;
padding:2px 7px;border-radius:var(--r-pill);margin-left:5px;vertical-align:middle}
.facul{display:inline-block;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:700;
padding:2px 7px;border-radius:var(--r-pill);margin-left:5px;vertical-align:middle}
.inp{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r);
font-size:15px;color:var(--text);background:var(--surface);transition:.15s;margin-bottom:16px}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-100)}
.inp-code{text-align:center;font-size:30px;font-weight:800;letter-spacing:10px;padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sep{border:none;border-top:1px solid var(--line);margin:22px 0}
.aide-champ{font-size:12px;color:var(--muted);line-height:1.55;margin:-11px 0 16px}
.go{width:100%;padding:16px;border-radius:var(--r);background:var(--primary);color:#fff;
font-size:16px;font-weight:800;transition:.16s;box-shadow:0 12px 26px -12px rgba(16,185,129,.9);
display:flex;align-items:center;justify-content:center;gap:8px}
.go:hover{background:var(--primary-dark)}
.go.sec{background:var(--surface-2);color:var(--text);box-shadow:none;border:1.5px solid var(--line)}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 22px;
border-radius:var(--r-pill);background:var(--primary);color:#fff;font-weight:800;font-size:14.5px;
text-decoration:none;transition:.15s;box-shadow:0 10px 22px -12px rgba(16,185,129,.9);border:none}
.btn-p:hover{background:var(--primary-dark)}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 20px;
border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);
color:var(--text);font-weight:700;font-size:13.5px;text-decoration:none;transition:.15s}
.btn-s:hover{border-color:var(--primary);color:var(--primary-darker);background:var(--primary-50)}
.btn-ok{display:inline-flex;align-items:center;gap:7px;padding:13px 22px;border-radius:var(--r-pill);
background:var(--primary);color:#fff;font-weight:800;font-size:14.5px;border:none;transition:.15s}
.btn-ok:hover{background:var(--primary-dark)}
.btn-danger{padding:13px 22px;border-radius:var(--r-pill);background:var(--danger);color:#fff;
font-weight:800;font-size:14.5px;border:none;transition:.15s}
.btn-danger:hover{background:var(--danger-dark)}
.btn-danger-s{display:inline-flex;align-items:center;padding:11px 18px;border-radius:var(--r-pill);
background:var(--surface);border:1.5px solid #fecaca;color:var(--danger-dark);
font-weight:700;font-size:13px;text-decoration:none;transition:.15s}
.btn-danger-s:hover{background:#fef2f2;border-color:var(--danger)}
.lien-b{background:none;border:none;color:var(--primary-darker);font-weight:800;font-size:13px;
text-decoration:underline;padding:0;cursor:pointer}
.lien-danger{color:var(--danger-dark)}
.renvoi{text-align:center;font-size:13.5px;color:var(--muted);margin-bottom:22px;
display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap}
.rassure{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px;
font-size:11.5px;color:var(--muted);font-weight:600}
.rassure span{display:inline-flex;align-items:center;gap:5px}
.rassure svg{color:var(--primary)}
.pourquoi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px 20px;font-size:13.5px;color:var(--text-soft);line-height:1.7;margin-bottom:22px}
.pourquoi b{color:var(--text)}
/* ===== LES CASES A COCHER "CE QUE JE PEUX PROPOSER" ===== */
.choix{display:flex;flex-direction:column;gap:11px;margin-bottom:6px}
.ch{display:flex;align-items:flex-start;gap:13px;padding:15px;border:1.5px solid var(--line);
border-radius:var(--r-lg);cursor:pointer;transition:.15s;background:var(--surface)}
.ch:hover{border-color:var(--primary-200);background:var(--primary-50)}
/* La case cochee doit se voir DE LOIN : c'est un engagement, pas un detail. */
.ch:has(input:checked){border-color:var(--primary);background:var(--primary-50);
box-shadow:0 0 0 3px var(--primary-100)}
.ch input{width:21px;height:21px;accent-color:var(--primary);flex:0 0 auto;margin:2px 0 0}
.ch-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ch-h .ch-i{background:var(--primary)}
.ch-t .ch-i{background:var(--info)}
.ch-a .ch-i{background:var(--violet)}
/* NE PAS renommer en .ch-t : cette classe designe DEJA la carte "transport"
(.ch.ch-t). La collision faisait heriter la carte du flex-direction:column
du bloc de texte, et l'icone du camion partait a la ligne toute seule. */
.ch-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-txt b{font-size:14.5px;color:var(--ink);font-weight:800}
.ch-txt small{font-size:12.5px;color:var(--muted);line-height:1.45}
/* Le consentement. Jamais pre-coche, jamais en petits caracteres gris. */
.consent{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--surface-2);
border:1.5px solid var(--line);border-radius:var(--r-lg);cursor:pointer;margin-bottom:20px;
font-size:13px;color:var(--text-soft);line-height:1.6;transition:.15s}
.consent:has(input:checked){border-color:var(--primary);background:var(--primary-50)}
.consent input{width:21px;height:21px;accent-color:var(--primary);flex:0 0 auto;margin:1px 0 0}
.consent-s{font-size:12.5px;padding:13px}
/* ===== TYPES D'INCIDENT / MODES / NATURES ===== */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.ty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 8px;
border:1.5px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:.15s;
font-size:13px;font-weight:700;color:var(--text-soft);text-align:center}
.ty input{position:absolute;opacity:0;pointer-events:none}
.ty-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
background:var(--surface-2);color:var(--muted);transition:.15s}
.ty:has(input:checked){border-color:var(--primary);background:var(--primary-50);color:var(--ink)}
.ty-incendie:has(input:checked) .ty-i{background:var(--danger);color:#fff}
.ty-inondation:has(input:checked) .ty-i{background:var(--info);color:#fff}
.ty-tempete:has(input:checked) .ty-i{background:var(--violet);color:#fff}
.ty-autre:has(input:checked) .ty-i{background:var(--muted);color:#fff}
.modes,.natures{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.mo,.nat{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1.5px solid var(--line);
border-radius:var(--r-lg);cursor:pointer;transition:.15s;background:var(--surface)}
.mo:has(input:checked),.nat:has(input:checked){border-color:var(--primary);background:var(--primary-50);
box-shadow:0 0 0 3px var(--primary-100)}
.mo input,.nat input{width:20px;height:20px;accent-color:var(--primary);flex:0 0 auto;margin:2px 0 0}
.mo-c,.nat span{display:flex;flex-direction:column;gap:3px;min-width:0}
.mo-c b,.nat b{font-size:14.5px;color:var(--ink);font-weight:800}
.mo-c small,.nat small{font-size:12.5px;color:var(--text-soft);line-height:1.5}
/* ===== ECRAN DE FIN ===== */
.fini{text-align:center;padding:24px 20px 10px;max-width:620px;margin:0 auto}
.fini-p{width:68px;height:68px;border-radius:50%;background:var(--primary-100);color:var(--primary-darker);
display:grid;place-items:center;margin:0 auto 20px}
.fini-neutre{background:var(--surface-2);color:var(--muted)}
.fini-attente{background:#fef3c7;color:var(--warning-dark)}
.fini h1{font-family:var(--font-display);font-weight:500;font-size:clamp(23px,4vw,32px);
color:var(--ink);line-height:1.2;letter-spacing:-.5px}
.fini-s{color:var(--text-soft);font-size:15.5px;line-height:1.7;margin:14px 0 24px}
.fini-liens{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.fini-note{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:20px}
.rappel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:22px;text-align:left;box-shadow:var(--sh-xs)}
.rappel h3{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:12px}
.rappel ul{margin:0;padding-left:20px;color:var(--text-soft);font-size:13.5px;line-height:1.75}
.rappel li{margin-bottom:8px}
.rappel li b{color:var(--text)}
.reconf{background:#fffbeb;border:1.5px solid #fde68a;border-radius:var(--r-xl);padding:24px;margin-bottom:22px}
.reconf h2{font-family:var(--font-display);font-weight:600;font-size:20px;color:#92400e;margin-bottom:8px}
.reconf p{color:#92400e;font-size:13.5px;line-height:1.65;margin:0 0 16px}
.reconf small{display:block;text-align:center;font-size:12px;color:#92400e;margin-top:10px;font-weight:600}
.fiche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
overflow:hidden;margin-bottom:22px;box-shadow:var(--sh-xs)}
.fiche-l{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;
border-bottom:1px solid var(--line-soft);font-size:13.5px}
.fiche-l:last-child{border-bottom:none}
.fiche-l span{color:var(--muted);font-weight:600}
.fiche-l b{color:var(--ink);font-weight:800;text-align:right}
.partir{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.partir b{font-size:14px;color:var(--text);display:block}
.partir small{font-size:12.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.5}
/* ===== L'ALERTE RECUE PAR SMS ===== */
.sos{text-align:center;max-width:560px;margin:0 auto;padding:14px 0}
/* .sos-tag : remplace par le bandeau .ban, bien plus lisible. */
.sos h1{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,4.5vw,33px);
color:var(--ink);line-height:1.25;letter-spacing:-.5px}
.sos-p{color:var(--text-soft);font-size:15px;line-height:1.7;margin:16px 0}
.sos-q{font-size:18px;font-weight:800;color:var(--ink);margin:22px 0 20px;line-height:1.4}
/* Deux boutons, pas un de plus. Lisible a une main, par quelqu'un qu'on vient
de reveiller. */
.sos-f{display:flex;flex-direction:column;gap:12px}
.sos-oui,.sos-non{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-lg);
text-align:left;transition:.16s;border:2px solid transparent;width:100%}
.sos-oui{background:var(--primary);color:#fff;box-shadow:0 14px 30px -14px rgba(16,185,129,.95)}
.sos-oui:hover{background:var(--primary-dark);transform:translateY(-1px)}
.sos-non{background:var(--surface);border-color:var(--line);color:var(--text)}
.sos-non:hover{border-color:var(--muted);background:var(--surface-2)}
.sos-oui span,.sos-non span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sos-oui b,.sos-non b{font-size:16px;font-weight:800}
.sos-oui small{font-size:12.5px;opacity:.9}
.sos-non small{font-size:12.5px;color:var(--muted)}
.sos-deja{margin-top:16px;font-size:12.5px;color:var(--muted);font-weight:600}
.sos-note{margin-top:22px;padding:15px 18px;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-lg);font-size:12.5px;color:var(--text-soft);line-height:1.65;text-align:left}
/* ===== "RIEN DE DISPONIBLE" -> la veille ===== */
.rien{background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r-xl);
padding:32px 24px;text-align:center}
.rien-i{width:56px;height:56px;border-radius:50%;background:var(--primary-50);color:var(--primary-darker);
display:grid;place-items:center;margin:0 auto 16px}
.rien h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:10px}
.rien p{color:var(--text-soft);font-size:14px;line-height:1.65;max-width:420px;margin:0 auto 18px}
.rien small{display:block;margin-top:11px;font-size:11.5px;color:var(--muted);font-weight:600}
/* ===== DOUBLON D'INCIDENT ===== */
/* L'ÉTIQUETTE « eyebrow » en haut d'une rubrique : petite pastille soignée,
dégradé doux, fin liseré et ombre colorée. Elle donne le ton de la section. */
.hero-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:var(--r-pill);
font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-bottom:15px;
background:linear-gradient(135deg,var(--primary-100),var(--primary-50));color:var(--primary-darker);
border:1px solid rgba(16,185,129,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -8px rgba(16,185,129,.6)}
.hero-tag svg{opacity:.9}
.hero-warn{background:linear-gradient(135deg,#fde68a,#fef3c7);color:#92400e;
border-color:rgba(217,119,6,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -8px rgba(217,119,6,.5)}
.hero-h{background:linear-gradient(135deg,var(--primary-100),var(--primary-50));color:var(--primary-darker)}
.hero-t{background:linear-gradient(135deg,#bfdbfe,#dbeafe);color:var(--info-dark);
border-color:rgba(59,130,246,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -8px rgba(59,130,246,.5)}
.hero-a{background:linear-gradient(135deg,#ddd6fe,#ede9fe);color:var(--violet-dark);
border-color:rgba(139,92,246,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -8px rgba(139,92,246,.5)}
.dbl{background:var(--surface);border:1.5px solid var(--warning);border-radius:var(--r-xl);
padding:22px;margin-bottom:16px;box-shadow:var(--sh-xs)}
.dbl-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.dbl-km{font-size:11.5px;font-weight:800;color:var(--warning-dark);background:#fffbeb;
border:1px solid #fde68a;padding:4px 10px;border-radius:var(--r-pill)}
.dbl h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:6px}
.dbl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dbl-msg{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.dbl-quand-meme{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
padding:20px;text-align:center;margin-top:22px}
.dbl-quand-meme b{font-size:14px;color:var(--text)}
.dbl-quand-meme p{font-size:13px;color:var(--muted);line-height:1.6;margin:6px 0 14px}
.choix-crise{display:grid;gap:12px}
.cc{display:flex;flex-direction:column;gap:5px;padding:18px;background:var(--surface);
border:1.5px solid var(--line);border-radius:var(--r-lg);text-decoration:none;transition:.15s}
.cc:hover{border-color:var(--primary);background:var(--primary-50)}
.cc b{font-size:16px;color:var(--ink)}
.cc small{font-size:12.5px;color:var(--muted)}
.cc .inc-t{align-self:flex-start}
/* ===== ADMIN / ORGANISATEUR ===== */
.adm-h{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
flex-wrap:wrap;margin-bottom:24px}
.adm-h h1{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,4vw,32px);
color:var(--ink);letter-spacing:-.6px}
.adm-h p{color:var(--text-soft);font-size:14px;margin-top:5px}
.adm-h-a{display:flex;gap:9px;flex-wrap:wrap}
.adm-t{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);
margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.adm-badge{background:var(--danger);color:#fff;font-family:var(--font-body);font-size:12px;
font-weight:800;padding:3px 10px;border-radius:var(--r-pill)}
/* Tableau « Chiffres clés par pays » (admin) */
.adm-pays-wrap{overflow-x:auto;margin-bottom:24px}
.adm-pays{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden}
.adm-pays th,.adm-pays td{padding:11px 14px;text-align:right;font-size:14px;white-space:nowrap;
border-bottom:1px solid var(--line-soft)}
.adm-pays th:first-child,.adm-pays td:first-child{text-align:left}
.adm-pays thead th{background:var(--surface-2);font-size:11.5px;font-weight:800;text-transform:uppercase;
letter-spacing:.5px;color:var(--muted)}
.adm-pays tbody tr:last-child td{border-bottom:0}
.adm-pays td.hl{font-weight:800;color:var(--primary-darker)}
.adm-pays td.rg{font-weight:800;color:var(--danger)}
.adm-pays-code{font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 7px;margin-left:5px}
/* La ligne « Total » du tableau par pays : le grand total, bien détaché. */
.adm-pays tfoot .adm-pays-tot td{border-top:2px solid var(--line);background:var(--surface-2);
font-size:14.5px;padding-top:13px;padding-bottom:13px}
.adm-c{background:var(--surface);border:2px solid var(--warning);border-radius:var(--r-xl);
padding:22px;margin-bottom:16px;box-shadow:var(--sh-xs)}
/* L'incident qu'on vient d'ouvrir depuis le SMS : on le retrouve du premier coup d'oeil. */
.adm-cible{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-100)}
.adm-c-h{display:flex;justify-content:space-between;align-items:center;gap:10px;
margin-bottom:10px;flex-wrap:wrap}
.adm-att{font-size:11.5px;font-weight:800;color:var(--warning-dark)}
.adm-c h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);margin-bottom:14px}
.adm-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
background:var(--surface-2);border-radius:var(--r);padding:14px;margin-bottom:14px}
.adm-meta span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--text)}
.adm-meta b{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.adm-desc{font-size:13.5px;color:var(--text-soft);line-height:1.65;margin:0 0 14px}
.adm-c-a{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.adm-ref summary{font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;padding:8px 0}
.adm-ref form{margin-top:10px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.adm-ref .inp{margin-bottom:0;width:auto;flex:1;min-width:200px}
.adm-note{font-size:12px;color:var(--muted);line-height:1.6;background:var(--surface-2);
border-radius:var(--r-sm);padding:11px 13px}
.adm-liste{display:flex;flex-direction:column;gap:14px}
.adm-l{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:18px 20px;box-shadow:var(--sh-xs)}
.adm-l-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
flex-wrap:wrap;margin-bottom:12px}
.adm-l-t h3{font-family:var(--font-display);font-weight:600;font-size:18px}
.adm-l-t h3 a{text-decoration:none;color:var(--ink)}
.adm-l-t h3 a:hover{color:var(--primary-darker)}
.adm-l-v{font-size:12px;color:var(--muted);font-weight:600}
.adm-l-c,.adm-l-s{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-soft);
padding:10px 0;border-top:1px solid var(--line-soft)}
.adm-l-c b,.adm-l-s b{color:var(--ink);font-weight:800}
.adm-l-a{display:flex;gap:9px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line-soft)}
.adm-masque{margin-top:11px;font-size:12px;color:var(--warning-dark);background:#fffbeb;
border:1px solid #fde68a;border-radius:var(--r-sm);padding:9px 12px;font-weight:600}
.vide{background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r-lg);
padding:26px;text-align:center;color:var(--muted);font-size:14px;font-weight:600;
display:flex;align-items:center;justify-content:center;gap:9px}
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:20px}
.eq{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:14px}
.eq-i{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto}
.eq-c{flex:1;min-width:0}
.eq-c b{font-size:14px;color:var(--ink);display:block}
.eq-c small{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.rech{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.rech .inp{margin-bottom:0;flex:1;min-width:220px}
/* ===== TABLEAUX ===== */
/* Un tableau large defile DANS SON CADRE. La page, elle, ne part JAMAIS
de travers : sur un telephone, une page qui glisse est une page qu'on quitte. */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);
background:var(--surface);box-shadow:var(--sh-xs);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tbl th{text-align:left;padding:13px 16px;background:var(--surface-2);color:var(--muted);
font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--text)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface-2)}
.tbl b{color:var(--ink);font-weight:700}
.tbl code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
background:var(--surface-2);padding:3px 7px;border-radius:6px;color:var(--text)}
.td-s{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:600}
.tbl-n{font-size:12px;color:var(--muted);line-height:1.6;margin-top:11px}
/* ===== LA MESSAGERIE ===== */
.conv-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
flex-wrap:wrap;margin-bottom:16px}
.conv-h h1{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,3.5vw,26px);
color:var(--ink);letter-spacing:-.4px}
.conv-m{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cm{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
padding:5px 11px 5px 5px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--text)}
.cm-i{width:22px;height:22px;border-radius:50%;background:var(--primary-100);color:var(--primary-darker);
display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}
.cm small{color:var(--muted);font-weight:600;font-size:11px}
.conv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
padding:18px;max-height:58vh;overflow-y:auto;margin-bottom:14px;box-shadow:var(--sh-xs);
-webkit-overflow-scrolling:touch}
.conv-vide{text-align:center;color:var(--muted);font-size:13.5px;padding:30px 0}
.conv-j{text-align:center;margin:16px 0 12px}
.conv-j span{background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:800;
padding:4px 12px;border-radius:var(--r-pill)}
.conv-sys{text-align:center;font-size:12px;color:var(--muted);font-style:italic;
padding:8px 0;line-height:1.5}
.msg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.msg-moi{flex-direction:row-reverse}
.msg-i{width:32px;height:32px;border-radius:50%;background:var(--primary-100);color:var(--primary-darker);
display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto}
.msg-c{max-width:78%;min-width:0}
.msg-n{font-size:12px;font-weight:800;color:var(--text);margin-bottom:4px}
.msg-n small{color:var(--muted);font-weight:600;margin-left:4px}
.msg-b{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
padding:11px 14px;font-size:14px;line-height:1.6;color:var(--text)}
/* Mes messages sont verts et a droite : on se retrouve dans un fil sans lire. */
.msg-moi .msg-b{background:var(--primary);border-color:var(--primary);color:#fff}
.msg-b p{margin:0}
.msg-p{border-radius:var(--r-sm);margin-bottom:7px;max-height:220px;display:block}
.msg-f{display:flex;gap:9px;align-items:center;margin-top:4px;font-size:11px;color:var(--muted)}
.msg-moi .msg-f{justify-content:flex-end}
.msg-sig{background:none;border:none;color:var(--muted);font-size:11px;text-decoration:underline;
cursor:pointer;padding:0}
.msg-sig:hover{color:var(--danger-dark)}
.msg-sigd{color:var(--warning-dark);font-weight:700}
.conv-f{display:flex;gap:10px;align-items:flex-end}
.conv-f .inp{margin-bottom:0;flex:1;resize:vertical}
.conv-go{width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;
display:grid;place-items:center;flex:0 0 auto;transition:.15s;
box-shadow:0 10px 22px -12px rgba(16,185,129,.9)}
.conv-go:hover{background:var(--primary-dark)}
.conv-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px;text-align:center}
/* ===== LES CHEVAUX ===== */
.cheval{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;
background:var(--surface-2)}
.cheval-n{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
letter-spacing:.6px;margin-bottom:13px}
.cheval .inp{background:var(--surface)}
.signaler-bas{text-align:center;font-size:13.5px;color:var(--muted);padding:10px 0 0}
.signaler-bas a{color:var(--primary-darker);font-weight:800}
/* ============================================================================
RESPONSIVE. Tout est verifie a 360 px.
========================================================================== */
@media(max-width:900px){
.tuiles{grid-template-columns:repeat(2,1fr)}
.deux{grid-template-columns:1fr}
.commu-in{flex-direction:column;align-items:stretch}
.commu-go{align-items:stretch}
.btn-commu{justify-content:center}
#carte-index{height:340px}
}
@media(max-width:620px){
.grid2{grid-template-columns:1fr}
.types{grid-template-columns:repeat(2,1fr)}
.incs{grid-template-columns:1fr}
.adm-h{flex-direction:column}
.adm-h-a{width:100%}
.adm-h-a .btn-s,.adm-h-a .btn-p{flex:1;justify-content:center}
.msg-c{max-width:85%}
.bloc{padding:20px}
.commu{padding:22px}
.partir{flex-direction:column;align-items:stretch}
.partir .btn-danger-s{justify-content:center}
.fini-liens .btn-p,.fini-liens .btn-s{flex:1;justify-content:center}
.dbl-actions .btn-p,.dbl-actions .btn-s{flex:1;justify-content:center}
}
@media(max-width:400px){
.tuiles{grid-template-columns:1fr 1fr;gap:9px}
.tu{padding:14px 10px}
.tu-l{font-size:11.5px}
.inp-code{font-size:24px;letter-spacing:7px}
#carte-index{height:280px}
.sos-q{font-size:16px}
.conv{padding:13px}
}
/* Le pouce : aucune cible cliquable en dessous de 44 px de haut. */
@media(pointer:coarse){
.btn-p,.btn-s,.btn-ok,.btn-danger,.btn-danger-s,.btn-commu,.pave-b,
.sos-oui,.sos-non,.ch,.mo,.nat,.ty{min-height:44px}
.conv-go{min-width:52px}
}
/* Quelqu'un qui a demande "moins d'animations" a ses raisons. On les respecte. */
@media(prefers-reduced-motion:reduce){
.inc:hover{transform:none}
.btn-commu:hover,.sos-oui:hover,.btn-p:hover{transform:none}
.pulse{animation:none}
}
/* ===== RÉGLER LES ENVOIS (admin) =====
L'ancien écran demandait un « plafond » et un « débit » : deux abstractions.
Ici on pose les deux VRAIES questions -- combien de personnes, en combien de
temps -- sous forme de paliers nommés, avec le coût et la durée calculés en
direct. C'est ce bilan qui rend l'écran décidable. */
.adm-debrid{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:12px}
.adm-debrid>summary{font-size:13px;font-weight:800;color:var(--primary-darker);cursor:pointer;
padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px}
.adm-debrid>summary::before{content:"\2699";font-size:14px}
.adm-debrid>summary::-webkit-details-marker{display:none}
.adm-debrid>summary:hover{text-decoration:underline}
.adm-debrid[open]>summary{margin-bottom:12px}
.reg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.reg-q{font-size:15.5px;font-weight:800;color:var(--ink);margin:0 0 4px}
.reg-q:not(:first-child){margin-top:24px}
.reg-sous{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
/* Les paliers. On lit un NOM ("Incident majeur"), pas un nombre nu. */
.reg-choix{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 0}
.reg-c{display:flex;align-items:flex-start;gap:9px;padding:13px;background:var(--surface);
border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.15s}
.reg-c:hover{border-color:var(--primary-200)}
.reg-c:has(input:checked){border-color:var(--primary);background:var(--primary-50);
box-shadow:0 0 0 3px var(--primary-100)}
.reg-c input[type="radio"]{width:17px;height:17px;accent-color:var(--primary);flex:0 0 auto;margin:2px 0 0}
.reg-c-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.reg-c-t b{font-size:13.5px;color:var(--ink);font-weight:800;line-height:1.25}
.reg-c-n{font-size:12.5px;font-weight:700;color:var(--primary-darker)}
.reg-c-t small{font-size:11.5px;color:var(--muted);line-height:1.35}
/* Les vitesses risquées se voient AVANT le clic, pas après. */
.reg-warn:has(input:checked){border-color:var(--warning);background:#fffbeb;
box-shadow:0 0 0 3px #fef3c7}
.reg-warn:has(input:checked) .reg-c-n{color:var(--warning-dark)}
.reg-danger:has(input:checked){border-color:var(--danger);background:#fef2f2;
box-shadow:0 0 0 3px #fee2e2}
.reg-danger:has(input:checked) .reg-c-n{color:var(--danger-dark)}
.reg-nb{width:100%;padding:6px 9px;border:1.5px solid var(--line);border-radius:9px;
font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface)}
.reg-nb:focus{outline:none;border-color:var(--primary)}
/* LE BILAN. « 3 000 personnes » ne veut rien dire tant qu'on ne lit pas
« 135 € » et « 7 h » juste à côté. C'est lui qui permet de décider. */
.reg-bilan{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.reg-b{background:var(--surface);padding:14px;text-align:center}
.reg-b span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.reg-b b{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);
letter-spacing:-.3px}
/* L'avertissement n'apparaît QUE quand il sert. Permanent, il devient un décor. */
.reg-note{margin-top:12px;padding:11px 14px;border-radius:var(--r-sm);
font-size:12.5px;line-height:1.55;font-weight:600}
.reg-note-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.reg-note-danger{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.reg .go{margin-top:16px}
@media(max-width:900px){ .reg-choix{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){
.reg-choix{grid-template-columns:1fr}
.reg-bilan{grid-template-columns:1fr}
}
/* ===== LE FIL D'ARIANE : SORTIR D'UN INCIDENT =====
Une fois entre dans un incident, le cookie de contexte suit la personne de
page en page. Sans ce lien, il n'y a AUCUN moyen evident d'en ressortir :
c'est un cul-de-sac, et un cul-de-sac dans une page d'urgence, c'est
quelqu'un qui ferme l'onglet. */
.fil{background:var(--surface);border-bottom:1px solid var(--line)}
.fil-in{max-width:1280px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;
gap:11px;min-width:0}
body.w-etroit .fil-in{max-width:900px}
.fil-b{display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 9px;
border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);
color:var(--text-soft);font-size:12.5px;font-weight:800;text-decoration:none;
transition:.15s;flex:0 0 auto;white-space:nowrap}
.fil-b:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-darker)}
/* Le nom de l'incident rappelle OU on est. Il s'efface s'il n'y a pas la place :
le bouton de sortie, lui, ne disparait JAMAIS. */
.fil-n{font-size:12.5px;color:var(--muted);font-weight:600;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-n::before{content:"/ ";color:var(--line)}
@media(max-width:520px){ .fil-n{display:none} }
/* ===== LA BARRE FIXE "FAITES PARTIE DE LA COMMUNAUTE" =====
Elle prend la place de "Mon espace" pour ceux qui n'ont pas encore d'annonce.
Il ne peut y en avoir QU'UNE : deux barres collees en bas se recouvrent, et
sur un telephone de 426 px elles mangent la moitie de l'ecran. */
.commu-bas{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px 14px;
background:linear-gradient(to top,var(--app) 55%,transparent);pointer-events:none}
.commu-bas-in{max-width:640px;margin:0 auto;pointer-events:auto}
.commu-bas-btn{display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;
border-radius:var(--r-pill);background:var(--primary);color:#fff;text-decoration:none;
box-shadow:0 16px 34px -14px rgba(16,185,129,.95);transition:.16s}
.commu-bas-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.commu-bas-i{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);
display:grid;place-items:center;flex:0 0 auto}
.commu-bas-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.commu-bas-t b{font-size:14.5px;font-weight:800;line-height:1.2}
.commu-bas-t small{font-size:11.5px;opacity:.9;line-height:1.35;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commu-bas-c{flex:0 0 auto;opacity:.9}
/* La page doit pouvoir defiler SOUS la barre, sinon le dernier bloc est mange. */
body:has(.commu-bas) .footer{padding-bottom:92px}
@media(max-width:400px){ .commu-bas-t small{display:none} }
/* ===== LE FLOU DERRIERE LE CHATBOT =====
Tres leger : on doit toujours voir OU l'on est. Un flou trop fort donne
l'impression d'avoir change de page, et la personne perd le fil de ce qu'elle
etait en train de remplir. */
body:has(#botPanneau:not([hidden]))::before{
content:"";position:fixed;inset:0;z-index:90;
background:rgba(14,28,23,.14);
-webkit-backdrop-filter:blur(2.5px);
backdrop-filter:blur(2.5px);
animation:flou-in .18s ease-out}
@keyframes flou-in{from{opacity:0}to{opacity:1}}
/* Le panneau et son bouton passent au-dessus du flou (voir l'ordre d'empilement
global, plus bas) : sans ca ils seraient floutes eux aussi, et le formulaire
deviendrait illisible. */
/* Le voile ne s'anime pas pour qui a demande moins d'animations. */
@media(prefers-reduced-motion:reduce){
body:has(#botPanneau:not([hidden]))::before{animation:none}
.commu-bas-btn:hover{transform:none}
}
/* ===== LE GROS BOUTON "SIGNALER UN INCIDENT" =====
Il etait en bas de page et dans le pied : personne ne le trouvait. Or c'est
LE geste qu'on vient faire quand ca brule, et le seul moment ou l'on n'a ni
le temps ni la tete a chercher un lien. */
.creer-cta{display:flex;align-items:center;gap:16px;padding:20px 22px;margin:0 0 26px;
border-radius:var(--r-xl);text-decoration:none;position:relative;
/* L'ORANGE reste en CONTOUR, et c'est la hierarchie qui l'impose : deux boutons
pleins de meme force, c'est un choix qu'on ne sait plus faire. L'oeil doit
aller au rouge en premier -- evacuer passe avant signaler.
Mais un contour peut etre somptueux : un fond creme chaud qui s'eclaircit
vers le bas, une bordure ambre, et une ombre AMBREE (jamais grise). */
background:linear-gradient(150deg, #fef6e0 0%, #fffdf7 55%, #ffffff 100%);
border:2px solid #f8d478;
box-shadow:0 10px 26px -14px rgba(217,119,6,.45), 0 1px 3px -1px rgba(217,119,6,.2);
transition:transform .18s, box-shadow .18s, border-color .18s}
.creer-cta:hover{border-color:var(--warning-dark);transform:translateY(-2px);
box-shadow:0 16px 34px -14px rgba(217,119,6,.6), 0 2px 5px -1px rgba(217,119,6,.25)}
/* L'ICONE. Un degrade ambre, du plus clair en haut au plus profond en bas :
c'est ce qui lui donne du corps, la ou un aplat reste plat.
ATTENTION : la teinte du BAS commande. L'ambre vif (#f59e0b) ne donne que
2,15:1 avec du blanc -- en plein soleil, sur un telephone, le pictogramme
disparait. On descend jusqu'a #b45309 (5,02:1), et le degrade part de #f59e0b
en haut : la moyenne percue reste lumineuse, et le blanc reste lisible. */
.creer-i{width:54px;height:54px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
background:linear-gradient(160deg, #f59e0b 0%, #d97706 28%, #b45309 100%);
color:#fff;
box-shadow:0 10px 22px -8px rgba(180,83,9,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.creer-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.creer-t b{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);
letter-spacing:-.3px;line-height:1.2}
.creer-t small{font-size:13px;color:var(--text-soft);line-height:1.45}
.creer-c{flex:0 0 auto;color:var(--warning-dark)}
@media(max-width:520px){
.creer-cta{padding:16px;gap:13px}
.creer-i{width:46px;height:46px;border-radius:13px}
.creer-t b{font-size:16.5px}
.creer-t small{font-size:12px}
.creer-c{display:none}
}
/* ===== APPELER LA PERSONNE QUI A SIGNALE (admin) =====
Valider un incident, c'est autoriser des centaines de SMS. Devant un doute,
le plus rapide n'est pas de chercher : c'est de decrocher. */
.adm-appel{display:flex;align-items:center;gap:13px;padding:13px 16px;margin:0 0 14px;
border-radius:var(--r-lg);text-decoration:none;
background:var(--primary-50);border:1.5px solid var(--primary-200);transition:.15s}
.adm-appel:hover{background:var(--primary-100);border-color:var(--primary)}
.adm-appel-i{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--primary);color:#fff}
.adm-appel-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-appel-t b{font-size:15px;font-weight:800;color:var(--primary-darker)}
.adm-appel-t small{font-size:12px;color:var(--text-soft);line-height:1.4}
/* ===== LA VIGNETTE DE CARTE =====
Une seule tuile OpenStreetMap officielle, avec le point pose a sa position
EXACTE dans la tuile (calculee en PHP). L'ancien service staticmap.openstreetmap.de
est un service tiers non officiel : il tombe regulierement, et la vignette
affichait alors son texte alternatif en travers de la carte. */
.vign{position:relative;aspect-ratio:2/1;background:var(--surface-2);overflow:hidden}
/* Le bloc de 3x3 tuiles (768 px), DECALE pour que le point tombe pile au centre
de la vignette. Le point est ainsi toujours a 256 px minimum de chaque bord du
bloc : aucune bande grise sur les cotes, quelle que soit la taille de la carte. */
.vign-map{position:absolute;width:768px;height:768px;filter:saturate(.85) brightness(1.02)}
.vign-t{position:absolute;width:256px;height:256px;background-size:256px 256px;
background-repeat:no-repeat}
/* Le bloc etant recentre, le marqueur est TOUJOURS au milieu. */
.vign-pt{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-28px 0 0 -14px;
border-radius:50% 50% 50% 0;transform:rotate(-45deg);
border:2.5px solid #fff;box-shadow:0 6px 14px -3px rgba(16,24,40,.55);
display:grid;place-items:center;z-index:2}
.vign-pt svg{transform:rotate(45deg);color:#fff}
.vign-pt.incendie{background:var(--danger)}
.vign-pt.inondation{background:var(--info)}
.vign-pt.tempete{background:var(--violet)}
.vign-pt.autre{background:var(--muted)}
/* ===== "C'EST BIEN VOUS ?" =====
L'appareil se souvient de la personne : on ne lui redemande NI son prenom,
NI son numero, NI de recocher une case. Trois obstacles gratuits entre elle
et le coup de main dont elle a besoin, c'est une demande qu'on perd. */
.connu{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:16px;
background:var(--primary-50);border:1.5px solid var(--primary-200);border-radius:var(--r-lg)}
.connu-i{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--primary);color:#fff;font-weight:800;font-size:16px}
.connu-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.connu-c b{font-size:15px;color:var(--ink);font-weight:800}
.connu-c small{font-size:12.5px;color:var(--text-soft);font-weight:600}
/* "Ce n'est pas vous ?" reste visible : sur un telephone partage, il faut
toujours pouvoir reprendre la main. */
.connu-b{font-size:12.5px;font-weight:700;color:var(--primary-darker);text-decoration:underline;
white-space:nowrap;flex:0 0 auto}
@media(max-width:480px){
.connu{flex-wrap:wrap}
.connu-b{width:100%;text-align:center;padding-top:4px}
}
/* ===== « CA MOULINE » : l'attente sur un bouton =====
On ne met JAMAIS `disabled` : un bouton desactive n'est pas envoye avec le
formulaire, et plusieurs de nos boutons PORTENT la decision (name="action"
value="oui"/"non"). Les desactiver, ce serait perdre le clic.
On coupe donc les clics en CSS, et le bouton reste actif pour le navigateur. */
.occupe{position:relative;pointer-events:none;opacity:.85;cursor:wait;
display:inline-flex;align-items:center;justify-content:center;gap:10px}
.occupe::before{content:"";width:17px;height:17px;flex:0 0 auto;border-radius:50%;
border:2.5px solid currentColor;border-right-color:transparent;
animation:tourne .6s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
/* Sur un bouton clair (bordure grise), la roue doit rester visible. */
.btn-s.occupe::before,.pave-b.occupe::before{border-color:var(--muted);border-right-color:transparent}
/* Toute la page signale l'attente : le curseur change, et plus rien ne repond.
C'est ce qui empeche de cliquer sur AUTRE chose pendant que ca part. */
form[data-envoi="1"]{cursor:progress}
form[data-envoi="1"] .inp,
form[data-envoi="1"] input,
form[data-envoi="1"] select,
form[data-envoi="1"] textarea{pointer-events:none;opacity:.7}
/* Qui a demande moins d'animations n'a pas demande moins d'information :
la roue s'arrete, mais le bouton reste visiblement occupe. */
@media(prefers-reduced-motion:reduce){
.occupe::before{animation:none;border-right-color:currentColor;opacity:.5}
}
/* ============================================================================
LE VOILE D'ENVOI — quand des SMS partent vraiment.
----------------------------------------------------------------------------
Une roue sur un bouton suffit pour enregistrer un formulaire. Elle ne suffit
PAS ici : declarer une evacuation fait sonner des dizaines de telephones, ca
prend des SECONDES, et pendant ce temps la personne ne doit ni recliquer, ni
fermer l'onglet, ni croire que le site a plante.
Alors on prend tout l'ecran, et on montre ce qui se passe REELLEMENT : un
balayage qui part du lieu et s'elargit. C'est exactement ce que fait le
serveur au meme moment -- chercher les gens, du plus proche au plus loin.
Le bouton, lui, devient gris et ne repond plus (classe .occupe, plus haut) :
le second clic est impossible, et ca se VOIT.
========================================================================== */
.envoi-voile{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;
background:rgba(234,243,238,.9);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
animation:voile-entre .28s ease both}
@keyframes voile-entre{from{opacity:0}to{opacity:1}}
.envoi-carte{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-xl);padding:32px 26px 26px;text-align:center;
box-shadow:0 30px 70px -30px rgba(4,120,87,.45), var(--sh-xs);
animation:envoi-monte .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes envoi-monte{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* ---- LE BALAYAGE. Trois ondes qui partent du centre, une aiguille qui tourne,
un point fixe : le lieu qu'on evacue. */
.envoi-radar{position:relative;width:128px;height:128px;margin:0 auto 22px}
.envoi-radar::before{content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle,var(--primary-50) 0%,transparent 72%)}
.envoi-onde{position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);
opacity:0;transform:scale(.22);animation:envoi-onde 2.6s cubic-bezier(.15,.7,.3,1) infinite}
.envoi-onde:nth-child(2){animation-delay:.85s}
.envoi-onde:nth-child(3){animation-delay:1.7s}
@keyframes envoi-onde{
0%{transform:scale(.22);opacity:0}
12%{opacity:.85}
100%{transform:scale(1);opacity:0}
}
/* L'aiguille : un quart de disque en degrade, qui tourne. */
.envoi-aiguille{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(from 0deg,rgba(16,185,129,.28) 0deg,rgba(16,185,129,.05) 55deg,transparent 90deg);
animation:tourne 2.6s linear infinite;
-webkit-mask:radial-gradient(circle,transparent 16%,#000 17%);
mask:radial-gradient(circle,transparent 16%,#000 17%)}
/* Le lieu : un point vert qui bat, au centre exact. */
.envoi-cible{position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
border-radius:50%;background:var(--primary-dark);
box-shadow:0 0 0 5px rgba(16,185,129,.18);animation:envoi-bat 1.5s ease-in-out infinite}
@keyframes envoi-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.envoi-t{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink);
letter-spacing:-.4px;line-height:1.2}
.envoi-m{font-size:13.5px;color:var(--text-soft);line-height:1.6;margin-top:9px}
/* La barre : indeterminee, parce qu'on ne SAIT pas combien de temps ca prendra.
Mieux vaut un mouvement honnete qu'un pourcentage invente. */
.envoi-barre{margin-top:20px;height:5px;border-radius:var(--r-pill);background:var(--surface-2);
overflow:hidden;border:1px solid var(--line-soft)}
.envoi-barre span{display:block;height:100%;width:36%;border-radius:var(--r-pill);
background:linear-gradient(90deg,var(--primary-light),var(--primary-dark));
animation:envoi-glisse 1.3s ease-in-out infinite}
@keyframes envoi-glisse{
0%{transform:translateX(-110%)}
100%{transform:translateX(390%)}
}
.envoi-p{font-size:12px;font-weight:800;color:var(--warning-dark);margin-top:15px;
letter-spacing:.2px}
/* Le grand bouton vert d'un envoi de masse DEVIENT GRIS pendant l'envoi : on ne
se contente pas de couper les clics, on le dit a l'oeil. */
form[data-loader] .go.occupe{background:var(--muted);box-shadow:none}
/* Moins d'animations : on garde le voile, le cercle et le message -- ce sont des
INFORMATIONS. On arrete seulement ce qui bouge. */
@media(prefers-reduced-motion:reduce){
.envoi-voile,.envoi-carte{animation:none}
.envoi-onde{animation:none;opacity:.3;transform:scale(1)}
.envoi-onde:nth-child(2){transform:scale(.66);opacity:.45}
.envoi-onde:nth-child(3){transform:scale(.34);opacity:.6}
.envoi-aiguille{animation:none}
.envoi-cible{animation:none}
.envoi-barre span{animation:none;width:100%;opacity:.5}
}
@media(max-width:420px){
.envoi-carte{padding:26px 20px 22px}
.envoi-radar{width:106px;height:106px;margin-bottom:18px}
.envoi-t{font-size:19.5px}
}
/* ============================================================================
LEAFLET ET LES ELEMENTS FIXES : QUI PASSE DEVANT QUI.
LE PROBLEME. Leaflet donne a ses calques internes des z-index tres eleves :
400 pour les tuiles, jusqu'a 1000 pour ses controles (+/-). Ces valeurs
s'appliquent dans le contexte d'empilement de la PAGE. Resultat : la carte
passait DEVANT la barre fixe du bas, devant l'en-tete, devant le chatbot.
Sur telephone, la carte recouvrait le bouton « Faites partie de la communaute ».
LA VRAIE CORRECTION, ce n'est pas de surenchérir en montant nos z-index a
9999 -- ca marche jusqu'au jour ou une bibliotheque monte a 10000. C'est
d'ENFERMER la carte dans son propre contexte d'empilement.
`isolation:isolate` (ou un `z-index` sur un element positionne) cree ce
contexte : les 400 et les 1000 de Leaflet deviennent alors RELATIFS a la
carte, et ne peuvent plus en sortir. La carte compte pour un seul element,
a z-index 0, et tout ce qui est au-dessus le reste.
========================================================================== */
#carte, #carte-index, .carte, .leaflet-container{
position:relative;
z-index:0;
isolation:isolate; /* les z-index de Leaflet restent PRISONNIERS d'ici */
}
/* Et par securite, l'ordre explicite de tout ce qui flotte au-dessus du contenu.
Ecrit ici, en un seul endroit, plutot que disperse dans dix regles. */
.header { z-index:50 } /* colle en haut */
.fil { z-index:40 } /* le fil d'Ariane */
.moi-bas,
.commu-bas { z-index:60 } /* les barres collees en bas */
.inviter-fab { z-index:99 } /* l'invitation flotte au-dessus des barres... */
.bot,
.bot-panneau { z-index:100 } /* ...et le chatbot devant tout, quand il revient */
/* ===== « JE DOIS ÉVACUER MES CHEVAUX » (accueil) =====
Le geste le plus urgent du site, et il n'etait accessible QUE depuis
l'interieur d'un incident. Quelqu'un dont l'ecurie brule arrive sur l'accueil :
il doit pouvoir partir d'ici, tout de suite.
Il est PLUS gros et PLUS haut que « Signaler un incident » : evacuer passe
avant signaler. Un cheval dans le van ne peut pas attendre une validation. */
.evac-cta{display:flex;align-items:center;gap:16px;padding:22px;margin:0 0 14px;
border-radius:var(--r-xl);text-decoration:none;position:relative;overflow:hidden;
/* LE ROUGE, EN APLAT. Pas de degrade : demande explicitement.
Et c'est le bon choix -- un degrade sur un si grand aplat laisse toujours
voir ses bandes sur un ecran de telephone, et le rouge le plus sombre du
bas ecrasait le sous-titre.
ECLAIRCI le 16/07 : #b91c1c -> #dc2626, a la demande.
C'EST LE PLUS CLAIR POSSIBLE, ET CE N'EST PAS UNE PRECAUTION EN L'AIR.
Contraste du texte blanc sur le fond, calcule (WCAG AA veut 4,5:1 pour du
texte de 13 px) :
#b91c1c 6,47:1 le rouge d'avant, tres sur
#dc2626 4,83:1 celui-ci -- passe, avec un sous-titre BLANC PLEIN
#e03131 4,51:1 passe de justesse
#ef4444 3,76:1 ECHOUE -- illisible en plein soleil
Aller plus clair que #dc2626 obligerait a supprimer le sous-titre ou a le
grossir au-dela de 18 px gras (le seuil "grand texte", qui tombe a 3:1).
Sur le bouton d'evacuation, un sous-titre qu'on ne lit pas dehors, en
urgence, telephone a la main, n'est pas un detail d'esthetique.
A NOTER : le meme libelle sur urgence.php (.act-urgence) est en --danger
(#ef4444), plus clair -- il n'a pas de sous-titre, et son libelle de 18 px
gras releve du "grand texte". Les deux sont donc justes. */
background:#dc2626;
color:#fff;
/* L'ombre est ROUGE, pas grise : une ombre grise sous un bouton colore le fait
paraitre pose sur la page. Une ombre de sa propre couleur le fait rayonner.
Eclaircie avec le fond, sinon elle le rembrunit par en dessous. */
box-shadow:0 18px 42px -18px rgba(185,28,28,.95), 0 2px 6px -2px rgba(185,28,28,.42);
transition:transform .18s, box-shadow .18s}
/* LE SOUS-TITRE PASSE EN BLANC PLEIN.
Il etait a 92 % d'opacite : sur l'ancien rouge sombre ca passait encore
(5,66:1), sur le nouveau il tombait a 4,28:1 -- sous la norme. Les 8 % rendus
ne se voient pas a l'oeil, et ils ramenent le contraste a 4,83:1. */
.evac-cta .evac-t small{opacity:1}
/* Le liseré clair sur l'arête haute : c'est lui qui donne l'impression de relief.
Un seul pixel, et le bouton cesse d'etre un rectangle plat. */
.evac-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08);
pointer-events:none}
.evac-cta:hover{transform:translateY(-2px);
box-shadow:0 24px 52px -18px rgba(127,29,29,1), 0 3px 8px -2px rgba(127,29,29,.5)}
.evac-i{width:56px;height:56px;border-radius:17px;flex:0 0 auto;display:grid;place-items:center;
/* Aplat, comme le bouton qui le porte : un degrade ici, sur un fond desormais
uni, se verrait immediatement -- c'est la seule chose qui bougerait. */
background:rgba(255,255,255,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(0,0,0,.25)}
.evac-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.evac-t b{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.4px;line-height:1.2}
.evac-t small{font-size:13px;opacity:.92;line-height:1.45}
.evac-c{flex:0 0 auto;opacity:.9}
/* PLUSIEURS INCIDENTS : on fait choisir. C'est le seul cas ou poser une
question est justifie -- le parcours d'evacuation a besoin de savoir DANS
QUEL incident il travaille (les places, les transports, la carte en dependent). */
.evac-choix{display:block;padding:0;cursor:pointer}
.evac-choix>summary{display:flex;align-items:center;gap:16px;padding:22px;
list-style:none;cursor:pointer}
.evac-choix>summary::-webkit-details-marker{display:none}
.evac-choix[open]>summary .evac-c{transform:rotate(180deg)}
.evac-choix .evac-c{transition:transform .2s}
.evac-liste{display:grid;gap:9px;padding:0 22px 22px}
.evac-l{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r);
background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);
color:#fff;text-decoration:none;transition:.15s}
.evac-l:hover{background:rgba(255,255,255,.28);border-color:#fff}
.evac-l b{font-size:15.5px;font-weight:800}
.evac-l small{font-size:12.5px;opacity:.9}
/* Le badge de type reprend ses couleurs propres : c'est le meme repere que
partout ailleurs, et on doit le reconnaitre meme sur fond vert. */
.evac-l .inc-t{align-self:flex-start;background:#fff;color:var(--text)}
@media(max-width:520px){
.evac-cta{padding:16px;gap:13px}
.evac-choix>summary{padding:16px;gap:13px}
.evac-liste{padding:0 16px 16px}
.evac-i{width:46px;height:46px;border-radius:13px}
.evac-t b{font-size:18px}
.evac-t small{font-size:12px}
}
/* Le lien vers oPaddock dans le pied de page. Il doit se VOIR comme un lien --
souligne au survol -- sinon personne ne devine qu'il est cliquable. */
.off-lien{color:var(--primary-darker);text-decoration:none;transition:.15s}
.off-lien:hover{text-decoration:underline}
/* ===== LE TEXTE DU BOUTON « J'ÉVACUE » RESTE BLANC, QUOI QU'IL ARRIVE =====
Il l'etait par HERITAGE (color:#fff sur .evac-cta). L'heritage est fragile :
il suffit d'une regle plus specifique ailleurs dans la feuille -- sur un ,
un , un -- pour que le texte redevienne sombre, et il
disparait alors sur le fond rouge.
On le pose donc EXPLICITEMENT sur chaque element. Un bouton d'evacuation
illisible, c'est le pire endroit possible pour un bug d'affichage. */
.evac-cta,
.evac-cta *,
.evac-cta>summary,
.evac-cta>summary *{color:#fff}
/* La seule exception : les badges de type dans la liste des incidents. Ils sont
sur fond BLANC, donc leur texte doit rester sombre pour rester lisible. */
.evac-l .inc-t{color:var(--text)}
.evac-l .inc-incendie{color:#b91c1c}
.evac-l .inc-inondation{color:#1d4ed8}
.evac-l .inc-tempete{color:#6d28d9}
/* ===== L'ÉTAT DE SANTÉ (admin) =====
La panne la plus grave du systeme est SILENCIEUSE : si les crons ne tournent
pas, l'application a l'air de marcher -- les incidents se valident, les pages
s'affichent -- et pas un seul SMS ne part. Ce bandeau rend la panne visible. */
.sante{background:#fef2f2;border:2px solid #fecaca;border-radius:var(--r-xl);
padding:20px 22px;margin:0 0 22px}
.sante-h{display:flex;align-items:center;gap:9px;color:#b91c1c;font-size:16px;margin-bottom:10px}
.sante-p{font-size:13.5px;color:#7f1d1d;line-height:1.65;margin:0 0 10px}
.sante-l{margin:0 0 12px;padding-left:20px;font-size:13px;color:#7f1d1d;line-height:1.7}
.sante-l li{margin-bottom:6px}
.sante-l small{display:block;color:#991b1b;font-size:12px;opacity:.85}
.sante code{background:#fff;border:1px solid #fecaca;padding:2px 6px;border-radius:6px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.sante-d>summary{font-size:13px;font-weight:800;color:#b91c1c;cursor:pointer;padding:6px 0}
.sante-d p{font-size:13px;color:#7f1d1d;line-height:1.6;margin:8px 0}
/* Le bloc de commandes defile DANS SON CADRE : la page, elle, ne part jamais
de travers, meme sur un telephone. */
.sante-code{background:#fff;border:1px solid #fecaca;border-radius:var(--r-sm);
padding:12px 14px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:11.5px;line-height:1.7;color:#7f1d1d;margin:8px 0;-webkit-overflow-scrolling:touch}
/* Quand tout va bien, on le dit AUSSI : sinon on ne sait jamais si le bandeau
est absent parce que tout va bien, ou parce qu'il est casse. */
.sante-ok{display:flex;align-items:center;gap:10px;background:var(--primary-50);
border-color:var(--primary-200);color:var(--primary-darker);font-size:13.5px;padding:14px 18px}
.sante-ok b{color:var(--ink)}
/* ===== « QUE POUVEZ-VOUS PROPOSER AUJOURD'HUI ? » (page d'alerte) =====
A l'inscription, elle a coche tout ce qui etait ENVISAGEABLE. Le jour de
l'alerte, le van est chez le garagiste et le box est occupe -- mais elle peut
encore venir donner un coup de main.
Les cases sont PRE-COCHEES : dans la grande majorite des cas rien n'a change,
et il ne faut pas lui redemander de cocher ce qu'elle a deja dit. Elle DECOCHE
ce qui n'est plus possible. C'est un geste, pas trois. */
.dispo{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.dispo-c{display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer;
background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);
transition:.16s;text-align:left;position:relative}
.dispo-c input{position:absolute;opacity:0;pointer-events:none}
/* COCHEE = active, coloree, evidente. DECOCHEE = grisee, en retrait.
La difference doit se voir d'un coup d'oeil, sans lire : quelqu'un qu'on vient
de reveiller a 3 h du matin ne lit pas, il reconnait. */
.dispo-c:has(input:checked){border-color:var(--primary);background:var(--primary-50);
box-shadow:0 0 0 3px var(--primary-100)}
.dispo-c:not(:has(input:checked)){opacity:.5;background:var(--surface-2)}
.dispo-c:not(:has(input:checked)) .dispo-i{filter:grayscale(1)}
.dispo-c:hover{border-color:var(--primary-200)}
.dispo-i{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
color:#fff;transition:.16s}
.dispo-h .dispo-i{background:var(--primary)}
.dispo-t .dispo-i{background:var(--info)}
.dispo-a .dispo-i{background:var(--violet)}
/* .dispo-txt et NON .dispo-t : cette derniere designe DEJA la carte
« transport » (.dispo-c.dispo-t). La collision faisait heriter la carte du
flex-direction:column du bloc de texte, et l'icone du camion partait a la
ligne toute seule. C'est exactement le meme piege que .ch-t la derniere fois :
ne JAMAIS reutiliser un suffixe de modificateur comme nom d'element. */
.dispo-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dispo-txt b{font-size:15.5px;color:var(--ink);font-weight:800}
.dispo-txt small{font-size:12.5px;color:var(--muted);line-height:1.4}
/* La coche : elle apparait quand c'est coche, et disparait sinon. C'est le
signal le plus direct possible. */
.dispo-v{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--primary);color:#fff;transition:.16s;transform:scale(1)}
.dispo-c:not(:has(input:checked)) .dispo-v{background:var(--line);color:transparent;transform:scale(.8)}
.dispo-aide{font-size:12.5px;color:var(--text-soft);line-height:1.6;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
padding:11px 14px;margin:0 0 18px;text-align:left}
.dispo-aide b{color:var(--text)}
.sos-modif{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.6}
.sos-modif a{color:var(--primary-darker);font-weight:800}
@media(prefers-reduced-motion:reduce){ .dispo-v{transition:none} }
/* ===== LA RÉPONSE À UNE ALERTE, EN DEUX TEMPS =====
D'abord la question binaire (« pouvez-vous aider ? »), ENSUITE le detail.
Trois cases a cocher AVANT le oui, c'est une decision qu'on complique alors
qu'elle est simple -- et beaucoup de gens ferment la page a ce moment-la. */
.sos-b{display:flex;flex-direction:column;gap:12px}
.detail{display:flex;flex-direction:column;gap:0;
background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl);
padding:20px;margin-top:14px;text-align:left;
animation:detail-in .22s ease-out}
@keyframes detail-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.detail-q{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:14px;text-align:center}
.detail .sos-oui{margin-top:4px}
.detail-retour{background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;
text-decoration:underline;padding:12px 0 2px;cursor:pointer;align-self:center}
.detail-retour:hover{color:var(--text)}
/* SANS JAVASCRIPT, le bloc reste visible et le bouton « Oui » envoie
directement le formulaire : on perd le confort, jamais la fonction.
C'est le script qui CACHE, jamais lui qui rend possible. */
.dispo-aide-err{background:#fef2f2;border-color:#fecaca;color:#b91c1c;font-weight:700}
/* ============================================================================
LE BANDEAU D'INCIDENT (page d'alerte).
C'etait un petit badge : « Incendie · a 17 km de chez vous ». Trop chiche pour
l'information la plus importante de la page -- celle qui fait qu'on lit la
suite, ou qu'on referme.
LA DISTANCE EST LE CHIFFRE QUI DECIDE. « A 17 km », on y va. « A 140 km », on
reflechit. C'est ce qu'on cherche en premier, donc c'est ce qu'on donne en
premier -- en gros, dans son propre bloc, impossible a rater.
========================================================================== */
.ban{display:flex;align-items:center;gap:14px;padding:16px;margin:0 0 22px;
border-radius:var(--r-xl);text-align:left;position:relative;overflow:hidden;
border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--sh-xs)}
/* Le liseré de couleur sur l'arête gauche : le type se reconnaît sans lire. */
.ban::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.ban-i{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
color:#fff;box-shadow:0 8px 18px -8px rgba(16,24,40,.4)}
.ban-i svg{width:22px;height:22px}
.ban-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ban-t{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
text-transform:uppercase;letter-spacing:.5px}
.ban-pulse{width:6px;height:6px;border-radius:50%;background:currentColor;
animation:pulse 1.5s infinite;flex:0 0 auto}
.ban-nom{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);
line-height:1.25;letter-spacing:-.3px;
/* Un nom d'incident a rallonge ne doit jamais pousser la distance hors du cadre. */
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ban-lieu{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);
font-weight:600}
/* LA DISTANCE. Le chiffre le plus gros de la page, et c'est voulu. */
.ban-km{flex:0 0 auto;text-align:center;padding-left:14px;
border-left:1px solid var(--line);align-self:stretch;
display:flex;flex-direction:column;justify-content:center}
.ban-km b{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1;
letter-spacing:-1.5px;display:block}
.ban-km small{font-size:10px;font-weight:700;color:var(--muted);line-height:1.25;
text-transform:uppercase;letter-spacing:.3px;margin-top:3px;display:block}
/* Chaque type a sa couleur : le meme repere que partout ailleurs sur le site. */
.ban-incendie{background:linear-gradient(120deg,#fff5f5,#fff)}
.ban-incendie::before{background:var(--danger)}
.ban-incendie .ban-i{background:linear-gradient(150deg,#dc2626,#b91c1c)}
.ban-incendie .ban-t,.ban-incendie .ban-km b{color:#b91c1c}
.ban-inondation{background:linear-gradient(120deg,#eff6ff,#fff)}
.ban-inondation::before{background:var(--info)}
.ban-inondation .ban-i{background:linear-gradient(150deg,#3b82f6,#1d4ed8)}
.ban-inondation .ban-t,.ban-inondation .ban-km b{color:#1d4ed8}
.ban-tempete{background:linear-gradient(120deg,#f5f3ff,#fff)}
.ban-tempete::before{background:var(--violet)}
.ban-tempete .ban-i{background:linear-gradient(150deg,#8b5cf6,#6d28d9)}
.ban-tempete .ban-t,.ban-tempete .ban-km b{color:#6d28d9}
.ban-autre{background:linear-gradient(120deg,var(--surface-2),#fff)}
.ban-autre::before{background:var(--muted)}
.ban-autre .ban-i{background:linear-gradient(150deg,#8a97a5,#6b7785)}
.ban-autre .ban-t,.ban-autre .ban-km b{color:var(--text-soft)}
@media(max-width:420px){
.ban{gap:11px;padding:14px}
.ban-i{width:42px;height:42px;border-radius:12px}
.ban-nom{font-size:15px}
.ban-km{padding-left:11px}
.ban-km b{font-size:28px}
}
@media(prefers-reduced-motion:reduce){ .ban-pulse{animation:none} }
/* ===== « C'EST NOTÉ : VOUS ÊTES DISPONIBLE » =====
Une notification flottante ne suffit PAS ici : elle disparait au bout de
quelques secondes, la personne la rate, et elle doute quand meme que sa
reponse soit passee. Dans le doute, elle revient en arriere et reclique.
Ce bandeau RESTE sur la page tant qu'elle y est. */
.repondu{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;margin:0 0 22px;
border-radius:var(--r-xl);
background:linear-gradient(135deg,var(--primary-50),#fff);
border:2px solid var(--primary-200);
box-shadow:0 12px 30px -16px rgba(16,185,129,.6);
animation:repondu-in .3s ease-out}
@keyframes repondu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.repondu-i{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:linear-gradient(150deg,var(--primary-light),var(--primary-dark));color:#fff;
box-shadow:0 8px 18px -8px rgba(16,185,129,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.repondu-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.repondu-c>b{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);
letter-spacing:-.3px;line-height:1.2}
.repondu-c>span{font-size:13.5px;color:var(--text-soft);line-height:1.6}
.repondu-c>span b{color:var(--primary-darker)}
@media(max-width:480px){
.repondu{padding:15px;gap:11px}
.repondu-i{width:38px;height:38px}
.repondu-c>b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){ .repondu{animation:none} }
/* ============================================================================
LA PASTILLE D'INCIDENT DANS L'EN-TÊTE (.ctag)
Elle etait TOUJOURS ROUGE, meme pour une inondation -- et le rouge perd son
sens a force d'etre partout. Elle ne montrait qu'un nom tronque
(« incendie caen test… »), qui ne disait ni de quoi il s'agissait, ni ou.
Maintenant : une carte compacte, teintee au type, avec l'icone qui dit le type
sans qu'on ait a lire, et le nom sur sa propre ligne.
========================================================================== */
.ctag{display:inline-flex;align-items:center;gap:10px;
padding:7px 14px 7px 8px;border-radius:var(--r-pill);
text-decoration:none;flex:0 1 auto;min-width:0;max-width:340px;
border:1.5px solid var(--line);background:var(--surface);
box-shadow:var(--sh-xs);transition:.16s}
.ctag:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.ctag-i{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ctag-i svg{width:15px;height:15px}
.ctag-c{display:flex;flex-direction:column;gap:0;min-width:0;line-height:1.2}
.ctag-t{display:inline-flex;align-items:center;gap:5px;
font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
white-space:nowrap}
.ctag-pulse{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;
animation:pulse 1.5s infinite}
/* Le nom tient sur UNE ligne et se tronque proprement : un nom a rallonge ne
doit jamais pousser le reste de l'en-tete hors de l'ecran. */
.ctag-n{font-size:13px;font-weight:800;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* LA COULEUR SUIT LE TYPE. Le meme repere que partout ailleurs sur le site :
on apprend a le lire une fois, et on le reconnait ensuite. */
.ctag-incendie{background:linear-gradient(120deg,#fff5f5,#fff);border-color:#fecaca}
.ctag-incendie:hover{border-color:var(--danger)}
.ctag-incendie .ctag-i{background:linear-gradient(150deg,#dc2626,#b91c1c)}
.ctag-incendie .ctag-t{color:#b91c1c}
.ctag-inondation{background:linear-gradient(120deg,#eff6ff,#fff);border-color:#bfdbfe}
.ctag-inondation:hover{border-color:var(--info)}
.ctag-inondation .ctag-i{background:linear-gradient(150deg,#3b82f6,#1d4ed8)}
.ctag-inondation .ctag-t{color:#1d4ed8}
.ctag-tempete{background:linear-gradient(120deg,#f5f3ff,#fff);border-color:#ddd6fe}
.ctag-tempete:hover{border-color:var(--violet)}
.ctag-tempete .ctag-i{background:linear-gradient(150deg,#8b5cf6,#6d28d9)}
.ctag-tempete .ctag-t{color:#6d28d9}
.ctag-autre{background:linear-gradient(120deg,var(--surface-2),#fff)}
.ctag-autre .ctag-i{background:linear-gradient(150deg,#8a97a5,#6b7785)}
.ctag-autre .ctag-t{color:var(--text-soft)}
/* Sur un telephone, l'en-tete est deja charge (logo + « Mon espace »). On garde
l'icone -- qui porte le type et la couleur -- et on retire le texte : le nom
de l'incident est de toute facon rappele juste en dessous, dans le fil d'Ariane. */
@media(max-width:760px){
.ctag{padding:5px;gap:0;max-width:none}
.ctag-c{display:none}
}
@media(prefers-reduced-motion:reduce){ .ctag-pulse{animation:none} }
/* La mention « plutot reserve aux comites » sur le bouton de l'accueil. */
.creer-qui{margin-top:6px;padding-top:6px;border-top:1px dashed #fde68a;
font-size:11.5px !important;color:var(--warning-dark) !important;line-height:1.45}
.creer-qui b{color:#92400e}
/* ===== QUI DEVRAIT OUVRIR UN INCIDENT (page de creation) =====
On DIT qui devrait le faire. On n'INTERDIT a personne : le jour ou ca brule a
3 h du matin, si personne du CDE n'est joignable, le voisin doit pouvoir ouvrir
la page. L'administrateur valide avant publication -- c'est LUI le vrai filtre,
et il est humain. */
.qui{display:flex;gap:14px;padding:18px 20px;margin:0 0 22px;
border-radius:var(--r-xl);background:linear-gradient(135deg,#fffbeb,#fff);
border:1.5px solid #fde68a}
.qui-i{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
background:linear-gradient(160deg,#f59e0b,#b45309);color:#fff;
box-shadow:0 8px 18px -8px rgba(180,83,9,.8)}
.qui-c{flex:1;min-width:0}
.qui-c>b{display:block;font-size:15px;color:#92400e;font-weight:800;margin-bottom:5px}
.qui-c p{font-size:13px;color:#92400e;line-height:1.6;margin:0 0 8px}
.qui-c p:last-child{margin-bottom:0}
.qui-c b{color:#7c2d12}
/* La porte de sortie est en BLANC : elle doit se detacher de l'avertissement,
parce que c'est elle qui compte quand ca brule vraiment. */
.qui-mais{background:#fff;border:1px solid #fde68a;border-radius:var(--r-sm);
padding:9px 12px;margin-top:9px !important}
/* ===== LE BLOC « UTILISER MA POSITION » =====
LE BUG QU'ON CORRIGE : `.aide-champ` porte une marge HAUTE NEGATIVE (-11px).
Elle est faite pour venir se coller sous un `.inp`, qui a lui-meme 16px de
marge basse : les deux se compensent, et l'aide vient juste sous le champ.
Mais apres le bouton de geolocalisation, cette marge basse n'existe pas. La
marge negative n'avait donc rien a compenser, et le texte remontait
PAR-DESSUS le bouton -- sur TOUS les formulaires qui demandent la position.
La correction est ici, dans le composant, et pas repetee dans les six pages
qui l'utilisent : le bloc gere ses propres marges, et neutralise la marge
negative a l'interieur. Un seul endroit ou se tromper. */
.geoloc-bloc{margin:0 0 18px}
.geoloc-bloc .geoloc{margin-bottom:0}
.geoloc-bloc .aide-champ{margin:8px 0 0} /* la marge negative est annulee ici */
/* ============================================================================
« VOUS FAITES PARTIE DE LA COMMUNAUTE » — l'ecran d'apres l'inscription.
Cette personne vient de confier son numero de telephone pour des chevaux qui
ne sont pas les siens. Cet ecran doit faire deux choses, et rien d'autre :
lui montrer ce qu'on a retenu d'elle, et lui dire ce qui va lui arriver.
REGLE DE NOMMAGE, apprise a nos depens : aucun suffixe utilise comme
MODIFICATEUR (-t pour « transport ») ne doit servir ailleurs de nom
d'ELEMENT. Deux fois, cette collision a decale une carte entiere sans que
rien ne le signale. D'ou « -txt », « -titre », jamais « -t » seul.
============================================================================ */
.bv{max-width:660px;margin:0 auto;text-align:center}
/* --- LE SCEAU. Il se dessine a l'arrivee : cercle, puis coche. C'est le seul
moment de l'application ou l'on celebre quelque chose -- ailleurs, il y a
toujours un cheval en danger, et une animation serait deplacee. --- */
.bv-sceau{width:84px;height:84px;margin:6px auto 22px;border-radius:50%;
display:grid;place-items:center;background:var(--primary-100);
box-shadow:0 0 0 10px rgba(16,144,110,.07)}
.bv-sceau svg{width:52px;height:52px;overflow:visible}
.bv-cercle,.bv-coche{fill:none;stroke:var(--primary-darker);stroke-linecap:round;stroke-linejoin:round}
.bv-cercle{stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;
animation:bv-trace .55s cubic-bezier(.65,0,.35,1) .1s forwards}
.bv-coche{stroke-width:3.4;stroke-dasharray:36;stroke-dashoffset:36;
animation:bv-trace .35s cubic-bezier(.65,0,.35,1) .5s forwards}
@keyframes bv-trace{to{stroke-dashoffset:0}}
/* Celui qui a desactive les animations dans son systeme ne veut PAS d'animation.
On lui montre le sceau, deja dessine. */
@media(prefers-reduced-motion:reduce){
.bv-cercle,.bv-coche{animation:none;stroke-dashoffset:0}
}
.bv-titre{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.15;
letter-spacing:-1px;margin:0 0 14px;color:var(--text)}
.bv-sous{font-size:16px;line-height:1.65;color:var(--text-soft);margin:0 auto 30px;max-width:520px}
.bv-sous b{color:var(--text);font-weight:650}
/* --- LA CARTE DE MEMBRE. Elle repond a la seule question qu'on se pose apres
avoir donne son numero : « qu'est-ce qu'ils ont, exactement, sur moi ? » --- */
.bv-carte{text-align:left;background:#fff;border:1px solid var(--line);
border-radius:var(--r-xl);overflow:hidden;margin:0 0 34px;
box-shadow:0 12px 30px -18px rgba(16,40,34,.16)}
.bv-carte-h{display:flex;align-items:center;gap:14px;padding:18px 20px;
background:var(--primary-50);border-bottom:1px solid var(--line)}
/* L'initiale, pas une photo : on ne demande pas de photo, et un rond vide serait triste. */
.bv-ini{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--primary);color:#fff;font-family:var(--font-display);font-weight:600;font-size:21px}
.bv-qui{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bv-qui b{font-size:16.5px;font-weight:650;color:var(--text)}
.bv-qui small{font-size:13px;color:var(--text-soft)}
.bv-actif{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
padding:5px 11px;border-radius:999px;background:#fff;color:var(--primary-darker);
border:1px solid var(--primary-200)}
.bv-cap{padding:18px 20px 20px}
.bv-cap-t{display:block;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:var(--muted);margin:0 0 11px}
.bv-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bv-tag{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
background:var(--primary-50);color:var(--primary-darker);border:1px solid var(--primary-200);
font-size:13.5px;font-weight:600}
.bv-tag svg{flex:0 0 auto;opacity:.75}
.bv-cap-n{margin:13px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.bv-cap-n b{color:var(--text-soft);font-weight:650}
/* --- LA CHRONOLOGIE. Une liste numerotee, reliee par un trait : ces quatre
points s'enchainent DANS LE TEMPS, et le trait le dit sans un mot de plus.
Une simple liste a puces les aurait presentes comme quatre faits sans ordre. --- */
.bv-h2{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.3px;
text-align:left;margin:0 0 20px;color:var(--text)}
.bv-suite{list-style:none;counter-reset:bv;margin:0 0 32px;padding:0;text-align:left;position:relative}
.bv-suite li{counter-increment:bv;position:relative;padding:0 0 22px 46px;
font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.bv-suite li:last-child{padding-bottom:0}
.bv-suite li b{color:var(--text);font-weight:650}
/* La pastille numerotee. */
.bv-suite li::before{content:counter(bv);position:absolute;left:0;top:-1px;
width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
background:#fff;border:1.5px solid var(--primary-200);
color:var(--primary-darker);font-size:13px;font-weight:700}
/* Le trait qui relie une pastille a la suivante. Pas sous la derniere : un fil
qui pend dans le vide donne l'impression qu'il manque une etape. */
.bv-suite li::after{content:"";position:absolute;left:14px;top:31px;bottom:6px;width:1.5px;
background:var(--primary-200)}
.bv-suite li:last-child::after{display:none}
/* « On espère sincèrement ne jamais avoir à vous l'envoyer. »
Elle referme la chronologie, qui vient de promettre un SMS. En italique et
centrée : c'est une parole, pas une consigne de plus. Discrète — si elle
criait, elle sonnerait comme un argument de vente, et ce serait tout perdre. */
.bv-jamais{margin:-14px 0 30px;text-align:center;font-size:14.5px;line-height:1.6;
font-style:italic;color:var(--text-soft)}
.bv-actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.bv-note{display:flex;align-items:flex-start;gap:9px;text-align:left;
padding:14px 16px;border-radius:var(--r);background:var(--surface-2);
font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.bv-note svg{flex:0 0 auto;margin-top:2px;opacity:.6}
@media(max-width:520px){
.bv-titre{font-size:27px}
.bv-sous{font-size:15px}
.bv-sceau{width:72px;height:72px;margin-bottom:18px}
.bv-sceau svg{width:44px;height:44px}
.bv-h2{font-size:19px}
.bv-suite li{padding-left:42px;font-size:14px}
/* Les deux boutons prennent toute la largeur : sur un telephone, deux boutons
cote a cote deviennent deux cibles trop etroites pour un pouce. */
.bv-actions{flex-direction:column}
.bv-actions>*{width:100%}
}
/* ============================================================================
PARTAGER UN INCIDENT. Le même bloc sur la page publique et chez l'organisateur.
Un lien qu'on peut copier ou envoyer d'un clic : c'est ce qui le fait circuler.
============================================================================ */
.partage{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
padding:16px;margin:0 0 16px}
.partage-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.partage-h svg{flex:0 0 auto;margin-top:2px;color:var(--primary-darker)}
.partage-h b{display:block;font-size:15px;font-weight:650;color:var(--ink);line-height:1.3}
.partage-h small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.partage-lien{display:flex;gap:8px}
.partage-lien input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-soft);
font-size:13.5px;font-family:var(--font-body)}
.partage-copie{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
padding:11px 18px;border:0;border-radius:var(--r-sm);
background:var(--primary);color:#fff;font-weight:650;font-size:14px;cursor:pointer;
font-family:var(--font-body);transition:background .15s}
.partage-copie svg{flex:0 0 auto}
.partage-copie:hover{background:var(--primary-dark)}
/* Confirmation « Copié ! » : le vert le plus foncé, pour qu'on VOIE que ça a marché. */
.partage-copie.ok{background:var(--primary-darker)}
/* Le bouton natif : pleine largeur sous le lien, révélé par le JS sur mobile. */
.partage-natif{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
margin-top:9px;padding:12px;border:1px solid var(--primary-200);border-radius:var(--r-sm);
background:var(--primary-50);color:var(--primary-darker);font-weight:650;font-size:14px;
cursor:pointer;font-family:var(--font-body)}
.partage-natif:hover{background:var(--primary-100)}
@media(max-width:520px){
/* Sur un petit écran, « Copier » passe sous le champ : côte à côte, le champ
devient trop étroit pour qu'on lise le lien. */
.partage-lien{flex-direction:column}
.partage-copie{width:100%;justify-content:center}
}
/* ============================================================================
LE BOUTON DE PARTAGE FLOTTANT. Toujours accessible, dans le coin bas-droit,
JUSTE À GAUCHE de l'assistance chatbot : les deux boutons ronds forment une
paire. Blanc à icône verte, pour se distinguer du chatbot (sombre) sans
ajouter un troisième vert plein à côté de la barre communauté.
Sa position verticale SUIT celle du chatbot : quand une barre fixe apparaît en
bas (« Mon espace », barre de réponse), les deux remontent ensemble, du même
nombre de pixels. Sinon l'un flotterait au-dessus de l'autre.
============================================================================ */
.share-fab{position:fixed;z-index:99;right:74px;bottom:18px;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:#fff;color:var(--primary-darker);border:1px solid var(--line);
cursor:pointer;box-shadow:0 12px 26px -10px rgba(14,28,23,.45);transition:.15s}
.share-fab:hover{background:var(--primary-50);transform:translateY(-2px)}
/* Retour visuel de la copie (ordinateur, sans partage natif) : le rond devient vert. */
.share-fab.ok{background:var(--primary);color:#fff;border-color:var(--primary)}
/* Sur ordinateur, le chatbot est une pastille AVEC TEXTE (« Un problème ? »),
donc large : on décale le partage plus à gauche pour ne pas le chevaucher.
NEUTRALISÉ le 16/07, en même temps que le chatbot (voir page_fin dans vue.php).
À REMETTRE avec lui : sans cette règle, le partage se retrouverait sous la
pastille du chatbot sur ordinateur. */
/* @media(min-width:641px){ .share-fab{right:176px} } */
/* POSITION HORIZONTALE : voir « LE BOUTON D'INVITATION FLOTTANT », tout en bas de
ce fichier. Le partage se range à gauche de la pastille « Inviter », et les deux
remontent ensemble au-dessus des barres fixes -- c'est écrit là-bas, en un seul
endroit, pour ne pas avoir deux règles qui se contredisent à 200 lignes d'écart. */
/* La barre de réponse (reservation.php) est haute et colle en bas : le partage
passe au-dessus. Le même décalage existe pour .inviter-fab, en bas de fichier. */
body:has(.repbas:not([hidden])) .share-fab{bottom:154px}
/* ============================================================================
LA ZONE DE DÉPÔT DE FICHIER (import). Belle, et surtout claire : on voit
d'un coup qu'on peut y glisser un fichier, et ce qui est accepté.
Le vrai est retiré visuellement mais reste dans le flux
pour le clavier et les lecteurs d'écran. C'est le