/* ============================================================
   HOUSIFY — la feuille SOURCE. dist/style.css en est une copie
   ecrasee a chaque rendu : on n edite jamais la copie.

   Aucun hexadecimal ici. Huit jetons, poses par le moteur.
   ============================================================ */

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

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

/* La hauteur RENDUE de l entete flottante, mesuree : 98px a 1440 et 1024,
   92px a 390. L affiche remonte de ce jeton pour que la scene occupe la
   fenetre ENTIERE, entete comprise — c est la lecture du modele. On remonte
   de six pixels de plus : la scene doit commencer AU-DESSUS du bord haut,
   jamais un pixel en dessous, sinon la regle 10 cesse de la voir comme un
   decor pleine fenetre et la compte comme un bloc porteur sous l entete. */
:root { --bn-h: 98px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
}

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

:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; border-radius: 6px; }

/* ---------- la trame ----------
   Le modele tient son contenu autour de 1220px et laisse
   respirer les bords : la marge ne descend jamais sous 20px. */

.wr {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  min-width: 0;
}
.wr--texte { max-width: 820px; }

.bl { padding: clamp(56px, 8vw, 104px) 0; }
.bl--serre { padding: clamp(40px, 5vw, 68px) 0; }
.bl--creme { background: var(--fond-2); }

/* ---------- la matiere ecrite ---------- */

.tg {
  font-size: clamp(38px, 6.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600;
  margin: 0 0 18px;
  overflow-wrap: break-word;
}
.tg--clair { color: var(--fond); }
.tg--page { letter-spacing: -.035em; font-size: clamp(32px, 4.6vw, 56px); }
.tg em { font-style: normal; color:var(--encre-marque,var(--marque)); }
.tg--clair em { color: var(--fond-2); }

.tm {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 14px;
  overflow-wrap: break-word;
}
.tm--moyen { font-size: clamp(25px, 3vw, 36px); }
.tm--clair { color: var(--fond); }
.tm--sombre { color:var(--sur-bande,var(--sur-marque)); }
.tm em { font-style: normal; color:var(--encre-marque,var(--marque)); }
.tm--clair em, .tm--sombre em { color: var(--fond-2); }

.tp {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.28;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.tx { color: var(--texte-doux); margin: 0 0 12px; overflow-wrap: break-word; }
.tx:last-child { margin-bottom: 0; }
.tx--large { font-size: clamp(16px, 1.3vw, 18px); }
.tx--centre { text-align: center; max-width: 62ch; margin-inline: auto; }
.tx--clair { color: var(--fond-2); opacity: .84; }
.tx--sombre { color:var(--sur-bande,var(--sur-marque)); opacity: .82; }

.mn__x { font-size: 13px; color: var(--texte-doux); margin: 12px 0 0; }
.mn__x--sombre { color:var(--sur-bande,var(--sur-marque)); opacity: .78; margin: 0; }

/* L intitule : pilule a CONTOUR de marque, texte de marque. */
.ey {
  display: inline-flex; align-items: center;
  padding: 6px 15px; margin: 0 0 14px;
  border: 1px solid var(--marque); border-radius: 999px;
  color:var(--encre-marque,var(--marque));
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ey--clair { border-color: rgba(255, 255, 255, .55); color: var(--fond); }
.ey--sombre { border-color:var(--sur-bande,var(--sur-marque)); color:var(--sur-bande,var(--sur-marque)); opacity: .9; }

/* Le bouton : libelle, puis pastille RONDE a fleche diagonale. */
.bt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 20px;
  border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--fond); color: var(--texte);
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  max-width: 100%;
}
.bt__m { min-width: 0; overflow-wrap: break-word; }
.bt__r {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-size: 15px; line-height: 1;
}
.bt--plein { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }
.bt--plein .bt__r { background: var(--fond); color:var(--encre-marque,var(--marque)); }
.bt--blanc { background: var(--fond); border-color: var(--fond); color: var(--texte); }
/* La paire de la regle 7 : les deux portes sur une meme ligne. La
   porte CREUSE sert les panneaux sombres — elle se dessine au trait,
   jamais a l aplat, pour ne pas concurrencer la porte pleine. */
.ac { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.ug__b .ac, .ap__b .ac { justify-content: center; margin-top: 0; }
.af__b .ac { justify-content: flex-start; margin-top: 0; }
.ct__f .ac { margin-top: 0; }
.bt--creux { background: transparent; border-color: var(--fond); color: var(--fond); }
.bt--creux .bt__r { background: transparent; border: 1px solid var(--fond); color: var(--fond); }
.ap__f .bt--creux { border-color:var(--sur-bande,var(--sur-marque)); color:var(--sur-bande,var(--sur-marque)); justify-self: center; }
.ap__f .bt--creux .bt__r { border-color:var(--sur-bande,var(--sur-marque)); color:var(--sur-bande,var(--sur-marque)); }
.bt--contour { background: transparent; border-color: var(--bordure); color: var(--texte); }
.bt--contour .bt__r { background: transparent; border: 1px solid var(--bordure); color: var(--texte); }
.bt:hover { filter: brightness(.96); }

.ln {
  display: inline-flex; align-items: center; gap: 7px;
  color:var(--encre-marque,var(--marque)); font-weight: 600; font-size: 15px; text-decoration: none;
  margin-top: 12px;
}
.ln i { font-style: normal; }

.pt { display: grid; gap: 9px; margin: 14px 0 0; }
.pt li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-doux); min-width: 0; }
.pt__r {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px;
  border-radius: 50%; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  display: grid; place-items: center; font-size: 11px; line-height: 1;
}

