/* 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 : Inter unique (corps + titres) */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-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;
}

/*
 * 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: underline !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,
.font-serif,
.font-playfair,
.font-display,
body *:not(.material-symbols-outlined):not(.material-icons):not(.material-icons-outlined),
button,
input,
textarea,
select,
label,
caption,
nav,
nav a {
    font-family: var(--font-ui) !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 {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* 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);
}