/* Coquille Soltyx — feuille unique.

   Huit jetons de couleur, pas un de plus, tous poses par le moteur de
   rendu : --marque --accent --fond --fond-2 --texte --texte-doux
   --bordure --sur-marque. Aucun hexadecimal ici : tout voile passe par
   color-mix, de sorte qu'un changement de palette repeint le modele
   entier sans toucher une ligne de cette feuille.

   Les grilles ne comptent jamais leurs colonnes : flex-wrap, une base
   en pourcentage, et min-width:0 sur les enfants pour que rien ne
   deborde quand le texte est long. */

/* ============================================================
   SOCLE
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--police-titre, inherit); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
button, input, textarea, select { font: inherit; color: inherit; }
figure { margin: 0; }
address { font-style: normal; }

.sx-hors {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sx-wrap { width: min(100% - 2.5rem, 82rem); margin-inline: auto; }

.sx-sec { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.sx-sec--creme { background: var(--fond-2); }
.sx-sec--sombre { background: var(--marque); color: var(--sur-marque); }
.sx-sec--sombre h1, .sx-sec--sombre h2, .sx-sec--sombre h3 { color: var(--sur-marque); }
.sx-sec--sombre p { color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }

/* La trame de points du modele, posee dans les angles des sections
   sombres. Deux degrades radiaux, aucune image. */
.sx-sec--trame { position: relative; overflow: hidden; }
.sx-sec--trame::before,
.sx-sec--trame::after {
  content: ""; position: absolute; width: 22rem; height: 22rem; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 42%, transparent) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: .5;
}
.sx-sec--trame::before { top: -4rem; right: -4rem; }
.sx-sec--trame::after { bottom: -4rem; left: -4rem; }
.sx-sec--trame > .sx-wrap { position: relative; z-index: 1; }

/* ============================================================
   TITRES, OEIL, PUCES
   ============================================================ */

.sx-h { font-size: clamp(1.55rem, 2.6vw, 2.5rem); }
.sx-h--grand { font-size: clamp(1.8rem, 3.4vw, 3.1rem); }
.sx-h--geant { font-size: clamp(2.1rem, 5vw, 4.2rem); }
.sx-h b { font-weight: inherit; color: var(--accent); }
.sx-sec--sombre .sx-h b { color: var(--accent); }

.sx-eb {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux);
}
/* L'eclair du modele, dessine en pur CSS. */
.sx-eb__i {
  width: .55rem; height: .9rem; flex: none;
  background: var(--accent);
  clip-path: polygon(58% 0, 0 58%, 42% 58%, 32% 100%, 100% 40%, 52% 40%);
}
.sx-eb--clair { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }

.sx-chapo { max-width: 46ch; color: var(--texte-doux); margin: 0; }
.sx-sec--sombre .sx-chapo { color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }

/* Les puces cerclees, separees par un filet fin. */
.sx-pts { margin: 1.1rem 0 0; }
.sx-pts li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .6rem 0;
  border-top: 1px solid var(--bordure);
  font-size: .95rem;
}
.sx-pts li:first-child { border-top: 0; padding-top: 0; }
.sx-pts li > span { min-width: 0; }
.sx-pts li > i {
  position: relative; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .22rem;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--bordure));
  border-radius: 50%;
}
.sx-pts li > i::before,
.sx-pts li > i::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: color-mix(in srgb, var(--accent) 88%, var(--texte));
}
.sx-pts li > i::before { width: .5rem; height: 1px; }
.sx-pts li > i::after { width: 1px; height: .5rem; }
.sx-pts--clair li { border-color: color-mix(in srgb, var(--sur-marque) 20%, transparent); color: color-mix(in srgb, var(--sur-marque) 84%, transparent); }
.sx-pts--clair li > i { border-color: var(--accent); }
.sx-pts--clair li > i::before, .sx-pts--clair li > i::after { background: var(--accent); }

.sx-ck { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; margin: .8rem 0 0; }
.sx-ck li {
  /* Base en rem, pas en pourcentage : dans une colonne etroite, une base
     relative laisserait deux items de 130px, soit un mot par ligne. */
  flex: 1 1 14rem; min-width: 0;
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .93rem;
}
.sx-ck li::before {
  content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .3rem;
  background: currentColor;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
  color: color-mix(in srgb, var(--accent) 80%, var(--texte));
}

.sx-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.sx-tags li {
  padding: .25rem .7rem; border: 1px solid var(--bordure); border-radius: 999px;
  font-size: .76rem; letter-spacing: .04em;
}
.sx-sec--sombre .sx-tags li { border-color: color-mix(in srgb, var(--sur-marque) 26%, transparent); }

.sx-mention { margin-top: 1.4rem; font-size: .8rem; color: var(--texte-doux); }
.sx-mention--clair { color: color-mix(in srgb, var(--sur-marque) 70%, transparent); }

/* ============================================================
   BOUTON — le libelle, puis le carre detache a la fleche
   ============================================================ */

/* REGLE 7 — la porte d appel. Elle se peint sur ELLE-MEME : bordure, fond
   et respiration portes par l element. Le bouton du modele, lui, ne peint
   que ses panneaux internes — a l oeil comme a la mesure, il n est alors
   qu un mot dans une phrase. La porte prend son encre au flux
   (`currentColor`) : la meme porte tient sur le bandeau marine, sur la
   bande sombre de l appel et sur le fond creme, sans variante a declarer. */
.sx-ap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.25rem;
  border: 1px solid currentColor; border-radius: .55rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit; font-family: inherit; font-size: .9rem; font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background .18s ease;
}
.sx-ap:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.sx-ap--plein {
  border-color: transparent;
  background: var(--marque); color: var(--sur-marque);
}
.sx-ap--plein:hover { background: var(--marque-fonce, var(--marque)); }
/* Dans le bandeau, la porte tient sa place a toutes les largeurs : la
   replier dans un menu n est pas la tenir. */
.sx-hd__ap { padding: .7rem 1rem; white-space: nowrap; }

.sx-bt {
  display: inline-flex; align-items: stretch; gap: .3rem;
  margin-top: 1.4rem;
  font-size: .9rem; font-weight: 600; line-height: 1;
  vertical-align: top;
}
.sx-bt__l {
  order: 1; font-weight: inherit;
  display: inline-flex; align-items: center;
  padding: .95rem 1.35rem;
  border-radius: .55rem;
  background: var(--marque); color: var(--sur-marque);
  transition: background .18s ease;
}
.sx-bt__a {
  order: 2;
  position: relative; flex: none; width: 2.9rem;
  border-radius: .55rem;
  background: var(--marque);
  transition: background .18s ease;
}
.sx-bt__a::before,
.sx-bt__a::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--sur-marque); }
.sx-bt__a::before { width: .8rem; height: 1.5px; }
.sx-bt__a::after {
  width: .55rem; height: .55rem; margin-right: .95rem;
  background: none;
  border-top: 1.5px solid var(--sur-marque); border-right: 1.5px solid var(--sur-marque);
  transform: rotate(45deg);
}
.sx-bt:hover .sx-bt__l,
.sx-bt:hover .sx-bt__a { background: color-mix(in srgb, var(--marque) 84%, var(--texte)); }