.bg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bg li {
  padding: 5px 13px; border-radius: 999px;
  background: var(--fond-2); color:var(--encre-marque,var(--marque));
  font-size: 12.5px; font-weight: 600;
}

/* L en-tete de section : centre, avec le bouton qui se decale
   en bout de ligne des que la largeur le permet. */
.ch {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 20px; margin-bottom: clamp(28px, 4vw, 46px); text-align: center;
}
.ch__c { flex: 1 1 460px; min-width: 0; max-width: 720px; }
.ch__c .tx { max-width: 62ch; margin-inline: auto; }
.ch__c--gauche { text-align: left; max-width: none; }
.ch__c--gauche .tx { margin-inline: 0; }
.ch__a { flex: 0 0 auto; }

/* La grille : le compte de cartes vient des DONNEES. Chaque
   enfant declare sa base et s etire ; auto-fit seul laisserait
   la derniere ligne bancale. */
.gl { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: minmax(0, 1fr); }
.gl > * { min-width: 0; }
.gl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .gl--3, .gl--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .gl--2, .gl--3, .gl--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Le visuel */
.ph { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.ph > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--vide {
  display: grid; place-items: center; padding: 16px;
  background: var(--fond-2); border: 1px dashed var(--bordure);
  min-height: 100%;
}
.ph--vide i {
  font-style: normal; font-size: 12px; font-weight: 600; text-align: center;
  color: var(--texte-doux); opacity: .8; overflow-wrap: break-word;
}

/* ---------- la barre : une PILULE flottante ---------- */

.bn { position: sticky; top: 0; z-index: 60; padding: 14px clamp(12px, 3vw, 28px); }
.bn__p {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1220px; margin: 0 auto;
  padding: 9px 9px 9px 20px;
  background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}
.bn__l {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 18px; letter-spacing: -.03em; text-decoration: none;
  min-width: 0; overflow-wrap: anywhere;
}
.bn__e { width: 15px; height: 15px; border-radius: 4px; background:var(--marque);--sur-bande:var(--sur-marque); flex: 0 0 auto; }

.bn__k { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
/* Le repli se commande juste APRES le logo, comme sur le modele. */
.bn__h {
  order: 2; display: none; cursor: pointer; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bordure); background: var(--fond-2);
  place-items: center;
}
.bn__h span, .bn__h span::before, .bn__h span::after {
  content: ''; display: block; width: 15px; height: 2px; border-radius: 2px; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
}
.bn__h span { position: relative; }
.bn__h span::before { position: absolute; top: -5px; }
.bn__h span::after { position: absolute; top: 5px; }
.bn__h i {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.mn { order: 3; flex: 1 1 auto; min-width: 0; }
.mn__u { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mn__i { position: relative; }
.mn__a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mn__a:hover { background: var(--fond-2); color:var(--encre-marque,var(--marque)); }
/* La petite fleche vers le bas : elle dit qu il y a un volet. */
.mn__f {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
/* Le volet touche le lien : le decalage est un PADDING du volet, jamais
   une marge. Une marge laisserait un trou de quelques pixels ou le
   survol retombe des que la souris descend vers le panneau. */
.vt {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none; padding-top: 12px; margin-top: 0;
  min-width: 280px; max-width: min(94vw, 640px);
}
.vt--large { max-width: min(96vw, 920px); min-width: 760px; }
.vt__d {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px; padding: 20px 24px;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
}
.vt__g {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 22px 26px; flex: 1 1 380px; min-width: 0;
}
.mn__i--d:hover .vt, .mn__i--d:focus-within .vt { display: block; }
.vt__c { min-width: 150px; flex: 1 1 150px; }
.vt__t { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-bottom: 8px; }
.vt__c li a { display: block; padding: 5px 0; font-size: 14.5px; text-decoration: none; }
.vt__c li a:hover { color:var(--encre-marque,var(--marque)); }
/* La vitrine : l image a droite du volet, encartee comme l affiche. */
.vt__v {
  flex: 0 1 260px; min-width: 0; align-self: flex-start;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 16px; background: var(--fond-2);
}
/* Le visuel du volet a une hauteur FIXE : sans elle, l aplat herite du
   height:100% de .ph et pousse le texte hors du panneau. */
.vt__ph {
  display: grid; width: 100%; height: 150px; min-height: 0;
  object-fit: cover; border-radius: 12px; overflow: hidden;
}
.vt__b { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vt__n { font-size: 15px; font-weight: 600; line-height: 1.3; }
.vt__x { font-size: 13.5px; color: var(--texte-doux); line-height: 1.5; }
.vt__z {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 13.5px; font-weight: 600; color:var(--encre-marque,var(--marque)); text-decoration: none;
}
.vt__z:hover { gap: 10px; }
.bn__c { order: 4; margin-left: auto; }

@media (max-width: 1023px) {
  .bn__p { border-radius: 26px; }
  .bn__h { display: grid; }
  .bn__l { flex: 1 1 auto; order: 1; }
  .bn__c { order: 3; }
  .mn { order: 5; flex-basis: 100%; display: none; }
  .bn__k:checked ~ .mn { display: block; }
  .mn__u { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding-top: 6px; }
  .mn__a { justify-content: space-between; white-space: normal; }
  /* Sur un ecran tactile, un volet au survol ne s ouvre jamais :
     les sous-liens descendent donc a plat, toujours atteignables. */
  .vt, .vt--large {
    position: static; transform: none; display: block;
    margin: 0 0 6px 14px; padding: 0; max-width: none; min-width: 0;
  }
  .vt__d {
    display: block; box-shadow: none; border: 0; border-radius: 0;
    border-left: 2px solid var(--bordure); padding: 2px 0 6px 12px; gap: 0;
  }
  .vt__g { display: block; }
  .vt__c { flex-basis: 100%; }
  /* La vitrine est un confort d ecran large : au doigt, elle pousserait
     les liens hors de vue. Le volet redescend a la liste seule. */
  .vt__v { display: none; }
}

@media (max-width: 479px) {
  .bn__c .bt__m { display: none; }
  .bn__c { padding: 4px; }
}

/* ---------- l affiche : photo ENCARTEE a gros rayon ---------- */

.af { padding: 0 0 clamp(40px, 5vw, 64px); }
.af__c {
  position: relative;
  margin: 0;
  border-radius: clamp(24px, 3vw, 44px);
  overflow: hidden;
  min-height: clamp(440px, 62vh, 640px);
  display: grid;
}
/* LE RETRAIT NE VAUT QUE POUR L AFFICHE EN TETE DE PAGE. Sur l accueil
   l affiche suit l entete SANS RIEN ENTRE ELLES : elle remonte sous
   l entete flottante et occupe la fenetre entiere, entete comprise, comme
   le modele. Six pixels de plus que la hauteur d entete : le bord haut
   doit passer AU-DESSUS de zero, sinon la regle 10 cesse de voir un decor
   pleine fenetre et compte un bloc porteur glisse sous l entete.
   Sur les pages interieures un fil d ariane s intercale : le selecteur
   d adjacence ne mord plus, l affiche reste dans le flux, et rien ne
   passe sous l entete. C est la meme feuille qui tient les deux cas. */
.bn + .af { margin-top: calc(-1 * var(--bn-h) - 6px); }
.bn + .af .af__c {
  border-radius: 0 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px);
  /* la fenetre entiere, plus ce dont l affiche est remontee */
  min-height: calc(100vh + var(--bn-h) + 6px);
}
/* La photo est un DECOR pleine fenetre : elle est posee en absolu sur toute
   la scene, pas rangee dans une case de grille. C est ce qui la fait passer
   pour un fond aux yeux de R5c et sortir du champ de la regle 10. */
.af__v { position: absolute; inset: 0; }
.af__i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le voile est POSE sur la photo, pas pose a cote : sans position
   absolue il ne recouvrait rien et le propos clair passait sur un
   fond clair. */
.af__o {
  position: absolute; inset: 0; z-index: 1;
  /* Le voile est dimensionne sur l etat VIDE, pas sur la photo : au repos
     la coquille n embarque aucune image et le cadre se peint en gris clair
     (#e6e9ec). Un voile a .42 laissait l encre claire a 4,1 de contraste,
     sous le plancher de 4,5 de la regle 4b. A .60/.74 le meme propos se
     lit a plus de 6, photo posee comme cadre vide. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .60), rgba(0, 0, 0, .74));
}
/* L emplacement d image vide affiche son intitule : sous le propos de
   l affiche, il se superposerait au titre. */
.af__v .ph--vide i { display: none; }
.af__t {
  grid-area: 1 / 1; position: relative; z-index: 2;
  align-self: center; justify-self: start; text-align: left;
  /* 740 et non 660 : a 1440 le retrait de gauche mange 72px et celui de
     droite 44, le titre ne disposait que de 544px pour un corps de 80 —
     6,8 cadratins, sous les 7 que la regle T5 exige. A 740 il en dispose
     de 624, soit 7,8. La largeur est tenue par le gabarit, pas par la
     longueur du texte de la fixture. */
  max-width: 740px; min-width: 0;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 44px) clamp(40px, 6vw, 76px) clamp(24px, 5vw, 92px);
}
/* Seule l affiche remontee doit reserver la hauteur de l entete. */
.bn + .af .af__t { padding-top: calc(var(--bn-h) + 48px); }
.af__b { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 24px; }

/* La preuve chiffree mord sur le bas de l affiche. */
.pq {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -46px auto 0; position: relative; z-index: 3;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 22px;
  padding: 20px clamp(16px, 2vw, 26px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}
@media (max-width: 1023px) { .pq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .pq { grid-template-columns: minmax(0, 1fr); } }
.pq li { min-width: 0; }
.pq b { display: block; font-size: 17px; letter-spacing: -.02em; }
.pq span { display: block; color: var(--texte-doux); font-size: 14px; }

/* ---------- l offre ---------- */

/* Des entrees qui se DEPLIENT a gauche, une vue en vis-a-vis a
   droite. Le signe bascule tout seul a l ouverture : rien a scripter. */
.dp2 { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 52px); align-items: flex-start; }
.dp2__g { flex: 1.2 1 340px; min-width: 0; border-top: 1px solid var(--bordure); }
.dp2__d { flex: 1 1 340px; min-width: 0; position: sticky; top: 96px; }
.dp2__v { height: clamp(280px, 34vw, 470px); border-radius: 22px; overflow: hidden; }
.dp2__r { display: flex; gap: 12px; margin-top: 12px; }
.dp2__r .ph { flex: 1 1 0; min-width: 0; height: 96px; border-radius: 14px; }

.dl { border-bottom: 1px solid var(--bordure); }
.dl__t {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; cursor: pointer; list-style: none;
}
.dl__t::-webkit-details-marker { display: none; }
.dl__t b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.dl__s {
  flex: 0 0 auto; position: relative; width: 26px; height: 26px;
  border-radius: 50%; background: var(--fond-2);
}
.dl__s::before, .dl__s::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.6px; background:var(--marque);--sur-bande:var(--sur-marque);
  transform: translate(-50%, -50%);
}
.dl__s::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .18s; }
.dl[open] .dl__s::after { transform: translate(-50%, -50%) rotate(0deg); }
.dl__c { padding: 0 2px 22px; min-width: 0; }
.dl__c .pt { margin-top: 12px; }
.dl__c .ln { margin-top: 14px; }

@media (max-width: 900px) { .dp2__d { position: static; } }

/* ---------- le chapeau de rubrique ---------- */

/* Le titre FAIT FACE au propos : il tient la gauche par l ordre de
   mise en page, alors que le flux le pose apres. */
.ir { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); }
.ir__h { order: -1; flex: 1 1 340px; min-width: 0; }
.ir__p { flex: 2 1 420px; min-width: 0; columns: 2 260px; column-gap: 34px; }
.ir__p .tx { break-inside: avoid; }

/* Un chiffre : le NOMBRE dessus, le libelle DESSOUS. Aucun cadre. */
.ms { margin: 0; min-width: 0; }
.ms b {
  display: block; font-size: clamp(28px, 3vw, 44px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere;
}
.ms b i { font-style: normal; color:var(--encre-marque,var(--marque)); }
.ms span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--texte-doux); }
.mss { display: flex; flex-wrap: wrap; gap: 22px clamp(26px, 4vw, 62px); margin-top: clamp(26px, 3vw, 44px); }
.mss .ms { flex: 1 1 calc(33.333% - 42px); min-width: min(150px, 100%); }

