/** * Design system des pages departement - Cent une découvertes (Jalon 2, socle commun). * Charte sombre / dorée, patterns réutilisables par les 3 modèles (collector/collection/premium). * Le design fin de chaque modèle s'appuiera sur ces variables et patterns. * * Scopé sous .vdf-dept pour ne pas fuir sur le reste du site. */ .vdf-dept { /* --- Palette --- */ --vdf-vert-foret: #1a3c2e; --vdf-bleu-nuit: #1b2a4a; --vdf-noir: #2c2c2c; /* --- Fonds de section, cran 2 (arbitrage Dan du 19/08/2026) --------------- * Ces DEUX variables ne servent qu'aux fonds de section à plat. Elles sont * distinctes de `--vdf-bleu-nuit`, qui reste à #1b2a4a et continue de porter * les HÉROS, les cartes immersives et la CARTE 3D — arbitrage client de * juillet, la carte reste nuit. * * Le cran monte la LUMINOSITÉ à teinte (221°) et saturation (47 %) constantes : * la couleur ne change pas, elle s'éclaircit. L'écart de 4,5 points entre le * fond et sa tonalité alternée est conservé, sinon le rythme des sections * disparaît. * * avant #1b2a4a / #14203a contraste texte 12,54 or 5,32 * cran 2 #2b4377 / #243968 contraste texte 8,52 or 3,62 * * Les deux restent au-dessus des seuils AA (4,5 texte, 3,0 or). Le cran 2 * amène l'or à 3,62 : conforme, mais c'est la limite basse — descendre d'un * cran de plus le ferait passer sous le seuil. */ --vdf-fond-section: #2b4377; --vdf-fond-section-alt: #243968; /* --- Les rôles dérivés du bleu roi (20/08/2026) --------------------------- * Chacun est obtenu en appliquant à sa valeur d'origine LE MÊME écart que le * cran 2 a appliqué au fond de section : +12,0 points de luminosité, teinte et * saturation inchangées. Les écarts relatifs entre les rôles sont donc * conservés — un cartouche reste plus clair que le pied de page, qui reste * plus sombre qu'une section. * * rôle avant après * cartouche / carte #16223c -> #263b69 * pied de page #0f1626 -> #202f52 * survol de commande #232d3d -> #394a64 */ --vdf-fond-carte: #263b69; /* cartouches, cartes de village, trio, partenaires */ --vdf-fond-pied: #202f52; /* pied de page */ --vdf-fond-survol: #394a64; /* survol des commandes de carte */ /* --- Fonds de CARTOGRAPHIE : volontairement PAS au cran 2 ----------------- * Ces fonds encadrent des tuiles Leaflet sombres. Les éclaircir dessinerait un * liseré clair autour d'une carte sombre — le défaut serait visible alors que * la couleur, elle, serait « conforme ». Ils passent en variable pour sortir du * dur, et gardent leur valeur : une variable n'oblige pas à changer de valeur, * elle oblige à ne plus la répéter. */ --vdf-fond-carto: #0b1120; /* conteneur Leaflet */ --vdf-fond-carto-clair: #0e1626; /* Texte pose SUR l'or : contraste 6,76 avec --vdf-or, verifie. Il etait ecrit en dur a sept endroits ; une seule source desormais. */ --vdf-sur-or: #0e1626; /* Fond du bouton principal du hero, MESURE sur la maquette client du 22/08 : rgb(5, 31, 72). Bien plus sombre que le fond de section, c'est ce qui lui donne son poids sur la photo. Contraste avec le blanc casse : 16,7. */ --vdf-cta-fond: #051f48; /* Pastille de legende « nature » : couleur SEMANTIQUE, pas un fond de charte. Elle entre en variable pour ne plus etre repetee, et garde sa valeur — le vert dit « nature », le bleu roi ne le dirait pas. */ --vdf-vert-legende: #4caf7d; --vdf-or: #c2983f; /* or ambré chaud (retour client : moins jaune, accordé à la Tour Eiffel dorée) */ --vdf-or-clair: #e3c079; /* hover / surbrillance (champagne chaud cohérent) */ --vdf-or-fonce: #a8862f; /* actif */ --vdf-or-chaud: #e0a83a; /* or chaud lumineux "Tour Eiffel" : réservé aux CTA Réserver (retour client) */ --vdf-or-chaud-clair: #f0c258; /* hover des CTA Réserver */ --vdf-cuivre: #b87333; --vdf-teal: #2dd4bf; /* villages incontournables (complémentaire de l'or, lisible sur fond sombre) */ --vdf-teal-clair: #5eead4; /* hover / surbrillance villages */ --vdf-blanc-casse: #f5f0e8; --vdf-overlay-hero: linear-gradient(180deg, rgba(20,27,39,0.15) 0%, rgba(20,27,39,0.45) 50%, rgba(20,27,39,0.85) 100%); /* --- Typographies (titre modifiable selon choix client) --- */ --vdf-font-titre: 'Cinzel', Georgia, 'Times New Roman', serif; --vdf-font-soustitre: 'Playfair Display', Georgia, serif; --vdf-font-corps: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* --- Echelle typographique --- */ --vdf-fs-hero: clamp(2.6rem, 7vw, 5.5rem); /* grand titre departement (capitales) */ --vdf-fs-num: clamp(1rem, 2vw, 1.5rem); /* numero de departement */ --vdf-fs-h2: clamp(1.6rem, 3.5vw, 2.6rem); --vdf-fs-soustitre: clamp(1.05rem, 2.2vw, 1.45rem); --vdf-fs-corps: 1.05rem; --vdf-fs-petit: 0.875rem; --vdf-ls-caps: 0.08em; /* letter-spacing des capitales serif */ --vdf-lh-titre: 1.05; --vdf-lh-corps: 1.65; /* --- Espacement --- */ --vdf-space-xs: 0.5rem; --vdf-space-sm: 1rem; --vdf-space-md: 2rem; --vdf-space-lg: 4rem; --vdf-space-xl: 6rem; --vdf-container: 1200px; --vdf-radius: 10px; font-family: var(--vdf-font-corps); font-size: var(--vdf-fs-corps); line-height: var(--vdf-lh-corps); color: var(--vdf-blanc-casse); /* LOT 1, 20/08/2026 — LE FOND DE BASE PASSE AU BLEU ROI. Il valait `--vdf-blanc-casse`, le creme. Toute page ne posant pas son propre fond heritait donc du creme et NON du bleu : c'est ce qui laissait la racine sur l'ancienne palette alors que le cran 2 etait pose partout ailleurs. La couleur de texte bascule AVEC le fond, sinon on obtient du sombre sur du bleu. Verifie avant d'ecrire : les 11 regles qui posent du texte sombre sous `.vdf-dept` ont TOUTES leur propre fond clair (des boutons dores). Aucune ne dependait du creme herite. */ background: var(--vdf-fond-section); } /* --- Conteneurs / sections --- */ .vdf-dept .vdf-section { width: 100%; padding: var(--vdf-space-lg) var(--vdf-space-md); } .vdf-dept .vdf-section--sombre { background: var(--vdf-fond-section); color: var(--vdf-blanc-casse); } .vdf-dept .vdf-section--foret { background: var(--vdf-vert-foret); color: var(--vdf-blanc-casse); } /* LA BANDE VERTE, RAMENÉE D'UN CRAN — 29/08/2026, demande client « très épaisse ». Elle mesurait 260 px à 850 comme à 1280, dont 128 px de seul padding vertical. La valeur n'est pas choisie au goût : elle descend d'UN CRAN de l'échelle maison, --vdf-space-lg (4rem, 64 px) -> --vdf-space-md (2rem, 32 px), le cran qui sert déjà de padding horizontal à toutes les sections. Attendu : 260 - 2x32 = 196 px. PREMIUM SEULEMENT, et c'est déjà vrai dans les faits : sur collector, la l. 678 écrase le fond de --foret en bleu, il n'y a pas de bande verte à réduire là-bas. Le fond ne bouge pas, les contenus ne bougent pas, la couleur reste. */ .vdf-dept--premium .vdf-section--foret { padding-block: var(--vdf-space-md); } .vdf-dept .vdf-container { max-width: var(--vdf-container); margin-inline: auto; } /* --- Typographie --- */ .vdf-dept .vdf-titre { font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; letter-spacing: var(--vdf-ls-caps); line-height: var(--vdf-lh-titre); font-size: var(--vdf-fs-hero); margin: 0; } .vdf-dept .vdf-num { font-family: var(--vdf-font-titre); font-size: var(--vdf-fs-num); letter-spacing: 0.2em; color: var(--vdf-or-clair); } .vdf-dept .vdf-soustitre { font-family: var(--vdf-font-soustitre); font-style: italic; font-size: var(--vdf-fs-soustitre); font-weight: 400; } .vdf-dept h2.vdf-h2 { font-family: var(--vdf-font-titre); text-transform: uppercase; letter-spacing: var(--vdf-ls-caps); font-size: var(--vdf-fs-h2); color: var(--vdf-vert-foret); margin: 0 0 var(--vdf-space-md); } /* H2 sur sections sombres : or (lisible + charte) au lieu du vert foncé */ .vdf-dept .vdf-section--sombre h2.vdf-h2 { color: var(--vdf-or-clair); } /* or clair : mesure sous 4,5:1 en or de charte sur ce fond (158) */ /* La bande FORÊT garde l'or de charte : l'or y est mesuré 4,54:1 pour un seuil de 3 — au-dessus du plancher, donc rien n'y change. */ .vdf-dept .vdf-section--foret h2.vdf-h2 { color: var(--vdf-or); } .vdf-dept .vdf-filet-or { width: 64px; height: 3px; background: var(--vdf-or); border: 0; margin: var(--vdf-space-sm) 0; } /* --- HERO : image de fond + overlay sombre dégradé --- */ .vdf-dept .vdf-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: var(--vdf-blanc-casse); /* Fond degrade sombre par defaut (avant les images HD du client) ; l'image Hero (vdf-hero__img) le recouvre quand elle est renseignee. */ background: linear-gradient(135deg, var(--vdf-vert-foret) 0%, var(--vdf-bleu-nuit) 100%); } .vdf-dept .vdf-hero::after { content: ""; position: absolute; inset: 0; background: var(--vdf-overlay-hero); z-index: 1; } .vdf-dept .vdf-hero__inner { position: relative; z-index: 2; padding: var(--vdf-space-lg) var(--vdf-space-md); width: 100%; } .vdf-dept .vdf-hero .vdf-titre { color: var(--vdf-blanc-casse); text-shadow: 0 2px 16px rgba(0,0,0,0.5); } /* --- Badges points d'interet (pastilles posées sur le Hero) --- */ .vdf-dept .vdf-badges { display: flex; flex-wrap: wrap; gap: var(--vdf-space-sm); margin-top: var(--vdf-space-md); } .vdf-dept .vdf-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(20, 27, 39, 0.55); border: 1px solid rgba(201, 168, 76, 0.5); border-radius: 999px; backdrop-filter: blur(4px); color: var(--vdf-blanc-casse); font-size: var(--vdf-fs-petit); } .vdf-dept .vdf-badge__icone { color: var(--vdf-or); display: inline-flex; } /* --- Barre de statistiques (horizontale, séparateurs, icônes) --- */ .vdf-dept .vdf-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vdf-space-md); padding: var(--vdf-space-md); } .vdf-dept .vdf-stat { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 120px; position: relative; } .vdf-dept .vdf-stat + .vdf-stat::before { content: ""; position: absolute; left: calc(var(--vdf-space-md) / -2); top: 10%; height: 80%; width: 1px; background: rgba(201, 168, 76, 0.4); } .vdf-dept .vdf-stat__valeur { font-family: var(--vdf-font-titre); font-size: 1.7rem; color: var(--vdf-or); } .vdf-dept .vdf-stat__label { font-size: var(--vdf-fs-petit); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; } /* --- Cartes de villages --- */ .vdf-dept .vdf-villages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--vdf-space-md); } .vdf-dept .vdf-village { /* Migre le 20/08 : cette carte etait blanche en dur. Elle appartient au modele de BASE, pas aux modeles sombres — le Collector la surcharge en --vdf-fond-carte. `--vdf-blanc-casse` la remet dans la charte sans changer son role. */ background: var(--vdf-blanc-casse); border-radius: var(--vdf-radius); overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.08); } .vdf-dept .vdf-village__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .vdf-dept .vdf-village__body { padding: var(--vdf-space-sm) 1.2rem 1.4rem; } .vdf-dept .vdf-village__nom { font-family: var(--vdf-font-soustitre); font-size: 1.25rem; color: var(--vdf-vert-foret); margin: 0 0 0.4rem; } /* --- Images : lazy + responsive par défaut --- */ .vdf-dept img { max-width: 100%; height: auto; } /* --- CTA --- */ .vdf-dept .vdf-cta { text-align: center; } .vdf-dept .vdf-bouton { display: inline-block; padding: 0.9rem 2.2rem; background: var(--vdf-or); color: var(--vdf-noir); font-family: var(--vdf-font-corps); font-weight: 600; letter-spacing: 0.03em; text-decoration: none; border-radius: 999px; border: 2px solid var(--vdf-or); transition: background 0.2s, color 0.2s; } .vdf-dept .vdf-bouton:hover { background: transparent; color: var(--vdf-or); } /* Boutons "Réserver" (Préparez votre séjour) : CTA PRINCIPAUX en OR CHAUD "Tour Eiffel" (retour client). Dorés pleins, texte sombre lisible, restent remplis au survol (or chaud plus clair) pour ressortir. */ .vdf-dept .vdf-partenaires__liens .vdf-bouton { background: var(--vdf-or-chaud); color: var(--vdf-noir); border-color: var(--vdf-or-chaud); box-shadow: 0 6px 22px rgba(224, 168, 58, .32); } .vdf-dept .vdf-partenaires__liens .vdf-bouton:hover, .vdf-dept .vdf-partenaires__liens .vdf-bouton:focus-visible { background: var(--vdf-or-chaud-clair); color: var(--vdf-noir); border-color: var(--vdf-or-chaud-clair); } /* --- Bloc émotion / citation (collection + collector) --- */ .vdf-dept .vdf-emotion { text-align: center; max-width: 760px; margin-inline: auto; } .vdf-dept .vdf-citation { font-family: var(--vdf-font-soustitre); font-style: italic; font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.4; } .vdf-dept .vdf-citation__auteur { font-size: var(--vdf-fs-petit); text-transform: uppercase; letter-spacing: 0.1em; color: var(--vdf-or); margin-top: var(--vdf-space-sm); } /* --- Patterns complémentaires (utilisés par les helpers de rendu) --- */ .vdf-dept .vdf-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .vdf-dept .vdf-hero__eyebrow { font-family: var(--vdf-font-corps); text-transform: uppercase; letter-spacing: 0.15em; font-size: var(--vdf-fs-petit); color: var(--vdf-or); margin: 0 0 0.5rem; } .vdf-dept .vdf-village__desc { font-size: var(--vdf-fs-petit); color: #555; margin: 0 0 0.6rem; } .vdf-dept .vdf-village__lien { color: var(--vdf-cuivre); font-weight: 600; text-decoration: none; font-size: var(--vdf-fs-petit); } .vdf-dept .vdf-village__lien:hover { color: var(--vdf-or-fonce); } .vdf-dept .vdf-carte-immersive__img { width: 100%; border-radius: var(--vdf-radius); display: block; } .vdf-dept .vdf-saviez { max-width: 760px; } .vdf-dept .vdf-saviez__contenu { font-size: 1.1rem; } .vdf-dept .vdf-partenaires__liens { display: flex; flex-wrap: wrap; gap: var(--vdf-space-sm); justify-content: center; } .vdf-dept .vdf-cta__texte { max-width: 560px; margin: 0 auto var(--vdf-space-md); } .vdf-dept .vdf-emotion__texte { font-size: 1.15rem; margin-bottom: var(--vdf-space-md); } /* --- Squelette de socle (avant design fin) --- */ .vdf-dept .vdf-dept__skeleton { padding: var(--vdf-space-xl) var(--vdf-space-md); text-align: center; } .vdf-dept .vdf-dept__marqueur { font-family: var(--vdf-font-corps); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--vdf-fs-petit); color: var(--vdf-or); } .vdf-dept .vdf-dept__titre { font-family: var(--vdf-font-titre); text-transform: uppercase; letter-spacing: var(--vdf-ls-caps); font-size: var(--vdf-fs-hero); color: var(--vdf-vert-foret); margin: var(--vdf-space-sm) 0 0; } /* ============================================================================ MODELE COLLECTOR - design fin du hero (maquette Paris). ========================================================================== */ .vdf-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; } .vdf-dept--collector { --vdf-fs-collector-num: clamp(4rem, 10vw, 8rem); /* "75" : proportions template + panneau moins haut -> descend vers le bas du hero */ --vdf-fs-collector-nom: clamp(2.4rem, 6.5vw, 5rem); --vdf-fs-h2: clamp(1.25rem, 2.7vw, 2rem); /* titres de section réduits ~22% (retour client), même hiérarchie */ --vdf-header-h: 88px; /* hauteur réelle du header fixe en DESKTOP (mesurée 1280-1920 ; 77px en mobile) */ --vdf-vcard-body-min: 130px; /* 120 + 10 px de place pour la flèche (signal 256). Corps RÉDUIT (retour client : max de place à la photo) ; plancher = corps le plus haut (kicker + nom 2 lignes + desc 2 lignes + flèche) -> villages = secrets = expériences, spread 0 */ } /* Bande 2 colonnes : cartes étroites -> les noms longs des secrets passent sur 3 lignes. On remonte le plancher commun pour préserver l'égalité stricte des 3 grilles. */ @media (max-width: 600px) and (min-width: 381px) { .vdf-dept--collector { --vdf-vcard-body-min: 150px; } /* 140 + 10 (signal 256) */ } /* --- Hero : grille bas-gauche, image de fond plein cadre, LCP --- */ .vdf-dept--collector .vdf-hero { display: grid; grid-template-columns: minmax(0, 620px) 1fr; grid-template-rows: 1fr auto; /* contenu (haut) + barre de stats intégrée (bas) */ align-items: end; min-height: 100vh; min-height: 100svh; /* Réserve la hauteur du header FIXE (88px desktop, mesuré) + marge, en HAUT du hero, à TOUTES les largeurs : le panneau bottom-aligné ne peut plus remonter sous le header sur les viewports courts (13-15" : 1280x800/720, 1366x768...). Robuste quelle que soit la hauteur d'écran. */ padding-top: calc(var(--vdf-header-h, 88px) + 1.75rem); background: var(--vdf-bleu-nuit); /* LQIP gratuit pendant le decode de l'image */ overflow: hidden; } /* Calage badges<->image : l'image ET la couche de badges partagent la MEME boite 16:9 "cover" (centree facon object-position 60%/50%). Les positions x/y % des badges tombent donc exactement sur l'image, quel que soit le ratio d'ecran (16:9, 16:10, ultralarge...). */ .vdf-dept--collector .vdf-hero__media, .vdf-dept--collector .vdf-hero__poi { position: absolute; top: 50%; left: 72%; transform: translate(-72%, -50%); /* cadrage : montre + le côté droit (Tour Eiffel) recentrée, moins de gauche (retour client) ; image + badges partagent la boîte -> calage préservé */ /* ========================================================================== 16/9 PAR CONSTRUCTION, ET NON PAR COÏNCIDENCE. ========================================================================== La version précédente calculait les deux dimensions séparément : width: max(100%, calc(100svh * 16 / 9)); height: max(100%, calc(100vw * 9 / 16)); Le ratio n'en sortait à 16/9 que si « 100% » valait exactement le viewport. Or .vdf-hero a min-height:100svh mais son contenu (panneau + barre de stats) mesure 800 à 930 px SELON LA FICHE : dès que la fenêtre est plus courte, le second max() retournait la hauteur réelle du hero et le ratio décrochait. Mesuré avant correctif, à 1280x800 : ratio 1,559 sur les Bouches-du-Rhône, 1,657 sur Paris, 1,778 sur la Guadeloupe — trois valeurs pour trois fiches. Comme l'image est en object-fit:cover, cet écart de ratio déplaçait les repères : jusqu'à 7,0 points sur Paris à 850 px. Ici, une SEULE dimension est calculée et la hauteur découle du ratio. Le décrochage devient impossible. Couverture : W = max(hero_w, hero_h × 16/9), donc H = W × 9/16 >= hero_h. La boîte couvre toujours le hero, comme avant. --vdf-hero-h est posée par assets/js/hero-ratio.js (ResizeObserver). Repli sur 100svh si le script ne tourne pas, plus min-height:100% qui garantit la couverture — on retombe alors sur le comportement d'avant, jamais pire. */ width: max(100%, calc(var(--vdf-hero-h, 100svh) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; min-height: 100%; } .vdf-dept--collector .vdf-hero__media { z-index: 0; } .vdf-dept--collector .vdf-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Overlay : dense a GAUCHE (lisibilite du texte) + ancrage vertical bas */ .vdf-dept--collector .vdf-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15,20,32,0.78) 0%, rgba(15,20,32,0.55) 26%, rgba(15,20,32,0.24) 52%, rgba(15,20,32,0) 76%), linear-gradient(0deg, rgba(11,16,28,0.6) 0%, rgba(11,16,28,0) 42%); } /* --- Bloc texte gauche : PANNEAU encadré (template) --- Le bloc repose sur un cartouche sombre translucide (léger flou) détaché de la photo par une fine bordure dorée + coins arrondis. Les grandes marges remplacent l'ancien padding externe pour insérer le panneau dans la colonne sans toucher les bords du hero. Le badge rond reste HORS de ce panneau (élément frère). */ .vdf-dept--collector .vdf-hero__contenu { position: relative; z-index: 2; grid-column: 1; align-self: end; container-type: inline-size; /* 100cqi = largeur intérieure du panneau -> pilote la taille scalable du titre */ /* Panneau ÉTROIT façon template, légèrement réduit (retour client). CONTENU CENTRÉ (chiffre + texte). */ max-width: clamp(280px, 25vw, 375px); margin: 0 var(--vdf-space-md) clamp(1.6rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 3rem); padding: clamp(1.1rem, 2.2vh, 1.6rem) clamp(1.1rem, 1.7vw, 1.6rem); text-align: center; /* Fond 100 % TRANSPARENT (retour client, call post-V1) : « comme pour les statistiques […] comme si on a une vue sur le hero en même temps. Mais tous. » Plus de voile ni de backdrop-filter ni d'ombre portée : cadre doré seul, la photo traverse le panneau. La lisibilité repose sur les text-shadow des textes (vérifiée sur les 6 heros réels). */ background: transparent; border: 1.5px solid rgba(194, 152, 63, .85); /* --vdf-or : cadre franc, comme le cadre doré des stats */ border-radius: var(--vdf-radius); color: var(--vdf-blanc-casse); } .vdf-dept--collector .vdf-hero__eyebrow { font-family: var(--vdf-font-corps); font-weight: 600; text-transform: uppercase; letter-spacing: 0.32em; font-size: clamp(0.7rem, 1.1vw, 0.82rem); color: var(--vdf-or); margin: 0 0 clamp(0.6rem, 1.6vh, 1rem); } /* Petit diamant devant l'eyebrow (style template) */ .vdf-dept--collector .vdf-hero__eyebrow::before { content: "\25C6\00a0\00a0"; font-size: .8em; } .vdf-dept--collector .vdf-hero__num { display: block; font-family: var(--vdf-font-titre); font-weight: 700; font-size: var(--vdf-fs-collector-num); line-height: 0.82; letter-spacing: 0.01em; color: var(--vdf-or); margin: 0; text-shadow: 0 4px 28px rgba(0,0,0,0.5); } .vdf-dept--collector .vdf-hero__nom { font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; /* TAILLE SCALABLE (remplace les ajustements manuels par département) : la font s'adapte au PLUS LONG MOT INSÉCABLE du nom (--vdf-nom-maxword, injecté au rendu) pour qu'il tienne toujours dans la largeur du panneau (100cqi = largeur intérieure du panneau, cf. container-type sur .vdf-hero__contenu). - noms courts (PARIS) : plafonnés à var(--vdf-fs-collector-nom) -> restent grands ; - noms à mot long (GUADELOUPE, ATLANTIQUES) : réduits juste ce qu'il faut, jamais débordés ni coupés. hyphens:none -> coupe uniquement sur les vrais traits d'union ; overflow-wrap:break-word = filet ultime. */ /* facteur 1.0 (et non 1.2) : chaque titre occupe ~76% de la largeur du panneau en Chrome -> ~24% de marge, qui absorbe les moteurs rendant Cinzel plus large (Safari) et les zooms. À 1.2 la marge n'était que ~9% (91%) -> "GUADELOUPE" cassait mid-word hors Chrome. Le mot insécable le plus long reste toujours ENTIER, à toutes largeurs, tous navigateurs. */ font-size: clamp(1.4rem, calc(100cqi / var(--vdf-nom-maxword, 6)), var(--vdf-fs-collector-nom)); line-height: 1.05; letter-spacing: 0.03em; color: var(--vdf-blanc-casse); margin: 0.2rem 0 0; text-shadow: 0 2px 18px rgba(0,0,0,0.55); overflow-wrap: break-word; hyphens: none; } .vdf-dept--collector .vdf-hero__filet { display: block; width: 72px; height: 2px; background: var(--vdf-or); margin: clamp(.6rem, 1.5vh, .9rem) auto; } .vdf-dept--collector .vdf-hero__slogan { font-family: var(--vdf-font-corps); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(0.85rem, 1.5vw, 1.05rem); color: var(--vdf-or); margin: 0; font-style: normal; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } /* Paragraphe descriptif (template) : clair, lisible, largeur limitée */ .vdf-dept--collector .vdf-hero__desc { margin: clamp(.7rem, 1.6vh, 1rem) 0 0; font-family: var(--vdf-font-corps); font-size: clamp(.8rem, .95vw, .9rem); line-height: 1.5; color: rgba(245, 240, 232, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); } /* Bouton film + sous-ligne (template : "Paris, autrement (2 min)") */ .vdf-dept--collector .vdf-hero__film-wrap { margin-top: clamp(.8rem, 2vh, 1.3rem); display: flex; flex-direction: column; gap: .45rem; align-items: center; } .vdf-dept--collector .vdf-hero__film-sous { font-family: var(--vdf-font-soustitre); font-style: italic; font-size: .85rem; color: var(--vdf-or-clair); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); padding-left: .2rem; } .vdf-dept--collector .vdf-hero__film { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; padding: 0.6rem 1.3rem 0.6rem 0.7rem; border: 1px solid var(--vdf-or); border-radius: 999px; color: var(--vdf-blanc-casse); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; transition: background 0.2s, color 0.2s; } .vdf-dept--collector .vdf-hero__film:hover, .vdf-dept--collector .vdf-hero__film:focus-visible { background: var(--vdf-or); color: var(--vdf-noir); } .vdf-dept--collector .vdf-hero__film-play { width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid currentColor; position: relative; flex: none; } .vdf-dept--collector .vdf-hero__film-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 0.5em solid currentColor; border-top: 0.32em solid transparent; border-bottom: 0.32em solid transparent; } /* --- Indice de scroll --- */ .vdf-dept--collector .vdf-hero__scroll { position: absolute; z-index: 2; bottom: 1.4rem; right: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--vdf-or-clair); } .vdf-dept--collector .vdf-hero__scroll-mot { font-family: var(--vdf-font-corps); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; } .vdf-dept--collector .vdf-hero__scroll::after { content: ""; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: vdf-scroll-bob 1.8s ease-in-out infinite; } @keyframes vdf-scroll-bob { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } } /* --- Badges points d'interet (absolus) --- */ /* .vdf-hero__poi : position/boite 16:9 héritées de la règle de calage ci-dessus. */ .vdf-dept--collector .vdf-hero__poi { z-index: 6; pointer-events: none; } .vdf-dept--collector .vdf-poi { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: auto; margin: 0; border: 0; background: none; cursor: default; text-decoration: none; font: inherit; color: inherit; line-height: 0; animation: vdf-poi-in 0.6s ease both; animation-delay: calc(0.55s + var(--i, 0) * 0.09s); } .vdf-dept--collector .vdf-poi--lien { cursor: pointer; } .vdf-dept--collector .vdf-poi:hover, .vdf-dept--collector .vdf-poi:focus-visible { z-index: 12; } @keyframes vdf-poi-in { from { opacity: 0; } to { opacity: 1; } } /* Point : coeur clair + anneau or + halo sombre (ressort sur les lumieres de la ville) */ .vdf-dept--collector .vdf-poi__dot { display: block; width: 14px; height: 14px; border-radius: 50%; position: relative; background: var(--vdf-blanc-casse); box-shadow: 0 0 0 2px var(--vdf-or), 0 0 0 5px rgba(20,27,39,0.55), 0 0 14px 2px rgba(224,199,126,0.6); transition: transform 0.2s, box-shadow 0.2s; } /* Pulse compositor-friendly (transform + opacity, zero repaint) */ .vdf-dept--collector .vdf-poi__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--vdf-or); opacity: 0; animation: vdf-poi-pulse 2.8s ease-out infinite; will-change: transform, opacity; } @keyframes vdf-poi-pulse { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } } .vdf-dept--collector .vdf-poi:hover .vdf-poi__dot, .vdf-dept--collector .vdf-poi:focus-visible .vdf-poi__dot { transform: scale(1.2); box-shadow: 0 0 0 2px var(--vdf-or-clair), 0 0 0 6px rgba(20,27,39,0.7), 0 0 18px 4px rgba(224,199,126,0.85); } .vdf-dept--collector .vdf-poi:focus-visible { outline: none; } .vdf-dept--collector .vdf-poi:focus-visible .vdf-poi__dot { box-shadow: 0 0 0 2px var(--vdf-or-clair), 0 0 0 5px rgba(20,27,39,0.85), 0 0 0 8px var(--vdf-blanc-casse), 0 0 20px 5px rgba(224,199,126,0.9); } /* Cartouche VISIBLE en permanence (maquette) : a cote du point, relie par un trait or. */ .vdf-dept--collector .vdf-poi__panel { position: absolute; top: 50%; transform: translateY(-50%); /* 2 COLONNES (template) : GRAND picto doré à gauche (centré verticalement), bloc texte à droite */ display: flex; align-items: center; gap: .6rem; min-width: 11rem; max-width: 15rem; padding: 0.55rem 0.75rem; background: rgba(17, 24, 38, 0.86); border: 1px solid var(--vdf-or); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,0.5); text-align: left; line-height: 1.35; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .vdf-dept--collector .vdf-poi--right .vdf-poi__panel { left: calc(50% + 22px); } .vdf-dept--collector .vdf-poi--left .vdf-poi__panel { right: calc(50% + 22px); } /* Trait reliant le cartouche au point */ .vdf-dept--collector .vdf-poi__panel::before { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: var(--vdf-or); } .vdf-dept--collector .vdf-poi--right .vdf-poi__panel::before { right: 100%; } .vdf-dept--collector .vdf-poi--left .vdf-poi__panel::before { left: 100%; } /* Survol / focus : mise en avant (agrandissement leger + glow) */ .vdf-dept--collector .vdf-poi:hover .vdf-poi__panel, .vdf-dept--collector .vdf-poi:focus-visible .vdf-poi__panel { transform: translateY(-50%) scale(1.06); border-color: var(--vdf-or-clair); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 0 1px var(--vdf-or-clair), 0 0 22px rgba(224,199,126,0.4); } .vdf-dept--collector .vdf-poi__txt { display: block; min-width: 0; } .vdf-dept--collector .vdf-poi__nom { display: block; font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; line-height: 1.2; color: var(--vdf-blanc-casse); } /* nom en BLANC (template) ; seule l'icône reste or */ /* GRAND pictogramme doré, colonne gauche (structure template) */ .vdf-dept--collector .vdf-poi__ic { flex: none; display: inline-flex; color: var(--vdf-or); } .vdf-dept--collector .vdf-poi__ic-svg { width: 32px; height: 32px; } .vdf-dept--collector .vdf-poi--lien .vdf-poi__nom::after { content: " \2192"; opacity: 0.85; } .vdf-dept--collector .vdf-poi--lien:hover .vdf-poi__nom { text-decoration: underline; text-decoration-color: var(--vdf-or); } .vdf-dept--collector .vdf-poi__desc { display: block; font-family: var(--vdf-font-corps); font-size: 0.66rem; line-height: 1.4; color: var(--vdf-blanc-casse); opacity: 0.9; margin-top: 0.15rem; } /* Liste accessible des points (mobile/tablette <900px) - masquee en desktop */ .vdf-dept--collector .vdf-hero__poi-liste { display: none; } /* --- Barre de stats INTÉGRÉE en bas du hero (retour client) : bande pleine largeur sur l'image, 2e rangée de la grille hero. Valeurs Cinzel or, libellés clairs, séparateurs dorés. --- */ .vdf-dept--collector .vdf-hero__stats { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 3; background: linear-gradient(0deg, rgba(11, 16, 28, .85) 0%, rgba(11, 16, 28, .55) 55%, rgba(11, 16, 28, 0) 100%); padding: 2.4rem 0 1.5rem; } .vdf-dept--collector .vdf-hero__stats-inner { /* GRILLE adaptée au NOMBRE réel de stats (--vdf-stat-count, injecté au rendu) : une seule rangée, jamais d'orpheline ni de colonne vide, quel que soit le département (retour client : "+80" ne tombe plus à 1280-1440). Cadre doré ÉPAISSI (1px .5 -> 2px .75, plus visible), borné + centré. */ display: grid; grid-template-columns: repeat(var(--vdf-stat-count, 6), minmax(0, 1fr)); align-items: center; gap: .5rem 2.2rem; width: 100%; max-width: min(1180px, calc(var(--vdf-stat-count, 6) * 200px), 94vw); margin-inline: auto; padding: 1rem clamp(1.4rem, 2.5vw, 2.2rem); border: 2.5px solid rgba(201, 168, 76, .9); border-radius: var(--vdf-radius); } .vdf-dept--collector .vdf-hero__stat { position: relative; display: flex; flex-direction: row; align-items: center; gap: .75rem; text-align: left; min-width: 88px; max-width: 230px; } .vdf-dept--collector .vdf-hero__stat-ic { flex: none; display: inline-flex; color: var(--vdf-or); opacity: .9; } .vdf-dept--collector .vdf-hero__stat-svg { width: 30px; height: 30px; } /* taille équilibrée avec la valeur (retour client) */ .vdf-dept--collector .vdf-hero__stat-txt { display: flex; flex-direction: column; } .vdf-dept--collector .vdf-hero__stat + .vdf-hero__stat::before { content: ""; position: absolute; left: -1.1rem; top: 14%; height: 72%; width: 1px; background: rgba(201, 168, 76, .45); } /* Sous 1180px la ligne unique ne tient plus : GRILLE RÉGULIÈRE (fini le quinconce du flex-wrap). Séparateurs masqués (faux en grille), cadre doré conservé autour d'une grille nette. 3 colonnes (tablette) -> 2 (mobile) -> 1 (très petit). Cellules alignées en haut. */ /* --- Lisibilité du hero sur téléphone (retour client, 2026-08-11) --- Le voile des stats n'a jamais changé de couleur selon la largeur : c'est UNE seule règle, non conditionnelle. Ce qui change, c'est la HAUTEUR du bloc — 2 colonnes au lieu de 6 font passer les stats de 164 px à 331 px sur Paris, soit 39 % de l'écran. Le dégradé s'étire donc sur une bande bien plus haute, et sa zone opaque à 85 % mange le bas de la photo : d'où l'impression d'un « fond noir » propre au mobile. On traite la cause : sous 900 px, le voile est allégé et son point d'opacité maximale remonté, ce qui laisse voir l'image sur toute la hauteur du bloc. Aucun texte n'est touché : les valeurs sont blanches, les libellés clairs, ils gardent leur ombre portée. */ @media (max-width: 900px) { .vdf-dept--collector .vdf-hero__stats { background: linear-gradient(0deg, rgba(11, 16, 28, .62) 0%, rgba(11, 16, 28, .34) 60%, rgba(11, 16, 28, 0) 100%); padding-top: 1.6rem; /* était 2.4rem : autant de hauteur de voile en moins */ } } @media (max-width: 1180px) { .vdf-dept--collector .vdf-hero__stat + .vdf-hero__stat::before { display: none; } .vdf-dept--collector .vdf-hero__stats-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1rem 1.3rem; max-width: min(720px, 94vw); } .vdf-dept--collector .vdf-hero__stat { max-width: none; align-items: flex-start; } .vdf-dept--collector .vdf-hero__stat-ic { margin-top: .15rem; } /* icône calée sur la 1re ligne du texte */ } @media (max-width: 480px) { /* vrais téléphones : le panneau prend toute la largeur (lisibilité), 75/PARIS restent empilés. width définie (calc 100%-2rem) requise avec container-type:inline-size (sinon collapse en flex). */ .vdf-dept--collector .vdf-hero__contenu { width: calc(100% - 2rem); max-width: none; } } @media (max-width: 700px) { .vdf-dept--collector .vdf-hero__stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .vdf-dept--collector .vdf-hero__stats-inner { grid-template-columns: minmax(0, 1fr); } } /* Libellés dorés du bandeau au téléphone (F19, brief 23) : « ÉDITION COLLECTOR » et le slogan passaient sur le ciel clair de la photo (1,24:1 sur Paris, mesuré sur la capture). Voile sombre derrière le seul libellé, aux bords adoucis par l'ombre portée ; la teinte dorée ne change pas. Rien n'est déplacé : la boîte prend la largeur du texte, centrée comme lui, sans marge intérieure, et l'ombre ne prend pas de place. 600 px et moins : tablette et ordinateur inchangés. */ @media (max-width: 600px) { .vdf-dept--collector .vdf-hero__eyebrow, .vdf-dept--collector .vdf-hero__slogan { width: fit-content; margin-inline: auto; border-radius: 3px; background: rgba(11, 16, 28, .84); box-shadow: 0 0 10px 5px rgba(11, 16, 28, .84); } } .vdf-dept--collector .vdf-hero__stat-val { font-family: var(--vdf-font-titre); color: var(--vdf-blanc-casse); font-size: clamp(1.2rem, 1.85vw, 1.6rem); line-height: 1.15; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); } /* valeur en BLANC (template) ; seule l'icône reste or */ /* Valeur longue (ex. "Capitale mondiale de la culture") : typo réduite -> alignée avec les autres stats. */ .vdf-dept--collector .vdf-hero__stat--long .vdf-hero__stat-val { font-size: clamp(.82rem, 1vw, .98rem); line-height: 1.25; } .vdf-dept--collector .vdf-hero__stat-lab { font-family: var(--vdf-font-corps); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vdf-blanc-casse); opacity: .85; margin-top: .25rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } /* Les stats occupant le bas du hero, l'indice de scroll ferait doublon -> masqué. */ .vdf-dept--collector .vdf-hero__scroll { display: none; } /* --- Cascade d'entree du texte (CSS pur : robuste sans JS) --- */ .vdf-dept--collector .vdf-hero__contenu > * { animation: vdf-hero-in 0.7s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: calc(0.1s + var(--i, 0) * 0.1s); } @keyframes vdf-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* --- Responsive --- */ /* <=900px : les cartouches sur l'image deviennent trop denses (chevauchent le panneau) -> bascule LISTE. MAIS le panneau garde son style ENCADRÉ ÉTROIT (75/PARIS empilés et contraints) au lieu de passer pleine largeur : le client (fenêtre laptop zoomée/scalée ~853px effectifs) voit donc le même bloc premium encadré que sur grand écran, pas une version dégradée. Pleine largeur seulement <=480px. */ @media (max-width: 900px) { /* padding-top = dégagement sous le header fixe (77px) : le panneau démarre SOUS le header, plus aucun chevauchement eyebrow/logo (le contenu, plus haut que le hero, ne remonte plus sous la barre). */ /* flex-column : align-items pilote l'axe HORIZONTAL. La base est 'end' (bas, pour la grille) -> ici 'flex-start' sinon le panneau borné (420px) serait poussé à DROITE. Ancrage bas-GAUCHE (template). */ .vdf-dept--collector .vdf-hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-top: 6rem; } /* panneau encadré ÉTROIT conservé (max-width borné) : le "75 PARIS" reste stacké/contraint dans le cadre doré, ancré bas-gauche, comme sur desktop. */ .vdf-dept--collector .vdf-hero__contenu { align-self: flex-start; width: min(420px, calc(100% - 2rem)); max-width: min(420px, calc(100% - 2rem)); margin: 0 1rem 1.4rem; padding: clamp(1.2rem, 2.4vh, 1.7rem) clamp(1.2rem, 1.8vw, 1.7rem); } /* align-self flex-start : annule le 'end' de la grille. width DÉFINIE (pas seulement max-width) : indispensable avec container-type:inline-size en flex-column (sinon le panneau collapse -> 100cqi et titre au plancher). */ .vdf-dept--collector .vdf-hero__stats { align-self: stretch; margin-top: 1.4rem; } .vdf-dept--collector .vdf-hero__poi-liste { align-self: stretch; } /* la liste POI s'étend sous le panneau (pleine largeur du hero) */ .vdf-dept--collector .vdf-hero__poi { display: none; } .vdf-dept--collector .vdf-hero__scroll { display: none; } /* Voile renforcé sur mobile/tablette : le bloc texte + la liste POI reposent sur du sombre CONSTANT quelle que soit la zone de l'image (correctif lisibilité, vérif humaine). */ .vdf-dept--collector .vdf-hero::after { background: linear-gradient(0deg, rgba(11, 16, 28, .96) 0%, rgba(11, 16, 28, .86) 36%, rgba(11, 16, 28, .55) 62%, rgba(11, 16, 28, .18) 84%, rgba(11, 16, 28, 0) 100%); } /* Liste POI : panneau lisible (fond sombre translucide + liseré doré), items compacts et réguliers : pastille + nom doré + description courte en clair sur UNE ligne (ellipse). Rien ne se fond dans l'image. */ .vdf-dept--collector .vdf-hero__poi-liste { display: block; position: relative; z-index: 2; list-style: none; margin: 1.4rem 0 0; padding: .3rem .95rem; background: rgba(11, 16, 28, .58); border: 1px solid rgba(201, 168, 76, .28); border-radius: var(--vdf-radius); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .vdf-dept--collector .vdf-poi-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(245, 240, 232, .1); } .vdf-dept--collector .vdf-poi-item:last-child { border-bottom: 0; } /* Même structure que le cartouche desktop : GRANDE icône colonne gauche, nom + description EMPILÉS (description sur sa propre ligne, plus d'ellipse inline). */ .vdf-dept--collector .vdf-poi-item__ic { flex: none; display: inline-flex; color: var(--vdf-or); } .vdf-dept--collector .vdf-poi-item__ic-svg { width: 21px; height: 21px; } .vdf-dept--collector .vdf-poi-item__txt { display: block; min-width: 0; } .vdf-dept--collector .vdf-poi-item__nom { display: block; font-family: var(--vdf-font-titre); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; line-height: 1.25; color: var(--vdf-blanc-casse); } /* nom en BLANC (template) ; icône reste or */ .vdf-dept--collector .vdf-poi-item__desc { display: block; margin: .1rem 0 0; font-size: .74rem; line-height: 1.35; color: rgba(245, 240, 232, .8); } .vdf-dept--collector .vdf-poi-item a { text-decoration: none; display: flex; align-items: center; gap: .6rem; min-width: 0; } } /* Portrait : on tire le cadrage vers la Tour Eiffel (x~78) pour la garder visible. */ @media (max-aspect-ratio: 1/1) { .vdf-dept--collector .vdf-hero__media, .vdf-dept--collector .vdf-hero__poi { left: 72%; top: 45%; transform: translate(-72%, -45%); } } @media (prefers-reduced-motion: reduce) { .vdf-dept--collector .vdf-hero__contenu > *, .vdf-dept--collector .vdf-poi { animation: none; opacity: 1; } .vdf-dept--collector .vdf-poi { transform: translate(-50%, -50%); } .vdf-dept--collector .vdf-poi__dot::after, .vdf-dept--collector .vdf-hero__scroll::after { animation: none; } } /* ============================================================================ COLLECTOR - page INTEGRALEMENT sombre/doree (alignee maquette). Plus aucune section fond creme : tout en bleu nuit / noir, texte clair, titres or Cinzel, filets dores. (Hero + barre de stats non touches.) ========================================================================== */ .vdf-dept--collector { background: var(--vdf-fond-section); color: var(--vdf-blanc-casse); } /* Toutes les sections en sombre, rythme par tonalite + filet or de separation */ .vdf-dept--collector .vdf-section, .vdf-dept--collector .vdf-section--sombre, .vdf-dept--collector .vdf-section--foret { background: var(--vdf-fond-section); color: var(--vdf-blanc-casse); border-top: 1px solid rgba(201, 168, 76, 0.14); } .vdf-dept--collector .vdf-section:nth-of-type(even) { background: var(--vdf-fond-section-alt); } /* Titres de section en or + filet dore dessous. Sélecteur h2.vdf-h2 (0,2,1) pour battre la règle de base .vdf-dept h2.vdf-h2 (vert). */ .vdf-dept--collector h2.vdf-h2 { color: var(--vdf-or-clair); } /* or clair : mesure sous 4,5:1 en or de charte sur ce fond (158) */ .vdf-dept--collector h2.vdf-h2::after { content: ""; display: block; width: 64px; height: 2px; background: var(--vdf-or); margin-top: 0.85rem; opacity: 0.9; } .vdf-dept--collector .vdf-cta h2.vdf-h2::after { margin-inline: auto; } /* Collection (maquette 13) : titres de section en BLANC avec UN mot en OR (accent), au lieu du tout-or du Collector. La double classe .vdf-dept--collector.vdf-dept--collection a la même spécificité que la règle collector ci-dessus -> cette règle APRÈS gagne (source order). */ .vdf-dept--collection h2.vdf-h2 { color: var(--vdf-blanc-casse); } /* * LES TITRES DE SECTION DU GABARIT PREMIUM — 22/09/2026. * * Collector et collection ont chacun leur couleur de titre ; le premium n'en avait aucune et * retombait sur la regle de base, le vert forêt #1a3c2e. Mesuré au 220 sur le PIXEL PEINT de * la fiche Corrèze rendue en aperçu : 1,26:1 sur fond bleu nuit rgb(43, 67, 119), pour un * plancher de 3. « VILLAGES INCONTOURNABLES » était illisible, et vérifié à l'œil. * * Le crème est celui de la collection, mesuré sur l'Ain entre 8,43 et 15,38:1. Même sélecteur * et même spécificité (0,2,1) que les deux autres gabarits : rien d'autre ne change. */ .vdf-dept--premium h2.vdf-h2 { color: var(--vdf-blanc-casse); } /* Titre de la section des villages (signal 257, courriel de Jérôme du 12/10/2026) : le libellé en or, « – Commune de [département] » en blanc, dans les quatre gabarits (le Collector a ses titres en or, d'où la règle de la suite). */ .vdf-dept--premium h2.vdf-h2 .vdf-h2__or { color: var(--vdf-or-clair); } .vdf-dept h2.vdf-h2 .vdf-h2__suite { color: var(--vdf-blanc-casse); } .vdf-dept--collection h2.vdf-h2 .vdf-h2__or { color: var(--vdf-or-clair); } /* (0,3,0) : bat le blanc. Or clair : sous 4,5 en or de charte (158) */ /* Le titre "Vivez ... autrement" est dans .vdf-section--sombre, dont la règle de base (0,3,1) bat la règle collection ci-dessus (0,2,1) et forcerait le titre tout-or. Override de MÊME spécificité (0,3,1), placé APRÈS -> gagne ; accent (0,4,1) pour garder le mot en or. */ .vdf-dept--collection .vdf-section--sombre h2.vdf-h2 { color: var(--vdf-blanc-casse); } .vdf-dept--collection .vdf-section--sombre h2.vdf-h2 .vdf-h2__or { color: var(--vdf-or-clair); } /* or clair : mesure sous 4,5:1 en or de charte sur ce fond (158) */ /* ============================================================================ SECTION "Un territoire d'exception / Une terre de caractère" (Collection). 2 colonnes : gauche (texte + bouton + carte illustrée + légende) / droite (texte + 4 piliers). ========================================================================== */ .vdf-dept .vdf-territoire { background: var(--vdf-fond-section); color: var(--vdf-blanc-casse); } /* 3 ZONES (maquette) : texte gauche étroit | CARTE centrale dominante | texte+piliers droite étroit. Zones alignées en HAUT ; la carte (align-self:stretch) remplit la hauteur de la rangée = colonne la plus haute -> harmonieux, pas de grand vide. Colonnes de texte compactes (hauteur du contenu). */ .vdf-dept .vdf-territoire__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.4fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .vdf-dept .vdf-territoire__col--gauche, .vdf-dept .vdf-territoire__col--droite { display: flex; flex-direction: column; } /* SANS CARTE, DEUX COLONNES ÉGALES — signal 235. L'emplacement « Carte à venir » n'est plus rendu : sans cette règle, la colonne de droite glisserait dans la piste centrale large et la troisième piste resterait vide. Une colonne de texte seule prend toute la largeur. Sous 1100 px, l'empilement d'origine reprend (règle plus bas, même spécificité, plus loin). */ .vdf-dept .vdf-territoire--sans-carte .vdf-territoire__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vdf-dept .vdf-territoire--sans-carte .vdf-territoire__grid > :only-child { grid-column: 1 / -1; } /* Titres du triptyque : plus petits + letter-spacing resserré -> tiennent sur 2 lignes MAX dans les colonnes étroites (~239px), au lieu de casser sur 3 lignes (mesuré : "UN TERRITOIRE" = 278px à 32px base -> ~1.6rem pour rentrer). Sélecteur h2.vdf-h2.classe (0,3,1) pour battre .vdf-dept h2.vdf-h2. */ .vdf-dept h2.vdf-h2.vdf-territoire__titre { color: var(--vdf-or); margin: 0 0 1rem; font-size: clamp(1.25rem, 1.75vw, 1.55rem); letter-spacing: .02em; line-height: 1.22; } .vdf-dept--collection .vdf-territoire__titre { color: var(--vdf-or); } /* gold même en collection (titres de blocs) */ .vdf-dept .vdf-territoire__titre::after { content: ""; display: block; width: 56px; height: 2px; background: var(--vdf-or); margin-top: .8rem; opacity: .9; } .vdf-dept .vdf-territoire__texte { color: rgba(245, 240, 232, .82); line-height: 1.7; margin: 0 0 1.4rem; font-size: 1.02rem; } /* Bouton ghost (contour doré, fond transparent) */ .vdf-dept .vdf-bouton--ghost { background: transparent; color: var(--vdf-or); border-color: var(--vdf-or); } .vdf-dept .vdf-bouton--ghost:hover, .vdf-dept .vdf-bouton--ghost:focus-visible { background: var(--vdf-or); color: var(--vdf-noir); } .vdf-dept .vdf-territoire__lien { margin-bottom: 1.6rem; font-size: .82rem; padding: .7rem 1.6rem; } /* Carte CENTRALE dominante : remplit la hauteur de la rangée (stretch) + plancher généreux. */ .vdf-dept .vdf-territoire__carte { position: relative; align-self: stretch; min-height: clamp(320px, 28vw, 440px); border-radius: var(--vdf-radius); overflow: hidden; border: 1px solid rgba(201, 168, 76, .28); background: var(--vdf-fond-carto-clair); line-height: 0; } /* Image de carte : CONTAIN (une carte illustrée doit s'afficher ENTIÈRE, noms/positions des villages préservés ; le fond neutre du cadre fait letterbox). Le placeholder, lui, remplit tout le cadre. */ .vdf-dept .vdf-territoire__carte-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .vdf-dept .vdf-territoire__carte-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; color: rgba(245, 240, 232, .5); background: radial-gradient(130% 90% at 50% 30%, rgba(27, 42, 74, .8), transparent 62%), linear-gradient(160deg, #16223c 0%, #0e1626 100%); } /* Légende EMPILÉE sous le bouton (colonne gauche étroite) */ .vdf-dept .vdf-territoire__legende { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .vdf-dept .vdf-territoire__leg { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(245, 240, 232, .8); } .vdf-dept .vdf-territoire__leg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .vdf-dept .vdf-territoire__leg-dot--nature { background: var(--vdf-vert-legende, #4caf7d); } .vdf-dept .vdf-territoire__leg-dot--eau { background: var(--vdf-teal); } .vdf-dept .vdf-territoire__leg-dot--village { background: var(--vdf-or); } /* Piliers (colonne droite ÉTROITE) : UNE colonne (4 rangées) -> chaque pilier a toute la largeur de la colonne, icône cerclée à GAUCHE + libellé à DROITE qui wrappe (min-width:0). ZÉRO superposition quelle que soit la largeur (fini le 2x2 qui écrasait icône+texte dans des cellules trop étroites). */ .vdf-dept .vdf-territoire__piliers { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; } .vdf-dept .vdf-territoire__pilier { display: flex; align-items: center; gap: .75rem; min-width: 0; } .vdf-dept .vdf-territoire__pilier-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--vdf-or); border: 1px solid rgba(201, 168, 76, .45); background: rgba(201, 168, 76, .06); } .vdf-dept .vdf-territoire__pilier-svg { width: 22px; height: 22px; } .vdf-dept .vdf-territoire__pilier-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; line-height: 1.2; color: var(--vdf-blanc-casse); } /* <=1100px : les 3 zones s'empilent (ordre DOM = texte gauche -> carte pleine largeur -> texte droite + piliers). Carte un peu plus basse (elle prend la pleine largeur). */ @media (max-width: 1100px) { .vdf-dept .vdf-territoire__grid, .vdf-dept .vdf-territoire--sans-carte .vdf-territoire__grid { grid-template-columns: minmax(0, 1fr); } .vdf-dept .vdf-territoire__carte { min-height: clamp(280px, 44vw, 420px); } .vdf-dept .vdf-territoire__legende { flex-flow: row wrap; gap: .5rem 1.5rem; } /* légende sur une ligne quand la zone gauche est pleine largeur */ } @media (max-width: 460px) { .vdf-dept .vdf-territoire__legende { flex-direction: column; } } /* Cartes villages : sombres (les images viennent au point 3) */ .vdf-dept--collector .vdf-village { background: var(--vdf-fond-carte); border: 1px solid rgba(201, 168, 76, 0.16); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .vdf-dept--collector .vdf-village__nom { color: var(--vdf-or-clair); } .vdf-dept--collector .vdf-village__desc { color: rgba(245, 240, 232, 0.78); } .vdf-dept--collector .vdf-village__lien { color: var(--vdf-or); } .vdf-dept--collector .vdf-village__lien:hover { color: var(--vdf-or-clair); } /* Saviez-vous / CTA : texte clair lisible sur sombre */ .vdf-dept--collector .vdf-saviez__contenu, .vdf-dept--collector .vdf-cta__texte { color: rgba(245, 240, 232, 0.88); } .vdf-dept--collector .vdf-saviez__contenu a { color: var(--vdf-or-clair); } /* ============================================================================ COLLECTOR - cartes villages, grille expériences, CTA, bande partenaires (maquette). ========================================================================== */ /* --- Cartes villages : grande image (ou placeholder doré) + nom + desc, hover élégant --- */ .vdf-dept--collector .vdf-villages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vdf-space-md); } .vdf-dept--collector .vdf-village { background: transparent; border: 0; box-shadow: none; border-radius: var(--vdf-radius); overflow: visible; } .vdf-dept--collector .vdf-village__inner { display: block; height: 100%; text-decoration: none; color: inherit; background: var(--vdf-fond-carte); border: 1px solid rgba(201, 168, 76, 0.16); border-radius: var(--vdf-radius); overflow: hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .vdf-dept--collector a.vdf-village__inner:hover { border-color: var(--vdf-or); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); } .vdf-dept--collector .vdf-village__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #1d2b4a 0%, #0e1626 100%); } .vdf-dept--collector .vdf-village__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .vdf-dept--collector .vdf-village__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11, 16, 28, .6) 100%); opacity: .7; transition: opacity .3s ease; } .vdf-dept--collector a.vdf-village__inner:hover .vdf-village__img { transform: scale(1.06); } .vdf-dept--collector a.vdf-village__inner:hover .vdf-village__media::after { opacity: 1; } /* Placeholder élégant (pas d'image en base) : dégradé sombre + icône village dorée centrée */ .vdf-dept--collector .vdf-village__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, rgba(201, 168, 76, .12), transparent 60%); } .vdf-dept--collector .vdf-village__ph-icone { width: 46px; height: 46px; color: var(--vdf-or); opacity: .55; transition: opacity .3s ease; } .vdf-dept--collector a.vdf-village__inner:hover .vdf-village__ph-icone { opacity: .85; } .vdf-dept--collector .vdf-village__body { padding: 1rem 1.1rem 1.3rem; } .vdf-dept--collector .vdf-village__nom { font-family: var(--vdf-font-titre); font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; color: var(--vdf-blanc-casse); margin: 0 0 .4rem; transition: color .25s ease; } .vdf-dept--collector a.vdf-village__inner:hover .vdf-village__nom { color: var(--vdf-or); } .vdf-dept--collector .vdf-village__desc { font-size: var(--vdf-fs-petit); color: rgba(245, 240, 232, .72); margin: 0; line-height: 1.5; } @media (max-width: 992px) { .vdf-dept--collector .vdf-villages { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .vdf-dept--collector .vdf-villages { grid-template-columns: 1fr; } } /* Taille par défaut des icônes SVG dorées (placeholders villages/secrets/expériences, etc.). */ .vdf-dept--collector .vdf-icone-svg { width: 38px; height: 38px; display: block; } /* --- CTA Collector : grand bloc + flèche ronde + kicker --- */ .vdf-dept--collector .vdf-collector-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; text-decoration: none; color: var(--vdf-blanc-casse); background: linear-gradient(120deg, #16223c 0%, #0f1830 100%); border: 1px solid rgba(201, 168, 76, .4); border-radius: 16px; padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3.5rem); position: relative; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .vdf-dept--collector .vdf-collector-cta__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 50%, rgba(201, 168, 76, .14), transparent 55%); pointer-events: none; } .vdf-dept--collector .vdf-collector-cta__inner:hover { border-color: var(--vdf-or); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); } .vdf-dept--collector .vdf-collector-cta__txt { position: relative; z-index: 1; } .vdf-dept--collector .vdf-collector-cta__titre { font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: var(--vdf-blanc-casse); margin: 0; line-height: 1.1; } .vdf-dept--collector .vdf-collector-cta__sous { font-size: 1rem; color: rgba(245, 240, 232, .8); margin: .8rem 0 0; max-width: 48ch; } .vdf-dept--collector .vdf-collector-cta__kicker { font-family: var(--vdf-font-corps); text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; color: var(--vdf-or); margin: 1.2rem 0 0; } .vdf-dept--collector .vdf-collector-cta__arrow { flex: none; width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px); border-radius: 50%; border: 1.5px solid var(--vdf-or); display: flex; align-items: center; justify-content: center; color: var(--vdf-or); background: rgba(201, 168, 76, .06); position: relative; z-index: 1; transition: background .25s ease, color .25s ease, transform .25s ease; } .vdf-dept--collector .vdf-collector-cta__arrow svg { width: 42%; height: 42%; } .vdf-dept--collector .vdf-collector-cta__inner:hover .vdf-collector-cta__arrow { background: var(--vdf-or); color: var(--vdf-noir); transform: translateX(6px); } @media (max-width: 720px) { .vdf-dept--collector .vdf-collector-cta__inner { flex-direction: column; align-items: flex-start; } } /* --- Bande "Nos partenaires de confiance" --- */ .vdf-dept--collector .vdf-trust { margin-top: var(--vdf-space-md); padding-top: var(--vdf-space-md); border-top: 1px solid rgba(201, 168, 76, .18); text-align: center; } .vdf-dept--collector .vdf-partenaires .vdf-partenaires__liens { margin-bottom: var(--vdf-space-md); } .vdf-dept--collector .vdf-trust__titre { font-family: var(--vdf-font-corps); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--vdf-or-clair); margin: 0 0 1.2rem; } .vdf-dept--collector .vdf-trust__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem 2.5rem; } .vdf-dept--collector .vdf-trust__item { font-family: var(--vdf-font-titre); font-weight: 700; letter-spacing: .04em; font-size: 1.05rem; color: rgba(245, 240, 232, .58); } /* --- Polish revue : focus clavier visible (doré) sur les blocs cliquables --- */ .vdf-dept--collector a.vdf-village__inner:focus-visible, .vdf-dept--collector a.vdf-collector-cta__inner:focus-visible { outline: 2px solid var(--vdf-or-clair); outline-offset: 3px; border-color: var(--vdf-or); } /* --- Polish revue : padding des sections réduit en mobile (rythme) --- */ @media (max-width: 900px) { .vdf-dept--collector .vdf-section { padding: 3rem 1.25rem; } } @media (max-width: 600px) { .vdf-dept--collector .vdf-section { padding: var(--vdf-space-md) var(--vdf-space-sm); } } /* ============================================================================ SECTION CARTE IMMERSIVE + LIEUX SECRETS. Vraie carte Leaflet (sombre, verrouillée sur le département) à gauche + liste des lieux secrets à droite (reliée aux marqueurs). Générique aux 3 modèles. Marqueurs/popups : carte-france.css (réutilisé). ========================================================================== */ .vdf-dept .vdf-carte-immersive { background: linear-gradient(180deg, #0f1830 0%, #0b1322 100%); color: var(--vdf-blanc-casse); } /* La section « La carte des villages » garde le fond de Paris à toute position (brief 30) : l'alternance des sections (:nth-of-type(even), plus haut) la passait en bleu #243968 sur les fiches qui ont une section de plus avant elle (« Territoire »). Même spécificité, placée après : elle l'emporte. */ .vdf-dept--collector .vdf-section.vdf-secteur--carte { background: linear-gradient(180deg, #0f1830 0%, #0b1322 100%); } .vdf-dept .vdf-carte-immersive__head { text-align: center; max-width: 62ch; margin: 0 auto var(--vdf-space-lg); } .vdf-dept .vdf-carte-immersive__head h2.vdf-h2::after { margin-inline: auto; } .vdf-dept .vdf-carte-immersive__intro { color: rgba(245, 240, 232, .82); margin: var(--vdf-space-sm) 0 0; line-height: 1.65; font-size: 1.05rem; } /* 2 colonnes : carte (gauche) + liste (droite) */ .vdf-dept .vdf-carte-immersive__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--vdf-space-md); align-items: stretch; } .vdf-dept .vdf-carte-dept { position: relative; min-height: 460px; border-radius: var(--vdf-radius); overflow: hidden; border: 1px solid rgba(201, 168, 76, .25); background: var(--vdf-fond-carto); } .vdf-dept .vdf-carte-dept__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(245, 240, 232, .6); font-family: var(--vdf-font-corps); font-size: .85rem; } .vdf-dept .vdf-carte-dept.leaflet-container { background: var(--vdf-fond-carto); } /* Liste des lieux (colonne droite), reliée aux marqueurs */ .vdf-dept .vdf-carte-immersive__grid .vdf-lieux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; max-height: 460px; overflow-y: auto; } .vdf-dept .vdf-lieu { position: relative; background: rgba(255, 255, 255, .03); border: 1px solid rgba(201, 168, 76, .2); border-left: 3px solid var(--vdf-or); border-radius: var(--vdf-radius); padding: .9rem 1.1rem; transition: border-color .25s ease, background .25s ease; } .vdf-dept .vdf-lieu--geo { cursor: pointer; } .vdf-dept .vdf-lieu--geo:hover { border-color: rgba(201, 168, 76, .6); background: rgba(255, 255, 255, .06); } .vdf-dept .vdf-lieu--geo:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vdf-or-clair); border-color: var(--vdf-or); } .vdf-dept .vdf-lieu__nom { display: block; font-family: var(--vdf-font-titre); font-weight: 700; font-size: .98rem; letter-spacing: .03em; color: var(--vdf-or-clair); padding-right: 3.6rem; } .vdf-dept .vdf-lieu__sous { display: block; font-family: var(--vdf-font-corps); font-size: var(--vdf-fs-petit); color: rgba(245, 240, 232, .7); margin-top: .25rem; line-height: 1.5; } .vdf-dept .vdf-lieu__dist { position: absolute; top: .9rem; right: 1.1rem; font-family: var(--vdf-font-corps); font-size: .68rem; letter-spacing: .04em; color: var(--vdf-or); border: 1px solid rgba(201, 168, 76, .35); border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; } /* Lien discret HONNETE vers la carte nationale */ .vdf-dept .vdf-carte-immersive__foot { text-align: center; margin-top: var(--vdf-space-lg); } .vdf-dept .vdf-carte-immersive__france { font-family: var(--vdf-font-corps); font-size: .82rem; letter-spacing: .04em; color: var(--vdf-or); text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, .4); padding-bottom: 2px; } .vdf-dept .vdf-carte-immersive__france::after { content: " \2192"; } .vdf-dept .vdf-carte-immersive__france:hover { color: var(--vdf-or-clair); border-color: var(--vdf-or-clair); } .vdf-dept .vdf-carte-immersive__france:focus-visible { outline: 2px solid var(--vdf-or-clair); outline-offset: 3px; } @media (max-width: 860px) { .vdf-dept .vdf-carte-immersive__grid { grid-template-columns: 1fr; } .vdf-dept .vdf-carte-immersive__grid .vdf-lieux { max-height: none; } } /* Focus clavier visible sur les boutons dorés (a11y, cohérence avec cartes/CTA) */ .vdf-dept .vdf-bouton:focus-visible { outline: 2px solid var(--vdf-or-clair); outline-offset: 3px; } /* ============================================================================ SOCLE 3D STATIQUE (carte immersive). Image de fond + marqueurs dorés posés en % (mêmes principe/charte que les badges du Hero) + liste reliée. Remplace la carte Leaflet quand une image OU des positions X/Y existent. La hauteur du "stage" est donnée par l'image elle-même (width:100%/height:auto, comme l'outil de calibration) => les % des marqueurs restent justes à tout ratio. Sans image : placeholder 16:9. ========================================================================== */ /* Garde-fou : un cartouche de marqueur en bord d'image ne doit jamais provoquer de scroll horizontal (clip en X ; l'axe vertical reste visible pour laisser monter les cartouches). */ .vdf-dept .vdf-carte-immersive--3d { overflow-x: clip; } /* ===== Disposition FUSION (retour client) : liste consolidée horizontale EN HAUT, grande carte EN BAS. Villages + lieux secrets mélangés ; différenciation par couleur (or = secrets, teal = villages). ===== */ /* Légende discrète sous le titre */ .vdf-dept .vdf-carte3d__legende { list-style: none; margin: var(--vdf-space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; font-size: .8rem; color: rgba(245, 240, 232, .8); } .vdf-dept .vdf-carte3d__legende li { display: inline-flex; align-items: center; gap: .5rem; } .vdf-dept .vdf-carte3d__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(11, 16, 28, .6); } .vdf-dept .vdf-carte3d__dot--secret { background: var(--vdf-or); } .vdf-dept .vdf-carte3d__dot--village { background: var(--vdf-teal); } /* Légende placée JUSTE AU-DESSUS de la carte (section 3) : centrée, petit espace avant la carte. */ .vdf-dept .vdf-carte3d__legende--carte { margin: 0 0 var(--vdf-space-sm); justify-content: center; } /* Carte GRANDE pleine largeur (dominante) */ .vdf-dept .vdf-carte3d { position: relative; display: flex; flex-direction: column; } .vdf-dept .vdf-carte3d--large { width: 100%; } /* --- Layout carte + menu des villages (retour client : liste à droite, généreuse) --- Carte DOMINANTE ~2/3, menu ~1/3. L'aside est plus courte que la carte à toutes les largeurs side-by-side (>=1100px) et s'étire à sa hauteur (stretch + liste centrée à gap borné). Sous 1100px : menu SOUS la carte, compact. */ .vdf-dept .vdf-carte3d__layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--vdf-space-md); align-items: stretch; } /* Toute arrivée par ancre/scroll programmatique dégage le header fixe (77px). */ .vdf-dept .vdf-section { scroll-margin-top: 90px; } .vdf-dept .vdf-carte-menu { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(160deg, #16223c 0%, #0f1830 100%); border: 1px solid rgba(201, 168, 76, .4); border-radius: var(--vdf-radius); /* liseré doré LISIBLE (l'alpha .22 rendait gris) */ padding: 1rem 1.15rem .85rem; } .vdf-dept .vdf-carte-menu__titre { font-family: var(--vdf-font-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; color: var(--vdf-or-clair); margin: 0 0 .3rem; } /* Centré à gap borné (PAS space-evenly : un département à 2-3 villages donnerait des items flottants et des séparateurs orphelins au milieu des vides). */ .vdf-dept .vdf-carte-menu__liste { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; } /* centré, PAS de gap fixe (dépasserait la carte aux largeurs basses) ni space-evenly (items flottants à 2-3 villages) */ .vdf-dept .vdf-carte-menu__li + .vdf-carte-menu__li { border-top: 1px solid rgba(245, 240, 232, .08); } .vdf-dept .vdf-carte-menu__item { display: block; width: 100%; text-align: left; padding: .55rem .2rem; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: normal; /*