:root {
        --theme-primary: #004e98;
        --theme-primary-hover: #003a72;
        --theme-accent: #16a34a;
        --theme-accent-hover: #15803d;
        --theme-footer-bg: #0b1a33;
        --theme-footer-cta: #ffd700;
        --theme-footer-cta-hover: #e6c200;
        --theme-hero-from: #0f172a;
        --theme-hero-via: #1e293b;
        --theme-hero-to: #020617;
        --theme-section-muted: #f8fafc;
        --theme-section-accent: #ecf8f1;
        --theme-text-on-primary: #ffffff;
        
        --theme-text-on-footer: #ffffff;
        --theme-text-on-hero: #ffffff;
        --theme-text-on-accent: #ffffff;
        --theme-text-on-footer-cta: #0f172a;
        --theme-geo-hero-bg: #0b1a33;
        --theme-hero-subtitle: #d1dfec;
        --theme-hero-kicker: #ffd700;
        --theme-hero-kicker-hover: #e6c200;
        --theme-text-on-hero-kicker: #0f172a;
        --theme-hero-strip-bg: #f1f9f4;
        --theme-hero-strip-text: #0b1a33;
        --theme-primary-surface: #f0f4f9;
        --theme-accent-foreground: #0a4921;
        --theme-accent-border: #c5e8d2;
        --theme-accent-surface-hover: #e3f4e9;
        --theme-link-on-dark: #ffffff;
        --theme-link-on-dark-hover: #ffd700;
        --theme-link-on-primary: #ffffff;
        --theme-link-on-primary-hover: #ffd700;
        --theme-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
        /* Alias legacy (anciennes valeurs BDD theme_preset) */
        --brand-primary: var(--theme-primary);
        --brand-accent: var(--theme-accent);
    }

    /* Footprints empreintes visuelles — variation par layout sans patch CSS local. */
    main[data-fp] {
        --saw-section-y: 2.5rem;
        --saw-section-y-md: 3.5rem;
        --saw-section-y-lg: 5rem;
        --saw-card-radius: 0.75rem;
        --saw-grid-gap: 1.5rem;
        --saw-kicker-size: 0.6875rem;
        --saw-kicker-tracking: 0.14em;
        --saw-prose-leading: 1.65;
    }
    main[data-fp] .saw-prose {
        line-height: var(--saw-prose-leading);
    }
    main[data-fp] .saw-section-kicker,
    main[data-fp] [class*="saw-section-kicker"] {
        letter-spacing: var(--saw-kicker-tracking);
        font-size: var(--saw-kicker-size);
    }
    main[data-fp] .site-container-wide > section {
        padding-top: var(--saw-section-y);
        padding-bottom: var(--saw-section-y);
    }
    @media (min-width: 768px) {
        main[data-fp] .site-container-wide > section {
            padding-top: var(--saw-section-y-md);
            padding-bottom: var(--saw-section-y-md);
        }
    }
    @media (min-width: 1024px) {
        main[data-fp] .site-container-wide > section {
            padding-top: var(--saw-section-y-lg);
            padding-bottom: var(--saw-section-y-lg);
        }
    }
    main[data-fp="fp_service_v1"] { --saw-grid-gap: 1.5rem; }
    main[data-fp="fp_city_v1"]    { --saw-grid-gap: 1.25rem; }
    /* Tous layouts footprint : cadre hauteur fixe unique, image pleine largeur (recadrage vertical si besoin). */
    main[data-fp] {
        --saw-layout-media-h: 20.8rem; /* mobile ~333px */
    }
    @media (min-width: 1024px) {
        main[data-fp] {
            --saw-layout-media-h: 26rem; /* desktop 416px */
        }
    }
    /* Sections split : cadre hauteur fixe + image cover (tous footprints, sauf hero geo) */
    main[data-fp] .saw-layout-media-frame:not(.saw-card-media-frame),
    main[data-fp] .saw-city-layout-media-frame:not(.saw-card-media-frame) {
        height: var(--saw-layout-media-h) !important;
        min-height: var(--saw-layout-media-h);
        max-height: var(--saw-layout-media-h);
        aspect-ratio: auto !important;
        overflow: hidden;
        align-items: stretch;
    }
    main[data-fp] .saw-layout-media,
    main[data-fp] .saw-city-layout-media {
        display: block;
        width: 100%;
        height: 100% !important;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* Hero geo (ville) : ratio naturel dans le split mobile / desktop */
    .saw-hero-split-mobile .saw-layout-media-frame,
    .saw-hero-split-desktop .saw-layout-media-frame {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        align-items: center !important;
    }
    .saw-hero-split-mobile .saw-layout-media,
    .saw-hero-split-desktop .saw-layout-media {
        height: auto !important;
        max-height: none;
        object-fit: unset;
    }
    /* Cartes grille (symptômes, services…) : ratio 16/9 comme avant */
    main[data-fp] .saw-card-media {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
    }

    /* Placeholders CSS (couleur thème Style) — remplace les SVG /media/placeholders */
    .saw-media-placeholder {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }
    main[data-fp] .saw-media-placeholder.saw-layout-media,
    main[data-fp] .saw-media-placeholder.saw-city-layout-media {
        display: block;
        width: 100%;
        height: 100% !important;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
    }
    main[data-fp] .saw-media-placeholder.saw-card-media {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
    }
    /* Hubs service / statiques sans empreinte layout (pas de data-fp sur <main>) :
       hub-image-text, page-blocks, page-body-blocks, site.page — pas les cartes (.saw-card-media*). */
    main:not([data-fp]) {
        --saw-layout-media-h: 20.8rem; /* mobile ~333px */
    }
    @media (min-width: 768px) {
        main:not([data-fp]) {
            --saw-layout-media-h: 23.4rem; /* tablette ~374px */
        }
    }
    @media (min-width: 1024px) {
        main:not([data-fp]) {
            --saw-layout-media-h: 26rem; /* desktop 416px */
        }
    }
    main:not([data-fp]) .saw-layout-media-frame:not(.saw-card-media-frame),
    main:not([data-fp]) .saw-city-layout-media-frame:not(.saw-card-media-frame) {
        height: var(--saw-layout-media-h) !important;
        min-height: var(--saw-layout-media-h);
        max-height: var(--saw-layout-media-h);
        aspect-ratio: auto !important;
        overflow: hidden;
        align-items: stretch;
    }
    main:not([data-fp]) .saw-layout-media,
    main:not([data-fp]) .saw-city-layout-media {
        display: block;
        width: 100%;
        height: 100% !important;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
    }

    main[data-fp="fp_dep_v1"]     { --saw-card-radius: 0.875rem; --saw-grid-gap: 1.25rem; }
    main[data-fp="fp_dep_v2"]     { --saw-card-radius: 1rem; --saw-grid-gap: 1.5rem; --saw-section-y-lg: 5.5rem; }
    main[data-fp="fp_home_v1"]    { --saw-section-y-lg: 5.5rem; }

    /* modèle typography & spacing overrides — text-xl md:text-3xl */
    h2 {
        font-size: 1.25rem !important; /* text-xl */
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    @media (min-width: 768px) {
        h2 {
            font-size: 1.875rem !important; /* text-3xl */
            line-height: 1.2 !important;
        }
    }

    /* Blog listing — titres cartes (18px, neutralise le h2 global modèle) */
    h2.blog-card__title {
        font-size: 1.125rem !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
    }

    .saw-section,
    .saw-section-lg {
        padding-top: 2.5rem !important; /* py-10 */
        padding-bottom: 2.5rem !important;
    }
    @media (min-width: 768px) {
        .saw-section,
        .saw-section-lg {
            padding-top: 3.5rem !important; /* py-14 */
            padding-bottom: 3.5rem !important;
        }
    }
    @media (min-width: 1024px) {
        .saw-section,
        .saw-section-lg {
            padding-top: 5rem !important; /* py-20 */
            padding-bottom: 5rem !important;
        }
    }

    .saw-kicker {
        display: inline-block;
        color: var(--theme-primary);
        font-size: 0.875rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 1rem;
    }

    /* Force rounded-xl on all buttons that should be modèle style */
    .rounded-full:not(.site-header-phone),
    .rounded-lg:not(.site-header-phone),
    .rounded-2xl:not(.site-header-phone) {
        border-radius: 0.75rem !important; /* 12px = rounded-xl */
    }

    /* modèle button hovers — liens/boutons uniquement (pas les sections CTA pleine largeur) */
    a.bg-saw-gold:hover,
    button.bg-saw-gold:hover {
        background-color: var(--theme-hero-kicker-hover, #eac400) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    a.bg-saw-blue:hover,
    button.bg-saw-blue:hover {
        background-color: var(--theme-primary-hover) !important;
    }

    html { font-size: 16px; overflow-x: clip; max-width: 100%; }

    body {
        font-family: var(--theme-font);
        font-size: 1rem;
        line-height: 1.5;
        overflow-x: clip;
        max-width: 100%;
    }

    main {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    @media (max-width: 767px) {
        .saw-prose :where(p, li, td, th, a, blockquote, h1, h2, h3, h4, h5, h6) {
            overflow-wrap: anywhere;
            word-wrap: break-word;
        }

        .saw-prose :where(pre, code) {
            white-space: pre-wrap;
            word-break: break-word;
        }

        .saw-prose :where(table) {
            display: block;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .saw-prose :where(img, video, iframe, svg) {
            max-width: 100%;
            height: auto;
        }
    }

    /**
     * Corps éditorial modèle (fp_dept_long_v1) — 16px / line-height 1.75.
     * Ne pas utiliser prose-lg (18px) sur les pages alignées modèle.
     */
    .saw-prose {
        font-family: var(--theme-font);
        font-size: 1rem;
        line-height: 1.75;
        color: rgb(51 65 85);
        max-width: none;
    }
    .saw-prose :where(p) {
        font-size: 1rem;
        line-height: 1.75;
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }
    .saw-prose :where(p:first-child) { margin-top: 0; }
    .saw-prose :where(p:last-child) { margin-bottom: 0; }
    .saw-prose :where(strong, b) { font-weight: 700; color: rgb(15 23 42); }
    .saw-prose :where(a) {
        color: var(--theme-primary);
        font-weight: 600;
        text-decoration: none;
    }
    .saw-prose :where(a:hover) { text-decoration: underline; }
    .saw-prose :where(ul, ol) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-left: 1.625em;
    }
    .saw-prose :where(ul) { list-style-type: disc; }
    .saw-prose :where(ol) { list-style-type: decimal; }
    .saw-prose :where(li) { margin-top: 0.5em; margin-bottom: 0.5em; }
    .saw-prose :where(li)::marker { color: rgb(100 116 139); }
    /* Blog — listes à puces (preflight Tailwind les masque sans list-style) */
    .saw-blog-prose.saw-prose :where(ul, ol) {
        margin-top: 1.25em;
        margin-bottom: 1.5em;
        padding-left: 1.75em;
    }
    .saw-blog-prose.saw-prose :where(ul) { list-style-type: disc; }
    .saw-blog-prose.saw-prose :where(ol) { list-style-type: decimal; }
    .saw-blog-prose.saw-prose :where(ul > li)::marker {
        color: var(--theme-primary);
    }
    .saw-blog-prose.saw-prose :where(ol > li)::marker {
        color: var(--theme-primary);
        font-weight: 700;
    }
    .saw-blog-prose.saw-prose :where(li) {
        margin-top: 0.625em;
        margin-bottom: 0.625em;
        padding-left: 0.35em;
    }
    .saw-blog-prose.saw-prose :where(ul ul, ol ol, ul ol, ol ul) {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }


    /* Lead capture layout_service : dégradé bleu modèle (réf. vidange-fosse-septique) */
    .saw-service-lead-bg {
        background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-hover));
    }

    /* Sous-titres / chapôs (FAQ, étapes sombres) — modèle text-[1.05rem] */
    .saw-lead {
        font-size: 1.05rem;
        line-height: 1.625;
    }

    /* Prose sur fond sombre (#0b1121, CTA) */
    .saw-prose--invert,
    .saw-prose.saw-prose--invert {
        color: rgba(255, 255, 255, 0.85);
    }
    .saw-prose--invert :where(p),
    .saw-prose.saw-prose--invert :where(p) {
        font-size: 1.05rem;
        line-height: 1.625;
        color: rgba(255, 255, 255, 0.85);
    }
    .saw-prose--invert :where(a),
    .saw-prose.saw-prose--invert :where(a) {
        color: #ffffff;
        font-weight: 600;
    }

    /* Une seule police sur tout le site (titres, menus, blocs prose, formulaires) */
    .prose {
        font-family: var(--theme-font);
    }
    .prose :where(p, h1, h2, h3, h4, h5, h6, li, a, strong, em, blockquote, td, th, figcaption) {
        font-family: inherit;
    }

    /* Header — plus large que le contenu (menu logo ↔ appel) */
    .site-container {
        width: 100%;
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    @media (min-width: 640px) {
        .site-container { padding-left: 1.5rem; padding-right: 1.5rem; }
    }
    @media (min-width: 1280px) {
        .site-container { padding-left: 1.25rem; padding-right: 1.25rem; }
    }
    @media (min-width: 1536px) {
        .site-header-inner.site-container { padding-left: 2rem; padding-right: 2rem; }
    }

    /* Contenu site — max-w-7xl (1280px), padding cohérent (réf. modèle-layout sections) */
    .site-container-wide {
        width: 100%;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    @media (min-width: 640px) {
        .site-container-wide { padding-left: 1.5rem; padding-right: 1.5rem; }
    }
    @media (min-width: 1024px) {
        .site-container-wide { padding-left: 2rem; padding-right: 2rem; }
    }

    /* modèle — suit le thème admin (Style) */
    .text-saw-blue { color: var(--theme-primary) !important; }
    .bg-saw-blue { background-color: var(--theme-primary) !important; }
    .bg-saw-check { background-color: color-mix(in srgb, var(--theme-primary, #004e98) 10%, transparent) !important; }
    .bg-saw-gold { background-color: var(--theme-hero-kicker) !important; }
    
    /* Dégradé formulaire modèle (section lead capture) */
    .bg-saw-form-gradient {
        background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-primary-hover) 100%) !important;
    }
    
    /* Ombre portée style modèle pour formulaire */
    .shadow-saw-form {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    }
    .text-saw-dark { color: var(--theme-text-on-footer-cta) !important; }
    .bg-saw-dark { background-color: var(--theme-geo-hero-bg) !important; }
    .text-saw-faq-title { color: var(--theme-geo-hero-bg) !important; }

    .bg-brand-primary { background-color: var(--theme-primary) !important; }
    .text-brand-primary { color: var(--theme-primary) !important; }
    .border-brand-primary { border-color: var(--theme-primary) !important; }
    .bg-brand-accent { background-color: var(--theme-accent) !important; color: var(--theme-text-on-accent); }
    .text-brand-accent { color: var(--theme-accent) !important; }
    .text-theme-accent-foreground { color: var(--theme-accent-foreground) !important; }
    .border-theme-accent { border-color: var(--theme-accent-border) !important; }
    .bg-theme-geo-hero { background-color: var(--theme-geo-hero-bg) !important; }
    .text-theme-hero-subtitle { color: var(--theme-hero-subtitle) !important; }
    .bg-theme-hero-kicker { background-color: var(--theme-hero-kicker) !important; color: var(--theme-text-on-hero-kicker) !important; }
    .text-on-hero-kicker { color: var(--theme-text-on-hero-kicker) !important; }
    .bg-theme-primary-surface { background-color: var(--theme-primary-surface) !important; }
    .hover\:bg-theme-accent-surface:hover { background-color: var(--theme-accent-surface-hover) !important; }

    /* Hovers — remplace les couleurs modèle-layout codées en dur (tous presets admin) */
    .hover\:bg-\[\#003a72\]:hover,
    .hover\:file\:bg-\[\#003a72\]:hover::file-selector-button,
    button.hover\:bg-\[\#003a72\]:hover,
    a.hover\:bg-\[\#003a72\]:hover { background-color: var(--theme-primary-hover) !important; }
    .hover\:text-\[\#003a72\]:hover { color: var(--theme-primary-hover) !important; }
    .hover\:bg-green-700:hover,
    .hover\:bg-green-600:hover { background-color: var(--theme-accent-hover) !important; }
    .hover\:border-brand-primary:hover { border-color: var(--theme-primary) !important; }
    .hover\:bg-brand-primary:hover { background-color: var(--theme-primary-hover) !important; color: var(--theme-text-on-primary) !important; }
    .hover\:bg-brand-accent:hover { background-color: var(--theme-accent-hover) !important; color: var(--theme-text-on-accent) !important; }
    .hover\:text-brand-primary:hover { color: var(--theme-primary) !important; }
    .hover\:bg-blue-50:hover { background-color: var(--theme-primary-surface) !important; }
    .hover\:bg-\[\#e6c200\]:hover,
    .hover\:bg-yellow-300:hover { background-color: var(--theme-hero-kicker-hover) !important; }

    /* Fond / texte (bleu marine, or) → variables thème */
    .bg-\[\#0b1a33\],
    .bg-\[\#0b1121\],
    .bg-slate-950.bg-\[\#0b1a33\] { background-color: var(--theme-geo-hero-bg) !important; }
    .text-blue-100 { color: var(--theme-hero-subtitle) !important; }
    .bg-\[\#ffd700\] { background-color: var(--theme-hero-kicker) !important; }
    .text-\[\#0b1a33\],
    .text-\[\#0b1a33\]:not(.text-white) { color: var(--theme-geo-hero-bg) !important; }
    .text-\[\#0b1a33\].text-white { color: #ffffff !important; }

    /* ── Lisibilité du texte SUR les boutons d'appel (28/07) ──
       Les gabarits ecrivent « bg-[#ffd700] text-[#0b1a33] » : du sombre sur or, ce qui etait
       juste tant que le bouton restait dore. Des que le bouton prend la couleur d'urgence
       (reglage cta_uses_accent), ce texte sombre devient illisible sur du rouge. On force donc
       la couleur de texte CALCULEE pour ce fond, quelle que soit la couleur du bouton. */
    .bg-\[\#ffd700\],
    .bg-\[\#ffd700\] .text-\[\#0b1a33\],
    .text-\[\#0b1a33\].bg-\[\#ffd700\] { color: var(--theme-text-on-hero-kicker) !important; }

    /* Sur-titres ecrits en or brut : « text-[#ffd700] » n'etait pas redirige, d'ou un sur-titre
       reste dore sur un site dont toute la palette avait change. */
    .text-\[\#ffd700\] { color: var(--theme-hero-kicker) !important; }
    .bg-\[\#eef7f1\],
    [data-saw-hero-strip] { background-color: var(--theme-hero-strip-bg) !important; color: var(--theme-hero-strip-text) !important; }

    /* Fonds sombres Tailwind génériques → thème */
    .bg-slate-900 { background-color: var(--theme-geo-hero-bg) !important; }
    .bg-slate-950 { background-color: var(--theme-geo-hero-bg) !important; }

    /* Gradients Tailwind codés #0b1a33 (overlays hero mobile/desktop) */
    .from-\[\#0b1a33\] { --tw-gradient-from: var(--theme-geo-hero-bg) !important; }
    .from-\[\#0b1a33\]\/95 { --tw-gradient-from: color-mix(in srgb, var(--theme-geo-hero-bg) 95%, transparent) !important; }
    .via-\[\#0b1a33\]\/55 { --tw-gradient-via: color-mix(in srgb, var(--theme-geo-hero-bg) 55%, transparent) !important; }
    .via-\[\#0b1a33\]\/60 { --tw-gradient-via: color-mix(in srgb, var(--theme-geo-hero-bg) 60%, transparent) !important; }
    .via-\[\#0b1a33\]\/72 { --tw-gradient-via: color-mix(in srgb, var(--theme-geo-hero-bg) 72%, transparent) !important; }
    .to-\[\#0b1a33\]\/35 { --tw-gradient-to: color-mix(in srgb, var(--theme-geo-hero-bg) 35%, transparent) !important; }

    /* Overlays hero — remplace les gradients Tailwind #0b1a33 (CDN JIT les regénère) */
    .saw-hero-overlay-t {
        background-image: linear-gradient(to top, var(--theme-geo-hero-bg), color-mix(in srgb, var(--theme-geo-hero-bg) 55%, transparent), transparent) !important;
    }
    .saw-hero-overlay-r {
        background-image: linear-gradient(to right, color-mix(in srgb, var(--theme-geo-hero-bg) 95%, transparent), color-mix(in srgb, var(--theme-geo-hero-bg) 72%, transparent), color-mix(in srgb, var(--theme-geo-hero-bg) 35%, transparent)) !important;
    }
    /* Overlays empilés hero geo desktop (ex-inline rgba(11,26,51)) */
    .saw-hero-overlay-stack-a {
        background: linear-gradient(to bottom, color-mix(in srgb, var(--theme-geo-hero-bg) 20%, transparent) 0%, color-mix(in srgb, var(--theme-geo-hero-bg) 35%, transparent) 50%, color-mix(in srgb, var(--theme-geo-hero-bg) 92%, transparent) 100%) !important;
    }
    .saw-hero-overlay-stack-b {
        background: linear-gradient(to bottom, color-mix(in srgb, var(--theme-geo-hero-bg) 65%, transparent) 0%, color-mix(in srgb, var(--theme-geo-hero-bg) 58%, transparent) 50%, color-mix(in srgb, var(--theme-geo-hero-bg) 82%, transparent) 100%) !important;
    }

    .saw-hero-overlay-b {
        background-image: linear-gradient(to top, color-mix(in srgb, var(--theme-geo-hero-bg) 95%, transparent), color-mix(in srgb, var(--theme-geo-hero-bg) 60%, transparent), transparent) !important;
    }

    /* Blog — en-têtes de tableaux */
    .\[\&_thead\]\:bg-\[\#0b1a33\] thead { background-color: var(--theme-geo-hero-bg) !important; }

    /* CTA contour blanc sur bandeau primary (ville /) */
    a.border-white.text-white.hover\:bg-white:hover,
    a.hover\:bg-white.hover\:text-brand-primary:hover:hover,
    .hover\:bg-white:hover.hover\:text-brand-primary:hover {
        background-color: #ffffff !important;
        color: var(--theme-primary) !important;
    }

    /* ── Garde PRIMARY (27/07) — pendant de la garde accent ci-dessous ──────────
       28 endroits des vues écrivent « bg-brand-primary text-white » / « bg-saw-blue
       text-white » en dur. Le CSS thème étant chargé APRÈS Tailwind et hors @layer,
       ces règles gagnent sans !important pour les cas simples. Sur un thème foncé,
       --theme-text-on-primary vaut déjà #ffffff : zéro changement visuel. */
    .bg-brand-primary,
    .bg-saw-blue,
    .saw-service-lead-bg { color: var(--theme-text-on-primary); }

    .bg-brand-primary.text-white,
    .bg-saw-blue.text-white,
    .saw-service-lead-bg.text-white,
    .bg-brand-primary .text-white,
    .bg-saw-blue .text-white,
    .saw-service-lead-bg .text-white { color: var(--theme-text-on-primary) !important; }

    /* Variantes d'opacité (sous-titres, mentions) sur fond primary */
    .bg-brand-primary .text-white\/90, .bg-saw-blue .text-white\/90, .saw-service-lead-bg .text-white\/90 { color: color-mix(in srgb, var(--theme-text-on-primary) 90%, transparent) !important; }
    .bg-brand-primary .text-white\/80, .bg-saw-blue .text-white\/80, .saw-service-lead-bg .text-white\/80 { color: color-mix(in srgb, var(--theme-text-on-primary) 85%, transparent) !important; }
    .bg-brand-primary .text-white\/75, .bg-saw-blue .text-white\/75, .saw-service-lead-bg .text-white\/75 { color: color-mix(in srgb, var(--theme-text-on-primary) 85%, transparent) !important; }
    .bg-brand-primary .text-white\/70, .bg-saw-blue .text-white\/70, .saw-service-lead-bg .text-white\/70 { color: color-mix(in srgb, var(--theme-text-on-primary) 85%, transparent) !important; }

    /* bg-blue-50 en dur (encart « quelle intervention choisir ? » de l'accueil) :
       remappé comme l'est déjà hover:bg-blue-50, sinon il reste bleu pâle fixe. */
    .bg-blue-50 { background-color: var(--theme-primary-surface) !important; }

    /* Boutons accent avec texte explicite blanc dans le HTML */
    a.bg-brand-accent.text-white,
    button.bg-brand-accent.text-white { color: var(--theme-text-on-accent) !important; }
    a.bg-brand-accent.text-white:hover,
    button.bg-brand-accent.text-white:hover { background-color: var(--theme-accent-hover) !important; color: var(--theme-text-on-accent) !important; }

    /*
     * Liens dans le contenu (prose) — fond clair par défaut.
     * Les zones sombres / bandeaux primary sont listées plus bas (priorité hover).
     */
    .prose :where(a),
    .prose-slate :where(a),
    .city-contact-card__copy a,
    .legal-intro-prose a,
    .legal-section-body a {
        color: var(--theme-primary) !important;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.15s ease;
    }
    .prose :where(a):hover,
    .prose-slate :where(a):hover,
    .city-contact-card__copy a:hover,
    .legal-intro-prose a:hover,
    .legal-section-body a:hover {
        color: var(--theme-primary-hover) !important;
    }

    a.saw-tel-link {
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .bg-slate-900 a.saw-tel-link,
    .bg-\[\#0b1a33\] a.saw-tel-link,
    .text-white\/80 a.saw-tel-link,
    .text-white\/90 a.saw-tel-link {
        color: var(--theme-hero-kicker, #ffd700) !important;
    }

    /* Fonds sombres : liens clairs (process ville, hero sombre, footer contenu…) */
    .city-layout-process-dark .prose :where(a),
    .saw-prose-on-dark .prose :where(a),
    .saw-prose-on-dark.prose :where(a),
    .prose.prose-invert :where(a),
    .bg-brand-primary .prose :where(a),
    .saw-prose-on-primary .prose :where(a),
    .saw-prose-on-primary.prose :where(a),
    .bg-theme-geo-hero .prose :where(a),
    .bg-theme-hero-gradient .prose :where(a),
    [data-saw-hero-dark] .prose :where(a) {
        color: var(--theme-link-on-dark) !important;
        text-decoration-color: rgba(255, 255, 255, 0.45);
    }
    .city-layout-process-dark .prose :where(a):hover,
    .saw-prose-on-dark .prose :where(a):hover,
    .saw-prose-on-dark.prose :where(a):hover,
    .prose.prose-invert :where(a):hover,
    .bg-brand-primary .prose :where(a):hover,
    .saw-prose-on-primary .prose :where(a):hover,
    .saw-prose-on-primary.prose :where(a):hover,
    .bg-theme-geo-hero .prose :where(a):hover,
    .bg-theme-hero-gradient .prose :where(a):hover,
    [data-saw-hero-dark] .prose :where(a):hover {
        color: var(--theme-link-on-dark-hover) !important;
        text-decoration-color: currentColor;
    }

    /* Liens avec classes utilitaires dans un bloc sombre (contenu IA / éditeur) */
    .city-layout-process-dark a.text-brand-primary,
    .city-layout-process-dark a.hover\:text-brand-primary:hover,
    .saw-prose-on-dark a.text-brand-primary,
    .saw-prose-on-dark a.hover\:text-brand-primary:hover,
    .bg-brand-primary .prose a.text-brand-primary,
    .bg-brand-primary .prose a.hover\:text-brand-primary:hover {
        color: var(--theme-link-on-dark) !important;
    }
    .city-layout-process-dark a.text-brand-primary:hover,
    .saw-prose-on-dark a.text-brand-primary:hover,
    .bg-brand-primary .prose a.text-brand-primary:hover {
        color: var(--theme-link-on-dark-hover) !important;
    }

    /* Sections conclusion teintées accent — liens primary lisibles */
    .bg-theme-section-accent .prose :where(a) {
        color: var(--theme-primary);
    }
    .bg-theme-section-accent .prose :where(a):hover {
        color: var(--theme-primary-hover);
    }

    /* Boutons SAW  — préférer ces classes dans les templates */
    .saw-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        text-align: center;
        border-radius: 0.75rem; /* rounded-xl — CTA modèle */
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    }
    .saw-btn-primary {
        background-color: var(--theme-primary);
        color: var(--theme-text-on-primary);
    }
    .saw-btn-primary:hover {
        background-color: var(--theme-primary-hover);
        color: var(--theme-text-on-primary);
    }
    .saw-btn-accent {
        background-color: var(--theme-accent);
        color: var(--theme-text-on-accent);
    }
    .saw-btn-accent:hover {
        background-color: var(--theme-accent-hover);
        color: var(--theme-text-on-accent);
    }
    .saw-btn-outline-primary {
        border: 2px solid var(--theme-primary);
        color: var(--theme-primary);
        background-color: transparent;
    }
    .saw-btn-outline-primary:hover {
        background-color: var(--theme-primary);
        color: var(--theme-text-on-primary);
    }
    .saw-btn-outline-white {
        border: 2px solid rgba(255, 255, 255, 0.92);
        color: #ffffff;
        background-color: transparent;
    }
    .saw-btn-outline-white:hover {
        background-color: #ffffff;
        color: var(--theme-primary);
    }
    .saw-btn-white {
        background-color: #ffffff;
        color: var(--theme-primary);
    }
    .saw-btn-white:hover {
        background-color: var(--theme-primary-surface);
        color: var(--theme-primary);
    }
    .saw-btn-gold {
        background-color: var(--theme-hero-kicker);
        color: var(--theme-text-on-hero-kicker);
    }
    .saw-btn-gold:hover {
        background-color: var(--theme-hero-kicker-hover);
        color: var(--theme-text-on-hero-kicker);
    }
    .saw-btn-ghost-hero {
        border: 1px solid rgba(255, 255, 255, 0.28);
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    .saw-btn-ghost-hero:hover {
        background-color: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }

    /* Maillage communes — « Afficher tout » / « Réduire » (réf. modèle bg-saw-blue) */
    .saw-maillage-toggle {
        background-color: var(--theme-primary);
        color: var(--theme-text-on-primary);
        border: none;
        cursor: pointer;
    }
    .saw-maillage-toggle:hover {
        opacity: 0.9;
        background-color: var(--theme-primary);
        color: var(--theme-text-on-primary);
    }
    .saw-maillage-toggle:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 2px;
    }

    /* Pastilles numérotées (process ville) */
    .saw-step-badge {
        background-color: var(--theme-accent);
        color: var(--theme-text-on-accent);
    }

    /* Formulaire devis — succès (remplace emerald fixe) */
    [data-saw-lead-capture] .bg-emerald-50 {
        background-color: var(--theme-section-accent) !important;
    }
    [data-saw-lead-capture] .border-emerald-200 {
        border-color: var(--theme-accent-border) !important;
    }
    [data-saw-lead-capture] .text-emerald-700,
    [data-saw-lead-capture] .text-emerald-800,
    [data-saw-lead-capture] .text-emerald-900 {
        color: var(--theme-accent-foreground) !important;
    }
    [data-saw-lead-capture] .bg-emerald-500 {
        background-color: var(--theme-accent) !important;
        color: var(--theme-text-on-accent) !important;
    }

    .bg-theme-footer { background-color: var(--theme-footer-bg); }
    .bg-theme-footer-cta { background-color: var(--theme-footer-cta); }
    .text-theme-footer-cta { color: var(--theme-text-on-footer-cta); }
    .hover\:bg-theme-footer-cta-hover:hover { background-color: var(--theme-footer-cta-hover) !important; }
    .bg-theme-section-muted { background-color: var(--theme-section-muted); }
    .bg-theme-section-accent { background-color: var(--theme-section-accent); }
    .bg-theme-hero-gradient {
        background: linear-gradient(to bottom right, var(--theme-hero-from), var(--theme-hero-via), var(--theme-hero-to));
    }

    [x-cloak] { display: none !important; }

    /* Navigation header — Tailwind CDN : secours si hidden/xl:flex ne s’appliquent pas */
    .nav-mobile-menu-panel { display: block; }
    @media (max-width: 1279px) {
        .site-header-bar .nav-desktop,
        .site-header-bar .nav-desktop-phone { display: none !important; }
        .site-header-bar button.nav-mobile-only { display: inline-flex !important; }
    }
    @media (min-width: 1280px) {
        .nav-mobile-menu-panel { display: none !important; }
        .site-header-bar .nav-mobile-only { display: none !important; }
        .site-header-bar .nav-desktop { display: flex !important; }
        .site-header-bar .nav-desktop-phone { display: flex !important; }
    }

    /* Barre header — alignement vertical (logo, menu, téléphone) */
    .site-header-bar {
        align-items: center;
    }

    .site-header-bar .nav-desktop {
        align-items: center;
        align-self: center;
        min-height: 1.5rem !important;
    }

    /*
     * Entrées menu desktop : hauteur de ligne (~24px) + centrage dans la barre 76px.
     * Les <details> en inline-flex évitent le décalage vertical du display:block par défaut.
     */
    .site-header-bar .nav-desktop > .site-header-menu-item,
    .site-header-bar .nav-desktop > details,
    .site-header-bar .nav-desktop > .site-header-nav-link,
    .site-header-bar .nav-desktop > a {
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        min-height: 1.5rem !important;
        margin: 0 !important;
    }

    .site-header-bar .nav-desktop > .site-header-menu-item > summary,
    .site-header-bar .nav-desktop > details > summary {
        display: inline-flex;
        align-items: center;
        margin: 0;
        line-height: 1;
    }

    /*
     * Dropdown menu services — masqués quand <details> fermé.
     * display:flex sans garde annule le comportement natif de <details> et affiche
     * tous les panneaux en permanence sous la barre de navigation.
     */
    .site-header-bar .nav-desktop details:not([open]) .site-header-dropdown-panel {
        display: none !important;
    }

    .site-header-bar .nav-desktop details[open] .site-header-dropdown-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .site-header-dropdown-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .site-header-dropdown-link {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .site-header-phone {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.25 !important;
    }

    /* Colonnes footer : titres, liens, contact (13px) */
    .site-footer-main h3,
    .site-footer-main a,
    .site-footer-main span {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Bas de footer : copyright + ressources AEO + liens légaux (12px) */
    .site-footer-bottom,
    .site-footer-bottom p,
    .site-footer-resources,
    .site-footer-resources a,
    .site-footer-legal,
    .site-footer-legal a {
        font-size: 12px;
        line-height: 1.5;
    }

    /* Liens bas de footer — soulignement (secours si Tailwind CDN omet underline) */
    .site-footer-resources a,
    .site-footer-legal a {
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }
    .site-footer-resources a:hover,
    .site-footer-legal a:hover {
        color: rgb(203 213 225) !important;
    }

    /* Boutons / liens CTA — centrage vertical cohérent sur tout le site (hors téléphone header) */
    a.inline-flex.rounded-xl:not(.site-header-phone),
    a.inline-flex.rounded-lg,
    a.inline-flex.rounded-full:not(.site-header-phone),
    button.inline-flex.rounded-xl,
    button.inline-flex.rounded-lg {
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        text-align: center;
    }

    button.rounded-xl,
    button.rounded-lg,
    a.rounded-xl.block:not(.site-header-dropdown-link),
    a.rounded-lg.block:not(.site-header-dropdown-link) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        text-align: center;
    }

    button.w-full.rounded-xl,
    button.w-full.rounded-lg,
    a.w-full.rounded-xl:not(.site-header-dropdown-link),
    a.w-full.rounded-lg:not(.site-header-dropdown-link) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Formulaire chiffrage express (contact + widgets) */
    [data-saw-lead-capture] form textarea,
    [data-saw-lead-capture] form input[type="text"],
    [data-saw-lead-capture] form input[type="tel"],
    [data-saw-lead-capture] form input[type="email"] {
        width: 100%;
        box-sizing: border-box;
    }

    [data-saw-lead-capture] form .grid {
        display: grid;
    }

    @media (min-width: 640px) {
        [data-saw-lead-capture] form .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    [data-saw-lead-capture] form button[type="button"],
    [data-saw-lead-capture] form button[type="submit"] {
        cursor: pointer;
    }

    [data-saw-lead-capture] input[type="file"]::file-selector-button {
        margin-right: 1rem;
        border-radius: 0.5rem;
        border: 0;
        background-color: var(--theme-primary);
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    [data-saw-lead-capture] input[type="file"]::file-selector-button:hover {
        background-color: var(--theme-primary-hover);
    }

    /* Bande sous le hero accueil  — dérivée du thème */
    [data-saw-hero-strip] {
        background-color: var(--theme-hero-strip-bg) !important;
        color: var(--theme-hero-strip-text) !important;
        border-top: 1px solid #e2e8f0;
    }
    [data-saw-hero-strip] p.text-xs {
        color: #64748b;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
    [data-saw-hero-strip] p.text-2xl {
        font-weight: 900;
    }

    /* Carte OSM pages ville / département */
    .saw-osm-map {
        z-index: 0;
    }
    .saw-osm-map .leaflet-control-attribution {
        font-size: 10px;
        background: rgba(255, 255, 255, 0.85) !important;
    }

    /* Fil d'Ariane modèle : scroll horizontal contenu dans la barre (pas toute la page) */
    .saw-breadcrumb-scroll {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .saw-breadcrumb-scroll::-webkit-scrollbar {
        display: none;
    }
    .saw-breadcrumb-list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /* Hero geo modèle (ville + département) : split mobile / desktop */
    @media (min-width: 1024px) {
        .saw-hero-split-mobile {
            display: none !important;
        }
        .saw-hero-split-desktop {
            display: block !important;
        }
    }
    .saw-hero-split-dept-mobile .text-\[0\.82rem\] {
        letter-spacing: 0.01em;
    }
    .saw-hero-split-dept-desktop h1 {
        text-wrap: balance;
    }
    @media (min-width: 768px) and (max-width: 1023px) {
        .saw-hero-split-mobile [role="heading"],
        .saw-hero-split-dept-mobile [role="heading"] {
            font-size: 1.65rem;
            line-height: 1.15;
        }
    }

    /* Bandeau avis clients — strip minimal */
    .saw-rating-bar .saw-star {
        font-size: 1rem;
    }
    .saw-rating-bar .saw-star--full,
    .saw-rating-bar .saw-star--half {
        color: #f59e0b;
    }
    .saw-rating-bar .saw-star--empty {
        color: #cbd5e1;
    }
    .saw-rating-bar__sep {
        width: 1px;
        height: 2rem;
        margin: 0 1.5rem;
        background-color: #e2e8f0;
        flex-shrink: 0;
    }
    .saw-rating-bar__link:hover svg {
        transform: translateX(2px);
    }
    .saw-rating-bar__link svg {
        transition: transform 0.15s ease;
    }

    /* Étoiles avis page ville */
    .saw-star-rating .saw-star--half {
        position: relative;
        display: inline-block;
    }
    .saw-star-rating .saw-star--half::after {
        content: '★';
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        overflow: hidden;
        color: rgb(251 191 36);
    }

    /* Layout département modèle : cartes liens + carte OSM */
    .dept-layout-panel {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }
    .dept-layout-map-section .saw-osm-map {
        border-radius: 0;
    }
    .dept-layout-link-grid a,
    .dept-layout-link-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .dept-layout-link-grid a:hover,
    .dept-layout-link-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    }

    /* Layout ville modèle : grille carte + fiche */
    .city-layout-map-section .saw-osm-map {
        border-radius: 0;
        display: block;
    }
    .city-layout-map-col .city-layout-map-frame {
        position: relative;
        height: 280px;
    }
    @media (min-width: 640px) {
        .city-layout-map-col .city-layout-map-frame {
            height: 360px;
        }
    }
    @media (min-width: 1024px) {
        .city-layout-map-col .city-layout-map-frame {
            height: 470px;
        }
    }
    .city-layout-map-col .city-layout-map-frame .saw-osm-map,
    .city-layout-map-col .city-layout-map-frame .leaflet-container {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    .dept-layout-map-col .dept-layout-map-frame {
        position: relative;
        height: 280px;
    }
    @media (min-width: 640px) {
        .dept-layout-map-col .dept-layout-map-frame {
            height: 360px;
        }
    }
    @media (min-width: 1024px) {
        .dept-layout-map-col .dept-layout-map-frame {
            height: 470px;
        }
    }
    .dept-layout-map-col .dept-layout-map-frame .saw-osm-map,
    .dept-layout-map-col .dept-layout-map-frame .leaflet-container {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    .city-layout-step {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .city-layout-step:hover {
        border-color: rgb(148 163 184);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }
    .city-contact-card {
        border-color: rgb(203 213 225);
    }
    .city-contact-card__icon-address {
        background-color: var(--theme-primary);
    }
    .city-contact-card__reviews svg.text-brand-accent {
        color: var(--theme-accent, #22c55e) !important;
    }
    .city-contact-card__copy :where(p, li) {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        line-height: 1.45;
    }
    .city-contact-card__details > div + div {
        margin-top: 0;
    }
    .city-contact-card__details {
        border-radius: 0.75rem;
    }
    .city-contact-card__hours {
        border-top-color: rgb(226 232 240);
        background: #fff;
    }
    .city-contact-card__hours table {
        border-collapse: collapse;
    }
    .city-contact-card__hours th,
    .city-contact-card__hours td {
        line-height: 1.15;
    }
    .city-contact-card__reviews {
        background: #fff;
    }
    @media (max-width: 1023px) {
        .city-contact-card__cta {
            grid-template-columns: 1fr;
        }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
        .city-layout-map-section,
        .dept-layout-map-section,
        .site-container-wide {
            overflow-x: clip;
        }
        .city-layout-map-grid > *,
        .dept-layout-map-grid > * {
            min-width: 0;
        }
    }

    /* Process + FAQ ville modèle */
    .city-layout-process-dark {
        background-color: var(--theme-geo-hero-bg, #0b1121);
        color: #fff;
    }
    .city-layout-process-dark .prose :where(p, li, strong) {
        color: rgb(226 232 240);
    }
    .city-layout-process-dark .prose :where(a) {
        color: var(--theme-link-on-dark) !important;
    }
    .city-layout-process-dark .prose :where(a):hover {
        color: var(--theme-link-on-dark-hover) !important;
    }
    .city-layout-process-dark .city-layout-step:hover {
        border-color: rgb(71 85 105 / 0.9);
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45);
    }

    /* CTA modèle (boutons or + fantôme) */
    .saw-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.75rem;
        min-height: 2.75rem; /* 44px touch target */
        padding: 0.875rem 1.5rem; /* py-3.5 px-6 */
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 700;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .saw-cta-btn--gold {
        background-color: var(--theme-hero-kicker);
        color: var(--theme-text-on-hero-kicker, #0b1121);
    }
    .saw-cta-btn--gold:hover {
        background-color: var(--theme-hero-kicker-hover, #eac400);
        color: var(--theme-text-on-hero-kicker, #0b1121);
    }
    .saw-cta-btn--ghost {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    .saw-cta-btn--ghost:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    /* Étapes département long (fond sombre) — réf. modèle-layout */
    .dept-layout-step-card {
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .dept-layout-step-card:hover {
        border-color: rgb(71 85 105 / 0.6);
        background-color: rgba(30, 41, 59, 0.6);
    }
    /* Layout C intro heading: match source line-height mobile/desktop */
    .dept-c-intro-h2 {
        line-height: 1.4 !important;
    }
    @media (min-width: 768px) {
        .dept-c-intro-h2 {
            line-height: 1.2 !important;
        }
    }
    .city-layout-faq details {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .city-layout-faq details:hover {
        border-color: rgb(148 163 184);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }

    /* Accordéon FAQ (accueil modèle) — chevron + marqueur natif */
    .saw-faq-accordion > summary {
        list-style: none;
    }
    .saw-faq-accordion > summary::-webkit-details-marker {
        display: none;
    }
    .saw-faq-accordion[open] > summary svg {
        transform: rotate(180deg);
    }
    .saw-faq-accordion > summary svg {
        transition: transform 0.2s ease;
    }

    /* Liens dans les réponses FAQ — touch target minimum 44px */
    .saw-faq-accordion .saw-prose :where(a) {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* ═══════════════════════════════════════════════════════════════════════
     * OPTIMISATIONS PERFORMANCE & SEO — PC / TABLETTE / MOBILE
     * Objectifs : LCP ↓  CLS = 0  INP ↓  Lisibilité ↑
     * ═══════════════════════════════════════════════════════════════════════ */

    /* 1 — Défilement fluide (ancres FAQ, sommaire, maillage) */
    html {
        scroll-behavior: smooth;
    }

    /* 2 — Header sticky : isolation du contexte de peinture */
    header {
        contain: layout style;
        will-change: auto;
    }

    /* 3 — content-visibility : rendu différé des sections hors-viewport
           Gain LCP direct sur les pages avec 6–14 sections */
    .saw-section + .saw-section,
    .saw-section + .saw-section-lg,
    .saw-section-lg + .saw-section,
    .saw-section-lg + .saw-section-lg {
        content-visibility: auto;
        contain-intrinsic-block-size: 480px;
    }

    /* 4 — Sections régulières : 48 px desktop = 96 px inter-sections (vs 128 avant)
           Rythme visuel homogène sans vides excessifs entre blocs de même couleur */
    .saw-section {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    @media (min-width: 768px) {
        .saw-section {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }
    }
    @media (min-width: 1024px) {
        .saw-section {
            padding-top: 3rem !important;
            padding-bottom: 3rem !important;
        }
    }

    /* .saw-section-lg garde son espacement généreux (hero, CTA plein-écran) */
    .saw-section-lg {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    @media (min-width: 768px) {
        .saw-section-lg {
            padding-top: 3.5rem !important;
            padding-bottom: 3.5rem !important;
        }
    }
    @media (min-width: 1024px) {
        .saw-section-lg {
            padding-top: 5rem !important;
            padding-bottom: 5rem !important;
        }
    }

    /* 5 — Mobile < 480 px : espacement ultra-compact */
    @media (max-width: 479px) {
        .saw-section,
        .saw-section-lg {
            padding-top: 1.5rem !important;
            padding-bottom: 1.5rem !important;
        }
        .site-container-wide {
            padding-left: 0.875rem;
            padding-right: 0.875rem;
        }
        .saw-cta-btn {
            padding: 0.75rem 1.125rem !important;
            font-size: 0.9375rem !important;
        }
    }

    /* 6 — Titres : text-wrap balance (évite les lignes orphelines → lisibilité + SEO) */
    h1, h2, h3, h4 {
        text-wrap: balance;
    }

    /* 7 — Corps : line-height légèrement plus aéré (lisibilité → temps passé ↑) */
    body {
        line-height: 1.625;
    }

    /* 8 — Transitions GPU-composited uniquement (transform + opacity)
           Évite les repaints coûteux sur hover des cartes */
    .dept-layout-link-card,
    .dept-layout-link-grid a,
    .city-layout-step,
    .city-layout-faq details,
    .saw-btn,
    .saw-cta-btn {
        transition-property: transform, box-shadow, border-color, background-color, opacity !important;
        transition-timing-function: ease !important;
        transition-duration: 0.18s !important;
    }
    .dept-layout-link-card:hover,
    .dept-layout-link-grid a:hover,
    .city-layout-step:hover {
        transform: translateY(-2px);
    }

    /* 9 — Cartes : containment pour isoler les reflows */
    .dept-layout-link-card,
    .city-layout-step {
        contain: layout style;
    }

    /* 10 — Focus visible : accessibilité + signaux de qualité pour Google */
    :focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 3px;
        border-radius: 4px;
    }
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* 11 — Respect prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        html {
            scroll-behavior: auto !important;
        }
    }

    /* 12 — Breadcrumb : touch targets généreux sur mobile */
    .saw-breadcrumb-list a {
        display: inline-flex;
        align-items: center;
        min-height: 2.25rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* 13 — H3 dans les sections éditoriales : taille + espacement cohérents */
    .saw-prose :where(h3),
    .prose :where(h3) {
        font-size: 1.0625rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin-top: 1.5em !important;
        margin-bottom: 0.5em !important;
    }

    /* 14 — Map OSM tablette : hauteur intermédiaire */
    @media (min-width: 640px) and (max-width: 1023px) {
        .city-layout-map-col .city-layout-map-frame,
        .dept-layout-map-col .dept-layout-map-frame {
            height: 320px;
        }
    }

    /* 15 — Boutons : padding tablette (768–1023 px) */
    @media (min-width: 768px) and (max-width: 1023px) {
        .saw-cta-btn {
            padding: 0.8125rem 1.375rem !important;
        }
    }

    /* 16 — Espacement grille footer : cohérent multi-colonnes */
    .site-footer-main {
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
    @media (min-width: 768px) {
        .site-footer-main {
            padding-top: 3rem;
            padding-bottom: 2.5rem;
        }
    }

    /* 17 — Sections .saw-section à l'intérieur de site-container-wide :
           synchronise les footprints avec le système de variables */
    main[data-fp] .site-container-wide > section {
        padding-top: var(--saw-section-y) !important;
        padding-bottom: var(--saw-section-y) !important;
    }
    @media (min-width: 768px) {
        main[data-fp] .site-container-wide > section {
            padding-top: var(--saw-section-y-md) !important;
            padding-bottom: var(--saw-section-y-md) !important;
        }
    }
    @media (min-width: 1024px) {
        main[data-fp] .site-container-wide > section {
            padding-top: var(--saw-section-y-lg) !important;
            padding-bottom: var(--saw-section-y-lg) !important;
        }
    }

    /* 18 — Variables footprint : 48 px desktop, 40 px tablette, 28 px mobile */
    main[data-fp] {
        --saw-section-y: 1.75rem;
        --saw-section-y-md: 2.5rem;
        --saw-section-y-lg: 3rem;
    }
    main[data-fp="fp_service_v1"]  { --saw-section-y-lg: 3rem; }
    main[data-fp="fp_dep_v2"]      { --saw-section-y-lg: 3rem; }
    main[data-fp="fp_home_v1"]     { --saw-section-y-lg: 3.5rem; }

    /* 19 — Maillage interne : espacement vertical entre les liens */
    .saw-maillage-links {
        margin-top: 1.25rem;
    }
    .saw-maillage-links a {
        line-height: 1.4;
    }

    /* 20 — NORMALISATION UNIVERSELLE — tous layouts, toutes tailles
           Standard : 3rem (48px) desktop · 2.5rem tablette · 1.75rem mobile
           Inter-sections = 96px max (vs 128px avant) = rythme sans vides excessifs
           :not([class*="rounded"]) préserve les cartes-articles (légal, FAQ…) */

    main section[class*="py-10"]:not([class*="rounded"]),
    main section[class*="py-12"]:not([class*="rounded"]),
    main section[class*="py-14"]:not([class*="rounded"]),
    main section[class*="py-16"]:not([class*="rounded"]),
    main section[class*="py-20"]:not([class*="rounded"]),
    main section[class*="py-24"]:not([class*="rounded"]),
    main .site-container-wide[class*="py-10"],
    main .site-container-wide[class*="py-14"],
    main .site-container-wide[class*="py-16"],
    main .site-container-wide[class*="py-20"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    @media (min-width: 768px) and (max-width: 1023px) {
        main section[class*="py-10"]:not([class*="rounded"]),
        main section[class*="py-12"]:not([class*="rounded"]),
        main section[class*="py-14"]:not([class*="rounded"]),
        main section[class*="py-16"]:not([class*="rounded"]),
        main section[class*="py-20"]:not([class*="rounded"]),
        main section[class*="py-24"]:not([class*="rounded"]),
        main .site-container-wide[class*="py-10"],
        main .site-container-wide[class*="py-14"],
        main .site-container-wide[class*="py-16"],
        main .site-container-wide[class*="py-20"] {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }
    }

    @media (max-width: 767px) {
        main section[class*="py-10"]:not([class*="rounded"]),
        main section[class*="py-12"]:not([class*="rounded"]),
        main section[class*="py-14"]:not([class*="rounded"]),
        main section[class*="py-16"]:not([class*="rounded"]),
        main section[class*="py-20"]:not([class*="rounded"]),
        main section[class*="py-24"]:not([class*="rounded"]),
        main .site-container-wide[class*="py-10"],
        main .site-container-wide[class*="py-14"],
        main .site-container-wide[class*="py-16"],
        main .site-container-wide[class*="py-20"] {
            padding-top: 1.75rem !important;
            padding-bottom: 1.75rem !important;
        }
    }

    /* 21 — Restaure pt-0 explicite (tableau tarifs collé à la section précédente) */
    main section[class*="py-14"][class*="pt-0"],
    main section[class*="py-10"][class*="pt-0"],
    main section[class*="py-12"][class*="pt-0"] {
        padding-top: 0 !important;
    }

    /* 22 — Sections adjacentes de MÊME fond : pt réduit à 1.5rem (24px)
           Total inter-sections same-bg : 48+24 = 72px (au lieu de 96px)
           Évite le "blanc dans le blanc" sur les pages multi-sections
           Spécificité (0,2,2) > règle 20 (0,2,1) → cascade naturelle */
    main section[class*="bg-white"] + section[class*="bg-white"],
    main section[class*="bg-slate-50"] + section[class*="bg-slate-50"],
    main section[class*="bg-slate-100"] + section[class*="bg-slate-100"] {
        padding-top: 1.5rem !important;
    }
    @media (max-width: 767px) {
        main section[class*="bg-white"] + section[class*="bg-white"],
        main section[class*="bg-slate-50"] + section[class*="bg-slate-50"],
        main section[class*="bg-slate-100"] + section[class*="bg-slate-100"] {
            padding-top: 1rem !important;
        }
    }

    /* 21 — Pages AEO : titres de section + listes sidebar */
    .saw-comparison-table-wrap {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        border-radius: 1rem;
        border: 1px solid rgb(226 232 240);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.04);
    }

    .saw-comparison-criteria-mobile {
        min-width: 0;
    }

    .saw-comparison-table {
        width: 100%;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    .saw-comparison-table__th,
    .saw-comparison-table__label,
    .saw-comparison-table__cell {
        padding: 1rem 1.25rem;
        vertical-align: middle;
        text-align: left;
    }

    .saw-comparison-table__th {
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.35;
    }

    .saw-comparison-table__th--label {
        width: 22%;
        min-width: 9.5rem;
        background: rgb(248 250 252);
        color: rgb(100 116 139);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.6875rem;
        border-bottom: 1px solid rgb(226 232 240);
    }

    .saw-comparison-table__th--option-a {
        width: 39%;
        background: #fff;
        color: rgb(51 65 85);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.375;
        border-bottom: 1px solid rgb(241 245 249);
        border-right: 1px solid rgb(241 245 249);
        padding-left: calc(1.25rem + 1.75rem + 0.75rem);
    }

    .saw-comparison-table__th--option-b {
        width: 39%;
        background: #fff;
        color: rgb(71 85 105);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.375;
        border-bottom: 1px solid rgb(241 245 249);
        padding-left: calc(1.25rem + 1.75rem + 0.75rem);
    }

    .saw-comparison-table__row + .saw-comparison-table__row .saw-comparison-table__label,
    .saw-comparison-table__row + .saw-comparison-table__row .saw-comparison-table__cell {
        border-top: 1px solid rgb(241 245 249);
    }

    .saw-comparison-table__label {
        font-weight: 700;
        color: var(--theme-geo-hero-bg);
        background: rgb(248 250 252);
        border-right: 1px solid rgb(241 245 249);
        box-shadow: inset 3px 0 0 var(--theme-primary);
    }

    .saw-comparison-table__cell {
        color: rgb(51 65 85);
    }

    .saw-comparison-table__cell--a {
        background: #fff;
        border-right: 1px solid rgb(241 245 249);
    }

    .saw-comparison-table__cell--b {
        background: #fff;
    }

    .saw-comparison-mobile-card {
        border-left: 3px solid var(--theme-primary, #004e98);
    }

    .saw-comparison-mobile-card__label {
        margin: 0;
    }

    .saw-case-study-show .saw-aeo-section-title,
    .saw-comparison-show .saw-aeo-section-title,
    .saw-glossary-show .saw-aeo-section-title {
        color: var(--theme-geo-hero-bg);
        font-size: 1.375rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.25 !important;
        text-transform: none !important;
        margin: 0 !important;
    }

    .saw-glossary-page .saw-glossary-alpha-bar {
        margin-top: 0;
    }

    .saw-aeo-sidebar-nav--compact .saw-aeo-sidebar-link {
        padding: 0.5rem 0.625rem;
    }

    .saw-aeo-sidebar-nav--compact .saw-aeo-sidebar-link-title {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        letter-spacing: normal !important;
    }

    .saw-aeo-sommaire .saw-aeo-sommaire-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        line-height: 1.45;
        transition: background-color 0.15s ease;
    }

    .saw-aeo-sommaire .saw-aeo-sommaire-link:hover {
        background-color: rgb(248 250 252);
    }

    .saw-aeo-sommaire .saw-aeo-sommaire-label {
        font-weight: 600;
        color: var(--theme-primary, #004e98);
    }

    .saw-aeo-sidebar-nav .saw-aeo-sidebar-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .saw-aeo-sidebar-nav .saw-aeo-sidebar-link {
        display: block;
        padding: 0.6875rem 0.75rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        line-height: 1.45;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .saw-aeo-sidebar-nav .saw-aeo-sidebar-link-title {
        display: block;
        font-size: 0.9375rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: -0.01em !important;
    }

    .saw-aeo-sidebar-nav .saw-aeo-sidebar-link-meta {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.4;
        color: rgb(100 116 139);
    }

    .saw-aeo-sidebar-nav .saw-aeo-sidebar-link-kicker {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        line-height: 1.35;
        text-transform: uppercase;
        color: rgb(148 163 184);
    }

    .saw-aeo-fact-grid > div {
        min-height: 100%;
    }

    /* AEO index — cartes communes (études de cas, comparatifs, titres glossaire) */
    .saw-aeo-index-grid .saw-aeo-index-card,
    .saw-case-studies-grid .saw-case-study-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .saw-aeo-index-card__title,
    .saw-case-study-card__title {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        letter-spacing: -0.015em !important;
    }

    .saw-aeo-index-card__title a,
    .saw-case-study-card__title a {
        color: inherit;
        text-decoration: none;
    }

    .saw-aeo-index-card__title a:hover,
    .saw-case-study-card__title a:hover {
        color: var(--theme-primary, #004e98);
    }

    .saw-aeo-index-card__pills {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .saw-aeo-index-card__pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 1.875rem;
        padding: 0.4375rem 0.75rem;
        border-radius: 9999px;
        border: 1px solid rgb(226 232 240);
        background: rgb(248 250 252);
        font-size: 0.75rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        color: rgb(51 65 85);
        white-space: nowrap;
    }

    .saw-aeo-index-card__pill--primary {
        background: var(--theme-primary);
        border-color: var(--theme-primary);
        color: var(--theme-text-on-primary);
        font-weight: 600 !important;
    }

    .saw-aeo-index-card__pill-label {
        font-weight: 500;
        color: rgb(100 116 139);
    }

    .saw-aeo-index-card__pill-value {
        font-weight: 600;
        color: rgb(15 23 42);
        font-variant-numeric: tabular-nums;
    }

    .saw-aeo-index-card__pill--primary .saw-aeo-index-card__pill-label,
    .saw-aeo-index-card__pill--primary .saw-aeo-index-card__pill-value {
        color: inherit;
        font-weight: 600 !important;
    }

    .saw-aeo-index-card__pill-vs {
        display: inline-flex;
        align-items: center;
        min-height: 1.875rem;
        font-size: 0.75rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        color: rgb(148 163 184);
    }

    /* Alias rétrocompat */
    .saw-aeo-index-card__meta,
    .saw-case-study-card__meta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 1.875rem;
        padding: 0.4375rem 0.75rem;
        border-radius: 9999px;
        border: 1px solid rgb(226 232 240);
        background: rgb(248 250 252);
        font-size: 0.75rem !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    .saw-glossary-index-letter {
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        margin: 0 !important;
    }

    .saw-case-study-show .saw-aeo-solution-steps {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        list-style: none;
        margin: 1rem 0 0 !important;
        padding: 0;
    }

    .saw-case-study-show .saw-aeo-solution-step {
        display: flex;
        align-items: center;
        gap: 1rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 1rem;
        background: #fff;
        padding: 1rem;
    }

    @media (min-width: 640px) {
        .saw-case-study-show .saw-aeo-solution-step {
            gap: 1.25rem;
            padding: 1.25rem;
        }
    }

    .saw-case-study-show .saw-aeo-solution-step-badge {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: var(--theme-primary);
        color: var(--theme-text-on-primary);
        font-size: 0.875rem;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .saw-case-study-show .saw-aeo-solution-step-body {
        flex: 1;
        min-width: 0;
    }

    .saw-case-study-show .saw-aeo-solution-step-body p {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.625;
        color: rgb(51 65 85);
    }