/* ============================================================
   TEMPLATE-9 (handyman) — feuille SOURCE. dist/ est une sortie.
   Trois rayons seulement : 10 (boutons, petites cartes),
   15 (toutes les vues), 60 (disques). Une seule asymetrie :
   0 10px 0 0, l etiquette du coin bas-gauche.
   Aucune bordure, aucun degrade de couleur : le contour est un
   anneau interieur d un pixel.
   ============================================================ */

:root {
  --r-bt: 10px;
  --r-vue: 15px;
  --r-disque: 60px;
  --cadre: 1200px;
  --marge: 120px;
  --pas: 96px;
  --fil: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter Display', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 18.4px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure, address { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }

/* ---- cadre et aires ---------------------------------------- */

.hm-cadre {
  width: 100%;
  max-width: calc(var(--cadre) + var(--marge) * 2);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.hm-aire { padding-block: var(--pas); background: var(--fond); }
.hm-aire--pale { background: var(--fond-2); }
.hm-aire--fin { padding-block: 32px; }
.hm-aire--marque { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.hm-aire--marque .hm-tit,
.hm-aire--marque .hm-chapo,
.hm-aire--marque .hm-lab { color:var(--sur-bande,var(--sur-marque)); }
.hm-aire--marque .hm-chapo { opacity: .82; }

/* ---- typographie ------------------------------------------- */

.hm-lab {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:var(--encre-marque,var(--marque));
  margin-bottom: 14px;
}
.hm-lab--sur { color:var(--sur-bande,var(--sur-marque)); opacity: .8; }
.hm-h1 {
  font-size: clamp(38px, 6vw, 86.4px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 500;
  margin: 0;
}
.hm-tit {
  font-size: clamp(28px, 4vw, 54.4px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
}
.hm-acc { font-style: normal; color:var(--encre-marque,var(--marque)); }
.hm-aire--marque .hm-acc,
.hm-hero .hm-acc { color: inherit; opacity: .72; }
.hm-chapo, .hm-sous {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--texte-doux);
  font-size: 18.4px;
  line-height: 1.6;
}
.hm-txt { margin-top: 14px; color: var(--texte-doux); }
.hm-txt:first-child { margin-top: 0; }
.hm-mention { margin-top: 18px; font-size: 14px; color: var(--texte-doux); }
.hm-tete { margin-bottom: 44px; max-width: 780px; min-width: 0; }
.hm-pied-bloc { margin-top: 40px; }

/* ---- boutons, liens, listes -------------------------------- */

.hm-bt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-bt);
  background: var(--fond-2);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.2;
  box-shadow: var(--fil);
  transition: transform .18s ease, opacity .18s ease;
  margin-top: 24px;
  max-width: 100%;
}
.hm-bt:hover { transform: translateY(-2px); }
.hm-bt--marque { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); box-shadow: none; }
.hm-bt--sur { background: var(--sur-marque); color:var(--encre-marque,var(--marque)); box-shadow: none; }
.hm-bt--plein { display: flex; justify-content: center; width: 100%; }
/* R7 : porte d appel + porte devis, cote a cote quand ni l une ni l
   autre n occupe deja toute la ligne (les --plein s empilent d eux
   memes, sans besoin d ecart horizontal). */
.hm-bt:not(.hm-bt--plein) + .hm-bt:not(.hm-bt--plein) { margin-left: 12px; }
.hm-fle, .hm-chev { flex: none; }
.hm-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 16px;
  color:var(--encre-marque,var(--marque));
}
.hm-lien:hover { text-decoration: underline; }

.hm-coches { margin-top: 20px; display: grid; gap: 12px; }
.hm-coches--deux { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hm-coches li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hm-coches b { font-weight: 500; }
.hm-coches__t { display: block; color: var(--texte-doux); font-size: 16px; }
.hm-coches--fin { font-size: 16px; }
.hm-coche {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  border-radius: var(--r-disque);
  background:var(--marque);--sur-bande:var(--sur-marque);
}
.hm-aire--marque .hm-coche { background: var(--sur-marque); }

.hm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hm-tags li {
  padding: 7px 14px;
  border-radius: var(--r-bt);
  background: var(--fond-2);
  font-size: 14px;
  color: var(--texte-doux);
}
.hm-tags--sur li { background: rgba(255, 255, 255, .16); color:var(--sur-bande,var(--sur-marque)); }

/* ---- la vue et son etiquette a coin unique ------------------ */

.hm-vue {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-vue);
  background: var(--fond-2);
  min-width: 0;
}
.hm-vue img { width: 100%; height: 100%; object-fit: cover; }
.hm-vue--nue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding-top: 24px;
  color:var(--encre-marque,var(--marque));
  font-size: 40px;
}
/* Sans source d image, l etiquette reprend le fil : elle se pose au bas de
   la vue par une marge automatique au lieu d etre detachee, sinon elle
   deborde du repli qui, lui, est en overflow:hidden. */
