/* ============================================================
   TEMPLATE-3 (gardener) — feuille SOURCE. dist/ est une sortie.
   Deux rayons de travail : 15 pour tout cadre, 10 pour tout
   bouton et tout champ. Aucune bordure : le contour est un
   anneau interieur d un pixel. Un seul degrade sur toute la
   fiche, le voile des cartes en photo pleine. La couleur de
   marque est le seul aplat colore.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: -0.03em;
  color: var(--texte);
  background: var(--fond);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.04em;   /* la chasse serree de la fiche */
  line-height: 1.15;
}

h1 { font-size: clamp(34px, 5.1vw, 73px); }
h2 { font-size: clamp(27px, 3.55vw, 51px); }
h3 { font-size: clamp(20px, 1.6vw, 24px); }
h4 { font-size: 18px; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.gd-cadre {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-width: 0;
}

.gd-aire { padding: 76px 0; }
.gd-aire--serree { padding: 46px 0; }
.gd-aire--pale { background: var(--fond-2); }

.gd-main > .gd-aire + .gd-aire--pale,
.gd-main > .gd-aire--pale + .gd-aire--pale { padding-top: 76px; }

/* ---- tetes de section ---------------------------------------- */

.gd-tete { margin: 0 0 34px; max-width: 720px; }
.gd-tete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.gd-tete--large { max-width: 900px; }

.gd-eyeb {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.gd-eyeb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-eyeb--clair { color: var(--sur-marque); }
.gd-eyeb--clair::before { background: var(--sur-marque); }
.gd-eyeb--sur { color: var(--sur-marque); }
.gd-eyeb--sur::before { background: var(--sur-marque); }

.gd-tt { margin: 0; }
.gd-acc { font-style: normal; }
.gd-suite, .gd-chapo, .gd-sous { margin: 16px 0 0; color: var(--texte-doux); }
.gd-txt { margin: 14px 0 0; color: var(--texte-doux); }
.gd-mention { margin: 18px 0 0; font-size: 13px; color: var(--texte-doux); }

/* ---- boutons et signes --------------------------------------- */

.gd-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
.gd-bt--plein { background: var(--marque); color: var(--sur-marque); }
.gd-bt--large { width: 100%; }
.gd-bt--sur { background: var(--sur-marque); color: var(--marque); }
/* Le second appel d une file ne redouble pas le premier : il se
   pose nu, la ou la fiche met un simple intitule a cote du bouton.
   Le contour se pose en VRAI `border`, pas en `box-shadow` inset : la
   meme ligne a l oeil, mais un box-shadow n a pas de border-top-width —
   R7 mesure la FORME d un bouton par son fond ou sa bordure haute, et un
   « nu » en box-shadow lui restait invisible, aussi bien en appel qu en
   devis (un cadre vide qu on ne peut pas prouver rempli n aide personne). */
.gd-bt--nu {
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}

.gd-signe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--marque) 16%, transparent);
  color: var(--texte);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.03em;
}

.gd-fl { width: 15px; height: 15px; flex: none; margin-left: 7px; }

.gd-chev {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  flex: none;
}
.gd-chev::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.gd-note { display: inline-flex; gap: 3px; color: var(--marque); }
.gd-note__e { width: 13px; height: 13px; }

.gd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gd-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 7%, transparent);
  font-size: 12px;
  line-height: 1.5;
}

.gd-coches { margin-top: 18px; display: grid; gap: 12px; }
.gd-coches--ligne { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gd-coche {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texte-doux);
  min-width: 0;
}
.gd-coche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-coche__t { display: block; color: var(--texte); font-weight: 500; }
.gd-coches--fine .gd-coche { font-size: 14px; }

/* ---- vues ----------------------------------------------------- */

.gd-vue {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond-2);
  min-width: 0;
}
.gd-vue img { width: 100%; height: 100%; object-fit: cover; }
.gd-vue--nue { display: grid; place-items: center; aspect-ratio: 4 / 3; }
/* NORME COQUILLE, R5c — un emplacement `forme: "fond"` n a pas de forme a
   lui : pose en `inset: 0` derriere le texte, il doit couvrir sa section
   aux deux axes MEME quand la vue est vide (lettre seule, sans photo). Le
   ratio 4/3 du repli nu sert la vignette ordinaire (une carte a sa forme
   propre) mais fuit sous un fond, qui a la forme de sa section, pas la
   sienne : la specificite (deux classes) l emporte sur le repli seul. */
.gd-hero__fond.gd-vue--nue,
.gd-bandeau__fond.gd-vue--nue,
.gd-svc__v.gd-vue--nue { aspect-ratio: auto; }
.gd-vue__ini {
  font-size: 40px;
  font-weight: 500;
  color: color-mix(in srgb, var(--texte) 22%, transparent);
}

/* ---- entete : la pilule de verre flottante -------------------- */

