/* ============================================================
   ELECTRIA — feuille SOURCE de la coquille.
   dist/style.css en est une COPIE ecrasee a chaque rendu : ne jamais
   editer dist/.

   Huit variables de couleur, aucune autre, aucun hex en dur : la seule
   surface sombre du socle est --texte (encre --fond). Tout bandeau
   "nuit" de la reference se rend donc en var(--texte).

   Le compte de colonnes n'est jamais ecrit ici : flex-wrap + flex:1 1 X%
   + min-width:0 sur les enfants de grille. La coquille s'adapte au
   nombre d'items que les donnees apportent.
   ============================================================ */

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

body {
  margin: 0;
  font: 16px/1.65 'Open Sans', system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.enrobe { width: min(1300px, 100% - 48px); margin-inline: auto; position: relative; z-index: 1; }

/* --- BANDEAUX : l'alternance clair / gris / nuit est la respiration de
       la reference. Chaque section occupe toute la largeur. --- */
.bande { padding: 96px 0; }
.bande--haut { padding-top: 130px; }
.bande--serre { padding: 46px 0; }
.bande--gris { background: var(--fond-2); }
.bande--nuit { background: var(--texte); color: var(--fond); position: relative; }
/* La bande de nuit pose son encre claire une fois (`color: var(--fond)`), et
   ce qui se contente d etre ATTENUE ici doit d abord HERITER : sans
   `color: inherit`, l opacite ne fait que ternir une teinte de page. Le propos
   de fiche gardait `--texte-doux`, un gris moyen, et se retrouvait a 2,53
   contre 1 sur le presque-noir. Attenuer n est pas colorer — les deux se
   declarent ensemble ou la regle ne veut rien dire. */
.bande--nuit .prose, .bande--nuit .tete__d, .bande--nuit .fiche__x { color: inherit; opacity: .78; }

/* Grille de points : le fond decoratif des bandeaux nuit. */
.points {
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
}

/* --- LEXIQUE : etiquette a trait, titres capitales, prose, pilules. --- */
.eti {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 'Open Sans'; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.eti::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.bande--nuit .eti, .veille .eti, .pied .eti { color: inherit; }

.tit {
  font-family: 'Space Grotesk', 'Open Sans', sans-serif; font-weight: 600;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.09; letter-spacing: -.01em;
  text-transform: uppercase;
}
.tit--geant { font-size: clamp(34px, 5vw, 62px); line-height: 1.06; }
.tit--petit { font-size: clamp(20px, 2vw, 27px); }
.tit em { font-style: normal; color: var(--marque); }

.prose { margin-top: 16px; color: var(--texte-doux); }
.bande--nuit .prose { color: inherit; }
.mention { margin-top: 26px; font-size: 13px; color: var(--texte-doux); }

.pil {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 26px;
  border-radius: 100px; background: var(--marque); color: var(--sur-marque);
  font: 600 15px/1 'Open Sans'; text-decoration: none; border: 1.5px solid var(--marque);
}
.pil::after { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; }
.pil--vide { background: transparent; color: inherit; border-color: var(--bordure); }
.pil--nuit { background: transparent; color: inherit; border-color: currentColor; }
.pil--plein { width: 100%; justify-content: center; cursor: pointer; font: 600 15px/1 'Open Sans'; }

.balises { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.balises li {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--bordure); border-radius: 100px; padding: 6px 13px;
}
.listes { margin-top: 16px; display: grid; gap: 9px; }
.listes li { position: relative; padding-left: 20px; color: var(--texte-doux); font-size: 15px; }
.bande--nuit .listes li, .veille .listes li { color: inherit; opacity: .82; }
.listes li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--marque);
}

.pastille {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 13px; background: var(--texte); color: var(--fond);
  font: 600 14px/1 'Space Grotesk'; letter-spacing: .04em;
}
.pastille:empty::after { content: ''; width: 15px; height: 15px; border-radius: 4px; background: var(--marque); }
.bande--nuit .pastille { background: var(--marque); color: var(--sur-marque); }
.bande--nuit .pastille:empty::after { background: var(--sur-marque); }

/* Vignette : cadre au ratio impose, l'image le remplit. */
.vign { position: relative; border-radius: 20px; overflow: hidden; background: var(--fond-2); }
.vign::before { content: ''; display: block; padding-top: var(--ratio, 72%); }
.vign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vign span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 18px; text-align: center; font-size: 13px; color: var(--texte-doux);
}
.vign--carre { border-radius: 14px; }

/* Grilles : le compte vient des donnees. */
/* NORME COQUILLE, R3 — UNE SEULE LARGEUR PAR GRILLE, et le nombre de
   colonnes est COMPTE, jamais deduit du remplissage. Avec flex-grow, la
   derniere carte d une rangee incomplete s etire sur toute la largeur : la
   grille annonce une mise en avant qu aucune donnee n a demandee, et le meme
   emplacement visuel se recadre alors de deux facons. Des pistes comptees
   laissent la piste vide vide. */