.hm-vue--nue .hm-etiq {
  position: static;
  max-width: 100%;
  align-self: flex-start;
  margin-top: auto;
}
.hm-etiq {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - 24px);
  padding: 10px 18px;
  border-radius: 0 var(--r-bt) 0 0;
  background: rgba(0, 0, 0, .5);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---- la file de mots (marquee a bords estompes) ------------- */

.hm-file {
  overflow: hidden;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
}
.hm-file__p { display: flex; width: max-content; gap: 12px; animation: hm-defile 26s linear infinite; }
.hm-file__m {
  flex: none;
  min-width: 0;
  padding: 8px 16px;
  border-radius: var(--r-bt);
  background: var(--fond-2);
  font-size: 14px;
  color: var(--texte-doux);
  white-space: nowrap;
}
.hm-file--large { margin-top: 0; }
.hm-file--large .hm-file__p { animation-duration: 40s; gap: 20px; }
.hm-file--large .hm-file__m { font-size: 22.4px; padding: 12px 24px; background: transparent; color: var(--texte); }
@keyframes hm-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-file__p { animation: none; }
}

/* ---- entete de site ---------------------------------------- */

.hm-tete-site { position: relative; z-index: 40; background: var(--fond); }
.hm-tete-site__in { display: flex; align-items: center; gap: 34px; min-height: 80px; }
.hm-logo { font-size: 22.4px; letter-spacing: -.02em; flex: none; }
.hm-nav { min-width: 0; }
.hm-nav__ul { display: flex; flex-wrap: wrap; gap: 26px; }
.hm-nav__li { position: relative; }
.hm-nav__a { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; padding-block: 28px; }
.hm-nav__a:hover { color:var(--encre-marque,var(--marque)); }
.hm-nav__li--volet:hover .hm-chev,
.hm-nav__li--volet.est .hm-chev { transform: rotate(180deg); }
.hm-chev { transition: transform .2s ease; }
.hm-tete-site__fin { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hm-tete-site__fin .hm-bt { margin-top: 0; }

/* Le volet : pas d espace mort entre le lien et le panneau,
   le retrait est PORTE PAR LE PANNEAU (padding, jamais marge). */
.hm-volet {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hm-nav__li--volet:hover > .hm-volet,
.hm-nav__li--volet:focus-within > .hm-volet,
.hm-nav__li--volet.est > .hm-volet { opacity: 1; visibility: visible; transform: none; }
.hm-volet__in {
  display: flex;
  gap: 40px;
  min-width: 620px;
  max-width: min(900px, calc(100vw - 48px));
  padding: 32px;
  border-radius: var(--r-vue);
  background: var(--fond);
  box-shadow: var(--fil), 0 24px 60px rgba(0, 0, 0, .12);
}
.hm-volet__cols { display: flex; gap: 40px; flex: 1 1 auto; min-width: 0; }
.hm-volet__col { min-width: 0; flex: 1 1 0; }
.hm-volet__t { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color:var(--encre-marque,var(--marque)); margin-bottom: 12px; }
.hm-volet__col li + li { margin-top: 10px; }
.hm-volet__col a { font-size: 16px; color: var(--texte-doux); }
.hm-volet__col a:hover { color: var(--texte); }
.hm-volet__vit { flex: none; width: 240px; min-width: 0; }
.hm-volet__vue { aspect-ratio: 4 / 3; }
.hm-volet__vt { margin-top: 14px; font-size: 16px; }
.hm-volet__vx { margin-top: 6px; font-size: 14px; color: var(--texte-doux); }

.hm-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-bt); background: var(--fond-2); padding: 12px; }
.hm-burger span { display: block; height: 2px; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); border-radius: 2px; }
.hm-burger span + span { margin-top: 5px; }

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

.hm-ariane { padding-block: 20px; background: var(--fond); }
.hm-ariane ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.hm-ariane li + li::before { content: '/'; margin-right: 8px; opacity: .6; }
.hm-ariane a:hover { color:var(--encre-marque,var(--marque)); }

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

.hm-hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; padding-block: 72px; color: #FFFFFF; }
.hm-hero__fond { position: absolute; inset: 0; border-radius: 0; }
.hm-hero__fond::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.hm-hero__fond img { position: absolute; inset: 0; }
.hm-hero__in { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; }
.hm-hero__txt { flex: 1 1 520px; min-width: 0; }
.hm-hero__s { margin-top: 20px; max-width: 56ch; opacity: .9; }
.hm-hero .hm-bt { background: var(--sur-marque); color:var(--encre-marque,var(--marque)); }
.hm-hero .hm-bt--marque { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

/* F1 — l entete du modele flotte sur la scene plutot que de la repousser
   (cause racine #2 de la NORME COQUILLE : « une entete opaque occupe la
   premiere rangee que le modele donne a la matiere »). Home SEULEMENT :
   main > .hm-hero:first-child n existe qu au blueprint home, une page
   interne ouvre sur .hm-ariane, jamais sur la scene — F1 se paie sur la
   home, elle ne se propage pas. Passe en position: absolute, jamais fixed
   (R10 ne guette que les entetes FIXES) : l entete ne pousse plus le hero,
   elle se pose dessus, ancree au haut du document puisqu aucun ancetre
   n est positionne avant elle dans le flux. Scope a 901px : sous ce palier
   le burger et le repli mobile de l entete restent dans leur logique
   d origine (fond plein, position: relative deja redeclaree la-bas). */
@media (min-width: 901px) {
  .hm-page--home .hm-tete-site {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
    color: #FFFFFF;
  }
}
.hm-rappel {
  flex: 0 1 380px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--r-vue);
  background: var(--fond);
  color: var(--texte);
}
.hm-rappel__t { font-size: 27.2px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 22px; }
.hm-rappel__ch { display: block; margin-bottom: 18px; min-width: 0; }
.hm-rappel__ch span { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texte-doux); }
.hm-rappel__ch input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  background: transparent;
  padding: 10px 0;
}
.hm-rappel__p { font-size: 14px; color: var(--texte-doux); margin-top: -8px; margin-bottom: 18px; }
.hm-rappel .hm-bt { margin-top: 8px; }