.gd-tete-site {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 20px 0;
}
.gd-pilule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 14px 12px 22px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent) inset;
}
.gd-logo {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-right: auto;
  min-width: 0;
}
.gd-tete-site__fin { display: flex; align-items: center; gap: 10px; }
.gd-tete-site__fin .gd-bt { min-height: 46px; }

.gd-nav { display: none; min-width: 0; }
.gd-nav__ul { display: flex; align-items: center; gap: 4px; }
.gd-nav__li { position: relative; }
.gd-nav__a {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  white-space: nowrap;
}
.gd-nav__a:hover { background: color-mix(in srgb, var(--texte) 6%, transparent); }

.gd-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
  cursor: pointer;
}
.gd-burger span { display: block; height: 2px; background: var(--texte); }

/* ---- volets ---------------------------------------------------- */

.gd-volet { display: none; }

@media (min-width: 1100px) {
  .gd-nav { display: block; }
  .gd-burger { display: none; }

  .gd-volet {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* le pont : le padding tient le volet accroche au lien */
    padding-top: 14px;
    width: min(760px, 84vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .gd-nav__li--volet:last-child .gd-volet,
  .gd-nav__li--volet:nth-last-child(2) .gd-volet { left: auto; right: 0; transform: none; }

  .gd-nav__li--volet[data-ouvert] .gd-volet {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .gd-volet__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 26px;
    padding: 24px;
    border-radius: 15px;
    background: var(--fond);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent) inset,
                0 22px 54px color-mix(in srgb, var(--texte) 13%, transparent);
  }
}

.gd-volet__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.gd-volet__col { min-width: 0; }
.gd-volet__ct {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.gd-volet__ul { display: grid; gap: 2px; }
.gd-volet__a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.gd-volet__a:hover { background: var(--fond-2); }

.gd-vitrine {
  min-width: 0;
  padding: 16px;
  border-radius: 15px;
  background: var(--fond-2);
}
.gd-vitrine__e {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.gd-vitrine__t { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; }
.gd-vitrine__x { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--texte-doux); }
.gd-vitrine__v { margin-top: 12px; aspect-ratio: 4 / 3; }
.gd-vitrine__b { margin-top: 12px; width: 100%; }

/* ---- fil d ariane --------------------------------------------- */

.gd-fil { padding: 18px 0 0; }
.gd-fil__ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--texte-doux); }
.gd-fil__li { position: relative; padding-left: 14px; }
.gd-fil__li:first-child { padding-left: 0; }
.gd-fil__li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}
.gd-fil__li:first-child::before { display: none; }

/* ---- hero : photo pleine + carte de prise flottante ----------- */

.gd-hero { position: relative; padding: 90px 0 70px; overflow: hidden; }
/* F1 — l entete (`.gd-tete-site`, sticky) garde sa hauteur en FLUX sur
   toutes les pages : les pages internes ouvrent sur le fil d ariane, qui
   reste sous elle, sans collision R10. Seule la home commence par le hero
   (`main > .gd-hero:first-child`) : lui seul remonte sous l entete par une
   marge negative, pour que la scene atteigne le bord haut comme chez le
   modele. Le mot garde son air : le padding de .gd-hero__in (90px, 120px au
   palier suivant) depasse largement la hauteur de l entete flottant. */
main > .gd-hero:first-child { margin-top: -84px; }
.gd-hero__fond {
  position: absolute;
  inset: 0;
  border-radius: 0;
  z-index: 0;
}
/* R10 — la marge negative ci-dessus (-84px) et le padding de .gd-hero
   (90px) sont calibres sur l entete a une seule ligne (84px de haut,
   largeur >= 484px) : le texte du hero (h1, etc.) retombe alors 6px sous le
   bas d entete, ce qui les garde hors bande. Sous 484px la pilule
   (`.gd-pilule`, flex-wrap depuis @media max-width: 1099px) manque de place
   et bascule le bloc contact/telephone sur une deuxieme ligne : l entete
   rendu passe a 138px. Faire remonter TOUTE la boite (sa marge) pour
   suivre ce nouveau bas d entete tirerait aussi le texte, qui n a pas
   d exemption R10, sous l entete avec lui. Seul le fond (`.gd-hero__fond`)
   est exempte — c est l arriere-plan plein cadre reconnu par la loi — donc
   seul LUI doit suivre la hauteur reelle de l entete : son inset remonte de
   l ecart (138 - 84 = 54px) pendant que la boite et son padding, donc le
   texte, restent la ou ils etaient deja hors bande. Jamais un z-index. */
@media (max-width: 483px) {
  main > .gd-hero:first-child .gd-hero__fond { inset: -54px 0 0 0; }
}
.gd-hero__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--texte) 46%, transparent);
}
.gd-hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  align-items: center;
}
.gd-hero__mot { min-width: 0; color: var(--sur-marque); }
.gd-hero__h1 { color: var(--sur-marque); }
.gd-hero__suite, .gd-hero__sous {
  margin: 18px 0 0;
  max-width: 560px;
  color: color-mix(in srgb, var(--sur-marque) 82%, transparent);
}
.gd-hero__b { margin-top: 26px; }

