/* coulissant-panoramique.css — feuille de la page SG_RUN (route 28).
 *
 * Transposition de la maquette « Coulissant Panoramique Essentiel »
 * (Claude Design) vers le moteur. La maquette est écrite en styles en
 * ligne : tout ce qui suit les remplace par des classes, sans rien
 * redéfinir de base.css ni de layout.css — les jetons, la typographie et
 * les boutons (.btn, .btn-primary, .btn-ghost, .btn-soft, .btn-lg)
 * viennent de là et sont employés tels quels.
 *
 * Préfixe « cp- » : cette feuille n'est chargée que par SG_RUN. Elle ne
 * doit jamais devenir un tronc commun — produit.css tient ce rôle pour
 * les autres pages produit, dont SG_RUN_PREMIUM.
 *
 * Le header et le pied de page ne sont PAS ici : ils appartiennent au
 * layout. La maquette en dessine des siens, ils sont écartés (une balise
 * <header> dans le contenu recouvre le vrai header).
 */

/* ==================================================================
   Grand visuel
   ================================================================== */
.cp-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  background:#0c1417;color:#fff;overflow:hidden}
.cp-hero-bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(140deg,#12313f,#0c1417)}
/* `video` ajoute le 10 sept. 2026 : le grand visuel du garde-corps porte une
   video de fond, pas une image. Ajout PUREMENT ADDITIF — aucune autre page
   n'a de video dans son grand visuel, leur rendu est donc inchange. */
.cp-hero-bg img,.cp-hero-bg video{width:100%;height:100%;object-fit:cover}
.cp-hero-voile{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,16,20,.55) 0%,rgba(8,16,20,.05) 32%,
    rgba(8,16,20,.15) 55%,rgba(8,16,20,.86) 100%)}
/* Le header est position:fixed et transparent : il se pose sur ce visuel.
   Au repos il mesure environ 147 px (bandeau 35 + barre 16+80+16). La
   reserve haute reprend donc la valeur deja eprouvee par produit.css —
   150 px plancher, 196 px au large. Un padding fixe de 150 px laissait
   3 px de marge : c'est ainsi que le titre est passe sous le bandeau la
   derniere fois. */
.cp-hero-in{position:relative;z-index:3;width:100%;
  padding:clamp(150px,17vw,196px) 0 clamp(52px,6vw,76px)}