/* ---- introSeo, blocs, expertise ----------------------------- */

.hm-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.hm-intro .hm-tete { margin-bottom: 0; }
.hm-intro__c { min-width: 0; }

.hm-blocs { display: grid; gap: 72px; }
.hm-bloc { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hm-bloc--inv { flex-direction: row-reverse; }
.hm-bloc__c { flex: 1 1 380px; min-width: 0; }
.hm-bloc__v { flex: 1 1 380px; min-width: 0; aspect-ratio: 4 / 3; }
.hm-bloc__tete { margin-bottom: 24px; }

.hm-exp { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hm-exp__v { flex: 1 1 360px; min-width: 0; aspect-ratio: 1 / 1; }
.hm-exp__c { flex: 1 1 400px; min-width: 0; }

/* ---- services ---------------------------------------------- */

/* R3 : des pistes comptees plutot qu une fratrie qui devine sa largeur —
   la carte orpheline du dernier rang ne s etire plus, elle laisse les
   cellules vides. Le compte de pistes se redeclare a chaque palier
   (base 1200px, flanc ~850px, puis les media queries), jamais devine. */
.hm-srvs, .hm-secs, .hm-mats, .hm-reas, .hm-tars, .hm-aids, .hm-prs, .hm-avs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hm-abs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* R3 : ces redeclarations ne valent que pour la fenetre ou le flanc est
   une grille (>1100px) — sinon leur specificite (deux classes) ecrase
   a tort les pistes redeclarees aux paliers 1100px/520px une fois
   `.hm-flanc-jeu` repasse en display:block (l aside empile en plein
   largeur, plus etroit que ces pistes ne le supposent). Mesure : au
   palier 390px, `.hm-srv__t` tombait a 125px (2 pistes sur ~354px de
   large) au lieu du plein bloc attendu — la fuite de specificite, pas
   un manque de piste. */
@media (min-width: 1101px) {
  .hm-flanc-jeu .hm-srvs, .hm-flanc-jeu .hm-secs, .hm-flanc-jeu .hm-mats,
  .hm-flanc-jeu .hm-reas, .hm-flanc-jeu .hm-aids,
  .hm-flanc-jeu .hm-prs, .hm-flanc-jeu .hm-avs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-flanc-jeu .hm-abs { grid-template-columns: minmax(0, 1fr); }
}
/* R3 : tarifs et certifications n atterrissent jamais dans la colonne
   principale du flanc-jeu — AU_FLANC les route toujours dans l aside
   etroit (cf. render.mjs). Deux ou trois pistes y ecrasaient le
   H3.hm-tar__t / les cartes .hm-cert ; une seule piste, jamais
   devinee sur la piste des voisins de la colonne large. Scope a la
   seule fenetre ou le flanc est une grille (>1100px, cf. l empilement
   plus bas) pour ne pas ecraser en specificite les pistes
   redeclarees aux paliers 1100px/520px, ou l aside redevient un bloc
   plein largeur comme ses voisins. */
@media (min-width: 1101px) {
  .hm-flanc .hm-tars, .hm-flanc .hm-certs { grid-template-columns: minmax(0, 1fr); }
}
.hm-srv, .hm-sec, .hm-mat, .hm-rea, .hm-tar, .hm-aid, .hm-pr, .hm-av {
  min-width: 0;
  border-radius: var(--r-vue);
  background: var(--fond);
  box-shadow: var(--fil);
  overflow: hidden;
}
.hm-aire--pale .hm-srv, .hm-aire--pale .hm-av, .hm-aire--pale .hm-mat { background: var(--fond); }
.hm-srv__v, .hm-sec__v, .hm-mat__v, .hm-rea__v, .hm-pr__v { aspect-ratio: 4 / 3; border-radius: 0; }
.hm-srv__c, .hm-sec__c, .hm-pr__c { padding: 26px; min-width: 0; }
.hm-srv__t, .hm-sec__t, .hm-mat__t, .hm-rea__t, .hm-tar__t, .hm-aid__t, .hm-pr__t {
  font-size: 22.4px;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 500;
}
.hm-mat__t, .hm-rea__t { padding: 22px 26px 0; }
.hm-srv__x, .hm-sec__c p, .hm-mat__x, .hm-rea__x, .hm-tar__x, .hm-aid p, .hm-pr__x {
  margin-top: 10px;
  color: var(--texte-doux);
  font-size: 16px;
}
.hm-mat__x, .hm-rea__x { padding: 0 26px 26px; }
.hm-srv__f { margin-top: 18px; }
.hm-srv__c .hm-lien { margin-top: 14px; }
.hm-tar, .hm-aid { padding: 30px; }
.hm-tar__p { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hm-tar__p b, .hm-pr__p b, .hm-fp__p b { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.hm-tar__p span, .hm-pr__p span, .hm-fp__p span { font-size: 14px; color: var(--texte-doux); }
.hm-aid__c { margin-top: 14px; font-size: 14px; color: var(--texte-doux); }

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

.hm-why { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hm-why__v { flex: 1 1 360px; min-width: 0; aspect-ratio: 3 / 4; position: sticky; top: 24px; }
.hm-why__c { flex: 1 1 420px; min-width: 0; }
.hm-why__l { display: grid; gap: 28px; }
.hm-why__i { display: flex; gap: 18px; min-width: 0; }
.hm-why__i > div { min-width: 0; }
.hm-why__p { flex: none; width: 14px; height: 14px; margin-top: 8px; border-radius: var(--r-disque); background:var(--marque);--sur-bande:var(--sur-marque); }
.hm-why__t { font-size: 22.4px; font-weight: 500; letter-spacing: -.01em; }
.hm-why__i p { margin-top: 8px; color: var(--texte-doux); font-size: 16px; }

/* ---- chiffres en quinconce --------------------------------- */

.hm-sgs { display: flex; flex-wrap: wrap; gap: 32px; }
.hm-sg { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-sg--bas { margin-top: 40px; }
.hm-sg__v { font-size: clamp(32px, 4vw, 54.4px); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; }
.hm-sg__s { font-size: 18.4px; margin-left: 6px; opacity: .8; }
.hm-sg__l { font-size: 16px; opacity: .78; }

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

.hm-pas-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: pas; }
/* R3 : scope >1100px, cf. la note du bloc services — meme fuite de
   specificite sur l aside empile sous 1100px. */
@media (min-width: 1101px) {
  .hm-flanc-jeu .hm-pas-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hm-pas {
  min-width: 0;
  padding: 30px;
  border-radius: var(--r-vue);
  background: var(--fond-2);
}
.hm-aire--pale .hm-pas { background: var(--fond); }
.hm-pas__n { font-size: 14px; letter-spacing: 1.2px; color:var(--encre-marque,var(--marque)); }
.hm-pas__v { margin-top: 18px; aspect-ratio: 16 / 10; }
.hm-pas__t { margin-top: 18px; font-size: 22.4px; font-weight: 500; letter-spacing: -.01em; }
.hm-pas__x { margin-top: 10px; color: var(--texte-doux); font-size: 16px; }

/* ---- urgence ------------------------------------------------ */

.hm-urg { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.hm-urg__c { flex: 1 1 420px; min-width: 0; }
.hm-urg__t { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.hm-urg__x { margin-top: 12px; max-width: 60ch; opacity: .86; }
.hm-urg__f { flex: 0 1 auto; min-width: 0; }
.hm-urg__f .hm-bt { margin-top: 0; }

/* ---- avis --------------------------------------------------- */

.hm-av { padding: 30px; }
.hm-av__h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hm-av__h > div { min-width: 0; }
.hm-av__d {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: var(--r-disque);
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  display: grid;
  place-items: center;
  font-size: 22.4px;
}
.hm-av__n { font-size: 18.4px; }
.hm-av__r { font-size: 14px; color: var(--texte-doux); }
.hm-note { display: inline-flex; gap: 2px; margin-left: auto; color: var(--bordure); }
.hm-note__e.est { color:var(--encre-marque,var(--marque)); }
.hm-av__t { margin-top: 20px; font-size: 22.4px; font-weight: 500; letter-spacing: -.01em; }
.hm-av__x { margin-top: 10px; color: var(--texte-doux); font-size: 16px; }

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

.hm-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-faq__tete { margin-bottom: 0; }
.hm-faq__l { display: grid; gap: 12px; min-width: 0; }
.hm-q { border-radius: var(--r-vue); background: var(--fond-2); overflow: hidden; }
.hm-q summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-size: 18.4px;
  min-width: 0;
}
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q summary span { min-width: 0; }
.hm-q[open] .hm-chev { transform: rotate(180deg); }
.hm-q__r { padding: 0 26px 24px; color: var(--texte-doux); font-size: 16px; }
.hm-faq__e { padding: 30px; border-radius: var(--r-vue); background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); min-width: 0; }
.hm-faq__et { font-size: 22.4px; }
.hm-faq__ex { margin-top: 10px; opacity: .84; font-size: 16px; }
.hm-faq__e .hm-bt { background: var(--sur-marque); color:var(--encre-marque,var(--marque)); }

/* ---- secteurs, zones, carte -------------------------------- */

.hm-zns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
/* R3 : scope >1100px, cf. la note du bloc services — meme fuite de
   specificite sur l aside empile sous 1100px. */
@media (min-width: 1101px) {
  .hm-flanc-jeu .hm-zns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hm-zn { min-width: 0; }
.hm-zn a { display: block; min-width: 0; }
.hm-zn__v { aspect-ratio: 16 / 10; }
.hm-zn__t { display: block; margin-top: 14px; font-size: 18.4px; }
.hm-zn a:hover .hm-zn__t { color:var(--encre-marque,var(--marque)); }
.hm-zn .hm-fle { display: inline-block; margin-top: 6px; color:var(--encre-marque,var(--marque)); }

.hm-loc { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
/* T5 : le texte est reste a la largeur de son flex-basis fixe, ecrase
   par la carte voisine. flex: 1 1 auto rend la matiere a sa place. */
.hm-loc__c { flex: 1 1 auto; min-width: 0; }
.hm-loc__v { flex: 1 1 420px; min-width: 0; aspect-ratio: 16 / 10; }
.hm-loc__a { margin-top: 6px; color: var(--texte-doux); }

/* R3 : meme logique que les cartes services plus haut — pistes
   comptees, jamais flex qui etire la carte orpheline du dernier
   rang. Le compte se redeclare a chaque palier, jamais devine. */
.hm-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.hm-cert {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 20px 24px;
  border-radius: var(--r-vue);
  background: var(--fond-2);
}
.hm-cert__p { width: 10px; height: 10px; border-radius: var(--r-disque); background:var(--marque);--sur-bande:var(--sur-marque); flex: none; }
.hm-cert b { font-weight: 500; }
.hm-cert span:not(.hm-cert__p) { font-size: 14px; color: var(--texte-doux); min-width: 0; }

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

.hm-ab { min-width: 0; }
.hm-ab__sc {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-vue);
  overflow: hidden;
  background: var(--fond);
  touch-action: pan-y;
}
.hm-ab__f { position: absolute; inset: 0; }
.hm-ab__f .hm-vue { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.hm-ab__f--ap { clip-path: inset(0 0 0 var(--pos)); }
.hm-ab__e {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  max-width: calc(50% - 20px);
  min-width: 0;
  padding: 8px 14px;
  border-radius: 0 var(--r-bt) 0 0;
  background: rgba(0, 0, 0, .5);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.hm-ab__e--g { left: 0; }
.hm-ab__e--d { right: 0; border-radius: var(--r-bt) 0 0 0; }
.hm-ab__tige {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #FFFFFF;
  z-index: 4;
  pointer-events: none;
}
.hm-ab__tige::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-disque);
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.hm-ab__cur {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.hm-ab__cur::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.hm-ab__cur::-moz-range-thumb { width: 44px; height: 100%; border: 0; opacity: 0; }
.hm-ab__cur:focus-visible { opacity: 1; outline: 2px solid var(--marque); outline-offset: 2px; }
.hm-ab__c { margin-top: 22px; min-width: 0; }
.hm-ab__t { font-size: 22.4px; font-weight: 500; letter-spacing: -.01em; }
.hm-ab__c p { margin-top: 8px; color: var(--texte-doux); font-size: 16px; }

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

.hm-mais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* R3 : scope >1100px, cf. la note du bloc services — meme fuite de
   specificite sur l aside empile sous 1100px. */
@media (min-width: 1101px) {
  .hm-flanc-jeu .hm-mais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hm-mai { min-width: 0; }
.hm-mai a {
  display: block;
  min-width: 0;
  padding: 18px;
  border-radius: var(--r-vue);
  background: var(--fond-2);
  height: 100%;
}
.hm-aire--pale .hm-mai a { background: var(--fond); }
.hm-mai__v { aspect-ratio: 16 / 9; }
.hm-mai__t { display: block; margin-top: 14px; font-size: 18.4px; }
.hm-mai__x { display: block; margin-top: 6px; color: var(--texte-doux); font-size: 14px; }
.hm-mai .hm-fle { margin-top: 12px; color:var(--encre-marque,var(--marque)); }

/* ---- bande d appel ------------------------------------------ */

.hm-cta { position: relative; overflow: hidden; }
.hm-cta__fond { position: absolute; inset: 0; border-radius: 0; opacity: .28; }
.hm-cta__fond img { position: absolute; inset: 0; height: 100%; }
.hm-cta__in { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hm-cta__c { flex: 1 1 420px; min-width: 0; }
.hm-cta__t { font-size: clamp(28px, 4vw, 54.4px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.hm-cta__x { margin-top: 14px; max-width: 56ch; opacity: .86; }
.hm-cta__f { flex: 1 1 320px; min-width: 0; }
.hm-cta__ch { display: block; margin-bottom: 16px; min-width: 0; }
.hm-cta__ch span { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .8; }
.hm-cta__ch input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  background: transparent;
  padding: 10px 0;
  color: inherit;
}

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

.hm-ct { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hm-ct__c { flex: 1 1 340px; min-width: 0; }
.hm-ct__co { margin-top: 32px; display: grid; gap: 20px; }
.hm-ct__co li { min-width: 0; }
.hm-form {
  flex: 1 1 420px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--r-vue);
  background: var(--fond-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.hm-form__ch { min-width: 0; }
.hm-form__ch--large, .hm-form .hm-bt, .hm-form .hm-mention { grid-column: 1 / -1; }
.hm-form__ch span { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texte-doux); }
.hm-form input, .hm-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--bordure);
  background: transparent;
  padding: 10px 0;
  resize: vertical;
}
.hm-form .hm-bt { margin-top: 8px; }

/* ---- journal : carte maitresse + cartes horizontales -------- */

.hm-bls { display: flex; flex-wrap: wrap; gap: 24px; }
.hm-bl { min-width: 0; border-radius: var(--r-vue); overflow: hidden; background: var(--fond-2); }
.hm-aire--pale .hm-bl { background: var(--fond); }
.hm-bl--maitre { flex: 1 1 420px; }
.hm-bls__pile { flex: 1 1 420px; min-width: 0; display: grid; gap: 24px; align-content: start; }
.hm-bl--maitre .hm-bl__v { aspect-ratio: 16 / 10; }
.hm-bl--large a { display: flex; gap: 20px; align-items: stretch; min-width: 0; }
.hm-bl--large .hm-bl__v { flex: 0 0 38%; min-width: 0; aspect-ratio: auto; border-radius: 0; }
.hm-bl--large .hm-bl__c { flex: 1 1 auto; }
.hm-bl__c { padding: 24px; min-width: 0; }
.hm-bl__t { font-size: 22.4px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.hm-bl__x { margin-top: 10px; color: var(--texte-doux); font-size: 16px; }
.hm-bl__m { margin-top: 12px; font-size: 14px; color:var(--encre-marque,var(--marque)); }
.hm-bl a:hover .hm-bl__t { color:var(--encre-marque,var(--marque)); }

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

.hm-art { max-width: 800px; margin-inline: auto; min-width: 0; }
.hm-art__t { font-size: clamp(30px, 4.4vw, 54.4px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.hm-art__m { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.hm-art__v { margin-top: 32px; aspect-ratio: 16 / 9; }
.hm-art__som { margin-top: 32px; padding: 26px; border-radius: var(--r-vue); background: var(--fond-2); }
.hm-art__som li + li { margin-top: 8px; }
.hm-art__som a { color: var(--texte-doux); font-size: 16px; }
.hm-art__som a:hover { color:var(--encre-marque,var(--marque)); }
.hm-art__c { margin-top: 32px; }
.hm-art__h2 { margin-top: 40px; font-size: 32px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; }
.hm-art__h3 { margin-top: 28px; font-size: 22.4px; font-weight: 500; }
.hm-art__p { margin-top: 16px; color: var(--texte-doux); }
.hm-art__l { margin-top: 16px; display: grid; gap: 10px; color: var(--texte-doux); }
.hm-art__l li { padding-left: 20px; position: relative; }
.hm-art__l li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: var(--r-disque); background:var(--marque);--sur-bande:var(--sur-marque); }
.hm-art__enc { margin-top: 28px; padding: 26px; border-radius: var(--r-vue); background: var(--fond-2); }
.hm-art__enct { font-size: 18.4px; }

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

.hm-leg { max-width: 820px; min-width: 0; }
.hm-leg__m { font-size: 14px; color: var(--texte-doux); }
.hm-leg__b { margin-top: 36px; }
.hm-leg__t { font-size: 27.2px; font-weight: 500; letter-spacing: -.02em; }
.hm-leg__p { margin-top: 12px; color: var(--texte-doux); }

.hm-facs { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-fac {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--r-bt);
  background: var(--fond-2);
  font-size: 16px;
  color: var(--texte-doux);
}
.hm-fac.est { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

.hm-pr__t a:hover { color:var(--encre-marque,var(--marque)); }
.hm-fp { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hm-fp__v { flex: 1 1 380px; min-width: 0; aspect-ratio: 4 / 3; }
.hm-fp__c { flex: 1 1 380px; min-width: 0; }
.hm-fp__t { font-size: clamp(30px, 4vw, 54.4px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.hm-fp__x { margin-top: 14px; color: var(--texte-doux); }
.hm-fp__p { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* R3 : meme logique que les cartes services/certifications — pistes
   comptees, jamais flex qui etire la fiche orpheline du dernier
   rang. */
.hm-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hm-spec {
  min-width: 0;
  padding: 20px 24px;
  border-radius: var(--r-vue);
  background: var(--fond);
}
.hm-spec dt { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texte-doux); }
.hm-spec dd { margin: 6px 0 0; font-size: 18.4px; }

/* ---- flanc lateral --------------------------------------------------
   pages internes : corps large a DROITE, colonne laterale a GAUCHE
   (l inverse du flanc droit des fiches voisines — cf. commentaire
   au-dessus de AU_FLANC/A_FLANC dans render.mjs). La grille se pose
   directement sur <main class="hm-flanc-jeu"> : chaque piece du corps
   est un enfant direct de <main>, l aside est son seul autre enfant,
   place en colonne 1 et etale sur les lignes du corps via le
   grid-row inline pose par render.mjs. */
.hm-flanc-jeu {
  display: grid;
  /* T5 : a 300px, le H2.hm-tit du flanc (corps ~54px) retombait a 256px
     de large une fois la carte otee de son remplissage (256/54 = 4.7em,
     sous le seuil de 7em) — jamais corrige en baissant la police, la
     colonne s elargit pour lui rendre sa place. */
  grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  max-width: calc(var(--cadre) + var(--marge) * 2);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.hm-flanc-jeu > :not(.hm-flanc) { min-width: 0; }
.hm-flanc-jeu > .hm-aire > .hm-cadre,
.hm-flanc-jeu > .hm-ariane > .hm-cadre,
.hm-flanc-jeu > .hm-hero > .hm-cadre {
  /* T5 : hero n est pas enveloppe par Aire() mais atterrit dans la meme
     colonne principale — sans cette derogation, le pave interne de 120px
     de chaque cote ecrasait le H1 (86px de corps) sous le seuil de 7em
     une fois la colonne retrecie par l elargissement du flanc. La colonne
     de grille porte deja la respiration ; le cadre interne n a pas a la
     redoubler. */
  padding: 0;
  max-width: none;
}
.hm-flanc-jeu > .hm-cta > .hm-cadre { padding-inline: 26px; }
.hm-flanc {
  grid-column: 1;
  min-width: 0;
  padding: 8px 22px;
  border-radius: var(--r-vue);
  background: var(--fond-2);
}
.hm-flanc .hm-aire { padding-block: 32px; }
.hm-flanc .hm-cadre { padding: 0; max-width: none; }
.hm-flanc .hm-aire--pale { background: transparent; }

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

.hm-pied { background: var(--fond-2); padding-block: 72px 40px; }
.hm-pied__haut { display: flex; flex-wrap: wrap; gap: 48px; }
.hm-pied__marque { flex: 1 1 280px; min-width: 0; }
.hm-pied__nom { font-size: 22.4px; letter-spacing: -.02em; }
.hm-pied__d { margin-top: 12px; color: var(--texte-doux); font-size: 16px; max-width: 40ch; }
.hm-pied__col { flex: 1 1 180px; min-width: 0; }
.hm-pied__col li + li { margin-top: 10px; }
.hm-pied__col a, .hm-pied__nap li { color: var(--texte-doux); font-size: 16px; }
.hm-pied__col a:hover { color:var(--encre-marque,var(--marque)); }
.hm-pied__bas {
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--texte-doux);
  box-shadow: inset 0 1px 0 var(--bordure);
}
.hm-pied__l { display: flex; flex-wrap: wrap; gap: 18px; }
.hm-pied__l a:hover { color:var(--encre-marque,var(--marque)); }

/* ---- adaptations -------------------------------------------- */

@media (max-width: 1100px) {
  :root { --marge: 48px; --pas: 72px; }
  .hm-why__v { position: static; }
  /* sous 1100px le flanc redevient un simple empilement : la grille
     (et le grid-row inline pose par render.mjs sur l aside) ne
     s applique qu a display:grid, donc display:block suffit a
     l annuler sans !important — le corps garde l ordre du DOM,
     l aside suit en dernier. */
  .hm-flanc-jeu { display: block; }
  /* R3 : le nombre de pistes se redeclare a ce palier, jamais devine. */
  .hm-srvs, .hm-secs, .hm-mats, .hm-reas, .hm-tars, .hm-aids, .hm-prs, .hm-avs,
  .hm-pas-l, .hm-mais, .hm-certs, .hm-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-zns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-abs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --marge: 24px; --pas: 56px; }
  .hm-nav, .hm-tete-site__fin .hm-bt { display: none; }
  .hm-burger { display: block; margin-left: auto; }
  .hm-tete-site.est .hm-nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    padding: 20px var(--marge) 28px;
    background: var(--fond);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
    max-height: 70vh;
    overflow-y: auto;
  }
  .hm-tete-site.est .hm-nav__ul { flex-direction: column; gap: 0; }
  .hm-tete-site.est .hm-nav__a { padding-block: 14px; width: 100%; justify-content: space-between; }
  .hm-tete-site { position: relative; }
  .hm-volet { position: static; padding-top: 0; display: none; }
  .hm-nav__li--volet.est > .hm-volet { display: block; opacity: 1; visibility: visible; transform: none; }
  .hm-nav__li--volet:hover > .hm-volet { display: none; }
  .hm-nav__li--volet.est:hover > .hm-volet { display: block; }
  .hm-volet__in { flex-direction: column; min-width: 0; padding: 0 0 18px; box-shadow: none; gap: 20px; }
  .hm-volet__cols { flex-direction: column; gap: 20px; }
  .hm-volet__vit { width: 100%; }
  .hm-hero { min-height: 0; }
  .hm-bloc, .hm-bloc--inv { flex-direction: column; }
  .hm-bl--large a { flex-direction: column; }
  .hm-bl--large .hm-bl__v { flex: none; aspect-ratio: 16 / 9; }
  .hm-sg--bas { margin-top: 0; }
}

@media (max-width: 520px) {
  :root { --marge: 18px; --pas: 44px; }
  .hm-rappel, .hm-form, .hm-tar, .hm-aid, .hm-av, .hm-pas { padding: 22px; }
  .hm-srv__c, .hm-sec__c, .hm-pr__c, .hm-bl__c { padding: 20px; }
  .hm-urg__f, .hm-urg__f .hm-bt { width: 100%; justify-content: center; }
  /* R3 : sous 520px, une seule piste — le nombre se redeclare, jamais devine. */
  .hm-srvs, .hm-secs, .hm-mats, .hm-reas, .hm-tars, .hm-aids, .hm-prs, .hm-avs,
  .hm-pas-l, .hm-mais, .hm-zns, .hm-abs, .hm-certs, .hm-specs {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 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). */
/* blocsSeo : l article de bloc, enfant d une grille `1fr` (= minmax(auto, 1fr)), prenait
   la largeur de contenu de son flex (525px pour 390) : colonne bornee a zero et enfants
   bornes a 100 %. zonesAutour a 768 : le cadre vide gardait sa largeur intrinseque
   (288px pour une colonne de 230) : il prend sa colonne. */
.hm-blocs { grid-template-columns: minmax(0, 1fr); }
.hm-bloc { min-width: 0; }
.hm-bloc > * { max-width: 100%; }
.hm-zn .hm-vue { width: 100%; max-width: 100%; min-width: 0; }


/* MOBILE — debordement mesure le 7 septembre 2026, suite. */
/* introSeo a 320 : `minmax(320px, 1fr)` forcait 320px dans un cadre de 284. Borne a la largeur disponible. */
.hm-intro { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Volets a 1024 : 620px ancres a gauche de l entree Zones (430px) -> 1050. Entre 1024 et 1180 la nav
   est le bloc conteneur et le volet s ancre a son bord droit (646px) : 26..646. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hm-nav { position: relative; }
  .hm-nav__li { position: static; }
  .hm-volet { left: auto; right: 0; }
}


/* Cadres a 320 : le cadre vide (`.hm-vue--nue`, maillage et process) garde une largeur intrinseque
   de 320px dans un cadre de 284 : jamais plus large que sa colonne. */
.hm-vue { max-width: 100%; min-width: 0; }


/* (8 sept) en colonne sous 768, `flex: 1 1 380px` du cadre de bloc devenait une HAUTEUR de 380px
   (R5a : 0.93 pour 1.33 declare) ; la base suit le contenu, le rapport 4/3 fait la hauteur. */
@media (max-width: 767px) { .hm-bloc__v { flex-basis: auto; height: auto; width: 100%; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu. */
[data-slot="hm-ab__v"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="hm-cta__fond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #1f3d9b;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="hm-cta__fond"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* R4b — hm-hero__fond, ajout manuel (hors passe teinter-cadres.mjs du
   2026-08-25, qui n avait teinte que hm-ab__v et hm-cta__fond) : contraste
   median mesure 3.61 sur les 5 pages du gate. Le hero garde son H1/sous-titre
   en encre claire (pense pour une photo en fond) meme a l etat vide ; le
   fallback clair de cadre-vide.css (encre sombre a .68) perd donc face a la
   couleur du titre, plus specifique. Meme palette sombre que les autres
   cadres porteurs ci-dessus : #171b20 sous du blanc passe tres au-dessus de
   4.5:1, jamais retouche a la main sans remesurer. */
[data-slot="hm-hero__fond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}

/* AUDIT-CONTRASTE-CTA .hm-bt--marque (14/09) : CTA rendu illisible (texte clair sur bande claire / foncé sur
   foncé selon la page). Solide marque+sur-marque = paire à contraste garanti, toute bande. */
.hm-bt--marque { background:var(--marque);--sur-bande:var(--sur-marque) !important; border-color:var(--encre-marque,var(--marque)) !important; color:var(--sur-bande,var(--sur-marque)) !important; }

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

/* contraste-bandes (2026-09-14) — regles portees par la pastille qui peint le fond.
   1. .hm-etiq est une PASTILLE : elle peint son propre fond (rgba(0,0,0,.5)) et declare sa propre
      encre (#FFFFFF, regle .hm-etiq). Dans un cadre vide, la regle de norme
      `[data-slot]:not(:has(img)) > *` repeint tout enfant en --cadre-vide-encre (sombre, .68)
      sans retirer la pastille noire : deux regles qui se contredisent, encre sombre sur pastille
      noire posee sur le gris du cadre = 3,89. La pastille garde l encre qu elle declare deja ;
      la taille de legende de la norme (font-size) n est pas touchee. */
.hm-vue--nue .hm-etiq { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }