/* ============================================================
   TEMPLATE-2 (plumbing) — feuille SOURCE. dist/ est une sortie.
   Grammaire : le GALET (aire pleine largeur au rayon enorme, fond
   en degrade RADIAL), la PILULE DE VERRE de navigation, l ELLIPSE
   posee derriere chaque signe, la paire de vues qui se CHEVAUCHENT,
   le FLANC pale a GAUCHE des pages internes, le pied BLANC a
   grille de vignettes. Aucune bordure nulle part : le contour est
   un anneau interieur d un pixel.
   Huit jetons, pas un hex en dur.
   ============================================================ */

:root {
  --marge: 120px;
  --cadre: 1200px;
  --galet-r: clamp(40px, 11vw, 170px);
  --carte-r: 20px;
  --boite-r: 15px;
  --pilule: 999px;
  --gout: 24px;
  --anneau: 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent) inset;
  --anneau-clair: 0 0 0 1px color-mix(in srgb, var(--fond) 22%, transparent) inset;
  --serre: -0.04em;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

.pb-cadre {
  width: min(100% - 40px, var(--cadre));
  margin-inline: auto;
  min-width: 0;
}

.pb-aire { padding-block: clamp(56px, 8vw, 104px); }
.pb-aire--mince { padding-block: clamp(32px, 4vw, 56px); }
.pb-aire--etroite .pb-cadre { width: min(100% - 40px, 820px); }

/* ---------- trait 1 : le GALET ------------------------------- */
/* Le rayon depasse volontairement la demi-hauteur : le navigateur
   le ramene a la moitie de la plus petite dimension et la bande
   devient un galet pose sur le blanc de la page. */
.pb-galet {
  position: relative;
  margin-inline: auto;
  width: min(100% - 24px, 1416px);
  border-radius: var(--galet-r);
  /* couleur ET degrade separes : un degrade seul via le raccourci
     `background` remet background-color a transparent, invisible a
     la sonde d occupation (estAplat ne lit que backgroundColor). Le
     rendu est identique, seule la sonde y voit desormais un aplat. */
  background-color: var(--marque);
  background-image: radial-gradient(50% 50% at 50% 50%,
    var(--marque) 0%,
    color-mix(in srgb, var(--marque) 78%, var(--texte)) 100%);
  color: var(--sur-marque);
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px);
}
.pb-galet::before {
  content: "";
  position: absolute;
  inset: auto -10% -55% auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: var(--pilule);
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--fond) 16%, transparent) 0%, transparent 100%);
  pointer-events: none;
}
.pb-galet--bas { padding-block: clamp(40px, 5vw, 64px); }
.pb-galet .pb-sur { color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }
.pb-galet .pb-amorce, .pb-galet .pb-p { color: color-mix(in srgb, var(--sur-marque) 86%, transparent); }

/* ---------- titres et pieces ------------------------------- */
.pb-tt {
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: var(--serre);
  line-height: 1.14;
  font-size: clamp(30px, 3.6vw, 54px);
}
.pb-tt--h1 { font-size: clamp(34px, 5.2vw, 75px); }
.pb-tt--bloc { font-size: clamp(26px, 2.8vw, 40px); }
.pb-tt__ac {
  position: relative;
  font-style: normal;
  white-space: nowrap;
}
.pb-tt__ac::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.14em;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  z-index: -1;
}
.pb-sur {
  margin: 0 0 10px;
  font-size: 14.4px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pb-amorce { margin: 0 0 20px; max-width: 60ch; color: var(--texte-doux); }
.pb-amorce--contre { color: color-mix(in srgb, var(--sur-marque) 86%, transparent); }
.pb-p { margin: 0 0 14px; color: var(--texte-doux); }
.pb-p--large { font-size: 17.6px; }
.pb-mention { margin: 16px 0 0; font-size: 14.4px; color: var(--texte-doux); }
.pb-mention--contre { color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }
.pb-chapeau { margin-bottom: clamp(28px, 3vw, 44px); }
.pb-chapeau--centre { text-align: center; margin-inline: auto; max-width: 760px; }

.pb-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--pilule);
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
}
.pb-bt--nu {
  background: transparent;
  color: var(--texte);
  box-shadow: var(--anneau);
}
.pb-galet .pb-bt--or { background: var(--fond); color: var(--texte); }
.pb-galet .pb-bt--nu { color: var(--sur-marque); box-shadow: var(--anneau-clair); }
.pb-appels { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.pb-appels--centre { justify-content: center; }
.pb-appels--fin { justify-content: flex-end; margin: 0; }
.pb-appels--hero { margin-block: 28px; }

/* ---------- trait 6 : l ellipse jaune sous chaque signe ------ */
.pb-signe {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  margin-bottom: 16px;
}
.pb-signe__oeuf {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.pb-signe__l {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.pb-galet .pb-signe__oeuf { background: color-mix(in srgb, var(--fond) 22%, transparent); }

/* ---------- vues -------------------------------------------- */
.pb-vue, .pb-vue--hero, .pb-sect__vue, .pb-zone__vue, .pb-mail__vue,
.pb-post__vue, .pb-real__vue, .pb-mat__vue, .pb-prod__vue, .pb-volet__vue {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--carte-r);
  background: var(--fond-2);
  aspect-ratio: 4 / 3;
  min-width: 0;
}
.pb-vue__i { width: 100%; height: 100%; object-fit: cover; }
.pb-vue--vide { display: grid; place-items: center; }
.pb-vue--vide::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: var(--boite-r);
  background: color-mix(in srgb, var(--texte) 5%, transparent);
}
.pb-vue__ini {
  position: relative;
  font-size: 26px;
  font-weight: 600;
  color: color-mix(in srgb, var(--texte) 45%, transparent);
}

/* ---------- header : la PILULE DE VERRE ---------------------- */
.pb-tete { position: relative; z-index: 40; padding-block: 22px; }
.pb-tete__cadre {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.pb-marque {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: var(--serre);
  flex: 0 0 auto;
}
.pb-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.pb-nav__ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 10px;
  list-style: none;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--texte) 5%, transparent);
  box-shadow: var(--anneau);
}
.pb-nav__li { position: relative; }
.pb-nav__a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--pilule);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.pb-nav__li--volet:hover > .pb-nav__a,
.pb-nav__li--volet:focus-within > .pb-nav__a { background: var(--fond); }
.pb-bas {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M1.6 4 6 8.4 10.4 4 9.3 2.9 6 6.2 2.7 2.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M1.6 4 6 8.4 10.4 4 9.3 2.9 6 6.2 2.7 2.9z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform .18s ease;
}
.pb-nav__li--volet:hover .pb-bas { transform: rotate(180deg); }
.pb-tete__droite { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pb-tel {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--boite-r);
  box-shadow: var(--anneau);
  font-size: 15px;
  font-weight: 500;
}
.pb-tel__signe {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 2 6 5 4.6 6.5a9 9 0 0 0 4.9 4.9L11 10l3 2-1.6 2.3a2 2 0 0 1-2 .7A13 13 0 0 1 1 5.6a2 2 0 0 1 .7-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 2 6 5 4.6 6.5a9 9 0 0 0 4.9 4.9L11 10l3 2-1.6 2.3a2 2 0 0 1-2 .7A13 13 0 0 1 1 5.6a2 2 0 0 1 .7-2z'/%3E%3C/svg%3E");
  mask-size: contain; mask-repeat: no-repeat;
}
.pb-tel__sur { display: none; }
.pb-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--texte) 6%, transparent);
  cursor: pointer;
}
.pb-burger__t, .pb-burger__t::before, .pb-burger__t::after {
  display: block;
  width: 18px; height: 2px;
  border-radius: var(--pilule);
  background: var(--texte);
}
.pb-burger__t { position: relative; }
.pb-burger__t::before { content: ""; position: absolute; top: -6px; left: 0; }
.pb-burger__t::after { content: ""; position: absolute; top: 6px; left: 0; }

