/* ============================================================
HOME CONSEILS 31 — Feuille de style
Charte : turquoise #00919e — anthracite #28242c
Typo : Jost (approximation web de Century Gothic)
============================================================ */
/* Police auto-hébergée : Google Fonts bloquait le rendu ~850 ms (DNS + TLS + requête).
Fichier variable unique : toutes les graisses 400→800 en 26 Ko. */
@font-face{
font-family:'Jost';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../assets/fonts/jost-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
--teal:#00919e; /* turquoise charte : filets, soulignés — éléments NON textuels */
/* Le turquoise charte n'atteint que 3,8:1 sur blanc : insuffisant pour du petit texte
(4,5:1 requis). Variante assombrie réservée au TEXTE turquoise. */
--teal-ink:#00767f;
--teal-dark:#0f4d47; /* vert profond de la maquette : boutons, pastilles, bandeaux */
--teal-darker:#0a3a35;
--ink:#28242c; /* anthracite charte */
/* Dans la maquette le beige n'est PAS le fond des pages : il habille le bandeau
du hero et les panneaux (chiffres clés, fiche à la une). Les sections sont blanches. */
--cream:#f2efe9; /* bandeau hero + header */
--cream-2:#f5f3ef; /* panneaux posés sur le blanc */
--white:#ffffff;
--gray:#6b6b72;
--line:rgba(40,36,44,.08);
--radius:14px;
--shadow:0 18px 45px rgba(40,36,44,.12);
--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Jost','Century Gothic',system-ui,sans-serif;
color:var(--ink);
background:var(--white);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{line-height:1.15;font-weight:700;letter-spacing:.2px;overflow-wrap:break-word}
h1,h2{text-wrap:balance} /* équilibre les lignes, évite le mot orphelin */
h1{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.eyebrow{
display:inline-block;color:var(--teal-ink);font-weight:600;
letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;margin-bottom:.6rem;
}
.eyebrow.center,.section-center .eyebrow{display:block;text-align:center}
.hero-rule,.section-rule{
display:block;height:3px;width:64px;background:var(--teal);border-radius:2px;margin:1.1rem 0;
}
.section-rule{margin:1rem auto 2.6rem}
/* ---------- BUTTONS ---------- */
/* Mesuré sur la maquette (gabarit 1024) : 47px de haut, rayon 8, bordure 1,5px,
texte ~12px. line-height:1 pour maîtriser la hauteur au pixel près. */
.btn{
display:inline-flex;align-items:center;justify-content:center;
padding:1rem 1.35rem;border-radius:8px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
font-size:.75rem;line-height:1;transition:.2s ease;cursor:pointer;
border:1.5px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--teal-dark);color:#fff}
.btn-primary:hover{background:var(--teal-darker);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:rgba(40,36,44,.22)}
.btn-outline:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
/* Sur le bandeau vert, la maquette utilise un bouton CONTOUR blanc, pas un blanc plein. */
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-light:hover{background:#fff;color:var(--teal-darker);border-color:#fff}
/* Le CTA du header est plus petit que celui du hero (37px contre 47px). */
.header-cta{padding:.72rem 1.05rem;font-size:.7rem;border-radius:6px}
/* Icône calendrier des CTA "audit". Côté variable selon le contexte, comme la maquette :
à gauche dans le header et sur le bouton d'envoi, à droite sur les CTA hero / bandeaux. */
.header-cta::before,
#auditForm button[type="submit"]::before,
.hero-actions a.btn[href$="/audit"]::after,
.cta-band a.btn[href$="/audit"]::after{
content:"";display:inline-block;width:1.3em;height:1.3em;vertical-align:-.18em;flex:0 0 auto;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.header-cta::before{margin-right:1.15em}
#auditForm button[type="submit"]::before{margin-right:.9em}
.hero-actions a.btn[href$="/audit"]::after{margin-left:1.25em}
.cta-band a.btn[href$="/audit"]::after{margin-left:1.05em}
/* ---------- ICÔNES (filaires, monochromes, couleur héritée du contexte) ---------- */
.ic{display:inline-block;width:1em;height:1em;background-color:currentColor;vertical-align:middle;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic-home{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-star{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-heart{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-search{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-sofa{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-camera{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-euro{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-clock{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-pin{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-check{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-users{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-key{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-shield{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-eye{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-expand{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-phone{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
/* Tailles explicites par contexte. À 1em les icônes étaient illisibles : le tracé
n'occupe qu'environ 75% de la zone de dessin, et le trait (2/24 du gabarit)
descendait sous 1,2px. En agrandissant, le trait s'épaissit proportionnellement. */
.stat-ico .ic{width:30px;height:30px}
.step-ico .ic{width:40px;height:40px}
.reason .r-ico .ic{width:33px;height:33px}
.mf-ico .ic{width:27px;height:27px}
.ic-arrow{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-chevron{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-book{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.ic-mail{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")}
.featured-meta .ic{color:var(--teal-dark);width:19px;height:19px;flex:0 0 19px}
.form-note .ic{color:var(--teal-dark);width:17px;height:17px;flex:0 0 17px}
.btn .ic{width:1.3em;height:1.3em}
.btn .ic-chevron{width:16px;height:16px;margin-left:1.1em}
/* ---------- HEADER ---------- */
.site-header{
position:sticky;top:0;z-index:50;background:rgba(242,239,233,.92);
backdrop-filter:blur(8px);
}
/* header haut, à la mesure du grand logo de la maquette (pas de débord :
le header est collant à top:0, tout dépassement serait rogné par l'écran) */
.header-inner{display:flex;align-items:center;gap:1.5rem;height:96px}
.logo img{height:88px;width:auto}
.main-nav{display:flex;gap:1.9rem;margin-left:auto}
.main-nav a{
font-weight:500;font-size:.8rem;position:relative;padding:.2rem 0;
text-transform:uppercase;letter-spacing:.09em;
}
.main-nav a.active,.main-nav a:hover{color:var(--teal-ink)}
.main-nav a.active::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--teal)}
.header-cta{margin-left:.4rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
/* ---------- HERO ---------- */
/* Bandeau beige ; l'image déborde jusqu'au bord droit de l'écran (comme la maquette). */
.hero{background:var(--cream);padding:1.5rem 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-text{padding:1.5rem 0 2.5rem}
.hero-text p{font-size:1.15rem;color:var(--gray);max-width:26rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-media{margin-right:calc((min(var(--maxw),100vw) - 100vw)/2 - 24px)}
.hero .ba-slider{aspect-ratio:4/3;border-radius:0;box-shadow:none}
/* ---------- SLIDER AVANT / APRÈS ---------- */
.ba-slider{
position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);user-select:none;cursor:ew-resize;
touch-action:pan-y; /* le défilement vertical de la page reste possible au doigt */
}
/* Les sont glissables par défaut : sans ça, le navigateur démarre un drag natif
de l'image (avec son fantôme) et vole le geste au curseur avant/après. */
.ba-img{
position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
-webkit-user-drag:none;user-select:none;pointer-events:none;
}
/* Base = AVANT (pleine largeur, à gauche) ; volet révélé = APRÈS, ancré à droite */
/* Le volet APRÈS recouvre entièrement l'image AVANT ; il n'est dévoilé qu'à droite
du curseur, par clip-path. Découper plutôt que redimensionner évite au JS de lire
la largeur du slider (donc plus de recalcul de mise en page forcé), et fonctionne
même quand le slider est masqué — cas des slides de carrousel. */
.ba-after-wrap{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 50%);will-change:clip-path}
.ba-label{
position:absolute;bottom:16px;padding:.35rem .9rem;border-radius:8px;color:#fff;
font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;z-index:3;pointer-events:none;
}
.ba-label-before{left:16px;background:rgba(40,36,44,.82)}
.ba-label-after{right:16px;background:var(--teal-dark)}
.ba-handle{
position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.ba-handle span{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:#fff;color:var(--teal-dark);
display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;
box-shadow:0 4px 14px rgba(0,0,0,.25);
}
/* Curseur natif : gardé pour l'accessibilité clavier, mais neutralisé au pointeur
(c'est le JS qui gère souris/tactile, sinon il capte le scroll sur mobile). */
.ba-range{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:5;pointer-events:none;
}
/* ---------- SECTIONS ---------- */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-center{text-align:center}
/* stats */
/* colonnes déduites du nombre de chiffres présents : pas de colonne vide
si l'on en ajoute ou en retire un */
.stats{
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1rem;background:var(--cream-2);
border-radius:var(--radius);padding:2.2rem;margin-top:1rem;
}
.stat{display:flex;align-items:center;gap:1rem;justify-content:center;text-align:left}
.stat + .stat{border-left:1px solid rgba(40,36,44,.12)}
.stat-ico{
width:58px;height:58px;flex:0 0 58px;border-radius:50%;background:var(--teal-dark);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.stat strong{display:block;font-size:2rem;line-height:1;margin-bottom:.4rem}
.stat-label{display:block;font-size:.79rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1.35;color:var(--ink)}
.stat-sub{display:block;font-size:.85rem;color:var(--gray);line-height:1.35;margin-top:.15rem}
/* méthode */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.step{flex:1;min-width:180px;max-width:230px}
/* pastilles plates gris clair (maquette), pas de blanc ombré sur fond blanc */
.step-ico{
width:82px;height:82px;margin:0 auto 1rem;border-radius:50%;background:#f1efea;color:var(--teal-dark);
display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:.98rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
.step p{font-size:.92rem;color:var(--gray)}
/* alignée sur le centre des pastilles (82px), pas sur le milieu du bloc texte */
.step-arrow{color:#c6c2bb;align-self:flex-start;margin-top:34px;display:flex;align-items:center}
.step-arrow .ic{width:44px;height:13px}
/* ---------- CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--teal-dark);color:#fff;padding:clamp(2.2rem,5vw,3.2rem) 0}
/* Illustration botanique fournie par le client. Le fichier source était un « SVG »
de 7,4 Mo contenant des PNG encodés en base64 : recadré, penché et converti en WebP. */
.cta-band::before{
content:"";position:absolute;left:-18px;bottom:-34px;width:200px;height:231px;pointer-events:none;
background:url("../img/branche.webp") no-repeat left bottom/contain;opacity:.85;
}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-left:190px}
.cta-band h2{color:#fff}
.cta-band em{color:#ef6f4d;font-style:normal}
.cta-band p{opacity:.9}
/* le bloc de texte doit pouvoir se comprimer, sinon le bouton passe à la ligne */
.cta-inner > div:first-child{flex:1 1 320px;min-width:0}
.cta-inner > .btn{flex:0 0 auto}
.cta-contact{display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;flex:0 0 auto}
.cta-contact a{display:flex;align-items:center;gap:.7rem;color:#fff;font-size:1rem}
.cta-contact a:hover{opacity:.8}
.cta-contact .ic{width:20px;height:20px;flex:0 0 20px}
/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);color:#cfcbd2}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding:3rem 24px 2.2rem}
.footer-brand img{height:70px;width:auto;margin-bottom:1rem;background:#fff;border-radius:12px;padding:6px}
.footer-brand p{max-width:22rem;font-size:.95rem}
.footer-col h3{color:#fff;margin-bottom:1rem;font-size:1rem}
.footer-col a,.footer-col span{display:block;font-size:.93rem;margin-bottom:.55rem}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.1rem 0;font-size:.85rem;text-align:center}
/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
.header-inner{height:76px}
.logo img{height:64px} /* pas de débord sur mobile */
.hero{padding-top:0}
.hero-grid{grid-template-columns:1fr}
.hero-media{order:-1;margin-left:-24px;margin-right:-24px}
.hero-text{padding-top:2rem}
.header-cta{display:none}
.main-nav{
position:fixed;inset:76px 0 auto 0;flex-direction:column;gap:0;background:var(--cream);
padding:1rem 24px 1.6rem;box-shadow:var(--shadow);transform:translateY(-120%);
/* visibility : évite que le bas du menu fermé (et son ombre) déborde sur le
header, et retire ses liens de la navigation au clavier */
visibility:hidden;transition:transform .3s ease,visibility .3s ease;
}
.main-nav.open{transform:translateY(0);visibility:visible}
.main-nav a{padding:.9rem 0;border-bottom:1px solid rgba(40,36,44,.08)}
.burger{display:flex;margin-left:auto}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.steps{flex-direction:column;align-items:center}
.step-arrow{transform:rotate(90deg);align-self:center;margin-top:0}
.stats{grid-auto-flow:row;grid-template-columns:1fr} /* annule le flux en colonnes */
.stat{justify-content:flex-start} /* pastilles alignées entre elles une fois empilées */
.stat + .stat{border-left:0;border-top:1px solid rgba(40,36,44,.12);padding-top:1rem}
}
@media(max-width:640px){
.container{padding:0 18px}
.hero-media{margin-left:-18px;margin-right:-18px}
.footer-grid{grid-template-columns:1fr;padding-left:18px;padding-right:18px}
.cta-inner{flex-direction:column;text-align:center;align-items:center;padding-left:18px}
.cta-contact{align-items:center}
/* les libellés longs en majuscules débordaient : on autorise le retour à la ligne */
.btn{white-space:normal;text-align:center;letter-spacing:.04em;padding:1rem 1.1rem;line-height:1.35}
.hero-actions .btn,.cta-band .btn{width:100%}
.cta-band::before{opacity:.32;width:150px;height:173px}
}
/* ============================================================
PAGES INTÉRIEURES
============================================================ */
/* ---- Breadcrumb + en-tête de page ---- */
.page-head{padding:2.4rem 0 1rem;text-align:center}
.breadcrumb{font-size:.85rem;color:var(--gray);margin-bottom:1.4rem}
.breadcrumb a:hover{color:var(--teal-ink)}
.breadcrumb span{color:var(--teal-ink)}
.page-head p.lead{max-width:40rem;margin:1.2rem auto 0;color:var(--gray);font-size:1.05rem}
/* ---- Réalisation à la une (carrousel) ---- */
/* ---- Réalisations à la une ----
Une slide = un bien. En grand écran, la photo est à gauche et la fiche à
droite : les deux tiennent dans le même écran, on ne fait plus l'aller-retour
entre l'image et son texte à chaque changement de pièce. */
.featured{padding:1.5rem 0 1rem}
.featured .ba-slider{aspect-ratio:16/9}
.fc-slide{display:none}
.fc-slide.is-active{
/* minmax(0,…) : sans ce plancher, la rangée de miniatures impose sa largeur à la
colonne, et le slider déborde de l'écran dès 4 pièces (page élargie sur mobile). */
display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto 1fr;
grid-template-areas:"media titre" "media info";gap:1.1rem 2rem;align-items:start;
}
.fc-titre{grid-area:titre;font-size:1.5rem;line-height:1.2}
.fc-titre .rule{display:block;height:3px;width:44px;background:var(--teal);border-radius:2px;margin-top:.7rem}
.fc-media{grid-area:media}
.fc-stage{position:relative}
.fc-piece{display:none}
.fc-piece.is-active{display:block}
/* Miniatures des pièces : accès direct, et le nombre de pièces se voit d'un coup d'œil. */
.fc-thumbs{display:flex;gap:.6rem;margin-top:.75rem;overflow-x:auto;padding-bottom:.25rem}
.fc-thumb{
flex:0 0 auto;width:98px;border:0;background:none;padding:0;cursor:pointer;
font:inherit;font-size:.75rem;color:var(--gray);text-align:center;
}
.fc-thumb img{
display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;
border:2px solid transparent;opacity:.7;transition:.18s;
}
.fc-thumb span{display:block;margin-top:.3rem;letter-spacing:.02em;transition:.18s}
.fc-thumb:hover img{opacity:1}
.fc-thumb.is-active img{opacity:1;border-color:var(--teal)}
.fc-thumb.is-active span{color:var(--teal-ink);font-weight:600}
.featured-info{
grid-area:info;background:var(--cream-2);border-radius:var(--radius);
padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem;
}
.featured-info p{font-size:.95rem;color:var(--gray)}
.featured-meta{display:flex;flex-direction:column;gap:.6rem;font-size:.92rem}
.featured-meta div{display:flex;align-items:center;gap:.6rem}
/* Passage d'un bien à l'autre : libellé explicite, pour ne pas le confondre
avec le changement de pièce. */
.fc-biens{
display:flex;align-items:center;justify-content:space-between;gap:.8rem;
margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
}
.fc-nav{
border:0;background:none;padding:.3rem 0;cursor:pointer;font:inherit;font-size:.85rem;
font-weight:600;color:var(--teal-ink);display:flex;align-items:center;gap:.35rem;transition:.15s;
}
.fc-nav:hover{color:var(--teal-dark)}
.fc-rang{font-size:.8rem;color:var(--gray);white-space:nowrap}
/* ---- Filtres galerie ---- */
/* Maquette : filtres inactifs = texte nu en capitales ; actif = pastille vert profond */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1.5rem 0 2.2rem}
.filter{
padding:.6rem 1.1rem;border-radius:8px;border:0;background:transparent;color:var(--ink);
font-family:inherit;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;
cursor:pointer;transition:.2s;
}
.filter:hover{color:var(--teal-ink)}
.filter.active{background:var(--teal-dark);color:#fff}
/* ---- Grille de réalisations ---- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 24px rgba(40,36,44,.06);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ba-slider{aspect-ratio:4/3;border-radius:0;box-shadow:none}
/* Une carte = un bien ; on y feuillette ses pièces sans quitter la grille. */
.card-media{position:relative}
.card-slide{display:none}
.card-slide.is-active{display:block}
.card-nav{
position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;
border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:.8rem;line-height:1;
cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px rgba(40,36,44,.25);transition:.15s;
}
.card-nav:hover{color:var(--teal-ink);transform:translateY(-50%) scale(1.08)}
.card-prev{left:8px}
.card-next{right:8px}
.card-compteur,.fc-compteur{
position:absolute;top:10px;right:10px;z-index:6;pointer-events:none;
background:rgba(40,36,44,.72);color:#fff;font-size:.7rem;font-weight:600;
letter-spacing:.03em;padding:.2rem .5rem;border-radius:6px;
}
/* Bouton « agrandir » : la photo s'ouvre aussi au clic, le bouton le fait savoir.
Même bouton dans la vignette de galerie et dans le carrousel à la une. */
.btn-zoom{
position:absolute;top:10px;left:10px;z-index:6;width:30px;height:30px;border:0;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;opacity:.85;
display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(40,36,44,.25);transition:.15s;
}
.btn-zoom:hover{color:var(--teal-ink);transform:scale(1.08)}
.btn-zoom .ic{width:15px;height:15px}
.card:hover .btn-zoom{opacity:1}
.fc-stage .btn-zoom{top:14px;left:14px;width:38px;height:38px}
.fc-stage .btn-zoom .ic{width:18px;height:18px}
.card .ba-handle span{width:32px;height:32px;font-size:.75rem}
.card .ba-label{bottom:10px;font-size:.68rem;padding:.2rem .55rem}
.card .ba-label-before{left:10px}.card .ba-label-after{right:10px}
.card-body{padding:1rem 1.1rem 1.2rem;text-align:left} /* ne pas hériter du centrage de .section-center */
.card-body h3{font-size:1rem;margin-bottom:.2rem}
.card-body span{font-size:.85rem;color:var(--gray)}
.hidden{display:none}
/* ---- Visionneuse (vignette ouverte en grand) ---- */
/* La largeur du cadre est posée par le JS : elle tient compte du rapport de la photo,
pour qu'une image 16/9 comme une 4/3 tiennent toujours dans la hauteur de l'écran. */
body.lb-ouverte{overflow:hidden}
.lb{
--lb-large:92vw; /* largeur max du cadre, relâchée sur petit écran (voir plus bas) */
position:fixed;inset:0;z-index:60;background:rgba(24,22,26,.9);
display:flex;align-items:center;justify-content:center;padding:24px;
}
.lb[hidden]{display:none}
.lb-panneau{position:relative;max-width:100%;text-align:center}
.lb-scene{position:relative;display:inline-block;max-width:100%}
.lb .ba-slider{margin:0 auto;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lb-nav,.lb-fermer{
width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);
font-size:1.2rem;line-height:1;cursor:pointer;transition:.2s;
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.lb-nav:hover,.lb-fermer:hover{color:var(--teal-ink);}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.lb-nav[hidden]{display:none}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-fermer{position:fixed;top:18px;right:18px;z-index:8}
.lb-legende{
margin-top:1.1rem;color:#fff;display:flex;flex-wrap:wrap;gap:.2rem .7rem;
align-items:baseline;justify-content:center;
}
.lb-legende strong{font-size:1.05rem;font-weight:700}
.lb-legende span{font-size:.9rem;color:rgba(255,255,255,.78)}
/* Sur téléphone la photo est déjà étroite : les flèches passent SOUS elle, sur la ligne
de la légende, plutôt que d'en recouvrir un tiers. Elles restent calées sur les bords
du cadre, `.lb-scene` ayant exactement la largeur de la photo. */
@media(max-width:640px){
.lb{--lb-large:96vw;padding:12px}
.lb-nav{top:auto;bottom:-56px;transform:none;width:42px;height:42px}
.lb-nav:hover{transform:none}
.lb-prev{left:0}
.lb-next{right:0}
.lb-legende{margin-top:.9rem;min-height:42px;align-items:center;padding:0 50px}
}
/* ---- Formulaire audit ---- */
.audit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,3.5rem);align-items:stretch}
.audit-visual{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.audit-visual img{width:100%;height:100%;object-fit:cover;min-height:420px}
.audit-badge{
position:absolute;left:0;bottom:0;background:var(--teal-darker);color:#fff;padding:1.4rem 1.6rem;
border-top-right-radius:120px;max-width:min(70%,360px);font-size:.95rem;
}
.form-card h1{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:.4rem}
.form-card .lead{color:var(--gray);margin-bottom:1.6rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.45rem}
.field label .req{color:#d05a3e}
.field input,.field select{
width:100%;padding:.85rem 1rem;border:1px solid rgba(40,36,44,.18);border-radius:10px;
font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,145,158,.12)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* honeypot : masqué à l'œil ET aux lecteurs d'écran, mais rempli par les robots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--gray);margin:.4rem 0 1.2rem}
.consent input{width:auto;margin-top:.2rem}
.form-note{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--gray);margin-top:.9rem}
.form-success{display:none;background:#e7f3f0;border:1px solid var(--teal);color:var(--teal-darker);padding:1rem 1.2rem;border-radius:10px;margin-top:1rem}
.form-success.show{display:block}
/* ---- Pourquoi un audit ---- */
/* panneau beige arrondi posé sur le blanc, comme la maquette */
.panel{background:var(--cream-2);border-radius:var(--radius);padding:clamp(2rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem)}
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:1rem}
.reason{text-align:center}
.reason .r-ico{width:70px;height:70px;margin:0 auto 1rem;border-radius:50%;background:#fff;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 10px 24px rgba(40,36,44,.09)}
.reason h3{font-size:1rem;margin-bottom:.4rem}
.reason p{font-size:.9rem;color:var(--gray)}
/* phrase de clôture du bloc « home staging » */
.panel-closing{text-align:center;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;line-height:1.3;margin:2.8rem auto 0;max-width:34rem}
.panel-closing em{color:var(--teal-ink);font-style:normal}
/* ---- Avis clients ---- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:0 8px 24px rgba(40,36,44,.06);display:flex;flex-direction:column}
.stars{color:#f5a623;letter-spacing:2px;margin-bottom:.9rem}
.review p{font-size:.96rem;flex:1}
.review .who{display:flex;align-items:center;gap:.8rem;margin-top:1.3rem}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.who strong{display:block;font-size:.95rem}
/* Ne viser que la ligne de description : `.who span` attrapait aussi la pastille
d'initiales (elle aussi un ), qui héritait alors du gris et du petit corps. */
.who div span{font-size:.82rem;color:var(--gray)}
.reviews-head{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:1.5rem}
.reviews-head .big{font-size:2.6rem;font-weight:800;color:var(--teal-dark);line-height:1}
/* ---- Bande de 4 atouts (bas de page Réalisations) ---- */
.mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;padding:2.6rem 0}
.mini-feature{display:flex;gap:.9rem;align-items:center}
.mini-feature .mf-ico{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.mini-feature p{font-size:.92rem;color:var(--ink);line-height:1.45}
@media(max-width:900px){.mini-features{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mini-features{grid-template-columns:1fr}}
@media(max-width:1000px){
.gallery{grid-template-columns:repeat(2,1fr)}
.reasons{grid-template-columns:repeat(2,1fr)}
.reviews{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:641px) and (max-width:900px){
.cta-inner{padding-left:150px}
}
@media(max-width:900px){
.audit-grid{grid-template-columns:1fr}
.audit-visual{order:-1}
.fc-slide.is-active{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"titre" "media" "info";gap:1rem}
}
@media(max-width:640px){
.gallery{grid-template-columns:1fr}
.reasons{grid-template-columns:1fr}
.reviews{grid-template-columns:1fr}
.field-2{grid-template-columns:1fr}
/* 16px minimum : en dessous, iOS zoome automatiquement à la saisie */
.field input,.field select{font-size:16px}
.filter{padding:.7rem 1.1rem} /* cible tactile confortable */
.audit-visual img{min-height:280px}
.audit-badge{max-width:88%;padding:1.1rem 1.2rem;font-size:.9rem;border-top-right-radius:80px}
.featured .ba-slider{aspect-ratio:4/3}
.review{padding:1.4rem}
}