.mur { display: grid; gap: 24px; margin-top: 46px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mur > * { min-width: 0; }
.mur--demi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mur--tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mur--quart { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mur--quart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .mur--tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .mur, .mur--demi, .mur--tiers, .mur--quart { grid-template-columns: minmax(0, 1fr); }
}
.mur--serre { gap: 6px 34px; }
.mur--bas { padding-bottom: 34px; }

/* Tete de section : titre a gauche, chapo cale a droite. */
.tete { display: flex; flex-wrap: wrap; gap: 26px 56px; align-items: flex-end; }
.tete > * { min-width: 0; }
.tete__g { flex: 1 1 52%; min-width: min(100%, 300px); }
.tete__d { flex: 1 1 34%; min-width: min(100%, 280px); color: var(--texte-doux); }
.tete--centre { justify-content: center; text-align: center; }

/* --- ENTETE --- */
.chapeau { position: relative; z-index: 30; }
.util { background: var(--texte); color: var(--fond); font-size: 13px; }
.util__c { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 0; }
.util__x { opacity: .74; }
.util__tel { text-decoration: none; font-weight: 600; }
.entete { background: var(--fond); border-bottom: 1px solid var(--bordure); }
.entete__c { display: flex; align-items: center; gap: 30px; padding: 15px 0; }
.entete__marque {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  font: 600 18px/1 'Space Grotesk'; text-transform: uppercase; letter-spacing: .02em;
}
.entete__sigle {
  width: 38px; height: 38px; border-radius: 11px; background: var(--marque); color: var(--sur-marque);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
/* Sur la reference, les liens sont ACCOLES au logo — pas centres, pas cales a
   droite. Logo et navigation forment donc un seul groupe qui pousse le reste
   vers le bord. */
.entete__g { display: flex; align-items: center; gap: 30px; margin-right: auto; min-width: 0; }
.entete__nav { min-width: 0; }
.entete__nav > ul { display: flex; align-items: center; gap: 26px; }
.entete__nav li { position: relative; }
.entete__nav a {
  text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 0; display: inline-block;
}
.entete__nav > ul > li > a:hover { color: var(--accent); }
/* Le chevron dit qu'un volet attend derriere le lien : deux traits pivotes,
   dessines par la bordure — aucun caractere, aucune police d'icone. */
.entete__nav li.a-volet > a { display: inline-flex; align-items: center; gap: 7px; }
.chev {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .18s;
}
.entete__nav li.a-volet:hover > a .chev,
.entete__nav li.a-volet:focus-within > a .chev { transform: translateY(1px) rotate(225deg); }
/* Le volet est CENTRE sous sa tete : cale a gauche, un panneau large deborde
   la fenetre des que l'entree est du cote droit de la barre. Il touche le lien
   (top: 100%) pour que la souris ne traverse aucun vide en descendant. */
.volet {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none; align-items: flex-start; gap: 30px;
  /* `width: max-content` : en position absolue, la largeur est un shrink-to-fit
   calcule sur la place restante A DROITE de `left: 50%` — soit la moitie du
   `li`, quelques dizaines de pixels. Sans lui, le panneau retombe a son
   `min-width` et la vitrine sort de la carte. */
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 16px; padding: 22px 24px;
}
.entete__nav li:hover > .volet, .entete__nav li:focus-within > .volet { display: flex; }
/* La vitrine : le visuel du volet, sur le cote. `flex: 0 0` et non `0 1` — une
   base compressible la reduirait a un mot par ligne des que les colonnes
   s'allongent. Hauteur FIXE sur le visuel, sinon le cadre etire tout le volet. */
.volet__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.volet__vitPh { min-height: 0; height: 128px; width: 100%; border-radius: 12px; overflow: hidden; }
.volet__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.volet__vitN { font-size: 16px; line-height: 1.3; }
.volet__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.volet__vitZ { font-size: 14px; font-weight: 600; color: var(--accent); justify-self: start; }
.volet__t {
  display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: 10px;
}
/* Les colonnes gardent leur largeur naturelle : compressibles, le `nowrap` des
   libelles les ferait deborder les unes sur les autres. */
.volet__col { flex: 0 0 auto; }
.volet__col a { display: block; font-weight: 400; padding: 5px 0; white-space: nowrap; }
.entete__bascule {
  display: none; flex-direction: column; gap: 4px; margin-left: auto;
  background: transparent; border: 1px solid var(--bordure); border-radius: 11px;
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.entete__bascule i { width: 17px; height: 2px; background: var(--texte); }

/* --- FIL D'ARIANE --- */
.fil { background: var(--fond-2); font-size: 13px; }
.fil ol { display: flex; flex-wrap: wrap; align-items: center; padding: 14px 0; }
.fil a { text-decoration: none; color: var(--texte-doux); }
.fil li + li { padding-left: 24px; position: relative; }
.fil li + li::before {
  content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px;
  border-top: 1.5px solid var(--bordure); border-right: 1.5px solid var(--bordure);
  transform: translateY(-50%) rotate(45deg);
}

/* --- AFFICHE : la grande image deborde du bandeau nuit sur le bandeau
       clair suivant ; c'est le geste d'ouverture de la reference. --- */
.affiche { padding: 78px 0 150px; }
.affiche__c { display: flex; flex-wrap: wrap; gap: 46px; align-items: center; }
.affiche__c > * { min-width: 0; }
.affiche__mot { flex: 1 1 46%; min-width: min(100%, 320px); }
.affiche__vue { flex: 1 1 42%; min-width: min(100%, 300px); margin-bottom: -110px; }
.affiche__vue .vign { border-radius: 26px; }
.affiche__chapo { margin-top: 22px; max-width: 56ch; opacity: .8; }
.affiche__act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.affiche__at { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; font-size: 14px; }
.affiche__at li { position: relative; padding-left: 18px; opacity: .82; }
.affiche__at li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--marque);
}
/* Un atout peut porter un titre et sa ligne d'appui : c'est du contenu,
   il tient sur deux lignes plutot que d'etre jete faute de place. */
.affiche__at li:has(.affiche__at-t) { flex: 1 1 40%; min-width: min(100%, 240px); }
.affiche__at-t { display: block; font-weight: 600; }
.affiche__at em { display: block; margin-top: 3px; font-style: normal; opacity: .74; }

/* --- TUILES : plaque nuit ancree en bas a gauche de la vignette. La
       plaque et l'etiquette partagent la cellule de grille de l'image :
       aucune ne peut deborder du cadre. --- */
.tuile { display: grid; grid-template-rows: auto auto; text-decoration: none; color: inherit; }
.tuile > * { min-width: 0; }
.tuile > .vign, .tuile > .plaque, .tuile > .tuile__et, .tuile > .tuile__d { grid-area: 1 / 1; }
/* La vignette pose sa photo en absolu : sans cote declare, elle passerait
   AU-DESSUS de la plaque et de l'etiquette, qui sont dans le flux. Elles
   sont posees par-dessus la photo, c'est tout leur role. */
.tuile > .plaque, .tuile > .tuile__et, .tuile > .tuile__d { position: relative; z-index: 1; }
.plaque {
  align-self: end; justify-self: start; width: 86%;
  background: var(--texte); color: var(--fond); padding: 20px 22px;
  border-top-right-radius: 22px; border-bottom-left-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Quand les donnees n'apportent pas de photo, la plaque n'a plus de cadre a
   mordre : elle prend toute la tuile et devient le pave nuit lui-meme. */
.tuile--sec > .plaque {
  width: 100%; min-height: 150px; align-items: flex-start; padding: 26px;
  border-radius: 20px 22px 20px 20px;
}
.tuile--sec > .plaque .plaque__t { font-size: 19px; }
.plaque__t { font: 600 17px/1.25 'Space Grotesk'; text-transform: uppercase; }
.plaque__f {
  flex: none; width: 11px; height: 11px; border-top: 2px solid var(--marque);
  border-right: 2px solid var(--marque); transform: rotate(45deg);
}
.tuile__et, .tuile__d {
  align-self: start; justify-self: end; margin: 16px; max-width: calc(100% - 32px);
  background: var(--marque); color: var(--sur-marque); border-radius: 100px;
  padding: 7px 15px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.tuile__d { justify-self: start; background: var(--fond); color: var(--texte); }
.tuile__et--haut { align-self: start; }
.tuile__t { display: block; margin-top: 20px; font: 600 19px/1.3 'Space Grotesk'; text-transform: uppercase; }
.tuile__x { display: block; margin-top: 12px; color: var(--texte-doux); font-size: 15px; }
.tuile__l {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-weight: 600; font-size: 14px; color: var(--accent);
}
.tuile__l::after {
  content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg);
}
.tuile--clair { border: 1px solid var(--bordure); border-radius: 22px; padding: 14px 14px 26px; }
.tuile--clair .vign { border-radius: 16px; }
.tuile--clair .tuile__t, .tuile--clair .tuile__x, .tuile--clair .balises,
.tuile--clair .tuile__l { margin-left: 8px; margin-right: 8px; }

/* --- COLONNES : deux temps, l'un porte le mot, l'autre l'image. --- */
.deux { display: flex; flex-wrap: wrap; gap: 34px 60px; align-items: flex-start; }
.deux > * { min-width: 0; }
.deux__g { flex: 1 1 40%; min-width: min(100%, 290px); }
.deux__d { flex: 1 1 48%; min-width: min(100%, 300px); }
.deux--large .deux__g { flex: 1 1 44%; }
.deux--large .deux__d { flex: 1 1 46%; }
.deux--inv { flex-direction: row-reverse; }
.deux__prose { margin-bottom: 30px; }
.deux__g .vign { margin-top: 30px; }

/* Carte de marque posee sur le coin bas droit de la grande image. */
.image { position: relative; }
.encart {
  position: absolute; right: 22px; bottom: 22px; max-width: calc(100% - 44px);
  background: var(--marque); color: var(--sur-marque); border-radius: 18px;
  padding: 18px 22px; font-size: 13px; line-height: 1.4;
}
.encart b { display: block; font: 600 30px/1 'Space Grotesk'; margin-bottom: 6px; }

/* --- FICHES : le pave clair a bordure fine de la reference. --- */
.fiche { border: 1px solid var(--bordure); border-radius: 20px; padding: 28px; background: var(--fond); }
.fiche--nuit { background: transparent; border-color: var(--texte-doux); }
.fiche__t { display: block; margin-top: 20px; font: 600 18px/1.3 'Space Grotesk'; text-transform: uppercase; }
.fiche__x { margin-top: 11px; color: var(--texte-doux); font-size: 15px; }
.fiche__v { display: block; font: 600 clamp(28px, 3vw, 40px)/1 'Space Grotesk'; color: var(--marque); }
.fiche__v i { font-style: normal; font-size: 14px; color: var(--texte-doux); }
.fiche--val .fiche__t, .fiche--prix .fiche__t { margin-top: 14px; }
.fiche--prix { display: flex; flex-direction: column; }
.fiche--prix .pil { margin-top: auto; align-self: flex-start; }
.fiche--prix .listes { margin-bottom: 24px; }
.fiche--vue .vign { border-radius: 14px; }
.matiere .fiche__t { margin-top: 18px; }
.matiere .vign { border-radius: 24px; }
.mediane { margin-top: 34px; }

/* --- RUBAN : bande de marque, clippee par construction. --- */
.ruban { background: var(--marque); color: var(--sur-marque); padding: 17px 0; overflow: hidden; }
.marquee { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; white-space: nowrap; }
.ruban__m {
  display: inline-flex; align-items: center; gap: 34px; padding: 0 17px;
  font: 600 14px/1 'Space Grotesk'; letter-spacing: .12em; text-transform: uppercase;
}
.ruban__m::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- LIGNES de communes --- */
.ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 17px 0; border-top: 1px solid var(--bordure); text-decoration: none;
}
.ligne__t { font: 600 16px/1.3 'Space Grotesk'; text-transform: uppercase; }
.ligne__x { font-size: 13px; color: var(--texte-doux); }
.ligne:hover .ligne__t { color: var(--accent); }

/* --- COMPTES : filets verticaux entre les valeurs. --- */
.compte > * { flex: 1 1 20%; min-width: min(100%, 190px); }
.compte__u { border-left: 2px solid var(--marque); padding-left: 22px; }
.compte__v { display: block; font: 600 clamp(30px, 3.4vw, 46px)/1 'Space Grotesk'; }
.compte__l { display: block; margin-top: 9px; font-size: 14px; color: var(--texte-doux); }
.bande--nuit .compte__l { color: inherit; opacity: .78; }

/* --- ANCRAGE --- */
.coord li { padding: 15px 0; border-top: 1px solid var(--texte-doux); font-size: 15px; }
.coord li:first-child { border-top: 0; }

/* --- PAROLES : plaque d'identite debordante sous la carte. --- */
.parole { margin: 0; background: var(--fond); border-radius: 20px; padding: 30px 28px 52px; position: relative; }
.parole__n { color: var(--marque); letter-spacing: 3px; font-size: 15px; }
.parole__x { margin: 16px 0 0; font-size: 15px; color: var(--texte-doux); }
.parole__x b { color: var(--texte); }
.carton {
  position: absolute; left: 24px; bottom: -22px; max-width: calc(100% - 48px);
  display: flex; align-items: center; gap: 12px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 15px; padding: 11px 17px;
}
.carton__av {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--marque);
  color: var(--sur-marque); display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 'Space Grotesk';
}
.carton__n { display: block; font-weight: 600; font-size: 14px; }
.carton__r { display: block; font-size: 12px; color: var(--texte-doux); }

