/* Coquille Energy Max — SOURCE de la feuille. dist/style.css en est une
   COPIE ecrasee a chaque rendu : ne jamais editer la copie.

   Huit jetons de couleur, aucun autre. `--sur-marque` est CALCULE par
   render.mjs (contraste contre le blanc et contre le noir), jamais choisi.
   Aucun hex en dur ici : les voiles se font au color-mix des jetons.

   L idiome du modele, en une phrase : rayon zero, serif geant, filets. */

:root {
  --pas: 8px;
  --wrap: 1240px;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ui: 'Urbanist', var(--sans);
  --filet: 6px;             /* le filet EPAIS qui coiffe les cartes */
  --duree: .18s;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--texte);
  background: var(--fond);
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; font-family: var(--serif); letter-spacing: -.03em; line-height: 1.1; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Un intitule reserve a l assistance : sorti de la peinture, jamais de
   l arbre. gate-recouvrement sait le reconnaitre a son clip-path. */
.em-vis {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.em-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--pas) * 3); }

.em-sec { padding: calc(var(--pas) * 14) 0; }
.em-sec--cl { background: var(--fond-2); }
.em-sec--fin { padding: calc(var(--pas) * 6) 0; }

/* Une bande PLEINE : fond de marque, encre calculee, cadres pointilles
   semes en fond — la signature du modele sur ses blocs pleins. */
.em-sec--pl {
  position: relative;
  color: var(--sur-marque);
  background: var(--marque);
}
.em-sec--pl::before {
  content: ''; position: absolute; inset: calc(var(--pas) * 2);
  border: 1px dashed color-mix(in srgb, var(--sur-marque) 34%, transparent);
  pointer-events: none;
}
.em-sec--pl h1, .em-sec--pl h2, .em-sec--pl h3, .em-sec--pl strong { color: var(--sur-marque); }
.em-sec--pl p, .em-sec--pl span, .em-sec--pl small, .em-sec--pl li { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }

/* ---------- Briques communes ---------- */

/* SIGNATURE — l etiquette est une PILULE bordee, posee en RETRAIT de 24
   par rapport au titre : c est le premier trait que l on reconnait du
   modele. Le tiret de marque tient dans un pseudo-element, jamais dans une
   balise vide. */
.em-eb {
  display: inline-flex; align-items: center; gap: calc(var(--pas) * 1.25);
  padding: calc(var(--pas) * .75) calc(var(--pas) * 2) calc(var(--pas) * .75) calc(var(--pas) * 1.5);
  border: 1px solid var(--bordure); border-radius: 999px;
  font-family: var(--ui); font-style: normal; font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: calc(var(--pas) * 2);
}
.em-eb::before { content: ''; display: block; width: 22px; height: 2px; background: var(--accent); flex: none; }
.em-eb--sur { color: color-mix(in srgb, var(--sur-marque) 88%, transparent); border-color: color-mix(in srgb, var(--sur-marque) 34%, transparent); }
.em-eb--sur::before { background: currentColor; }

.em-h { font-size: clamp(28px, 3.4vw, 40px); }
.em-h--md { font-size: clamp(26px, 3vw, 34px); }
.em-h--gr { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.032em; }
.em-h--xl { font-size: clamp(34px, 6.2vw, 64px); line-height: 1.06; letter-spacing: -.04em; }
/* Le titre est ecrit MOT A MOT : chaque mot tient son propre pave, ce qui
   donne les lignes hautes et l aplomb du modele. */
.em-h > span, .em-h__a > span { display: inline-block; }
.em-h__a { font-style: italic; color: var(--marque); }
/* NORME COQUILLE — les scenes sombres se nomment ENSEMBLE. L accent du
   titre et sa suite prennent leur encre sur la marque : sur un fond de
   marque, il faut les repasser en encre claire PARTOUT ou la scene est
   sombre, pas seulement sur la bande pleine. */
.em-sec--pl .em-h__a,
.em-hero__af .em-h__a,
.em-cb .em-h__a,
.em-ch__ls .em-h__a,
.em-nv__vit .em-h__a,
.em-ft .em-h__a { color: var(--sur-marque); font-style: italic; }
.em-h__s { display: block; margin-top: calc(var(--pas) * 1.5); font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: -.02em; line-height: 1.5; color: var(--texte-doux); }
.em-sec--pl .em-h__s,
.em-hero__af .em-h__s,
.em-cb .em-h__s,
.em-ch__ls .em-h__s,
.em-nv__vit .em-h__s,
.em-ft .em-h__s { color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

.em-cp { margin-top: calc(var(--pas) * 2); font-size: 17px; line-height: 1.62; color: var(--texte-doux); max-width: 62ch; }
.em-sec--pl .em-cp,
.em-hero__af .em-cp,
.em-cb .em-cp,
.em-ch__ls .em-cp,
.em-nv__vit .em-cp,
.em-ft .em-cp { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.em-tx { margin-top: calc(var(--pas) * 1.75); line-height: 1.68; color: var(--texte-doux); }
.em-tx:first-child { margin-top: 0; }

.em-mn { margin-top: calc(var(--pas) * 2); font-size: 13px; line-height: 1.55; color: var(--texte-doux); }
.em-mn--ce { text-align: center; margin-top: calc(var(--pas) * 4); }

/* SIGNATURE — la coche est CARREE et posee par la mise en page, dans la
   ligne meme du texte : le modele n aligne jamais une icone en marge. */
.em-co { margin-top: calc(var(--pas) * 2.5); }
.em-co > li {
  display: flex; align-items: flex-start; gap: calc(var(--pas) * 1.5);
  padding: calc(var(--pas) * 1.5) 0;
  border-top: 1px solid var(--bordure);
  font-size: 15px; line-height: 1.5;
}
.em-co > li:first-child { border-top: 0; padding-top: 0; }
.em-co > li::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px;
  border: 1px solid var(--accent);
  /* La coche elle-meme : une encoche taillee dans le carre. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 34% 100%, 100% 24%, 78% 6%, 32% 66%, 0 34%);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.em-co > li > p { min-width: 0; }
.em-co--se > li { padding: calc(var(--pas) * 1.1) 0; font-size: 14px; }
.em-co--sur > li { border-top-color: color-mix(in srgb, var(--sur-marque) 26%, transparent); color: color-mix(in srgb, var(--sur-marque) 88%, transparent); }
.em-co--sur > li::before { border-color: currentColor; background: color-mix(in srgb, var(--sur-marque) 22%, transparent); }

.em-tg { display: flex; flex-wrap: wrap; gap: calc(var(--pas)); margin-top: calc(var(--pas) * 2); }
/* SIGNATURE — la mention tient dans un CARTOUCHE bord a bord, coin haut
   droit rabattu : le repere de forme du modele sur les listes courtes. */
.em-tg > li > b {
  display: block;
  padding: calc(var(--pas) * .75) calc(var(--pas) * 1.5);
  border: 1px solid var(--bordure);
  font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--texte-doux);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.em-sec--pl .em-tg > li > b { border-color: color-mix(in srgb, var(--sur-marque) 34%, transparent); color: color-mix(in srgb, var(--sur-marque) 86%, transparent); }

.em-ic {
  font-style: normal; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--bordure);
  font-size: 18px; line-height: 1;
  margin-bottom: calc(var(--pas) * 2);
}

/* Le rang : un CARRE plein de marque, jamais une pastille. */
.em-nu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: var(--marque); color: var(--sur-marque);
  font-family: var(--ui); font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.em-nu--gr { width: 52px; height: 52px; font-size: 16px; }

.em-et { display: inline-flex; gap: 3px; }
.em-et > b, .em-et > s { width: 13px; height: 13px; display: block; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.em-et > b { background: var(--accent); }
.em-et > s { background: var(--bordure); }

/* Le bouton : RECTANGLE net, rayon zero. */
.em-bt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--pas) * 1.9) calc(var(--pas) * 3.25);
  font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background var(--duree), color var(--duree), border-color var(--duree);
}
.em-bt--pl { background: var(--marque); color: var(--sur-marque); }
.em-bt--pl:hover { background: color-mix(in srgb, var(--marque) 84%, var(--texte)); }
.em-bt--iv { background: var(--fond); color: var(--marque); }
.em-bt--iv:hover { background: color-mix(in srgb, var(--fond) 88%, var(--marque)); }
.em-bt--tr { background: transparent; border-color: color-mix(in srgb, var(--sur-marque) 52%, transparent); color: var(--sur-marque); }
.em-bt--tr:hover { background: color-mix(in srgb, var(--sur-marque) 14%, transparent); }
.em-bt--min { padding: calc(var(--pas) * 1.4) calc(var(--pas) * 2.25); font-size: 14px; }
.em-bt--large { width: 100%; margin-top: calc(var(--pas) * 3); }
.em-bt--inerte { cursor: default; }
/* NORME COQUILLE, regle 7 — la porte CREUSE.
   Elle se pose aussi bien sur le papier que sur un panneau de marque : elle
   ne CHOISIT donc pas son encre, elle la prend au COURANT, et son filet avec.
   Une classe qui ecrirait sa couleur en dur deviendrait illisible des qu on
   la poserait sur une scene sombre. */