.cp-hero .eyebrow{color:#fff}
.cp-hero h1{font-family:"Jost",sans-serif;font-weight:400;line-height:1.08;
  font-size:clamp(2.3rem,5vw,4.3rem);margin:20px 0;max-width:20ch;
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cp-hero h1 em{font-style:normal;font-weight:300}
.cp-hero-lead{font-size:clamp(1.05rem,1.9vw,1.3rem);max-width:52ch;
  color:rgba(255,255,255,.92);margin-bottom:30px;line-height:1.5;text-wrap:pretty}
.cp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cp-hero-faits{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:36px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.84rem;color:rgba(255,255,255,.85);font-weight:500;
  list-style:none}
.cp-hero-faits li{display:inline-flex;align-items:center;gap:8px}
.cp-hero-faits li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}

/* .cp-hero-logo retiré le 8 sept. 2026 avec le logo produit du grand
   visuel, absent de la maquette. Les styles du fil d'Ariane (.fil) restent
   dans base.css : quatre autres vues s'en servent. */

/* Les règles .cp-coupure vivaient ici : image pleine largeur entre deux
   sections avec le logo fournisseur posé dessus. Bloc supprimé de la vue
   le 8 sept. 2026 à la demande de Jeremy, styles retirés avec lui. */

/* ==================================================================
   Rythme des sections
   ================================================================== */
.cp-sec{padding:clamp(72px,9vw,110px) 0;scroll-margin-top:120px}
.cp-sec-serree{padding:clamp(48px,6vw,72px) 0}
.cp-clair{background:var(--paper)}
.cp-creme{background:var(--cream)}
.cp-os{background:var(--bone)}
.cp-sombre{background:var(--dark);color:#fff}
.cp-sombre h2,.cp-sombre h3{color:#fff}
.cp-sombre p,.cp-sombre li{color:rgba(255,255,255,.82)}
.cp-sombre .eyebrow{color:#7fcdee}
.cp-sombre .eyebrow::before{background:#7fcdee}

.cp-tete{max-width:62ch}
.cp-tete-centre{max-width:82ch;margin:0 auto;text-align:center}
.cp-h2{font-family:"Jost",sans-serif;font-weight:400;line-height:1.1;
  letter-spacing:-.02em;font-size:clamp(2rem,4.2vw,3.2rem);margin:14px 0 0;
  text-wrap:balance}
.cp-h2 em{font-style:normal;font-weight:300;color:var(--accent)}
.cp-sombre .cp-h2 em{color:#86d3f6}
.cp-h3{font-family:"Jost",sans-serif;font-weight:400;line-height:1.12;
  letter-spacing:-.01em;font-size:clamp(1.8rem,3.4vw,2.7rem);
  margin:14px 0 18px;text-wrap:balance}
/* Sous-titre posé sous un h2, repris de la maquette (« Le Coulissant
   Panoramique, en situation »). Valeurs de la maquette au chiffre près. */
.cp-sous-h2{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);margin:10px 0 0;text-wrap:pretty}
.cp-sombre .cp-sous-h2{color:#fff}
.cp-lede{font-size:1.12rem;color:var(--ink-soft);margin-top:18px;text-wrap:pretty}
.cp-sombre .cp-lede{color:rgba(255,255,255,.82)}
.cp-p{color:var(--ink-soft);font-size:1.08rem;margin-top:14px;text-wrap:pretty}
.cp-p b{font-weight:600;color:var(--ink)}
.cp-sombre .cp-p b{color:#fff}
.cp-p-ital{color:var(--ink-soft);font-size:1rem;margin-bottom:18px;font-style:italic}
.cp-note{border-left:3px solid var(--accent);background:var(--cream);
  padding:15px 20px;border-radius:0 5px 5px 0;font-size:.95rem;line-height:1.62;
  color:var(--ink-soft);margin:18px 0 0}
.cp-sombre .cp-note{background:rgba(255,255,255,.06);border-left-color:#7fcdee;
  color:rgba(255,255,255,.82)}
.cp-fine{color:var(--ink-soft);font-size:.9rem;margin-top:26px}

/* Liens au fil du texte : « a{color:inherit} » vient de base.css, sans
   cette règle un lien dans un paragraphe est indiscernable. */
.cp-sec p a:not(.btn),.cp-sec li a:not(.btn){color:var(--accent-deep);
  border-bottom:1px solid rgba(13,119,189,.42)}
.cp-sec p a:not(.btn):hover,.cp-sec li a:not(.btn):hover{border-bottom-color:currentColor}
.cp-sombre p a:not(.btn),.cp-sombre li a:not(.btn){color:#7fcdee;
  border-bottom-color:rgba(127,205,238,.45)}

/* …sauf les cartes des rails. Ce sont des <a> dans des <li> : la règle
   ci-dessus leur posait un trait bleu sous TOUTE la carte, donc juste sous
   la flèche ronde. La carte entière est le lien, elle n'a pas besoin d'être
   soulignée — et la maquette ne l'est pas. Signalé par Jeremy le 8 sept.
   2026 sur les rails « articles » et « gamme » ; le rail des tutos a la
   même structure et le même défaut, corrigé avec eux. */
.cp-sec .cp-rail li a:not(.btn),
.cp-sec .cp-rail-tutos li a:not(.btn){border-bottom:none;color:inherit}
.cp-sec .cp-rail li a:not(.btn):hover,
.cp-sec .cp-rail-tutos li a:not(.btn):hover{border-bottom-color:transparent}

/* ------------------------------------------------------------------
   Duo : texte et média côte à côte
   ------------------------------------------------------------------ */
.cp-duo{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:center}
/* Duo à colonnes ÉGALES, posé le 14 sept. 2026 pour « Caractéristiques
   techniques » de la Pergola Bioclimatique — Jeremy : « mets le texte et
   l'image en face (1/2 et 1/2) ». Le duo ordinaire donne un peu plus de place
   au texte (1,05fr contre 1fr) ; ici les deux colonnes sont strictement
   égales. Déclarée AVANT les adaptations : sous 980 px la règle générale
   reprend la main et repasse à une seule colonne. Une valeur en style
   d'attribut aurait, elle, écrasé cette bascule et figé deux colonnes
   étroites jusque sur téléphone. */
.cp-duo-egal{grid-template-columns:1fr 1fr}
/* Duo à colonne de TEXTE ÉLARGIE, posé le 16 sept. 2026 pour le modèle 3
   (Lames Fixes) de la Pergola Déco — Jeremy : « agrandis un peu
   toiles-pergola-deco3.webp ». Ce bandeau est passé la veille SOUS le texte,
   dans la colonne de gauche : il y est donc bridé par la LARGEUR DE COLONNE
   (~557 px à 1200 px de fenêtre), pas par son `max-width` — son fichier fait
   734 px de large. On élargit la colonne au lieu d'étirer l'image : elle passe
   à ~635 px, sans upscale, et sans toucher le `max-width:734px` natif.
   LA VIDÉO D'EN FACE NE BOUGE PAS : elle est plafonnée à 420 px et centrée
   (`justify-self:center`), et la colonne de droite reste à ~453 px — donc
   au-dessus de ce plafond. C'est ce qui rend la place gratuite.
   SOUS 1200 px LA RÈGLE NE S'APPLIQUE PAS : en dessous, la colonne de droite
   tomberait sous les 420 px de la vidéo et c'est elle qui rétrécirait. La
   page garde donc exactement son rendu actuel jusqu'à 1200 px, et la bascule
   à une colonne de 980 px n'est pas concurrencée. */
@media (min-width:1200px){
  .cp-duo-texte-large{grid-template-columns:1.4fr 1fr}
}
.cp-duo-media{position:relative;aspect-ratio:4/3;border-radius:6px;
  overflow:hidden;background:var(--bone)}
.cp-duo-media img,.cp-duo-media video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
.cp-duo-media-contain img,.cp-duo-media-contain video{object-fit:contain}
/* Pas de fond sur la variante « contain ». Le fond gris de .cp-duo-media
   sert de réserve pendant le chargement d'un média qui REMPLIT son cadre ;
   en « contain » le média laisse des bandes, et le gris se voyait autour —
   signalé par Jeremy le 8 sept. 2026 sur la vidéo de présentation, seul
   élément de la page à porter cette variante. Le fond de la section passe
   dessous. */
.cp-duo-media-contain{background:none}

/* Bandes pleine largeur, média d'un côté, texte de l'autre. */
.cp-bande{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.cp-bande-media{position:relative;min-height:460px;overflow:hidden;background:var(--bone)}
.cp-bande-media img,.cp-bande-media video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
/* En « cover » le recadrage part du centre : ce qui dépasse est rogné en haut
   ET en bas. Cette variante ancre le cadrage sur le HAUT de l'image — demandée
   par Jeremy le 14 sept. 2026 pour la bande « Un Garde-corps vitré sur mesure ». */
.cp-bande-media-haut img,.cp-bande-media-haut video{object-position:50% 0}
/* Le cadre d'une bande fait toute la hauteur du texte d'en face : une image
   large y est fortement rognée en « cover », donc elle paraît zoomée. Cette
   variante la montre ENTIÈRE, centrée dans le cadre — demandée par Jeremy le
   16 sept. 2026 pour le rendu des avantages du Carport Photovoltaïque.
   Pas de fond, même raison que sur `.cp-duo-media-contain` : le gris de
   réserve se verrait dans les bandes laissées par le « contain ». Le fond de
   la section passe dessous. */
.cp-bande-media-contain{background:none}
.cp-bande-media-contain img,.cp-bande-media-contain video{object-fit:contain}
.cp-bande-txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,90px)}
.cp-bande-txt .cp-p:first-of-type{margin-top:0}
.mullions{opacity:.5}

/* Liste à coches */
.cp-coches{list-style:none;margin:24px 0 0;padding:0}
.cp-coches li{display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-weight:500;
  align-items:flex-start;color:var(--ink)}
.cp-sombre .cp-coches li{border-bottom-color:rgba(255,255,255,.12);color:#fff}
.cp-coches svg{flex-shrink:0;margin-top:2px;width:21px;height:21px;fill:none;
  stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-sombre .cp-coches svg{stroke:#86d3f6}

/* ------------------------------------------------------------------
   Cartes
   ------------------------------------------------------------------ */
.cp-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Variante à 4 colonnes : les quatre arguments de la motorisation du
   Premium tombaient en 3 + 1, avec une carte orpheline sur la seconde
   ligne. Déclarée AVANT les adaptations : sous 980 px la règle générale
   reprend la main et ramène à 2 colonnes, puis à 1 sous 560 px. */
.cp-cartes-4{grid-template-columns:repeat(4,1fr)}
/* Variante à 2 colonnes, posée le 14 sept. 2026 pour les quatre verres de la
   page Points de fixation — Jeremy : « mets les 2 blocs par ligne pour voir ».
   Ils étaient en .cp-cartes-4 ; en 2 + 2, chaque carte est deux fois plus
   large et son visuel 700 x 394 s'affiche près de sa taille réelle au lieu
   d'être réduit au quart de la largeur. Déclarée au même endroit que la
   variante à 4, AVANT les adaptations : sous 980 px la règle générale reprend
   la main (2 colonnes, déjà le cas ici), puis 1 seule sous 760 px.
   Une valeur en style d'attribut aurait, elle, écrasé ces adaptations et figé
   deux colonnes jusque sur téléphone. */
.cp-cartes-2{grid-template-columns:repeat(2,1fr)}
/* Carte qui prend TOUTE LA LARGEUR de sa grille, quel que soit le nombre de
   colonnes (Pergola Déco, modèle 3, 16 sept. 2026 — Jeremy : « mets exemple de
   configuration du modèle 3 sur toute la largeur, il prend l'espace des deux
   blocs »). Le modèle 3 a trois planches dans une grille à deux colonnes : la
   troisième se retrouvait seule sur sa ligne, à mi-largeur, alors que son
   visuel est une bande très large (1164 x 204). `1/-1` va de la première à la
   dernière ligne de grille : la règle vaut donc aussi quand la grille repasse
   à 2 colonnes sous 980 px puis à 1 sous 760 px, sans rien à réécrire. */
.cp-carte-pleine{grid-column:1/-1}
/* Carte à marge intérieure (SGP, « Mains-courantes », 11 sept. 2026 —
   Jeremy : « mets plus petit et mets un padding de 20px à l'intérieur des
   blocs », puis, parmi trois mises en page proposées, « blocs moins
   larges »). Les deux cartes sont dans la grille à 3 colonnes .cp-cartes
   (un tiers de la largeur chacune ; 2 colonnes sous 980 px, 1 sous 760 px).
   La variante .cp-cartes-2 posée juste avant pour du 1/2 – 1/2 est RETIRÉE.
   20 px tout autour de l'image ET du texte ; titre et texte reçoivent le
   dessin des autres cartes (.cp-carte-txt), qui leur manquait : ils étaient
   posés nus dans la carte, collés aux bords. */
.cp-carte-marge{padding:20px}
.cp-carte-marge .cp-carte-img{border-radius:4px}
.cp-carte-marge h3{font-family:"Jost",sans-serif;font-size:1.1rem;font-weight:500;
  margin:16px 0 8px;text-wrap:balance;color:var(--ink)}
.cp-carte-marge p{color:var(--ink-soft);font-size:.94rem;text-wrap:pretty}
/* Certifications (SGP, volet « Documentation & certifications », 11 sept.
   2026), reprises de la page 175 : une rangee de six petites cartes
   blanches, logo au-dessus, nom dessous. Tous les logos a la MEME HAUTEUR
   (56 px, largeur libre) : leurs rapports vont de 0,83 a 1,4, sans quoi la
   rangee serait en dents de scie. 3 par ligne sous 980 px, 2 sous 560 px.
   Classe dediee : aucune autre page ne la porte. */
.cp-certifs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cp-certif{margin:0;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;gap:12px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:6px;padding:18px 10px 14px;
  text-align:center}
.cp-certif img{display:block;height:56px;width:auto;max-width:100%;object-fit:contain}
.cp-certif figcaption{font-family:"Jost",sans-serif;font-size:.84rem;font-weight:600;
  line-height:1.25;color:var(--ink);text-wrap:balance}
@media (max-width:980px){ .cp-certifs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .cp-certifs{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Marges intérieures allégées dans cette variante : à quatre de front, une
   carte ne fait plus que ~270 px, et les 32 px de marge de chaque côté
   n'en laissaient que 206 au texte. Le pictogramme est resserré du même
   geste. Ne concerne QUE les cartes à quatre colonnes. */
.cp-cartes-4 .cp-atout{padding:22px 22px 24px}
.cp-cartes-4 .cp-atout .cp-picto{margin-bottom:16px}

/* ------------------------------------------------------------------
   Visuel plein cadre, légende au survol
   ------------------------------------------------------------------
   L'image occupe TOUTE la carte ; la bande blanche de légende monte du
   bas au survol. Elle est déplacée par `transform`, pas masquée par
   `display:none` ni `opacity:0` : le texte reste dans le document et
   dans l'arbre d'accessibilité, il est seulement hors du cadre visible
   (le `overflow:hidden` de la figure le rogne). C'est la règle du
   projet — ne jamais rendre invisible à une machine un texte destiné à
   être lu.
   ------------------------------------------------------------------ */
.cp-visuel{position:relative;margin:0;border-radius:6px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--bone);aspect-ratio:4/3;
  box-shadow:0 24px 60px -34px rgba(12,40,58,.45)}
/* `picture` est un conteneur en ligne : sans cette règle, seule l'`img`
   serait positionnée et le `picture` resterait dans le flux. */
.cp-visuel picture{position:absolute;inset:0;display:block}
.cp-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cp-visuel:hover img,.cp-visuel:focus-within img{transform:scale(1.05)}
/* Variante « schema » — posee le 10 sept. 2026 pour les six modeles du
   garde-corps. Ces rendus sont EN PORTRAIT (306x465), detoures sur blanc,
   avec une coupe technique posee a cote du volume. Dans le cadre 4/3 en
   `cover` de `.cp-visuel`, la coupe sortait du cadre et le rendu etait
   tranche en haut et en bas. Ici : le cadre prend le rapport exact de
   l'image, `contain` pour ne rien rogner, et un fond BLANC au lieu du gris
   de reserve — sinon le detourage se verrait tout autour.
   Purement additive : aucune autre page ne porte la classe. */
.cp-visuel-schema{aspect-ratio:306/465;background:#fff}
.cp-visuel-schema img{object-fit:contain}
.cp-visuel figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--paper);color:var(--ink);text-align:center;
  padding:14px 16px;font-size:.9rem;font-weight:600;line-height:1.35;
  text-wrap:pretty;transform:translateY(101%);transition:transform .35s ease}
.cp-visuel:hover figcaption,.cp-visuel:focus-within figcaption{transform:translateY(0)}
/* Sans survol possible — tactile — la légende reste visible en permanence :
   sinon elle serait tout simplement inatteignable. */
@media (hover:none){
  .cp-visuel figcaption{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cp-visuel img,.cp-visuel figcaption{transition:none}
  .cp-visuel:hover img,.cp-visuel:focus-within img{transform:none}
}
/* Les modeles du garde-corps (variante schema), 11 sept. 2026 — Jeremy :
   « laisse les noms visibles en dessous des modeles en fixe, pas de
   rollover, et diminue un peu les images dans les blocs ».
   - NOM FIXE SOUS LE VISUEL : la legende sort de la surimpression (plus de
     translateY) et reprend sa place dans le flux, sous un filet. margin-top
     auto : les legendes restent alignees en bas meme quand un nom passe sur
     deux lignes (les cartes d'une rangee ont la meme hauteur).
   - PAS DE SURVOL : ni legende qui monte, ni zoom de l'image.
   - VISUEL UN PEU PLUS PETIT : c'est le lien qui porte le cadre au rapport
     306/465, avec une marge blanche tout autour ; l'image y reste en
     `contain`, entiere.
   Place APRES les regles de .cp-visuel : a specificite egale, elle gagne.
   Seule la vue du garde-corps porte cette classe. */
.cp-visuel-schema{aspect-ratio:auto;display:flex;flex-direction:column}
.cp-visuel-schema > a{position:relative;display:block;aspect-ratio:306/465;
  margin:clamp(12px,1.8vw,22px) clamp(12px,1.8vw,22px) 0}
.cp-visuel-schema img{transition:none}
.cp-visuel-schema:hover img,.cp-visuel-schema:focus-within img{transform:none}
.cp-visuel-schema figcaption,.cp-visuel-schema:hover figcaption,
.cp-visuel-schema:focus-within figcaption{position:static;transform:none;
  transition:none;margin-top:auto;border-top:1px solid var(--line-soft);
  padding:12px 14px;font-size:.92rem}
/* Puis, meme jour : les modeles se SOULEVENT au survol, comme les autres
   blocs de la page (effet de .cp-carte : -6px + --shadow) — choix de Jeremy
   entre « les modeles aussi », « plus aucun bloc » et « ne rien changer ».
   Le nom reste fixe dessous, sans animation.
   !important INDISPENSABLE : le script d'apparition (bloc 7 de
   coulissant-panoramique.js) laisse un `transform:none` EN LIGNE sur les
   blocs apparus au defilement ; un style en ligne l'emporte sur toute regle
   de feuille. La transition est reprise pour la meme raison (le script en
   pose une de .8s) : l'opacite garde son fondu d'apparition, le mouvement
   de survol dure .4s comme sur les cartes. Le script, lui, n'est pas
   touche : le modifier aurait fait bouger d'autres blocs sur les six
   pages. */
.cp-visuel-schema{transition:opacity .8s cubic-bezier(.2,.7,.2,1),
  transform .4s ease,box-shadow .4s ease !important}
.cp-visuel-schema:hover,.cp-visuel-schema:focus-within{
  transform:translateY(-6px) !important;box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){
  .cp-visuel-schema:hover,.cp-visuel-schema:focus-within{transform:none !important}
}
.cp-cartes-auto{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.cp-carte{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:6px;overflow:hidden;
  transition:transform .4s ease,box-shadow .4s ease}
.cp-carte:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cp-carte-img{aspect-ratio:4/3;background:var(--bone);overflow:hidden}
.cp-carte-img img{width:100%;height:100%;object-fit:cover}
.cp-carte-txt{padding:20px 22px 24px}
.cp-carte-txt h3{font-family:"Jost",sans-serif;font-size:1.1rem;font-weight:500;
  margin-bottom:10px;text-wrap:balance;color:var(--ink)}
.cp-carte-txt p{color:var(--ink-soft);font-size:.94rem;text-wrap:pretty}

/* Carte « atout » : picto + intitulé + texte, bordure haute qui s'allume. */
.cp-atout{border:1px solid var(--line-soft);border-top:3px solid transparent;
  border-radius:6px;padding:30px 32px 34px;background:#f3f7f5;
  transition:transform .35s ease,box-shadow .35s ease,border-top-color .35s ease}
.cp-atout:hover{transform:translateY(-6px);box-shadow:var(--shadow);
  border-top-color:var(--accent)}
.cp-picto{width:48px;height:48px;border-radius:6px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.cp-picto svg{width:24px;height:24px;fill:none;stroke:var(--accent-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-atout h3{font-family:"Jost",sans-serif;font-size:1.34rem;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;text-wrap:balance}
.cp-atout p{color:var(--ink-soft);font-size:1rem;text-wrap:pretty}

/* Variante blanche de la PASTILLE du pictogramme.
   15 sept. 2026, demande de Jeremy : « mets les blocs sous les 6 pictos de
   Pergola Bioclimatique sur mesure en blanc », precise ensuite : « je parlais
   des petits blocs des pictos en haut a gauche du bloc ». Ce sont donc les
   carres de 48 x 48 qui portent l'icone, et non le fond des cartes — lequel
   avait ete repeint par erreur au premier passage, puis remis a #f3f7f5.
   La pastille passe de --accent-soft (#e3f1fb, bleu pale) a --paper (blanc).
   POURQUOI UNE VARIANTE ET PAS UNE CORRECTION DE .cp-picto : la classe sert
   partout sur les neuf pages — cartes d'atout, cartes de reassurance, normes
   certifiees, accuse de reception du formulaire. Toucher le fond commun les
   repeindrait toutes sans que personne l'ait demande. La variante ne
   s'applique que la ou elle est posee, et se retire en enlevant un mot de
   classe. Meme specificite que `.cp-picto`, declaree APRES : l'ordre tranche.
   OU ELLE EST POSEE, a ce jour : les cartes d'atout du bloc #avantages de
   `seesky_bio.php` (6), de `points_fixation_vitrage.php` (5) et de
   `seesky_luz.php` (6) — les trois demandes le meme jour. Nulle part
   ailleurs : les pastilles des normes certifiees, des cartes de reassurance
   et de l'accuse de reception du formulaire gardent leur bleu.
   LE FILET, ajoute le 15 sept. 2026 apres que Jeremy a vu les traitements
   compares et repondu « fait ce qui est le mieux ».
   CE QUE LA MESURE A MONTRE : sur le #f3f7f5 de la carte, une pastille blanche
   ne tient qu'a 1,08:1 de luminance — et l'ANCIENNE PASTILLE BLEUE etait tout
   aussi pale, 1,07:1. Si elle se voyait, c'etait par la TEINTE, pas par la
   clarte ; en passant au blanc on a donc retire le seul indice qui restait.
   Un filet, lui, joue sur la clarte : il porte quel que soit l'ecran et quel
   que soit le reglage de luminosite.
   POURQUOI --line-soft ET NON --line : c'est EXACTEMENT la bordure que porte
   deja `.cp-atout`, la carte qui contient la pastille. Le filet la dessine
   sans peser plus que le cadre qui l'entoure — 1,25:1 contre le blanc, la ou
   --line monterait a 1,41:1 mais ferait un contour plus marque que celui de
   la carte, ce qui se remarque.
   `border` et non `box-shadow` : base.css pose `*{box-sizing:border-box}`, la
   pastille reste donc a 48 x 48 exactement et rien ne bouge autour. */
.cp-picto-blanc{background:var(--paper);border:1px solid var(--line-soft)}

/* Variante a angles arrondis de la carte.
   15 sept. 2026, demande de Jeremy sur les trois toits de la Toiture
   Modulable : « arrondi les angles des 3 blocs ».
   POURQUOI var(--r) ET PAS UN NOMBRE INVENTE : `--r:14px` est declare dans
   base.css depuis l'origine et n'etait employe NULLE PART — c'est le rayon
   large du systeme, reste en sommeil. Le rayon courant des cartes est 6px et
   celui des grands panneaux 8px : a 8px la difference ne se serait pas vue sur
   une carte de 350 px de large. 14px se voit, et ne sort pas du systeme.
   `.cp-carte` porte deja `overflow:hidden` : le schema, qui affleure le haut de
   la carte, est donc rogne au nouveau rayon sans rien a regler de plus. Le
   `border-radius:4px` de `.cp-carte-img` tombe entierement dans la zone
   retiree par ce rognage, il n'a aucun effet visible ici.
   Comme les autres variantes de cette feuille, elle ne s'applique que la ou
   elle est posee — a ce jour, les trois cartes de toit de `seesky_luz.php`. */
.cp-carte-ronde{border-radius:var(--r)}

/* Variante « planche » de la carte.
   15 sept. 2026, demande de Jeremy sur les trois toits : « rend ca un peu plus
   graphique ».
   LE DEFAUT QU'ELLE CORRIGE : les trois schemas sont dessines SUR FOND BLANC,
   et la carte qui les porte est elle-meme en --paper. Blanc sur blanc, le
   dessin flottait, sans bord ni assise, et rien ne separait la zone d'image de
   la zone de texte. Les trois dessins etant en outre presque identiques — la
   meme pergola, trois toits differents —, les cartes ne se distinguaient a
   l'oeil que par la lecture du titre.
   CE QU'ELLE FAIT :
     1. Une marge autour du dessin (`padding` sur l'image), qui l'ecarte des
        angles arrondis de la carte au lieu de le laisser les toucher.
     2. Un filet --line-soft ferme le cadre par le bas, ce qui separe
        franchement l'image du texte.
     3. Au survol, le dessin avance de 4 % ; le debord est rogne par
        `overflow:hidden` de la carte. Meme idiome que les tuiles de galerie,
        meme courbe. Neutralise sous `prefers-reduced-motion`.

   LE FOND TEINTE A ETE RETIRE le meme jour : « enleve le fond gris des blocs ».
   Le cadre prenait --bone (#eef1f3), ce qui posait le dessin blanc comme une
   planche sur un fond gris pale. Il revient a --paper. La marge est CONSERVEE
   — elle ne se voit plus, mais elle garde le dessin a distance du rognage a
   14 px des angles. Le filet du bas et le mouvement au survol restent : ce sont
   eux qui separent l'image du texte, maintenant que la teinte ne le fait plus.
   `border-radius:0` sur le cadre : le rognage de la carte s'en charge, et le
   4px d'origine dessinerait un angle en creux. */
.cp-carte-plan .cp-carte-img{
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
}
.cp-carte-plan .cp-carte-img img{
  padding:22px;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.cp-carte-plan:hover .cp-carte-img img,
.cp-carte-plan:focus-within .cp-carte-img img{transform:scale(1.04)}

/* Titre AU-DESSUS de l'image.
   15 sept. 2026, demande de Jeremy sur les quatre configurations de la page
   Toit Plat : « mets le titre des blocs (Pergola adossee au mur ..) au dessus
   des images ». Le titre etait sous le schema, avec le texte ; il passe en
   tete de carte, de sorte qu'on sache de quelle pose on parle AVANT de
   regarder le dessin.
   Meme dessin de titre que `.cp-carte-txt h3` — Jost 1,1 rem, poids 500 : la
   carte ne change pas d'allure, seul l'ordre change. `margin:0` parce que le
   `margin-bottom:10px` du titre normal separait le titre du paragraphe, ce
   qui n'a plus lieu d'etre ici.
   LE FILET DU HAUT n'est pose QUE derriere une entete : `.cp-carte-tete +
   .cp-carte-img`. Sans cette condition, les cartes de toit de la Toiture
   Modulable — dont l'image affleure le haut de la carte — auraient recu un
   trait juste sous leur bord arrondi.

   LA COULEUR, ajoutee le meme jour : « mets de la couleur dans les espaces des
   titres ». Le bandeau prend --accent-soft (#e3f1fb), le bleu pale du systeme
   — celui que les pastilles de pictogramme viennent de liberer en passant au
   blanc. La couleur est ainsi DEPENSEE A UN SEUL ENDROIT par carte.
   CONTRASTES MESURES, et ils ont decide du reste :
     - titre --ink sur #e3f1fb : environ 16:1, tres au-dessus du seuil.
     - l'etiquette des toits gardait --accent-deep (#0d77bd) : sur ce bleu pale
       elle ne tient que 4,15:1, SOUS le seuil AA de 4,5 pour un texte de
       0,7 rem. Elle passe donc a --ink-soft sur le bandeau : 7,9:1. Elle ne
       perd rien a laisser le bleu au fond — c'est lui qui porte la couleur
       desormais. Hors bandeau, l'etiquette garde son bleu. */
.cp-carte-tete{background:var(--accent-soft);padding:18px 22px 14px}
.cp-carte-tete h3{font-family:"Jost",sans-serif;font-size:1.1rem;font-weight:500;
  color:var(--ink);text-wrap:balance;margin:0}
.cp-carte-tete .cp-plan-etiq{color:var(--ink-soft)}
.cp-carte-tete + .cp-carte-img{border-top:1px solid var(--line-soft)}

/* L'etiquette de la planche : le benefice du toit, en capitales espacees.
   LE TEXTE N'EST PAS INVENTE — les trois libelles sont ceux que la page donne
   elle-meme dans « Une structure pour une foule de possibilites » : « un verre
   transparent fixe pour une LUMINOSITE MAXIMALE, un verre transparent
   retractable pour une OUVERTURE MODULABLE selon les saisons, ou des panneaux
   sandwich isolants pour un CONFORT THERMIQUE optimal ». Ils sont simplement
   ramenes au-dessus de chaque toit, la ou ils servent a choisir. */
.cp-plan-etiq{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:7px;
}

@media (prefers-reduced-motion:reduce){
  .cp-carte-plan .cp-carte-img img{transition:none}
  .cp-carte-plan:hover .cp-carte-img img,
  .cp-carte-plan:focus-within .cp-carte-img img{transform:none}
}

/* Carte de réassurance, centrée. */
.cp-recarte{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:6px;padding:32px 30px 34px;text-align:center;
  transition:transform .35s ease,box-shadow .35s ease}
.cp-recarte:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cp-recarte .cp-picto{margin:0 auto 20px}
.cp-recarte h3{font-family:"Jost",sans-serif;font-size:1.28rem;font-weight:500;
  color:var(--ink);margin-bottom:10px}
.cp-recarte p{color:var(--ink-soft);font-size:1rem;text-wrap:pretty}

.cp-showroom{margin-top:clamp(32px,4vw,48px);background:var(--paper);
  border:1px solid var(--line-soft);border-radius:6px;padding:26px 30px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cp-showroom p{color:var(--ink-soft);font-size:1rem;flex:1;min-width:280px;
  text-wrap:pretty;margin:0}

/* Étiquette pilule */
.cp-pill{display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--accent-soft);color:var(--accent-deep);
  font-family:"Jost",sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;padding:8px 16px;border-radius:100px}
.cp-pill-plein{background:var(--grad);color:#fff;font-size:.62rem;
  letter-spacing:.16em;padding:6px 14px}

/* Petit surtitre de bloc */
.cp-sur{font-family:"Jost",sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft);
  margin:0 0 16px}

/* Normes certifiées */
.cp-normes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cp-norme{display:flex;flex-direction:column;align-items:center;gap:14px}
.cp-norme .cp-picto{width:44px;height:44px;margin:0}
.cp-norme .cp-picto svg{width:22px;height:22px}
.cp-norme p{color:var(--ink-soft);font-size:.98rem;max-width:30ch;
  text-align:center;text-wrap:pretty}
.cp-norme b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}

/* ==================================================================
   Le produit en détail — accordéon
   ------------------------------------------------------------------
   <details> et non des <div> pilotés au JS : le contenu reste dans le
   document, lisible sans script et par un robot. Ils sont écrits OUVERTS
   dans le HTML ; c'est le script de la page qui les referme au
   chargement. Sans JS, la page se lit donc entière — c'est la règle qui
   interdit de masquer par défaut un bloc destiné à être lu.
   ================================================================== */
.cp-acc{border-bottom:1px solid var(--line);scroll-margin-top:120px}
.cp-acc > summary{width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:15px 4px;cursor:pointer;
  font-family:"Jost",sans-serif;font-size:clamp(1.1rem,1.5vw,1.35rem);
  font-weight:500;letter-spacing:-.01em;color:var(--ink);
  transition:color .2s ease;list-style:none}
.cp-acc > summary::-webkit-details-marker{display:none}
.cp-acc > summary::after{content:"";flex:none;width:11px;height:11px;
  margin-right:6px;border-right:2px solid var(--accent-deep);
  border-bottom:2px solid var(--accent-deep);transform:rotate(45deg);
  transform-origin:60% 60%;transition:transform .25s ease}
.cp-acc[open] > summary::after{transform:rotate(-135deg)}
.cp-acc > summary:hover{color:var(--accent-deep)}
.cp-acc-corps{padding:0 4px 30px;scroll-margin-top:120px}
.cp-acc-corps > :first-child{margin-top:0}

.cp-puces{list-style:none;margin:0;padding:0 4px 24px}
.cp-puces li{display:flex;gap:14px;padding:9px 0;color:var(--ink-soft);
  font-size:1.12rem;align-items:flex-start;text-wrap:pretty}
.cp-puces li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-top:11px}

/* Étiquettes de finitions de verre */
.cp-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;list-style:none;
  padding:0}
.cp-tags li{background:var(--paper);border:1.5px solid var(--line);
  border-radius:100px;padding:10px 20px;font-weight:600;font-size:.9rem;
  color:var(--ink)}
.cp-tags li.est-standard{border-color:var(--accent);color:var(--accent-deep)}
.cp-tags .cp-tags-mention{font-size:.72rem;letter-spacing:.1em;opacity:.75}
.cp-tags .cp-tags-detail{font-weight:400;color:var(--ink-soft)}

/* Nuancier RAL */
.cp-ral{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.cp-ral-titre{font-family:"Jost",sans-serif;font-size:1.02rem;font-weight:600;
  color:var(--ink);margin-bottom:20px}
/* Sous-titres a l'interieur des volets d'accordeon (SGP, 11 sept. 2026).
   Jeremy : « mets les sous-titres des accordeons plus en evidence, on ne les
   voit pas assez ». Ils etaient en graisse 300 et gris clair par un style en
   ligne. Graisse 600, encre pleine, un peu plus grands, et un filet de la
   couleur d'accent a gauche pour qu'on les repere d'un coup d'oeil — tout
   en restant sous l'intitule du volet (summary, 1.1-1.35rem). Classe
   dediee : les cinq autres pages gardent leurs cp-ral-titre inchanges. */
.cp-acc-sous{font-family:"Jost",sans-serif;font-size:clamp(1.12rem,1.4vw,1.28rem);
  font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--ink);
  border-left:3px solid var(--accent);padding-left:12px;margin:30px 0 14px}
/* Volet « Les options » : PAS de filet bleu (Jeremy, 11 sept. 2026 :
   « enleve le rectangle bleu dans les sous-titres des options »). Graisse,
   taille et couleur inchangees ; le retrait de 12 px, qui ne servait qu'a
   ecarter le texte du filet, part avec lui. « Types de Verre » (volet
   #verre) garde son filet.
   Etendu le meme jour au volet « Documentation & certifications »
   (#documents), pour le sous-titre « Les certifications » — Jeremy : « non
   enleve le rectangle bleu dans les certifications ». */
#options .cp-acc-sous,#documents .cp-acc-sous{border-left:none;padding-left:0}
/* Onglets (SGP, « Les options » > Fonction LED, 11 sept. 2026), repris de
   la page 175 (tabs-justify) a la demande de Jeremy. SANS SCRIPT, la barre
   reste cachee (attribut hidden) et les quatre panneaux s'affichent l'un
   sous l'autre : tout le texte reste lisible et indexe. Le script devoile
   la barre, pose .cp-onglets-actif et n'affiche qu'un panneau a la fois.
   ATTENTION a [hidden] : une regle d'auteur `display:grid` l'emporterait
   sur la feuille du navigateur et laisserait la barre visible sans script
   — d'ou le :not([hidden]). Les panneaux n'ont AUCUN display declare, pour
   que leur attribut hidden (pose par le script) agisse. */
/* RESTYLE le meme jour (Jeremy : « utilise le style actuel pour gerer les
   deux blocs que tu viens de creer pour les options, la on dirait l'ancien
   style »). La barre soulignee et le texte nu copiaient le dessin de la
   page 175. Ils reprennent maintenant les composants du gabarit :
   - onglets = PASTILLES, exactement le dessin des filtres de la galerie
     (.cp-filtre : Hanken Grotesk 600, rayon 100px, filet 1.5px --line,
     survol --accent-soft, actif plein --accent-deep texte blanc) ;
   - panneau = CARTE BLANCHE (filet --line-soft, rayon 6px, ombre des
     visuels .cp-visuel).
   HTML et script inchanges. */
.cp-onglets{margin-top:24px}
.cp-onglets-barre:not([hidden]){display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.cp-onglets-barre button{appearance:none;font-family:"Hanken Grotesk",sans-serif;
  font-size:.92rem;font-weight:600;line-height:1.3;padding:10px 20px;
  border-radius:100px;cursor:pointer;background:var(--paper);
  border:1.5px solid var(--line);color:var(--ink);text-align:center;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.cp-onglets-barre button:hover{background:var(--accent-soft);
  border-color:var(--accent);color:var(--accent-deep)}
.cp-onglets-barre button[aria-selected="true"]{background:var(--accent-deep);
  border-color:var(--accent-deep);color:#fff}
.cp-onglets-barre button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-onglets-panneau{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:6px;box-shadow:0 24px 60px -34px rgba(12,40,58,.45);
  padding:clamp(20px,3vw,32px)}
.cp-onglets:not(.cp-onglets-actif) .cp-onglets-panneau + .cp-onglets-panneau{margin-top:24px}
.cp-onglets-panneau h4{font-family:"Jost",sans-serif;font-size:clamp(1.15rem,1.5vw,1.3rem);
  font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.cp-onglets-panneau .cp-p{margin-top:0}
.cp-onglets-panneau img{display:block;width:100%;height:auto;border-radius:6px;
  background:var(--bone)}
/* Barre horizontale (LED) : dans la carte, texte a gauche, schema a droite.
   Quatre rangees 1fr / auto / auto / 1fr : titre et texte occupent celles du
   milieu, le schema les couvre toutes — le texte reste centre verticalement
   en bloc. :not([hidden]) OBLIGATOIRE : un display:grid ecraserait
   l'attribut hidden que le script pose sur les panneaux inactifs. */
.cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau:not([hidden]){display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:1fr auto auto 1fr;column-gap:clamp(20px,3vw,36px)}
.cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau h4{grid-column:1;grid-row:2}
.cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau .cp-p{grid-column:1;grid-row:3}
.cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau img{grid-column:2;grid-row:1 / -1;
  align-self:center}
@media (max-width:980px){
  .cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau:not([hidden]){display:block}
  .cp-onglets:not(.cp-onglets-lateral) .cp-onglets-panneau img{margin-top:18px}
}
/* Variante LATERALE (SGP, evacuation de l'eau, 11 sept. 2026) : liste des
   onglets en colonne a gauche, panneau a droite, comme la « side-navigation »
   de la page 175. La grille n'est posee QU'UNE FOIS le script actif
   (.cp-onglets-actif) : sans script, panneaux empiles comme ailleurs. La
   barre vient en premier (colonne 1) ; le seul panneau visible se place tout
   seul en colonne 2 — les autres sont en display:none par [hidden].
   Specificites (0,3,x) : elles passent devant les regles de la barre
   horizontale, y compris celle en 2 x 2 du mobile. */
/* Restyle du meme jour : la liste de gauche devient une colonne de PETITES
   CARTES cliquables (memes couleurs que les pastilles, rayon 6px au lieu de
   100px), l'active en plein --accent-deep. Le chevron suit la couleur du
   texte (currentColor) : il passe au blanc sur l'onglet actif. Dans le
   panneau, plus etroit ici, le visuel reste SOUS le texte. */
.cp-onglets-lateral.cp-onglets-actif{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,3vw,32px);
  align-items:start}
.cp-onglets-lateral .cp-onglets-barre:not([hidden]){flex-direction:column;
  flex-wrap:nowrap;gap:10px;margin-bottom:0}
.cp-onglets-lateral .cp-onglets-barre button{display:flex;align-items:center;
  justify-content:space-between;gap:12px;text-align:left;border-radius:6px;
  padding:14px 18px}
.cp-onglets-lateral .cp-onglets-barre button::after{content:"\203A";
  font-size:1.35rem;line-height:1;color:currentColor}
.cp-onglets-lateral .cp-onglets-panneau img{margin-top:18px}
@media (max-width:760px){
  .cp-onglets-lateral.cp-onglets-actif{grid-template-columns:1fr}
}
.cp-nuances{display:flex;gap:16px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.cp-nuance-p{width:78px;height:52px;border-radius:5px;border:1px solid var(--line);
  display:block}
.cp-nuance-n{font-size:.82rem;font-weight:600;color:var(--ink);margin-top:8px}
.cp-ral-fin{margin-top:24px;padding-top:20px;border-top:1px solid rgba(15,22,27,.1)}
.cp-ral-fin b{display:block;font-size:.98rem;font-weight:600;color:var(--ink);
  margin-bottom:6px}
.cp-ral-fin p{font-size:.98rem;color:var(--ink-soft)}
.cp-ral-note{font-size:.8rem;font-style:italic;color:var(--ink-soft);margin-top:10px}

/* Tableau technique */
.cp-specs{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
/* Le ratio est posé sur le CONTENEUR et l'image tient dedans en
   « contain » : les binaires vivent sur le FTP, on ne peut pas écrire
   width/height, mais la place est réservée avant le chargement — c'est
   ce qui compte pour le décalage de mise en page. */
.cp-specs-img{border-radius:6px;overflow:hidden;border:1px solid var(--line-soft);
  background:var(--bone);aspect-ratio:16/11}
.cp-specs-img img{width:100%;height:100%;object-fit:contain}
.cp-table-boite{overflow-x:auto}
.cp-table{width:100%;font-size:.96rem;border-collapse:collapse;min-width:420px}
.cp-table tr{border-bottom:1px solid var(--line)}
.cp-table tr:last-child{border-bottom:none}
.cp-table th[scope=row]{text-align:left;padding:14px 10px 14px 0;font-weight:600;
  color:var(--ink)}
.cp-table td{padding:14px 10px;color:var(--ink-soft)}
.cp-table td:last-child{padding-right:0}
/* En-tete gris d'un tableau — pose le 11 sept. 2026 pour les
   caracteristiques du garde-corps (SGP), a la demande de Jeremy : que l'on
   voie que « Caracteristiques » et « Description » sont des titres.
   CLASSE DEDIEE et non une regle sur `.cp-table thead` : SG_ONE et HT_AIR
   ont aussi un thead, leur rendu ne change pas. Gris plus soutenu que
   --bone : sur le fond --cream de la section, --bone ne se voyait presque
   pas. Les libelles du corps prennent le meme retrait a gauche que
   l'en-tete, pour que tout reste aligne. */
.cp-table-titres thead th{background:#e1e6e9;color:var(--ink);font-weight:700;
  text-align:left;padding:12px 10px}
.cp-table-titres thead th:first-child{padding-left:14px}
.cp-table-titres thead th:last-child{padding-right:14px}
.cp-table-titres tbody th[scope=row]{padding-left:14px}
/* Cartes des six verres du garde-corps (SGP) — reprises de la page 175 le
   11 sept. 2026 : sous le texte de la carte, deux atouts picto + libelle
   cote a cote separes par un filet, puis l'epaisseur disponible sous un
   trait. Le prefixe .cp-carte-txt est necessaire pour passer devant
   `.cp-carte-txt p`.
   Depuis le 14 sept. 2026, la page Points de fixation les porte AUSSI : ses
   quatre finitions de verre sont passees des onglets aux memes cartes, a la
   demande de Jeremy (« pour les verres fait pareil que pour les verres de la
   page garde corps en verre »). Ne plus les croire propres a une seule page
   avant de les modifier. */
.cp-verre-atouts{list-style:none;margin:16px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr}
.cp-verre-atouts li{display:flex;align-items:center;gap:8px;font-size:.84rem;
  line-height:1.3;color:var(--ink);min-width:0}
.cp-verre-atouts li + li{border-left:1px solid var(--line);padding-left:12px}
.cp-verre-atouts img{width:30px;height:30px;flex:none}
/* 7 oct. 2026 (Balustrade, Jeremy : « les 4 sur la même ligne ») : en grille de 4,
   la carte est trop étroite pour deux atouts côte à côte (« Transparence » passait
   sur « Sécurité » vers 1200 px) : ils s'empilent, sans filet vertical. */
.cp-cartes-4 .cp-verre-atouts{grid-template-columns:1fr;gap:10px}
.cp-cartes-4 .cp-verre-atouts li + li{border-left:0;padding-left:0}
.cp-carte-txt .cp-verre-ep{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-soft);text-align:center;font-size:.8rem;
  color:var(--ink-soft)}
.cp-carte-txt .cp-verre-ep b{display:block;letter-spacing:.06em;font-weight:600;
  color:var(--ink)}
/* Texte + petite vignette a cote (SGP, volet « Les verres », 11 sept. 2026) :
   texte 4/5, image 1/5, a la demande de Jeremy. Classe dediee, portee par
   cette seule vue. minmax(0,…) pour que les proportions tiennent quelle que
   soit la longueur des mots. Sous 640 px, la vignette passe SOUS le texte,
   plafonnee a 280 px : a 1/5 d'un ecran de telephone, elle ne ferait plus
   que 70 px de large. */
.cp-texte-vignette{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;margin-top:20px}
.cp-texte-vignette > div > :first-child{margin-top:0}
.cp-texte-vignette figure{margin:0;border-radius:6px;overflow:hidden}
.cp-texte-vignette figure img{display:block;width:100%;height:auto}
@media (max-width:640px){
  .cp-texte-vignette{grid-template-columns:1fr}
  .cp-texte-vignette figure{max-width:280px}
}
/* Animation des couleurs du garde-corps (SGP, volet « Couleur du profile »,
   11 sept. 2026) : carte blanche arrondie, calee du HAUT au BAS du texte
   voisin, a la demande de Jeremy. Sur grand ecran, le GIF est pose en
   absolu dans la carte : il ne compte pas dans la hauteur de la rangee,
   c'est le TEXTE qui la fixe, et la carte s'etire dessus (align-self).
   `contain` garde le GIF entier ; son fond blanc se fond dans celui de la
   carte. min-height : garde-fou si le texte devenait tres court. Sous
   980 px — meme seuil que .cp-duo, qui passe alors en une colonne — plus de
   texte a cote : l'image revient dans le flux, a son rapport. */
/* Marge interieure reduite le meme jour (Jeremy : « diminue le padding dans
   le bloc de l'image ») : clamp(14px,3vw,28px) -> clamp(6px,1.2vw,12px). */
.cp-couleur-anim{--p:clamp(6px,1.2vw,12px);position:relative;margin:0;
  width:90%;justify-self:center;align-self:stretch;min-height:280px;
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  padding:var(--p)}
.cp-couleur-anim img{position:absolute;top:var(--p);left:var(--p);
  width:calc(100% - 2 * var(--p));height:calc(100% - 2 * var(--p));
  object-fit:contain}
/* Puis, meme jour : la carte doit s'arreter au niveau de « Voici les
   couleurs les plus choisies… ». La colonne de texte est coupee en DEUX
   dans la vue : rangee 1 = les paragraphes jusqu'a cette phrase, face a la
   carte ; rangee 2 = pastilles + bouton, a gauche. Sur mobile, colonne
   unique : l'ordre du HTML mettrait le GIF ENTRE la phrase et les
   pastilles. `order:1` le renvoie apres les pastilles, et margin-top le
   decolle du bouton (la vue met row-gap:0 sur ce bloc). */
@media (max-width:980px){
  .cp-couleur-anim{align-self:auto;min-height:0;order:1;margin-top:26px}
  .cp-couleur-anim img{position:static;display:block;width:100%;height:auto}
}

/* Documents */
.cp-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;padding:4px 4px 30px}
.cp-doc{display:flex;flex-direction:column;border-radius:6px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:0 24px 60px -34px rgba(12,40,58,.45);
  transition:transform .35s ease,box-shadow .35s ease}
.cp-doc:hover{transform:translateY(-5px);box-shadow:0 28px 66px -30px rgba(12,40,58,.55)}
.cp-doc-vue{position:relative;aspect-ratio:3/4;
  background:linear-gradient(140deg,#dbe9f4 0%,#eef1f3 60%,#e3f1fb 100%)}
.cp-doc-vue::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0,
    transparent calc(11.111% - 1px),rgba(15,22,27,.07) calc(11.111% - 1px),
    rgba(15,22,27,.07) 11.111%)}
.cp-doc-vue span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Jost",sans-serif;font-size:.58rem;letter-spacing:.28em;color:#8aa3b2}
/* Carte portant la VRAIE couverture du document : ni dégradé ni rayures,
   et la couverture remplit le cadre bord à bord (« cover »), sans bordure
   blanche — demandé par Jeremy le 8 sept. 2026.
   Le recadrage a été simulé avant d'être appliqué : le cadre est en 3/4,
   la couverture en 0,93, la coupe retire 78 px de chaque côté sur 800 —
   soit la marge blanche de la maquette. Le bandeau « COULISSANT », les
   deux titres, le logo et l'accroche du bas survivent tous.
   Le cadre garde son aspect-ratio 3/4 : la place est réservée avant le
   chargement, et les quatre cartes gardent la même hauteur. */
.cp-doc-vue-img{background:var(--paper)}
.cp-doc-vue-img::before{display:none}
.cp-doc-vue-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.cp-doc-txt{padding:18px 20px 20px}
.cp-doc-t{font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.35;
  text-wrap:pretty}
.cp-doc-m{color:var(--accent-deep);font-size:.86rem;font-weight:600;margin-top:8px}

/* Tutos vidéo */
.cp-tutos-tete{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.cp-tutos-tete span{font-family:"Jost",sans-serif;font-weight:600;font-size:1.1rem;
  letter-spacing:-.01em;color:#0f0f0f}
.cp-rail-tutos{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 12px;
  scroll-snap-type:x mandatory;list-style:none;margin:0}
.cp-tuto{flex:none;width:200px;scroll-snap-align:start}
.cp-tuto a{position:relative;display:block;border-radius:6px;overflow:hidden;
  background:var(--dark);aspect-ratio:9/16;
  transition:transform .35s ease,box-shadow .35s ease}
.cp-tuto a:hover{transform:translateY(-4px);
  box-shadow:0 24px 60px -30px rgba(12,40,58,.55)}
.cp-tuto img{width:100%;height:100%;object-fit:cover}
.cp-tuto-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.cp-tuto-cap{font-size:.9rem;font-weight:500;color:var(--ink);margin-top:12px;
  text-wrap:pretty}

/* FAQ imbriquée */
.cp-faq{border-bottom:1px solid var(--line)}
.cp-faq > summary{width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:20px 4px;cursor:pointer;
  font-family:"Jost",sans-serif;font-size:clamp(1.02rem,1.3vw,1.18rem);
  font-weight:500;letter-spacing:-.01em;color:var(--ink);list-style:none;
  transition:color .2s ease}
.cp-faq > summary::-webkit-details-marker{display:none}
.cp-faq > summary::after{content:"";flex:none;width:10px;height:10px;
  margin-right:6px;border-right:2px solid var(--accent-deep);
  border-bottom:2px solid var(--accent-deep);transform:rotate(45deg);
  transform-origin:60% 60%;transition:transform .25s ease}
.cp-faq[open] > summary::after{transform:rotate(-135deg)}
.cp-faq > summary:hover{color:var(--accent-deep)}
.cp-faq p{color:var(--ink-soft);font-size:1.04rem;padding:0 4px 24px;
  text-wrap:pretty}

/* ==================================================================
   Configurateur
   ================================================================== */
.cp-cfg{display:grid;grid-template-columns:1.08fr 1fr;gap:34px;margin-top:54px;
  align-items:stretch}
.cp-cfg-vue{display:flex;flex-direction:column;min-height:100%}
.cp-cfg-rendu{position:relative;flex:1;min-height:420px;border-radius:6px;
  overflow:hidden;background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow)}
.cp-cfg-rendu img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:24px}
.cp-cfg-tag{position:absolute;left:14px;bottom:14px;background:rgba(8,16,20,.72);
  backdrop-filter:blur(6px);color:#fff;font-family:"Jost",sans-serif;
  font-size:.78rem;letter-spacing:.07em;padding:7px 15px;border-radius:100px}
.cp-cfg-panneau{background:var(--cream);border:1px solid var(--line-soft);
  border-radius:8px;box-shadow:0 30px 70px -45px rgba(12,40,58,.45);overflow:hidden;
  display:flex;flex-direction:column}
.cp-cfg-onglets{display:flex;border-bottom:1px solid var(--line-soft);
  background:var(--paper)}
.cp-cfg-onglet{flex:1;min-width:0;background:none;border:none;cursor:pointer;
  font-family:"Jost",sans-serif;font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:500;padding:13px 4px;display:flex;
  align-items:center;justify-content:center;gap:7px;color:var(--ink-soft);
  border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s}
.cp-cfg-onglet span:first-child{width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;
  flex:none;box-sizing:border-box;border:1.5px solid var(--line);
  color:var(--ink-soft);transition:all .25s}
.cp-cfg-onglet[aria-selected=true]{color:var(--accent-deep);
  border-bottom-color:var(--accent)}
.cp-cfg-onglet[aria-selected=true] span:first-child{background:var(--accent);
  border-color:var(--accent);color:#fff}
.cp-cfg-onglet.est-fait span:first-child{background:var(--accent-soft);
  border-color:var(--accent);color:var(--accent-deep)}
.cp-cfg-schema{background:var(--paper);border-bottom:1px solid var(--line-soft);
  padding:14px 16px 8px}
.cp-cfg-schema svg{width:100%;height:auto;display:block}
.cp-cfg-corps{padding:22px 26px;min-height:280px;flex:1}
.cp-cfg-pied{display:flex;gap:12px;justify-content:space-between;
  padding:16px 26px 22px;border-top:1px solid var(--line-soft)}
.cp-champ{font-family:"Jost",sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:20px 0 10px;
  display:block}
.cp-cfg-corps > div > .cp-champ:first-child{margin-top:0}
.cp-curseur{display:flex;gap:16px;align-items:center}
.cp-curseur input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}
.cp-curseur-val{display:flex;align-items:center;gap:7px;font-weight:600;
  font-size:.9rem;color:var(--ink-soft)}
.cp-curseur-val input{width:82px;padding:9px 8px;border:1.5px solid var(--line);
  border-radius:4px;font-family:inherit;font-size:.95rem;font-weight:600;
  text-align:center;background:var(--paper);color:var(--ink)}
.cp-chips{display:flex;gap:10px;flex-wrap:wrap}
.cp-chip{background:var(--paper);border:1.5px solid var(--line);color:var(--ink);
  border-radius:100px;padding:10px 20px;font-weight:600;font-size:.9rem;
  cursor:pointer;font-family:inherit;
  transition:border-color .25s,background .25s,color .25s}
.cp-chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep)}
.cp-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-choix button{text-align:left;background:var(--paper);
  border:1.5px solid var(--line);border-radius:6px;padding:14px 16px;
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:4px;
  transition:border-color .25s,background .25s,box-shadow .25s}
.cp-choix button[aria-pressed=true]{background:var(--accent-soft);
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,163,236,.12)}
.cp-choix b{font-size:.96rem;color:var(--ink)}
.cp-choix span{font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.cp-swatches{display:flex;gap:11px;flex-wrap:wrap}
.cp-swatch{width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;
  box-sizing:border-box;border:2px solid var(--line);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.cp-swatch[aria-pressed=true]{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.cp-swatch-libre{border:2px dashed rgba(15,22,27,.3)}
.cp-aide{font-size:.85rem;color:var(--ink-soft);margin-top:14px}
.cp-alerte{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;
  line-height:1.5;color:#7a4d00;background:#fff6e4;border:1px solid #f0c36d;
  border-radius:5px;padding:11px 14px;margin-top:12px}
.cp-alerte svg{flex:none;margin-top:2px;width:17px;height:17px;fill:none;
  stroke:#c07a00;stroke-width:2}
.cp-recap{list-style:none;border:1px solid var(--line-soft);border-radius:6px;
  background:var(--paper);padding:6px 18px;margin:0 0 18px}
.cp-recap li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:.94rem}
.cp-recap li:last-child{border-bottom:none}
.cp-recap span{color:var(--ink-soft)}
.cp-recap b{color:var(--ink);font-weight:600;text-align:right}

/* ==================================================================
   Réalisations : mosaïque + visionneuse
   ================================================================== */
.cp-filtres{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.cp-filtre{font-family:"Hanken Grotesk",sans-serif;font-size:.92rem;
  font-weight:600;padding:10px 20px;border-radius:100px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);color:var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.cp-filtre:hover{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep)}
.cp-filtre[aria-pressed=true]{background:var(--accent-deep);
  border-color:var(--accent-deep);color:#fff}
/* Grille reprise telle quelle de la maquette. Les <figure> doivent en être
   les enfants DIRECTS : c'est sur elles que le script pose les spans. */
.cp-mosaique{display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:200px;grid-auto-flow:row dense;gap:18px;margin-top:28px}
.cp-tuile{position:relative;margin:0;border-radius:6px;overflow:hidden;
  background:var(--bone);box-shadow:0 24px 60px -34px rgba(12,40,58,.45);
  transition:box-shadow .35s ease}
.cp-tuile:hover{box-shadow:0 28px 66px -30px rgba(12,40,58,.55)}
.cp-tuile > a{display:block;width:100%;height:100%;cursor:zoom-in}
.cp-tuile img{width:100%;height:100%;display:block;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cp-tuile:hover img,.cp-tuile:focus-within img{transform:scale(1.1)}
.cp-tuile figcaption{position:absolute;inset:0;z-index:2;display:flex;
  align-items:flex-end;padding:26px 20px 18px;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,16,20,.8),rgba(8,16,20,.35) 18%,
    transparent 34%);color:#fff;opacity:0;transition:opacity .3s ease}
.cp-tuile:hover figcaption,.cp-tuile:focus-within figcaption{opacity:1}
.cp-tuile-t{font-family:"Jost",sans-serif;font-size:1.5rem;font-weight:500;
  line-height:1.15;letter-spacing:-.01em;display:block}
.cp-tuile-s{font-size:.95rem;font-weight:500;color:rgba(255,255,255,.82);
  display:block;margin-top:4px}
.cp-plus{display:flex;justify-content:center;margin-top:34px}

/* Le `display` reste conditionné à [open] : une règle d'auteur l'emporte sur
   le `dialog:not([open]){display:none}` du navigateur, et un `display:flex`
   inconditionnel laisserait ce voile noir posé sur toute la page. */
.cp-visio{position:fixed;inset:0;z-index:90;background:rgba(6,12,16,.92);
  align-items:center;justify-content:center;padding:12px;border:none;
  width:100%;height:100%;max-width:none;max-height:none}
.cp-visio:not([open]){display:none}
.cp-visio[open]{display:flex}
.cp-visio::backdrop{background:rgba(6,12,16,.92)}
.cp-visio figure{margin:0;max-width:none;width:100%;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.cp-visio img{width:min(96vw,calc((96vh - 60px) * 1.5));max-width:96vw;
  max-height:calc(96vh - 60px);height:auto;border-radius:6px;display:block;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.cp-visio figcaption{color:#fff;font-family:"Jost",sans-serif;font-size:.98rem;
  letter-spacing:.02em;text-align:center}
.cp-visio-n{color:rgba(255,255,255,.5);margin-left:12px}
/* 22 sept. 2026, Jeremy : « des fois elles ont un film bleu par dessus ».
   C'etait la SELECTION du navigateur : deux clics rapides sur une fleche
   (ou un appui long sur mobile) selectionnaient l'image et la legende, que
   le navigateur recouvre de bleu. Reproduit en local (double-clic sur la
   fleche suivante => image selectionnee). Rien a selectionner ni a glisser
   dans la visionneuse ; le flash bleu au toucher est retire aussi. */
.cp-visio{-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.cp-visio img{-webkit-user-drag:none}
.cp-visio button{position:absolute;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer}
.cp-visio button:hover{background:rgba(255,255,255,.22)}
.cp-visio-x{top:18px;right:20px;width:46px;height:46px}
.cp-visio-p{left:14px;top:50%;transform:translateY(-50%);width:52px;height:52px}
.cp-visio-s{right:14px;top:50%;transform:translateY(-50%);width:52px;height:52px}
.cp-visio svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}

/* ==================================================================
   Configurations : fiche + onglets d'illustration
   ================================================================== */
.cp-configs{display:flex;flex-direction:column;gap:24px;margin-top:52px}
.cp-config{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:8px;overflow:hidden;
  box-shadow:0 30px 70px -50px rgba(12,40,58,.45);
  display:grid;grid-template-columns:1fr 1fr}
.cp-config-txt{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;
  justify-content:center}
.cp-config-txt h3{font-family:"Jost",sans-serif;
  font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.01em;
  margin-bottom:16px;text-wrap:balance;color:var(--ink)}
.cp-config-txt p{color:var(--ink-soft);font-size:1.04rem;margin-bottom:12px;
  text-wrap:pretty}
.cp-config-onglets{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cp-config-onglet{background:var(--paper);border:1.5px solid var(--line);
  color:var(--ink);border-radius:100px;padding:9px 18px;font-weight:600;
  font-size:.86rem;font-family:inherit;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s}
.cp-config-onglet[aria-selected=true]{background:var(--accent-soft);
  border-color:var(--accent);color:var(--accent-deep)}
.cp-config-img{position:relative;min-height:340px;background:var(--bone);
  border-left:1px solid var(--line-soft)}
.cp-config-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:var(--paper);padding:18px}
.cp-config-img img[hidden]{display:none}

/* ==================================================================
   Rails horizontaux : la gamme, les articles
   ================================================================== */
.cp-rail-tete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin:0 0 44px}
/* Colonne de texte de l'en-tête des rails. La maquette est à 70ch, mais
   elle n'y mettait qu'un chapô d'une ligne ; le bloc « gamme » porte
   désormais deux paragraphes et 70ch le découpait en trop de lignes.
   Élargi à 92ch le 8 sept. 2026 à la demande de Jeremy — c'est le haut
   de la plage encore confortable à lire. Les flèches restent à droite,
   en `flex:none` : elles ne sont pas repoussées. */
.cp-rail-tete > div:first-child{max-width:92ch}
.cp-rail-fleches{display:flex;gap:10px;flex:none}
.cp-fleche{width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(15,22,27,.2);background:var(--paper);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease}
.cp-fleche:hover{background:var(--cream)}
.cp-fleche svg{width:18px;height:18px;fill:none;stroke:var(--ink);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cp-rail{display:flex;gap:34px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:8px;list-style:none;margin:0}
.cp-rail > li{flex:none;width:clamp(300px,32vw,400px);scroll-snap-align:start}
.cp-rail a{display:flex;flex-direction:column;color:inherit;height:100%}
.cp-rail-img{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(140deg,#dbe9f4 0%,#eef1f3 60%,#e3f1fb 100%)}
.cp-rail-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .8s ease}
.cp-rail a:hover .cp-rail-img img{transform:scale(1.04)}
.cp-rail h3{font-family:"Jost",sans-serif;font-size:1.32rem;font-weight:500;
  line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:22px 0 10px;
  text-wrap:pretty}
.cp-rail p{color:var(--ink-soft);font-size:.98rem;text-wrap:pretty}
.cp-rond{margin-top:20px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(15,22,27,.2);display:flex;align-items:center;
  justify-content:center;flex:none;
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.cp-rail a:hover .cp-rond{background:var(--accent-soft);border-color:var(--accent);
  transform:translateX(4px)}
.cp-rond svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Masquer la barre de défilement des rails, sans supprimer le défilement. */
[data-noscroll]{scrollbar-width:none;-ms-overflow-style:none}
[data-noscroll]::-webkit-scrollbar{display:none;width:0;height:0}

/* ==================================================================
   Étude gratuite
   ================================================================== */
/* Fond sombre, mais la section ne porte pas « cp-sombre » : elle contient
   un formulaire sur fond blanc, dont les champs doivent garder l'encre du
   corps de texte. Les surcharges sont donc listées ici, une par une. */
.cp-devis{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.cp-devis > .wrap .cp-h2,.cp-devis .cp-devis-in > div:first-child h2{color:#fff}
.cp-devis .cp-h2 em{color:#86d3f6}
.cp-devis .eyebrow{color:#7fcdee}
.cp-devis .eyebrow::before{background:#7fcdee}
.cp-devis .cp-devis-in > div:first-child .cp-lede{color:rgba(255,255,255,.82)}
.cp-devis-in{position:relative;display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(32px,5vw,64px);align-items:start}
.cp-devis .mullions{opacity:.3}
.cp-devis-args{list-style:none;margin:26px 0 0;padding:0}
.cp-devis-args li{display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12);align-items:flex-start;
  font-weight:500}
.cp-devis-args li:last-child{border-bottom:none}
.cp-devis-args svg{flex:none;margin-top:2px;width:21px;height:21px;fill:none;
  stroke:#86d3f6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-devis-tel{display:inline-flex;align-items:center;gap:14px;margin-top:28px;
  color:#fff}
.cp-devis-tel span:first-child{flex:none;width:44px;height:44px;border-radius:50%;
  background:rgba(23,163,236,.18);border:1px solid rgba(134,211,246,.4);
  display:flex;align-items:center;justify-content:center}
.cp-devis-tel svg{width:20px;height:20px;fill:none;stroke:#86d3f6;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cp-devis-tel b{color:#fff}

.cp-form{background:var(--paper);color:var(--ink);border-radius:8px;
  padding:clamp(24px,3vw,36px);box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.cp-form h3{font-family:"Jost",sans-serif;font-weight:500;font-size:1.5rem;
  letter-spacing:-.01em;color:var(--ink)}
.cp-form-sous{color:var(--ink-soft);font-size:.9rem;margin-top:6px}
.cp-form-req{color:var(--accent-deep)}
.cp-form-champs{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.cp-form-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cp-form label{display:block;font-size:.82rem;font-weight:600;
  color:var(--ink-soft);margin-bottom:7px}
.cp-form input[type=text],.cp-form input[type=email],.cp-form input[type=tel],
.cp-form select,.cp-form textarea{width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:6px;font-family:inherit;
  font-size:.95rem;background:var(--paper);color:var(--ink)}
.cp-form textarea{resize:vertical}
.cp-form input:focus-visible,.cp-form select:focus-visible,
.cp-form textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.cp-form-radios{display:flex;gap:10px;flex-wrap:wrap}
.cp-form-radio{display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-radius:100px;padding:10px 18px;
  font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink);
  margin-bottom:0}
.cp-form-radio input{accent-color:var(--accent)}
.cp-form-consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;
  color:var(--ink-soft);text-wrap:pretty;font-weight:400;margin-bottom:0}
.cp-form-consent input{margin-top:3px;accent-color:var(--accent)}
/* 5 oct. 2026 (Jeremy : « mets un espace entre la case à cocher et le j'accepte d'être recontacté ») :
   « .cp-form label{display:block} », plus spécifique, annulait le flex ci-dessus -> case collée au texte. */
.cp-form label.cp-form-consent{display:flex;gap:10px;align-items:flex-start}
.cp-form label.cp-form-consent input{flex:none;margin:3px 0 0}
.cp-form-mentions{font-size:.82rem;color:var(--ink-soft);text-align:center}
.cp-form-erreurs{background:#fff6e4;border:1px solid #f0c36d;border-radius:6px;
  padding:12px 16px;color:#7a4d00;font-size:.86rem;list-style:none;margin:0}
.cp-form-erreurs li{padding:2px 0}
.cp-form-ok{text-align:center;padding:26px 6px}
.cp-form-ok .cp-picto{width:56px;height:56px;border-radius:50%;margin:0 auto 18px}
.cp-form-ok .cp-picto svg{width:28px;height:28px}
.cp-form-ok h3{margin-bottom:10px}
.cp-form-ok p{color:var(--ink-soft);text-wrap:pretty}
/* Champ-piège anti-robot : hors flux et hors lecture d'écran. */
.cp-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Remontée du mockup téléphone dans la section motorisation du Premium,
   demandée par Jeremy le 8 sept. 2026. Neutralisée sous 980 px : là, le
   duo passe en une seule colonne et une marge négative ferait chevaucher
   l'image sur le texte au lieu de la remonter à côté. */
.cp-remonte-50{margin-top:-50px}
@media (max-width:980px){ .cp-remonte-50{margin-top:0} }

/* Section motorisation du Premium : le mockup téléphone posé PAR-DESSUS la
   photo télécommande, plus petit — demandé par Jeremy le 2 oct. 2026.
   Il annule le `inset:0` / 100 % hérité de `.cp-duo-media img` et se cale
   en bas à gauche, loin de la main qui tient la télécommande. Le PNG a
   ~12 % de marge transparente en bas : `bottom` négatif le rapproche du
   bord sans le couper. En % de la figure, donc identique sur mobile. */
.cp-duo-media img.cp-moto-tel{inset:auto;left:3%;bottom:-5%;width:40%;
  height:auto;object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}

/* ==================================================================
   Adaptations
   ================================================================== */
@media (max-width:1100px){
  .cp-mosaique{grid-template-columns:repeat(4,1fr);grid-auto-rows:180px}
}
@media (max-width:980px){
  .cp-duo,.cp-bande,.cp-specs,.cp-ral,.cp-cfg,.cp-config{grid-template-columns:1fr}
  /* Bande dont le texte vient en premier dans le HTML : en une colonne, la
     photo passerait dessous. On la remonte. Ne s'applique qu'aux bandes
     portant la classe — celles qui ont déjà le visuel en premier gardent
     leur ordre naturel. */
  .cp-bande-media-dabord .cp-bande-media{order:-1}
  /* Même règle pour un duo texte + visuel (section de présentation).
     Purement additive : aucune page existante ne porte la classe, toutes
     gardent donc exactement leur rendu. Posée le 9 sept. 2026 pour HT_AIR. */
  .cp-duo-media-dabord .cp-duo-media{order:-1}
  .cp-cartes,.cp-normes{grid-template-columns:repeat(2,1fr)}
  .cp-bande-media{min-height:320px}
  .cp-config-img{min-height:280px;border-left:none;
    border-top:1px solid var(--line-soft)}
  .cp-devis-in{grid-template-columns:1fr}
  .cp-hero{min-height:auto}
  /* Entre 560 et 980 px le logo mesure encore 80 px : le header garde sa
     hauteur pleine. Ne pas descendre sous 150 px ici. */
  .cp-hero-in{padding:clamp(150px,17vw,170px) 0 60px}
}
@media (max-width:560px){
  /* Sous 560 px, base.css ramene le logo a 60 px et resserre le bandeau. */
  .cp-hero-in{padding:128px 0 52px}
}
/* Grand visuel — ligne de faits empilée sur téléphone et petite tablette.
   Demandé par Jeremy le 10 sept. 2026, d'abord pour Le Rideau de Verre
   (SG_ONE) puis étendu aux CINQ pages produit : en `flex-wrap`, les faits
   se répartissaient sur deux ou trois lignes irrégulières et, sur SG_ONE,
   « ~ 10 °C avec l'extérieur » restait collé au fait précédent.
   En colonne, un fait par ligne.

   La règle porte directement sur `.cp-hero-faits`, donc sur les cinq vues
   qui partagent cette feuille (SG_ONE, SG_RUN, SG_RUN_PREMIUM, SGSUB,
   HT_AIR) — c'est le comportement voulu. Au-dessus de 760 px, rien ne
   change : le rendu large est intact. */
@media (max-width:760px){
  .cp-hero-faits{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Volet « Vidéo de présentation » — vignette large, en 16/9.
   Demandé par Jeremy le 10 sept. 2026 pour Le Rideau de Verre (SG_ONE),
   en deux temps : d'abord « en pleine largeur » sur téléphone, puis
   « mets la vidéo en plus large » — la règle ne vit donc PLUS dans une
   media query, elle vaut à toutes les largeurs.

   Avant : 200 px de large dans un rail à défilement. Maintenant : la
   largeur du volet, plafonnée à 780 px pour ne pas étaler une seule
   vignette sur les 1200 px de la fiche produit. Sous 780 px — donc sur
   tout téléphone — le plafond ne mord pas et la vignette prend
   réellement toute la largeur, comme demandé au premier passage.

   Pourquoi un modificateur et pas une règle générale. Le rail
   `.cp-rail-tutos` est partagé avec « Tutos & Astuces » du Coulissant
   Panoramique, dont les six vidéos sont des SHORTS (lien `/shorts/`,
   cadre 9/16 — c'est leur vrai format). Celle du Rideau de Verre est une
   vidéo classique (lien `/watch?v=`, donc 16/9) et elle est SEULE : un
   rail à défilement horizontal pour une unique vignette de 200 px n'a
   aucun sens sur un écran de téléphone, et le cadre vertical y recadrait
   sévèrement une image horizontale.

   Le rail redevient donc une colonne, la vignette prend la largeur du
   volet et retrouve son 16/9. `hqdefault.jpg` est un 480 × 360 barré de
   noir en haut et en bas : `object-fit:cover` sur un cadre 16/9 mange
   précisément ces bandes. Sur les autres pages, rien ne change.

   Le bloc est placé APRÈS la règle d'origine (`.cp-rail-tutos`, plus
   haut) : les deux ont la même spécificité, c'est donc l'ordre qui
   tranche. Ne pas le remonter. */
.cp-rail-tutos-pleine{display:grid;grid-template-columns:1fr;gap:22px;
  overflow-x:visible;scroll-snap-type:none;padding:0;max-width:780px}
.cp-rail-tutos-pleine .cp-tuto{width:auto;scroll-snap-align:none}
.cp-rail-tutos-pleine .cp-tuto a{aspect-ratio:16/9}
/* 29 sept. 2026 (Jeremy, page rideau de verre) : « mets la en un peu plus
   petit ». Variante réservée à SG_ONE : `.cp-rail-tutos-pleine` sert aussi
   à Marquise et SUB, qu'on ne touche pas. 780 -> 600 px. Sous 600 px de
   large, rien ne change : la vignette prend toujours toute la largeur. */
.cp-rail-tutos-pleine.cp-rail-tutos-reduite{max-width:600px}
/* 29 sept. 2026 : rail de vidéos PAYSAGE (16/9) pour le volet « Vidéos »
   quand la playlist du produit ne contient pas de shorts (Paravent WIN).
   Même rail à défilement que les shorts, vignettes plus larges. */
.cp-rail-tutos-169 .cp-tuto{width:340px;max-width:82vw}
.cp-rail-tutos-169 .cp-tuto a{aspect-ratio:16/9}

@media (max-width:760px){
  .cp-mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .cp-tuile{grid-column:span 1 !important;grid-row:span 1 !important}
  .cp-tuile-t{font-size:1.1rem}
  .cp-tuile figcaption{opacity:1;padding:16px 14px 12px}
  .cp-cartes,.cp-normes,.cp-choix,.cp-form-duo{grid-template-columns:1fr}
  /* En-tête des rails (gamme, articles) : sur petit écran le texte et les
     flèches restaient côte à côte, et les flèches écrasaient la colonne de
     texte. On empile — texte sur TOUTE la largeur, flèches dessous à
     droite. Demandé par Jeremy le 8 sept. 2026. */
  .cp-rail-tete{flex-direction:column;align-items:stretch;gap:18px}
  .cp-rail-tete > div:first-child{max-width:none}
  .cp-rail-fleches{align-self:flex-end}
  .cp-rail > li{width:min(82vw,340px)}
  .cp-cfg-onglet{font-size:.6rem;padding:11px 2px;gap:5px}
  .cp-cfg-onglet span:last-child{display:none}
  .cp-cfg-corps{padding:18px}
  .cp-cfg-pied{padding:14px 18px 18px}
  .cp-showroom{padding:22px}
  .cp-visio-p{left:6px}
  .cp-visio-s{right:6px}
}
/* Réalisations : UNE tuile par ligne sur téléphone. Demandé par Jeremy le
   8 sept. 2026.

   Ce bloc est placé APRÈS celui des 760 px à dessein : les deux ciblent
   `.cp-mosaique` avec la même spécificité, c'est donc l'ordre qui tranche.
   Écrit plus haut, il aurait été annulé par la règle à 2 colonnes.

   `grid-auto-rows:auto` + `aspect-ratio` : sans ça, une tuile pleine
   largeur garderait la hauteur de ligne de 160 px et deviendrait une
   bande écrasée. Les `span` posés en style en ligne par le script sont
   déjà neutralisés par le bloc des 760 px. */
@media (max-width:560px){
  .cp-mosaique{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .cp-mosaique > .cp-tuile{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .cp-carte,.cp-atout,.cp-recarte,.cp-doc,.cp-tuile img,.cp-rail-img img,
  .cp-rond,.cp-tuto a{transition:none}
  .cp-carte:hover,.cp-atout:hover,.cp-recarte:hover,.cp-doc:hover,
  .cp-tuto a:hover{transform:none}
  .cp-tuile:hover img,.cp-rail a:hover .cp-rail-img img{transform:none}
}

/* ------------------------------------------------------------------
   Carte-BANDE sur téléphone — Pergola Déco, nuancier des toiles Velum
   ------------------------------------------------------------------
   Demandé par Jeremy le 16 sept. 2026 : « en version mobile mets les
   toiles de la velum en grand sur toute la largeur ».

   LE PROBLÈME. Ce nuancier fait 1300 x 242 et porte DIX références
   couleur écrites dans l'image. Sur un téléphone de 390 px, la colonne
   de contenu n'en fait que 334 (24 px de marge de `.wrap` de chaque
   côté, plus 4 de `.cp-acc-corps`) : l'image y était réduite à 26 %,
   ses libellés illisibles.

   DEUX GESTES, parce que « sur toute la largeur » seul n'aurait presque
   rien changé — 334 -> 390 px, +17 %, et toujours 30 % de la taille
   native :

   1. BORD À BORD. `margin-inline:calc(50% - 50vw)` + `width:100vw` fait
      sortir la carte des marges de son conteneur, quelle que soit leur
      valeur — pas de 24 px codé en dur à maintenir. Filets latéraux et
      angles arrondis retirés : au ras de l'écran ils dessineraient des
      coins coupés.
   2. EN GRAND, À FAIRE DÉFILER. L'image reprend sa TAILLE NATIVE et le
      cadre défile horizontalement. C'est l'idiome déjà en place pour les
      tableaux de la page (`.cp-table-boite{overflow-x:auto}` avec
      `min-width` sur la table).

      TAILLE NATIVE, ET NON UN CHIFFRE FIXE. Le 16 sept. 2026 cette règle
      a d'abord porté `min-width:860px`, calé sur le seul nuancier Velum
      (1300 px de large). Étendue le même jour aux cinq planches de la
      page — Jeremy : « mets toutes les images dans les blocs plus grosses
      que l'on voit le texte » —, un chiffre fixe devenait faux : trois de
      ces planches ne font que 453 à 510 px de large, 860 les aurait
      agrandies de 70 à 90 % et rendu leur texte FLOU, exactement le
      contraire de la demande. `width:auto` + `max-width:none` donne à
      chacune sa taille de fichier : aussi grand que possible, jamais
      au-delà. Rien à recalculer si une image est remplacée.

   `aspect-ratio:auto !important` : le rapport est posé en STYLE EN LIGNE
   par le gabarit, qui le calcule depuis les dimensions du fichier. Une
   règle de feuille ne peut pas le battre sans `!important`. Le cadre
   reprend donc la hauteur réelle de l'image agrandie.

   Le soulèvement au survol et le zoom de 4 % sont neutralisés : sur une
   image qu'on fait défiler au doigt, ils parasitent le geste.

   Bloc placé EN FIN DE FEUILLE : il écrase des règles de même
   spécificité (`.cp-carte-plan .cp-carte-img img`), c'est donc l'ordre
   qui tranche. Ne pas le remonter. Purement additif : aucune autre page
   ne porte la classe. */
@media (max-width:760px){
  .cp-carte-bande-mobile{
    margin-inline:calc(50% - 50vw);
    width:100vw;max-width:100vw;
    border-left:none;border-right:none;border-radius:0
  }
  .cp-carte-bande-mobile .cp-carte-img{
    aspect-ratio:auto !important;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch
  }
  .cp-carte-bande-mobile .cp-carte-img img{
    width:auto;height:auto;max-width:none;padding:14px
  }
  .cp-carte-bande-mobile:hover{transform:none;box-shadow:none}
  .cp-carte-bande-mobile:hover .cp-carte-img img,
  .cp-carte-bande-mobile:focus-within .cp-carte-img img{transform:none}
}

/* ------------------------------------------------------------------
   Visuel de carte à sa TAILLE NATIVE, jamais agrandi — desktop
   ------------------------------------------------------------------
   Demandé par Jeremy le 16 sept. 2026, avec la règle ci-dessus : « mets
   toutes les images dans les blocs plus grosses que l'on voit le texte ».

   Deux planches de la page portent du texte ET sont nettement plus
   grandes que la place qu'on leur donne : le tableau de configurations
   du modèle 1 (1144 px de fichier, affiché 516 — 45 %) et le nuancier de
   toiles entrelacées (889 px, affiché 516 — 58 %). Elles passent en
   pleine largeur, ce qui leur ouvre une boîte de 1100 px.

   MAIS LA PLEINE LARGEUR SEULE AURAIT AGRANDI LA SECONDE de 24 % au-delà
   de son fichier : `.cp-carte-img img` est en `width:100%;height:100%`,
   l'image remplit donc sa boîte quoi qu'il arrive. Ce modificateur lui
   rend sa taille intrinsèque, plafonnée à la place disponible, et la
   centre. La première passe ainsi à 96 % de son fichier, la seconde à
   100 % — aucune des deux n'est étirée.

   `aspect-ratio:auto !important` : le rapport est posé en style EN LIGNE
   par le gabarit (calculé depuis les dimensions du fichier), et un style
   en ligne ne se laisse pas battre autrement. Sans cela, la boîte
   garderait une hauteur calculée sur sa largeur et laisserait une bande
   vide sous une image plus étroite qu'elle. */
.cp-carte-visuel-natif .cp-carte-img{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:auto !important
}
.cp-carte-visuel-natif .cp-carte-img img{
  width:auto;height:auto;max-width:100%
}

/* Cartes à image ENTIÈRE, en plus grand — Paravent (habitat_air.php),
   8 oct. 2026, Jeremy : « on ne voit pas bien les supports peut être
   agrandir les 3 blocs », puis « pareil pour les 3 modèles ils sont coupés ».
   Le 4/3 + cover de .cp-carte-img rognait les côtés des supports (fichiers
   ~625 × 287, deux vues côte à côte) et le haut/bas des modèles (400 × 400).
   .cp-cartes-entier : l'image garde ses proportions, rien n'est coupé ;
   auto-fit (et non auto-fill) : les 3 cartes se partagent toute la largeur,
   sans colonne vide.
   Une variante « une carte par rangée » pour les supports a été retirée le
   même jour (Jeremy : « non pour les supports reste en 3 blocs les uns à
   côté des autres »).
   Classe posée par la seule vue habitat_air.php. */
.cp-cartes-entier{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cp-cartes-entier .cp-carte-img{aspect-ratio:auto;background:#fff}
.cp-cartes-entier .cp-carte-img img{height:auto;object-fit:contain;display:block}

/* ================================================================
   Sous-menu collant des pages « Notre documentation » (DOC, 18 ;
   FICHES_INSTALLATION_POSE, 117 ; HOMOLOGATIONS_CERTIFICATIONS, 111).
   17 sept. 2026, Jeremy : « fait en sorte que le sous menu soit en
   sticky », puis « pareil » pour les deux autres pages.

   D'abord pose dans la vue DOC, deplace ici quand il a servi a trois
   pages. Classes `doc-*`, utilisees nulle part ailleurs.

   `--doc-top` = hauteur REELLE de l'en-tete, mesuree par le script
   (l'en-tete retrecit au defilement). Repli sans JavaScript : 96 px.
   `.doc-ancre` : une ancre visee s'arrete sous l'en-tete ET sous la
   barre. `.doc-sep` separe les sections de la page des liens vers les
   autres pages de documentation (`.doc-page`).
   ================================================================ */
.doc-sousmenu{position:sticky;top:var(--doc-top,96px);z-index:40;
  background:rgba(250,247,241,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);box-shadow:0 10px 24px -22px rgba(0,0,0,.4)}
.doc-sousmenu ul{list-style:none;margin:0 auto;padding:12px 24px;max-width:1200px;
  display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.doc-sousmenu ul::-webkit-scrollbar{display:none}
.doc-sousmenu a{display:block;white-space:nowrap;padding:8px 18px;border-radius:100px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font-weight:600;font-size:.88rem;transition:background .2s,border-color .2s,color .2s}
.doc-sousmenu a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.doc-sousmenu a[aria-current=true],.doc-sousmenu a[aria-current=page]{background:var(--accent-deep);
  border-color:var(--accent-deep);color:#fff}
.doc-sousmenu .doc-sep{flex:none;width:1px;height:26px;background:var(--line);margin:0 6px}
.doc-sousmenu .doc-page{border-style:dashed;font-weight:500;color:var(--ink-soft)}
.doc-ancre{scroll-margin-top:calc(var(--doc-top,96px) + 74px)}
/* 1er oct. 2026 (Jeremy, capture de Normes & Certifications : « fais en sorte que
   le filtre ne soit pas coupé ») : la barre prend la largeur du site (marges des
   autres pages au lieu de 1200 px) et, sur grand écran, passe à la ligne au lieu
   de défiler — plus rien n'est caché. `position:relative` : le script mesure la
   position du lien actif DANS la barre (offsetLeft) ; sans elle, il la mesurait
   depuis le bord de la page et décalait la barre à tort (1er bouton coupé). */
.doc-sousmenu ul{position:relative;max-width:none;padding:12px clamp(56px,11vw,220px)}
@media (min-width:861px){ .doc-sousmenu ul{flex-wrap:wrap;overflow-x:visible} }
@media (max-width:860px){ .doc-sousmenu ul{padding:12px 24px} }
/* Documentation, 1er oct. 2026 (Jeremy : « mets le texte en face du titre pour
   gagner de la place en hauteur ») : en-tête de famille sur deux colonnes, titre
   à gauche, chapeau à droite calé sur le haut du titre. Mobile : l'un sous l'autre. */
@media (min-width:861px){
  .cp-tete.doc-tete-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);
    align-items:end;max-width:none}
  .doc-tete-duo .cp-h2{margin-bottom:0}
  .doc-tete-duo .cp-lede{margin:0;max-width:60ch}
}
/* Arrêt des ancres sous la barre RÉELLE (une ou deux lignes), mesurée par le script. */
.doc-ancre{scroll-margin-top:calc(var(--doc-top,96px) + var(--doc-barre,64px) + 10px)}

/* ------------------------------------------------------------------
   Choix du modèle dans le configurateur de la MARQUISE
   18 sept. 2026, Jeremy : « mets marquise-bioclimatique-simple.jpg,
   double et triple en image de gauche quand on clique sur le modèle
   correspondant à droite ».

   Les trois lignes du récapitulatif de dimensions sont devenues des
   <button>. Ce bloc ne fait que LEUR RENDRE L'APPARENCE DE LA LIGNE
   qu'elles avaient : un navigateur pose sur un bouton une bordure, un
   fond, une police et un centrage qui n'ont rien à faire là. D'où le
   `font:inherit` et le `text-align:left`, sans lesquels le prix et le
   libellé changeraient de police et se centreraient.

   `width:100%` : le bouton est l'unique enfant d'un `.cp-recap li`
   déjà en `display:flex` — sans cette largeur il se rétracterait sur
   son contenu et la colonne des prix ne serait plus alignée.

   L'état choisi est lu sur `aria-pressed`, et non sur une classe : une
   seule source de vérité, celle qui sert déjà aux lecteurs d'écran.
   Impossible d'avoir une ligne visuellement active et annoncée
   inactive.

   Purement additif : à ce jour, seule la page MARQUISE porte ces
   classes. Les autres pages qui partagent cette feuille ne changent
   pas d'un pixel. */
/* 18 sept. 2026, 2e passe — Jeremy : « mets simple double et triple
   comme 1 module 2 modules … le tarif s'affiche en total en dessous ».
   Les trois modèles étaient un tableau de prix (une ligne par modèle,
   son tarif à droite) ; ils deviennent des PASTILLES, comme les
   nombres de modules juste en dessous, et un seul tarif — celui du
   modèle choisi — s'affiche sous elles.

   Le bouton EST la pastille : il reprend exactement les valeurs de
   `.cp-tags li` (fond, filet, rayon, graisse) plutôt que de s'y
   loger, sinon le rectangle de clic ne couvrirait pas la pastille
   entière et il resterait une bordure morte autour.
   `font-family:inherit` : un navigateur impose sa police aux boutons,
   la pastille aurait changé de fonte à côté de ses voisines. */
   3e passe du 18 sept. — Jeremy : « enlève le prix et mets juste
   simple double ou triple avec un miniature dans un bouton simple ».
   Le bloc du tarif est retiré, le bouton reçoit une miniature.
   `padding` réduit à gauche : la vignette vient s'y loger, et un
   rembourrage égal des deux côtés l'aurait décollée du filet. */
/* Conteneur des trois choix : un simple rang, PAS une liste à puces.
   Le bouton était logé dans un `.cp-tags li`, qui dessine lui-même une
   pastille complète — je la neutralisais par une classe, mais
   neutraliser un cadre c'est en garder la possibilité. Ici il n'existe
   plus aucun élément capable de dessiner une seconde forme.

   `flex-wrap:nowrap` : les trois restent SUR UNE LIGNE, comme sur la
   maquette. Ils ne repassent en colonne que sous 560 px, là où trois
   pastilles côte à côte ne tiennent plus. */
.cp-mq-choix{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Les trois MODÈLES restent sur une ligne (« tout en ligne comme sur la
   maquette »). Les quatre nombres de modules, eux, peuvent passer à la
   ligne : à quatre pastilles, forcer une seule ligne les ferait déborder
   du panneau. */
.cp-mq-choix-ligne{flex-wrap:nowrap}
@media (max-width:560px){
  .cp-mq-choix-ligne{flex-wrap:wrap}
}
/* PROPORTIONS RELEVÉES SUR `maquette.jpg` (18 sept., 2e essai — la
   première version était trop serrée). Mesures faites sur la maquette
   agrandie ×3 : pastille ~47 px de haut, vignette ~28 px, soit une
   respiration d'environ 9 px au-dessus et au-dessous. Ma version
   posait une vignette de 38 px dans la même hauteur : elle touchait
   presque les bords et mangeait la pastille.
   Le filet est aussi éclairci et une ombre très douce ajoutée : la
   maquette montre des boutons posés sur le fond, pas de simples
   contours. */
/* UNE SEULE FORME POUR LES DEUX RANGÉES — 18 sept., Jeremy :
   « grossis les pour qu'ils aient la meme taille que les boutons du
   dessous (qui doivent être clicables) ».

   Les modèles et les nombres de modules partagent désormais
   `.cp-mq-pastille`. Ils ne se ressemblent pas : ils sont LA MÊME
   CHOSE. Deux jeux de valeurs à maintenir en parallèle, c'est deux
   jeux qui divergent à la première retouche.

   `min-height` + `box-sizing:border-box` : sans cela les deux rangées
   ne pouvaient pas coïncider. Une pastille de texte se cale sur sa
   hauteur de ligne (~22 px), une pastille à vignette sur sa vignette
   (26 px) — 4 px d'écart, visibles quand les rangées se suivent. La
   hauteur commune tranche la question une fois pour toutes.

   UN SEUL TRAIT, toujours : pas d'ombre portée. Une ombre pâle contre
   un filet clair se lit comme un second contour. */
.cp-mq-pastille{box-sizing:border-box;min-height:46px;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1.5px solid var(--line-soft);
  border-radius:100px;padding:8px 20px;font-family:inherit;
  font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.cp-mq-pastille:hover{border-color:var(--accent)}
.cp-mq-pastille[aria-pressed="true"]{border-color:var(--accent);
  color:var(--accent-deep);background:var(--accent-soft)}
/* Variante à vignette : rembourrage gauche réduit pour la loger sans
   décoller le libellé du filet droit. Classe explicite plutôt que
   `:has(img)` — le sélecteur est récent, la classe marche partout. */
.cp-mq-vignette{padding-left:9px}

/* Point de couleur logé DANS la pastille de coloris, avant le mot
   (18 sept., demande de Jeremy). Il remplace le `.cp-swatch` de 40 px
   qui occupait une rangée à lui seul sous le bouton.
   `inline-block` + `vertical-align` plutôt qu'un passage de la pastille
   en flex : `.cp-tags li` sert à d'autres pages, et un point en ligne
   se cale dans le texte sans toucher à leur mise en page.
   AUCUN FILET : un cercle cerné dans un bouton déjà cerné redonnerait
   le double contour retiré deux fois aujourd'hui. */
   AGRANDI de 15 à 22 px le 18 sept. (« grossi la pastille dans le
   bouton »). 22 px est le plafond utile : la pastille fait 46 px de
   haut et garde 8 px de rembourrage, au-delà le point commencerait à
   pousser le bouton. `vertical-align` recalé en conséquence. */
.cp-mq-point{display:inline-block;width:22px;height:22px;border-radius:50%;
  vertical-align:-6px;margin-right:9px;flex:none}

/* Total du configurateur, recalculé à chaque choix (18 sept.).
   Le détail passe en `<small>` en bloc : sur la largeur du panneau,
   montant et détail sur une même ligne se couperaient n'importe où. */
.cp-mq-total{font-family:"Jost",sans-serif;font-size:1.6rem;font-weight:500;
  color:var(--ink);line-height:1.15}
.cp-mq-total small{display:block;font-family:inherit;font-size:.85rem;
  font-weight:400;color:var(--ink-soft);margin-top:5px;line-height:1.45}
/* PAS DE SECOND CONTOUR — Jeremy, 18 sept. : « ne mets pas les deux
   contour juste l'interieur du bouton en grand comme 1 module pas de
   double contour ».

   La vignette était un disque (`border-radius:50%` + son propre fond
   blanc) posé dans une pastille déjà arrondie : deux formes
   concentriques, donc deux contours perçus. Le disque est retiré. Le
   rendu est détouré sur blanc, son fond se confond avec celui de la
   pastille : il ne reste QUE le filet du bouton, comme sur « 1 module ».

   Elle passe de 34 à 40 px au passage (« en grand »), et le
   rembourrage vertical tombe à 3 px pour que la pastille garde à peu
   près la hauteur de celles des modules.

   VIGNETTES DÉTOURÉES depuis le 18 sept. (fichiers `-btn`, fond
   transparent, recadrés sur le produit). Plus de `object-fit` ni de
   cadre carré : l'image est posée à sa forme, hauteur imposée et
   largeur libre. Les trois n'ont pas le même rapport — le recadrage
   suit le sujet, qui s'allonge avec le nombre de sections — et c'est
   voulu : la pastille « Triple » est plus large que « Simple », ce
   qui se lit avant même le mot. */
.cp-mq-pastille img{flex:none;display:block;height:26px;width:auto}
@media (prefers-reduced-motion:reduce){
  .cp-mq-pastille{transition:none}
}

/* ------------------------------------------------------------------
   Bloc repliable à chevron, dans le configurateur
   18 sept. 2026, Jeremy : « Mets des fleches ouvert et fermé pour
   ouvrir ou fermer les blocs dimension de la marquise / nombre de
   modules ».

   POURQUOI UNE VARIANTE ET PAS `.cp-acc` / `.cp-faq` : ces deux-là
   existent bien, mais leur marqueur est un « + » qui devient « × ».
   Jeremy demande des FLÈCHES. Plutôt que de changer le marqueur des
   accordéons existants — ils sont sur toutes les pages qui partagent
   cette feuille — on pose une variante à part.

   Le chevron est dessiné en CSS (deux bordures d'un carré tourné à
   45°) : pas de fichier à charger, il prend la couleur d'accent et
   pivote d'un quart de tour à l'ouverture. Vers le bas = fermé, vers
   le haut = ouvert.

   `list-style:none` + `::-webkit-details-marker` : sans les deux, le
   navigateur ajoute SON propre triangle à côté du nôtre. C'est ce que
   font déjà `.cp-acc` et `.cp-faq`, pour la même raison.

   Le libellé garde sa classe `.cp-champ` : même graisse, même
   interlettrage que les champs non repliables d'à côté. Seule sa marge
   est reprise à zéro, c'est le <summary> qui la porte désormais.

   Purement additif : à ce jour, seule la page MARQUISE porte la
   classe. */
/* Deux blocs repliables qui se suivent étaient COLLÉS : seuls ceux qui
   ouvraient une étape portaient une marge en ligne, les autres aucune.
   « Finition » et « Coloris » se touchaient donc, au point de se lire
   comme un seul bloc — c'est ce que Jeremy a signalé par « scinde ».
   La règle vaut pour toute paire, plutôt qu'une marge posée à la main
   sur chacun : le prochain bloc ajouté sera espacé sans qu'on y pense. */
.cp-pliant + .cp-pliant{margin-top:18px}
/* Volet des mentions tarifaires, sous le bouton d'étude : séparé par un
   filet plutôt que par une marge, parce qu'il ferme le panneau et qu'il
   ne s'agit plus d'un champ du configurateur mais d'une note. */
.cp-pliant-fin{margin-top:20px;border-top:1px solid var(--line-soft);
  padding-top:14px}
.cp-pliant > summary{display:flex;align-items:center;
  justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  padding:2px 0}
.cp-pliant > summary::-webkit-details-marker{display:none}
.cp-pliant > summary .cp-champ{margin:0}
.cp-pliant > summary::after{content:"";flex:none;width:8px;height:8px;
  margin-right:3px;border-right:2px solid var(--accent-deep);
  border-bottom:2px solid var(--accent-deep);transform:rotate(45deg);
  transform-origin:60% 60%;transition:transform .25s ease}
.cp-pliant[open] > summary::after{transform:rotate(-135deg)}
.cp-pliant > summary:hover .cp-champ{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .cp-pliant > summary::after,.cp-acc > summary::after,
  .cp-faq > summary::after{transition:none}
}