/* ============================================================
   TEMPLATE-11 (consulting) — la SOURCE du dessin. dist/ n est
   qu une sortie : ce fichier seul fait foi.

   Grammaire native relevee en ligne :
   - cadre de 1240 ancre a 100 ;
   - un seul rayon, 40, mais A PIED CARRE : 40 40 5 5 ;
   - aucun degrade de couleur, aucune bordure : le contour est
     un anneau interieur ;
   - le BLEU de marque tient lieu de sombre ;
   - le label de section est INDENTE de 70 sur son titre ;
   - les files se terminent en FONDU par un masque de bord ;
   - les chiffres se posent SUR une vue en ESCALIER.
   ============================================================ */

*, *::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-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---- cadre et sections -------------------------------------- */

.cg-cadre {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}

.cg-s { padding: 104px 0; position: relative; }
.cg-s + .cg-s { padding-top: 0; }
.cg-s--pale { background: var(--fond-2); padding-top: 104px; }
.cg-s--pale + .cg-s { padding-top: 104px; }
.cg-s--marque {
  background: var(--marque);
  color: var(--sur-marque);
  padding-top: 104px;
}
.cg-s--marque + .cg-s { padding-top: 104px; }
.cg-s--bandeau { padding: 56px 0; }
.cg-s--plaque { padding-top: 104px; }

/* ---- signes de tete ----------------------------------------- */

.cg-lab {
  margin: 0 0 14px 70px;              /* l indentation de 70 : trait natif */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marque);
  position: relative;
}
.cg-lab::before {                      /* le trait qui comble l indentation */
  content: "";
  position: absolute;
  left: -70px;
  top: .62em;
  width: 54px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.cg-lab--c { margin-left: 0; text-align: center; }
.cg-lab--c::before { display: none; }
.cg-s--marque .cg-lab, .cg-pd .cg-lab { color: var(--sur-marque); opacity: .8; }

.cg-tt {
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.14;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.cg-tt--large { max-width: 16ch; }
.cg-tt--bnd { max-width: 26ch; }
.cg-tt--art { max-width: 28ch; margin-top: 40px; font-size: clamp(24px, 2.4vw, 32px); }
.cg-tt__ac { font-style: normal; color: var(--marque); }
.cg-s--marque .cg-tt__ac { color: var(--sur-marque); opacity: .72; }

.cg-prop { color: var(--texte-doux); font-size: 18px; max-width: 46ch; }
.cg-s--marque .cg-prop { color: var(--sur-marque); opacity: .82; }
.cg-p { margin: 0 0 18px; color: var(--texte-doux); max-width: 68ch; }
.cg-p--fin { font-size: 15px; margin-bottom: 12px; }

.cg-tete { display: flex; flex-wrap: wrap; gap: 28px 60px; margin-bottom: 56px; }
.cg-tete__g { flex: 1 1 46%; min-width: 0; }
.cg-tete__d { flex: 1 1 38%; min-width: 0; align-self: flex-end; }
.cg-tete--axe { flex-direction: column; align-items: center; text-align: center; }
.cg-tete--axe .cg-tete__g,
.cg-tete--axe .cg-tete__d { flex: 0 1 auto; max-width: 700px; }
.cg-tete--axe .cg-tt { max-width: none; }
.cg-tete--axe .cg-prop { max-width: 60ch; }
.cg-tete--axe .cg-lab { margin-left: 0; }
.cg-tete--axe .cg-lab::before { display: none; }

.cg-rang {
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--marque);
  margin: 0 0 14px;
}
.cg-rang span { color: inherit; opacity: .5; }
.cg-s--marque .cg-rang { color: var(--sur-marque); }

.cg-mention { display: block; margin-top: 14px; font-size: 13px; color: var(--texte-doux); }
.cg-mention--c { text-align: center; }
.cg-prix { font-weight: 500; font-size: 26px; margin: 14px 0 0; letter-spacing: -.02em; }
.cg-prix span { font-size: 14px; font-weight: 400; color: var(--texte-doux); margin-left: 6px; }
.cg-prix--gd { font-size: 38px; }

.cg-chv, .cg-flc { flex: none; }
.cg-txlien {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--marque);
}
.cg-pied1 { margin-top: 48px; }

/* ---- appels -------------------------------------------------- */