.em-bt--cr { background: transparent; border-color: currentColor; color: inherit; }
.em-bt--cr:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
/* La PAIRE de la regle 7 : les deux portes cote a cote, dans le meme
   conteneur, a toutes les largeurs. */
.em-pa { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); }
.em-pa > .em-bt { margin-top: 0; }
/* Le bouton porte un FILET d accent a sa gauche : la marque signe chaque
   appel, sans icone et sans arrondi. */
.em-bt__f { flex: none; width: 14px; height: 2px; margin-right: calc(var(--pas) * 1.25); background: currentColor; }
.em-bt--pl .em-bt__f { background: var(--accent); }

.em-ln {
  display: inline-flex; align-items: center; gap: calc(var(--pas));
  font-family: var(--ui); font-size: 15px; font-weight: 600;
  text-decoration: none; border-bottom: 2px solid var(--marque);
  padding-bottom: 3px; color: var(--marque);
}
/* Le lien nu ne porte AUCUNE fleche : le trait sous l intitule suffit,
   c est la forme relevee sur le modele. */
.em-ln--inerte { border-bottom-color: var(--bordure); color: var(--texte-doux); }
.em-ln--in { margin-top: calc(var(--pas) * 2); }

/* La tete de section est FENDUE : l intitule tient la gauche, le propos
   et l appel de suite se rangent a DROITE — jamais un chapo sous le
   titre. La suite est ecrite AVANT le titre et remise en place par
   `order`. */
.em-te { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--pas) * 4); margin-bottom: calc(var(--pas) * 6); }
.em-te .em-eb { order: 1; flex: 1 1 100%; }
.em-te .em-h { order: 2; flex: 1 1 480px; min-width: 0; margin: 0; }
.em-te__su { order: 3; flex: 1 1 340px; min-width: 0; }
.em-te__su .em-bt { margin-top: calc(var(--pas) * 3); }
.em-te--ce { flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.em-te--ce .em-eb { justify-content: center; }
.em-te--ce .em-cp { margin-left: auto; margin-right: auto; }

/* La vue : une figure sans marge, la photo tient le cadre entier. Le
   repere de place s ecrit AVANT elle et se range dessous par `order`. */
.em-ph { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; position: relative; overflow: hidden; background: var(--fond-2); }
.em-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-ph--nu { background: color-mix(in srgb, var(--marque) 8%, var(--fond-2)); min-height: 160px; }
.em-ph__hc { position: absolute; inset: 0; pointer-events: none; background:
  repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--marque) 9%, transparent) 14px 15px); }
.em-ph__nom {
  order: 2; position: relative; z-index: 2;
  padding: 0 calc(var(--pas)) calc(var(--pas) * 1.5);
  text-align: center; font-family: var(--ui); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--texte) 48%, transparent);
}

/* La carte du modele : coiffee d un FILET EPAIS de marque. */
.em-cd {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-top: var(--filet) solid var(--marque);
  padding: calc(var(--pas) * 4);
}
.em-sec--cl .em-cd { background: var(--fond); }

/* Grilles : le compte vient des DONNEES. Base en pourcentage + flex-wrap,
   et min-width:0 pour que rien ne pousse la ligne au-dela du cadre. */
/* R3 — PISTES COMPTEES. Une base souple (`flex: 1 1 300px`) donne des cases
   de largeurs inegales des que le nombre de cases ne remplit pas la derniere
   rangee : cinq services sortaient en 3 x 381 px puis 2 x 584 px. Le nombre
   de pistes est donc DECLARE, a chaque palier, et les cases sont egales par
   construction. */
.em-gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--pas) * 3); }
.em-gr > * { min-width: 0; }
.em-gr--pd, .em-gr--ma { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.em-gr--ab { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================
   ENTETE ET VOLETS
   ============================================================ */

.em-hd { position: sticky; top: 0; z-index: 60; background: var(--fond); border-bottom: 1px solid var(--bordure); }

/* Sur une page qui ouvre par l affiche, l entete se pose EN BLANC sur la
   photo : le modele passe en plein au defilement, la coquille garde le
   plein — un entete transparent qui suit le scroll demanderait du
   JavaScript de metier. */
.em-an { border-bottom: 1px solid var(--bordure); background: var(--fond-2); }
.em-an__in { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3); padding-top: calc(var(--pas) * 1.25); padding-bottom: calc(var(--pas) * 1.25); font-size: 13px; color: var(--texte-doux); }
.em-an__in a { text-decoration: none; font-weight: 600; color: var(--marque); }

.em-hd__bx { position: absolute; opacity: 0; pointer-events: none; }

.em-hd__in { display: flex; align-items: center; gap: calc(var(--pas) * 4); min-height: 78px; }

.em-hd__mq {
  display: inline-flex; align-items: center; gap: calc(var(--pas) * 1.25);
  font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.03em;
  text-decoration: none; flex: none;
}
/* La marque du modele porte un carre plein a sa gauche. */
.em-hd__so { width: 16px; height: 16px; background: var(--marque); flex: none; display: block; }

.em-hd__nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.em-hd__ul { display: flex; align-items: center; gap: calc(var(--pas) * .5); flex-wrap: wrap; min-width: 0; }
.em-hd__ac { display: flex; align-items: center; gap: calc(var(--pas) * 2); margin-left: auto; flex: none; }

.em-nv { position: relative; }
.em-nv__t {
  display: inline-flex; align-items: center; gap: calc(var(--pas));
  padding: calc(var(--pas) * 3) calc(var(--pas) * 1.75);
  font-family: var(--ui); font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.em-nv__t:hover { color: var(--marque); }
/* Le chevron BAS : tout lien a volet le porte, c est ce qui l annonce. */
.em-nv__t--volet::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duree);
}
.em-nv:hover .em-nv__t--volet::after { transform: translateY(1px) rotate(225deg); }

/* CONTRAT DU VOLET : le panneau est colle sous son lien par un PADDING,
   jamais une marge — le curseur ne traverse ainsi aucun vide entre le
   lien et le panneau, et le volet ne se referme pas en chemin. */