/* Une paire : la petite marque AU-DESSUS de son libelle. */
.pr { display: block; min-width: 0; }
.pr__m {
  display: block; width: 18px; height: 18px; border-radius: 6px;
  background:var(--marque);--sur-bande:var(--sur-marque); margin-bottom: 8px;
}
.pr b { display: block; font-size: 14.5px; font-weight: 600; overflow-wrap: break-word; }
.pr span { display: block; font-size: 13.5px; color: var(--texte-doux); overflow-wrap: anywhere; }
.prs { display: flex; flex-wrap: wrap; gap: 18px clamp(20px, 3vw, 40px); margin-top: 18px; }
.prs .pr { flex: 1 1 calc(33.333% - 28px); min-width: min(130px, 100%); }

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

.dp {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3.4vw, 54px);
  padding: clamp(24px, 3vw, 40px) 0;
}
.dp + .dp { border-top: 1px solid var(--bordure); }
.dp__v { flex: 1 1 340px; min-width: 0; height: clamp(260px, 30vw, 400px); border-radius: 24px; overflow: hidden; }
.dp__t { flex: 1 1 360px; min-width: 0; }
.dp--miroir .dp__v { order: 2; }

/* ---------- l expertise : le panneau SOMBRE ---------- */

.xp {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 44px);
  background: var(--accent); border-radius: clamp(20px, 2.4vw, 32px);
  padding: clamp(26px, 3.6vw, 52px);
}
.xp__g { flex: 1 1 330px; min-width: 0; }
.xp__d { flex: 1 1 330px; min-width: 0; }
.xp__v { height: clamp(180px, 22vw, 260px); border-radius: 20px; overflow: hidden; margin-bottom: 18px; }
.xp__l { display: grid; gap: 12px; }
.xp__l li {
  padding: 13px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  min-width: 0;
}
.xp__l b { display: block; color: var(--fond); font-size: 15.5px; }
.xp__l span { display: block; color: var(--fond-2); opacity: .78; font-size: 14px; }

