/* DARNÉO bundle v20260705 — généré, ne pas éditer à la main */

/* Typography (FT-inspired): Newsreader (titles) + IBM Plex Sans (UI/body) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&display=swap");


/* --- css/darneo-design-system.css --- */
/* Police unique projet : Inter (Google Fonts). repli si la page n’inclut pas son propre <link>. */
/* Typographie : Inter chargée via <link> non bloquant dans le HTML (pas d'@import ici). */

/* DARNÉO. design tokens (typographie premium minimaliste, cohérente site-wide) */

:root {
    /* Typographie FT : Newsreader (titres) + IBM Plex Sans (corps/UI) */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-serif);
    --font-body: var(--font-sans);
    --font-ui: var(--font-sans);
    --font-display: var(--font-serif);
    /* Brand palette (mandatory) */
    --color-primary: #A65A3A; /* deep terracotta */
    --color-accent: #C6A96B; /* subtle gold */
    --color-dark: #1E1E1E; /* charcoal */
    --color-neutral: #8A8A8A;

    /* Surfaces */
    --color-bg: #F5EFE7; /* light sand */
    --color-bg-warm: #F5EFE7;
    --color-bg-section: #FFFFFF;

    /* Texte */
    --color-text: #1E1E1E;
    --color-text-muted: #8A8A8A;
    --color-text-inverse: #FFFFFF;

    /* Legacy aliases */
    --color-accent-hover: #C6A96B;
    --color-accent-light: rgba(198, 169, 107, 0.18);
    --color-terracotta: #A65A3A;
    --color-success: #1d9e75;
    --color-error: #a94442;

    /* Compat ancien code (.btn-accent-cta, dégradés) */
    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --accent-contrast: var(--color-primary);
    --section-border: rgba(43, 38, 34, 0.09);
}

.dark:root,
.dark {
    --color-bg: #141414;
    --color-bg-warm: #161616;
    --color-bg-section: #1B1B1B;
    --color-text: #F5EFE7;
    --color-text-muted: rgba(245, 239, 231, 0.72);
    --color-text-inverse: #FFFFFF;
    --section-border: rgba(255, 255, 255, 0.10);
}

/* Aucune césure (pas de mot coupé par un tiret en fin de ligne). site-wide */
html {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* ─── CTA conversion ─── */
.btn-primary,
.btn-accent-cta {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 28px rgba(166, 90, 58, 0.28);
}
.btn-primary:hover,
.btn-accent-cta:hover {
    background-color: var(--color-dark) !important;
    color: var(--color-accent) !important;
}

.btn-secondary {
    background: transparent !important;
    border: 1.5px solid rgba(198, 169, 107, 0.55) !important;
    color: var(--color-text) !important;
    font-weight: 600;
    border-radius: 0.625rem !important;
}
.btn-secondary:hover {
    background-color: rgba(198, 169, 107, 0.14) !important;
    color: var(--color-dark) !important;
    border-color: rgba(198, 169, 107, 0.85) !important;
}

.text-accent-gold {
    color: var(--color-accent);
}

.bg-accent-gold {
    background-color: var(--color-accent);
}

/* Navigation desktop, hover lien (or, lisible sur fond crème) */
#mainNav .nav-desktop-links a:hover {
    color: var(--color-accent) !important;
}

/* Header : fond beige sable (soufflé crème → sable) */
#mainNav {
    background-color: var(--color-bg);
    background-image: linear-gradient(
            180deg,
            #faf6f0 0%,
            var(--color-bg) 45%,
            #efe7dc 100%
        );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: var(--color-text) !important;
    border-bottom: 1px solid rgba(198, 169, 107, 0.32) !important;
    box-shadow: 0 4px 22px rgba(31, 26, 23, 0.08);
}
.dark #mainNav {
    background-color: #2c2824;
    background-image: linear-gradient(180deg, #35312c 0%, #2c2824 50%, #252220 100%);
    color: #f5efe7 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
/* Ne pas écraser le CTA (.btn-accent-cta : texte blanc sur fond primaire) */
#mainNav a:not(.btn-accent-cta) {
    color: var(--color-text) !important;
    text-shadow: none;
}
.dark #mainNav a:not(.btn-accent-cta) {
    color: #f5efe7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#mainNav a:not(.btn-accent-cta):hover {
    color: var(--color-primary) !important;
}
.dark #mainNav a:not(.btn-accent-cta):hover {
    color: var(--color-accent) !important;
}
#mainNav #mobileMenu {
    background-color: rgba(250, 246, 240, 0.98) !important;
}
.dark #mainNav #mobileMenu {
    background-color: rgba(44, 40, 36, 0.98) !important;
}

/* Titres de section, barre (or → terre cuite léger fondu) */
.section-title-accent::after {
    background: linear-gradient(
        90deg,
        var(--color-accent),
        rgba(166, 90, 58, 0.35)
    );
}

/* Cartes « Nos atouts », bordure gauche terre cuite */
.darneo-card-feature {
    border-left: 3px solid var(--color-terracotta) !important;
}

/* Grille prestations, icônes corps de métier (classe .darneo-icon-service sur le wrapper) */
.darneo-icon-service {
    background-color: rgba(125, 107, 92, 0.14) !important;
    color: var(--color-terracotta) !important;
}
.darneo-icon-service .darneo-icon-svg {
    color: inherit !important;
}
.dark .darneo-icon-service {
    background-color: rgba(125, 107, 92, 0.22) !important;
    color: var(--color-accent-light) !important;
}

/* Processus : pastilles classiques (terre cuite). pas la variante luxe .processus-step-icon--lux */
.processus-step-icon:not(.processus-step-icon--lux) {
    color: var(--color-terracotta) !important;
    border: 2px solid var(--color-terracotta) !important;
    background-color: #fff !important;
    box-shadow: 0 4px 14px rgba(125, 107, 92, 0.2);
}

/* Témoignages, étoiles (or, lisible sur fond clair) */
.temoignage-stars svg,
.temoignage-stars {
    color: var(--color-accent) !important;
}

.darneo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 0;
}
.darneo-icon > svg {
    width: 1em;
    height: 1em;
    display: block;
    flex-shrink: 0;
}

.darneo-section-subtitle {
    font-size: 1rem;
    line-height: 1.6;
}
@media (min-width: 640px) {
    .darneo-section-subtitle {
        font-size: 1.0625rem;
    }
}

body.darneo-home > main#accueil,
body.darneo-home > section#estimation-ia-promo,
body.darneo-home > section#expertise-atouts,
body.darneo-home > section#services,
body.darneo-home > section#pourquoi-darneo,
body.darneo-home > section#darneo-portfolio-teaser,
body.darneo-home > section#temoignages,
body.darneo-home > section#processus,
body.darneo-home > section#contact,
body.darneo-home > section#faq {
    /* Avant: clamp(5rem…7.25rem). rythme vertical resserré, tout viewport */
    padding-top: clamp(2.5rem, 5vw, 3.75rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem) !important;
    border-top: 1px solid var(--section-border);
}

body.darneo-home > main#accueil {
    border-top: none;
}

@media (min-width: 1024px) {
    body.darneo-home > main#accueil,
    body.darneo-home > section#estimation-ia-promo,
    body.darneo-home > section#expertise-atouts,
    body.darneo-home > section#services,
    body.darneo-home > section#pourquoi-darneo,
    body.darneo-home > section#darneo-portfolio-teaser,
    body.darneo-home > section#temoignages,
    body.darneo-home > section#processus,
    body.darneo-home > section#contact,
    body.darneo-home > section#faq {
        padding-top: clamp(3.5rem, 6vw, 5.25rem) !important;
        padding-bottom: clamp(3.5rem, 6vw, 5.25rem) !important;
    }
}