.em-nv__v {
  position: absolute; left: 0; top: 100%;
  padding-top: 0;                       /* le lien touche deja le panneau */
  z-index: 70;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--duree), transform var(--duree), visibility var(--duree);
}
.em-nv:hover .em-nv__v,
.em-nv:focus-within .em-nv__v { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* --dx est pose par app.js quand le panneau deborderait de la fenetre :
   la coquille ne devine pas la largeur de l ecran en CSS seul. */
.em-nv__vin {
  display: flex; gap: calc(var(--pas) * 5);
  min-width: 640px;
  padding: calc(var(--pas) * 4);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-top: var(--filet) solid var(--marque);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--texte) 14%, transparent);
  transform: translateX(var(--dx, 0px));
}
/* La vitrine est ECRITE EN PREMIER dans le panneau et la mise en page la
   renvoie sur le cote : l ordre du modele, ou la vue commande le volet. */
.em-nv__cols { order: 1; display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 4); flex: 1 1 auto; min-width: 0; }
.em-nv__vit { order: 2; }
.em-nv__col { flex: 1 1 180px; min-width: 0; }
.em-nv__ct {
  display: block; font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
  padding-bottom: calc(var(--pas) * 1.25); margin-bottom: calc(var(--pas) * 1.25);
  border-bottom: 1px solid var(--bordure);
}
.em-nv__col li a {
  display: block; padding: calc(var(--pas) * 1.1) 0;
  font-size: 15px; text-decoration: none;
}
.em-nv__col li a:hover { color: var(--marque); }

/* La VITRINE illustree, sur le cote du volet : elle donne au panneau sa
   place et son dessin. */
.em-nv__vit {
  flex: 0 0 268px; min-width: 0;
  background: var(--marque); color: var(--sur-marque);
  display: flex; flex-direction: column;
}
.em-nv__ph { height: 132px; flex: none; }
.em-nv__vit > .em-eb { margin: calc(var(--pas) * 2.5) calc(var(--pas) * 2.5) 0; }
.em-nv__vti {
  display: block; padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2.5) 0;
  font-family: var(--serif); font-size: 19px; font-weight: 500;
}
.em-nv__vtx {
  padding: calc(var(--pas) * 1.25) calc(var(--pas) * 2.5) 0;
  font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--sur-marque) 84%, transparent);
}
.em-nv__vit > .em-bt { align-self: flex-start; margin: calc(var(--pas) * 2.5); }

/* Le bouton du menu compact : trois filets, cache au-dessus de 1024px. */
.em-hd__bg { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--bordure); cursor: pointer; }
.em-hd__bg > i { display: block; height: 2px; background: var(--texte); }

/* ============================================================
   AFFICHE
   ============================================================ */

.em-hero { padding-bottom: calc(var(--pas) * 10); }
.em-hero__af { position: relative; min-height: 560px; display: flex; align-items: flex-end; color: var(--sur-marque); background: var(--marque); overflow: hidden; }
.em-hero__fd { position: absolute; inset: 0; height: 100%; }
.em-hero__fd::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--marque) 88%, transparent) 0%,
    color-mix(in srgb, var(--marque) 52%, transparent) 46%,
    color-mix(in srgb, var(--marque) 22%, transparent) 100%);
}
/* Le texte est pousse EN BAS de l affiche : c est la mise en page du
   modele, titre a gauche, actions a droite, sur la meme ligne de base. */
.em-hero__in {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--pas) * 5);
  padding-top: calc(var(--pas) * 18); padding-bottom: calc(var(--pas) * 7);
}
.em-hero__ct { flex: 1 1 460px; min-width: 0; }
.em-hero__pd { flex: 0 1 320px; min-width: 0; }
.em-hero__so { margin-top: calc(var(--pas) * 3); font-size: 17px; line-height: 1.6; max-width: 54ch; color: color-mix(in srgb, var(--sur-marque) 86%, transparent); }
.em-hero__ac { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); }
.em-hero__pv { margin-top: calc(var(--pas) * 3.5); padding-top: calc(var(--pas) * 2.5); border-top: 1px solid color-mix(in srgb, var(--sur-marque) 34%, transparent); }
.em-hero__pv strong { display: block; font-family: var(--serif); font-size: 40px; font-weight: 500; letter-spacing: -.03em; }
.em-hero__pv span { font-family: var(--ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

.em-hero__pt { display: block; margin-top: calc(var(--pas) * 8); font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }

/* La rangee de cartes numerotees sous l affiche. */
.em-hero__bd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--pas) * 3); margin-top: calc(var(--pas) * 3); }
.em-hero__bd > li { min-width: 0; }
.em-hero__bd .em-nu { margin-bottom: calc(var(--pas) * 2.5); }
.em-hero__bd strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.em-hero__bd p { margin-top: calc(var(--pas) * 1.5); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

/* ============================================================
   FIL D ARIANE
   ============================================================ */

.em-fa { border-bottom: 1px solid var(--bordure); background: var(--fond); }
.em-fa__in { padding: calc(var(--pas) * 2.25) calc(var(--pas) * 3); }
.em-fa__ol { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2.5); font-size: 13px; color: var(--texte-doux); min-width: 0; }
.em-fa__ol > li { display: flex; align-items: center; gap: calc(var(--pas) * 1.25); min-width: 0; }
/* Le rang du maillon, en petit chiffre : le chemin se COMPTE, il ne se
   ponctue pas de chevrons. */
.em-fa__ol > li > b {
  font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--accent); flex: none;
}
.em-fa a { text-decoration: none; }
.em-fa a:hover { color: var(--marque); }
.em-fa [aria-current="page"] span { color: var(--texte); font-weight: 600; }

/* ============================================================
   INTRO, BLOCS SEO, EXPERTISE
   ============================================================ */

/* Le bandeau de titre tient TOUTE la largeur, le corps s ouvre dessous en
   deux colonnes : on annonce d abord, on developpe ensuite. */
.em-in2__hd { padding-bottom: calc(var(--pas) * 4); border-bottom: var(--filet) solid var(--marque); }
.em-in2__cr { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); margin-top: calc(var(--pas) * 5); }
.em-in2__tx { flex: 1 1 420px; min-width: 0; }
.em-in2__ct { flex: 1 1 320px; min-width: 0; padding-top: calc(var(--pas) * 2); border-top: 1px solid var(--bordure); }
.em-in2__ct .em-bt { margin-top: calc(var(--pas) * 3); }

/* Le bloc SEO : le propos OUVRE, la vue ferme. L alternance se joue par
   `row-reverse`, jamais par un ordre different a l ecriture. */
.em-bs { display: flex; flex-direction: column; gap: calc(var(--pas) * 10); }
.em-bs__it { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: center; }
.em-bs__it[data-cote="droite"] { flex-direction: row-reverse; }
.em-bs__ct { flex: 1 1 420px; min-width: 0; padding-top: calc(var(--pas) * 2.5); border-top: var(--filet) solid var(--marque); }
.em-bs__ct .em-bt { margin-top: calc(var(--pas) * 3); }
.em-bs__ph { flex: 1 1 420px; min-width: 0; height: 400px; }

.em-ex { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-ex__ct { flex: 1 1 460px; min-width: 0; }
.em-ex__vi { flex: 1 1 360px; min-width: 0; }
.em-ex__ph { height: 420px; }
/* Les onglets se distinguent par un filet SUPERIEUR : l actif prend le
   filet epais de marque, les autres gardent le filet fin. */
.em-ex__ba { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); }
.em-ex__og {
  flex: 1 1 160px; min-width: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: calc(var(--pas));
  padding-top: calc(var(--pas) * 1.75);
  border-top: var(--filet) solid var(--bordure);
  font-family: var(--ui); font-size: 15px; font-weight: 600;
  color: var(--texte-doux);
  transition: border-color var(--duree), color var(--duree);
}
.em-ex__on { font-size: 12px; letter-spacing: .12em; }
.em-ex__vs { margin-top: calc(var(--pas) * 3); }
.em-ex__vo { display: none; }
.em-ex__vo p { font-size: 16px; line-height: 1.68; color: var(--texte-doux); }
.em-ex__ct .em-bt { margin-top: calc(var(--pas) * 3); }
.em-ex__ct .em-pa { margin-top: calc(var(--pas) * 3); }
.em-ex__ct .em-pa > .em-bt { margin-top: 0; }
.em-ex .em-tx:first-of-type { margin-top: calc(var(--pas) * 3); }