.sx-bt--lime .sx-bt__l, .sx-bt--lime .sx-bt__a { background: var(--accent); color: var(--texte); }
.sx-bt--lime .sx-bt__a::before { background: var(--texte); }
.sx-bt--lime .sx-bt__a::after { border-color: var(--texte); }
.sx-bt--lime:hover .sx-bt__l, .sx-bt--lime:hover .sx-bt__a { background: color-mix(in srgb, var(--accent) 82%, var(--texte)); }

.sx-bt--contour .sx-bt__l, .sx-bt--contour .sx-bt__a {
  background: none; color: var(--texte);
  border: 1px solid var(--bordure);
}
.sx-bt--contour .sx-bt__a::before { background: var(--texte); }
.sx-bt--contour .sx-bt__a::after { border-color: var(--texte); }
.sx-bt--contour:hover .sx-bt__l, .sx-bt--contour:hover .sx-bt__a { background: var(--fond-2); }

.sx-bt--verre .sx-bt__l, .sx-bt--verre .sx-bt__a {
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  color: var(--sur-marque);
  border: 1px solid color-mix(in srgb, var(--sur-marque) 34%, transparent);
  backdrop-filter: blur(6px);
}
.sx-bt--verre .sx-bt__a::before { background: var(--sur-marque); }
.sx-bt--verre .sx-bt__a::after { border-color: var(--sur-marque); }

.sx-bt--min { margin-top: 0; font-size: .82rem; }
.sx-bt--min .sx-bt__l { padding: .7rem 1rem; }
.sx-bt--min .sx-bt__a { width: 2.3rem; }
.sx-bt--min .sx-bt__a::after { margin-right: .75rem; }
.sx-bt--seul { margin-top: 2rem; }
.sx-bt--inerte, .sx-bt--faux { cursor: default; }

/* ============================================================
   IMAGES
   ============================================================ */

.sx-ph { position: relative; display: block; overflow: hidden; border-radius: 1rem; background: var(--fond-2); }
.sx-ph img { width: 100%; height: 100%; object-fit: cover; }
/* Voile discret aux couleurs du modele, pose sur toute photo. */
.sx-ph__vl {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--marque) 22%, transparent));
}
.sx-ph--nu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 10rem; padding: 1rem;
  border: 1px dashed var(--bordure);
  text-align: center;
}
/* Le cadre sans source garde la place exacte de la photo attendue. */
.sx-ph__hc {
  width: 100%; height: 2.2rem; opacity: .5;
  background: repeating-linear-gradient(135deg, var(--bordure) 0 2px, transparent 2px 9px);
}
.sx-ph__nom { font-size: .78rem; font-weight: 400; color: var(--texte-doux); }

/* Le medaillon annulaire pose sur l'angle des images. */
.sx-med {
  position: absolute; right: 1.1rem; bottom: 1.1rem;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--fond) 60%, transparent);
}
.sx-med::before {
  content: ""; position: absolute; inset: 1.35rem; border-radius: 50%;
  background: var(--marque);
}

/* ============================================================
   ENTETE
   ============================================================ */

.sx-hd {
  position: sticky; top: 0; z-index: 60;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}
body[data-tete="marine"] .sx-hd {
  position: absolute; inset: 0 0 auto; background: none; border-bottom-color: transparent;
  color: var(--sur-marque);
}
body[data-tete="marine"] { position: relative; }
/* Au defilement, l'entete se recolle en haut et reprend un fond plein :
   c'est le seul etat pose par le script. */
body[data-tete="marine"] .sx-hd[data-hd="colle"] {
  position: fixed; top: 0; color: var(--texte);
  background: var(--fond); border-bottom-color: var(--bordure);
}
.sx-hd[data-hd="colle"] { box-shadow: 0 8px 24px color-mix(in srgb, var(--texte) 8%, transparent); }

.sx-hd__bx { position: absolute; opacity: 0; pointer-events: none; }
.sx-hd__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }

.sx-hd__mq { order: 1; display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
/* Le soleil du modele : un disque et sa couronne de rayons. */
.sx-hd__so {
  position: relative; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent);
}
.sx-hd__so::before {
  content: ""; position: absolute; inset: -.3rem; border-radius: 50%;
  border: 1.5px dotted color-mix(in srgb, var(--accent) 75%, currentColor);
}

.sx-hd__nav { order: 2; display: flex; align-items: center; gap: .35rem; margin-inline: auto; }
.sx-hd__ul { display: flex; align-items: center; gap: .35rem; }
.sx-nv { position: relative; }
.sx-nv__t {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem; border-radius: .5rem;
  font-size: .92rem; font-weight: 500;
}
.sx-nv__t:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
/* Le chevron : tout lien a volet le porte, sans exception. */
.sx-nv__t--volet::after {
  content: ""; width: .42rem; height: .42rem; margin-top: -.18rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.sx-nv:hover .sx-nv__t--volet::after,
.sx-nv:focus-within .sx-nv__t--volet::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Le volet. Le vide entre le lien et le panneau est un PADDING du
   conteneur, jamais une marge : la souris ne quitte donc jamais la
   zone survolee en descendant. */
.sx-nv__v {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  padding-top: .75rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
  z-index: 70;
}
.sx-nv:hover .sx-nv__v,
.sx-nv:focus-within .sx-nv__v { opacity: 1; visibility: visible; pointer-events: auto; }
.sx-nv__vin {
  display: flex; gap: 1.75rem;
  width: min(56rem, calc(100vw - 3rem));
  padding: 1.6rem;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 1.1rem;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--texte) 16%, transparent);
}
.sx-nv__cols { display: flex; flex-wrap: wrap; gap: 1.25rem; flex: 1 1 60%; min-width: 0; }
.sx-nv__col { flex: 1 1 42%; min-width: 0; }
.sx-nv__ct {
  display: block; margin-bottom: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
}
.sx-nv__col li a {
  display: block; padding: .42rem .55rem; margin-left: -.55rem; border-radius: .45rem;
  font-size: .9rem;
}
.sx-nv__col li a:hover { background: var(--fond-2); }
/* La vitrine du volet : toujours sur le cote en version bureau. */
.sx-nv__vit {
  flex: 0 0 17rem; min-width: 0;
  padding: 1.1rem; border-radius: .9rem;
  background: var(--fond-2);
}
.sx-nv__ph { height: 8rem; margin-bottom: .9rem; }
.sx-nv__vit strong { display: block; font-size: 1rem; }
.sx-nv__vit p { margin: .35rem 0 .9rem; font-size: .85rem; color: var(--texte-doux); }

