/* Accueil conso, version de lancement (index V2) : ce qui s'ajoute à
   styles.css, landing.css et index.css, chargé après eux. Deux blocs : le
   hero qui fait télécharger l'app, et la carte des communes (#communes), qui
   dit où l'app fonctionne déjà et recueille les demandes d'ailleurs.
   Règles de la CSP du site tenues : aucun style en ligne, la carte est un SVG
   écrit dans la page par SiteWeb/tools/carte-communes/carte_communes.py, animé ici. */

/* ---------- hero : badges des stores, code QR sur ordinateur ---------- */
.hero__get{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap}
/* Le code QR ne sert qu'à qui lit la page sur un ordinateur : il mène à
   bonispot.com/a/site, qui envoie chaque téléphone vers son store. */
.hero__qr{display:none;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.hero__qr img{display:block;width:76px;height:76px}
.hero__qr p{font:600 12.5px/1.4 var(--sora);color:var(--ink-2);margin:0;max-width:10em}
@media (min-width:1024px) and (hover:hover){.hero__qr{display:flex}}
.hero__where{font:400 14.5px/1.55 var(--sora);color:var(--ink-3);margin:0;max-width:540px;text-wrap:pretty}
.hero__where b{color:var(--ink);font-weight:600}
.hero__where a{text-decoration:underline;text-underline-offset:2px}

/* ---------- carte des communes : un seul bloc sombre (carte, communes,
   formulaire), pour que l'onde orange y ressorte ---------- */
.cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"head map" "status map" "ask map";gap:26px 56px;align-items:start;overflow:hidden;padding:clamp(28px,4.5vw,52px) clamp(20px,4vw,48px)}
.cov__head{grid-area:head;display:flex;flex-direction:column;gap:12px;min-width:0}
.cov__status{grid-area:status;display:flex;flex-direction:column;gap:18px;min-width:0}
.cov__map{grid-area:map;align-self:center;margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.cov__ask{grid-area:ask;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);min-width:0}
@media (max-width:860px){
  .cov{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "status" "ask"}
  .cov__map{width:100%;max-width:440px;justify-self:center}
}

.cov .eyebrow{color:#F49A68}
.cov .h2{font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.cov .h2 em{font-style:normal;color:#FF7A33}
/* « commune par commune » d'un seul tenant : coupé, « commune » restait seul
   sur sa ligne. À partir de 360 px seulement, où il tient en 24 px dans la
   colonne ; plus étroit, il se coupe plutôt que de déborder du bloc. */
@media (min-width:360px){.cov .h2 em{white-space:nowrap}}.cov__lead{font:400 16px/1.6 var(--sora);color:rgba(255,255,255,.68);margin:0;max-width:52ch;text-wrap:pretty}

.cov__counts{display:flex;gap:28px;flex-wrap:wrap}
.cov__count{display:flex;flex-direction:column;gap:4px;margin:0}
.cov__n{font:600 34px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cov__n--live{color:#FF7A33}
.cov__n--soon{color:#B8AEA4}
.cov__l{font:400 13px/1.3 var(--sora);color:rgba(255,255,255,.6)}
.cov__groups{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.cov__group{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px}
.cov__mark{display:block;grid-row:span 2}
.cov__gtitle{font:700 15px/1.3 var(--sora);letter-spacing:-.01em;margin:0}
.cov__gtitle span{font-weight:400;color:rgba(255,255,255,.58)}
.cov__names{font:400 14px/1.55 var(--sora);color:rgba(255,255,255,.86);margin:0}

.cov__ask-title{font:700 19px/1.3 var(--sora);letter-spacing:-.02em;margin:0}
.cov__ask-lead{font:400 14px/1.6 var(--sora);color:rgba(255,255,255,.66);margin:0;text-wrap:pretty}

/* ---------- dessin de la carte ---------- */
.cov__svg{display:block;width:100%;height:auto;overflow:visible}
.cov__credit{font:400 11px/1.4 var(--sora);color:rgba(255,255,255,.4);text-align:right}
.cov-c{fill:#28221E;stroke:#3B332D;stroke-width:2.4;stroke-linejoin:round}
.cov-c.is-live{fill:#4D2412;stroke:#7E3816}
.cov-c.is-soon{fill:url(#cov-hatch);stroke:#463D36}
.cov-sambre{fill:none;stroke:#33414C;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.cov-sambre-label{font:italic 400 22px var(--sora);letter-spacing:.06em;fill:#5B7385;text-anchor:middle}
.cov-lbl{text-anchor:middle;paint-order:stroke;stroke-linejoin:round}
.cov-lbl--empty{font:400 25px var(--sora);letter-spacing:-.01em;fill:#7A7068;stroke:#28221E;stroke-width:6}
.cov-lbl--soon{font:600 28px var(--sora);letter-spacing:-.015em;fill:#D6CDC3;stroke:#2B2521;stroke-width:7}
.cov-lbl--live{font:700 32px var(--sora);letter-spacing:-.02em;fill:#FFE6D6;stroke:#4D2412;stroke-width:7}
/* Sur téléphone, seules les communes ouvertes ou annoncées gardent leur nom
   (les quinze se chevaucheraient) ; les listes donnent les noms complets. */
@media (max-width:560px){.cov-lbl--empty{display:none}}
.cov-halo{fill:#FF6A1A;opacity:.28}
.cov-dot--live{fill:#FF6A1A;stroke:#1C1714;stroke-width:5}
.cov-dot--soon{fill:#8F857C}
.cov-ring{fill:none;stroke:#7C736A;stroke-width:3;stroke-dasharray:7 7}

/* ---------- ondes ----------
   Le mouvement fait la légende : une onde orange vive en trait plein sur les
   communes ouvertes, une onde grise, lente et en pointillés, sur celles qui
   arrivent. Une seule onde par commune et par cycle, les communes ouvertes se
   relayant d'ouest en est. Un cercle à son rayon final, réduit puis agrandi
   par transform ; trait constant grâce à vector-effect. Rythme (durées,
   images clés, décalages) écrit plus bas par
   SiteWeb/tools/carte-communes/carte_communes.py, seule source des réglages. */
.cov-wave{fill:none;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}
.cov-wave--live{stroke:#FF7A33;stroke-width:2.6;fill:#FF6A1A;fill-opacity:.08}
.cov-wave--soon{stroke:#8F857C;stroke-width:2;stroke-dasharray:6 8}
.cov-wave--still{display:none}

/* carte-communes:animation:debut */
@keyframes cov-live{0%{transform:scale(.08);opacity:.85;animation-timing-function:cubic-bezier(.2,.6,.35,1)}62.5%{transform:scale(.85);opacity:0}100%{transform:scale(.85);opacity:0}}
@keyframes cov-soon{0%{transform:scale(.2);opacity:.6;animation-timing-function:cubic-bezier(.2,.6,.35,1)}35%{transform:scale(.9);opacity:0}100%{transform:scale(.9);opacity:0}}
.cov-wave--live{animation:cov-live 4s linear infinite}
.cov-wave--soon{animation:cov-soon 9s linear infinite}
.cov-wave--l0{animation-delay:0.00s}
.cov-wave--l1{animation-delay:1.33s}
.cov-wave--l2{animation-delay:2.67s}
.cov-wave--s0{animation-delay:0.00s}
.cov-wave--s1{animation-delay:2.20s}
/* carte-communes:animation:fin */

/* Après la zone écrite par le script, pour l'emporter sur son raccourci
   `animation`. Pause quand la carte sort de l'écran (js/carte-communes.js). */
.cov__map.is-paused .cov-wave{animation-play-state:paused}
/* Animations réduites : deux cercles fixes autour de chaque commune ouverte,
   rien autour des autres. La carte figée dit tout. */
@media (prefers-reduced-motion:reduce){
  .cov-wave{animation:none}
  .cov-wave--live{transform:scale(.4);opacity:.5}
  .cov-wave--still{display:inline;transform:scale(.72);opacity:.2}
  .cov-wave--soon{display:none}
}