.darneo-icon-svg {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.darneo-prestations-grid {
    gap: 1.25rem !important;
}
@media (min-width: 640px) {
    .darneo-prestations-grid {
        gap: 1.5rem !important;
    }
}

/* Panneau processus : terracotta → taupe profond, palette charte darneo */
.processus-panel {
    background: linear-gradient(
        150deg,
        #C17A5A 0%,
        #8B6B5A 45%,
        #3A2E28 100%
    ) !important;
    color: #fff;
    box-shadow: 0 22px 50px rgba(60, 35, 22, 0.28);
}

.footer-trust {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 639px) {
    .footer-trust {
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }
}

/*
 * Pied de page (#main-footer). styles de secours :
 * si le CDN Tailwind ne charge pas (aperçu, blocage réseau), w-4/h-4 et text-white/90
 * ne s’appliquent pas → SVG géants + liens bleus navigateur. On force taille et couleurs.
 */
footer#main-footer {
    overflow-x: hidden;
    color: #faf8f5;
}

footer#main-footer svg {
    display: block;
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    flex-shrink: 0;
    box-sizing: content-box;
}

footer#main-footer a {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
}

footer#main-footer a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

footer#main-footer a[href^="tel:"]:hover {
    color: var(--accent, #b8966a) !important;
}

footer#main-footer .mt-10.border-t a,
footer#main-footer .mt-10.pt-6 a {
    color: rgba(255, 255, 255, 0.75) !important;
}

footer#main-footer .mt-10.border-t a:hover,
footer#main-footer .mt-10.pt-6 a:hover {
    color: #fff !important;
}

footer#main-footer a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

/* ─── Formulaires (feedback), ciblage formulaire accueil + générique ─── */
#quote-form input:valid:not(:placeholder-shown):not([type="checkbox"]),
#quote-form textarea:valid:not(:placeholder-shown),
#quote-form select:valid {
    border-color: var(--color-success);
}

#quote-form input:invalid:not(:placeholder-shown):not(:focus),
#quote-form textarea:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--color-error);
}

.form-success,
.darneo-form-success {
    color: var(--color-success);
}

.darneo-form-error {
    color: var(--color-error);
}

/* ─── Alternance sections (mode clair uniquement, ne casse pas le hero) ─── */
html:not(.dark) .darneo-section-bg-warm {
    background-color: var(--color-bg) !important;
    background-image: none !important;
}

html:not(.dark) .darneo-section-bg-deep {
    background-color: var(--color-bg-section) !important;
    background-image: none !important;
}

