/*
 * Valeurs reprises telles quelles du mockup ..claude_design/design_handoff_fiche_commune_www/
 * "Fiche Commune WWW.dc.html" (styles inline du fichier) — plus fidèle que la description
 * textuelle du README utilisée pour la 1ère version de ce fichier.
 *
 * Chaque règle est préfixée par .um-fcw-page (et beaucoup en !important) : ce template est
 * injecté hors du flux normal du thème (get_header()/get_footer() puis un contenu qui n'est ni
 * un article ni une page classique), donc rien ne garantit que les styles globaux du thème/
 * Elementor (posés en !important sur les couleurs de lien, la typo des titres, les boutons...)
 * ne viennent pas écraser les nôtres — on l'a constaté en prod.
 */

.um-fcw-page {
    --um-red: #e63c52;
    --um-red-hover: #c22740;
    --um-red-link-hover: #a31630;
    --um-coral: #f2938a;
    --um-ink: #191619;
    --um-text-2: #3d393e;
    --um-grey: #6f6a70;
    --um-grey-caption: #9b959c;
    --um-paper: #faf9f6;
    --um-surface: #fff;
    --um-teal: #199a8e;
    --um-border-strong: rgba(25, 22, 25, .12);
    --um-border-mid: rgba(25, 22, 25, .08);
    --um-border-hair: rgba(25, 22, 25, .06);
    --um-border-input: rgba(25, 22, 25, .18);

    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--um-text-2) !important;
    background: var(--um-paper) !important;
    margin-top: 75px;
}

.um-fcw-page,
.um-fcw-page * { box-sizing: border-box; }

.um-fcw-page h1, .um-fcw-page h2, .um-fcw-page h3 {
    font-family: 'Archivo', sans-serif !important;
}
.um-fcw-page a {
    color: var(--um-red) !important;
    text-decoration: none !important;
    background: none !important;
    box-shadow: none !important;
}
.um-fcw-page a:hover { color: var(--um-red-link-hover) !important; }
.um-fcw-page ul { list-style: none !important; margin: 1.3em 0 1.8em 10% !important; padding: 0 !important; }
.um-fcw-page button { font-family: inherit !important; }

.um-fcw-container {
    /* --um-fcw-container-w est posée en JS (fiche-commune.js) à partir de la largeur réelle du
       conteneur du header du thème, pour que nos sections s'alignent pile avec le logo/nav —
       1160px (valeur du mockup) reste le repli si la mesure échoue (JS désactivé, etc.). */
    max-width: var(--um-fcw-container-w, 1160px);
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 700px) {
    .um-fcw-container { padding: 0 20px; }
}

/* ---------- Bandeau titre ---------- */
.um-fcw-page .um-fcw-title-band { background: var(--um-paper) !important; border-bottom: 1px solid var(--um-border-mid); padding: 26px 0 22px; }
.um-fcw-page .um-fcw-h1 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.3; margin: 0 !important; color: var(--um-ink) !important; }
.um-fcw-page .um-fcw-accent { color: var(--um-red) !important; }
.um-fcw-page .um-fcw-pill {
    display: inline-block; vertical-align: middle; margin-left: 6px; line-height: 1.4;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--um-teal) !important; border: 1px solid rgba(25, 154, 142, .4) !important;
    background: rgba(25, 154, 142, .07) !important; border-radius: 99px !important; padding: 3px 10px !important;
}
.um-fcw-page .um-fcw-subtitle { font-size: 14px; font-weight: 500; color: var(--um-grey) !important; margin: 7px 0 0 !important; }

/* Sélecteur (shortcode [um_fcw_commune_selector]) — utilisé à la fois DANS .um-fcw-page (bandeau
   titre de la fiche, page racine) et de façon autonome sur une page quelconque du thème (ex.
   accueil) via has_shortcode(), donc sans aucun ancêtre .um-fcw-page. Les règles ci-dessous
   ciblent donc .um-fcw-page ET .um-fcw-selector (la racine du shortcode lui-même) en parallèle,
   avec une valeur de repli littérale sur chaque var() pour rester identiques même quand
   .um-fcw-page (qui définit ces custom properties) est absent de l'ascendance. */