.gd-file { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.gd-file__d {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -14px;
  border-radius: 999px;   /* les disques du hero */
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 14px;
  font-weight: 500;
}
.gd-file__x {
  margin-left: 22px;
  font-size: 13px;
  min-width: 0;
  color: color-mix(in srgb, var(--sur-marque) 80%, transparent);
}

.gd-prise {
  min-width: 0;
  padding: 24px;
  border-radius: 15px;
  background: var(--fond);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent) inset;
}
.gd-prise__t { margin: 0 0 16px; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.gd-prise__ul { display: grid; gap: 10px; }
/* F1 — la carte de prise loge cote a cote de la scene hero (le modele y
   pose un formulaire compact) ; empiler icone/titre/points sur trois lignes
   par entree l etirait jusqu a depasser 900px et faisait deborder la
   section suivante dans la fenetre mesuree. Correctif structurel : l icone
   passe en premiere colonne, sur les deux rangees texte (`grid-row: span 2`)
   au lieu d occuper sa propre ligne — jamais une baisse de font-size. */
.gd-prise__li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 4px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--fond-2);
  min-width: 0;
}
.gd-prise__li .gd-signe { grid-row: span 2; margin: 0; }
/* T5 — l icone occupe seule la colonne 1 (grid-row: span 2) ; sans place
   explicite, un 3e enfant texte (quand titre + texte + points sont TOUS
   presents) retombe par auto-flow sur la ligne 3 colonne 1, la case
   etroite de l icone, et s y ecrase a 3em. Les trois textes doivent
   toujours rester colonne 2, quel que soit leur nombre. */
.gd-prise__b { display: block; grid-column: 2; font-weight: 500; }
.gd-prise__x { display: block; grid-column: 2; margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--texte-doux); }
.gd-prise__p { display: block; grid-column: 2; font-size: 13px; line-height: 1.6; color: var(--texte-doux); }
.gd-prise__f { margin-top: 16px; }

/* ---- bandeau d information ------------------------------------ */

.gd-bandeau { position: relative; padding: 46px 0; overflow: hidden; }
.gd-bandeau__fond { position: absolute; inset: 0; border-radius: 0; }
.gd-bandeau__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--texte) 56%, transparent);
}
.gd-bandeau__in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}
.gd-bandeau__mot { flex: 1 1 320px; min-width: 0; color: var(--sur-marque); }
.gd-bandeau__h { color: var(--sur-marque); }
.gd-bandeau__x { margin: 12px 0 0; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.gd-bandeau__mot .gd-coche { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.gd-bandeau__b { margin-top: 18px; }

/* la carte-lien : seul rayon 20 de toute la fiche */
.gd-plaque {
  position: relative;
  flex: 0 1 260px;
  min-width: 0;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--fond);
}
.gd-plaque::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-plaque__t { display: block; font-size: 21px; font-weight: 500; letter-spacing: -0.03em; }
.gd-plaque__x { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-doux); }

/* ---- marquee de marques : fondu horizontal -------------------- */

.gd-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent 100%);
}
.gd-rail__ul {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: gd-defile 34s linear infinite;
}
.gd-rail:hover .gd-rail__ul { animation-play-state: paused; }
.gd-rail__li { font-size: 17px; letter-spacing: -0.03em; color: var(--texte-doux); white-space: nowrap; }

@keyframes gd-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- duo texte + vue ------------------------------------------ */

.gd-duo { display: grid; gap: 34px; align-items: center; }
.gd-duo__v { aspect-ratio: 9 / 8; }
.gd-duo__mot { min-width: 0; }
.gd-duo__mot .gd-tete { margin-bottom: 0; }

/* ---- cartes de service : photo pleine + voile ----------------- */

.gd-svcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-svc {
  position: relative;
  min-width: 0;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond-2);
}
.gd-svc__v {
  position: absolute;
  inset: 0;
  border-radius: 0;
  /* le fondu montant de la fiche source */
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(rgb(0, 0, 0) 30%, rgb(0, 0, 0) 100%);
}
.gd-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  /* LE seul degrade de la coquille */
  background: linear-gradient(color-mix(in srgb, var(--texte) 23%, transparent) 0%,
                              color-mix(in srgb, var(--texte) 78%, transparent) 100%);
}
.gd-svc__mot { position: relative; z-index: 1; padding: 26px; color: var(--sur-marque); min-width: 0; }
.gd-svc__mot .gd-signe { background: color-mix(in srgb, var(--sur-marque) 20%, transparent); color: var(--sur-marque); }
.gd-svc__h { color: var(--sur-marque); }
.gd-svc__x { margin: 10px 0 0; font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 84%, transparent); }
.gd-svc__l { display: inline-flex; align-items: center; margin-top: 14px; font-size: 14px; }

/* ---- blocs SEO ------------------------------------------------ */

.gd-blocs { display: grid; gap: 56px; }
.gd-bloc { display: grid; gap: 28px; align-items: center; }
.gd-bloc__mot { min-width: 0; }
.gd-bloc__h { font-size: clamp(24px, 2.6vw, 38px); }
.gd-bloc__b { margin-top: 24px; }
.gd-bloc__v { aspect-ratio: 5 / 4; }

/* ---- expertise ------------------------------------------------- */

.gd-exp__in { display: grid; gap: 30px; align-items: start; }
.gd-exp__mot { min-width: 0; }
.gd-exp__ul { display: grid; gap: 14px; margin-top: 22px; }
.gd-exp__li { padding: 16px 18px; border-radius: 15px; background: var(--fond-2); min-width: 0; }
.gd-exp__b { display: block; font-weight: 500; }
.gd-exp__x { display: block; margin-top: 4px; font-size: 14px; color: var(--texte-doux); }
.gd-exp__v { aspect-ratio: 4 / 5; }
.gd-exp__mot .gd-bt { margin-top: 22px; }

/* ---- pourquoi nous --------------------------------------------- */

.gd-why { display: grid; gap: 28px; align-items: start; }
.gd-why__v { aspect-ratio: 3 / 4; }
.gd-why__l { display: grid; gap: 16px; min-width: 0; }
.gd-why__c { padding: 22px; border-radius: 15px; background: var(--fond-2); min-width: 0; }
.gd-why__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- secteurs --------------------------------------------------- */

.gd-b2bs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-b2b { min-width: 0; border-radius: 15px; background: var(--fond); overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent) inset; }
.gd-b2b__v { border-radius: 0; aspect-ratio: 16 / 10; }
.gd-b2b__mot { padding: 22px; min-width: 0; }
.gd-b2b__m { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gd-b2b__h { margin-top: 8px; }
.gd-b2b__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }

/* ---- zones ------------------------------------------------------ */

.gd-zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gd-zone {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond-2);
}
.gd-zone__v { border-radius: 0; aspect-ratio: 4 / 3; }
.gd-zone__mot { padding: 18px; min-width: 0; }
.gd-zone__t {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 12px;
}
.gd-zone__l { display: inline-flex; align-items: center; margin-top: 12px; font-size: 14px; color: var(--texte-doux); }

/* ---- process ---------------------------------------------------- */

.gd-pas__ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-pas {
  position: relative;
  min-width: 0;
  padding: 26px 22px 22px;
  border-radius: 15px;
  background: var(--fond-2);
}
.gd-pas::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-pas__n { display: block; margin-bottom: 12px; font-size: 13px; letter-spacing: 0.08em; color: var(--texte-doux); }
.gd-pas__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.gd-pas__v { margin-top: 16px; aspect-ratio: 16 / 10; border-radius: 10px; }

/* ---- chiffres ---------------------------------------------------- */

.gd-chif { display: grid; gap: 24px; align-items: center; }
.gd-chif__v-img { aspect-ratio: 16 / 9; }
.gd-chif__ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gd-chif__li { min-width: 0; }
.gd-chif__v { display: block; font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -0.04em; }
.gd-chif__l { display: block; margin-top: 4px; font-size: 14px; color: var(--texte-doux); }

/* ---- carte locale ------------------------------------------------ */

.gd-carte__in { display: grid; gap: 26px; align-items: center; }
.gd-carte__v { aspect-ratio: 16 / 10; }
.gd-carte__mot { min-width: 0; }
.gd-carte__ad { font-style: normal; display: grid; gap: 4px; }
.gd-carte__ligne { color: var(--texte-doux); }

/* ---- avis : marquee d avatars ------------------------------------ */

.gd-av {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent 100%);
}
.gd-av__ul {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: gd-defile 62s linear infinite;
}
.gd-av:hover .gd-av__ul { animation-play-state: paused; }
.gd-av__li {
  display: flex;
  gap: 14px;
  width: 340px;
  padding: 22px;
  border-radius: 15px;
  background: var(--fond);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent) inset;
}
.gd-av__d {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 999px;   /* l avatar-disque de la fiche */
  background: var(--marque);
  color: var(--sur-marque);
  font-weight: 500;
}
.gd-av__mot { min-width: 0; }
.gd-av__t { display: block; margin-top: 6px; font-weight: 500; }
.gd-av__x { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }
.gd-av__a { margin-top: 10px; font-size: 14px; font-weight: 500; }
.gd-av__r { color: var(--texte-doux); font-weight: 400; }

/* ---- faq ---------------------------------------------------------- */