html:not(.dark) .darneo-section-bg-white {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

html:not(.dark) .darneo-main-intro {
    background-color: var(--color-bg) !important;
    background-image: none !important;
}

html:not(.dark) section.highlight {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* Utilitaires Tailwind (CDN). overrides pour cohérence marque */
.bg-background-light { background-color: var(--color-bg) !important; }
.bg-background-dark { background-color: var(--color-dark) !important; }
.bg-surface-light { background-color: #FFFFFF !important; }
.bg-surface-dark { background-color: #1B1B1B !important; }
.bg-surface-elevated { background-color: #FFFFFF !important; }
.text-text-main-light { color: var(--color-text) !important; }
.text-text-main-dark { color: var(--color-text-inverse) !important; }
.text-secondary, .text-accent-gold { color: var(--color-accent) !important; }
.bg-secondary, .bg-accent-gold { background-color: var(--color-accent) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-secondary { border-color: rgba(198, 169, 107, 0.35) !important; }
.border-primary { border-color: rgba(166, 90, 58, 0.35) !important; }

/*
 * Logo PNG header. hauteur limitée pour barre h-20 (5rem) : marge haut/bas, évite toit rogné.
 * Couvre #mainNav et la première <nav> du body.
 */
#mainNav a.logo,
body > nav:first-of-type a.logo {
    display: flex;
    min-width: 0;
    max-width: min(15rem, 50vw);
    max-height: 5rem;
    align-items: center;
    align-self: auto;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
}
#mainNav a.logo img.nav-logo-darneo,
#mainNav a.logo img[src*="logo.png"],
body > nav:first-of-type a.logo img.nav-logo-darneo,
body > nav:first-of-type a.logo img[src*="logo.png"] {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 2rem !important;
    max-height: 3rem !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    /* Pas de drop-shadow : évite halo / « contour blanc » sur fond marbre sombre */
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
/* Barre mobile (hauteur 5rem dans darneo-main-unified) : logo lisible, touche cible confortable */
@media (max-width: 767.98px) {
    #mainNav a.logo img.nav-logo-darneo,
    #mainNav a.logo img[src*="logo.png"],
    body > nav:first-of-type a.logo img.nav-logo-darneo,
    body > nav:first-of-type a.logo img[src*="logo.png"] {
        min-height: 3rem !important;
        height: 3.25rem !important;
        max-height: 3.5rem !important;
    }
}

/* Accueil tagline : 2 lignes sur mobile, 1 ligne sur desktop */
.darneo-tagline .darneo-tagline-line1,
.darneo-tagline .darneo-tagline-line2 {
    display: inline;
}
@media (max-width: 767.98px) {
    .darneo-tagline .darneo-tagline-line1,
    .darneo-tagline .darneo-tagline-line2 {
        display: block;
        line-height: 1.25;
    }
}

/* Checklists : aligne icône + texte (cartes services, etc.) */
.darneo-checklist li {
    align-items: flex-start;
}
.darneo-checklist .material-symbols-outlined {
    line-height: 1;
}
.darneo-checklist li > span:last-child {
    display: block;
}

/* Utilitaire : empêche la césure/retour à la ligne */
.darneo-nowrap {
    white-space: nowrap;
}

/* Utilitaire : force le retour à la ligne sur mobile */
.darneo-break-mobile {
    display: inline;
}
@media (max-width: 767.98px) {
    .darneo-break-mobile {
        display: block;
    }
}

/* Page MDM (ex-MRE) : contour or autour du bloc témoignages */
.darneo-mre-testimonials {
    border: 2px solid rgba(198, 169, 107, 0.45);
    border-radius: 1.25rem;
    padding: 1rem;
}

/* Page MDM : refonte section "Pourquoi nous faire confiance" */
.darneo-mre-trust-card {
    position: relative;
}
.darneo-mre-trust-summary {
    cursor: pointer;
    list-style: none;
    outline: none;
}
.darneo-mre-trust-summary::-webkit-details-marker {
    display: none;
}
.darneo-mre-trust-card[open] .darneo-mre-trust-summary h3 {
    color: var(--color-primary);
}
.dark .darneo-mre-trust-card[open] .darneo-mre-trust-summary h3 {
    color: var(--color-accent);
}
.darneo-mre-trust-detail {
    margin-top: 0.25rem;
}
@media (max-width: 767.98px) {
    .darneo-mre-trust-grid {
        gap: 0.75rem !important;
    }
    .darneo-mre-trust-card {
        padding: 1rem !important;
        text-align: left !important;
        border-radius: 1.25rem;
        border-color: rgba(198, 169, 107, 0.32) !important;
        box-shadow: 0 10px 24px rgba(31, 26, 23, 0.06);
    }
    .darneo-mre-trust-summary {
        display: grid;
        grid-template-columns: 3.25rem 1fr;
        align-items: start;
        gap: 0.75rem;
    }
    .darneo-mre-trust-icon {
        width: 3.25rem !important;
        height: 3.25rem !important;
        margin: 0 !important;
        border-radius: 0.9rem;
    }
    .darneo-mre-trust-card h3 {
        margin: 0 0 0.35rem 0 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    .darneo-mre-trust-card p {
        margin: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.55 !important;
    }
}
@media (min-width: 640px) {
    #mainNav a.logo img.nav-logo-darneo,
    #mainNav a.logo img[src*="logo.png"],
    body > nav:first-of-type a.logo img.nav-logo-darneo,
    body > nav:first-of-type a.logo img[src*="logo.png"] {
        height: 2.25rem !important;
        max-height: 3rem !important;
    }
}
@media (min-width: 768px) {
    #mainNav a.logo img.nav-logo-darneo,
    #mainNav a.logo img[src*="logo.png"],
    body > nav:first-of-type a.logo img.nav-logo-darneo,
    body > nav:first-of-type a.logo img[src*="logo.png"] {
        height: 2.5rem !important;
        max-height: 3rem !important;
    }
}
@media (min-width: 1024px) {
    #mainNav a.logo img.nav-logo-darneo,
    #mainNav a.logo img[src*="logo.png"],
    body > nav:first-of-type a.logo img.nav-logo-darneo,
    body > nav:first-of-type a.logo img[src*="logo.png"] {
        height: 2.75rem !important;
        max-height: 3.25rem !important;
    }
}
@media (min-width: 1280px) {
    #mainNav a.logo img.nav-logo-darneo,
    #mainNav a.logo img[src*="logo.png"],
    body > nav:first-of-type a.logo img.nav-logo-darneo,
    body > nav:first-of-type a.logo img[src*="logo.png"] {
        height: 3rem !important;
        max-height: 3.25rem !important;
    }
}

/* Bandeau avis Google (ex-i18n-rtl, FR uniquement) */
.google-rating-strip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.65rem 1rem;
    border-radius: 9999px;
    background: rgba(198, 169, 107, 0.12);
    border: 1px solid rgba(198, 169, 107, 0.24);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.dark .google-rating-strip {
    color: var(--color-text);
    background: rgba(198, 169, 107, 0.14);
    border-color: rgba(198, 169, 107, 0.28);
}

/* ─── Typographie site-wide (Inter unique, premium real-estate) ─── */
html {
    font-family: var(--font-ui);
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}
body {
    font-family: var(--font-ui);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-body,
.font-sans,
button,
input,
textarea,
select,
label,
caption,
nav,
nav a {
    font-family: var(--font-sans) !important;
}
.font-serif,
.font-playfair,
.font-display {
    font-family: var(--font-serif) !important;
}

/* Hiérarchie minimaliste premium */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-text);
}
h1 {
    font-weight: 700;
    font-size: clamp(2rem, 4.6vw + 0.5rem, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.035em; /* ≈ -0.5px à -1px sur tailles d’affichage */
}
h2 {
    font-weight: 600;
    font-size: clamp(1.625rem, 2.4vw + 0.5rem, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
h3 {
    font-weight: 600;
    font-size: clamp(1.25rem, 1.4vw + 0.6rem, 1.75rem);
    line-height: 1.3;
    letter-spacing: -0.012em;
}
h4 {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
h5 {
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
}
h6 {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Corps : lecture confortable, paragraphes premium */
p {
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text);
}
p + p {
    margin-top: 1rem;
}

/* UI / boutons : Inter Medium */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-accent-cta,
input[type="submit"],
input[type="button"],
[role="button"] {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

/* Liens éditoriaux */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* Rythme vertical resserré (pages non-accueil : main type article, sections py-16+) */
@media (min-width: 768px) {
    /* main avec py-* + px-* (blog, landings). l’accueil n’a pas de py sur <main> */
    main[class*="py-1"][class*="px-"]:not(#accueil) {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }
    section[class*="py-16"] {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }
}
@media (min-width: 1280px) {
    section[class*="py-16"] {
        padding-top: 3.25rem !important;
        padding-bottom: 3.25rem !important;
    }
}

/* FAQ accordéon (référence : section #faq accueil). réutiliser .darneo-faq-stack + <details> natifs */
.darneo-faq-stack {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
.darneo-faq-stack > * + * {
    margin-top: 1rem;
}
.darneo-faq-stack > details {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(217, 207, 195, 0.7);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
    .darneo-faq-stack > details {
        padding: 1rem 1.75rem;
    }
}
.dark .darneo-faq-stack > details {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(217, 207, 195, 0.45);
}
.darneo-faq-stack > details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}
.darneo-faq-stack > details summary::-webkit-details-marker {
    display: none;
}
.darneo-faq-stack > details summary .darneo-faq-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.darneo-faq-stack > details[open] > summary .darneo-faq-chevron {
    transform: rotate(180deg);
}
.darneo-faq-stack > details > p {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgba(31, 26, 23, 0.7);
}
.dark .darneo-faq-stack > details > p {
    color: rgba(209, 213, 219, 0.92);
}

/* --- css/mobile-base.css --- */
/* Base mobile optimizations - Darneo.ma */
/* Stack: Tailwind CSS (CDN) + css/darneo-design-system.css?v=inter-20260508-2 (--font-ui / --font-display) */
/* Typographie : Inter (site entier) */

/* === Fix global anti-overflow (priorité), évite le scroll horizontal sur mobile === */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    max-width: 100%;
    overflow-x: hidden;
    /* Base : 18px. tout le texte en rem (Tailwind + composants) suit cette échelle */
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    overflow-x: hidden;
    max-width: 100%;
    line-height: 1.6;
    font-family: var(--font-ui, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .font-display {
    font-family: var(--font-display, "Newsreader", Georgia, "Times New Roman", serif);
}
nav, nav a, button, label, caption, .font-sans {
    font-family: var(--font-ui, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}
/* Touch targets min 48x48px (Google) */
button, input[type="submit"], input[type="button"],
a[href^="tel:"], a[href^="mailto:"], a[href^="https://wa.me"] { min-height: 48px; min-width: 48px; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-size: 1rem !important; min-height: 48px; padding: 0.75rem 1rem;
}

/* Mobile (max 767px) - Centrage et anti-overflow */
@media (max-width: 767px) {
    /* Corps : fluide, un cran au-dessus de l’ancienne base (évite le texte trop petit) */
    body {
        font-size: clamp(1rem, 0.42rem + 2.3vw, 1.125rem);
        line-height: 1.65;
    }
    
    /*
     * Aucun mot coupé en deux (ni tiret de césure) : mots entiers, renvoi à la ligne entre mots.
     * Longs mots/URLs : break-word seulement si le mot dépasse vraiment la largeur, sans hyphens: auto.
     */
    body, p, li, td, th, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: normal;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    p a, li a, .article-content a, .prose a {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    h1, h2, h3, h4 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: normal;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }
    /* Fil d’Ariane & petits libellés nav : mots entiers */
    body > nav a,
    body > nav span:not(.material-symbols-outlined),
    #article-content > nav a,
    #article-content > nav span#breadcrumb-category {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
    }

    /* Articles blog : bord à bord sur mobile (supprime les marges latérales) */
    #article-content > nav .max-w-4xl,
    #article-content > header,
    #article-content > header .max-w-4xl,
    #article-content > main,
    #article-content > main > .max-w-4xl {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #article-content > main .article-content {
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Flex rangée nav : min-width 0 sur les zones qui doivent tronquer, pas sur tout le site ([class*="flex"] trop large). */
    body > nav > div > div.flex > *:not(#mobileMenuBtn):not(div[class*="md:hidden"]),
    body > nav > div > div[class*="flex"] > *:not(#mobileMenuBtn):not(div[class*="md:hidden"]) {
        min-width: 0;
    }
    /* Grille d’accueil (#mainNav) : pas de classe utilitaire "flex" sur .nav-main-grid, règle dédiée */
    body > nav > div > div.nav-main-grid > *:not(#mobileMenuBtn):not(.nav-mobile-actions):not(.nav-right-cluster) {
        min-width: 0;
    }
    #mainNav #mobileMenuBtn,
    body > nav .nav-mobile-menu-btn,
    body > nav button[onclick*="toggleMobileMenu"],
    body > nav button[onclick*="mobileMenu"] {
        min-width: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(198, 169, 107, 0.25);
        pointer-events: auto !important;
    }
    /* Icône burger : terracotta lisible sur fond crème (bordure + fond dans le HTML) */
    #mainNav #mobileMenuBtn,
    body > nav button[onclick*="toggleMobileMenu"],
    body > nav button[onclick*="mobileMenu"] {
        color: var(--color-primary) !important;
    }
    #mainNav #mobileMenuBtn svg,
    body > nav button[onclick*="toggleMobileMenu"] svg,
    body > nav button[onclick*="mobileMenu"] svg,
    #mainNav #mobileMenuBtn .material-symbols-outlined,
    body > nav button[onclick*="toggleMobileMenu"] .material-symbols-outlined,
    body > nav button[onclick*="mobileMenu"] .material-symbols-outlined {
        color: currentColor !important;
    }
    #mainNav #mobileMenuBtn svg *,
    body > nav button[onclick*="toggleMobileMenu"] svg *,
    body > nav button[onclick*="mobileMenu"] svg * {
        fill: currentColor !important;
        stroke: currentColor !important;
    }
    /* Cluster droit (accueil) : ne jamais réduire à zéro sur mobile (sinon burger / langue invisibles) */
    body > nav .nav-right-cluster {
        flex-shrink: 0 !important;
        min-width: min-content !important;
    }
    body > nav .nav-mobile-actions {
        flex-shrink: 0 !important;
        min-width: min-content !important;
    }
    /* Rangée nav : overflow-hidden recoupait le burger à droite, garder seulement le clip vertical si besoin */
    body > nav > div > div.flex.overflow-hidden {
        overflow-x: visible !important;
        overflow-y: hidden;
    }
    body > nav > div > div.flex > div[class*="md:hidden"] {
        flex-shrink: 0;
        min-width: min-content;
    }
    /* Panneau menu ouvert (Tailwind hidden retiré), exclure .mobile-menu-inner (téléchargement.html = display géré en CSS) */
    body > nav #mobileMenu:not(.hidden):not(.mobile-menu-inner) {
        display: block !important;
        visibility: visible !important;
        position: relative;
        z-index: 60;
    }
    
    /* Conteneurs principaux */
    main, section, .max-w-7xl, .max-w-8xl, [class*="max-w"] {
        max-width: 100% !important;
        width: 100%;
    }
    
    
    /* Grilles : largeur fluide (ne pas forcer display:block sur .grid, Tailwind) */
    .grid {
        width: 100%;
        max-width: 100%;
    }

    /* Barre nav : visible = overflow visible (hidden masquait burger/lang à droite). Scroll H bloqué au niveau html/body. */
    body > nav.sticky,
    body > nav {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }
    #mainNav .nav-main-grid {
        min-width: 0;
        width: 100%;
    }
    /* Barre #appeler-devis : masquée par défaut, révélée près du bas (js/mobile-cta-reveal.js) */
    #appeler-devis.mobile-sticky-cta-bar {
        transform: translate3d(0, 110%, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0.28s;
        will-change: transform;
    }
    #appeler-devis.mobile-sticky-cta-bar.mobile-sticky-cta-bar--visible {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body:has(#appeler-devis.mobile-sticky-cta-bar--visible) {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-sticky-cta-bar {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    /* Logo + burger : rétrécir le logo pour éviter le débordement horizontal (sinon overflow-x du body masque le burger) */
    body > nav a.logo {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    /* Accueil (#mainNav) : largeurs gérées dans index.html, autres pages */
    body > nav:not(#mainNav) a.logo {
        max-width: min(44vw, 148px) !important;
    }

    /* Panneau menu (pages génériques) : centrer ; #mainNav = liens alignés à gauche (lisible, cohérent) */
    #mobileMenu, #mobileMenu a {
        text-align: center !important;
    }
    #mainNav #mobileMenu,
    #mainNav #mobileMenu a.mobile-nav-link,
    #mainNav #mobileMenu a:not(.btn-accent-cta) {
        text-align: left !important;
    }
    
    /* Tableaux : scroll horizontal si nécessaire */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Tableaux : ne pas dépasser le viewport (wrappers .overflow-x-auto pour le scroll) */
    main table {
        max-width: 100%;
    }
    
    /* Centrage contenu principal sur mobile */
    main .text-center,
    section .text-center,
    .max-w-4xl.mx-auto,
    .max-w-2xl.mx-auto {
        text-align: center !important;
    }
    
    /* Réduire le contenu sur mobile - éviter la surcharge */
    .hero-card-desc {
        display: none !important;
    }
    
    /* Hero gauche : masquer paragraphes longs, garder titre + slogan */
    .mobile-simplify-hero .hero-intro-p1,
    .mobile-simplify-hero .hero-intro-p2 {
        display: none !important;
    }
    
    /* Limiter les introductions de section à 2 lignes */
    .mobile-line-clamp-2 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Sections : raccourcir les descriptions sur mobile */
    section .max-w-2xl.mx-auto p,
    section .max-w-3xl.mx-auto p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Expertise cards : masquer description, garder titre + lien */
    .expertise-card-desc {
        display: none !important;
    }
}

/* Tablette (768px → 1023px) : paddings latéraux cohérents avec safe-area */
@media (min-width: 768px) and (max-width: 1023px) {
    .max-w-8xl.mx-auto,
    .max-w-7xl.mx-auto {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

/* Logo header : fond transparent ; pas de drop-shadow sur #mainNav (halo clair sur header sombre) */
body > nav a.logo img[src*="logo.png"],
img.nav-logo-darneo {
    mix-blend-mode: normal;
    filter: drop-shadow(0 1px 1px rgba(47, 47, 47, 0.08));
}
#mainNav a.logo img[src*="logo.png"],
#mainNav img.nav-logo-darneo {
    filter: none !important;
    -webkit-filter: none !important;
}
/* Mode sombre : relief léger sauf barre principale #mainNav */
html.dark body > nav:not(#mainNav) a.logo img[src*="logo.png"],
html.dark body > nav:not(#mainNav) img.nav-logo-darneo {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    opacity: 1;
}
html.dark #mainNav a.logo img[src*="logo.png"],
html.dark #mainNav img.nav-logo-darneo {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1;
}

/* Tableaux (prix, comparatifs) dans .article-content, centrage même avec .prose / min-w-full / cache ancien */
.article-content .overflow-x-auto {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}
.article-content .overflow-x-auto > table,
.article-content.prose .overflow-x-auto > table,
.article-content.prose-lg .overflow-x-auto > table {
    display: table !important;
    width: auto !important;
    max-width: min(100%, 42rem) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tableaux blog : lisibilité mobile (scroll horizontal dans le wrapper uniquement) */
@media (max-width: 767px) {
    .article-content .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }

    .article-content .overflow-x-auto > table th,
    .article-content .overflow-x-auto > table td,
    .article-content.prose .overflow-x-auto > table th,
    .article-content.prose .overflow-x-auto > table td,
    .article-content.prose-lg .overflow-x-auto > table th,
    .article-content.prose-lg .overflow-x-auto > table td {
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
        line-height: 1.45;
        vertical-align: top;
    }
}

/* Articles blog : texte justifié (deux bords alignés), sans toucher aux blocs .not-prose (tableaux, CTA…) */
.article-content.prose p,
.article-content.prose-lg p,
.article-content.prose li,
.article-content.prose-lg li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* unset : respecte text-center / alignement défini sur le bloc parent (.not-prose) */
.article-content.prose .not-prose p,
.article-content.prose-lg .not-prose p,
.article-content.prose .not-prose li,
.article-content.prose-lg .not-prose li {
    text-align: unset;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

.article-content.prose blockquote,
.article-content.prose blockquote p,
.article-content.prose-lg blockquote,
.article-content.prose-lg blockquote p {
    text-align: start;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/*
 * Listes « icône + texte » (flex) : ne pas justifier ni couper les mots sur le <li>.
 * Sinon le navigateur crée une boîte flex par nœud (<strong> séparé du texte) → colonnes
 * étroites et césure caractère par caractère sur mobile.
 */
.article-content.prose li.flex,
.article-content.prose-lg li.flex {
    text-align: start;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}
.article-content.prose li.flex > span[class*="material-symbols"],
.article-content.prose-lg li.flex > span[class*="material-symbols"] {
    flex-shrink: 0;
}
/* Bloc de texte après l’icône (souvent un <span> englobant tout le libellé) */
.article-content.prose li.flex > span:not([class*="material-symbols"]),
.article-content.prose-lg li.flex > span:not([class*="material-symbols"]) {
    flex: 1 1 0%;
    min-width: 0;
}

/*
 * Titres mobile (≤767px), après Tailwind sur la plupart des pages ; sur index, lien mobile-base post-Tailwind.
 * !important : passe les utilitaires text-4xl / md:text-5xl sur <h1>–<h4> et .font-display.
 * #hero-visual-intro h1 : laissé à mobile-ux.css (sélecteur #id + !important).
 */
@media (max-width: 767px) {
    h1,
    h1.font-display {
        font-size: clamp(1.45rem, 4vw + 0.75rem, 1.95rem) !important;
        line-height: 1.18 !important;
        letter-spacing: 0.012em;
    }

    h2,
    h2.font-display {
        font-size: clamp(1.28rem, 3.2vw + 0.5rem, 1.75rem) !important;
        line-height: 1.22 !important;
        letter-spacing: 0.015em;
    }

    h3,
    h3.font-display {
        font-size: clamp(1.06rem, 2.1vw + 0.42rem, 1.3rem) !important;
        line-height: 1.28 !important;
    }

    h4,
    h4.font-display {
        font-size: clamp(1rem, 1.55vw + 0.38rem, 1.125rem) !important;
        line-height: 1.32 !important;
    }

    /* Titres de cartes / FAQ souvent en text-xl ou text-2xl sans balise h2 */
    .font-display.text-2xl {
        font-size: clamp(1.1rem, 2vw + 0.48rem, 1.35rem) !important;
        line-height: 1.28 !important;
    }

    .font-display.text-xl {
        font-size: clamp(1.02rem, 1.5vw + 0.42rem, 1.2rem) !important;
        line-height: 1.3 !important;
    }
}

/* Pied de page marine : logo couleurs comme le header (annule invert / mix-blend / opacity des utilitaires) */
footer.bg-primary img[src*="logo.png"],
#main-footer img[src*="logo.png"] {
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* --- css/mobile-ux.css --- */
/**
 * DARNEO Mobile UX – Mobile-only overrides (max-width: 767px)
 * Desktop remains completely unchanged. All rules scoped to @media (max-width: 767px).
 */

@media (max-width: 767px) {

  /* ─── 1. Hero section mobile optimization ─── */
  #hero-visual-intro {
    min-height: 70vh;
  }

  #hero-visual-intro .hero-badge {
    margin-bottom: 0.75rem !important;
    font-size: 0.7rem !important;
  }

  /* Hero premium plein écran (Inter / .premium-hero-h1) */
  #hero-visual-intro h1.premium-hero-h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.35rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.75rem !important;
  }
  #hero-visual-intro h1:not(.premium-hero-h1) {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.75rem !important;
  }

  #hero-visual-intro .hero-cta-primary,
  #hero-visual-intro a[href="devis.html"] {
    min-height: 52px !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }

  /* Barre #appeler-devis : révélation au scroll + padding, voir css/mobile-base.css?v=inter-20260508-2 et js/mobile-cta-reveal.js */

  /* ─── 3. Mobile navigation (mise en page gérée dans partial + mobile-base) ─── */
  #mobileMenu {
    padding: 0;
  }
  #mobileMenu a.mobile-nav-link {
    font-size: 1rem !important;
  }
  #mobileMenu a[href="devis.html"] {
    min-height: 52px;
  }

  /* ─── 4. Mobile services / prestations ─── */
  /* Trust elements – compact on mobile (first grid in #services) */
  #services > div > .grid {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  #services > div > .grid > div {
    padding: 0.875rem !important;
    font-size: 0.875rem;
  }

  #services > div > .grid [class*="text-2xl"],
  #services > div > .grid [class*="text-3xl"],
  #services > div > .grid [class*="text-4xl"] {
    font-size: 1.25rem;
  }

  /* Prestations section header – compact on mobile */
  #prestations-title {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Prestations grid – stacked cards */
  #services .grid > .group {
    padding: 1rem 1.25rem !important;
  }

  /* ─── 5. Mobile process section (bloc primary) ─── */
  #processus .processus-panel {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #processus-header {
    margin-bottom: 1.5rem !important;
  }

  #processus-header h2 {
    font-size: 1.375rem !important;
  }

  #processus-header .processus-header-desc {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  #processus .processus-steps {
    gap: 1.25rem;
  }

  #processus .processus-steps > div > div.processus-step-icon:first-child {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
    margin-bottom: 0.875rem !important;
  }

  #processus .processus-steps .processus-step-glyph {
    font-size: 1.375rem !important;
  }

  #processus .processus-steps .darneo-icon-svg {
    width: 22px !important;
    height: 22px !important;
  }

  #processus .processus-steps h3 {
    font-size: 0.9375rem !important;
    margin-bottom: 0.375rem !important;
  }

  #processus .processus-step-desc {
    font-size: 0.8125rem !important;
  }

  #processus .processus-panel .text-center.mt-10 {
    margin-top: 1.5rem !important;
  }

  #processus .processus-panel a[href="devis.html"] {
    min-height: 48px;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ─── 5b. Pourquoi DARNÉO – header compact sur mobile ─── */
  #pourquoi-darneo-header {
    margin-bottom: 1.5rem !important;
  }

  #pourquoi-darneo-header h2 {
    font-size: 1.375rem !important;
    margin-bottom: 0.5rem !important;
  }

  #pourquoi-darneo-header .pourquoi-darneo-desc {
    display: none;
  }

  #pourquoi-darneo-header .pourquoi-darneo-desc + div {
    margin-top: 0.75rem !important;
  }

  /* Pourquoi DARNÉO engagement cards ─── */
  #pourquoi-darneo .grid {
    gap: 0.75rem;
  }

  #pourquoi-darneo .engagement-card {
    padding: 1rem !important;
  }

  /* ─── 6. Mobile project showcase ─── */
  #projets .grid {
    gap: 1rem;
  }

  #projets article > div:last-child {
    margin-top: 0.75rem;
  }

  /* ─── 7. Mobile testimonials ─── */
  #temoignages .grid > div {
    padding: 1.25rem 1.5rem !important;
  }

  /* ─── 8. Mobile forms ─── */
  #quote-form input,
  #quote-form select,
  #quote-form textarea {
    min-height: 52px !important;
    padding: 0.875rem 1rem !important;
  }

  #quote-form textarea {
    min-height: 120px;
  }

  #quote-form button[type="submit"] {
    min-height: 52px !important;
  }

  /* ─── 9. Mobile spacing & readability ─── */
  main#accueil .max-w-7xl,
  section .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Articles blog : bord à bord sur mobile (supprime le padding latéral de la page + la "carte" blanche) */
  #article-content > nav .max-w-4xl,
  #article-content > header .max-w-4xl,
  #article-content > main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #article-content > main > .max-w-4xl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #article-content > main .article-content {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Blocs de page (pas le micro-padding des cartes : ~py-1…py-4) */
  section,
  main[class*="py-1"] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  header.bg-primary,
  footer.bg-primary {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  #accueil {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  h2 {
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  /* Main hero cards (accueil) – cleaner mobile rhythm */
  #accueil .grid.grid-cols-2 {
    gap: 0.5rem;
  }

  #accueil .grid.grid-cols-2 .group {
    padding: 1rem !important;
  }

  /* ─── 10. Mobile footer – compact + centré ─── */
  #main-footer {
    padding: 1.15rem 1rem 1rem !important;
  }

  #main-footer .max-w-6xl > div:first-child {
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  #main-footer .order-1 p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    line-height: 1.4;
  }

  #main-footer .order-1 p + p {
    margin-top: 0.35rem !important;
    line-height: 1.35;
  }

  #main-footer nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 0.1rem 0.75rem !important;
    width: 100%;
    max-width: 17rem;
    margin-inline: auto;
  }

  #main-footer nav a {
    min-height: 2rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0;
    font-size: 0.8125rem;
  }

  #main-footer .order-3 {
    align-items: center !important;
    text-align: center !important;
    gap: 0.35rem !important;
  }

  #main-footer .order-3 a {
    justify-content: center !important;
  }

  #main-footer .footer-trust {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  #main-footer .footer-trust .grid {
    gap: 0.55rem !important;
  }

  #main-footer .mt-10.pt-6 {
    margin-top: 0.75rem !important;
    padding-top: 0.65rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.55rem !important;
  }

  /* ─── 11. FAQ mobile ─── */
  #faq details {
    padding: 1rem 1.25rem !important;
  }

  #faq summary {
    font-size: 0.9375rem;
  }
}