/* ---------- les bandes qui defilent ---------- */

.df { padding: clamp(22px, 3vw, 38px) 0; overflow: hidden; }
.df__c { display: flex; gap: 14px; width: max-content; animation: glisse 42s linear infinite; }
.df__c--haut { animation-duration: 64s; }
.df__p { display: flex; gap: 14px; }
.df__p li {
  padding: 9px 20px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  font-weight: 600; font-size: 14.5px; white-space: nowrap; color: var(--texte-doux);
}
@keyframes glisse { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .df__c { animation: none; width: 100%; overflow-x: auto; }
}

/* ---------- les raisons ---------- */

.rs {
  padding: 22px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 20px;
}
.rs__r {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque); margin-bottom: 14px;
}

/* La photo de section : un pave a gros rayon, au-dessus des raisons. */
.rs__v { height: 280px; border-radius: 24px; overflow: hidden; margin-bottom: 26px; }

/* La bande de photos des zones : compte pilote par les donnees. */
.zn__bd { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.zn__bd .ph { flex: 1 1 30%; min-width: min(240px, 100%); height: 190px; border-radius: 20px; }

/* La photo d une marche du parcours. */
.mc__v { height: 170px; border-radius: 18px; overflow: hidden; margin: 12px 0; }

/* ---------- les segments d audience ---------- */

/* Des RANGEES numerotees, jamais des vignettes : le rang a gauche,
   le propos au milieu, une vue etroite a droite. */
.sq { list-style: none; margin: clamp(26px, 3vw, 44px) 0 0; padding: 0; }
.sq__l {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 18px clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--bordure);
}
.sq__n {
  flex: 0 0 auto; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; color:var(--encre-marque,var(--marque)); padding-top: 4px;
}
.sq__t { flex: 3 1 320px; min-width: 0; }
.sq__t .tx { margin-top: 10px; }
.sq__t .pt, .sq__t .bg { margin-top: 14px; }
.sq__e {
  display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux);
  min-width: 0; overflow-wrap: anywhere;
}
.sq__v { flex: 1 1 220px; min-width: 0; height: clamp(150px, 15vw, 200px); border-radius: 18px; overflow: hidden; }