/* ---------- le volet ---------------------------------------- */
.pb-volet {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  /* Le pont : c est le RETRAIT qui rattrape la distance au lien,
     jamais une marge — sinon la souris traverse un trou. */
  padding-top: 14px;
  width: max-content;
  max-width: min(96vw, 880px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease;
}
.pb-nav__li--volet:hover > .pb-volet,
.pb-nav__li--volet:focus-within > .pb-volet,
.pb-nav__li--volet[data-ouvert] > .pb-volet {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pb-volet__dedans {
  display: flex;
  gap: 28px;
  min-width: 380px;
  padding: 24px;
  border-radius: var(--carte-r);
  background: var(--fond);
  box-shadow: var(--anneau), 0 24px 48px color-mix(in srgb, var(--texte) 14%, transparent);
}
.pb-volet__cols { display: flex; flex-wrap: wrap; gap: 24px; flex: 1 1 320px; min-width: 0; }
.pb-volet__col { flex: 1 1 160px; min-width: 0; }
.pb-volet__ct {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pb-volet__ul { margin: 0; padding: 0; list-style: none; }
.pb-volet__a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
}
.pb-volet__a:hover { background: var(--fond-2); }
.pb-volet__vitrine {
  flex: 0 0 258px;
  max-width: 258px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--boite-r);
  background: var(--fond-2);
}
.pb-volet__vue { aspect-ratio: 16 / 11; border-radius: 11px; }
.pb-volet__mot { display: block; padding-top: 12px; }
.pb-volet__sur {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pb-volet__t { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }
.pb-volet__x { display: block; margin-top: 6px; font-size: 14.4px; color: var(--texte-doux); }
.pb-volet__lien {
  display: inline-block;
  margin-top: 10px;
  font-size: 14.4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- hero -------------------------------------------- */
.pb-hero { margin-top: 0; }
/* le galet de la home porte la scene depuis y=0 ; la tete (transparente,
   z-index:40) flotte dessus. Le tirage est porte par main > .pb-hero:first-child
   uniquement pour ne pas fuiter sur les heros internes (breadcrumb devant). */
main > .pb-hero:first-child { margin-top: -100px; }
/* .pb-hero__cadre est promu en contexte d empilement (position:relative +
   z-index positif) pour porter le mot ET la vue de vitrine AU-DESSUS du
   fond plein-cadre (voir plus bas) : un z-index negatif sur le fond, teste
   d abord, echoue au sondage — elementsFromPoint le classe alors APRES le
   documentElement/body dans la pile remontee par le classifieur, qui
   s arrete des qu il croise l un des deux (racine = fin de sonde). Un
   z-index negatif reste donc invisible au juge F1/R5 meme rendu et rempli
   correctement dans le DOM. Empiler en z-index POSITIFS croissants (fond <
   voile < cadre) evite ce piege : la pile remontee place alors le fond et
   le voile normalement, avant la racine. */
/* min-height : plancher, jamais un ratio fixe sur le CADRE (P1b) — sans lui,
   le retrait de la bande de preuve (voir hero() dans sections.mjs) laisse le
   galet retomber a ~500px de mot, sous la scene du modele. Avec,
   [data-role="hero"] tient a 96+620+96=812px, sous les 900px de la fenetre F1
   avec de la marge (precedent template-14 : 812px, meme plancher).
   La case (`.pb-vue--hero`) NE PEUT PAS suivre le mot via `height:100%` :
   ce pourcentage se resout contre `.pb-hero__vue`, un ancetre a hauteur
   indeterminee (min-height sur le cadre n est pas une hauteur definie pour
   l algorithme de pourcentages) — un element remplace (img) sans hauteur
   resolue retombe alors sur SON PROPRE ratio intrinseque cote a sa largeur
   definie (542px ici) : une photo portrait (ex. 896x1194, ratio 0.75) donne
   542/0.75=722px, tire tout le rang au-dela du plancher de 620px et fait
   passer le hero a 914px — verifie par capture geometrique directe
   (getBoundingClientRect) : `naturalWidth/naturalHeight` de la photo suffit
   a expliquer l ecart au pixel pres, aucune difference de moteur necessaire.
   Ce n est pas cosmetique : ca arrive des que la photo assignee charge (donc
   pour tout visiteur reel), pas seulement au gate. Fix : `.pb-vue--hero`
   recoit son PROPRE `aspect-ratio` fixe (comme --pale/--carte/--art/--bloc/
   --haute plus bas dans ce fichier), borne pour ne jamais depasser 620px a
   542px de large (ratio >= 542/620 ≈ 0.874) ; 21/22 est deja utilise pour
   --haute, reutilise ici (hauteur ≈568px < 620, marge de securite). La case
   suit alors le mot par le meme etirement flex qu avant (align-items:stretch
   sur le cadre), jamais par le ratio propre a la photo. */
.pb-hero__cadre { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: stretch; min-height: 620px; }
.pb-hero__mot { flex: 1 1 440px; min-width: 0; }
.pb-hero__vue { flex: 1 1 380px; min-width: 0; position: relative; }
.pb-vue--hero { aspect-ratio: 21 / 22; height: auto; border-radius: var(--carte-r); }
.pb-hero__vue::after {
  content: "";
  position: absolute;
  inset: auto 16px 16px auto;
  width: 84px; height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
}
/* Fond plein-cadre du hero, hors flux, DERRIERE le mot ET la vue de
   vitrine : cadre « fond » (R5c) — pas de ratio a lui, il couvre sa
   section. z-index POSITIF (1) + .pb-hero__cadre promu a z-index:3 (voir
   ci-dessus) : le fond reste sous le mot et sous la vue sans toucher a
   leur propre empilement visuel, tout en restant lisible par le
   classifieur. Etat vide = display:none, la scene reste le degrade du
   galet, deja eprouve au contraste (R4b). */
.pb-hero__fond {
  position: absolute;
  inset: 0;
  z-index: 1;
  aspect-ratio: auto;
  border-radius: inherit;
  background: none;
}
.pb-hero__fond .pb-vue__i { width: 100%; height: 100%; object-fit: cover; }
.pb-hero__fond.pb-vue--vide { display: none; }
.pb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--marque) 88%, black) 0%,
    color-mix(in srgb, var(--marque) 78%, black) 34%,
    transparent 76%);
  pointer-events: none;
}
.pb-preuve {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.pb-preuve__li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 210px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: var(--boite-r);
  background: color-mix(in srgb, var(--fond) 16%, transparent);
}
.pb-preuve__li .pb-signe { width: 40px; height: 40px; margin-bottom: 0; }
.pb-preuve__li .pb-signe__oeuf { width: 52px; height: 36px; }
.pb-preuve__mot { min-width: 0; }
.pb-preuve__t { display: block; font-size: 15px; font-weight: 600; }
.pb-preuve__x { display: block; font-size: 13.5px; color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

/* ---------- marques : file estompee aux extremites ----------- */
.pb-file__t { margin: 0 0 18px; text-align: center; font-size: 14.4px; color: var(--texte-doux); }
.pb-file {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--texte) 11%, var(--texte) 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--texte) 11%, var(--texte) 89%, transparent 100%);
}
.pb-file__ul {
  display: flex;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: pb-defile 34s linear infinite;
}
.pb-file__li { font-size: 18px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; }
@keyframes pb-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pb-file__ul, .pb-rail__ul { animation: none; } }

/* ---------- trait 5 : services en VERRE SOMBRE sur le galet --- */
/* R3 — une seule largeur par grille, le nombre de colonnes COMPTE (jamais
   deduit du remplissage) : en flex-wrap, une derniere carte orpheline
   s etirait pour combler la ligne (flex-grow), rompant l egalite des
   largeurs entre cartes. La grille CSS ne le fait jamais : chaque colonne
   garde sa largeur, orpheline ou non. Colonnes comptees aux trois gabarits
   mesures : 3 a 1440px (base), 2 a 1024px, 1 a 390px. */
.pb-servs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); }
.pb-serv {
  position: relative;
  min-width: 0;
  padding: 26px;
  border-radius: var(--carte-r);
  background: color-mix(in srgb, var(--texte) 10%, transparent);
  color: inherit;
}
.pb-serv::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--anneau-clair);
  pointer-events: none;
}
.pb-serv__t { display: block; font-size: 22.4px; font-weight: 600; letter-spacing: var(--serre); }
.pb-serv__x { display: block; margin-top: 8px; color: color-mix(in srgb, var(--sur-marque) 84%, transparent); }
.pb-serv__lire { display: inline-block; margin-top: 14px; font-size: 14.4px; font-weight: 600; }
.pb-fil-mot { display: inline-flex; align-items: center; gap: 7px; }
.pb-fil-fleche {
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2 5h5.2L5 2.8 6 1.8 10 5.9 6 10l-1-1 2.2-2.2H2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2 5h5.2L5 2.8 6 1.8 10 5.9 6 10l-1-1 2.2-2.2H2z'/%3E%3C/svg%3E");
  mask-size: contain; mask-repeat: no-repeat;
}

/* ---------- introSeo ---------------------------------------- */
.pb-intro { text-align: center; }
.pb-intro .pb-coches { justify-content: center; }

/* ---------- blocsSeo ---------------------------------------- */
.pb-blocs { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.pb-bloc { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); align-items: center; }
.pb-bloc--inverse { flex-direction: row-reverse; }
.pb-bloc__vue { position: relative; flex: 1 1 360px; min-width: 0; }
.pb-vue--bloc { aspect-ratio: 5 / 4; }
.pb-bloc__pastille {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--pilule);
  background: var(--fond);
  color: var(--texte);
  font-size: 14px;
  font-weight: 600;
}
.pb-bloc__pastille::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  z-index: -1;
}
.pb-bloc__mot { flex: 1 1 360px; min-width: 0; }

