: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; }
    }
    /* ⛔ LOGO AU CENTRE GEOMETRIQUE sur mobile et tablette (Sam, 14/09/2026).
       Avant : le logo etait centre dans l'espace RESTANT entre le burger (~68 px) et le
       bouton telephone (~140 px), donc decale a gauche d'une quarantaine de pixels. Les
       deux ailes recoivent le meme poids (flex 1 1 0) : quel que soit leur contenu, le
       logo est au milieu exact de la barre. En CSS inline (pas Tailwind) pour etre
       effectif sans recompilation d'assets, comme le bloc de secours ci-dessus. */
    @media (max-width: 1279px) {
        /* ⛔ LES AILES NE DESCENDENT PAS SOUS LEUR CONTENU (pas de min-width:0). Avec
           flex-grow egal, elles s'egalisent sur la PLUS LARGE des deux (le bouton
           telephone, ~126 px), et l'aile du burger s'etire pour l'egaler. Resultat : les
           deux cotes ont exactement le meme poids, le logo est au centre GEOMETRIQUE. Si
           on mettait min-width:0, l'aile du burger se retracterait a 50 px et le logo
           chevaucherait le telephone (constate le 14/09). */
        .site-header-aile { flex: 1 1 0; display: flex; align-items: center; }
        .site-header-aile-gauche { justify-content: flex-start; }
        .site-header-aile-droite { justify-content: flex-end; }
        /* Le logo prend la place qui reste au centre et se retracte s'il le faut (min-width:0),
           borne pour ne jamais pousser les ailes. */
        .site-header-logo-slot { flex: 0 1 auto; min-width: 0; }
        .site-header-logo-slot img { max-width: 100%; }
    }
    /* Petits telephones : l'espace pour le logo est le plus etroit. On resserre le bouton
       (numero complet) et on borne le logo pour qu'il tienne dans (largeur - 2 ailes). */
    @media (max-width: 639px) {
        .site-header-logo-slot img { max-width: 7.5rem; }
        .site-header-aile-droite .site-header-phone { padding-left: .6rem; padding-right: .6rem; font-size: 12.5px; letter-spacing: -.02em; }
    }
    /* Tablette etroite : un peu plus de place, logo un cran plus grand. */
    @media (min-width: 640px) and (max-width: 1023px) {
        .site-header-logo-slot img { max-width: 11rem; }
    }
    @media (min-width: 1280px) {
        /* Desktop : les ailes mobiles disparaissent, le logo revient a gauche (inchange). */
        .site-header-aile-gauche, .site-header-aile-droite { display: none !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);
    }