/* ============================================================
   WINDER — identite visuelle du template (coquille vide)
   AUCUNE couleur en dur ici. Uniquement les 8 roles injectes
   par render.mjs dans :root sous forme de variables.
   Roles : --marque --accent --fond --fond-2 --texte
           --texte-doux --bordure --sur-marque
   ============================================================ */

:root {
  /* identite Winder capturee a l'ingestion : rayons, espacements, polices */
  --r-card: 20px;
  --r-lg: 30px;
  --r-sm: 15px;
  --r-pill: 100px;
  --f-titre: "Inter", system-ui, sans-serif;
  --f-texte: "Noto Sans", system-ui, sans-serif;
  --f-eyebrow: "Outfit", system-ui, sans-serif;
  --f-chiffre: "Bodoni Moda", Georgia, serif;
  --pad-section: 120px;
  --max: 1760px;
  --ombre: 0 2px 30px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--f-texte);
  color: var(--texte);
  background: var(--fond);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- primitives ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--pad-section) 0; }
.section--alt { background: var(--fond-2); }
.section--sombre { background: var(--accent); color: var(--fond); }
.section--sombre h2 { color: var(--fond); }
.section--sombre .body { color: rgba(255,255,255,.68); }

.eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 14px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marque); margin: 0 0 18px;
}
.eyebrow--pill {
  display: inline-block; padding: 10px 26px;
  border: 1px solid var(--marque); border-radius: var(--r-pill);
  letter-spacing: .14em; margin-bottom: 26px;
}
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(38px, 5vw, 70px); line-height: 1.14; }
h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.2; }

/* La balise dit le plan du document, la taille dit la mise en page. Quand une
   page n ouvre sur aucun titre de premier rang, le moteur promeut le premier
   titre de sa section de tete : il change de balise, il ne doit pas changer de
   corps. Sans cette regle, un titre de section double de taille et vient
   recouvrir l etiquette posee au-dessus de lui. */
h1[data-rang="2"] { font-size: clamp(30px, 3.4vw, 50px); }
h3 { font-size: 26px; line-height: 1.25; }
.h-accent { color: var(--marque); }
.body { color: var(--texte-doux); margin: 0; }
.body--just { text-align: justify; }

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 30px;
  background: var(--marque); color: var(--sur-marque);
  border-radius: var(--r-pill);
  font-family: var(--f-titre); font-weight: 700;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  border: 0; cursor: pointer;
}
.btn__arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fond); color: var(--texte);
  display: grid; place-items: center; font-size: 17px;
}
.btn--ghost { background: transparent; color: var(--texte); border: 1px solid var(--bordure); padding: 14px 30px; }

.card {
  background: var(--fond-2);
  border-radius: var(--r-card);
  padding: 40px;
}
.card--blanc { background: var(--fond); box-shadow: var(--ombre); }
.card--pad-lg { padding: 56px; }
.iconbox {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center; font-size: 28px; flex: none;
}
.rule { height: 1px; background: var(--bordure); border: 0; margin: 26px 0; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--fond); box-shadow: var(--ombre);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.badge__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--marque); }

/* cadre image : la coquille ne contient aucun visuel, seulement le cadre */
.frame {
  border-radius: var(--r-card);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.03) 14px 28px),
    var(--fond-2);
  display: grid; place-items: center;
  color: var(--texte-doux);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 20px;
  min-height: 220px;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 18px; z-index: 50;
  width: calc(100% - 80px); max-width: 1830px; margin: 18px auto -86px;
  background: var(--fond); border-radius: var(--r-pill);
  box-shadow: var(--ombre);
  display: flex; align-items: center; gap: 40px;
  padding: 14px 14px 14px 40px;
}
.header__logo { display: flex; align-items: center; gap: 14px; font-family: var(--f-titre); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.header__mark { width: 34px; height: 34px; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 4px; }
.header__mark i { background: var(--marque); border-radius: 3px; }
.header__mark i:nth-child(3) { opacity: .55; }
.header__nav { display: flex; gap: 34px; margin-left: auto; font-size: 17px; }
.header__nav a.is-active { color: var(--marque); }
.header__cta { margin-left: 30px; }
/* Commande de menu : absente au bureau, elle prend la place de la nav
   sous 1024px. Trois barres, sans texte, sans dependance. */
.header__bascule { display: none; margin-left: auto; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.header__bascule i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--texte); transition: transform .18s ease, opacity .18s ease; }
.header--ouvert .header__bascule i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header--ouvert .header__bascule i:nth-child(2) { opacity: 0; }
.header--ouvert .header__bascule i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ----------
   La scene (photo pleine fenetre + mot pose dessus, cale en bas) porte le
   H1 ; le bandeau d atouts est un rang POSE SOUS elle, jamais a son flanc —
   c est la scene qui occupe la fenetre sur la reference, pas une vignette
   encadree. `.hero__grid`/`.hero__frame`/`.hero__col` restent tels quels
   plus bas : ils servent whyUs(), pas hero(). */
