/* CarbuGo — pages villes (généré par scripts/generate-villes.mts, ne pas éditer à la main). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/bricolage-grotesque-latin-700-normal-gtcctNPv.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/manrope-latin-400-normal-PaqtzbVb.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/manrope-latin-600-normal-4f0koTD-.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/manrope-latin-700-normal-BZp_XxE4.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/manrope-latin-800-normal-BfWYOv1c.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/montserrat-latin-700-normal-BdjcYUrC.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/montserrat-latin-800-normal-axpkC1rd.woff2') format('woff2');}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* ── Variables de thème — clair par défaut, sombre via prefers-color-scheme (packages/ui/src/theme.ts
   CBG/DK/TZ : « seuls les neutres changent », vert identique dans les deux thèmes). ── */
:root{
  --cbg-page:#F3F6F3;
  --cbg-surface:#FFFFFF;
  --cbg-surface2:#F3F6F3;
  --cbg-line:#E8EDE9;
  --cbg-line2:#DCE4DF;
  --cbg-ink:#0F1F1A;
  --cbg-slate:#56655E;
  --cbg-slate2:#66756D;
  --cbg-focus:#0E9F6E;
  /* Motif « texte/fond vert teinté » (badge « moins chère », overline, pastille stores) — greenDk/
     greenTint côté clair, greenLite/rgba côté sombre (même bascule que StationItem.tsx l.142/163-164). */
  --cbg-accent-text:#0A7A54;
  --cbg-accent-bg:#E7F5EE;
  --cbg-accent-border:#D3EDDF;
  --cbg-accent-shadow:0 6px 18px rgba(14,159,110,0.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --cbg-page:#0E1714;
    --cbg-surface:#15201B;
    --cbg-surface2:#1B2823;
    --cbg-line:#243430;
    --cbg-line2:#2C3E37;
    --cbg-ink:#EAF3EE;
    --cbg-slate:#9DB1A8;
    --cbg-slate2:#6E837B;
    --cbg-focus:#7FE3BD;
    --cbg-accent-text:#7FE3BD;
    --cbg-accent-bg:rgba(14,159,110,0.16);
    --cbg-accent-border:rgba(14,159,110,0.5);
    --cbg-accent-shadow:none;
  }
}

body{
  font-family:'Manrope', system-ui, sans-serif;
  background:var(--cbg-page);
  color:var(--cbg-ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Marge sous 900px : la pill flottante (.cbg-float-cta) est en position fixe et ne doit pas
   recouvrir le pied de page en bas de scroll. */
@media (max-width:899px){ body{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));} }
a{color:inherit;text-decoration:none;}
h1,h2{font-family:'Bricolage Grotesque', system-ui, sans-serif;margin:0;}
ul{list-style:none;margin:0;padding:0;}
p{margin:0;}

/* Anneau de focus clavier global — source : apps/webapp/src/index.css (CBG.green clair / greenLite
   sombre, outline-offset 2px). */
a:focus-visible,button:focus-visible,[role='button']:focus-visible{
  outline:2px solid var(--cbg-focus);
  outline-offset:2px;
}

.cbg-container{max-width:1120px;margin:0 auto;padding:0 20px;}

