/* ══ Pages locales (service, ville, ville × service) — habillage commun « vs2 »
   Refonte validée 2026-08 : hero photo sous voile anthracite + bandeau de faits,
   corps deux colonnes avec UNE carte devis, sections pleine largeur (maillage,
   FAQ). Scopé aux classes vs2-* : les autres pages ne bougent pas. ══ */
/* ── Hero des pages internes — fond clair, bandeau couché (2026-09) ──────────
   L'accueil est passé sur fond clair, la photo n'y occupe plus toute la
   largeur. Les pages internes, elles, gardaient un voile anthracite sur photo
   pleine largeur, ce qui produisait deux défauts :

     1. le header, réglé en texte foncé pour le nouvel accueil, devenait
        ILLISIBLE ici — logo et menu quasi noirs sur un dégradé sombre ;
     2. les deux moitiés du site ne se ressemblaient plus.

   On reprend donc la matière de l'accueil — même fond, même halo d'accent,
   mêmes coins à 18 px, même ombre décalée en accent — mais avec une autre
   silhouette : là où l'accueil dresse sa carte photo à côté du texte, la page
   interne la COUCHE en bandeau sous le texte, et la carte de faits chevauche
   son bas. Famille commune, geste différent. */
.vs2-hero{position:relative;overflow:hidden;padding:132px 0 0;background:var(--fond-clair)}
/* Plus lumineux en haut, là où le header est posé : c'est ce qui garantit le
   contraste du menu quelle que soit la photo. */
.vs2-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,var(--fond-clair) 46%,var(--fond-clair) 100%)}
.vs2-hero-halo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 300px at 50% 116%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 65%)}
/* Contenu centré. L'accueil, lui, aligne son texte à gauche contre sa carte
   photo : centrer ici éloigne franchement les deux compositions tout en
   gardant la même matière. Et sur une page interne le texte est court — fil
   d'Ariane, titre, deux lignes, deux boutons — donc le centrage ne gêne pas
   la lecture, ce qui ne serait pas vrai d'un paragraphe long. */
.vs2-hero .container{position:relative;z-index:3;text-align:center}
.vs2-bc{font-size:12px;color:var(--t2);margin-bottom:16px;font-weight:600}
.vs2-bc a{color:var(--t2);text-decoration:none}
.vs2-bc a:hover{color:var(--acc)}
.vs2-bc strong{color:var(--t1);font-weight:600}
.vs2-bc .bc-sep{margin:0 7px;color:var(--bd2)}
/* Pas de largeur maximale : le titre prend toute la place disponible et
   tient donc sur une ligne dans la quasi-totalite des cas. Mesure sur les
   1 074 titres internes de ps-couverture.fr : mediane 36 caracteres, 90e
   centile 46, le plus long 55 — « Recherche de fuite de toiture a
   Saint-Andre-de-la-Roche », qui demande 1 121 px de texte a 46 px et passe
   sur une ligne des 1 200 px de large. En dessous il repasse a deux lignes,
   EQUILIBREES grace a text-wrap:balance — jamais une ligne pleine suivie
   d'un mot seul. La police ne retrecit pas et rien ne deborde.
   Les titres courts ne s'etalent pas pour autant : ils sont centres. */
.vs2-h1{font-family:var(--f-title);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.08;color:var(--t1);letter-spacing:-.02em;margin-inline:auto;text-wrap:balance}
.vs2-h1 em{font-family:var(--f-display);font-style:italic;color:var(--acc);font-weight:600}
.vs2-sub{color:var(--t2);font-size:15.5px;line-height:1.65;max-width:600px;margin:16px auto 24px;font-weight:500}
.vs2-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.vs2-ic{width:1em;height:1em;flex:none;vertical-align:-2px}
/* Le bandeau : la carte de l'accueil, couchée. Sans photo il ne sort pas du
   tout, et la carte de faits remonte d'elle-même — beaucoup de clients n'ont
   aucune photo, ce cas ne doit pas laisser un trou. */
.vs2-hero-bandeau{position:relative;z-index:2;margin-top:34px;border-radius:18px;overflow:hidden;aspect-ratio:21/6;background:var(--bd);
  box-shadow:16px 16px 0 -1px color-mix(in srgb,var(--acc) 18%,#fff),0 24px 60px rgba(20,18,15,.14),0 0 0 1px var(--bd)}
.vs2-hero-bandeau img{width:100%;height:100%;object-fit:cover;display:block}
/* Fin du hero : sans elle, la carte de faits touche la section suivante. */
.vs2-hero-fin{height:56px}
/* Pages légales : ni photo, ni faits — un hero court suffit. */
.vs2-hero-court{padding-bottom:44px}
.vs2-facts{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border-radius:12px;overflow:hidden;margin:36px auto 0;max-width:920px;text-align:left;box-shadow:0 16px 38px rgba(20,18,15,.12),0 0 0 1px var(--bd)}
/* Avec bandeau, la carte le chevauche : c'est ce chevauchement qui donne au
   hero interne sa silhouette propre. */
.vs2-hero-bandeau + .vs2-facts{margin-top:-38px}
.vs2-fact{background:#fff;padding:15px 18px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.vs2-fact b{display:flex;align-items:flex-start;gap:7px;color:var(--t1);font-size:14.5px;font-weight:700;letter-spacing:-.01em;font-family:var(--f-title)}
/* flex-start + decalage : sur mobile, un nom de commune qui passe a la ligne
   centrait la pastille au milieu des trois lignes. */
.vs2-fact b::before{content:'';width:6px;height:6px;border-radius:99px;background:var(--acc);flex:none;margin-top:.42em}
.vs2-fact span{display:block;font-size:11px;color:var(--t3);font-weight:600;margin-top:2px;padding-left:13px}
/* Corps */
.vs2-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;padding:44px 0 8px;align-items:start}
/* La carte devis suit le défilement (même comportement que le formulaire de
   l'accueil) : elle reste sous les yeux pendant la lecture du contenu.
   align-self:start est requis, sinon la grille étire l'aside et le sticky
   n'a plus de course. */
.vs2-grid > aside{position:sticky;top:96px;align-self:start}
.vs2-copy{font-size:14.5px;color:var(--t2);line-height:1.75;margin-bottom:16px;font-weight:400;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.vs2-copy b{color:var(--t1)}
.vs2-h3{font-family:var(--f-title);font-weight:600;font-size:22px;color:var(--t1);letter-spacing:-.01em;margin:28px 0 14px}
.vs2-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.vs2-ck{display:flex;gap:9px;font-size:13.5px;color:var(--t1);font-weight:500;line-height:1.45}
.vs2-ck i{font-style:normal;color:var(--acc);font-weight:800;flex:none}
/* Cartes de contenu (signaux, engagements, atouts) */
.vs2-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
/* Quatre cartes donnaient trois sur une rangee et une orpheline en dessous :
   auto-fit ne tient que trois colonnes de 220 px dans la largeur du corps.
   Une carte seule sous une rangee pleine fait inacheve. A quatre, on passe
   donc en deux colonnes : 2 x 2, equilibre. Un navigateur qui ignore :has()
   garde simplement le comportement precedent. */
.vs2-cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.vs2-c{border:1px solid var(--bd);border-radius:12px;padding:16px 18px;background:#fff}
.vs2-c b{display:block;font-family:var(--f-title);font-size:14.5px;font-weight:700;color:var(--t1);margin-bottom:5px;letter-spacing:-.01em}
.vs2-c p{margin:0;font-size:13px;color:var(--t2);line-height:1.6;font-weight:400}
/* Encart d'attention (urgence / prévention) */
.vs2-note-block{margin-top:22px;border:1px solid var(--bd);border-left:3px solid var(--acc);border-radius:12px;padding:18px 20px;background:var(--off)}
.vs2-note-block b{display:block;font-family:var(--f-title);font-size:15px;color:var(--t1);margin-bottom:6px}
.vs2-note-block p{margin:0;font-size:13.5px;color:var(--t2);line-height:1.65}
/* Liens services (page ville) */
.vs2-srv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs2-srv a{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--bd);border-radius:10px;padding:13px 15px;background:#fff;text-decoration:none;transition:border-color .15s,transform .15s}
.vs2-srv a:hover{border-color:var(--acc);transform:translateY(-1px)}
.vs2-srv .n{font-size:13.5px;font-weight:700;color:var(--t1)}
.vs2-srv .d{display:block;font-size:12px;color:var(--t3);font-weight:500;margin-top:2px;line-height:1.4}
.vs2-srv .ar{color:var(--acc);font-weight:800;flex:none}
/* Avis */
.vs2-avis{margin-top:32px;border:1px solid var(--bd);border-left:3px solid var(--acc);border-radius:12px;padding:20px 22px;background:var(--off)}
.vs2-avis p{font-size:14.5px;color:var(--t1);line-height:1.65;font-style:italic;margin:0 0 12px}
.vs2-avis .vs2-who{display:flex;align-items:center;gap:10px;font-size:12.5px}
.vs2-avis .vs2-av{width:32px;height:32px;border-radius:99px;background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc);display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.vs2-avis .vs2-stars{color:#F5A623;letter-spacing:1px}
.vs2-avis .vs2-loc{color:var(--t3);font-weight:600}
/* Sidebar : une seule carte */
.vs2-card{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.vs2-chead{padding:20px 22px 16px;border-bottom:1px solid var(--bd)}
.vs2-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.vs2-ctitle{font-family:var(--f-title);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.3;color:var(--t1)}
.vs2-tel{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.01em;text-decoration:none}
.vs2-tel i{font-style:normal;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);display:grid;place-items:center;font-size:13px;flex:none}
.vs2-tel small{display:block;font-size:11px;color:var(--t3);font-weight:600}
.vs2-note{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:9px 12px;background:color-mix(in srgb,var(--acc) 9%,#fff);border-radius:9px;font-size:12px;font-weight:700;color:var(--t2)}
.vs2-note .vs2-stars{color:#F5A623;letter-spacing:1px;font-size:13px}
.vs2-note b{color:var(--t1)}
.vs2-cform{padding:18px 22px 20px}
.vs2-cfoot{border-top:1px solid var(--bd);padding:14px 22px 16px;background:var(--off)}
.vs2-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);font-weight:600;padding:3px 0}
.vs2-line i{font-style:normal;width:5px;height:5px;border-radius:99px;background:var(--acc);flex:none}
.vs2-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd);font-size:11.5px;color:var(--t3);font-weight:600}
/* Pleine largeur : maillage + FAQ */
.vs2-below{padding-bottom:10px}
.vs2-mesh2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.vs2-mesh{border:1px solid var(--bd);border-radius:12px;padding:18px 20px;background:#fff;min-width:0}
.vs2-mt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t1);margin-bottom:11px;display:flex;align-items:center;gap:8px;font-family:var(--f-title)}
.vs2-mt::before{content:'';width:3px;height:12px;border-radius:3px;background:var(--acc)}
.vs2-mesh a{font-size:12.5px;color:var(--t2);font-weight:500;text-decoration:none;line-height:2}
.vs2-mesh a:hover{color:var(--acc);text-decoration:underline}
.vs2-item{white-space:nowrap;display:inline-block}
.vs2-mesh .vs2-sep{color:var(--bd);margin-left:7px}
.vs2-mesh details{margin-top:8px}
.vs2-mesh summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--acc)}
.vs2-mesh summary::-webkit-details-marker{display:none}
.vs2-mesh summary::after{content:' ↓';font-size:11px}
.vs2-mesh details[open] summary::after{content:' ↑'}
.vs2-mesh details>div{margin-top:8px}
.vs2-faq{margin-top:36px}
/* La grille de .faq-row summary (dans _head_styles) réserve une première
   colonne de 52 px au numéro « 01 », que seul l'accueil affiche. Ici il n'y a
   que deux éléments : la question tombait donc dans la colonne du numéro et se
   retrouvait à 52 px de large — un mot par ligne, sur toutes les pages ville,
   service et ville×service du parc. Deux colonnes, et la réponse se recale
   sous sa question au lieu d'être décalée de 66 px pour rien. */
.vs2-faq .faq-row summary{grid-template-columns:1fr 36px}
.vs2-faq .faq-row .faq-a{padding-left:0}
@media(max-width:900px){
  .vs2-grid{grid-template-columns:1fr;gap:30px}
  .vs2-grid > aside{position:static}
  .vs2-facts{grid-template-columns:1fr 1fr}
  .vs2-checks{grid-template-columns:1fr}
  .vs2-srv{grid-template-columns:1fr}
  .vs2-mesh2{grid-template-columns:1fr}
  .vs2-hero{padding-top:120px}
  /* 21/6 sur un téléphone ne montre plus rien : on redresse le bandeau et on
     retire le chevauchement, qui écraserait la première ligne de faits. */
  .vs2-hero-bandeau{aspect-ratio:16/9;margin-top:26px;
    box-shadow:10px 10px 0 -1px color-mix(in srgb,var(--acc) 18%,#fff),0 18px 40px rgba(20,18,15,.12),0 0 0 1px var(--bd)}
  .vs2-hero-bandeau + .vs2-facts{margin-top:24px}
  .vs2-hero-fin{height:36px}
  /* Deux boutons de largeurs différentes alignés à gauche : c'est ce qui
     faisait bancal. Empilés et pleine largeur, ils deviennent symétriques et
     la colonne de texte se lit d'un bloc. « Demander un devis → » ne tient
     pas sur une demi-largeur à 375 px, les mettre côte à côte les couperait. */
  .vs2-ctas{flex-direction:column;align-items:stretch;gap:9px}
  .vs2-ctas > *{width:100%;justify-content:center;text-align:center}
}