/* ---------- le voisinage ---------- */

.zn { display: flex; flex-wrap: wrap; gap: 10px; }
.zn li { flex: 0 1 auto; min-width: 0; }
.zn a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--fond-2);
  text-decoration: none; font-size: 14.5px; max-width: 100%;
}
.zn a:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.zn__e { width: 8px; height: 8px; border-radius: 50%; background:var(--marque);--sur-bande:var(--sur-marque); flex: 0 0 auto; }
.zn b { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.zn i { font-style: normal; color: var(--texte-doux); font-size: 13px; }

/* ---------- le parcours ---------- */

.pc { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 26px); }
.mc {
  flex: 1 1 250px; min-width: 0; position: relative;
  padding: 24px 20px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 20px;
}
.mc__n {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-weight: 600; font-size: 15px; margin-bottom: 14px;
}

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

.nb {
  display: flex; flex-wrap: wrap;
  background: var(--fond-2); border-radius: 24px;
  padding: clamp(20px, 2.6vw, 34px);
}
.nb li {
  flex: 1 1 190px; min-width: 0; text-align: center; padding: 10px 14px;
  border-right: 1px solid var(--bordure);
}
.nb li:last-child { border-right: 0; }
.nb b {
  display: block; font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -.04em; line-height: 1.05; font-weight: 600;
}
.nb sup { color:var(--encre-marque,var(--marque)); font-size: .5em; vertical-align: super; }
.nb span { display: block; color: var(--texte-doux); font-size: 14px; margin-top: 4px; }

/* ---------- la fiche locale ---------- */

.lc { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.lc__v { flex: 1.4 1 340px; min-width: 0; min-height: 300px; border-radius: 26px; overflow: hidden; }
.lc__t {
  flex: 1 1 300px; min-width: 0;
  background: var(--fond-2); border-radius: 26px; padding: clamp(22px, 2.6vw, 34px);
}
.ad { display: grid; gap: 5px; font-style: normal; color: var(--texte-doux); margin-top: 14px; }
.ad__e { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background:var(--marque);--sur-bande:var(--sur-marque); margin-bottom: 8px; }

/* ---------- la parole ---------- */

.tm__r { display: flex; gap: 16px; }
.tm__c {
  flex: 0 0 clamp(260px, 30vw, 340px); min-width: 0;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 22px;
  padding: 22px; white-space: normal;
}
.tm__n { display: block; color:var(--encre-marque,var(--marque)); letter-spacing: 2px; margin-bottom: 10px; }
.tm__p { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.tm__a {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  display: grid; place-items: center; font-weight: 600;
}
.tm__q { min-width: 0; }
.tm__q b { display: block; font-size: 14.5px; }
.tm__q i { font-style: normal; display: block; font-size: 13px; color: var(--texte-doux); }

/* ---------- les questions : deux colonnes ---------- */

.fq { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 48px); align-items: flex-start; }
.fq__g { flex: 1 1 320px; min-width: 0; position: sticky; top: 96px; }
.fq__d { flex: 1.5 1 400px; min-width: 0; display: grid; gap: 12px; }
.fq__e {
  margin-top: 22px; padding: 20px; border-radius: 20px;
  background: var(--fond-2); border: 1px solid var(--bordure);
}
.qs { background: var(--fond-2); border-radius: 22px; padding: 4px 6px; }
.qs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 14px; cursor: pointer; font-weight: 600; list-style: none;
  letter-spacing: -.015em;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary span { min-width: 0; overflow-wrap: break-word; }
.qs__v {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fond); display: grid; place-items: center; position: relative;
}
.qs__v::before {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid var(--marque); border-bottom: 2px solid var(--marque);
  transform: translateY(-2px) rotate(45deg);
}
.qs[open] .qs__v::before { transform: translateY(1px) rotate(-135deg); }
.qs > .tx { padding: 0 14px 16px; }

@media (max-width: 900px) { .fq__g { position: static; } }

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

/* La fiche du modele : vue en tete, puis l intitule et son repere sur
   la MEME ligne, le repere cale a droite. */