/* ── Header — sticky translucide (source : LandingScreen.tsx header + landing.css @supports repli). ── */
.cbg-header{
  position:sticky;top:0;z-index:20;
  background:rgba(243,246,243,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cbg-line);
}
@media (prefers-color-scheme: dark){ .cbg-header{background:rgba(14,23,20,0.72);} }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cbg-header{background:#F3F6F3;}
  @media (prefers-color-scheme: dark){ .cbg-header{background:#0E1714;} }
}
.cbg-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;min-height:84px;}

/* Nav header (round « pages éditoriales ») — réplique de la nav landing (LandingScreen.tsx l.128) :
   ancres + liens, poids 600, taille TYPE.body (passe de cohérence UI, 14.5 → 14), couleur slate,
   hover vert (comme .cbg-footer-links a). Masquée sous 640px (le CTA reste seul, comme le motif
   « hidden sm:flex » de la landing). */
.cbg-header-nav{display:flex;align-items:center;gap:24px;}
/* display:inline-flex + height:44 : zone tactile >= 44 (le header a 84px de haut, aucun rendu
   perçu différent — cf. passe de cohérence UI, cibles tactiles). */
.cbg-header-link{display:inline-flex;align-items:center;height:44px;font-weight:600;font-size:14px;color:var(--cbg-slate);}
.cbg-header-link:hover{color:#0E9F6E;}
@media (max-width:639px){ .cbg-header-nav{display:none;} }

/* Lockup logo + wordmark — géométrie de BrandLockup.tsx (logo carré + wordmark accolé, gap 11 comme
   LandingScreen.tsx l.126). */
.cbg-brand{display:inline-flex;align-items:center;gap:11px;}
.cbg-brand-logo{display:block;flex-shrink:0;}
.cbg-brand-sm{gap:7px;}

/* Wordmark « CarbuGo » — source : packages/ui/src/components/Wordmark.tsx (police Montserrat,
   « Carbu » 700, « Go » 800 en dégradé GRADIENTS.logo, letter-spacing -0.5px). Taille 30px alignée
   sur le header de la landing (wordmarkSize 30, cf. LandingScreen.tsx l.126). */
.cbg-wordmark{font-family:'Montserrat', system-ui, sans-serif;font-weight:700;font-size:30px;letter-spacing:-0.5px;color:var(--cbg-ink);}
.cbg-wordmark-sm{font-size:17px;}
.cbg-wordmark-go{
  font-weight:800;background:linear-gradient(135deg, #15a34a, #4366b0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Pilules CTA partagées — géométrie EXACTE de ctaStyle (LandingScreen.tsx : header ET hero de la
   landing partagent le MÊME objet de style). Utilisées par le header, le double CTA du hero, la
   bannière d'engagement (variante .cbg-pill-sm) et la section app. ── */
.cbg-pill-primary{
  height:44px;padding:0 22px;border-radius:100px;
  background:#0A7A54;color:#FFFFFF;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;
  box-shadow:0 8px 18px rgba(14,159,110,0.28);
  white-space:nowrap;
}
.cbg-pill-primary:hover{background:#0E9F6E;}
.cbg-pill-outline{
  height:44px;padding:0 22px;border-radius:100px;
  background:transparent;color:var(--cbg-ink);border:1px solid var(--cbg-line);
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;white-space:nowrap;
}
.cbg-pill-outline:hover{border-color:#0E9F6E;color:var(--cbg-accent-text);}
/* Hauteur 36px (round 3) : seul usage = CTA de la bannière funnel. Padding horizontal 18px NON
   normalisé (passe de cohérence UI) : dérivé proportionnel volontaire de .cbg-pill-primary (22px
   * 36/44 ≈ 18), pas une incohérence. */
.cbg-pill-sm{height:36px;padding:0 18px;font-size:14px;}

/* Pill flottante mobile (< 900px) — même motif que la bascule Liste/Carte (ListScreen.tsx : bas-
   centre, radius 100, ombre marquée, z-index élevé). Pas d'animation d'entrée (demande explicite).
   env(safe-area-inset-bottom, 0px) : inerte aujourd'hui (aucun document généré ne déclare
   viewport-fit=cover, env() vaut 0) ; posé par anticipation, la réserve du body suit le même calc. */
.cbg-float-cta{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
  z-index:1200;box-shadow:0 12px 32px rgba(15,31,26,0.30);
}
@media (min-width:900px){ .cbg-float-cta{display:none;} }

.cbg-main{padding:32px 20px 56px;}

/* ── Hero de page ville — fil d'ariane, overline, H1, sous-titre, double CTA + halo décoratif
   (source : LandingScreen.tsx hero-aurora, rgba identiques clair/sombre). ── */
.cbg-hero{position:relative;padding:4px 0 8px;overflow:hidden;}
.cbg-hero::before{
  content:'';position:absolute;inset:-30px -20px auto -20px;height:320px;pointer-events:none;z-index:0;
  background:
    radial-gradient(480px circle at 18% 15%, rgba(14,159,110,0.10), transparent 62%),
    radial-gradient(420px circle at 88% 5%, rgba(14,159,110,0.07), transparent 60%);
}
.cbg-hero>*{position:relative;z-index:1;}

.cbg-breadcrumb{font-weight:600;font-size:12.5px;color:var(--cbg-slate2);margin-bottom:16px;}
.cbg-breadcrumb-item a{color:var(--cbg-slate2);}
.cbg-breadcrumb-item a:hover{color:#0E9F6E;}
.cbg-breadcrumb-sep{margin:0 6px;}

/* Overline — motif eyebrow des sections landing (ex. FeatureGrid.tsx l.31 « FONCTIONNALITÉS » :
   fontWeight 800, fontSize 12, letterSpacing 1.2, couleur greenTxt). Réutilisé sur le hero, la
   section « Villes voisines » et la section app (round 2, polish demandé). */
.cbg-overline{font-weight:800;font-size:12.5px;letter-spacing:1.2px;color:var(--cbg-accent-text);margin:0 0 10px;}

.cbg-h1{font-size:28px;letter-spacing:-0.6px;line-height:1.1;color:var(--cbg-ink);margin:0 0 10px;}
/* H1 éditorial 32px (maquette « Pages éditoriales ») — pages villes inchangées à 28px. Ces deux
   tailles sont des choix maquette documentés (passe de cohérence UI) : non retouchées. */
.cbg-editorial .cbg-h1,.cbg-hero-editorial .cbg-h1{font-size:32px;}
/* Pages sans sous-titre ni CTA après le H1 (mentions légales) : le H1 est alors le DERNIER enfant
   du hero, sa marge de 10px (pensée pour précéder un sous-titre) devient la seule respiration avant
   le bloc suivant. Alignée sur .cbg-hero-cta (28px) pour la même sortie de hero partout ailleurs. */
.cbg-hero .cbg-h1:last-child{margin-bottom:28px;}
/* Tailles du hero ville (H1 28/32 ci-dessus + sous-titre) : choix de maquette documentés,
   non retouchés dans cette passe. */
.cbg-subtitle{font-size:15.5px;color:var(--cbg-slate);margin:0 0 22px;}

/* Double CTA hero (round 2, retour « pas assez d'engagement ») : primaire plein vers l'app web,
   secondaire contour vers la vitrine mobile /decouvrir. */
.cbg-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}

/* Hero 2 colonnes (round 3) — gauche inchangée, droite >= 900px : panneau « Meilleurs prix »
   (empilé dessous sous 900px, déjà cet ordre en DOM). */
.cbg-hero-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:900px){ .cbg-hero-grid{grid-template-columns:1fr 320px;gap:32px;align-items:start;} }

/* Panneau « Meilleurs prix » (remplace les chips prix mini round 2) — point brut seul coloré, nom
   en ink, station min ellipsée, prix tabular. */
.cbg-priceboard{background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:18px;padding:18px;box-shadow:var(--cbg-accent-shadow);}
.cbg-priceboard-title{font-weight:800;font-size:11.5px;letter-spacing:0.6px;text-transform:uppercase;color:var(--cbg-slate2);margin:0 0 14px;}
.cbg-priceboard-list{display:flex;flex-direction:column;gap:12px;}
.cbg-priceboard-row{display:flex;align-items:center;gap:10px;}
.cbg-priceboard-dot{width:9px;height:9px;border-radius:50%;background:var(--fc-raw);flex-shrink:0;}
/* width porté de 78 à 98px (ajout du code EU, ci-dessous) : la colonne est un flex interne
   nom+badge, budget vérifié sur la combinaison la plus longue (SP95-E10 + badge rond « E10 »). */
.cbg-priceboard-fuel{display:flex;align-items:center;gap:5px;font-weight:700;font-size:13.5px;color:var(--cbg-ink);width:98px;flex-shrink:0;}
.cbg-priceboard-station{font-size:11.5px;color:var(--cbg-slate2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cbg-priceboard-value{display:flex;align-items:baseline;gap:2px;flex-shrink:0;}
.cbg-priceboard-price{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-weight:700;font-size:17px;color:var(--cbg-ink);font-variant-numeric:tabular-nums;}
.cbg-priceboard-unit{font-size:11px;font-weight:600;color:var(--cbg-slate2);}

/* Code EU carburant (EN 16942, tokens.ts FUEL_EU_LABEL) — badge monochrome sur le priceboard
   uniquement (rangées spacieuses) ; les mini-chips prix des cartes stations restent en texte simple
   (densité, cf. VillePage.tsx denseEuSuffix). Cercle/carré : géométrie pure border+border-radius,
   fiable à toute taille de police. Losange (GPLc/LPG) NON tenté en carré pivoté 45° : impossible à
   vérifier visuellement dans cet environnement (génération statique hors navigateur) ; repli texte
   entre parenthèses, choix signalé. */
.cbg-eu-code{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:19px;height:19px;border:1.3px solid var(--cbg-slate2);color:var(--cbg-slate2);
  font-size:7.5px;font-weight:800;line-height:1;letter-spacing:-0.2px;
}
.cbg-eu-code--circle{border-radius:50%;}
.cbg-eu-code--square{border-radius:3px;}
.cbg-eu-code-paren{font-size:11px;font-weight:600;color:var(--cbg-slate2);}

/* Intro data-driven sous le hero (Lot 2, point C, VillePage.tsx) — même typographie que
   .cbg-article-lead (pages éditoriales), marge propre pour respirer avant la liste de stations. */
.cbg-ville-intro{font-size:15px;color:var(--cbg-slate);max-width:760px;line-height:1.6;margin:0 0 32px;}

/* ── Grille de stations — 1 colonne mobile, 2 colonnes >= 900px (plan §2.4). Carte : surface/bordure/
   radius de StationItem.tsx (radius 18, bordure 1px t.line). Hover : légère levée + ombre douce,
   150ms (round 2), désactivée sous prefers-reduced-motion. En-tête (round 3) : grid-column:1/-1,
   même mécanique que .cbg-funnel-banner. ── */
.cbg-stations{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:36px;}
@media (min-width:900px){ .cbg-stations{grid-template-columns:1fr 1fr;} }
.cbg-stations-head{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;}
.cbg-stations-title{font-weight:700;font-size:21px;color:var(--cbg-ink);}
.cbg-stations-sort{font-size:12.5px;color:var(--cbg-slate2);}

/* overflow:visible : le badge « moins chère » déborde le bord haut (round 3). */
.cbg-station-card{
  position:relative;overflow:visible;background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:18px;padding:16px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cbg-station-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,31,26,0.08);}
@media (prefers-reduced-motion: reduce){
  .cbg-station-card{transition:none;}
  .cbg-station-card:hover{transform:none;}
}

/* Station la moins chère — bordure greenTint2/rgba (StationItem.tsx l.91-92), épaissie 1.5px round 3.
   Badge : pill flottante à cheval sur le bord haut (round 3) ; overflow:visible ci-dessus l'autorise. */
.cbg-station-cheapest{border-width:1.5px;border-color:var(--cbg-accent-border);box-shadow:var(--cbg-accent-shadow);}
.cbg-cheapest-badge{
  position:absolute;top:-10px;left:16px;
  display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:100px;
  background:#0E9F6E;color:#FFFFFF;font-weight:700;font-size:11px;
}

/* En-tête (round 3) — monogramme d'enseigne (brandMonogram()/tokens.ts, fond couleur+alpha) devant
   le nom + adresse. */
.cbg-station-head{display:flex;align-items:flex-start;gap:10px;}
/* radius:9 non normalisé (passe de cohérence UI) : le rôle le plus proche est RADII.monogram=13,
   mais l'écart (4px) dépasse le seuil de 2px retenu pour une normalisation automatique — signalé,
   laissé en l'état. */
.cbg-station-mono{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;color:var(--mono-color);background:var(--mono-bg);
}
@media (prefers-color-scheme: dark){ .cbg-station-mono{background:var(--mono-bg-dark);} }
.cbg-station-head-text{min-width:0;flex:1;}
/* h3 (round 3) : hors règle globale h1,h2 — font-family/margin repris ici, rendu identique à l'ancien h2. */
.cbg-station-name{font-family:'Bricolage Grotesque', system-ui, sans-serif;margin:0;font-size:17px;color:var(--cbg-ink);}
.cbg-station-address{font-weight:600;font-size:14px;color:var(--cbg-slate2);margin-top:4px;}
/* Station sans aucun prix frais/honnête (round 2 : « ça fait cassé » sur une carte vide) — mention
   sobre plutôt qu'un bloc vide, aucune donnée inventée. */
.cbg-station-empty{font-size:12.5px;color:var(--cbg-slate2);margin-top:12px;}

/* Rangées prix façon table (round 3, remplace les mini-chips) — point brut, libellé AA fuelChipVars,
   ligne pointillée « de conduite » (flex:1), prix Bricolage tabular, ancienneté alignée à droite.
   Bloc NON retouché par la passe de cohérence UI (typo/spacing) : couleurs/tailles dérivées du
   système « chip carburant AA » canonique (DESIGN.md §7, tokens.ts fuelChipVars) — mêmes réserves
   pour .cbg-priceboard-* ci-dessus. */
.cbg-station-fuels{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.cbg-fuel-row{display:flex;align-items:center;gap:8px;}
.cbg-fuel-dot{width:8px;height:8px;border-radius:50%;background:var(--fc-raw);flex-shrink:0;}
.cbg-fuel-label{font-weight:700;font-size:12.5px;width:72px;flex-shrink:0;color:var(--fc-text);}
@media (prefers-color-scheme: dark){ .cbg-fuel-label{color:var(--fc-text-dark);} }
.cbg-fuel-dotline{flex:1;height:0;border-bottom:1px dotted var(--cbg-line2);}
.cbg-fuel-price{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-weight:700;font-size:15px;color:var(--cbg-ink);font-variant-numeric:tabular-nums;}
.cbg-fuel-age{font-size:10.5px;color:var(--cbg-slate2);width:34px;flex-shrink:0;text-align:right;white-space:nowrap;}

/* Bannière d'engagement mi-liste (round 2 : motif AppFunnelBanner.tsx — fond vert teinté) — occupe
   toute la largeur de la grille 2 colonnes, insérée après la 6e carte (cf. VillePage.tsx). */
.cbg-funnel-banner{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  background:var(--cbg-accent-bg);border-radius:18px;padding:14px 16px;
}
/* Texte gauche greenDk (round 3) — var(--cbg-accent-text), bascule déjà gérée (même variable que
   le badge « moins chère »). */
.cbg-funnel-text{font-size:14px;font-weight:700;color:var(--cbg-accent-text);}

/* ── Section « L'application CarbuGo » (round 2, AppSection.tsx) — overline/titre/argumentaire,
   carte Premium (GRADIENTS.premium) + 4 bénéfices PREMIUM_FEATURES, badges stores officiels grisés. ── */
.cbg-app-section{margin:40px 0;padding:32px 24px;border-radius:22px;background:var(--cbg-surface);border:1px solid var(--cbg-line);}
.cbg-app-title{font-size:23px;letter-spacing:-0.6px;color:var(--cbg-ink);margin:0 0 10px;}
.cbg-app-sub{font-size:15px;color:var(--cbg-slate);max-width:560px;margin:0 0 24px;line-height:1.55;}
.cbg-app-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;}
@media (min-width:800px){ .cbg-app-grid{grid-template-columns:1.1fr 0.9fr;} }

.cbg-premium-card{border-radius:18px;padding:18px;background:linear-gradient(120deg, #FBEFD8, #FCF6E8);}
@media (prefers-color-scheme: dark){ .cbg-premium-card{background:rgba(239,157,35,0.08);} }
.cbg-premium-label{font-weight:800;font-size:12.5px;letter-spacing:1.2px;color:#C97A10;margin:0 0 12px;}
@media (prefers-color-scheme: dark){ .cbg-premium-label{color:#EF9D23;} }
.cbg-premium-list{display:flex;flex-direction:column;gap:12px;}
.cbg-premium-row{display:flex;align-items:flex-start;gap:10px;}
.cbg-premium-dot{width:7px;height:7px;border-radius:50%;background:#EF9D23;margin-top:6px;flex-shrink:0;}
.cbg-premium-text{flex:1;min-width:0;}
.cbg-premium-title{font-weight:700;font-size:14px;color:var(--cbg-ink);}
.cbg-premium-sub{font-size:12.5px;color:var(--cbg-slate2);margin-top:1px;}
/* font-size:9.5px non retouché (passe de cohérence UI) : absorbé par TYPE.micro=11 dans l'échelle
   générale, mais l'écart (+1.5px, +16 % relatif) agrandirait perceptiblement ce badge très compact
   (padding 2px 7px) — laissé en l'état pour zéro changement de rendu perçu. */
.cbg-premium-badge{
  display:inline-flex;align-items:center;flex-shrink:0;margin-top:2px;
  background:rgba(239,157,35,0.16);color:#C97A10;
  padding:2px 7px;border-radius:100px;
  font-weight:800;font-size:9.5px;letter-spacing:0.4px;
}
@media (prefers-color-scheme: dark){ .cbg-premium-badge{color:#EF9D23;} }

.cbg-store-badges-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.cbg-store-badge{height:54px;width:auto;display:block;filter:grayscale(1);opacity:.55;}
.cbg-store-pill{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;margin:12px 0 0;
  border-radius:100px;background:var(--cbg-accent-bg);color:var(--cbg-accent-text);
  font-weight:700;font-size:12.5px;
}
.cbg-store-dot{width:7px;height:7px;border-radius:50%;background:#0E9F6E;flex-shrink:0;}

.cbg-app-cta-wrap{margin-top:24px;}

/* ── Bande CTA finale — réplique de CtaBand.tsx (carte arrondie 28px, dégradé GRADIENTS.onboarding,
   halo blanc décoratif, titre blanc, bouton clair). ── */
.cbg-cta{margin:36px 0;}
.cbg-cta-card{
  position:relative;overflow:hidden;border-radius:28px;padding:40px 28px;text-align:center;
  background:linear-gradient(180deg, #075E41 0%, #0A7A54 46%, #0E9F6E 60%);
}
.cbg-cta-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(480px circle at 85% 15%, rgba(255,255,255,0.12), transparent 65%);
}
/* Logo 64px (round 3) — sans border-radius : coins déjà dans le SVG. */
.cbg-cta-logo{position:relative;display:block;margin:0 auto 16px;box-shadow:0 20px 50px rgba(0,0,0,0.30);}
.cbg-cta-title{position:relative;font-size:28px;letter-spacing:-0.6px;color:#FFFFFF;margin:0 0 8px;}
.cbg-cta-sub{position:relative;font-size:15px;color:rgba(255,255,255,0.85);margin:0 0 22px;}
.cbg-cta-btn{
  position:relative;display:inline-flex;align-items:center;height:50px;padding:0 26px;border-radius:100px;
  background:#FFFFFF;color:#0A7A54;
  font-weight:700;font-size:15px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
}
.cbg-cta-btn:hover{background:#F3F6F3;}

/* ── Chips « autres villes » / index départements — géométrie de Chip.tsx variante md (hauteur 38,
   radius 100, padding 14, poids 700, taille TYPE.body — passe de cohérence UI, 13.5 → 14). Classe
   PARTAGÉE entre page ville et /villes/ (homogénéité §5 CLAUDE.md : un motif ne se duplique
   jamais). Hover : bordure verte. ── */
.cbg-related{margin-bottom:36px;}
.cbg-related-title{font-size:17px;color:var(--cbg-ink);margin:0 0 12px;}
.cbg-chip-list{display:flex;flex-wrap:wrap;gap:10px;}
/* Hauteur 38px NON portée à 44 (cible tactile) : géométrie canonique Chip.tsx variante md (cf.
   commentaire ci-dessus) — l'agrandir changerait le rendu perçu de la pilule, hors périmètre de
   cette passe (zéro changement de layout perceptible). */
.cbg-chip-link{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:100px;
  font-weight:700;font-size:14px;color:var(--cbg-slate);
  background:var(--cbg-surface);border:1px solid var(--cbg-line2);white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.cbg-chip-link:hover{border-color:#0E9F6E;color:var(--cbg-accent-text);}
@media (prefers-reduced-motion: reduce){ .cbg-chip-link{transition:none;} }
.cbg-chip-count{color:var(--cbg-slate2);font-weight:600;font-variant-numeric:tabular-nums;}

.cbg-index-dept{margin-bottom:30px;scroll-margin-top:88px;}
.cbg-index-dept-title{font-size:17px;color:var(--cbg-ink);margin:0 0 12px;}

/* ── Footer — réplique structurelle de LandingFooter.tsx : lockup + signature | liens | méta
   (version · copyright · légal). Mobile : blocs empilés et centrés, comme le LandingFooter. ── */
.cbg-footer{border-top:1px solid var(--cbg-line);margin-top:48px;}
.cbg-footer-inner{padding:28px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.cbg-footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.cbg-footer-links{display:flex;flex-wrap:wrap;gap:20px;}
/* padding vertical réel (zone tactile >= 44) : la géométrie visible du texte ne change pas, seul
   l'espace cliquable autour grandit (cf. passe de cohérence UI, cibles tactiles). */
.cbg-footer-links a{display:inline-flex;align-items:center;padding:12px 0;font-weight:600;font-size:14px;color:var(--cbg-slate);}
.cbg-footer-links a:hover{color:#0E9F6E;}
.cbg-footer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--cbg-slate2);}
.cbg-footer-meta a{color:var(--cbg-slate2);}
.cbg-footer-meta a:hover{color:#0E9F6E;}
@media (max-width:639px){
  .cbg-footer-inner{flex-direction:column;align-items:center;text-align:center;}
  .cbg-footer-brand,.cbg-footer-links{justify-content:center;}
}

/* Signature studio — réplique de JustCodeItSignature.tsx (couleur de marque FIXE #00FFAA, chevron
   final clignotant, cœur #ff4d5e). */
.cbg-signature{font-size:14px;font-weight:600;color:var(--cbg-slate2);display:inline-flex;align-items:center;gap:4px;}
.cbg-signature-heart{color:#ff4d5e;}
.cbg-signature-link{color:#00ffaa;font-weight:700;}
@keyframes cbgSigBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.cbg-signature-chevron{animation:cbgSigBlink 1.05s step-end infinite;}
@media (prefers-reduced-motion: reduce){
  .cbg-signature-chevron{animation:none;}
}

/* ── Pages éditoriales (round « pages SEO » — FAQ, guides, à propos, contact) — prose et blocs
   partagés par scripts/pages/components/*.tsx. Mêmes tokens/variables que ci-dessus, aucune nouvelle
   couleur. ── */

/* Colonne éditoriale centrée : wrapper posé par ArticleLayout/FaqPage/ContactPage, scope
   ".cbg-editorial …" pour ne rien redéfinir des classes partagées avec les pages villes. */
.cbg-editorial{max-width:760px;margin-inline:auto;}
.cbg-editorial-wide{max-width:840px;}

/* En-tête d'article : surtitre + h1 + chapô. Largeur pilotée par ".cbg-editorial". Taille alignée
   sur .cbg-ville-intro (passe de cohérence UI) : le commentaire de ce dernier revendiquait déjà
   « même typographie que .cbg-article-lead », un écart 16 vs 15 subsiste : harmonisation REPORTÉE
   après le verdict AdSense (ne pas réduire le texte de lecture pendant l'examen de contenu). */
.cbg-article-lead{font-size:16px;color:var(--cbg-slate);margin:0 0 8px;}
/* Hero sans sommaire ni meta après le chapô (à propos, guides sans TOC) : le chapô devient alors le
   dernier enfant du hero — même correctif que .cbg-h1:last-child ci-dessus, marge alignée sur
   .cbg-hero-cta (28px) pour une sortie de hero uniforme avant la grille/carte suivante. */
.cbg-hero .cbg-article-lead:last-child{margin-bottom:28px;}
.cbg-article-meta{font-size:12.5px;color:var(--cbg-slate2);margin:0 0 28px;}
/* Quand un sommaire (.cbg-toc) suit la ligne meta (guides, round « pages éditoriales ») : la marge
   basse de 28px se déplace sur .cbg-toc, pour ne pas doubler l'espacement avant le corps. */
.cbg-article-meta--tight{margin-bottom:8px;}
.cbg-toc{margin:0 0 28px;}

/* Corps de prose (guides, à propos) — largeur pilotée par ".cbg-editorial", hiérarchie h2/h3, listes. */
/* 15.5 conservé : réduction du corps de lecture reportée après le verdict AdSense (cf. lead). */
.cbg-article{margin:0 0 40px;font-size:15.5px;color:var(--cbg-ink);}
/* scroll-margin-top : ancres du sommaire (.cbg-toc) sous le header sticky (round « pages éditoriales »). */
.cbg-article h2{font-size:23px;letter-spacing:-0.4px;color:var(--cbg-ink);margin:36px 0 12px;scroll-margin-top:88px;}
.cbg-article h2:first-child{margin-top:0;}
.cbg-article h3{font-family:'Manrope', system-ui, sans-serif;font-weight:700;font-size:17px;color:var(--cbg-ink);margin:22px 0 8px;}
.cbg-article p{margin:0 0 14px;line-height:1.65;color:var(--cbg-slate);}
.cbg-article strong{color:var(--cbg-ink);}
.cbg-article ul,.cbg-article ol{margin:0 0 16px;padding-left:22px;list-style:disc;display:block;}
.cbg-article ol{list-style:decimal;}
.cbg-article li{margin:0 0 8px;line-height:1.6;color:var(--cbg-slate);}
.cbg-article a{color:var(--cbg-accent-text);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Encadré chiffré (ex. calcul de seuil de rentabilité) — même fond teinté que .cbg-funnel-banner. */
.cbg-article-callout{background:var(--cbg-accent-bg);border-radius:14px;padding:16px 16px;margin:0 0 20px;}
.cbg-article-callout p{color:var(--cbg-accent-text);margin:0;}
.cbg-article-callout p+p{margin-top:8px;}

/* ── Index /guides/ — grille de cartes (même géométrie de carte que .cbg-station-card). ── */
.cbg-guides-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:40px;}
@media (min-width:700px){ .cbg-guides-grid{grid-template-columns:1fr 1fr;} }
.cbg-guide-card{
  display:block;background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:18px;padding:20px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cbg-guide-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,31,26,0.08);}
@media (prefers-reduced-motion: reduce){
  .cbg-guide-card{transition:none;}
  .cbg-guide-card:hover{transform:none;}
}
.cbg-guide-card-title{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-size:17px;color:var(--cbg-ink);margin:0 0 8px;}
.cbg-guide-card-desc{font-size:14px;color:var(--cbg-slate);line-height:1.55;margin:0 0 14px;}
.cbg-guide-card-link{font-weight:700;font-size:14px;color:var(--cbg-accent-text);}
/* Pied de carte (round « pages éditoriales ») — lien + temps de lecture honnête, alignés aux 2 bords. */
.cbg-guide-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cbg-guide-card-time{font-size:12.5px;color:var(--cbg-slate2);}

/* Médaillon d'icône en tête de carte (guides, contact) — géométrie du médaillon tile de FuelChip
   (DESIGN.md §7) : carré 36×36 radius 11, fond accent ; icons.tsx hérite la couleur via "color". */
.cbg-icon-medal{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cbg-accent-bg);color:var(--cbg-accent-text);
}

/* ── FAQ /faq/ — accordéons natifs <details> (round « pages éditoriales », maquette Claude Design) :
   groupée par thème, carte identique à .cbg-station-card pour l'homogénéité visuelle. Seule la toute
   première question de la page est ouverte par défaut (cf. FaqPage.tsx) ; tout le texte reste dans
   le HTML (indexable SEO/AdSense), seule la présentation se replie. Les classes .cbg-faq-question/
   .cbg-faq-answer restent utilisées telles quelles par le shell prérendu /decouvrir
   (DecouvrirShell.tsx, article + <p> statiques, hors périmètre de ce round) : .cbg-faq-question
   porte désormais le padding haut retiré de .cbg-faq-item (répartition padding-top/padding-bottom
   entre les deux <p>, rendu final identique à l'ancien padding unique de la carte). ── */
.cbg-faq-group{margin-bottom:32px;}
.cbg-faq-group-title{font-size:17px;color:var(--cbg-ink);margin:0 0 14px;scroll-margin-top:88px;}
.cbg-faq-list{display:flex;flex-direction:column;gap:12px;}
.cbg-faq-item{background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:16px;}
.cbg-faq-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;font-weight:700;font-size:17px;color:var(--cbg-ink);
}
.cbg-faq-summary::-webkit-details-marker{display:none;}
.cbg-chev{flex-shrink:0;display:flex;color:var(--cbg-slate2);transition:transform .15s ease;}
.cbg-faq-item[open] .cbg-chev{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){ .cbg-chev{transition:none;} }
/* padding 18px NON retouché (haut/bas, avec .cbg-faq-answer ci-dessous) : réparti volontairement
   depuis l'ancien padding unique de la carte (cf. commentaire d'en-tête de ce bloc) — un
   arrondi 16/20 casserait l'invariant « rendu final identique ». */
.cbg-faq-question{font-weight:700;font-size:15px;color:var(--cbg-ink);margin:0 0 8px;padding:18px 20px 0;}
.cbg-faq-answer{font-size:15px;color:var(--cbg-slate);line-height:1.6;margin:0;padding:0 20px 18px;}
/* margin-bottom:28 (passe de cohérence UI) : sans lui, la liste de thèmes (dernier enfant du hero)
   ne laisse que 8px avant la première question — même correctif que .cbg-h1/.cbg-article-lead
   ci-dessus, aligné sur .cbg-hero-cta (28px). */
.cbg-faq-anchors{margin-top:18px;margin-bottom:28px;}

/* Contact — grille 1/2/3 colonnes selon largeur ; carte identique à la FAQ. */
.cbg-contact-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:32px;}
@media (min-width:700px){ .cbg-contact-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:860px){ .cbg-contact-grid{grid-template-columns:1fr 1fr 1fr;} }
.cbg-contact-card{background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:16px;padding:20px;}
.cbg-contact-card-title{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-size:17px;color:var(--cbg-ink);margin:0 0 8px;}
.cbg-contact-card-text{font-size:14px;color:var(--cbg-slate);line-height:1.6;margin:0;}
/* Lien mailto de clôture de carte — reprend le style de .cbg-guide-card-link. */
.cbg-contact-card-link{display:inline-block;margin-top:12px;}
.cbg-contact-email{
  /* margin-bottom 28 : même respiration que .cbg-hero-cta avant le bloc suivant (le hero ne
     fournit que 8px de padding bas, la grille de cartes n'a pas de margin-top). */
  display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:100px;margin:10px 0 28px;
  background:#0A7A54;color:#FFFFFF;font-weight:700;font-size:15px;box-shadow:0 8px 18px rgba(14,159,110,0.28);
}
.cbg-contact-email:hover{background:#0E9F6E;}

/* À propos — rangée de stats sous le lead, carte = radius 18 comme .cbg-station-card. */
.cbg-stats-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 32px;}
@media (min-width:700px){ .cbg-stats-grid{grid-template-columns:1fr 1fr 1fr;} }
.cbg-stat-card{background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:18px;padding:20px;text-align:center;}
.cbg-stat-value{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-weight:700;font-size:30px;color:var(--cbg-ink);margin:0 0 4px;font-variant-numeric:tabular-nums;}
.cbg-stat-label{font-size:12.5px;color:var(--cbg-slate2);margin:0;}

/* À propos — « Nos principes » en cartes (round « pages éditoriales », maquette Claude Design) —
   remplace l'ancienne <ul>. Déclarée APRÈS .cbg-article h3/p (ci-dessus) : même spécificité de
   sélecteur, l'ordre du texte suffit à primer sans avoir besoin d'un préfixe ".cbg-article". */
.cbg-principles-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 20px;}
@media (min-width:700px){ .cbg-principles-grid{grid-template-columns:1fr 1fr 1fr;} }
.cbg-principle-card{background:var(--cbg-surface);border:1px solid var(--cbg-line);border-radius:16px;padding:20px;}
.cbg-principle-card h3{font-family:'Bricolage Grotesque', system-ui, sans-serif;font-size:17px;color:var(--cbg-ink);margin:0 0 8px;}
.cbg-principle-card p{font-size:14px;color:var(--cbg-slate);line-height:1.6;margin:0;}