/* --- DEROULE : relance en pied de section nuit. --- */
.relance {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--texte-doux);
}
.relance > * { min-width: 0; }
.relance__t { font: 600 20px/1.3 'Space Grotesk'; text-transform: uppercase; }

/* --- VEILLE : la rangee d'appel de la reference — titre a gauche, numero en
       bouton a pastille colle a droite ; ce qui explique descend SOUS la
       rangee, sur toute la largeur. --- */
.veille { background: var(--marque); color: var(--sur-marque); padding: 60px 0; }
.veille__rang { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.veille__rang > * { min-width: 0; }
.veille__g { flex: 1 1 50%; min-width: min(100%, 300px); }
/* La paire de la veille ne passait pas par `.actes` : elle etait posee en
   rangee SANS repli, et au doigt les deux boutons se partageaient 200px —
   « Demander un devis » finissait a 93px, un mot et demi par ligne. La
   regle 7 veut les deux portes ensemble, pas cote a cote a tout prix :
   elles se replient l une SOUS l autre. */
.veille__d { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.veille__t { display: block; font: 600 clamp(24px, 2.8vw, 36px)/1.14 'Space Grotesk'; text-transform: uppercase; }
.veille__bas { margin-top: 30px; padding-top: 26px; border-top: 1px solid currentColor; }
.veille__x { max-width: 58ch; }
.veille__bas .listes { margin-top: 16px; }
.veille__bas .past { margin-top: 22px; }

/* --- AVANT / APRES : decoupe VERTICALE pilotee par --pos. --- */
.duel { display: flex; flex-wrap: wrap; gap: 34px; align-items: center; margin-top: 42px; }
.duel > * { min-width: 0; }
.duel--inv { flex-direction: row-reverse; }
.duel__mot { flex: 1 1 36%; min-width: min(100%, 270px); }
.compare {
  --pos: 50%; flex: 1 1 54%; min-width: min(100%, 280px);
  position: relative; border-radius: 22px; overflow: hidden; background: var(--fond-2);
  touch-action: none;
}
.compare::before { content: ''; display: block; padding-top: 63%; }
.compare__v { position: absolute; inset: 0; }
.compare__v .vign { position: absolute; inset: 0; border-radius: 0; }
.compare__v .vign::before { display: none; }
.compare__v--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__l {
  position: absolute; bottom: 16px; background: var(--texte); color: var(--fond);
  border-radius: 100px; padding: 6px 15px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; z-index: 3;
}
.compare__l--a { left: 16px; }
.compare__l--b { right: 16px; background: var(--marque); color: var(--sur-marque); }
.compare__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px;
  background: var(--fond); transform: translateX(-50%); z-index: 4;
}
.compare__poignee {
  position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; border-radius: 50%;
  background: var(--fond); transform: translate(-50%, -50%); z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.compare__poignee::before {
  content: ''; width: 13px; height: 13px; border-top: 2px solid var(--texte);
  border-right: 2px solid var(--texte); transform: rotate(45deg);
}
.compare__cur {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 6;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.compare__cur:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; opacity: 1; }

/* --- QUESTIONS : filets fins, chevron CSS, sans carte. --- */
.demandes { align-self: stretch; }
.demande { border-top: 1px solid var(--bordure); }
.demande summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px; padding: 21px 0;
  font: 600 17px/1.4 'Space Grotesk';
}
.demande summary::-webkit-details-marker { display: none; }
.demande summary i {
  flex: none; margin-top: 6px; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.demande[open] summary i { transform: rotate(225deg); }
.demande__r { padding-bottom: 22px; color: var(--texte-doux); font-size: 15px; max-width: 68ch; }

/* --- RENVOIS --- */
.renvoi {
  display: flex; gap: 18px; align-items: center; text-decoration: none;
  padding: 16px 0; border-top: 1px solid var(--bordure);
}
.renvoi > * { min-width: 0; }
.renvoi .vign { flex: none; width: 86px; }
.renvoi__c { min-width: 0; }
.renvoi__m { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.renvoi__t { display: block; margin-top: 5px; font: 600 16px/1.3 'Space Grotesk'; text-transform: uppercase; }
.renvoi__x { display: block; margin-top: 5px; font-size: 14px; color: var(--texte-doux); }
.renvoi__l { display: block; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--accent); }

/* --- BLOCS SEO : alternance imposee par la coquille. --- */
.essai { display: flex; flex-wrap: wrap; gap: 30px 60px; align-items: center; padding: 34px 0; }
.essai > * { min-width: 0; }
.essai--inv { flex-direction: row-reverse; }
.essai__mot { flex: 1 1 46%; min-width: min(100%, 300px); }
.essai__vue { flex: 1 1 42%; min-width: min(100%, 280px); }
.essai__mot .pil { margin-top: 26px; }

/* --- SORTIE : le grand appel en bandeau nuit. --- */
.sortie__c { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-end; justify-content: space-between; }
.sortie__c > * { min-width: 0; }
.sortie__t { display: block; font: 600 clamp(28px, 4vw, 54px)/1.06 'Space Grotesk'; text-transform: uppercase; }
.sortie__x { margin-top: 14px; max-width: 56ch; opacity: .78; }
.sortie__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sortie__form > * { min-width: 0; }
.sortie__form input, .sortie__form textarea {
  flex: 1 1 24%; min-width: min(100%, 200px); border: 0; border-radius: 100px;
  padding: 15px 22px; background: var(--fond); color: var(--texte); font: 15px/1.4 'Open Sans';
}
.sortie__form textarea { border-radius: 22px; resize: vertical; }

/* --- CONTACT : panneau nuit a champs blancs. --- */
.panneau {
  flex: 1 1 44%; min-width: min(100%, 300px); background: var(--texte); color: var(--fond);
  border-radius: 24px; padding: 34px;
}
.champ { display: block; margin-bottom: 15px; }
.champ span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.champ input, .champ textarea {
  width: 100%; border: 0; border-radius: 100px; padding: 15px 20px;
  background: var(--fond); color: var(--texte); font: 15px/1.45 'Open Sans';
}
.champ textarea { border-radius: 22px; resize: vertical; }
/* Le pied du panneau porte DEUX portes — l appel et l envoi, cote a cote
   (regle 7). L envoi garde son rang de bouton principal ; l appel prend la
   place qu il lui faut a sa gauche, et les deux se replient a plat quand la
   colonne se resserre. */
.panneau__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.panneau__pied > .pil { flex: 0 0 auto; }
.panneau__pied > .pil--plein { flex: 1 1 200px; width: auto; }
.panneau__m { margin-top: 14px; font-size: 12px; opacity: .7; }
.joignable { margin-top: 34px; display: grid; gap: 18px; padding-top: 26px; border-top: 1px solid var(--bordure); }
.joignable__u { display: flex; gap: 15px; align-items: center; }
.joignable__u > * { min-width: 0; }
.joignable__t { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.joignable__l { display: block; margin-top: 4px; font-weight: 600; text-decoration: none; }

/* --- ARTICLE ET MENTIONS : tete centree pleine largeur, bandeau plus LARGE
       que le corps, corps en colonne unique et etroite. --- */
.entete-art { max-width: 100%; text-align: center; }
.entete-art .eti { justify-content: center; }
.entete-art .tit { margin-top: 12px; }
.entete-art__meta {
  margin-top: 16px; font-size: 14px; color: var(--texte-doux);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
}
.bandeau-art { margin: 42px auto 0; width: min(100%, 928px); }
.bandeau-art .vign { border-radius: 24px; }
.colonne-art { margin: 46px auto 0; width: min(100%, 816px); }
.colonne-art .tit--petit { margin-top: 34px; }
.colonne-art .vign { margin: 26px 0; }
.renvois-art {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--bordure);
}
.renvois-art__t { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.renvois-art ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.renvois-art li { min-width: 0; }
.renvois-art a { font-size: 15px; font-weight: 600; text-decoration: none; }
.renvois-art a:hover { color: var(--accent); }

.papier--seul { max-width: 78ch; }
.papier .tit { margin-top: 8px; }
.papier .tit--petit { margin-top: 34px; }
.papier__meta { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }

/* --- PIED a TROIS ETAGES : appel, rangee marque | listes, ligne de bas. --- */
.pied { background: var(--texte); color: var(--fond); padding: 76px 0 28px; }
.pied__appel {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center;
  justify-content: space-between; padding-bottom: 44px; margin-bottom: 44px;
  border-bottom: 1px solid var(--texte-doux);
}
.pied__appel > * { min-width: 0; }
.pied__grand { flex: 1 1 46%; min-width: min(100%, 280px); font: 600 clamp(26px, 3vw, 40px)/1.12 'Space Grotesk'; text-transform: uppercase; }
.pied__rang { display: flex; flex-wrap: wrap; gap: 34px 46px; }
.pied__rang > * { min-width: 0; }
.pied__marqueur { flex: 1 1 30%; min-width: min(100%, 260px); }
.pied__listes { flex: 1 1 52%; min-width: min(100%, 280px); display: flex; flex-wrap: wrap; gap: 30px 34px; }
.pied__listes > * { min-width: 0; }
.pied__cols { display: flex; flex-wrap: wrap; gap: 34px; }
.pied__cols > * { min-width: 0; }
.pied__col { flex: 1 1 40%; min-width: min(100%, 200px); }
.pied__col--marque { flex: 1 1 30%; min-width: min(100%, 260px); }
.pied__marque { display: flex; align-items: center; gap: 11px; font: 600 26px/1 'Space Grotesk'; text-transform: uppercase; }
.pied__sigle {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--marque); color: var(--sur-marque); font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.pied__nap li { display: flex; align-items: flex-start; gap: 10px; }
.pied__puce {
  flex: none; margin-top: 6px; width: 8px; height: 8px; border-radius: 3px;
  background: var(--marque);
}
.pied__x { margin-top: 14px; font-size: 14px; opacity: .74; max-width: 40ch; }
.pied__t { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.pied__col ul { display: grid; gap: 10px; }
.pied__col a { font-size: 14px; text-decoration: none; opacity: .86; }
.pied__col a:hover { color: var(--marque); opacity: 1; }
.pied__nap li { font-size: 14px; opacity: .86; }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--texte-doux);
  font-size: 13px; opacity: .74;
}
.pied__liens { display: inline-flex; flex-wrap: wrap; gap: 20px; }
.pied__liens a { text-decoration: none; }

/* --- FACETTES / REFERENCES / CARACTERISTIQUES --- */
/* Le nombre de facettes vient des donnees : rangee qui se replie, jamais
   une grille a colonnes fixes. */
.facettes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.facettes > * { min-width: 0; }
.facette {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px;
  border: 1px solid var(--bordure); border-radius: 999px; background: var(--fond);
  color: var(--texte); text-decoration: none; font: 600 14px/1 'Open Sans';
}
.facette:hover { border-color: var(--marque); }
.facette--ici { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.facette--ici .pastille:empty::after { background: var(--sur-marque); }

.prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 16px; min-width: 0; }
.prix i { font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.prix b { font: 600 26px/1 'Space Grotesk'; color: var(--marque); }
.prix u { text-decoration: none; font-size: 13px; color: var(--texte-doux); }
.prix--grand { margin-top: 24px; }
.prix--grand b { font-size: clamp(30px, 3.4vw, 42px); }

/* Caracteristiques : des lignes, pas des cartes. */
.specs { margin-top: 40px; border-top: 1px solid var(--bordure); }
.specs__l {
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  padding: 16px 2px; border-bottom: 1px solid var(--bordure);
}
.specs__l > * { min-width: 0; }
.specs__k { flex: 1 1 40%; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.specs__v { flex: 1 1 46%; margin: 0; font: 600 17px/1.35 'Space Grotesk'; }

/* --- APPOINTS : les habits des morceaux que le socle fournit et que la
       reference ne montrait pas — second appel, libelle de lien, vignette
       de puce, encadre d'article. --- */
.actes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.actes > * { min-width: 0; }

.tuile__lib {
  display: block; margin-top: 10px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux);
}

/* La vignette de commune reste minuscule : la ligne demeure une ligne. */
.vign--puce {
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  --ratio: 0; padding-top: 0;
}
.vign--puce::before { display: none; }
.vign--puce span { font-size: 0; }

.vign--pas { margin: 14px 0 16px; border-radius: 14px; }

/* L'appui de la foire aux questions : un pave de rappel sous la colonne. */
.appui {
  margin-top: 30px; padding: 24px 26px; background: var(--fond-2);
  border: 1px solid var(--bordure); border-radius: 20px;
}
.appui .fiche__t { margin-top: 0; }
.appui .actes { margin-top: 18px; }

.encadre {
  margin: 26px 0; padding: 22px 24px; border-left: 3px solid var(--marque);
  background: var(--fond-2); border-radius: 0 16px 16px 0;
}
.encadre .fiche__t { margin-top: 0; }
.encadre .prose { margin-top: 10px; }

.tit--menu { font-size: clamp(19px, 2vw, 23px); margin-top: 28px; }

.note { margin-top: 20px; font-size: 13px; color: var(--texte-doux); }
.bande--nuit .note { color: inherit; opacity: .74; }

.sortie__vue { flex: 1 1 260px; min-width: 0; margin-top: 26px; }
.sortie__vue .vign { border-radius: 18px; }

/* --- IDIOMES NATIFS DE LA REFERENCE --- */

/* Idiome n°1 — LE BOUTON A PASTILLE : libelle a gauche, disque de 42px a
   droite portant une fleche dessinee a la bordure. Pose cale a GAUCHE sous
   une grille, jamais centre. */
.past {
  display: inline-flex; align-items: center; gap: 14px; min-width: 0;
  padding: 6px 6px 6px 22px; border-radius: 100px;
  background: var(--marque); color: var(--sur-marque);
  font: 600 15px/1 'Open Sans'; text-decoration: none;
  border: 1.5px solid var(--marque);
}
/* Au doigt, le libelle doit pouvoir se couper : sans quoi il passe SOUS le
   disque au lieu de tenir a sa gauche. */
.past { max-width: 100%; }
.past > span { min-width: 0; overflow-wrap: anywhere; }
.past__d {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--sur-marque); position: relative;
}
.past__d::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--marque); border-right: 2px solid var(--marque);
  transform: translate(-60%, -50%) rotate(45deg);
}
.past--menu { padding-left: 20px; font-size: 14px; }
.past--vide { background: transparent; color: inherit; border-color: var(--bordure); }
.past--nuit, .past--tel, .past--pied {
  background: transparent; color: inherit; border-color: currentColor;
}
.past--nuit .past__d, .past--tel .past__d, .past--pied .past__d { background: currentColor; }
.past--nuit .past__d::before, .past--tel .past__d::before, .past--pied .past__d::before {
  border-top-color: var(--marque); border-right-color: var(--marque);
}
.past--pied .past__d::before { border-top-color: var(--texte); border-right-color: var(--texte); }
.past--tel > span { font: 600 clamp(20px, 2.4vw, 30px)/1 'Space Grotesk'; }
.past--fin { margin-left: auto; }
.mur .past, .veille__bas .past { align-self: flex-start; }

