/* ============================================================
   TEMPLATE-12 (primefix) — feuille SOURCE. dist/ est une sortie.

   Trois partis pris tenus de bout en bout :
   - un seul rayon de cadre, 20, et une seule pilule, 100 ;
   - aucune surface n est un aplat : tout fond clair est un degrade
     beige vers blanc, arrete a 61.87% comme sur la fiche source ;
   - l accent orange n est jamais un appel de page. Il ne colore
     que les boutons d ENVOI (lettre d information, contact).
   ============================================================ */

:root {
  --r: 20px;                       /* rayon de cadre, constant */
  --r-c: 16px;                     /* rayon de carte */
  --pil: 100px;                    /* pilule */
  --cadre: 1360px;                 /* cadre exterieur */
  --interne: 1320px;               /* cadre interieur */
  --marge: 40px;
  --marge-i: 30px;
  --gout: 24px;
  --air: 104px;                    /* respiration entre deux zones */
  --nappe: 0 -1px 68px rgba(0, 0, 0, .1);   /* nappe MONTANTE */
  --pose: 0 4px 20px rgba(0, 0, 0, .15);    /* volet et flottants */
  --beige: color-mix(in srgb, var(--fond-2) 100%, transparent);
  /* L echelle de fondu : huit paliers de 12.5%, la meme partout. */
  --fondu: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, .125) 1.5%, rgba(0, 0, 0, .25) 3%,
    rgba(0, 0, 0, .375) 4%, rgba(0, 0, 0, .5) 5%, rgba(0, 0, 0, .625) 6%,
    rgba(0, 0, 0, .75) 7%, rgba(0, 0, 0, .875) 8%, rgb(0, 0, 0) 9%,
    rgb(0, 0, 0) 91%, rgba(0, 0, 0, .875) 92%, rgba(0, 0, 0, .75) 93%,
    rgba(0, 0, 0, .625) 94%, rgba(0, 0, 0, .5) 95%, rgba(0, 0, 0, .375) 96%,
    rgba(0, 0, 0, .25) 97%, rgba(0, 0, 0, .125) 98.5%, transparent 100%);
  /* La coulee claire : jamais un aplat. */
  --coulee: linear-gradient(180deg, var(--fond-2) 0%, var(--fond) 61.8687%);
  --coulee-h: linear-gradient(96deg, var(--fond-2) 0%, var(--fond) 61.8687%);
}

* { box-sizing: border-box; min-width: 0; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.6 'Instrument Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

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

/* ---- Les deux cadres emboites ------------------------------- */

.cad { width: 100%; max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); }
.int { width: 100%; max-width: var(--interne); margin-inline: auto; padding-inline: var(--marge-i); }
.int--centre { text-align: center; }
.int--centre .acts { justify-content: center; }

.zn { padding-block: var(--air); position: relative; }
.zn + .zn { padding-top: 0; }
main > .zn:first-child { padding-top: 56px; }

/* ---- Titres et textes --------------------------------------- */

.ti {
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(30px, 3.4vw, 48px); text-wrap: balance;
}
.ti--geant { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.08; }
.ti--sobre { font-size: clamp(24px, 2.4vw, 32px); }
.sgn { font-style: normal; position: relative; white-space: nowrap; }
.sgn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .1em;
  background: var(--accent); border-radius: var(--pil); opacity: .55;
}

.lb {
  display: inline-block; margin-bottom: 14px; padding: 7px 16px;
  /* Pilule a coin repris en bas a gauche : le petit ecart d avec la
     pilule parfaite est ce qui distingue l etiquette de la fiche. */
  border-radius: var(--pil) var(--pil) var(--pil) 6px;
  background: var(--coulee-h);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux);
}
.ch { margin-top: 16px; color: var(--texte-doux); font-size: 18px; max-width: 62ch; }
.ch--large { margin-inline: auto; font-size: clamp(17px, 1.4vw, 20px); }
.pr { margin-top: 14px; color: var(--texte-doux); }
.pr:first-child { margin-top: 0; }
.mnt { margin-top: 18px; font-size: 14px; color: var(--texte-doux); }