.gd-faq { display: grid; gap: 30px; align-items: start; }
.gd-faq__cote { display: grid; gap: 18px; min-width: 0; align-content: start; }
.gd-faq__v { aspect-ratio: 4 / 3; }
.gd-faq__mot { min-width: 0; }
.gd-q { padding: 16px 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--texte) 10%, transparent); }
.gd-q__s {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
  list-style: none;
}
.gd-q__s::-webkit-details-marker { display: none; }
.gd-q[open] .gd-q__s .gd-chev { transform: rotate(180deg); }
.gd-q__p { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }

/* ---- certifications, aides, materiaux ----------------------------- */

.gd-cert { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.gd-cert__li { min-width: 0; padding: 20px; border-radius: 15px; background: var(--fond-2); }
.gd-cert__t { display: block; font-weight: 500; }
.gd-cert__x { display: block; margin-top: 6px; font-size: 14px; color: var(--texte-doux); }

.gd-aides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gd-aide { min-width: 0; padding: 24px; border-radius: 15px; background: var(--fond-2); }
.gd-aide__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }

.gd-mats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gd-mat { min-width: 0; }
.gd-mat__v { aspect-ratio: 4 / 3; }
.gd-mat__h { margin-top: 14px; }
.gd-mat__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- tarifs -------------------------------------------------------- */

.gd-tars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-tar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
  border-radius: 15px;
  background: var(--fond-2);
}
.gd-tar__p { margin-top: 12px; font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }
.gd-tar__u { font-size: 14px; font-weight: 400; color: var(--texte-doux); }
.gd-tar__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.gd-tar__b { margin-top: auto; padding-top: 22px; }

/* ---- realisations : bento a hauteurs inegales ---------------------- */

.gd-reas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-rea { min-width: 0; }
.gd-rea__v { aspect-ratio: 4 / 5; }
.gd-rea[data-h="1"] .gd-rea__v { aspect-ratio: 4 / 6.5; }
.gd-rea[data-h="2"] .gd-rea__v { aspect-ratio: 4 / 4.2; }
.gd-rea__mot { padding-top: 14px; min-width: 0; }
.gd-rea__m { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gd-rea__h { margin-top: 6px; }
.gd-rea__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- avant / apres -------------------------------------------------- */

.gd-abs { display: flex; flex-wrap: wrap; gap: 26px; }
.gd-ab { flex: 1 1 340px; min-width: 0; }
.gd-ab__sc {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond-2);
  aspect-ratio: 16 / 10;
  touch-action: none;
}
.gd-ab__f { position: absolute; inset: 0; }
.gd-ab__f--ap { clip-path: polygon(var(--pos) 0%, 100% 0%, 100% 100%, var(--pos) 100%); }
.gd-ab__v { position: absolute; inset: 0; border-radius: 0; }
.gd-ab__et {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fond);
  font-size: 12px;
  line-height: 1.4;
  /* Les deux pastilles se partagent la largeur : un intitule long se
     replie sur plusieurs lignes au lieu de mordre sur sa voisine. */
  max-width: calc(50% - 20px);
  min-width: 0;
}
.gd-ab__et--g { left: 14px; }
.gd-ab__et--d { right: 14px; }
.gd-ab__tige {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: var(--fond);
}
.gd-ab__cur {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 54px;
  z-index: 4;
  width: calc(100% - 24px);
  height: 34px;
  margin: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.gd-ab__cur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--marque);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fond) 90%, transparent);
  cursor: ew-resize;
}
.gd-ab__cur::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--marque);
}
.gd-ab__mot { padding-top: 16px; min-width: 0; }
.gd-ab__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- maillage ------------------------------------------------------- */