.sx-hd__ac { order: 3; display: flex; align-items: center; gap: .9rem; }
.sx-hd__tel { font-size: .9rem; font-weight: 600; }
.sx-hd__bg { display: none; flex-direction: column; gap: .3rem; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border: 1px solid var(--bordure); border-radius: .55rem; cursor: pointer; }
.sx-hd__bg i { width: 1.05rem; height: 1.5px; background: currentColor; }

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

.sx-hero { position: relative; padding: 0 0 clamp(2.5rem, 5vw, 4rem); color: var(--sur-marque); background: var(--marque); overflow: hidden; }
.sx-hero__fd { position: absolute; inset: 0; }
/* R5c — un FOND se merite a la mesure : pose hors flux, tendu sur son
   porteur aux deux axes. Le cadre lui-meme doit porter le `absolute`, pas
   seulement son enveloppe : c est lui qu on mesure. */
.sx-hero__fd .sx-ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.sx-hero__fd::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--marque) 72%, transparent),
    color-mix(in srgb, var(--marque) 88%, transparent));
}
/* La scene d ouverture occupe UN ecran, jamais plus (P1b) : le mot se pose en
   bas a gauche comme chez le modele, la matiere garde tout le reste du cadre.
   Le retrait haut couvre l entete transparente qui flotte dessus (R10). */
.sx-hero__in {
  position: relative; z-index: 1; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end;
  min-height: min(100svh, 900px);
  padding-top: clamp(7rem, 12vw, 9.5rem);
  padding-bottom: clamp(4rem, 9vw, 9rem);
}
.sx-hero__tx { flex: 1 1 52%; min-width: 0; text-align: left; margin-inline: 0; }
.sx-hero__tx .sx-eb { justify-content: flex-start; }
.sx-hero__tx .sx-h { color: var(--sur-marque); max-width: 16ch; margin-inline: 0; }
.sx-hero__s { max-width: 46ch; margin: 0; color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }
.sx-hero__bt { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-start; }

.sx-hero__ct {
  flex: 0 1 15rem; min-width: 0;
  padding: 1.2rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--sur-marque) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sur-marque) 26%, transparent);
  backdrop-filter: blur(8px);
}
.sx-hero__ce { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 72%, transparent); }
.sx-hero__ct strong { display: block; font-size: 2.1rem; line-height: 1.1; }
.sx-hero__cl { font-size: .85rem; color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }
.sx-hero__hg { display: flex; align-items: flex-end; gap: .3rem; height: 3rem; margin-top: .9rem; }
.sx-hero__hg i { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: .2rem; background: var(--accent); opacity: .55; }
.sx-hero__hg i:last-child { opacity: 1; }