.um-fcw-selector-bar { display: flex; gap: 10px; max-width: 520px; margin-top: 14px; }
.um-fcw-selector-select { flex: 1; min-width: 0; }
.select2-search.select2-search--dropdown .select2-search__field:focus {
    border: none !important;
    box-shadow: none;
}
ul.select2-results__options li:not(:last-child) {
    margin-bottom: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 14px;
}
ul.select2-results__options li.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #EA5863;
    color: white;
}
.um-fcw-page .um-fcw-btn-analyser, .um-fcw-selector .um-fcw-btn-analyser,
.um-fcw-page .um-fcw-btn, .um-fcw-selector .um-fcw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: #EA5863 !important; color: #fff !important; border: none !important; border-radius: 3px !important;
    font-size: 13.5px !important; font-weight: 600 !important; padding: 10px 22px !important; cursor: pointer;
    text-decoration: none !important; transition: background .15s; line-height: 1.4;
}
.um-fcw-page .um-fcw-btn-analyser:hover, .um-fcw-selector .um-fcw-btn-analyser:hover,
.um-fcw-page .um-fcw-btn:hover, .um-fcw-selector .um-fcw-btn:hover { background: #d64651 !important; color: #fff !important; }
.um-fcw-page .um-fcw-btn-block { display: flex; width: 100%; margin: 22px 0 0; }

/* Select2 : la lib pose sa propre hauteur par défaut (28px), plus basse que le bouton
   "Analyser" à côté — on aligne les deux sur ~42px comme dans la maquette. */
.um-fcw-page .select2-container, .um-fcw-selector .select2-container { height: 42px; }
.um-fcw-page .select2-container .select2-selection--single,
.um-fcw-selector .select2-container .select2-selection--single {
    height: 42px !important; display: flex; align-items: center;
    border: 1px solid var(--um-border-input, rgba(25, 22, 25, .18)) !important; border-radius: 3px !important;
    background: #fff !important;
}
.um-fcw-page .select2-container .select2-selection--single .select2-selection__rendered,
.um-fcw-selector .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important; padding-left: 14px !important; font-size: 13.5px; color: var(--um-ink, #191619) !important;
}
.um-fcw-page .select2-container .select2-selection--single .select2-selection__arrow,
.um-fcw-selector .select2-container .select2-selection--single .select2-selection__arrow { height: 40px !important; }
/* Le halo bleu par défaut du navigateur (outline de focus natif) ne correspond pas à la charte —
   on le remplace par l'anneau rouge de marque, même valeur que le focus des inputs texte. */
.um-fcw-page .select2-container .select2-selection--single:focus,
.um-fcw-page .select2-container--focus .select2-selection--single,
.um-fcw-page .select2-container--open .select2-selection--single,
.um-fcw-page .select2-selection:focus,
.um-fcw-selector .select2-container .select2-selection--single:focus,
.um-fcw-selector .select2-container--focus .select2-selection--single,
.um-fcw-selector .select2-container--open .select2-selection--single,
.um-fcw-selector .select2-selection:focus {
    outline: none !important;
    border-color: var(--um-red, #e63c52) !important;
    box-shadow: 0 0 0 3px rgba(230, 60, 82, .12) !important;
}

/* ---------- Hero ---------- */
.um-fcw-page .um-fcw-hero { position: relative; background: var(--um-ink) !important; }
.um-fcw-page .um-fcw-hero-bg {
    display: block; width: 100%; height: 420px; object-fit: cover; object-position: 50% 30%; opacity: .94;
}
.um-fcw-page .um-fcw-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(25, 22, 25, 0) 30%, rgba(25, 22, 25, .82) 100%) !important;
}
.um-fcw-page .um-fcw-hero-content { position: absolute; left: 0; right: 0; bottom: 0; }
.um-fcw-page .um-fcw-hero-inner {
    /* Pas de max-width, et padding-bottom seul (pas le raccourci "padding: 0 0 24px") : cet
       élément partage la classe .um-fcw-container avec le bandeau titre au-dessus, dont le
       padding gauche/droit assure l'alignement du bord gauche avec "Étude de marché..." — un
       raccourci "padding" ici écraserait ce padding horizontal (spécificité de 2 classes contre
       1), collant le texte au bord de l'écran sur mobile (constaté en prod). Le plafonnement de
       largeur nécessaire pour éviter que le titre ne cogne les stats à droite se fait sur
       .um-fcw-hero-text. */
    padding-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.um-fcw-hero-text {
    max-width: 61%;
    /* Décalage optique : l'Anton 64px du titre déborde visuellement plus à gauche que le H1
       (taille normale) juste au-dessus, même à bord gauche identique — ce padding compense sans
       désaligner les deux éléments. 8px ne suffisait pas, passé à 24px. */
    padding-left: 40px;
}
.um-fcw-page .um-fcw-hero-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase !important; color: var(--um-coral) !important; font-weight: 600 !important; margin-bottom: 6px; }
.um-fcw-page .um-fcw-hero-title { font-family: 'Anton', 'Archivo', sans-serif !important; font-weight: 400 !important; font-size: 64px !important; line-height: .95 !important; margin: 0 !important; color: #fff !important; letter-spacing: .01em; }
.um-fcw-hero-stats { display: flex; gap: 28px; padding-bottom: 4px; }
.um-fcw-hero-stat { text-align: right; }
.um-fcw-page .um-fcw-hero-stat-label { font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .7) !important; margin-bottom: 2px; }
.um-fcw-page .um-fcw-hero-stat-value { font-family: 'Anton', 'Archivo', sans-serif !important; font-size: 26px !important; color: #fff !important; line-height: 1.1; }
.um-fcw-page .um-fcw-hero-stat-suffix { font-size: 11px; color: rgba(255, 255, 255, .55) !important; margin-top: 1px; }

@media (max-width: 700px) {
    .um-fcw-page .um-fcw-hero-bg { height: 280px; }
    .um-fcw-page .um-fcw-hero-title { font-size: 34px !important; }
    .um-fcw-hero-text { max-width: 100%; padding-left: 0; }
    .um-fcw-hero-inner { padding-bottom: 16px; }
    .um-fcw-hero-stats { gap: 16px; width: 100%; justify-content: flex-start; }
    .um-fcw-hero-stat { text-align: left; }
}

/* ---------- Bande "Liens officiels" (sous le hero) ---------- */
.um-fcw-page .um-fcw-links-band { background: var(--um-paper) !important; border-bottom: 1px solid var(--um-border-mid); padding: 16px 0; }
.um-fcw-page .um-fcw-links-row { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px 20px; }
.um-fcw-page .um-fcw-links-group { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px; width: auto !important; }
.um-fcw-page .um-fcw-links-group-label { font-size: 9px; letter-spacing: .1em; text-transform: uppercase !important; color: var(--um-grey-caption) !important; font-weight: 500 !important; margin-right: 2px; }
.um-fcw-page .um-fcw-link-pill {
    background: var(--um-surface) !important; border: 1px solid var(--um-border-strong) !important;
    color: var(--um-ink) !important; font-size: 11.5px !important; font-weight: 500 !important;
    padding: 6px 13px !important; border-radius: 99px !important; white-space: nowrap;
}
.um-fcw-page .um-fcw-link-pill:hover { border-color: var(--um-red) !important; color: var(--um-red) !important; }

@media (max-width: 700px) {
    /* Le libellé ("Institutions", "Accompagnement"...) suivi directement de ses puces sur la
       même ligne rendait le repli à la ligne inégal d'un groupe à l'autre — on le force sur sa
       propre ligne (flex-basis:100%, le groupe reste en row-wrap pour les puces elles-mêmes,
       qui continuent de s'enchaîner normalement dessous), avec plus d'espace entre les groupes. */
    .um-fcw-page .um-fcw-links-row { align-items: flex-start; gap: 14px 20px; }
    .um-fcw-page .um-fcw-links-group { width: 100% !important; row-gap: 8px; }
    .um-fcw-page .um-fcw-links-group-label { flex-basis: 100%; margin-right: 0; margin-bottom: 2px; }
}

/* ---------- Bande KPI ---------- */
.um-fcw-page .um-fcw-kpi-band { background: var(--um-surface) !important; border-bottom: 1px solid var(--um-border-strong); }
.um-fcw-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.um-fcw-kpi { border-left: 1px solid var(--um-border-mid); padding: 28px 26px 22px; }
.um-fcw-page .um-fcw-kpi-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--um-grey) !important; font-weight: 600 !important; }
.um-fcw-page .um-fcw-kpi-value { font-family: 'Anton', 'Archivo', sans-serif !important; font-size: 32px !important; letter-spacing: .01em; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--um-ink) !important; }
.um-fcw-page .um-fcw-kpi-unit { font-size: 17px; color: var(--um-grey) !important; margin-left: 3px; }

@media (max-width: 900px) {
    .um-fcw-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    /* 2 colonnes conservées même sur petit écran (pas 1) — un séparateur horizontal marque le
       passage à la ligne suivante (2 premières valeurs, puis les 2 suivantes, puis la dernière
       seule), en plus du séparateur vertical déjà en place entre les 2 colonnes. */
    .um-fcw-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .um-fcw-kpi { padding: 16px 16px 14px; }
    .um-fcw-kpi:nth-child(n+3) { border-top: 1px solid var(--um-border-mid); }
    .um-fcw-page .um-fcw-kpi-value { font-size: 24px !important; }
}

/* ---------- Sections numérotées ---------- */
.um-fcw-section { padding-top: 64px; }
.um-fcw-section:first-of-type { padding-top: 56px; }
.um-fcw-page .um-fcw-section-header {
    display: flex; align-items: baseline; gap: 16px;
    border-bottom: 2px solid var(--um-ink) !important; padding-bottom: 12px;
}
.um-fcw-page .um-fcw-section-num { font-family: 'Anton', 'Archivo', sans-serif !important; font-size: 15px; color: var(--um-red) !important; letter-spacing: .05em; }
.um-fcw-page .um-fcw-section-header h2 {
    font-family: 'Anton', 'Archivo', sans-serif !important; font-weight: 400 !important; font-size: 26px !important;
    text-transform: uppercase !important; letter-spacing: .02em; margin: 0 !important; color: var(--um-ink) !important;
}