.hero { position: relative; isolation: isolate; }
.hero__scene {
  position: relative; min-height: min(98vh, 920px);
  display: flex; align-items: flex-start;
  padding: 150px 0 70px;
}
/* Pas de `background` ici : a deux classes (`.hero__fond.frame`), cette
   regle est PLUS specifique que le cadre vide generique et que son
   correctif R4b plus bas (`[data-slot="hero__fond"]...`, une seule classe
   d attribut) — un `background` pose ici gagnait toujours la cascade et
   affichait `--fond-2` (clair) au lieu du sol sombre mesure. La peinture de
   l etat vide appartient entierement au systeme cadre-vide ; cette regle ne
   pose plus que la geometrie de la scene. */
.hero__fond.frame { position: absolute; inset: 0; z-index: -2; border-radius: 0; padding: 0; min-height: 0; }
.hero__fond.frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__ombre {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.74) 100%);
}
.hero__rang { position: relative; }
.hero__mot { max-width: 680px; }
.hero__scene .eyebrow, .hero__titre, .hero__sous { color: #fff; }
.hero__titre { max-width: 660px; margin: 0 0 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1.12; }
.hero__sous { max-width: 560px; margin: 0 0 32px; color: rgba(255,255,255,.86); }
.hero__scene .btn--clair { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.hero__pave { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 64px 0 20px; }
/* T5 : a 4 pistes, la piste ne laisse que ~237px au h3 (icone+ecart pris sur
   la largeur) — 6,9em, en dessous du seuil. L icone CHANGE DE PLACE (au
   dessus, plus a cote) : le h3 recupere la largeur pleine de la carte, aucun
   corps ne bouge. */
.hero__pave .pt { flex-direction: column; align-items: flex-start; gap: 14px; }

.hero__grid { display: grid; grid-template-columns: 1fr 600px 1fr; gap: 34px; align-items: start; margin-top: 80px; text-align: left; }
.hero__frame { min-height: 700px; border-radius: var(--r-lg); }
.hero__col { display: grid; gap: 34px; }
.pt { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.pt h3 { font-size: 25px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--texte-doux); font-size: 16px; }
.ticks li::before { content: "✓"; color: var(--marque); font-weight: 700; margin-right: 12px; }

/* ============================================================
   SIGNATURES DE FORME
   Les traits de DESSIN du modele — ce qui le rend reconnaissable a
   distance, la ou la seule grille rendrait deux coquilles jumelles.
   Tout est pose par la mise en page : aucune balise vide, aucune image.
   Releve : winder/signatures.md
   ============================================================ */

/* 1. La VAGUE qui coupe le bas du hero : un arc plein d accent, deborde
      des deux cotes pour que sa courbe ne montre pas ses bouts. Voile
      DECORATIF, donc pointer-events: none — le texte au-dessus, lui, ne
      le porte jamais. */
.hero { overflow: hidden; }
.hero::after {
  content: ''; position: absolute; z-index: 0;
  left: -8%; right: -8%; bottom: -1px; height: 132px;
  background: var(--marque);
  border-radius: 62% 38% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

/* 2. Le bas DENTELE des cartes de service : la carte ne se ferme pas sur
      un bord droit, elle se termine en dents taillees dans sa propre
      couleur — le fond de page passe entre les pointes. */
.g3 > .card { position: relative; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 15px; }
.g3 > .card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 15px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 96.88% 100%, 93.75% 0, 90.62% 100%, 87.5% 0, 84.38% 100%, 81.25% 0, 78.12% 100%, 75% 0, 71.88% 100%, 68.75% 0, 65.62% 100%, 62.5% 0, 59.38% 100%, 56.25% 0, 53.12% 100%, 50% 0, 46.88% 100%, 43.75% 0, 40.62% 100%, 37.5% 0, 34.38% 100%, 31.25% 0, 28.12% 100%, 25% 0, 21.88% 100%, 18.75% 0, 15.62% 100%, 12.5% 0, 9.375% 100%, 6.25% 0, 3.125% 100%, 0% 0);
  pointer-events: none;
}

/* 3. Le CARTOUCHE encadre des marques : chaque nom tient dans un cadre a
      coin haut droit rabattu, jamais un mot pose nu sur la bande. */
.marquee__item {
  padding: 16px 30px;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  min-width: 0;
}

/* 4. Le disque d avatar CHEVAUCHE la carte d avis : l anneau de fond le
      detache, il mord sur l encoche du haut. */
.avis__av { position: relative; z-index: 2; box-shadow: 0 0 0 1px var(--bordure); }

/* 5. Le FILET VERTICAL qui separe les atouts : deux pieces cote a cote ne
      sont jamais laissees flotter, un trait plein les articule. */
.hero__col > .card + .card { position: relative; }
.hero__col > .card + .card::before {
  content: ''; position: absolute; left: 34px; right: 34px; top: -18px; height: 1px;
  background: var(--bordure); pointer-events: none;
}

/* ---------- grilles a nombre variable ----------
   Le nombre de cartes n'est JAMAIS fixe par le template : il vient des
   donnees. `--pistes` fixe le rang (3, 2 ou 4 par rangee) ; les
   surcharges `:has()` posees apres la regle generique reduisent le rang
   quand une rangee incomplete profiterait d'un appariement plus large.
   Pistes egales en toute circonstance : jamais de trou, jamais d'etirement
   inegal (`repeat(N, minmax(0,1fr))`, jamais `flex-basis` + flex-grow). */
.g3, .g2, .g4 { display: grid; gap: 30px; align-items: stretch; }
.g3 { grid-template-columns: repeat(var(--pistes, 3), minmax(0, 1fr)); }
.g3:has(> :nth-child(2)):not(:has(> :nth-child(3))) { --pistes: 2; }
.g3:has(> :nth-child(4)):not(:has(> :nth-child(5))) { --pistes: 2; }
.g2 { grid-template-columns: repeat(var(--pistes, 2), minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(var(--pistes, 4), minmax(0, 1fr)); }
.g4:has(> :nth-child(2)):not(:has(> :nth-child(3))) { --pistes: 2; }
.g4:has(> :nth-child(3)):not(:has(> :nth-child(4))) { --pistes: 3; }
.tete { max-width: 760px; margin: 0 0 60px; }
.tete--centre { margin: 0 auto 60px; text-align: center; }

/* ---------- intro / expertise ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: start; }
.split--img { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split__frame { min-height: 560px; }
/* alternance des blocs SEO : l'image passe a droite un bloc sur deux */
.split--inv .split__frame { order: 2; }
.feat { display: flex; gap: 22px; align-items: flex-start; }
.feat .iconbox { width: 56px; height: 56px; background: var(--fond); color: var(--marque); box-shadow: var(--ombre); font-size: 22px; }
.feats { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 30px; align-items: stretch; margin: 34px 0; }
.feats .vrule { background: var(--bordure); }

/* ---------- marques (marquee) ---------- */
.marquee { background: var(--fond); padding: 50px 60px; overflow: hidden; }
.marquee__track { display: flex; gap: 70px; align-items: center; white-space: nowrap; animation: defile 30s linear infinite; }
.marquee__item { font-family: var(--f-titre); font-weight: 700; font-size: 22px; color: var(--texte-doux); flex: none; opacity: .8; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- secteurs (grandes cartes alternees) ---------- */
.sect-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; margin-bottom: 30px; align-items: stretch; }
.sect-row--inv { grid-template-columns: .85fr 1.15fr; }
.sect-row--inv .sect-card { order: 2; }
.sect-row--inv .frame { order: 1; }
.sect-card { background: var(--fond); border-radius: var(--r-card); padding: 50px; display: flex; flex-direction: column; }
.sect-card__haut { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sect-card__marque { font-family: var(--f-titre); font-weight: 700; font-size: 30px; letter-spacing: -.02em; }
.rond {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center; font-size: 20px;
}
.pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 34px; }

/* ---------- zones (grille sombre) ---------- */
.zone-card { border-radius: var(--r-card); overflow: hidden; background: var(--accent); color: var(--fond); display: flex; flex-direction: column; }
.zone-card .frame { border-radius: 0; min-height: 285px; }
.zone-card__corps { padding: 34px; }
.zone-card__tag { display: inline-block; padding: 8px 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.zone-card__titre { font-family: var(--f-titre); font-weight: 700; font-size: 24px; text-transform: uppercase; line-height: 1.25; }
.section--noir { background: var(--texte); color: var(--fond); }
.section--noir .body { color: rgba(255,255,255,.6); }
.section--noir h2 { color: var(--fond); }

/* ---------- process ---------- */
.step { background: linear-gradient(180deg, var(--fond-2), var(--fond)); border-radius: var(--r-card); padding: 60px 40px; text-align: center; }
.step__num { font-family: var(--f-chiffre); font-size: 46px; color: var(--marque); line-height: 1; margin-bottom: 18px; }
.step h3 { text-transform: uppercase; margin-bottom: 16px; }

/* ---------- chiffres ---------- */
.chiffres { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.chiffres .frame { min-height: 620px; border-radius: 0; }
.chiffres__bande {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(8, 31, 32, .55); backdrop-filter: blur(2px);
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  padding: 34px 0;
}
.chiffre { padding: 0 46px; color: #fff; border-left: 1px solid rgba(255,255,255,.18); }
.chiffre:first-child { border-left: 0; }
.chiffre b { display: block; font-family: var(--f-chiffre); font-weight: 500; font-size: 54px; line-height: 1; }
.chiffre span { font-size: 15px; opacity: .9; }
.play { position: absolute; inset: 0; margin: auto; width: 118px; height: 118px; border-radius: 50%; background: var(--marque); color: var(--sur-marque); display: grid; place-items: center; font-size: 30px; }

/* ---------- avis (carte encochee en haut) ---------- */
.avis {
  background: var(--fond); border-radius: var(--r-card);
  padding: 74px 44px 74px; text-align: center; position: relative;
  clip-path: polygon(0 5%, 38% 5%, 50% 0, 62% 5%, 100% 5%, 100% 100%, 0 100%);
}
.avis__quote { color: var(--marque); font-size: 34px; line-height: 0; margin-right: 8px; }
.avis h3 { display: inline; }
.avis__texte { color: var(--texte-doux); margin: 26px 0; }
.avis__etoiles { color: var(--marque); letter-spacing: 4px; font-size: 20px; }
.avis__pied { text-align: center; margin-top: -34px; }
.avis__av { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; background: var(--marque); color: var(--sur-marque); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 700; font-size: 28px; border: 4px solid var(--fond); }
.avis__nom { font-family: var(--f-titre); font-weight: 700; }
.avis__role { color: var(--texte-doux); font-size: 15px; }

/* ---------- faq (compose : carte + rule + rond) ---------- */
.faq-item { background: var(--fond); border-radius: var(--r-card); padding: 30px 36px; margin-bottom: 18px; box-shadow: var(--ombre); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px; font-family: var(--f-titre); font-weight: 700; font-size: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .rond { margin-left: auto; width: 42px; height: 42px; font-size: 22px; }
.faq-item[open] summary .rond { background: var(--accent); color: var(--fond); }
.faq-item p { color: var(--texte-doux); margin: 22px 0 4px; }

/* ---------- maillage (cartes type blog) ---------- */
.lien-card { background: var(--fond); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.lien-card .frame { border-radius: 0; min-height: 230px; }
.lien-card__corps { padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.lien-card__meta { font-family: var(--f-eyebrow); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }

/* ---------- carte ultralocale ---------- */
.map { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.map .frame { min-height: 480px; border-radius: 0; }
.map__carte { position: absolute; left: 40px; bottom: 40px; background: var(--fond); border-radius: var(--r-card); padding: 34px; max-width: 420px; box-shadow: var(--ombre); }

/* ---------- bande CTA ---------- */
.cta { background: var(--accent); border-radius: var(--r-lg); padding: 90px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; color: var(--fond); }
.cta h2 { color: var(--fond); }
.cta .body { color: rgba(255,255,255,.72); }
.cta__form { display: grid; gap: 16px; }
.cta__form input, .cta__form textarea { padding: 18px 26px; border-radius: var(--r-pill); border: 0; font-family: var(--f-texte); font-size: 16px; }
.cta__form textarea { border-radius: var(--r-card); resize: vertical; }

/* ---------- footer ---------- */
.footer { background: var(--texte); color: var(--fond); padding: 110px 0 30px; }
.footer h4 { font-size: 20px; text-transform: uppercase; margin-bottom: 30px; }
.footer a, .footer li, .footer .body { color: rgba(255,255,255,.68); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.footer__nap { display: grid; gap: 18px; }
.footer__nap div { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer__nap i { color: var(--marque); font-style: normal; }
/* Le bandeau du bas se replie : sans wrap, les mentions et le copyright
   se partagent 360px et « confidentialite » ne tient plus dans sa part. */
.footer__bas { margin-top: 70px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 15px; color: rgba(255,255,255,.5); }
.footer__marque { display: flex; align-items: center; gap: 14px; font-family: var(--f-titre); font-weight: 700; font-size: 26px; color: #fff; margin-bottom: 24px; }

/* ---------- fil d'ariane ---------- */
.ariane { font-size: 14px; color: var(--texte-doux); padding: 130px 0 0; }
.ariane a:hover { color: var(--marque); }

/* ---------- nav deroulante (carte Winder : filet + colonnes) ---------- */
.drop { position: relative; }
.drop__tete { display: inline-flex; align-items: center; gap: 8px; }
.drop__chev { font-size: 11px; transition: transform .18s ease; }
.drop:hover .drop__chev { transform: rotate(180deg); }
.drop__panneau {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 26px; opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 40;
}
.drop:hover .drop__panneau, .drop:focus-within .drop__panneau { opacity: 1; visibility: visible; }
/* Le decalage sous le lien est le `padding-top` de `.drop__panneau`, jamais
   une marge : le volet touche le lien, la souris ne traverse aucun vide. */
.drop__grille {
  background: var(--fond); border-radius: var(--r-card); box-shadow: var(--ombre);
  padding: 34px 40px; display: flex; align-items: flex-start; gap: 44px;
  min-width: 620px; max-width: min(94vw, 900px);
}
/* Les colonnes gardent leur largeur naturelle : un `min-width: 0` ici
   ecraserait les libelles les uns sur les autres, le nowrap les faisant
   deborder de leur colonne. */
.drop__cols { display: flex; align-items: flex-start; gap: 44px; flex: 0 1 auto; }
.drop__col { display: grid; gap: 4px; align-content: start; flex: 0 0 auto; white-space: nowrap; }
/* La vitrine : la carte Winder en reduction, filet compris. Son visuel a une
   hauteur FIXE, sinon le `min-height: 220px` du cadre etire tout le volet. */
/* `flex: 0 0` et non `0 1` : une base compressible reduirait la vitrine a
   un mot par ligne des que les colonnes s allongent. */
.drop__vit { flex: 0 0 250px; display: grid; gap: 8px; align-content: start; }
.drop__vitPh { min-height: 0; height: 130px; width: 100%; }
.drop__vitN { font-size: 16px; line-height: 1.3; }
.drop__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.drop__vitZ { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--marque); }
.drop__titre { font-family: var(--f-eyebrow); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }
.drop__lien { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--texte); font-size: 16px; }
.drop__lien .badge__dot { width: 9px; height: 9px; opacity: .35; transition: opacity .15s ease; }
.drop__lien:hover { color: var(--marque); }
.drop__lien:hover .badge__dot { opacity: 1; }

/* ---------- avant / apres : curseur glissant ----------
   Les deux photos sont superposees, `--pos` decoupe celle d'avant.
   Le controle est un <input type=range> : clavier, tactile et souris
   marchent sans une ligne de JS specifique a l'appareil. */
.ab {
  position: relative; margin-bottom: 26px;
  aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden;
  --pos: 50%; touch-action: pan-y;
}
.ab__vue { position: absolute; inset: 0; }
.ab__vue .frame { height: 100%; min-height: 0; border-radius: 0; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__lab {
  position: absolute; top: 14px; z-index: 3; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--fond); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; pointer-events: none;
}
.ab__lab--avant { left: 14px; }
.ab__lab--apres { right: 14px; }
.ab__lab--fort { background: var(--marque); color: var(--sur-marque); }

.ab__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 3px; margin-left: -1.5px; background: var(--fond);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none;
  display: grid; place-items: center;
}
.ab__poignee {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center; font-size: 20px;
  box-shadow: var(--ombre); transition: transform .15s ease;
}
.ab:hover .ab__poignee { transform: scale(1.08); }

/* le range couvre toute la vignette : c'est lui qui recoit le geste */
.ab__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: transparent;
}
.ab__range::-webkit-slider-thumb { appearance: none; width: 54px; height: 100%; cursor: ew-resize; }
.ab__range::-moz-range-thumb { width: 54px; height: 100%; border: 0; cursor: ew-resize; }
.ab__range:focus-visible + .ab__barre,
.ab__range:focus-visible ~ .ab__barre { outline: 2px solid var(--marque); outline-offset: 2px; }

/* ---------- urgence ---------- */
.urgence__tel { display: block; font-family: var(--f-chiffre); font-size: clamp(34px, 3.4vw, 58px); line-height: 1; color: var(--fond); margin-bottom: 26px; }
.urgence__tel:hover { color: var(--marque); }

/* ---------- formulaire contact ---------- */
.contact__col { display: grid; gap: 24px; align-content: start; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.champ { display: grid; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.champ--long, .champs > div { grid-column: 1 / -1; }
.champ input, .champ textarea {
  padding: 15px 20px; border-radius: var(--r-sm, 12px); border: 1px solid var(--bordure);
  background: var(--fond); font-family: var(--f-texte); font-size: 16px; color: var(--texte); resize: vertical;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }

/* ---------- article ---------- */
.art__hero { min-height: 520px; border-radius: var(--r-lg); margin-bottom: 70px; }
.art { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: start; }
.art__som { position: sticky; top: 120px; }
.art__som .ticks li::before { content: "→"; }
.art__som a { color: var(--texte-doux); }
.art__som a:hover { color: var(--marque); }
.art__corps { max-width: 820px; }

/* ---------- corps legal ---------- */
.legal { display: grid; gap: 24px; }
.legal__bloc { background: var(--fond); border-radius: var(--r-card); padding: 40px 46px; box-shadow: var(--ombre); }

/* ---------- catalogue : facettes, produits, caracteristiques ----------
   Les facettes sont des LIENS vers des pages deja rendues : elles se
   presentent comme la barre de pastilles de Winder, jamais comme un
   panneau de tri. La facette courante est marquee et n'est pas cliquable. */
.facettes { display: flex; flex-wrap: wrap; gap: 12px; }
.facette {
  display: inline-flex; align-items: center; padding: 11px 24px; border-radius: var(--r-pill);
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
  font-size: 16px; min-width: 0;
}
.facette:hover { border-color: var(--marque); color: var(--marque); }
.facette--courante { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); font-weight: 600; }

.prod { display: flex; flex-direction: column; min-width: 0; }
.prod__prix { margin-top: 20px; }
.prod__prix b { font-family: var(--f-chiffre); font-size: 32px; color: var(--marque); line-height: 1; }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; margin: 0; }
.spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--bordure); min-width: 0;
}
.spec dt { color: var(--texte-doux); font-size: 16px; min-width: 0; }
.spec dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; }

/* ---------- appoints : les pieces montees par la coquille ---------- */
.actes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.actes > * { min-width: 0; }
.btn--clair { background: transparent; color: var(--texte); border: 1px solid var(--bordure); }
.card__vig { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.card__vig .frame { min-height: 0; aspect-ratio: 16 / 10; }
.card__vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step__vue { width: 100%; border-radius: 12px; overflow: hidden; margin: 16px 0 6px; }
.step__vue .frame { min-height: 0; aspect-ratio: 8 / 5; }
.step__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta__vue { width: 100%; max-width: 460px; border-radius: 14px; overflow: hidden; margin-top: 28px; }
.cta__vue .frame { min-height: 0; aspect-ratio: 16 / 9; }
.cta__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .hero__grid, .split, .split--img, .sect-row, .sect-row--inv, .cta { grid-template-columns: 1fr; }
  .g3, .g2, .g4 { --pistes: 1; }
  /* reprises telles quelles (meme selecteur, meme specificite (0,3,0)) pour
     rebattre les surcharges de rang poses plus haut : un `.classe` nu ne les
     bat pas, seul un doublon exact du selecteur gagne a specificite egale
     par l ordre de source. */
  .g3:has(> :nth-child(2)):not(:has(> :nth-child(3))) { --pistes: 1; }
  .g3:has(> :nth-child(4)):not(:has(> :nth-child(5))) { --pistes: 1; }
  .g4:has(> :nth-child(2)):not(:has(> :nth-child(3))) { --pistes: 1; }
  .g4:has(> :nth-child(3)):not(:has(> :nth-child(4))) { --pistes: 1; }
  .ab, .art, .champs { grid-template-columns: 1fr; }
  .art__som { position: static; }
  .art__hero { min-height: 300px; margin-bottom: 40px; }
  .legal__bloc { padding: 28px; }
  .feats { grid-template-columns: 1fr; }
  .feats .vrule { display: none; }
  .chiffres__bande { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .chiffre { border-left: 0; }
  /* La nav ne DISPARAIT pas, elle se replie : elle se pose sous la pilule
     en position absolue (la pilule garderait sinon sa hauteur ouverte) et
     ne se montre qu'a l'appel de la commande. Les deroulants y sont
     deplies en flux : le survol n'existe pas au doigt. */
  .header__bascule { display: flex; }
  .header__nav { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: 4px; margin: 0; padding: 14px 20px 18px;
    background: var(--fond); border-radius: 22px; box-shadow: var(--ombre);
    max-height: calc(100vh - 140px); overflow-y: auto; }
  .header--ouvert .header__nav { display: flex; }
  .header__nav > a, .drop__tete { padding: 9px 0; }
  .drop { position: static; }
  .drop__chev { display: none; }
  .drop__panneau { position: static; opacity: 1; visibility: visible;
    padding: 0 0 6px 14px; min-width: 0; width: auto; background: none; box-shadow: none; border: 0; }
  .drop__grille { display: block; gap: 6px; padding: 0; min-width: 0; max-width: none;
    background: none; box-shadow: none; border-radius: 0; }
  .drop__cols { display: block; }
  .drop__col { white-space: normal; }
  /* La vitrine est un confort d ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .drop__vit { display: none; }
  /* La carte de la zone est flottante sur grand ecran. Sous 1100 elle
     depasse la hauteur de l'image et l'overflow du cadre lui coupe ses
     dernieres lignes : elle redescend donc en flux, sous la photo. */
  .map { overflow: visible; }
  .map .frame { min-height: 300px; border-radius: var(--r-lg); }
  .map__carte { position: static; max-width: none; margin-top: -40px;
    margin-left: 20px; margin-right: 20px; }
  .wrap { padding: 0 20px; }
  .section { padding: 70px 0; }
  .hero__scene { min-height: auto; padding: 130px 0 60px; }
  .hero__pave { grid-template-columns: 1fr 1fr; gap: 24px; padding: 44px 0 10px; }
  .cta { padding: 44px; }
}

/* ---------- telephone (<= 640) ----------
   Le header Winder est une pilule flottante : a 360 le logo + le bouton
   la font deborder. On resserre la pilule et le bouton, on ne les
   supprime pas : le CTA d'appel est la conversion. */
@media (max-width: 640px) {
  /* La pastille passe au-dessus du titre : cote a cote, elle prenait 84px
     des 256 de la carte et le titre tombait a un mot par ligne. */
  .pt { flex-wrap: wrap; gap: 12px; }
  .pt h3 { flex: 1 1 100%; font-size: 22px; }
  .header { width: calc(100% - 24px); gap: 12px; padding: 10px 10px 10px 18px; margin-bottom: -76px; }
  .header__logo { font-size: 19px; gap: 9px; }
  .header__mark { width: 26px; height: 26px; gap: 3px; }
  .header__cta { margin-left: auto; }
  .header__cta .btn { font-size: 12px; padding: 8px 8px 8px 16px; gap: 8px; }
  .header__cta .btn__arrow { width: 30px; height: 30px; font-size: 14px; }
  /* A 360 les 44px de marge laissaient 240px au titre d'avis : il tombait a
     un mot par ligne. On rend la largeur au texte, on ne coupe rien. */
  .avis { padding: 58px 22px 58px; }
  .avis h3 { font-size: 21px; }
  /* Un nom de commune compose ne se coupe pas tout seul : sans cette regle,
     "Cormeilles-en-Parisis" fixe la largeur de sa carte. */
  h1, h2, h3, .lien-card__corps, .zone-card { overflow-wrap: anywhere; }
  .wrap { padding: 0 16px; }
  .section { padding: 54px 0; }
  .hero__scene { min-height: auto; padding: 116px 0 48px; }
  .hero__pave { grid-template-columns: 1fr; padding: 34px 0 6px; }
  .cta { padding: 30px 24px; }
  .card { padding: 26px 22px; }
  .card--pad-lg { padding: 26px 22px; }
  /* Le panneau du deroulant reste AFFICHE : depuis le repli de la nav il
     est en flux dans le menu, le masquer couperait l'acces aux pages
     enfants (services, zones) — c'est precisement le defaut corrige. */
  /* Une paire libelle/valeur ne tient pas sur deux colonnes a 360px : les
     caracteristiques passent en liste simple, valeur alignee a droite. */
  .specs { grid-template-columns: 1fr; }
  .chiffres__bande { gap: 20px 0; padding: 30px 18px; }
  .chiffre { padding: 0 10px; }
  .chiffre b { font-size: 34px; }
  .chiffre span { font-size: 13px; }
  .marquee { padding: 34px 20px; }
  /* grille : un enfant de grid a min-width:auto, un mot long elargit la
     colonne au-dela du viewport. min-width:0 rend la colonne compressible. */
  .sect-row > *, .split > *, .hero__grid > * { min-width: 0; }
  .sect-card { padding: 30px 24px; }
  .sect-card__marque { font-size: 22px; }
  .urgence__tel { font-size: clamp(26px, 8vw, 38px); word-break: break-word; }
}

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

/* ================================================================
   R4b — LE CADRE DE FOND DU HERO EST PORTEUR (pose a la main)
   `hero__fond` est la SCENE plein cadre du hero : a l etat vide il
   porte le eyebrow, le h1 et le chapo, tous en blanc. C est pourtant
   le cadre que `_lib/teinter-cadres.mjs` laisse clair, pour deux
   raisons qui se cumulent :
   1. Le h1 contient un `<span class="h-accent">` (la ville). Le
      releve ne juge que les FEUILLES — un element qui contient lui
      meme une autre feuille est saute entier — donc « Serrurier a »
      et la suite du titre, ecrits en blanc en dehors du span,
      ne sont jamais lus : seul le span passe la mesure.
   2. Ce span est en `--marque`, pas en blanc. Sur les deux fiches de
      demonstration cette couleur reste sous 0,55 de luminance
      (ambre 0,44, bleu 0,22) : sous ce seuil l encre est jugee assez
      sombre pour rester sur le clair par defaut — sauf que « assez
      sombre pour un fond blanc » ne veut pas dire « lisible sur
      #e6e9ec » : l ambre y mesure 1,4, le bleu 1,1.
   Le gate, lui, mesure les pixels reels et remonte les deux fautes.
   Le sol est donc pose a la main, APRES les deux blocs generiques —
   a specificite egale, c est la position qui tranche. La teinte
   n est pas `--texte` du site (verifie insuffisante pour le bleu de
   vitrier-colombes, 4,24:1) : c est un sol dedie, choisi pour tenir
   4,5:1 contre les deux marques de demonstration avec marge. */
[data-slot="hero__fond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #0a0f14;
  --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="hero__fond"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}


/* === CONTRAT GRILLE (factory, chantier 20/08, #1/#2) — services taille égale + avant/après 3-col === */
.g3 > * { flex-grow: 0 !important; }
.g2 > * { flex: 0 1 calc(33.333% - 20px) !important; min-width: min(240px, 100%) !important; }

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