.sx-hero__bd { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); background: color-mix(in srgb, var(--sur-marque) 20%, transparent); border-radius: 1rem; overflow: hidden; }
.sx-hero__rp { flex: 1 1 20%; min-width: 0; padding: 1.4rem; background: color-mix(in srgb, var(--marque) 82%, transparent); }
.sx-hero__bg { font-size: .72rem; letter-spacing: .14em; color: var(--accent); }
.sx-hero__rl { display: block; margin-top: .4rem; font-weight: 600; }
.sx-hero__rp strong { display: block; margin-top: .3rem; font-weight: 400; font-size: .92rem; color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

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

.sx-fa { padding: 1.1rem 0; background: var(--fond-2); border-bottom: 1px solid var(--bordure); }
.sx-fa__in { display: flex; align-items: center; gap: .7rem; }
/* Epingle : le repere de lieu du modele, repris en tete du fil. */
.sx-fa__pn {
  flex: none; width: .7rem; height: .7rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--marque) 70%, transparent);
}
.sx-fa__ol { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; font-size: .82rem; color: var(--texte-doux); }
.sx-fa__c { display: flex; align-items: center; min-width: 0; }
.sx-fa__c + .sx-fa__c::before {
  content: ""; flex: none; width: .32rem; height: .32rem; margin: 0 .6rem;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.sx-fa__a { overflow-wrap: anywhere; }
.sx-fa a:hover { color: var(--texte); text-decoration: underline; }
.sx-fa [aria-current="page"] { color: var(--texte); font-weight: 600; }

/* Quand la page ouvre sur l'affiche sombre, l'entete y flotte : le fil
   entre dans la meme bande et se pose SOUS elle, jamais dessous au sens
   de la profondeur. L'affiche perd alors sa reserve de haut, deja tenue
   par le fil. */
body[data-tete="marine"] .sx-fa {
  padding-top: calc(4.75rem + 1.1rem);
  background: var(--marque); border-bottom-color: transparent;
}
body[data-tete="marine"] .sx-fa__ol { color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }
body[data-tete="marine"] .sx-fa a:hover,
body[data-tete="marine"] .sx-fa [aria-current="page"] { color: var(--sur-marque); }
/* Une page interne a deja passe son fil d Ariane : elle n ouvre pas sur une
   pleine fenetre, la scene y reprend une hauteur ordinaire. */
body[data-tete="marine"] .sx-fa + .sx-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.sx-fa + .sx-hero .sx-hero__in { min-height: 0; padding-top: 0; padding-bottom: clamp(1rem, 2vw, 2rem); }

/* ============================================================
   TETES DE SECTION
   ============================================================ */

.sx-tete { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sx-tete__t { flex: 1 1 26rem; min-width: 0; }
.sx-tete__t .sx-h { margin: 0; }
.sx-tete__d { flex: 1 1 20rem; min-width: 0; }
.sx-tete__a { flex: 0 0 auto; }
.sx-tete--centre { flex-direction: column; align-items: center; text-align: center; }
.sx-tete--centre .sx-tete__t { flex: 0 1 auto; }
.sx-tete--centre .sx-eb { justify-content: center; }
.sx-tete--centre .sx-chapo { margin-inline: auto; }
.sx-tete--fendu .sx-tete__d { text-align: left; }

/* ============================================================
   GRILLES — la cadence vient des donnees
   ============================================================ */

/* R3 — des pistes COMPTEES, jamais une base flexible. Une base en
   pourcentage laisse la carte orpheline du dernier rang prendre la place des
   manquantes : trois cartes sur une rangee de quatre, et la troisieme est
   deux fois plus large que ses soeurs. Le nombre de colonnes se DECLARE, ici
   et a chaque palier plus bas, et la piste `minmax(0, 1fr)` empeche un
   contenu long d imposer sa largeur a la colonne. */
.sx-gr { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-gr > * { min-width: 0; min-height: 0; }

.sx-gr--sv, .sx-gr--pr, .sx-gr--mt, .sx-gr--ai, .sx-gr--av,
.sx-gr--zn, .sx-gr--mi, .sx-gr--bl, .sx-gr--pd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-gr--cf, .sx-gr--sp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-gr--tf, .sx-gr--ab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Le bento garde sa composition — deux grandes cartes en tete, les plates en
   dessous — mais il la tient sur SIX pistes comptees plutot que sur trois
   bases flexibles qui s etirent des qu il manque une carte. */
.sx-gr--wy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sx-gr--wy > * { grid-column: span 2; }
.sx-gr--wy > .sx-wy--large, .sx-gr--wy > .sx-wy--photo { grid-column: span 3; }

/* Le rail du modele : la demonstration defile a l'horizontale, avec un
   ancrage doux, sans un octet de script. */
.sx-rail {
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.sx-rail > * { flex: 0 0 min(24rem, 82%); min-width: 0; scroll-snap-align: start; }
/* La diapo de realisation est large : la vue tient la moitie du cadre. */
.sx-gr--rz > * { flex: 0 0 min(44rem, 88%); }

/* ============================================================
   PROSE
   ============================================================ */

/* Le titre et son chapo tiennent la colonne large ; la suite du texte
   passe a droite, sous un filet accentue. */
.sx-intro { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.sx-intro__g { flex: 1 1 46%; min-width: 0; }
.sx-intro__g .sx-h { margin: 0; }
.sx-intro__c {
  margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.65;
  color: var(--texte); border-left: .2rem solid var(--accent); padding-left: 1rem;
}
.sx-intro__d { flex: 1 1 34%; min-width: 0; color: var(--texte-doux); }
.sx-intro__fl {
  display: block; width: 2.4rem; height: .2rem; margin: .3rem 0 1.1rem;
  background: var(--marque);
}

/* Les blocs de contenu : image d'un cote, prose de l'autre, alternes
   par la coquille. Sur fond sombre pique. */
.sx-bs__l { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); }
/* R3 — une rangee de DEUX est une grille comme une autre. Avec deux bases
   flexibles, la part de l image se decidait au nombre de mots d a cote :
   le meme cadre changeait de forme d une page a l autre. Deux pistes
   comptees, et la forme du cadre appartient de nouveau au gabarit. */
.sx-bs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem 3rem; align-items: center; }
.sx-bs--inv .sx-bs__vi { order: 2; }
.sx-bs__vi { position: relative; min-width: 0; }
.sx-bs__vi .sx-ph { height: clamp(15rem, 26vw, 22rem); }
.sx-bs__tx { min-width: 0; }
.sx-bs__tx .sx-h { color: var(--sur-marque); }

.sx-ex { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.75rem 3rem; align-items: center; }
.sx-ex__tx { min-width: 0; }
.sx-ex__vi { position: relative; min-width: 0; }
.sx-ex__vi .sx-ph { height: clamp(15rem, 24vw, 21rem); }
.sx-ex__pl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sx-ex__p { min-width: 0; padding: 1.2rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: .9rem; }
.sx-ex__p strong { display: block; margin-bottom: .3rem; }
.sx-ex__p p { margin: 0; font-size: .9rem; color: var(--texte-doux); }

/* ============================================================
   OFFRE
   ============================================================ */

.sx-sv {
  display: flex; flex-direction: column;
  padding: 1.6rem; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 1.1rem;
}
/* Quand la prestation porte une photo, elle occupe le haut de la carte et
   la pastille vient mordre dessus : la carte garde son idiome, la donnee
   fournie n est jamais jetee. */
.sx-sv--ph { padding-top: 0; overflow: hidden; }
.sx-sv__hd { display: flex; flex-direction: column; }
.sx-sv--ph .sx-sv__ic { order: 2; }
.sx-sv--ph .sx-ph--sv { order: 1; width: auto; margin: 0 -1.6rem; }
.sx-ph--sv { width: 100%; height: 11rem; border-radius: 0; }
.sx-sv--ph .sx-sv__ic { margin-top: -1.5rem; box-shadow: 0 0 0 .35rem var(--fond); }
.sx-sv__ic {
  position: relative; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--marque) 12%, var(--fond-2));
}
.sx-sv__ic::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.15rem; height: 1.15rem;
  border: 1.5px solid var(--marque); border-radius: .25rem; transform: rotate(45deg);
}
.sx-sv h3 { font-size: 1.15rem; }
.sx-sv p { font-size: .92rem; color: var(--texte-doux); }
.sx-sv__pd {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--bordure);
}
.sx-sv__px { padding: .4rem .8rem; border-radius: 999px; background: var(--fond-2); font-size: .82rem; font-weight: 600; }

.sx-pr { display: flex; flex-direction: column; padding: 1.5rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.1rem; }
.sx-pr__n { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: color-mix(in srgb, var(--accent) 70%, var(--texte)); }
.sx-pr__x { margin-top: .5rem; }
.sx-pr h3 { font-size: 1.1rem; }
.sx-pr p { font-size: .92rem; color: var(--texte-doux); }
.sx-pr .sx-ph--pr { height: 9rem; margin-bottom: 1.1rem; }