@media (max-width: 700px) {
    .um-fcw-section { padding-top: 44px; }
    .um-fcw-section:first-of-type { padding-top: 36px; }
    /* Sur mobile, num + titre restent sur la même ligne ; le meta et la puce source (poussés à
       droite en desktop via margin-left:auto) passent chacun sur leur propre ligne, alignés à
       gauche — les forcer sur la même ligne que le titre les aurait fait déborder ou se
       chevaucher avec un H2 déjà proche de la largeur de l'écran. */
    .um-fcw-page .um-fcw-section-header { flex-wrap: wrap; row-gap: 6px; }
    .um-fcw-page .um-fcw-section-header h2 { font-size: 20px !important; }
    .um-fcw-page .um-fcw-section-title-meta { margin-left: 0 !important; flex-basis: 100%; font-size: 12px !important; }
    .um-fcw-page .um-fcw-source-tag { margin-left: 0 !important; flex-basis: 100%; }
}
/* Sous-titre à droite de l'en-tête (nombre de communes/habitants pour l'EPCI...), même rôle que
   .um-section-title-meta côté app : positionné juste à gauche de la puce source (pas collé au
   H2) — c'est ce span, pas le H2 ni le source-tag, qui porte le margin-left:auto poussant le
   groupe [meta, source] à droite ; quand il n'y a pas de meta, le source-tag reprend ce rôle
   (règle plus bas). Pas d'Anton ni de majuscules forcées, texte normal plus discret. */
.um-fcw-page .um-fcw-section-title-meta {
    display: inline-block; font-family: 'Archivo', sans-serif !important; font-weight: 500 !important;
    font-size: 13px !important; text-transform: none !important; letter-spacing: normal;
    color: var(--um-grey) !important; margin-left: auto !important; vertical-align: middle; white-space: nowrap;
}
.um-fcw-page .um-fcw-source-tag {
    margin-left: auto; font-family: ui-monospace, Menlo, monospace !important; font-size: 10px; letter-spacing: .04em;
    color: var(--um-grey) !important; background: rgba(25, 22, 25, .045) !important; border: 1px solid var(--um-border-mid) !important;
    padding: 3px 7px !important; border-radius: 3px !important; white-space: nowrap;
}
/* Quand un .um-section-title-meta précède déjà la puce source, c'est lui qui a poussé le groupe
   à droite (règle ci-dessus) : la puce source ne doit plus avoir sa propre marge auto, sinon
   l'espace libre se répartirait entre les deux et les séparerait au lieu de les coller. */
.um-fcw-section-title-meta + .um-fcw-source-tag { margin-left: 0 !important; }

/* ---------- Cartes statiques (SVG généré par l'app, non interactif côté www) ---------- */
.um-fcw-map-box { border: 1px solid var(--um-border-strong); background: var(--um-surface); margin-top: 20px; }
.um-fcw-map-static { position: relative; overflow: hidden; background: #f1f5f9; }
.um-fcw-map-static svg { display: block; width: 100%; height: 100%; }
/* generate_maps('main') renvoie un wrapper avec une hauteur inline (600px) : on la contraint ici. */
.um-fcw-map-static :is(#um-svg-wrapper, .um-map-wrapper) { height: 100% !important; border-radius: 0 !important; border: none !important; }
.um-fcw-map-static .um-toolbox-btn { display: none !important; }
/* Le conteneur du bloc zoom (+/-/reset) reste dans le DOM mais vide de boutons visibles une
   fois .um-toolbox-btn masqué : on le neutralise aussi pour ne pas laisser un cadre blanc vide. */
.um-fcw-map-static .um-map-overlay:has(.um-toolbox-btn) { display: none !important; }
.um-fcw-map-h-01 { height: 400px; }
.um-fcw-map-h-03 { height: 460px; }

@media (max-width: 700px) {
    .um-fcw-map-h-01 { height: 260px; }
    .um-fcw-map-h-03 { height: 280px; }
}

/* Carte "Cartographie" (section 01) : vraie carte Leaflet/OSM verrouillée, générée par
   generate_city_leaflet_map(). Le fragment embarque son propre <style> ciblant un id
   #um-city-map-<uniqid> avec une hauteur fixe (500px) : on la force ici via un sélecteur
   d'attribut + !important (l'id étant aléatoire, on ne peut pas le cibler autrement). */
.um-fcw-map-leaflet { position: relative; overflow: hidden; }
.um-fcw-map-leaflet [id^="um-city-map-"] {
    height: 100% !important; border-radius: 0 !important; border: none !important; box-shadow: none !important;
}
.um-fcw-map-leaflet .leaflet-control-zoom { display: none !important; }
.um-fcw-page .um-fcw-map-caption {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 16px; border-top: 1px solid var(--um-border-mid); font-size: 11.5px; color: var(--um-grey) !important;
}
.um-fcw-page .um-fcw-map-caption a { font-weight: 600 !important; white-space: nowrap; }

/* ---------- Section 02 : quartiers ---------- */
.um-fcw-split-grid { display: grid; grid-template-columns: 1fr 320px; margin-top: 20px; border: 1px solid var(--um-border-strong); background: var(--um-surface); }
.um-fcw-split-grid .um-fcw-map-static { border-right: 1px solid var(--um-border-mid); }
.um-fcw-map-h-02 { height: 480px; }
.um-fcw-quartiers-col { display: flex; flex-direction: column; }
.um-fcw-page .um-fcw-quartiers-head { padding: 16px 20px 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--um-grey) !important; font-weight: 600 !important; }
.um-fcw-page .um-fcw-quartier-row { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-top: 1px solid var(--um-border-hair); }
.um-fcw-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.um-fcw-page .um-fcw-quartier-name { font-size: 13px; font-weight: 500 !important; flex: 1; color: var(--um-text-2) !important; }
.um-fcw-page .um-fcw-quartier-pop { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--um-grey) !important; }

.um-fcw-locked-list { flex: 1; position: relative; overflow: hidden; min-height: 150px; }
.um-fcw-locked-rows { filter: blur(5px); opacity: .55; }
.um-fcw-locked-overlay-fade {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 40%) !important;
}
.um-fcw-page .um-fcw-locked-overlay-fade p { font-size: 12.5px; font-weight: 600 !important; text-align: center; padding: 0 20px; margin: 0; color: var(--um-ink) !important; }

@media (max-width: 900px) {
    .um-fcw-split-grid { grid-template-columns: 1fr; }
    .um-fcw-map-h-02 { height: 320px; }
}

