/* ============================================================
   HEATFIX — la SOURCE de la mise en forme. dist/style.css en est une
   copie ecrasee a chaque rendu : ne jamais editer dist/.

   Huit variables de couleur, aucune autre, et pas un seul hex ecrit
   ici : les valeurs sont posees par le moteur dans :root. La seule
   surface sombre disponible est var(--texte) — tout panneau « nuit »
   se rend sur var(--texte) avec l'encre var(--fond).

   Les mesures de la reference qui font l'identite : rayon 16px sur les
   cartes, 24px sur les grandes vues, 40px sur les panneaux encartes,
   999px sur les pilules ; titre d'affiche a interlettrage tres negatif ;
   pilule prolongee d'une pastille ronde a fleche.
   ============================================================ */

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

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

body {
  margin: 0;
  font: 400 18px/1.7 Figtree, "Segoe UI", system-ui, sans-serif;
  color: var(--texte);
  background: var(--fond);
  /* Jamais overflow:hidden ici : un debordement doit rester visible,
     sinon le gate de debordement passe au vert sur une page fautive. */
  overflow-x: clip;
}

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

/* --- 1. TRAME ------------------------------------------------------ */

.cadre { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.zone { padding: 96px 0; background: var(--fond); }
.zone--gris { background: var(--fond-2); }
.zone--mince { padding: 46px 0; }

/* NORME COQUILLE, R3 — UNE SEULE LARGEUR PAR GRILLE, et le nombre de
   colonnes est COMPTE, jamais deduit du remplissage.
   La version precedente laissait le compte « venir des donnees » : flex-wrap
   plus une base en pourcentage et un flex-grow de 1. Le resultat n est pas un
   compte souple, c est une grille qui MENT — cinq services sur deux colonnes
   donnent quatre cartes a 604 px et une cinquieme, orpheline, etiree a
   1232 px. Le lecteur y lit une mise en avant qu aucune donnee n a demandee,
   et la photo qui remplit ce cadre est recadree deux fois differemment.
   Des pistes comptees ne dependent plus du reste de la division : la derniere
   carte garde la largeur de ses soeurs, la piste vide reste vide. Le nombre de
   colonnes suit la largeur d ecran, la seule chose qui doive vraiment le
   commander. */
.rang { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rang > * { min-width: 0; }
.rang--demi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rang--tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rang--quart { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rang--nu { gap: 40px 32px; }
@media (max-width: 1100px) {
  .rang--quart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rang--tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rang, .rang--demi, .rang--tiers, .rang--quart {
    grid-template-columns: minmax(0, 1fr);
  }
}

.duo { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.duo > * { min-width: 0; }
.duo__g, .duo__d { flex: 1 1 46%; min-width: min(100%, 320px); }
.duo--large .duo__g { flex: 1 1 52%; }
.duo--large .duo__d { flex: 1 1 40%; }
.duo--inv .duo__g { order: 1; }
.duo--inv .duo__d { order: 2; }
.duo--article { align-items: flex-start; gap: 56px; }
.duo--article .feuille { flex: 1 1 62%; min-width: min(100%, 320px); }
.duo--article .sommaire { flex: 1 1 26%; min-width: min(100%, 240px); position: sticky; top: 24px; }

/* --- 2. TYPOGRAPHIE ------------------------------------------------ */

.tt {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.tt--geant { font-size: clamp(38px, 6.2vw, 82px); line-height: 1.1; letter-spacing: -.045em; margin-bottom: 20px; }
.tt--petit { font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.02em; margin-bottom: 12px; }
.tt em { font-style: normal; color: var(--marque); }
/* R4b — sur la scene d ouverture, le mot accentue repose sur un fond SOMBRE
   (photo sous voile, ou cadre vide au repos) : le bleu de marque n y tient pas
   le contraste (mesure 3,58 pour un minimum de 4,5). Il prend donc une teinte
   eclaircie de la MEME couleur de marque : la palette reste l unique source,
   le factory n a toujours qu une variable a changer. */
.affiche .tt em { color: color-mix(in srgb, var(--marque) 55%, #ffffff); }

/* L'etiquette est precedee d'un tiret cadratin DESSINE, jamais ecrit. */
.sur {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--marque);
}
.sur::before { content: ""; width: 22px; height: 2px; background: currentColor; }

.prose { margin: 0 0 16px; color: var(--texte-doux); }
.prose:last-of-type { margin-bottom: 22px; }
.mention { margin-top: 22px; font-size: 14px; color: var(--texte-doux); }

.chef { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.chef .sur { justify-content: center; }
.chef__x { color: var(--texte-doux); }

.listes { display: grid; gap: 8px; margin-top: 14px; }
.listes li { position: relative; padding-left: 22px; font-size: 15px; color: var(--texte-doux); }
.listes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--marque);
}

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pastilles li {
  padding: 6px 14px; border: 1px solid var(--bordure); border-radius: 999px;
  font-size: 13px; color: var(--texte-doux);
}

/* Le picto de la reference est un TRAIT dans un carre. */
.trait {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border: 2px solid var(--marque); border-radius: 14px;
  color: var(--marque); font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.trait:empty::before, .trait:empty::after {
  content: ""; position: absolute; background: var(--marque); border-radius: 2px;
}
.trait:empty::before { width: 18px; height: 2px; }
.trait:empty::after { width: 2px; height: 18px; }

/* --- 3. LA PILULE A PASTILLE --------------------------------------- */

.bulle {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 24px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--marque); color: var(--sur-marque);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
}
.bulle__rond {
  flex: none; position: relative;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--sur-marque);
}
/* La fleche montante est dessinee : deux bordures et une rotation. */
.bulle__rond::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-top: 2px solid var(--marque); border-right: 2px solid var(--marque);
  transform: translate(-50%, -50%) rotate(45deg);
}
.bulle--clair { background: var(--fond); color: var(--texte); }
.bulle--clair .bulle__rond { background: var(--marque); }
.bulle--clair .bulle__rond::before { border-color: var(--sur-marque); }
.bulle--cerne { background: transparent; color: var(--texte); border-color: var(--bordure); }
.bulle--cerne .bulle__rond { background: var(--marque); }
.bulle--cerne .bulle__rond::before { border-color: var(--sur-marque); }
.bulle--nuit { background: var(--texte); color: var(--fond); }
.bulle--nuit .bulle__rond { background: var(--fond); }
.bulle--nuit .bulle__rond::before { border-color: var(--texte); }
/* La pilule du bandeau : plus courte, mais la hauteur de clic reste entiere —
   c est elle que la regle 7 mesure pour distinguer une PORTE d une mention. */
.bulle--min { padding: 8px 8px 8px 18px; font-size: 11px; }
.bulle--min .bulle__rond { width: 28px; height: 28px; }
.bulle--menu { padding: 6px 6px 6px 18px; font-size: 11px; }
.bulle--menu .bulle__rond { width: 28px; height: 28px; }
.bulle--plein { width: 100%; justify-content: space-between; border: 0; }
/* Le pied de la carte de contact porte DEUX portes — l appel et l envoi,
   cote a cote (regle 7) — et se replie a plat quand la carte se resserre. */
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.carte__pied > .bulle--cerne { flex: 0 0 auto; }
.carte__pied > .bulle--plein { flex: 1 1 220px; width: auto; }

/* --- 4. ENTETE ------------------------------------------------------ */

.tete { position: relative; z-index: 30; }

.annonce {
  overflow: hidden; border-bottom: 1px solid var(--bordure);
  background: var(--fond-2); color: var(--texte);
}
.annonce__piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.annonce__u {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 34px; white-space: nowrap;
  font-size: 13px; letter-spacing: .06em;
}
.annonce__u a { color: var(--marque); font-weight: 700; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .annonce__piste { animation: none; } }

.barre { background: var(--fond); border-bottom: 1px solid var(--bordure); }
.barre__c { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.barre__marque { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.barre__nav { margin-left: auto; }
.barre__nav > ul { display: flex; align-items: center; gap: 8px; }
.barre__nav li { position: relative; }
.barre__nav li > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--texte);
}
.barre__nav li > a:hover { color: var(--marque); }
.barre__act { flex: none; }
.barre__bascule { display: none; }

/* Le chevron du volet : deux bordures, jamais un caractere. */
.chev {
  flex: none; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.a-volet:hover > a .chev, .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; left: 50%; top: 100%; transform: translateX(-50%);
  display: none; align-items: flex-start; gap: 34px;
  /* `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); padding: 22px 26px;
  border: 1px solid var(--bordure); border-radius: 20px;
  background: var(--fond);
}
.a-volet:hover > .volet, .a-volet:focus-within > .volet { display: flex; }
.volet__col { flex: 0 0 auto; }
/* 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: 14px; 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(--marque); justify-self: start; }
.volet__t {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--marque);
}
.volet__col a { display: block; padding: 6px 0; font-size: 15px; color: var(--texte-doux); }
.volet__col a:hover { color: var(--texte); }

/* --- 5. FIL D'ARIANE ----------------------------------------------- */

.fil { background: var(--fond-2); border-bottom: 1px solid var(--bordure); }
.fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.fil li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texte-doux); }
.fil li + li::before {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid var(--bordure); border-top: 1.5px solid var(--bordure);
  transform: rotate(45deg);
}
.fil a:hover { color: var(--marque); }
.fil [aria-current] { color: var(--texte); font-weight: 600; }

/* --- 6. PANNEAUX ENCARTES ------------------------------------------ */

.encart { position: relative; border-radius: 40px; overflow: hidden; }
.encart--vue { display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; padding: 56px; }
.encart--nuit { background: var(--texte); color: var(--fond); padding: 64px 56px; }
/* Le panneau nuit porte lui aussi ses DEUX portes (regle 7). Le contour ne
   connait pas son sol : il prend l encre du courant, blanche ici, celle du
   corps ailleurs — aucune couleur ecrite en dur. */
.encart--nuit .bulle--cerne { color: inherit; border-color: currentColor; }

.vue { position: relative; border-radius: 24px; overflow: hidden; background: var(--fond-2); }
.vue::before { content: ""; display: block; padding-top: var(--ratio, 66%); }
.vue img, .vue > span {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.vue > span {
  display: flex; align-items: center; justify-content: center; padding: 14px;
  text-align: center; font-size: 13px; color: var(--texte-doux);
}
.vue--carre { --ratio: 100%; border-radius: 16px; }
.vue--mini { flex: none; width: 84px; }
/* R4 dit que le cadre VIDE est un etat tenable ; T5 dit qu une colonne trop
   etroite pour son texte est un accident. Les deux se rencontrent ici : la
   vignette de 84px porte le meme libelle d attente que les grands cadres,
   et « Emplacement visuel — cylindres » y tombait a un mot et demi par
   ligne. Un cadre de cette taille ne porte pas de phrase : il tient son
   aplat, comme `.vue--puce` le fait deja. Le libelle reste dans le
   balisage — il est `aria-hidden`, il ne servait qu a l oeil. */
.vue--mini > span { font-size: 0; }
.vue--fond { position: absolute; inset: 0; border-radius: 0; }
.vue--fond::before { display: none; }
/* Le voile assombrit la photo pour que l'encre claire tienne le
   contraste : il est pose sur la vue, jamais sur le texte. */
/* Le voile doit couvrir TOUTE la largeur : sous 900px l'affiche n'a plus
   de marge droite, et un degrade qui s'eteint a 78% y laisserait l'encre
   claire sur une photo claire. Il s'eteint donc au-dela du cadre. */
.vue--fond::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, var(--texte) 0%, var(--texte) 52%, transparent 132%);
  opacity: .86;
}
.vue--fond > span { z-index: 2; align-items: flex-end; justify-content: flex-end; color: var(--fond); opacity: .3; }

/* F1 — LA FIDELITE. La reference ouvre sur un panneau PLEINE FENETRE : il
   commence sous le bord haut, retire des cotes de quelques pixels seulement,
   et l entete flotte dessus. Le panneau tenait ici dans le `cadre` de 1280
   avec 96px d air au-dessus : un timbre-poste au milieu de la page, la ou le
   gabarit remplit l ecran. La zone rend donc ses marges au panneau. */
.affiche { padding: 0 0 96px; }
.affiche > .cadre { max-width: none; padding: 0 16px; }
.affiche .encart--vue {
  min-height: calc(100svh - 32px); margin-top: 16px;
  justify-content: center; padding: 132px 64px 64px;
}

/* L entete se pose SUR le panneau, comme sur la reference — sans quoi une
   barre opaque occupe la premiere rangee que le gabarit donne a la photo. */
.tete:has(+ .affiche) { position: absolute; inset: 0 0 auto; width: 100%; }
.tete:has(+ .affiche) .barre { background: transparent; border-bottom-color: transparent; }
.tete:has(+ .affiche) .barre__marque,
.tete:has(+ .affiche) .barre__nav li > a { color: var(--fond); }
/* REGLE 7 — la paire appel + devis vit ici sur une photo sombre. La pilule
   cernee gardait l encre du corps : une porte qu on ne voit pas n est pas
   une porte. */
.tete:has(+ .affiche) .bulle--cerne { color: var(--fond); border-color: rgba(255, 255, 255, .45); }
/* Le volet deroule reste une carte claire : il quitte la photo. */
.tete:has(+ .affiche) .volet a { color: var(--texte-doux); }
.tete:has(+ .affiche) .volet a:hover { color: var(--texte); }
/* Menu ouvert au telephone : la barre reprend son fond, sinon les liens
   deroules se lisent sur la photo. */
.tete:has(+ .affiche).tete--ouvert .barre { background: var(--fond); }
.tete:has(+ .affiche).tete--ouvert .barre__marque,
.tete:has(+ .affiche).tete--ouvert .barre__nav li > a { color: var(--texte); }
.tete:has(+ .affiche).tete--ouvert .bulle--cerne { color: var(--texte); border-color: var(--bordure); }

.affiche__mot { position: relative; z-index: 2; max-width: 680px; color: var(--fond); }
.affiche__mot .sur { color: var(--fond); }
.affiche__x { margin: 0 0 26px; font-size: 19px; color: var(--fond); opacity: .86; }
/* REGLE 7 — la seconde porte de l affiche est posee sur une photo sombre.
   `bulle--cerne` gardait l encre du corps et le trait de bordure clair du
   fond : « demander un devis » se lisait en gris fonce sur gris fonce. */
.affiche__act { display: flex; flex-wrap: wrap; gap: 12px; }
.affiche__act .bulle--cerne { color: var(--fond); border-color: rgba(255, 255, 255, .45); }
/* Les atouts ne sont plus sur la photo mais sous le panneau : leur encre est
   celle du corps, pas celle du fond. Ils reprennent la largeur de lecture du
   reste de la page, que le panneau vient d abandonner. */
.affiche__at {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  width: 100%; max-width: 1280px; margin: 44px auto 0; padding: 26px 24px 0;
  border-top: 1px solid var(--bordure);
  color: var(--texte);
}
.affiche__at em { color: var(--texte-doux); }
.affiche__at > * { min-width: 0; }
.affiche__at li { flex: 1 1 20%; min-width: min(100%, 190px); }
.affiche__at-t { display: block; font-size: 16px; font-weight: 700; }
.affiche__at em { font-style: normal; font-size: 14px; opacity: .74; }

/* --- 7. CARTES ------------------------------------------------------ */

.carte {
  display: flex; flex-direction: column;
  padding: 26px; border-radius: 16px;
  background: var(--fond-2);
}
.zone--gris .carte { background: var(--fond); }
.carte--haute { padding: 40px; }
.carte--pile { flex-direction: row; align-items: flex-start; gap: 20px; }
.carte--pile .trait { margin-bottom: 0; }
.carte--pile > div { min-width: 0; }
.carte--prix { border: 1px solid var(--bordure); }
.carte--prix .bulle { margin-top: auto; align-self: flex-start; }
.carte--val b, .carte__v {
  display: block; margin-bottom: 8px;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.04em; color: var(--marque);
}
.carte__v i { font-style: normal; font-size: 15px; color: var(--texte-doux); letter-spacing: 0; }
.carte__t { display: block; margin-bottom: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.carte__x { margin: 0; font-size: 15px; color: var(--texte-doux); }
.carte--forme { gap: 14px; padding: 34px; border: 1px solid var(--bordure); }
.champ { display: grid; gap: 6px; }
.champ span { font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.champ input, .champ textarea, .sortie__form input, .sortie__form textarea {
  width: 100%; padding: 13px 18px;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--fond-2); color: var(--texte);
  font: inherit; font-size: 15px;
}
.zone--gris .champ input, .zone--gris .champ textarea { background: var(--fond-2); }

.pile { display: flex; flex-direction: column; gap: 16px; }

.nu { display: flex; flex-direction: column; }
.nu--vue .trait { display: none; }

/* Offre : carte HORIZONTALE, vue carree a gauche. */
.offre {
  display: flex; gap: 22px; align-items: center;
  padding: 20px; border-radius: 16px;
  background: var(--fond-2);
}
.zone--gris .offre { background: var(--fond); }
.offre > * { min-width: 0; }
.offre .vue { flex: none; width: 168px; }
.offre__c { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.offre__t { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.offre__x { margin: 0; font-size: 15px; color: var(--texte-doux); }

/* --- 8. RUBAN, JETONS, CHIFFRES ------------------------------------ */

.ruban { overflow: hidden; padding: 22px 0; background: var(--texte); color: var(--fond); }
.ruban__piste { display: flex; width: max-content; animation: defile 30s linear infinite; }
.ruban__u {
  display: inline-flex; align-items: center; padding: 0 34px; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.ruban__u + .ruban__u::before {
  content: ""; width: 7px; height: 7px; margin-right: 34px;
  border-radius: 999px; background: var(--marque);
}
@media (prefers-reduced-motion: reduce) { .ruban__piste { animation: none; } }

.jetons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.jeton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--fond); font-size: 15px; font-weight: 600;
}
.jeton em { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.jeton:hover { border-color: var(--marque); color: var(--marque); }
.jeton--mort { align-self: flex-start; margin: 16px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }

.chiffres { justify-content: space-between; }
.chiffre { text-align: center; }
.chiffre__v {
  display: block; font-size: clamp(34px, 4vw, 56px); font-weight: 700;
  line-height: 1.05; letter-spacing: -.045em; color: var(--marque);
}
.chiffre__l { font-size: 14px; color: var(--texte-doux); }

/* --- 9. ACCORDEON, PAROLES, RENVOIS -------------------------------- */

.plis { display: grid; }
.plis--seul { max-width: 820px; margin: 0 auto; }
.pli { border-top: 1px solid var(--bordure); }
.pli:last-child { border-bottom: 1px solid var(--bordure); }
.pli summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; letter-spacing: -.015em;
}
.pli summary::-webkit-details-marker { display: none; }
.pli summary i {
  flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--marque); border-bottom: 2px solid var(--marque);
  transform: translateY(-3px) rotate(45deg); transition: transform .18s ease;
}
.pli[open] summary i { transform: translateY(2px) rotate(225deg); }
.pli__c { padding-bottom: 22px; max-width: 640px; }

/* Mur maconne : les colonnes se remplissent d'elles-memes, le compte de
   paroles vient des donnees. */
.mur { column-width: 340px; column-gap: 24px; }
.parole {
  break-inside: avoid; margin: 0 0 24px;
  padding: 26px; border-radius: 16px;
  background: var(--fond-2);
}
.zone--gris .parole { background: var(--fond); }
.parole__h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.parole__h > * { min-width: 0; }
.parole__av {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--marque); color: var(--sur-marque); font-weight: 700;
}
.parole__i { flex: 1 1 auto; display: grid; }
.parole__n { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.parole__r { font-size: 13px; color: var(--texte-doux); }
.parole__note { flex: none; color: var(--marque); font-size: 14px; letter-spacing: 1px; }
.parole__x { margin: 0; font-size: 16px; color: var(--texte-doux); }

.oeuvre { display: flex; flex-direction: column; }
.oeuvre__l { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.oeuvre__l .bulle__rond { width: 28px; height: 28px; background: var(--marque); }
.oeuvre__l .bulle__rond::before { border-color: var(--sur-marque); }

.renvoi {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--bordure);
}
.renvoi > * { min-width: 0; }
.renvoi__c { flex: 1 1 auto; display: grid; gap: 4px; }
.renvoi__m { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marque); }
.renvoi .bulle__rond { background: var(--fond-2); }
.renvoi .bulle__rond::before { border-color: var(--texte); }
.renvoi:hover .bulle__rond { background: var(--marque); }
.renvoi:hover .bulle__rond::before { border-color: var(--sur-marque); }

/* --- 10. BLOCS SEO, AVANT/APRES, VEILLE ---------------------------- */

.essai { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding: 34px 0; }
.essai > * { min-width: 0; }
.essai__mot { flex: 1 1 46%; min-width: min(100%, 320px); }
.essai__vue { flex: 1 1 44%; min-width: min(100%, 300px); }
.essai--inv .essai__mot { order: 2; }
.essai--inv .essai__vue { order: 1; }

/* Le texte du duel se lit AVANT le comparateur : il porte son numero en
   trait, le comparateur n'est que la demonstration qui suit. */
.duel { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 30px 0; }
.duel > * { min-width: 0; }
.duel__mot { flex: 1 1 38%; min-width: min(100%, 280px); }
.duel__v { flex: 1 1 52%; min-width: min(100%, 300px); }
.duel__mot .prose { margin-top: 12px; }
.duel__mot .pastilles { margin-top: 18px; }
.duel--inv .duel__mot { order: 2; }
.duel--inv .duel__v { order: 1; }

.compare { --pos: 50%; position: relative; border-radius: 24px; overflow: hidden; }
.compare .vue { border-radius: 0; }
.compare__v { position: relative; }
.compare__v--avant {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__l {
  position: absolute; bottom: 16px; z-index: 3;
  padding: 7px 16px; border-radius: 999px;
  background: var(--texte); color: var(--fond);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.compare__l--a { left: 16px; }
.compare__l--b { right: 16px; }
.compare__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 3px; margin-left: -1.5px; background: var(--fond);
}
.compare__poignee {
  position: absolute; top: 50%; left: var(--pos); z-index: 5;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 3px solid var(--fond); border-radius: 999px;
  background: var(--marque);
}
.compare__poignee::before, .compare__poignee::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--sur-marque); border-right: 2px solid var(--sur-marque);
}
.compare__poignee::before { left: 9px; transform: translateY(-50%) rotate(-135deg); }
.compare__poignee::after { right: 9px; transform: translateY(-50%) rotate(45deg); }
/* Le pilote unique : un range plein cadre, invisible mais bien present —
   souris, doigt et clavier passent tous par lui. */