.pts { margin-top: 16px; display: grid; gap: 9px; }
.pts li { position: relative; padding-left: 26px; color: var(--texte-doux); font-size: 16px; }
.pts li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px;
  border-radius: var(--pil); background: var(--accent);
}

.tgs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tgs span {
  padding: 6px 14px; border-radius: var(--pil); font-size: 13px;
  background: var(--coulee-h); color: var(--texte-doux);
}
.tgs--clair span { background: color-mix(in srgb, var(--sur-marque) 14%, transparent); color:var(--sur-bande,var(--sur-marque)); }

.tte { max-width: 720px; margin-bottom: 44px; }
.tte--centre { margin-inline: auto; text-align: center; }
.tte--droite { margin-left: auto; text-align: right; }
.tte--droite .ch { margin-left: auto; }
.tte--droite .acts { justify-content: flex-end; }

/* ---- Vues ---------------------------------------------------- */

.vu { width: 100%; border-radius: var(--r); object-fit: cover; background: var(--fond-2); }
.vu--nue {
  display: grid; place-items: center; min-height: 200px; padding: 20px;
  background: var(--coulee); border-radius: var(--r);
}
.vu--nue i { font-style: normal; font-size: 13px; color: var(--texte-doux); text-align: center; }
.vu--haute { aspect-ratio: 4 / 3; }
.vu--rond { border-radius: var(--pil); aspect-ratio: 1; }

/* ---- Appels -------------------------------------------------- */