/* Idiome n°2, variante B — l'en-tete PLEINE LARGEUR : etiquette seule, puis
   le titre etale sur tout le cadre, et le propos SOUS lui. */
.teteL { max-width: 100%; }
.teteL__x { margin-top: 18px; max-width: 62ch; color: var(--texte-doux); }
.bande--nuit .teteL__x { color: inherit; opacity: .78; }

/* Idiome n°3 — LA CARTE A IMAGE DE FOND : l'image tient tout le fond, le texte
   vit en surimpression dans une boite posee en bas. */
/* L'image et le texte partagent UNE seule cellule de grille : le texte est bien
   pose par-dessus la photo, mais il continue de dicter la hauteur de la carte.
   En position absolue, un propos long sortirait du cadre. */
.fondu {
  display: grid; overflow: hidden; border-radius: 22px;
  color: inherit; text-decoration: none;
}
.fondu > * { grid-area: 1 / 1; min-width: 0; }
/* La vignette garde son ratio : il donne la hauteur PLANCHER de la carte, et
   elle s'etire si le propos demande davantage. */
.fondu__ph { border-radius: 0; align-self: stretch; }
.fondu__ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .74) 100%);
}
.fondu__mot {
  position: relative; z-index: 1; display: block; align-self: end;
  padding: 90px 24px 22px; color: #fff;
}
.fondu__mot .fiche__x, .fondu__mot .renvoi__x { color: inherit; opacity: .84; }
/* Le fondu pose son encre en blanc une fois pour toutes (`.fondu__mot`), et
   chaque enfant qui reimpose une couleur de PAGE la perd. La regle ci-dessus
   le faisait deja pour le propos et les listes ; la mention et le renvoi
   avaient ete oublies, et tous deux tirent `--accent`, un bleu nuit. Sur le
   degrade a 74 pour cent du bas de carte, « GUIDE », « PRIX » et « SECURITE »
   etaient ecrits en nuit sur nuit — mesure : 1,2 contre 1. Ils gardent leur
   distinction par l opacite, comme le propos, pas par une teinte qui ignore
   le sol sur lequel la carte les pose. */
