/* =====================================================================
   URGENCE ENTRAIDE INCENDIE — direction artistique (révision du 27/07)
   Refonte lisibilité : palette orange (#EA580C, demander/cherche) /
   émeraude (#059669, proposer/propose) / gris neutre, une seule police
   système sans-serif partout (plus de monospace), coins plus généreux,
   cibles tactiles ≥44px, disposition 2 colonnes au-delà de 1024px.
===================================================================== */

html {
  -webkit-tap-highlight-color: transparent;
}

/* =====================================================================
   FILET DE SÉCURITÉ — indépendant du CDN Tailwind
   tailwind-built.css est en réalité un CSS statique précompilé (plus de
   dépendance CDN du tout), mais ces règles restent en filet de sécurité
   local pour les mécanismes critiques (affichage/masquage des modales).
===================================================================== */
.hidden { display: none !important; }

#modal-backdrop:not(.hidden),
#share-modal-backdrop:not(.hidden) {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,24,39,0.6);
}
#toast:not(.hidden) {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 1000; background: #111827; color: #fff;
  padding: 0.6rem 1rem; border-radius: 12px;
}
#f-commune-suggestions:not(.hidden) {
  position: absolute; z-index: 500; left: 0; right: 0;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
}
header { position: sticky; top: 0; z-index: 100; }

/* ---- Motif signature : rayures de danger (bandeau d'urgence) ---- */
.hazard-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    #EA580C 0px, #EA580C 8px,
    #111827 8px, #111827 16px
  );
}

/* ---- Filtres / facettes : puces en ligne, jamais tronquées ---- */
.filter-btn {
  background: #fff;
  border: 1px solid #E5E7EB;
  color: #374151;
}
.filter-btn[data-active="true"] {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.facet-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(17,24,39,0.08);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}
.filter-btn[data-active="true"] .facet-count {
  background: rgba(255,255,255,0.2);
}

/* ---- Radio custom "type" dans le formulaire ---- */
.type-radio-label {
  border-color: #E5E7EB;
  color: #374151;
  background: #fff;
}
.type-radio-label:has(input:checked) {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

/* ---- Bascule Fil / Carte ---- */
.view-toggle-btn {
  background: #fff;
  color: #374151;
}
.view-toggle-btn[data-active="true"] {
  background: #111827;
  color: #fff;
}

/* ---- Badges de statut ---- */
.statut-badge--ouvert  { background: #ECFDF5; color: #059669; }
.statut-badge--pause   { background: #FBEED3; color: #C48A25; }
.statut-badge--pourvu  { background: #F3F4F6; color: #6B7280; }
.card-annonce--inactive { opacity: 0.6; }

/* ---- Boutons de changement de statut ---- */
.statut-btn {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid #E5E7EB; background: #fff; color: #374151;
  min-height: 28px;
}
.statut-btn[data-active="true"] {
  background: #111827; border-color: #111827; color: #fff;
}

/* ---- Carte Leaflet ---- */
#map-container { width: 100%; z-index: 0; }
.leaflet-popup-content { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; }

/* ---- Bandeau de remerciement aux forces engagées : carte légère,
   une seule ligne de pastilles qui défile ---- */
.forces {
  background: #fff; border: 1px solid #F3F4F6; border-radius: 18px;
  padding: 18px 0 16px; box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.forces__head { display: flex; align-items: center; gap: 11px; padding: 0 20px 14px; }
.forces__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #111827; }
.forces__sub { font-size: 13px; color: #6B7280; }

.fmarq { position: relative; overflow: hidden; }
.fmarq::before, .fmarq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.fmarq::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.fmarq::after  { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.fmarq__track {
  display: inline-flex; gap: 8px; white-space: nowrap;
  animation: fscroll 38s linear infinite; will-change: transform; padding: 0 20px;
}
.fmarq:hover .fmarq__track { animation-play-state: paused; }
@keyframes fscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fmarq__track { animation: none; } }

.forces__pill {
  display: inline-flex; align-items: center; background: #F3F4F6; border: 1px solid #E5E7EB;
  border-radius: 999px; padding: 6px 13px; font-size: 13.5px; color: #374151; white-space: nowrap; flex-shrink: 0;
}

.badge-info {
  background: #DC2626; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; flex-shrink: 0;
}
/* ---- Mur de messages : masonry organique, texte en serif italique ---- */
.soutien-wall {
  column-count: 1; column-gap: 18px;
}
@media (min-width: 600px) { .soutien-wall { column-count: 2; } }
@media (min-width: 900px) { .soutien-wall { column-count: 3; } }
.soutien-card {
  background: #fff; border: 1px solid #F3F4F6; border-radius: 18px;
  padding: 22px; color: #1F2937;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
  break-inside: avoid; width: 100%; display: inline-block; margin-bottom: 18px;
}
.soutien-card p {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  line-height: 1.5; margin: 0;
}
.soutien-footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.soutien-avatar {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.soutien-who { flex: 1; min-width: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.soutien-name { font-size: 13.5px; font-weight: 700; color: #374151; }
.soutien-lieu { font-size: 12px; color: #9CA3AF; }
.soutien-like {
  min-height: 34px; border-radius: 999px; border: 1px solid #E5E7EB; background: #F9FAFB;
  font-size: 13px; font-weight: 700; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px;
  color: #6B7280; flex-shrink: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.soutien-like[data-liked="true"] { background: #FFF7ED; border-color: #FED7AA; color: #EA580C; }

/* ---- Facettes : puces avec fond gris clair, jamais tronquées ---- */
.facet-row {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px; min-height: 40px;
  font-size: 13.5px; font-weight: 600; color: #374151;
  background: #F3F4F6; border: 1px solid transparent;
}
.facet-row:hover { background: #E5E7EB; }
.facet-row[data-active="true"] {
  background: #111827; color: #fff; border-color: #111827;
}
.facet-row .facet-count {
  font-size: 11px; opacity: 0.75;
}

/* ---- Panneau Catégorie/Zone : les facet-row s'empilent en liste (au lieu
   de se répéter en pastilles côte à côte), utilisées dans le dropdown
   desktop et le tiroir mobile ---- */
#facet-cat .facet-row, #facet-zone .facet-row {
  width: 100%; justify-content: space-between; border-radius: 10px;
  background: transparent; padding: 9px 10px; min-height: 40px;
}
#facet-cat .facet-row:hover, #facet-zone .facet-row:hover { background: #F3F4F6; }
#facet-cat .facet-row[data-active="true"], #facet-zone .facet-row[data-active="true"] {
  background: #111827; color: #fff;
}

/* ---- Segment Tout / Cherche / Propose ---- */
#facet-type {
  display: inline-flex; background: #F3F4F6; border-radius: 12px; padding: 3px; gap: 2px;
}
#facet-type .facet-row {
  background: transparent; border-radius: 9px; padding: 8px 12px; min-height: 38px; color: #4B5563;
}
#facet-type .facet-row[data-active="true"] {
  background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(17,24,39,.08);
}
#facet-type .facet-row .facet-count { opacity: 0.6; }

/* ---- Boutons déclencheurs (Catégorie ▾ / Zone ▾ / Autour de moi / Filtres) ---- */
.filter-dd-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid #E5E7EB;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #374151;
}
.filter-dd-btn:hover { background: #F9FAFB; }
.filter-dd-btn--dashed { border-style: dashed; }
.filter-dd-btn[data-active="true"] { background: #111827; color: #fff; border-color: #111827; }
.filter-dd-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  background: #EA580C; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; padding: 0 4px;
}

/* ---- Interrupteur "Masquer clôturées/en pause" ---- */
.toggle-switch-wrap { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-switch-track {
  position: absolute; inset: 0; background: #D1D5DB; border-radius: 999px; transition: background .15s;
}
.toggle-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#chk-hide-resolved:checked + .toggle-switch-track,
#chk-hide-resolved-mobile:checked + .toggle-switch-track { background: #111827; }
#chk-hide-resolved:checked + .toggle-switch-track::after,
#chk-hide-resolved-mobile:checked + .toggle-switch-track::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .toggle-switch-track, .toggle-switch-track::after { transition: none; }
}

/* ---- Panneau de filtres partagé : overlay + tiroir (mobile) / dropdown (desktop) ---- */
#filters-panel { animation: filtersPanelIn .18s ease-out; }
@keyframes filtersPanelIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 1024px) {
  @keyframes filtersPanelIn { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  #filters-panel { animation: none; }
}

/* ---- Carte "Info officielle" repliable ---- */
#info-toggle { cursor: pointer; background: transparent; border: none; }
#info-body { transition: none; }
#info-card[data-open="false"] #info-body { display: none; }
#info-card[data-open="false"] #info-chevron::after { content: ""; }
.info-chip {
  display: inline-flex; align-items: center; background: #F9FAFB; border: 1px solid #E5E7EB;
  color: #2563EB; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}
.info-chip:hover { background: #F3F4F6; }

/* ---- Suggestions d'adresse (autocomplétion) ---- */
#f-commune-suggestions li:hover {
  background: #F3F4F6;
}

/* ---- Carte annonce : coins généreux + tranche colorée ---- */
.card-annonce {
  border-radius: 18px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-annonce:hover {
  box-shadow: 0 8px 24px rgba(17,24,39,.09);
  transform: translateY(-2px);
}

/* ---- Badges type (CHERCHE / PROPOSE) : fond clair + texte coloré ---- */
.badge-cherche { background: #FFF7ED; color: #EA580C; border: 1px solid #FED7AA; }
.badge-propose { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }

/* ---- Case à cocher : zone tactile agrandie (≥44px) ---- */
.tap-target-checkbox {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px;
}
.tap-target-checkbox input[type="checkbox"] { width: 20px; height: 20px; }

/* ---- Apparition légère des cartes ---- */
.card-enter {
  animation: cardIn .25s ease-out both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Respect des préférences de réduction de mouvement ---- */
@media (prefers-reduced-motion: reduce) {
  .card-enter { animation: none; }
  .animate-pulse { animation: none; }
}

/* =====================================================================
   ANIMATION DE VALIDATION — logo "braise vivante" + confirmation
   plein écran, jouée à chaque publication d'annonce réussie.
===================================================================== */
.uei-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.uei-glow  { transform-box: fill-box; transform-origin: 50% 50%; }
.uei-ember { transform-box: fill-box; transform-origin: 50% 50%; }

.uei-anim .uei-flame { animation: ueiFlameIn .6s cubic-bezier(.34,1.4,.5,1) both,
                                  ueiFlicker 2.4s ease-in-out .7s 2; }
.uei-anim .uei-glow  { animation: ueiGlow 1.1s ease-out both; }
.uei-anim .uei-ember       { animation: ueiEmber 1.6s ease-out both; }
.uei-anim .uei-ember.e2    { animation-delay: .18s; }
.uei-anim .uei-ember.e3    { animation-delay: .36s; }

@keyframes ueiFlameIn { 0%{transform:scale(.55);opacity:0} 55%{transform:scale(1.09);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes ueiGlow    { 0%{transform:scale(.5);opacity:0} 25%{opacity:.55} 100%{transform:scale(1.75);opacity:0} }
@keyframes ueiEmber   { 0%{transform:translateY(2px) scale(1);opacity:0} 25%{opacity:.9} 100%{transform:translateY(-18px) scale(.3);opacity:0} }
@keyframes ueiFlicker { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02,1.05)} }
@keyframes ueiFade    { from{opacity:0} to{opacity:1} }
@keyframes ueiCardIn  { 0%{transform:scale(.8) translateY(8px);opacity:0} 55%{transform:scale(1.04) translateY(0);opacity:1} 100%{transform:scale(1) translateY(0);opacity:1} }

.uei-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(17,24,39,.32);
  animation: ueiFade .2s ease both; cursor: pointer;
}
.uei-card {
  animation: ueiCardIn .5s cubic-bezier(.34,1.5,.5,1) both;
  background: #fff; border-radius: 22px; padding: 32px 28px; max-width: 340px;
  width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(17,24,39,.28);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .uei-anim .uei-flame, .uei-anim .uei-glow, .uei-anim .uei-ember,
  .uei-overlay, .uei-card { animation: none !important; }
}

/* ---- Zone de sécurité iOS (encoche) ---- */
footer {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* =====================================================================
   REFONTE 2026-10 : « bulletin citoyen », clarifié
   Même esprit (cendre, braise = besoin, vert = offre, rayure de danger),
   moins de bruit, un seul jeu d'icônes, contrastes AA, polices système
   (aucune police à télécharger : le site doit rester rapide sur un réseau
   dégradé pendant une évacuation).
===================================================================== */
:root{
  --paper:#F5F4F0; --card:#FFFFFF; --ink:#1C1917; --ink-2:#44403C; --ink-3:#66605A; --line:#E4E1DA; --line-2:#D3CEC4;
  --need:#B93A0B; --need-600:#94300A; --need-50:#FDEFE6; --need-100:#F8D9C6;
  --give:#1F6B45; --give-600:#175536; --give-50:#E8F3EC; --give-100:#C9E3D3;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px; --ease:cubic-bezier(.2,.8,.2,1);
}
body.uei{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.uei ::selection{background:var(--need-100);color:var(--ink)}
:where(.uei) :focus-visible{outline:3px solid #2563EB;outline-offset:2px;border-radius:6px}
:where(.uei) a{color:inherit}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Bandeau danger */
.dz{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.dz__in{max-width:1160px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;line-height:1.35;text-align:center}
.dz .ic{color:#FB923C;width:17px;height:17px}
.dz a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:#FB923C;text-decoration-thickness:2px;text-underline-offset:3px}
.dz__stripe{height:5px}
@media (max-width:560px){.dz__off{display:none}}

/* Notices */
.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;font-size:14px;line-height:1.45}
.notice--warn{background:#FEF3C7;color:#422006}
.notice--ok{background:var(--give-50);color:var(--give-600);border:1px solid var(--give-100);border-radius:12px;font-weight:600;margin-bottom:16px}
.notice__txt{flex:1}
.notice__x{border:0;background:none;font-size:22px;line-height:1;color:inherit;opacity:.6;cursor:pointer;padding:0 4px}

/* Mise en page */
.shell{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:20px 16px 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.shell{grid-template-columns:330px minmax(0,1fr);gap:44px;align-items:start;padding-top:32px}.side{position:sticky;top:64px}}

/* Identité */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;width:fit-content}
.brand__logo{flex:none}
.brand__txt{display:grid;line-height:1.15}
.brand__name{font-size:20px;font-weight:800;letter-spacing:-.01em}
.brand__tag{font-size:13px;color:var(--ink-3);margin-top:2px}
.crise{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.crise__dot{width:8px;height:8px;border-radius:50%;background:var(--need)}
.crise[data-actif="false"] .crise__dot{background:var(--ink-3)}

/* Les deux actions */
.acts{display:grid;gap:10px;margin-top:18px}
.act{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px;border:0;border-radius:var(--r);color:#fff;text-align:left;cursor:pointer;font:inherit;transition:background .15s,transform .1s}
.act:active{transform:scale(.99)}
.act--need{background:var(--need)}
.act--need:hover{background:var(--need-600)}
.act--give{background:var(--give)}
.act--give:hover{background:var(--give-600)}
.act__ic{width:40px;height:40px;padding:9px;border-radius:50%;background:rgba(255,255,255,.16);stroke-width:2}
.act__txt{display:grid;gap:2px}
.act__t{font-size:17.5px;font-weight:750;letter-spacing:-.01em}
.act__s{font-size:13.5px;opacity:.88}
@media (min-width:560px) and (max-width:1023px){.acts{grid-template-columns:1fr 1fr}}

.stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:14.5px;color:var(--ink-2)}
.stats b{font-size:17px;font-weight:800}
.stats .s-give b{color:var(--give)}
.stats .s-need b{color:var(--need)}
.sync{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}
.sync::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.sync[data-state="online"]::before{background:#16A34A}
.sync[data-state="connecting"]::before{background:#CA8A04}
.sync[data-state="error"]::before{background:#EA580C}

/* Infos officielles */
.info{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.info__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;padding:14px 16px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.info__k{font-size:12.5px;font-weight:700;color:var(--give)}
.info__k span{font-weight:500;color:var(--ink-3)}
.info__t{font-size:15px;font-weight:650;line-height:1.3;grid-column:1}
.info__chev{grid-column:2;grid-row:1/3;align-self:center;color:var(--ink-3);transition:transform .2s var(--ease)}
#info-card[data-open="true"] .info__chev{transform:rotate(180deg)}
#info-card[data-open="false"] #info-chevron::after{content:none}
.info__body{padding:0 16px 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.info__links{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.info__links li{border-bottom:1px solid var(--line)}
.info__links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-weight:600;color:var(--ink);text-decoration:none;min-height:44px}
.info__links a:hover{color:var(--give)}
.info__links .ic{width:15px;height:15px;color:var(--ink-3)}
.info__note{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}

/* Fil : recherche, filtres */
.feed-h{margin:0 0 14px;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.tools{display:flex;gap:8px}
.search{flex:1;position:relative;display:block}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.search input{width:100%;height:50px;padding:0 14px 0 44px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:inherit;font-size:16px;color:var(--ink)}
.search input::placeholder{color:#8A847D}
.search input:focus,.sort:focus,.fsearch:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,25,23,.12)}
.sort{height:50px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:inherit;font-size:14px;font-weight:600;color:var(--ink-2)}
.filters{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
#facet-type.segmented{display:inline-flex;gap:2px;padding:3px;background:#EAE7E1;border-radius:11px;border:0}
#facet-type .facet-row{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:0;border-radius:9px;background:transparent;font:600 14px var(--font);color:var(--ink-2);cursor:pointer;width:auto;justify-content:center}
#facet-type .facet-row[data-active="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(28,25,23,.14)}
#facet-type .facet-count{font-size:12px;font-weight:700;color:var(--ink-3);background:none;padding:0;min-width:0}
.fbtn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 13px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);font:600 14px var(--font);color:var(--ink-2);cursor:pointer}
.fbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.fbtn .ic{width:16px;height:16px}
.fbtn[aria-expanded="true"],.fbtn[data-active="true"]{border-color:var(--ink);color:var(--ink)}
.fbtn--ghost{border-style:dashed}
.fbadge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700}
.fbadge.hidden{display:none}
.tgl{display:inline-flex;align-items:center;gap:9px;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.tgl--row{justify-content:space-between;margin:0;width:100%;min-height:44px}
.fbtn--mob{display:inline-flex}
#btn-open-filters{margin-left:auto}
.fbtn--desk{display:none}
@media (min-width:1024px){.fbtn--desk{display:inline-flex}.fbtn--mob{display:none!important}}
.toggle-switch-wrap input:checked + .toggle-switch-track{background:var(--give)}

/* Panneau des filtres */
.fpanel{position:fixed;inset:auto 0 0;z-index:50;background:var(--card);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px -12px rgba(28,25,23,.35);padding:12px 16px calc(16px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto}
.fpanel.hidden{display:none}
@media (min-width:1024px){.fpanel{position:absolute;inset:auto;top:calc(100% + 8px);left:0;width:300px;border-radius:14px;box-shadow:0 12px 24px -12px rgba(28,25,23,.3);padding:14px;max-height:70vh;z-index:30}}
.fpanel__x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:8px;background:none;font-size:20px;color:var(--ink-3);cursor:pointer}
.fpanel__grip{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 12px}
.fpanel__head{align-items:center;justify-content:space-between;margin-bottom:8px;display:flex}
.fpanel__head h2{margin:0;font-size:17px;font-weight:750}
@media (min-width:1024px){.fpanel__head{display:none}}
.fpanel__k{margin:12px 0 6px;font-size:13px;font-weight:700;color:var(--ink-3)}
.fpanel__sec{margin-top:10px}
.fpanel__more{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.flist{display:flex;flex-direction:column;gap:2px}
#facet-cat .facet-row,#facet-zone .facet-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:9px;background:none;font:500 14.5px var(--font);color:var(--ink);text-align:left;cursor:pointer}
#facet-cat .facet-row:hover,#facet-zone .facet-row:hover{background:var(--paper)}
#facet-cat .facet-row[data-active="true"],#facet-zone .facet-row[data-active="true"]{background:var(--ink);color:#fff}
#facet-cat .facet-row .facet-count,#facet-zone .facet-row .facet-count{font-size:12.5px;font-weight:700;color:inherit;opacity:.65;background:none}
.facet-row .ic{width:16px;height:16px;margin-right:8px;vertical-align:-3px}
.fsearch{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:15px;margin-bottom:8px}
.fapply{width:100%;min-height:50px;margin-top:16px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:700 15px var(--font);cursor:pointer}
.fover{position:fixed;inset:0;background:rgba(28,25,23,.45);z-index:40}
.fover.hidden{display:none}
@media (min-width:1024px){.fover{display:none!important}}
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--give);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* Barre du fil */
.feed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.feed-count{font-size:14px;font-weight:600;color:var(--ink-3)}
.views{display:inline-flex;gap:2px;padding:3px;background:#EAE7E1;border-radius:11px}
.view-toggle-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:0}
.view-toggle-btn .ic{width:16px;height:16px}
.view-toggle-btn[data-active="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(28,25,23,.14)}
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px;background:var(--card)}
.mapbox.hidden{display:none}
.mapbox__note{margin:0;padding:10px 14px;font-size:13px;color:var(--ink-3)}

/* Annonces */
.main{min-width:0}
.feed{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.card-annonce.ad{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(28,25,23,.04);transition:border-color .15s}
.card-annonce.ad:hover{transform:none;box-shadow:0 1px 2px rgba(28,25,23,.04);border-color:var(--line-2)}
.ad--off{background:#FAF9F7}
.ad--off .ad__desc,.ad--off .ad__where{color:var(--ink-3)}
.ad__top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px}
.ad__type{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:800;letter-spacing:.01em}
.ad--need .ad__type{background:var(--need-50);color:var(--need-600)}
.ad--give .ad__type{background:var(--give-50);color:var(--give-600)}
.ad__cat{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.ad__cat .ic{width:17px;height:17px;color:var(--ink-3)}
.ad__st{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#ECEAE5;color:var(--ink-2);font-size:12px;font-weight:700}
.ad__when{margin-left:auto;font-size:13px;color:var(--ink-3);white-space:nowrap}
.ad__desc{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.ad__where{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;font-size:14.5px;color:var(--ink-2)}
.ad__where .ic{width:17px;height:17px;margin-top:2px;color:var(--ink-3)}
.ad__where strong{font-weight:650;color:var(--ink)}
.ad__acts{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ad__call,.ad__share{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:11px;font-size:15px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s}
.ad__call{flex:1.4;background:var(--ink);color:#fff}
.ad__call:hover{background:#000}
.ad__share{flex:1;border:1px solid var(--line-2);color:var(--ink);background:var(--card)}
.ad__share:hover{border-color:var(--ink-3)}
.ad__icon{display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid var(--line-2);border-radius:11px;background:var(--card);color:var(--ink-2);cursor:pointer}
.ad__icon:hover{color:var(--ink);border-color:var(--ink-3)}
.ad__icon.btn-delete:hover{color:var(--need)}
.ad__mine{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.ad__mine-k{font-size:13px;font-weight:700;color:var(--ink-3);margin-right:4px}
.statut-btn{height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--card);font:600 13px var(--font);color:var(--ink-2);text-transform:none;letter-spacing:0;cursor:pointer}
.statut-btn[data-active="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:420px){.ad{padding:16px}.ad__share span{display:none}.ad__share{flex:none;width:46px;padding:0}}

.empty{text-align:center;padding:48px 16px;background:var(--card);border:1px dashed var(--line-2);border-radius:16px}
.empty.hidden{display:none}
.empty__t{margin:0;font-size:17px;font-weight:750}
.empty__s{margin:6px 0 0;font-size:14.5px;color:var(--ink-3)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.pager.hidden{display:none}
.pager button{min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:11px;background:var(--card);font:600 14px var(--font);color:var(--ink);cursor:pointer}
.pager button:disabled{opacity:.45;cursor:default}
.pager span{font-size:14px;color:var(--ink-3)}

/* Barre d'actions mobile */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(245,244,240,.96);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s var(--ease)}
.mbar.on{transform:none}
.mbar__b{flex:1;min-height:48px;border:0;border-radius:12px;color:#fff;font:750 15px var(--font);cursor:pointer}
.mbar__b--need{background:var(--need)}
.mbar__b--give{background:var(--give)}
@media (max-width:1023px){.mbar{display:flex}}

/* Mur de soutien */
.wall{background:var(--card);border-top:1px solid var(--line)}
.wall__in{max-width:1160px;margin:0 auto;padding:56px 16px 64px}
.wall__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:22px}
.wall__head h2{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em}
.wall__head p{margin:6px 0 0;color:var(--ink-3);font-size:15px;max-width:38em}
.btn-soutien{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:700 15px var(--font);cursor:pointer}
.btn-soutien:hover{background:#000}
.btn-soutien .ic{color:#FB923C}
.wall .forces{border-radius:var(--r);border:1px solid var(--line);background:var(--paper);margin-bottom:28px}
.wall__bar{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.wall__bar h3{margin:0;font-size:16px;font-weight:750}
.wall__count{font-size:13.5px;color:var(--ink-3)}
.wall__empty{text-align:center;color:var(--ink-3);padding:32px 0;font-size:15px}
.wall__empty.hidden{display:none}
.soutien-card{border-radius:14px}

/* Pied de page */
.foot{max-width:1160px;margin:0 auto;padding:28px 16px calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:13.5px;line-height:1.7;color:var(--ink-3)}
@media (max-width:1023px){.foot{padding-bottom:calc(92px + env(safe-area-inset-bottom))}}
.foot a{color:var(--ink-2)}
.foot .linkbtn{color:var(--ink-2);font-weight:500}

/* Fenêtres (formulaires) : mêmes arrondis et couleurs que le reste */
#modal-backdrop>div,#soutien-modal-backdrop>div,#manage-modal-backdrop>div,#share-modal-backdrop>div{border-radius:20px 20px 0 0}
@media (min-width:640px){#modal-backdrop>div,#soutien-modal-backdrop>div,#manage-modal-backdrop>div,#share-modal-backdrop>div{border-radius:18px}}
.type-radio-label{border-color:var(--line-2)!important;color:var(--ink-2)}
.type-radio-label:has(input[value="besoin"]:checked){background:var(--need)!important;border-color:var(--need)!important;color:#fff!important}
.type-radio-label:has(input[value="offre"]:checked){background:var(--give)!important;border-color:var(--give)!important;color:#fff!important}

/* Mobile : onglets + bouton Filtres sur une ligne, tri plus étroit */
@media (max-width:560px){
  #facet-type .facet-row{padding:0 10px;font-size:13.5px}
  .sort{max-width:42%;font-size:13.5px}
  .filters{gap:6px}
}
.ad__call{min-width:0}
.ad__callt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fenêtres : titres et libellés sans capitales forcées */
#modal-backdrop .uppercase,#soutien-modal-backdrop .uppercase,#manage-modal-backdrop .uppercase,#share-modal-backdrop .uppercase{text-transform:none;letter-spacing:0}
#modal-title,#modal-backdrop h3,#soutien-modal-backdrop h3,#manage-modal-backdrop h3,#share-modal-backdrop h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
#annonce-form label.block,#annonce-form span.block,#soutien-form label.block{font-size:14px;font-weight:650;color:var(--ink)}

/* =====================================================================
   POLISH (critique Impeccable) : défauts corrigés en une passe
===================================================================== */
/* La carte Leaflet (z-index 400+) ne passe plus au-dessus des fenêtres */
.mapbox{position:relative;z-index:0;isolation:isolate}

/* Lien d'évitement clavier */
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform .15s}
.skip:focus{transform:none}

/* Anciennes couleurs Tailwind encore présentes dans les fenêtres : ramenées aux couleurs du site */
.uei .bg-urgent{background-color:var(--need)!important}
.uei .hover\:bg-urgent-dark:hover{background-color:var(--need-600)!important}
.uei .bg-solid,.uei .bg-wa{background-color:var(--give)!important}
.uei .hover\:bg-solid-dark:hover,.uei .hover\:bg-wa-dark:hover{background-color:var(--give-600)!important}
.uei .text-urgent{color:var(--need)!important}
.uei .text-gray-400,.uei .text-gray-500{color:var(--ink-3)!important}
.uei .text-gray-600{color:var(--ink-2)!important}
#modal-backdrop button[type=submit],#soutien-modal-backdrop button[type=submit],#manage-modal-backdrop button[type=submit]{text-transform:none!important;letter-spacing:0!important;font-size:16px!important;font-weight:750!important}
/* Le bouton de publication prend la couleur du type choisi */
#annonce-form:has(input[value="offre"]:checked) button[type=submit]{background-color:var(--give)!important}
#btn-close-modal,#btn-close-soutien-modal,#btn-close-manage-modal{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:10px;color:var(--ink-3)!important;font-size:26px}
#btn-close-modal:hover,#btn-close-soutien-modal:hover,#btn-close-manage-modal:hover{background:var(--paper);color:var(--ink)!important}
.okmark{display:grid;place-items:center;width:52px;height:52px;margin:6px auto 10px;border-radius:50%;background:var(--give-50);color:var(--give)}
.okmark .ic{width:26px;height:26px;stroke-width:2.6}
#btn-share-whatsapp-now .ic{width:20px;height:20px}

/* Cibles tactiles de 44 px et contrastes */
#facet-type .facet-row{height:44px}
#facet-type .facet-row .facet-count{opacity:1;color:var(--ink-3)}
#facet-type .facet-row[data-active="true"] .facet-count{color:var(--ink-2)}
.view-toggle-btn{height:44px}
#facet-cat .facet-row,#facet-zone .facet-row{min-height:44px}
.fsearch{height:44px}
#forces-sub{color:var(--ink-3)}

/* Filtres : icône sur la même ligne que le libellé, catégories vides grisées, croix dégagée */
#facet-cat .facet-row>span:first-child,#facet-zone .facet-row>span:first-child{display:inline-flex;align-items:center;gap:9px;min-width:0}
.facet-row .ic{display:inline-block;margin:0;flex:none}
.facet-row:disabled{opacity:.45;cursor:default}
.facet-row:disabled:hover{background:none}
@media (min-width:1024px){.fpanel{padding-top:44px}}
@media (max-width:1023px){.fapply{position:sticky;bottom:0;box-shadow:0 -10px 14px -6px var(--card)}}

/* Annonces : invitation à vérifier, bouton signaler */
.ad__stale{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:8px 10px;border-radius:9px;background:#F4F1EA;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ad__stale .ic{width:16px;height:16px;margin-top:2px;color:var(--ink-3)}
.ad__report:hover{color:var(--need)}
@media (max-width:420px){.ad__acts{gap:6px}.ad__icon{width:44px;height:46px}}

/* Bons réflexes */
.safety{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:11px 14px;border-radius:12px;background:#EFECE5;font-size:14px;line-height:1.5;color:var(--ink-2)}
.safety .ic{width:17px;height:17px;margin-top:2px;color:var(--ink-3)}
.safety strong{color:var(--ink)}

/* Mobile : les deux actions en compact, la première annonce remonte */
@media (max-width:559px){
  .shell{padding-top:14px;gap:22px}
  .brand__logo{width:38px;height:38px}
  .brand__name{font-size:18px}
  .crise{margin-top:12px}
  .acts{grid-template-columns:1fr 1fr;margin-top:14px;gap:8px}
  .act{min-height:60px;padding:10px 12px;gap:10px}
  .act__ic{width:32px;height:32px;padding:7px}
  .act__t{font-size:15px;line-height:1.2}
  .act__s{display:none}
  .stats{margin-top:10px;font-size:14px}
  .info{margin-top:14px}
  .feed-h{font-size:22px;margin-bottom:10px}
}

/* Mur de soutien : voix système, cœur dessiné, aperçu limité */
.soutien-card p{font-family:var(--font)!important;font-style:normal!important;line-height:1.5;color:var(--ink)}
.soutien-lieu{color:var(--ink-3)!important}
.soutien-like{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:10px}
.soutien-like .ic{width:16px;height:16px}
.soutien-like[data-liked="true"]{background:var(--need-50);border-color:var(--need-100);color:var(--need-600)}
.soutien-like[data-liked="true"] .ic{fill:currentColor}
.wall__more{display:block;margin:18px auto 0;min-height:46px;padding:0 20px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:650 15px var(--font);color:var(--ink);cursor:pointer}
.wall__more.hidden{display:none}

/* Pied de page */
.foot__disc{margin:0 auto;max-width:44em}
.foot__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin-top:8px}
.foot__contact{margin:4px 0 0}
.tgl{min-height:44px}
.brand{min-height:44px}
@media (max-width:1023px){
  .fpanel .fapply{display:block!important;text-align:center}
  .fpanel .fpanel__grip{display:block!important}
}

/* =====================================================================
   MODE DÉMONSTRATION
===================================================================== */
.feed-left{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.demo-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:1px dashed var(--line-2);border-radius:11px;background:transparent;font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer}
.demo-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.demo-btn .ic{width:16px;height:16px}
.demo-btn[aria-pressed="true"]{border-style:solid;border-color:#7C5E10;background:#FBF3DC;color:#5C4508}
.demo-btn--empty{margin-top:16px;border-style:solid;background:var(--card)}
.demo-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#FBF3DC;border:1px solid #EBD9A6;color:#4A3906;font-size:14px;line-height:1.45}
.demo-banner.hidden{display:none}
.demo-banner .ic{width:18px;height:18px;color:#7C5E10}
.demo-banner span{flex:1;min-width:200px}
.demo-banner__x{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:#4A3906;color:#fff;font:700 14px var(--font);cursor:pointer}
.ad__demo{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#FBF3DC;color:#5C4508;font-size:12px;font-weight:700}
@media (max-width:420px){.feed-count{font-size:13px}.demo-btn{padding:0 10px}}

/* Vigilances en direct (relais Vigicrues) */
.live{margin:0 0 12px;padding:11px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.live.hidden{display:none}
.live[data-niveau="orange"]{background:#FFF4E5;border-color:#F5C98A}
.live[data-niveau="rouge"]{background:#FDECEC;border-color:#F2B1B1}
.live__h{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.live__dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:#16A34A}
.live__dot--jaune{background:#CA8A04}
.live__dot--orange{background:#EA580C}
.live__dot--rouge{background:#DC2626}
.live__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;font-size:13.5px;color:var(--ink-2)}
.lv{display:inline-block;min-width:54px;margin-right:6px;padding:1px 7px;border-radius:5px;font-size:12px;font-weight:700;text-align:center}
.lv--jaune{background:#FEF3C7;color:#713F12}
.lv--orange{background:#FFEDD5;color:#7C2D12}
.lv--rouge{background:#FEE2E2;color:#7F1D1D}
.live__src{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}
.live__src a{color:var(--ink-2)}

/* =====================================================================
   IDENTITÉ MULTI-RISQUES (oct. 2026) : nom « Urgence Entraide »,
   logo « Relais » (tools/logo.py), palette « Sécurité civile » :
   bleu nuit = confiance, orange signal = besoin, bleu = offre.
===================================================================== */
:root{
  --paper:#F4F6F9; --ink:#0B1B33; --ink-2:#334155; --ink-3:#5B6474; --line:#E1E5EC; --line-2:#CBD2DC;
  --need:#C2410C; --need-600:#9A3412; --need-50:#FFF1E7; --need-100:#FED7AA;
  --give:#1D4E89; --give-600:#173E6D; --give-50:#EAF1FA; --give-100:#C9DAF0;
  --brand:#0B2545;
}
.hazard-stripe{background-image:repeating-linear-gradient(-45deg,#F97316 0 8px,#0B2545 8px 16px)}
.dz{background:var(--brand)}
#facet-type.segmented,.views{background:#E6EAF0}
.info__k{color:var(--give)}
.safety{background:#E9EDF3}
.ad__stale{background:#EEF1F5}
.ad__st{background:#E6EAF0}
.empty{border-color:var(--line-2)}

/* Logo « Relais » : le point s'allume, les ondes se tracent depuis lui, une onde de propagation part.
   Une seule fois (chargement, survol, publication) ; jamais en boucle. */
.uei-overlay-logo{display:block;margin:0 auto 16px}
#header-logo-svg .mk-dot,#header-logo-svg .mk-ring,.uei-overlay-logo .mk-dot,.uei-overlay-logo .mk-ring{transform-box:fill-box;transform-origin:center}
.mk-ring{vector-effect:non-scaling-stroke}
.uei-anim .mk-dot{animation:mk-dot .42s cubic-bezier(.16,1,.3,1) both}
.uei-anim .mk-w1{stroke-dasharray:1;animation:mk-draw .55s cubic-bezier(.16,1,.3,1) .14s both}
.uei-anim .mk-w2{stroke-dasharray:1;animation:mk-draw .62s cubic-bezier(.16,1,.3,1) .3s both}
.uei-anim .mk-ring{animation:mk-ring 1.05s cubic-bezier(.2,.7,.2,1) .62s both}
.uei-overlay-logo.uei-anim .mk-ring{animation-iteration-count:2}
@keyframes mk-dot{from{transform:scale(.35);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes mk-draw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mk-ring{0%{transform:scale(1);opacity:0}6%{opacity:.75}100%{transform:scale(5.4);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .uei-anim .mk-dot,.uei-anim .mk-w1,.uei-anim .mk-w2{animation:mk-fade .3s ease both;stroke-dasharray:none}
  .uei-anim .mk-ring{animation:none}
  @keyframes mk-fade{from{opacity:0}to{opacity:1}}
}
.demo-btn[hidden]{display:none}