.gd-mails { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gd-mail {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent) inset;
}
.gd-mail__v { border-radius: 0; aspect-ratio: 16 / 9; }
.gd-mail__mot { padding: 20px; min-width: 0; }
.gd-mail__m { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gd-mail__h { margin-top: 8px; font-size: 19px; }
.gd-mail__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.gd-mail__l { display: inline-flex; margin-top: 12px; color: var(--marque); }

/* ---- encart, mention, pied d aire ------------------------------------ */

.gd-encart {
  padding: 24px 22px;
  border-radius: 15px;
  background: var(--fond-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent) inset;
  min-width: 0;
}
.gd-encart--art { margin: 26px 0; }
.gd-encart__t { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.gd-encart__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.gd-encart .gd-bt { margin-top: 16px; }
.gd-mention { margin-top: 22px; font-size: 13px; line-height: 1.7; color: var(--texte-doux); }
.gd-pied-aire { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.gd-pied__lb { font-weight: 500; color: var(--texte); }

/* ---- bande d appel : le seul aplat colore ---------------------------- */

.gd-cta { background: var(--marque); color: var(--sur-marque); padding: 52px 0; }
.gd-cta__in-cadre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.gd-cta__mot { flex: 1 1 380px; min-width: 0; }
.gd-cta__h { color: var(--sur-marque); }
.gd-cta__x { margin-top: 12px; color: color-mix(in srgb, var(--sur-marque) 85%, transparent); }
.gd-cta__v { flex: 0 1 210px; min-width: 0; aspect-ratio: 4 / 3; border-radius: 15px; order: 3; }
.gd-cta__f { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 12px; flex: 1 1 320px; min-width: 0; }
.gd-cta__b { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.gd-cta__lab { min-width: 0; font-size: 12px; }
.gd-cta__lab span { display: block; margin-bottom: 6px; }
.gd-cta__in {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
}

/* ---- contact --------------------------------------------------------- */

.gd-ct__x { margin-top: 14px; text-align: center; color: var(--texte-doux); }
.gd-ct__in { display: grid; gap: 26px; margin-top: 34px; }
.gd-coord { display: grid; gap: 14px; min-width: 0; }
.gd-coord__li { padding: 18px; border-radius: 15px; background: var(--fond); min-width: 0; }
.gd-coord__t { display: block; font-weight: 500; }
.gd-coord__x { display: block; font-size: 14px; color: var(--texte-doux); }
.gd-coord__a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.gd-coord__a:hover { text-decoration-color: currentColor; }
.gd-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 24px;
  border-radius: 15px;
  background: var(--fond);
  min-width: 0;
}
.gd-form__lab { min-width: 0; }
.gd-form__lab--large { grid-column: 1 / -1; }
.gd-form__l { display: block; margin-bottom: 6px; font-size: 13px; color: var(--texte-doux); }
.gd-form__in, .gd-form__ta {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
}
.gd-form__in { height: 50px; padding: 0 14px; }
.gd-form__ta { resize: vertical; }
.gd-form__b { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
/* `.gd-mention` est aussi un enfant direct de `.gd-form` (desormais une
   grille comptee) : sans piste declaree elle heriterait de la largeur
   d une seule colonne au lieu de courir sous le formulaire entier. */
.gd-form > .gd-mention { grid-column: 1 / -1; }

/* ---- blog ------------------------------------------------------------- */

.gd-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-post { min-width: 0; }
.gd-post__v { aspect-ratio: 16 / 11; }
.gd-post__mot { padding-top: 14px; min-width: 0; }
.gd-post__m { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gd-post__h { margin-top: 8px; font-size: 20px; }
.gd-post__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

.gd-art { max-width: 900px; }
.gd-art__h1 { margin-top: 8px; }
.gd-art__meta { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.gd-art__v { margin-top: 24px; aspect-ratio: 16 / 9; }
.gd-art__in { display: grid; gap: 26px; margin-top: 28px; }
.gd-som { padding: 20px; border-radius: 15px; background: var(--fond-2); min-width: 0; }
.gd-som__t { font-weight: 500; }
.gd-som__ol { margin-top: 10px; display: grid; gap: 6px; }
.gd-som__li { position: relative; padding-left: 16px; font-size: 14px; color: var(--texte-doux); }
.gd-som__li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-art__corps { min-width: 0; }
.gd-art__h2 { margin-top: 30px; font-size: clamp(23px, 2.3vw, 32px); }
.gd-art__h3 { margin-top: 22px; }
.gd-art__p { margin-top: 14px; color: var(--texte-doux); }
.gd-art__ul { margin-top: 14px; display: grid; gap: 8px; }
.gd-art__ul li { position: relative; padding-left: 20px; color: var(--texte-doux); }
.gd-art__ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--marque);
}
.gd-art__cit {
  margin: 22px 0 0;
  padding: 20px 24px;
  border-radius: 15px;
  background: var(--fond-2);
  font-size: 18px;
}

/* ---- mentions --------------------------------------------------------- */

.gd-leg { max-width: 820px; }
.gd-leg__h1 { margin-top: 8px; }
.gd-leg__maj { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.gd-leg__s { margin-top: 30px; }
.gd-leg__h { font-size: clamp(21px, 2vw, 26px); }
.gd-leg__p { margin-top: 12px; color: var(--texte-doux); }

/* ---- facettes, produits ----------------------------------------------- */

.gd-fac__ul { display: flex; flex-wrap: wrap; gap: 10px; }
.gd-fac {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--fond-2);
  font-size: 14px;
}
.gd-fac--on { background: var(--marque); color: var(--sur-marque); }

.gd-prs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-pr {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fond);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent) inset;
}
.gd-pr__v { border-radius: 0; aspect-ratio: 4 / 3; }
.gd-pr__mot { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; min-width: 0; }
.gd-pr__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.gd-pr__p { margin-top: 14px; font-size: 24px; font-weight: 500; letter-spacing: -0.04em; }
.gd-pr__u { font-size: 14px; font-weight: 400; color: var(--texte-doux); }
.gd-pr__mot .gd-bt { margin-top: auto; }
.gd-pr__mot > .gd-bt { margin-top: 18px; }

.gd-fp { display: grid; gap: 30px; align-items: start; }
.gd-fp__v { aspect-ratio: 4 / 3; }
.gd-fp__mot { min-width: 0; }
.gd-fp__c { margin-top: 14px; color: var(--texte-doux); }
.gd-fp__p { margin-top: 18px; font-size: 32px; font-weight: 500; letter-spacing: -0.04em; }
.gd-fp__u { font-size: 15px; font-weight: 400; color: var(--texte-doux); }
.gd-fp__b { margin-top: 22px; max-width: 320px; }

.gd-sp { display: grid; gap: 0; margin: 0; }
.gd-sp__li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--texte) 10%, transparent);
}
.gd-sp__k { margin: 0; color: var(--texte-doux); min-width: 0; }
.gd-sp__v { margin: 0; font-weight: 500; min-width: 0; }