.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.bt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 28px; border: 0; border-radius: var(--pil);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.bt b { width: 7px; height: 7px; border-radius: var(--pil); background: currentColor; opacity: .55; }
.bt:hover { transform: translateY(-2px); }
.bt--encre { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
/* Bordure REELLE (jamais un box-shadow) : la porte creuse doit exister pour
   une mesure qui ne lit que backgroundColor / borderTopWidth (regle 7). */
.bt--trait { background: transparent; color: var(--texte); border: 1.5px solid var(--bordure); }
.bt--clair { background: var(--sur-marque); color:var(--encre-marque,var(--marque)); }
.bt--sm { padding: 12px 22px; font-size: 15px; }
/* L unique emploi de l accent en surface. */
.bt--envoi { background: var(--accent); color: var(--fond); }
.bt--pleine { width: 100%; justify-content: center; }
.acts--centre { justify-content: center; }

/* ---- Rails defilants ---------------------------------------- */

.rail {
  margin-block: 32px; overflow: hidden;
  -webkit-mask-image: var(--fondu); mask-image: var(--fondu);
}
.rail__f { display: flex; gap: var(--gout); padding-inline: var(--marge); width: max-content; }
.rail--frise .frz__i { margin: 0; }
.frz__i .vu { height: 380px; border-radius: var(--r); }
.frz__i--large .vu { width: 518px; }
.frz__i--etroit .vu { width: 360px; }
.frz__i .vu--nue { display: grid; }

.rail--marques .mrq__i {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px;
  border-radius: var(--pil); background: var(--coulee-h); white-space: nowrap;
  color: var(--texte-doux); font-weight: 600;
}
.rail--marques .vu { width: 34px; height: 34px; border-radius: var(--pil); }
.mrq__t { text-align: center; color: var(--texte-doux); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.zn--marques { padding-block: 56px; }

.rail--mat .mat { width: 320px; }
.rail--art .art { width: 520px; }
/* Ces deux rails ne bouclent pas : leur file n est pas doublee, on
   la fait donc defiler au doigt plutot qu en boucle automatique. */
.rail--mat, .rail--art { overflow-x: auto; scrollbar-width: thin; }
.rail--mat .rail__f, .rail--art .rail__f { padding-bottom: 8px; }

/* ---- Entete -------------------------------------------------- */

.ent { position: sticky; top: 0; z-index: 60; background: var(--fond); }
.ent__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px; height: 88px;
  border-bottom: 1px solid var(--bordure);
}
.ent__m { font-size: 21px; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
/* La paire de la regle 7 (appel + devis) : deux portes cote a cote, jamais
   sacrifiees au repli — elles changent de rangee, cf. media 900px. */
.ent__d { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.men > ul { display: flex; align-items: center; gap: 4px; }
.men__i { position: relative; }
.men__l {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px;
  border-radius: var(--pil); text-decoration: none; font-weight: 500; font-size: 16px;
}
.men__l:hover { background: var(--fond-2); }
/* Chevron bas : tout lien a volet le porte. */
.men__ch {
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.men__i--v:hover .men__ch, .men__i--v:focus-within .men__ch { transform: rotate(225deg) translate(-1px, -1px); }

/* Le volet : il s ouvre SOUS le lien, sans interstice — le pont de
   14px est pris dans le padding, jamais dans une marge, sinon la
   souris traverse un vide et le panneau se referme. */
.vlt {
  /* Le pont de survol est pris dans le PADDING, jamais dans une marge,
     et le volet remonte d un pixel pour qu aucun interstice ne s ouvre
     quand la hauteur du lien tombe sur une fraction. */
  position: absolute; top: calc(100% - 1px); left: 0; z-index: 70;
  padding-top: 14px; min-width: 640px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.men__i--v:hover .vlt, .men__i--v:focus-within .vlt, .vlt:hover { opacity: 1; visibility: visible; transform: none; }
.vlt__in {
  display: flex; gap: 28px; padding: 26px; border-radius: var(--r);
  background: var(--fond); box-shadow: var(--pose); border: 1px solid var(--bordure);
}
.vlt__c { display: grid; gap: 6px; align-content: start; min-width: 180px; }
.vlt__t { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); }
.vlt__c a { padding: 8px 10px; border-radius: 12px; text-decoration: none; font-size: 15px; }
.vlt__c a:hover { background: var(--fond-2); }
/* La vitrine : cadre toujours rendu, sinon le volet retombe a une colonne de liens. */
.vlt__v {
  flex: 0 0 260px; padding: 16px; border-radius: var(--r-c); background: var(--coulee);
}
.vlt__v .vu { height: 132px; border-radius: 12px; }
.vlt__v .vu--nue { min-height: 132px; }
.vlt__vt { margin-top: 12px; font-weight: 600; }
.vlt__vx { margin-top: 4px; font-size: 14px; color: var(--texte-doux); }

.brg { display: none; flex-direction: column; gap: 5px; padding: 12px; background: none; border: 0; cursor: pointer; }
.brg i { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---- Fil d ariane -------------------------------------------- */

.fil { padding-block: 22px 0; }
.fil ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.fil li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ---- Hero ---------------------------------------------------- */

.zn--hero { padding-top: 52px; position: relative; }
/* La nappe : une remontee beige derriere le hero, jamais un aplat de
   section — la fiche source ne peint aucune bande pleine largeur. */
.zn--hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: var(--coulee); z-index: -1;
}
.zn--hero .acts { margin-top: 32px; }
.hro__a {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin-top: 8px;
}
.hro__a li {
  padding: 26px; border-radius: var(--r); background: var(--coulee);
}
.hro__a b { display: block; font-size: 18px; font-weight: 600; }
.hro__a span { display: block; margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* ---- Intro et panneau lateral -------------------------------- */

.itr { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.itr__t { flex: 1 1 520px; }
/* Le panneau beige des pages internes. */
.pnl {
  flex: 0 1 380px; padding: 24px; border-radius: var(--r-c);
  background: var(--coulee); position: relative;
}
.pnl__x { margin-top: 16px; color: var(--texte-doux); font-size: 15px; }
.pnl .vu { border-radius: 12px; }

/* ---- Blocs de texte long ------------------------------------- */

.bsq { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.bsq + .bsq { margin-top: 88px; }
.bsq--inv { flex-direction: row-reverse; }
.bsq__t { flex: 1 1 460px; }
.bsq__v { flex: 1 1 420px; }
.bsq__v .vu { aspect-ratio: 4 / 3; }

/* ---- Expertise ----------------------------------------------- */

.xpr { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.xpr__v { flex: 1 1 420px; }
.xpr__v .vu { aspect-ratio: 1 / 1; }
.xpr__t { flex: 1 1 460px; }
.xpr__p { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bordure); }
.xpr__p b { display: block; font-weight: 600; }
.xpr__p span { display: block; margin-top: 6px; color: var(--texte-doux); font-size: 15px; }

/* ---- whyUs : tete a DROITE ----------------------------------- */

.wy { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; }
.wy__v { flex: 1 1 420px; }
.wy__v .vu { aspect-ratio: 5 / 4; }
.wy__t { flex: 1 1 420px; }
.wy__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin-top: 56px; }
.wy__c { padding-top: 22px; border-top: 2px solid var(--texte); }
.wy__c b { font-size: 18px; font-weight: 600; }
.wy__c p { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }

/* ---- Services : cartes SANS FOND ----------------------------- */

.svc__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gout); }
.svc { background: none; }
.svc__v { display: block; position: relative; }
/* Les cartes de service n ont pas de fond : le seul signe de carte est
   ce repere pose dans l angle de la vue. */
.svc__v::after {
  content: ''; position: absolute; right: 14px; top: 14px; width: 34px; height: 34px;
  border-radius: var(--pil) var(--pil) 6px var(--pil); background: var(--fond); opacity: .92;
}
.svc__v .vu { height: 246px; border-radius: var(--r-c); }
.svc__v .vu--nue { min-height: 246px; }
.svc__t { margin-top: 18px; font-size: 21px; font-weight: 600; }
.svc__t a { text-decoration: none; }
.svc__t a:hover { text-decoration: underline; }
.svc__x { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.svc__p {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bordure);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.svc__p i { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.svc__p b { font-size: 19px; font-weight: 600; }
.svc__l { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--accent); }

/* ---- Process : disques et connecteurs ------------------------ */

.etp__f { display: flex; flex-wrap: wrap; gap: 40px var(--gout); }
.etp { flex: 1 1 260px; text-align: center; position: relative; }
.etp__d {
  position: relative; width: 172px; height: 172px; margin: 0 auto 22px;
  border-radius: var(--pil); background: var(--coulee); display: grid; place-items: center;
  overflow: hidden;
}
.etp__d > span {
  position: relative; z-index: 2; font-size: 34px; font-weight: 700; letter-spacing: -.03em;
}
.etp__d .vu { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; }
/* Le connecteur : un trait pose entre deux disques, jamais une bordure. */
.etp + .etp::before {
  content: ''; position: absolute; top: 86px; left: calc(-1 * var(--gout) / 2 - 62px);
  width: 124px; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--bordure) 0 10px, transparent 10px 18px);
}
.etp__t { font-size: 20px; font-weight: 600; }
.etp__x { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.etp .pts { text-align: left; display: inline-grid; }

/* ---- Chiffres ------------------------------------------------ */

.chf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); }
.chf__i { padding: 30px; border-radius: var(--r); background: var(--coulee); }
.chf__i dt { font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; }
.chf__i dd { margin: 8px 0 0; color: var(--texte-doux); font-size: 15px; }

/* ---- Avis en ESCALIER ---------------------------------------- */

.avi__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); align-items: flex-start; }
.avi {
  padding: 28px; border-radius: var(--r); background: var(--coulee);
  box-shadow: var(--nappe); margin-top: calc(var(--rang, 0) * 42px);
}
.avi__n { display: flex; gap: 4px; }
.avi__n i { width: 13px; height: 13px; border-radius: var(--pil); background: var(--accent); }
.avi__t { margin-top: 14px; font-weight: 600; }
.avi blockquote { margin-top: 10px; color: var(--texte-doux); }
.avi figcaption { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.avi__j {
  width: 42px; height: 42px; border-radius: var(--pil); display: grid; place-items: center;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); font-weight: 700;
}
.avi figcaption b { font-weight: 600; }
.avi figcaption span { font-size: 14px; color: var(--texte-doux); }