/* --- css/darneo-main-nav-unified.css --- */
/* Menu principal DARNÉO (aligné index. barre beige / liens + CTA Étude personnalisée) */
/* Bloc HTML partagé : partials/darneo-main-nav.html. propagation : python3 scripts/apply-darneo-main-nav.py */
#mainNav:not(.darneo-react-header) {
    background-color: #F5EFE7;
    background-image: linear-gradient(180deg, #faf6f0 0%, #F5EFE7 45%, #efe7dc 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    border-bottom-color: rgba(198, 169, 107, 0.32) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 22px rgba(31, 26, 23, 0.08);
}
.dark #mainNav:not(.darneo-react-header) {
    background-color: #2c2824;
    background-image: linear-gradient(180deg, #35312c 0%, #2c2824 50%, #252220 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
#mainNav:not(.darneo-react-header) .nav-desktop-links a {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: #1e1e1e;
    text-shadow: none;
}
.dark #mainNav:not(.darneo-react-header) .nav-desktop-links a {
    color: #f5efe7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#mainNav:not(.darneo-react-header) .nav-desktop-links a:hover {
    color: #c6a96b;
}

/* stretch : chaque zone (logo, liens, CTA) a la hauteur de la barre ; le contenu est centré verticalement dedans = alignement net avec le texte */
#mainNav .nav-main-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    direction: ltr;
}
#mainNav .nav-main-grid > a.logo {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
}
#mainNav .nav-main-grid .nav-right-cluster {
    align-self: stretch;
    min-width: 0;
    min-height: 0;
}
#mainNav .logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(182px, calc(100vw - 10.5rem));
}
#mainNav .logo.darneo-stitch-logo {
    max-width: min(220px, calc(100vw - 10.5rem));
}
@media (min-width: 640px) {
    #mainNav .logo {
        max-width: 10.5rem;
    }
    #mainNav .logo.darneo-stitch-logo {
        max-width: 12.5rem;
    }
}
@media (min-width: 768px) {
    #mainNav .logo {
        max-width: 9.5rem;
    }
    #mainNav .logo.darneo-stitch-logo {
        max-width: 11.5rem;
    }
}
@media (min-width: 1024px) {
    #mainNav .logo {
        max-width: 11rem;
    }
    #mainNav .logo.darneo-stitch-logo {
        max-width: 13rem;
    }
}
@media (min-width: 1280px) {
    #mainNav .logo {
        max-width: 12rem;
    }
    #mainNav .logo.darneo-stitch-logo {
        max-width: 14rem;
    }
}
html[dir="rtl"] #mainNav .darneo-stitch-logo {
    flex-direction: row-reverse;
}
@media (max-width: 767px) {
    #mainNav .nav-desktop-center {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #mainNav .nav-desktop-links {
        gap: 0.3rem !important;
    }
    #mainNav:not(.darneo-react-header) .nav-desktop-links a {
        font-size: 0.75rem !important;
        letter-spacing: 0 !important;
    }
    #mainNav .logo {
        max-width: 8.5rem;
    }
    #mainNav .darneo-nav-cta-desktop {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        font-size: 0.6875rem !important;
    }
}
@media (min-width: 1024px) and (max-width: 1535px) {
    #mainNav .nav-desktop-links {
        gap: 0.35rem !important;
    }
    #mainNav:not(.darneo-react-header) .nav-desktop-links a {
        font-size: 0.8125rem !important;
        letter-spacing: 0 !important;
    }
    #mainNav .logo {
        max-width: 9.5rem;
    }
    #mainNav .nav-right-cluster {
        margin-left: 0.35rem;
    }
}
@media (min-width: 768px) {
    #mainNav .nav-main-grid .nav-desktop-center {
        align-self: stretch;
        display: flex !important;
    }
    #mainNav .nav-desktop-center {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        align-items: center;
        display: flex !important;
        overflow: hidden;
    }
    #mainNav .nav-desktop-links {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }
    #mainNav .nav-right-cluster {
        flex: 0 0 auto;
        flex-shrink: 0;
        overflow: visible;
    }
    #mainNav .nav-mobile-actions {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #mainNav {
        z-index: 100;
        position: sticky;
        background-color: rgba(250, 246, 240, 0.97) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 12px rgba(31, 26, 23, 0.06) !important;
        border-bottom-color: rgba(198, 169, 107, 0.28) !important;
        padding-top: env(safe-area-inset-top, 0px);
    }
    .dark #mainNav {
        background-color: rgba(44, 40, 36, 0.96) !important;
        border-bottom-color: rgba(198, 169, 107, 0.25) !important;
    }
    #mainNav > div.max-w-8xl {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
    #mainNav .nav-main-grid {
        height: 5rem;
        min-height: 5rem;
        gap: 0.5rem;
    }
    #mainNav .logo.darneo-stitch-logo {
        max-width: min(200px, calc(100vw - 8.5rem));
    }
    #mainNav .darneo-stitch-logo .font-playfair {
        font-size: 0.95rem !important;
        letter-spacing: 0.12em !important;
    }
    #mainNav #mobileMenuBtn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    /* Logo SVG charbon / blanc selon contexte — pas de multiply (masquait le Dar blanc) */
    #mainNav a.logo img.nav-logo-darneo {
        mix-blend-mode: normal !important;
    }

    /* Masquer le CTA "Étude personnalisée" sur mobile (barre du haut) */
    #mainNav .darneo-nav-cta-desktop {
        display: none !important;
    }
}