.sx-ch { display: flex; flex-wrap: wrap; gap: 1px; background: color-mix(in srgb, var(--sur-marque) 20%, transparent); border-radius: 1rem; overflow: hidden; }
.sx-ch__i { flex: 1 1 21%; min-width: 0; padding: 1.8rem 1.4rem; background: var(--marque); text-align: center; }
.sx-ch__i strong { display: block; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; color: var(--accent); font-family: var(--police-titre, inherit); }
.sx-ch__i span { display: block; margin-top: .5rem; font-size: .86rem; color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

/* Le bento : la premiere carte est sombre et large, la deuxieme porte
   l'image, les suivantes restent claires. */
.sx-wy { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 1.1rem; border: 1px solid var(--bordure); background: var(--fond); }
.sx-wy--large { flex: 1 1 46%; background: var(--marque); color: var(--sur-marque); border-color: transparent; }
.sx-wy--large h3 { color: var(--sur-marque); font-size: 1.5rem; }
.sx-wy--large p { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
.sx-wy--photo { flex: 1 1 46%; padding: 0; }
.sx-wy--photo .sx-ph--wy { height: 14rem; border-radius: 0; }
.sx-wy--photo .sx-wy__tx { padding: 1.5rem; }
.sx-wy--plat { flex: 1 1 30%; }
.sx-wy__bg { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: color-mix(in srgb, var(--accent) 72%, var(--texte)); }
.sx-wy--large .sx-wy__bg { color: var(--accent); }
.sx-wy h3 { margin-top: .5rem; font-size: 1.15rem; }
.sx-wy p { font-size: .92rem; color: var(--texte-doux); }

/* ============================================================
   SECTEURS
   ============================================================ */

.sx-b2__l { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.sx-b2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem 3rem; align-items: center; }
.sx-b2--inv .sx-b2__vi { order: 2; }
.sx-b2__vi { position: relative; min-width: 0; }
.sx-b2__vi .sx-ph { height: clamp(14rem, 22vw, 19rem); }
.sx-b2__tx { min-width: 0; }
.sx-b2__m { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sx-b2__h { margin-top: .5rem; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--sur-marque); }
.sx-b2__pd { margin-top: 1.1rem; }
.sx-b2__ar { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.sx-b2__ag { display: flex; align-items: center; gap: .75rem; font-size: .94rem; }
.sx-b2__ag span { min-width: 0; }
.sx-b2__ai {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.sx-mt { display: flex; flex-direction: column; overflow: hidden; background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.1rem; }
.sx-mt__vi { position: relative; }
.sx-mt .sx-ph--mt { height: 11rem; border-radius: 0; }
.sx-mt__q {
  position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem);
  padding: .38rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 86%, transparent); color: var(--sur-marque);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sx-mt__tx { padding: 1.4rem; }
.sx-mt h3 { font-size: 1.1rem; }
.sx-mt p { font-size: .92rem; color: var(--texte-doux); }

.sx-cf { padding: 1.4rem; text-align: center; background: var(--fond-2); border-radius: 1.1rem; }
.sx-cf__ic { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, var(--bordure)); }
.sx-cf__h { display: block; }
.sx-cf h3 { font-size: 1rem; }
.sx-cf__d { margin: .45rem 0 0; font-size: .88rem; color: var(--texte-doux); }
.sx-cf__x { max-width: 60ch; margin: -1.5rem auto 2rem; text-align: center; color: var(--texte-doux); }

.sx-ai { padding: 1.5rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.1rem; }
.sx-ai h3 { font-size: 1.1rem; }
.sx-ai p { font-size: .92rem; color: var(--texte-doux); }

/* Les offres : la premiere claire, la seconde sombre, l'en-tete
   detachee du corps. */
.sx-tf { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; background: var(--fond); color: var(--texte); }
.sx-tf__hd { padding: 1.8rem; background: var(--fond-2); }
.sx-tf h3 { font-size: 1.15rem; }
.sx-tf__p { display: flex; align-items: baseline; gap: .4rem; margin: .6rem 0 .4rem; }
.sx-tf__p strong { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; font-family: var(--police-titre, inherit); }
.sx-tf__p span { font-size: .85rem; color: var(--texte-doux); }
.sx-tf__x { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.sx-tf__ac { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.sx-tf__nt { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--texte-doux); }
.sx-tf__nt::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.sx-tf__cp { padding: 1.5rem 1.8rem 1.8rem; }
.sx-tf__ct { display: block; margin-bottom: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.sx-tf--sombre { background: color-mix(in srgb, var(--marque) 88%, var(--texte)); color: var(--sur-marque); }
.sx-tf--sombre h3 { color: var(--sur-marque); }
.sx-tf--sombre .sx-tf__hd { background: color-mix(in srgb, var(--marque) 70%, var(--sur-marque) 6%); }
.sx-tf--sombre .sx-tf__p span,
.sx-tf--sombre .sx-tf__x,
.sx-tf--sombre .sx-tf__ct,
.sx-tf--sombre .sx-tf__nt { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
.sx-tf--sombre .sx-ck li::before { color: var(--accent); }

/* ============================================================
   PREUVE
   ============================================================ */

.sx-rz { display: flex; flex-direction: column; overflow: hidden; background: var(--fond); color: var(--texte); border-radius: 1.1rem; }
.sx-rz .sx-ph--rz { height: 13rem; border-radius: 0; }
.sx-rz__tx { padding: 1.4rem; }
.sx-rz h3 { font-size: 1.1rem; }
.sx-rz p { font-size: .92rem; color: var(--texte-doux); }
.sx-rz__m { display: block; margin-top: .6rem; font-size: 1.6rem; font-weight: 700; color: color-mix(in srgb, var(--marque) 80%, var(--fond)); font-family: var(--police-titre, inherit); }
.sx-rz .sx-tags li { border-color: var(--bordure); }

/* L'avant / apres : deux photos superposees, une decoupe pilotee par
   --pos, et un curseur en surimpression qui repond a la souris, au
   doigt et au clavier. */
.sx-ab { display: flex; flex-direction: column; }
.sx-ab__lg { order: 2; }
.sx-ab__vu { order: 1; position: relative; overflow: hidden; border-radius: 1.1rem; aspect-ratio: 4 / 3; }
.sx-ab__im { position: absolute; inset: 0; }
.sx-ab__im .sx-ph { width: 100%; height: 100%; border-radius: 0; }
.sx-ab__im--ap { clip-path: inset(0 0 0 var(--pos)); }
.sx-ab__im em {
  position: absolute; bottom: .8rem; padding: .3rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 82%, transparent); color: var(--sur-marque);
  font-size: .72rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
}
.sx-ab__im--av em { left: .8rem; }
.sx-ab__im--ap em { right: .8rem; }
.sx-ab__tr { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--accent); transform: translateX(-1px); }
.sx-ab__tr::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2.4rem; height: 2.4rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--texte) 30%, transparent);
}
.sx-ab__i {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
}
.sx-ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100%; }
.sx-ab__i:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; }
.sx-ab figcaption { padding-top: 1.1rem; }
.sx-ab h3 { font-size: 1.1rem; }
.sx-ab p { font-size: .92rem; color: var(--texte-doux); }

.sx-av { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 1.6rem; background: var(--fond); border-radius: 1.1rem; border: 1px solid var(--bordure); }
.sx-av__hd { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--bordure); }
.sx-av__id { min-width: 0; margin-right: auto; }
.sx-av__hd .sx-ph--av { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; }
.sx-av__q { min-width: 0; }
.sx-av__q h3 { margin-top: 0; }
.sx-av__gm { position: absolute; top: .6rem; right: 1.1rem; width: 3.2rem; height: 3.2rem; opacity: .12; background: currentColor; clip-path: polygon(0 100%, 22% 44%, 22% 0, 44% 0, 44% 56%, 22% 100%, 56% 100%, 78% 44%, 78% 0, 100% 0, 100% 56%, 78% 100%); }
.sx-av__et { flex: none; letter-spacing: .3em; color: color-mix(in srgb, var(--accent) 80%, var(--texte)); }
.sx-av h3 { font-size: 1.05rem; }
.sx-av p { margin-top: .5rem; font-size: .93rem; color: var(--texte-doux); }
.sx-av__in { flex: none; display: flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--marque); color: var(--sur-marque); font-weight: 700; }
.sx-av__id strong { display: block; font-size: .95rem; }
.sx-av__id span { font-size: .82rem; color: var(--texte-doux); }

