/* === Template Néel Fraisse — Plombier Chauffagiste Montbrison === */
/* Variables injectées dynamiquement dans le <style> du header.php */

body {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--sitetext, #33373d);
    background: var(--sitebg, #ffffff);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Inter', sans-serif);
    color: var(--sitetext, #33373d);
    line-height: 1.15;
}

a { color: var(--primary, #C92227); text-decoration: none; transition: color .15s; }
a:hover { color: var(--sitetext, #33373d); }

/* Container */
.container-nf { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Fixed wrapper (topbar + header restent fixes en haut) */
.nf-sticky-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
/* Compenser la hauteur du header fixe */
.nf-header-spacer {
    height: 100px; /* ajusté par JS */
}

/* Top bar */
.nf-topbar {
    background: var(--sitetext, #33373d);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    padding: 8px 0;
}
.nf-topbar a { color: rgba(255,255,255,0.8); }
.nf-topbar a:hover { color: #fff; }

/* Header nav */
.nf-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nf-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}
.nf-nav-links { display: none; gap: 0; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .nf-nav-links { display: flex; } }
.nf-nav-links > li { position: relative; }
.nf-nav-links > li > a {
    display: block; padding: 8px 14px;
    font-size: 14px; font-weight: 500; color: var(--sitetext, #33373d);
    transition: color .15s;
}
.nf-nav-links > li > a:hover { color: var(--primary, #C92227); }

/* Dropdown mega-menu */
.nf-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    min-width: 260px; padding: 8px 0; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.nf-nav-links > li:hover > .nf-dropdown { display: block; }
.nf-dropdown a {
    display: block; padding: 8px 20px; font-size: 13.5px;
    color: var(--sitetext, #33373d); transition: background .1s;
}
.nf-dropdown a:hover { background: #f5f5f5; color: var(--primary, #C92227); }

/* Hamburger */
.nf-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.nf-burger span { width: 24px; height: 2px; background: var(--sitetext, #33373d); display: block; transition: all .2s; }
@media (min-width: 1024px) { .nf-burger { display: none; } }

/* Mobile menu */
.nf-mobile-menu { display: none; background: #fff; border-top: 1px solid #e5e7eb; padding: 16px 0; }
.nf-mobile-menu.is-open { display: block; }
.nf-mobile-menu a { display: block; padding: 10px 24px; font-size: 15px; color: var(--sitetext); }
.nf-mobile-menu .nf-submenu { padding-left: 20px; }
.nf-mobile-menu .nf-submenu a { font-size: 13.5px; color: var(--secondary); }

/* Buttons */
.btn-nf {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 6px;
    font-size: 14px; font-weight: 600;
    transition: all .2s; cursor: pointer; border: 2px solid transparent;
    text-decoration: none;
}
.btn-primary-nf { background: var(--primary, #C92227); color: #fff; border-color: var(--primary); }
.btn-primary-nf:hover { background: #a51d21; border-color: #a51d21; color: #fff; }
.btn-outline-nf { background: transparent; color: var(--primary, #C92227); border-color: var(--primary); }
.btn-outline-nf:hover { background: var(--primary); color: #fff; }
.btn-white-nf { background: #fff; color: var(--primary, #C92227); border-color: #fff; }
.btn-white-nf:hover { background: rgba(255,255,255,0.9); }
.btn-tel { background: var(--sitetext, #33373d); color: #fff; border-color: var(--sitetext); }
.btn-tel:hover { background: #1a1d20; color: #fff; }

/* Cards service */
.card-nf {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 28px; transition: transform .25s, box-shadow .25s;
    display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.card-nf:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -12px rgba(0,0,0,0.15); }
.card-nf .card-icon {
    width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    background: var(--primary, #C92227);
}
.card-nf h3 { font-size: 20px; margin: 0; }
.card-nf p { font-size: 14.5px; color: var(--secondary, #798B99); margin: 0; line-height: 1.55; }
.card-nf .card-link {
    margin-top: auto; font-size: 13px; font-weight: 600;
    color: var(--primary); display: inline-flex; align-items: center; gap: 6px;
}
.card-nf .card-link:hover { gap: 10px; }

/* FAQ */
.nf-faq-item { border-bottom: 1px solid #e5e7eb; }
.nf-faq-q {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 15px;
    background: none; border: none; width: 100%; text-align: left;
    color: var(--sitetext);
}
.nf-faq-q .ico { font-size: 20px; transition: transform .2s; color: var(--primary); }
.nf-faq-item.open .nf-faq-q .ico { transform: rotate(45deg); }
.nf-faq-a { display: none; padding: 0 0 18px; font-size: 14.5px; color: var(--secondary); line-height: 1.65; }
.nf-faq-item.open .nf-faq-a { display: block; }

/* Formulaire */
.nf-field { margin-bottom: 10px; }
.nf-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--sitetext); }
.nf-field input, .nf-field textarea, .nf-field select {
    width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    font: inherit; font-size: 15px; transition: border-color .15s;
}
.nf-field input:focus, .nf-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,34,39,0.1); }
.nf-field textarea { min-height: 60px; resize: vertical; }

/* Page hero (fond image + overlay) */
.nf-page-hero {
    position: relative; min-height: 380px; display: flex; align-items: center;
    background-size: cover; background-position: center; color: #fff; padding: 60px 0;
}
.nf-page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 100%);
}

/* Arguments (3 colonnes) */
.nf-argument {
    text-align: center; padding: 32px 24px;
    background: #fff; border-radius: 10px; border: 1px solid #e5e7eb;
}
.nf-argument h3 {
    font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--primary);
}
.nf-argument p { font-size: 14.5px; color: #6b7280; margin: 0; line-height: 1.6; }

/* Split formulaire (contenu gauche + form droite) */
/* ⚠️ `align-items: stretch` et NON `start` : le formulaire est en `position: sticky`,
   et un élément collant ne peut glisser que dans la hauteur de SON CONTENEUR. Avec
   `start`, la colonne de droite s'arrêtait à la hauteur de la carte (670px) — le
   sticky était déclaré mais n'avait aucune piste, donc ne collait jamais. En
   `stretch`, la colonne suit la hauteur du texte et la piste passe à ~3000px. */
.nf-split-form { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; }
@media (max-width: 768px) { .nf-split-form { grid-template-columns: 1fr; } }
.nf-form-card {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px 22px; position: sticky; top: 116px;
    max-height: calc(100vh - 124px); overflow-y: auto;
}
.nf-form-card h2 { font-size: 17px !important; margin: 0 0 10px !important; }
.nf-form-card button[type=submit] { padding: 12px 18px; }
/* Le consentement RGPD reste lisible mais cesse de peser 78 px. */
.nf-form-card form > label { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
@media (max-width: 768px) {
    .nf-form-card { max-height: none; overflow-y: visible; }
}

/* CTA bandeau */
.nf-cta-banner {
    background: var(--primary, #C92227); color: #fff;
    padding: 48px 0; text-align: center;
}
.nf-cta-banner h2 { color: #fff; margin: 0 0 8px; }
.nf-cta-banner p { color: rgba(255,255,255,0.85); margin: 0 0 24px; }

/* Footer */
.nf-footer { background: var(--sitetext, #33373d); color: rgba(255,255,255,0.75); padding: 48px 0; }
.nf-footer h4 { color: #fff; font-size: 15px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.05em; }
.nf-footer a { color: rgba(255,255,255,0.65); font-size: 13.5px; display: block; padding: 3px 0; transition: color .15s; }
.nf-footer a:hover { color: #fff; }
.nf-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0 0; margin-top: 32px;
    font-size: 12px; color: rgba(255,255,255,0.5);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* Badges certification */
.nf-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; background: rgba(255,255,255,0.15);
    border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
    backdrop-filter: blur(4px);
}

/* Content prose — style éditorial complet */
.nf-content { font-size: 16px; line-height: 1.8; color: var(--sitetext); max-width: 820px; }
.nf-content h2 {
    font-size: 26px; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--sitetext);
    padding-bottom: 10px; border-bottom: 2px solid var(--primary); display: inline-block;
}
.nf-content h3 {
    font-size: 20px; font-weight: 600; margin: 2rem 0 .75rem; color: var(--sitetext);
    padding-left: 14px; border-left: 3px solid var(--primary);
}
.nf-content h4 { font-size: 17px; font-weight: 600; margin: 1.5rem 0 .5rem; }
.nf-content p { margin-bottom: 1.2rem; color: #4b5563; }
.nf-content strong { color: var(--sitetext); font-weight: 600; }
.nf-content ul, .nf-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.nf-content ul { list-style: none; padding-left: 0; }
.nf-content ul li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; color: #4b5563; }
.nf-content ul li::before {
    content: ''; position: absolute; left: 0; top: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); opacity: 0.7;
}
.nf-content ol li { margin-bottom: .6rem; color: #4b5563; }
.nf-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.nf-content a:hover { color: var(--sitetext); }
.nf-content img { border-radius: 8px; margin: 1.5rem 0; max-width: 100%; height: auto; }
.nf-content blockquote {
    border-left: 4px solid var(--primary); padding: 1.2rem 1.5rem; margin: 2rem 0;
    background: #f9fafb; border-radius: 0 8px 8px 0; font-style: italic; color: #6b7280;
}
.nf-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 15px; }
.nf-content th { background: var(--primary); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 14px; }
.nf-content td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.nf-content tr:nth-child(even) td { background: #f9fafb; }
.nf-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

/* Grille de cartes — produite au build par nf_enrichir_contenu() à partir des
   suites « titre court + un paragraphe ». Le <h3> est conservé tel quel, seule
   sa présentation change ; le filet rouge de .nf-content h3 est donc neutralisé. */
/* Bannière France Rénov' (arrêté du 07/07/2026, annexe II-II : « bannière web,
   verticale ou horizontale », CLIQUABLE). Le bloc entier est un <a>. Fond blanc
   dans un pied de page sombre : l'article 2 impose que le message « se distingue
   formellement du message publicitaire ou promotionnel ». */
.nf-footer a.nf-frenov {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #fff; border-radius: 10px; padding: 16px 20px;
    margin: 28px 0 4px; text-decoration: none;
    border: 1px solid #e5e7eb; transition: box-shadow .18s ease;
}
.nf-footer a.nf-frenov:hover { box-shadow: 0 6px 20px rgba(17,24,39,.12); }
.nf-frenov-logo { flex: 0 0 auto; width: 168px; height: auto; }
/* Couleurs requalifiées avec `.nf-footer` : sinon `.nf-footer a` (0,1,1) l'emporte
   et peint le message en blanc sur blanc — donc invisible, donc non conforme. */
.nf-footer .nf-frenov-msg {
    flex: 1 1 300px; min-width: 0;
    font-size: 14px; line-height: 1.55; font-weight: 500;
    color: #000091;                      /* bleu Marianne */
    text-decoration: underline; text-underline-offset: 3px;
}
.nf-footer a.nf-frenov:hover .nf-frenov-msg { color: #1212ff; }
@media (max-width: 560px) {
    .nf-footer a.nf-frenov { gap: 12px; padding: 14px 16px; }
    .nf-frenov-logo { width: 140px; }
}

.nf-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 16px; margin: 1.8rem 0 2.2rem;
}
.nf-card {
    background: #fff; border: 1px solid #e8eaed; border-radius: 12px;
    padding: 22px 20px 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nf-card:hover {
    transform: translateY(-3px); border-color: var(--primary);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .09);
}
.nf-card-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px; margin-bottom: 14px;
    background: rgba(201, 34, 39, .09); color: var(--primary); font-size: 18px;
}
.nf-content .nf-card h3 {
    font-size: 16.5px; line-height: 1.35; font-weight: 700;
    margin: 0 0 8px; padding: 0; border: 0;
}
.nf-content .nf-card h3::before { content: none; }
.nf-content .nf-card p {
    margin: 0; font-size: 14.5px; line-height: 1.62; color: #5b6270;
}
@media (prefers-reduced-motion: reduce) {
    .nf-card { transition: none; }
    .nf-card:hover { transform: none; }
}
/* Espacer le premier h2 du contenu */
.nf-content > h2:first-child { margin-top: 0; }

/* Article image */
.article-image-h2 { width: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; margin: 1rem 0 1.75rem; }

/* Grid */
.grid-nf { display: grid; gap: 24px; }
@media (min-width: 640px) { .grid-nf-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-nf-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-nf-4 { grid-template-columns: repeat(4, 1fr); } }

/* Zone intervention */
.nf-communes { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-communes span {
    padding: 6px 14px; background: #f3f4f6; border-radius: 999px;
    font-size: 13px; color: var(--sitetext);
}

/* Hero badges (certifications, labels) */
.nf-hero-badges { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.nf-hero-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    padding: 8px 14px;
}
.nf-hero-badge img { height: 40px; width: auto; object-fit: contain; }
.nf-hero-badge span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; }

/* Hero split (texte + carousel)
   Colonne de droite à 40 % : les photos d'équipe sont en 750x938 (ratio 0,80) et
   `object-fit: cover` recadre sur l'axe où le cadre est le plus large. À 50/50 le
   cadre faisait 552x600 (ratio 0,92), donc plus large que la source : le rognage
   tombait en haut et en bas et coupait les têtes. À 40 % il fait ~461x600
   (ratio 0,77), plus ÉTROIT que la source : le rognage bascule sur les côtés, la
   hauteur du visage est intégralement conservée. */
.nf-hero-split { display: grid; grid-template-columns: 60% 40%; gap: 48px; align-items: center; }
.nf-hero-carousel { border-radius: 12px; overflow: hidden; max-height: 600px; }
.nf-swiper { width: 100%; height: 600px; }
.nf-swiper .swiper-slide img { border-radius: 0;
    /* Cadrage vers le HAUT : les photos d'équipe ne sont pas toutes au même format
       (750x938 et 750x1000 coexistent), donc un léger rognage vertical subsiste sur
       les plus hautes. Le pousser vers le bas des images garantit que ce sont les
       pieds qui partent, jamais les visages — et protège aussi les photos que Fred
       ajoutera plus tard, quel que soit leur format. */
    object-position: 50% 20%; }

/* Responsive */
@media (max-width: 768px) {
    .nf-cta-banner { padding: 32px 0; }
    h1 { font-size: 28px !important; }
    .nf-hero-split { grid-template-columns: 1fr; gap: 24px; }
    .nf-hero-carousel, .nf-swiper { max-height: 300px; height: 300px; }
}

/* Bloc de contact des pages de service : coordonnées | carte | formulaire.
   Trois colonnes ne tiennent qu'au-delà de 1024px — en dessous on passe à deux,
   puis à une seule, sinon le formulaire devient inutilisable au doigt. */
@media (max-width: 1024px) {
    .nf-contact-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
    .nf-contact-grid { grid-template-columns: 1fr !important; }
}

:root {
    --color-primary:   #c92227;
    --color-secondary: #798b99;
    --color-text:      #33373d;
    --color-bg:        #ffffff;
    --color-muted:     #f7f8fa;
    --color-border:    #ebedf1;
    --color-premium:   #b8860b;
    --radius: 0;
    --card-shadow: none;
    --card-border: 1px solid var(--color-border);
    --card-bg: var(--color-bg);
    --btn-radius: 3px;
    --img-radius: 0;
}

/* ── Base responsive (généré automatiquement) ── */
*, *::before, *::after { box-sizing: border-box; }

/* Empêche le débordement horizontal.
   ⚠️ `clip` et NON `hidden` : en CSS, un axe en `hidden` force l'autre à `auto`,
   ce qui fait du corps de page une boîte de défilement — et casse tout
   `position: sticky` du site sans rien signaler. Constaté le 19/08/2026 sur
   COMIGO : la scène de l'animation défilait au lieu de rester figée.
   `clip` bloque le même débordement sans créer de boîte de défilement. */
html, body { overflow-x: clip; max-width: 100%; }

/* Images et vidéos toujours dans leur conteneur */
img, video { max-width: 100%; height: auto; }
/* iframe : largeur 100% mais hauteur respectée (ex. Google Maps) */
iframe, embed, object { max-width: 100%; }

/* Tableaux : scroll horizontal si besoin, jamais de débordement */
table { max-width: 100%; }
.zone-content table,
.page-content table,
.article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Texte long (URL, code) : retour à la ligne forcé */
.zone-content,
.page-content,
.article-content {
    overflow-wrap: break-word;
    word-break: break-word;
}