/* Un onglet coche allume son libelle et son volet. Les selecteurs sont
   ecrits a la main : cinq onglets suffisent au socle, au-dela le premier
   reste affiche plutot que de rendre une section vide. */
#em-og-0:checked ~ .em-ex .em-ex__ba .em-ex__og:nth-child(1),
#em-og-1:checked ~ .em-ex .em-ex__ba .em-ex__og:nth-child(2),
#em-og-2:checked ~ .em-ex .em-ex__ba .em-ex__og:nth-child(3),
#em-og-3:checked ~ .em-ex .em-ex__ba .em-ex__og:nth-child(4),
#em-og-4:checked ~ .em-ex .em-ex__ba .em-ex__og:nth-child(5) { border-top-color: var(--marque); color: var(--texte); }
#em-og-0:checked ~ .em-ex .em-ex__vs .em-ex__vo:nth-child(1),
#em-og-1:checked ~ .em-ex .em-ex__vs .em-ex__vo:nth-child(2),
#em-og-2:checked ~ .em-ex .em-ex__vs .em-ex__vo:nth-child(3),
#em-og-3:checked ~ .em-ex .em-ex__vs .em-ex__vo:nth-child(4),
#em-og-4:checked ~ .em-ex .em-ex__vs .em-ex__vo:nth-child(5) { display: block; }

/* ============================================================
   SERVICES, FACETTES, PRODUITS
   ============================================================ */

.em-sv__it { display: block; text-decoration: none; }
.em-sv__it h3 { margin-top: calc(var(--pas) * 2.5); font-size: 22px; }
.em-sv__it p { margin-top: calc(var(--pas) * 1.5); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-sv__ph { height: 180px; margin-top: calc(var(--pas) * 3); }
.em-sv__it .em-ic { margin-top: calc(var(--pas) * 2.5); margin-bottom: 0; }

.em-fc { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); }
.em-fc__it {
  display: inline-flex; padding: calc(var(--pas) * 1.4) calc(var(--pas) * 2.5);
  border: 1px solid var(--bordure); font-family: var(--ui); font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--texte-doux);
}
.em-fc__it--on { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

/* La carte de produit du modele n a pas de photo en tete : le titre
   ouvre, les reperes suivent, le prix et l appel ferment en pied. */
.em-pd { padding: calc(var(--pas) * 3); display: flex; flex-direction: column; }
.em-pd > h3 { font-size: 20px; }
.em-pd > p { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-pd__ph { height: 200px; margin-top: calc(var(--pas) * 2.5); }
.em-pd__pi {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 2);
  margin-top: auto; padding-top: calc(var(--pas) * 2.5);
  border-top: 1px solid var(--bordure);
}
.em-pd__px { flex: 1 1 auto; min-width: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--marque); }
.em-pd__px small { font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--texte-doux); margin-left: calc(var(--pas)); }

/* La fiche reprend le patron de /solutions : le titre tient la gauche,
   l achat la droite, et la vue barre toute la largeur DESSOUS. */
.em-fi { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-fi__g { flex: 1 1 420px; min-width: 0; }
.em-fi__d { flex: 1 1 340px; min-width: 0; padding-top: calc(var(--pas) * 2.5); border-top: var(--filet) solid var(--marque); }
.em-fi__ph { flex: 1 1 100%; height: 550px; }
.em-fi__px { margin-top: calc(var(--pas) * 3); font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: -.035em; }
.em-fi__px small { font-family: var(--ui); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--texte-doux); margin-left: calc(var(--pas)); }

.em-sp { border-top: 1px solid var(--bordure); }
.em-sp__li { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); justify-content: space-between; padding: calc(var(--pas) * 2.25) 0; border-bottom: 1px solid var(--bordure); }
.em-sp__lb { font-family: var(--ui); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); min-width: 0; }
.em-sp__va { font-family: var(--serif); font-size: 19px; min-width: 0; }

/* ============================================================
   METHODE, CHIFFRES, ATOUTS, SECTEURS
   ============================================================ */

/* La methode : des colonnes separees par des filets VERTICAUX. */
.em-pr { display: flex; flex-wrap: wrap; gap: 0; }
.em-pr__et { flex: 1 1 260px; min-width: 0; padding: 0 calc(var(--pas) * 3); border-left: 1px solid var(--bordure); }
.em-pr__et:first-child { padding-left: 0; border-left: 0; }
.em-pr__et h3 { margin-top: calc(var(--pas) * 2.5); font-size: 21px; }
.em-pr__et p { margin-top: calc(var(--pas) * 1.5); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-pr__ph { height: 150px; margin-top: calc(var(--pas) * 3); }

/* Les chiffres du modele ne forment pas une bande : ils s empilent,
   CENTRES, EN SURIMPRESSION sur la vue. La surimpression ne prend jamais
   le curseur. */
.em-ch { position: relative; }
.em-ch__ph { height: 630px; }
.em-ch__ls {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--pas) * 6); text-align: center;
  padding: calc(var(--pas) * 4);
  background: color-mix(in srgb, var(--texte) 34%, transparent);
  color: var(--sur-marque);
}
.em-ch__it b { display: block; font-family: var(--serif); font-size: clamp(38px, 4.6vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.em-ch__it i { display: block; margin-top: calc(var(--pas) * 1.5); font-family: var(--ui); font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

.em-wy { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-wy__vi { flex: 1 1 380px; min-width: 0; }
.em-wy__ph { height: 480px; }
.em-wy__ls { flex: 1 1 420px; min-width: 0; }
.em-wy__it { display: flex; gap: calc(var(--pas) * 2.5); padding: calc(var(--pas) * 3) 0; border-top: 1px solid var(--bordure); }
.em-wy__it:first-child { border-top: 0; padding-top: 0; }
.em-wy__it > div { min-width: 0; }
.em-wy__pa {
  flex: none; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marque); color: var(--sur-marque); font-size: 18px;
}
.em-wy__it h3 { font-size: 20px; }
.em-wy__it p { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

/* Les secteurs se lisent comme une liste NUMEROTEE : le rang et le titre
   se posent cote a cote sur la meme ligne, le detail suit dessous. */
.em-sb { display: flex; flex-direction: column; list-style: none; }
.em-sb__it { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--pas) * 2); padding: calc(var(--pas) * 4) 0; border-top: 1px solid var(--bordure); }
.em-sb__it:first-child { border-top: 0; padding-top: 0; }
.em-sb__rg { flex: none; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--marque); }
.em-sb__ti { flex: 1 1 300px; min-width: 0; font-size: 22px; }
.em-sb__it > p { flex: 1 1 100%; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-sb__it > .em-co, .em-sb__it > .em-tg { flex: 1 1 100%; min-width: 0; }
.em-sb__ph { flex: 1 1 100%; height: 220px; }
.em-sb__mq { display: inline-block; padding: calc(var(--pas) * .65) calc(var(--pas) * 1.5); background: var(--marque); color: var(--sur-marque); font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Les atouts du modele forment une bande NUE : des intitules alignes sur
   une ligne, sans pastille, sans filet, sans vis-a-vis. */
.em-ce { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 4); margin-top: calc(var(--pas) * 5); }
.em-ce__it { flex: 1 1 220px; min-width: 0; }
.em-ce__it h3 { font-size: 21px; }
.em-ce__it p { margin-top: calc(var(--pas) * 1.5); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-ce__it .em-ic { margin-bottom: 0; margin-top: calc(var(--pas) * 2); }

/* Les realisations se lisent en LIGNES filetees, pas en grille de cartes :
   rang, intitule et repere a gauche, photo a droite, une par rangee. */
.em-re { display: flex; flex-direction: column; }
.em-re__it {
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 5); align-items: center;
  padding: calc(var(--pas) * 5) 0; border-top: 1px solid var(--bordure);
}
.em-re__it:first-child { border-top: 0; padding-top: calc(var(--pas) * 2); }
.em-re__tt { flex: 1 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2.5); align-items: flex-start; }
.em-re__tx { flex: 1 1 240px; min-width: 0; }
.em-re__vi { flex: 1 1 420px; min-width: 0; margin: 0; position: relative; }
.em-re__ph { height: 280px; }
.em-re__me { flex: 1 1 100%; min-width: 0; display: block; padding-top: calc(var(--pas) * 1.5); border-top: 1px solid var(--bordure); font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.em-re__it h3 { font-size: 22px; }
.em-re__it p { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

/* ============================================================
   AVANT / APRES — le curseur est la commande, pas un decor
   ============================================================ */

.em-ab__fg { margin: 0; position: relative; overflow: hidden; }
.em-ab__av, .em-ab__ap { display: block; position: relative; }
.em-ab__ph { height: 340px; }
.em-ab__ap {
  position: absolute; inset: 0;
  /* La decoupe se fait par --pos, pose par app.js au fil du curseur. */
  clip-path: inset(0 0 0 var(--pos));
}
.em-ab__ap .em-ab__ph { height: 100%; }
.em-ab__lb {
  position: absolute; left: calc(var(--pas) * 2); top: calc(var(--pas) * 2);
  padding: calc(var(--pas) * .75) calc(var(--pas) * 1.5);
  background: var(--fond); color: var(--texte);
  font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  z-index: 3;
}
.em-ab__lb--d { left: auto; right: calc(var(--pas) * 2); background: var(--marque); color: var(--sur-marque); }
.em-ab__ba { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--fond); z-index: 4; pointer-events: none; }
.em-ab__ba > i { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); background: var(--fond); border: 2px solid var(--marque); display: block; }
.em-ab__ba > i::before, .em-ab__ba > i::after {
  content: ''; position: absolute; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--marque); border-right: 2px solid var(--marque);
}
.em-ab__ba > i::before { left: 6px; transform: translateY(-50%) rotate(-135deg); }
.em-ab__ba > i::after { right: 6px; transform: translateY(-50%) rotate(45deg); }
/* Le curseur couvre toute la photo : il se prend a la souris, au doigt et
   au clavier. Transparent, mais bien present. */
.em-ab__i {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 5; -webkit-appearance: none; appearance: none; background: none;
}
.em-ab__i:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; opacity: .001; }
.em-ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
/* L intitule passe AVANT la figure : on sait ce qu on compare avant de
   pousser le curseur. Le filet epais coiffe donc le titre, pas la photo. */
.em-ab__ti { padding-top: calc(var(--pas) * 2); border-top: var(--filet) solid var(--marque); font-size: 21px; }
.em-ab__tx { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-ab__ti + .em-ab__fg, .em-ab__tx + .em-ab__fg { margin-top: calc(var(--pas) * 2.5); }

/* ============================================================
   AVIS, MARQUES
   ============================================================ */

.em-av__it { display: flex; flex-direction: column; }
.em-av__it h3 { margin-top: calc(var(--pas) * 2); font-size: 19px; }
.em-av__it > p { margin-top: calc(var(--pas) * 1.5); font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--texte-doux); }
.em-av__pd { display: flex; align-items: center; gap: calc(var(--pas) * 1.5); margin-top: calc(var(--pas) * 3); padding-top: calc(var(--pas) * 2); border-top: 1px solid var(--bordure); }
.em-av__av { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--marque); color: var(--sur-marque); font-family: var(--ui); font-weight: 600; }
.em-av__id { display: flex; flex-direction: column; min-width: 0; }
.em-av__id strong { font-size: 15px; }
.em-av__id small { font-size: 13px; color: var(--texte-doux); }

.em-mq { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 3); }
.em-mq__lb { font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 80%, transparent); flex: none; }
/* Une PISTE de noms, separes par des filets fins. Elle ne deborde PAS :
   un nom coupe par un cadre a overflow serait un texte non lu, et la
   bande d un site reel porte de trois a huit noms, pas trente. */
.em-mq__ls { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3) calc(var(--pas) * 5); flex: 1 1 320px; min-width: 0; }
.em-mq__ls > li {
  flex: 0 1 auto; min-width: 0; padding-top: calc(var(--pas) * 1.5);
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 40%, transparent);
  font-family: var(--ui); font-size: 17px; font-weight: 600; letter-spacing: .02em;
  color: color-mix(in srgb, var(--sur-marque) 88%, transparent);
}

/* ============================================================
   ZONES, REPERAGE, URGENCE
   ============================================================ */

.em-zo__it { display: block; text-decoration: none; }
.em-zo__ph { height: 150px; }
.em-zo__ct { display: block; margin-top: calc(var(--pas) * 1.75); padding-top: calc(var(--pas) * 1.5); border-top: 1px solid var(--bordure); }
.em-zo__ct strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.em-zo__ct small { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-doux); }

/* La carte de zone deborde par la GAUCHE, hors du cadre : le modele
   laisse ses vues sortir du gabarit, jamais une carte posee dessus. */
.em-ul { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: center; }
.em-ul__ph { flex: 1 1 420px; min-width: 0; height: 430px; margin-left: calc(var(--pas) * -5); width: calc(100% + var(--pas) * 5); }
.em-ul__ct { flex: 1 1 340px; min-width: 0; }
.em-ul__ad { display: flex; flex-direction: column; gap: calc(var(--pas) * .75); margin-top: calc(var(--pas) * 2.5); font-style: normal; font-size: 16px; line-height: 1.55; color: var(--texte-doux); }
.em-ul__ap { margin-top: calc(var(--pas) * 3); }

.em-sec--ur { padding: calc(var(--pas) * 12) 0; }
/* Sur une bande d urgence, le NUMERO se lit en premier : il coiffe la
   bande, le reste s ecrit dessous, et les points ferment en rangee. */
.em-ur { position: relative; z-index: 2; }
.em-ur__nu { padding-bottom: calc(var(--pas) * 3); border-bottom: 1px solid color-mix(in srgb, var(--sur-marque) 30%, transparent); }
.em-ur__g { margin-top: calc(var(--pas) * 4); max-width: 62ch; }
.em-ur__tx { margin-top: calc(var(--pas) * 2.5); font-size: 17px; line-height: 1.6; }
.em-ur__tel { display: block; font-family: var(--serif); font-size: clamp(32px, 4.6vw, 52px); font-weight: 500; letter-spacing: -.035em; text-decoration: none; color: var(--sur-marque); }
.em-ur__g .em-bt { margin-top: calc(var(--pas) * 3); }
/* Les points en RANGEE : filet a gauche au lieu du filet au-dessus. */
.em-co--rg { display: flex; flex-wrap: wrap; gap: 0; margin-top: calc(var(--pas) * 5); position: relative; z-index: 2; }
.em-co--rg > li { flex: 1 1 240px; min-width: 0; padding: calc(var(--pas) * 1.5) calc(var(--pas) * 3); border-top: 0; border-left: 1px solid color-mix(in srgb, var(--sur-marque) 26%, transparent); }
.em-co--rg > li:first-child { padding-left: 0; border-left: 0; }

/* ============================================================
   AIDES, MATIERES, OFFRES
   ============================================================ */

/* Les aides tiennent en RANGEES a deux colonnes : le rang et l intitule a
   gauche, le detail a droite — un bareme se lit en face a face. */
.em-ai { display: flex; flex-direction: column; }
.em-ai__it {
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 4);
  padding: calc(var(--pas) * 4) 0; border-top: 1px solid var(--bordure);
}
.em-ai__it:first-child { border-top: 0; padding-top: 0; }
.em-ai__g { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: calc(var(--pas) * 2.5); }
.em-ai__d { flex: 1 1 420px; min-width: 0; }
.em-ai__it h3 { font-size: 20px; min-width: 0; }
.em-ai__it p { font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-ai__d .em-co { margin-top: calc(var(--pas) * 2); }
.em-ai__me { margin-top: calc(var(--pas) * 4); padding: calc(var(--pas) * 2.5); border: 1px dashed var(--bordure); font-size: 13px; line-height: 1.55; color: var(--texte-doux); }

/* Les matieres reprennent la bande d enseignes : l intitule tient la
   colonne de gauche, les entrees defilent en ligne a droite. */
.em-ma { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-ma__g { flex: 1 1 300px; min-width: 0; }
.em-ma__g .em-bt { margin-top: calc(var(--pas) * 3); }
.em-ma__ls { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pas) * 2); }
.em-ma__it { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--pas)); padding: calc(var(--pas) * 2.5); border: 1px solid var(--bordure); }
.em-ma__ph { height: 120px; margin-bottom: calc(var(--pas)); }
.em-ma__it > b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.em-ma__it > span { font-size: 14px; line-height: 1.55; color: var(--texte-doux); }

/* Une offre se lit en TROIS temps separes par des filets : le bandeau
   (icone, intitule, prix), le corps, puis le pied d appel. */
.em-ta__it { display: flex; flex-direction: column; }
.em-ta__hd {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pas) * 2);
  padding-bottom: calc(var(--pas) * 2.5); border-bottom: 1px solid var(--bordure);
}
.em-ta__hd .em-ic { margin-bottom: 0; }
.em-ta__hd h3 { flex: 1 1 auto; min-width: 0; font-size: 21px; }
.em-ta__px { flex: none; min-width: 0; display: flex; align-items: baseline; gap: calc(var(--pas)); }
.em-ta__px b { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.em-ta__px small { font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--texte-doux); }
.em-ta__cr { flex: 1 1 auto; min-width: 0; padding-top: calc(var(--pas) * 2.5); }
.em-ta__tx { font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-ta__pd { margin-top: calc(var(--pas) * 3); padding-top: calc(var(--pas) * 2.5); border-top: 1px solid var(--bordure); }
.em-ta__pd .em-bt { width: 100%; }

/* ============================================================
   QUESTIONS, MAILLAGE, APPEL, CONTACT
   ============================================================ */

/* Les questions du modele : aucun chevron, aucune croix. La reponse
   s ecrit directement sous l intitule, et l encart d appel se range a
   GAUCHE par la mise en page bien qu il soit ecrit en dernier. */
.em-fq { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-fq__te { flex: 1 1 320px; min-width: 0; order: 1; margin-bottom: 0; }
.em-fq__d { flex: 1 1 500px; min-width: 0; order: 3; border-top: 1px solid var(--bordure); }
.em-fq__en { flex: 1 1 320px; min-width: 0; order: 2; padding: calc(var(--pas) * 3); }
.em-fq__en > b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.em-fq__en p { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.em-fq__en .em-bt { margin-top: calc(var(--pas) * 2.5); }

.em-fq__it { border-bottom: 1px solid var(--bordure); }
.em-fq__it > summary {
  padding: calc(var(--pas) * 3) 0 0; cursor: pointer; list-style: none;
}
.em-fq__it > summary::-webkit-details-marker { display: none; }
.em-fq__it > summary > b {
  display: block; min-width: 0;
  font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.025em;
}
.em-fq__r { padding: calc(var(--pas) * 1.5) 0 calc(var(--pas) * 3); font-size: 16px; line-height: 1.68; color: var(--texte-doux); max-width: 70ch; }

/* Le maillage du modele : DEUX grandes tuiles ouvrent la grille, les
   suivantes tiennent en tuiles plus petites — le compte de colonnes
   change d une rangee a l autre. */
.em-mi__it { display: block; text-decoration: none; border: 1px solid var(--bordure); padding: 0 0 calc(var(--pas) * 3); }
.em-mi__it--gd { flex: 1 1 46%; }
.em-mi__it--pt { flex: 1 1 28%; }
.em-mi__ph { height: 190px; }
.em-mi__it--gd .em-mi__ph { height: 300px; }
.em-mi__it > h3 { margin: calc(var(--pas) * 3) calc(var(--pas) * 3) 0; font-size: 20px; }
.em-mi__it--gd > h3 { font-size: 24px; }
.em-mi__me { display: block; margin: calc(var(--pas) * 1.5) calc(var(--pas) * 3) 0; padding-top: calc(var(--pas) * 1.25); border-top: 1px solid var(--bordure); font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.em-mi__it > p { margin: calc(var(--pas) * 1.25) calc(var(--pas) * 3) 0; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

/* L appel : un bloc PLEIN de marque, seme de cadres pointilles. */
.em-cb {
  position: relative; overflow: hidden;
  padding: calc(var(--pas) * 8);
  background: var(--marque); color: var(--sur-marque);
}
.em-cb::before {
  content: ''; position: absolute; inset: calc(var(--pas) * 2); z-index: 1;
  border: 1px dashed color-mix(in srgb, var(--sur-marque) 34%, transparent);
  pointer-events: none;
}
.em-cb__fd { position: absolute; inset: 0; height: 100%; }
.em-cb__fd::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--marque) 82%, transparent); }
/* Le titre EN HAUT, la demande dessous : on lit ce qu on demande avant de
   remplir. Les champs se rangent en rangee et repassent en colonne seuls. */
.em-cb__in { position: relative; z-index: 2; max-width: 820px; }
.em-cb__g { min-width: 0; }
.em-cb__g .em-cp { color: color-mix(in srgb, var(--sur-marque) 84%, transparent); }
.em-cb__d { margin-top: calc(var(--pas) * 4); padding-top: calc(var(--pas) * 3); border-top: 1px solid color-mix(in srgb, var(--sur-marque) 30%, transparent); }
.em-cb__chs { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); }
.em-cb__ch { flex: 1 1 240px; min-width: 0; display: block; }
.em-cb__ch--l { flex: 1 1 100%; }
.em-cb__ch input {
  width: 100%; padding: calc(var(--pas) * 1.9) calc(var(--pas) * 2);
  border: 1px solid color-mix(in srgb, var(--sur-marque) 40%, transparent);
  background: transparent; color: var(--sur-marque);
  font-family: var(--sans); font-size: 15px;
}
.em-cb__ch input::placeholder { color: color-mix(in srgb, var(--sur-marque) 62%, transparent); }
/* Le PIED du formulaire tient la paire de la regle 7 : le bouton d envoi et
   la porte d appel partagent la meme rangee, jamais l une sous l autre. */
.em-cb__pd { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); margin-top: calc(var(--pas) * 2.5); }
.em-cb__pd > .em-bt { flex: 1 1 200px; width: auto; margin-top: 0; }

/* Le bloc de contact du modele : une vue qui DEBORDE par la gauche, la
   demande calee a droite, et les coordonnees en pied de formulaire. */