/* Empêche le scroll du body quand le tiroir menu est ouvert */
body.mobile-menu-open {
    overflow: hidden;
}

/* Navigation unifiée (fetch) : lien actif */
#mainNav .nav-desktop-links a.active,
#mainNav #mobileMenu a.active {
    color: var(--color-primary) !important;
}
.dark #mainNav .nav-desktop-links a.active,
.dark #mainNav #mobileMenu a.active {
    color: var(--color-accent) !important;
}

/* --- css/darneo-luxury.css --- */
/**
 * DARNEO. couche « maison de luxe » (tokens + overrides globaux).
 * Chargé après darneo-design-system.css pour harmoniser Tailwind + composants.
 */

:root {
    /* Palette (chaude, discrète, premium) */
    --lux-bg: #f5efe6;
    --lux-bg-deep: #eae0d2;
    --lux-bg-elevated: #fdfbf8;
    --lux-ink: #2b2622;
    --lux-ink-muted: #6e6258;
    --lux-espresso: #1f1a17;
    --lux-champagne: #b8966a;
    --lux-champagne-hover: #9d7f56;
    --lux-champagne-soft: rgba(184, 150, 106, 0.22);
    --lux-border: rgba(43, 38, 34, 0.09);
    --lux-shadow-soft: 0 18px 50px rgba(31, 26, 23, 0.08);
    --lux-radius-sm: 0.375rem;
    --lux-radius-md: 0.625rem;
    --lux-radius-lg: 0.875rem;
    /* Aligné sur darneo-design-system.css : Newsreader + IBM Plex Sans */
    --lux-serif: var(--font-serif, "Newsreader", Georgia, serif);
    --lux-sans: var(--font-sans, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

html.dark {
    --lux-bg: #141210;
    --lux-bg-deep: #1c1815;
    --lux-bg-elevated: #1f1b17;
    --lux-ink: #f4efe8;
    --lux-ink-muted: rgba(244, 239, 232, 0.65);
    --lux-border: rgba(255, 255, 255, 0.08);
    --lux-shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Typographie éditoriale (Inter unique, premium real-estate) */
body {
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    font-weight: 400;
    line-height: 1.7;
}
body .font-display {
    font-family: var(--lux-serif);
    letter-spacing: -0.015em;
}
body h1.font-display {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
}
body h2.font-display,
body h3.font-display {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
}
body .darneo-section-subtitle {
    color: var(--lux-ink-muted);
    line-height: 1.65;
}

/* Nav premium */
#mainNav.darneo-react-header {
    background-color: rgba(253, 251, 248, 0.92) !important;
    border-bottom: 1px solid var(--lux-border) !important;
    box-shadow: 0 1px 0 rgba(184, 150, 106, 0.12);
}
html.dark #mainNav.darneo-react-header {
    background-color: rgba(20, 18, 16, 0.92) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
#mainNav .nav-desktop-links a:hover {
    color: var(--lux-champagne) !important;
}
#mainNav .darneo-react-nav-devis {
    border-color: rgba(184, 150, 106, 0.55) !important;
    border-radius: var(--lux-radius-md) !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}
