/*
Theme Name: AG Piscine
Theme URI: https://agpiscine.com
Author: Matt Digital
Author URI: https://mattdigital.fr
Description: Thème WordPress sur mesure pour AG Piscine, pisciniste en Provence. Construction, rénovation, entretien et dépannage de piscines.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: agpiscine
*/
:root{
--ecru:#F5EFE4;--ecru2:#FBF8F1;--sable:#E8DBC5;--navy:#143152;--navy-deep:#0F2540;
--sky:#5FA8D3;--gold:#C6902B;--gold-star:#E7A93B;--ink:#22303A;--muted:#77716A;--line:rgba(20,49,82,.15);
--serif:'Lora',Georgia,serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--shadow:0 40px 80px -46px rgba(20,49,82,.5);
--divider:#C9AD82;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--ecru);line-height:1.7}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;color:var(--navy);letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
.w{max-width:1200px;margin:0 auto;padding:0 40px}
/* inline-flex + align-items:baseline (pas top:50% en absolute) : le point
reste calé sur la 1re ligne du texte même si l'eyebrow passe sur 2 lignes
en mobile (centré :50% se recalait sinon au milieu du bloc de texte entier,
donc plus bas, décalé, dès que ça wrappait). */
.eyebrow{display:inline-flex;align-items:baseline;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--navy)}
.eyebrow::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;transform:translateY(-4px);background:var(--sky);flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:.92rem;padding:13px 24px;border-radius:9px;border:1px solid transparent;cursor:pointer}
.btn-navy{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
/* "Appeler" en version légère : simple contour, jamais de fond bleu foncé.
Deux déclinaisons selon le fond, beige sur l'écru du header, blanc sur photo. */
.btn-outline{background:transparent;color:var(--navy);border-color:var(--divider)}
.btn-outline:hover{background:rgba(20,49,82,.05)}
.btn-light{background:rgba(15,37,64,.18);color:#fff;border-color:rgba(255,255,255,.75)}
.js-call{cursor:pointer}
@media(min-width:961px){.js-call{min-width:168px}}
.btn svg{width:16px;height:16px}
/* HEADER */
header{background:var(--ecru);border-bottom:1px solid var(--line);position:relative;z-index:10}
/* même largeur que .w (le conteneur standard du site) : la marge entre le
burger et le bord doit être cohérente avec celle utilisée partout
ailleurs (hero, sections…), pas une valeur propre au header.
Centrage en vw plutôt que margin:auto classique : sur une page qui
scrolle, la scrollbar (uniquement à droite, ~15px) rétrécit le
conteneur (%) mais pas 100vw, donc un margin:auto classique recale le
logo quelques pixels à gauche du vrai centre de la fenêtre. width en %
(jamais en vw) pour ne jamais dépasser le conteneur réel et créer un
débordement horizontal ; seul le margin-left utilise vw, borné à 0 pour
ne pas devenir négatif sous 1200px (où .nav doit occuper toute la
largeur disponible, comme avant). */
.nav{display:flex;align-items:center;padding:16px 40px;width:min(1200px,100%);
margin-left:max(0px,calc((100vw - 1200px) / 2))}
.nav .logo-link{flex:1;display:flex;justify-content:center;min-width:0}
.nav .logo{height:46px;display:block;max-width:100%}
.nav .logo-sign{display:none}
/* .nav-right regroupe le burger (et les CTA masqués du header, voir
ci-dessous) : mobile, il reste à gauche ; desktop, il passe à droite du
logo centré via grid-column (media query plus bas). */
.nav-right{flex:0 0 auto;display:flex;align-items:center;gap:12px}
/* Les deux appels à l'action vivent sur le hero, pas dans le header. */
.nav .act .btn{display:none}
.nav .act{display:flex;align-items:center;gap:12px}
/* Sélecteur de langue (drapeau), à droite des boutons.
Tant qu'aucun plugin multilingue n'est actif, un seul drapeau s'affiche. */
.lang-switch{display:flex;align-items:center;gap:6px;margin-left:2px}
.lang-item{display:flex;padding:3px;border-radius:5px;line-height:0}
.lang-item .flag{width:22px;height:16px;border-radius:3px;display:block;box-shadow:0 0 0 1px var(--line)}
.lang-item:not(.is-current){opacity:.45}
.lang-item:not(.is-current):hover{opacity:1}
/* Desktop : menu (burger, .nav-right) seul à droite, logo centré. La grille
1fr/logo/1fr laisse la 1re colonne vide (rien à gauche du logo) et pousse
.nav-right en bout de 3e colonne : les deux colonnes 1fr ayant la même
largeur, le logo (colonne du milieu, largeur naturelle) reste pile au
centre quel que soit le poids de .nav-right. */
@media(min-width:961px){
/* grid-auto-flow:dense en filet de sécurité : logo-link (colonne 2) et
nav-right (colonne 3) sont dans cet ordre croissant dans le DOM, donc
le placement "sparse" par défaut suffit déjà — mais si cet ordre
source changeait à nouveau (ex. burger repassant avant le logo pour
un futur réglage mobile), "dense" évite que l'un des deux retombe sur
une 2e ligne implicite (header qui grossit, logo/burger désalignés
verticalement — bug déjà rencontré, voir historique Git). */
.nav{display:grid;grid-template-columns:1fr auto 1fr;grid-auto-flow:dense}
/* calé sur la hauteur du burger : au-delà le logo écrasait tout le reste
de la barre */
.nav .logo{height:36px}
.nav .logo-link{grid-column:2;justify-self:center}
.nav-right{grid-column:3;justify-self:end}
}
/* menu principal — bouton burger + panneau déroulant (toutes tailles d'écran) */
.nav-menu{position:relative;display:flex;align-items:center}
.nav-toggle-input{display:none}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:opacity .15s}
/* right:0 (jamais left) : le burger est toujours à droite du header,
mobile et desktop — le panneau doit donc toujours s'ouvrir vers la
gauche, ancré au bord droit, sinon il déborde de l'écran. */
.nav-links{display:none;flex-direction:column;list-style:none;position:absolute;top:100%;right:0;margin-top:16px;
min-width:230px;background:var(--ecru2);border:1px solid var(--line);border-radius:14px;padding:10px;
box-shadow:var(--shadow);z-index:30}
.nav-links li{width:100%}
.nav-links a{display:block;padding:11px 14px;border-radius:8px;font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.nav-links a:hover{background:var(--sable)}
.nav-toggle-input:checked ~ .nav-links{display:flex}
.nav-toggle-input:checked ~ .nav-toggle span:nth-child(2){opacity:0}
/* HERO bannière photo : plus de boutons dessus (déjà dans le header),
juste eyebrow/titre/accroche + horaires + avis Google */
/* Bandeau resserré à 620 px. La photo étant au format portrait, le cadrage
est choisi pour garder la ligne de débordement dans le haut du bandeau et
laisser toute la partie basse dans l'eau, où vient se poser le texte. */
.hero{position:relative;height:620px;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:56px}
/* Aucun zoom : l'image reste en permanence à son échelle minimale, celle qui
couvre tout juste le bandeau. Le mouvement Ken Burns se fait par un lent
glissement vertical, qui donne à voir plus de photo au fil du cycle au lieu
de grossir dedans. Le calque déborde de 40 px en haut et en bas pour avoir
de quoi glisser sans jamais découvrir le fond, et c'est lui qu'on translate
(transform, composité par le GPU) plutôt que le background-position, qui
ferait repeindre toute l'image à chaque image de l'animation. */
.hero-bg{position:absolute;left:0;right:0;top:-40px;height:calc(100% + 80px);
background:url('assets/img/hero_accueil.jpg') center 40%/cover no-repeat;
animation:kb 42s ease-in-out infinite alternate;will-change:transform}
/* course volontairement courte : plus bas, la ligne de débordement sort par
le haut du bandeau */
@keyframes kb{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
/* Dégradé porté par le bandeau lui-même et non par le calque photo, sinon il
glisserait avec elle. Assombrit surtout la gauche, derrière le texte, et
retombe à zéro avant le milieu pour garder l'eau lumineuse. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg,rgba(15,37,64,.72) 0%,rgba(15,37,64,.4) 26%,rgba(15,37,64,0) 52%),
linear-gradient(to top,rgba(15,37,64,.32) 0%,rgba(15,37,64,0) 32%)}
/* .w porte la largeur de page (100 % pour ne pas se recentrer en tant que
flex item), .hero-in cale le texte à gauche du visuel */
.hero>.w{position:relative;z-index:2;width:100%}
.hero-in{color:#fff;max-width:640px}
/* légère ombre portée : fait ressortir le texte blanc sur les zones
claires de la photo (eau vive), sans épaissir la typographie */
.hero .eyebrow,.hero h1,.hero p{text-shadow:0 2px 10px rgba(15,37,64,.45)}
.hero .eyebrow{color:#fff;opacity:.9}
.hero h1{color:#fff;font-size:1.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.34;margin:18px 0 14px}
.hero p{color:rgba(255,255,255,.9)}
/* accroche : pas de max-width en ch, pour qu'elle tienne sur une seule ligne
dès que la largeur d'écran le permet, et se coupe proprement sinon */
.hero p.hero-sub{font-size:1.02rem;max-width:none;margin-bottom:24px;text-wrap:balance}
/* La phrase fait 72 signes : impossible à tenir sur une ligne en mobile sans
descendre sous 9 px. On force donc la coupure à la virgule, qui est le
point d'articulation naturel, plutôt que de laisser tomber le retour au
milieu de « de la / conception ». Sans effet sur ordinateur, où la phrase
tient sur une ligne et où le est neutralisé. */
.br-sm{display:none}
.hero p.hero-note{color:rgba(255,255,255,.94);font-size:.85rem;margin:0;max-width:none;line-height:1.6;text-shadow:0 2px 8px rgba(15,37,64,.55)}
/* deux lignes en mobile, une seule séparée par une barre dès qu'il y a la place */
.hero p.hero-note span{display:block}
.hero p.hero-note .sep{display:none}
@media(min-width:721px){
.hero p.hero-note{display:flex;gap:10px}
.hero p.hero-note span{display:inline}
.hero p.hero-note .sep{display:inline;opacity:.55}
}
/* Les deux appels à l'action sont sur la photo, intercalés entre
l'accroche et la mention "Devis gratuit". */
.hero-cta{display:flex;gap:12px;margin-bottom:22px}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none}}
/* Google rating bar (bandeau séparé, ailleurs sur le site) */
.grate{background:var(--ecru2);border-bottom:1px solid var(--line)}
.hero + .grate{border-bottom:0}
.grate .w{display:flex;align-items:center;gap:14px;padding:16px 40px;justify-content:center;flex-wrap:wrap}
.grate .g{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:1.05rem;display:flex;align-items:center;gap:8px}
.grate .score{font-weight:700;color:var(--navy)}
.grate .stars{color:var(--gold-star);letter-spacing:2px}
.grate .cnt{color:var(--muted);font-size:.95rem}
.grate a{color:var(--muted);font-size:.9rem;border-bottom:1px solid var(--sky);padding-bottom:1px}
/* ============ TEXTE COURANT ============
Fer à gauche, sans césure. Les mots gardent partout leur espacement
naturel, et aucun n'est coupé par un tiret : un mot trop long pour finir la
ligne bascule entier à la suivante.
La marge droite reste donc irrégulière. C'est assumé : justifier le texte
obligerait le navigateur à combler le vide laissé par le mot reporté, et
son seul levier est l'espace entre les mots, qu'il étirait jusqu'à 3,2 fois
sa largeur naturelle sur ordinateur et 5,6 fois en mobile.
hyphens:manual est la valeur par défaut, explicitée pour qu'on ne
réintroduise pas la césure automatique par mégarde.
overflow-wrap:break-word ne sert que de garde-fou : il ne coupe un mot que
s'il est à lui seul plus large que la colonne (URL, terme très long), pour
qu'il ne déborde pas de la mise en page.
Sont exclus, faute d'objet : titres, sous-titres (.lead, .lead2), eyebrows,
boutons, listes, cartes courtes (prestations, zones), avis Google, bandeaux
de page et pied de page. */
.svc>div>p:not(.lead),
.intro>div>p:not(.lead),
.devis>div>p:not(.lead2),
.head>p:not(.lead),
.head.c>p:not(.lead),
.content-body p,
.faq-item p,
.aa-text p{
text-align:left;
text-wrap:pretty;
-webkit-hyphens:manual;
hyphens:manual;
overflow-wrap:break-word;
}
/* les paragraphes des blocs centrés gardent leur colonne centrée dans la
page ; c'est leur texte qui s'aligne à gauche à l'intérieur */
.head.c>p:not(.lead){margin-left:auto;margin-right:auto}
/* Exception sur ordinateur : sous un titre de section centré, ce paragraphe
est une courte accroche d'une à deux lignes, pas un bloc de lecture. Le fer
à gauche y décalait visiblement le texte par rapport au titre. En mobile il
reste à gauche : la colonne y est trop étroite pour que le centrage tienne. */
@media(min-width:721px){.head.c>p:not(.lead){text-align:center}}
/* sections */
.s{padding:96px 0;border-top:1px solid var(--divider)}
.sable{background:var(--sable)}
.head{max-width:620px;margin-bottom:46px}
/* max-width:none sur le bloc centré : c'était lui qui cassait les
sous-titres sur deux lignes. La largeur de lecture est reportée sur les
paragraphes, qui en ont besoin, pas sur les titres. */
.head.c{max-width:none;margin:0 auto 46px;text-align:center}
.head.c>p{max-width:820px;margin-left:auto;margin-right:auto}
/* .lead a son propre max-width (20ch) : dans un bloc centré, il faut aussi
centrer sa boîte, sinon text-align:center ne fait que centrer le texte
à l'intérieur d'une boîte restée collée à gauche */
.head.c .lead{margin-left:auto;margin-right:auto}
/* .one-line : titre de section qui doit tenir sur une seule ligne sur
ordinateur (il retombe naturellement sur deux lignes en mobile). */
.head.c.one-line{max-width:none}
@media(min-width:721px){.head.c.one-line h2{white-space:nowrap}}
/* Tous les sous-titres de section sont calés sur la même taille, qu'ils
soient portés par un h2 (blocs centrés) ou par un .lead (blocs à deux
colonnes). C'est la taille de .lead qui fait référence. */
.head h2{font-size:1.7rem;margin-top:10px;line-height:1.32}
/* blocs texte SEO centrés (home) : padding-bottom réduit (le bouton
"Demander un devis" flottait trop loin du bas du bloc avec le padding
standard des sections). "Voir plus" replie le 2e paragraphe sur mobile
(@media(max-width:720px) plus bas) ; le bouton n'est jamais concerné,
toujours visible. */
.seo-section{padding-bottom:56px}
.seo-more{display:none}
.lead{font-family:var(--serif);font-size:1.7rem;color:var(--navy);line-height:1.32}
/* intro */
.intro{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.intro p{color:var(--muted);margin-bottom:14px}
/* services */
/* max-width plus contenu que .w (dont .svc hérite par ailleurs) : la photo ne
remplit plus toute sa colonne à pleine largeur, et l'ensemble photo+texte
reste centré avec des marges visibles de chaque côté du bloc. align-items
center plutôt que start : évite qu'un texte court reste plaqué en haut
d'une photo bien plus haute, look déséquilibré. */
/* Bloc porté à la largeur utile de .w (1120 px) et colonne texte élargie :
les sous-titres les plus longs ("Un seul métier, une vraie expertise.")
doivent tenir sur une ligne, et la colonne, à 547 px au lieu de 484, est
ainsi plus confortable à lire, avec davantage de mots par ligne. La photo
gagne 16 px au passage. */
.svc{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;max-width:1120px;margin:0 auto}
.svc.rev{grid-template-columns:1.25fr 1fr}
.svc-img{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.svc-img img{width:100%;height:100%;object-fit:cover}
/* carte Google Maps (page Contact) : ratio paysage plutôt que le 4:5
portrait par défaut, plus adapté à une carte qu'à une photo */
.svc-map .svc-img{aspect-ratio:4/3}
.svc-map .svc-img iframe{width:100%;height:100%;border:0;display:block}
/* 1er bloc des pages prestation (photo + liste 01-04) : la liste à 4 points
est plus haute qu'un bloc à 2 paragraphes, ce qui déséquilibrait la photo
à côté (ratio 4:5 inchangé, on ne déforme pas la photo). On rééquilibre en
resserrant les espacements verticaux du texte (jamais la photo, ni sa
colonne : même ratio 1fr/1.25fr que le reste du site, pour une photo à
l'identique des autres blocs), et on aligne les deux colonnes en haut
(plutôt que centrées comme le reste du site) pour que l'eyebrow et la
photo démarrent à la même hauteur ; texte compressé pour que le bas ne
dépasse jamais le bas de la photo. Desktop uniquement (960px = seuil où
.svc repasse en une colonne, voir plus bas). */
/* Étapes numérotées resserrées (marges au-dessus/en dessous de chaque
titre) à toutes les tailles d'écran, pas seulement en desktop : sur
mobile aussi, l'ancien padding par défaut (22px) laissait de grands
espaces vides entre chaque étape. */
.svc-presta .svc-list li{padding:8px 0}
.svc-presta .svc-list li:first-child{padding-top:0}
.svc-presta .svc-list h3{margin-bottom:0}
.svc-presta .svc-list p{line-height:1.35}
/* Photo du 1er bloc nettement moins haute qu'ailleurs sur le site (carrée
plutôt que portrait 4:5), pour une bannière plus compacte en tête de
page prestation. */
.svc-presta .svc-img{aspect-ratio:1/1}
@media(min-width:961px){
.svc-presta .head{margin-bottom:28px!important}
.svc-presta .lead{margin-top:4px!important}
}
/* Bloc "Tout pour votre piscine" de la home : même souci que .svc-presta
(liste plus haute que la photo, ici 5 points et texte à gauche/photo à
droite via .rev), même traitement. Ratio différent de .svc-presta car le
contenu (nombre de points, pas d'intro) n'est pas le même. */
@media(min-width:961px){
.svc.svc-services{grid-template-columns:1fr 1.17fr;align-items:start}
.svc-services .head{margin-bottom:10px!important}
.svc-services .svc-list li{padding:8px 0!important}
.svc-services .svc-list li:first-child{padding-top:0!important}
.svc-services .svc-list h3{margin-bottom:0}
.svc-services .svc-list p{line-height:1.35}
}
.svc-list{list-style:none}
.svc-list li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:baseline}
.svc-list li:first-child{padding-top:0}
.svc-list .n{font-family:var(--serif);color:var(--sky);font-size:1rem;font-weight:600;min-width:26px}
.svc-list h3{font-size:1.4rem;font-weight:600;margin-bottom:3px}
.svc-list h3 a:hover{color:var(--sky)}
.svc-list p{color:var(--muted);font-size:.96rem}
/* réalisations formats variés */
.feature{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;margin-bottom:20px}
.feature img{width:100%;height:100%;object-fit:cover}
.gal3{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;align-items:start}
.gal3 .fr{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.gal3 .fr img{width:100%;display:block;object-fit:cover}
.gal3 .t{aspect-ratio:3/4}.gal3 .t img{height:100%}
.gal3 .b{aspect-ratio:4/3}.gal3 .b img{height:100%}
.gal3 .l{aspect-ratio:3/4}.gal3 .l img{height:100%}
/* le filigrane AG est gravé dans les pixels des photos réalisations (plus de calque CSS) */
/* frein basique anti-téléchargement (voir protect-images.js) — dissuasif seulement */
.rthumb,.fan-card,.c3d-card,.rlb-imgwrap img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* badge avant/après sur les visuels réalisations */
.tag{position:absolute;bottom:14px;right:16px;font-size:.68rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#fff;background:rgba(20,49,82,.6);padding:4px 10px;border-radius:999px;z-index:2}
/* réalisations — grille de vignettes + lightbox (page complète) */
/* flexbox + justify-content:center : la dernière rangée incomplète se centre au lieu de
coller les vignettes d'un côté avec un vide disproportionné de l'autre */
.rgallery{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.rthumb{position:relative;display:block;flex:0 0 calc(50% - 6px);margin:0;border:0;background:none;cursor:pointer;
border-radius:14px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.rthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.rthumb:hover img{transform:scale(1.05)}
.rthumb .tag{top:12px;right:12px;bottom:auto}
@media(min-width:600px){.rgallery{gap:16px}.rthumb{flex-basis:calc(33.333% - 11px)}}
@media(min-width:960px){.rgallery{gap:18px}.rthumb{flex-basis:calc(25% - 13.5px)}}
/* rangée statique de 3 photos (chantiers à exactement 3 photos) — 3 colonnes
fixes, sans retour à la ligne, identique à toutes les tailles d'écran.
Spécificité (.rgallery-row3 .rthumb, 2 classes) l'emporte sur les règles
ci-dessus à tous les breakpoints, quel que soit l'ordre des règles. */
.rgallery.rgallery-row3{flex-wrap:nowrap}
.rgallery-row3 .rthumb{flex:0 0 calc(33.333% - 8px)}
/* carrousel "cartes en éventail" — positions posées par fan-carousel.js (GSAP) en desktop,
défilement tactile natif en dessous de 960px (voir media query plus bas) */
.fan-carousel{--fan-card-w:clamp(132px,12vw,184px);--fan-card-h:calc(var(--fan-card-w) * 1.5);
display:flex;flex-direction:column;align-items:center;width:100%}
.fan-stage{position:relative;width:100%;max-width:900px;margin:0 auto;height:300px}
.fan-track{position:relative;width:100%;height:100%}
.fan-card{position:absolute;left:50%;top:50%;width:var(--fan-card-w);height:var(--fan-card-h);
margin-left:calc(var(--fan-card-w) / -2);margin-top:calc(var(--fan-card-h) / -2);
border:0;padding:0;font:inherit;color:inherit;text-align:inherit;display:block;cursor:pointer;
border-radius:20px;overflow:hidden;background:var(--sable);will-change:transform;
/* Ombre propre à l'éventail, plus rapprochée que --shadow. Deux couches :
une portée vers le bas qui décolle la carte du fond, et un halo sans
décalage qui assombrit la carte du dessous à l'endroit du chevauchement,
seul moyen de séparer deux photos sombres qui se recouvrent. */
box-shadow:0 18px 38px -14px rgba(20,49,82,.5),0 0 18px -2px rgba(20,49,82,.3)}
.fan-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fan-controls{display:flex;align-items:center;gap:18px;margin-top:34px}
/* Le script pose hidden sur les contrôles quand toutes les cartes tiennent
dans l'éventail (7 au plus) : sans cette règle, le display:flex ci-dessus
l'emportait sur la feuille par défaut du navigateur et flèches et points
restaient affichés alors qu'ils ne servaient à rien. */
.fan-controls[hidden]{display:none}
/* Éventail sans pagination : on rend la hauteur libérée par les contrôles,
les cartes des extrémités débordant d'une cinquantaine de pixels sous la
scène. Inutile en mobile, où l'affichage passe en défilement latéral. */
/* Les cartes des extrémités débordent sous la scène : cette réserve les
empêche de passer derrière le bouton qui suit le carrousel. */
@media(min-width:961px){.fan-carousel.is-static{padding-bottom:64px}}
/* Section réalisations plus compacte : l'éventail se suffit à lui-même,
il n'a pas besoin de l'espacement de section standard. */
@media(min-width:961px){.s-realisations{padding:64px 0}}
.fan-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
border:1.5px solid var(--line);background:var(--ecru2);color:var(--navy);cursor:pointer;box-shadow:var(--shadow);
transition:border-color .2s,color .2s}
.fan-arrow:hover{border-color:var(--navy)}
.fan-arrow svg{width:18px;height:18px}
.fan-dots{display:flex;align-items:center;gap:8px}
.fan-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:transform .25s,background .25s}
.fan-dot.active{background:var(--navy);transform:scale(1.35)}
/* Hauteur de scène resserrée : les cartes n'occupent qu'une partie de cet
espace, le reste était du vide au-dessus et en dessous de l'éventail. */
@media(min-width:640px){.fan-stage{height:300px}}
@media(min-width:1024px){.fan-stage{height:330px}}
@media(max-width:960px){
/* ~3 cartes visibles à la fois (largeur d'écran − paddings − 2 gaps, divisée par 3) */
.fan-carousel{--fan-card-w:clamp(92px,calc((100vw - 68px) / 3),150px)}
/* Pas d'ombre en mobile : les cartes y sont alignées côte à côte, sans
chevauchement, l'ombre n'a plus rien à séparer et alourdit la bande. */
.fan-card{box-shadow:none}
.fan-stage{height:auto;max-width:none;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding:6px 24px 10px}
/* Gap resserré (14→10 px) : les cartes gagnent en largeur d'image sans se
toucher. Format 4:5 (au lieu de 3/4.6, plus étroit) demandé par Yoan. */
.fan-track{display:flex;gap:10px;height:auto}
.fan-card{position:static;margin:0;flex:0 0 var(--fan-card-w);height:auto;aspect-ratio:4/5;
scroll-snap-align:center;
/* translateZ(0) plutôt que "none" : annule le transform GSAP résiduel tout en forçant
son propre calque de compositing — évite le bug iOS Safari qui casse le border-radius
sur un enfant overflow:hidden d'un conteneur à défilement tactile (-webkit-overflow-scrolling) */
transform:translateZ(0)!important}
.fan-controls .fan-arrow{display:none}
}
/* carrousel 3D rotatif (cylindre) — chantiers à plus de 2 photos, page Réalisations.
Dimensions (largeur de face, hauteur du cadre) posées par carousel-3d.js ; la rotation
se fait au glisser (souris/tactile) via GSAP (rotationY), avec un peu d'inertie au lâcher. */
.c3d{display:flex;flex-direction:column;align-items:center;width:100%}
.c3d-clip{width:100%;overflow:hidden;padding:12px 0}
.c3d-stage{width:100%;height:100%;perspective:1200px;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.c3d-track{position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:grab}
.c3d-track.dragging{cursor:grabbing}
/* Ombre dédiée (pas var(--shadow), pensé pour de plus grands blocs et trop
ample : décalage/flou dépassaient la zone de respiration de .c3d-clip et
se retrouvaient rognés par son overflow:hidden, donc quasi invisibles) —
plus légère et resserrée pour rester lisible derrière chaque carte. */
.c3d-card{position:absolute;left:50%;top:50%;border:0;padding:0;margin:0;background:var(--sable);cursor:inherit;
border-radius:16px;overflow:hidden;box-shadow:0 14px 26px -12px rgba(20,49,82,.4);backface-visibility:hidden}
.c3d-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.c3d-card .tag{top:12px;right:12px;bottom:auto}
.c3d-hint{margin-top:22px;font-size:.78rem;color:var(--muted);text-align:center}
/* mobile, UNIQUEMENT pour les chantiers à peu de photos (voir carousel-3d.js —
.is-mobile n'est ajoutée que sous 960px ET quand le nombre de cartes est bas ;
au-delà, l'effet 3D reste actif partout, desktop et mobile) : la rotation sur
un petit rayon devient peu lisible au tactile sur petit écran (photos de
travers) — simple rangée scrollable, photos dans l'ordre du chantier, sans
rotation ni perspective. */
.c3d.is-mobile{--c3d-mobile-w:clamp(120px,32vw,168px)}
.c3d.is-mobile .c3d-clip{height:auto!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding:6px 24px 10px}
.c3d.is-mobile .c3d-stage{perspective:none;justify-content:flex-start}
.c3d.is-mobile .c3d-track{display:flex;gap:14px;height:auto;width:auto}
.c3d.is-mobile .c3d-card{position:static;cursor:pointer;
width:var(--c3d-mobile-w)!important;height:auto!important;margin:0!important;
aspect-ratio:3/4;flex:0 0 var(--c3d-mobile-w);scroll-snap-align:center;
transform:none!important}
.c3d.is-mobile .c3d-hint{display:none}
/* comparaison avant/après — ligne de révélation déplaçable (souris, tactile, clavier) */
.reveal{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:4/3;border-radius:20px;
overflow:hidden;box-shadow:var(--shadow);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.reveal-before-wrap{position:absolute;inset:0;overflow:hidden}
.reveal-divider{position:absolute;top:0;bottom:0;width:3px;background:#fff;
box-shadow:0 0 0 1px rgba(20,49,82,.15);transform:translateX(-50%);z-index:3}
.reveal-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;
border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:var(--shadow);
display:flex;align-items:center;justify-content:center;transition:transform .2s}
.reveal-handle::before{content:"";width:2px;height:16px;background:#fff;box-shadow:6px 0 0 #fff,-6px 0 0 #fff}
.reveal.dragging .reveal-handle{transform:translate(-50%,-50%) scale(1.1)}
.reveal-label{position:absolute;top:16px;z-index:4;font-size:.68rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#fff;background:rgba(20,49,82,.65);padding:5px 12px;border-radius:999px}
.reveal-label-before{left:16px}
.reveal-label-after{right:16px}
/* discret : signale que le clic (hors glissement) ouvre les photos en
grand, sans concurrencer le curseur ew-resize du glisser-déposer */
.reveal-expand{position:absolute;right:16px;bottom:16px;z-index:4;width:30px;height:30px;border-radius:50%;
background:rgba(20,49,82,.55);color:#fff;display:flex;align-items:center;justify-content:center;
opacity:.8;transition:opacity .2s,background .2s;pointer-events:none}
.reveal-expand svg{width:15px;height:15px}
.reveal:hover .reveal-expand{opacity:1;background:rgba(20,49,82,.75)}
/* lightbox réalisations */
.rlb{position:fixed;inset:0;background:rgba(15,37,64,.95);z-index:1000;display:none;align-items:center;justify-content:center;padding:60px 24px}
.rlb.open{display:flex}
.rlb-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:1.1rem;
line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.rlb-close:hover{background:rgba(255,255,255,.2)}
.rlb-inner{width:100%;max-width:920px;max-height:100%;display:flex;flex-direction:column;align-items:center}
.rlb-imgwrap{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rlb-imgwrap img{max-width:100%;max-height:68vh;width:auto;height:auto;object-fit:contain;display:block;border-radius:12px}
.rlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.3rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center}
.rlb-nav:hover{background:rgba(255,255,255,.2)}
.rlb-prev{left:6px}
.rlb-next{right:6px}
.rlb-meta{color:#fff;text-align:center;margin-top:20px;max-width:640px}
.rlb-meta h3{font-family:var(--serif);color:#fff;font-size:1.3rem;font-weight:600}
.rlb-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.rlb-tags span{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--navy);background:var(--sable);padding:5px 12px;border-radius:999px}
@media(max-width:640px){
.rlb{padding:16px}
.rlb-close{top:8px;right:8px;background:rgba(15,37,64,.7)}
.rlb-nav{width:36px;height:36px;font-size:1.1rem}
.rlb-meta h3{font-size:1.05rem}
.rlb-meta p{font-size:.85rem}
}
/* avis google */
.rev-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.rev-head .score{font-family:var(--serif);font-size:2.4rem;color:var(--navy);font-weight:600}
.rev-head .stars{color:var(--gold-star);font-size:1.3rem;letter-spacing:3px}
.rev-head .cnt{color:var(--muted)}
.rev-head a{color:var(--navy);font-weight:700;font-size:.9rem;border-bottom:1px solid var(--sky);padding-bottom:2px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Scopé à .reviews : ".rev" est aussi le nom du modificateur "inversé" des
blocs zig-zag (.svc.rev, sens texte/photo alterné) — un sélecteur ".rev"
nu s'appliquait par erreur à CES blocs aussi (même mot, sens différent),
leur donnant un fond carte + padding non voulus. */
.reviews .rev{background:var(--ecru2);border:1px solid var(--line);border-radius:18px;padding:28px}
.reviews .rev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.reviews .rev .stars{color:var(--gold-star);letter-spacing:2px}
.reviews .rev p{font-size:.98rem;color:var(--ink)}
.reviews .rev b{display:block;margin-top:14px;font-size:.88rem;color:var(--muted)}
/* devis */
.devis{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.devis .lead2{font-family:var(--serif);font-size:1.7rem;line-height:1.32;color:var(--navy);margin-bottom:14px}
.devis p{color:var(--muted)}
.devis .coord{margin-top:20px}
.devis .coord div{display:flex;align-items:center;gap:9px;padding:5px 0;color:var(--navy);font-weight:600}
.devis .coord svg{width:17px;height:17px;flex-shrink:0;color:var(--navy);opacity:.75}
.devis .coord a{color:inherit}
.devis .coord a:hover{border-bottom:1px solid var(--sky)}
/* les horaires suivent l'adresse : pas de pictogramme, mais alignés sur son
texte plutôt que sur le bord du bloc */
.devis .coord-hours{padding-left:26px;font-weight:500;color:var(--muted)}
.devis .call{margin-top:18px}
.form{background:var(--ecru2);border:1px solid var(--line);border-radius:20px;padding:32px}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:0 0 6px;letter-spacing:.04em}
.form .f{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);margin-bottom:14px}
.form select.f{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 13px center}
.form .row2{display:flex;gap:12px;align-items:center;margin-top:4px}
.form button.btn{appearance:none;width:100%}
.form-note{font-size:.82rem;color:var(--muted);margin-top:12px}
/* footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:60px 0 32px}
footer .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:38px}
footer img{height:36px;margin-bottom:14px}
footer b{color:#fff;font-family:var(--serif);font-weight:600;display:block;margin-bottom:4px}
footer a{display:block;color:rgba(255,255,255,.7);padding:4px 0}
.f-social{display:flex;align-items:center;gap:9px}
.f-social svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.footer-menu{list-style:none}
.fb{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;display:flex;justify-content:space-between;font-size:.82rem;flex-wrap:wrap;gap:8px}
.fb a{display:inline;color:inherit;border-bottom:1px solid rgba(255,255,255,.3)}
.fb a:hover{border-color:var(--sky)}
/* ============ PAGES INTÉRIEURES ============ */
/* bandeau photo (prestations, départements, articles) : même photo partout
(hero-fond-piscine-travertin), sans filtre sombre — demande Yoan. Plus de
calque ::after ; la lisibilité du texte tient au text-shadow ci-dessous
plutôt qu'à un assombrissement de la photo. object-position calé pour
garder le bassin et les marches visibles malgré le cadrage portrait de la
photo compressé dans ce bandeau large et court. */
.phero{position:relative;height:260px;overflow:hidden;display:flex;align-items:center}
.phero-bg{position:absolute;inset:0;background-position:center 40%;background-size:cover}
/* voile sombre très léger, concentré derrière le texte (côté gauche) et
fondu avant le milieu de l'image : renforce la lisibilité sans donner
l'impression d'un filtre posé sur toute la photo */
.phero-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(15,37,64,.3) 0%,rgba(15,37,64,.1) 34%,rgba(15,37,64,0) 55%)}
.phero-in{position:relative;z-index:2;color:#fff;max-width:640px}
.phero .eyebrow,.phero h1,.phero p{text-shadow:0 1px 3px rgba(15,37,64,.8),0 2px 12px rgba(15,37,64,.55)}
.phero .eyebrow{color:#fff;opacity:.9}
.phero h1{color:#fff;font-size:2.3rem;margin:12px 0 4px}
.phero p{color:rgba(255,255,255,.9);max-width:44ch}
/* bandeau texte simple (pages sans photo) : centré, pour rester cohérent
avec le reste des pages hub qui utilisent ce gabarit (.head.c, etc.) */
.phero-plain .w{text-align:center}
.phero-plain{padding:46px 0 8px}
.phero-plain h1{font-size:2.4rem;margin:14px auto 6px;max-width:760px}
.phero-plain p{color:var(--muted);max-width:44ch;margin:0 auto}
/* Titres des 5 pages prestations réduits de 15 % (demande Yoan) par
rapport au gabarit .phero-plain standard (2.4rem desktop / 1.9rem
mobile, voir plus bas) : 2.4 × .85 = 2.04rem. */
.phero-presta h1{font-size:2.04rem}
/* pas de photo pour amortir la transition : la section suivante colle sinon
au sous-titre avec un vide disproportionné (46+96px de padding cumulés).
padding-bottom aussi réduit pour rester symétrique avec le padding-top,
sinon le texte d'intro se retrouve avec un vide disproportionné en dessous. */
.phero-plain + .s{padding:32px 0}
/* zones d'intervention (cards) */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.zone{background:var(--ecru2);border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;transition:border-color .2s}
.zone:hover{border-color:var(--sky)}
.zone-code{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--navy);font-weight:600}
.zone-ville{display:block;font-size:.86rem;color:var(--muted);margin-top:4px}
.zone-city{display:block;font-size:.72rem;color:var(--muted);opacity:.75;margin-top:2px}
/* Bloc "Au cœur de la Provence" de la home : le resserrement ne vaut plus
que pour le mobile (retour au format standard ci-dessus en desktop, voir
media query plus bas pour le réglage mobile de .zones-compact). */
/* Les 5 prestations de l'accueil, en blocs carrés arrondis, sans photo :
même principe que les cartes "Zones d'intervention", avec un pictogramme
discret et tout le contenu centré. Disposition en flex plutôt qu'en
grille pour que le reliquat (5e bloc, puis 2 blocs à 3 colonnes) se
recentre au lieu de rester collé à gauche. */
.presta-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
/* padding haut fixe plutôt que centrage vertical : les descriptions n'ont
pas toutes le même nombre de lignes, et un justify-content:center
décalait les pictogrammes d'une carte à l'autre. */
.presta-card{flex:0 0 calc(20% - 12.8px);background:var(--ecru2);border:1px solid var(--line);
border-radius:14px;padding:26px 18px 22px;text-align:center;display:flex;flex-direction:column;
align-items:center;transition:border-color .2s}
.presta-card:hover{border-color:var(--sky)}
.presta-ico{display:block;color:var(--navy);line-height:0;margin-bottom:10px}
.presta-ico svg{width:26px;height:26px}
.presta-card h3{font-size:1.05rem;color:var(--navy)}
.presta-card p{font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:6px}
/* grille des 5 prestations (pages départements) — le 5e élément se centre au lieu de rester collé à gauche */
.presta-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.presta-grid .zone{flex:0 0 calc(25% - 12px)}
/* pagination (résultats de recherche) */
.pagination{margin-top:38px}
/* .nav-links est aussi le panneau déroulant du menu : on neutralise ici
tout ce que cette règle impose (position, fond, ombre…). */
.pagination .nav-links{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;
position:static;margin:0;padding:0;min-width:0;background:none;border:0;border-radius:0;box-shadow:none}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
background:var(--ecru2);color:var(--navy);font-size:.85rem;font-weight:600}
.pagination .page-numbers:hover{border-color:var(--sky)}
.pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* à lire aussi (articles) */
.articles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article-card{display:block;background:var(--ecru2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.article-card-img{aspect-ratio:4/3}
.article-card-img img{width:100%;height:100%;object-fit:cover}
.article-card h3{font-size:1rem;padding:16px 18px;color:var(--navy)}
/* page Blog et archives de catégorie : cartes enrichies (catégorie + extrait).
Les sélecteurs ciblent .article-card-info, absent des cartes "à lire aussi"
et des résultats de recherche ci-dessus, qui restent donc inchangés. */
.article-card-info{padding:14px 18px 18px}
.article-card-info .cat{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin-bottom:6px}
.article-card-info h3{padding:0;margin-bottom:8px;line-height:1.35}
.article-card-info p{color:var(--muted);font-size:.86rem;line-height:1.5;margin:0}
.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px}
.blog-filters a{padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--navy);background:var(--ecru2)}
.blog-filters a:hover{border-color:var(--sky)}
.blog-filters a.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
/* valeurs (à propos) : filet bleu ciel entre le mot et sa description
plutôt qu'un pictogramme (charte : pas d'icônes). Centré sur desktop ;
repasse à gauche sur mobile où le texte, plus étroit par colonne,
se lit mieux aligné au bord qu'au centre. */
.values{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;text-align:left;margin-top:12px}
.values li{display:flex;flex-direction:column}
.values h3{font-family:var(--serif);font-size:1.15rem;color:var(--navy);padding-bottom:16px;margin-bottom:16px;border-bottom:2px solid var(--sky)}
.values p{color:var(--muted);font-size:.92rem;line-height:1.45}
@media(min-width:961px){
.values{text-align:center}
.values li{align-items:center}
}
/* avant/après (à propos) : deux photos côte à côte dans une même carte,
pas de slider JS, juste une comparaison directe et lisible */
.aa-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1040px;margin:50px auto 0}
.aa-card{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--ecru2)}
.aa-imgs{display:grid;grid-template-columns:1fr 1fr}
.aa-imgs figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden}
.aa-imgs img{width:100%;height:100%;object-fit:cover;display:block}
.aa-imgs figcaption{position:absolute;top:12px;left:12px;background:var(--navy);color:#fff;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.aa-text{padding:22px 26px}
.aa-text h3{font-family:var(--serif);font-size:1.15rem;color:var(--navy);margin-bottom:6px}
.aa-text p{color:var(--muted);font-size:.9rem;line-height:1.45}
/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item summary{font-family:var(--serif);font-size:1.15rem;color:var(--navy);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--sky);font-size:1.3rem}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--muted);margin-top:12px}
/* Les 3 dernières questions sont repliées derrière « Voir plus de questions »
et s'ouvrent en CSS seul, via la case à cocher qui les précède. Une fois
dépliées elles sont en tout point identiques aux cinq premières ; le bouton
cède alors la place au lien vers la page FAQ complète. */
.faq-more-input{display:none}
.faq-second{display:none}
.faq-more-input:checked ~ .faq-second{display:block}
.faq-actions{margin-top:20px;text-align:center}
.faq-more-input:checked ~ .faq-actions .faq-more{display:none}
.faq-all{display:none}
.faq-more-input:checked ~ .faq-actions .faq-all{display:inline-flex}
.faq-more{cursor:pointer}
/* pages hub "communes desservies" (maillage SEO, hors menus) */
.communes{max-width:820px;margin:0 auto}
.commune-item{border-bottom:1px solid var(--line);padding:26px 0}
.commune-item:first-child{padding-top:0}
.commune-item:last-child{border-bottom:0}
.commune-item h3{font-size:1.2rem;margin-bottom:10px}
.commune-item p{color:var(--muted)}
.commune-item p+p{margin-top:10px}
.commune-item a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.commune-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;max-width:820px;margin-left:auto;margin-right:auto}
.commune-tags span{padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--navy);background:var(--ecru2)}
/* contenu éditorial (page.php, single.php) */
.content-body{color:var(--ink)}
.content-body h2{font-size:1.7rem;margin:36px 0 14px}
.content-body h3{font-size:1.3rem;margin:28px 0 10px}
.content-body p{color:var(--muted);margin-bottom:16px}
.content-body ul,.content-body ol{color:var(--muted);margin:0 0 16px 22px}
.content-body a{color:var(--navy);border-bottom:1px solid var(--sky)}
.content-body img{border-radius:16px;margin:20px 0}
/* encadré "Sur le terrain" (shortcode [sur_le_terrain], une remarque
d'expérience de Yoan insérée dans un article) : sobre, mêmes couleurs
que le reste du site, filet de couleur à gauche pour le distinguer
d'une simple citation sans en faire un bloc trop lourd */
.sur-le-terrain{background:var(--ecru2);border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:14px;padding:22px 26px;margin:28px 0}
.sur-le-terrain .eyebrow{display:block;margin-bottom:10px}
.sur-le-terrain p{color:var(--ink);font-style:italic;margin:0}
/* pages "Retour de chantier" (template-chantier.php) : grille de photos
de chantier, formats variés sans grille figée à 3 colonnes */
.chantier-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.chantier-photo{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.chantier-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:720px){.chantier-photos{grid-template-columns:1fr}}
/* bandeau de consentement cookies (RGPD) : carte flottante en bas d'écran,
masquée par défaut (attribut [hidden]) tant qu'aucun choix n'a été fait,
voir assets/js/cookie-consent.js */
.cookie-bar{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;
max-width:900px;margin:0 auto;background:var(--ecru2);border:1px solid var(--line);
border-radius:16px;box-shadow:var(--shadow)}
.cookie-bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:22px 26px;flex-wrap:wrap}
.cookie-bar p{color:var(--muted);font-size:.88rem;line-height:1.5;margin:0;max-width:560px}
.cookie-bar a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cookie-bar-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-bar .btn{padding:11px 20px;font-size:.85rem}
/* Contact Form 7 — habillage aux couleurs du site */
.form .wpcf7-form-control-wrap{display:block}
.form .wpcf7-not-valid-tip{color:#b3261e;font-size:.78rem;margin:-10px 0 12px;font-weight:600}
.form .wpcf7-response-output{border-radius:9px;padding:12px 14px;margin-top:16px;font-size:.85rem;border-color:var(--line)!important}
.form .wpcf7-form-control.wpcf7-not-valid{border-color:#b3261e}
.form input[type=submit].btn{appearance:none;width:100%}
.form .wpcf7-spinner{display:none}
/* Page d'attente de la version anglaise (template-en-holding.php) */
.enh{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 22px}
.enh-bg{position:absolute;inset:0;background-position:center 42%;background-size:cover}
.enh-bg::after{content:"";position:absolute;inset:0;background:rgba(15,37,64,.55)}
.enh-card{position:relative;z-index:2;width:100%;max-width:600px;background:var(--ecru);
border-radius:20px;padding:46px 44px 40px;text-align:center;box-shadow:var(--shadow)}
.enh-logo{height:52px;width:auto;margin:0 auto 26px}
.enh-card .eyebrow{justify-content:center}
.enh-card h1{font-size:2.1rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.3;margin:16px 0 20px}
.enh-lead{color:var(--muted);font-size:1rem;margin-bottom:12px}
.enh-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 16px}
.enh-hours{color:var(--muted);font-size:.82rem;line-height:1.6}
.enh-back{display:inline-block;margin-top:26px;font-size:.85rem;font-weight:700;color:var(--navy);
border-bottom:1px solid var(--sky);padding-bottom:2px}
/* ============ RESPONSIVE ============ */
@media(max-width:960px){
.intro,.svc,.svc.rev,.devis{grid-template-columns:1fr}
.svc-img{order:-1}
.svc .head{order:-1}
.reviews{grid-template-columns:1fr;gap:14px}
/* bandeau de note et cartes d'avis resserrés : ils occupaient presque un
écran entier à eux seuls */
.rev-head{gap:10px;margin-bottom:24px}
.rev-head .score{font-size:1.7rem}
.rev-head .stars{font-size:1rem;letter-spacing:2px}
.rev-head .cnt{font-size:.88rem}
.rev-head svg{width:20px;height:20px}
.reviews .rev{padding:18px 20px;border-radius:14px}
.reviews .rev .top{margin-bottom:8px}
.reviews .rev .stars{font-size:.85rem}
.reviews .rev p{font-size:.92rem}
.reviews .rev b{margin-top:10px}
/* pied de page resserré : rubriques et lignes plus proches */
footer{padding:40px 0 24px}
footer .fg{grid-template-columns:1fr;gap:22px;margin-bottom:26px}
footer a{padding:2px 0}
footer b{margin-bottom:2px}
footer img{height:30px;margin-bottom:10px}
/* formulaire plus compact : champs moins hauts et surtout moins d'air
entre les blocs, notamment entre « Type de demande » et le message */
.form .f{padding:9px 12px;margin-bottom:9px}
.form label{margin-bottom:4px;font-size:.75rem}
.form textarea.f{min-height:88px}
.zones,.articles{grid-template-columns:repeat(2,1fr)}
.presta-grid .zone{flex-basis:calc(50% - 8px)}
.presta-card{flex-basis:calc(33.333% - 11px)}
.values{grid-template-columns:repeat(3,1fr)}
.aa-grid{grid-template-columns:1fr;max-width:520px}
}
@media(max-width:720px){
/* Le plus long intitulé, « Construire et entretenir en Provence », était le
seul à passer sur deux lignes en mobile. Sa première ligne se recentrait
alors, sous l'effet du text-align:center du bloc, et le point bleu se
retrouvait détaché du texte, contrairement à tous les autres. La chasse
est resserrée et le corps indexé sur la largeur d'écran, juste ce qu'il
faut pour qu'il tienne sur une ligne dès 360 px. En dessous, le
text-align:left garantit que les deux lignes s'alignent l'une sous
l'autre au lieu de se recentrer, et que le point reste collé à la
première. */
.eyebrow{font-size:clamp(.58rem,calc(3.3vw - 1.9px),.68rem);letter-spacing:.18em;text-align:left}
/* Titres de section centrés (.head.c : eyebrow + h2, parfois + .lead) :
centrage assumé sur ordinateur, mais illisible sur une colonne mobile
étroite, contrairement au reste du site déjà au fer à gauche (.head
sans .c, eyebrow+lead hors bloc .head). On aligne donc .head.c sur eux.
Les paragraphes .head.c>p (hors .lead) sont déjà au fer à gauche en
mobile par la règle générale plus haut ; seuls l'eyebrow, le h2 et
.lead héritaient encore du centrage du bloc. Bandeau d'avis Google
(.grate, .rev-head) et bloc « Demander un devis » (.devis) restent
volontairement centrés : ce ne sont pas des titres de section. */
.head.c{text-align:left}
.w{padding:0 22px}
.s{padding:56px 0}
/* Mobile : le logo complet laisse place à la seule signature AG, collée à
gauche (premier dans le DOM) ; le burger (.nav-right) est poussé à
droite par le margin-right:auto de la signature. */
.nav{padding:14px 22px;gap:10px}
.nav .logo-link{flex:0 0 auto;margin-right:auto}
.nav .logo-full{display:none}
/* la signature fait 64 % de hauteur de lettres : à 26 px, le « AG »
mesure environ 17 px, dans le registre du burger */
.nav .logo-sign{display:block;height:26px}
/* Textes calés en bas de la photo, au niveau du bassin plutôt que dans les
arbres ; le dégradé passe donc du côté gauche au bas de l'image. */
.hero{height:auto;min-height:620px;padding:110px 0 46px;align-items:flex-end}
.hero-bg{background-position:center center}
.hero::before{background:linear-gradient(to top,rgba(15,37,64,.82) 0%,rgba(15,37,64,.6) 30%,rgba(15,37,64,.14) 62%,rgba(15,37,64,.3) 100%)}
.hero-in{max-width:none}
/* Même interlettrage qu'en version ordinateur (.16em). Il élargit
beaucoup « NOTRE SAVOIR-FAIRE » : le corps est donc indexé sur la
largeur d'écran pour que le titre tienne sur ses deux lignes, sans
jamais en déborder sur une troisième, de 320 à 430 px. */
.hero h1{font-size:clamp(1.1rem,calc(7.4vw - 5.2px),1.7rem);letter-spacing:.16em;margin:5px 0 12px}
/* corps indexé sur la largeur d'écran : la seconde ligne fait 45 signes,
elle déborderait sur une troisième à corps fixe en dessous de 360 px */
.hero p.hero-sub{font-size:clamp(.75rem,calc(2.74vw + 3.4px),.88rem);margin-bottom:20px}
/* Sous-titres encore réduits (1,2rem → 1,05rem, demande Yoan) : reste
nettement au-dessus du corps de texte (14px) pour préserver la
hiérarchie, tout en allégeant visuellement chaque section mobile. */
.head h2,.lead,.devis .lead2{font-size:1.05rem}
.br-sm{display:inline}
.hero-cta{gap:10px;margin-bottom:16px}
.hero-cta .btn{padding:12px 16px;font-size:.85rem}
/* avis Google : une seule ligne, y compris sur petit écran */
.grate .w{padding:12px 14px;gap:6px;flex-wrap:nowrap;white-space:nowrap;justify-content:center}
.grate .g{font-size:.85rem;gap:5px}
.grate .g svg{width:15px;height:15px}
.grate .score,.grate .cnt{font-size:.85rem}
.grate .stars{font-size:.8rem;letter-spacing:1px}
.grate a{font-size:.73rem}
.gal3{grid-template-columns:1fr}
.form .grid{grid-template-columns:1fr}
.fb{flex-direction:column;gap:8px}
.phero{height:auto;min-height:200px;padding:56px 0 30px}
.phero h1{font-size:1.9rem}
.phero-plain{padding:32px 0 8px}
.phero-plain h1{font-size:1.9rem}
.phero-presta h1{font-size:1.62rem}
.phero-plain + .s{padding-top:24px}
.articles{grid-template-columns:1fr}
/* cartes département (04/13/84/83) : restent en grille 2x2 plutôt que de
s'empiler en une colonne, sinon le bloc prend près d'un écran et demi à
lui seul. Padding, gap et corps réduits pour des cartes bien plus
compactes qu'en desktop/tablette. */
.zones{grid-template-columns:repeat(2,1fr);gap:10px}
.zone{padding:14px 10px}
.zone-code{font-size:1.3rem}
.zone-ville{font-size:.78rem;margin-top:2px}
.zone-city{font-size:.66rem}
/* Encore plus compact sur la home : la section entière doit rester
nettement plus petite qu'avant, mobile compris. */
.zones-compact{gap:8px}
.zones-compact .zone{padding:9px 6px}
.zones-compact .zone-code{font-size:.92rem}
.zones-compact .zone-ville{font-size:.6rem;margin-top:1px}
.zones-compact .zone-city{font-size:.54rem}
.presta-grid .zone{flex-basis:100%}
/* 5 prestations en grille 2 colonnes : les 4 premières forment 2 rangées
pleines, et Équipements (dernière) passe sur toute la largeur au lieu de
rester seule au centre d'une 3e rangée à moitié vide. Padding et icône
resserrés pour des cartes globalement moins hautes. */
.presta-card{flex-basis:calc(50% - 8px);padding:16px 12px 14px}
.presta-card:last-child{flex-basis:100%}
.presta-ico{margin-bottom:6px}
.presta-ico svg{width:22px;height:22px}
.presta-card h3{font-size:.98rem}
.presta-card p{font-size:.8rem}
.values{grid-template-columns:repeat(2,1fr)}
/* tout le bloc est centré en mobile, y compris son paragraphe, que la
règle générale de texte courant aligne à gauche par défaut */
.devis>div:not(.form){text-align:center}
.devis>div>p:not(.lead2){text-align:center}
.devis .call{display:flex;justify-content:center}
/* le bloc est centré en mobile : les lignes de coordonnées, qui sont en
flex à cause du pictogramme, doivent l'être explicitement */
.devis .coord div{justify-content:center}
.devis .coord-hours{padding-left:0}
.seo-section{padding-bottom:36px}
.seo-extra{display:none}
.seo-block.is-expanded .seo-extra{display:block}
.seo-more{display:inline-block;margin-top:12px;background:none;border:0;padding:0;
color:var(--navy);font-weight:700;font-size:.85rem;text-decoration:underline;
text-underline-offset:3px;cursor:pointer}
.seo-block.is-expanded .seo-more{display:none}
/* Bloc « Construire et entretenir » : texte assez court pour rester
visible en entier, il n'a ni texte replié ni bouton « Voir plus ». */
.seo-block.seo-full .seo-extra{display:block}
.seo-block.seo-full .seo-more{display:none}
.cookie-bar{left:14px;right:14px;bottom:14px}
.cookie-bar-in{padding:20px;flex-direction:column;align-items:stretch;text-align:center}
.cookie-bar-actions{justify-content:center}
.enh-card{padding:34px 24px 30px}
.enh-card h1{font-size:1.6rem}
.enh-contact .btn{width:100%}
}