/* ============================================
   FACADES PASSION - Design moderne & artisanal
   Palette : brun terre + creme + peche + sauge
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette fournie */
    --brown: #8a5744;
    --brown-dark: #5c3a2d;
    --brown-darker: #3a2418;
    --cream: #f9eddd;
    --cream-dark: #f0e0c8;
    --peach: #fbe4c3;
    --peach-warm: #f2c998;
    /* Accent moderne */
    --sage: #7a9488;
    --sage-dark: #566b62;
    --text: #2a1810;
    --text-light: #6b4e3d;
    --text-muted: #8a7363;
    --white: #ffffff;
    --border: rgba(138, 87, 68, 0.15);

    /* Brun des boutons : plus fonce que l'accent --brown, pour du contraste
       (10:1 avec du blanc). --brown reste la couleur des liens et des
       intitules, ou il doit rester lisible sur le fond creme. */
    --btn: #5c3a2d;
    --btn-hover: #3a2418;
    --btn-shadow: rgba(92, 58, 45, 0.28);

    --font-heading: 'Fraunces', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --container: 1280px;
    --header-height: 88px;
    --radius: 4px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 12px rgba(58, 36, 24, 0.06);
    --shadow-md: 0 8px 30px rgba(58, 36, 24, 0.08);
    --shadow-lg: 0 20px 60px rgba(58, 36, 24, 0.12);
}

html { scroll-behavior: smooth; font-size: 16px; }

/* overflow-x: clip et non hidden, et pose sur html AUTANT que sur body.

   « hidden » sur body seul ne suffit pas : sur mobile, si le contenu depasse,
   le navigateur elargit quand meme le viewport de mise en page et la page
   devient deplacable lateralement -- c'est ainsi que le panneau du menu,
   pourtant ferme, apparaissait sur le cote.

   « clip » rogne sans creer de conteneur de defilement, contrairement a
   « hidden ». C'est essentiel ici : un conteneur de defilement casserait le
   position:sticky de l'en-tete. */
html { overflow-x: clip; }

/* « clip » n'existe pas avant Safari 16. Les navigateurs plus anciens
   retombent sur « hidden » : la protection est conservee, au prix d'un
   conteneur de defilement qui peut gener le position:sticky -- compromis
   acceptable, ces versions etant devenues marginales. */
@supports not (overflow: clip) {
    html { overflow-x: hidden; }
    body { overflow-x: hidden; }
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--cream);
    line-height: 1.7;
    overflow-x: clip;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--brown);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover { color: var(--brown-dark); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--btn);
    color: var(--white);
    padding: 12px 20px;
    z-index: 9999;
}
.skip-link:focus { left: 10px; top: 10px; }

*:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.15;
    color: var(--brown-darker);
    letter-spacing: -0.015em;
    font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96;
}

h1 em, h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--brown);
}

p { line-height: 1.75; }

/* ============================================
   BOUTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    /* transform exclu : il est pilote par GSAP (effet magnetique).
       Une transition dessus rendrait le suivi du curseur mou. */
    transition: background 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--btn);
    color: var(--white);
    box-shadow: 0 4px 20px var(--btn-shadow);
}
.btn-primary:hover {
    background: var(--btn-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--btn-shadow);
}

.btn-ghost {
    background: transparent;
    color: var(--brown-darker);
    border: 1.5px solid var(--btn);
}
.btn-ghost:hover {
    background: var(--btn);
    color: var(--white);
}

.btn-full { width: 100%; padding: 18px; font-size: 0.95rem; }

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    background: var(--brown-darker);
    color: var(--cream);
    font-size: 0.82rem;
    padding: 10px 0;
    letter-spacing: 0.2px;
}
.top-bar-inner {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.top-bar-item {
    color: var(--cream);
    transition: color 0.3s ease;
}
.top-bar-item:hover { color: var(--peach); }
.top-bar-separator { opacity: 0.3; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo .site-title-link {
    display: flex;
    flex-direction: column;
    color: var(--brown-darker);
    line-height: 1;
}
.logo-main {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.logo-tagline {
    font-size: 0.7rem;
    color: var(--brown);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 500;
}
/* Montage embleme + logotype.
   L'embleme est l'illustration recadree sur le buste et le jet ; sa decoupe
   ronde est dans le canal alpha du fichier, pas en border-radius, pour qu'elle
   suive l'image partout. Le logotype est le lettrage detoure du visuel
   d'origine (nom seul). L'en-tete fait 88 px : 60 px laissent de l'air. */
.site-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 340px;
}
.brand-mark {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
}
.brand-word {
    height: 26px;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
}
.custom-logo { max-height: 60px; width: auto; }   /* repli */

/* Juste au-dessus du seuil du burger, on resserre un peu pour que le menu
   horizontal ne frole pas le logo. */
@media (max-width: 1320px) {
    .site-brand { gap: 12px; }
    .brand-word { height: 24px; }
    .nav-list { gap: 24px; }
}
@media (max-width: 560px) {
    .site-brand { gap: 10px; }
    .brand-mark { width: 46px; height: 46px; }
    .brand-word { height: 21px; }
}
@media (max-width: 400px) {
    .brand-mark { width: 40px; height: 40px; }
    .brand-word { height: 18px; }
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
}
.nav-list a {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--brown-darker);
    padding: 8px 0;
    position: relative;
    letter-spacing: 0.3px;
}
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brown);
    transition: width 0.3s ease;
}
.nav-list a:hover::after { width: 100%; }

