/* =========================================================
   Guimberteau Rénovation — Design System
   Palette : navy franc + cuivre chaud
   Les couleurs --principale / --accent sont injectees
   depuis config.php (voir header.php).
   ========================================================= */

/* ---- Variables ---- */
:root {
    --principale: #2b5278;
    --accent: #e8863a;
    --accent-hover: #d47530;
    --accent-clair: #fdf3eb;
    --sombre: #1c3a52;
    --texte: #2d3239;
    --gris: #6b7280;
    --gris-clair: #f3ede6;
    --bord: #ddd6cc;
    --blanc: #ffffff;
    --ombre: 0 2px 12px rgba(28,58,82,.08);
    --ombre-lg: 0 8px 30px rgba(28,58,82,.12);
    --rayon: 10px;
    --rayon-sm: 6px;
    --largeur: 1140px;
    --font-titre: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-texte: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --transition: .2s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
    font-family: var(--font-texte);
    color: var(--texte);
    line-height: 1.65;
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--principale); text-decoration: none; transition: color var(--transition) }
a:hover { color: var(--accent) }
h1, h2, h3, h4 { font-family: var(--font-titre); line-height: 1.25; color: var(--sombre) }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800 }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700 }
h3 { font-size: 1.2rem; font-weight: 700 }
p { margin-bottom: 0 }
ul { list-style: none; padding: 0; margin: 0 }

/* ---- Layout ---- */
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px }
.conteneur-etroit { max-width: 760px }
.centre { text-align: center; margin-top: 24px }

/* ---- Boutons ---- */
.btn {
    display: inline-block; padding: 13px 24px; border-radius: var(--rayon-sm);
    font-weight: 600; font-size: .95rem; cursor: pointer;
    border: 2px solid transparent; transition: all var(--transition);
    text-align: center; text-decoration: none; line-height: 1.4;
}
.btn:hover { text-decoration: none; transform: translateY(-1px) }
.btn:active { transform: translateY(0) }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent) }
.btn-accent:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover) }
.btn-principale { background: var(--principale); color: #fff; border-color: var(--principale) }
.btn-principale:hover { background: var(--sombre); color: #fff; border-color: var(--sombre) }
.btn-outline { background: transparent; color: #fff; border-color: #fff }
.btn-outline:hover { background: #fff; color: var(--principale) }
.btn-outline-sombre { background: transparent; color: var(--principale); border-color: var(--principale) }
.btn-outline-sombre:hover { background: var(--principale); color: #fff }
.btn-clair { background: #fff; color: var(--principale); border-color: #fff }
.btn-clair:hover { background: var(--gris-clair); color: var(--principale) }
.btn-lg { padding: 15px 32px; font-size: 1.05rem }
.btn-sm { padding: 9px 16px; font-size: .88rem }
.btn-bloc { display: block; width: 100%; margin-top: 16px }
.btn-nav { padding: 9px 18px }
.nav .btn-accent.btn-nav { color: #fff; background: var(--accent); border-color: var(--accent) }
.nav .btn-accent.btn-nav:hover { color: #fff; background: var(--accent-hover); border-color: var(--accent-hover) }

/* ---- Topbar ---- */
.topbar { background: var(--accent); color: #fff; font-size: .84rem; letter-spacing: .01em }
.topbar-inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 7px 20px; flex-wrap: wrap;
}
.topbar-item { display: flex; align-items: center; gap: 6px }
.topbar-tel { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 5px }
.topbar-tel:hover { color: var(--sombre) }

/* ---- Entete (header sticky) ---- */
.entete {
    background: #fff; border-bottom: 1px solid var(--bord);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.entete-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; gap: 24px;
}
.logo { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0 }
.logo:hover { text-decoration: none }
.logo-img {
    height: 90px; width: auto; object-fit: contain;
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 6px }
.nav > a, .nav-parent > .nav-lien {
    color: var(--texte); font-weight: 500; font-size: .94rem;
    padding: 8px 12px; border-radius: var(--rayon-sm);
    transition: all var(--transition); text-decoration: none;
}
.nav > a:hover, .nav-parent > .nav-lien:hover,
.nav > a.actif, .nav-parent > .nav-lien.actif { color: var(--accent); background: rgba(232,134,58,.06) }
.nav-pro { color: var(--principale) !important; font-weight: 700 !important }

/* Dropdown menu */
.nav-parent { position: relative }
.nav-parent > .nav-lien { cursor: default }
.nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: var(--ombre-lg); min-width: 240px; padding: 8px 0; z-index: 110;
}
.nav-parent:hover > .nav-dropdown { display: block }
.nav-dropdown a {
    display: block; padding: 10px 18px; color: var(--texte);
    font-size: .92rem; font-weight: 500; transition: all var(--transition);
}
.nav-dropdown a:hover { background: var(--gris-clair); color: var(--accent) }

/* Menu burger mobile */
.menu-toggle, .menu-burger { display: none }
.menu-burger {
    font-size: 1.5rem; cursor: pointer; color: var(--principale);
    background: none; border: none; padding: 6px; line-height: 1;
}

/* ---- Hero ---- */
.hero {
    background: linear-gradient(135deg, #2b5278 0%, #1c3a52 60%, #1a344c 100%);
    color: #fff; padding: 72px 0 80px; position: relative; overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(transparent, rgba(28,58,82,.15));
}
.hero-pro { background: linear-gradient(135deg, #2b5278, #1c3a52) }
.hero-inner {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px;
    align-items: center; position: relative; z-index: 1;
}
.hero-surtitre {
    text-transform: uppercase; letter-spacing: 1.5px; font-size: .78rem;
    color: var(--accent); font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.hero-surtitre::before {
    content: ''; width: 32px; height: 2px; background: var(--accent); flex-shrink: 0;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: 18px }
.hero-desc {
    font-size: 1.1rem; color: #dce8f0; margin-bottom: 28px;
    max-width: 540px; line-height: 1.7;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap }
.hero-visuel { display: flex; justify-content: center }
.hero-placeholder {
    width: 100%; height: 320px; border-radius: var(--rayon);
    background-image:url(../../assets/img/reno.png);background-size: 100%;background-position: 50% 69%;
    display: flex; align-items: center; justify-content: center;
    font-style: italic; text-align: center; padding: 20px;
}

/* ---- Reassurance ---- */
.reassurance {
    background: #fff; box-shadow: var(--ombre-lg); position: relative; z-index: 5;
    max-width: var(--largeur); margin: -32px auto 0; border-radius: var(--rayon);
    border: 1px solid var(--bord);
}
.reassurance-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0; padding: 0;
}
.reassure-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 14px; border-right: 1px solid var(--bord);
}
.reassure-item:last-child { border-right: none }
.reassure-ico { font-size: 1.6rem; margin-bottom: 8px; line-height: 1; color: var(--accent) }
.reassure-item strong { font-size: .92rem; color: var(--sombre); margin-bottom: 2px }
.reassure-item small { color: var(--gris); font-size: .8rem }

/* ---- Sections ---- */
.section { padding: 72px 0 }
.section-alt { background: var(--gris-clair) }
.section-titre { text-align: center; max-width: 640px; margin: 0 auto 44px }
.section-titre h2 { margin-bottom: 10px }
.section-titre p { color: var(--gris); font-size: 1.05rem; line-height: 1.6 }

/* ---- Breadcrumb ---- */
.breadcrumb { padding: 14px 0 0; font-size: .85rem; color: rgba(255,255,255,.7) }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none }
.breadcrumb li::after { content: '/'; margin-left: 6px; color: rgba(255,255,255,.4) }
.breadcrumb li:last-child::after { content: none }
.breadcrumb a { color: rgba(255,255,255,.7) }
.breadcrumb a:hover { color: #fff }
.breadcrumb li:last-child { color: #fff; font-weight: 600 }

/* ---- Cartes ---- */
.cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.cartes-3 { grid-template-columns: repeat(3, 1fr) }
.cartes-2 { grid-template-columns: repeat(2, 1fr) }
.carte {
    background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: 28px 24px; text-decoration: none; color: var(--texte);
    transition: all var(--transition); box-shadow: var(--ombre);
}
.carte:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--ombre-lg); border-left: 3px solid var(--accent) }
.carte-fixe { cursor: default }
.carte-fixe:hover { transform: none; border-color: var(--bord); box-shadow: var(--ombre) }
.carte-ico { font-size: 2rem; display: block; margin-bottom: 14px }
.carte h3 { margin-bottom: 8px; font-size: 1.15rem }
.carte p { color: var(--gris); font-size: .93rem; line-height: 1.55 }
.carte .btn { margin-top: 16px }

/* ---- Double cible ---- */
.cibles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.cible-bloc {
    background: #fff; border-radius: var(--rayon); padding: 36px;
    box-shadow: var(--ombre); border: 1px solid var(--bord);
}
.cible-pro {
    background: linear-gradient(135deg, #2b5278, #1c3a52);
    color: #fff; border: none;
}
.cible-pro h2, .cible-pro p { color: #fff }
.cible-pro .liste-check li { color: #deeaf3 }
.cible-bloc h2 { margin-bottom: 12px }
.cible-bloc p { margin-bottom: 16px }

/* ---- Listes a puces check ---- */
.liste-check { list-style: none; margin: 0 0 22px; padding: 0 }
.liste-check li {
    position: relative; padding-left: 28px; margin-bottom: 10px;
    color: var(--texte); line-height: 1.5;
}
.liste-check li::before {
    content: ''; position: absolute; left: 0; top: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); opacity: .15;
}
.liste-check li::after {
    content: '\2713'; position: absolute; left: 3px; top: 0;
    color: var(--accent); font-weight: 700; font-size: .85rem;
}
.cible-pro .liste-check li::before { background: #fff; opacity: .15 }
.cible-pro .liste-check li::after { color: #f0c08a }

/* ---- Galerie ---- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.galerie-large { grid-template-columns: repeat(3, 1fr) }
.galerie-item {
    background: #fff; border-radius: var(--rayon); overflow: hidden;
    box-shadow: var(--ombre); border: 1px solid var(--bord);
    transition: transform var(--transition);
}
.galerie-item:hover { transform: translateY(-3px) }
.galerie-img { aspect-ratio: 4/3; overflow: hidden; background: var(--gris-clair) }
.galerie-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s }
.galerie-item:hover .galerie-img img { transform: scale(1.03) }
.galerie-placeholder {
    aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
    background: var(--gris-clair); color: var(--gris); font-style: italic;
}
.galerie-legende { padding: 16px 18px }
.galerie-legende strong { display: block; font-size: 1rem }
.galerie-legende small { color: var(--gris); font-size: .85rem }
.galerie-legende p { color: var(--gris); font-size: .9rem; margin-top: 6px }

/* ---- Avant / Après showcase ---- */
.avant-apres-showcase {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-bottom: 32px;
}
.avant-apres-item {
    position: relative; border-radius: var(--rayon); overflow: hidden;
    box-shadow: var(--ombre); border: 1px solid var(--bord);
}
.avant-apres-item img { width: 100%; height: 280px; object-fit: cover; display: block }
.avant-apres-label {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 14px; border-radius: 4px;
    font-size: .8rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.avant-label { background: rgba(28,58,82,.85); color: #fff }
.apres-label { background: var(--accent); color: #fff }

/* ---- Vidéos (Shorts) ---- */
.videos-grille {
    display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.video-item {
    width: 280px; border-radius: var(--rayon); overflow: hidden;
    box-shadow: var(--ombre); border: 1px solid var(--bord); background: #000;
}
.video-item iframe {
    width: 100%; aspect-ratio: 9/16; display: block; border: none;
}

/* ---- Avant / apres (slider) ---- */
.avant-apres { position: relative; aspect-ratio: 4/3; overflow: hidden; user-select: none }
.avant-apres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.aa-avant { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 3px solid #fff }
.aa-avant img { width: auto; min-width: 100% }
.aa-curseur {
    position: absolute; bottom: 14px; left: 5%; width: 90%; cursor: ew-resize;
    -webkit-appearance: none; appearance: none; background: transparent; z-index: 5;
}
.aa-curseur::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: ew-resize;
}
.aa-label {
    position: absolute; top: 10px; background: rgba(28,58,82,.85);
    color: #fff; font-size: .75rem; padding: 4px 10px; border-radius: 4px;
    font-weight: 600; letter-spacing: .3px; z-index: 2;
}
.aa-label-avant { left: 10px }
.aa-label-apres { right: 10px }

/* ---- Filtres ---- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px }
.filtre {
    padding: 9px 20px; border: 1px solid var(--bord); border-radius: 30px;
    background: #fff; color: var(--texte); font-weight: 500; font-size: .92rem;
    transition: all var(--transition);
}
.filtre:hover { text-decoration: none; border-color: var(--accent); color: var(--accent) }
.filtre.actif { background: var(--principale); color: #fff; border-color: var(--principale) }

/* ---- Temoignages ---- */
.temoignages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.temoignage {
    background: #fff; border-radius: var(--rayon); padding: 28px;
    box-shadow: var(--ombre); border: 1px solid var(--bord);
}
.etoiles { color: #e8963a; font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px }
.temoignage p { font-style: italic; color: var(--texte); margin-bottom: 16px; line-height: 1.6 }
.temoignage cite { font-style: normal; font-weight: 600; font-size: .9rem }
.temoignage cite span { color: var(--gris); font-weight: 400 }

/* ---- Prestations (page) ---- */
.presta-bloc {
    display: grid; grid-template-columns: 160px 1fr; gap: 32px;
    align-items: start; padding: 40px 0;
    border-bottom: 1px solid var(--bord);
}
.presta-bloc:last-child { border-bottom: none }
.presta-inverse { grid-template-columns: 1fr 160px }
.presta-inverse .presta-visuel { order: 2 }
.presta-visuel {
    font-size: 4rem; text-align: center; background: var(--gris-clair);
    border-radius: var(--rayon); padding: 28px; line-height: 1;
}
.presta-contenu h2 { margin-bottom: 12px }
.presta-contenu > p { color: var(--gris); margin-bottom: 16px; line-height: 1.6 }
.presta-prix {
    display: inline-block; background: var(--gris-clair); padding: 8px 16px;
    border-radius: var(--rayon-sm); font-weight: 700; color: var(--principale);
    font-size: .95rem; margin-top: 8px;
}

/* ---- Page prestation detaillee ---- */
.presta-detail { max-width: 800px; margin: 0 auto }
.presta-detail h2 { margin: 32px 0 12px }
.presta-detail p { color: var(--gris); margin-bottom: 12px; line-height: 1.65 }
.presta-detail .liste-check { margin: 16px 0 24px }

/* ---- Engagements ---- */
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.engagement {
    background: #fff; border-radius: var(--rayon); padding: 24px;
    box-shadow: var(--ombre); border: 1px solid var(--bord);
    text-align: center;
}
.engagement-ico {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(232,134,58,.12); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin: 0 auto 12px;
}
.engagement strong { display: block; margin-bottom: 6px; font-size: 1rem }
.engagement p { color: var(--gris); font-size: .9rem }

/* ---- Process / etapes ---- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; counter-reset: etape }
.etape {
    position: relative; padding: 28px 24px 28px 24px;
    background: #fff; border-radius: var(--rayon);
    box-shadow: var(--ombre); border: 1px solid var(--bord);
    counter-increment: etape;
}
.etape::before {
    content: counter(etape); position: absolute; top: -12px; left: 20px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
}
.etape h3 { margin-bottom: 6px; font-size: 1.05rem }
.etape p { color: var(--gris); font-size: .9rem }

/* ---- Page entete ---- */
.page-entete {
    background: linear-gradient(135deg, #2b5278, #1c3a52);
    padding: 16px 0 52px; color: #fff;
}
.page-entete h1 { color: #fff; margin-bottom: 8px }
.page-entete p { color: #d4e3ed; font-size: 1.1rem }

/* ---- A propos ---- */
.apropos-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start }
.apropos-grille h2 { margin: 28px 0 12px }
.apropos-grille h2:first-child { margin-top: 0 }
.apropos-grille p { color: var(--gris); margin-bottom: 12px; line-height: 1.65 }
.apropos-cote {
    background: var(--gris-clair); border-radius: var(--rayon); padding: 28px;
    position: sticky; top: 80px;
}
.apropos-cote h3 { margin: 0 0 14px; font-size: 1.1rem }
.apropos-cote h3:nth-of-type(n+2) { margin-top: 24px }
.fiche { list-style: none; margin: 0 0 8px; padding: 0 }
.fiche li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 8px 0; border-bottom: 1px dashed var(--bord);
}
.fiche li span { color: var(--gris) }
.timeline { margin: 24px 0; padding-left: 24px; border-left: 3px solid var(--accent) }
.timeline-item { padding: 0 0 20px 0; position: relative }
.timeline-item::before {
    content: ''; position: absolute; left: -30px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); border: 3px solid #fff;
}
.timeline-item:last-child { padding-bottom: 0 }
.timeline-date { font-weight: 700; color: var(--principale); font-size: .9rem }

/* ---- Formulaires ---- */
.formulaire {
    background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: 32px; box-shadow: var(--ombre);
}
.formulaire label {
    display: block; margin-bottom: 18px; font-weight: 600;
    font-size: .92rem; color: var(--sombre);
}
.formulaire input, .formulaire select, .formulaire textarea {
    width: 100%; margin-top: 6px; padding: 12px 14px;
    border: 1px solid var(--bord); border-radius: var(--rayon-sm);
    font-size: 1rem; font-family: inherit; font-weight: 400;
    color: var(--texte); background: #fff; transition: border-color var(--transition);
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,134,58,.12);
}
.formulaire input::placeholder, .formulaire textarea::placeholder { color: #8a9ba6 }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-mention { font-size: .82rem; color: var(--gris); margin-top: 12px; font-weight: 400 }
.hp { position: absolute; left: -9999px; top: -9999px; overflow: hidden }

/* Multi-step form */
.form-etapes { display: flex; gap: 4px; margin-bottom: 28px }
.form-etape-dot {
    flex: 1; height: 4px; background: var(--bord); border-radius: 2px;
    transition: background var(--transition);
}
.form-etape-dot.active { background: var(--accent) }
.form-etape-dot.done { background: var(--principale) }
.form-step { display: none }
.form-step.active { display: block }
.form-step-titre { font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; color: var(--sombre) }
.form-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 20px }

/* Upload photos */
.upload-zone {
    border: 2px dashed var(--bord); border-radius: var(--rayon); padding: 28px;
    text-align: center; cursor: pointer; transition: all var(--transition);
    background: var(--gris-clair);
}
.upload-zone:hover { border-color: var(--accent); background: rgba(232,134,58,.04) }
.upload-zone p { color: var(--gris); font-size: .92rem; margin-top: 8px }
.upload-zone .upload-ico { font-size: 2rem; color: var(--gris) }
.upload-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px }
.upload-thumb {
    width: 72px; height: 72px; border-radius: var(--rayon-sm); overflow: hidden;
    border: 1px solid var(--bord); position: relative;
}
.upload-thumb img { width: 100%; height: 100%; object-fit: cover }
.upload-thumb button {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
    border: none; cursor: pointer; font-size: .7rem; line-height: 1;
}

/* ---- Alertes ---- */
.alerte {
    padding: 18px 20px; border-radius: var(--rayon-sm);
    margin-bottom: 20px; font-weight: 500; line-height: 1.5;
}
.alerte-succes { background: #e8f5ed; color: #1a7a3a; border: 1px solid #b8e2c6 }
.alerte-erreur { background: #fdf0f0; color: #b02a2a; border: 1px solid #f3c2c2 }

/* ---- Contact ---- */
.contact-grille { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start }
.contact-infos {
    background: var(--gris-clair); border-radius: var(--rayon); padding: 28px;
    position: sticky; top: 80px;
}
.contact-infos h3 { margin-bottom: 14px }
.contact-infos p { margin-bottom: 12px; color: var(--gris); line-height: 1.6 }
.contact-tel a { font-size: 1.25rem; font-weight: 800; color: var(--principale) }
.contact-tel a:hover { color: var(--accent) }
.contact-reassure {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bord);
}
.contact-reassure span { font-weight: 600; font-size: .9rem; color: var(--sombre) }

/* ---- FAQ ---- */
.faq-liste { max-width: 800px; margin: 0 auto }
.faq-item {
    border: 1px solid var(--bord); border-radius: var(--rayon);
    margin-bottom: 10px; overflow: hidden; background: #fff;
}
.faq-question {
    width: 100%; padding: 18px 48px 18px 22px; border: none; background: none;
    text-align: left; font-size: 1rem; font-weight: 600; color: var(--sombre);
    cursor: pointer; position: relative; font-family: inherit; line-height: 1.4;
}
.faq-question::after {
    content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 1.3rem; color: var(--accent); font-weight: 700;
    transition: transform var(--transition);
}
.faq-item.open .faq-question::after { content: '\2212' }
.faq-question:hover { color: var(--accent) }
.faq-reponse {
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.faq-reponse-inner {
    padding: 0 22px 18px; color: var(--gris); line-height: 1.65; font-size: .95rem;
}

/* ---- Zone intervention ---- */
.zone-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start }
.zone-carte {
    border-radius: var(--rayon);
   min-height: 300px; display: flex; align-items: center;
    justify-content: center; color: var(--gris); font-style: italic;
}
.communes-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;
}
.commune-lien {
    padding: 10px 14px; background: #fff; border: 1px solid var(--bord);
    border-radius: var(--rayon-sm); color: var(--texte); font-size: .92rem;
    transition: all var(--transition); text-decoration: none; font-weight: 500;
}
.commune-lien:hover { border-color: var(--accent); color: var(--accent); background: rgba(232,134,58,.04) }

/* ---- Ville (page SEO) ---- */
.ville-hero {
    background: linear-gradient(135deg, #2b5278, #1c3a52);
    padding: 48px 0 56px; color: #fff;
}
.ville-hero h1 { color: #fff; margin-bottom: 8px }
.ville-hero p { color: #d4e3ed; font-size: 1.1rem }
.ville-contenu { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start }
.ville-sidebar {
    background: var(--gris-clair); border-radius: var(--rayon); padding: 28px;
    position: sticky; top: 80px;
}
.ville-sidebar h3 { margin-bottom: 14px; font-size: 1.05rem }
.ville-sidebar .btn { margin-top: 16px }
.villes-voisines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.villes-voisines a {
    padding: 6px 12px; background: #fff; border: 1px solid var(--bord);
    border-radius: 20px; font-size: .85rem; color: var(--texte);
}
.villes-voisines a:hover { border-color: var(--accent); color: var(--accent) }

/* ---- CTA final ---- */
.cta-final {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff; padding: 48px 0;
}
.cta-final-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
}
.cta-final h2 { color: #fff; margin-bottom: 6px }
.cta-final p { color: rgba(255,255,255,.92) }
.cta-final-btns { display: flex; gap: 12px; flex-wrap: wrap }
.cta-final .btn-clair { background: #fff; color: var(--sombre); border-color: #fff }
.cta-final .btn-clair:hover { background: var(--sombre); color: #fff; border-color: var(--sombre) }
.cta-final .btn-outline { color: #fff; border-color: #fff }
.cta-final .btn-outline:hover { background: #fff; color: var(--accent) }

/* ---- Texte legal ---- */
.texte-legal h2 { margin: 28px 0 10px; font-size: 1.25rem }
.texte-legal p { color: var(--gris); margin-bottom: 14px; line-height: 1.65 }

/* ---- Footer ---- */
.pied { background: #1c3a52; color: #dce2e8; padding: 52px 0 0 }
.pied-grille {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px; padding-bottom: 40px;
}
.pied h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px }
.pied ul { list-style: none; padding: 0; margin: 0 }
.pied li { margin-bottom: 8px }
.pied a { color: #dce2e8; transition: color var(--transition) }
.pied a:hover { color: var(--accent) }
.pied-reassure { margin-top: 14px; line-height: 1.9; color: #b0bcc6; font-size: .9rem }
.pied-legal {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
    font-size: .82rem; color: #a5b5c0; line-height: 1.7;
}
.pied-bas {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px 0; font-size: .85rem;
}
.pied-bas .conteneur {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.pied-bas a { color: #dce2e8 }

/* ---- Bouton flottant (mobile) ---- */
.fab-tel, .fab-whatsapp {
    position: fixed; bottom: 20px; width: 56px; height: 56px; border-radius: 50%;
    color: #fff; display: none; align-items: center; justify-content: center;
    font-size: 1.4rem; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 60;
    text-decoration: none; transition: transform var(--transition);
}
.fab-tel { right: 20px; background: var(--accent) }
.fab-whatsapp { right: 86px; background: #25d366 }
.fab-tel:hover, .fab-whatsapp:hover { transform: scale(1.08); color: #fff }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr }
    .hero-visuel { display: none }
    .hero { padding: 56px 0 64px }
    .reassurance-grille { grid-template-columns: repeat(2, 1fr) }
    .reassure-item { border-right: none; border-bottom: 1px solid var(--bord) }
    .reassure-item:nth-child(even) { border-right: none }
    .cartes, .cartes-3, .galerie, .galerie-large, .temoignages, .engagements {
        grid-template-columns: 1fr 1fr;
    }
    .avant-apres-showcase { grid-template-columns: 1fr 1fr }
    .video-item { width: 240px }
    .cibles, .contact-grille, .apropos-grille, .zone-grille, .ville-contenu {
        grid-template-columns: 1fr;
    }
    .presta-bloc, .presta-inverse { grid-template-columns: 1fr }
    .presta-inverse .presta-visuel { order: 0 }
    .presta-visuel { font-size: 3rem; padding: 20px }
    .pied-grille { grid-template-columns: 1fr 1fr }
}

@media (max-width: 722px) {
    .topbar-inner { justify-content: center; text-align: center; padding: 6px 16px }
    .topbar-item { display: none }
    .topbar-item:last-child { display: flex }

    /* Menu mobile */
    .menu-burger { display: block }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 20px 20px;
        border-bottom: 1px solid var(--bord); box-shadow: var(--ombre-lg);
    }
    .menu-toggle:checked ~ .nav { display: flex }
    .nav > a, .nav-parent > .nav-lien { padding: 14px 0; /*border-bottom: 1px solid var(--bord)*/ }
    .nav-parent > .nav-dropdown {
        position: static; border: none; box-shadow: none; padding: 0 0 0 16px; min-width: auto;
    }
    .nav-parent:hover > .nav-dropdown { display: block }
    .nav-dropdown a { padding: 10px 0; border-bottom: 1px solid var(--bord) }
    .btn-nav { margin-top: 10px; text-align: center }

    .logo-img { height: 65px }
    .hero { padding: 40px 0 48px }
    .hero h1 { font-size: 1.8rem }
    .page-entete { padding: 32px 0 36px }

    .cartes, .cartes-3, .cartes-2, .galerie, .galerie-large,
    .temoignages, .engagements, .etapes { grid-template-columns: 1fr }
    .champ-double { grid-template-columns: 1fr }
    .avant-apres-showcase { grid-template-columns: 1fr }
    .avant-apres-item img { height: 200px }
    .video-item { width: 220px }
    .reassurance-grille { grid-template-columns: 1fr }
    .reassurance { margin-top: 0; border-radius: 0; border-left: none; border-right: none }
    .cta-final-inner { flex-direction: column; text-align: center }
    .pied-grille { grid-template-columns: 1fr }

    .fab-tel, .fab-whatsapp { display: flex }
    .section { padding: 48px 0 }
    .section-titre { margin-bottom: 32px }
    .communes-grille { grid-template-columns: 1fr 1fr }
}

/* ---- Print ---- */
@media print {
    .topbar, .entete, .cta-final, .pied, .fab-tel, .fab-whatsapp,
    .nav, .menu-burger, .btn { display: none !important }
    body { font-size: 12pt; color: #000 }
    .section { padding: 20px 0 }
}