/* * Feux de forêt — Styles globaux du thème * * Ce fichier rassemble l'intégralité du CSS du thème (variables, header, * single, archive, signalement, accueil, footer…). Il est chargé en tant * que feuille de style du thème, en complément de style.css (méta) et des * CSS spécifiques (fdf-frontend.css, fdf-prevention.css, fdf-espaces.css, * fdf-main-courante.css). */ /* ==================================================================== VARIABLES — Clair (défaut) : blanc, noirs & gris ; CTA #0200FF / #D00100 ==================================================================== */ :root { --fdf-bg: #FFFFFF; --fdf-surface: #F5F5F5; --fdf-surface-2: #EBEBEB; --fdf-border: #E5E5E5; --fdf-text: #0A0A0A; --fdf-muted: #737373; --fdf-accent: #171717; --fdf-accent-hover: #000000; --fdf-link: #0A0A0A; --fdf-link-hover: #000000; --fdf-cta-blue: #0200FF; --fdf-cta-blue-hover: #0100CC; --fdf-cta-red: #D00100; --fdf-cta-red-hover: #A80100; --fdf-header-bg: #0200FF; --fdf-header-border: rgba(255, 255, 255, 0.18); --fdf-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --fdf-radius: 10px; --fdf-transition: .25s ease; /* Hauteur totale du header sticky (header bleu + bandeau alerte si actif). Valeur de fallback (avant que le JS ait mesuré) ; le JS écrit la valeur réelle directement sur via initStickyHeader(). */ --fdf-header-band-h: calc(max(12px, calc(env(safe-area-inset-top, 0px) + 6px)) + 128px + 12px); /* Décalage utilisé pour scroll-padding-top et scroll-margin-top des ancres */ --fdf-scroll-anchor-offset: calc(var(--fdf-header-band-h) + 0.75rem); /* Alignement horizontal commun header + bandeau alerte */ --fdf-header-shell-pad-left: max(clamp(12px, 4vw, 28px), env(safe-area-inset-left, 0px)); --fdf-header-shell-pad-right: max(clamp(12px, 4vw, 28px), env(safe-area-inset-right, 0px)); } /* ==================================================================== VARIABLES — Sombre automatique (préférence système) ==================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fdf-bg: #0A0A0A; --fdf-surface: #141414; --fdf-surface-2: #1F1F1F; --fdf-border: #2E2E2E; --fdf-text: #FAFAFA; --fdf-muted: #A3A3A3; --fdf-accent: #E5E5E5; --fdf-accent-hover: #FFFFFF; --fdf-link: #FAFAFA; --fdf-link-hover: #FFFFFF; --fdf-cta-blue: #4D4DFF; --fdf-cta-blue-hover: #0200FF; --fdf-cta-red: #FF4D4D; --fdf-cta-red-hover: #D00100; --fdf-header-bg: #0200FF; --fdf-header-border: rgba(255, 255, 255, 0.18); --fdf-shadow: 0 4px 32px rgba(0, 0, 0, 0.45); } } /* ==================================================================== VARIABLES — Mode clair forcé ==================================================================== */ [data-theme="light"] { --fdf-bg: #FFFFFF; --fdf-surface: #F5F5F5; --fdf-surface-2: #EBEBEB; --fdf-border: #E5E5E5; --fdf-text: #0A0A0A; --fdf-muted: #737373; --fdf-accent: #171717; --fdf-accent-hover: #000000; --fdf-link: #0A0A0A; --fdf-link-hover: #000000; --fdf-cta-blue: #0200FF; --fdf-cta-blue-hover: #0100CC; --fdf-cta-red: #D00100; --fdf-cta-red-hover: #A80100; --fdf-header-bg: #0200FF; --fdf-header-border: rgba(255, 255, 255, 0.18); --fdf-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } /* ==================================================================== VARIABLES — Mode sombre forcé ==================================================================== */ [data-theme="dark"] { --fdf-bg: #0A0A0A; --fdf-surface: #141414; --fdf-surface-2: #1F1F1F; --fdf-border: #2E2E2E; --fdf-text: #FAFAFA; --fdf-muted: #A3A3A3; --fdf-accent: #E5E5E5; --fdf-accent-hover: #FFFFFF; --fdf-link: #FAFAFA; --fdf-link-hover: #FFFFFF; --fdf-cta-blue: #4D4DFF; --fdf-cta-blue-hover: #0200FF; --fdf-cta-red: #FF4D4D; --fdf-cta-red-hover: #D00100; --fdf-header-bg: #0200FF; --fdf-header-border: rgba(255, 255, 255, 0.18); --fdf-shadow: 0 4px 32px rgba(0, 0, 0, 0.45); } @media (max-width: 768px) { :root { /* Rangée du haut + rangée sub (boutons cartes / prévention) */ --fdf-header-band-h: calc(44px + max(10px, calc(env(safe-area-inset-top, 0px) + 4px)) + 10px + 48px); } } @media (max-width: 480px) { :root { --fdf-header-band-h: calc(40px + max(8px, calc(env(safe-area-inset-top, 0px) + 3px)) + 8px + 46px); } } /* ==================================================================== BASE ==================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Outfit", sans-serif; transition: background-color var(--fdf-transition), color var(--fdf-transition); /* Bleu header visible dans l’encoche / rebonds iOS et derrière la barre d’état (avec theme-color). */ background-color: #0200FF; /* Les ancres (#id) atterrissent juste sous le header sticky (mesuré dynamiquement par JS) */ scroll-padding-top: var(--fdf-scroll-anchor-offset, var(--fdf-header-band-h)); } /* Respect des préférences utilisateur : pas de scroll fluide forcé */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* IMPORTANT : ne JAMAIS mettre overflow:hidden ou overflow-x:hidden sur html/body, cela casserait position:sticky du header. On utilise overflow-x:clip qui garantit à la fois la coupure horizontale et la conservation du sticky. */ html, body { overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; } /* * Garde-fou anti-conflit sticky : aucun ancêtre direct du sticky ne doit créer * un nouveau « containing block » (transform / filter / perspective / contain). * On laisse explicite pour éviter qu un plugin ou bloc tiers ne casse le sticky. */ .wp-site-blocks, .wp-site-blocks > .wp-block-template-part:has(.fdf-header) { transform: none !important; filter: none !important; perspective: none !important; -webkit-transform: none !important; contain: none !important; } /* Cibles d ancres : les titres et éléments avec id se positionnent sous le header */ :target, [id]:where(h1, h2, h3, h4, h5, h6), .wp-block-heading[id] { scroll-margin-top: var(--fdf-scroll-anchor-offset, var(--fdf-header-band-h)); } body { font-family: "Outfit", sans-serif !important; background-color: var(--fdf-bg) !important; color: var(--fdf-text) !important; min-height: 100%; } .wp-site-blocks, .wp-block-template-part { background-color: var(--fdf-bg); color: var(--fdf-text); } /* ==================================================================== PAGES LÉGALES — surcharger couleurs figées (#0A0A0A) de l’éditeur (mode sombre) ==================================================================== */ body.fdf-legal-page main .wp-block-post-title { color: var(--fdf-text) !important; } body.fdf-legal-page main .wp-block-post-content, body.fdf-legal-page main .wp-block-post-content p, body.fdf-legal-page main .wp-block-post-content li, body.fdf-legal-page main .wp-block-post-content td, body.fdf-legal-page main .wp-block-post-content th, body.fdf-legal-page main .wp-block-post-content dt, body.fdf-legal-page main .wp-block-post-content dd { color: var(--fdf-text) !important; } body.fdf-legal-page main .wp-block-post-content h1, body.fdf-legal-page main .wp-block-post-content h2, body.fdf-legal-page main .wp-block-post-content h3, body.fdf-legal-page main .wp-block-post-content h4, body.fdf-legal-page main .wp-block-post-content h5, body.fdf-legal-page main .wp-block-post-content h6 { color: var(--fdf-text) !important; } body.fdf-legal-page main .wp-block-post-content strong, body.fdf-legal-page main .wp-block-post-content b { color: var(--fdf-text) !important; } body.fdf-legal-page main .wp-block-post-content a { color: var(--fdf-cta-blue) !important; } body.fdf-legal-page main .wp-block-post-content a:hover { color: var(--fdf-cta-blue-hover) !important; } body.fdf-legal-page main .wp-block-post-content hr { border: 0; border-top: 1px solid var(--fdf-border); margin: 2rem 0; opacity: 1; } body.fdf-legal-page main .wp-block-post-content blockquote { border-left: 4px solid var(--fdf-border); margin: 1.25rem 0; padding-left: 1rem; color: var(--fdf-muted) !important; } body.fdf-legal-page main .wp-block-post-content ul, body.fdf-legal-page main .wp-block-post-content ol { padding-left: 1.35rem; } body.fdf-legal-page main .wp-block-post-content .wp-block-group, body.fdf-legal-page main .wp-block-post-content .wp-block-columns { color: inherit; } body.fdf-legal-page main .wp-block-post-content .wp-block-heading { color: var(--fdf-text) !important; } body.fdf-legal-page main .wp-block-post-content .wp-block-separator { border-color: var(--fdf-border); } body.fdf-legal-page main .wp-block-post-content table { border-collapse: collapse; width: 100%; } body.fdf-legal-page main .wp-block-post-content th, body.fdf-legal-page main .wp-block-post-content td { border: 1px solid var(--fdf-border); padding: 0.5rem 0.75rem; } /* Ancêtres : pas d overflow:hidden sur la chaîne de scroll (sticky + mobile Safari) */ .wp-site-blocks { overflow: visible !important; } .wp-block-template-part:has(.fdf-header) { overflow: visible !important; } ::selection { background-color: rgba(2, 0, 255, 0.12); color: var(--fdf-text); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--fdf-bg); } ::-webkit-scrollbar-thumb { background: var(--fdf-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--fdf-muted); } /* ---- Images & figures ---- */ img { height: auto; max-width: 100%; display: block; } figure { margin: 0; } /* ---- Liens & transitions ---- */ a { color: var(--fdf-link); transition: color var(--fdf-transition), text-decoration-thickness var(--fdf-transition); } a:hover { color: var(--fdf-link-hover); text-decoration-thickness: 2px; } button { transition: color var(--fdf-transition), background-color var(--fdf-transition), border-color var(--fdf-transition), transform var(--fdf-transition); } /* ---- Formulaires ---- */ input, textarea, select { font-family: "Outfit", sans-serif; background: var(--fdf-surface); border: 1px solid var(--fdf-border); color: var(--fdf-text); border-radius: 6px; padding: .6rem 1rem; transition: border-color var(--fdf-transition), background-color var(--fdf-transition); } input:focus, textarea:focus, select:focus { border-color: var(--fdf-text); outline: none; background: var(--fdf-surface-2); } /* ==================================================================== HEADER — barre #0200FF pleine largeur (sticky, responsive) ==================================================================== */ .wp-block-template-part:has(.fdf-header), header.fdf-header.wp-block-group { width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* * Sticky sur le template-part entier (bleu + bandeau alerte) : même comportement * sur toutes les pages et tous les viewport. align-self:flex-start évite les bugs * sticky dans les colonnes flex (ex. carte plein écran). */ .wp-block-template-part:has(.fdf-header) { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 9990 !important; background: #0200FF; display: flex; flex-direction: column; align-items: stretch; align-self: flex-start; width: 100%; max-width: 100%; box-sizing: border-box; } /* Barre d admin WP : décaler le top sticky pour ne pas être masqué */ body.admin-bar .wp-block-template-part:has(.fdf-header) { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .wp-block-template-part:has(.fdf-header) { top: 46px !important; } } /* Bandeau alerte : même largeur que la barre bleue, sans écart visuel */ .wp-block-template-part:has(.fdf-info-alert) .fdf-header { border-bottom: none; box-shadow: none; } .wp-block-template-part:has(.fdf-info-alert) { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Le sticky est porté par le template-part ; le bloc bleu reste en flux */ #fdf-site-header.fdf-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 1; width: 100%; box-sizing: border-box; background: #0200FF; color: #fff; border: none; border-bottom: 1px solid var(--fdf-header-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px)); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding-left: 0; padding-right: 0; pointer-events: auto; transition: padding var(--fdf-transition), box-shadow var(--fdf-transition); } /* Contenu centré, largeur max 1330px (rangées top + sub) */ .fdf-header__shell { width: 100%; max-width: 1330px !important; margin-left: auto; margin-right: auto; padding-left: var(--fdf-header-shell-pad-left); padding-right: var(--fdf-header-shell-pad-right); display: flex; flex-direction: column; gap: 0; box-sizing: border-box; } /* Rangée 1 — marque + actions */ .fdf-header__top { display: flex; flex-direction: row; align-items: center; gap: clamp(8px, 2vw, 16px); min-height: 54px; width: 100%; min-width: 0; padding-bottom: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(255, 255, 255, 0.22); transition: border-bottom-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fdf-header__brand { flex-shrink: 0; display: flex; align-items: center; min-width: 0; } /* Rapproche le logo du bouton menu (le gap de la rangée s’applique à tous les flex items) */ .fdf-header__top > .fdf-burger-btn + .fdf-header__brand { margin-left: -1.1rem; } .fdf-header__top-spacer { flex: 1; min-width: 10px; } /* Accès rapides — style boutons contour + CTA rouge */ .fdf-header__quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-shrink: 1; min-width: 0; } .fdf-header__pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.42rem 0.95rem; border-radius: 9999px; font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; line-height: 1.15; transition: color var(--fdf-transition), background-color var(--fdf-transition), border-color var(--fdf-transition), transform .1s ease; } .fdf-header__pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .fdf-header__pill:active { transform: scale(0.97); } .fdf-header__pill-icon { flex-shrink: 0; } .fdf-header__pill--ghost { color: rgba(255, 255, 255, 0.95); background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); } .fdf-header__pill--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.75); color: #fff; } .fdf-header__pill--live { color: #fff; background: var(--fdf-cta-red); border: 1px solid transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); } .fdf-header__pill--live:hover { background: var(--fdf-cta-red-hover); color: #fff; } /* Rangée 2 — boutons cartes / prévention + menu principal WP (une seule ligne ; défilement horizontal si besoin) */ .fdf-header__sub { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; min-width: 0; padding-top: 10px; gap: 0.5rem 0.75rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; } .fdf-header__sub::-webkit-scrollbar { height: 3px; } .fdf-header__sub::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; } /* Masquage au scroll (voir initHeaderSubScrollCollapse dans fdf-main.js) */ #fdf-site-header .fdf-header__sub { max-height: 9rem; transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, padding-top 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); } #fdf-site-header.fdf-header--sub-collapsed .fdf-header__sub { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; transform: translateY(-6px); pointer-events: none; } #fdf-site-header.fdf-header--sub-collapsed .fdf-header__top { border-bottom-color: transparent; } @media (prefers-reduced-motion: reduce) { #fdf-site-header .fdf-header__sub { transition-duration: 0.01ms !important; } #fdf-site-header.fdf-header--sub-collapsed .fdf-header__sub { transform: none; } #fdf-site-header .fdf-header__top { transition-duration: 0.01ms !important; } } /* Boutons sous-barre (cartes, prévention) */ .fdf-header__sub-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.45rem; flex-shrink: 0; max-width: 100%; padding-right: 0.65rem; margin-right: 0.35rem; border-right: 1px solid rgba(255, 255, 255, 0.28); } @media (max-width: 768px) { .fdf-header__sub-actions { flex: 0 0 auto; min-width: 0; max-width: none; padding-right: 0.5rem; margin-right: 0.3rem; border-right: 1px solid rgba(255, 255, 255, 0.28); overflow-x: visible; -webkit-overflow-scrolling: touch; } /* * Rangée cartes / région : overflow-y:hidden rognait la piste de défilement * horizontal sur mobile. overflow-y:auto évite ce rognage sans scrollbar verticale * sur une seule ligne ; marge basse + scrollbar plus lisible sur fond bleu. */ .fdf-header__sub { overflow-y: auto; padding-bottom: 12px; box-sizing: border-box; scrollbar-width: auto; } .fdf-header__sub::-webkit-scrollbar { height: 8px; } .fdf-header__sub::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); } } /* « Ma région » : juste à droite des liens cartes (collé au trait) */ .fdf-header__ma-region { position: relative; flex-shrink: 0; display: flex; align-items: center; margin-left: 0; padding-left: 0; } .fdf-header__ma-region-btn { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.35rem 0.45rem 0.35rem 0.25rem; border: none; border-radius: 4px; background: transparent; font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: rgba(255, 255, 255, 0.96); cursor: pointer; transition: color var(--fdf-transition), opacity var(--fdf-transition), transform 0.1s ease; white-space: nowrap; } .fdf-header__ma-region-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .fdf-header__ma-region-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; } .fdf-header__ma-region-btn:active { transform: scale(0.98); opacity: 0.92; } .fdf-header__ma-region-btn__caret { flex-shrink: 0; opacity: 0.88; transition: transform 0.18s ease; } #fdf-ma-region-menu.is-open .fdf-header__ma-region-btn__caret, #fdf-moyens-menu.is-open .fdf-header__ma-region-btn__caret { transform: rotate(180deg); } /* Panneau : 2 colonnes sur desktop, drill-down sur mobile */ .fdf-header__ma-region-dropdown { display: grid; grid-template-columns: 260px 1fr; width: min(640px, calc(100vw - 16px)); min-width: 0; max-width: none; max-height: min(88vh, 760px); overflow: hidden; padding: 0; text-align: left; transform-origin: top left; } .fdf-header__ma-region-pane { overflow-y: auto; overflow-x: hidden; max-height: inherit; min-width: 0; scrollbar-width: thin; } .fdf-header__ma-region-pane--regions { border-right: 1px solid color-mix(in srgb, var(--fdf-border) 55%, transparent); padding: 0.5rem 0; } .fdf-header__ma-region-pane--depts { padding: 0.65rem 0.75rem 0.75rem; } /* Liste des régions */ .fdf-header__ma-region-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .fdf-header__ma-region-item { margin: 0; padding: 0; } .fdf-header__ma-region-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.6rem; margin: 0 0.4rem; border-radius: 9px; color: var(--fdf-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1.25; transition: background-color var(--fdf-transition); } .fdf-header__ma-region-link:hover, .fdf-header__ma-region-link:focus-visible, .fdf-header__ma-region-item.is-active > .fdf-header__ma-region-link { background: color-mix(in srgb, var(--fdf-text) 7%, transparent); text-decoration: none; outline: none; } .fdf-header__ma-region-name { flex: 1; min-width: 0; } /* Badge logo de région (carré arrondi : abréviation par défaut, image si importée) */ .fdf-header__ma-region-logo { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--fdf-region-c, #444); color: #fff; font-family: "Outfit", sans-serif; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden; } .fdf-header__ma-region-logo--lg { width: 40px; height: 40px; font-size: 0.6875rem; border-radius: 10px; } .fdf-header__ma-region-logo--img { background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fdf-text) 10%, transparent); } .fdf-header__ma-region-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } [data-theme="dark"] .fdf-header__ma-region-logo--img { background: #1f1f24; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .fdf-header__ma-region-logo--img { background: #1f1f24; } } /* Chevron à droite (flèche pleine, indique le drill-down) */ .fdf-header__ma-region-chev { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--fdf-muted); } .fdf-header__ma-region-chev::before { content: ""; display: block; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); } .fdf-header__ma-region-item.is-active > .fdf-header__ma-region-link .fdf-header__ma-region-chev { color: var(--fdf-text); } /* Bloc departements (un par region, JS revele lactif) */ .fdf-header__ma-region-deptsblock[hidden] { display: none; } .fdf-header__ma-region-depts-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.55rem; margin-bottom: 0.5rem; border-radius: 9px; color: var(--fdf-text); text-decoration: none; font-size: 0.95rem; font-weight: 700; line-height: 1.25; transition: background-color var(--fdf-transition); } .fdf-header__ma-region-depts-head:hover, .fdf-header__ma-region-depts-head:focus-visible { background: color-mix(in srgb, var(--fdf-text) 7%, transparent); text-decoration: none; outline: none; } .fdf-header__ma-region-depts-title { min-width: 0; } .fdf-header__ma-region-depts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; } .fdf-header__ma-region-depts-list li { margin: 0; padding: 0; min-width: 0; } .fdf-header__ma-region-depts-list a { display: block; padding: 0.5rem 0.65rem; border-radius: 7px; font-size: 0.875rem; font-weight: 500; color: var(--fdf-muted); text-decoration: none; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--fdf-transition), color var(--fdf-transition); } .fdf-header__ma-region-depts-list a:hover, .fdf-header__ma-region-depts-list a:focus-visible { background: color-mix(in srgb, var(--fdf-text) 7%, transparent); color: var(--fdf-text); text-decoration: none; outline: none; } /* Message vide dans le sous-menu Moyens de lutte */ .fdf-header__moyens-nav-empty { margin: 0.35rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--fdf-muted); line-height: 1.4; } /* Pied du menu Moyens de lutte : lien vers le hub */ #fdf-moyens-dropdown.fdf-header__moyens-dropdown { grid-template-rows: minmax(0, 1fr) auto; } #fdf-moyens-dropdown .fdf-header__moyens-nav-hub { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--fdf-border) 55%, transparent); padding: 0.6rem 0.75rem 0.65rem; background: color-mix(in srgb, var(--fdf-text) 4%, var(--fdf-surface)); } #fdf-moyens-dropdown .fdf-header__moyens-nav-hub-btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 0.55rem 0.85rem; border-radius: 8px; font-family: "Outfit", sans-serif; font-size: 0.875rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; color: #fff; background: var(--fdf-cta-blue); box-shadow: 0 1px 0 color-mix(in srgb, #000 12%, transparent); transition: background-color var(--fdf-transition), transform 0.1s ease; } #fdf-moyens-dropdown .fdf-header__moyens-nav-hub-btn:hover { background: var(--fdf-cta-blue-hover); color: #fff; text-decoration: none; } #fdf-moyens-dropdown .fdf-header__moyens-nav-hub-btn:focus-visible { outline: 2px solid var(--fdf-cta-blue); outline-offset: 3px; } #fdf-moyens-dropdown .fdf-header__moyens-nav-hub-btn:active { transform: scale(0.99); } /* Moyens : icône sans cadre ni fond blanc (PNG transparent) */ #fdf-moyens-dropdown .fdf-header__ma-region-logo--img { background: transparent !important; box-shadow: none !important; } [data-theme="dark"] #fdf-moyens-dropdown .fdf-header__ma-region-logo--img { background: transparent !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) #fdf-moyens-dropdown .fdf-header__ma-region-logo--img { background: transparent !important; } } #fdf-moyens-dropdown .fdf-header__ma-region-logo img { object-fit: contain; } /* Moyens : Google Material Icons (ligature définie sur la page catégorie) */ #fdf-moyens-dropdown .fdf-header__ma-region-logo--material { background: transparent !important; box-shadow: none !important; text-transform: none; letter-spacing: normal; color: var(--fdf-region-c, var(--fdf-text)); display: inline-flex; align-items: center; justify-content: center; } #fdf-moyens-dropdown .fdf-header__ma-region-logo--material .material-icons { font-size: 22px; line-height: 1; font-weight: normal; font-style: normal; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; } #fdf-moyens-dropdown .fdf-header__ma-region-logo--lg.fdf-header__ma-region-logo--material .material-icons { width: 40px; height: 40px; font-size: 26px; } /* Moyens : filigrane (image ou ligature Material) dans le panneau fiches */ #fdf-moyens-dropdown .fdf-header__ma-region-pane--depts { position: relative; overflow: hidden; } #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-mat], #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-filig="1"] { position: relative; isolation: isolate; } #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-mat]::before { content: attr(data-fdf-mat); font-family: "Material Icons", sans-serif; font-weight: normal; font-style: normal; font-size: clamp(3.5rem, 20vw, 10rem); line-height: 1; letter-spacing: normal; text-transform: none; position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) rotate(-10deg); opacity: 0.08; pointer-events: none; z-index: 0; white-space: nowrap; color: var(--fdf-text); -webkit-font-smoothing: antialiased; } #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-filig="1"]::before { content: ""; position: absolute; inset: -8% -6% -4%; background-image: var(--fdf-moyens-filig); background-repeat: no-repeat; background-position: 50% 38%; background-size: min(78%, 240px); opacity: 0.09; pointer-events: none; z-index: 0; } #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-mat] > *, #fdf-moyens-dropdown .fdf-header__ma-region-deptsblock[data-fdf-filig="1"] > * { position: relative; z-index: 1; } /* Bouton « Retour » (visible uniquement en drill-down mobile) */ .fdf-header__ma-region-back { display: none; align-items: center; gap: 0.4rem; width: 100%; padding: 0.5rem 0.6rem; margin-bottom: 0.45rem; background: transparent; border: none; border-radius: 8px; color: var(--fdf-text); font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-align: left; transition: background-color var(--fdf-transition); } .fdf-header__ma-region-back:hover, .fdf-header__ma-region-back:focus-visible { background: color-mix(in srgb, var(--fdf-text) 7%, transparent); outline: none; } /* Mobile : panneau colonne unique + drill-down (régions ⇄ départements) */ @media (max-width: 768px) { .fdf-header__ma-region-dropdown { display: block; grid-template-columns: none; width: min(360px, calc(100vw - 16px)); } .fdf-header__ma-region-pane--regions { border-right: none; } .fdf-header__ma-region-pane--depts { display: none; } .fdf-header__ma-region-dropdown[data-mode="depts"] .fdf-header__ma-region-pane--regions { display: none; } .fdf-header__ma-region-dropdown[data-mode="depts"] .fdf-header__ma-region-pane--depts { display: block; } .fdf-header__ma-region-back { display: inline-flex; } .fdf-header__ma-region-depts-list { grid-template-columns: 1fr; } } /* Desktop : on masque le bouton Retour, on cache le chevron (le clic régional reste un lien direct) */ @media (min-width: 769px) { .fdf-header__ma-region-back { display: none !important; } } .fdf-header__sub-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.55rem; border-radius: 0; font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: rgba(255, 255, 255, 0.96); text-decoration: none; text-underline-offset: 3px; white-space: nowrap; background: transparent; border: none; box-shadow: none; transition: color var(--fdf-transition), opacity var(--fdf-transition), transform .1s ease; } .fdf-header__sub-btn:hover { color: #fff; text-decoration: underline; } .fdf-header__sub-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; } .fdf-header__sub-btn:active { transform: scale(0.98); opacity: 0.92; } /* Priorité sur les styles de blocs WP dans le sous-header */ #fdf-site-header .fdf-header__sub-btn { background: transparent !important; border: none !important; box-shadow: none !important; } /* Indicateur feux (plugin fdf-bridge, valide_publie) à côté du lien « Feux en cours » */ .fdf-header__sub-btn--with-feux-live { gap: 0.35em; } .fdf-header__feux-live { display: inline-flex; align-items: center; margin-left: 0.12em; vertical-align: middle; } .fdf-header__feux-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; } .fdf-header__feux-dot--ok { background: #22c55e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); } .fdf-header__feux-dot--unknown { background: rgba(255, 255, 255, 0.38); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); } .fdf-header__feux-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem; border-radius: 999px; font-size: 0.625rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; box-sizing: border-box; } .fdf-header__feux-count--warn { background: rgba(250, 204, 21, 0.95); color: #1c1300; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } .fdf-header__feux-count--danger { background: rgba(248, 113, 113, 0.98); color: #1a0505; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); } .fdf-header__top > .fdf-burger-btn { flex-shrink: 0; align-self: center; width: 52px; height: 52px; border-radius: 14px; } .fdf-header__top > .fdf-user-menu { flex-shrink: 0; min-height: 48px; display: flex; align-items: stretch; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: clamp(0.55rem, 1.5vw, 0.95rem); box-sizing: border-box; } .fdf-header__top > .fdf-user-menu .fdf-user-toggle { min-height: 48px; height: auto; border-radius: 4px; padding-left: 1rem; padding-right: 1.25rem; } .fdf-header__top > .fdf-espaces-menu { flex-shrink: 0; display: flex; align-items: stretch; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: clamp(0.55rem, 1.5vw, 0.95rem); box-sizing: border-box; } .fdf-header__top > .fdf-espaces-menu .fdf-espaces-toggle { min-height: 48px; height: auto; border-radius: 4px; padding-left: 0.85rem; padding-right: 1rem; } .fdf-header .fdf-espaces-toggle { display: flex; align-items: center; gap: 0.375rem; background: transparent; border: none; box-shadow: none; color: #fff; cursor: pointer; font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1; transition: transform .1s ease, background-color .2s ease; } .fdf-header .fdf-espaces-toggle:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.95); } .fdf-header .fdf-espaces-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; } .fdf-header .fdf-espaces-toggle:active { transform: scale(0.96); } #fdf-site-header .fdf-espaces-toggle { background: transparent !important; border: none !important; box-shadow: none !important; } .fdf-header .fdf-espaces-icon { stroke: currentColor; flex-shrink: 0; } .fdf-espaces-dropdown { min-width: min(320px, 92vw); max-height: min(70vh, 440px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .fdf-espaces-dropdown .fdf-user-dropdown__item { flex-direction: row; align-items: center; gap: 0.65rem; padding-top: 0.6rem; padding-bottom: 0.6rem; flex-wrap: nowrap; } .fdf-espaces-dropdown__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--fdf-text); } .fdf-espaces-dropdown__icon svg { width: 22px; height: 22px; display: block; } .fdf-espaces-dropdown__textcol { display: flex; flex-direction: row; align-items: center; min-width: 0; } .fdf-espaces-dropdown__hub-text { font-weight: 700; font-size: 0.875rem; line-height: 1.2; } .fdf-espaces-dropdown__title { font-weight: 600; font-size: 0.875rem; line-height: 1.35; color: var(--fdf-text); } /* Burger — icône seule, sans fond */ .fdf-header .fdf-burger-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; cursor: pointer; color: #fff; transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease; } .fdf-header .fdf-burger-btn:hover { background: transparent; box-shadow: none; } .fdf-header .fdf-burger-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; } .fdf-header .fdf-burger-btn:active { transform: scale(0.96); } #fdf-site-header .fdf-burger-btn { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 14px !important; } /* Material Icons — « menu » / « close » à l’ouverture */ .fdf-header .fdf-burger-btn .fdf-burger-material { display: block; font-size: 26px; line-height: 1; width: 1em; height: 1em; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: opacity .15s ease, transform .18s ease; } .fdf-header .fdf-burger-btn .fdf-burger-material--close { display: none; } .fdf-header .fdf-burger-btn[aria-expanded="true"] .fdf-burger-material--menu { display: none; } .fdf-header .fdf-burger-btn[aria-expanded="true"] .fdf-burger-material--close { display: block; } /* Menu burger — overlay + tiroir gauche Fallback CSS (no-JS) : si le verrou JS n a pas pu poser body{position:fixed}, on coupe au moins le scroll de la page. Le JS prend en charge la restauration de la position de scroll au close (anti-saut iOS Safari). */ body.fdf-burger-open { overflow: hidden; overscroll-behavior: contain; } .fdf-burger-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.48); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; pointer-events: none; } .fdf-burger-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .fdf-burger-panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 400px); max-width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 0; display: flex; flex-direction: column; background: transparent; border: none; border-radius: 0; box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18); transform: translateX(-104%); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); z-index: 100001; overflow: hidden; pointer-events: none; } .fdf-burger-panel.is-open { transform: translateX(0); pointer-events: auto; } /* Bandeau bleu — fermer + logo */ .fdf-burger-panel__header { flex-shrink: 0; display: flex; align-items: center; gap: 0.65rem; min-height: 52px; padding: max(10px, env(safe-area-inset-top, 0px)) 14px 12px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: 14px; background: #0200FF; color: #fff; } .fdf-burger-panel__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background-color .2s ease, transform .1s ease; } .fdf-burger-panel__close:hover { background: rgba(255, 255, 255, 0.26); } .fdf-burger-panel__close:active { transform: scale(0.94); } .fdf-burger-panel__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .fdf-burger-panel__brand { display: flex; align-items: center; min-width: 0; text-decoration: none; color: inherit; } .fdf-burger-panel__logo { display: block; height: 44px; width: auto; max-width: min(280px, 58vw); object-fit: contain; } /* Corps du tiroir — suit clair / sombre / auto (--fdf-* sur :root) */ .fdf-burger-panel__body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--fdf-bg); color: var(--fdf-text); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); } .fdf-burger-panel__section { padding: 16px 18px 14px; } .fdf-burger-panel__section-title { margin: 0 0 12px; font-family: "Outfit", sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fdf-muted); } .fdf-burger-panel__chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; margin: 0 -4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fdf-burger-panel__chips::-webkit-scrollbar { display: none; } .fdf-burger-panel__chip { flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--fdf-border); border-radius: 8px; background: var(--fdf-surface); font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; color: var(--fdf-text); text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .fdf-burger-panel__chip:hover { background: var(--fdf-surface-2); border-color: var(--fdf-muted); } .fdf-burger-panel__sep { height: 1px; margin: 0; border: none; background: var(--fdf-border); flex-shrink: 0; } .fdf-burger-panel__search { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 10px; padding: 0.55rem 0.85rem; box-sizing: border-box; } .fdf-burger-panel__search svg { flex-shrink: 0; color: var(--fdf-muted); } .fdf-burger-panel__search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fdf-text); font-family: "Outfit", sans-serif; font-size: 0.9375rem; outline: none; } .fdf-burger-panel__search input::placeholder { color: var(--fdf-muted); } .fdf-burger-panel__search button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; cursor: pointer; color: var(--fdf-muted); line-height: 0; } .fdf-burger-panel__search button:hover { color: var(--fdf-text); } .fdf-burger-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: "Outfit", sans-serif; font-size: 0.875rem; } .fdf-burger-panel__row-label { color: var(--fdf-muted); font-weight: 500; font-size: 0.8125rem; } .fdf-burger-panel__row .fdf-theme-toggle { font-size: 0.75rem; border-radius: 9999px; border: 1px solid var(--fdf-border); background: var(--fdf-surface); padding: 0.45rem 0.75rem; } /* --- Logo header : rendu naturel, sans filtre ni animation --- */ #fdf-site-header .fdf-header__logo-wrap { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; } #fdf-site-header .fdf-header__logo-wrap:hover { color: inherit; } /* Variantes de classe (thème + partie modèle BDD) */ #fdf-site-header .fdf-header__logo-wrap img.fdf-header__logo, #fdf-site-header .fdf-header__logo-wrap img.fdf-header__logo--dark, #fdf-site-header .fdf-header__logo-wrap img.fdf-header__logo--light, #fdf-site-header .fdf-header__logo-wrap img.fdf-header__logo--on-brand, #fdf-site-header img.fdf-header__logo.fdf-header__logo--dark, #fdf-site-header img.fdf-header__logo.fdf-header__logo--light { height: clamp(36px, 7vw, 56px); width: auto; max-width: none; display: block; object-fit: contain; filter: none !important; -webkit-filter: none !important; } /* --- Navigation (rangée 2 — type fil rouge) --- */ .fdf-header__sub .fdf-header__nav { flex: 1 1 auto; display: flex !important; justify-content: flex-start; align-items: center; min-width: 0; min-height: 0; } @media (max-width: 768px) { /* Le bloc menu est déplacé dans le burger : ne réserve pas de place vide */ .fdf-header__sub .fdf-header__nav { display: none !important; } } .fdf-header__sub .fdf-header__nav .wp-block-navigation__container { flex-wrap: nowrap !important; justify-content: flex-start !important; row-gap: 0 !important; } .fdf-header__sub .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item { display: flex; flex-direction: row; align-items: center; position: relative; } /* Séparateurs « | » entre entrées de premier niveau */ .fdf-header__sub .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { content: ""; display: block; width: 1px; height: 0.95em; margin-left: 0.35rem; margin-right: 0.35rem; background: rgba(255, 255, 255, 0.35); flex-shrink: 0; align-self: center; } .fdf-header__nav .wp-block-navigation__container, .fdf-header__nav .wp-block-navigation-item { gap: 0 !important; } .fdf-header__sub .fdf-header__nav .wp-block-navigation-item__content { font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); text-decoration: none; padding: 0.35rem 0.45rem; border-radius: 4px; transition: color var(--fdf-transition), background-color var(--fdf-transition); } .fdf-header__sub .fdf-header__nav .wp-block-navigation-item__content:hover, .fdf-header__sub .fdf-header__nav .current-menu-item > .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.1); } /* Sous-menus : repasser en couleurs page */ .fdf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--fdf-text); } .fdf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: color-mix(in srgb, var(--fdf-text) 8%, transparent); color: var(--fdf-text); } .fdf-header .fdf-user-toggle { background: transparent; border: none; box-shadow: none; color: #fff; } .fdf-header .fdf-user-toggle:hover { background: rgba(255, 255, 255, 0.1); border: none; box-shadow: none; color: rgba(255, 255, 255, 0.92); } .fdf-header .fdf-user-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; } #fdf-site-header .fdf-user-toggle { background: transparent !important; border: none !important; box-shadow: none !important; } /* Menu principal dans le tiroir — liste type « rubriques » */ .fdf-burger-panel__nav { min-width: 0; width: 100%; } .fdf-burger-panel__nav .fdf-header__nav { display: block !important; width: 100%; } .fdf-burger-panel__nav .wp-block-navigation__container { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important; } .fdf-burger-panel__nav .wp-block-navigation-item { width: 100%; } .fdf-burger-panel__nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item::after { display: none !important; } .fdf-burger-panel__nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item { border-bottom: 1px solid var(--fdf-border); } .fdf-burger-panel__nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: none; } .fdf-burger-panel__nav .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; box-sizing: border-box; padding: 0.95rem 2px; border-radius: 0; color: var(--fdf-text); font-size: 0.9375rem; font-weight: 600; text-align: left; } .fdf-burger-panel__nav .wp-block-navigation__submenu-container { padding: 0 0 6px 10px; margin-top: -4px; gap: 0 !important; } .fdf-burger-panel__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-weight: 500; font-size: 0.875rem; padding: 0.55rem 2px; border-bottom: none; } .fdf-burger-panel__nav .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: none; } .fdf-burger-panel__nav .wp-block-navigation-item__content:hover, .fdf-burger-panel__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--fdf-text); background: transparent; text-decoration: underline; text-underline-offset: 3px; } .fdf-burger-panel__nav .wp-block-navigation__submenu-icon svg { color: var(--fdf-muted); } /* ==================================================================== PAGE CARTE PLEIN ÉCRAN — même header sticky que sur le reste du site. Body en colonne flex : le
prend tout l’espace sous le template header. ==================================================================== */ body.fdf-page-carte-full, body.fdf-page-carte-home { --fdf-map-pad-x: max(clamp(8px, 2vw, 20px), env(safe-area-inset-left, 0px)); --fdf-map-pad-x-right: max(clamp(8px, 2vw, 20px), env(safe-area-inset-right, 0px)); --fdf-map-pad-y: max(12px, calc(env(safe-area-inset-top, 0px) + 6px)); --fdf-map-pad-bottom: max(12px, env(safe-area-inset-bottom, 0px)); --fdf-map-corner-radius: 20px; } @media (max-width: 768px) { body.fdf-page-carte-full, body.fdf-page-carte-home { --fdf-map-pad-x: max(8px, env(safe-area-inset-left, 0px)); --fdf-map-pad-x-right: max(8px, env(safe-area-inset-right, 0px)); --fdf-map-pad-y: 10px; --fdf-map-pad-bottom: max(10px, env(safe-area-inset-bottom, 0px)); } } @media (max-width: 480px) { body.fdf-page-carte-full, body.fdf-page-carte-home { --fdf-map-pad-x: max(6px, env(safe-area-inset-left, 0px)); --fdf-map-pad-x-right: max(6px, env(safe-area-inset-right, 0px)); --fdf-map-pad-y: 8px; --fdf-map-pad-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } } /* * Page carte plein écran : header sticky en haut, carte qui remplit exactement * le reste du viewport, titre H1 en pastille flottante, pas de footer, pas de scroll. * * Stratégie : flex column sur body & wp-site-blocks pour que
prenne toute la * place sous le header, puis position: absolute pour la post-content et la carte * (évite toute dépendance fragile à une chaîne flex multi-niveaux). */ body.fdf-page-carte-full { box-sizing: border-box; height: 100vh; height: 100dvh; overflow: hidden; margin: 0 !important; display: flex; flex-direction: column; } /* Footer masqué (template-part complet + fallback sur la classe). */ body.fdf-page-carte-full .wp-site-blocks > .wp-block-template-part:has(.fdf-footer), body.fdf-page-carte-full .wp-site-blocks > footer, body.fdf-page-carte-full footer.fdf-footer, body.fdf-page-carte-full .fdf-footer { display: none !important; } /* Image à la une de la page : pas pertinente sur la carte. */ body.fdf-page-carte-full main .wp-block-post-featured-image, body.fdf-page-carte-full main .wp-post-image { display: none !important; } body.fdf-page-carte-full .wp-site-blocks { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; margin: 0 !important; padding: 0 !important; } body.fdf-page-carte-full .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; padding-top: 0 !important; } /* Bandeau header sticky : ne se rétrécit pas. */ body.fdf-page-carte-full .wp-site-blocks > .wp-block-template-part:has(.fdf-header) { flex-shrink: 0; } /*
: prend tout l’espace restant sous le header, sert de référent absolu. */ body.fdf-page-carte-full main, body.fdf-page-carte-full .fdf-main--carte-full { flex: 1 1 auto !important; min-height: 0 !important; position: relative !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* Post-content : remplit complètement
sans dépendance flex. */ body.fdf-page-carte-full main .wp-block-post-content, body.fdf-page-carte-full main .entry-content.wp-block-post-content { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* * Pastille titre en surimpression — Liquid Glass type Apple. * - Fond suffisamment dense pour rester lisible sur tout type de carte * (clair, sombre, satellite), avec saturation/blur forts pour l’effet « verre ». * - Texte stable (couleur du thème) + ombre douce → toujours lisible. * - Réflexions internes pour l’effet 3D « verre épais ». */ body.fdf-page-carte-full main > .wp-block-group:first-of-type { position: absolute !important; top: clamp(12px, 2vw, 20px) !important; left: clamp(12px, 2vw, 20px) !important; right: auto !important; bottom: auto !important; z-index: 5; margin: 0 !important; padding: 0.65rem 1.4rem 0.65rem 1.3rem !important; border-radius: 999px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.68) 100%); -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05); backdrop-filter: blur(40px) saturate(220%) brightness(1.05); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 36px rgba(0, 0, 0, 0.22), 0 30px 60px -12px rgba(0, 0, 0, 0.18); max-width: calc(100% - 24px); gap: 0 !important; isolation: isolate; transition: backdrop-filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } /* Reflet supérieur — simule la « courbure » du dessus du verre. */ body.fdf-page-carte-full main > .wp-block-group:first-of-type::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 55%; border-radius: 999px 999px 0 0 / 999px 999px 0 0; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 0; } /* Reflet inférieur — légère lumière qui repasse sous le verre. */ body.fdf-page-carte-full main > .wp-block-group:first-of-type::after { content: ""; position: absolute; inset: auto 6px 1px 6px; height: 22%; border-radius: 0 0 999px 999px / 0 0 999px 999px; background: linear-gradient( to top, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 0; } /* Le H1 : couleur stable (thème), poids fort, taille modeste, ombre fine. */ body.fdf-page-carte-full main > .wp-block-group:first-of-type .wp-block-post-title, body.fdf-page-carte-full main > .wp-block-group:first-of-type h1 { position: relative; z-index: 1; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; font-weight: 700 !important; color: #0A0A0A !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 1px rgba(255, 255, 255, 0.3); mix-blend-mode: normal !important; } /* Mode sombre — pastille plus profonde, texte clair. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) body.fdf-page-carte-full main > .wp-block-group:first-of-type { background: linear-gradient(135deg, rgba(28, 28, 38, 0.7) 0%, rgba(28, 28, 38, 0.45) 50%, rgba(28, 28, 38, 0.62) 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.5), 0 30px 60px -12px rgba(0, 0, 0, 0.4); } :root:not([data-theme]) body.fdf-page-carte-full main > .wp-block-group:first-of-type::before { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0) 100%); } :root:not([data-theme]) body.fdf-page-carte-full main > .wp-block-group:first-of-type::after { background: linear-gradient( to top, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%); } :root:not([data-theme]) body.fdf-page-carte-full main > .wp-block-group:first-of-type .wp-block-post-title, :root:not([data-theme]) body.fdf-page-carte-full main > .wp-block-group:first-of-type h1 { color: #FAFAFA !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.3); } } [data-theme="dark"] body.fdf-page-carte-full main > .wp-block-group:first-of-type { background: linear-gradient(135deg, rgba(28, 28, 38, 0.7) 0%, rgba(28, 28, 38, 0.45) 50%, rgba(28, 28, 38, 0.62) 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.5), 0 30px 60px -12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] body.fdf-page-carte-full main > .wp-block-group:first-of-type::before { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0) 100%); } [data-theme="dark"] body.fdf-page-carte-full main > .wp-block-group:first-of-type::after { background: linear-gradient( to top, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%); } [data-theme="dark"] body.fdf-page-carte-full main > .wp-block-group:first-of-type .wp-block-post-title, [data-theme="dark"] body.fdf-page-carte-full main > .wp-block-group:first-of-type h1 { color: #FAFAFA !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.3); } body.fdf-page-carte-full main .wp-block-post-content, body.fdf-page-carte-full main .entry-content.wp-block-post-content { max-width: none !important; width: 100% !important; } /* Sortir la carte du gabarit « constrained » (~1140px) + padding global du thème. */ body.fdf-page-carte-full main .wp-block-post-content.has-global-padding, body.fdf-page-carte-full main .entry-content.wp-block-post-content.has-global-padding { padding-left: env(safe-area-inset-left, 0px) !important; padding-right: env(safe-area-inset-right, 0px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.fdf-page-carte-full main .wp-block-post-content.is-layout-constrained > *, body.fdf-page-carte-full main .entry-content.is-layout-constrained > * { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important; } /* Carte : remplit son parent absolu (.wp-block-post-content qui occupe tout
). */ body.fdf-page-carte-full .fdf-carte--root { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #e8eef2; box-shadow: none !important; } /* Carte vigilance : même occupation plein écran que /cartes/feux/. */ body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-carto-container { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; background: #e8eef2; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-carte-map { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 0 !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte-wrap, body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-carte-risque { position: absolute !important; inset: 0 !important; z-index: 2; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #e8eef2; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte__inner { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte__status { position: absolute; top: 0; left: 0; right: 0; z-index: 5; margin: 0 !important; padding: 0.35rem 0.75rem !important; background: rgba(255, 255, 255, 0.88); color: #b30000; font-size: 0.82rem; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte__legend { position: absolute !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; z-index: 5; display: flex !important; flex-wrap: wrap; gap: 8px !important; max-width: min(720px, calc(100% - 20px)); margin: 0 !important; padding: 8px 10px !important; border-radius: 999px; background: rgba(10, 10, 10, 0.55); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte__legend li { display: inline-flex; align-items: center; gap: 5px; margin: 0 !important; white-space: nowrap; font-size: 0.78rem; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panels { position: fixed !important; left: max(10px, env(safe-area-inset-left, 0px)); bottom: max(38px, env(safe-area-inset-bottom, 0px)); z-index: 10020; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; max-width: min(860px, calc(100% - 20px)); margin: 0 !important; font-family: "Outfit", sans-serif; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel { position: relative; margin: 0 !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel summary { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 34px; padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 999px; background: rgba(255, 255, 255, 0.84); color: #1f2933; cursor: pointer; font-size: 0.78rem; font-weight: 700; line-height: 1; list-style: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel summary::-webkit-details-marker { display: none; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel[open] { flex-basis: min(760px, 100%); } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel[open] summary { margin-bottom: 8px; background: rgba(255, 255, 255, 0.96); } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content { max-height: min(46vh, 420px); max-width: min(760px, calc(100vw - 20px)); overflow: auto; padding: 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.94); color: #1f2933; font-size: 0.88rem; line-height: 1.45; box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content strong { color: #b30000; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content h2, body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content h3 { margin: 0 0 0.55rem !important; font-family: "Outfit", sans-serif !important; color: #0A0A0A; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content p { margin: 0 0 0.8rem !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-dept-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-region { margin: 0; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-region h3 { font-size: 0.9rem !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-region ul { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 !important; padding: 0 !important; list-style: none; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-region a { display: inline-flex; padding: 0.32rem 0.5rem; border-radius: 999px; background: #f1f4f8; color: #102a43; text-decoration: none; font-weight: 700; font-size: 0.78rem; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-region a[aria-current="page"] { background: #D00000; color: #fff; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tabs { position: absolute !important; top: 12px !important; left: 0 !important; right: 0 !important; z-index: 4; display: flex !important; justify-content: center !important; margin: 0 !important; padding: 0 clamp(12px, 2vw, 24px); pointer-events: none; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tabs-nav { max-width: min(100%, 620px) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); pointer-events: auto; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tab-link { border-bottom: 0 !important; border-radius: 999px !important; padding: 0.58rem 1rem !important; font-family: "Outfit", sans-serif !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tab-link.active { background: #D00000 !important; color: #fff !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-carte-legend { right: max(10px, env(safe-area-inset-right, 0px)) !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; z-index: 4; gap: 8px !important; padding: 8px !important; border-radius: 999px; background: rgba(10, 10, 10, 0.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } @media (max-width: 640px) { body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tabs { top: 8px !important; padding-inline: 8px; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tabs-nav { overflow-x: auto !important; justify-content: flex-start; border-radius: 18px !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-tab-link { padding: 0.52rem 0.78rem !important; font-size: 0.82rem !important; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-carte-legend { left: 8px !important; right: 8px !important; overflow-x: auto; border-radius: 16px; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-risque-carte__legend { left: 8px !important; right: 8px !important; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; border-radius: 16px; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panels { left: 8px; right: 8px; bottom: max(38px, env(safe-area-inset-bottom, 0px)); max-width: none; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel summary { font-size: 0.74rem; padding: 0.42rem 0.62rem; } body.fdf-page-carte-full.fdf-page-vigilance-map .fdf-vigilance-panel__content { max-height: min(54vh, 420px); font-size: 0.82rem; } } /* Toolbar : dans la zone carte */ body.fdf-page-carte-full .fdf-carte--root .fdf-carte-toolbar, body.fdf-page-carte-home .fdf-carte--root .fdf-carte-toolbar { top: 12px !important; left: 0 !important; right: 0 !important; padding-left: clamp(12px, 2vw, 24px); padding-right: clamp(12px, 2vw, 24px); justify-content: center; } /* Bord bas : safe area pour le home indicator iPhone */ body.fdf-page-carte-full .maplibregl-ctrl-bottom-left, body.fdf-page-carte-full .maplibregl-ctrl-bottom-right { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* ==================================================================== PAGE ACCUEIL — carte + contenu scrollable (même header que les autres pages) ==================================================================== */ body.fdf-page-carte-home .wp-site-blocks, body.fdf-page-carte-home .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; padding-top: 0 !important; } /* Carte accueil : 70vh + même cadre verre que le bandeau */ body.fdf-page-carte-home .fdf-carte--root { display: block !important; height: 70vh !important; min-height: 0 !important; border-radius: var(--fdf-map-corner-radius) !important; width: calc(100% - var(--fdf-map-pad-x) - var(--fdf-map-pad-x-right)) !important; max-width: none !important; margin-top: 0 !important; margin-left: var(--fdf-map-pad-x) !important; margin-right: var(--fdf-map-pad-x-right) !important; margin-bottom: var(--fdf-map-pad-bottom) !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.55); background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset; transition: box-shadow var(--fdf-transition), border-color var(--fdf-transition); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body.fdf-page-carte-home .fdf-carte--root { background: linear-gradient(135deg, rgba(20, 20, 30, 0.65) 0%, rgba(20, 20, 30, 0.4) 100%); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.07) inset; } } [data-theme="dark"] body.fdf-page-carte-home .fdf-carte--root { background: linear-gradient(135deg, rgba(20, 20, 30, 0.65) 0%, rgba(20, 20, 30, 0.4) 100%); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.07) inset; } /* Bord bas */ body.fdf-page-carte-home .maplibregl-ctrl-bottom-left, body.fdf-page-carte-home .maplibregl-ctrl-bottom-right { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* Le contenu qui suit la carte commence normalement (pas de padding-top global) */ body.fdf-page-carte-home main > *:not(:first-child) { position: relative; z-index: 1; background: var(--fdf-bg); } /* ==================================================================== BOUTON COMPTE UTILISATEUR ==================================================================== */ .fdf-user-menu { position: relative; } .fdf-user-toggle { display: flex; align-items: center; gap: 0.375rem; background: var(--fdf-surface); border: 1px solid var(--fdf-border); color: var(--fdf-text); border-radius: 20px; padding: 0.35rem 0.875rem 0.35rem 0.625rem; cursor: pointer; font-family: "Outfit", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; line-height: 1; transition: color var(--fdf-transition), background-color var(--fdf-transition), border-color var(--fdf-transition), transform .1s ease; } .fdf-user-toggle:hover { color: var(--fdf-text); border-color: var(--fdf-text); background: color-mix(in srgb, var(--fdf-text) 6%, var(--fdf-surface)); } .fdf-user-toggle:active { transform: scale(0.96); } .fdf-user-icon { stroke: currentColor; flex-shrink: 0; } .fdf-user-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--fdf-cta-blue); color: #fff; font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdf-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Dropdown */ .fdf-user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; border-radius: 14px; overflow: hidden; background: linear-gradient( 135deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100% ); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.8) inset; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.97); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; z-index: 10001; } [data-theme="dark"] .fdf-user-dropdown { background: linear-gradient(135deg, rgba(22,22,32,0.95) 0%, rgba(22,22,32,0.82) 100%); border-color: rgba(255,255,255,0.10); box-shadow: 0 4px 6px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.50), 0 1px 0 rgba(255,255,255,0.05) inset; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .fdf-user-dropdown { background: linear-gradient(135deg, rgba(22,22,32,0.95) 0%, rgba(22,22,32,0.82) 100%); border-color: rgba(255,255,255,0.10); box-shadow: 0 4px 6px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.50), 0 1px 0 rgba(255,255,255,0.05) inset; } } .fdf-user-dropdown.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .fdf-user-dropdown__header { padding: 0.875rem 1rem 0.75rem; border-bottom: 1px solid var(--fdf-border); display: flex; flex-direction: column; gap: 0.2rem; } .fdf-user-dropdown__header strong { font-size: 0.875rem; font-weight: 700; color: var(--fdf-text); } .fdf-user-dropdown__header span { font-size: 0.75rem; color: var(--fdf-muted); } .fdf-user-dropdown__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; font-family: "Outfit", sans-serif; font-size: 0.875rem; font-weight: 500; color: var(--fdf-text); text-decoration: none; transition: background var(--fdf-transition); } .fdf-user-dropdown__item + .fdf-user-dropdown__item { border-top: 1px solid color-mix(in srgb, var(--fdf-border) 60%, transparent); } .fdf-user-dropdown__item:hover { background: color-mix(in srgb, var(--fdf-text) 6%, transparent); text-decoration: none; } .fdf-user-dropdown__item--primary { color: var(--fdf-cta-blue); font-weight: 600; } .fdf-user-dropdown__item--primary:hover { background: color-mix(in srgb, var(--fdf-cta-blue) 8%, transparent); } .fdf-user-dropdown__item--danger { color: var(--fdf-cta-red); } .fdf-user-dropdown__item--danger:hover { background: color-mix(in srgb, var(--fdf-cta-red) 8%, transparent); } /* ==================================================================== TOGGLE THÈME ==================================================================== */ .fdf-theme-toggle { display: flex; align-items: center; gap: 0.375rem; background: var(--fdf-surface); border: 1px solid var(--fdf-border); color: var(--fdf-muted); border-radius: 20px; padding: 0.35rem 0.875rem 0.35rem 0.625rem; cursor: pointer; font-family: "Outfit", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px; transition: color var(--fdf-transition), background-color var(--fdf-transition), border-color var(--fdf-transition), transform .1s ease; white-space: nowrap; line-height: 1; } .fdf-theme-toggle:hover { color: var(--fdf-text); border-color: var(--fdf-text); background: color-mix(in srgb, var(--fdf-text) 6%, var(--fdf-surface)); } .fdf-theme-toggle:active { transform: scale(0.96); } /* Icônes toggle */ .fdf-toggle-icon { display: none; stroke: currentColor; flex-shrink: 0; } .fdf-toggle-label { font-size: 0.75rem; line-height: 1; } /* Quelle icône afficher selon data-theme du bouton */ .fdf-theme-toggle[data-theme="auto"] .fdf-toggle-icon--auto, .fdf-theme-toggle[data-theme="dark"] .fdf-toggle-icon--dark, .fdf-theme-toggle[data-theme="light"] .fdf-toggle-icon--light, .fdf-theme-toggle:not([data-theme]) .fdf-toggle-icon--auto { display: block; } /* ==================================================================== PAGE CONTACT — Layout plein écran split ==================================================================== */ body.fdf-page-contact .wp-site-blocks, body.fdf-page-contact .wp-block-template-part:not(:has(.fdf-header)):not(:has(.fdf-footer)) { background: var(--fdf-bg); } .fdf-contact-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--fdf-header-band-h, 160px)); } .fdf-contact-page__grid { display: grid; grid-template-columns: 420px 1fr; flex: 1; min-height: inherit; } /* Les groupes WP ajoutent un layout qui sinon écrase la grille (ex. page Signaler). */ .wp-block-group.fdf-contact-page__grid { display: grid !important; } .wp-block-group.fdf-contact-page__form-panel { display: flex !important; } .wp-block-group.fdf-contact-page__panel { display: flex !important; } /* ----- Panel gauche (bleu marque, invariant light/dark) ----- */ .fdf-contact-page__panel { background: #0200FF; position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; } .fdf-contact-page__panel::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,53,.22) 0%, transparent 70%); bottom: -120px; right: -120px; pointer-events: none; } .fdf-contact-page__panel::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); top: -80px; left: -60px; pointer-events: none; } .fdf-contact-page__panel-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.75rem; } .fdf-contact-page__kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55); } .fdf-contact-page__title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; color: #FFFFFF; margin: 0; } .fdf-contact-page__title span { color: rgba(255,255,255,.45); } .fdf-contact-page__lead { font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; max-width: 34ch; } .fdf-contact-page__infos { display: flex; flex-direction: column; gap: 1.1rem; } .fdf-contact-page__info-item { display: flex; align-items: flex-start; gap: 0.875rem; } .fdf-contact-page__info-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .fdf-contact-page__info-text { display: flex; flex-direction: column; gap: 0.15rem; } .fdf-contact-page__info-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.45); } .fdf-contact-page__info-value { font-size: 0.9375rem; font-weight: 500; color: #FFFFFF; } .fdf-contact-page__info-value a { color: #FFFFFF; text-decoration: none; } .fdf-contact-page__info-value a:hover { text-decoration: underline; text-underline-offset: 3px; } .fdf-contact-page__badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,.80); width: fit-content; margin-top: auto; } /* ----- Panel droit : formulaire ----- */ .fdf-contact-page__form-panel { background: var(--fdf-bg); display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 5rem); } .fdf-contact-page__form-wrap { width: 100%; max-width: 560px; } .fdf-contact-page__form-heading { font-size: clamp(1.375rem, 2.5vw, 1.75rem); font-weight: 800; letter-spacing: -0.5px; color: var(--fdf-text); margin: 0 0 0.375rem; } .fdf-contact-page__form-subheading { font-size: 0.875rem; color: var(--fdf-muted); margin: 0 0 2.25rem; } .fdf-cform { display: flex; flex-direction: column; gap: 1.25rem; } .fdf-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fdf-cform__group { display: flex; flex-direction: column; gap: 0.4rem; } .fdf-cform__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; color: var(--fdf-muted); } .fdf-cform__required { color: #D00100; margin-left: 2px; } .fdf-cform input[type="text"], .fdf-cform input[type="email"], .fdf-cform input[type="tel"], .fdf-cform select, .fdf-cform textarea { width: 100%; background: var(--fdf-surface); border: 1.5px solid var(--fdf-border); color: var(--fdf-text); border-radius: 8px; padding: 0.75rem 1rem; font-family: "Outfit", sans-serif; font-size: 0.9375rem; transition: border-color var(--fdf-transition), background var(--fdf-transition), box-shadow var(--fdf-transition); box-sizing: border-box; appearance: none; -webkit-appearance: none; } .fdf-cform input:focus, .fdf-cform select:focus, .fdf-cform textarea:focus { border-color: #0200FF; outline: none; background: var(--fdf-bg); box-shadow: 0 0 0 3px rgba(2,0,255,.10); } .fdf-cform select { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23737373%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .fdf-cform textarea { resize: vertical; min-height: 130px; } .fdf-cform__honey { display: none !important; } .fdf-cform__submit-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .fdf-cform__btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #0200FF; color: #FFFFFF; border: none; border-radius: 8px; padding: 0.875rem 1.875rem; font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--fdf-transition), transform var(--fdf-transition), box-shadow var(--fdf-transition); white-space: nowrap; } .fdf-cform__btn:hover { background: #0100CC; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(2,0,255,.30); } .fdf-cform__btn:active { transform: translateY(0); } .fdf-cform__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .fdf-cform__status { font-size: 0.875rem; font-weight: 500; display: none; } .fdf-cform__status--success { color: #16a34a; display: flex; align-items: center; gap: 0.4rem; } .fdf-cform__status--error { color: #D00100; display: flex; align-items: center; gap: 0.4rem; } /* Succès plein écran */ .fdf-cform__success-screen { display: none; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem; background: var(--fdf-surface); border-radius: 12px; border: 1px solid var(--fdf-border); } .fdf-cform__success-screen--visible { display: flex; } .fdf-cform__success-icon { width: 52px; height: 52px; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .fdf-cform__success-title { font-size: 1.1875rem; font-weight: 800; color: var(--fdf-text); margin: 0; } .fdf-cform__success-desc { font-size: 0.9375rem; color: var(--fdf-muted); margin: 0; } /* Responsive */ @media (max-width: 960px) { .fdf-contact-page__grid { grid-template-columns: 1fr; } .fdf-contact-page__panel { padding: 2.5rem 1.75rem; min-height: unset; } .fdf-contact-page__title { font-size: clamp(2rem, 7vw, 2.75rem); } .fdf-contact-page__form-panel { padding: 2.5rem 1.75rem; } } @media (max-width: 560px) { .fdf-cform__row { grid-template-columns: 1fr; } } /* Page Signaler — même grille que contact, colonne bleue à droite */ .fdf-contact-page__grid--panel-right { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); } .fdf-contact-page--signaler .fdf-contact-page__form-panel { align-items: flex-start; justify-content: center; padding-top: clamp(2rem, 4vw, 3.25rem); } .fdf-contact-page__form-wrap--signaler { max-width: 900px !important; width: 100%; } /* Décale les halos du panneau quand il est à droite */ .fdf-contact-page__panel--signaler::before { right: auto; left: -120px; } .fdf-contact-page__panel--signaler::after { left: auto; right: -60px; } @media (max-width: 960px) { .fdf-contact-page__grid--panel-right { grid-template-columns: 1fr; } /* Consignes avant le formulaire sur mobile */ .fdf-contact-page__grid--panel-right .fdf-contact-page__panel--signaler { order: -1; } .fdf-contact-page--signaler .fdf-contact-page__form-panel { padding-top: clamp(1.75rem, 4vw, 2.5rem); } } /* Panneau Signaler — numéro 112 mis en avant */ .fdf-contact-page__panel--signaler .fdf-contact-page__info-item--phone .fdf-contact-page__info-icon { width: 44px; height: 44px; font-size: 1.2rem; } .fdf-contact-page__panel--signaler .fdf-contact-page__info-value--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .fdf-contact-page__panel--signaler .fdf-contact-page__info-phone { font-size: clamp(2.125rem, 5vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #fff; text-decoration: none; transition: opacity 0.15s ease; } .fdf-contact-page__panel--signaler .fdf-contact-page__info-phone:hover { opacity: 0.92; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .fdf-contact-page__panel--signaler .fdf-contact-page__info-sub { font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.62); margin: 0; } /* Zone formulaire Signaler — harmonisation avec la page contact */ .fdf-contact-page--signaler .fdf-contact-page__form-wrap--signaler .wp-block-post-content, .fdf-contact-page--signaler .fdf-contact-page__form-wrap--signaler .entry-content { width: 100%; max-width: 100%; margin: 0; padding: 0; } .fdf-contact-page--signaler .fdf-contact-page__form-wrap--signaler .wp-block-post-content > *:first-child { margin-top: 0 !important; } .fdf-contact-page--signaler .fdf-contact-page__form-wrap--signaler .wp-block-post-content > *:last-child { margin-bottom: 0 !important; } .fdf-contact-page--signaler .fdf-signalement--root { max-width: 100% !important; width: 100%; margin: 0 auto; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-signalement__shell { border-radius: 16px; min-height: 560px; border-width: 1.5px; border-color: var(--fdf-border); background: var(--fdf-bg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 12px 40px rgba(2, 0, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06); overflow: hidden; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-signalement__inner { min-height: 560px; padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.8vw, 28px) 0; box-sizing: border-box; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-signalement__topbar { padding: 4px 2px 14px; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-dots [data-fdf-dot] { height: 4px; border-radius: 999px; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card { border-radius: 14px; padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 26px); margin-bottom: 12px; border-width: 1.5px; border-color: var(--fdf-border); background: var(--fdf-surface); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card__title { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--fdf-text); } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card__subtitle { color: var(--fdf-muted); } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card__bullets li { color: var(--fdf-muted); font-size: 0.94rem; line-height: 1.55; } .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card__footnote { color: var(--fdf-muted); font-size: 0.875rem; } [data-theme="dark"] .fdf-contact-page--signaler .fdf-signalement--root .fdf-signalement__shell { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 48px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-card { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .fdf-contact-page--signaler .fdf-signalement--root .fdf-step-dots [data-fdf-dot]:not(.is-active):not(.is-done) { background: rgba(255, 255, 255, 0.14); } /* ==================================================================== FOOTER ==================================================================== */ .fdf-footer { background-color: var(--fdf-surface) !important; border-top: 1px solid var(--fdf-border); } .fdf-footer__inner { width: 100%; max-width: 1260px !important; margin-left: auto; margin-right: auto; padding-top: 3rem; padding-bottom: 2rem; padding-left: 0; padding-right: 0; box-sizing: border-box; } .fdf-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } @media (max-width: 900px) { .fdf-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 540px) { .fdf-footer__cols { grid-template-columns: 1fr; gap: 1.5rem; } } .fdf-footer__col-title { font-family: "Outfit", sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fdf-muted); margin: 0 0 1rem 0; } .fdf-footer__tagline { font-size: 0.875rem; color: var(--fdf-muted); margin: 0.75rem 0 0.5rem; line-height: 1.6; } .fdf-footer__tagline strong { font-weight: 700; color: var(--fdf-text); } .fdf-footer__email a { font-size: 0.875rem; color: var(--fdf-text); text-decoration: none; } .fdf-footer__email a:hover { text-decoration: underline; } /* Logo footer */ .fdf-footer__logo-wrap { display: inline-flex; align-items: center; text-decoration: none; } .fdf-footer__logo { height: 44px; width: auto; } .fdf-footer__logo--light { display: none; } .fdf-footer__logo--dark { display: block; } [data-theme="light"] .fdf-footer__logo--light { display: block; } [data-theme="light"] .fdf-footer__logo--dark { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .fdf-footer__logo--light { display: block; } :root:not([data-theme]) .fdf-footer__logo--dark { display: none; } } /* Navigation footer */ .fdf-footer__nav .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 0; } .fdf-footer__nav .wp-block-navigation-item__content { font-size: 0.875rem; color: var(--fdf-muted); text-decoration: none; padding: 0.25rem 0; transition: color var(--fdf-transition); } .fdf-footer__nav .wp-block-navigation-item__content:hover { color: var(--fdf-text); } /* Liens complémentaires sous le menu du pied de page */ .fdf-footer__nav-extra { margin-top: 0.75rem; } .fdf-footer__nav-extra-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .fdf-footer__nav-extra a { font-size: 0.875rem; color: var(--fdf-muted); text-decoration: none; padding: 0.25rem 0; transition: color var(--fdf-transition); } .fdf-footer__nav-extra a:hover { color: var(--fdf-text); } .fdf-footer__legal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .fdf-footer__legal a { font-size: 0.875rem; color: var(--fdf-muted); text-decoration: none; padding: 0.25rem 0; transition: color var(--fdf-transition); } .fdf-footer__legal a:hover { color: var(--fdf-text); } /* Catégories footer (hiérarchie + accordéon) */ .fdf-footer__cats ul { list-style: none; padding: 0; margin: 0; } .fdf-footer__cats li { margin-bottom: 0.4rem; } .fdf-footer__cats a { font-size: 0.875rem; color: var(--fdf-muted); text-decoration: none; } .fdf-footer__cats a:hover { color: var(--fdf-text); } .fdf-footer__cats ul.children { padding-left: 0.65rem; margin-top: 0.35rem; border-left: 1px solid var(--fdf-border); } .fdf-footer__cats .fdf-footer-cat__row { display: flex; align-items: flex-start; gap: 0.15rem; min-width: 0; } .fdf-footer__cats .fdf-footer-cat__row > a { flex: 1; min-width: 0; line-height: 1.35; } .fdf-footer__cats .fdf-footer-cat__toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin: 0; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--fdf-muted); cursor: pointer; transition: color var(--fdf-transition), background-color var(--fdf-transition), transform 0.15s ease; } .fdf-footer__cats .fdf-footer-cat__toggle:hover, .fdf-footer__cats .fdf-footer-cat__toggle:focus-visible { color: var(--fdf-text); background: color-mix(in srgb, var(--fdf-text) 8%, transparent); outline: none; } .fdf-footer__cats .fdf-footer-cat__toggle::before { content: ""; display: block; width: 0.35rem; height: 0.35rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-top: -0.1rem; transition: transform 0.15s ease; } .fdf-footer__cats li.fdf-footer-cat--open > .fdf-footer-cat__row .fdf-footer-cat__toggle::before { transform: rotate(45deg); margin-top: 0; } /* Séparateur & bas de page */ .fdf-footer__sep { border-top: 1px solid var(--fdf-border); margin: 2rem 0 1.5rem; } .fdf-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; } .fdf-footer__copy, .fdf-footer__credit { font-size: 0.8125rem; color: var(--fdf-muted); margin: 0; } .fdf-footer__credit a { color: var(--fdf-text); text-decoration: none; } /* ==================================================================== CARDS & CONTENUS ==================================================================== */ .wp-block-group[style*="background-color:#1C1410"], .wp-block-group[style*="background-color: #1C1410"], .wp-block-group[style*="background-color:#F5F5F5"], .wp-block-group[style*="background-color: #F5F5F5"] { background-color: var(--fdf-surface) !important; } .wp-block-group[style*="background-color:#FFFFFF"], .wp-block-group[style*="background-color: #FFFFFF"] { background-color: var(--fdf-bg) !important; } /* Cards */ .fdf-card, .wp-block-post { transition: transform var(--fdf-transition), box-shadow var(--fdf-transition); } .fdf-card:hover, .wp-block-post:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.2); } .wp-block-post:hover .wp-block-post-title a { color: var(--fdf-text); } /* Tags / catégories */ .wp-block-post-terms a { display: inline-block; padding: .15rem .6rem; background: var(--fdf-surface-2); border-radius: 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--fdf-text); text-decoration: none; transition: background-color var(--fdf-transition), color var(--fdf-transition); } .wp-block-post-terms a:hover { background: var(--fdf-text); color: var(--fdf-bg); } /* Titres de posts */ .wp-block-post-title a { color: var(--fdf-text) !important; text-decoration: none; transition: color var(--fdf-transition); } /* Séparateurs */ hr.wp-block-separator { border-color: var(--fdf-border) !important; background-color: var(--fdf-border) !important; } /* Blockquotes */ blockquote { border-left: 3px solid var(--fdf-text); padding-left: 1.5rem; margin-left: 0; color: var(--fdf-muted); } /* ==================================================================== SINGLE POST — Article (refonte éditoriale, mobile-first, dark/light/auto) ==================================================================== */ /* Neutralise le margin-block-start:24px que WP FSE applique au
afin que le hero pleine largeur soit collé sous le header sticky. */ .single-post main.wp-block-group.fdf-single, .single-post .wp-site-blocks > main { margin-block-start: 0 !important; margin-top: 0 !important; } .single-post .fdf-single { background-color: var(--fdf-bg); color: var(--fdf-text); } .single-post .fdf-single__hero-band { margin-top: 0 !important; } .single-post .fdf-single__container { padding-left: max(var(--wp--style--root--padding-left, 1rem), env(safe-area-inset-left, 0px)); padding-right: max(var(--wp--style--root--padding-right, 1rem), env(safe-area-inset-right, 0px)); } /* ---------- HÉRO PLEINE LARGEUR ---------- */ .single-post .fdf-single__hero-band { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 56vw, 620px); background: linear-gradient(150deg, #0b1d12 0%, #1a2d1f 45%, #0b1410 100%); color: #fff; } .single-post .fdf-single__hero-band > figure.fdf-single__hero-bg { position: absolute; inset: 0; z-index: 0; margin: 0 !important; padding: 0 !important; border: none; max-width: none; width: 100%; height: 100%; } .single-post .fdf-single__hero-band > figure.fdf-single__hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); } .single-post .fdf-single__hero-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(105deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 65%, transparent 100%); } .single-post .fdf-single__hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(48px, 8vw, 96px); z-index: 2; background: linear-gradient(180deg, transparent 0%, var(--fdf-bg) 100%); pointer-events: none; } .single-post .fdf-single__hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--wp--style--global--wide-size, 1140px); margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: inherit; padding-inline-start: 0 !important; padding-inline-end: max(var(--wp--style--root--padding-right, 1rem), env(safe-area-inset-right, 0px)) !important; } /* Mobile : même retrait horizontal que .fdf-single__container / contenu (has-global-padding). */ @media (max-width: 781px) { .single-post .fdf-single__hero-inner { padding-inline-start: max(var(--wp--style--root--padding-left, 1rem), env(safe-area-inset-left, 0px)) !important; } } /* Fil d Ariane — même colonne que le H1 ; sur desktop aligné comme .fdf-single__entry-content */ .single-post .fdf-single__hero-inner > .fdf-single__breadcrumb { box-sizing: border-box; width: 100%; max-width: min(var(--wp--style--global--content-size, 1140px), 100%); margin-inline-start: 0 !important; margin-inline-end: auto !important; justify-content: flex-start !important; } .single-post .fdf-single__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); } .single-post .fdf-single__crumb, .single-post .fdf-single__breadcrumb .wp-block-post-terms, .single-post .fdf-single__breadcrumb .wp-block-post-terms a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none; margin: 0; } .single-post .fdf-single__crumb:hover, .single-post .fdf-single__breadcrumb .wp-block-post-terms a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; } .single-post .fdf-single__crumb-sep { color: rgba(255, 255, 255, 0.55); font-weight: 400; } .single-post .fdf-single__crumb--cat.wp-block-post-terms, .single-post .fdf-single__crumb--cat.wp-block-post-terms a { display: inline-flex; align-items: center; padding: 0; background: transparent !important; border: none !important; border-radius: 0; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.12em; font-weight: 700; color: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Bloc texte — même largeur que le fil d Ariane */ .single-post .fdf-single__hero-content { box-sizing: border-box; width: 100%; max-width: min(var(--wp--style--global--content-size, 1140px), 100%); margin-inline-start: 0 !important; margin-inline-end: auto !important; text-wrap: balance; } /* * Desktop : même axe que le corps — colonne principale (~72 %) + largeur content-size. * --fdf-sg-gap doit rester aligné avec .fdf-single__columns (gap). */ @media (min-width: 782px) { .single-post .fdf-single__hero-inner > .fdf-single__breadcrumb, .single-post .fdf-single__hero-content { --fdf-sg-gap: clamp(1.5rem, 4vw, 3rem); --fdf-main-col: max(0px, calc((100% - var(--fdf-sg-gap)) * 0.72)); --fdf-entry-w: min(var(--wp--style--global--content-size, 960px), var(--fdf-main-col)); max-width: var(--fdf-entry-w) !important; margin-inline-start: calc((var(--fdf-main-col) - var(--fdf-entry-w)) / 2) !important; margin-inline-end: auto !important; } } @media (min-width: 1280px) { .single-post .fdf-single__hero-inner > .fdf-single__breadcrumb, .single-post .fdf-single__hero-content { --fdf-main-col: max(0px, calc(100% - 22rem - var(--fdf-sg-gap))); --fdf-entry-w: min(var(--wp--style--global--content-size, 960px), var(--fdf-main-col)); max-width: var(--fdf-entry-w) !important; margin-inline-start: calc((var(--fdf-main-col) - var(--fdf-entry-w)) / 2) !important; } } .single-post .fdf-single__title.wp-block-post-title { margin-block: 0; color: var(--fdf-text); } .single-post .fdf-single__hero-content .fdf-single__title--hero.wp-block-post-title { color: #fff !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .single-post .fdf-single__hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; color: rgba(255, 255, 255, 0.92); font-size: 0.875rem; } .single-post .fdf-single__meta-divider { display: inline-block; width: 1px; height: 28px; background: rgba(255, 255, 255, 0.3); } .single-post .fdf-single__meta-author { display: flex; align-items: center; gap: 0.65rem; } .single-post .fdf-single__author-avatar img, .single-post .fdf-single__author-avatar .avatar { width: 40px !important; height: 40px !important; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); display: block; } .single-post .fdf-single__author-block { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2; } .single-post .fdf-single__author-block .wp-block-post-author-name, .single-post .fdf-single__author-block .wp-block-post-author-name a { color: #fff !important; font-weight: 600; font-size: 0.9375rem; text-decoration: none; } .single-post .fdf-single__author-block .wp-block-post-author-name a:hover { text-decoration: underline; text-underline-offset: 3px; } .single-post .fdf-single__author-block .wp-block-post-date, .single-post .fdf-single__author-block .wp-block-post-date a { color: rgba(255, 255, 255, 0.78) !important; font-size: 0.8125rem; margin: 0; } .single-post .fdf-single__meta-readtime { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255, 255, 255, 0.92); font-weight: 500; } .single-post .fdf-single__meta-icon { opacity: 0.85; } /* ---------- CORPS ---------- */ .single-post .fdf-single__columns { margin-block-start: 0; gap: clamp(1.5rem, 4vw, 3rem) !important; } @media (max-width: 781px) { .single-post .fdf-single__columns.is-stacked-on-mobile > .wp-block-column { flex-basis: 100% !important; } } /* * Aligne TOUT le contenu de la colonne principale à GAUCHE, sur la même verticale * que le H1 du héro. WordPress applique `margin-left/right: auto !important` sur * les enfants des layouts `is-layout-constrained`. On surcharge les deux axes * (physique + logique) pour gagner contre la règle core. */ @media (min-width: 782px) { /* Wrapper post-content : occupe toute la colonne, sans padding ni centrage */ .single-post .fdf-single__col-content > .wp-block-post-content.fdf-single__entry-content, .single-post .fdf-single__col-content > .wp-block-post-content { box-sizing: border-box; width: 100%; max-width: 100% !important; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; padding-left: 0 !important; padding-right: 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; } /* Enfants du post-content (constrained) — alignés à gauche, max content-size */ .single-post .fdf-single__entry-content > *:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide), .single-post .fdf-single__entry-content.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) { max-width: min(var(--wp--style--global--content-size, 1140px), 100%) !important; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; } /* Frères du post-content dans la colonne : étiquettes, partage, auteur, navigation */ .single-post .fdf-single__col-content > .fdf-single__share, .single-post .fdf-single__col-content > .fdf-single__author-card, .single-post .fdf-single__col-content > .fdf-single__main-courante, .single-post .fdf-single__col-content > .fdf-single__related { box-sizing: border-box; max-width: min(var(--wp--style--global--content-size, 1140px), 100%) !important; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; } } .single-post .fdf-single__entry-content { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.75; font-weight: 400; color: var(--fdf-text); } .single-post .fdf-single__entry-content > *:first-child { margin-block-start: 0; } /* Encadré « L essentiel » : listes retirées du corps et affichées en tête */ .single-post .fdf-single__essentiel { box-sizing: border-box; max-width: min(var(--wp--style--global--content-size, 1140px), 100%); margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1.15rem, 3vw, 1.5rem); border-radius: clamp(10px, 1.5vw, 14px); border: 1px solid var(--fdf-border); background: color-mix(in srgb, var(--fdf-cta-blue) 6%, var(--fdf-surface)); } .single-post .fdf-single__essentiel-title { margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fdf-muted); } .single-post .fdf-single__essentiel-body .wp-block-list, .single-post .fdf-single__essentiel-body ul, .single-post .fdf-single__essentiel-body ol { margin-block: 0 0.85em; padding-left: 1.25em; } .single-post .fdf-single__essentiel-body .wp-block-list:last-child, .single-post .fdf-single__essentiel-body ul:last-child, .single-post .fdf-single__essentiel-body ol:last-child { margin-bottom: 0; } .single-post .fdf-single__essentiel-body li { margin-block: 0.35em; } .single-post .fdf-single__entry-content > p:first-of-type { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.6; color: var(--fdf-text); font-weight: 500; } .single-post .fdf-single__entry-content h2, .single-post .fdf-single__entry-content h3, .single-post .fdf-single__entry-content h4, .single-post .fdf-single__entry-content h5 { margin-block-end: 0.85rem; color: var(--fdf-text); scroll-margin-top: var(--fdf-scroll-anchor-offset, calc(env(safe-area-inset-top, 0px) + 6rem)); } .single-post .fdf-single__entry-content h2, .single-post .fdf-single__entry-content h3, .single-post .fdf-single__entry-content h4 { margin-block-start: clamp(2rem, 5vw, 3rem); } .single-post .fdf-single__entry-content h5 { margin-block-start: clamp(1.35rem, 3vw, 2rem); margin-block-end: 0.65rem; } /* h2 : chapitre — le plus grand, filet sous le titre */ .single-post .fdf-single__entry-content h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; padding-bottom: 0.4em; border-bottom: 2px solid color-mix(in srgb, var(--fdf-cta-blue) 40%, var(--fdf-border)); } /* h3 : sous-partie — barre bleue à gauche */ .single-post .fdf-single__entry-content h3 { font-size: clamp(1.22rem, 2.35vw, 1.65rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.28; padding-left: 0.65em; border-left: 4px solid var(--fdf-cta-blue); } /* h4 : étapes / listes numérotées — pastille rouge */ .single-post .fdf-single__entry-content h4 { display: flex; align-items: flex-start; gap: 0.7em; font-size: clamp(1.04rem, 1.85vw, 1.2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.35; } .single-post .fdf-single__entry-content h4::before { content: ""; flex-shrink: 0; width: 0.55em; height: 0.55em; min-width: 11px; min-height: 11px; margin-top: 0.32em; border-radius: 50%; background: var(--fdf-cta-red); } /* h5 : libellé / détail — plus petit, ton atténué */ .single-post .fdf-single__entry-content h5 { font-size: clamp(0.875rem, 1.35vw, 1.0625rem); font-weight: 600; letter-spacing: 0.03em; line-height: 1.45; color: var(--fdf-muted); } .single-post .fdf-single__entry-content p { margin-block: 0 1.15em; } .single-post .fdf-single__entry-content a { color: var(--fdf-link); text-decoration: underline; text-decoration-color: rgba(2, 0, 255, 0.35); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .single-post .fdf-single__entry-content a:hover { color: var(--fdf-link-hover); text-decoration-color: currentColor; } .single-post .fdf-single__entry-content blockquote { border-left: 3px solid var(--fdf-cta-blue); padding: 0.5rem 0 0.5rem 1.5rem; margin: clamp(1.5rem, 4vw, 2.25rem) 0; font-size: 1.1875rem; font-style: italic; color: var(--fdf-text); background: linear-gradient(90deg, color-mix(in srgb, var(--fdf-cta-blue) 4%, transparent), transparent); border-radius: 0 8px 8px 0; } .single-post .fdf-single__entry-content .wp-block-image, .single-post .fdf-single__entry-content figure { margin-block: clamp(1.5rem, 4vw, 2.5rem); } .single-post .fdf-single__entry-content .wp-block-image img { border-radius: clamp(8px, 1.5vw, 12px); } .single-post .fdf-single__entry-content figcaption { color: var(--fdf-muted); font-size: 0.8125rem; margin-top: 0.5rem; font-style: italic; } .single-post .fdf-single__entry-content ul, .single-post .fdf-single__entry-content ol { margin-block: 0 1.25em; padding-left: 1.5em; } .single-post .fdf-single__entry-content li { margin-block: 0.4em; } /* ---------- ÉTIQUETTES ---------- */ .single-post .fdf-single__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .single-post .fdf-single__tags a { display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 999px; color: var(--fdf-text); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: background-color var(--fdf-transition), border-color var(--fdf-transition), color var(--fdf-transition); } .single-post .fdf-single__tags a::before { content: "#"; color: var(--fdf-muted); margin-right: 0.2rem; font-weight: 600; } .single-post .fdf-single__tags a:hover { background: var(--fdf-cta-blue); border-color: var(--fdf-cta-blue); color: #fff; } .single-post .fdf-single__tags a:hover::before { color: rgba(255, 255, 255, 0.7); } /* ---------- PARTAGE SOCIAL ---------- */ .single-post .fdf-single__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; padding-block: 0.75rem; border-top: 1px solid var(--fdf-border); border-bottom: 1px solid var(--fdf-border); } .single-post .fdf-single__share-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fdf-muted); margin-right: 0.5rem; } .single-post .fdf-single__share-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fdf-surface); border: 1px solid var(--fdf-border); color: var(--fdf-text); cursor: pointer; text-decoration: none; transition: background-color var(--fdf-transition), color var(--fdf-transition), border-color var(--fdf-transition), transform 0.1s ease; } .single-post .fdf-single__share-btn:hover { background: var(--fdf-text); color: var(--fdf-bg); border-color: var(--fdf-text); transform: translateY(-1px); } .single-post .fdf-single__share-btn:focus-visible { outline: 2px solid var(--fdf-cta-blue); outline-offset: 2px; } .single-post .fdf-single__copy-toast { position: absolute; top: -2.25rem; left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.3rem 0.65rem; background: var(--fdf-text); color: var(--fdf-bg); font-size: 0.75rem; font-weight: 600; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .single-post .fdf-single__share-btn.is-copied .fdf-single__copy-toast { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- CARTE AUTEUR (mobile uniquement) ---------- */ .single-post .fdf-single__author-card { display: none; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: clamp(12px, 2.5vw, 16px); padding: clamp(1.1rem, 3vw, 1.5rem); } .single-post .fdf-single__author-card .wp-block-post-author__avatar img { width: 56px !important; height: 56px !important; border-radius: 50%; border: 2px solid var(--fdf-border); } @media (max-width: 781px) { .single-post .fdf-single__author-card { display: block; } } /* ---------- COLONNE LATÉRALE ---------- */ .single-post .fdf-single__aside-stack.is-layout-flex, .single-post .fdf-single__aside-stack.wp-block-group-is-layout-flex { align-items: stretch !important; width: 100%; box-sizing: border-box; } .single-post .fdf-single__aside-cards { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0; width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; } /* ============================================================ CARDS LATÉRALES SINGLE — clones compacts de .fdf-hero-accueil__cta : image de fond, overlay gradient sombre, status pill (live + dot coloré), eyebrow + count + sub, pastille CTA blanche, hover translateY + shadow profond. Signature graphique identique en light et en dark. ============================================================ */ .single-post .fdf-single__aside-card { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "status status" "body cta"; align-items: end; gap: 0.85rem; min-height: clamp(140px, 16vw, 180px); width: 100%; max-width: 100%; box-sizing: border-box; padding: clamp(0.85rem, 1.4vw, 1.1rem); border-radius: clamp(14px, 2vw, 18px); background-color: #0a0a0a; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; } .single-post .fdf-single__aside-card__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.88) 100%), linear-gradient(110deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%); } .single-post .fdf-single__aside-card:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .single-post .fdf-single__aside-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Status pill */ .single-post .fdf-single__aside-card__status { grid-area: status; justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); line-height: 1; } .single-post .fdf-single__aside-card__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)) 30%, transparent); } .single-post .fdf-single__aside-card--live .fdf-single__aside-card__status-dot { animation: fdf-aside-pulse 2.2s ease-in-out infinite; } @keyframes fdf-aside-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)) 30%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)) 8%, transparent); } } @media (prefers-reduced-motion: reduce) { .single-post .fdf-single__aside-card--live .fdf-single__aside-card__status-dot { animation: none; } } /* Body */ .single-post .fdf-single__aside-card__body { grid-area: body; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .single-post .fdf-single__aside-card__eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .single-post .fdf-single__aside-card__count { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #fff; text-wrap: balance; } .single-post .fdf-single__aside-card__sub { font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.78); line-height: 1.35; } /* Pastille CTA blanche */ .single-post .fdf-single__aside-card__cta { grid-area: cta; align-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border-radius: 9999px; background: #fff; color: #0a0a0a; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: transform 0.25s ease, background 0.2s ease; } .single-post .fdf-single__aside-card:hover .fdf-single__aside-card__cta { transform: translateX(2px); } .single-post .fdf-single__aside-card__arrow { flex-shrink: 0; } /* Variantes statut → couleur du dot (alignées sur .fdf-hero-accueil__cta--*) */ .single-post .fdf-single__aside-card--ok { --fdf-card-status-color: #4ade80; } .single-post .fdf-single__aside-card--warn { --fdf-card-status-color: #fb923c; } .single-post .fdf-single__aside-card--danger { --fdf-card-status-color: #f87171; } .single-post .fdf-single__aside-card--neutral { --fdf-card-status-color: rgba(255, 255, 255, 0.6); } @media (prefers-reduced-motion: reduce) { .single-post .fdf-single__aside-card, .single-post .fdf-single__aside-card__cta { transition: none !important; } .single-post .fdf-single__aside-card:hover, .single-post .fdf-single__aside-card:hover .fdf-single__aside-card__cta { transform: none; } } .single-post .fdf-single__aside-inner { background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: clamp(12px, 2.5vw, 16px); padding: clamp(1.25rem, 3vw, 1.65rem); box-shadow: 0 1px 0 color-mix(in srgb, var(--fdf-text) 4%, transparent); } .single-post .fdf-single__aside-label { margin: 0 !important; font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--fdf-muted) !important; } .single-post .fdf-single__aside-author .wp-block-post-author__avatar img { width: 56px !important; height: 56px !important; border-radius: 50%; border: 2px solid var(--fdf-border); } .single-post .fdf-single__aside-author .wp-block-post-author__name, .single-post .fdf-single__aside-author .wp-block-post-author__name a { color: var(--fdf-text) !important; font-weight: 700; font-size: 0.9375rem; text-decoration: none; } .single-post .fdf-single__aside-author .wp-block-post-author__bio { color: var(--fdf-muted); font-size: 0.8125rem; line-height: 1.55; margin-top: 0.4rem; } .single-post .fdf-single__aside-categories .wp-block-categories, .single-post .fdf-single__aside-categories .wp-block-categories ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .single-post .fdf-single__aside-categories .wp-block-categories li { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--fdf-bg); border: 1px solid var(--fdf-border); border-radius: 8px; transition: background-color var(--fdf-transition), border-color var(--fdf-transition); } .single-post .fdf-single__aside-categories .wp-block-categories li:hover { background: var(--fdf-surface-2); border-color: var(--fdf-muted); } .single-post .fdf-single__aside-categories .wp-block-categories a { color: var(--fdf-text); text-decoration: none; font-weight: 500; font-size: 0.875rem; flex: 1; } /* Newsletter */ .single-post .fdf-single__aside-newsletter { background: linear-gradient(160deg, var(--fdf-cta-blue) 0%, color-mix(in srgb, var(--fdf-cta-blue) 75%, #000) 100%); color: #fff; border-color: transparent; text-align: left; } .single-post .fdf-single__aside-newsletter .fdf-single__aside-label { display: none; } .single-post .fdf-single__nl-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; color: #fff; } .single-post .fdf-single__nl-title { margin: 0 !important; color: #fff !important; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; } .single-post .fdf-single__nl-text { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 0.875rem; line-height: 1.5; } .single-post .fdf-single__nl-cta .wp-block-button__link { background-color: #fff !important; color: var(--fdf-cta-blue) !important; font-weight: 700; border: none; } .single-post .fdf-single__nl-cta .wp-block-button__link:hover { background-color: rgba(255, 255, 255, 0.92) !important; transform: translateY(-1px); } /* ---------- ARTICLES EN RELATION (single) ---------- */ .single-post .fdf-single__related:not(:has(.fdf-single__related-inner)), .single-signalement .fdf-single__related:not(:has(.fdf-single__related-inner)) { display: none; } /* Pleine largeur de la colonne (même bandeau que le partage) — le shortcode WP ne doit pas rétrécir le flux. */ .single-post .fdf-single__related, .single-signalement .fdf-single__related { box-sizing: border-box; width: 100%; max-width: 100%; margin-inline: 0; padding-top: 0.35rem; border-top: 1px solid var(--fdf-border); } .single-post .fdf-single__related .wp-block-shortcode, .single-signalement .fdf-single__related .wp-block-shortcode { display: block; width: 100%; max-width: none; margin: 0; } .single-post .fdf-single__related .fdf-single__related-inner, .single-signalement .fdf-single__related .fdf-single__related-inner { display: block; width: 100%; } @media (min-width: 782px) { .single-signalement .fdf-single__container > .fdf-single__related { box-sizing: border-box; max-width: min(var(--wp--style--global--content-size, 1140px), 100%) !important; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; } } .fdf-single__related-title { margin: 0 0 0.45rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fdf-muted); } .fdf-single__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start; justify-items: stretch; gap: 0.65rem; width: 100%; list-style: none; margin: 0; padding: 0; } @media (max-width: 639px) { .fdf-single__related-grid { grid-template-columns: 1fr; gap: 0.55rem; } } .fdf-single__related-card { display: flex; flex-direction: column; margin: 0; min-height: 0; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 12px; overflow: hidden; transition: transform var(--fdf-transition), box-shadow var(--fdf-transition), border-color var(--fdf-transition); } .fdf-single__related-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px color-mix(in srgb, var(--fdf-text) 10%, transparent); border-color: color-mix(in srgb, var(--fdf-text) 16%, var(--fdf-border)); } /* Mobile : vignette au-dessus, texte en dessous — hauteur d’image bornée. */ .fdf-single__related-card-link { display: flex; flex-direction: column; align-items: stretch; min-height: 0; color: inherit !important; text-decoration: none !important; } .fdf-single__related-card-media { position: relative; flex-shrink: 0; width: 100%; min-height: 7.25rem; max-height: 9.5rem; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--fdf-text) 6%, var(--fdf-surface)); } .fdf-single__related-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .fdf-single__related-card:hover .fdf-single__related-card-media img { transform: scale(1.03); } .fdf-single__related-card-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0.65rem 0.6rem; min-height: 0; min-width: 0; } /* Tablette / desktop : carte horizontale (plus de « pavé » vide sous le texte). */ @media (min-width: 640px) { .fdf-single__related-card-link { flex-direction: row; align-items: stretch; } .fdf-single__related-card-media { width: clamp(100px, 26%, 168px); min-height: 5.5rem; max-height: none; align-self: stretch; } .fdf-single__related-card-body { flex: 1 1 0; justify-content: flex-start; padding: 0.5rem 0.65rem 0.55rem 0.7rem; } } .fdf-single__related-card-cat { margin: 0; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fdf-muted); } .fdf-single__related-card-title { margin: 0; font-size: clamp(0.875rem, 1.1vw, 0.9375rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--fdf-text); transition: color var(--fdf-transition); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .fdf-single__related-card:hover .fdf-single__related-card-title { color: var(--fdf-cta-blue); } .fdf-single__related-card-excerpt { margin: 0; color: var(--fdf-muted); font-size: 0.78rem; line-height: 1.38; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .fdf-single__related-card-date { margin: 0.15rem 0 0; padding-top: 0.1rem; color: var(--fdf-muted); font-size: 0.6875rem; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .fdf-single__related-card, .fdf-single__related-card-media img { transition: none !important; } .fdf-single__related-card:hover { transform: none; } .fdf-single__related-card:hover .fdf-single__related-card-media img { transform: none; } } /* ---------- LAYOUT DESKTOP ---------- */ @media (min-width: 782px) { .single-post .fdf-single__columns.is-stacked-on-mobile { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .single-post .fdf-single__columns.is-stacked-on-mobile > .fdf-single__col-content { flex-grow: 1 !important; min-width: 0; } .single-post .fdf-single__columns.is-stacked-on-mobile > .fdf-single__col-aside { flex-grow: 0 !important; flex-shrink: 0 !important; max-width: 22rem; } .single-post .fdf-single__aside-stack { position: sticky; /* var(--fdf-header-band-h) est mesurée dynamiquement par JS et inclut déjà le bandeau alerte ; on ajoute juste un peu d air visuel. */ top: calc(env(safe-area-inset-top, 0px) + var(--fdf-header-band-h, 7rem) + 1rem); } /* Masque la carte auteur dupliquée dans la colonne principale en desktop */ .single-post .fdf-single__author-card { display: none !important; } } @media (min-width: 1280px) { .single-post .fdf-single__columns.is-stacked-on-mobile > .fdf-single__col-aside { flex-basis: 22rem !important; max-width: 22rem; } } @media (max-width: 781px) { /* En mobile : on masque la colonne aside (auteur déjà visible dans la carte mobile, newsletter et catégories réservées au desktop) */ .single-post .fdf-single__col-aside { display: none !important; } } /* ==================================================================== NAVIGATION ACTIVE ==================================================================== */ .wp-block-navigation .current-menu-item > a, .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--fdf-text) !important; } /* ==================================================================== BOUTONS (remplissage par défaut = noir dans l’éditeur ; CTA = styles dédiés) ==================================================================== */ .wp-element-button, .wp-block-button__link { font-family: "Outfit", sans-serif; transition: background-color var(--fdf-transition), transform .1s ease, color var(--fdf-transition), border-color var(--fdf-transition); } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button.is-style-cta-bleu .wp-block-button__link, .wp-block-button.is-style-cta-bleu .wp-element-button { background-color: var(--fdf-cta-blue) !important; color: #FFFFFF !important; border-color: transparent !important; } .wp-block-button.is-style-cta-bleu .wp-block-button__link:hover, .wp-block-button.is-style-cta-bleu .wp-element-button:hover { background-color: var(--fdf-cta-blue-hover) !important; color: #FFFFFF !important; } .wp-block-button.is-style-cta-rouge .wp-block-button__link, .wp-block-button.is-style-cta-rouge .wp-element-button { background-color: var(--fdf-cta-red) !important; color: #FFFFFF !important; border-color: transparent !important; } .wp-block-button.is-style-cta-rouge .wp-block-button__link:hover, .wp-block-button.is-style-cta-rouge .wp-element-button:hover { background-color: var(--fdf-cta-red-hover) !important; color: #FFFFFF !important; } /* ==================================================================== ULTIMATE MEMBER ==================================================================== */ .um-field-label label, .um-field-label .um-field-label-text { font-family: "Outfit", sans-serif !important; color: var(--fdf-text) !important; } .um input[type=text], .um input[type=email], .um input[type=password], .um textarea { font-family: "Outfit", sans-serif !important; background: var(--fdf-surface) !important; border-color: var(--fdf-border) !important; color: var(--fdf-text) !important; border-radius: 6px !important; } .um .um-button, .um-btn { font-family: "Outfit", sans-serif !important; background-color: var(--fdf-cta-blue) !important; color: #FFFFFF !important; border-radius: 6px !important; font-weight: 600 !important; } .um .um-button:hover { background-color: var(--fdf-cta-blue-hover) !important; } /* ==================================================================== MESSAGE BIENVENUE ==================================================================== */ .message-bienvenue { font-family: "Outfit", sans-serif; padding: 10px 16px; background: var(--fdf-surface); border-radius: 8px; border-left: 3px solid var(--fdf-cta-blue); color: var(--fdf-text); } .message-bienvenue a { color: var(--fdf-link); text-decoration: underline; } .message-bienvenue a:hover { color: var(--fdf-link-hover); } /* ==================================================================== RESPONSIVE — HEADER ==================================================================== */ @media (max-width: 768px) { :root { --fdf-header-shell-pad-left: max(10px, env(safe-area-inset-left, 0px)); --fdf-header-shell-pad-right: max(10px, env(safe-area-inset-right, 0px)); } .fdf-header { padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 4px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } .fdf-header__top { min-height: 44px; padding-bottom: 8px; } .fdf-header__top > .fdf-user-menu { min-height: 44px; width: 44px; } .fdf-header__top > .fdf-burger-btn, .fdf-header .fdf-burger-btn { width: 48px; height: 48px; border-radius: 12px !important; } .fdf-header .fdf-burger-btn .fdf-burger-material { font-size: 24px; } .fdf-header__top > .fdf-user-menu .fdf-user-toggle { padding: 0; justify-content: center; width: 100%; min-height: 44px; } .fdf-header__top > .fdf-espaces-menu { min-height: 44px; width: 44px; } .fdf-header__top > .fdf-espaces-menu .fdf-espaces-toggle { padding: 0; justify-content: center; width: 100%; min-height: 44px; } .fdf-user-label { display: none; } .fdf-espaces-toggle__label { display: none; } .fdf-header__top > .fdf-header__quick { flex-shrink: 0; min-width: 0; } .fdf-header__quick .fdf-header__pill-label { display: none; } .fdf-header__top > .fdf-header__quick .fdf-header__pill--live { gap: 0; padding: 0; justify-content: center; min-width: 44px; min-height: 44px; width: 44px; border-radius: 12px; } .fdf-header__top > .fdf-header__quick .fdf-header__pill--live .fdf-header__pill-icon { width: 16px; height: 16px; } .fdf-toggle-label { display: none; } .fdf-theme-toggle { padding: 0.4rem 0.5rem; } } @media (max-width: 480px) { :root { --fdf-header-shell-pad-left: max(8px, env(safe-area-inset-left, 0px)); --fdf-header-shell-pad-right: max(8px, env(safe-area-inset-right, 0px)); } .fdf-header { padding-top: max(8px, calc(env(safe-area-inset-top, 0px) + 3px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); } .fdf-header__top { min-height: 40px; padding-bottom: 6px; } .fdf-header__top > .fdf-user-menu { min-height: 40px; width: 40px; } .fdf-header__top > .fdf-burger-btn, .fdf-header .fdf-burger-btn { width: 44px; height: 44px; border-radius: 11px !important; } .fdf-header .fdf-burger-btn .fdf-burger-material { font-size: 22px; } .fdf-header__top > .fdf-user-menu .fdf-user-toggle { min-height: 40px; } .fdf-header__top > .fdf-espaces-menu { min-height: 40px; width: 40px; } .fdf-header__top > .fdf-espaces-menu .fdf-espaces-toggle { min-height: 40px; } .fdf-header__top > .fdf-header__quick .fdf-header__pill--live { min-width: 40px; min-height: 40px; width: 40px; border-radius: 11px; } } /* ==================================================================== BANDEAU ALERTE INFO (Customizer : sous #fdf-site-header) ==================================================================== */ @keyframes fdf-info-alert-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .fdf-info-alert { --fdf-info-alert-red: #b30404; --fdf-info-alert-red-mid: #d00100; --fdf-info-alert-red-light: #ff3a3a; flex-shrink: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-family: "Outfit", sans-serif; color: #fff; background: linear-gradient( 105deg, var(--fdf-info-alert-red) 0%, var(--fdf-info-alert-red-mid) 35%, var(--fdf-info-alert-red-light) 50%, var(--fdf-info-alert-red-mid) 65%, var(--fdf-info-alert-red) 100% ); background-size: 200% 100%; animation: fdf-info-alert-shimmer 5s ease-in-out infinite; } .fdf-info-alert__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.45rem 0.75rem; width: 100%; max-width: 1330px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0.32rem var(--fdf-header-shell-pad-right) 0.34rem var(--fdf-header-shell-pad-left); min-height: 0; } .fdf-info-alert__media { flex-shrink: 0; display: flex; align-items: center; line-height: 0; } .fdf-info-alert__img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .fdf-info-alert__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.06rem; line-height: 1.2; } .fdf-info-alert__title { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #fff; } .fdf-info-alert__sub { display: block; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); line-height: 1.25; letter-spacing: 0.02em; max-width: none; } .fdf-info-alert__action { flex-shrink: 0; } .fdf-info-alert__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.28rem 0.65rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none !important; color: var(--fdf-info-alert-red-mid) !important; background: #fff !important; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease; white-space: nowrap; } .fdf-info-alert__btn:hover { color: #7a0101 !important; background: rgba(255, 255, 255, 0.96) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } @media (min-width: 640px) { .fdf-info-alert__inner { padding-top: 0.3rem; padding-bottom: 0.34rem; } .fdf-info-alert__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.45rem; row-gap: 0.05rem; } .fdf-info-alert__title { font-weight: 600; } .fdf-info-alert__sub { font-weight: 500; color: rgba(255, 255, 255, 0.78); } .fdf-info-alert__text:has(.fdf-info-alert__title) .fdf-info-alert__sub::before { content: "—"; margin-right: 0.3rem; opacity: 0.55; font-weight: 600; } } @media (prefers-reduced-motion: reduce) { .fdf-info-alert { animation: none; background: var(--fdf-info-alert-red-mid); } } /* Réserve verticale pour le sticky des colonnes article (approx. hauteur bandeau) */ body.fdf-has-info-alert { --fdf-info-alert-h: clamp(36px, 9vw, 52px); } /* ==================================================================== Lien Confidentialité (InMobi Choice CMP) Le JS déplace #qc-cmp2-persistent-link dans #fdf-cmp-confidentialite-slot (le

du footer, à la place de "Propulsé par WordPress"). Ces règles annulent les styles agressifs du CMP (position fixed, rotation, etc.) pour un rendu horizontal en ligne dans le footer. ==================================================================== */ #fdf-cmp-confidentialite-slot { margin: 0 !important; } #fdf-cmp-confidentialite-slot a#qc-cmp2-persistent-link, #fdf-cmp-confidentialite-slot #qc-cmp2-persistent-link, .fdf-footer__credit a#qc-cmp2-persistent-link, .fdf-footer__credit #qc-cmp2-persistent-link { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; -webkit-transform: none !important; writing-mode: horizontal-tb !important; -webkit-writing-mode: horizontal-tb !important; color: #000 !important; background: transparent !important; border: none !important; box-shadow: none !important; display: inline !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; text-align: inherit !important; text-decoration: none !important; text-transform: none !important; font-size: inherit !important; font-weight: 400 !important; font-family: inherit !important; line-height: inherit !important; letter-spacing: normal !important; z-index: auto !important; clip: auto !important; clip-path: none !important; pointer-events: auto !important; } #fdf-cmp-confidentialite-slot a#qc-cmp2-persistent-link:hover, #fdf-cmp-confidentialite-slot a#qc-cmp2-persistent-link:focus, .fdf-footer__credit a#qc-cmp2-persistent-link:hover, .fdf-footer__credit a#qc-cmp2-persistent-link:focus { color: #000 !important; text-decoration: underline !important; } /* ==================================================================== CARROUSEL — Boutons chevron précédent / suivant ==================================================================== */ .fdf-carousel-wrap { position: relative; } .fdf-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--fdf-bg); border: 1px solid var(--fdf-border); border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,.12); cursor: pointer; color: var(--fdf-text); transition: background var(--fdf-transition), box-shadow var(--fdf-transition), opacity var(--fdf-transition), transform .15s ease; padding: 0; } .fdf-carousel-btn:hover { background: var(--fdf-surface); box-shadow: 0 4px 20px rgba(0,0,0,.18); } .fdf-carousel-btn:active { transform: translateY(-50%) scale(.93); } .fdf-carousel-btn--prev { left: -18px; } .fdf-carousel-btn--next { right: -18px; } .fdf-carousel-btn[disabled] { opacity: 0; pointer-events: none; } @media (max-width: 599px) { .fdf-carousel-btn--prev { left: -10px; } .fdf-carousel-btn--next { right: -10px; } .fdf-carousel-btn { width: 32px; height: 32px; } } /* ==================================================================== BARRE DE CONNEXION FLOTTANTE (#fdf-login-bar) Toast décollé du bas, adaptatif dark/light, avec animation ==================================================================== */ #fdf-login-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 24px)); z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 32px); max-width: 620px; padding: 14px 16px 14px 20px; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.34,1.26,.64,1), opacity .28s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #fdf-login-bar.fdf-login-bar--visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } #fdf-login-bar.fdf-login-bar--hiding { transform: translateX(-50%) translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } .fdf-login-bar__inner { display: flex; align-items: center; gap: 10px; min-width: 0; } .fdf-login-bar__icon { flex-shrink: 0; color: var(--fdf-muted); } .fdf-login-bar__text { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--fdf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fdf-login-bar__link { color: var(--fdf-cta-blue); font-weight: 600; text-decoration: none; transition: color var(--fdf-transition); } .fdf-login-bar__link:hover { color: var(--fdf-cta-blue-hover); text-decoration: underline; } .fdf-login-bar__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: color-mix(in srgb, var(--fdf-text) 8%, transparent); border: 0; border-radius: 8px; cursor: pointer; color: var(--fdf-muted); padding: 0; transition: background var(--fdf-transition), color var(--fdf-transition); } .fdf-login-bar__close:hover { background: color-mix(in srgb, var(--fdf-text) 15%, transparent); color: var(--fdf-text); } @media (max-width: 599px) { #fdf-login-bar { bottom: 12px; width: calc(100% - 24px); padding: 12px 12px 12px 16px; border-radius: 12px; } .fdf-login-bar__text { font-size: .875rem; white-space: normal; } } /* ==================================================================== DARK MODE — Titres & éléments avec couleurs hardcodées (#0A0A0A) Corrige la visibilité des h2/h3 sur les sections de la home page ==================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .wp-block-heading[style*="color:#0A0A0A"], :root:not([data-theme]) .wp-block-heading[style*="color: #0A0A0A"], :root:not([data-theme]) .wp-site-title[style*="color:#0A0A0A"], :root:not([data-theme]) .wp-site-title[style*="color: #0A0A0A"], :root:not([data-theme]) p[style*="color:#0A0A0A"], :root:not([data-theme]) p[style*="color: #0A0A0A"] { color: var(--fdf-text) !important; } } [data-theme="dark"] .wp-block-heading[style*="color:#0A0A0A"], [data-theme="dark"] .wp-block-heading[style*="color: #0A0A0A"], [data-theme="dark"] .wp-site-title[style*="color:#0A0A0A"], [data-theme="dark"] .wp-site-title[style*="color: #0A0A0A"], [data-theme="dark"] p[style*="color:#0A0A0A"], [data-theme="dark"] p[style*="color: #0A0A0A"] { color: var(--fdf-text) !important; } /* ==================================================================== ACTUALITÉS — Carrousel horizontal style app mobile Transforme les grilles Query Loop en défilement horizontal natif ==================================================================== */ /* Conteneur : flex row avec scroll horizontal */ .wp-block-query .wp-block-post-template.is-layout-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px !important; /* padding-top laisse de la place pour le translateY du hover sans coupure */ padding-top: 8px !important; padding-bottom: 10px !important; padding-left: 2px !important; padding-right: 2px !important; grid-template-columns: none !important; align-items: stretch; list-style: none !important; margin: 0 !important; scrollbar-width: thin; scrollbar-color: var(--fdf-border) transparent; } .wp-block-query .wp-block-post-template.is-layout-grid::-webkit-scrollbar { height: 4px; } .wp-block-query .wp-block-post-template.is-layout-grid::-webkit-scrollbar-track { background: transparent; } .wp-block-query .wp-block-post-template.is-layout-grid::-webkit-scrollbar-thumb { background: var(--fdf-border); border-radius: 2px; } /* Parents : ne pas clipper le scroll horizontal du carrousel */ .wp-block-query, .wp-block-group:has(.wp-block-post-template.is-layout-grid), .wp-block-group.is-layout-constrained:has(.wp-block-post-template.is-layout-grid), .wp-block-group.has-global-padding:has(.wp-block-post-template.is-layout-grid) { overflow: visible !important; } /* Chaque carte : largeur fixe pour le carrousel */ .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post { flex: 0 0 260px !important; min-width: 260px !important; width: 260px !important; scroll-snap-align: start; } /* Carte moderne */ .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post > .wp-block-group { height: 100% !important; background: var(--fdf-surface) !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--fdf-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.07) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; display: flex !important; flex-direction: column !important; } .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post:hover > .wp-block-group { transform: translateY(-4px) !important; box-shadow: 0 14px 36px rgba(0,0,0,.18) !important; border-color: color-mix(in srgb, var(--fdf-text) 20%, transparent) !important; } /* Image de couverture — pleine largeur */ .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image { flex-shrink: 0 !important; overflow: hidden !important; border-radius: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; } .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image a { display: block !important; width: 100% !important; } .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image img { display: block !important; width: 100% !important; height: 160px !important; max-width: none !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; transition: transform .38s ease !important; } .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.06) !important; } /* Badge catégorie */ .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-terms a { background: var(--fdf-surface-2) !important; color: var(--fdf-text) !important; } /* Titre */ .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-title a { color: var(--fdf-text) !important; } /* Date */ .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-date { color: var(--fdf-muted) !important; } /* Responsive : largeur des cartes selon viewport */ @media (max-width: 1023px) { .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post { flex: 0 0 228px !important; min-width: 228px !important; width: 228px !important; } } @media (max-width: 599px) { .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post { flex: 0 0 200px !important; min-width: 200px !important; width: 200px !important; } .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image img, .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image a { height: 130px !important; } } /* ==================================================================== PERFORMANCE — content-visibility pour les sections sous le fold Réduit le travail de rendu initial du navigateur (Speed Index / TTI). contain-intrinsic-size = estimation de hauteur pour éviter les sauts de mise en page. ==================================================================== */ .wp-block-group + .wp-block-group, .wp-block-query:not(:first-child), .entry-content > * + *, .fdf-footer, footer.wp-block-template-part { content-visibility: auto; contain-intrinsic-size: 0 400px; } /* ==================================================================== ARCHIVE / CATÉGORIES — Refonte éditoriale (hero + grille + widgets) Layout 2 colonnes (66 / 33), sidebar sticky, chargement progressif. ==================================================================== */ main.fdf-archive, .fdf-archive { background-color: var(--fdf-bg); color: var(--fdf-text); } .fdf-archive main.fdf-archive, body.archive main.fdf-archive, body.blog main.fdf-archive, body.search main.fdf-archive { margin-block-start: 0 !important; margin-top: 0 !important; } /* ---------- HÉRO ÉDITORIAL ---------- */ .fdf-archive__hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, #7a1010 24%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #4a0808 18%, transparent) 0%, transparent 60%), linear-gradient(165deg, color-mix(in srgb, #5a0a0c 10%, var(--fdf-surface)) 0%, color-mix(in srgb, #2b0508 6%, var(--fdf-bg)) 100%); border-bottom: 1px solid var(--fdf-border); } .fdf-archive__hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--fdf-text) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--fdf-text) 4%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 75%); z-index: 0; } .fdf-archive__hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--wp--style--global--wide-size, 1140px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.85rem, 2vw, 1.25rem); } .fdf-archive__hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(32px, 6vw, 64px); background: linear-gradient(180deg, transparent 0%, var(--fdf-bg) 100%); pointer-events: none; z-index: 1; } /* Mode clair — halos rouge discrets en haut à gauche et à droite */ [data-theme="light"] .fdf-archive__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 14%, transparent) 0%, transparent 50%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 12%, transparent) 0%, transparent 52%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 4%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .fdf-archive__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 14%, transparent) 0%, transparent 50%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 12%, transparent) 0%, transparent 52%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 4%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } } /* Mode sombre — mêmes halos (haut gauche / haut droite), rouge CTA lisible sur fond #0A0A0A */ [data-theme="dark"] .fdf-archive__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 26%, transparent) 0%, transparent 48%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 22%, transparent) 0%, transparent 50%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 10%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .fdf-archive__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 26%, transparent) 0%, transparent 48%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 22%, transparent) 0%, transparent 50%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 10%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } } /* Fil d Ariane */ .fdf-archive__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fdf-muted); } .fdf-archive__crumb { color: var(--fdf-muted); text-decoration: none; transition: color var(--fdf-transition); } .fdf-archive__crumb[href]:hover { color: var(--fdf-text); text-decoration: underline; text-underline-offset: 3px; } .fdf-archive__crumb--current { color: var(--fdf-text); } .fdf-archive__crumb-sep { color: color-mix(in srgb, var(--fdf-muted) 60%, transparent); font-weight: 400; } .fdf-archive__breadcrumb > .fdf-archive__crumb-sep:last-of-type { display: none; } /* H1 d archive : kicker rouge "Feux de forêt" + titre principal, dans un seul

*/ .fdf-archive__title.wp-block-query-title, .fdf-archive__breadcrumb + .wp-block-query-title { margin: 0 !important; color: var(--fdf-text) !important; text-wrap: balance; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .fdf-archive__title .fdf-archive__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: clamp(0.75rem, 1vw, 0.875rem) !important; font-weight: 800 !important; letter-spacing: 0.18em !important; line-height: 1 !important; text-transform: uppercase; color: var(--fdf-cta-red); } .fdf-archive__title .fdf-archive__kicker::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fdf-cta-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fdf-cta-red) 25%, transparent); animation: fdf-archive-kicker-pulse 2.4s ease-in-out infinite; } .fdf-archive__title .fdf-archive__title-text { display: block; line-height: 1.08; } @keyframes fdf-archive-kicker-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fdf-cta-red) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fdf-cta-red) 8%, transparent); } } @media (prefers-reduced-motion: reduce) { .fdf-archive__title .fdf-archive__kicker::before { animation: none; } } .fdf-archive__desc.wp-block-term-description, .fdf-archive__desc.wp-block-term-description p { color: var(--fdf-muted) !important; margin: 0 auto !important; max-width: 56ch; text-align: center; } .fdf-archive__desc.wp-block-term-description:empty { display: none; } /* ---------- CONTAINER 2 COLONNES ---------- */ .fdf-archive__container { padding-left: max(var(--wp--style--root--padding-left, 1rem), env(safe-area-inset-left, 0px)); padding-right: max(var(--wp--style--root--padding-right, 1rem), env(safe-area-inset-right, 0px)); } .fdf-archive__columns.is-stacked-on-mobile { margin-block-start: 0; gap: clamp(1.5rem, 4vw, 3rem) !important; } @media (max-width: 781px) { .fdf-archive__columns.is-stacked-on-mobile > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 782px) { .fdf-archive__columns.is-stacked-on-mobile { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .fdf-archive__columns.is-stacked-on-mobile > .fdf-archive__col-content { flex-grow: 1 !important; min-width: 0; } .fdf-archive__columns.is-stacked-on-mobile > .fdf-archive__col-aside { flex-grow: 0 !important; flex-shrink: 0 !important; max-width: 22rem; } .fdf-archive__aside-stack { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--fdf-header-band-h, 7rem) + 1rem); } } @media (min-width: 1280px) { .fdf-archive__columns.is-stacked-on-mobile > .fdf-archive__col-aside { flex-basis: 22rem !important; max-width: 22rem; } } /* ---------- GRILLE ARTICLES ---------- */ .fdf-archive__grid.wp-block-post-template, ul.wp-block-post-template.fdf-archive__grid { list-style: none; margin: 0; padding: 0; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(0.85rem, 2vw, 1.5rem); } @media (max-width: 599px) { .fdf-archive__grid.wp-block-post-template, ul.wp-block-post-template.fdf-archive__grid { grid-template-columns: 1fr; } } /* Override des règles globales qui transforment les grilles en carousel */ .fdf-archive .wp-block-query .wp-block-post-template, .fdf-archive .wp-block-query .wp-block-post-template.is-layout-grid { display: grid !important; grid-auto-flow: row !important; overflow: visible !important; scroll-snap-type: none !important; } .fdf-archive .wp-block-query .wp-block-post-template > .wp-block-post, .fdf-archive .wp-block-query .wp-block-post-template.is-layout-grid > .wp-block-post { flex: initial !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; scroll-snap-align: none !important; } .fdf-archive__grid > .wp-block-post { display: flex; flex-direction: column; min-height: 0; height: 100%; align-self: stretch; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 14px; overflow: hidden; transition: transform var(--fdf-transition), box-shadow var(--fdf-transition), border-color var(--fdf-transition); } .fdf-archive__grid > .wp-block-post:hover { transform: translateY(-3px); box-shadow: 0 18px 50px color-mix(in srgb, var(--fdf-text) 12%, transparent); border-color: color-mix(in srgb, var(--fdf-text) 18%, var(--fdf-border)); } .fdf-archive__card, .wp-block-group.fdf-archive__card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; gap: 0; padding: 0; background: transparent; border: 0; border-radius: 0; } .fdf-archive__card-media.wp-block-post-featured-image, .fdf-archive__card .wp-block-post-featured-image { margin: 0; width: 100%; max-width: none; align-self: stretch; flex: 0 0 auto; overflow: hidden; background: color-mix(in srgb, var(--fdf-text) 5%, var(--fdf-surface)); } .fdf-archive__card-media a, .fdf-archive__card .wp-block-post-featured-image a { display: block; width: 100%; line-height: 0; } .fdf-archive__card-media img, .fdf-archive__card .wp-block-post-featured-image img { display: block; width: 100%; max-width: none !important; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .fdf-archive__grid > .wp-block-post:hover .fdf-archive__card-media img, .fdf-archive__grid > .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); } .fdf-archive__card-body, .wp-block-group.fdf-archive__card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(0.9rem, 2vw, 1.25rem); flex: 1 1 auto; min-height: 0; } /* Ancien bloc catégorie retiré du modèle : masqué si encore présent (cache / synchro éditeur). */ .fdf-archive .fdf-archive__card-cat.wp-block-post-terms { display: none !important; } .fdf-archive__card-title.wp-block-post-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; text-wrap: balance; } .fdf-archive__card-title.wp-block-post-title a { color: var(--fdf-text) !important; text-decoration: none; transition: color var(--fdf-transition); } .fdf-archive__grid > .wp-block-post:hover .fdf-archive__card-title.wp-block-post-title a { color: var(--fdf-cta-blue) !important; } .fdf-archive__card-excerpt.wp-block-post-excerpt { margin: 0; color: var(--fdf-muted); font-size: 0.875rem; line-height: 1.55; } .fdf-archive__card-excerpt.wp-block-post-excerpt p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .fdf-archive__card-date.wp-block-post-date { margin: 0; margin-top: auto; padding-top: 0.25rem; color: var(--fdf-muted); font-size: 0.75rem; font-weight: 500; } /* ---------- ANIMATION D APPARITION DES NOUVELLES CARTES ---------- */ @keyframes fdf-archive-fade-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .fdf-archive__grid > .fdf-archive__item--new { animation: fdf-archive-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .fdf-archive__grid > .wp-block-post, .fdf-archive__grid > .wp-block-post:hover, .fdf-archive__grid > .fdf-archive__item--new, .fdf-archive__card-media img { transition: none !important; animation: none !important; transform: none !important; } } /* ---------- PAGINATION (cachée si JS, gardée en fallback) ---------- */ .fdf-archive__pagination.wp-block-query-pagination { margin-top: clamp(1.5rem, 4vw, 2.5rem); gap: 0.45rem !important; font-weight: 600; } .fdf-archive__pagination.wp-block-query-pagination a, .fdf-archive__pagination.wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0.5rem 0.85rem; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 8px; color: var(--fdf-text); text-decoration: none; transition: background-color var(--fdf-transition), border-color var(--fdf-transition), color var(--fdf-transition); } .fdf-archive__pagination.wp-block-query-pagination a:hover, .fdf-archive__pagination.wp-block-query-pagination .page-numbers:hover { background: var(--fdf-text); border-color: var(--fdf-text); color: var(--fdf-bg); } .fdf-archive__pagination.wp-block-query-pagination .page-numbers.current { background: var(--fdf-text); border-color: var(--fdf-text); color: var(--fdf-bg); } .fdf-archive__query.fdf-archive__query--js .fdf-archive__pagination { display: none !important; } /* ---------- CHARGEMENT PROGRESSIF (zone insérée par JS) ---------- */ .fdf-archive__loadmore-wrap { margin-top: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .fdf-archive__loadmore-wrap[hidden] { display: none; } .fdf-archive__loadmore { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.5rem; background: var(--fdf-text); color: var(--fdf-bg); border: 0; border-radius: 9999px; font: 600 0.9375rem/1 "Outfit", sans-serif; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s ease, background-color var(--fdf-transition), opacity var(--fdf-transition); } .fdf-archive__loadmore:hover:not(:disabled) { transform: translateY(-1px); background: var(--fdf-cta-blue); } .fdf-archive__loadmore:focus-visible { outline: 2px solid var(--fdf-cta-blue); outline-offset: 3px; } .fdf-archive__loadmore:disabled { opacity: 0.65; cursor: progress; } .fdf-archive__loadmore-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fdf-archive-spin 0.75s linear infinite; } .fdf-archive__loadmore[data-state="idle"] .fdf-archive__loadmore-spinner, .fdf-archive__loadmore[data-state="end"] .fdf-archive__loadmore-spinner { display: none; } @keyframes fdf-archive-spin { to { transform: rotate(360deg); } } .fdf-archive__loadmore-status { color: var(--fdf-muted); font-size: 0.8125rem; min-height: 1em; } .fdf-archive__loadmore-status[role="alert"] { color: var(--fdf-cta-red); font-weight: 600; } .fdf-archive__sentinel { width: 100%; height: 1px; margin-top: 2rem; } /* Skeleton injecté pendant le fetch */ .fdf-archive__skeleton { background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .fdf-archive__skeleton::before, .fdf-archive__skeleton::after { content: ""; background: linear-gradient( 90deg, color-mix(in srgb, var(--fdf-text) 5%, transparent) 0%, color-mix(in srgb, var(--fdf-text) 12%, transparent) 50%, color-mix(in srgb, var(--fdf-text) 5%, transparent) 100% ); background-size: 200% 100%; animation: fdf-archive-skel 1.4s ease-in-out infinite; } .fdf-archive__skeleton::before { height: 220px; } .fdf-archive__skeleton::after { height: 96px; margin: 1rem; border-radius: 6px; } @keyframes fdf-archive-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .fdf-archive__loadmore-spinner, .fdf-archive__skeleton::before, .fdf-archive__skeleton::after { animation: none !important; } } /* ---------- ÉTAT VIDE ---------- */ .fdf-archive__empty { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2rem); background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 16px; color: var(--fdf-muted); } .fdf-archive__empty svg { color: var(--fdf-muted); opacity: 0.6; } .fdf-archive__empty-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--fdf-text); } .fdf-archive__empty-text { margin: 0; max-width: 48ch; font-size: 0.9375rem; line-height: 1.55; } .fdf-archive__empty-cta { display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; background: var(--fdf-text); color: var(--fdf-bg); border-radius: 9999px; text-decoration: none; font-weight: 600; font-size: 0.875rem; margin-top: 0.5rem; transition: background-color var(--fdf-transition); } .fdf-archive__empty-cta:hover { background: var(--fdf-cta-blue); color: #fff; } /* ---------- COLONNE LATÉRALE (widgets) ---------- */ .fdf-archive__aside-stack.is-layout-flex, .fdf-archive__aside-stack.wp-block-group-is-layout-flex { align-items: stretch !important; width: 100%; box-sizing: border-box; gap: 0.65rem; } .fdf-archive__aside-label { margin: 0 0 0.25rem !important; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fdf-muted); } .fdf-archive__aside-label-loc { color: var(--fdf-text); font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; } /* Réutilise les cartes du shortcode [fdf-single-aside-cards] dans le contexte archive */ .fdf-archive .fdf-single__aside-cards { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0; width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; } .fdf-archive .fdf-single__aside-card { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "status status" "body cta"; align-items: end; gap: 0.85rem; min-height: clamp(140px, 16vw, 180px); width: 100%; max-width: 100%; box-sizing: border-box; padding: clamp(0.85rem, 1.4vw, 1.1rem); border-radius: clamp(14px, 2vw, 18px); background-color: #0a0a0a; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; } .fdf-archive .fdf-single__aside-card__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.88) 100%), linear-gradient(110deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%); } .fdf-archive .fdf-single__aside-card:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .fdf-archive .fdf-single__aside-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .fdf-archive .fdf-single__aside-card__status { grid-area: status; justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); line-height: 1; } .fdf-archive .fdf-single__aside-card__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fdf-card-status-color, rgba(255, 255, 255, 0.6)) 30%, transparent); } .fdf-archive .fdf-single__aside-card--live .fdf-single__aside-card__status-dot { animation: fdf-aside-pulse 2.2s ease-in-out infinite; } .fdf-archive .fdf-single__aside-card__body { grid-area: body; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .fdf-archive .fdf-single__aside-card__eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .fdf-archive .fdf-single__aside-card__count { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #fff; text-wrap: balance; } .fdf-archive .fdf-single__aside-card__sub { font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.78); line-height: 1.35; } .fdf-archive .fdf-single__aside-card__cta { grid-area: cta; align-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border-radius: 9999px; background: #fff; color: #0a0a0a; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: transform 0.25s ease, background 0.2s ease; } .fdf-archive .fdf-single__aside-card:hover .fdf-single__aside-card__cta { transform: translateX(2px); } .fdf-archive .fdf-single__aside-card__arrow { flex-shrink: 0; } .fdf-archive .fdf-single__aside-card--ok { --fdf-card-status-color: #4ade80; } .fdf-archive .fdf-single__aside-card--warn { --fdf-card-status-color: #fb923c; } .fdf-archive .fdf-single__aside-card--danger { --fdf-card-status-color: #f87171; } .fdf-archive .fdf-single__aside-card--neutral { --fdf-card-status-color: rgba(255, 255, 255, 0.6); } @media (prefers-reduced-motion: reduce) { .fdf-archive .fdf-single__aside-card, .fdf-archive .fdf-single__aside-card__cta { transition: none !important; } .fdf-archive .fdf-single__aside-card:hover, .fdf-archive .fdf-single__aside-card:hover .fdf-single__aside-card__cta { transform: none; } } @media (max-width: 781px) { /* Sidebar visible aussi en mobile, mais sous le contenu */ .fdf-archive__col-aside { margin-top: clamp(1.5rem, 4vw, 2.5rem); } } /* ==================================================================== SINGLE SIGNALEMENT — Refonte éditoriale (.fdf-sgn) — light/dark/auto ==================================================================== */ /* Variables locales scoped au signalement */ .single-signalement { --fdf-sgn-radius: 16px; --fdf-sgn-radius-sm: 12px; --fdf-sgn-shadow: 0 1px 0 color-mix(in srgb, var(--fdf-text) 4%, transparent); --fdf-sgn-live: #d00100; --fdf-sgn-live-soft: color-mix(in srgb, #d00100 18%, transparent); } /* Reset des marges
imposées par WP FSE — le héro doit coller au header */ .single-signalement main.wp-block-group.fdf-single, .single-signalement .wp-site-blocks > main { margin-block-start: 0 !important; margin-top: 0 !important; } .single-signalement .fdf-sgn { background-color: var(--fdf-bg); color: var(--fdf-text); } /* ----------------------- HÉRO ÉDITORIAL (style archive) ----------------------- */ .single-signalement .fdf-sgn__hero { position: relative; isolation: isolate; overflow: hidden; margin-top: 0 !important; margin-bottom: 0 !important; background: radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, #7a1010 24%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #4a0808 18%, transparent) 0%, transparent 60%), linear-gradient(165deg, color-mix(in srgb, #5a0a0c 10%, var(--fdf-surface)) 0%, color-mix(in srgb, #2b0508 6%, var(--fdf-bg)) 100%); } /* Trame en grille avec masque radial — discret */ .single-signalement .fdf-sgn__hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--fdf-text) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--fdf-text) 4%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 75%); z-index: 0; } /* Mode clair — halos rouges discrets en haut à gauche et à droite */ [data-theme="light"] .single-signalement .fdf-sgn__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 14%, transparent) 0%, transparent 50%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 12%, transparent) 0%, transparent 52%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 4%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .single-signalement .fdf-sgn__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 14%, transparent) 0%, transparent 50%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 12%, transparent) 0%, transparent 52%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 4%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } } /* Mode sombre — halos plus saturés sur fond sombre */ [data-theme="dark"] .single-signalement .fdf-sgn__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 26%, transparent) 0%, transparent 48%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 22%, transparent) 0%, transparent 50%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 10%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .single-signalement .fdf-sgn__hero { background: radial-gradient(720px 400px at -5% -15%, color-mix(in srgb, var(--fdf-cta-red) 26%, transparent) 0%, transparent 48%), radial-gradient(780px 440px at 105% -12%, color-mix(in srgb, var(--fdf-cta-red) 22%, transparent) 0%, transparent 50%), linear-gradient(165deg, color-mix(in srgb, var(--fdf-cta-red) 10%, var(--fdf-surface)) 0%, var(--fdf-bg) 100%); } } /* Wrapper interne du héro — centré horizontalement */ .single-signalement .fdf-sgn__hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--wp--style--global--wide-size, 1140px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.85rem, 2vw, 1.25rem); } /* Fondu en bas du héro vers le fond du body */ .single-signalement .fdf-sgn__hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(32px, 6vw, 64px); background: linear-gradient(180deg, transparent 0%, var(--fdf-bg) 100%); pointer-events: none; z-index: 1; } /* Fil dAriane (centré) */ .single-signalement .fdf-sgn__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fdf-muted); } .single-signalement .fdf-sgn__crumb, .single-signalement .fdf-sgn__breadcrumb .wp-block-post-terms, .single-signalement .fdf-sgn__breadcrumb .wp-block-post-terms a { color: var(--fdf-muted) !important; text-decoration: none; margin: 0; transition: color var(--fdf-transition); } .single-signalement .fdf-sgn__crumb[href]:hover, .single-signalement .fdf-sgn__breadcrumb .wp-block-post-terms a:hover { color: var(--fdf-text) !important; text-decoration: underline; text-underline-offset: 3px; } .single-signalement .fdf-sgn__crumb-sep { color: color-mix(in srgb, var(--fdf-muted) 60%, transparent); font-weight: 400; } .single-signalement .fdf-sgn__crumb--cat.wp-block-post-terms, .single-signalement .fdf-sgn__crumb--cat.wp-block-post-terms a { display: inline-flex; align-items: center; padding: 0; background: transparent !important; border: none !important; border-radius: 0; text-transform: none; font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 600; color: var(--fdf-text) !important; } /* KICKER rouge animé — équivalent .fdf-archive__kicker */ .single-signalement .fdf-sgn__kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 800; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; color: var(--fdf-cta-red); } .single-signalement .fdf-sgn__kicker::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fdf-cta-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fdf-cta-red) 25%, transparent); animation: fdf-sgn-kicker-pulse 2.4s ease-in-out infinite; } @keyframes fdf-sgn-kicker-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fdf-cta-red) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fdf-cta-red) 8%, transparent); } } @media (prefers-reduced-motion: reduce) { .single-signalement .fdf-sgn__kicker::before { animation: none; } } /* Titre principal — centré, dark text, balance, "Incendie à" + commune sur la même ligne */ .single-signalement .fdf-sgn__title.wp-block-post-title { margin: 0 !important; color: var(--fdf-text) !important; font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; text-align: center; text-shadow: none; } /* Préfixe « Incendie à » — même ligne que le titre, espace insécable géré */ .single-signalement .fdf-sgn__title .fdf-sgn__title-prefix { display: inline; font: inherit; color: inherit; } .single-signalement .fdf-sgn__title .fdf-sgn__title-prefix::after { content: " "; } .single-signalement .fdf-sgn__title .fdf-sgn__title-text { display: inline; } /* ----------------------- CONTAINER ----------------------- */ .single-signalement .fdf-sgn__container { padding-left: max(var(--wp--style--root--padding-left, 1rem), env(safe-area-inset-left, 0px)); padding-right: max(var(--wp--style--root--padding-right, 1rem), env(safe-area-inset-right, 0px)); } .single-signalement .fdf-sgn__columns { margin-block-start: 0 !important; gap: clamp(1.5rem, 4vw, 3rem) !important; } @media (max-width: 781px) { .single-signalement .fdf-sgn__columns.is-stacked-on-mobile > .wp-block-column { flex-basis: 100% !important; } } /* ----------------------- COLONNE PRINCIPALE ----------------------- */ /* Le post-content occupe toute la largeur de sa colonne */ @media (min-width: 782px) { .single-signalement .fdf-sgn__col-content > .wp-block-post-content.fdf-sgn__entry, .single-signalement .fdf-sgn__col-content > .wp-block-post-content { box-sizing: border-box; width: 100%; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .single-signalement .fdf-sgn__col-content > .wp-block-post-content > *:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) { max-width: 100% !important; margin-left: 0 !important; margin-right: auto !important; } } .single-signalement .fdf-sgn__entry { font-size: clamp(1rem, 1.3vw, 1.0625rem); line-height: 1.7; color: var(--fdf-text); } .single-signalement .fdf-sgn__entry > *:first-child { margin-block-start: 0 !important; } /* Espacement homogène entre les blocs internes du post-content (ops + main-courante) */ .single-signalement .fdf-sgn__entry > .fdf-ops-dashboard { margin-block: 0 clamp(1rem, 2vw, 1.5rem) !important; } .single-signalement .fdf-sgn__entry > .fdf-signalement-main-courante, .single-signalement .fdf-sgn__entry > .fdf-mc-direct { margin-block: clamp(1rem, 2vw, 1.5rem) 0 !important; } /* ----------------------- COLONNE LATÉRALE — sticky ----------------------- */ .single-signalement .fdf-sgn__aside { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.6vw, 1.25rem); width: 100%; box-sizing: border-box; } @media (min-width: 782px) { .single-signalement .fdf-sgn__columns.is-stacked-on-mobile { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .single-signalement .fdf-sgn__columns.is-stacked-on-mobile > .fdf-sgn__col-content { flex-grow: 1 !important; min-width: 0; } .single-signalement .fdf-sgn__columns.is-stacked-on-mobile > .fdf-sgn__col-aside { flex-grow: 0 !important; flex-shrink: 0 !important; max-width: 22rem; } .single-signalement .fdf-sgn__aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--fdf-header-band-h, 7rem) + 1rem); } /* Masque la carte auteur dupliquée dans la colonne principale en desktop */ .single-signalement .fdf-sgn__author-card-mobile { display: none !important; } } @media (min-width: 1280px) { .single-signalement .fdf-sgn__columns.is-stacked-on-mobile > .fdf-sgn__col-aside { flex-basis: 22rem !important; max-width: 22rem; } } @media (max-width: 781px) { /* En mobile : on masque la colonne aside, sauf le bloc auteur (déjà répliqué dans la colonne principale via author-card-mobile) */ .single-signalement .fdf-sgn__col-aside { display: none !important; } } /* Cartes / panels */ .single-signalement .fdf-sgn__panel { box-sizing: border-box; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: var(--fdf-sgn-radius); padding: clamp(0.95rem, 1.6vw, 1.2rem); box-shadow: var(--fdf-sgn-shadow); width: 100%; } .single-signalement .fdf-sgn__aside-label { margin: 0 0 0.7rem !important; font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--fdf-muted) !important; } /* PARTAGE — boutons pastilles */ .single-signalement .fdf-sgn__share-row { display: flex; flex-wrap: wrap; gap: 0.45rem; } .single-signalement .fdf-sgn__share-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--fdf-bg); border: 1px solid var(--fdf-border); color: var(--fdf-text) !important; cursor: pointer; transition: background-color var(--fdf-transition), border-color var(--fdf-transition), transform 0.15s ease, color var(--fdf-transition); text-decoration: none !important; padding: 0; } .single-signalement .fdf-sgn__share-btn:hover { background: var(--fdf-text); color: #fff !important; border-color: var(--fdf-text); transform: translateY(-1px); } .single-signalement .fdf-sgn__share-btn:focus-visible { outline: 2px solid var(--fdf-cta-blue); outline-offset: 2px; } .single-signalement .fdf-sgn__share-btn--copy { position: relative; } .single-signalement .fdf-sgn__copy-toast { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px); background: var(--fdf-text); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.35rem 0.55rem; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .single-signalement .fdf-sgn__share-btn.is-copied .fdf-sgn__copy-toast { opacity: 1; transform: translateX(-50%) translateY(0); } /* AUTEUR */ .single-signalement .fdf-sgn__author-panel .wp-block-post-author { display: flex; flex-direction: row; align-items: flex-start; gap: 0.85rem; margin: 0; } .single-signalement .fdf-sgn__author-panel .wp-block-post-author__avatar { flex-shrink: 0; margin: 0; } .single-signalement .fdf-sgn__author-panel .wp-block-post-author__avatar img { width: 48px !important; height: 48px !important; border-radius: 50%; border: 2px solid var(--fdf-border); display: block; } .single-signalement .fdf-sgn__author-panel .wp-block-post-author__content { min-width: 0; flex: 1; } .single-signalement .fdf-sgn__author-panel .wp-block-post-author__name, .single-signalement .fdf-sgn__author-panel .wp-block-post-author__name a { color: var(--fdf-text) !important; font-weight: 700 !important; font-size: 0.95rem !important; text-decoration: none !important; display: block; } .single-signalement .fdf-sgn__author-panel .wp-block-post-author__bio { color: var(--fdf-muted) !important; font-size: 0.8125rem !important; line-height: 1.5 !important; margin: 0.3rem 0 0 !important; } /* CATÉGORIES — pills horizontales */ .single-signalement .fdf-sgn__cats-list.wp-block-post-terms, .single-signalement .fdf-sgn__cats-list .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } .single-signalement .fdf-sgn__cats-list a, .single-signalement .fdf-sgn__cats-panel .wp-block-post-terms a { display: inline-flex; align-items: center; padding: 0.3rem 0.65rem; border-radius: 9999px; background: var(--fdf-bg); border: 1px solid var(--fdf-border); color: var(--fdf-text) !important; text-decoration: none !important; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; transition: background-color var(--fdf-transition), border-color var(--fdf-transition), color var(--fdf-transition); } .single-signalement .fdf-sgn__cats-list a:hover, .single-signalement .fdf-sgn__cats-panel .wp-block-post-terms a:hover { background: var(--fdf-text); color: #fff !important; border-color: var(--fdf-text); } /* CTA "Signaler une info" */ .single-signalement .fdf-sgn__cta-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; background: linear-gradient(135deg, var(--fdf-cta-red) 0%, color-mix(in srgb, var(--fdf-cta-red) 70%, #000) 100%); color: #fff !important; border: none !important; text-decoration: none !important; padding: clamp(0.95rem, 1.7vw, 1.15rem); border-radius: var(--fdf-sgn-radius); box-shadow: 0 8px 30px color-mix(in srgb, var(--fdf-cta-red) 30%, transparent); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .single-signalement .fdf-sgn__cta-panel:hover { transform: translateY(-2px); box-shadow: 0 14px 38px color-mix(in srgb, var(--fdf-cta-red) 38%, transparent); } .single-signalement .fdf-sgn__cta-panel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .single-signalement .fdf-sgn__cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; flex-shrink: 0; } .single-signalement .fdf-sgn__cta-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .single-signalement .fdf-sgn__cta-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .single-signalement .fdf-sgn__cta-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: #fff; } .single-signalement .fdf-sgn__cta-sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; } .single-signalement .fdf-sgn__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; flex-shrink: 0; transition: transform 0.25s ease, background 0.2s ease; } .single-signalement .fdf-sgn__cta-panel:hover .fdf-sgn__cta-arrow { transform: translateX(2px); background: rgba(255, 255, 255, 0.28); } @media (prefers-reduced-motion: reduce) { .single-signalement .fdf-sgn__cta-panel, .single-signalement .fdf-sgn__cta-arrow, .single-signalement .fdf-sgn__share-btn { transition: none !important; } .single-signalement .fdf-sgn__cta-panel:hover { transform: none; } .single-signalement .fdf-sgn__cta-panel:hover .fdf-sgn__cta-arrow { transform: none; } .single-signalement .fdf-sgn__share-btn:hover { transform: none; } } /* ----------------------- ARTICLES EN RELATION (override esthétique) ----------------------- */ .single-signalement .fdf-sgn__related { margin-top: clamp(2rem, 4vw, 3rem) !important; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--fdf-border); } .single-signalement .fdf-sgn__related .fdf-single__related-title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; color: var(--fdf-text); text-transform: none; margin: 0 0 1rem; } .single-signalement .fdf-sgn__related .fdf-single__related-grid { gap: clamp(0.85rem, 1.6vw, 1.25rem); } /* ----------------------- AJUSTEMENTS DASHBOARD OPÉRATIONNEL & MAIN COURANTE ----------------------- */ /* Bandeau ops dashboard — contraste plus chaud + radius cohérent */ .single-signalement .fdf-sgn__entry .fdf-ops-dashboard__status { border-radius: var(--fdf-sgn-radius); background: linear-gradient(135deg, #111418 0%, #1c2230 100%); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } .single-signalement .fdf-sgn__entry .fdf-ops-dashboard__situation { font-size: 1.0625rem; color: var(--fdf-text); margin: 0.85rem 0 1.25rem; } /* "Le direct" — un peu plus aéré dans ce contexte */ .single-signalement .fdf-sgn__entry .fdf-mc-direct__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; } /* ----------------------- DARK MODE ----------------------- */ [data-theme="dark"] .single-signalement { --fdf-sgn-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent); } [data-theme="dark"] .single-signalement .fdf-sgn__panel { background: color-mix(in srgb, var(--fdf-surface) 96%, #fff); border-color: color-mix(in srgb, var(--fdf-border) 80%, #fff 8%); } [data-theme="dark"] .single-signalement .fdf-sgn__share-btn { background: var(--fdf-bg); border-color: var(--fdf-border); } [data-theme="dark"] .single-signalement .fdf-sgn__cats-list a { background: var(--fdf-bg); border-color: var(--fdf-border); } /* ==================================================================== ACCUEIL — Bloc « Actualités » (mosaïque éditoriale) .fdf-home-actus : 1 carte vedette + N cartes secondaires ==================================================================== */ .fdf-home-actus { width: 100%; } .fdf-home-actus__head, .fdf-home-feux__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(1rem, 2vw, 1.5rem); padding-bottom: 0.85rem; border-bottom: 1px solid var(--fdf-border); } .fdf-home-actus__head-left, .fdf-home-feux__head-left { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } .fdf-home-actus__kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fdf-cta-blue); } .fdf-home-actus__title, .fdf-home-feux__title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--fdf-text); } .fdf-home-actus__see-all, .fdf-home-feux__see-all { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; color: var(--fdf-cta-blue); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: color var(--fdf-transition), gap var(--fdf-transition); } .fdf-home-actus__see-all:hover, .fdf-home-feux__see-all:hover { color: var(--fdf-cta-blue-hover); gap: 0.6rem; } .fdf-home-actus__see-all svg, .fdf-home-feux__see-all svg { width: 16px; height: 16px; transition: transform var(--fdf-transition); } .fdf-home-actus__see-all:hover svg, .fdf-home-feux__see-all:hover svg { transform: translateX(3px); } .fdf-home-actus__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; } @media (max-width: 900px) { .fdf-home-actus__grid { grid-template-columns: 1fr; } } /* — Carte vedette — */ .fdf-home-actus__feat { margin: 0; } .fdf-home-actus__feat-link { display: flex; flex-direction: column; background: var(--fdf-surface); border: 1px solid var(--fdf-border); border-radius: 16px; overflow: hidden; color: inherit !important; text-decoration: none !important; transition: transform var(--fdf-transition), box-shadow var(--fdf-transition), border-color var(--fdf-transition); } .fdf-home-actus__feat-link:hover { transform: translateY(-3px); box-shadow: 0 18px 48px color-mix(in srgb, var(--fdf-text) 12%, transparent); border-color: color-mix(in srgb, var(--fdf-text) 20%, var(--fdf-border)); } .fdf-home-actus__feat-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fdf-surface-2); } .fdf-home-actus__feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1); } .fdf-home-actus__feat-link:hover .fdf-home-actus__feat-media img { transform: scale(1.04); } .fdf-home-actus__feat-cat { position: absolute; top: 0.875rem; left: 0.875rem; display: inline-block; padding: 0.35rem 0.7rem; background: var(--fdf-bg); color: var(--fdf-text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .fdf-home-actus__feat-body { display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1rem, 2vw, 1.5rem); flex: 1 1 auto; } .fdf-home-actus__feat-title { margin: 0; font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--fdf-text); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fdf-transition); } .fdf-home-actus__feat-link:hover .fdf-home-actus__feat-title { color: var(--fdf-cta-blue); } .fdf-home-actus__feat-excerpt { margin: 0; color: var(--fdf-muted); font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fdf-home-actus__feat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; color: var(--fdf-muted); font-size: 0.75rem; font-weight: 500; } .fdf-home-actus__feat-meta-sep { color: color-mix(in srgb, var(--fdf-muted) 60%, transparent); } /* — Liste latérale — */ .fdf-home-actus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .fdf-home-actus__item { margin: 0; } .fdf-home-actus__item-link { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0.85rem; padding: 0.55rem; background: var(--fdf-bg); border: 1px solid var(--fdf-border); border-radius: 12px; color: inherit !important; text-decoration: none !important; transition: transform var(--fdf-transition), background var(--fdf-transition), border-color var(--fdf-transition); } .fdf-home-actus__item-link:hover { background: var(--fdf-surface); border-color: color-mix(in srgb, var(--fdf-text) 18%, var(--fdf-border)); transform: translateX(2px); } .fdf-home-actus__item-media { aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border-radius: 8px; background: var(--fdf-surface-2); } .fdf-home-actus__item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdf-home-actus__item-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; justify-content: center; } .fdf-home-actus__item-cat { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fdf-cta-blue); } .fdf-home-actus__item-title { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--fdf-text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fdf-transition); } .fdf-home-actus__item-link:hover .fdf-home-actus__item-title { color: var(--fdf-cta-blue); } .fdf-home-actus__item-date { color: var(--fdf-muted); font-size: 0.6875rem; font-weight: 500; } /* ==================================================================== ACCUEIL — Bloc « Incendies récents » (ticker live) .fdf-home-feux : grille de cartes signalement avec image en fond ==================================================================== */ .fdf-home-feux { width: 100%; } .fdf-home-feux__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fdf-cta-red); } .fdf-home-feux__kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: fdf-feux-pulse 1.6s ease-out infinite; } @keyframes fdf-feux-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .fdf-home-feux__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.125rem); } @media (max-width: 1024px) { .fdf-home-feux__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .fdf-home-feux__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .fdf-home-feux__grid { grid-template-columns: 1fr; } } .fdf-home-feux__item { margin: 0; min-width: 0; } .fdf-home-feux__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 0.85rem; border-radius: 14px; overflow: hidden; background-color: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; text-decoration: none !important; isolation: isolate; transition: transform var(--fdf-transition), box-shadow var(--fdf-transition); } .fdf-home-feux__item.has-no-media .fdf-home-feux__card { background-color: #0A0A0A; background-image: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--fdf-cta-red) 40%, transparent) 0%, transparent 60%), radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--fdf-cta-red) 25%, transparent) 0%, transparent 55%); } /* Voile sombre constant (lisibilité texte) */ .fdf-home-feux__card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.92) 100%); pointer-events: none; } /* Halo rouge pour les feux EN COURS */ .fdf-home-feux__card-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .fdf-home-feux__item.is-live .fdf-home-feux__card-overlay { background: radial-gradient(circle at 65% 0%, rgba(208, 1, 0, 0.55) 0%, transparent 60%); } .fdf-home-feux__card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); } .fdf-home-feux__card-status { position: absolute; top: 0.625rem; left: 0.625rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem 0.3rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; } .fdf-home-feux__item.is-live .fdf-home-feux__card-status { background: rgba(127, 29, 29, 0.55); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; } .fdf-home-feux__card-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: fdf-feux-pulse 1.6s ease-out infinite; } .fdf-home-feux__card-dept { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 0.45rem; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #0A0A0A; font-size: 0.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .fdf-home-feux__card-body { display: flex; flex-direction: column; gap: 0.2rem; z-index: 1; min-width: 0; } .fdf-home-feux__card-commune { font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fdf-home-feux__card-time { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); } @media (prefers-reduced-motion: reduce) { .fdf-home-actus__feat-link, .fdf-home-actus__feat-media img, .fdf-home-actus__item-link, .fdf-home-feux__card, .fdf-home-feux__kicker-dot, .fdf-home-feux__card-status-dot { animation: none !important; transition: none !important; } .fdf-home-actus__feat-link:hover, .fdf-home-actus__item-link:hover, .fdf-home-feux__card:hover { transform: none; } .fdf-home-actus__feat-link:hover .fdf-home-actus__feat-media img { transform: none; } } /* — Dark mode adaptations — */ [data-theme="dark"] .fdf-home-actus__feat-cat { background: var(--fdf-surface); color: var(--fdf-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .fdf-home-feux__card-dept { background: rgba(255, 255, 255, 0.95); color: #0A0A0A; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .fdf-home-actus__feat-cat { background: var(--fdf-surface); color: var(--fdf-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } }