/* ================================================================
   BL/V33 — BRANCHE PARTICULIERS
   Cartes tarifaires, galerie, et la matière argentique — grain,
   perforations de pellicule, fond sombre — portée par la typographie
   de la maison (Newsreader + IBM Plex). Aucune police supplémentaire :
   sous une même enseigne, deux jeux de caractères font deux marques.
   Cette feuille ne redéfinit aucune variable de :root — elle s'appuie
   entièrement sur celles de site.css.
   ================================================================ */

/* ---- cartes d'offre, prix visible (accueil) -------------------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,26px)}
.offer-card{border:1px solid var(--line);display:flex;flex-direction:column;background:var(--paper-2)}
/* Correctif d'alignement : une regle globale (site.css) met picture a
   height:100%. Les cartes d'une rangee etant etirees a la meme hauteur par
   la grille, l'image absorbait l'ecart de hauteur des textes (296, 306 puis
   329 px) et les libelles ne demarraient plus au meme niveau. On fige donc
   l'image sur son ratio et on laisse le texte occuper le reste. */
.offer-card picture{display:block;position:relative;width:100%;height:auto;flex:0 0 auto;padding-top:75%;overflow:hidden;background:var(--paper-2)}
.offer-card picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.offer-card:hover img{transform:scale(1.035)}
.offer-body{padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.offer-body .eyebrow{color:var(--muted)}
.offer-from{font-family:var(--serif);font-size:1.5rem;margin:2px 0 0}
.offer-from strong{font-weight:400}
.offer-body p:not(.offer-from){margin:2px 0 0;color:var(--soft);font-size:.88rem;max-width:32ch}
.offer-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;
  font:400 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;width:fit-content;transition:opacity .3s var(--ease)}
.offer-cta:hover{opacity:.7}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr}}

/* ---- cartes tarifaires --------------------------------------- */
.price-grid{display:grid;gap:clamp(14px,2.2vw,22px)}
.price-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.price-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.price-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.price-grid.cols-4,.price-grid.cols-2{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line);padding:clamp(20px,3vw,30px);display:grid;
  gap:14px;align-content:start;background:var(--paper-2);transition:border-color .3s var(--ease)}
.price-card:hover{border-color:var(--ink)}
.price-card .eyebrow{color:var(--muted)}
.price-card h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:2px 0 0;letter-spacing:-.01em}
.price-card .amount{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);margin-top:6px}
.price-card .amount small{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-style:normal;margin-left:6px}
.price-card ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.price-card li{font-size:.95rem;color:var(--soft);padding-left:14px;position:relative}
.price-card li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.price-card.is-devis{border-style:dashed}
.price-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font:400 .62rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;width:fit-content;transition:opacity .3s var(--ease)}
.price-card-cta:hover{opacity:.7}
body[data-branch="prive"] .roll .price-card-cta{color:var(--white);border-color:var(--white)}

/* ---- CTA de réservation ferme, dans la section contact --------- */
.book-cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  background:var(--ink);color:var(--white);border:0;padding:16px 26px;
  font:400 .68rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  transition:opacity .3s var(--ease);width:fit-content}
.book-cta:hover{opacity:.85}

/* ---- pont vers le pro, dans le flux (pas en pied de page) ------- */
.pro-bridge{border:1px solid var(--line);padding:clamp(22px,3.4vw,32px);
  display:grid;gap:12px;margin-top:clamp(28px,4vw,44px)}
.pro-bridge .eyebrow{color:var(--blue)}
.pro-bridge p{margin:0;color:var(--soft);max-width:56ch}
.pro-bridge a{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font:400 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;width:fit-content;transition:opacity .3s var(--ease)}
.pro-bridge a:hover{opacity:.7}
.price-note{margin-top:6px;font:400 .6rem/1.7 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);max-width:60ch}

/* ---- table à deux publics (particuliers / entreprises) -------- */
.audience-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,44px);
  margin-top:clamp(20px,3vw,32px)}
.audience-split>div{border-top:1px solid var(--line);padding-top:16px}
.audience-split .eyebrow{color:var(--blue)}
@media(max-width:860px){.audience-split{grid-template-columns:1fr}}

/* ---- galerie --------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,16px)}
.gallery figure{margin:0;position:relative;padding-top:125%;overflow:hidden;background:var(--paper-2)}
.gallery figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- déroulé de prestation -------------------------------------- */
.process{border-top:1px solid var(--line);max-width:60ch}
.process>div{display:grid;grid-template-columns:2.4rem 1fr;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.process span{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.process b{display:block;font-weight:500}
.process p{margin:4px 0 0;color:var(--soft);font-size:.92rem}

/* ---- prise de contact (formule fixe, pas de diagnostic) --------- */
.book{border:1px solid var(--line);padding:clamp(24px,4vw,40px);display:grid;gap:16px}
.book .eyebrow{color:var(--muted)}
.book p{margin:0;color:var(--soft);max-width:56ch}
.book .privacy-note{font:400 .58rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}

/* ================================================================
   MATIÈRE ARGENTIQUE — appliquée uniquement sous body[data-branch="prive"],
   uniquement en fond des sections .roll : grain de pellicule et
   perforations. Aucune police ajoutée : Newsreader + IBM Plex partout.
   ================================================================ */
body[data-branch="prive"] .roll{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
body[data-branch="prive"] .roll .eyebrow{color:rgba(248,249,246,.6)}
body[data-branch="prive"] .roll .lead.muted{color:rgba(248,249,246,.78)}
body[data-branch="prive"] .roll::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
body[data-branch="prive"] .roll::after{
  content:"";position:absolute;left:0;right:0;top:0;height:22px;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(248,249,246,.5) 2.5px,transparent 2.6px);
  background-size:26px 22px;background-position:10px 8px}
body[data-branch="prive"] .roll .shell{position:relative;z-index:1}
body[data-branch="prive"] .roll .price-card{background:rgba(248,249,246,.04);border-color:rgba(248,249,246,.2)}
body[data-branch="prive"] .roll .price-card:hover{border-color:rgba(248,249,246,.5)}
body[data-branch="prive"] .roll .price-card li{color:rgba(248,249,246,.75)}
body[data-branch="prive"] .roll .price-card .amount small{color:rgba(248,249,246,.5)}

/* Lien de bifurcation dans le hero de l'accueil (hors branche particuliers,
   donc placé ici plutôt que caché derrière un data-branch). */
.hero-reassurance a{color:inherit;border-bottom:1px solid rgba(248,249,246,.4);
  padding-bottom:1px;transition:border-color .3s var(--ease)}
.hero-reassurance a:hover{border-color:rgba(248,249,246,.85)}

@media(prefers-reduced-motion:reduce){
  .gallery img{transition:none}
}