.em-cf { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); align-items: flex-start; }
.em-cf__ph { flex: 1 1 380px; min-width: 0; height: 560px; margin-left: calc(var(--pas) * -5); width: calc(100% + var(--pas) * 5); }
.em-cf__d { flex: 1 1 460px; min-width: 0; }
.em-cf__fo { margin-top: calc(var(--pas) * 4); display: flex; flex-direction: column; gap: calc(var(--pas) * 2); }
.em-cf__pd { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 1.5); margin-top: calc(var(--pas) * 1.5); }
.em-cf__pd > .em-bt { flex: 1 1 200px; width: auto; margin-top: 0; }
.em-cf__ch { display: flex; flex-direction: column; gap: calc(var(--pas)); }
.em-cf__ch > p { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.em-cf__ch input, .em-cf__ch textarea {
  width: 100%; padding: calc(var(--pas) * 1.75) calc(var(--pas) * 2);
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-size: 15px; resize: vertical;
}
/* Les coordonnees ferment le bloc en RANGEE, sous le formulaire. */
.em-cf__cl { display: flex; flex-wrap: wrap; gap: 0; margin-top: calc(var(--pas) * 5); border-top: var(--filet) solid var(--marque); }
.em-cf__co { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--pas) * .75); padding: calc(var(--pas) * 3); border-left: 1px solid var(--bordure); }
.em-cf__co:first-child { padding-left: 0; border-left: 0; }
.em-cf__co h3 { font-size: 18px; }
.em-cf__co .em-ic { margin-bottom: 0; margin-top: calc(var(--pas) * 1.5); }
.em-cf__va { font-size: 15px; color: var(--texte-doux); text-decoration: none; font-weight: 400; }
a.em-cf__va:hover { color: var(--marque); }

/* ============================================================
   JOURNAL, MENTIONS
   ============================================================ */

/* Le billet s annonce par son TITRE, montre ensuite, et date en dernier :
   l ordre de lecture d un journal, pas celui d une vignette. */
.em-bl__it { display: block; text-decoration: none; }
.em-bl__ct { display: block; padding-top: calc(var(--pas) * 2); border-top: var(--filet) solid var(--marque); }
.em-bl__ph { height: 210px; margin-top: calc(var(--pas) * 2.5); }
.em-bl__me { display: block; margin-top: calc(var(--pas) * 2); padding-top: calc(var(--pas) * 1.25); border-top: 1px solid var(--bordure); font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.em-bl__ct h3 { font-size: 21px; }
.em-bl__ct p { margin-top: calc(var(--pas) * 1.25); font-size: 15px; line-height: 1.6; color: var(--texte-doux); }

.em-ar__hd { max-width: 800px; padding-bottom: calc(var(--pas) * 3); border-bottom: 1px solid var(--bordure); }
/* Le repere se pose en ETIQUETTE, la ou le modele marque ses dates. */
.em-ar__me { margin-top: calc(var(--pas) * 2.5); }
.em-ar__me > span { display: inline-block; padding: calc(var(--pas) * .65) calc(var(--pas) * 1.5); background: var(--fond-2); border-left: 2px solid var(--accent); font-family: var(--ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.em-ar__ug { margin: calc(var(--pas) * 5) 0 0; }
.em-ar__une { height: 420px; }
.em-ar__cr { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); margin-top: calc(var(--pas) * 6); align-items: flex-start; }
.em-ar__so { flex: 1 1 260px; min-width: 0; position: sticky; top: calc(var(--pas) * 14); padding-top: calc(var(--pas) * 2); border-top: var(--filet) solid var(--marque); }
.em-ar__st { display: block; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: calc(var(--pas) * 1.5); }
.em-ar__sol > li { display: flex; align-items: baseline; gap: calc(var(--pas) * 1.5); border-top: 1px solid var(--bordure); min-width: 0; }
.em-ar__sol > li > b { flex: none; font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.em-ar__sol > li > a { display: block; min-width: 0; padding: calc(var(--pas) * 1.1) 0; font-size: 15px; text-decoration: none; }
.em-ar__tx { flex: 1 1 560px; min-width: 0; }
.em-ar__h2 { margin-top: calc(var(--pas) * 5); font-size: 30px; }
.em-ar__h3 { margin-top: calc(var(--pas) * 4); font-size: 22px; }
.em-ar__tx > *:first-child { margin-top: 0; }
.em-ar__en { margin-top: calc(var(--pas) * 4); }
.em-ar__en strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: calc(var(--pas) * 1.25); }
.em-ar__en p { font-size: 15px; line-height: 1.65; color: var(--texte-doux); }
.em-ar__fg { margin: calc(var(--pas) * 4) 0 0; }
.em-ar__ph { height: 340px; }
.em-ar__fg figcaption { margin-top: calc(var(--pas) * 1.5); font-size: 13px; color: var(--texte-doux); }

.em-lg { max-width: 900px; }
.em-lg__mj { margin-top: calc(var(--pas) * 2); font-size: 14px; color: var(--texte-doux); }
/* Chaque article porte son RANG dans la marge : dans un texte legal, la
   numerotation est la reference, pas une decoration. */
.em-lg__cr { margin-top: calc(var(--pas) * 5); display: flex; flex-direction: column; }
.em-lg__bl { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3); padding: calc(var(--pas) * 4) 0; border-top: 1px solid var(--bordure); }
.em-lg__ct { flex: 1 1 480px; min-width: 0; }
.em-lg__bl h2 { font-size: 24px; }

/* ============================================================
   PIED
   ============================================================ */

/* Le pied du modele est SOMBRE : la teinte se prend sur l encre, pas sur
   un noir en dur, pour rester dans les huit jetons. */
.em-ft { background: color-mix(in srgb, var(--texte) 94%, var(--marque)); color: var(--fond); padding: calc(var(--pas) * 10) 0 calc(var(--pas) * 4); }
/* La marque occupe une BANDE HAUTE pleine largeur, les colonnes s ouvrent
   dessous, l adresse ferme le bloc : le pied se lit de haut en bas. */
.em-ft__hd { padding-bottom: calc(var(--pas) * 4); margin-bottom: calc(var(--pas) * 5); border-bottom: 1px solid color-mix(in srgb, var(--fond) 22%, transparent); }
.em-ft__mq { display: flex; align-items: center; gap: calc(var(--pas) * 1.25); font-family: var(--serif); font-size: 26px; font-weight: 500; }
.em-ft__de { margin-top: calc(var(--pas) * 2); font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--fond) 70%, transparent); max-width: 56ch; }
.em-ft__gr { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 6); }
.em-ft__col { flex: 1 1 180px; min-width: 0; }
.em-ft__nap { display: block; font-style: normal; margin-top: calc(var(--pas) * 5); padding-top: calc(var(--pas) * 3); border-top: 1px solid color-mix(in srgb, var(--fond) 22%, transparent); }
.em-ft__nls { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3); margin-top: calc(var(--pas) * 1.5); }
.em-ft__rx { display: flex; gap: calc(var(--pas) * 1.25); margin-top: calc(var(--pas) * 3); }
.em-ft__rx > i { width: 34px; height: 34px; display: block; border: 1px solid color-mix(in srgb, var(--fond) 34%, transparent); }
.em-ft__ct { display: block; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--fond) 62%, transparent); padding-bottom: calc(var(--pas) * 1.25); margin-bottom: calc(var(--pas) * 1.25); border-bottom: 1px solid color-mix(in srgb, var(--fond) 22%, transparent); }
.em-ft__col li a, .em-ft__nl span, .em-ft__nl a { font-size: 15px; text-decoration: none; color: color-mix(in srgb, var(--fond) 78%, transparent); }
.em-ft__col li { padding: calc(var(--pas) * .85) 0; }
.em-ft__nl { display: flex; align-items: flex-start; gap: calc(var(--pas)); }
.em-ft__nl .em-ic { width: 22px; height: 22px; border: 0; font-size: 14px; margin-bottom: 0; }
.em-ft__bas { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3); justify-content: space-between; margin-top: calc(var(--pas) * 7); padding-top: calc(var(--pas) * 3); border-top: 1px solid color-mix(in srgb, var(--fond) 22%, transparent); }
.em-ft__bas small { font-size: 13px; color: color-mix(in srgb, var(--fond) 62%, transparent); min-width: 0; }
.em-ft__liens { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 3); min-width: 0; }
.em-ft__liens a { font-size: 13px; text-decoration: none; color: color-mix(in srgb, var(--fond) 62%, transparent); }