/* ---- pied ------------------------------------------------------------- */

.gd-pied { padding: 62px 0 30px; background: var(--fond); }
.gd-pied__in { display: grid; gap: 34px; }
.gd-pied__marque { min-width: 0; }
.gd-pied__logo { font-size: 21px; font-weight: 500; letter-spacing: -0.04em; }
.gd-pied__d { margin-top: 12px; max-width: 320px; font-size: 15px; color: var(--texte-doux); }
.gd-pastilles { display: flex; gap: 10px; margin-top: 20px; }
.gd-pastille {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: var(--fond-2);
  font-size: 13px;
}
.gd-pied__cols { display: flex; flex-wrap: wrap; gap: 28px; min-width: 0; }
.gd-pied__col { flex: 1 1 180px; min-width: 0; }
.gd-pied__ct { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gd-pied__ul { margin-top: 12px; display: grid; gap: 8px; }
.gd-pied__a, .gd-pied__x { font-size: 15px; color: var(--texte-doux); }
.gd-pied__ad { margin-top: 12px; font-style: normal; display: grid; gap: 4px; font-size: 15px; color: var(--texte-doux); }
.gd-pied__legal {
  margin-top: 34px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--texte-doux);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--texte) 10%, transparent);
}

/* ---- le flanc des pages internes -------------------------------------- */

.gd-flanc-jeu { display: block; }
.gd-flanc { display: block; min-width: 0; }
.gd-flanc .gd-aire { padding: 26px 0; }
.gd-flanc .gd-cadre { padding: 0; max-width: none; }

/* ---- grandes largeurs --------------------------------------------------- */