/* ---------- trait 7 : deux vues qui se CHEVAUCHENT ----------- */
.pb-duo, .pb-fiche { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: center; }
.pb-duo__vues, .pb-fiche__vues {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  padding-bottom: 74px;
  padding-right: 64px;
}
.pb-vue--haute { aspect-ratio: 21 / 22; }
.pb-duo__vues > .pb-vue--vide:first-child,
.pb-fiche__vues > .pb-vue--vide:first-child {
  place-items: start;
  padding: 26px 0 0 28px;
}
.pb-vue--posee {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 9 / 11;
  border-radius: var(--boite-r);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--texte) 18%, transparent);
}
.pb-duo__mot, .pb-fiche__mot { flex: 1 1 380px; min-width: 0; }

/* ---------- puces ------------------------------------------- */
.pb-coches { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0; padding: 0; list-style: none; }
.pb-coche { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 240px; min-width: 0; font-size: 15px; }
.pb-coche__p {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}
.pb-coches--fin .pb-coche { flex: 1 1 100%; font-size: 14.4px; }
.pb-coche__mot { min-width: 0; }
.pb-coche__t { display: block; }
.pb-coche__x { display: block; margin-top: 2px; font-size: 13.5px; color: var(--texte-doux); }
.pb-preuve__p { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; }
.pb-preuve__pi { font-size: 12.5px; color: color-mix(in srgb, var(--sur-marque) 70%, transparent); }
.pb-faq__enc { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; padding: 22px;
  border-radius: var(--boite-r); background: var(--fond-2); }
.pb-faq__enc .pb-signe { margin-bottom: 0; }
.pb-faq__encm { min-width: 0; }
.pb-faq__enct { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.pb-art__tete { margin: 0 0 34px; }
.pb-art__tete .pb-vue { aspect-ratio: 21 / 9; }

/* ---------- whyUs / certifications / specs : le PALE --------- */
.pb-pale {
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--carte-r);
  background: var(--fond-2);
}
/* R3 — colonnes comptees au gabarit 1440px : 4 (jamais deduites, whyUs a 4 atouts fixes). */
.pb-cartouches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin: 0; padding: 0; list-style: none; }
.pb-cartouche {
  position: relative;
  min-width: 0;
  padding: 24px;
  border-radius: var(--boite-r);
  background: var(--fond);
}
.pb-cartouche::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--anneau);
  pointer-events: none;
}
.pb-cartouche__t { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.pb-cartouche__x { margin: 0; font-size: 15px; color: var(--texte-doux); }
.pb-pale__vue { margin-top: var(--gout); }
.pb-vue--pale { aspect-ratio: 21 / 8; }
/* R3 — colonnes comptees au gabarit 1440px : 4 (jamais deduites, certifications a 4 items fixes). */
.pb-certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin: 0; padding: 0; list-style: none; }
.pb-cert { min-width: 0; text-align: center; }
.pb-cert .pb-signe { margin-inline: auto; }
.pb-cert__t { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.pb-cert__x { margin: 0; font-size: 14.4px; color: var(--texte-doux); }
.pb-specs { display: flex; flex-wrap: wrap; gap: 0 var(--gout); margin: 0; }
.pb-spec {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--texte) 10%, transparent);
}
.pb-spec__l { margin: 0; font-size: 14.4px; color: var(--texte-doux); }
.pb-spec__v { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }

/* ---------- secteurs ---------------------------------------- */
.pb-abcs, .pb-tarifs, .pb-aides, .pb-pass {
  display: flex; flex-wrap: wrap; gap: var(--gout); margin: 0; padding: 0; list-style: none;
}
/* R3 — colonnes comptees au gabarit 1440px : secteursB2b varie de 3 a 4 items
   selon la page (defaut 3, page commerce 4) — pistes dynamiques via :has(),
   jamais un repeat() fixe qui laisserait des pistes vides ou un colonage errone. */
.pb-sects {
  display: grid; --pistes: 3; grid-template-columns: repeat(var(--pistes), minmax(0, 1fr));
  gap: var(--gout); margin: 0; padding: 0; list-style: none;
}
.pb-sects:has(> :nth-child(4)) { --pistes: 4; }
.pb-mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin: 0; padding: 0; list-style: none; }
.pb-reals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin: 0; padding: 0; list-style: none; }
/* R3 — grilleProduits varie de 2 a 4 items selon la page — pistes dynamiques. */
.pb-prods {
  display: grid; --pistes: 2; grid-template-columns: repeat(var(--pistes), minmax(0, 1fr));
  gap: var(--gout);
}
.pb-prods:has(> :nth-child(3)) { --pistes: 3; }
.pb-prods:has(> :nth-child(4)) { --pistes: 4; }
.pb-sect { min-width: 0; }
.pb-sect__vue { position: relative; aspect-ratio: 4 / 3; }
.pb-sect__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--texte) 45%, transparent) 0%, transparent 58%);
  pointer-events: none;
}
.pb-sect__mot { padding-top: 16px; }
.pb-sect__meta { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-sect__t { margin: 6px 0 6px; font-size: 20px; font-weight: 600; }
.pb-sect__x { margin: 0 0 10px; font-size: 15px; color: var(--texte-doux); }
.pb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pb-tag {
  padding: 6px 14px;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--texte) 6%, transparent);
  font-size: 13px;
  font-weight: 500;
}
.pb-galet .pb-tag { background: color-mix(in srgb, var(--fond) 18%, transparent); }