/* Bouton « Devis gratuit » du menu.
   WordPress pose la classe sur le <li>, le menu de repli la pose sur le <a> :
   on couvre les deux cas. Surtout, on style le <a> lui-meme — sinon la regle
   `.nav-list a { color: ... }` reprend la main et le texte reste sombre sur
   fond brun (contraste 2,4:1, illisible). */
.nav-list li.nav-cta {
    background: none;
    padding: 0;
}
.nav-list li.nav-cta > a,
.nav-list a.nav-cta {
    display: inline-block;
    background: var(--btn);
    color: var(--white);
    padding: 10px 22px;
    border-radius: var(--radius);
    transition: background 0.3s ease;
}
.nav-list li.nav-cta > a:hover,
.nav-list a.nav-cta:hover {
    background: var(--btn-hover);
    color: var(--white);
}
.nav-list li.nav-cta > a::after,
.nav-list a.nav-cta::after { display: none; }

/* ============================================
   SOUS-MENU (« Nos services » → les 4 métiers)
   ============================================ */
.nav-list .menu-item-has-children { position: relative; }

/* Chevron sur l'entree parente */
.nav-list .menu-item-has-children > a::before {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-right: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform 0.25s ease;
}
.nav-list .menu-item-has-children:hover > a::before,
.nav-list .menu-item-has-children:focus-within > a::before {
    transform: translateY(0.05em) rotate(225deg);
}

.nav-list .sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: -12px;
    min-width: 250px;
    padding: 8px;
    margin: 0;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1100;
    /* On garde l'element dans le flux de l'accessibilite (pas de display:none)
       pour que le clavier puisse l'atteindre via :focus-within. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-list .menu-item-has-children:hover > .sub-menu,
.nav-list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Zone tampon : evite que le sous-menu se ferme en traversant le vide
   entre l'entree parente et le panneau. */
.nav-list .menu-item-has-children > .sub-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-list .sub-menu a {
    display: block;
    padding: 11px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brown-darker);
    border-radius: var(--radius);
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-list .sub-menu a::after { display: none; }
.nav-list .sub-menu a:hover,
.nav-list .sub-menu a:focus-visible {
    background: var(--peach);
    color: var(--brown-darker);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--brown-darker);
    transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-height) - 40px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
}

.hero-texture-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(251, 228, 195, 0.6), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(249, 237, 221, 0.8), transparent 60%),
        var(--cream);
    z-index: 0;
}

/* ============================================
   HERO — PASSAGES DE TALOCHE
   Trois bandes d'enduit qui balayent en diagonale, en cascade, une seule
   fois (~1,6 s), puis plus rien ne bouge.

   Remplace l'ancien pinceau en canvas : il tournait en boucle sur 20 s,
   redessinait 18 poils + une virole a chaque image et appelait Math.random()
   dans la boucle de rendu (d'ou la texture qui gresillait).

   Ici : aucun JS, aucun canvas. On n'anime que `transform`, donc tout est
   compose par le GPU et rien ne declenche de recalcul de mise en page.
   ============================================ */

.hero-passes {
    position: absolute;
    inset: -12% -10%;      /* debord : les bandes inclinees ne laissent pas de coin vide */
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-pass {
    position: absolute;
    left: 0;
    right: 0;
    height: 30%;
    overflow: hidden;              /* c'est lui qui masque la bande avant son entree */
    transform: rotate(-7deg);
    transform-origin: left center;
}

/* Le grain du crepi : une turbulence SVG en ligne, donc aucune requete
   reseau et aucune image a charger. */
.hero-pass i {
    display: block;
    width: 100%;
    height: 100%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
        linear-gradient(100deg, rgba(242, 201, 152, 0.55), rgba(251, 228, 195, 0.42) 55%, rgba(240, 224, 200, 0.5));
    background-size: 180px 180px, cover;
    /* Bords fondus : la bande n'a pas de contour net, comme une vraie passe */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    /* Etat par defaut = en place. C'est la version SANS JavaScript. */
    transform: translate3d(0, 0, 0);
}

.hero-pass--1 { top: 6%;  }
.hero-pass--2 { top: 34%; height: 34%; }
.hero-pass--3 { top: 64%; }

/* Chaque passe part un peu apres la precedente, et un peu moins vite :
   ca donne le rythme d'un geste, pas d'un defilement mecanique. */
.fp-js .hero-pass i {
    animation: fp-taloche 1150ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
}
.fp-js .hero-pass--1 i { animation-delay: 120ms; }
.fp-js .hero-pass--2 i { animation-delay: 300ms; animation-duration: 1300ms; }
.fp-js .hero-pass--3 i { animation-delay: 470ms; animation-duration: 1450ms; }

@keyframes fp-taloche {
    from { transform: translate3d(-102%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Avec JS (classe .fp-js), les bandes partent hors cadre : c'est l'animation
   ci-dessus qui les amene en place. Sans JS, elles restent a leur position
   par defaut et le hero est simplement statique. */
.fp-js .hero-pass i { transform: translate3d(-102%, 0, 0); }

@media (max-width: 768px) {
    .hero-pass { height: 34%; transform: rotate(-10deg); }
    .hero-pass--1 { top: 4%; }
    .hero-pass--2 { top: 33%; height: 36%; }
    .hero-pass--3 { top: 62%; }
}

/* Mouvement reduit : les bandes sont deja posees, rien ne balaye. */
@media (prefers-reduced-motion: reduce) {
    .fp-js .hero-pass i {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 0 5%;
    width: 100%;
    margin: 0 auto;
}

.hero-subtitle {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 24px;
    padding: 8px 16px;
    background: rgba(251, 228, 195, 0.7);
    border-radius: 2px;
}

.hero h1 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: 1.02;
    color: var(--brown-darker);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}
.hero h1 em {
    color: var(--brown);
    font-style: italic;
    position: relative;
    display: inline-block;
}

.hero-lead {
    font-size: 1.15rem;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 560px;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    max-width: 560px;
}
.badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
}
.badge-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--sage);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brown);
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--brown), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 120px 0; position: relative; }

.section-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 18px;
    padding-left: 32px;
    position: relative;
}
.section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 2px;
    background: var(--brown);
}

.section-header {
    text-align: center;
    margin-bottom: 70px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.section-header h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
}
.section-header .section-label { margin-left: 50%; transform: translateX(-50%); }
.section-intro {
    color: var(--text-light);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto;
}

/* ============================================
   STATS BAND
   ============================================ */
.stats-band {
    background: var(--brown-darker);
    color: var(--cream);
    padding: 70px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}
.stat-number {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    font-weight: 600;
    color: var(--peach);
    line-height: 1;
}
.stat-suffix {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--peach);
    font-weight: 500;
}
.stat-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(249, 237, 221, 0.7);
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* ============================================
   SERVICES + HOUSE 3D
   ============================================ */
.services { background: var(--cream); }

.services-interactive {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: start;
}

/* --- Visuel des services : photos de chantier en fondu --- */
.services-visual {
    position: sticky;
    top: calc(var(--header-height) + 40px);
}
.services-visual-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--peach) 0%, var(--cream-dark) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.services-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* leger zoom arriere quand la photo n'est pas active : le fondu
       s'accompagne d'un tres discret mouvement d'echelle */
    transform: scale(1.06);
    transition: opacity 0.65s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-visual-img.is-active {
    opacity: 1;
    transform: scale(1);
}
.services-visual-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 24px 20px;
    background: linear-gradient(to top, rgba(58, 36, 24, 0.85), transparent);
    color: var(--cream);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.services-visual-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 14px;
    letter-spacing: 0.3px;
}

/* Le metier dont la photo est affichee est discretement mis en avant */
.service-block.is-current {
    border-left-color: var(--brown);
}
.service-block:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-block {
    background: var(--white);
    padding: 36px 36px 36px 80px;
    border-radius: var(--radius-lg);
    position: relative;
    border-left: 3px solid transparent;
    transition: all 0.4s ease;
    box-shadow: var(--shadow-sm);
}
.service-block:hover {
    border-left-color: var(--brown);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.service-num {
    position: absolute;
    left: 28px;
    top: 36px;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: var(--peach-warm);
    line-height: 1;
}
.service-block h3 {
    font-size: 1.55rem;
    color: var(--brown-darker);
    margin-bottom: 12px;
}
.service-block p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 18px;
}
.service-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.service-features li {
    font-size: 0.87rem;
    color: var(--text);
    padding-left: 22px;
    position: relative;
}
.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 2px;
    background: var(--sage);
}

/* ============================================
   BEFORE / AFTER
   ============================================ */
.before-after-section { background: var(--peach); }

.before-after {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    cursor: ew-resize;
    user-select: none;
    background: var(--cream-dark);
}
.ba-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ba-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ba-before { z-index: 1; }
.ba-after {
    z-index: 2;
    /* L'apres occupe la partie DROITE : sens de lecture avant -> apres. */
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.05s linear;
}

.ba-label {
    position: absolute;
    top: 22px;
    padding: 8px 18px;
    background: var(--brown-darker);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
    z-index: 3;
}
.ba-label-before { left: 22px; background: var(--brown-darker); }
.ba-label-after  { right: 22px; background: var(--sage-dark); }

.ba-slider {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 3px;
    background: var(--white);
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.ba-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: var(--brown);
    font-size: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

/* ============================================
   PROCESS
   ============================================ */
.process-section { background: var(--cream); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.process-grid::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--brown) 0 6px, transparent 6px 12px);
    opacity: 0.3;
}
.process-step {
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--white);
    border: 2px solid var(--brown);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 24px;
}
.process-step h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}
.process-step p {
    color: var(--text-light);
    font-size: 0.92rem;
}

/* ============================================
   ZONE / MAP
   ============================================ */
.zone-section { background: var(--cream); }
.zone-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 70px;
    align-items: center;
}
.zone-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
}
.zone-text p {
    color: var(--text-light);
    margin-bottom: 24px;
}
.zone-cities {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 30px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.zone-cities li {
    font-size: 0.92rem;
    color: var(--brown-darker);
    font-weight: 500;
    padding-left: 20px;
    position: relative;
}
.zone-cities li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 2px;
    background: var(--brown);
}
.zone-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

#leaflet-map {
    width: 100%;
    height: 500px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--cream-dark);
}

/* Leaflet custom */
.leaflet-container { font-family: var(--font-body); }

/* ============================================
   TESTIMONIALS
   ============================================ */
/* ============================================
   GALERIE REALISATIONS
   ============================================ */
.realisations { background: var(--peach); }
.realisations .section-header .section-intro { color: var(--text-light); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    /* L'image est en scale(1.14) avec will-change:transform, ce qui la place
       sur sa propre couche de composition. Dans ce cas overflow:hidden ne
       suffit pas toujours a l'exclure du calcul de largeur du document :
       elle ajoutait 5 px de debordement horizontal a 390 px, invisible mais
       comptabilise. contain:paint garantit qu'aucun descendant ne deborde. */
    contain: paint;
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin: 0;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Legere surtaille : laisse de la marge au deplacement de parallaxe
       pour qu'aucun bord blanc n'apparaisse. */
    transform: scale(1.14);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-item:hover img { transform: scale(1.22); }

/* Quand GSAP prend la main (parallaxe + zoom pilotes en JS), on retire
   la transition CSS pour ne pas freiner le scrub. */
.fp-js.fp-parallax .gallery-item img,
.fp-js.fp-parallax .gallery-item:hover img {
    transition: none;
}
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 22px 18px;
    color: var(--white);
    background: linear-gradient(to top, rgba(58, 36, 24, 0.85) 30%, transparent);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(12px);
    opacity: 0.92;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.gallery-item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery-cat {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--peach);
}
.gallery-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--white);
}
.gallery-upload-note {
    margin-top: 30px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.section-intro-light { color: rgba(249, 237, 221, 0.75) !important; }


/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials { background: var(--brown-darker); color: var(--cream); }
.testimonials h2,
.testimonials .section-header h2 { color: var(--cream); }
.testimonials h2 em { color: var(--peach); }
.testimonials .section-label { color: var(--peach); }
.testimonials .section-label::before { background: var(--peach); }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.testimonial-card {
    background: rgba(249, 237, 221, 0.05);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(249, 237, 221, 0.1);
    /* transform exclu : pilote par GSAP (inclinaison au survol) */
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.testimonial-card:hover {
    background: rgba(249, 237, 221, 0.08);
    border-color: rgba(249, 237, 221, 0.22);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.testimonial-stars {
    color: var(--peach-warm);
    font-size: 1.1rem;
    margin-bottom: 20px;
    letter-spacing: 4px;
}
.testimonial-card blockquote p {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--cream);
    margin-bottom: 24px;
    font-weight: 400;
    font-style: italic;
}
.testimonial-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(249, 237, 221, 0.1);
}
.testimonial-footer cite {
    font-style: normal;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cream);
}
.testimonial-meta {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--peach-warm);
    letter-spacing: 0.3px;
}
.testimonial-meta .sep { opacity: 0.5; }

/* ============================================
   CTA / CONTACT
   ============================================ */
.cta-section { background: var(--cream); }
.cta-content {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: start;
}
.cta-text h2 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    margin-bottom: 20px;
}
.cta-text > p {
    color: var(--text-light);
    font-size: 1.05rem;
    margin-bottom: 40px;
}
.cta-contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}
.cta-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cta-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brown);
}
.cta-info-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--brown-darker);
}
a.cta-info-value:hover { color: var(--brown); }

.cta-form {
    background: var(--white);
    padding: 48px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.cta-form h3 {
    font-size: 1.6rem;
    margin-bottom: 28px;
    color: var(--brown-darker);
}
.form-row { margin-bottom: 18px; }
.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brown-darker);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.3s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--brown);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(138, 87, 68, 0.1);
}
.form-row textarea { resize: vertical; }
.form-mentions {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--brown-darker);
    color: rgba(249, 237, 221, 0.7);
    padding: 80px 0 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}
.footer-col h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--peach);
    margin-bottom: 16px;
    font-weight: 500;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--peach);
    margin-bottom: 20px;
    font-weight: 600;
}
.footer-col p { line-height: 1.75; font-size: 0.92rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
    color: rgba(249, 237, 221, 0.7);
    font-size: 0.92rem;
    transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--peach); }
.footer-contact li { font-size: 0.92rem; }
.footer-contact strong { color: var(--peach); font-weight: 500; }
.certifs li { font-size: 0.92rem; padding-left: 22px; position: relative; }
.certifs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 2px;
    background: var(--peach);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(249, 237, 221, 0.08);
    font-size: 0.82rem;
    color: rgba(249, 237, 221, 0.4);
}
.footer-bottom a { color: rgba(249, 237, 221, 0.5); }
.footer-bottom a:hover { color: var(--peach); }

/* ============================================
   ANIMATIONS
   ============================================ */

/* Les etats masques ne s'appliquent QUE si le JS tourne (classe .fp-js
   posee par functions.php). Sans JS, tout reste lisible. */
.fp-js .anim-fade-up    { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.fp-js .anim-fade-right { opacity: 0; transform: translateX(-46px); filter: blur(6px); }
.fp-js .anim-fade-left  { opacity: 0; transform: translateX(46px);  filter: blur(6px); }

.anim-fade-up, .anim-fade-right, .anim-fade-left {
    will-change: transform, opacity, filter;
}

/* Un etat initial decale horizontalement ELARGIT la page tant que
   l'animation n'a pas joue. Mesure sur un ecran de 390 px : le bloc de la
   carte (.anim-fade-left, translateX(46px)) sortait a 417 px, soit 27 px de
   debordement, et la page devenait defilable lateralement.
   Sur mobile on remplace donc le decalage lateral par un decalage vertical :
   il produit le meme effet d'apparition sans jamais pouvoir deborder.
   GSAP anime vers x:0 ET y:0, la bascule est donc transparente. */
@media (max-width: 900px) {
    .fp-js .anim-fade-right,
    .fp-js .anim-fade-left { transform: translateY(34px); }
}

/* --- Titre hero : mots reveles derriere un masque --- */
.hero h1 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* laisse respirer les jambages des lettres (p, g, j) */
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.hero h1 .word-inner { display: inline-block; }
.fp-js .hero h1 .word-inner {
    transform: translateY(105%);
    opacity: 0;
}

/* --- Barre de progression de lecture --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 1200;
    background: linear-gradient(90deg, var(--brown), var(--peach-warm));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* --- Header qui se retire en descendant --- */
.site-header {
    transition: box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.header-hidden { transform: translateY(-100%); }
body.nav-open { overflow: hidden; }

/* --- Trait anime des intitules de section --- */
@property --label-line {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}
.section-label::before {
    transform: scaleX(var(--label-line, 1));
    transform-origin: left center;
}

/* --- Reflet qui suit le curseur sur les boutons --- */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::after {
    content: '';
    position: absolute;
    left: var(--mx, 50%);
    top: var(--my, 50%);
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.30), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: -1;
}
.btn:hover::after { opacity: 1; }
.btn-ghost::after {
    background: radial-gradient(circle, rgba(138, 87, 68, 0.18), transparent 65%);
}

/* --- Cartes inclinables --- */
.testimonials-grid, .process-grid { perspective: 1000px; }
.testimonial-card, .process-step { transform-style: preserve-3d; }

/* --- Vignettes de galerie cliquables --- */
.gallery-item { cursor: zoom-in; overflow: hidden; }
.gallery-item img { will-change: transform; }
.gallery-item:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
}

/* ============================================
   LIGHTBOX GALERIE
   ============================================ */
.fp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(42, 24, 16, 0.92);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}
.fp-lightbox.open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }

.fp-lb-figure {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fp-lb-figure img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.fp-lb-figure figcaption {
    text-align: center;
    color: var(--cream);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.fp-lightbox button {
    background: rgba(249, 237, 221, 0.10);
    border: 1px solid rgba(249, 237, 221, 0.22);
    color: var(--cream);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.25s ease, transform 0.25s ease;
}
.fp-lightbox button:hover {
    background: rgba(249, 237, 221, 0.22);
    transform: scale(1.08);
}
.fp-lb-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.6rem !important;
    line-height: 1;
}

@media (max-width: 720px) {
    .fp-lightbox { padding: 12px; gap: 6px; }
    .fp-lightbox button { width: 40px; height: 40px; }
    .fp-lb-figure img { max-height: 68vh; }
}

/* ============================================
   MOUVEMENT REDUIT
   Respecte le reglage systeme de l'utilisateur :
   plus aucune animation, tout est visible immediatement.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .fp-js .anim-fade-up,
    .fp-js .anim-fade-right,
    .fp-js .anim-fade-left,
    .fp-js .hero h1 .word-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .scroll-progress { display: none; }
    .site-header.header-hidden { transform: none; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .zone-grid, .cta-content { grid-template-columns: 1fr; gap: 50px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .process-grid::before { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Le menu horizontal complet mesure ~790 px ; avec le logo il lui faut environ
   1200 px de fenetre. En dessous il chevauchait le logo et se cassait sur deux
   lignes (c'etait deja le cas avec l'ancien titre texte). Le burger prend donc
   le relais des 1200 px. */
@media (max-width: 1200px) {
    .top-bar { font-size: 0.75rem; }
    .top-bar-separator { display: none; }
    .menu-toggle { display: flex; }
    /* Le panneau est ancre a droite DANS le viewport, puis pousse dehors par
       une transformation -- et non place a right:-100%.

       Avec right:-100%, sa boite de mise en page se trouve hors du viewport.
       Des qu'un autre element cree le moindre debordement horizontal, le
       navigateur mobile elargit le viewport de mise en page ; les elements
       fixes s'y ancrent, et le panneau devient atteignable en faisant defiler
       lateralement. C'est exactement ce qu'on voyait sur telephone : le menu
       apparaissait sur le cote alors qu'il etait cense etre ferme.

       Avec une transformation, la boite reste dans le viewport : seul le
       rendu sort. Le panneau ne peut plus etre revele par un defilement.
       En prime, l'animation passe par le GPU. */
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        background: var(--cream);
        padding: 110px 40px 40px;
        transform: translateX(100%);
        transition: transform 0.4s ease, visibility 0s linear 0.4s;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
        /* Ferme, il ne doit pas etre atteignable au clavier ni lu par un
           lecteur d'ecran. */
        visibility: hidden;
    }
    .main-nav.open {
        transform: none;
        visibility: visible;
        transition: transform 0.4s ease, visibility 0s;
    }
    .nav-list { flex-direction: column; gap: 22px; align-items: flex-start; }
    .nav-list a { font-size: 1.05rem; }

    /* Sous-menu : deja deplie et indente, pas de survol au doigt. */
    .nav-list .menu-item-has-children { width: 100%; }
    .nav-list .menu-item-has-children > a::before { display: none; }
    .nav-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        width: 100%;
        margin: 12px 0 0;
        padding: 0 0 0 16px;
        background: none;
        border: none;
        border-left: 2px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        gap: 4px;
    }
    .nav-list .sub-menu::before { display: none; }
    .nav-list .sub-menu a {
        padding: 8px 0;
        font-size: 0.95rem;
        color: var(--text-light);
    }
    .nav-list .sub-menu a:hover { background: none; color: var(--brown-darker); }

    .section { padding: 80px 0; }
    .hero { padding: 60px 0; min-height: auto; }
    .hero h1 { font-size: 2.5rem; }

    .testimonials-grid { grid-template-columns: 1fr; }
    .service-features { grid-template-columns: 1fr; }
    .service-block { padding: 28px 24px 28px 64px; }
    .service-num { left: 20px; top: 28px; font-size: 1.6rem; }

    .cta-form { padding: 32px 24px; }
    .form-row-split { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .ba-slider-handle { width: 44px; height: 44px; }
    .before-after { aspect-ratio: 4 / 3; }

    .hero-scroll { display: none; }
}

@media (max-width: 480px) {
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; text-align: center; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .process-grid { grid-template-columns: 1fr; }
    /* En 2 colonnes sur un ecran de 320 px, chaque vignette tombe a ~145 px :
       la legende en surimpression devient illisible. */
    .gallery-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* --- Legende sous le slider avant/apres --- */
.ba-legende {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: italic;
}






/* ==========================================================================
   SECTION « NOS SERVICES » — ONGLETS MÉTIERS
   Remplace l'ancien duo « cadre photo collant + 4 cartes empilées ».

   Les couleurs pointent sur les variables du thème (:root) : si la palette
   change, cette section suit. Pas de palette dupliquee ici.

   Principe important : les panneaux ne sont masques QUE sous `.js-tabs`,
   classe posee par services-tabs.js. Sans JS, les 4 panneaux s'affichent
   a la suite et tout reste lisible.
   ========================================================================== */

.fp-services {
    background: var(--cream);
    color: var(--text);
}

/* --- Titre de section --- */
.fp-services .fp-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 44px;
}
.fp-services .fp-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brown);
}
.fp-services .fp-eyebrow__rule {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--brown);
}
.fp-services .fp-h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--brown-darker);
    text-wrap: pretty;
}
.fp-services .fp-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--brown);
}
.fp-services .fp-lede {
    margin: 0;
    max-width: 620px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-light);
    text-wrap: pretty;
}

/* --- Barre d'onglets --- */
.fp-tabs__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 4px 14px;
    margin: 0 -4px 26px;
    scrollbar-width: none;
}
.fp-tabs__strip::-webkit-scrollbar { height: 0; }

.fp-tab {
    flex: 1 1 190px;
    min-width: 160px;
    min-height: 64px;              /* cible tactile confortable */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1.5px solid rgba(138, 87, 68, 0.22);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--brown-darker);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.fp-tab:hover { background: #fffdf8; }
.fp-tab.is-active {
    background: var(--btn);
    color: var(--cream);
    box-shadow: 0 8px 22px rgba(58, 36, 24, 0.16);
}
.fp-tab__num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    opacity: 0.65;
}
.fp-tab__label {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1.2;
}

/* --- Panneau --- */
.fp-panel {
    display: grid;
    /* min(320px, 100%) et non 320px seul : un minimum en dur ne peut pas
       retrecir, donc dans un conteneur plus etroit la colonne garde ses
       320 px et deborde. Mesure a 320 px de large : 40 px de debordement,
       la page devenait defilable lateralement. Avec min(), le minimum
       s'efface des que la place manque. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 40px;
    align-items: start;
    min-height: 420px;             /* hauteur stable d'un metier a l'autre */
    margin-bottom: 20px;
    padding: 26px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
/* Un seul panneau visible — uniquement quand le JS est actif. */
.js-tabs .fp-panel { margin-bottom: 0; }
.js-tabs .fp-panel[hidden] { display: none; }

.fp-panel__media {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fp-panel__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--cream-dark);   /* teinte d'attente avant chargement */
}
.fp-panel__media figcaption {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.fp-panel__media figcaption::before { content: "\2197\00a0"; }

.fp-panel__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 4px 4px;
}
.fp-services .fp-h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    color: var(--brown-darker);
}
.fp-panel__desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-light);
    text-wrap: pretty;
}
.fp-panel__list {
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 24px;
    border-top: 1.5px solid var(--border);
}
.fp-panel__list li {
    display: flex;
    gap: 10px;
    font-size: 0.94rem;
}
.fp-panel__list li::before {
    content: "\2014";
    color: var(--sage);
}

/* --- Bouton du panneau --- */
.fp-services .fp-btn {
    align-self: start;
    margin-top: 4px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius);
    background: var(--btn);
    color: var(--cream);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background 160ms ease;
}
.fp-services .fp-btn:hover,
.fp-services .fp-btn:focus-visible {
    background: var(--btn-hover);
    color: var(--cream);
}

.fp-services__foot {
    margin: 22px auto 0;
    max-width: 620px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.fp-services__foot a { color: var(--brown); }
.fp-services__foot a:hover { color: var(--brown-dark); }

/* --- Focus visible --- */
.fp-tab:focus-visible,
.fp-panel:focus-visible,
.fp-services a:focus-visible {
    outline: 2.5px solid var(--brown-darker);
    outline-offset: 3px;
}

/* --- Mobile & tablette : les onglets s'empilent ---
   Un onglet par ligne, pleine largeur. On abandonne le carrousel horizontal :
   les 4 metiers sont visibles d'un coup, sans geste de glissement a devenir. */
@media (max-width: 1024px) {
    .fp-tabs__strip {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        gap: 8px;
        padding: 0 0 18px;
        margin: 0 0 24px;
    }
    .fp-tab {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 58px;
    }
}

@media (max-width: 720px) {
    .fp-panel { padding: 18px; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-services *,
    .fp-services *::before,
    .fp-services *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}




/* ============================================
   PAGES LEGALES (mentions legales, CGU, CGV)
   Gabarit page.php. Priorite a la lisibilite : mesure courte, hierarchie
   nette, tableaux lisibles sur mobile.
   ============================================ */
.legal-hero {
    background: var(--peach);
    border-bottom: 1px solid var(--border);
    padding: 56px 0 40px;
}
.legal-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 10px;
}
.legal-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.legal-body {
    padding: 48px 0 80px;
    max-width: 760px;               /* ~72 caracteres : la mesure de lecture */
}

.legal-todo-banner {
    background: #fff4d1;
    border: 1px solid #e8c96a;
    border-left: 4px solid #d9a600;
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 0.9rem;
    margin-bottom: 32px;
}

/* Sommaire */
.legal-toc {
    background: var(--cream-dark);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 44px;
}
.legal-toc-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--brown-darker);
    margin-bottom: 12px;
}
/* Pas de numerotation ici : les titres portent deja la leur
   (« 1. Editeur du site », « Article 6 — ... »). */
.legal-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 32px;
}
.legal-toc li {
    font-size: 0.87rem;
    margin-bottom: 6px;
    break-inside: avoid;
}
/* Deux niveaux : titre de document (h2) puis articles (h3) indentes. */
.legal-toc li.toc-n2 {
    margin-top: 14px;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-size: 0.98rem;
}
.legal-toc li.toc-n2:first-child { margin-top: 0; }
.legal-toc li.toc-n2 a { color: var(--brown-darker); }
.legal-toc li.toc-n3 { padding-left: 14px; }
.legal-toc a { color: var(--text-light); }
.legal-toc a:hover { color: var(--brown-dark); }

/* Corps du texte */
.legal-content h2 {
    font-size: 1.4rem;
    margin: 48px 0 16px;
    padding-top: 8px;
    scroll-margin-top: calc(var(--header-height) + 20px);
    text-wrap: balance;          /* evite « Article 1 — » seul sur sa ligne */
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--brown-dark);
    margin: 28px 0 10px;
}
.legal-content p { margin-bottom: 16px; }
.legal-content ul,
.legal-content ol { margin: 0 0 18px 22px; }
.legal-content li { margin-bottom: 7px; }
.legal-content strong { color: var(--brown-darker); }
.legal-content a { text-decoration: underline; }

/* Encadres : pandoc rend les blockquotes du Markdown */
.legal-content blockquote {
    background: var(--cream-dark);
    border-left: 3px solid var(--brown);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 0.92rem;
}
.legal-content blockquote p:last-child { margin-bottom: 0; }