.fondu__mot .renvoi__m, .fondu__mot .renvoi__l { color: inherit; }
.fondu__mot .listes li { color: inherit; opacity: .84; }
.fondu__rang {
  display: block; margin-top: 16px; font: 600 15px/1 'Space Grotesk'; letter-spacing: .2em;
}
.fondu--nuit { background: var(--texte); }
.fondu--lien:hover .fondu__mot { padding-bottom: 28px; }
.renvoi__t { display: block; font: 600 19px/1.3 'Space Grotesk'; text-transform: uppercase; }
.fondu__mot .fiche__t { margin-top: 0; }
.renvoi__x { display: block; margin-top: 10px; font-size: 15px; }
.renvoi__m { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .74; }
.renvoi__l { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-weight: 600; font-size: 14px; }
.renvoi__l::after {
  content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg);
}

/* Idiome n°4 — LA BARRE DE CHIFFRES : trois colonnes nues alignees sur la
   grille des cartes. Aucune carte, aucune bordure, aucun encadre. */
.rangChiffres { gap: 24px 34px; }

.unite__v { display: block; font: 600 clamp(34px, 4.4vw, 58px)/1.05 'Space Grotesk'; color: var(--marque); }
.bande--nuit .unite__v { color: inherit; }
.unite__l { display: block; margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.bande--nuit .unite__l { color: inherit; opacity: .78; }
.unite--aide .unite__l { font: 600 19px/1.3 'Space Grotesk'; text-transform: uppercase; color: inherit; }
.unite--aide .listes { margin-top: 14px; }
.unite--aide .fiche__x { margin-top: 14px; }

/* Idiome n°1 applique aux offres : le prix CONCLUT la carte, dans un pied ou
   il tient la gauche et le bouton a pastille la droite. */
.offre { border: 1px solid var(--bordure); border-radius: 22px; padding: 28px 26px; }
.offre__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bordure);
}
.offre__pied > * { min-width: 0; }
.offre__v { font: 600 clamp(26px, 3vw, 36px)/1 'Space Grotesk'; color: var(--marque); }
.offre__v i { font-style: normal; font-size: 13px; color: var(--texte-doux); }

/* --- REPLIS --- */
@media (max-width: 1000px) {
  .bande { padding: 68px 0; }
  .bande--haut { padding-top: 96px; }
  .affiche { padding: 56px 0 110px; }
  .affiche__vue { margin-bottom: -78px; }
  .deux, .essai { gap: 30px 36px; }
  .bandeau-art, .colonne-art { width: 100%; }
}
@media (max-width: 900px) {
  .entete__nav { position: absolute; top: 100%; left: 0; right: 0; display: none;
    background: var(--fond); border-bottom: 1px solid var(--bordure); padding: 12px 24px 22px; }
  .entete--ouvert .entete__nav { display: block; }
  .entete__nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .entete__nav li { border-top: 1px solid var(--bordure); }
  .volet { position: static; transform: none; display: flex; flex-direction: column; gap: 14px;
    border: 0; border-radius: 0; padding: 0 0 12px; min-width: 0; max-width: none; }
  /* La vitrine est un confort d'ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .volet__vit { display: none; }
  /* Replie, le volet est deja deroule : le chevron se retourne vers le haut. */
  .entete__nav li.a-volet > a .chev { transform: translateY(1px) rotate(225deg); }
  .entete__bascule { display: flex; margin-left: 0; order: 3; }
  /* REGLE 7 — la porte ne se replie pas : au doigt comme a l ecran large,
     l appel et le devis restent cote a cote. Ils passent en version courte
     (disque retire, libelle serre) et se calent avant la bascule. */
  .entete__act { display: flex; gap: 8px; margin-left: auto; order: 2; min-width: 0; }
  .entete__act .past--menu {
    padding: 8px 14px; font-size: 13px; gap: 0;
  }
  .entete__act .past--menu .past__d { display: none; }
  .entete__act .past--menu > span {
    display: block; max-width: 15ch; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; overflow-wrap: normal;
  }
  .entete { position: relative; }
}
@media (max-width: 720px) {
  .enrobe { width: min(100%, 100% - 34px); }
  .bande { padding: 54px 0; }
  .bande--haut { padding-top: 74px; }
  .affiche { padding: 44px 0 86px; }
  .affiche__vue { margin-bottom: -58px; }
  .mur { margin-top: 34px; gap: 18px; }
  .tete { gap: 18px; }
  .panneau { padding: 26px 22px; }
  .plaque { width: 92%; padding: 15px 17px; }
  .parole { padding: 26px 22px 50px; }
  .util__x { display: none; }
  .entete__c { gap: 12px; }
  .entete__act { gap: 6px; }
  .entete__act .past--menu { padding: 8px 11px; font-size: 12px; }
  .entete__act .past--menu > span { max-width: 11ch; }
}