/* ---------- zones ------------------------------------------- */
.pb-zones, .pb-posts { display: flex; flex-wrap: wrap; gap: var(--gout); }
/* R3 — colonnes comptees au gabarit 1440px : 3 (jamais deduites, maillageInterne a 3 items fixes). */
.pb-mails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); }
.pb-zone { position: relative; flex: 1 1 300px; min-width: 0; overflow: hidden; border-radius: var(--carte-r); }
.pb-zone__vue { aspect-ratio: 16 / 11; border-radius: var(--carte-r); }
.pb-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, color-mix(in srgb, var(--texte) 62%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.pb-zone__mot { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: var(--fond); }
.pb-zone__tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: .85; }
.pb-zone__t { display: block; font-size: 19px; font-weight: 600; }
.pb-zone__lire { display: inline-block; margin-top: 6px; font-size: 14.4px; font-weight: 600; }

/* ---------- process / aides : la colonne numerotee ----------- */
.pb-pas, .pb-aide { display: flex; gap: 18px; flex: 1 1 280px; min-width: 0; }
.pb-pas__n {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--pilule);
  background: var(--fond-2);
  font-size: 15px;
  font-weight: 600;
}
.pb-pas__n::after {
  content: "";
  position: absolute;
  inset: auto auto -10px 50%;
  transform: translateX(-50%);
  width: 26px; height: 4px;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.pb-pas__mot, .pb-aide__mot { min-width: 0; }
.pb-pas__t, .pb-aide__t { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.pb-aides { flex-direction: column; }
.pb-aide { flex: 1 1 100%; }

/* ---------- chiffres ---------------------------------------- */
.pb-chiffres__tete { text-align: center; margin-bottom: 28px; }
.pb-chiffres { display: flex; flex-wrap: wrap; gap: var(--gout); margin: 0; padding: 0; list-style: none; }
.pb-chiffre { flex: 1 1 180px; min-width: 0; text-align: center; }
.pb-chiffre__v { display: block; font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: var(--serre); }
.pb-chiffre__l { display: block; font-size: 14.4px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }

/* ---------- carte locale ------------------------------------ */
.pb-carte { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); align-items: center; }
.pb-carte__vue { flex: 1 1 380px; min-width: 0; }
.pb-vue--carte { aspect-ratio: 3 / 2; }
.pb-carte__mot { flex: 1 1 340px; min-width: 0; }
.pb-adr { display: block; font-style: normal; margin: 12px 0; color: var(--texte-doux); }
.pb-adr__l { display: block; }

/* ---------- avis : rail estompe ------------------------------ */
.pb-pale--avis { overflow: hidden; }
.pb-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--texte) 8%, var(--texte) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--texte) 8%, var(--texte) 92%, transparent 100%);
}
.pb-rail__ul {
  display: flex;
  gap: var(--gout);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: pb-defile 52s linear infinite;
}
.pb-avis {
  position: relative;
  width: 340px;
  max-width: 78vw;
  flex: 0 0 auto;
  padding: 24px;
  border-radius: var(--boite-r);
  background: var(--fond);
}
.pb-avis::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--anneau);
  pointer-events: none;
}
.pb-etoiles { display: inline-flex; gap: 3px; }
.pb-etoile { width: 15px; height: 15px; fill: var(--accent); }
.pb-avis__t { margin: 10px 0 6px; font-size: 17px; font-weight: 600; }
.pb-avis__x { margin: 0 0 16px; font-size: 15px; color: var(--texte-doux); }
.pb-avis__qui { display: flex; align-items: center; gap: 12px; }
.pb-avis__ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  flex: 0 0 auto;
  border-radius: 40px;
  background: var(--fond-2);
  font-weight: 600;
}
/* T5 — la colonne du nom/role doit occuper l espace laisse par l avatar dans
   .pb-avis__qui (flex), jamais rester au contenu (flex-basis:auto par defaut
   ratatinait la colonne a la largeur du prenom seul). */
.pb-avis__nom { flex: 1 1 auto; font-size: 15px; font-weight: 600; min-width: 0; }
.pb-avis__role { display: block; font-size: 13.5px; font-weight: 400; color: var(--texte-doux); }

/* ---------- faq --------------------------------------------- */
.pb-faq { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.pb-faq__tete { flex: 1 1 320px; min-width: 0; }
.pb-faq__ul { flex: 2 1 460px; min-width: 0; }
.pb-faq__d { position: relative; padding: 6px 0 14px; }
.pb-faq__d::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--texte) 12%, transparent);
}
.pb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17.6px;
  font-weight: 600;
}
.pb-faq__q::-webkit-details-marker { display: none; }
.pb-faq__d[open] .pb-faq__q .pb-bas { transform: rotate(180deg); }
.pb-faq__r { padding-bottom: 8px; }

/* ---------- trait 9 : le FLANC pale, a GAUCHE ---------------- */
.pb-flanc { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 50px); align-items: flex-start; }
.pb-flanc__cote {
  position: relative;
  flex: 0 1 350px;
  min-width: 0;
  padding: 26px;
  border-radius: var(--boite-r);
  background: var(--fond-2);
}
.pb-flanc__cote::before {
  content: "";
  position: absolute;
  inset: auto 26px 100% 26px;
  height: 6px;
  border-bottom-left-radius: var(--pilule);
  border-bottom-right-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pb-flanc__sur { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-flanc__t { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
.pb-flanc__tel { width: 100%; }
.pb-flanc__lien { width: 100%; margin-top: 10px; }
.pb-flanc__mot { flex: 1 1 420px; min-width: 0; }

/* ---------- materiaux / realisations / produits -------------- */
.pb-mat, .pb-real, .pb-prod { min-width: 0; }
.pb-mat__vue { aspect-ratio: 1; }
.pb-mat__t { margin: 14px 0 4px; font-size: 17px; font-weight: 600; }
.pb-mat__x { margin: 0; font-size: 14.4px; color: var(--texte-doux); }
.pb-real__vue { position: relative; aspect-ratio: 4 / 3; }
.pb-real__vue::after {
  content: "";
  position: absolute;
  inset: auto 14px 14px auto;
  width: 40px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.pb-real__mot { padding-top: 14px; }
.pb-real__meta { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-real__t { margin: 6px 0 4px; font-size: 19px; font-weight: 600; }
.pb-real__x { margin: 0; font-size: 15px; color: var(--texte-doux); }

/* ---------- trait 2 : l avant/apres superpose ---------------- */
.pb-abc { flex: 1 1 400px; min-width: 0; }
.ab__scene {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--carte-r);
  aspect-ratio: 3 / 2;
  background: var(--fond-2);
  touch-action: none;
}
.ab__cote { position: absolute; inset: 0; display: block; }
.ab__cote--ap { clip-path: inset(0 0 0 var(--pos)); }
.ab__vue { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.ab__vue .pb-vue__i { width: 100%; height: 100%; object-fit: cover; }
.ab__et {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: var(--pilule);
  background: var(--fond);
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
}
.ab__et--d { left: auto; right: 14px; }
.ab__cote .pb-vue__ini { position: absolute; top: 46%; left: 13%; transform: translate(-50%, -50%); }
.ab__cote--ap .pb-vue__ini { left: auto; right: 13%; transform: translate(50%, -50%); }
.ab__barre {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: var(--fond);
  pointer-events: none;
}
.ab__range {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 14px;
  z-index: 5;
  width: calc(100% - 24px);
  height: 28px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--fond) 55%, transparent);
  border-radius: var(--pilule);
  cursor: ew-resize;
}
.ab__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: var(--pilule);
  background: var(--marque);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--texte) 30%, transparent);
}
.ab__range::-moz-range-thumb {
  width: 26px; height: 26px;
  border: 0;
  border-radius: var(--pilule);
  background: var(--marque);
}
.pb-abc__mot { padding-top: 16px; }
.pb-abc__t { margin: 0 0 6px; font-size: 19px; font-weight: 600; }

/* ---------- maillage / blog --------------------------------- */
.pb-mail { position: relative; min-width: 0; }
.pb-post { position: relative; flex: 1 1 300px; min-width: 0; }
.pb-mail__vue, .pb-post__vue { aspect-ratio: 4 / 3; }
.pb-mail::after, .pb-post::after {
  content: "";
  position: absolute;
  inset: auto auto calc(100% + 12px) 0;
  width: 0; height: 0;
}
.pb-mail__mot, .pb-post__mot { display: block; padding-top: 16px; }
.pb-mail__meta, .pb-post__meta { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-mail__t, .pb-post__t { display: block; margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: var(--serre); }
.pb-mail__x, .pb-post__x { display: block; margin-top: 6px; font-size: 15px; color: var(--texte-doux); }
.pb-mail__lire, .pb-post__lire { display: inline-block; margin-top: 12px; font-size: 14.4px; font-weight: 600; }

/* ---------- ctaBand ----------------------------------------- */
.pb-cta { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); align-items: center; }
.pb-cta__mot { flex: 1 1 380px; min-width: 0; }
.pb-cta__mot .pb-tt { margin-bottom: 0; }
.pb-cta__droite { flex: 1 1 320px; min-width: 0; }
.pb-cta__form { display: flex; flex-wrap: wrap; gap: 12px; }
/* R3 — meme regle que .pb-servs : les champs comptent leurs colonnes dans
   une grille dediee (3/2/1 aux trois gabarits mesures), separee des deux
   boutons qui suivent (appel + envoi), lesquels forment leur propre
   fratrie et ne doivent pas etre entraines dans le compte des champs. */
.pb-cta__champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 1 1 100%; }
.pb-cta__champs .pb-champ { min-width: 0; }
.pb-cta__form .pb-bt { flex: 1 1 160px; }

/* ---------- fil d ariane ------------------------------------ */
.pb-ariane { padding-block: 14px 0; }
.pb-ariane__pilule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.pb-ariane__li { display: inline-flex; align-items: center; gap: 8px; }
.pb-ariane__a { color: var(--texte-doux); }
.pb-ariane__ici { color: var(--texte); font-weight: 600; }
.pb-ariane__pont { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--texte) 22%, transparent); }

/* ---------- formulaires ------------------------------------- */
.pb-joindre { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); align-items: flex-start; }
.pb-joindre__mot { flex: 1 1 340px; min-width: 0; }
.pb-joindre__form {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--boite-r);
  background: var(--fond-2);
}
.pb-champ { display: block; flex: 1 1 200px; min-width: 0; }
.pb-champ--large { flex: 1 1 100%; }
.pb-champ__l { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--texte-doux); }
.pb-champ__i {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--fond);
  box-shadow: var(--anneau);
}
.pb-champ__i--zone { resize: vertical; }
/* REGLE 7 — le formulaire garde sa porte d appel a cote du bouton d envoi ;
   le pied prend sa propre ligne, pleine largeur du formulaire. */