/* ---------- Section 04 : indicateurs de richesse (contenu factice flouté) ---------- */
.um-fcw-locked-panel { position: relative; margin-top: 20px; border: 1px solid var(--um-border-strong); background: var(--um-surface); overflow: hidden; }
.um-fcw-fake-content { filter: blur(6px); opacity: .5; padding: 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

@media (max-width: 700px) {
    .um-fcw-fake-content { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
}
/* <p>, pas <h3> : ces libellés ("Répartition par CSP", "Établissements"...) ne sont que des
   étiquettes du contenu factice flouté (jamais de vraies données), ils n'ont pas leur place
   dans le plan Hn de la page. */
.um-fcw-page .um-fcw-fake-content-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--um-ink) !important; }
.um-fcw-fake-csp { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.um-fcw-fake-csp-row-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.um-fcw-page .um-fcw-fake-csp-row-head span:first-child { font-weight: 500 !important; color: var(--um-text-2) !important; }
.um-fcw-page .um-fcw-fake-csp-row-head span:last-child { color: var(--um-grey) !important; }
.um-fcw-fake-csp-track { height: 8px; background: rgba(25, 22, 25, .07); border-radius: 99px; overflow: hidden; }
.um-fcw-fake-csp-fill { height: 100%; border-radius: 99px; background: var(--um-ink); }
.um-fcw-page .um-fcw-fake-niveaux div { font-family: 'Anton', 'Archivo', sans-serif !important; font-size: 22px !important; margin-top: 10px; color: var(--um-ink) !important; }
.um-fcw-page .um-fcw-fake-niveaux div:first-child { margin-top: 16px; }

/* ---------- Sections 04/05 : overlay de conversion ---------- */
.um-fcw-locked-overlay-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center;
}
.um-fcw-locked-overlay-center.is-richesse { background: rgba(250, 249, 246, .55) !important; }
.um-fcw-locked-overlay-center.is-commerces { background: rgba(250, 249, 246, .45) !important; }
.um-fcw-picto { height: 64px; width: auto; }
.um-fcw-page .um-fcw-locked-overlay-center .um-fcw-lock-title { font-size: 14px; font-weight: 700 !important; color: var(--um-ink) !important; margin: 0; }
.um-fcw-page .um-fcw-locked-overlay-center .um-fcw-lock-text { font-size: 12.5px; color: var(--um-grey) !important; max-width: 400px; line-height: 1.5; margin: 0; }
.um-fcw-page .um-fcw-locked-overlay-center .um-fcw-btn { padding: 11px 24px !important; }

.um-fcw-map-blurred { display: block; width: 100%; height: 380px; object-fit: cover; filter: blur(7px); opacity: .6; }
.um-fcw-map-static.um-fcw-map-blurred-svg { filter: blur(7px); opacity: .6; height: 380px; }

@media (max-width: 700px) {
    .um-fcw-map-blurred, .um-fcw-map-static.um-fcw-map-blurred-svg { height: 260px; }
    .um-fcw-locked-overlay-center { padding: 20px; gap: 8px; }
    .um-fcw-picto { height: 48px; }
}

/* ---------- Section "Commune & EPCI" (mêmes colonnes que le tableau EPCI_COLUMNS de l'app,
   cf. assets/js/modules/tables.js) — teaser + verrouillage sur le même principe que la liste de
   quartiers de la section 02, mais en tableau plutôt qu'en liste (pas de pastille de couleur,
   il n'y en a pas côté app pour ce tableau). ---------- */
.um-fcw-epci-box { border: 1px solid var(--um-border-strong); background: var(--um-surface); margin-top: 20px; }
.um-fcw-page .um-fcw-epci-intro { font-size: 13.5px; color: var(--um-text-2) !important; margin: 0; padding: 16px 20px 10px; line-height: 1.6; }