#mainNav .darneo-react-nav-devis:hover {
    background-color: rgba(184, 150, 106, 0.12) !important;
    border-color: var(--lux-champagne) !important;
    box-shadow: 0 6px 22px rgba(31, 26, 23, 0.1);
}

/* Cartes & icônes */
.darneo-card-feature {
    border-left: none !important;
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius-lg) !important;
    box-shadow: var(--lux-shadow-soft) !important;
    background: var(--lux-bg-elevated) !important;
}
.dark .darneo-card-feature {
    background: var(--lux-bg-elevated) !important;
}
.darneo-icon-service {
    background: rgba(31, 26, 23, 0.06) !important;
    color: var(--lux-champagne) !important;
    border: 1px solid var(--lux-champagne-soft) !important;
    border-radius: var(--lux-radius-md) !important;
}
.dark .darneo-icon-service {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--lux-champagne) !important;
}
.processus-panel {
    background: linear-gradient(
        150deg,
        #C17A5A 0%,
        var(--color-primary) 44%,
        #1c1411 100%
    ) !important;
    border-radius: var(--lux-radius-lg) !important;
    border: 1px solid rgba(255, 236, 214, 0.2) !important;
    box-shadow: 0 22px 50px rgba(34, 22, 18, 0.34);
}
/* Pastilles processus luxe : verre dépoli + champagne (surcharge les utilitaires Tailwind si besoin) */
.processus-step-icon--lux {
    color: var(--lux-champagne) !important;
    border: 2px solid rgba(184, 150, 106, 0.52) !important;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.processus-step-glyph {
    color: var(--lux-champagne) !important;
    font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
    -webkit-font-smoothing: antialiased;
}
.processus-step-icon:not(.processus-step-icon--lux) {
    color: var(--lux-champagne) !important;
    border-color: rgba(184, 150, 106, 0.5) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none;
}

/* Formulaires. champs plus haut de gamme */
#quote-form input:not([type="checkbox"]),
#quote-form textarea,
#quote-form select {
    border-radius: var(--lux-radius-md) !important;
    border-color: var(--lux-border) !important;
    background-color: var(--lux-bg-elevated) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#quote-form input:focus,
#quote-form textarea:focus,
#quote-form select:focus {
    border-color: rgba(184, 150, 106, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(184, 150, 106, 0.15) !important;
    outline: none !important;
}

/* Hero CTA (accueil) */
.hero-cta-primary {
    border-radius: var(--lux-radius-md) !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
    text-decoration: none !important;
}
.hero-cta-primary *,
#hero-visual-intro .hero-cta-primary,
#hero-visual-intro .hero-cta-primary * {
    text-decoration: none !important;
}

/* --- css/darneo-premium-landing.css --- */
/**
 * DARNEO Premium Landing. aligné maquette Stitch (crème, or, charbon, enchaînement des sections).
 * Page d’accueil : body.darneo-home-premium
 */

.darneo-home-premium {
    --premium-charcoal: #1E1E1E;
    --premium-gold: #C6A96B;
    --premium-gold-soft: rgba(198, 169, 107, 0.32);
    --premium-cream: #F5EFE7;
    --premium-cream-deep: #EFE7DC;
    --premium-white-soft: #FFFFFF;
}

/* ─── Fonds alternés (scroll long type Stitch) ─── */
.darneo-home-premium #estimation-ia-promo {
    background: linear-gradient(180deg, var(--premium-white-soft) 0%, var(--premium-cream) 100%) !important;
}
.darneo-home-premium #accueil.darneo-main-intro {
    background: var(--premium-cream) !important;
}
.darneo-home-premium #expertise-atouts {
    background: #fff !important;
}
html.dark .darneo-home-premium #expertise-atouts {
    background: var(--premium-charcoal) !important;
}

/* Pourquoi : bande claire + cartes blanches (comme maquette) */
.darneo-home-premium #pourquoi-darneo {
    background: linear-gradient(180deg, var(--premium-cream) 0%, var(--premium-white-soft) 100%) !important;
}
html.dark .darneo-home-premium #pourquoi-darneo {
    background: linear-gradient(180deg, #1e242c 0%, var(--premium-charcoal) 100%) !important;
}
.darneo-home-premium #pourquoi-darneo .engagement-card {
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(28, 43, 58, 0.06);
}
html.dark .darneo-home-premium #pourquoi-darneo .engagement-card {
    background: rgba(255, 255, 255, 0.06) !important;
}

.darneo-home-premium #temoignages {
    background: #fff !important;
}
html.dark .darneo-home-premium #temoignages {
    background: #151a20 !important;
}

/* Bandeau chiffres (entre avis et services) */
.darneo-home-premium #darneo-trust-strip {
    background: var(--premium-cream-deep) !important;
}
html.dark .darneo-home-premium #darneo-trust-strip {
    background: #1e242c !important;
}

.darneo-home-premium #services {
    background: var(--premium-white-soft) !important;
}
html.dark .darneo-home-premium #services {
    background: linear-gradient(180deg, var(--premium-charcoal) 0%, #151a20 100%) !important;
}

.darneo-home-premium #processus {
    background: var(--premium-cream) !important;
}
html.dark .darneo-home-premium #processus {
    background: #12161c !important;
}

.darneo-home-premium #contact,
.darneo-home-premium #faq {
    background: var(--premium-white-soft) !important;
}
html.dark .darneo-home-premium #contact,
html.dark .darneo-home-premium #faq {
    background: #1a1f26 !important;
}

/* Nav : couleurs portées par #mainNav (design-system, fond beige) */
.darneo-home-premium #mainNav.darneo-react-header {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: rgba(198, 169, 107, 0.22) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
html.dark .darneo-home-premium #mainNav.darneo-react-header {
    background-color: transparent !important;
}

/* Double bordure or. bloc estimation (équivalent .gold-outline React) */
.darneo-home-premium .darneo-gold-outline {
    position: relative;
    border: 1.5px solid rgba(198, 169, 107, 0.45);
}
.darneo-home-premium .darneo-gold-outline::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(198, 169, 107, 0.28);
    border-radius: inherit;
    pointer-events: none;
}
html.dark .darneo-home-premium .darneo-gold-outline {
    border-color: rgba(198, 169, 107, 0.55);
}

/* Hero */
.darneo-home-premium #hero-visual-intro .hero-badge {
    display: none !important;
}
/* Sous-titre hero : italique caps (App.tsx). classe .hero-react-kicker */
.darneo-home-premium #hero-visual-intro .hero-react-kicker {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* Cartes « sérénité » (#accueil) */
.darneo-home-premium #accueil .darneo-card-feature {
    border-left: none !important;
    border: 1px solid var(--premium-gold-soft) !important;
    box-shadow: 0 8px 32px rgba(28, 43, 58, 0.06);
    background: #fff !important;
}
html.dark .darneo-home-premium #accueil .darneo-card-feature {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(198, 169, 107, 0.28) !important;
}

.darneo-home-premium #accueil .darneo-icon-service {
    background: var(--premium-charcoal) !important;
    color: var(--premium-gold) !important;
    border: 1px solid var(--premium-gold-soft);
    border-radius: 0.5rem !important;
}

/* Bloc estimation IA (fond crème + ombre ; bordure double via .darneo-gold-outline) */
.darneo-home-premium #estimation-ia-promo .darneo-gold-outline {
    box-shadow: 0 20px 50px rgba(28, 43, 58, 0.1);
}
html.dark .darneo-home-premium #estimation-ia-promo .darneo-gold-outline {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Expertise */
.darneo-home-premium #expertise-atouts .darneo-card-feature {
    border: 1px solid var(--premium-gold-soft) !important;
    border-left: none !important;
    background: #fff !important;
    box-shadow: 0 8px 28px rgba(28, 43, 58, 0.05);
}
html.dark .darneo-home-premium #expertise-atouts .darneo-card-feature {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Stats confiance */
.darneo-home-premium .darneo-trust-stats > div {
    border: 1px solid var(--premium-gold-soft) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}
html.dark .darneo-home-premium .darneo-trust-stats > div {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Grille prestations */
.darneo-home-premium .darneo-prestations-grid a {
    border-color: rgba(198, 169, 107, 0.25) !important;
    background: #fff !important;
}
html.dark .darneo-home-premium .darneo-prestations-grid a {
    background: rgba(255, 255, 255, 0.04) !important;
}

.darneo-home-premium #services .bg-white\/50 {
    border: 1px solid var(--premium-gold-soft) !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Témoignages */
.darneo-home-premium #temoignages .rounded-xl.shadow-sm,
.darneo-home-premium #temoignages .border-l-4 {
    border: 1px solid var(--premium-gold-soft) !important;
    border-left-width: 3px !important;
    border-left-color: rgba(198, 169, 107, 0.65) !important;
    box-shadow: 0 16px 40px rgba(31, 26, 23, 0.06) !important;
    border-radius: 0.75rem !important;
}

/* Processus. terracotta → taupe profond, palette charte darneo */
.darneo-home-premium #processus .processus-panel {
    background: linear-gradient(
        150deg,
        #C17A5A 0%,
        #8B6B5A 45%,
        #3A2E28 100%
    ) !important;
    border: 1px solid rgba(255, 236, 214, 0.2);
}

.darneo-home-premium #processus .processus-step-icon--lux {
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 100%
    ) !important;
    border-color: rgba(198, 169, 107, 0.5) !important;
    color: var(--premium-gold) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.darneo-home-premium #processus .processus-step-glyph {
    color: var(--premium-gold) !important;
}
.darneo-home-premium #processus .processus-step-icon:not(.processus-step-icon--lux) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--premium-gold) !important;
    color: var(--premium-gold) !important;
}

/* Contact / FAQ */
.darneo-home-premium #contact [class*="bg-white"] {
    border-color: rgba(198, 169, 107, 0.22) !important;
}

.darneo-home-premium #faq details {
    border-color: rgba(198, 169, 107, 0.22) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}
html.dark .darneo-home-premium #faq details {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Footer */
.darneo-home-premium #main-footer {
    background: var(--premium-charcoal) !important;
}

/* Titres de section : barre or sous H2 principaux */
.darneo-home-premium .section-title-accent::after {
    opacity: 1;
    height: 3px;
    max-width: 4rem;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Système typographique (inspiré Financial Times) — site-wide
   - Titres : Newsreader
   - Corps/UI : IBM Plex Sans
   ============================================================ */
:root {
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: var(--font-sans);
  --font-display: var(--font-serif);

  --text-h1: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);   /* mobile≈1.875 → desktop≈2.75 */
  --text-h2: clamp(1.5rem, 1.05rem + 1.6vw, 2.125rem);   /* mobile≈1.5   → desktop≈2.125 */
  --text-h3: 1.625rem;
  --text-h4: 1.25rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* Titres */
h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-serif) !important;
}
h1, h2, h3, h4, h5, h6 {
  color: #1a1a1a !important;
}
.font-display.text-white,
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white {
  color: #fff !important;
}

/* Hero article blog : titres blancs sur photo / dégradé (priorité sur règle h1 ci-dessus) */
#article-content > header.relative h1,
#article-content > header.relative h1.font-display {
  color: #ffffff !important;
}

/* Hero accueil : titres blancs sur photo */
#hero-visual-intro h1,
#hero-visual-intro h1.font-display {
  color: #ffffff !important;
}
#hero-visual-intro h2,
#hero-visual-intro h2.font-display {
  color: rgba(255, 255, 255, 0.95) !important;
}
h1 { font-size: var(--text-h1) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; }
h2 { font-size: var(--text-h2) !important; line-height: 1.2 !important;  letter-spacing: -0.01em !important; font-weight: 600 !important; }
h3 { font-size: var(--text-h3) !important; line-height: 1.3 !important;  font-weight: 600 !important; }
h4 { font-size: var(--text-h4) !important; line-height: 1.4 !important;  font-weight: 600 !important; }

/* Corps “dense & compact” */
p, li, td, th { font-size: var(--text-body); line-height: 1.6; font-weight: 400; }

/* UI : boutons / nav / footer */
nav, nav a,
button, label, caption,
input, textarea, select,
footer, footer a {
  font-family: var(--font-sans) !important;
}

/* Liens : pas de soulignement sur tout le site */
a,
a:hover,
a:focus,
a:active,
.prose a,
.article-content a,
#article-body a,
.hover\:underline:hover {
  text-decoration: none !important;
}
.blog-hub-maillage a,
.blog-hub-maillage a:hover {
  text-decoration: none !important;
}

/* Catégories / tags : style “FT” */
.text-xs.uppercase,
.uppercase.tracking-wide,
.tracking-wide.uppercase {
  font-size: var(--text-caption) !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* Meta */
.text-sm, .text-[0.875rem] { font-size: var(--text-small); }

/* Material Symbols must stay on icon font */
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }

/* --- FAQ accordéon unifié (articles + quartiers) --- */
.darneo-faq__list {
  margin: 0;
  padding: 0;
}

.darneo-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.25rem 0;
}

.dark .darneo-faq__item {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.darneo-faq__item:last-child {
  border-bottom: none;
}

.darneo-faq__trigger {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading, var(--font-serif)) !important;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text, #1E293B);
}

.dark .darneo-faq__trigger {
  color: #F8FAFC;
}

.darneo-faq__question {
  flex: 1;
  min-width: 0;
}

.darneo-faq__chevron {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-neutral, #8A8A8A);
  transition: transform 0.22s ease;
}

.darneo-faq__trigger[aria-expanded="true"] .darneo-faq__chevron {
  transform: rotate(180deg);
}

.darneo-faq__panel {
  overflow: hidden;
}

.darneo-faq__panel.is-collapsed {
  display: none;
}

.darneo-faq__answer {
  padding-top: 0.875rem;
  font-family: var(--font-body, var(--font-sans)) !important;
  font-size: 1rem;
  line-height: 1.6;
  color: #5c5c5c;
}

.dark .darneo-faq__answer {
  color: #A8A29E;
}

.darneo-faq__answer p {
  margin: 0;
}

.darneo-faq__trigger:hover .darneo-faq__question {
  color: var(--color-primary, #A65A3A);
}

.dark .darneo-faq__trigger:hover .darneo-faq__question {
  color: var(--color-accent, #C6A96B);
}

/* Pages quartier — chapô, sommaire, FAQ (modèle éditorial FT) */
main .article-content > p.text-lg:first-of-type,
main .article-content blockquote,
main .article-content blockquote p {
  font-family: var(--font-serif) !important;
}

main .article-content nav[aria-label*="Sommaire"] > p {
  font-family: var(--font-serif) !important;
}

/* Ancres sommaire — dégagement sous la nav sticky */
#article-body h2[id],
#article-body h3[id] {
  scroll-margin-top: 6rem;
}

.darneo-faq-stack > details summary,
.darneo-faq-stack > details summary span,
.darneo-faq-stack > details > p {
  font-family: var(--font-sans) !important;
}

main .article-content.prose-lg p,
main .article-content.prose-lg li,
main .article-content.prose-lg td,
main .article-content.prose-lg th {
  font-family: var(--font-sans) !important;
}

main .article-content.prose-lg h1,
main .article-content.prose-lg h2,
main .article-content.prose-lg h3,
main .article-content.prose-lg h4,
main .article-content.prose-lg .font-display {
  font-family: var(--font-serif) !important;
}

/* Priorité sur utilitaire Tailwind .font-display (historiquement Inter) */
.font-display {
  font-family: var(--font-serif) !important;
}