.pb-joindre__pied { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pb-joindre__pied .pb-bt { flex: 1 1 200px; justify-content: center; }
.pb-joindre__env { flex: 1 1 auto; }
.pb-coords { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.pb-coord { position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.pb-coord::before {
  content: "";
  position: absolute;
  left: 26px; top: 56px; bottom: -18px;
  width: 1px;
  background: color-mix(in srgb, var(--texte) 10%, transparent);
}
.pb-coord:last-child::before { display: none; }
.pb-coord .pb-signe { margin-bottom: 0; }
.pb-coord__t { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-coord__v { display: block; font-size: 16px; font-weight: 500; }

/* ---------- article ----------------------------------------- */
.pb-art { padding-block: 0 clamp(56px, 8vw, 104px); }
.pb-galet--art { margin-bottom: clamp(32px, 4vw, 56px); text-align: center; }
.pb-art__meta { margin: 8px 0 0; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.pb-som__t { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-som__ol { margin: 0; padding-left: 18px; }
.pb-som__a { font-size: 14.4px; font-weight: 500; }
.pb-art__texte { max-width: 78ch; }
.pb-art__h2 { margin: 34px 0 12px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: var(--serre); }
.pb-art__h3 { margin: 26px 0 10px; font-size: 22.4px; font-weight: 600; }
.pb-art__ul { margin: 0 0 16px; padding-left: 20px; color: var(--texte-doux); }
.pb-art__enc { margin: 22px 0; padding: 22px; border-radius: var(--boite-r); background: var(--fond-2); }
.pb-art__enct { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.pb-art__fig { margin: 24px 0; }
.pb-vue--art { aspect-ratio: 16 / 9; }
.pb-art__leg { margin-top: 8px; font-size: 13.5px; color: var(--texte-doux); }
.pb-art__cite {
  margin: 24px 0;
  padding-left: 20px;
  box-shadow: 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent) inset;
  font-size: 19px;
}

/* ---------- legal / facettes / tarifs / fiche ---------------- */
.pb-leg__tete { margin-bottom: 28px; }
.pb-leg__maj { margin: 0; font-size: 14.4px; color: var(--texte-doux); }
.pb-leg__b { margin-bottom: 26px; }
.pb-leg__t { margin: 0 0 10px; font-size: 22.4px; font-weight: 600; }
.pb-fac__t { margin: 0 0 14px; font-size: 20px; font-weight: 600; }
.pb-fac__rail { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pb-facette {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--pilule);
  background: var(--fond-2);
  font-size: 14.4px;
  font-weight: 500;
}
.pb-facette--ici { background: var(--marque); color: var(--sur-marque); font-weight: 600; }
.pb-tarif, .pb-prod {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
  padding: 26px;
  border-radius: var(--carte-r);
  background: var(--fond-2);
}
.pb-tarif::before {
  content: "";
  position: absolute;
  inset: auto 26px 100% 26px;
  height: 6px;
  border-bottom-left-radius: var(--pilule);
  border-bottom-right-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.pb-tarif__t, .pb-prod__t { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.pb-tarif__p, .pb-fiche__p { margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pb-tarif__pv, .pb-prod__pv, .pb-fiche__pv { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: var(--serre); }
.pb-tarif__pu, .pb-prod__pu, .pb-fiche__pu { font-size: 14.4px; color: var(--texte-doux); }
.pb-tarif__x, .pb-prod__x { margin: 0 0 10px; font-size: 15px; color: var(--texte-doux); }
.pb-tarif__bt, .pb-prod__bt { width: 100%; margin-top: 12px; }
.pb-prod { padding: 0; overflow: hidden; }
.pb-prod__vue { aspect-ratio: 4 / 3; border-radius: 0; }
.pb-prod__mot { padding: 22px; }

/* ---------- trait 10 : le pied BLANC ------------------------- */
.pb-pied { padding-block: clamp(48px, 6vw, 80px) 28px; background: var(--fond); }
.pb-pied__haut { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 56px); }
.pb-pied__col { flex: 1 1 190px; min-width: 0; }
.pb-pied__col--marque { flex: 1 1 300px; }
.pb-pied__marque { position: relative; margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: var(--serre); }
.pb-pied__marque::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 42px; height: 4px;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pb-pied__desc { margin: 16px 0 18px; font-size: 15px; color: var(--texte-doux); }
.pb-pied__vgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 262px; }
.pb-pied__vg { flex: 0 0 78px; }
.pb-pied__vgv { display: block; overflow: hidden; width: 78px; height: 75px; border-radius: 5px; background: var(--fond-2); }
.pb-pied__vgv .pb-vue__i { width: 100%; height: 100%; object-fit: cover; }
.pb-pied__vg--nu { width: 78px; height: 75px; border-radius: 5px; background: var(--fond-2); }
.pb-pied__ct { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-pied__ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pb-pied__a { font-size: 15px; color: var(--texte-doux); }
.pb-pied__adr { display: grid; gap: 8px; font-style: normal; font-size: 15px; color: var(--texte-doux); }
.pb-pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 20px;
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--texte) 10%, transparent);
  font-size: 13.5px;
  color: var(--texte-doux);
}
.pb-pied__nav { display: flex; flex-wrap: wrap; gap: 18px; }


/* ---------- reprises v2 : ariane, joindre, aides, produits --- */
.pb-ariane__pilule {
  display: inline-flex;
  padding: 9px 18px;
  border-radius: var(--pilule);
  background: var(--fond-2);
  box-shadow: var(--anneau);
}
.pb-ariane__pont {
  width: 14px; height: 6px;
  border-radius: var(--pilule);
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.pb-joindre { align-items: stretch; }
.pb-joindre__form { flex-direction: column; background: var(--fond); }
.pb-champs { display: flex; flex-direction: column; gap: 14px; }
.pb-champs__rang { display: flex; flex-wrap: wrap; gap: 14px; }
.pb-joindre__env { align-self: flex-start; margin-top: 4px; }
.pb-bt--clair { background: var(--fond-2); color: var(--texte); box-shadow: var(--anneau); }
.pb-p--contre { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.pb-p--serre { font-size: 15px; }

.pb-coords { margin-top: 26px; }
.pb-coord__t { display: flex; align-items: center; gap: 12px; margin: 0; }
.pb-coord__tl { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.pb-coord__v { margin: 4px 0 16px 54px; font-size: 16px; font-weight: 500; }
.pb-coord__a { color: inherit; }
.pb-galet .pb-coord__tl { color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }
.pb-galet .pb-coord__v, .pb-galet .pb-coord__a { color: var(--sur-marque); }

.pb-aide {
  position: relative;
  flex: 1 1 100%;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--carte-r);
  background: var(--fond-2);
}
.pb-aide::before {
  content: attr(data-rang);
  position: absolute;
  right: 20px; top: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--texte) 34%, transparent);
}
.pb-aide__signe { flex: 0 0 auto; }
.pb-aide__signe .pb-signe { margin-bottom: 0; }
.pb-aide__cond { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 14px 0 0; }
.pb-aide__cn { margin: 0; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--accent) 78%, var(--texte)); }
.pb-aide__cv { margin: 0; font-size: 15px; color: var(--texte-doux); }

.pb-fac__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; }
.pb-fac__compte {
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--pilule);
  background: var(--fond-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-doux);
}
.pb-fac__rail { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pb-fac__li { min-width: 0; }
.pb-facette { display: inline-flex; align-items: center; gap: 8px; }
.pb-facette__pt { width: 7px; height: 7px; border-radius: 50%; background: var(--sur-marque); }

.pb-prod { display: flex; flex-direction: column; }
.pb-prod__cadre { position: relative; margin: 0; }
.pb-prod__jeton {
  position: absolute;
  left: 16px; bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--pilule);
  background: var(--fond);
  box-shadow: var(--anneau);
}
.pb-prod__pv { font-size: 19px; font-weight: 600; letter-spacing: var(--serre); }
.pb-prod__pu { font-size: 13px; color: var(--texte-doux); }
.pb-prod__mot { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pb-prod__bt { margin-top: auto; }

.pb-chapeau--cote { max-width: 720px; }
.pb-mail { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 340px; }
.pb-mail__cadre { flex: 0 0 118px; min-width: 0; margin: 0; }
.pb-mail__vue { aspect-ratio: 3 / 4; }
.pb-mail__mot { flex: 1 1 auto; min-width: 0; padding-top: 0; }

.pb-flanc--art .pb-flanc__cote, .pb-flanc--leg .pb-flanc__cote { flex: 0 1 320px; }
.pb-som--leg { margin: 0; }
.pb-som__li { margin-bottom: 6px; }
.pb-art__enc { display: flex; align-items: flex-start; gap: 14px; }
.pb-art__enc .pb-signe { margin-bottom: 0; }
.pb-art__encm { min-width: 0; }

.pb-nav__a--volet { gap: 6px; }
.pb-tel__v { font-weight: 600; }
.pb-pied__nap { flex: 1 1 230px; }
.pb-pied__nl { display: block; }
.pb-pied__legal { min-width: 0; }
.pb-pied__bas-a { color: var(--texte-doux); }

/* ---------- adaptations ------------------------------------- */
@media (min-width: 1100px) {
  .pb-tel { display: inline-flex; }
  .pb-burger { display: none; }
}

@media (max-width: 1099px) {
  .pb-nav {
    position: absolute;
    left: 20px; right: 20px;
    top: calc(100% + 10px);
    z-index: 50;
    display: none;
    padding: 14px;
    border-radius: var(--carte-r);
    background: var(--fond);
    box-shadow: var(--anneau), 0 20px 44px color-mix(in srgb, var(--texte) 16%, transparent);
  }
  .pb-tete__cadre { position: relative; }
  .pb-tete[data-ouvert] .pb-nav { display: block; }
  .pb-nav__ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 0; background: none; box-shadow: none; }
  .pb-nav__a { justify-content: space-between; padding: 12px 14px; }
  .pb-volet {
    position: static;
    transform: none;
    display: none;
    padding-top: 8px;
    max-width: 100%;
  }
  .pb-nav__li--volet[data-ouvert] > .pb-volet { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
  .pb-nav__li--volet:hover > .pb-volet { display: none; }
  .pb-nav__li--volet[data-ouvert]:hover > .pb-volet { display: block; }
  .pb-volet__dedans { flex-direction: column; min-width: 0; padding: 14px; box-shadow: none; background: var(--fond-2); }
  .pb-volet__vitrine { flex: 1 1 auto; max-width: 100%; }
  .pb-tete__bt { display: none; }
  /* R3 — colonnes comptees au gabarit 1024px : 2 (jamais deduites). */
  .pb-servs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-cta__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-cartouches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-reals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-sects { --pistes: 2; }
  .pb-sects:has(> :nth-child(4)) { --pistes: 2; }
  .pb-prods { --pistes: 2; }
  .pb-prods:has(> :nth-child(3)) { --pistes: 2; }
  .pb-prods:has(> :nth-child(4)) { --pistes: 2; }
  .pb-mails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-vue--hero { aspect-ratio: 4 / 3; height: auto; }
  /* le mot occupe toute la largeur en colonne empilee : le degrade
     diagonal du hero laisserait sa fin de ligne sur la photo nue,
     R4b se juge donc sur une teinte proche et uniforme ici. */
  .pb-hero::before {
    background: color-mix(in srgb, var(--marque) 86%, black);
  }
}

@media (max-width: 760px) {
  :root { --gout: 18px; --carte-r: 16px; }
  .pb-bloc--inverse { flex-direction: row; }
  .pb-duo__vues, .pb-fiche__vues { padding-bottom: 0; padding-right: 0; }
  .pb-vue--posee { position: static; width: 100%; margin-top: 14px; aspect-ratio: 16 / 10; }
  .pb-appels--fin { justify-content: flex-start; }
  .pb-pied__vgs { max-width: 100%; }
  .pb-coord::before { display: none; }
  /* R3 — colonnes comptees au gabarit 390px : 1 (jamais deduites). */
  .pb-servs { grid-template-columns: 1fr; }
  .pb-cta__champs { grid-template-columns: 1fr; }
  .pb-cartouches { grid-template-columns: 1fr; }
  .pb-certs { grid-template-columns: 1fr; }
  .pb-mats { grid-template-columns: 1fr; }
  .pb-reals { grid-template-columns: 1fr; }
  .pb-sects { --pistes: 1; }
  .pb-sects:has(> :nth-child(4)) { --pistes: 1; }
  .pb-prods { --pistes: 1; }
  .pb-prods:has(> :nth-child(3)) { --pistes: 1; }
  .pb-prods:has(> :nth-child(4)) { --pistes: 1; }
  .pb-mails { grid-template-columns: 1fr; }
}

/* === LOGO MARQUE (factory) : vrai logo.svg en lockup avec le nom dans le header === */
.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}