/* Tableaux d'identification. Ils debordent sur mobile : on les fait defiler
   dans leur propre conteneur plutot que de casser la page. */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 26px;
    font-size: 0.9rem;
}
.legal-content table th,
.legal-content table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.legal-content table tr td:first-child {
    width: 38%;
    color: var(--text-light);
}
.legal-content table thead th {
    background: var(--cream-dark);
    font-weight: 600;
    color: var(--brown-darker);
}

/* Champs restant a renseigner : impossibles a rater. */
.legal-content .fp-todo,
.legal-content mark.fp-todo {
    background: #ffe9a8;
    color: #6b4c00;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.92em;
}

.legal-retour {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .legal-hero { padding: 40px 0 30px; }
    .legal-body { padding: 34px 0 60px; }
    .legal-toc ul { columns: 1; }
    .legal-content table,
    .legal-content table tbody,
    .legal-content table tr,
    .legal-content table td { display: block; width: 100%; }
    .legal-content table tr {
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
    }
    .legal-content table td {
        border: none;
        padding: 2px 0;
    }
    .legal-content table tr td:first-child {
        width: auto;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
    }
}

/* ============================================
   FORMULAIRE — Contact Form 7
   Le balisage du formulaire reprend les classes du theme (.form-row,
   .btn-primary...), donc l'essentiel du style s'applique deja. Il reste a
   neutraliser les habitudes de CF7 et a habiller ses messages.
   ============================================ */

/* CF7 enveloppe chaque champ dans un <span> en display:inline :
   sans cela, le width:100% des champs ne s'applique pas. */
.cta-form .wpcf7-form-control-wrap { display: block; }

.cta-form .wpcf7 { margin: 0; }
.cta-form .wpcf7-form > .form-row:first-of-type { margin-top: 0; }
.cta-form .hidden-fields-container { display: none; }

/* Message de validation sous un champ */
.cta-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #b3261e;
}
.cta-form .wpcf7-not-valid {
    border-color: #b3261e;
    background: #fdf3f2;
}

/* Bandeau de reponse, sous le bouton */
.cta-form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    font-size: 0.88rem;
    line-height: 1.5;
}
.cta-form form.sent .wpcf7-response-output {
    border-color: var(--sage);
    background: rgba(122, 148, 136, 0.10);
    color: var(--sage-dark);
}
.cta-form form.invalid .wpcf7-response-output,
.cta-form form.unaccepted .wpcf7-response-output,
.cta-form form.failed .wpcf7-response-output {
    border-color: #b3261e;
    background: #fdf3f2;
    color: #8c1d18;
}

/* Le bouton d'envoi est un <input>, pas un <button> : inline-flex ne
   s'applique pas de la meme facon, on repasse en block pleine largeur. */
.cta-form input.wpcf7-submit {
    display: block;
    width: 100%;
}

/* Indicateur d'envoi */
.cta-form .wpcf7-spinner {
    display: block;
    margin: 14px auto 0;
}

/* Reserve la place du message de validation pour eviter que la carte
   ne saute au moment de la soumission. */
.cta-form .form-mentions { margin-top: 16px; }

/* ============================================
   RETOUR EN HAUT
   ============================================ */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;              /* sous l'en-tete (1000) et la lightbox (2000) */

    width: 48px;               /* >= 44 px : cible tactile confortable */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: var(--btn);
    color: var(--white);
    box-shadow: 0 6px 20px var(--btn-shadow);
    cursor: pointer;

    /* Cache tant que le JS ne l'a pas active. visibility plutot que display :
       la transition reste possible, et le bouton sort de l'ordre de
       tabulation quand il est masque. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease,
                background 0.3s ease, visibility 0s linear 0.3s;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease,
                background 0.3s ease, visibility 0s;
}
.back-to-top:hover { background: var(--btn-hover); }
.back-to-top:active { transform: translateY(1px); }

.back-to-top svg {
    width: 22px;
    height: 22px;
    display: block;
}

@media (max-width: 560px) {
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
    .back-to-top svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 0.01ms, visibility 0s; transform: none; }
    .back-to-top.is-visible { transform: none; }
}

/* ============================================
   CARTE — adoucissement des tuiles
   Les tuiles OpenStreetMap sont plus colorees que l'ancien fond CARTO
   (abandonne : il exige desormais une cle d'API et filigrane ses images).
   Ce filtre les desature et les rechauffe pour qu'elles s'accordent au theme,
   sans toucher aux tuiles elles-memes ni a leur licence. Les noms de lieux
   restent lisibles.
   Applique au seul plan des tuiles : le cercle, le marqueur et les commandes
   de zoom gardent leurs couleurs.
   ============================================ */
.leaflet-tile-pane {
    filter: grayscale(0.55) brightness(1.06) contrast(0.94) sepia(0.18);
}

/* Le filtre alourdit le rendu sur petits appareils : on l'allege. */
@media (max-width: 560px) {
    .leaflet-tile-pane { filter: grayscale(0.5) brightness(1.05) sepia(0.14); }
}

/* Attribution : discrete mais lisible, elle est obligatoire. */
.leaflet-control-attribution {
    background: rgba(249, 237, 221, 0.85) !important;
    font-size: 0.68rem;
}
.leaflet-control-attribution a { color: var(--brown-dark) !important; }