/* ============================================================
   REPLIS
   ============================================================ */

@media (max-width: 1024px) {
  .em-hd__bg { display: flex; }
  /* Le menu compact tombe A PLAT dans le flux : plus de survol, plus de
     panneau flottant, chaque volet est deroule et lisible. */
  .em-hd__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: block;
    background: var(--fond); border-bottom: 1px solid var(--bordure);
    max-height: 0; overflow: hidden;
    /* Replie, le menu n est pas seulement rogne : il est RETIRE de la
       lecture. Sans cela ses liens restent des textes de plein droit,
       simplement caches sous un bord — invisibles a l oeil, presents pour
       le clavier et pour les lecteurs d ecran. */
    visibility: hidden; pointer-events: none;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--texte) 12%, transparent);
  }
  .em-hd__ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
  .em-hd { position: relative; }
  .em-hd__bx:checked ~ .em-hd__in .em-hd__nav {
    max-height: 78vh; overflow-y: auto; padding-bottom: calc(var(--pas) * 2);
    visibility: visible; pointer-events: auto;
  }
  .em-nv { position: static; }
  .em-nv__t { padding: calc(var(--pas) * 2) calc(var(--pas) * 3); border-top: 1px solid var(--bordure); }
  .em-nv__v {
    /* En compact le volet suit l etat du menu : il HERITE sa visibilite au
       lieu de l affirmer, sinon il ressortirait alors que le menu est
       referme. */
    position: static; opacity: 1; visibility: inherit; pointer-events: inherit;
    transform: none; padding: 0;
  }
  .em-nv__vin {
    min-width: 0; transform: none; box-shadow: none; border: 0; border-top: 0;
    flex-direction: column; gap: calc(var(--pas) * 3);
    padding: 0 calc(var(--pas) * 3) calc(var(--pas) * 2);
  }
  .em-nv__vit { flex: 1 1 auto; }
  .em-nv__ph { height: 110px; }
  .em-hero__af { min-height: 480px; }

  /* Un palier = un nombre de pistes declare. */
  .em-gr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-gr--pd, .em-gr--ma { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .em-gr--ab { grid-template-columns: minmax(0, 1fr); }
  .em-gr:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); }
  .em-hero__bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .em-sec { padding: calc(var(--pas) * 8) 0; }
  .em-wrap { padding: 0 calc(var(--pas) * 2.5); }
  /* Une base en POURCENTAGE ne revient jamais a la ligne toute seule :
     chaque grille est ramenee explicitement a la pleine largeur. */
  .em-in2__tx, .em-in2__ct,
  .em-re__tt, .em-re__vi, .em-re__tx,
  .em-ai__g, .em-ai__d,
  .em-lg__ct,
  .em-cb__ch,
  .em-co--rg > li,
  .em-bs__ct, .em-bs__ph,
  .em-ex__ct, .em-ex__vi, .em-ex__og,
  .em-fi__g, .em-fi__d,
  .em-pr__et,
  .em-wy__vi, .em-wy__ls,
  .em-ul__ph, .em-ul__ct,
  .em-fq__te, .em-fq__d, .em-fq__en,
  .em-cf__ph, .em-cf__d,
  .em-ma__g, .em-ma__ls,
  .em-te__su,
  .em-ar__so, .em-ar__tx,
  .em-hero__ct, .em-hero__pd,
  .em-ft__col,
  .em-mq__ls { flex: 1 1 100%; }

  .em-gr, .em-gr--pd, .em-gr--ma, .em-gr--ab,
  .em-hero__bd, .em-ma__ls { grid-template-columns: minmax(0, 1fr); }

  /* Les points en rangee reprennent leur filet du HAUT une fois empiles :
     un filet a gauche n a plus de sens dans une colonne. */
  .em-co--rg > li { padding: calc(var(--pas) * 1.5) 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--sur-marque) 26%, transparent); }
  .em-co--rg > li:first-child { border-top: 0; }

  .em-pr__et { border-left: 0; padding: calc(var(--pas) * 3) 0; border-top: 1px solid var(--bordure); }
  .em-pr__et:first-child { border-top: 0; padding-top: 0; }
  /* Les chiffres quittent la surimpression : la vue passe dessus, la liste
     dessous — un chiffre pose sur une photo etroite ne se lit plus. */
  .em-ch { display: block; }
  .em-ch__ph { height: 300px; }
  .em-ch__ls { position: static; padding: calc(var(--pas) * 5) 0 0; background: none; color: var(--texte); }
  .em-ch__it b { color: var(--texte); }
  .em-ch__it i { color: var(--texte-doux); }
  .em-ul__ph { margin-left: 0; width: auto; }
  .em-cf__ph { margin-left: 0; width: auto; }
  .em-cb { padding: calc(var(--pas) * 4); }
  .em-cd { padding: calc(var(--pas) * 3); }
  .em-ar__so { position: static; }
  .em-hero__in { padding-top: calc(var(--pas) * 12); }
  .em-bs__ph, .em-ul__ph, .em-wy__ph, .em-fi__ph, .em-ex__ph, .em-ar__une { height: 260px; }
  .em-ab__ph { height: 240px; }
  .em-h--xl { font-size: clamp(28px, 8vw, 38px); }

  /* NORME COQUILLE, regle 7 en compact — la PAIRE de portes ne se sacrifie
     pas au manque de place : elle prend sa propre rangee sous la marque.
     La marque et le bouton de menu gardent la premiere, les deux portes se
     partagent la seconde a parts egales. Une porte qui disparaitrait au
     palier etroit ne serait plus tenue par le gabarit. */
  .em-hd__in { flex-wrap: wrap; row-gap: calc(var(--pas) * 1.5); padding-bottom: calc(var(--pas) * 1.5); }
  .em-hd__bg { margin-left: auto; }
  .em-hd__ac { order: 3; flex: 1 1 100%; margin-left: 0; gap: calc(var(--pas) * 1.5); }
  .em-hd__ac > .em-bt { flex: 1 1 0; min-width: 0; padding: calc(var(--pas) * 1.6) calc(var(--pas) * 1.5); font-size: 14px; }
}

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

/* F1 — l affiche d ouverture court sur toute la premiere fenetre.
   Le modele fait courir sa scene du bord haut au bord bas de la premiere
   vue et pose son entete DESSUS ; notre affiche, elle, commencait sous une
   entete opaque de 78px et s arretait a 560px, laissant les deux rangees
   basses en fond nu. Le tirage se paie sur l ACCUEIL seul : `.em-hd +
   .em-hero` ne designe que la page qui ouvre sur l affiche — les pages
   internes ouvrent sur le fil d ariane et gardent leur entete pleine. */
@media (min-width: 1025px) {
  body:has(.em-hd + .em-hero) .em-hd {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--sur-marque);
  }
  .em-hd + .em-hero { margin-top: -78px; }
  .em-hd + .em-hero .em-hero__af { min-height: min(900px, 100svh); }
  /* Le mot se tient sur la quatrieme rangee, la cinquieme reste a la scene. */
  .em-hd + .em-hero .em-hero__in { padding-bottom: calc(var(--pas) * 18); }
}

/* >>> 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-23 sur 12 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="em-ch__ph"]: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="em-ch__ph"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="em-hero__fd"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #03060f;
  --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="em-hero__fd"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* === LOGO MARQUE (factory) : vrai logo.svg en lockup avec le nom dans le header === */
.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}