/* Page d'accueil conso (index.html), ce qui lui est propre. Se charge APRÈS
   styles.css (tokens conso, barre du haut, pied de page, image et
   formulaire du hero, boutons, champs, frise des villes, carte sombre,
   bandeau pro) et landing.css (hero en deux colonnes, chiffres, maquette,
   sections, étapes, avantages, catégories, FAQ, communs avec pro.html). */

.hero__copy .h1{max-width:11em;text-wrap:balance}

/* ---------- maquette : écran Carte de l'app conso ---------- */
.cs__bar{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--mono);color:var(--ink);padding:16px 20px 0}
.cs__bar b{display:inline-block;width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;opacity:.8}
.cs__bar b::after{content:'';position:absolute;left:2px;top:2px;bottom:2px;width:14px;background:var(--ink);border-radius:1px}

/* carte générique en SVG (rues, parcs, rivière, aux couleurs du style de
   l'app), pins de catégorie des assets de l'app (assets/img/pins), jamais
   une vraie ville */
.cm{display:flex;flex-direction:column;height:100%;font-family:var(--sora);color:var(--ink)}
.cm__top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 10px 10px}
.cm__count{font:700 10.5px/1.2 var(--sora);margin:0;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cm__count b{color:var(--accent-on)}
.cm__filter{display:inline-flex;align-items:center;gap:4px;background:var(--inverse);color:#fff;font:700 10px/1 var(--sora);padding:6px 8px;border-radius:10px;flex:none}
.cm__filter svg{width:13px;height:13px}
.cm__map{position:relative;flex:1;min-height:0;overflow:hidden;background:#F2EAE4}
.cm__svg{position:absolute;inset:0;width:100%;height:100%}
.cm__locate{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:17px;background:#fff;display:grid;place-items:center;color:var(--accent);box-shadow:0 2px 8px rgba(25,21,18,.15)}
.cm__locate svg{width:18px;height:18px}
.cm__seg{position:absolute;left:12px;right:12px;bottom:12px;display:flex;background:var(--inverse);border-radius:999px;padding:4px;gap:2px;box-shadow:0 6px 18px rgba(25,21,18,.2)}
.cm__seg span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:700 11px/1 var(--sora);color:rgba(255,255,255,.82);padding:9px 4px;border-radius:999px;white-space:nowrap}
.cm__seg span svg{width:12px;height:12px}
.cm__seg span.is-on{background:#fff;color:var(--ink)}
.cm__tabs{display:flex;justify-content:space-around;align-items:flex-end;padding:8px 10px 14px;background:var(--page);border-top:1px solid var(--line)}
.cm__tab{display:flex;flex-direction:column;align-items:center;gap:4px;font:400 10px/1 var(--sora);color:var(--ink-3);min-width:60px}
.cm__tab svg{width:20px;height:20px}
.cm__tab--mark img{width:40px;height:40px;display:block}

/* carte « ton code » (`.mock__card`, landing.css) : l'écran du code présenté
   en caisse, langage « coupon sombre » de l'app conso */
.code__brand{font:600 10px/1 var(--sora);letter-spacing:.14em;text-transform:uppercase;color:#F3B48E;margin:0}
.code__row{display:flex;align-items:center;gap:14px}
.code__qr{width:58px;height:58px;flex:none;background:#fff;border-radius:10px;padding:6px}
.code__value{font:600 19px/1 var(--mono);letter-spacing:.08em;margin:0}
.code__timer{font:400 12px/1.3 var(--sora);color:rgba(255,255,255,.65);margin:5px 0 0}
.code__timer b{font:600 13px/1 var(--mono);color:#fff}
.code__deal{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font:600 12.5px/1.35 var(--sora);margin:0}
.code__deal small{display:block;font:400 11px/1.3 var(--sora);color:rgba(255,255,255,.6);margin-top:3px}
.code__hint{font:400 11.5px/1.4 var(--sora);color:rgba(255,255,255,.6);margin:0}

@media (max-width:860px){.phone__screen{height:470px}}

/* ---------- villes : frise à gauche, carte sombre avec formulaire à droite ---------- */
.cities{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px 64px;align-items:start}
.cities__copy{display:flex;flex-direction:column;gap:14px}
.cities__copy .timeline{margin-top:10px}
.cities__copy .h2{text-wrap:balance}
.cities .card-dark{display:flex;flex-direction:column;gap:18px;padding:clamp(26px,4vw,36px)}
.cities .card-dark .h2{font-size:clamp(22px,2.6vw,26px)}
.cities .card-dark__lead{font-size:14.5px;line-height:1.6}
@media (max-width:860px){.cities{grid-template-columns:1fr}}

/* bandeau pro : même carte que styles.css, un peu plus d'air avant le pied de page */
.pro-section{padding-top:8px;padding-bottom:56px}