.fb { border: 1px solid var(--bordure); border-radius: 22px; padding: 14px; }
.fb a { display: block; text-decoration: none; color: inherit; min-width: 0; }
.fb__v { height: 190px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.fb__l { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.fb__l .tp { flex: 1 1 auto; min-width: 0; }
.fb__m {
  flex: 0 1 auto; min-width: 0; color:var(--encre-marque,var(--marque));
  font-size: 15px; font-weight: 600; text-align: right; overflow-wrap: anywhere;
}
.fb .tx { margin-top: 10px; }

/* ---------- l appel a l action ---------- */

.ap {
  position: relative; display: grid;
  border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden;
  background:var(--marque);--sur-bande:var(--sur-marque);
}
.ap__v { grid-area: 1 / 1; opacity: .18; }
.ap__v .ph { height: 100%; }
.ap__t {
  grid-area: 1 / 1; position: relative; z-index: 2;
  padding: clamp(32px, 5vw, 68px) clamp(20px, 4vw, 56px);
  text-align: center; max-width: 760px; margin: 0 auto; min-width: 0;
}
.ap__b { margin-top: 22px; }
.ap__f { display: grid; gap: 12px; margin: 24px auto 0; max-width: 540px; }
.ap__f .cp { min-width: 0; text-align: left; }
.ap__f .cp span { color:var(--sur-bande,var(--sur-marque)); opacity: .85; }
/* Le bouton est POSE DANS le champ : une seule pilule, pas deux
   elements cote a cote. */
.ap__u {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--fond); border-radius: 999px; padding: 6px 6px 6px 8px;
}
.ap__u .cp { flex: 1 1 200px; }
.ap__u .cp span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ap__u .cp input { border: 0; background: none; border-radius: 999px; padding: 11px 14px; }
.ap__u .bt { flex: 0 0 auto; }
.ap__n { margin-top: 14px; font-size: 13px; color:var(--sur-bande,var(--sur-marque)); opacity: .8; }

.cp { display: block; min-width: 0; }
.cp span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cp input, .cp textarea {
  width: 100%; padding: 12px 15px;
  border: 1px solid var(--bordure); border-radius: 14px;
  background: var(--fond); color: var(--texte);
}
.cp textarea { resize: vertical; }

/* ---------- le fil d Ariane ---------- */

.fa { padding: 18px 0 0; }
.fa__o { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fa__o li { display: inline-flex; align-items: center; min-width: 0; }
.fa__o li:not(:last-child)::after {
  content: ''; width: 5px; height: 5px; margin: 0 4px 0 8px;
  border-top: 1.5px solid var(--texte-doux); border-right: 1.5px solid var(--texte-doux);
  transform: rotate(45deg); opacity: .7;
}
.fa__o a, .fa__o span {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--fond-2); font-size: 13px; color: var(--texte-doux); text-decoration: none;
  overflow-wrap: anywhere;
}
.fa__o a:hover { color:var(--encre-marque,var(--marque)); }
.fa__z span { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); font-weight: 600; }
.fa__d a { display: inline-flex; align-items: center; gap: 7px; }
.fa__e {
  width: 9px; height: 9px; flex: 0 0 auto;
  border: 2px solid var(--marque); border-radius: 2px 2px 0 0;
}
.fa__m a { color: var(--texte-doux); }

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

.cm { margin: 0; }
.cm__c {
  position: relative; border-radius: 24px; overflow: hidden;
  height: clamp(260px, 34vw, 420px); background: var(--fond-2);
}
.cm__p { position: absolute; inset: 0; }
.cm__p .ph { border-radius: 0; }
.cm__p--av { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cm__e {
  position: absolute; bottom: 14px; z-index: 3;
  padding: 5px 13px; border-radius: 999px;
  background: var(--fond); color: var(--texte); font-size: 12.5px; font-weight: 600;
}
.cm__e--g { left: 14px; }
.cm__e--d { right: 14px; }
.cm__t {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--fond); pointer-events: none;
}
.cm__t::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--fond);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
/* Le curseur couvre toute l image : souris, doigt et clavier
   passent par lui, et lui seul. */
.ab__i {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
}
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; background: transparent; }
.ab__i::-moz-range-thumb { width: 46px; height: 999px; background: transparent; border: 0; }
.ab__i::-moz-range-track { background: transparent; }
.cm__l { padding: 16px 4px 0; }

/* ---------- les chantiers ---------- */