/* ================= SIGNATURES DE FORME =================
   Traits releves EN LIGNE sur https://electria.framer.website/.
   Documentation lisible : electria/signatures.md */

/* SIGNATURE — le rayon ELLIPTIQUE : 16px en largeur, 64px en hauteur.
   Le coin n est pas un quart de cercle mais un quart d ellipse etiree,
   et la courbe se lit differemment selon qu on suit le bord haut ou le
   bord lateral. Releve trois fois sur le modele, nulle part ailleurs
   dans la coquille. */
.affiche__vue .vign { border-radius: 16px 64px; }
.matiere .vign { border-radius: 64px 16px; }

/* SIGNATURE — le COIN UNIQUE : un seul angle arrondi, les trois autres
   nets (`0 16px 0 0`, six occurrences sur le modele). La tuile cesse
   d etre symetrique et prend un sens de lecture. */
.tuile--clair .vign { border-radius: 0 16px 0 0; }
.fiche--vue .vign { border-radius: 0 16px 0 0; }

/* SIGNATURE — la vue de sortie apparait par le bas : masque en degre
   releve tel quel sur le modele (`transparent 65%, #000 100%`), ici sur
   une course courte pour que la photo reste lisible entierement.
   Decoratif, donc pointer-events: none. */
.sortie__vue .vign {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
  pointer-events: none;
}

/* SIGNATURE — la pastille carree est MORDUE au coin haut droit par un
   masque radial : seule marque evidee de la coquille, elle ne se confond
   avec aucun autre carre a rayon 13px. */
.pastille {
  -webkit-mask-image: radial-gradient(circle 8px at 100% 0, transparent 0 100%, #000 100%);
  mask-image: radial-gradient(circle 8px at 100% 0, transparent 0 100%, #000 100%);
}

/* SIGNATURE — l ombre est un halo LARGE et PLAT, pose sans decalage
   vertical notable (`0 2px 16px` a 5%), jamais un flou profond. */
.fiche, .tuile--clair, .parole {
  box-shadow: 0 2px 16px color-mix(in srgb, var(--texte) 5%, transparent);
}

/* >>> 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-22 sur 4 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="vign--mai"]: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="vign--mai"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */


/* === CONTRAT GRILLE (factory, chantier 20/08, #1/#2) — services taille égale + avant/après 3-col === */
.mur--tiers > * { flex-grow: 0 !important; }