.um-fcw-table-wrap { overflow-x: auto; }
.um-fcw-table { width: 100%; border-collapse: collapse; }
.um-fcw-page .um-fcw-table th {
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase !important; font-weight: 600 !important;
    color: var(--um-grey) !important; text-align: left; padding: 10px 20px; 
    border-top: 1px solid rgb(25 22 25 / 25%); border-bottom: 1px solid rgb(25 22 25 / 25%);
    white-space: nowrap;
}
.um-fcw-page .um-fcw-table td {
    font-size: 12px; color: var(--um-text-2) !important; text-align: left; padding: 9px 20px;
    border-bottom: 1px solid rgba(25, 22, 25, 0.06); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.um-fcw-page .um-fcw-table td:first-child { font-weight: 500 !important; white-space: normal; }
/* Ligne de la commune de la fiche : même traitement que rowBg dans EPCI_COLUMNS (tables.js). */
.um-fcw-page .um-fcw-table tr.is-current td { background: rgba(230, 60, 82, .05) !important; }

@media (max-width: 700px) {
    /* Le tableau à 7 colonnes ne peut pas tenir sur un écran de téléphone : on réduit le
       padding pour limiter le défilement horizontal (.um-fcw-table-wrap gère déjà le scroll)
       plutôt que de retirer des colonnes, pour rester fidèle aux colonnes de l'app. */
    .um-fcw-page .um-fcw-table th, .um-fcw-page .um-fcw-table td { padding: 8px 12px; }
}

/* ---------- Bandeau de conversion final ---------- */
.um-fcw-page .um-fcw-conversion-banner { margin-top: 72px; background: var(--um-ink) !important; color: var(--um-paper) !important; padding: 36px 0; }
.um-fcw-conversion-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.um-fcw-conversion-loader { height: 72px; flex: none; margin-top: -50px; }
.um-fcw-conversion-text { flex: 1; min-width: 260px; }
.um-fcw-page .um-fcw-conversion-text .um-fcw-conversion-title { font-family: 'Anton', 'Archivo', sans-serif !important; font-weight: 400 !important; font-size: 24px !important; letter-spacing: .02em; text-transform: uppercase !important; color: #fff !important; margin: 0; }
.um-fcw-page .um-fcw-conversion-text p { font-size: 13.5px; color: rgba(250, 249, 246, .65) !important; margin-top: 6px; line-height: 1.6; }
.um-fcw-page .um-fcw-conversion-banner .um-fcw-btn { flex: none; padding: 13px 28px !important; font-size: 14px !important; }

@media (max-width: 700px) {
    .um-fcw-page .um-fcw-conversion-banner { margin-top: 48px; text-align: center; }
    .um-fcw-conversion-inner { justify-content: center; }
    /* Le margin-top négatif du loader suppose qu'il est aligné à côté du texte (desktop) — une
       fois empilé en colonne (flex-wrap sur mobile), il pousserait le loader dans la section
       précédente. */
    .um-fcw-conversion-loader { margin-top: 0; }
    .um-fcw-conversion-text { text-align: center; }
    .um-fcw-page .um-fcw-conversion-banner .um-fcw-btn { width: 100%; }
}

.um-fcw-error { padding: 80px 0; text-align: center; color: var(--um-grey); }

/* ---------- Modale "Libre accès" ---------- */
.um-fcw-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.um-fcw-modal.is-open { display: flex; }
.um-fcw-modal-overlay { position: absolute; inset: 0; background: rgba(25, 22, 25, .55) !important; }
.um-fcw-page .um-fcw-modal-box {
    position: relative; z-index: 1; width: min(480px, 100%);
    background: #fff !important; border: 1px solid rgba(25, 22, 25, .14); box-shadow: 0 32px 80px rgba(25, 22, 25, .35);
    padding: 32px 36px 28px; text-align: center;
}
.um-fcw-page .um-fcw-modal-close {
    position: absolute; top: 10px; right: 12px; background: none !important; border: none !important; cursor: pointer;
    font-size: 18px; font-weight: 600; line-height: 1; color: var(--um-grey) !important;
}
.um-fcw-page .um-fcw-modal-close:hover { color: var(--um-red) !important; }
.um-fcw-modal-loader { height: 64px; }
.um-fcw-page .um-fcw-modal-box h2 { font-family: 'Anton', 'Archivo', sans-serif !important; font-weight: 400 !important; font-size: 24px !important; letter-spacing: .02em; text-transform: uppercase !important; margin: 14px 0 0 !important; color: var(--um-ink) !important; }
.um-fcw-page .um-fcw-modal-box > p { font-size: 13px; color: var(--um-grey) !important; margin: 6px 0 0; line-height: 1.6; }
.um-fcw-benefits { margin: 18px auto 0 !important; max-width: 340px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.um-fcw-page .um-fcw-benefits li { font-size: 13px; font-weight: 400 !important; color: var(--um-text-2) !important; padding-left: 22px; position: relative; line-height: 0.3em; }
.um-fcw-page .um-fcw-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--um-teal) !important; font-weight: 700; }
.um-fcw-page .um-fcw-modal-box .um-fcw-btn-block { margin-top: 22px !important; }
.um-fcw-page .um-fcw-modal-login { display: block; font-size: 12px; color: var(--um-grey) !important; margin-top: 12px; }
.um-fcw-page .um-fcw-modal-login a { font-weight: 600 !important; }

@media (max-width: 480px) {
    .um-fcw-modal { padding: 12px; }
    .um-fcw-page .um-fcw-modal-box { padding: 24px 20px 20px; }
}

/* ---------- Page racine ---------- */
.um-fcw-title-band-root { padding: 64px 0; text-align: center; }
.um-fcw-title-band-root .um-fcw-selector-bar { margin: 14px auto 0; }

@media (max-width: 700px) {
    .um-fcw-title-band-root { padding: 40px 0; }
}