/* ---- Secteurs ------------------------------------------------ */

.sct__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); }
.sct { border-radius: var(--r); overflow: hidden; background: var(--coulee); }
.sct .vu { height: 210px; border-radius: 0; }
.sct .vu--nue { min-height: 210px; border-radius: 0; }
.sct__t { padding: 24px; }
.sct__t h3 { margin-top: 10px; font-size: 20px; font-weight: 600; }
.sct__t p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* ---- Zones ---------------------------------------------------- */

.zna__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); }
.zna__i {
  padding: 16px; border-radius: var(--r); background: var(--coulee);
  text-decoration: none; display: block;
}
.zna__i .vu { height: 148px; border-radius: 12px; }
.zna__i .vu--nue { min-height: 148px; }
.zna__i b { display: block; margin-top: 14px; font-weight: 600; }
.zna__i span { display: block; margin-top: 4px; font-size: 14px; color: var(--texte-doux); }
.zna__i:hover { box-shadow: var(--nappe); }

/* ---- Ultralocal ---------------------------------------------- */

.ulm { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.ulm__t { flex: 1 1 360px; }
.ulm__v { flex: 1 1 520px; }
.ulm__v .vu { aspect-ratio: 16 / 10; }
.ulm__a { margin-top: 18px; font-style: normal; display: grid; gap: 4px; color: var(--texte-doux); }

/* ---- FAQ ------------------------------------------------------ */

.faq { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.faq__t { flex: 1 1 340px; }
.faq__l { flex: 1 1 520px; }
.faq__e { margin-top: 28px; padding: 24px; border-radius: var(--r-c); background: var(--coulee); }
.faq__e b { font-weight: 600; }
.faq__e p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.faq__e .bt { margin-top: 16px; }
.faq__i { border-bottom: 1px solid var(--bordure); }
.faq__i summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 0;
  cursor: pointer; font-size: 18px; font-weight: 600; list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary span { flex: 1 1 auto; }
.faq__i summary i {
  flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px);
}
.faq__i[open] summary i { transform: rotate(225deg) translate(-2px, -2px); }
.faq__r { padding-bottom: 22px; }

/* ---- Urgence -------------------------------------------------- */

.urg {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
  padding: 40px; border-radius: var(--r); background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.urg__t { flex: 1 1 460px; }
.urg .pr { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.urg .lb { background: color-mix(in srgb, var(--sur-marque) 16%, transparent); color:var(--sur-bande,var(--sur-marque)); }

/* ---- Certifications ------------------------------------------ */

.crt { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.crt__t { flex: 1 1 400px; }
.crt__g { flex: 1 1 420px; display: grid; gap: 14px; }
.crt__i { padding: 20px 22px; border-radius: var(--r-c); background: var(--coulee); }
.crt__i b { font-weight: 600; }
.crt__i span { display: block; margin-top: 6px; color: var(--texte-doux); font-size: 15px; }

/* ---- Aides ---------------------------------------------------- */

.ade__g { display: flex; flex-wrap: wrap; gap: var(--gout); }
.ade { flex: 1 1 280px; padding: 26px; border-radius: var(--r); background: var(--coulee); }
.ade h3 { font-size: 19px; font-weight: 600; }
.ade p { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.ade__c { font-size: 13px; opacity: .85; }

/* ---- Materiaux ------------------------------------------------ */

.mat .mat__v .vu { height: 260px; border-radius: var(--r); }
.mat .vu--nue { min-height: 260px; }
.mat figcaption { margin-top: 14px; }
.mat figcaption b { font-weight: 600; }
.mat figcaption span { display: block; margin-top: 6px; color: var(--texte-doux); font-size: 15px; }

/* ---- Tarifs --------------------------------------------------- */

.trf__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); }
.trf { padding: 30px; border-radius: var(--r); background: var(--coulee); }
.trf h3 { font-size: 21px; font-weight: 600; }
.trf__x { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.trf__p { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trf__p i { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.trf__p b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.trf__p span { font-size: 14px; color: var(--texte-doux); }
.trf .bt { margin-top: 20px; }

/* ---- Realisations --------------------------------------------- */

.rea__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px var(--gout); }
.rea .vu { aspect-ratio: 4 / 3; }
.rea figcaption { margin-top: 16px; }
.rea figcaption b { font-size: 19px; font-weight: 600; }
.rea__m { display: block; margin-top: 4px; font-size: 13px; color: var(--accent); font-weight: 600; }
.rea figcaption p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* ---- Avant / apres -------------------------------------------- */

.ab__g { display: flex; flex-wrap: wrap; gap: 40px var(--gout); }
.ab { flex: 1 1 420px; }
.ab__c {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--fond-2); touch-action: pan-y;
}
.ab__f { position: absolute; inset: 0; }
.ab__f .vu { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.ab__f .vu--nue { height: 100%; border-radius: 0; }
.ab__f--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__e {
  position: absolute; bottom: 16px; z-index: 3; padding: 7px 14px; border-radius: var(--pil);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.ab__e--g { left: 16px; }
.ab__e--d { right: 16px; }
.ab__b {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 3px; margin-left: -1.5px; background: var(--fond); pointer-events: none;
}
.ab__b::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: var(--pil); background: var(--fond);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.ab__i {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
/* Poignee FINE (7 sept 2026) : une poignee de 46px decale la valeur du pointeur sur une piste
   etroite (a 360 : 80 % du bloc -> 86 %), la piste entiere reste saisissable (l input couvre le
   cadre). data-ab est porte par la zone d image, pas par la figure avec sa legende. */
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; }
.ab__i::-moz-range-thumb { width: 2px; height: 240px; border: 0; background: transparent; }
.ab__i:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ab figcaption { margin-top: 18px; }
.ab figcaption b { font-size: 19px; font-weight: 600; }
.ab figcaption p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* ---- Maillage -------------------------------------------------- */

.mai__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); }
.mai__i {
  padding: 22px; border-radius: var(--r); background: var(--coulee);
  text-decoration: none; display: block;
}
.mai__i .vu { height: 168px; border-radius: 12px; }
.mai__i .vu--nue { min-height: 168px; }
.mai__i b { display: block; margin-top: 16px; font-size: 18px; font-weight: 600; }
.mai__m { display: block; margin-top: 4px; font-size: 13px; color: var(--accent); font-weight: 600; }
.mai__x { display: block; margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.mai__i:hover { box-shadow: var(--nappe); }

/* ---- Bandeau d appel : ancrage a GAUCHE ------------------------ */

.cbn {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  padding: 44px; border-radius: var(--r); background: var(--coulee); box-shadow: var(--nappe);
}
.cbn__t { flex: 1 1 460px; }
.cbn__v { flex: 1 1 380px; }
.cbn__v .vu { aspect-ratio: 16 / 10; }
.cbn__f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 26px; }
.cbn__ch { display: block; }
.cbn__ch--large { grid-column: 1 / -1; }
.cbn__ch span { display: block; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.cbn__ch input {
  width: 100%; margin-top: 6px; padding: 12px 2px; border: 0;
  border-bottom: 1px solid var(--bordure); background: transparent;
}
.cbn__ch input:focus { outline: 0; border-bottom-color: var(--accent); }
/* Regle 7 : la porte d appel se tient au meme pied que le bouton d envoi,
   jamais ailleurs sur la page. */
.cbn__pied { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Contact : champs en LIGNES -------------------------------- */

.ctc { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.ctc__t { flex: 1 1 380px; }
.frm { flex: 1 1 480px; }
.frm__l { display: block; margin-bottom: 26px; }
.frm__l span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.frm__l input, .frm__l textarea {
  width: 100%; margin-top: 8px; padding: 12px 2px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--bordure); background: transparent; resize: vertical;
}
.frm__l input:focus, .frm__l textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.frm__pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.frm__m { margin-top: 14px; font-size: 13px; color: var(--texte-doux); }
.crd { margin-top: 32px; display: grid; gap: 18px; }
.crd__i { padding: 20px; border-radius: var(--r-c); background: var(--coulee); }
.crd__t { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.crd__i span { display: block; margin-top: 6px; }

/* ---- Journal --------------------------------------------------- */

.art { display: block; }
.art__v .vu { height: 300px; border-radius: var(--r); }
.art__v .vu--nue { min-height: 300px; }
.art__m { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--accent); }
.art h3 { margin-top: 8px; font-size: 22px; font-weight: 600; }
.art h3 a { text-decoration: none; }
.art h3 a:hover { text-decoration: underline; }
.art p { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }

.pst__v { margin-bottom: 40px; }
.pst__v .vu { aspect-ratio: 21 / 9; }
.pst { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.som {
  flex: 0 1 300px; position: sticky; top: 112px;
  padding: 24px; border-radius: var(--r-c); background: var(--coulee);
}
.som__t { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.som ol { margin-top: 12px; display: grid; gap: 8px; counter-reset: s; }
.som li { counter-increment: s; }
.som li::before { content: counter(s, decimal-leading-zero) ' '; color: var(--accent); font-weight: 600; font-size: 13px; }
.som a { font-size: 15px; text-decoration: none; }
.som a:hover { text-decoration: underline; }
.pst__c { flex: 1 1 560px; }
.pst__c h2 { margin-top: 40px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.pst__c h3 { margin-top: 28px; font-size: 22px; font-weight: 600; }
.ncd { margin-top: 28px; padding: 24px; border-radius: var(--r-c); background: var(--coulee); }
.ncd b { font-weight: 600; }

/* ---- Mentions --------------------------------------------------- */

.lgl { max-width: 820px; }
.lgl__b + .lgl__b { margin-top: 36px; }
.lgl__b h2 { font-size: 24px; font-weight: 600; }

/* ---- Facettes ---------------------------------------------------- */

.fct { padding-block: 28px 0; }
.fct__t { margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.fct ul { display: flex; flex-wrap: wrap; gap: 10px; }
.fct__i {
  display: inline-block; padding: 10px 20px; border-radius: var(--pil);
  background: var(--coulee-h); text-decoration: none; font-size: 15px; font-weight: 500;
}
.fct__i--on { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

/* ---- Produits ----------------------------------------------------- */

.prd__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gout); }
.prd__v .vu { height: 260px; border-radius: var(--r-c); }
.prd__v .vu--nue { min-height: 260px; }
.prd h3 { margin-top: 16px; font-size: 20px; font-weight: 600; }
.prd h3 a { text-decoration: none; }
.prd__x { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.prd__p { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prd__p i { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.prd__p b { font-size: 24px; font-weight: 700; }
.prd__p span { font-size: 14px; color: var(--texte-doux); }
.prd .bt { margin-top: 16px; }

.fch { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.fch__v { flex: 1 1 460px; }
.fch__v .vu { aspect-ratio: 1 / 1; }
.fch__t { flex: 1 1 400px; }
.fch__p { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fch__p i { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.fch__p b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.fch__p span { font-size: 15px; color: var(--texte-doux); }

.spc { display: flex; flex-wrap: wrap; gap: 14px var(--gout); }
.spc__i {
  flex: 1 1 260px; display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: var(--r-c); background: var(--coulee);
}
.spc__i dt { color: var(--texte-doux); font-size: 15px; }
.spc__i dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- Pied ---------------------------------------------------------- */

.pd { margin-top: var(--air); padding-block: 64px; background: var(--coulee); position: relative; }
.pd::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 96px; height: 4px;
  margin-left: -48px; border-radius: 0 0 var(--pil) var(--pil); background: var(--accent);
}
.pd__h { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
.pd__m { flex: 1 1 380px; }
.pd__mt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pd__mx { margin-top: 10px; color: var(--texte-doux); font-size: 15px; max-width: 46ch; }
.pd__ab { flex: 1 1 340px; }
.pd__ab label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.pd__ab input {
  width: 100%; margin-top: 10px; padding: 12px 2px; border: 0;
  border-bottom: 1px solid var(--bordure); background: transparent;
}
.pd__ab input:focus { outline: 0; border-bottom-color: var(--accent); }
.pd__ab .bt { margin-top: 16px; }
.pd__g { display: flex; flex-wrap: wrap; gap: 32px var(--gout); margin-top: 56px; }
.pd__c { flex: 1 1 200px; display: grid; gap: 8px; align-content: start; }
.pd__ct { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.pd__c a { font-size: 15px; text-decoration: none; }
.pd__c a:hover { text-decoration: underline; }
.pd__n { font-size: 15px; color: var(--texte-doux); }
.pd__b {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bordure);
  font-size: 14px; color: var(--texte-doux);
}
.pd__l { display: flex; flex-wrap: wrap; gap: 18px; }
.pd__l a { text-decoration: none; }

/* ---- Adaptations ---------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --air: 80px; --marge: 28px; --marge-i: 20px; }
  .etp + .etp::before { display: none; }
  .som { position: static; flex: 1 1 100%; }
  .svc__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zna__g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hro__a, .wy__g, .chf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avi__g, .sct__g, .trf__g, .rea__g, .mai__g, .prd__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .men { display: none; }
  .brg { display: flex; margin-left: auto; }
  .ent__in { height: auto; min-height: 72px; padding: 12px 0; }
  /* La paire ne se cache pas (regle 7) : elle prend sa propre rangee sous
     la marque et le bouton de menu plutot que de disparaitre. */
  .ent__d { order: 3; flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
  /* Menu deplie : le volet redevient une simple liste. */
  .ent[data-ouvert='1'] .men {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    padding: 20px var(--marge) 28px; background: var(--fond);
    box-shadow: var(--pose); max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .ent[data-ouvert='1'] .men > ul { display: grid; gap: 4px; }
  .ent[data-ouvert='1'] .vlt {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding-top: 6px; display: none;
  }
  .ent[data-ouvert='1'] .men__i--v[data-ouvert='1'] .vlt { display: block; }
  .ent[data-ouvert='1'] .vlt__in { display: block; padding: 16px; box-shadow: none; }
  .ent[data-ouvert='1'] .vlt__v { margin-top: 16px; }
  .avi { margin-top: 0; }
  .bsq, .bsq--inv { flex-direction: column; gap: 32px; }
  .bsq + .bsq { margin-top: 64px; }
  .frz__i--large .vu, .frz__i--etroit .vu { width: 300px; height: 240px; }
  .rail--art .art { width: 340px; }
}

@media (max-width: 700px) {
  :root { --air: 64px; --marge: 20px; --marge-i: 14px; --gout: 16px; }
  body { font-size: 16px; }
  .cbn, .urg, .avi, .trf, .chf__i { padding: 26px; }
  .pd { padding-block: 48px; }
  .tte--droite { text-align: left; margin-left: 0; }
  .tte--droite .acts { justify-content: flex-start; }
  .etp__d { width: 132px; height: 132px; }
  .spc__i { flex-direction: column; }
  .spc__i dd { text-align: left; }
  .svc__g, .zna__g, .cbn__f { grid-template-columns: 1fr; }
  .hro__a, .wy__g, .chf, .avi__g, .sct__g, .trf__g, .rea__g, .mai__g, .prd__g { grid-template-columns: 1fr; }
  /* La paire d en-tete tient sa rangee a padding reduit plutot que de
     deborder ou de sacrifier une porte (regle 7 au palier etroit). */
  .ent__d .bt { flex: 1 1 0; padding: 12px 10px; font-size: 14px; gap: 6px; }
  .ent__d .bt b { display: none; }
}

/* Sur les grands ecrans, l affiche reprend la proportion du modele : le
   mot occupe seul les deux premieres rangees de la fenetre (F1), la
   frise n apparait qu au bord inferieur du premier ecran. Sous ce
   palier, on garde la mise en page compacte deja eprouvee (R5a). */
@media (min-width: 1101px) {
  /* Specificite egale a `main > .zn:first-child` (T5) : sans le
     combinateur, la regle generique du premier bloc de page l emporte
     et l affiche ne bouge jamais. */
  main > .zn--hero:first-child { padding-top: 210px; }
  .zn--hero .rail--frise { margin-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto; }
}

/* MOBILE — debordement mesure le 7 septembre 2026 (gate-debordement rendu honnete :
   un overflow-x sur le body ne compte plus comme un rognage, largeurs 360/390/430). */
/* Volets a 1024 : `min-width: 640px` ancre a gauche de l entree (Zones a 396px) sortait
   de la fenetre (1126px). Sous 1180 le volet s ancre au bord DROIT de la nav (la nav est
   le bloc conteneur, les entrees redeviennent statiques) : 730px sous 643, dans la fenetre,
   toujours colle au bas des entrees (celles-ci prennent la hauteur de la nav). */
@media (min-width: 901px) and (max-width: 1180px) {
  .men { position: relative; }
  .men__i { position: static; }
  .vlt { left: auto; right: 0; }
}

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */
/* >>> 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 */