pleine largeur à fond
coloré. WPBakery l'enveloppe dans .vc_row > .vc_column_container, dont les
marges négatives et le padding casseraient les fonds. On les remet à plat
plutôt que d'obliger le client à cocher « row stretch » sur chaque bloc :
le rendu reste correct même s'il déplace une section. --- */
.couvcompagnons-page .vc_row,
.couvcompagnons-page .vc_row .vc_column_container,
.couvcompagnons-page .vc_row .vc_column_container>.vc_column-inner,
.couvcompagnons-page .wpb_wrapper{margin:0;padding:0;width:100%}
.couvcompagnons-page .wpb_content_element{margin-bottom:0}
.couvcompagnons-page .vc_row{display:block}
/* --- Menu mobile ---
La maquette montre le bouton burger mais pas le panneau déplié : il est
décrit ici. Le panneau réutilise les couleurs du header. --- */
.nav-mobile{display:none}
@media(max-width:720px){
.nav-mobile[data-ouvert="1"]{
display:block;position:absolute;left:0;right:0;top:100%;
background:#fff;border-bottom:1px solid var(--ligne);
box-shadow:0 18px 40px rgba(20,24,30,.13);padding:8px 24px 20px
}
.nav-mobile a{
display:block;padding:13px 0;text-decoration:none;
font-family:var(--display);font-weight:600;font-size:16px;
border-bottom:1px solid var(--craie-2)
}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile .btn{width:100%;justify-content:center;margin-top:14px}
.hdr{position:sticky}
.hdr .wrap{position:relative}
}
/* --- Hero sans carte d'avis ---
Tant que la note Google n'est pas vérifiée, la carte ne s'affiche pas (§2).
Le hero repasse alors sur une seule colonne, sinon 40 % de la largeur
resterait vide à droite du titre. --- */
.hero-grid--seul{grid-template-columns:1fr}
.hero-grid--seul h1{max-width:20ch}
/* --- Photo de prestation ---
La maquette montre un aplat d'ardoise avec une légende. Dès qu'une vraie
photo est choisie, elle remplit le cadre et la légende passe au-dessus. --- */
.presta-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.presta-visuel span{position:relative;z-index:1}
.presta-visuel .badge-24{position:absolute;z-index:2}
/* --- Photo de réalisation ---
Les cartes de la maquette ont un visuel en dégradé d'ardoise ; dès qu'une
image mise en avant existe, elle prend toute la place du cadre 4/3. --- */
.real-visuel{position:relative}
.real-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.real a:hover .real-info b{text-decoration:underline}
/* --- Avant / après sur la fiche chantier --- */
.avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.avant-apres figure{margin:0}
.avant-apres img{border-radius:3px;width:100%}
.avant-apres figcaption{
font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;
text-transform:uppercase;color:var(--rouge);margin-top:10px
}
@media(max-width:720px){.avant-apres{grid-template-columns:1fr}}
/* --- Pagination des archives --- */
.pagination{margin-top:50px;display:flex;justify-content:center}
.pagination .page-numbers{
font-family:var(--display);font-weight:700;padding:10px 15px;text-decoration:none;
border:1px solid var(--ligne);margin:0 4px;border-radius:2px;background:#fff
}
.pagination .page-numbers.current{background:var(--rouge);color:#fff;border-color:var(--rouge)}
/* --- Contact Form 7 ---
Le balisage du formulaire reprend déjà les classes .form-row / .champ de la
maquette (voir inc/form-devis.php) : il reste à neutraliser les conteneurs
propres à CF7 et à styler ses messages. --- */
.form .wpcf7-form-control-wrap{display:block}
.form .wpcf7-form-control:not(.btn){
width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:2px;
font-family:var(--texte);font-size:16px;background:var(--craie);color:var(--encre)
}
.form .wpcf7-form-control:not(.btn):focus{outline:3px solid rgba(222,29,37,.28);border-color:var(--rouge)}
.form textarea.wpcf7-form-control{min-height:110px;resize:vertical}
.form input[type="file"].wpcf7-form-control{padding:10px 12px;background:#fff}
.form .wpcf7-submit{width:100%;justify-content:center;margin-top:6px;cursor:pointer}
.form .wpcf7-not-valid-tip{color:var(--rouge-fonce);font-size:13.5px;margin-top:6px}
.form .wpcf7-response-output{
margin:18px 0 0;padding:14px 16px;border:2px solid var(--ligne);border-radius:2px;font-size:15px
}
.form form.sent .wpcf7-response-output{border-color:#2E7D32;background:#F1F8F2}
.form form.invalid .wpcf7-response-output,
.form form.failed .wpcf7-response-output,
.form form.spam .wpcf7-response-output{border-color:var(--rouge);background:#FDF2F2}
.form .wpcf7-spinner{margin:10px auto 0;display:block}
/* Champ-piège anti-robot : invisible à l'œil, ignoré des lecteurs d'écran. */
.couvcompagnons-pot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* --- Séparateur des liens légaux du pied de page ---
La maquette écrit « Mentions légales · Protection des données ». Le point
médian est tracé en bordure plutôt qu'en ::before : il ne doit pas devenir
cliquable ni être lu par un lecteur d'écran. --- */
.pied-bas>span:last-child a+a{
margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)
}
/* --- Accessibilité : lien d'évitement et texte réservé aux lecteurs d'écran --- */
.screen-reader-text{
position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap
}
.lien-evitement{
position:absolute;left:-9999px;z-index:999;padding:12px 20px;
background:var(--rouge);color:#fff;font-family:var(--display);font-weight:700;text-decoration:none
}
.lien-evitement:focus{left:8px;top:8px}
:focus-visible{outline:3px solid rgba(222,29,37,.55);outline-offset:2px}
/* --- Barre d'admin WordPress : décale le header collant --- */
body.admin-bar .hdr{top:32px}
@media(max-width:782px){body.admin-bar .hdr{top:46px}}
/* --- Contenu éditorial classique (pages légales, articles) --- */
.contenu{max-width:76ch}
.contenu h2{font-size:clamp(24px,3vw,32px);margin:38px 0 14px}
.contenu h3{margin:28px 0 10px}
.contenu ul,.contenu ol{margin:0 0 18px;padding-left:22px}
.contenu li{padding:3px 0}
.contenu a{color:var(--rouge-fonce);text-decoration:underline}
.contenu img{margin:22px 0;border-radius:3px}
.contenu blockquote{
margin:24px 0;padding:4px 0 4px 22px;border-left:4px solid var(--rouge);
font-size:18px;color:#4A5260
}
.alignleft{float:left;margin:6px 26px 18px 0}
.alignright{float:right;margin:6px 0 18px 26px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:14px;color:#6C7583;margin-top:8px}
/* Pages de communes : rupture de fond entre deux sections claires. */
.sec--blanc{background:#fff}
.zones-liste .zone a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.zones-liste .zone a:hover{color:var(--rouge-fonce)}
.fil{font-size:14px;color:#6C7583;margin:0 0 18px}
.fil a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ligne)}
.fil a:hover{color:var(--rouge-fonce)}
.fil [aria-current]{color:var(--encre)}
/* --- Avis Google : en-tête de carte (initiales, auteur, date, logo) --------- */
.avis-auteur{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.avis-pastille{
flex:0 0 auto;width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--rouge-fonce);color:#fff;
font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:.5px
}
.avis-identite{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.avis-identite b{font-size:15px}
.avis-date{font-size:13px;color:#6C7583}
.avis-marque{margin-left:auto;display:flex;align-items:center}
.avis-source{display:flex;align-items:center;gap:7px;font-size:14.5px;color:#5B6472}
.logo-g{display:block;flex:0 0 auto}
/* Carte d'avis du hero : logo Google et bloc auteur, compacts. */
.carte-avis .src{display:flex;align-items:center;gap:6px}
.avis-auteur--hero{margin-top:14px;gap:10px}
.avis-auteur--hero .avis-pastille{width:32px;height:32px;font-size:12.5px}
.avis-auteur--hero .avis-identite b{font-size:14px}
.avis-auteur--hero .avis-date{font-size:12.5px}
/* ==========================================================================
Contenu éditorial — habillage typographique
Les idiomes sont repris de la maquette, aucun n'est inventé :
le triangle rouge vient des listes de prestation (.presta li::before),
les numéros 01/02 de la section processus (.etape .num), le chapeau des
.lead. S'applique partout où .contenu est employé — pages de prestation,
texte local des communes, pages légales — pour que le site n'ait qu'une
seule écriture typographique.
========================================================================== */
/* Chapeau : le premier paragraphe du bloc porte l'accroche. */
.contenu > p:first-child{font-size:18.5px;line-height:1.65;color:#3C444F}
.contenu h3{
font-family:var(--display);font-weight:700;
margin:40px 0 12px;padding-top:18px;border-top:1px solid var(--craie-2)
}
.contenu h3:first-child{margin-top:0;padding-top:0;border-top:0}
/* Listes à puces : triangle rouge et filet, comme les cartes de prestation. */
.contenu ul{list-style:none;padding:0;margin:0 0 22px}
.contenu ul li{padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--craie-2)}
.contenu ul li::before{
content:"";position:absolute;left:0;top:17px;width:9px;height:9px;
background:var(--rouge);clip-path:polygon(50% 0,100% 100%,0 100%)
}
.contenu ul li > strong:first-child{font-family:var(--display);font-weight:700}
/* Listes ordonnées : numérotation 01, 02… en Archivo rouge. */
.contenu ol{list-style:none;padding:0;margin:0 0 22px;counter-reset:pas}
.contenu ol li{
counter-increment:pas;padding:9px 0 9px 42px;position:relative;
border-top:1px solid var(--craie-2)
}
.contenu ol li::before{
content:counter(pas,decimal-leading-zero);position:absolute;left:0;top:11px;
font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;
color:var(--rouge)
}
/* Les listes imbriquées reprennent la même écriture, sans le filet. */
.contenu li ul,.contenu li ol{margin:6px 0 0}
.contenu li li{border-top:0;padding-top:5px;padding-bottom:5px}
/* --------------------------------------------------------------------------
Section « Texte de page » — mise en page à deux colonnes.
Grille reprise de .pourquoi-grid : le titre tient la colonne de gauche et
le texte respire à droite, ce qui casse le mur de texte des pages longues.
-------------------------------------------------------------------------- */
.texte-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
/* 100px = header collant (logo 50 + 2×12 de marge + filet) et une respiration. */
.texte-cols .tete-sec{margin-bottom:0;position:sticky;top:100px}
.texte-cols .contenu{max-width:none}
@media(max-width:1000px){
.texte-cols{grid-template-columns:1fr;gap:32px}
.texte-cols .tete-sec{position:static}
}
@media(prefers-reduced-motion:reduce){
.texte-cols .tete-sec{position:static}
}
/* --------------------------------------------------------------------------
Grille de réalisations : cartes alignées en haut (04/08/2026).
La maquette décalait la colonne du milieu de 34 px (cartes 2 et 5) pour
rythmer une grille de six. Le décalage a d'abord été restreint aux rangées
complètes — il ne subsistait donc que là où il était « juste » : accueil,
page canton, archive. C'est précisément là qu'il se lisait comme un défaut
d'alignement, rien dans le contenu ne justifiant qu'une carte sur trois
descende. Abandonné à la demande de l'utilisateur.
Le bloc 1 du fichier reste intact : le décalage y est toujours déclaré, il
est neutralisé ici. Pour le rétablir, supprimer cette règle et faire
ressortir `real-grid--decale` de couvcompagnons_classe_grille().
-------------------------------------------------------------------------- */
.real-grid .real:nth-child(2),
.real-grid .real:nth-child(5){transform:none}
/* Deux colonnes : le chapeau accompagne le titre dans la colonne de gauche,
qui paraissait vide avec un titre seul.
⚠️ ENFERMÉ DANS UNE MEDIA QUERY, ET C'EST INDISPENSABLE (11/08/2026).
Écrite au niveau racine, cette règle arrivait APRÈS le `@media(max-width:1000px)`
qui empile `.texte-cols` en une colonne. À spécificité égale, la dernière gagne :
l'empilement était annulé à toutes les largeurs et les deux colonnes restaient
côte à côte sur téléphone, sur les trois pages de prestation.
Règle générale pour ce fichier : toute redéclaration d'une propriété déjà posée
dans une media query plus haut doit elle-même être bornée, sinon elle la casse. */
@media(min-width:1001px){
.texte-cols{grid-template-columns:.85fr 1.15fr}
}
.texte-cols .tete-sec .lead{font-size:17px;margin-top:18px;max-width:none}
/* Ligne de liens territoriaux (pied de la section zones, archive des chantiers).
Reprend le corps et la couleur des listes .zone : aucune valeur nouvelle. */
.zones-cantons{
margin-top:30px;padding-top:22px;border-top:1px solid var(--ligne);
font-size:15px;color:#5B6472;line-height:2
}
.zones-cantons a{color:var(--rouge-fonce);text-decoration:none;border-bottom:1px solid var(--ligne)}
.zones-cantons a:hover{border-bottom-color:var(--rouge)}
/* --------------------------------------------------------------------------
Processus : étapes alignées à gauche en colonne unique (04/08/2026).
Sous 1000 px la grille passe à deux colonnes et les étapes paires prennent
un retrait de 22 px — correct, elles sont alors dans la colonne de droite.
Mais à 720 px la grille repasse à UNE colonne sans que ce retrait soit
annulé : « 02 Visite et diagnostic » et « 04 » se retrouvaient décalés de
22 px par rapport à 01 et 03. Même cause pour le filet vertical, qui restait
accroché aux étapes impaires alors qu'il n'y a plus de colonne à séparer.
Le !important est nécessaire : il neutralise celui du bloc 1, resté intact.
-------------------------------------------------------------------------- */
@media(max-width:720px){
.etape:nth-child(2n){padding-left:0!important}
.etape{border-right:0}
}
/* --------------------------------------------------------------------------
Menu burger : les boutons ne sont pas des entrées de menu (04/08/2026).
`.nav-mobile a` impose padding:13px 0 et un filet bas à TOUS les liens du
panneau — donc aussi aux deux boutons. Trois conséquences visibles :
le rembourrage latéral des boutons était écrasé (texte collé au bord
gauche), et sur le bouton fantôme du téléphone le filet bas de 1 px en
craie remplaçait le bord de 2 px, donnant un contour à trois côtés.
On rétablit ici les bordures et le rembourrage propres au bouton.
-------------------------------------------------------------------------- */
@media(max-width:720px){
.nav-mobile a.btn{
padding:15px 26px;
border-width:2px;border-style:solid;border-color:transparent
}
.nav-mobile a.btn--fant{border-color:currentColor}
/* L'icône du téléphone reprend la couleur d'accent du header. */
.nav-mobile a.btn--fant svg{color:var(--rouge)}
.nav-mobile a.btn--fant:hover svg{color:inherit}
}
/* Bloc d'avis sur fond craie (04/08/2026). Les pages de commune ont vu leur
ordre de sections changer : les avis suivent désormais les chantiers, qui
sont passés en blanc. Sans ce modificateur, deux sections blanches se
toucheraient et la page perdrait son alternance. `.avis` reste blanc partout
ailleurs — accueil compris. */
.avis--craie{background:var(--craie)}
/* Signature de l'agence, à droite du pied de page (04/08/2026). Le conteneur
est déjà aligné à droite par le space-between de .pied-bas ; on ne gère ici
que la cohabitation avec le menu légal quand il existera, et le repli à la
ligne sur mobile où .pied-bas passe en colonne. */
.pied-credit{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pied-agence a{border-bottom:1px solid rgba(255,255,255,.28)}
.pied-agence a:hover{border-bottom-color:#fff}
@media(max-width:720px){
.pied-credit{justify-content:flex-start}
}
/* ------------------------------------------------------------------ *
* Page de commune — hero à deux colonnes, bandeau d'urgence, rappel
* (10/08/2026). Surcharges de fin de fichier : le bloc 1 reste intact.
* ------------------------------------------------------------------ */
/* Texte à gauche, formulaire à droite. La colonne de texte est la plus
large : c'est le contenu propre à la commune, celui qui porte la page.
Grille reprise de .devis-grid, proportions inversées. */
.ville-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.ville-hero .tete-sec{margin-bottom:28px}
.ville-hero .contenu{max-width:none}
/* La carte du formulaire vit d'ordinaire sur le fond pierre de la section
d'offre, où --fA-ombre est une ombre chaude et soutenue. Sur le fond craie
du hero elle écraserait le texte voisin : ombre reprise, et filet ajouté
pour que la carte garde ses limites sans elle. */
.ville-offre .form{
box-shadow:0 10px 34px rgba(20,24,30,.10);
border:1px solid var(--ligne);
border-top:5px solid var(--jaune);
}
.ville-offre-titre{font-size:clamp(21px,2.2vw,26px);margin:6px 0 10px}
.ville-offre-accroche{margin:0 0 22px}
/* Le formulaire suit la lecture du texte local, qui est plus long que lui. */
@media(min-width:1001px){
.ville-offre{position:sticky;top:104px}
}
@media(prefers-reduced-motion:reduce){
.ville-offre{position:static}
}
/* Sous 1000 px, une seule colonne : le texte d'abord, le formulaire ensuite.
L'inverse enterrerait 240 mots de contenu unique sous sept champs, et la
page donnerait l'impression de n'avoir rien à dire. L'appel immédiat est
déjà couvert par la barre d'action fixe. */
@media(max-width:1000px){
.ville-hero{grid-template-columns:1fr;gap:40px}
.ville-offre{position:static}
}
/* Bande de rappel de fin de page.
Trame diagonale et surtitre repris à l'identique de la section d'offre
(.devis) : c'est le même fond pierre, il doit se lire comme la même famille
de bloc. Aucun motif ni couleur nouvelle. */
.rappel{background:var(--fA);color:var(--fA-txt);position:relative;overflow:hidden}
.rappel::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(115deg,var(--fA-trame) 0 1px,transparent 1px 13px)}
.rappel .wrap{position:relative;z-index:2}
.rappel .eyebrow--clair{color:var(--fA-accent)}
.rappel .eyebrow--clair::before{background:var(--fA-accent)}
.rappel h2{margin:0;font-size:clamp(23px,2.6vw,32px)}
.rappel p{margin:0;color:var(--fA-txt2);max-width:46ch}
/* Filet court sous le titre — même idiome que les H3 de .contenu. */
.rappel-filet{display:block;width:56px;height:3px;background:var(--rouge);margin:16px 0 14px}
.rappel-grid{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:space-between}
.rappel-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.rappel-coord{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.rappel .tel-gros{display:inline-flex;align-items:center;gap:11px;line-height:1.1}
.rappel .tel-gros svg,.rappel-mail svg{flex:0 0 auto}
.rappel-mail{display:inline-flex;align-items:center;gap:9px;font-weight:500;
color:var(--fA-txt);text-decoration:none;border-bottom:1px solid var(--fA-accent)}
.rappel-mail:hover{color:var(--fA-accent)}
@media(max-width:720px){
.rappel-grid{flex-direction:column;align-items:flex-start;gap:26px}
.rappel-actions{width:100%}
.rappel-actions .btn{width:100%;justify-content:center}
/* L'adresse e-mail complète déborde d'un écran étroit. */
.rappel-mail{font-size:14px;word-break:break-all}
}
/* ------------------------------------------------------------------ *
* Formulaire — espace sous les libellés (10/08/2026)
*
* Contact Form 7 « autop » le formulaire au rendu : il enveloppe chaque
* ligne dans un et insère un
entre le libellé et le champ. Sous
* chaque libellé s'ajoutaient donc une marge de 6 px ET une hauteur de
* ligne entière — près de 30 px de vide. Le balisage .champ du thème
* porte déjà la structure, ces deux ajouts ne servent à rien.
*
* Traité en CSS et non par le filtre wpcf7_autop_or_not : celui-ci vaut
* pour TOUS les formulaires du site, y compris ceux que le client
* ajouterait plus tard sans ce balisage — ils s'effondreraient.
* ------------------------------------------------------------------ */
.form .champ p{margin:0}
.form .champ br{display:none}
/* Dernière ligne du formulaire : bouton d'envoi + mention.
Ce
-là n'est pas dans un .champ, il gardait donc ses marges par défaut ;
s'y ajoutaient un
entre le bouton et la mention, et le cadre de réponse
de CF7 — vide et invisible, mais pas sans marges. */
.form form > p{margin:0}
/* ⚠️ Cibler le
par le parent, PAS par la fratrie du bouton.
Contact Form 7 insère en JavaScript un juste
après le bouton : le sélecteur « .wpcf7-submit + br » cesse alors de
correspondre une fois la page vivante, et la ligne de vide réapparaît —
invisible dans le HTML servi, visible à l écran. */
.form form > p br{display:none}
/* ⚠️ Masquer le cadre de réponse UNIQUEMENT quand il est vide.
Ne PAS cibler [aria-hidden="true"] : Contact Form 7 ne modifie cet attribut
que sur les bulles de validation des champs (.wpcf7-not-valid-tip), jamais sur
ce cadre — qui garde donc aria-hidden="true" même lorsqu il affiche le message
de confirmation. La règle précédente rendait ce message invisible en permanence,
alors que le mail partait : le visiteur croyait son envoi perdu. Constaté le
11/08/2026, introduit la veille en resserrant le formulaire. */
.form .wpcf7-response-output:empty{display:none}
/* Cartes d'avis sur fond craie (pages de commune).
La maquette pose des cartes craie sur une section blanche : le contraste
s'inverse dès que la section elle-même est en craie, et les cartes se
fondaient dans le fond. L'accueil, lui, garde le traitement d'origine. */
.avis--craie .avis-carte{background:#fff}
/* Fil d'Ariane des pages de commune, au-dessus de la bannière (10/08/2026).
Bandeau mince : il reste le premier élément après le header, sans peser. */
.fil-bande{background:var(--craie);border-bottom:1px solid var(--ligne)}
.fil-bande .wrap{padding-top:11px;padding-bottom:11px}
.fil-bande .fil{margin:0}
/* Formulaire de la page de commune — hauteur resserrée (10/08/2026).
C'est le formulaire, et non le texte, qui commandait la hauteur de la
section : environ 840 px contre 700 px. Ces quatre réglages en retirent
une petite deux cents, sans toucher au NOMBRE de champs — la photo du
toit reste, c'est elle qui permet de chiffrer sans se déplacer. */
.ville-offre .form{padding:28px}
.ville-offre .champ{margin-bottom:12px}
.ville-offre .form-row{gap:12px}
.ville-offre .champ textarea{min-height:84px}
.ville-offre .ville-offre-accroche{margin:0 0 18px;font-size:14.5px}
/* Pied de page — colonne « Zones » en deux sous-colonnes (10/08/2026).
Les cantons à gauche, les villes à droite : deux niveaux territoriaux
différents, qui en liste unique se lisaient comme une seule énumération
de neuf entrées sans hiérarchie apparente. */
.pied-zones{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pied-zones h5{
color:#8C97A6;font-family:var(--display);font-size:11.5px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px
}
/* ------------------------------------------------------------------ *
* Bannière — les deux boutons tiennent sur une ligne (11/08/2026)
*
* Le numéro de téléphone passait sous « Demandez une offre » sur écran
* étroit : côte à côte, les deux boutons demandent plus large qu'un
* téléphone, et le `flex-wrap:wrap` de .hero-actions renvoyait le second
* à la ligne. Le numéro se retrouvait repoussé alors que c'est le geste
* le plus direct de la page.
*
* Le balisage est le même sur l'accueil et sur les pages de commune —
* vérifié au caractère près — donc la correction vaut pour les deux.
*
* On passe en `nowrap` et on laisse les deux boutons se partager la
* largeur : ils s'alignent alors comme une paire, ce qui se lit comme un
* choix et non comme un débordement. Le rembourrage et le corps sont
* réduits d'un cran pour que le texte tienne sans se casser.
* ------------------------------------------------------------------ */
@media(max-width:720px){
.hero-actions{flex-wrap:nowrap;gap:10px}
.hero-actions .btn{
flex:1 1 auto;min-width:0;justify-content:center;
white-space:nowrap;font-size:14px;padding:14px 12px
}
}
/* Sous 360 px (iPhone SE et assimilés), le texte des deux boutons ne tient
plus au corps précédent : on retire l'interlettrage et on resserre encore
le rembourrage plutôt que de laisser un bouton déborder de l'écran. */
@media(max-width:360px){
.hero-actions{gap:8px}
.hero-actions .btn{font-size:13px;padding:13px 8px;letter-spacing:0}
}