/* La bande de logos : des cellules separees par des filets verticaux. */
.sx-sec--mq { padding: clamp(2rem, 4vw, 3.2rem) 0; background: var(--fond-2); }
.sx-mq__t { display: block; margin-top: 1.2rem; text-align: center; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.sx-mq { display: flex; flex-wrap: wrap; list-style: none; border: 1px solid var(--bordure); border-radius: .9rem; overflow: hidden; }
.sx-mq__c {
  flex: 1 1 16%; min-width: 0;
  padding: 1.1rem .8rem; text-align: center;
  border-left: 1px solid var(--bordure);
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  color: color-mix(in srgb, var(--texte) 72%, var(--fond));
  overflow-wrap: anywhere;
}
.sx-mq__c:first-child { border-left: 0; }

/* ============================================================
   LOCAL
   ============================================================ */

.sx-zn {
  display: flex; align-items: center; gap: 1rem; overflow: hidden;
  padding: .9rem 1rem; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 1.1rem;
}
.sx-zn__n { flex: none; font-family: var(--police-titre); font-size: 1rem; color: color-mix(in srgb, var(--texte-doux) 70%, transparent); }
.sx-zn__tx { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.sx-zn .sx-ph--zn { flex: none; width: 4.2rem; height: 4.2rem; border-radius: .8rem; }
.sx-zn__t { font-weight: 600; overflow-wrap: anywhere; }
.sx-zn__g { font-size: .78rem; color: var(--texte-doux); }
.sx-zn__l { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .85rem; font-weight: 600; }
.sx-zn__l::after { content: ""; width: .4rem; height: .4rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
a.sx-zn:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--bordure)); }