.compare__cur {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.compare__cur::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.compare__cur::-moz-range-thumb { width: 46px; height: 300px; border: 0; opacity: 0; }
.compare__cur:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; opacity: 1; }

.veille { padding: 54px 0; background: var(--marque); color: var(--sur-marque); }
.veille__c { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.veille__c > * { min-width: 0; }
.veille__mot { flex: 1 1 52%; min-width: min(100%, 300px); }
.veille__mot .sur { color: var(--sur-marque); }
.veille__t { display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.03em; }
.veille__x { margin-top: 10px; opacity: .88; }
.veille .listes li { color: var(--sur-marque); }
.veille .listes li::before { background: var(--sur-marque); }
.veille__act { flex: 1 1 28%; min-width: min(100%, 240px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.veille__tel { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.03em; }

/* --- 11. SORTIE, NAP, FEUILLE, PIED -------------------------------- */

.sortie { text-align: center; }
.sortie .sur { color: var(--marque); justify-content: center; }
.sortie__t { display: block; max-width: 760px; margin: 0 auto 14px; font-size: clamp(28px, 4vw, 52px); font-weight: 600; line-height: 1.15; letter-spacing: -.04em; }
.sortie__x { max-width: 620px; margin: 0 auto 26px; opacity: .82; }
.sortie__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.sortie__form > * { min-width: 0; }
.sortie__form input, .sortie__form textarea { flex: 1 1 30%; min-width: min(100%, 220px); background: var(--fond); }

.nap { display: grid; gap: 10px; margin-top: 24px; }
.nap li { padding: 12px 0; border-bottom: 1px solid var(--bordure); font-size: 15px; color: var(--texte-doux); }
.nap--bloc { gap: 22px; }
.nap__u { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.nap__t { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marque); }
.nap__l { font-size: 17px; font-weight: 600; }

.feuille { max-width: 780px; }
.feuille--seule { margin: 0 auto; }
.feuille__meta { margin: 0 0 24px; font-size: 14px; color: var(--texte-doux); }
.feuille .vue { margin-bottom: 26px; }
.feuille .tt--petit { margin-top: 34px; }
.sommaire { gap: 10px; }
.sommaire ul { display: grid; gap: 8px; }
.sommaire a { font-size: 15px; color: var(--texte-doux); }
.sommaire a:hover { color: var(--marque); }

.relais {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 34px; padding: 26px 30px; border-radius: 16px; background: var(--fond-2);
}
.zone--gris .relais { background: var(--fond); }
.relais > * { min-width: 0; }

/* Le pied de la reference n'aligne AUCUNE colonne de liens : un etage
   d'identite large a gauche, un etage de rappel a droite, puis une seule
   ligne de renvois au-dessus du copyright. */
.pied { padding: 0 0 40px; background: var(--fond); }
.pied__haut { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.pied__haut > * { min-width: 0; }
.pied__ident { flex: 1 1 52%; min-width: min(100%, 280px); }
.pied__appel {
  flex: 1 1 32%; min-width: min(100%, 260px);
  padding: 28px 30px; border: 1px solid var(--bordure); border-radius: 26px;
}
.pied__appelT { display: block; margin-bottom: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.pied__appel .bulle { margin-top: 20px; }
.pied__marque { display: block; margin-bottom: 14px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.pied__x { max-width: 520px; font-size: 15px; opacity: .74; }
.pied__t { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marque); }
.pied__nap { margin-top: 26px; }
.pied__nap ul { display: grid; gap: 8px; }
.pied__nap li { font-size: 15px; opacity: .78; }
.pied__ligne {
  display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--bordure);
}
.pied__ligne > * { min-width: 0; }
.pied__menu { flex: 1 1 58%; min-width: min(100%, 320px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.pied__gr { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.pied__gr .pied__t { margin-bottom: 0; }
.pied__menu a { font-size: 15px; opacity: .78; }
.pied__menu a:hover { opacity: 1; color: var(--marque); }
.pied__fin { flex: 0 1 auto; margin-left: auto; display: grid; gap: 8px; text-align: right; font-size: 14px; opacity: .7; }
.pied__fin .pied__liens { justify-content: flex-end; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- 11b. FACETTES, DEPART DE PRIX, CARACTERISTIQUES ---------------- */

/* Les facettes sont des ADRESSES deja filtrees, pas un widget de tri :
   la facette courante n'est pas un lien, elle porte aria-current. */
.jetons--facettes { justify-content: flex-start; }
.jeton--plein {
  background: var(--marque); border-color: var(--marque); color: var(--sur-marque);
  cursor: default;
}
.jeton--plein:hover { border-color: var(--marque); color: var(--sur-marque); }

/* "A partir de" est impose par la coquille, jamais par les donnees. */
.depart { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.depart > * { min-width: 0; }
.depart em {
  font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux);
}
.depart b {
  font-size: 26px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em; color: var(--marque);
}
.depart i { font-style: normal; font-size: 14px; color: var(--texte-doux); }
.depart--grand b { font-size: clamp(32px, 3.6vw, 44px); }

.carte__s { margin: 0; font-size: 15px; color: var(--texte-doux); }

/* --- 11 bis. 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 de rappel. ------------------------------ */
.actes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.actes > * { min-width: 0; }
.bulle--nu { background: transparent; color: var(--texte); border: 1px solid var(--bordure); }
.bulle--nu .bulle__rond { background: var(--marque); }
/* Un atout peut porter un nom, un propos et ses precisions : la puce passe
   alors en colonne, sans quitter la ligne des atouts simples. */
.affiche__at li:has(em + em) { flex: 1 1 40%; min-width: min(100%, 250px); }
.affiche__at em { display: block; }
.nu__m { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marque); }
/* La vignette de commune reste minuscule : la pilule demeure une pilule. */
.vue--puce { width: 26px; height: 26px; flex: none; border-radius: 999px; overflow: hidden; }
.vue--puce img { width: 100%; height: 100%; object-fit: cover; }
.vue--puce span { font-size: 0; }
.vue--pas { margin: 14px 0 4px; border-radius: 16px; }
.lecture { margin-top: 26px; max-width: 68ch; }
.rappel { margin-top: 28px; padding: 24px 26px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 22px; }
.rappel .carte__t { margin-top: 0; }
.rappel .actes { margin-top: 18px; }
.encadre { margin: 26px 0; padding: 22px 24px; border-left: 3px solid var(--marque); background: var(--fond-2, var(--fond)); border-radius: 0 16px 16px 0; }
.encadre .carte__t { margin-top: 0; }
.encadre .prose { margin-top: 10px; }
.tt--menu { font-size: clamp(19px, 2vw, 23px); margin-top: 28px; }
.offre__l { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marque); }
.sortie__vue { width: min(100%, 520px); margin: 30px auto 0; }
.sortie__vue .vue { border-radius: 24px; }
.chef__x--gauche { margin-left: 0; text-align: left; }

/* --- 11 ter. LES IDIOMES DE LA REFERENCE ---------------------------
   Releve en ligne : la tete n'est jamais centree, les grilles ne sont
   jamais regulieres, et le pied n'aligne pas de colonnes de liens. ---- */

/* La tete cale a gauche et le propos descend SOUS le titre, en retrait
   derriere un filet vertical — jamais accole a lui. */
.tetR { max-width: 760px; margin-bottom: 46px; }
.tetR__x {
  margin-top: 22px; margin-left: 24px; padding-left: 18px;
  max-width: 460px; color: var(--texte-doux);
  border-left: 2px solid var(--bordure);
}

/* Mosaique : une image tenue a gauche, et a droite des tuiles de tailles
   INEGALES qui s'imbriquent sans se caler d'une rangee a l'autre. */
.mosa { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.mosa > * { min-width: 0; }
.mosa__vue { flex: 1 1 42%; min-width: min(100%, 300px); }
.mosa__vue .vue { border-radius: 26px; }
.mosa__vue .bulle { margin-top: 20px; }
.mosa__mot { flex: 1 1 48%; min-width: min(100%, 300px); }
.mosa__mot .prose { margin-top: 16px; color: var(--texte-doux); }
.mosa__jeu { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.mosa__jeu > * { min-width: 0; }
.tuile {
  flex: 1 1 42%; min-width: min(100%, 200px);
  padding: 20px 22px; border: 1px solid var(--bordure); border-radius: 20px;
  background: var(--fond);
}
.tuile:nth-child(2n) { flex-basis: 46%; }
.tuile:nth-child(4n+3) { flex-basis: 52%; }
.tuile__t { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.tuile__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.tuile--val { display: grid; gap: 4px; align-content: center; background: var(--marque); color: var(--sur-marque); border-color: transparent; }
.tuile--val b { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.04em; }
.tuile--val span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .86; }

/* Les communes voisines : la tete d'un cote, la nappe de pilules de
   l'autre — pas un titre centre au-dessus d'une liste. */
.voisin { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.voisin > * { min-width: 0; }
.voisin__mot { flex: 1 1 32%; min-width: min(100%, 280px); }
.voisin__mot .tetR { margin-bottom: 0; }
.voisin__l { flex: 1 1 58%; min-width: min(100%, 300px); display: flex; flex-wrap: wrap; gap: 12px; }
.voisin__l > * { min-width: 0; }

/* Le process : une rangee mixte (en-tete + image a gauche, deux etapes
   larges a droite) PUIS une bande d'etapes nues, sans bordure. */
.marche { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.marche > * { min-width: 0; }
.marche__mot { flex: 1 1 40%; min-width: min(100%, 300px); }
.marche__mot .tetR { margin-bottom: 30px; }
.marche__mot .vue { border-radius: 24px; }
/* Sans image, la colonne de mots ne remplit plus la rangee : elle se
   recentre plutot que de laisser un blanc sous le titre. */
.marche__mot:not(:has(.vue)) { align-self: center; }
.marche__mot:not(:has(.vue)) .tetR { margin-bottom: 0; }
.marche__pile { flex: 1 1 46%; min-width: min(100%, 300px); display: grid; gap: 20px; }
.marche__bande { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 52px; }
.marche__bande > * { min-width: 0; }
.pas__c .carte__t { display: block; margin-top: 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pas__c .carte__x { margin-top: 8px; color: var(--texte-doux); }
.pas--large { padding: 26px 28px; border: 1px solid var(--bordure); border-radius: 24px; background: var(--fond); }
/* La bande garde des colonnes etroites, meme quand une seule etape y
   descend : sans borne, l'unique colonne s'etalerait sur tout le cadre. */
.pas--nu { flex: 1 1 21%; min-width: min(100%, 230px); max-width: 320px; }

/* Grille de services : un titre CENTRE seul, puis des cartes larges dont
   le contenu se lit en rangee — visuel d'un cote, texte de l'autre. */
.seul { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.seul .sur { justify-content: center; }
.seul__x { margin-top: 18px; color: var(--texte-doux); }
.larges { display: flex; flex-wrap: wrap; gap: 24px; }
.larges > * { min-width: 0; }
.large {
  flex: 1 1 46%; min-width: min(100%, 330px);
  display: flex; align-items: center; gap: 24px;
  padding: 24px; border: 1px solid var(--bordure); border-radius: 26px; background: var(--fond);
}
.large > * { min-width: 0; }
.large .vue--carre { flex: none; width: 40%; border-radius: 20px; }
.large__c { flex: 1 1 auto; }
.large__c .carte__t { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.large__c .carte__x { margin-top: 10px; color: var(--texte-doux); }
.large__c .bulle { margin-top: 18px; }

/* Les avis en maconnerie : le rythme vient de hauteurs inegales, jamais
   d'une grille reguliere. */
.masse { column-width: 380px; column-gap: 24px; }
.masse__u {
  break-inside: avoid; margin-bottom: 24px;
  padding: 26px 28px; border: 1px solid var(--bordure); border-radius: 24px; background: var(--fond);
}
.masse__u .carte__t { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.masse__u .carte__x { margin-top: 10px; color: var(--texte-doux); }
.masse__u .carte__v { display: block; margin-top: 14px; font-size: 24px; letter-spacing: -.03em; color: var(--marque); }

/* Les matieres : la premiere passe en vedette sur une rangee, les autres
   suivent en colonnes etroites. */
.matiere { display: flex; flex-wrap: wrap; gap: 24px; }
.matiere > * { min-width: 0; }
.matiere__u { flex: 1 1 28%; min-width: min(100%, 260px); }
.matiere__u .vue { border-radius: 22px; }
.matiere__u .carte__t { display: block; margin-top: 16px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.matiere__u .carte__x { margin-top: 8px; color: var(--texte-doux); }
.matiere__u--tete { flex: 1 1 100%; display: flex; align-items: center; gap: 32px; }
.matiere__u--tete > * { min-width: 0; }
.matiere__u--tete .vue { flex: 1 1 52%; min-width: min(100%, 280px); }
.matiere__c { flex: 1 1 38%; min-width: min(100%, 260px); }
.matiere__c .carte__t { margin-top: 0; font-size: clamp(22px, 2.4vw, 28px); }

/* Les tarifs : la tete a gauche, les lignes de prix a droite — un releve,
   pas trois cartes alignees. */
.devis { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.devis > * { min-width: 0; }
.devis__g { flex: 1 1 34%; min-width: min(100%, 280px); }
.devis__g .tetR { margin-bottom: 24px; }
.devis__d { flex: 1 1 56%; min-width: min(100%, 300px); display: grid; }
.ligne { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--bordure); }
.ligne > * { min-width: 0; }
.ligne:last-child { border-bottom: 1px solid var(--bordure); }
.ligne__c { flex: 1 1 56%; min-width: min(100%, 240px); }
.ligne__c .carte__t { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.ligne__c .carte__x { margin-top: 8px; color: var(--texte-doux); }
.ligne__p { flex: 1 1 26%; min-width: min(100%, 160px); text-align: right; }
.ligne__p .carte__v { display: block; font-size: clamp(24px, 2.6vw, 30px); }
.ligne__p .bulle { margin-top: 14px; }

/* La bande de veille : le numero passe EN TETE, le reste bascule dans un
   panneau lateral. */
.veille__panneau { flex: 1 1 34%; min-width: min(100%, 260px); }
.veille__panneau .bulle { margin-top: 22px; }
.veille__mot .veille__tel { display: block; margin: 10px 0 8px; }

/* La page de detail : tete pleine largeur, chapo decale au tiers, et le
   sommaire rendu en rangee de renvois EN TETE plutot qu'en colonne. */
.entete { margin-bottom: 40px; }
.entete__m { margin-top: 20px; margin-left: 33%; max-width: 520px; color: var(--texte-doux); }
.renvois { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.renvois > * { min-width: 0; }
.renvois__t { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marque); }
.lecture--art { margin: 0 auto; max-width: 930px; }
.lecture--art .vue { margin-bottom: 30px; border-radius: 26px; }
.repere { margin: 26px 0; padding: 24px 26px; border: 1px solid var(--bordure); border-radius: 22px; background: var(--fond); }
.repere .carte__t { display: block; font-size: 17px; font-weight: 700; }
.repere .carte__x { margin-top: 8px; color: var(--texte-doux); }

/* --- 12. LARGEURS -------------------------------------------------- */

@media (max-width: 1100px) {
  .encart--vue { min-height: 480px; padding: 40px; }
  .offre .vue { width: 132px; }
}

@media (max-width: 900px) {
  .zone { padding: 64px 0; }
  /* R4b — le panneau d affiche est une ZONE : sous 900px il heritait des
     64px de marge haute de toutes les zones, et se decollait du bord. Or
     l entete flotte DESSUS ; decolle, le panneau laisse la marque blanche de
     l entete ecrite sur le gris clair de la section — blanc sur gris clair,
     contraste 1,09. Le panneau d ouverture ne prend pas de marge haute. */
  .affiche { padding-top: 0; }
  .cadre { padding: 0 18px; }
  .encart { border-radius: 28px; }
  .encart--vue { min-height: 440px; padding: 30px; }
  /* T5 — le panneau d affiche gardait ses 64px de marge laterale a toutes les
     largeurs : sous 900px, la colonne du titre tombait a moins de dix signes
     par ligne. Une colonne trop etroite pour son corps est un accident. */
  .affiche .encart--vue { padding: 108px 32px 56px; }
  .encart--nuit { padding: 40px 28px; }
  .duo, .essai, .duel { gap: 32px; }
  .duo--inv .duo__g, .duo--inv .duo__d,
  .essai--inv .essai__mot, .essai--inv .essai__vue,
  .duel--inv .duel__mot, .duel--inv .duel__v { order: 0; }
  .marche, .mosa, .voisin, .devis { gap: 32px; }
  .matiere__u--tete { flex-direction: column; }
  .large { flex-direction: column; align-items: stretch; }
  .large .vue--carre { width: 100%; }
  .pied__haut { gap: 32px; }
  .barre__bascule {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0 11px;
    border: 1px solid var(--bordure); border-radius: 999px;
    background: var(--fond); cursor: pointer;
  }
  .barre__bascule i { display: block; height: 2px; background: var(--texte); }
  .barre__nav {
    display: none; order: 3; flex: 1 1 100%; margin-left: 0;
    padding-top: 12px; border-top: 1px solid var(--bordure);
  }
  .tete--ouvert .barre__nav { display: block; }
  .barre__nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .barre__nav li > a { padding: 12px 0; }
  /* Sous 900px le volet est deja deroule : le chevron reste retourne. */
  .a-volet > a .chev { transform: translateY(1px) rotate(225deg); }
  .volet { position: static; transform: none; display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: none; padding: 0 0 12px 14px; border: 0; }
  /* 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; }
  .barre__act { flex: 1 1 100%; order: 4; padding-top: 12px; }
  .tete--ouvert .barre__act { display: block; }
  .barre__act .bulle { display: none; }
  .tete--ouvert .barre__act .bulle { display: inline-flex; }
  .entete__m { margin-left: 0; }
  .ligne__p { text-align: left; }
  .offre { flex-direction: column; align-items: stretch; }
  .offre .vue { width: 100%; }
  .duo--article .sommaire { position: static; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .zone { padding: 48px 0; }
  .affiche { padding-top: 0; }  /* voir R4b ci-dessus : l entete flotte dessus */
  .encart--vue { min-height: 400px; padding: 24px; }
  /* T5 — au telephone la colonne ne fait plus que trois cent vingt pixels :
     le titre d affiche y descend d un cran pour garder plusieurs mots par
     ligne. Le plancher du `clamp` (38px) etait pense pour une pleine page. */
  .affiche .encart--vue { padding: 96px 20px 44px; }
  .affiche .tt--geant { font-size: 32px; letter-spacing: -.035em; }
  .encart--nuit { padding: 32px 22px; }
  .carte--haute { padding: 26px; }
  .carte--forme { padding: 24px; }
  .rang { gap: 18px; }
  .veille__act { justify-content: flex-start; }
  .pied__appel { padding: 24px 22px; }
  .pied__fin { margin-left: 0; text-align: left; }
  .pied__fin .pied__liens { justify-content: flex-start; }
  .masse { column-width: auto; column-count: 1; }
  .mur { column-width: auto; column-count: 1; }
}

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

/* SIGNATURE — le rayon en POURCENTAGE : `1.7% / 7.1%`, releve tel quel
   sur le modele. La courbe n est pas une constante mais une fraction de
   la boite : elle s ouvre quand l encart s elargit et se ferme quand il
   retrecit, si bien que la forme respire avec la mise en page. Aucun
   autre bloc de la coquille ne se comporte ainsi. */
.encart { border-radius: 1.72786% / 7.14286%; }

/* SIGNATURE — le halo TIRE : `0 30px 19px -20px`, un flou pose tres bas
   et ramene vers l interieur par un etalement negatif de 20px. La carte
   ne projette pas d ombre autour d elle, elle s appuie sur une bande
   sombre etroite sous son bord. Trois occurrences sur le modele. */
.vue, .encart {
  box-shadow: 0 30px 19px -20px color-mix(in srgb, var(--texte) 16%, transparent);
}

/* SIGNATURE — les deux bandeaux defilants s effacent aux bouts par un
   masque horizontal (`transparent 1%, #000 15%, #000 85%, transparent`,
   releve sur le modele) : les mots entrent et sortent du champ au lieu
   d etre tranches net au bord. */
.annonce, .ruban {
  -webkit-mask-image: linear-gradient(to right, transparent 1%, #000 15%, #000 85%, transparent 99%);
  mask-image: linear-gradient(to right, transparent 1%, #000 15%, #000 85%, transparent 99%);
}

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

/* >>> 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="vue--fond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="vue--fond"]: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 === */
.rang--tiers > * { flex-grow: 0 !important; }
.rang--quart > * { flex-grow: 0 !important; }
.rang--demi > * { flex: 0 1 calc(33.333% - 20px) !important; min-width: min(240px, 100%) !important; }