@media (min-width: 700px) {
  .gd-cadre { padding: 0 32px; }
  .gd-aire { padding: 96px 0; }
  .gd-hero { padding: 120px 0 96px; }
  main > .gd-hero:first-child { margin-top: -87px; }
  .gd-duo, .gd-bloc, .gd-why, .gd-faq, .gd-exp__in, .gd-carte__in, .gd-chif, .gd-fp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px;
  }
  .gd-bloc[data-sens="droite"] .gd-bloc__mot { order: 2; }
  .gd-ct__in { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .gd-art__in { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .gd-pied__in { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

  /* R3 : grilles a largeurs egales, N declare par palier */
  .gd-svcs, .gd-b2bs, .gd-zones, .gd-pas__ol, .gd-cert, .gd-aides, .gd-mats,
  .gd-tars, .gd-reas, .gd-mails, .gd-posts, .gd-prs, .gd-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gd-cta__f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .gd-hero__in { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
  .gd-hero__h1 { max-width: 620px; }
  .gd-duo__v { order: -1; }

  /* F1 — a deux colonnes, align-items:center recale le mot sur la hauteur
     de la carte : des que la carte se compacte (F1, coquille de la carte),
     le mot remonte avec elle et glisse dans la case au-dessus, la ou le
     modele le montre toujours a plat sous la meme bande. La position du
     texte doit tenir a la mise en page du mot, jamais a la hauteur d une
     carte voisine — on decouple donc les deux colonnes (align-items:start)
     et on rend au mot l ecart qu il avait cote a cote d une carte pleine,
     pour retrouver la meme bande verticale que le modele. */
  .gd-hero__in { align-items: start; }
  .gd-hero__mot { margin-top: 118px; }
  /* F1 — le pied de scene (padding-bottom) est ce qui reste sous le mot
     une fois sa position fixee : c est lui, pas la position du mot, qui
     doit se plier pour que la scene entiere reprenne la hauteur du modele
     (le mot ne bouge plus, on ne fait que rogner l air libre en dessous). */
  .gd-hero { padding-bottom: 63px; }

  /* R3 : grilles pleine largeur (hors flanc), N monte a 3 ou 4 selon la densite */
  .gd-svcs, .gd-b2bs, .gd-pas__ol, .gd-aides, .gd-tars, .gd-reas, .gd-mails,
  .gd-posts, .gd-prs, .gd-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gd-zones, .gd-cert, .gd-mats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* pages internes : corps etroit, colonne laterale a DROITE */
  .gd-page--flanc .gd-flanc-jeu {
    display: grid;
    grid-template-columns: minmax(0, 775px) minmax(0, 330px);
    gap: 50px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }
  /* Le corps n est plus une div a part : ce sont les enfants directs de
     .gd-flanc-jeu (= <main>) qui ne sont pas l aside (.gd-flanc). */
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) { min-width: 0; }
  .gd-page--flanc .gd-flanc-jeu > .gd-aire > .gd-cadre,
  .gd-page--flanc .gd-flanc-jeu > .gd-fil > .gd-cadre { padding: 0; max-width: none; }
  .gd-page--flanc .gd-flanc-jeu > .gd-bandeau > .gd-cadre,
  .gd-page--flanc .gd-flanc-jeu > .gd-cta > .gd-cadre { padding: 0 26px; }
  .gd-page--flanc .gd-flanc {
    grid-column: 2;
    position: sticky;
    top: 104px;
    padding: 8px 22px;
    border-radius: 15px;
    background: var(--fond-2);
  }
  .gd-page--flanc .gd-flanc .gd-aire--pale { background: transparent; }
  .gd-page--flanc .gd-flanc .gd-chif__ul,
  .gd-page--flanc .gd-flanc .gd-cert {
    display: grid;
    /* Declaree explicitement : la regle generique (.gd-cert, .gd-chif__ul)
       monte a repeat(2)/repeat(4) aux paliers 700px et 1100px avec la meme
       specificite que cette regle-ci mais un ordre de source plus tardif —
       ne pas declarer grid-template-columns ici la laisserait gagner ici
       aussi, et compresserait le texte dans les 330px de la sidebar (T5). */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .gd-page--flanc .gd-flanc .gd-tt { font-size: 22px; }

  /* R3 : corps etroit (775px) sur pages a flanc, N redescend a 2 (1 pour le formulaire cta) */
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-svcs,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-b2bs,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-zones,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-pas__ol,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-aides,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-mats,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-tars,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-reas,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-mails,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-prs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-cta__f { grid-template-columns: minmax(0, 1fr); }

  /* T5 : gd-fp (ficheProduit) et gd-faq associent un gros titre a une image
     dans une grille 50/50 ; a 775px de corps, la demi-piste texte tombe a
     ~365px et le titre (H1 ficheProduit, H2 faq) se resserre sous 2 mots
     par ligne. Correctif structurel : l image passe en piste fixe, le texte
     prend le reste par flex: 1 1 auto + min-width: 0 (cousin horizontal du
     min-height: 0 de R5a) — jamais une baisse de font-size. */
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-fp,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-faq {
    display: flex;
    flex-wrap: wrap;
  }
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-fp__v,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-faq__cote {
    flex: 0 0 220px;
  }
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-fp__mot,
  .gd-page--flanc .gd-flanc-jeu > :not(.gd-flanc) .gd-faq__mot {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* les pages internes recentrent leur premier titre */
  .gd-page--flanc .gd-hero__mot { text-align: center; margin: 0 auto; }
  .gd-page--flanc .gd-hero__h1 { max-width: none; }
  .gd-page--flanc .gd-hero__in { grid-template-columns: minmax(0, 1fr); }
  .gd-page--flanc .gd-hero .gd-prise { display: none; }
  .gd-page--flanc .gd-file { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-rail__ul, .gd-av__ul { animation: none; }
}

/* ---- menu compact : la pilule s ouvre en colonne ------------------------ */

@media (max-width: 1099px) {
  .gd-pilule { flex-wrap: wrap; }
  .gd-tete-site[data-menu-ouvert] .gd-nav {
    display: block;
    order: 3;
    flex: 1 1 100%;
    margin-top: 12px;
    padding-top: 12px;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--texte) 10%, transparent);
  }
  .gd-tete-site[data-menu-ouvert] .gd-nav__ul { display: grid; gap: 2px; }
  .gd-nav__li { width: 100%; }
  .gd-nav__a { width: 100%; justify-content: space-between; }
  .gd-nav__li--volet[data-ouvert] .gd-volet {
    display: block;
    padding: 6px 0 10px 12px;
  }
  .gd-nav__li--volet[data-ouvert] .gd-volet__in { display: grid; gap: 14px; }
  .gd-volet__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gd-vitrine__v { aspect-ratio: 16 / 9; }
  .gd-tete-site__fin .gd-bt { padding: 0 16px; }
}

/* >>> 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) */
/* Aucun cadre porteur : toute l encre de cette coquille repose sur ses
   sections, pas sur ses cadres. Les cadres vides restent clairs. */
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* === 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)}