.sx-ul { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; }
.sx-ul__tx { order: 1; flex: 1 1 40%; min-width: 0; }
.sx-ul__tx .sx-h { color: var(--sur-marque); }
.sx-ul__ad { display: flex; flex-direction: column; gap: .2rem; color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }
.sx-ul__ch { order: 2; flex: 0 1 18rem; min-width: 0; padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--sur-marque) 24%, transparent); }
.sx-ul__cv { display: block; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: var(--accent); font-family: var(--police-titre, inherit); }
.sx-ul__cl { display: block; margin-top: .4rem; font-weight: 600; }
.sx-ul__ch p { margin: .4rem 0 0; font-size: .88rem; }
/* La carte du modele : une trame de points, et une epingle posee. */
.sx-ul__vi { order: 3; flex: 1 1 100%; position: relative; margin-top: clamp(2rem, 4vw, 3rem); border-radius: 1.25rem; overflow: hidden; background: color-mix(in srgb, var(--sur-marque) 6%, transparent); }
.sx-ul__vi .sx-ph--ul { height: clamp(13rem, 26vw, 22rem); border-radius: 0; background: none; }
.sx-ul__vi::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--sur-marque) 26%, transparent) 1.5px, transparent 1.6px);
  background-size: 16px 16px;
}
.sx-ul__pns { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sx-ul__pn {
  position: absolute; width: .95rem; height: .95rem;
  border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg);
  box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Huit reperes semes a des positions irregulieres, jamais alignes. */
.sx-ul__pn:nth-child(1) { top: 16%; left: 11%; }
.sx-ul__pn:nth-child(2) { top: 58%; left: 19%; }
.sx-ul__pn:nth-child(3) { top: 31%; left: 33%; }
.sx-ul__pn:nth-child(4) { top: 72%; left: 41%; }
.sx-ul__pn:nth-child(5) { top: 22%; left: 54%; }
.sx-ul__pn:nth-child(6) { top: 63%; left: 66%; }
.sx-ul__pn:nth-child(7) { top: 37%; left: 79%; }
.sx-ul__pn:nth-child(8) { top: 78%; left: 88%; }

.sx-ug { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.25rem; }
.sx-ug__tx { order: 1; flex: 1 1 30rem; min-width: 0; }
.sx-ug__tx .sx-h { margin: 0 0 .6rem; }
.sx-ug__ac { order: 2; flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.sx-ug__tel { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; }

/* ============================================================
   QUESTIONS, LIENS
   ============================================================ */

.sx-fq { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.sx-fq__l { order: 1; flex: 1 1 60%; min-width: 0; }
.sx-fq__r { border-bottom: 1px solid var(--bordure); }
.sx-fq__s { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.sx-fq__s::-webkit-details-marker { display: none; }
.sx-fq__n { flex: none; font-family: var(--police-titre); font-size: .95rem; color: color-mix(in srgb, var(--texte-doux) 70%, transparent); }
.sx-fq__q { flex: 1 1 auto; min-width: 0; }
.sx-fq__v { flex: none; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -.2rem; }
.sx-fq__r[open] .sx-fq__v { transform: rotate(225deg); margin-top: .1rem; }
.sx-fq__c { padding-bottom: 1.1rem; color: var(--texte-doux); }
.sx-fq__c p { margin: 0; }
.sx-fq__e { order: 2; flex: 1 1 18rem; min-width: 0; padding: 1.5rem; background: var(--marque); color: var(--sur-marque); border-radius: 1.1rem; }
.sx-fq__e strong { display: block; font-size: 1.15rem; }
.sx-fq__e p { margin: .5rem 0 1rem; font-size: .92rem; color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

.sx-mi {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 1.3rem 1.3rem 0; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 1.1rem;
}
.sx-mi__hd { display: flex; align-items: center; gap: .8rem; }
.sx-mi__m { min-width: 0; margin-right: auto; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); overflow-wrap: anywhere; }
/* La fleche du renvoi, dessinee au trait comme les boutons du modele. */
.sx-mi__fl {
  position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--fond-2);
}
.sx-mi__fl::before, .sx-mi__fl::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.sx-mi__fl::before { width: .8rem; height: 1.5px; }
.sx-mi__fl::after { width: .45rem; height: .45rem; margin-right: .58rem; background: none; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
a.sx-mi:hover .sx-mi__fl { background: var(--accent); }
.sx-mi__t { display: block; margin-top: .7rem; font-size: 1.05rem; }
.sx-mi__p { margin: .4rem 0 0; font-size: .9rem; color: var(--texte-doux); }
.sx-mi .sx-ph--mi { height: 8.5rem; margin: 1.2rem -1.3rem 0; border-radius: 0; }
a.sx-mi:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--bordure)); }

/* ============================================================
   FORMULAIRES
   ============================================================ */

/* R3 au formulaire : deux pistes comptees. Un nombre impair de champs
   laissait le dernier s etirer sur toute la ligne. */
.sx-fm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.sx-fm__c { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.sx-fm__c--long { grid-column: 1 / -1; }
/* Le pied du formulaire : la porte d appel et la commande d envoi cote a
   cote, la regle 7 tenue par le gabarit au point exact ou la page demande
   quelque chose. */
.sx-fm__pd { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .4rem; }
.sx-fm label { font-size: .8rem; font-weight: 600; color: var(--texte-doux); }
.sx-fm input, .sx-fm textarea, .sx-ft__ab input {
  width: 100%; padding: .8rem .9rem;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem;
}
.sx-fm textarea { resize: vertical; }
.sx-fm input:focus-visible, .sx-fm textarea:focus-visible, .sx-ft__ab input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sx-fm--cta { max-width: 34rem; margin: 1.5rem auto 0; }
.sx-fm--cta label { color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

.sx-co { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; }
.sx-co__g { flex: 1 1 32%; min-width: 0; }
.sx-co__d { flex: 1 1 48%; min-width: 0; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.25rem; }
.sx-co__x { color: var(--texte-doux); }
.sx-co__i { margin: 0; padding: 1rem 0; border-top: 1px solid var(--bordure); }
.sx-co__t { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.sx-co__i dd { margin: .35rem 0 0; font-size: .95rem; }
.sx-co__fc { display: flex; align-items: center; gap: .9rem; margin-top: .7rem; padding: 1rem; background: var(--fond-2); border-radius: .9rem; }
.sx-co__fc .sx-ph--co { flex: none; width: 3rem; height: 3rem; border-radius: 50%; }
.sx-co__fc strong { display: block; }
.sx-co__fc span { font-size: .84rem; color: var(--texte-doux); }

/* ============================================================
   PRODUITS
   ============================================================ */

.sx-fc { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.sx-fc__i { min-width: 0; }
.sx-fc__p { display: inline-block; font-weight: 600; padding: .55rem 1rem; border: 1px solid var(--bordure); border-radius: 999px; font-size: .88rem; }
.sx-fc__p--on { background: var(--marque); color: var(--sur-marque); border-color: transparent; }
a.sx-fc__p:hover { background: var(--fond-2); }

.sx-pd { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.1rem; }
.sx-pd .sx-ph--pd { height: 12rem; border-radius: 0; }
.sx-pd__b { position: absolute; top: .9rem; left: .9rem; padding: .3rem .7rem; border-radius: 999px; background: var(--accent); color: var(--texte); font-size: .74rem; font-weight: 700; }
.sx-pd__tx { display: flex; flex-direction: column; flex: 1; padding: 1.3rem; }
.sx-pd h3 { font-size: 1.08rem; }
.sx-pd p { font-size: .92rem; color: var(--texte-doux); }
.sx-pd__pd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--bordure); }

.sx-fp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.75rem 3rem; align-items: center; }
.sx-fp__vi { position: relative; min-width: 0; }
.sx-fp__vi .sx-ph { height: clamp(16rem, 28vw, 24rem); }
.sx-fp__tx { min-width: 0; }
.sx-fp__p { display: flex; align-items: baseline; gap: .4rem; }
.sx-fp__pv { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; font-family: var(--police-titre, inherit); }
.sx-fp__pu { font-size: .85rem; font-style: normal; color: var(--texte-doux); }
.sx-fp__ap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.sx-fp__ap .sx-mention { margin-top: 0; }

.sx-sp { padding: 1.4rem; border-radius: .9rem; background: color-mix(in srgb, var(--sur-marque) 8%, transparent); }
.sx-sp__v { display: block; margin: 0; font-size: 1.7rem; line-height: 1.1; color: var(--accent); font-family: var(--police-titre, inherit); }
.sx-sp__l { display: block; margin-top: .3rem; font-size: .85rem; color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

/* ============================================================
   JOURNAL ET MENTIONS
   ============================================================ */

.sx-bl { display: flex; flex-direction: column; overflow: hidden; background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.1rem; }
.sx-bl .sx-ph--bl { height: 12rem; border-radius: 0; }
.sx-bl__tx { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.sx-bl__m { font-size: .78rem; color: var(--texte-doux); }
.sx-bl h3 { margin-top: .5rem; font-size: 1.1rem; }
.sx-bl p { font-size: .92rem; color: var(--texte-doux); }
.sx-bl .sx-bt { margin-top: auto; align-self: flex-start; padding-top: 1rem; }
a.sx-bl:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--bordure)); }

.sx-ar { max-width: 74ch; margin: 0 auto; }
.sx-ar__vi { margin-bottom: 1.8rem; }
.sx-ar .sx-ph--ar { height: clamp(14rem, 26vw, 22rem); }
.sx-ar__hd { padding-bottom: 1.4rem; }
.sx-ar__m { display: block; margin: 0 0 .9rem; font-size: .85rem; color: var(--texte-doux); }
/* Le sommaire en barre de jetons, juste avant le texte. */
.sx-ar__s { padding: 1.2rem 1.3rem; margin-bottom: 2rem; background: var(--fond-2); border-radius: 1rem; }
.sx-ar__st { display: block; margin-bottom: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.sx-ar__s ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.sx-ar__j {
  display: inline-block; max-width: 100%; padding: .35rem .8rem;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 999px;
  font-size: .85rem; overflow-wrap: anywhere;
}
.sx-ar__j:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--bordure)); }
.sx-ar__x { min-width: 0; }
.sx-ar__x h2 { margin-top: 2rem; font-size: 1.55rem; }
.sx-ar__x h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.sx-ar__e { display: flex; gap: 1rem; padding: 1.3rem; margin: 1.5rem 0; background: var(--fond-2); border-left: 3px solid var(--accent); border-radius: .8rem; }
.sx-ar__e > div { min-width: 0; }
.sx-ar__ei { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); }
.sx-ar__e strong { display: block; margin-bottom: .3rem; }
.sx-ar__e p { margin: 0; color: var(--texte-doux); }

.sx-lg { max-width: 74ch; }
.sx-lg__hd { padding-bottom: 1.6rem; border-bottom: 1px solid var(--bordure); }
.sx-lg__m { margin: 0 0 .9rem; color: var(--texte-doux); font-size: .88rem; }
.sx-lg__b { margin-top: 2rem; }
.sx-lg__h { display: flex; align-items: baseline; gap: .8rem; }
.sx-lg__n { flex: none; font-family: var(--police-titre); font-size: 1rem; color: color-mix(in srgb, var(--texte-doux) 70%, transparent); }
.sx-lg__x { min-width: 0; }
.sx-lg__h { font-size: 1.35rem; }
.sx-lg__b p { margin-top: .7rem; color: var(--texte-doux); }

/* ============================================================
   APPEL ET PIED
   ============================================================ */

