/** * Hub Prévention — styles dédiés (chargés uniquement sous /prevention/) */ /* ============================================================= * Design tokens (couleurs, rayons, typo) pour les widgets et hubs * spécifiques moyens / prévention. Scopés pour ne pas polluer le * reste du thème. * ============================================================= */ .fdf-wrap, .fdf-moyens-hub, .fdf-moyens-cat { --color-text-primary: #2C2C2A; --color-text-secondary: #5F5E5A; --color-text-tertiary: #888780; --color-text-info: #185FA5; --color-text-danger: #A32D2D; --color-text-success: #3B6D11; --color-text-warning: #854F0B; --color-background-primary: #FFFFFF; --color-background-secondary: #F7F5EF; --color-background-tertiary: #F1EFE8; --color-background-info: #E6F1FB; --color-background-danger: #FCEBEB; --color-background-success: #EAF3DE; --color-background-warning: #FAEEDA; --color-border-tertiary: rgba(0, 0, 0, 0.08); --color-border-secondary: rgba(0, 0, 0, 0.15); --color-border-primary: rgba(0, 0, 0, 0.25); --color-border-info: #185FA5; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-serif: Georgia, "Times New Roman", serif; } :root { --fdf-prv-max: 1140px; --fdf-prv-radius: 10px; --fdf-prv-radius-sm: 8px; --fdf-prv-blue: #0200ff; --fdf-prv-red: #d00100; --fdf-prv-anthracite: #171717; --fdf-prv-text: #0a0a0a; --fdf-prv-muted: #737373; --fdf-prv-border: #e5e5e5; --fdf-prv-surface: #f5f5f5; --fdf-prv-white: #ffffff; --fdf-prv-shadow: 0 8px 28px rgba(10, 10, 10, 0.06); --fdf-prv-anecdote-chip-bg: #fff5f5; --fdf-prv-callout-gradient: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); --fdf-prv-callout-border: #dbe4ff; --fdf-prv-compare-blue-gradient: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); --fdf-prv-compare-blue-border: #dbe4ff; --fdf-prv-compare-red-gradient: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%); --fdf-prv-compare-red-border: #ffd6d6; --fdf-prv-compare-li-border: rgba(0, 0, 0, 0.06); --fdf-prv-placeholder-bg: linear-gradient(135deg, #f5f5f5 0%, #ececec 100%); --fdf-prv-placeholder-fg: #a3a3a3; --fdf-prv-placeholder-border: #d4d4d4; --fdf-prv-placeholder-stripe: rgba(0, 0, 0, 0.03); --fdf-prv-placeholder-icon: #c4c4c4; --fdf-prv-faq-open-shadow: 0 4px 16px rgba(2, 0, 255, 0.08); --fdf-prv-timeline-dot-shadow: rgba(2, 0, 255, 0.08); } /* Thème sombre (auto via OS ou forcé sur ) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fdf-prv-blue: #8ba3ff; --fdf-prv-red: #ff8a8a; --fdf-prv-text: #fafafa; --fdf-prv-muted: #a3a3a3; --fdf-prv-border: #2e2e2e; --fdf-prv-surface: #141414; --fdf-prv-white: #0a0a0a; --fdf-prv-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --fdf-prv-anecdote-chip-bg: color-mix(in srgb, var(--fdf-prv-red) 22%, var(--fdf-prv-surface)); --fdf-prv-callout-gradient: linear-gradient(135deg, #141a2e 0%, #0a0a0a 100%); --fdf-prv-callout-border: color-mix(in srgb, var(--fdf-prv-blue) 45%, var(--fdf-prv-border)); --fdf-prv-compare-blue-gradient: linear-gradient(135deg, #141a2e 0%, #0a0a0a 100%); --fdf-prv-compare-blue-border: color-mix(in srgb, var(--fdf-prv-blue) 45%, var(--fdf-prv-border)); --fdf-prv-compare-red-gradient: linear-gradient(135deg, #2a1515 0%, #0a0a0a 100%); --fdf-prv-compare-red-border: color-mix(in srgb, var(--fdf-prv-red) 40%, var(--fdf-prv-border)); --fdf-prv-compare-li-border: color-mix(in srgb, var(--fdf-prv-border) 70%, transparent); --fdf-prv-placeholder-bg: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); --fdf-prv-placeholder-fg: #737373; --fdf-prv-placeholder-border: #3a3a3a; --fdf-prv-placeholder-stripe: rgba(255, 255, 255, 0.05); --fdf-prv-placeholder-icon: #525252; --fdf-prv-faq-open-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --fdf-prv-timeline-dot-shadow: rgba(139, 163, 255, 0.12); } } [data-theme="dark"] { --fdf-prv-blue: #8ba3ff; --fdf-prv-red: #ff8a8a; --fdf-prv-text: #fafafa; --fdf-prv-muted: #a3a3a3; --fdf-prv-border: #2e2e2e; --fdf-prv-surface: #141414; --fdf-prv-white: #0a0a0a; --fdf-prv-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --fdf-prv-anecdote-chip-bg: color-mix(in srgb, var(--fdf-prv-red) 22%, var(--fdf-prv-surface)); --fdf-prv-callout-gradient: linear-gradient(135deg, #141a2e 0%, #0a0a0a 100%); --fdf-prv-callout-border: color-mix(in srgb, var(--fdf-prv-blue) 45%, var(--fdf-prv-border)); --fdf-prv-compare-blue-gradient: linear-gradient(135deg, #141a2e 0%, #0a0a0a 100%); --fdf-prv-compare-blue-border: color-mix(in srgb, var(--fdf-prv-blue) 45%, var(--fdf-prv-border)); --fdf-prv-compare-red-gradient: linear-gradient(135deg, #2a1515 0%, #0a0a0a 100%); --fdf-prv-compare-red-border: color-mix(in srgb, var(--fdf-prv-red) 40%, var(--fdf-prv-border)); --fdf-prv-compare-li-border: color-mix(in srgb, var(--fdf-prv-border) 70%, transparent); --fdf-prv-placeholder-bg: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); --fdf-prv-placeholder-fg: #737373; --fdf-prv-placeholder-border: #3a3a3a; --fdf-prv-placeholder-stripe: rgba(255, 255, 255, 0.05); --fdf-prv-placeholder-icon: #525252; --fdf-prv-faq-open-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --fdf-prv-timeline-dot-shadow: rgba(139, 163, 255, 0.12); } /* Layout shell */ .fdf-prv { font-family: Outfit, sans-serif; color: var(--fdf-prv-text); line-height: 1.65; font-weight: 400; } .fdf-prv * { box-sizing: border-box; } .fdf-prv a { color: var(--fdf-prv-blue); text-decoration: none; font-weight: 500; } .fdf-prv a:hover { text-decoration: underline; } .fdf-prv__inner { max-width: var(--fdf-prv-max); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); } .fdf-prv__wrap { padding-bottom: clamp(48px, 8vw, 112px); } /* Hero */ .fdf-prv-hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); background: var(--fdf-prv-surface); border-bottom: 1px solid var(--fdf-prv-border); } .fdf-prv-hero--bleu { background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 55%, #f5f5f5 100%); border-bottom-color: #dbe4ff; } .fdf-prv-hero--rouge { background: linear-gradient(135deg, #fff5f5 0%, #ffffff 50%, #fafafa 100%); border-bottom-color: #ffd6d6; } .fdf-prv-hero--anthracite { background: linear-gradient(180deg, #171717 0%, #2a2a2a 45%, #f5f5f5 45.1%); color: #fff; border-bottom: none; } .fdf-prv-hero--anthracite .fdf-prv-hero__kicker { color: rgba(255, 255, 255, 0.85); } .fdf-prv-hero--anthracite .fdf-prv-hero__title { color: #fff; } .fdf-prv-hero--anthracite .fdf-prv-hero__lead { color: rgba(255, 255, 255, 0.88); } .fdf-prv-hero__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fdf-prv-blue); margin: 0 0 0.75rem; } .fdf-prv-hero--rouge .fdf-prv-hero__kicker { color: var(--fdf-prv-red); } .fdf-prv-hero__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -1px; margin: 0 0 1rem; color: var(--fdf-prv-text); } .fdf-prv-hero__lead { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--fdf-prv-muted); max-width: 52ch; margin: 0 0 1.5rem; font-weight: 400; } .fdf-prv-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .fdf-prv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.875rem 1.75rem; border-radius: 6px; font-weight: 700; font-size: 0.9375rem; border: none; cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s, transform 0.15s; text-decoration: none !important; } .fdf-prv-btn:hover { transform: translateY(-1px); text-decoration: none !important; } .fdf-prv-btn--primary { background: #000; color: #fff !important; } .fdf-prv-btn--primary:hover { background: var(--fdf-prv-anthracite); color: #fff !important; } .fdf-prv-btn--blue { background: var(--fdf-prv-blue); color: #fff !important; } .fdf-prv-btn--blue:hover { filter: brightness(0.92); color: #fff !important; } .fdf-prv-btn--outline { background: transparent; color: var(--fdf-prv-text) !important; border: 1.5px solid var(--fdf-prv-border); } .fdf-prv-btn--outline:hover { border-color: #000; color: #000 !important; } /* Breadcrumb */ .fdf-prv-breadcrumb { font-size: 0.8125rem; color: var(--fdf-prv-muted); padding: 1rem 0 0; margin-bottom: 0.5rem; } .fdf-prv-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .fdf-prv-breadcrumb li { display: inline-flex; align-items: center; gap: 0.35rem; } .fdf-prv-breadcrumb li:not(:last-child)::after { content: "›"; opacity: 0.45; font-weight: 600; margin-left: 0.35rem; } .fdf-prv-breadcrumb a { color: var(--fdf-prv-muted); font-weight: 500; } .fdf-prv-breadcrumb a:hover { color: var(--fdf-prv-text); } /* Two-column layout with TOC */ .fdf-prv-layout { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); padding-top: clamp(28px, 4vw, 48px); } @media (min-width: 960px) { .fdf-prv-layout--toc { grid-template-columns: 240px 1fr; align-items: start; } } .fdf-prv-toc { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px); background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 1rem 1.1rem; font-size: 0.875rem; } .fdf-prv-toc__title { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--fdf-prv-muted); margin: 0 0 0.75rem; } .fdf-prv-toc ul { list-style: none; margin: 0; padding: 0; } .fdf-prv-toc li { margin: 0.35rem 0; } .fdf-prv-toc a { color: var(--fdf-prv-text); font-weight: 500; display: block; padding: 0.25rem 0; border-left: 2px solid transparent; padding-left: 0.5rem; margin-left: -0.5rem; } .fdf-prv-toc a:hover, .fdf-prv-toc a.is-active { border-left-color: var(--fdf-prv-blue); color: var(--fdf-prv-blue); text-decoration: none; } .fdf-prv-main h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 2.25rem 0 1rem; letter-spacing: -0.4px; scroll-margin-top: 100px; } .fdf-prv-main h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 0.65rem; } .fdf-prv-main p { margin: 0 0 1rem; } .fdf-prv-main ul, .fdf-prv-main ol { margin: 0 0 1rem 1.25rem; padding: 0; } .fdf-prv-main li { margin: 0.35rem 0; } /* Stats */ .fdf-prv-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2rem 0; } .fdf-prv-stat { background: var(--fdf-prv-white); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 1.25rem 1.35rem; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-stat__num { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; color: var(--fdf-prv-text); } .fdf-prv-stat__label { font-size: 0.875rem; color: var(--fdf-prv-muted); margin-top: 0.35rem; } /* Card grids */ .fdf-prv-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .fdf-prv-card { display: flex; flex-direction: column; background: var(--fdf-prv-white); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); overflow: hidden; box-shadow: var(--fdf-prv-shadow); transition: transform 0.2s, box-shadow 0.2s; height: 100%; } .fdf-prv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(10, 10, 10, 0.1); } .fdf-prv-card__media { aspect-ratio: 16 / 9; background: var(--fdf-prv-surface); overflow: hidden; } .fdf-prv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdf-prv-card__body { padding: 1.25rem 1.35rem 1.35rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .fdf-prv-card__tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--fdf-prv-blue); } .fdf-prv-card__title { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.25; } .fdf-prv-card__title a { color: inherit; text-decoration: none !important; } .fdf-prv-card__title a:hover { color: var(--fdf-prv-blue); } .fdf-prv-card__excerpt { font-size: 0.9375rem; color: var(--fdf-prv-muted); margin: 0; flex: 1; } .fdf-prv-card__arrow { font-weight: 700; font-size: 0.875rem; margin-top: 0.5rem; color: var(--fdf-prv-blue); } /* Steps */ .fdf-prv-steps { counter-reset: fdfstep; margin: 2rem 0; display: flex; flex-direction: column; gap: 1rem; } .fdf-prv-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem; background: var(--fdf-prv-surface); border-radius: var(--fdf-prv-radius-sm); border: 1px solid var(--fdf-prv-border); } .fdf-prv-step::before { counter-increment: fdfstep; content: counter(fdfstep); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #000; color: #fff; font-weight: 800; font-size: 0.9375rem; flex-shrink: 0; } .fdf-prv-step__body h4 { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 700; } .fdf-prv-step__body p { margin: 0; font-size: 0.9375rem; color: var(--fdf-prv-muted); } /* Checklist */ .fdf-prv-checklist { list-style: none; margin: 1.25rem 0 !important; padding: 0 !important; } .fdf-prv-checklist li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.65rem 0; border-bottom: 1px solid var(--fdf-prv-border); margin: 0 !important; } .fdf-prv-checklist input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--fdf-prv-blue); flex-shrink: 0; cursor: pointer; } /* FAQ accordion */ .fdf-prv-faq { margin: 2rem 0; border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); overflow: hidden; } .fdf-prv-faq__item { border-bottom: 1px solid var(--fdf-prv-border); } .fdf-prv-faq__item:last-child { border-bottom: none; } .fdf-prv-faq__q { width: 100%; text-align: left; padding: 1rem 1.15rem; background: var(--fdf-prv-white); border: none; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--fdf-prv-text); } .fdf-prv-faq__q:hover { background: var(--fdf-prv-surface); } .fdf-prv-faq__icon { font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform 0.2s; flex-shrink: 0; } .fdf-prv-faq__item.is-open .fdf-prv-faq__icon { transform: rotate(45deg); } .fdf-prv-faq__a { display: none; padding: 0 1.15rem 1.15rem; font-size: 0.9375rem; color: var(--fdf-prv-muted); } .fdf-prv-faq__item.is-open .fdf-prv-faq__a { display: block; } /* Alerts */ .fdf-prv-alert { padding: 1rem 1.15rem; border-radius: var(--fdf-prv-radius-sm); margin: 1.5rem 0; font-size: 0.9375rem; border-left: 4px solid; } .fdf-prv-alert--info { background: #f0f4ff; border-left-color: var(--fdf-prv-blue); } .fdf-prv-alert--warning { background: #fff8e6; border-left-color: #f7a800; } .fdf-prv-alert--danger { background: #fff5f5; border-left-color: var(--fdf-prv-red); } .fdf-prv-alert--success { background: #f0fdf4; border-left-color: #16a34a; } /* Callout */ .fdf-prv-callout { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 1.25rem 1.35rem; margin: 2rem 0; } .fdf-prv-callout__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--fdf-prv-muted); margin: 0 0 0.5rem; } /* Timeline */ .fdf-prv-timeline { position: relative; margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--fdf-prv-border); } .fdf-prv-timeline__item { position: relative; padding-bottom: 1.5rem; } .fdf-prv-timeline__item::before { content: ""; position: absolute; left: calc(-1.5rem - 5px); top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--fdf-prv-blue); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--fdf-prv-border); } .fdf-prv-timeline__date { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--fdf-prv-muted); } /* Compare two cols */ .fdf-prv-compare { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; } @media (min-width: 720px) { .fdf-prv-compare { grid-template-columns: 1fr 1fr; } } .fdf-prv-compare__col { padding: 1.25rem; border-radius: var(--fdf-prv-radius-sm); border: 1px solid var(--fdf-prv-border); } .fdf-prv-compare__col--bad { background: #fff5f5; } .fdf-prv-compare__col--good { background: #f0fdf4; } .fdf-prv-compare__col h4 { margin: 0 0 0.75rem; font-size: 1rem; } /* Quiz */ .fdf-prv-quiz { background: var(--fdf-prv-white); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); padding: 1.5rem; margin: 2rem 0; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-quiz__progress { height: 6px; background: var(--fdf-prv-border); border-radius: 99px; overflow: hidden; margin-bottom: 1.25rem; } .fdf-prv-quiz__progress-bar { height: 100%; background: var(--fdf-prv-blue); width: 0%; transition: width 0.25s; } .fdf-prv-quiz__qtext { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; } .fdf-prv-quiz__opts { display: flex; flex-direction: column; gap: 0.5rem; } .fdf-prv-quiz__opt { display: block; width: 100%; text-align: left; padding: 0.85rem 1rem; border: 1.5px solid var(--fdf-prv-border); border-radius: 6px; background: #fff; font-family: inherit; font-size: 0.9375rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .fdf-prv-quiz__opt:hover { border-color: #000; } .fdf-prv-quiz__result { display: none; margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--fdf-prv-radius-sm); background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); } .fdf-prv-quiz.is-done .fdf-prv-quiz__result { display: block; } .fdf-prv-quiz.is-done .fdf-prv-quiz__question { display: none; } .fdf-prv-quiz__score { font-size: 2rem; font-weight: 800; margin: 0 0 0.5rem; } /* OLD tool */ .fdf-prv-old-tool { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); padding: 1.25rem; margin: 2rem 0; } .fdf-prv-old-tool__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; } .fdf-prv-old-tool label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.35rem; } .fdf-prv-old-tool input[type="text"] { min-width: 240px; padding: 0.65rem 0.85rem; border: 1px solid var(--fdf-prv-border); border-radius: 6px; font-family: inherit; font-size: 0.9375rem; } .fdf-prv-old-tool__suggest { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fdf-prv-border); border-radius: 6px; background: #fff; max-height: 200px; overflow: auto; display: none; position: absolute; z-index: 50; width: 100%; max-width: 360px; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-old-tool__suggest.is-open { display: block; } .fdf-prv-old-tool__suggest li button { width: 100%; text-align: left; padding: 0.5rem 0.75rem; border: none; background: none; font-family: inherit; font-size: 0.875rem; cursor: pointer; } .fdf-prv-old-tool__suggest li button:hover { background: var(--fdf-prv-surface); } .fdf-prv-old-tool__wrap { position: relative; } .fdf-prv-old-map { height: 360px; border-radius: var(--fdf-prv-radius-sm); overflow: hidden; border: 1px solid var(--fdf-prv-border); margin-top: 1rem; } .fdf-prv-old-verdict { margin-top: 1rem; padding: 1rem; border-radius: var(--fdf-prv-radius-sm); font-size: 0.9375rem; display: none; } .fdf-prv-old-verdict.is-visible { display: block; } .fdf-prv-old-verdict--yes { background: #fff8e6; border: 1px solid #f7a800; } .fdf-prv-old-verdict--no { background: #f0f4ff; border: 1px solid #93a8ff; } .fdf-prv-old-verdict--unknown { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); } /* CTA band */ .fdf-prv-cta-band { background: linear-gradient(90deg, #171717 0%, #2a2a2a 100%); color: #fff; padding: clamp(32px, 5vw, 56px) 0; margin: 3rem 0 0; } .fdf-prv-cta-band .fdf-prv__inner { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; } .fdf-prv-cta-band h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: #fff; } .fdf-prv-cta-band p { margin: 0.35rem 0 0; color: rgba(255, 255, 255, 0.82); max-width: 48ch; font-size: 0.9375rem; } /* Related */ .fdf-prv-related { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--fdf-prv-border); } .fdf-prv-related__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; } /* Tabs (personnes vulnérables) */ .fdf-prv-tabs { margin: 2rem 0; } .fdf-prv-tabs__nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .fdf-prv-tabs__btn { padding: 0.5rem 1rem; border-radius: 99px; border: 1.5px solid var(--fdf-prv-border); background: #fff; font-family: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; } .fdf-prv-tabs__btn.is-active { background: #000; color: #fff; border-color: #000; } .fdf-prv-tabs__panel { display: none; padding: 1.25rem; border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); background: var(--fdf-prv-surface); } .fdf-prv-tabs__panel.is-active { display: block; } /* Filter chips (aides) */ .fdf-prv-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; } .fdf-prv-filter { padding: 0.4rem 0.85rem; border-radius: 99px; border: 1px solid var(--fdf-prv-border); background: #fff; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; } .fdf-prv-filter.is-active { background: var(--fdf-prv-blue); color: #fff; border-color: var(--fdf-prv-blue); } .fdf-prv-aid-card { transition: opacity 0.2s; } .fdf-prv-aid-card.is-hidden { display: none; } /* Expandable cards */ .fdf-prv-expand { border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); margin-bottom: 0.75rem; overflow: hidden; background: #fff; } .fdf-prv-expand__head { width: 100%; text-align: left; padding: 1rem 1.15rem; border: none; background: var(--fdf-prv-surface); font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .fdf-prv-expand__body { display: none; padding: 1rem 1.15rem 1.15rem; font-size: 0.9375rem; color: var(--fdf-prv-muted); border-top: 1px solid var(--fdf-prv-border); } .fdf-prv-expand.is-open .fdf-prv-expand__body { display: block; } /* Table */ .fdf-prv-table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); } .fdf-prv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .fdf-prv-table th, .fdf-prv-table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--fdf-prv-border); } .fdf-prv-table th { background: var(--fdf-prv-surface); font-weight: 700; } .fdf-prv-table tr:last-child td { border-bottom: none; } /* SVG figures */ .fdf-prv-figure { margin: 2rem 0; padding: 1.25rem; background: var(--fdf-prv-white); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); overflow: auto; } .fdf-prv-figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } .fdf-prv-figure__cap { font-size: 0.8125rem; color: var(--fdf-prv-muted); margin-top: 0.75rem; text-align: center; font-style: italic; } /* Emergency strip */ .fdf-prv-emergency { position: sticky; bottom: 0; z-index: 40; background: var(--fdf-prv-red); color: #fff; padding: 0.65rem 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; margin: 2rem calc(-1 * clamp(16px, 4vw, 40px)) -2rem; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); } .fdf-prv-emergency a { color: #fff !important; text-decoration: underline !important; font-weight: 700; } /* Bloc urgences (mention type, réutilisable) */ .fdf-prv-urg { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 2rem 0; padding: 1.25rem; border-radius: var(--fdf-prv-radius); background: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%); border: 1px solid #ffd6d6; } @media (min-width: 720px) { .fdf-prv-urg { grid-template-columns: repeat(3, 1fr); } } .fdf-prv-urg__num { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); } .fdf-prv-urg__num strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; } .fdf-prv-urg__num small { font-size: 0.75rem; color: var(--fdf-prv-muted); text-transform: uppercase; letter-spacing: 0.6px; } .fdf-prv-urg__num a { color: var(--fdf-prv-text); text-decoration: none; } /* KPI inline */ .fdf-prv-kpi { display: inline-flex; flex-direction: column; background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 0.65rem 0.95rem; margin: 0.25rem 0; } .fdf-prv-kpi strong { font-size: 1.25rem; font-weight: 800; } .fdf-prv-kpi span { font-size: 0.75rem; color: var(--fdf-prv-muted); } /* Lead intro paragraph (sous H1) */ .fdf-prv-main > .fdf-prv-intro { font-size: 1.0625rem; color: var(--fdf-prv-muted); max-width: 70ch; } /* Two-up content blocks */ .fdf-prv-two { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; } @media (min-width: 760px) { .fdf-prv-two { grid-template-columns: 1.1fr 0.9fr; } } /* Highlight box (background image-less hero alt) */ .fdf-prv-band { background: var(--fdf-prv-surface); border-radius: var(--fdf-prv-radius); padding: 1.5rem; margin: 2rem 0; border: 1px solid var(--fdf-prv-border); } .fdf-prv-band--dark { background: var(--fdf-prv-anthracite); color: #fff; border-color: transparent; } .fdf-prv-band--dark a { color: #93a8ff; } /* Pictograms inline (4-up) */ .fdf-prv-picto-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 1.25rem 0; } @media (min-width: 720px) { .fdf-prv-picto-row { grid-template-columns: repeat(4, 1fr); } } .fdf-prv-picto { background: #fff; border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 1rem; text-align: center; } .fdf-prv-picto svg { display: block; margin: 0 auto 0.5rem; } .fdf-prv-picto__title { font-size: 0.875rem; font-weight: 700; margin: 0.25rem 0; } .fdf-prv-picto__desc { font-size: 0.8125rem; color: var(--fdf-prv-muted); margin: 0; } /* Tag inline */ .fdf-prv-tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0.25rem 0.55rem; border-radius: 99px; background: var(--fdf-prv-surface); color: var(--fdf-prv-text); margin-right: 0.25rem; } .fdf-prv-tag--blue { background: #e0e7ff; color: var(--fdf-prv-blue); } .fdf-prv-tag--red { background: #fee2e2; color: var(--fdf-prv-red); } .fdf-prv-tag--green { background: #dcfce7; color: #166534; } .fdf-prv-tag--yellow { background: #fef3c7; color: #92400e; } /* Hub moyens de lutte — widget interactif (CSS partagé avec /moyens-de-lutte/) */ .fdf-wrap .fdf-d-url { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; } .fdf-wrap .fdf-d-url a { font-weight: 500; } .fdf-wrap .fdf-btn.fdf-btn--primary { background: var(--fdf-prv-blue, #0200ff); color: #fff; border-color: var(--fdf-prv-blue, #0200ff); font-weight: 600; } .fdf-wrap .fdf-btn.fdf-btn--primary:hover { filter: brightness(1.08); text-decoration: none; } .fdf-wrap .tag-surv { background: #eaf3de; color: #27500a; } /* ============================================================= * Fiches « moyens de lutte » — gabarit niveau 3 * (article single sous /moyens-de-lutte/{cat}/{slug}/) * ============================================================= */ .fdf-moyen { max-width: 800px; margin: 0 auto; padding: 1rem; font-family: var(--font-sans); color: var(--color-text-primary); line-height: 1.65; } .fdf-moyen p { margin: 0 0 1em; } .fdf-moyen a { color: var(--color-text-info); text-decoration: underline; text-underline-offset: 2px; } .fdf-moyen__hero { background: var(--color-background-info); padding: 2rem; border-radius: var(--border-radius-lg); margin-bottom: 1.5rem; } .fdf-moyen__kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-info); font-weight: 600; } .fdf-moyen__hero h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; margin: 0.35rem 0 0.5rem; line-height: 1.2; letter-spacing: -0.01em; } .fdf-moyen__lead { font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); margin: 0.5rem 0 1.25rem; } .fdf-moyen__hero-actions { display: flex; gap: 8px; flex-wrap: wrap; } .fdf-moyen__hero-actions .fdf-btn, .fdf-moyen__hero-actions .fdf-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 500; border-radius: var(--border-radius-md); text-decoration: none; font-family: var(--font-sans); cursor: pointer; transition: filter 0.15s, background 0.15s; } .fdf-moyen__hero-actions .fdf-btn { background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-primary); } .fdf-moyen__hero-actions .fdf-btn-primary { background: var(--color-background-primary); border: 0.5px solid var(--color-border-info); color: var(--color-text-info); } .fdf-moyen__hero-actions .fdf-btn-primary:hover { filter: brightness(0.97); } .fdf-moyen__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 1.5rem 0; } .fdf-moyen__stats > div { background: var(--color-background-secondary); padding: 1rem; border-radius: var(--border-radius-md); text-align: center; } .fdf-moyen__stats strong { display: block; font-size: 22px; font-weight: 500; color: var(--color-text-primary); } .fdf-moyen__stats span { font-size: 12px; color: var(--color-text-secondary); } .fdf-moyen section { margin: 2rem 0; } .fdf-moyen h2 { font-size: 24px; font-weight: 500; margin: 0 0 1rem; letter-spacing: -0.005em; } .fdf-moyen h3 { font-size: 18px; font-weight: 500; margin: 1.5rem 0 0.75rem; } .fdf-moyen ul, .fdf-moyen ol { padding-left: 1.25rem; margin: 0 0 1em; } .fdf-moyen li { margin-bottom: 0.3rem; } .fdf-moyen__specs-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0.5rem 0 1rem; } .fdf-moyen__specs-table th, .fdf-moyen__specs-table td { border-bottom: 0.5px solid var(--color-border-tertiary); padding: 10px 12px; text-align: left; vertical-align: top; } .fdf-moyen__specs-table th { background: var(--color-background-tertiary); font-weight: 500; width: 40%; color: var(--color-text-secondary); } .fdf-moyen__faq details { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 12px 16px; margin-bottom: 8px; background: var(--color-background-primary); } .fdf-moyen__faq summary { font-weight: 500; cursor: pointer; list-style: none; position: relative; padding-right: 1.5rem; } .fdf-moyen__faq summary::-webkit-details-marker { display: none; } .fdf-moyen__faq summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 18px; color: var(--color-text-secondary); transition: transform 0.15s; } .fdf-moyen__faq details[open] summary::after { content: "−"; } .fdf-moyen__faq details p { margin-top: 0.75rem; color: var(--color-text-secondary); font-size: 14px; } .fdf-moyen__related ul { list-style: none; padding: 0; } .fdf-moyen__related li { border-bottom: 0.5px solid var(--color-border-tertiary); padding: 0.6rem 0; } .fdf-moyen__related li:last-child { border-bottom: none; } .fdf-moyen__cta { background: var(--color-background-warning); padding: 1.5rem; border-radius: var(--border-radius-lg); text-align: center; margin-top: 2rem; } .fdf-moyen__cta h3 { margin: 0 0 0.5rem; font-size: 18px; font-weight: 600; } .fdf-moyen__cta p { margin: 0 0 1rem; color: var(--color-text-secondary); } .fdf-moyen__cta .fdf-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 14px; font-weight: 600; background: var(--color-text-warning); color: #fff; border: 0.5px solid var(--color-text-warning); border-radius: var(--border-radius-md); text-decoration: none; } .fdf-moyen__cta .fdf-btn-primary:hover { filter: brightness(1.08); } .fdf-moyen__coming { background: var(--color-background-tertiary); border-radius: var(--border-radius-md); padding: 1.5rem; color: var(--color-text-secondary); font-size: 14px; text-align: center; margin: 1.5rem 0; } /* Print */ @media print { .fdf-prv-toc, .fdf-prv-emergency, .fdf-prv-breadcrumb { display: none !important; } .fdf-prv-layout--toc { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════ FICHE MOYEN — Canadair et autres fiches détaillées Cohérent avec le design system .fdf-prv-* (tokens, typo, couleurs). Réutilise .fdf-prv-hero, .fdf-prv-card, .fdf-prv-band, .fdf-prv-cta-band et complète avec des composants spécifiques (timeline, faq, gallery…). ═══════════════════════════════════════════════════════════ */ /* * Même gabarit fiche moyen : on garde overflow-x: clip du thème (fdf-theme.css) * pour éviter tout scroll horizontal de page ; les blocs full-bleed visent 100vw max. */ /* ---------- HERO IMMERSIF (variante --fiche) ---------- */ /* * Pleine largeur viewport : renfort !important pour gagner sur le layout * contraint Gutenberg (.is-layout-constrained / max-width des wrappers). * * Filet de sécurité : si jamais un éditeur ré-imbrique le hero dans un * wp:group flow (Gutenberg perd silencieusement le className des groupes * `default`), on neutralise la `max-width: --content-size` qu'imposerait * la règle WP `:where(.is-layout-constrained) > :not(.alignfull)` sur ce * wrapper parasite. Cela garantit que le bord-à-bord du hero / CTA reste * stable même après un round-trip dans l'éditeur. */ body.fdf-page-fiche-moyen .fdf-prv-hero.fdf-prv-hero--fiche, body.fdf-page-fiche-moyen .wp-block-fdf-fiche-hero.fdf-prv-hero--fiche, .fdf-fiche-moyen-main .fdf-prv-hero.fdf-prv-hero--fiche, .entry-content.is-layout-constrained .fdf-prv-hero.fdf-prv-hero--fiche { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative; left: auto; right: auto; box-sizing: border-box !important; } .fdf-fiche-moyen-main .wp-block-group:has(> .fdf-prv-hero.fdf-prv-hero--fiche), .fdf-fiche-moyen-main .wp-block-group:has(> .wp-block-fdf-fiche-cta-band.alignfull), .entry-content.is-layout-constrained > .wp-block-group:has(> .fdf-prv-hero.fdf-prv-hero--fiche), .entry-content.is-layout-constrained > .wp-block-group:has(> .wp-block-fdf-fiche-cta-band.alignfull) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Bandeau CTA fin de fiche (alignfull) : même full-bleed */ body.fdf-page-fiche-moyen .wp-block-fdf-fiche-cta-band.alignfull, body.fdf-page-fiche-moyen section.fdf-prv-cta-band.alignfull, .fdf-fiche-moyen-main .wp-block-fdf-fiche-cta-band.alignfull, .entry-content.is-layout-constrained .wp-block-fdf-fiche-cta-band.alignfull { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative; box-sizing: border-box !important; } .fdf-prv-hero--fiche { background: linear-gradient(140deg, #050a1a 0%, #0d1f3d 35%, #1a3a6e 70%, #2c5f8f 100%); color: #fff; border-bottom: none; padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 8vw, 96px); position: relative; isolation: isolate; } .fdf-prv-hero--fiche::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 15% 85%, rgba(2, 0, 255, 0.25) 0%, transparent 55%); pointer-events: none; z-index: 1; } /* Image de fond optionnelle injectée par [fdf_fiche_hero_bg id="…"]. Vient s'intercaler entre le gradient (background-color) et les radial- gradients (::before), avec un mix-blend-mode + un voile sombre pour garder la lisibilité du titre/kicker/lead par-dessus. */ .fdf-prv-hero--fiche .fdf-prv-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.55; mix-blend-mode: luminosity; z-index: 0; pointer-events: none; } .fdf-prv-hero--fiche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 26, 0.25) 0%, rgba(5, 10, 26, 0.55) 100%); pointer-events: none; z-index: 1; } .fdf-prv-hero--fiche .fdf-prv__inner { position: relative; z-index: 2; } .fdf-prv-hero--fiche .fdf-prv-hero__kicker { color: rgba(255, 255, 255, 0.78); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 99px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 1.25rem; } .fdf-prv-hero--fiche .fdf-prv-hero__title { color: #fff; max-width: 18ch; } .fdf-prv-hero--fiche .fdf-prv-hero__lead { color: rgba(255, 255, 255, 0.86); max-width: 58ch; } .fdf-prv-hero--fiche .fdf-prv-hero__actions { margin-top: 1.5rem; } .fdf-prv-hero--fiche .fdf-prv-btn--outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(6px); } .fdf-prv-hero--fiche .fdf-prv-btn--outline:hover { border-color: #fff; color: #fff !important; background: rgba(255, 255, 255, 0.12); } /* ---------- WRAPPER ZONE CENTRALE : fond aligné sur le thème ---------- */ .fdf-prv-fiche__wrap { background: var(--fdf-bg, transparent); color: var(--fdf-prv-text); padding-bottom: clamp(48px, 8vw, 96px); position: relative; z-index: 1; } /* ---------- STATS BAND : 4 chiffres clés ---------- */ .fdf-prv-stats { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); margin: -2.5rem auto 3rem; box-shadow: var(--fdf-prv-shadow); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow: hidden; position: relative; z-index: 2; } .fdf-prv-stats__cell { padding: 1.5rem 1.25rem; text-align: center; border-right: 1px solid var(--fdf-prv-border); } .fdf-prv-stats__cell:last-child { border-right: 0; } @media (max-width: 720px) { .fdf-prv-stats__cell { border-right: 0; border-bottom: 1px solid var(--fdf-prv-border); } .fdf-prv-stats__cell:last-child { border-bottom: 0; } } .fdf-prv-stats__num { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: var(--fdf-prv-text); } .fdf-prv-stats__lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--fdf-prv-muted); margin-top: 0.5rem; font-weight: 600; } /* ---------- BODY SECTIONS ---------- */ .fdf-prv-fiche__body { padding-bottom: clamp(48px, 8vw, 96px); } .fdf-prv-fiche__body section { margin: clamp(2.5rem, 6vw, 4rem) 0; } .fdf-prv-fiche__body section:first-child { margin-top: 0; } .fdf-prv-fiche__body h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 1.25rem; color: var(--fdf-prv-text); } .fdf-prv-fiche__body h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin: 1.5rem 0 0.5rem; color: var(--fdf-prv-text); } .fdf-prv-fiche__body h4 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; } .fdf-prv-fiche__body p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--fdf-prv-text); } .fdf-prv-fiche__body p.fdf-prv-fiche__lead { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.55; color: var(--fdf-prv-text); font-weight: 400; } .fdf-prv-fiche__body ul, .fdf-prv-fiche__body ol { margin: 0 0 1rem; padding-left: 1.4rem; } .fdf-prv-fiche__body li { margin-bottom: 0.5rem; line-height: 1.6; } .fdf-prv-fiche__body a { color: var(--fdf-prv-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .fdf-prv-fiche__body a:hover { text-decoration: none; border-bottom-width: 2px; } /* ---------- FIGURE & PLACEHOLDER ---------- */ .fdf-prv-fiche__figure { margin: 1.75rem 0; } /* Variante utilisée dans les blocs split (image jointe à une carte texte) : supprime les marges pour que les deux colonnes s'alignent visuellement. */ .fdf-prv-fiche__figure--flush { margin: 0; } .fdf-prv-fiche__figure img { width: 100%; height: auto; border-radius: var(--fdf-prv-radius); display: block; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-fiche__figure figcaption { font-size: 0.8125rem; color: var(--fdf-prv-muted); margin-top: 0.65rem; text-align: center; font-style: italic; } .fdf-prv-fiche__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--fdf-prv-placeholder-bg); background-image: var(--fdf-prv-placeholder-bg), repeating-linear-gradient(45deg, transparent 0 12px, var(--fdf-prv-placeholder-stripe) 12px 13px); background-blend-mode: multiply; color: var(--fdf-prv-placeholder-fg); border: 1px dashed var(--fdf-prv-placeholder-border); border-radius: var(--fdf-prv-radius); min-height: 240px; padding: 1.5rem; text-align: center; font-size: 0.8125rem; font-weight: 500; } .fdf-prv-fiche__placeholder i { font-size: 2.5rem; color: var(--fdf-prv-placeholder-icon); } /* ---------- SPLIT 2 COLONNES (réutilise .fdf-prv-two) ---------- */ .fdf-prv-fiche__split { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; } @media (min-width: 760px) { .fdf-prv-fiche__split { grid-template-columns: 1fr 1fr; gap: 2rem; } .fdf-prv-fiche__split--reverse > :first-child { order: 2; } } .fdf-prv-fiche__split-card { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); padding: 1.5rem; } .fdf-prv-fiche__split-card h3 { margin-top: 0; color: var(--fdf-prv-text); } .fdf-prv-fiche__split-card p:last-child { margin-bottom: 0; } /* ---------- ENCADRÉ "LE SAVIEZ-VOUS" ---------- */ .fdf-prv-fiche__callout { background: var(--fdf-prv-callout-gradient); border: 1px solid var(--fdf-prv-callout-border); border-left: 4px solid var(--fdf-prv-blue); border-radius: var(--fdf-prv-radius); padding: 1.5rem 1.75rem; margin: 2rem 0; } .fdf-prv-fiche__callout-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fdf-prv-blue); font-weight: 800; margin: 0 0 0.5rem; } .fdf-prv-fiche__callout-label i { font-size: 1rem; } .fdf-prv-fiche__callout p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fdf-prv-text); } /* ---------- TIMELINE ---------- */ .fdf-prv-fiche__timeline { margin: 2rem 0; display: grid; gap: 0; position: relative; padding-left: 0; } .fdf-prv-fiche__timeline::before { content: ""; position: absolute; left: 0.875rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: linear-gradient(180deg, var(--fdf-prv-blue) 0%, var(--fdf-prv-border) 100%); } .fdf-prv-fiche__timeline-item { position: relative; padding: 0.75rem 0 0.75rem 2.5rem; } .fdf-prv-fiche__timeline-item::before { content: ""; position: absolute; left: 0.375rem; top: 1.05rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--fdf-prv-surface); } .fdf-prv-fiche__timeline-year { font-size: 0.75rem; font-weight: 800; color: var(--fdf-prv-blue); letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 0.15rem; } .fdf-prv-fiche__timeline-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fdf-prv-text); } /* ---------- TABLE SPECS ---------- */ .fdf-prv-fiche__specs { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0; background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); overflow: hidden; } .fdf-prv-fiche__specs th, .fdf-prv-fiche__specs td { padding: 0.875rem 1.25rem; text-align: left; font-size: 0.9375rem; border-bottom: 1px solid var(--fdf-prv-border); vertical-align: top; } .fdf-prv-fiche__specs th { background: var(--fdf-prv-surface); font-weight: 700; width: 45%; color: var(--fdf-prv-text); } .fdf-prv-fiche__specs td { color: var(--fdf-prv-muted); } .fdf-prv-fiche__specs tr:last-child th, .fdf-prv-fiche__specs tr:last-child td { border-bottom: 0; } /* ---------- ANECDOTES (réutilise .fdf-prv-card-grid avec variante) ---------- */ .fdf-prv-fiche__anecdotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .fdf-prv-fiche__anecdote { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius); padding: 1.5rem; box-shadow: var(--fdf-prv-shadow); transition: transform 0.2s, box-shadow 0.2s; } .fdf-prv-fiche__anecdote:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(10, 10, 10, 0.1); } .fdf-prv-fiche__anecdote-date { display: inline-block; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--fdf-prv-red); padding: 0.25rem 0.55rem; background: var(--fdf-prv-anecdote-chip-bg); border-radius: 99px; margin-bottom: 0.75rem; } .fdf-prv-fiche__anecdote h4 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.3; color: var(--fdf-prv-text); } .fdf-prv-fiche__anecdote p { font-size: 0.9375rem; line-height: 1.55; color: var(--fdf-prv-muted); margin: 0; } /* ---------- COMPARAISON SIDE-BY-SIDE ---------- */ .fdf-prv-fiche__compare { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; } @media (min-width: 720px) { .fdf-prv-fiche__compare { grid-template-columns: 1fr auto 1fr; align-items: stretch; } } .fdf-prv-fiche__compare-card { padding: 1.75rem; border-radius: var(--fdf-prv-radius); border: 1px solid var(--fdf-prv-border); background: var(--fdf-prv-surface); } .fdf-prv-fiche__compare-card--blue { background: var(--fdf-prv-compare-blue-gradient); border-color: var(--fdf-prv-compare-blue-border); } .fdf-prv-fiche__compare-card--red { background: var(--fdf-prv-compare-red-gradient); border-color: var(--fdf-prv-compare-red-border); } .fdf-prv-fiche__compare-card h4 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.3px; } .fdf-prv-fiche__compare-card--blue h4 { color: var(--fdf-prv-blue); } .fdf-prv-fiche__compare-card--red h4 { color: var(--fdf-prv-red); } .fdf-prv-fiche__compare-card ul { list-style: none; margin: 0; padding: 0; } .fdf-prv-fiche__compare-card li { padding: 0.5rem 0; font-size: 0.9375rem; line-height: 1.5; border-bottom: 1px solid var(--fdf-prv-compare-li-border); position: relative; padding-left: 1.5rem; } .fdf-prv-fiche__compare-card li::before { content: "›"; position: absolute; left: 0; top: 0.5rem; color: var(--fdf-prv-muted); font-weight: 700; } .fdf-prv-fiche__compare-card li:last-child { border-bottom: 0; } .fdf-prv-fiche__compare-vs { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; color: var(--fdf-prv-muted); text-transform: uppercase; padding: 0 0.5rem; } @media (max-width: 719px) { .fdf-prv-fiche__compare-vs { padding: 0.5rem 0; } } /* ---------- GALERIE (responsive masonry-like) ---------- */ .fdf-prv-fiche__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; } .fdf-prv-fiche__gallery img, .fdf-prv-fiche__gallery .fdf-prv-fiche__placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fdf-prv-radius-sm); min-height: 0; transition: transform 0.25s, box-shadow 0.25s; } .fdf-prv-fiche__gallery img { cursor: pointer; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-fiche__gallery img:hover { transform: scale(1.02); box-shadow: 0 14px 40px rgba(10, 10, 10, 0.15); } .fdf-prv-fiche__gallery .fdf-prv-fiche__placeholder { padding: 0.75rem; font-size: 0.75rem; } .fdf-prv-fiche__gallery .fdf-prv-fiche__placeholder i { font-size: 1.5rem; } /* ---------- VIDEO EMBED ---------- */ .fdf-prv-fiche__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--fdf-prv-radius); margin: 1.5rem 0; background: #000; box-shadow: var(--fdf-prv-shadow); } .fdf-prv-fiche__video iframe, .fdf-prv-fiche__video > .fdf-prv-fiche__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--fdf-prv-radius); } .fdf-prv-fiche__video > .fdf-prv-fiche__placeholder { background: linear-gradient(135deg, #171717 0%, #2a2a2a 100%); color: rgba(255, 255, 255, 0.65); border-color: rgba(255, 255, 255, 0.15); } .fdf-prv-fiche__video > .fdf-prv-fiche__placeholder i { color: rgba(255, 255, 255, 0.55); } /* ---------- FAQ ACCORDION ---------- */ .fdf-prv-fiche__faq { margin: 1.5rem 0; } .fdf-prv-fiche__faq details { background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); padding: 1rem 1.25rem; margin-bottom: 0.5rem; transition: border-color 0.2s, box-shadow 0.2s; } .fdf-prv-fiche__faq details[open] { border-color: var(--fdf-prv-blue); box-shadow: var(--fdf-prv-faq-open-shadow); } .fdf-prv-fiche__faq summary { font-weight: 700; cursor: pointer; font-size: 1rem; list-style: none; position: relative; padding-right: 2rem; color: var(--fdf-prv-text); line-height: 1.4; } .fdf-prv-fiche__faq summary::-webkit-details-marker { display: none; } .fdf-prv-fiche__faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--fdf-prv-blue); transition: transform 0.2s; line-height: 1; } .fdf-prv-fiche__faq details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(0deg); } .fdf-prv-fiche__faq details p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--fdf-prv-muted); } /* ---------- RELATED ---------- */ .fdf-prv-fiche__related { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--fdf-prv-border); } .fdf-prv-fiche__related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 640px) { .fdf-prv-fiche__related ul { grid-template-columns: 1fr 1fr; } } .fdf-prv-fiche__related li { margin: 0; } .fdf-prv-fiche__related a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--fdf-prv-surface); border: 1px solid var(--fdf-prv-border); border-radius: var(--fdf-prv-radius-sm); color: var(--fdf-prv-text); font-weight: 600; font-size: 0.9375rem; text-decoration: none !important; border-bottom: 1px solid var(--fdf-prv-border) !important; transition: border-color 0.2s, transform 0.15s; } .fdf-prv-fiche__related a:hover { border-color: var(--fdf-prv-blue) !important; color: var(--fdf-prv-blue); transform: translateX(2px); } .fdf-prv-fiche__related a::after { content: "→"; color: var(--fdf-prv-blue); font-weight: 700; flex-shrink: 0; }