.pj__v { position: relative; height: clamp(200px, 22vw, 250px); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.pj__b {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--fond); color:var(--encre-marque,var(--marque)); font-size: 12.5px; font-weight: 600;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- les garanties : TUILES CARREES ---------- */

.tl {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px;
  background: var(--fond-2); border-radius: 26px; padding: clamp(18px, 2.2vw, 28px);
}
.tl li {
  flex: 1 1 190px; min-width: 0; text-align: center;
  background: var(--fond); border-radius: 18px; padding: 22px 16px;
}
.tl__r {
  display: block; width: 42px; height: 42px; margin: 0 auto 12px;
  border: 2px solid var(--marque); border-radius: 12px;
}
.tl b { display: block; font-size: 15.5px; letter-spacing: -.015em; }
.tl span { display: block; color: var(--texte-doux); font-size: 13.5px; margin-top: 5px; }

/* ---------- les dispositifs ---------- */

.ad__c { background: var(--fond-2); border-radius: 22px; padding: 24px; }

/* ---------- la matiere ---------- */

.mt { text-align: center; }
.mt__v { height: 160px; border-radius: 18px; overflow: hidden; margin-bottom: 12px; }

/* ---------- les formules ---------- */

.fm {
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: 24px; padding: 26px; display: flex; flex-direction: column;
}
.fm--une { border-color:var(--encre-marque,var(--marque)); border-width: 2px; }
.fm__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fm__h .tp { margin: 0; min-width: 0; }
.fm .bt { margin-top: auto; align-self: flex-start; }
.fm .pt { margin-bottom: 20px; }

.px { display: inline-flex; flex-direction: column; min-width: 0; }
.px i { font-style: normal; font-size: 11.5px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .05em; }
.px b { font-size: 21px; letter-spacing: -.03em; }
.px span { font-size: 12.5px; color: var(--texte-doux); }
.px--pilule {
  background: var(--fond-2); color:var(--encre-marque,var(--marque));
  border-radius: 16px; padding: 7px 14px; text-align: right; align-items: flex-end;
}
.px--pilule i, .px--pilule span { color:var(--encre-marque,var(--marque)); opacity: .8; }
.px--grand b { font-size: 30px; }

/* ---------- les facettes ---------- */

.fc { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.fc li { min-width: 0; }
.fc__l, .fc__a {
  display: inline-block; padding: 9px 17px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.fc__l { background: var(--fond-2); border: 1px solid var(--bordure); color: var(--texte-doux); }
.fc__l:hover { color:var(--encre-marque,var(--marque)); border-color:var(--encre-marque,var(--marque)); }
.fc__a { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

/* ---------- la grille de references ---------- */

.rf { background: var(--fond); border: 1px solid var(--bordure); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; }
.rf__v { height: clamp(190px, 21vw, 240px); border-radius: 18px; overflow: hidden; margin-bottom: 15px; }
.rf__h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rf__h .tp { margin: 0; flex: 1 1 140px; min-width: 0; }
.rf .bt { margin-top: auto; align-self: flex-start; }
.at { display: flex; flex-wrap: wrap; margin: 14px 0 16px; }
.at li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 14px 2px 0; margin-right: 14px;
  border-right: 1px solid var(--bordure);
  font-size: 13.5px; color: var(--texte-doux); min-width: 0;
}
.at li:last-child { border-right: 0; margin-right: 0; }
.at__r { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--marque); flex: 0 0 auto; }

/* ---------- la reference en detail ---------- */

.fp__v { height: clamp(260px, 36vw, 460px); border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden; margin-bottom: clamp(22px, 3vw, 38px); }
.fp { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); align-items: flex-start; }
.fp__g { flex: 2 1 380px; min-width: 0; }
.fp__d {
  flex: 1 1 260px; min-width: 0; position: sticky; top: 96px;
  background: var(--fond-2); border-radius: 24px; padding: 24px;
  display: grid; gap: 16px; justify-items: start;
}
@media (max-width: 900px) { .fp__d { position: static; } }

/* ---------- les caracteristiques ---------- */

.sp { background: var(--fond-2); border-radius: clamp(20px, 2.4vw, 30px); padding: clamp(24px, 3vw, 42px); }
.sp__g {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) { .sp__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .sp__g { grid-template-columns: minmax(0, 1fr); } }
.sp__t {
  min-width: 0;
  background: var(--fond); border-radius: 18px; padding: 20px 18px;
}
.sp__r { display: block; width: 38px; height: 38px; border: 2px solid var(--marque); border-radius: 10px; margin-bottom: 12px; }
.sp__t dt { font-size: 13px; color: var(--texte-doux); }
.sp__t dd { margin: 3px 0 0; font-weight: 600; font-size: 16px; letter-spacing: -.02em; overflow-wrap: break-word; }

/* ---------- le rappel ---------- */

/* Le rappel se lit comme un chiffre : le NUMERO en grand tient la
   ligne du dessus, le propos se lisant dessous, le tout centre. */
.ug {
  background: var(--accent); border-radius: clamp(20px, 2.4vw, 30px);
  padding: clamp(26px, 3.4vw, 48px); text-align: center; min-width: 0;
}
.ug .tm { margin-top: 10px; }
.ug .ey { margin-top: 14px; }
.ug .tx { margin: 12px auto 0; max-width: 620px; }
.ug .prs { justify-content: center; margin-top: clamp(20px, 2.6vw, 32px); }
.ug .pr { flex: 0 1 200px; }
.ug .pr__m { margin-left: auto; margin-right: auto; background: var(--fond); }
.ug .pr b { color: var(--fond); }
.ug .pr span { color: var(--fond-2); opacity: .84; }
.ug__b { margin-top: 24px; }
.tel {
  display: block;
  font-size: clamp(28px, 3.6vw, 50px); font-weight: 600; letter-spacing: -.04em; line-height: 1.06;
  color: var(--fond); text-decoration: none; overflow-wrap: anywhere;
}

/* ---------- la prise de contact ---------- */

.ct { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 48px); align-items: flex-start; }
.ct__g { flex: 1 1 320px; min-width: 0; }
/* Les coordonnees ne s empilent pas dans la colonne du titre : elles
   ferment la section d un bord a l autre. */
.cc {
  display: flex; flex-wrap: wrap; gap: 22px clamp(24px, 3.4vw, 56px);
  margin-top: clamp(26px, 3vw, 44px); padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--bordure);
}
.cc__u { flex: 1 1 calc(25% - 42px); min-width: min(180px, 100%); }
.cc__u b { display: block; font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
.cc__u span { display: block; color: var(--texte-doux); font-size: 14.5px; overflow-wrap: anywhere; }
.ct__f {
  flex: 1 1 340px; min-width: 0; display: grid; gap: 14px; justify-items: stretch;
  background: var(--fond-2); border-radius: 26px; padding: clamp(22px, 2.6vw, 32px);
}
.ct__f .bt { justify-self: start; }

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

.jr { border: 1px solid var(--bordure); border-radius: 22px; padding: 14px; }
.jr a { text-decoration: none; display: block; height: 100%; }
.jr__v { position: relative; height: 190px; border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.jr__b {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--fond); color:var(--encre-marque,var(--marque)); font-size: 12.5px; font-weight: 600;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- l article ---------- */

.ar__h { max-width: 800px; margin: 0 auto 24px; text-align: center; }
.ar__h .ey { margin-inline: auto; }
.ar__v { height: clamp(220px, 30vw, 400px); border-radius: clamp(20px, 2.4vw, 30px); overflow: hidden; margin-bottom: clamp(22px, 3vw, 38px); }
.ar { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 46px); align-items: flex-start; }
.sm {
  flex: 1 1 240px; min-width: 0; position: sticky; top: 96px;
  background: var(--fond-2); border-radius: 22px; padding: 22px;
}
.sm b { display: block; margin-bottom: 10px; }
.sm li a { display: block; padding: 5px 0; color: var(--texte-doux); font-size: 14.5px; text-decoration: none; }
.sm li a:hover { color:var(--encre-marque,var(--marque)); }
.ar__t { flex: 2.4 1 420px; min-width: 0; }
.ar__t .tm, .ar__t .tp { margin-top: 26px; }
.ec {
  background: var(--fond-2); border-left: 3px solid var(--marque);
  border-radius: 0 18px 18px 0; padding: 20px 22px; margin: 22px 0;
}
@media (max-width: 900px) { .sm { position: static; flex-basis: 100%; } }

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

.lg { margin-top: 26px; }
.lg .tp { margin-bottom: 10px; }

/* ---------- le pied : l aplat de MARQUE encarte ---------- */

.pd { padding: 0 0 clamp(14px, 2vw, 26px); }
.pd__p {
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  border-radius: clamp(20px, 2.4vw, 32px);
  padding: clamp(28px, 3.6vw, 54px);
}
.pd__h { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); }
.pd__m { flex: 1 1 300px; min-width: 0; }
.pd__e { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; letter-spacing: -.03em; margin-bottom: 12px; }
.pd__e span { width: 15px; height: 15px; border-radius: 4px; background: var(--sur-marque); flex: 0 0 auto; }
.pd__f { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 18px; }
.pd__f .cp { flex: 1 1 200px; }
.pd__f .cp span { color:var(--sur-bande,var(--sur-marque)); opacity: .85; }
.pd__g { flex: 2 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 36px); }
.pd__c, .pd__n { flex: 1 1 150px; min-width: 0; }
.pd__c b, .pd__n b { display: block; margin-bottom: 10px; font-size: 15px; }
.pd__c li a { display: block; padding: 4px 0; font-size: 14.5px; text-decoration: none; opacity: .86; overflow-wrap: break-word; }
.pd__c li a:hover { opacity: 1; }
.pd__n li { padding: 4px 0; font-size: 14.5px; opacity: .86; overflow-wrap: anywhere; }
.pd__t { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pd__t li {
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--sur-marque); font-size: 12.5px; font-weight: 600;
}
.pd__b {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .18);
}
.pd__l { display: flex; flex-wrap: wrap; gap: 16px; }
.pd__l a { font-size: 13px; text-decoration: none; opacity: .86; }

/* ---------- les petits ecrans ---------- */

@media (max-width: 700px) {
  .ir__p { columns: 1; }
  .dp--miroir .dp__v { order: 0; }
  .nb li { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .nb li:last-child { border-bottom: 0; }
  .ch { text-align: left; justify-content: flex-start; }
  .ch__c .tx { margin-inline: 0; }
  .at li { border-right: 0; margin-right: 12px; padding-right: 0; }
}

@media (max-width: 420px) {
  .tm__c { flex-basis: 78vw; }
  :root { --bn-h: 92px; }
}

/* ================= SIGNATURES DE FORME =================
   Traits releves EN LIGNE sur housify.framer.website, portes ici en CSS pur.
   Documentation lisible : housify/signatures.md */

/* SIGNATURE — le couple COUVERCLE / SOCLE. Le modele empile des lames :
   `16px 16px 0 0` dix-huit fois pour la piece qui coiffe, `0 0 16px 16px`
   six fois pour celle qui ferme. Les deux ne s arrondissent jamais du meme
   cote — c est ce qui donne au bloc deplie sa lecture de tiroir. */
.qs[open] summary {
  background: var(--fond); border-radius: 16px 16px 0 0;
}
.qs[open] > .tx {
  background: var(--fond); border-radius: 0 0 16px 16px;
  padding-top: 2px; margin-bottom: 0;
}

/* SIGNATURE — le LISERE INTERNE lumineux : `inset 0 0 6px` a 40 pour cent
   de blanc, releve six fois. Le modele n eclaire pas ses pastilles par une
   ombre portee mais par un halo INTERIEUR, comme un email cuit. */
.bt--plein, .pt__r, .mc__n, .tm__a, .zn__e {
  box-shadow: inset 0 0 6px 0 color-mix(in srgb, var(--fond) 40%, transparent);
}

/* SIGNATURE — le degrade de marque est VERTICAL et va du clair au fonce
   (releve six fois). Jamais une diagonale, jamais un aplat. */
.mc__n, .tm__a, .bt--plein {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fond) 26%, var(--marque)) 0%,
    var(--marque) 100%);
}

/* SIGNATURE — le voile MONTE DU BAS EN DEMI-CERCLE :
   `radial-gradient(100% 100% at 50% 100%, clair 14%, marque)`, cinq
   occurrences. Le fond des blocs de couleur n est pas plat, il s eclaire
   au centre bas comme une scene. */
.xp {
  background-image: radial-gradient(
    100% 100% at 50% 100%,
    color-mix(in srgb, var(--fond) 12%, transparent) 14%,
    transparent 100%);
}

/* SIGNATURE — le defile s efface aux DEUX bouts, a 5 et 95 pour cent
   (deux occurrences, valeurs relevees telles quelles). */
.df {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* SIGNATURE — la grande vue APPARAIT PAR LE BAS : masque en degre
   `transparent -> plein`, releve une fois sur le modele. Raccourci ici pour
   ne pas evider une vue de 300px de haut. */
.lc__v {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
}


/* 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). */
/* Le bandeau defilant `.df__c--haut` vit dans `section.bl`, qui ne le rognait pas :
   document a 1895px a 390. La section rogne, comme `.df` le fait deja. */
.bl { overflow-x: clip; }

/* >>> 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 */

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

/* contraste-bandes (14/09/2026) — regle portee par la bande qui peint le fond.
   L'affiche ecrit son titre en --fond (.tg--clair) parce qu'elle est posee sur une photo voilee.
   Cadre VIDE, .af__v ne peint rien : creme sur blanc, 1,05. L'emplacement d'affiche prend donc le
   sol sombre que son encre exige ; rempli, la photo le couvre comme avant. */
.af__v .ph--vide { background: var(--texte); }