/* ════════════════════════════════════════════════════════════════ LÉON XIV · FRANCE 2026 CHARTE SOMBRE V4 · charte-v4-dark.css ──────────────────────────────────────────────────────────────── Remplace charte-v3-dark.css. Principe inchangé : le mode sombre est une CLASSE sur (`html.pf-dark`), jamais une media query, et il redéfinit les MÊMES tokens. Un composant qui utilise les tokens bascule seul. Ce que la V4 ajoute par rapport à la V3 : 1. tous les tokens déclarés depuis (--pf-blue, --navy-AAA, --primary-soft, --yellow-hover, et les variantes -AA / -AAA, qui doivent S'INVERSER : en clair elles foncent l'accent pour le rendre lisible sur blanc, en sombre elles l'éclaircissent) ; 2. les composants qui codent une couleur en dur et qui étaient donc cassés : bandes de faits en `background: var(--ink)` (fond quasi blanc + texte blanc en sombre), barres collantes translucides blanches, bandeaux cyan pleine largeur, FAQ, jauges d'inscription, carte du parcours, popups MapLibre ; 3. les composants apparus depuis : /inscriptions/, carte du parcours V2, bandeau institutionnel, overlay de don, FAQ, colonne flottante d'évènement, liens rapides, infobox ; 4. une ambiance de nuit assumée (ciel marine, filets d'or et de cyan, halos très discrets) au lieu d'un simple négatif ; 5. un retour au thème clair à l'impression. Le programme (timeline) porte déjà ses propres règles sombres dans programme-etats.css : rien n'est repris ici. Chargement : APRÈS toutes les autres feuilles, avant menu-mobile-fix.css. ════════════════════════════════════════════════════════════════ */ /* ═══ 1. TOKENS ══════════════════════════════════════════════════ */ html.pf-dark { /* ── Surfaces. Le socle a été remonté d'un cran en V4.1 : à #060A1E l'en-tête et le pied touchaient le noir. Trois paliers nettement séparés, du fond de page à la carte. ── */ --navy-900: #0B1233; /* fond général, en-tête, pied */ --cream: #101941; /* section alternée */ --paper: #16204A; /* cartes, panneaux, champs */ --navy-050: #1E2A5E; /* teinte de marque légère */ /* ── Marine : cesse d'être l'aplat dominant, devient l'accent clair ── */ --navy: #3E63D8; --primary: var(--navy); --primary-deep: #6E8CF2; /* liens, survols */ --primary-soft: #57D9FF; /* accent vif, focus, soulignés */ --primary-tint: #1F2C61; /* pastilles, étiquettes */ --primary-wash: #18214B; /* citations, survol de ligne */ /* Le menu mobile plein écran ne peut pas être plus clair que la page qu'il recouvre : seul token de la liste des cinq « non redéfinis » que la V4 déroge, et volontairement. */ --pf-blue: #0E1740; /* ── Navigation mobile (tokens déclarés dans style-v3.css) ── Même règle qu'en clair : la surface du sous-menu est plus CLAIRE que celle du panneau. L'écart est resserré ici, un menu de nuit n'a pas à trancher autant. --pf-nav-burger : le menu FERMÉ, l'icône se détache sur l'en-tête, qui vaut --navy-900 (#0B1233) en sombre. Y laisser --pf-blue (#0E1740) donnait un contraste de 1,08:1, soit une icône invisible. */ --pf-nav-surface: var(--pf-blue); --pf-nav-surface-2: #16224F; --pf-nav-burger: var(--ink); /* ── Accents : éclaircis pour tenir sur fond marine ── */ --red: #FF5B67; --cyan: #57D9FF; --green: #2FD1C9; --yellow: #FFC24D; --yellow-hover: #FFD37A; /* ── Variantes lisibles : elles s'inversent. En clair elles foncent l'accent (texte sur blanc), en sombre elles l'éclaircissent (texte sur marine). ── */ --cyan-AA: #8AE4FF; /* En sombre, le cyan clair tient déjà 7,7:1 sur le voile nuit. */ --cyan-sur-photo: var(--cyan-AA); --yellow-AA: #FFD07A; --yellow-AAA: #FFE3AD; --red-AA: #FF8A93; --red-AAA: #FFB6BC; --navy-AAA: #C9D6FF; /* contour/texte marine lisible sur nuit */ --ink-mute-AAA: #A8B0D0; /* ── Texte ── */ --ink: #EEF1FB; --ink-soft: #B7BEDD; --ink-mute: #8A93BC; /* AA sur --paper */ --rule: rgba(238,241,251,.14); /* ── Alias d'étape. Ils DOIVENT être réémis : déclarés au :root de style-v3.css sous forme de `var(--navy)`, ils sont substitués au calcul sur puis hérités en valeur littérale. Les redéfinir sur ne les suit pas, et les cinq rails d'étape restaient en valeurs claires. ── */ --unesco: var(--navy); --paris: var(--green); --saint-denis: var(--yellow); --lourdes: var(--cyan); --metz: var(--red); /* Même piège pour la surcouche d'ambiance : warmth-v3.css les déclare au :root, dont deux en `var()`. Sans réémission, les sections « crème chaud » de l'accueil (annonce, FAQ) restaient en beige clair au milieu de la nuit. */ --warm-bg: #141838; /* crème chaud transposé */ --accent-warm: var(--yellow); --accent-warm-text: var(--yellow-AA); /* ── Variables internes à cette feuille (préfixe --pf-nuit-), pour ne pas polluer la charte publique ── */ --pf-nuit-bande: #0E1638; /* bandes de faits, KPI */ --pf-nuit-relief: #1B2657; /* surface surélevée */ --pf-nuit-voile: rgba(11,18,51,.92); /* barres collantes */ --pf-nuit-or: rgba(255,194,77,.30); /* filets d'accent */ --pf-nuit-froid: rgba(87,217,255,.30); --pf-nuit-ombre: 0 26px 54px -28px rgba(0,0,0,.65); color-scheme: dark; color: var(--ink); background-color: var(--navy-900); } /* ═══ 2. SOCLE ═══════════════════════════════════════════════════ */ /* Ciel de nuit : deux halos très faibles, l'un cyan, l'autre or. Aucun coût de rendu notable, aucun décalage de mise en page. */ html.pf-dark { background-image: radial-gradient(1200px 700px at 82% -8%, rgba(87,217,255,.10), transparent 62%), radial-gradient(900px 620px at 6% 104%, rgba(255,161,7,.07), transparent 60%); background-repeat: no-repeat; } html.pf-dark ::selection { background: var(--primary-soft); color: #06122B; } html.pf-dark :focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 4px; } /* Les visuels sont calibrés pour un fond blanc : un demi-ton de moins évite qu'ils ne brûlent au milieu de la nuit. */ html.pf-dark .pf-card__media img, html.pf-dark .pf-hero__photo img, html.pf-dark .pf-hero__media img { filter: brightness(.94) saturate(1.02); } /* Les logos fournis en version blanche restent intacts. */ html.pf-dark img[src*="_blanc"] { filter: none; } /* ═══ 3. RYTHME DES SECTIONS ═════════════════════════════════════ */ /* En clair, l'alternance papier / crème suffit. En sombre les deux fonds sont voisins : un filet d'or ou de cyan en tête de section redonne la césure sans ajouter de bloc. */ html.pf-dark .pf-section--cream, html.pf-dark .papefrance-annonce, html.pf-dark .papefrance-faq, html.pf-dark .papefrance-devise { box-shadow: inset 0 1px 0 var(--pf-nuit-or); } html.pf-dark .pf-section + .pf-section { border-top: 1px solid var(--rule); } html.pf-dark .pf-eyebrow, html.pf-dark .papefrance-eyebrow { color: var(--cyan); } html.pf-dark .pf-section-head__title em, html.pf-dark .papefrance-h2 em { color: var(--primary-deep); } /* ═══ 4. BARRES COLLANTES TRANSLUCIDES ═══════════════════════════ */ /* Toutes déclarées en blanc ou crème translucide : illisibles en sombre. Même voile marine pour les cinq. */ html.pf-dark .papefrance-siteheader, html.pf-dark .site-header, html.pf-dark .pf-tabnav, html.pf-dark .lieu-subnav, html.pf-dark .ag-tabs { background: var(--pf-nuit-voile); border-bottom-color: var(--rule); } /* Le dégradé des chevrons de défilement reprend ce même voile. */ html.pf-dark .lieu-subnav { --pf-subnav-bg: var(--pf-nuit-voile); } html.pf-dark .pf-tabnav__link, html.pf-dark .lieu-subnav a, html.pf-dark .ag-tabs__tab { color: var(--ink-soft); } html.pf-dark .pf-tabnav__link:hover, html.pf-dark .lieu-subnav a:hover, html.pf-dark .ag-tabs__tab:hover { color: var(--ink); } html.pf-dark .pf-tabnav__link[aria-current], html.pf-dark .pf-tabnav__link.is-active, html.pf-dark .ag-tabs__tab.is-active { color: var(--ink); border-bottom-color: var(--primary-soft); } html.pf-dark .pf-tabnav--chips .pf-tabnav__link { background: var(--primary-tint); border-color: var(--rule); } /* ═══ 5. EN-TÊTE, BANDEAUX, PIED ═════════════════════════════════ */ /* Les deux préfixes d'en-tête sont traités ensemble, comme partout. */ html.pf-dark :is(.papefrance-siteheader, .papefrance-topbar), html.pf-dark .papefrance-sitefooter, html.pf-dark footer.ft { background: var(--navy-900) !important; } html.pf-dark :is(.papefrance-siteheader, .papefrance-topbar) :is(a, .papefrance-siteheader__nav a) { color: var(--ink-soft); } html.pf-dark :is(.papefrance-siteheader, .papefrance-topbar) a:hover { color: var(--ink); } html.pf-dark .papefrance-siteheader__nav .gb-menu-open-icon svg { color: var(--ink) !important; } /* Barre utilitaire (date + villes) : elle portait un aplat marine clair, qui ressort trop la nuit. */ html.pf-dark .papefrance-siteheader-util, html.pf-dark .papefrance-topbar-util { background: rgba(255,255,255,.05); border-bottom: 1px solid var(--rule); color: var(--ink-soft); } html.pf-dark :is(.papefrance-siteheader-util, .papefrance-topbar-util) .cities { color: var(--ink); } /* Bandeau institutionnel : le filet d'or le raccroche au pied. */ html.pf-dark .pf-institband { background: var(--navy-900); box-shadow: inset 0 -1px 0 var(--pf-nuit-or); } html.pf-dark .pf-institband__btn { color: var(--ink-soft); } html.pf-dark .pf-institband__btn:hover { color: var(--ink); } html.pf-dark .pf-institband__crest { background: var(--ink); } /* Pied : le filet supérieur devient la seule séparation visible. */ html.pf-dark .papefrance-sitefooter { box-shadow: inset 0 1px 0 var(--pf-nuit-or); } html.pf-dark .papefrance-sitefooter__social a { border-color: var(--rule); } /* ═══ 6. BOUTONS ═════════════════════════════════════════════════ */ html.pf-dark :is(.btn-primary, .pf-btn-primary, .papefrance-btn--primary) { background: var(--navy); color: #fff !important; } html.pf-dark :is(.btn-primary, .pf-btn-primary, .papefrance-btn--primary):hover { background: var(--primary-deep); color: #06122B; } html.pf-dark :is(.btn-ghost, .pf-btn-ghost, .papefrance-btn--ghost) { background: transparent !important; box-shadow: inset 0 0 0 2px var(--navy-AAA); color: var(--navy-AAA) !important; } html.pf-dark :is(.btn-ghost, .pf-btn-ghost, .papefrance-btn--ghost):hover { background: var(--primary-tint) !important; color: var(--ink) !important; } html.pf-dark :is(.btn-light, .pf-btn-light) { background: var(--navy); color: #fff !important; } html.pf-dark :is(.btn-light, .pf-btn-light):hover { background: var(--primary-deep); color: #06122B; } /* Le jaune reste le seul aplat de conversion, et il gagne un halo : c'est le point le plus chaud de la page de nuit. */ html.pf-dark :is(.btn-cta, .pf-btn-cta, .papefrance-btn--cta, .papefrance-siteheader__cta, .papefrance-topbar__cta, .papefrance-sitefooter__cta) { background: var(--yellow) !important; color: #1a1400 !important; box-shadow: 0 14px 34px -18px rgba(255,161,7,.55); } html.pf-dark :is(.btn-cta, .pf-btn-cta, .papefrance-btn--cta):hover { background: var(--yellow-hover) !important; } html.pf-dark .pf-btn .arrow { color: currentColor; } /* ═══ 7. HÉROS ═══════════════════════════════════════════════════ */ /* Voiles plus opaques : la photo doit se fondre dans la nuit. */ html.pf-dark :is(.pf-hero--photo .pf-hero__media, .lieu-hero__media, .ev-hero__media, .bv-hero__media, .pape-hero__media)::after { background: linear-gradient(180deg, rgba(6,10,30,.58) 0%, rgba(6,10,30,.24) 32%, rgba(6,10,30,.58) 66%, rgba(6,10,30,.97) 100%) !important; } /* Les gabarits de héros peints en `var(--primary-deep)` ou en dégradé marine deviennent bleu vif en sombre, avec du texte blanc dessus : on les ramène à la nuit. */ html.pf-dark :is(.pf-hero--solid, .pf-hero--split, .ev-hero, .lieu-hero, .bv-hero, .pape-hero, .ag-intro, .pr-intro, .tr-intro) { background: linear-gradient(168deg, #16204F 0%, #0A1130 100%); color: var(--ink); } /* Les halos du héros --solid, plus francs : ils portent seuls l'animation d'un aplat sans image. */ html.pf-dark .pf-hero--solid::after { background: radial-gradient(circle at 86% 12%, rgba(87,217,255,.26), transparent 42%), radial-gradient(circle at 8% 94%, rgba(47,209,201,.18), transparent 44%); } html.pf-dark :is(.pf-hero__lead, .lieu-hero__role, .bv-hero__lead, .pape-hero__lead, .ag-intro p, .pr-intro p.lead, .tr-intro p) { color: var(--ink-soft); } html.pf-dark :is(.pf-hero__badge, .lieu-hero__badge, .ev-badge) { background: rgba(238,241,251,.10); border-color: rgba(238,241,251,.22); color: var(--ink); } /* Héros crème (--compact, --article) : le token suffit, seul le filet bas doit rester perceptible. */ html.pf-dark :is(.pf-hero--compact, .pf-hero--article) { border-bottom-color: var(--rule); } /* La règle générique sur les liens sans classe (§10) vient après : le fil d'Ariane doit donc passer par une règle plus spécifique, sinon il repasse en bleu de lien. */ html.pf-dark .pf-crumb { --pf-crumb-color: var(--ink-mute); } html.pf-dark .pf-crumb nav a:link, html.pf-dark .pf-crumb nav a:visited { color: var(--ink-soft); } html.pf-dark .pf-crumb nav a:hover { color: var(--ink); } html.pf-dark .pf-crumb .separator { color: var(--ink-mute); } /* ═══ 8. BANDES DE FAITS ET DE CHIFFRES ══════════════════════════ */ /* Cas le plus visible de la V3 : ces bandes sont peintes en `background: var(--ink)` avec du texte blanc. En sombre --ink est presque blanc : fond blanc, texte blanc, bande illisible. */ html.pf-dark :is(.facts, .pape-facts, .ev-bar, .tr-kpi, .bv-facts) { background: var(--pf-nuit-bande); color: var(--ink); box-shadow: inset 0 1px 0 var(--pf-nuit-or), inset 0 -1px 0 var(--rule); } html.pf-dark :is(.fact__label, .pape-fact .l, .ev-bar__fact .l) { color: var(--yellow-AA); } html.pf-dark :is(.fact__value, .pape-fact .v, .ev-bar__fact .v, .kpi__num, .bv-fact__num) { color: var(--ink); } html.pf-dark :is(.kpi__lbl, .bv-fact__lbl) { color: var(--ink-soft); } html.pf-dark :is(.facts__grid, .pape-facts__grid, .tr-kpi__grid, .bv-facts__grid) > * + * { border-left-color: var(--rule); } html.pf-dark .pf-stat__num { color: var(--primary-deep); } html.pf-dark .pf-stat--dark .pf-stat__num { color: var(--ink); } html.pf-dark .pf-stat--dark .pf-stat__label { color: var(--ink-soft); } /* ═══ 9. CARTES ET BLOCS ═════════════════════════════════════════ */ html.pf-dark :is(.pf-card, .pf-feature, .pf-cta, .pf-qa, .pf-quicklink, .pf-infobox) { background: var(--paper); border-color: var(--rule); } html.pf-dark .pf-card__media { background: var(--primary-tint); } /* Le survol se signale par un liseré cyan plutôt que par une ombre seule : une ombre noire sur fond noir ne se voit pas. */ html.pf-dark :is(a.pf-card, a.pf-feature, .pf-quicklink):hover { border-color: var(--pf-nuit-froid); box-shadow: var(--pf-nuit-ombre); } html.pf-dark .pf-card--overlay .pf-card__media::after { background: linear-gradient(180deg, rgba(6,10,30,.20) 0%, rgba(6,10,30,.94) 100%); } html.pf-dark .pf-card--overlay .pf-card__kicker { background: var(--ink); color: var(--navy-900); } html.pf-dark .pf-card--video .pf-card__play { background: rgba(238,241,251,.92); color: var(--navy-900); } html.pf-dark :is(.pf-card--video .pf-card__dur, .vid-card__dur, .rp-vid__dur) { background: rgba(6,10,30,.85); color: var(--ink); } html.pf-dark :is(.mm-feature__play span, .vid-card__thumb .play span, .rp-vid__thumb .play span) { background: rgba(238,241,251,.92); } html.pf-dark :is(.mm-feature__play svg, .vid-card__thumb .play svg, .rp-vid__thumb .play svg) { color: var(--navy-900); } html.pf-dark .pf-feature--white .pf-feature__icon { color: var(--primary-deep); } html.pf-dark .pf-feature__go { color: var(--primary-deep); } html.pf-dark .pf-cta { background: var(--primary-wash); } html.pf-dark .pf-cta--solid { background: var(--pf-nuit-relief); border-color: var(--rule); } /* Liens rapides : la carte était en #fff en dur. */ html.pf-dark .pf-quicklinks { background: var(--cream); } html.pf-dark .pf-quicklink__num { background: var(--primary-tint); } /* Bandeau d'information : fond en dur, accent latéral conservé. */ html.pf-dark .pf-infobox { background: var(--paper); } html.pf-dark .pf-infobox--info { --ib-accent: var(--cyan); } html.pf-dark .pf-infobox--warn { --ib-accent: var(--yellow); } html.pf-dark .pf-infobox__head { background: var(--primary-tint); border-bottom-color: var(--rule); } html.pf-dark .pf-prog-peek__row { background: var(--paper); } /* Étiquettes : les fonds en rgba de marine disparaissent sur marine, il faut du clair translucide. */ html.pf-dark :is(.pf-list__tag--muted, .ag-event__tag.invit) { background: rgba(238,241,251,.07); color: var(--ink-soft); } html.pf-dark .pf-list__tag { background: var(--primary-tint); color: var(--navy-AAA); } html.pf-dark .pf-list__time { color: var(--ink); } html.pf-dark .pf-list__dl { color: var(--primary-deep); } html.pf-dark .pf-list > * + * { border-top-color: var(--rule); } /* ═══ 10. PROSE, CITATIONS, TABLEAUX ═════════════════════════════ */ html.pf-dark .prose { color: var(--ink-soft); } html.pf-dark :is(.prose h2, .prose h3, .prose h4) { color: var(--ink); } html.pf-dark .prose a { color: var(--primary-deep); text-decoration-color: rgba(110,140,242,.5); } html.pf-dark .prose a:hover { text-decoration-color: currentColor; } html.pf-dark .prose blockquote { background: var(--primary-wash); border-left-color: var(--cyan); } html.pf-dark .prose :is(code, kbd) { background: var(--primary-tint); color: var(--ink); } html.pf-dark .prose hr { border-color: var(--rule); } html.pf-dark .prose table :is(th, td) { border-color: var(--rule); } html.pf-dark .prose thead th { background: var(--primary-tint); color: var(--ink); } html.pf-dark .prose li::marker { color: var(--yellow-AA); } html.pf-dark .papefrance-devise__quote { color: var(--ink); } html.pf-dark .papefrance-devise__ref { color: var(--ink-mute); } /* Liens hors prose : jamais le bleu par défaut du navigateur. La règle est mise à spécificité nulle par `:where()`, sinon elle battrait les composants qui posent leur propre couleur de lien (colonnes du pied, titre de fiche d'inscription en `inherit`). */ :where(html.pf-dark) :where(a:not([class])) { color: var(--primary-deep); } :where(html.pf-dark) :where(a:not([class]):hover) { color: var(--cyan); } /* ═══ 11. FAQ (accordéon GenerateBlocks Pro) ═════════════════════ */ html.pf-dark .pf-faq__toc { background: var(--paper); border-color: var(--rule); box-shadow: none; } html.pf-dark .pf-faq__toc a { color: var(--ink-soft); } html.pf-dark .pf-faq__toc a:hover { color: var(--ink); } html.pf-dark .pf-faq .gb-accordion__item.pf-qa { background: var(--paper); border-color: var(--rule); } html.pf-dark .pf-faq .gb-accordion__item.pf-qa:hover { background: var(--pf-nuit-relief); } html.pf-dark .pf-faq .gb-accordion__item.pf-qa.gb-accordion__item-open { background: var(--pf-nuit-relief); } html.pf-dark .pf-qa__summary { color: var(--ink); } html.pf-dark .pf-qa__plus { border-color: var(--rule); color: var(--ink-soft); } html.pf-dark .pf-faq .pf-qa__summary:hover .pf-qa__plus { background: var(--primary-tint); color: var(--ink); } html.pf-dark .pf-faq .gb-accordion__item-open .pf-qa__plus { background: var(--primary-soft); border-color: var(--primary-soft); color: #06122B; } html.pf-dark .pf-qa__body { color: var(--ink-soft); } html.pf-dark .pf-faq .gb-accordion__content .pf-qa__body a { color: var(--primary-deep); text-decoration-color: rgba(110,140,242,.5); } /* ═══ 12. FORMULAIRES ET NEWSLETTER ══════════════════════════════ */ html.pf-dark :is(.pf-field, .bv-field) :is(input, select, textarea), html.pf-dark .ff-el-form-control { background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink) !important; } html.pf-dark :is(.pf-field, .bv-field) :is(input, select, textarea)::placeholder, html.pf-dark .ff-el-form-control::placeholder { color: var(--ink-mute) !important; } html.pf-dark :is(.pf-field, .bv-field) :is(input, select, textarea):focus, html.pf-dark .ff-el-form-control:focus { border-color: var(--primary-soft) !important; box-shadow: 0 0 0 3px rgba(87,217,255,.22) !important; } html.pf-dark :is(.pf-field__label, .ff-el-input--label label) { color: var(--ink-mute); } html.pf-dark .ff-el-group__title { color: var(--ink); } /* Bandeau newsletter : dégradé marine clair + texte blanc en V3, donc bleu vif la nuit. On garde le vert d'eau en accent, c'est la couleur de la newsletter dans la charte. */ html.pf-dark .nl-strip { background: linear-gradient(160deg, #101A44 0%, #16204F 100%); box-shadow: inset 0 1px 0 rgba(47,209,201,.35); color: var(--ink); } html.pf-dark .nl-strip p { color: var(--ink-soft); } html.pf-dark .nl-strip .ff-el-form-control { background: rgba(238,241,251,.06) !important; } html.pf-dark .nl-strip :is(.error.text-danger, #fluentform_2_errors) { color: var(--red-AA) !important; } html.pf-dark .nl-strip .ff-message-success { color: var(--green) !important; } /* Les deux bandes cyan pleine largeur (CTA don, newsletter d'accueil) : un aplat cyan de 90 px de haut en pleine nuit est agressif. Fond de nuit, filet cyan, texte clair, CTA jaune inchangé : le signal de conversion reste le seul aplat vif. */ html.pf-dark :is(.papefrance-cta, .papefrance-newsletter) { background: linear-gradient(160deg, #101A44 0%, #16204F 100%) !important; box-shadow: inset 0 1px 0 var(--pf-nuit-froid); color: var(--ink); } html.pf-dark :is(.papefrance-cta, .papefrance-newsletter) :is(.papefrance-h2, .papefrance-h2.gb-headline, .papefrance-h2.gb-text) { color: var(--ink) !important; } html.pf-dark :is(.papefrance-cta, .papefrance-newsletter) .papefrance-h2 em { color: var(--cyan) !important; } html.pf-dark :is(.papefrance-cta, .papefrance-newsletter) .papefrance-sub { color: var(--ink-soft) !important; } html.pf-dark .papefrance-cta .papefrance-btn--ghost { color: var(--ink) !important; box-shadow: inset 0 0 0 2px rgba(238,241,251,.55); } html.pf-dark .papefrance-cta .papefrance-btn--ghost:hover { background: rgba(238,241,251,.12) !important; } html.pf-dark .papefrance-newsletter__card { background: var(--paper); border: 1px solid var(--rule); } /* ═══ 13. INSCRIPTIONS (/inscriptions/) ══════════════════════════ */ html.pf-dark .pf-insc-summary { background: var(--primary-tint); border-left-color: var(--yellow); } html.pf-dark .pf-insc-summary__stat { color: var(--navy-AAA); } html.pf-dark .pf-insc-summary__stat b { color: var(--ink); } html.pf-dark .pf-insc-summary__note { color: var(--ink-soft); } html.pf-dark .pf-insc-item { background: var(--paper); border-color: var(--rule); box-shadow: none; } html.pf-dark .pf-insc-item:hover { border-color: var(--pf-nuit-froid); box-shadow: var(--pf-nuit-ombre); } html.pf-dark .pf-insc-item__when { color: var(--cyan-AA); } html.pf-dark .pf-insc-item__title { color: var(--ink); } html.pf-dark :is(.pf-insc-item__place, .pf-insc-item__desc, .pf-insc-item__note, .pf-insc-ul) { color: var(--ink-soft); } html.pf-dark .pf-insc-tag { background: var(--primary-tint); color: var(--navy-AAA); } /* La pastille de jauge était le seul beige en dur du fichier. */ html.pf-dark .pf-insc-tag--jauge { background: rgba(255,194,77,.14); color: var(--yellow-AA); } html.pf-dark .pf-insc-gauge__bar { background: rgba(238,241,251,.10); } html.pf-dark .pf-insc-gauge__label { color: var(--ink-soft); } /* Le badge de statut est un remplissage : texte marine profond sur les accents clairs, texte clair sur le marine. */ html.pf-dark .pf-insc-badge { color: #06122B; } html.pf-dark .pf-insc-item[data-statut="invitation"] .pf-insc-badge { color: var(--ink); } html.pf-dark .pf-insc-ul li::marker { color: var(--yellow-AA); } /* ═══ 14. CARTES GÉOGRAPHIQUES ═══════════════════════════════════ */ /* Façade : la vignette d'attente et son bouton. Le bouton passe en panneau sombre, sinon il est le seul objet blanc de la page. */ html.pf-dark .ev-map__frame img { opacity: 0.5; } html.pf-dark .pf-map-facade__btn { background: var(--pf-nuit-relief); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); } html.pf-dark .pf-map-facade__btn:hover { background: var(--primary-tint); } html.pf-dark .pf-map-facade--brand__caption { background: var(--navy); color: #fff; } /* Carte du parcours. */ html.pf-dark .pf-route-map { background: var(--cream); } html.pf-dark .pf-route-map__card { background: var(--paper); border-color: var(--rule); box-shadow: none; } html.pf-dark .pf-route-map__mapwrap { background: var(--primary-tint); } html.pf-dark .pf-route-map__hint { background: rgba(11,18,51,.90); border-color: var(--rule); color: var(--ink-soft); } html.pf-dark .pf-route-map__legend { background: var(--paper); border-top-color: var(--rule); } html.pf-dark .pf-route-map__city.is-open { background: var(--primary-tint); border-color: var(--rule); } html.pf-dark :is(.pf-route-map__place:hover, .pf-route-map__place.is-active) { background: var(--pf-nuit-relief); border-color: var(--rule); } html.pf-dark .pf-route-map__place::before { background: var(--navy-900); border-color: var(--primary-soft); opacity: .8; } html.pf-dark .pf-route-map__chev { color: var(--primary-deep); } /* Pins : le cerne blanc les détachait du fond clair. La nuit, c'est un cerne sombre qui les détache de la tuile. */ html.pf-dark :is(.pf-route-map__pin, .pf-route-map__subpin) { border-color: var(--pf-nuit-bande); } /* Popups MapLibre : le composant est stylé en blanc en dur. */ html.pf-dark .maplibregl-popup-content { background: var(--pf-nuit-relief) !important; border-color: var(--rule) !important; box-shadow: 0 24px 50px -24px rgba(0,0,0,.75) !important; } html.pf-dark .maplibregl-popup-tip { border-top-color: var(--pf-nuit-relief) !important; } html.pf-dark .pf-route-map__pop-kicker { color: var(--cyan-AA); } html.pf-dark .pf-route-map__pop-title { color: var(--ink); } html.pf-dark .pf-route-map__pop-text { color: var(--ink-soft); } html.pf-dark .pf-route-map__pop-go { color: var(--primary-deep); } html.pf-dark .pf-route-map__pop-step { color: var(--navy-AAA); border-color: var(--rule); } html.pf-dark .pf-route-map__pop-step:hover:not(:disabled) { background: rgba(238,241,251,.08); border-color: var(--primary-soft); } html.pf-dark .maplibregl-ctrl-group { background: var(--pf-nuit-relief) !important; } /* Les icônes natives de MapLibre (+, -, boussole, plein écran) ne sont pas des SVG en currentColor mais des images de fond en data-URI, tracées en NOIR. Assombrir le groupe ci-dessus les rendait donc invisibles : noir sur nuit. Aucune propriété de couleur ne les atteint, seul un filtre le peut. `.maplibregl-ctrl-icon` ne vise que les boutons de MapLibre : les nôtres (RUE, visite) portent un