.cg-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 40px 40px 5px 5px;    /* le pied carre, jusque sur le bouton */
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  max-width: 100%;
}
.cg-bt--clair { background: var(--fond); color: var(--marque); }
.cg-s--marque .cg-bt { background: var(--fond); color: var(--marque); }
.cg-s--marque .cg-bt--clair { background: transparent; color: var(--sur-marque); border: 1px solid currentColor; }
.cg-bt--plein { width: 100%; }

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

.cg-vue {
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
  margin: 0;
}
.cg-vue img { width: 100%; height: 100%; object-fit: cover; }
.cg-vue--nue {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
  color: var(--marque);
  font-size: 44px; font-weight: 500;
}
.cg-vue__tb {
  position: absolute; left: 16px; top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--fond);
  color: var(--texte);
  font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  max-width: calc(100% - 32px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- tete de page -------------------------------------------- */

.cg-hd {
  position: relative;
  z-index: 40;
  padding: 22px 0;
  background: var(--fond);
}
.cg-hd__r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cg-hd__lg {
  order: 1;
  font-weight: 500; font-size: 20px; letter-spacing: -.02em;
  margin-right: auto;
  min-width: 0;
}
.cg-nav { order: 2; min-width: 0; position: relative; }
.cg-hd__bt { order: 3; }
.cg-hd__cle { order: 4; display: none; }
.cg-hd__int { display: none; }

.cg-nav > ul { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.cg-nav__e { position: relative; }
.cg-nav__a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 0;
  font-size: 15px; font-weight: 500;
}
.cg-nav__a:hover { color: var(--marque); }
.cg-nav__a--vol .cg-chv { transition: transform .18s; }

/* Le volet illustre. Le decalage sous le lien est pris en PADDING
   pour qu il n y ait PAS de trou : la souris ne quitte jamais le
   volet en descendant. */
.cg-nav__e--vol { position: static; }   /* le volet s ancre sur la barre, pas sur le lien */
.cg-vol {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  padding-top: 12px;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.cg-vol__in {
  display: flex;
  gap: 26px;
  width: max-content;
  max-width: min(92vw, 900px);
  min-width: 460px;
  padding: 24px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 24px 54px rgba(0, 0, 0, .12);
}
.cg-nav__e--vol:hover > .cg-vol,
.cg-nav__e--vol:focus-within > .cg-vol,
.cg-nav__e--vol[data-ouvert] > .cg-vol {
  visibility: visible; opacity: 1; pointer-events: auto;
}
.cg-nav__e--vol:hover > .cg-nav__a .cg-chv { transform: rotate(180deg); }
.cg-vol__vt { flex: 0 0 236px; min-width: 0; }
.cg-vol__vt .cg-vue--vol { height: 148px; min-height: 0; }
.cg-vol__tt { margin-top: 12px; font-size: 15px; font-weight: 500; }
.cg-vol__tx { font-size: 13px; color: var(--texte-doux); }
.cg-vol__cs { display: flex; gap: 26px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.cg-vol__c { flex: 1 1 160px; min-width: 0; }
.cg-vol__c .cg-lab { margin-left: 0; }
.cg-vol__c .cg-lab::before { display: none; }
.cg-vol__c li + li { margin-top: 9px; }
.cg-vol__c a { font-size: 15px; color: var(--texte-doux); }
.cg-vol__c a:hover { color: var(--marque); }

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

.cg-ari { padding: 18px 0 0; font-size: 13px; color: var(--texte-doux); }
.cg-ari ol { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-ari li { display: inline-flex; align-items: center; gap: 8px; }
.cg-ari i { font-style: normal; opacity: .5; }
.cg-ari a:hover { color: var(--marque); }

/* ---- hero ---------------------------------------------------- */

.cg-hr { padding: 0; position: relative; isolation: isolate; }
.cg-hr .cg-vue--fond {
  position: absolute; inset: 0;
  border-radius: 0;
  z-index: -1;
  min-height: 0;
}
.cg-hr .cg-vue--fond::after {          /* le voile vertical, seul degrade */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .62) 100%);
}
.cg-hr__r { padding: 132px 0 96px; }
.cg-hr__c { max-width: 620px; color: #fff; }
.cg-hr__c .cg-lab { color: #fff; }
.cg-hr__tt {
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
}
.cg-hr__tt .cg-tt__ac { color: #fff; opacity: .7; }
.cg-hr__pr { color: #fff; opacity: .86; margin-top: 22px; }
.cg-hr__ap { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cg-hr__bd {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding: 26px 0 56px;
}
.cg-hr__bd > li {
  flex: 1 1 210px; min-width: 0;
  color: #fff;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.cg-hr__bd b { display: block; font-weight: 500; font-size: 18px; }
.cg-hr__bd span { display: block; font-size: 14px; opacity: .8; }

.cg-hp { padding: 0; position: relative; isolation: isolate; }
.cg-hp .cg-vue--fond {
  position: absolute; inset: 0; border-radius: 0; z-index: -1; min-height: 0;
}
.cg-hp .cg-vue--fond::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .62) 100%);
}
.cg-hp__c {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  padding: 104px 0 84px;
  color: #fff;
}
.cg-hp__c .cg-lab { margin-left: 0; color: #fff; }
.cg-hp__c .cg-lab::before { display: none; }
.cg-hp__tt {
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0;
}
.cg-hp__tt .cg-tt__ac { color: #fff; opacity: .7; }
.cg-hp__c .cg-prop { color: #fff; opacity: .86; margin: 20px auto 0; }
.cg-hp__ap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---- plaque d ouverture (about) ------------------------------ */

.cg-s--plaque { position: relative; }
.cg-vue--bande { height: clamp(260px, 34vw, 460px); margin-bottom: 40px; }
.cg-plq { display: flex; flex-wrap: wrap; gap: 24px 60px; align-items: flex-end; }
.cg-plq__g { flex: 1 1 60%; min-width: 0; }
.cg-plq__d { flex: 0 1 auto; }
.cg-plq__t { margin-top: 34px; columns: 2; column-gap: 60px; }
.cg-plq__t .cg-p { break-inside: avoid; max-width: none; }

/* ---- grille a colonne maitresse ------------------------------ */

.cg-grm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cg-tu {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
  color: inherit;
  isolation: isolate;
}
.cg-tu--maitresse { grid-column: 1 / -1; }
.cg-tu .cg-vue--tuile {
  position: absolute; inset: 0; border-radius: 0; min-height: 0; z-index: -1;
}
.cg-tu .cg-vue--tuile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .72) 100%);
}
.cg-tu__t {
  position: relative;
  padding: 200px 26px 0;
  color: #fff;
}
.cg-tu--maitresse .cg-tu__t { padding-top: 330px; }
.cg-tu__t h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.cg-tu__t p { font-size: 15px; opacity: .84; margin-top: 8px; }
.cg-tu .cg-txlien { display: inline-flex; margin: 14px 26px 26px; color: #fff; }

/* ---- blocs porteurs ------------------------------------------ */

.cg-bl { display: flex; flex-wrap: wrap; gap: 34px 64px; align-items: center; }
.cg-bl + .cg-bl { margin-top: 84px; }
.cg-bl--inverse { flex-direction: row-reverse; }
.cg-bl__t { flex: 1 1 44%; min-width: 0; }
.cg-bl__t .cg-tt { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 18px; }
.cg-vue--bloc { flex: 1 1 42%; min-width: 0; height: clamp(240px, 28vw, 380px); }

/* ---- colonne laterale ---------------------------------------- */

.cg-lat { display: flex; flex-wrap: wrap; gap: 40px 60px; align-items: flex-start; }
.cg-lat__m { flex: 1 1 62%; min-width: 0; }
.cg-lat__m h3 { font-size: 21px; font-weight: 500; margin-top: 28px; }
.cg-lat__a {
  flex: 1 1 290px;
  max-width: 100%;
  min-width: 0;
  padding: 26px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
  position: sticky;
  top: 24px;
}
.cg-lat__a h3 { font-size: 19px; font-weight: 500; margin-bottom: 10px; }
.cg-lat__a .cg-lab { margin-left: 0; }
.cg-lat__a .cg-lab::before { display: none; }
.cg-som li + li { margin-top: 10px; }
.cg-som a { font-size: 15px; color: var(--texte-doux); }
.cg-som a:hover { color: var(--marque); }
.cg-vue--art { height: clamp(220px, 26vw, 360px); margin: 24px 0 28px; }
.cg-art__e {
  margin: 24px 0;
  padding: 22px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
}

/* ---- chiffres en escalier ------------------------------------ */

.cg-ch { display: flex; flex-wrap: wrap; gap: 34px 60px; align-items: center; }
.cg-vue--ch { flex: 1 1 44%; min-width: 0; height: clamp(260px, 30vw, 420px); }
.cg-ch__t { flex: 1 1 42%; min-width: 0; }
.cg-ch__t .cg-tete { margin-bottom: 20px; }
.cg-ch__l { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 20px; }
.cg-ch__u {
  flex: 1 1 190px;
  min-width: 0;
  padding: 22px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
  transform: translateY(calc(var(--cran, 0) * 14px));  /* l escalier */
}
.cg-ch__u b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.03em; }
.cg-ch__u span { display: block; font-size: 14px; color: var(--texte-doux); margin-top: 6px; }

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

.cg-pr { display: flex; flex-wrap: wrap; gap: 40px 60px; align-items: flex-start; }
.cg-pr__t { flex: 1 1 36%; min-width: 0; }
.cg-pr__t .cg-tete { flex-direction: column; margin-bottom: 26px; }
.cg-pr__l { flex: 1 1 52%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cg-et {
  min-width: 0;
  padding: 24px;
  border-radius: 40px 40px 5px 5px;
  background: rgba(255, 255, 255, .1);
}
.cg-et h3 { font-size: 19px; font-weight: 500; }
.cg-et p { font-size: 15px; opacity: .82; margin-top: 8px; }

/* ---- bandeau ------------------------------------------------- */

.cg-bnd { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.cg-bnd__g { flex: 1 1 54%; min-width: 0; }
.cg-bnd__d { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cg-cb { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.cg-cb__ch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-cb__ch label { font-size: 13px; opacity: .85; }
.cg-cb__ch input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond);
  color: var(--texte);
}

/* ---- avis, marques, files ------------------------------------ */

.cg-file {
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 93%, transparent 100%);
  scrollbar-width: none;
}
.cg-file::-webkit-scrollbar { display: none; }
.cg-file__p { display: flex; gap: 20px; padding: 6px 0 10px; }
.cg-av {
  flex: 0 0 340px;
  max-width: 86vw;
  padding: 26px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.cg-av h3 { font-size: 18px; font-weight: 500; margin: 12px 0 8px; }
.cg-av p { font-size: 15px; color: var(--texte-doux); }
.cg-av__p { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.cg-av__i {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.cg-av__n { font-size: 15px; font-weight: 500; min-width: 0; }
.cg-av__n i { display: block; font-style: normal; font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.cg-etl { display: inline-flex; gap: 3px; color: var(--bordure); }
.cg-etl__u.pleine { color: var(--marque); }

.cg-file--mq .cg-file__p { align-items: flex-end; gap: 40px; }
.cg-file--mq li {
  flex: none;
  font-size: 18px; font-weight: 500;
  color: var(--texte-doux);
  padding-bottom: calc(var(--h, 0) * 4px);   /* hauteurs inegales */
  white-space: nowrap;
}
.cg-disq { display: flex; gap: 10px; margin-top: 24px; }
.cg-disq__u {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

/* ---- approche ------------------------------------------------ */

.cg-ap { display: flex; flex-wrap: wrap; gap: 34px 60px; align-items: center; }
.cg-ap__v { flex: 1 1 44%; min-width: 0; position: relative; }
.cg-vue--ap { height: clamp(260px, 30vw, 430px); }
.cg-ap__lb {
  position: absolute; left: 20px; bottom: 20px;
  padding: 12px 18px;
  border-radius: 40px 40px 5px 5px;
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 14px; font-weight: 500;
  max-width: calc(100% - 40px);
}
.cg-ap__t { flex: 1 1 42%; min-width: 0; }
.cg-ap__l { margin: 24px 0; }
.cg-ap__l li { padding: 16px 0; box-shadow: inset 0 1px 0 var(--bordure); }
.cg-ap__l h3 { font-size: 18px; font-weight: 500; }
.cg-ap__l p { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* ---- secteurs, certifications, materiaux --------------------- */

.cg-sec__g, .cg-cf__g, .cg-mt__g { display: grid; gap: 20px; }
.cg-sec__g, .cg-cf__g { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cg-mt__g { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cg-sec {
  min-width: 0;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
}
.cg-vue--sec { height: 190px; border-radius: 0; min-height: 0; }
.cg-sec__t { padding: 22px 22px 0; }
.cg-sec__t h3 { font-size: 19px; font-weight: 500; }
.cg-sec__t p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.cg-sec__l { display: inline-flex; align-items: center; gap: 8px; margin: 14px 22px 22px; font-size: 15px; font-weight: 500; color: var(--marque); }

.cg-cf {
  min-width: 0;
  padding: 26px;
  border-radius: 40px 40px 5px 5px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.cg-cf h3 { font-size: 19px; font-weight: 500; }
.cg-cf p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.cg-cf a { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--marque); }

.cg-mt {
  min-width: 0;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond);
}
.cg-vue--mt { height: 170px; border-radius: 0; min-height: 0; }
.cg-mt__t { padding: 22px; }
.cg-mt__t h3 { font-size: 18px; font-weight: 500; }
.cg-mt__t p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }

/* ---- zones, carte, maillage ---------------------------------- */

.cg-zn { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.cg-zn__u { min-width: 0; }
.cg-zn__u > a, .cg-zn__u > div {
  display: block;
  height: 100%;
  padding: 14px 14px 20px;
  border-radius: 40px 40px 5px 5px;
  box-shadow: inset 0 0 0 1px var(--bordure);
  background: var(--fond);
}
.cg-zn__u > a:hover { box-shadow: inset 0 0 0 1px var(--marque); }
.cg-vue--zn { height: 132px; min-height: 0; margin-bottom: 16px; }
.cg-vue--zn.cg-vue--nue { min-height: 0; font-size: 30px; }
.cg-zn__t { padding: 0 8px; }
.cg-zn__t .cg-lab { margin: 0 0 8px 0; font-size: 11px; }
.cg-zn__t .cg-lab::before { display: none; }
.cg-zn__t b { display: block; font-size: 17px; font-weight: 500; }
.cg-zn__t span { display: block; margin-top: 6px; font-size: 14px; color: var(--texte-doux); }
.cg-zn__u > a:hover .cg-zn__t b { color: var(--marque); }

/* file de jetons courts */
.cg-jt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cg-jt li {
  min-width: 0;
  padding: 8px 15px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--bordure);
  font-size: 13px;
  color: var(--texte-doux);
}
.cg-jt--clair li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--sur-marque); }

.cg-crt { display: flex; flex-wrap: wrap; gap: 34px 60px; align-items: center; }
.cg-crt__t { flex: 1 1 40%; min-width: 0; }
.cg-crt__t .cg-tete { flex-direction: column; margin-bottom: 20px; }
.cg-crt__ad { margin: 18px 0; }
.cg-crt__ad li { padding: 9px 0; box-shadow: inset 0 -1px 0 var(--bordure); font-size: 15px; }
.cg-vue--crt { flex: 1 1 46%; min-width: 0; height: clamp(260px, 30vw, 420px); }

.cg-ml { display: flex; flex-wrap: wrap; gap: 30px; }
.cg-ml__c { flex: 1 1 220px; min-width: 0; }
.cg-ml__c li + li { margin-top: 10px; }
.cg-ml__c a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--texte-doux); }
.cg-ml__c a:hover { color: var(--marque); }

/* les items de maillage peuvent aussi etre des fiches */
.cg-ml__f {
  display: block;
  flex: 1 1 280px;
  min-width: 0;
  padding: 14px 14px 22px;
  border-radius: 40px 40px 5px 5px;
  box-shadow: inset 0 0 0 1px var(--bordure);
  background: var(--fond);
}
.cg-ml__f:hover { box-shadow: inset 0 0 0 1px var(--marque); }
.cg-vue--ml { height: 168px; min-height: 0; margin-bottom: 18px; }
.cg-vue--ml.cg-vue--nue { min-height: 0; font-size: 32px; }
.cg-ml__ft { padding: 0 8px; }
.cg-ml__ft .cg-lab { margin: 0 0 8px 0; font-size: 11px; }
.cg-ml__ft .cg-lab::before { display: none; }
.cg-ml__ft h3 { font-size: 19px; font-weight: 500; }
.cg-ml__ft p { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.cg-ml__f:hover .cg-ml__ft h3 { color: var(--marque); }

/* menus et coulees d appoint */
.cg-p--axe { margin-inline: auto; text-align: center; }
.cg-p--bnd { color: var(--sur-marque); opacity: .88; max-width: 52ch; }
.cg-meta { margin-top: 10px; font-size: 13px; color: var(--texte-doux); }
.cg-lab--fct { margin-left: 0; }
.cg-lab--fct::before { display: none; }
.cg-vue--exp { height: clamp(220px, 26vw, 340px); min-height: 0; margin-top: 34px; }
.cg-vue--et { height: 128px; min-height: 0; margin-bottom: 18px; }
.cg-vue--et.cg-vue--nue { min-height: 0; font-size: 28px; }
.cg-vue--bnd { height: 132px; min-height: 0; margin-top: 22px; max-width: 320px; }
.cg-vue--bnd.cg-vue--nue { min-height: 0; font-size: 28px; }

.cg-pts li { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--bordure); }
.cg-pts b { font-weight: 500; }
.cg-pts span { color: var(--texte-doux); min-width: 0; }
.cg-pts--fin li { padding: 6px 0; font-size: 14px; box-shadow: none; }

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

.cg-fct { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 24px; }
.cg-fct .cg-lab { margin: 0; }
.cg-fct .cg-lab::before { display: none; }
.cg-fct ul { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-fct__u {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.cg-fct__u.actif { background: var(--marque); color: var(--sur-marque); box-shadow: none; }

.cg-pd1__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cg-pd1 {
  min-width: 0;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
}
.cg-vue--pd { height: 210px; border-radius: 0; min-height: 0; }
.cg-pd1__t { padding: 22px; }
.cg-pd1__t h3 { font-size: 19px; font-weight: 500; }
.cg-pd1__t p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.cg-pd1__r { margin: 12px 0; }
.cg-pd1__r li { font-size: 14px; color: var(--texte-doux); padding: 5px 0; }
.cg-pd1__t .cg-bt { margin-top: 16px; }

.cg-fp { display: flex; flex-wrap: wrap; gap: 34px 60px; align-items: flex-start; }
.cg-vue--fp { flex: 1 1 46%; min-width: 0; height: clamp(280px, 32vw, 460px); }
.cg-fp__t { flex: 1 1 40%; min-width: 0; }
.cg-fp__t .cg-bt { margin-top: 20px; margin-right: 10px; }

.cg-sp { display: flex; flex-wrap: wrap; gap: 0 60px; }
.cg-sp__r {
  flex: 1 1 340px; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 14px 0;
  box-shadow: inset 0 -1px 0 var(--bordure);
}
.cg-sp dt { flex: 1 1 45%; min-width: 0; font-weight: 500; }
.cg-sp dd { flex: 1 1 45%; min-width: 0; margin: 0; color: var(--texte-doux); }

/* ---- realisations -------------------------------------------- */

.cg-rl__g { display: flex; flex-wrap: wrap; gap: 20px; }
.cg-rl {
  flex: 1 1 300px; min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  isolation: isolate;
}
.cg-vue--rl { height: 300px; border-radius: 0; min-height: 0; }
.cg-rl--haute .cg-vue--rl { height: 400px; }
.cg-rl::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .74) 100%);
  pointer-events: none;
}
.cg-rl__t { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; z-index: 1; }
.cg-rl__t h3 { font-size: 19px; font-weight: 500; }
.cg-rl__t p { font-size: 14px; opacity: .85; margin-top: 6px; }
.cg-rl__lieu { display: block; font-size: 13px; opacity: .8; margin-top: 6px; }

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

.cg-ab__g { display: flex; flex-wrap: wrap; gap: 34px; }
.cg-ab { flex: 1 1 420px; min-width: 0; }
.cg-ab__v {
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  height: clamp(260px, 30vw, 420px);
  touch-action: none;
}
.cg-ab__f { position: absolute; inset: 0; margin: 0; }
.cg-ab__f .cg-vue { position: absolute; inset: 0; border-radius: 0; min-height: 0; height: 100%; }
.cg-ab__f--b { clip-path: inset(0 0 0 var(--pos, 50%)); }
.cg-ab__f figcaption {
  position: absolute; top: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12px;
  max-width: calc(50% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  z-index: 2;
}
.cg-ab__f--a figcaption { left: 16px; }
.cg-ab__f--b figcaption { right: 16px; }
.cg-ab__ax {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  z-index: 3;
  pointer-events: none;
}
.cg-ab__lb {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.cg-ab__r {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.cg-ab__r:focus-visible { opacity: .001; outline: 2px solid var(--marque); }
.cg-ab__t { margin-top: 18px; }
.cg-ab__t h3 { font-size: 19px; font-weight: 500; }
.cg-ab__t p { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* ---- tarifs, aides ------------------------------------------- */

.cg-tf__g { display: flex; flex-wrap: wrap; gap: 20px; }
.cg-tf {
  flex: 1 1 290px; min-width: 0;
  padding: 28px;
  border-radius: 40px 40px 5px 5px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.cg-tf--tete { background: var(--fond-2); box-shadow: none; }
.cg-tf h3 { font-size: 20px; font-weight: 500; }
.cg-tf p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }
.cg-tf__i { margin: 18px 0; }
.cg-tf__i li { font-size: 14px; padding: 7px 0; box-shadow: inset 0 -1px 0 var(--bordure); }

.cg-ad__l { display: flex; flex-wrap: wrap; gap: 26px; }
.cg-ad { flex: 1 1 300px; min-width: 0; padding-top: 18px; box-shadow: inset 0 1px 0 var(--bordure); }
.cg-ad h3 { font-size: 18px; font-weight: 500; }
.cg-ad p { font-size: 15px; color: var(--texte-doux); margin-top: 8px; }

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

.cg-fq { display: flex; flex-wrap: wrap-reverse; gap: 34px 60px; align-items: flex-start; }
.cg-fq__l { flex: 1 1 56%; min-width: 0; }
.cg-fq__e {
  flex: 1 1 290px; min-width: 0;
  padding: 26px;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
}
.cg-fq__e h3 { font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.cg-fq__e p { font-size: 15px; color: var(--texte-doux); margin-bottom: 16px; }
.cg-fq__u { padding: 18px 0; box-shadow: inset 0 -1px 0 var(--bordure); }
.cg-fq__u summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  font-size: 17px; font-weight: 500;
  list-style: none;
}
.cg-fq__u summary::-webkit-details-marker { display: none; }
.cg-fq__u[open] summary .cg-chv { transform: rotate(180deg); }
.cg-fq__r { padding-top: 12px; }
.cg-fq__r .cg-p { font-size: 15px; margin-bottom: 10px; }

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

.cg-cf1 {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  max-width: 570px;
  margin-inline: auto;
}
.cg-cf1__ch { min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cg-cf1__ch--long { grid-column: 1 / -1; }
.cg-cf1__ch label { font-size: 13px; color: var(--texte-doux); }
.cg-cf1__ch input, .cg-cf1__ch textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 0;
  border-radius: 40px 40px 5px 5px;
  background: var(--fond-2);
  color: var(--texte);
  resize: vertical;
}
.cg-cf1 .cg-bt--plein { grid-column: 1 / -1; }
.cg-cf1__ap { grid-column: 1 / -1; margin-top: -4px; }
.cg-cf1 .cg-mention { grid-column: 1 / -1; text-align: center; }
.cg-cf1__cs { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin-top: 48px; text-align: center; }
.cg-cf1__co { flex: 1 1 230px; min-width: 0; }
.cg-cf1__co .cg-lab { margin-left: 0; }
.cg-cf1__co .cg-lab::before { display: none; }
.cg-cf1__co li { font-size: 15px; padding: 4px 0; }

/* ---- journal ------------------------------------------------- */

.cg-bg__g { display: flex; flex-wrap: wrap; gap: 20px; }
.cg-bg {
  flex: 1 1 300px; min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 5px 5px;
  aspect-ratio: 1 / 1;                 /* la carte CARREE de la fiche */
  color: #fff;
  isolation: isolate;
}
.cg-bg .cg-vue--bg { position: absolute; inset: 0; border-radius: 0; min-height: 0; height: 100%; z-index: -1; }
.cg-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .76) 100%);
  pointer-events: none;
}
.cg-bg__dt {
  position: absolute; top: 18px; left: 20px;
  font-size: 13px;
  z-index: 1;
  max-width: calc(100% - 40px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-bg__t { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
.cg-bg__t h3 { font-size: 19px; font-weight: 500; }
.cg-bg__t p { font-size: 14px; opacity: .84; margin-top: 6px; }

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

.cg-lg { max-width: 820px; }
.cg-lg__b + .cg-lg__b { margin-top: 30px; }

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

.cg-pd {
  background: var(--marque);
  color: var(--sur-marque);
  padding: 84px 0 34px;
  margin-top: 104px;
}
.cg-s--marque + .cg-pd { margin-top: 0; }
.cg-pd__h { display: flex; flex-wrap: wrap; gap: 40px 60px; }
.cg-pd__g { flex: 1 1 320px; min-width: 0; }
.cg-pd__mq { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.cg-pd__tx { font-size: 15px; opacity: .82; margin-top: 12px; max-width: 42ch; }
.cg-pd__nap { margin-top: 24px; }
.cg-pd__nap li { font-size: 15px; opacity: .86; padding: 4px 0; }
.cg-pd__cs { flex: 1 1 46%; min-width: 0; display: flex; flex-wrap: wrap; gap: 30px; }
.cg-pd__c { flex: 1 1 180px; min-width: 0; }
.cg-pd__c li + li { margin-top: 9px; }
.cg-pd__c a { font-size: 15px; opacity: .84; }
.cg-pd__c a:hover { opacity: 1; }
.cg-pd__b {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  margin-top: 54px; padding-top: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  font-size: 13px; opacity: .82;
}
.cg-pd__b p { min-width: 0; }
.cg-pd__ls { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---- tablette ------------------------------------------------ */

@media (max-width: 1100px) {
  .cg-grm { grid-template-columns: 1fr; }
  .cg-tu__t, .cg-tu--maitresse .cg-tu__t { padding-top: 220px; }
  .cg-plq__t { columns: 1; }
}

/* ---- telephone : la commande devient un camembert ------------ */

@media (max-width: 900px) {
  .cg-s { padding: 64px 0; }
  .cg-s--pale, .cg-s--marque, .cg-s--plaque { padding-top: 64px; }
  .cg-s--pale + .cg-s, .cg-s--marque + .cg-s { padding-top: 64px; }
  .cg-s--bandeau { padding: 40px 0; }

  .cg-hd__cle {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    padding: 0 11px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--bordure);
    cursor: pointer;
  }
  .cg-hd__cle span { display: block; height: 2px; background: var(--texte); border-radius: 2px; }
  .cg-hd__bt { order: 2; }

  .cg-nav {
    order: 5;
    flex: 1 1 100%;
    display: none;
    padding-top: 14px;
  }
  .cg-hd__int:checked ~ .cg-nav { display: block; }
  .cg-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cg-nav__e { box-shadow: inset 0 -1px 0 var(--bordure); }
  .cg-nav__a { padding: 14px 0; justify-content: space-between; width: 100%; }

  .cg-nav__e--vol { position: relative; }
  .cg-vol {
    position: static;
    right: auto;
    padding-top: 0;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: none;
  }
  .cg-nav__e--vol[data-ouvert] > .cg-vol { display: block; }
  .cg-vol__in {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0 0 18px;
    flex-direction: column;
    gap: 16px;
    box-shadow: none;
  }
  .cg-vol__vt { flex: 1 1 auto; }
  .cg-vol__vt .cg-vue--vol { height: 130px; }

  .cg-hr__r { padding: 74px 0 56px; }
  .cg-hp__c { padding: 68px 0 56px; }
  .cg-bl + .cg-bl { margin-top: 48px; }
  .cg-bl, .cg-bl--inverse { flex-direction: column; align-items: stretch; }
  .cg-lat__a { position: static; }
  .cg-ch__u { transform: none; }
  .cg-pr__l { grid-template-columns: 1fr; }
  .cg-bnd__d { flex: 1 1 100%; }
  .cg-av { flex: 0 0 280px; }
  .cg-pd { padding-top: 56px; margin-top: 64px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .cg-cadre { width: calc(100% - 32px); }
  .cg-hr__bd > li { flex: 1 1 100%; }
  .cg-bg { aspect-ratio: 4 / 3; }
  .cg-vue--bloc, .cg-vue--ch, .cg-vue--crt, .cg-vue--ap, .cg-vue--fp { height: 230px; }
  .cg-sp dt, .cg-sp dd { flex: 1 1 100%; }
  .cg-cf1 { grid-template-columns: minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* >>> 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-08-25 sur 13 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. */
[data-slot="cg-vue--bg"]: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="cg-vue--bg"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="cg-vue--fond"]: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="cg-vue--fond"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="cg-vue--rl"]: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="cg-vue--rl"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="cg-vue--tuile"]: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="cg-vue--tuile"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< 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)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}