.sx-cta { position: relative; padding: clamp(4rem, 8vw, 7rem) 0 clamp(7rem, 12vw, 11rem); background: var(--marque); color: var(--sur-marque); overflow: hidden; }
.sx-cta__fd { position: absolute; inset: 0; }
.sx-cta__fd .sx-ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.sx-cta__fd::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--marque) 82%, transparent); }
.sx-cta__in { position: relative; z-index: 1; text-align: center; }
.sx-cta__in .sx-eb { justify-content: center; }
.sx-cta__in .sx-h { color: var(--sur-marque); max-width: 20ch; margin-inline: auto; }
.sx-cta__x { max-width: 52ch; margin: 0 auto; color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

/* Le pied est une carte blanche, remontee sur la bande d'appel. */
.sx-ft { background: var(--fond); }
.sx-ft > .sx-wrap { margin-top: clamp(-6rem, -8vw, -4rem); }
.sx-ft__carte {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 1.5rem;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--texte) 12%, transparent);
}
/* L'eclair en filigrane, dans l'angle bas du pied. */
.sx-ft__fg {
  position: absolute; right: -2rem; bottom: -3rem; width: 14rem; height: 22rem;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  clip-path: polygon(58% 0, 0 58%, 42% 58%, 32% 100%, 100% 40%, 52% 40%);
  pointer-events: none;
}
.sx-ft__gr { order: 1; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2rem; }
.sx-ft__mq { flex: 1 1 30%; min-width: 0; }
.sx-ft__col { flex: 1 1 18%; min-width: 0; margin: 0; }
.sx-ft__mq strong { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.1rem; }
.sx-ft__mq p { margin: .8rem 0 1rem; font-size: .92rem; color: var(--texte-doux); max-width: 34ch; }
.sx-ft__ab { display: flex; flex-direction: column; gap: .6rem; }
.sx-ft__abl { font-size: .9rem; line-height: 1.5; color: var(--texte-doux); max-width: 34ch; }
.sx-ft__abr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sx-ft__ab input { flex: 1 1 12rem; min-width: 0; }
.sx-ft__rx { display: flex; gap: .5rem; margin-top: 1.2rem; }
.sx-ft__rx i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--fond-2); border: 1px solid var(--bordure); }
.sx-ft__ct { display: block; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.sx-ft__col dd { margin: 0; padding: .22rem 0; font-size: .92rem; }
.sx-ft__col dd a:hover { text-decoration: underline; }
.sx-ft__bas { order: 2; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--bordure); font-size: .84rem; color: var(--texte-doux); }
.sx-ft__liens { display: flex; flex-wrap: wrap; gap: 1rem; }
.sx-ft__liens a:hover { text-decoration: underline; }

/* ============================================================
   ADAPTATIONS
   ============================================================ */

@media (max-width: 1080px) {
  .sx-gr, .sx-gr--cf, .sx-gr--zn, .sx-gr--sp,
  .sx-gr--sv, .sx-gr--pr, .sx-gr--mt, .sx-gr--av,
  .sx-gr--mi, .sx-gr--bl, .sx-gr--pd, .sx-gr--ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gr--wy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gr--wy > *, .sx-gr--wy > .sx-wy--large, .sx-gr--wy > .sx-wy--photo { grid-column: auto; }
  .sx-ex__pl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-ch__i { flex: 1 1 44%; }
  .sx-mq__c { flex: 1 1 32%; }
  .sx-hero__rp { flex: 1 1 45%; }
}

@media (max-width: 900px) {
  /* Le menu compact : le volet se replie a plat sous son lien, la
     vitrine passe en dessous, plus rien ne survole. */
  .sx-hd__bg { display: flex; }
  .sx-hd__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .75rem 1.25rem 1.25rem;
    max-height: calc(100vh - 4.75rem); overflow-y: auto;
    background: var(--fond); color: var(--texte);
    border-top: 1px solid var(--bordure);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--texte) 16%, transparent);
  }
  .sx-hd__bx:checked ~ .sx-wrap .sx-hd__nav { display: flex; }
  .sx-hd__ul { flex-direction: column; align-items: stretch; gap: 0; }
  .sx-nv { position: static; }
  .sx-nv__t { padding: .8rem 0; border-bottom: 1px solid var(--bordure); }
  .sx-nv__v {
    position: static; transform: none; padding-top: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .sx-nv__vin {
    flex-direction: column; width: auto; padding: .6rem 0 1rem;
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .sx-nv__cols { flex-direction: column; gap: .8rem; }
  .sx-nv__vit { flex: 1 1 auto; }
  .sx-hd__tel { display: none; }
  body[data-tete="marine"] .sx-hd { position: sticky; background: var(--fond); color: var(--texte); border-bottom-color: var(--bordure); }
  /* L'entete reprend sa place dans le flux : le fil n'a plus a lui
     reserver de hauteur, et l'affiche retrouve sa respiration. */
  body[data-tete="marine"] .sx-fa { padding-top: 1.1rem; }
  body[data-tete="marine"] .sx-fa + .sx-hero { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

  .sx-bs, .sx-bs--inv, .sx-b2, .sx-b2--inv, .sx-ex, .sx-fp { flex-direction: column; }
  .sx-bs, .sx-b2, .sx-ex, .sx-fp { grid-template-columns: minmax(0, 1fr); }
  .sx-ex__pl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-ul__ch { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--sur-marque) 24%, transparent); padding-top: 1.2rem; }
  .sx-tf { flex: 1 1 100%; }
  .sx-gr--tf, .sx-gr--ab, .sx-gr--wy { grid-template-columns: minmax(0, 1fr); }
  .sx-hero__ct { flex: 1 1 100%; }
}

@media (max-width: 620px) {
  .sx-wrap { width: min(100% - 1.75rem, 82rem); }
  .sx-gr, .sx-gr--cf, .sx-gr--zn, .sx-gr--sp,
  .sx-gr--sv, .sx-gr--pr, .sx-gr--mt, .sx-gr--av,
  .sx-gr--mi, .sx-gr--bl, .sx-gr--pd, .sx-gr--ai { grid-template-columns: minmax(0, 1fr); }
  .sx-fm { grid-template-columns: minmax(0, 1fr); }
  .sx-ex__pl { grid-template-columns: minmax(0, 1fr); }
  .sx-ch__i, .sx-mq__c, .sx-hero__rp, .sx-ck li { flex: 1 1 100%; }
  .sx-tete, .sx-tete--fendu { flex-direction: column; align-items: flex-start; }
  .sx-co__g, .sx-co__d, .sx-fq__l, .sx-fq__e, .sx-intro__g, .sx-intro__d,
  .sx-ul__tx, .sx-ul__ch, .sx-ug__tx, .sx-ug__ac, .sx-ft__mq, .sx-ft__col { flex: 1 1 100%; }
  .sx-rail > * { flex: 0 0 84%; }
  .sx-ft > .sx-wrap { margin-top: -3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

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


/* === CONTRAT GRILLE (factory, chantier 20/08, #1/#2) — services taille égale + avant/après 3-col === */
.sx-gr--sv > * { flex-grow: 0 !important; }
.sx-gr--ab > * { 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}