/* ============================================================
   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(--encre-marque,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-bande,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);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,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-bande,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);--sur-bande:var(--sur-texte,var(--fond));
}
.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);--sur-bande:var(--sur-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);--sur-bande:var(--sur-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);--sur-bande:var(--sur-marque); color:var(--sur-bande,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-bande,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; }
}

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */

/* contraste-bandes (14/09/2026) — regle portee par la tuile qui peint le fond mesure.
   La tuile de zone ecrit son mot en --fond (blanc) parce qu un voile monte du bas jusqu a 62 % de
   --texte (.pb-zone::after). Mais ce voile est un PSEUDO-ELEMENT : elementsFromPoint n en renvoie
   jamais, donc la mesure ne peut pas le voir — aucun `pointer-events` n y changerait rien. Elle lit
   le fond REEL du cadre, et a l etat VIDE c est le creme --fond-2 : blanc sur creme, 1,1 sur les
   trois lignes de la tuile. Le cadre VIDE prend donc le sol que le voile produit deja a l oeil ;
   avec une photo, .pb-vue__i le couvre et rien ne change. */
.pb-zone .pb-zone__vue.pb-vue--vide { background: color-mix(in srgb, var(--texte) 62%, var(--fond-2)); }
/* L initiale du cadre vide suivait le sol clair (45 % de --texte) : sur ce sol assombri elle passe a
   l encre claire, comme le mot de la tuile. (Une lettre seule n est pas mesuree par le check —
   moins de deux caracteres — mais elle doit rester visible.) */
.pb-zone .pb-vue--vide .pb-vue__ini { color: color-mix(in srgb, var(--fond) 72%, transparent); }

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Cadres PORTEURS : de l encre claire repose reellement dessus (mesure du
   2026-09-15 sur 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu.

   Et il se tait EN ENTIER : une legende dessinee en pastille (fond, padding,
   ombre) laissait, a font-size 0, une plaquette claire vide sur le cadre
   sombre, lue 2,07 puis 4,40 par le gate voile (template-1, 14 et 15 sept).
   Seuls les enfants qui portent du texte perdent leur habillage : la trame
   et les decors vides du cadre restent. */
[data-slot="pb-zone__vue"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="pb-zone__vue"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="pb-zone__vue"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */