/* menu.css — le menu principal, commun à toutes les pages v2.
 *
 * Feuille SÉPARÉE à dessein : layout.css est généré par
 * _tools/build_layout_css.php depuis la maquette et serait écrasé ; base.css
 * porte les jetons et les primitives. Le menu est un composant à part entière,
 * il a sa feuille.
 *
 * 25 sept. 2026 — MENU « À LA COMENZA » (Jeremy : « inspire-toi de
 * comenza.com », « tout le site v2 »). Remplace le tiroir sombre à rail de
 * sections (sauvegarde : _backup-ftp/2026-09-25-avant-menu-comenza/).
 *   - ≥ 1100 px : rubriques en clair dans la barre ; panneau blanc pleine
 *     largeur sous la barre, page floutée ; sous-rubriques en gros texte à
 *     gauche, cartes photo défilantes à droite.
 *   - < 1100 px : bouton Menu -> plein écran blanc, par étapes.
 * Le contenu reste celui de config/nav.php (dossier stratégique du 30 août :
 * la navigation part du projet et du besoin).
 */

/* ------------------------------------------------------------------
   Rubriques dans la barre (grand écran)
   ------------------------------------------------------------------ */
.gsn{display:none}
.gsn ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.2vw,36px);margin:0;padding:0}
.gsn-item{position:relative;background:none;border:none;cursor:pointer;padding:10px 0;
  /* 25 sept. : +1 point (Jeremy) — .98rem (15,7 px) -> 1.06rem (17 px) */
  font-family:"Hanken Grotesk",sans-serif;font-size:1.06rem;font-weight:500;color:#fff;
  transition:color .35s ease}
.gsn-item::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.gsn-item:hover::after,.gsn-item[aria-expanded=true]::after{transform:scaleX(1)}
header.scrolled .gsn-item,body.sans-hero header .gsn-item{color:var(--ink)}

@media (min-width:1100px){
  .gsn{display:block;margin:0 auto}
  .nav-burger{display:none!important}
  .brand-tag{display:none!important}
  /* Pas d'écart dans le bloc logo : au repos il contient le logo clair ET le
     <picture> vide du logo foncé ; l'écart de 16 px entre les deux disparaissait
     quand le logo foncé prenait la place, et les rubriques (centrées) glissaient
     de 8 px vers la gauche à l'ouverture du panneau (Jeremy, 25 sept.). Le seul
     usage de cet écart, le texte « N°1… », est masqué à cette largeur. */
  .brand{gap:0!important}
}
@media (min-width:1100px) and (max-width:1239px){
  .nav-tel{display:none!important}
}

/* En-tête pendant l'ouverture : blanc plein, comme Comenza. SEULES LES
   COULEURS changent — pas .scrolled, qui réduit logo et marges et faisait
   remonter les rubriques au survol (Jeremy, 25 sept.). Les !important
   passent devant les règles « header:not(.scrolled) » de accueil.css. */
header.gsm-ouvert{background:#fff!important;box-shadow:none!important;border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header.gsm-ouvert::before{opacity:0!important}
header.gsm-ouvert .gsn-item,header.gsm-ouvert .nav-tel,header.gsm-ouvert .nav-burger{color:var(--ink)!important}
header.gsm-ouvert .brand .logo-light{display:none!important}
header.gsm-ouvert .brand .logo-dark{display:block!important}
header.gsm-ouvert .brand-tag{color:var(--ink-soft)!important;border-color:var(--line)!important}
header.gsm-ouvert .brand-tag b{color:var(--accent-deep)!important}

/* ------------------------------------------------------------------
   Voile flou sur la page
   ------------------------------------------------------------------ */
.gsm-voile{position:fixed;left:0;right:0;bottom:0;top:var(--gsm-top,120px);z-index:48;
  /* 29 sept. 2026 (Jeremy : « en fond du sous-menu laisse le site avec la page en cours
     mais avec un fond noir transparent dessus ») : flou retiré, voile noir à 55 %.
     Avant : background:rgba(8,16,20,.12) + backdrop-filter:blur(20px). */
  background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.gsm-voile.ouvert{opacity:1;visibility:visible}

/* ------------------------------------------------------------------
   Panneau
   ------------------------------------------------------------------ */
.gsm{position:fixed;left:0;right:0;top:var(--gsm-top,120px);z-index:49;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease}
.gsm.ouvert{opacity:1;visibility:visible;transform:none}
.gsm-groupe[hidden]{display:none}
/* 25 sept. : « mets le menu en full size » (Jeremy) -> le panneau occupe toute la
   hauteur sous la barre. */
.gsm-grille{display:grid;grid-template-columns:calc(var(--gsm-g,24px) + 310px) 1fr;background:#fff;
  height:calc(100vh - var(--gsm-top,120px));height:calc(100dvh - var(--gsm-top,120px));
  border-top:1px solid var(--line-soft);box-shadow:0 50px 80px -50px rgba(0,0,0,.45)}

/* Sous-rubriques en gros texte */
.gsm-aside{padding:44px 36px 36px var(--gsm-g,24px);display:flex;flex-direction:column;
  justify-content:space-between;gap:28px;overflow-y:auto}
.gsm-onglets{display:grid;gap:14px;justify-items:start}
.gsm-onglet,.gsm-fort{font-family:"Jost",sans-serif;font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:400;line-height:1.15;
  color:var(--ink);text-align:left;background:none;border:none;padding:0;cursor:pointer;opacity:.3;
  transition:opacity .22s ease;text-decoration:none}
.gsm-onglet:hover,.gsm-onglet:focus-visible,.gsm-onglet.actif{opacity:1}
.gsm-fort{display:inline-flex;align-items:center;gap:12px;margin-top:8px;color:var(--accent-deep);opacity:1}
.gsm-fort:hover{opacity:.65}
.gsm-fort svg,.gsm-carte-fl svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.gsm-accroche{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-soft);max-width:34ch}
/* 6 oct. 2026 (Jeremy : « mets nos réseaux en ronds genre icônes ») : sous l'accroche (Entreprise). */
/* Puis (Jeremy : « descends-les un peu, fais-les plus gros et déjà en bleu foncé ») : 44 px, bleu nuit
   d'office (bleu clair au survol), descendus (marge +6 au lieu de -12) ; la colonne ne fait que
   212 à 258 px de large -> grille régulière 3 × 2 plutôt qu'une ligne qui casserait en 5 + 1. */
/* Puis (« un tout petit peu plus petit, et plus bas, et mets en titre Nous suivre ») : 40 px,
   bloc descendu (+22 px), titre « Nous suivre » au format des titres de colonne du menu mobile. */
.gsm-suivre{margin-top:22px}
.gsm-suivre-t{margin:0 0 12px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent-deep)}
.gsm-reseaux{display:grid;grid-template-columns:repeat(3,40px);gap:10px}
.gsm-rs{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#001d6d;color:#fff;
  transition:background .2s,transform .2s}
.gsm-rs svg{width:18px;height:18px;fill:currentColor}
.gsm-rs:hover{background:#17a3ec;transform:translateY(-2px)}
.gsm-rs:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Puis (« mets-les en dessous de Qui sommes-nous ») : sous les cartes du panneau, une ligne de 6. */
.gsm-contenu .gsm-suivre{margin-top:28px}
.gsm-contenu .gsm-reseaux{grid-template-columns:repeat(6,40px)}
/* 7 oct. 2026 (Jeremy : « suivez-nous sur la gauche », puis « non tous en ligne ») : de retour sous
   l'accroche, les 6 ronds sur UNE ligne ; la colonne (212 à 274 px) ne loge pas 6 × 40 px + écarts
   -> ronds de 40 px au plus, qui rétrécissent (carrés, gap 8 px) selon la largeur.
   Puis (« ne mets pas pinterest dans le menu ») : 5 ronds. */
/* Puis (« ne les mets pas dans des ronds mais juste les pictos ») : plus de ronds dans le menu
   (panneau + mobile) ; pictos bleu nuit 22 px, bleu clair au survol. Le footer garde ses ronds. */
.gsm-aside .gsm-reseaux,.gsm-ecran .gsm-reseaux{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.gsm-aside .gsm-rs,.gsm-ecran .gsm-rs{width:auto;height:auto;border-radius:0;background:none;color:#001d6d;display:inline-flex}
.gsm-aside .gsm-rs svg,.gsm-ecran .gsm-rs svg{width:22px;height:22px}
.gsm-aside .gsm-rs:hover,.gsm-ecran .gsm-rs:hover{background:none;color:#17a3ec}
/* 7 oct. 2026 (« rajoute le mail et le téléphone et l'adresse en bas du sous menu entreprise ») :
   coordonnées sous les réseaux, picto bleu nuit + texte. */
.gsm-coord{margin-top:24px;display:grid;gap:10px;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.gsm-coord-l{display:flex;align-items:flex-start;gap:10px;margin:0;color:inherit;text-decoration:none}
a.gsm-coord-l:hover{color:#001d6d;text-decoration:underline;text-underline-offset:3px}
.gsm-coord-l svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:#001d6d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Puis (« mets les infos en ligne en bas du bloc sous-menu ») : panneau grand écran = bande
   pleine largeur en bas (.gsm-bas, dernière rangée de la grille), coordonnées sur une ligne. */
.gsm-grille:has(> .gsm-bas){grid-template-rows:minmax(0,1fr) auto}
/* Puis (« étale sur toute la longueur du bloc ») : infos réparties d'un bord à l'autre ; puis
   (« enlève la ligne séparatrice et mets les infos sur la droite bien séparé ») : plus de filet,
   infos calées à droite (bord droit du bloc Showroom), 64 px entre elles. */
.gsm-bas{grid-column:1/-1;padding:18px 40px 24px 48px}
.gsm-bas .gsm-coord{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 64px}
.gsm-bas .gsm-coord-l{align-items:center}
.gsm-bas .gsm-coord-l svg{margin-top:0}
.gsm-ecran .gsm-coord{margin:0 0 24px}
.gsm-ecran .gsm-suivre{margin:6px 0 24px}
.gsm-ecran .gsm-reseaux{grid-template-columns:repeat(6,40px)}
@media (prefers-reduced-motion:reduce){.gsm-rs{transition:none}.gsm-rs:hover{transform:none}}

/* Cartes */
.gsm-contenu{padding:44px var(--gsm-d,24px) 30px 0;overflow:hidden;display:flex;flex-direction:column}
.gsm-panneau[hidden]{display:none}
.gsm-panneau{display:flex;flex-direction:column;gap:18px;min-height:0}
.gsm-piste{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 16px) / 3);gap:16px;align-items:start;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
.gsm-piste::-webkit-scrollbar{display:none}
.gsm-carte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;scroll-snap-align:start;
  aspect-ratio:4/5;max-height:calc(100vh - var(--gsm-top,120px) - 200px);border-radius:24px;overflow:hidden;background:#0c1417;color:#fff;text-decoration:none}
.gsm-carte-img{position:absolute;inset:0}
.gsm-carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gsm-carte:hover .gsm-carte-img img,.gsm-carte:focus-visible .gsm-carte-img img{transform:scale(1.06)}
.gsm-carte-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,16,20,.78) 0%,rgba(8,16,20,.3) 38%,rgba(8,16,20,0) 62%);transition:background .35s ease}
.gsm-carte:hover .gsm-carte-img::after{background:linear-gradient(0deg,rgba(8,16,20,.82) 0%,rgba(8,16,20,.4) 50%,rgba(8,16,20,.15) 100%)}
/* 28 sept. (Jeremy : « réduis la déco qu'on la voie plus », « les images en rollover ») :
   photo de survol montrée EN ENTIER (4e valeur 'entier' dans nav-visuels.php). L'image
   est contenue ; les bandes au-dessus et en dessous reçoivent la même photo, floutée
   et assombrie (--fond posé par header.php), au lieu de bandes vides. */
.gsm-carte-img.entier{overflow:hidden}
.gsm-carte-img.entier::before{content:"";position:absolute;inset:-30px;background:var(--fond) center/cover no-repeat;filter:blur(18px) brightness(.7)}
.gsm-carte-img.entier img{position:relative;object-fit:contain}
.gsm-carte-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:24px 26px}
.gsm-carte-r{font-size:.88rem;line-height:1.3;opacity:.8}
.gsm-carte-t{font-family:"Jost",sans-serif;font-size:1.45rem;font-weight:400;line-height:1.2}
.gsm-carte-fl{position:absolute;top:18px;right:18px;z-index:1;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease}
.gsm-carte-fl svg{width:12px;height:12px}
.gsm-carte:hover .gsm-carte-fl,.gsm-carte:focus-visible .gsm-carte-fl{opacity:1;transform:none}

/* Carte sans photo (Expertise, Professionnels, Entreprise) */
.gsm-carte.sans-photo{aspect-ratio:auto;min-height:220px;background:var(--cream);color:var(--ink);
  border:1px solid #cfd6db;transition:border-color .25s ease,background .25s ease}
.gsm-carte.sans-photo:hover{border-color:var(--accent);border-style:solid;background:#fff}
.gsm-carte.sans-photo .gsm-carte-r{color:var(--ink-soft);opacity:1}
.gsm-carte.sans-photo .gsm-carte-fl{background:var(--accent-soft);color:var(--accent-deep)}

.gsm-fleches{display:flex;justify-content:flex-end;gap:10px}
.gsm-fleches[hidden]{display:none}
.gsm-fl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s ease,border-color .2s ease}
.gsm-fl:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.gsm-fl:disabled{opacity:.35;cursor:default;background:#fff;color:var(--ink);border-color:var(--line)}
.gsm-fl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* Bouton « Fermer » (le panneau couvre toute la hauteur : plus de page
   floutée visible sur laquelle cliquer pour fermer). */
.gsm-fermer{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  font-family:"Hanken Grotesk",sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.4);transition:background .2s ease,color .2s ease}
.gsm-fermer:hover{background:var(--ink);color:#fff}
.gsm-fermer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gsm-contenu{padding-bottom:84px!important}

/* 25 sept. (suite) : « mets l'intérieur du menu en full size » (Jeremy).
   Le contenu remplit tout le panneau : il n'est plus aligné sur le
   conteneur du site (marges de 144 px à 1440), il va de bord à bord avec
   48 px de marge ; les cartes photo prennent toute la hauteur disponible
   (au lieu d'un format 4/5 qui laissait un vide dessous). */
.gsm-grille{grid-template-columns:clamp(300px,24vw,400px) 1fr}
.gsm-aside{padding:48px 40px 40px 48px}
.gsm-contenu{padding:48px 48px 96px 0!important;min-height:0}
.gsm-panneau:not([hidden]){flex:1}
.gsm-piste{flex:1;min-height:0;grid-template-rows:100%;align-items:stretch}
.gsm-carte{aspect-ratio:auto;max-height:none;height:100%}
.gsm-carte.sans-photo{height:auto;min-height:240px;align-self:start}

/* 25 sept. (suite) : « que l'on voie tous les produits, qu'il ne faille pas
   cliquer ensuite avec la flèche » (Jeremy). Plus de défilement : grille
   dont les colonnes (--c) et les lignes (--r) sont posées par header.php
   selon le nombre de cartes ; les cartes se partagent toute la hauteur. */
.gsm-piste{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));
  grid-template-rows:repeat(var(--r,1),minmax(0,1fr));overflow:hidden;scroll-snap-type:none}
/* (flèches masquées du 25 sept. — remises plus bas, même jour) */
/* cartes sur deux lignes : textes un peu plus petits */
.gsm-piste[style*="--r:2"] .gsm-carte-t{font-size:1.2rem}
.gsm-piste[style*="--r:2"] .gsm-carte-txt{padding:18px 20px}

/* 25 sept. (suite) : « les blocs du sous-menu de la même hauteur que dans
   le modèle Comenza » (Jeremy). Valeurs relevées dans la feuille de
   comenza.com : .custom-card__media{aspect-ratio:300/420;max-height:25rem},
   4 cartes par ligne, 12 px d'écart, titre 1.125rem dans le méga-menu.
   Les cartes ne s'étirent donc plus sur toute la hauteur : 4 colonnes
   fixes, format 300/420 plafonné à 400 px, lignes suivantes en dessous
   (Pergola, Solutions : 2 lignes). Si l'écran est trop bas pour 2 lignes,
   la zone des cartes défile verticalement — tout reste visible sans flèche. */
.gsm-contenu{overflow-y:auto;scrollbar-width:thin}
.gsm-panneau:not([hidden]){flex:none}
.gsm-piste{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
  align-items:start;align-content:start;gap:12px;overflow:visible}
.gsm-carte{height:auto;aspect-ratio:300/420;max-height:25rem}
/* 4 cartes de 400 px de haut = 4 × 285,7 px + 3 × 12 px : au-delà, la grille ne s'élargit plus (sinon les cartes, plafonnées, laissent des écarts irréguliers). */
.gsm-piste{max-width:calc(4 * 25rem * 300 / 420 + 36px)}
.gsm-carte.sans-photo{aspect-ratio:auto;max-height:none;min-height:240px}
.gsm-carte-t,.gsm-piste[style*="--r:2"] .gsm-carte-t{font-size:1.2rem}
.gsm-carte-r{font-size:.84rem}
.gsm-carte-txt,.gsm-piste[style*="--r:2"] .gsm-carte-txt{padding:20px 22px}

/* 25 sept. (suite) : « ne mets pas les blocs en dessous, fais défiler avec
   une flèche » (Jeremy). Retour à UNE rangée qui défile, comme Comenza :
   4 cartes visibles au format Comenza (300/420, 400 px max), les suivantes
   à droite, flèches sous la rangée (masquées quand tout tient). Le calcul
   de grille --c/--r de header.php ne sert plus. */
.gsm-piste{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;
  grid-auto-columns:calc((100% - 3 * 12px) / 4);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth}
.gsm-piste .gsm-carte{width:100%}
.gsm-fleches{display:flex;max-width:calc(4 * 25rem * 300 / 420 + 36px)}
.gsm-fleches[hidden]{display:none}
.gsm-contenu{overflow-y:hidden}

/* 25 sept. (suite) : « quand il y a plus de blocs, va jusqu'au bout de
   l'écran et mets la flèche bien en évidence comme sur le modèle »
   (Jeremy). Relevé sur comenza.com : .custom-cards__slider{overflow:visible}
   (la rangée déborde jusqu'au bord de l'écran, la carte suivante dépasse),
   .custom-cards__nav{position:absolute;top:50%;width:3rem;height:3rem;
   border-radius:50%;backdrop-filter:blur(40px)} posées SUR les cartes,
   flèche « précédent » masquée au début, « suivant » masquée à la fin.
   Ici un peu plus grandes (56 px) et blanches avec ombre, pour ressortir
   sur les photos. */
.gsm-contenu{padding-right:0!important}
.gsm-panneau{position:relative}
.gsm-piste{max-width:none;padding-right:48px;scroll-padding-left:0;
  grid-auto-columns:min(calc((100% - 48px - 3 * 12px) / 4), calc(25rem * 300 / 420))}
.gsm-fleches{position:absolute;left:0;right:0;top:0;bottom:0;z-index:5;max-width:none!important;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:0}
.gsm-fl{pointer-events:auto;width:56px;height:56px;border:none;background:rgba(255,255,255,.92);color:var(--accent-deep);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 12px 34px -10px rgba(0,0,0,.5);
  transition:opacity .25s ease,visibility .25s ease,background .2s ease,color .2s ease,transform .2s ease}
.gsm-fl[data-gsm-fl="-1"]{margin-left:16px}
.gsm-fl[data-gsm-fl="1"]{margin-right:28px}
.gsm-fl:hover{background:var(--accent);color:#fff;border-color:transparent}
.gsm-fl[data-gsm-fl="1"]:hover{transform:scale(1.06)}
.gsm-fl[data-gsm-fl="-1"]:hover{transform:scale(1.06)}
.gsm-fl svg{width:22px;height:22px;stroke-width:2.2}
.gsm-fl:disabled{opacity:0;visibility:hidden;pointer-events:none}

/* 25 sept. (suite) : « reprends les 3D pour chaque produit, et au rollover
   mets l'image » (Jeremy). Comme comenza.com (.custom-card__image--main
   contenue sur fond clair, .custom-card__image--hover en fondu au survol) :
   au repos, la 3D du produit (config/nav-3d.php) sur fond clair, texte
   sombre ; au survol, la photo apparaît par-dessus, texte en blanc. Cartes
   sans 3D : inchangées (photo). */
.gsm-carte.a-3d{background:#eef1f3;color:var(--ink)}
.gsm-carte-3d{position:absolute;left:8%;right:8%;top:10%;bottom:30%;display:flex;align-items:center;justify-content:center;
  transition:opacity .35s ease,transform .5s ease}
/* 25 sept. : « mets tout à la même taille » — chaque 3D (recadrée sur son produit)
   REMPLIT le même cadre, petites images comprises (agrandies), au lieu de garder sa taille native. */
.gsm-carte-3d img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:translateX(var(--dx,0%)) scale(var(--e,1))}
/* 8 oct. 2026 : Balustrade et Fixations fuyaient vers la gauche, le Contour vers la droite.
   Jeremy a d'abord fait retourner le Contour, puis : « non remet comme avant et tourne les
   2 autres pour que tous soient dans le même sens », et enfin : « tourne tous les garde
   corps […] juste ceux du sous menu ». Les trois cartes sont donc retournées par rapport
   à l'état précédent : seul le Contour porte le miroir, les trois fuient vers la gauche.
   Menu seulement (cartes Contour de Garde-corps et de Barrière piscine, même rendu) ;
   fichiers et pages gamme inchangés.
   Même jour, « retourne la taf carport » : 3D de la carte Taf de la famille Carport
   (carport-toit-fixe-glass-systems), menu seulement ; la page gamme Carports, qui
   reprend ce rendu, est inchangée.
   Puis « retourne la bioclimatique et la photovoltaïque » : cartes Bioclimatique et
   Photovoltaïque de la famille Pergola, menu seulement.
   Puis « tourne barrière sans cadre » (Balneo retournée), suivi de « non tourne la
   balneo et la barrière avec cadre » : Balneo remise dans son sens d'origine,
   Barrière avec cadre (paravent-piscine) retournée.
   9 oct. 2026 : « tourne le paravent dans le menu paravent » : carte Wind de la famille
   Paravent (HT_AIR, paravent-glass-systems), menu seulement ; fichier et page gamme
   inchangés. Le motif ne touche pas « paravent-piscine » (Barrière avec cadre). */
.gsm-carte-3d img[src*="garde-corps-en-verre-design"],
.gsm-carte-3d img[src*="paravent-glass-systems"],
.gsm-carte-3d img[src*="carport-toit-fixe-glass-systems"],
.gsm-carte-3d img[src*="3d-pergola-bioclimatique-glass-systems"],
.gsm-carte-3d img[src*="eluz-pergola-solaire-photovoltaique-autoportee"],
.gsm-carte-3d img[src*="paravent-piscine"]{transform:translateX(var(--dx,0%)) scale(var(--e,1)) scaleX(-1)}
/* (ombre portée CSS retirée le 25 sept. : les rendus ont déjà la leur, et le filtre empêchait l'affichage de plusieurs 3D en rendu headless) */
.gsm-carte.a-3d .gsm-carte-img{opacity:0;transition:opacity .35s ease}
.gsm-carte.a-3d:hover .gsm-carte-img,.gsm-carte.a-3d:focus-visible .gsm-carte-img{opacity:1}
.gsm-carte.a-3d:hover .gsm-carte-3d,.gsm-carte.a-3d:focus-visible .gsm-carte-3d{opacity:0;transform:scale(.96)}
.gsm-carte.a-3d .gsm-carte-txt{transition:color .35s ease}
.gsm-carte.a-3d .gsm-carte-r{color:var(--ink-soft);opacity:1;transition:color .35s ease}
.gsm-carte.a-3d:hover,.gsm-carte.a-3d:focus-visible,
.gsm-carte.a-3d:hover .gsm-carte-r,.gsm-carte.a-3d:focus-visible .gsm-carte-r{color:#fff}
.gsm-carte.a-3d:hover .gsm-carte-r{opacity:.85}
.gsm-carte.a-3d .gsm-carte-fl{background:var(--accent-soft);color:var(--accent-deep)}
.gsm-carte.a-3d:hover .gsm-carte-fl{background:rgba(255,255,255,.22);color:#fff}
@media (prefers-reduced-motion:reduce){ .gsm-carte-3d,.gsm-carte.a-3d .gsm-carte-img{transition:none} }
/* 12 oct. 2026 : carte Rideau de verre = le motion de la page (header.php, clé 'video' de nav-3d.php).
   La vidéo est sur fond blanc pur : `multiply` le fond dans le gris de la carte. Le cadre porte
   ce même gris et `isolation` : pendant le fondu du survol (opacity < 1), le mélange se fait
   contre lui et non contre du vide, sans flash blanc.
   Même jour (« enlève le texte et mets moins de vantail ») : vidéo propre au menu, sans texte et
   carrée — le clip-path qui masquait le titre incrusté de la vidéo de la page est retiré. */
/* 12 oct. 2026 (Jeremy : « sur les animations que tu as rajoutées il y a un contour blanc ») : Chrome
   n'applique pas toujours mix-blend-mode à une vidéo décodée par le GPU, le fond blanc des vidéos
   restait visible. Les vidéos sont maintenant rendues SUR le gris de la carte (#eef1f3, fichiers -g) ;
   plus de multiply. Le décodage vidéo décale ce gris de 2-3 niveaux selon le navigateur : un masque
   fond les 5 % du bord pour qu'aucune arête ne se voie. Avant : fond #eef1f3 + isolation sur le cadre,
   mix-blend-mode:multiply sur la vidéo. */
.gsm-carte-video video{display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}

/* 25 sept. : « les noms des produits tous au même niveau et plus gros »
   (Jeremy). La description réserve toujours 2 lignes : le nom (au-dessus)
   ne remonte plus quand elle en prend deux. Nom 1.2rem -> 1.45rem. */
.gsm-carte-t,.gsm-piste[style*="--r:2"] .gsm-carte-t{font-size:1.45rem;line-height:1.15}
.gsm-carte-r{line-height:1.3;min-height:2.6em;display:block}

/* 25 sept. : « au rollover l'image n'est pas aussi noire » (Jeremy). Le
   voile de survol (.82 en bas, .4 au milieu, .15 en haut) est remplacé par
   un dégradé léger, en bas seulement, juste pour la lisibilité du texte. */
.gsm-carte-img::after,.gsm-carte:hover .gsm-carte-img::after{
  background:linear-gradient(0deg,rgba(8,16,20,.62) 0%,rgba(8,16,20,.22) 28%,rgba(8,16,20,0) 50%)}
@media (max-width:1099px){ .gsm,.gsm-voile{display:none} }

/* ------------------------------------------------------------------
   Menu mobile plein écran, par étapes
   ------------------------------------------------------------------ */
.gsm-mob{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:#fff;color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.gsm-mob.ouvert{opacity:1;visibility:visible}
/* 15 oct. 2026 : menu fermé, l'écran actif (.gsm-ecran.actif, visibility:visible) restait cliquable
   sous l'opacité 0 et captait les appuis du haut de l'écran sur toutes les pages en mobile. */
.gsm-mob:not(.ouvert){pointer-events:none}
.gsm-mob-tete{flex:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line-soft)}
.gsm-mob-logo{font-family:"Jost",sans-serif;font-size:.8rem;letter-spacing:.3em;color:var(--accent-deep)}
.gsm-mob-fermer{width:42px;height:42px;border:none;background:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.gsm-mob-fermer svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gsm-mob-ecrans{position:relative;flex:1;overflow:hidden}
.gsm-ecran{position:absolute;inset:0;overflow-y:auto;padding:14px 20px 28px;background:#fff;
  transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.72,.2,1),visibility .32s}
.gsm-ecran.actif{transform:none;visibility:visible}
.gsm-ecran.avant{transform:translateX(-30%)}
.gsm-mob-ligne{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 2px;
  font-family:"Jost",sans-serif;font-size:1.5rem;font-weight:400;color:var(--ink);text-decoration:none;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line-soft);cursor:pointer}
.gsm-mob-ligne svg,.gsm-mob-retour svg{width:9px;height:18px;flex:none;fill:none;stroke:var(--accent-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gsm-mob-retour{display:inline-flex;align-items:center;gap:10px;padding:10px 0;margin-bottom:8px;background:none;border:none;
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--accent-deep)}
.gsm-mob-titre{font-family:"Jost",sans-serif;font-size:1.9rem;line-height:1.1}
.gsm-ecran .gsm-accroche{margin:10px 0 18px;max-width:none}
.gsm-ecran .gsm-fort{font-size:1.15rem;margin:0 0 10px}
.gsm-mob-col{margin:22px 0 4px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-deep)}
a.gsm-mob-col{display:block;text-decoration:underline;text-underline-offset:3px}
.gsm-mob-lien{display:flex;flex-direction:column;gap:2px;padding:13px 0;border-bottom:1px solid var(--line-soft);
  color:var(--ink);text-decoration:none;font-size:1.05rem}
.gsm-mob-lien small{font-size:.8rem;color:var(--ink-soft)}
.gsm-mob-ancres{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.gsm-mob-ancres .mm-cap{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gsm-mob-ancres .drawer-anchors{display:flex;flex-wrap:wrap;gap:8px}
.gsm-mob-ancres .drawer-anchors a{font-size:.85rem;color:var(--ink);text-decoration:none;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px}
.gsm-mob-pied{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;
  border-top:1px solid var(--line-soft);background:var(--cream)}
.gsm-mob-tel{color:var(--ink);font-weight:600;text-decoration:none}
@media (min-width:1100px){ .gsm-mob{display:none} }

@media (prefers-reduced-motion:reduce){
  .gsm,.gsm-voile,.gsm-mob,.gsm-ecran,.gsm-carte-img img,.gsm-carte-fl,.gsn-item::after{transition:none}
  .gsm-carte:hover .gsm-carte-img img{transform:none}
}

/* ------------------------------------------------------------------
   VOILE DU HEADER — « le menu s'affiche en deux temps »

   Demande de Jeremy, 21 sept. 2026 : « corrige le menu sur toutes les
   pages. Il s'affiche en deux temps. Tu l'as corrigé sur certaines pages
   mais pas toutes. »

   CE QUI SE PASSAIT. Sur une page à grand visuel, base.css laisse le
   header transparent et écrit TOUT EN BLANC (logo clair, « MENU »,
   téléphone) tant que le défilement n'a pas dépassé 40 px. Sur un visuel
   dont le haut est clair, le menu est donc invisible à l'arrivée, puis
   apparaît d'un coup quand le header prend son fond opaque : deux temps.

   Ce n'est pas une impression. Luminosité moyenne de la bande haute du
   visuel, mesurée sur les fichiers servis (danger au-dessus de ~150/255,
   contraste minimum lisible 4,5:1) :
     store vertical 218 · documentation 201 · carport PV 192 · MARQUISE 158
     points de fixation 146 · Glass Concept 143 · toit modulable 133
   Le correctif n'existait que sur UNE page (Documentation, voile en
   pixels posé en style en ligne le 18 sept. 2026, retiré le 21 : cette
   règle le remplace). Il est ici, une fois pour toutes.

   POURQUOI EN PIXELS. « .cp-hero-voile », le voile des feuilles de page,
   est étagé en POURCENTAGES de la hauteur du grand visuel : il s'est déjà
   dissipé à hauteur de la barre de navigation, dont la hauteur, elle, est
   fixe (~147 px au repos : bandeau 35 + barre 16+80+16).

   OÙ, ET POURQUOI LÀ. Sur le header lui-même, pas sur le visuel : le
   voile suit la barre sur toutes les pages, y compris celles à venir, et
   aucune vue n'a à le porter. Il s'efface au défilement, et ne sort jamais
   sur les pages dont le header est déjà clair au repos : « sans-hero »
   (header collant opaque) et l'accueil (fond clair dès le chargement,
   voir accueil.css).

   Le header est « position:fixed; z-index:50 » : il forme son propre plan.
   Un ::before en « z-index:-1 » y passe donc SOUS le logo et les liens,
   mais AU-DESSUS du grand visuel. C'est exactement ce qu'on veut.

   VALEURS. Ce sont celles de la page Documentation, les seules mesurees :
   .80 en haut, .64 a hauteur de la barre, eteint a 250 px. Un voile plus
   leger ne suffit pas — a .34 sous la barre, le visuel du store vertical
   (218/255) redescend a 144/255, soit 3,2:1 avec du texte blanc, sous le
   minimum de 4,5:1. A .64 il tombe a 78/255, soit environ 8,4:1. Sur le
   visuel le plus sombre du site (74/255) le voile passe inapercu.
   ------------------------------------------------------------------ */
header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:250px;
  pointer-events:none;z-index:-1;opacity:1;transition:opacity .35s ease;
  background:linear-gradient(180deg,
    rgba(8,16,20,.80) 0,
    rgba(8,16,20,.64) 150px,
    rgba(8,16,20,0) 250px)}
header.scrolled::before,
body.sans-hero header::before{opacity:0}
/* 23 sept. 2026 : « body.page-accueil header::before » retiré de cette liste.
   L'accueil ouvrait sur un fond crème, elle n'avait pas besoin du voile ; elle
   ouvre depuis ce jour sur un grand visuel (voir accueil.css, bloc « GRAND
   VISUEL D'ACCUEIL »), donc le voile lui sert comme aux autres pages. */

/* Le header est plus court en mobile : le voile suit, sinon il mange le
   haut du visuel pour rien. */
@media(max-width:720px){
  header::before{height:180px;
    background:linear-gradient(180deg,
      rgba(8,16,20,.80) 0,
      rgba(8,16,20,.64) 96px,
      rgba(8,16,20,0) 180px)}
}

/* 2 oct. 2026 (Jeremy : « enlève un peu de noir sous le menu », sur l'accueil, puis
   « fais pareil sur les autres pages ») : voile allégé PARTOUT, .80/.64 -> .55/.38.
   Mesure faite le même jour sur les 25 pages à grand visuel (luminosité moyenne des
   15 % du haut du fichier) : avec .38 sous la barre, un visuel reste lisible en blanc
   jusqu'à ~185/255 (185 x 0,62 = 115, environ 4,7:1). Trois visuels dépassent :
   store vertical HT_ZIP2 (215), paravent HT_AIR (194), carport photovoltaïque (189).
   Ils gardent le voile d'origine ci-dessus via 'voile_fort' => true (pages.php ->
   classe body.voile-fort, layout.php). Une nouvelle page à visuel très clair : même
   réglage. */
header::before{
  background:linear-gradient(180deg,rgba(8,16,20,.55) 0,rgba(8,16,20,.38) 150px,rgba(8,16,20,0) 250px)}
body.voile-fort header::before{
  background:linear-gradient(180deg,rgba(8,16,20,.80) 0,rgba(8,16,20,.64) 150px,rgba(8,16,20,0) 250px)}
@media(max-width:720px){
  header::before{
    background:linear-gradient(180deg,rgba(8,16,20,.55) 0,rgba(8,16,20,.38) 96px,rgba(8,16,20,0) 180px)}
  body.voile-fort header::before{
    background:linear-gradient(180deg,rgba(8,16,20,.80) 0,rgba(8,16,20,.64) 96px,rgba(8,16,20,0) 180px)}
}

/* 28 sept. (Jeremy : « dans les sous-menus, lorsqu'il n'y a pas d'image, fais les blocs moins hauts »).
   Cartes sans photo (Expertise, Professionnels, Entreprise) : 240 -> 130 px mini ; les cartes photo ne changent pas. sans image : blocs moins hauts */
.gsm-carte.sans-photo{min-height:96px;align-self:stretch}   /* même hauteur sur une rangée ; 130 -> 96 px (« encore un peu plus petit ») */
.gsm-carte.sans-photo .gsm-carte-txt{padding-top:16px;padding-bottom:16px}
/* la réserve de 2 lignes de description et le grand corps du nom sont faits pour les cartes photo */
.gsm-carte.sans-photo .gsm-carte-r{min-height:0}
.gsm-carte.sans-photo .gsm-carte-t{font-size:1.25rem}
/* texte aligné à gauche, centré VERTICALEMENT dans le bloc : même espace dessus et dessous (Jeremy, 28 sept.) */
.gsm-carte.sans-photo{justify-content:center}
/* 29 sept. (Jeremy : menu Solutions sans images, cartes « sur plusieurs rangées ») :
   rubrique sans photo (classe posée par header.php) -> grille de 4 colonnes qui
   descend, mêmes largeurs de carte que la rangée ; plus de défilement ni de flèche. */
.gsm-piste.en-grille{grid-auto-flow:row;grid-auto-columns:auto;
  grid-template-columns:repeat(4,min(calc((100% - 48px - 3 * 12px) / 4), calc(25rem * 300 / 420)));
  overflow:visible;scroll-snap-type:none}
/* 12 oct. 2026 (Jeremy : « mets des images en rollover derrière le sous menu de solution ») :
   tuiles Solutions = cartes sans photo au repos ; au survol, la photo (header.php, a-survol)
   apparaît en fondu derrière le texte, voilée pour qu'il reste lisible en blanc. */
.gsm-carte.a-survol .gsm-carte-img{opacity:0;transition:opacity .35s ease}
.gsm-carte.a-survol:hover .gsm-carte-img,.gsm-carte.a-survol:focus-visible .gsm-carte-img{opacity:1}
.gsm-carte.a-survol .gsm-carte-img::after,.gsm-carte.a-survol:hover .gsm-carte-img::after{background:rgba(8,16,20,.42)}
.gsm-carte.a-survol .gsm-carte-txt,.gsm-carte.a-survol .gsm-carte-r{transition:color .35s ease}
.gsm-carte.a-survol:hover,.gsm-carte.a-survol:focus-visible{color:#fff;border-color:transparent}
.gsm-carte.a-survol:hover .gsm-carte-fl,.gsm-carte.a-survol:focus-visible .gsm-carte-fl{background:rgba(255,255,255,.22);color:#fff}
@media (prefers-reduced-motion:reduce){ .gsm-carte.a-survol .gsm-carte-img{transition:none} }

/* 29 sept. — ESSAI (Jeremy : « que le sous-menu n'aille pas jusqu'en bas de l'écran,
   voir ce que ça donne qu'il s'arrête sous les blocs »). Le panneau prend la hauteur
   de son contenu (cartes + place du bouton Fermer), plafonnée à l'écran ; la page
   floutée reste visible dessous (un clic dessus ferme). Retour au plein écran :
   supprimer ces deux lignes. */
.gsm-grille{height:auto;max-height:calc(100vh - var(--gsm-top,120px));max-height:calc(100dvh - var(--gsm-top,120px))}
.gsm-aside{justify-content:flex-start}

/* 29 sept. (Jeremy : « enlève le fermer et mets que tous les sous-menus aient la
   même hauteur que celui de produits »). Bouton retiré de header.php -> la réserve
   de 96 px sous les cartes tombe à 48 px (= marge du haut). Même hauteur partout :
   les cinq panneaux sont empilés dans la même case de grille, les inactifs restent
   en page mais invisibles ; le cadre prend donc la hauteur du plus grand (Produits)
   et chaque panneau s'étire à cette hauteur. */
.gsm-contenu{padding-bottom:48px!important}
.gsm{display:grid}
.gsm-groupe{grid-area:1/1;display:flex;flex-direction:column}
.gsm-groupe[hidden]{display:flex;visibility:hidden;pointer-events:none}
.gsm-groupe .gsm-grille{flex:1}

/* ============================================================
   Vidéos YouTube « zoomées » dans le site (28 sept. 2026) — voir site.js.
   Règle du projet : un <dialog> n'est affiché QUE s'il est ouvert
   (sinon un display d'auteur le laisse rendu en permanence).
   ============================================================ */
.yt-zoom:not([open]){display:none}
.yt-zoom[open]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100vw;height:100vh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.yt-zoom::backdrop{background:rgba(6,12,16,.86);backdrop-filter:blur(4px)}
.yt-zoom-cadre{position:relative;width:min(92vw,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;background:#000;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:ytZoom .35s cubic-bezier(.2,.8,.2,1)}
.yt-zoom-cadre.court{width:min(92vw,calc((100vh - 120px) * 9 / 16));aspect-ratio:9/16}
.yt-zoom-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-zoom-fermer{position:fixed;top:18px;right:18px;z-index:2;width:48px;height:48px;border-radius:50%;border:0;
  background:#fff;color:#0f161b;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:transform .2s ease}
.yt-zoom-fermer:hover{transform:scale(1.08)}
.yt-zoom-fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
html.yt-zoom-ouvert{overflow:hidden}
/* Flèches précédente / suivante (28 sept., Jeremy) : même rond blanc que la croix,
   seulement quand le rail compte 2 vidéos ou plus. Dans les COINS BAS de l'écran
   (Jeremy, même jour : « mets les flèches plutôt dans les coins, pas à côté de la
   vidéo ») : précédente en bas à gauche, suivante en bas à droite. Puis « centre-les
   en hauteur » : sur les bords gauche et droit, au milieu de l'écran. La vidéo
   garde alors 90 px libres de chaque côté pour ne jamais passer sous une flèche.
   Téléphone : la vidéo prend toute la largeur, les flèches restent dans les coins bas. */
.yt-zoom-fleche{display:none;position:fixed;top:50%;margin-top:-26px;z-index:2;width:52px;height:52px;border-radius:50%;border:0;
  background:#fff;color:#0f161b;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:transform .2s ease}
.yt-zoom.avec-fleches .yt-zoom-fleche{display:flex}
.yt-zoom-prec{left:18px}
.yt-zoom-suiv{right:18px}
.yt-zoom-fleche:hover{transform:scale(1.08)}
.yt-zoom-fleche svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:701px){
  .yt-zoom.avec-fleches .yt-zoom-cadre{width:min(calc(100vw - 180px),calc((100vh - 120px) * 16 / 9))}
  .yt-zoom.avec-fleches .yt-zoom-cadre.court{width:min(calc(100vw - 180px),calc((100vh - 120px) * 9 / 16))}
}
/* Téléphone : la vidéo prend toute la largeur, les flèches passent dans les coins bas */
@media (max-width:700px){
  .yt-zoom-fleche{top:auto;bottom:18px;margin-top:0}
  /* place réservée sous la vidéo pour les flèches (sinon un short les chevauche) */
  .yt-zoom.avec-fleches .yt-zoom-cadre{margin-bottom:64px}
  .yt-zoom.avec-fleches .yt-zoom-cadre.court{width:min(92vw,calc((100vh - 200px) * 9 / 16))}
}
@keyframes ytZoom{from{transform:scale(.82);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.yt-zoom-cadre{animation:none}.yt-zoom-fleche{transition:none}}
/* 30 sept. 2026 (Jeremy : « dans le menu produits mets le listing fermeture en verre, garde-corps… en bleu de Glass Systems, le foncé ») : familles de la rubrique Produits en bleu foncé du logo #001d6d (même atténuation qu'avant pour les familles non survolées). Menu mobile : titres de familles aussi. */
#gsm-produits .gsm-onglet{color:#001d6d}
.gsm-ecran[data-ecran="produits"] .gsm-mob-col{color:#001d6d}
/* 7 oct. 2026 (Jeremy : « trouvez ma solution en 3 questions pas en bleu dans le sous menu solutions ») : ce lien mis en avant prend la couleur du texte (avant : var(--accent-deep)). Panneau et écran mobile.
   Puis (« en gris trouvez ma solution ») : gris moyen #6b777e (contraste 4,6:1 sur blanc) au lieu de var(--ink). */
#gsm-solutions .gsm-fort[href*="/trouver-ma-solution/"],
.gsm-ecran[data-ecran="solutions"] .gsm-fort[href*="/trouver-ma-solution/"]{color:#6b777e}

/* 30 sept. 2026 (Jeremy : « la barre du top-barre en bleu de Glass Systems ») : bandeau du haut en bleu foncé du logo #001d6d (avant : var(--dark) #0a1116). Placé ici et non dans base.css, générée par un outil. */
.topbar{background:#001d6d}

/* Accroche en lien (rubrique Produits -> Tous les produits, 30 sept. 2026) : soulignée, bleu foncé au survol. */
.gsm-accroche a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gsm-accroche a:hover{color:#001d6d}

/* 1er oct. 2026 (Jeremy : « mets le même écartement de site sur toutes les pages ») :
   les marges des pages gamme (gamme.css .gm .wrap) deviennent celles de tout le site —
   contenu, barre du header et footer : pleine largeur, 11 % de l'écran entre 56 et
   220 px, 24 px sous 860 px. Avant : conteneur .wrap de 1200 px, marges 24 px.
   Sélecteurs choisis pour passer devant base.css et les feuilles de page
   (« body .wrap » > « .wrap » ; « #head .nav » > « body.sans-hero header .nav ») ;
   seuls changent max-width et les marges gauche/droite. Les colonnes de texte
   volontairement étroites (.qs-prose, .cmp-bandeau-txt .wrap…) restent étroites.
   Le méga-menu suit la barre (site.js lit son padding). */
body .wrap{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
#head .nav{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
@media (max-width:860px){
  body .wrap,#head .nav{padding-left:24px;padding-right:24px}
}
/* 5 oct. 2026 (Jeremy : « mets Nos réalisations centré à gauche ») : le bloc de titre de la
   galerie porte en style en ligne un conteneur de 1200 px centré (antérieur aux marges
   ci-dessus) ; sur grand écran il paraissait centré, décalé du reste. Il prend les mêmes
   marges que .wrap (même bord gauche que les filtres et la mosaïque, sur toutes les pages
   produit). !important : nécessaire face au style en ligne. Texte limité à ~70 caractères. */
#galerie > #realisations.cp-tete{max-width:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:clamp(56px,11vw,220px)!important;padding-right:clamp(56px,11vw,220px)!important}
#galerie > #realisations.cp-tete .cp-lede{max-width:70ch}
@media (max-width:860px){
  #galerie > #realisations.cp-tete{padding-left:24px!important;padding-right:24px!important}
}
/* 1er oct. 2026 (Jeremy : « mets tous les titres comme les nouveaux que l'on vient
   de faire » -> titres de section, tout le site) : style de l'Espace PRO
   (espace-pro.css .pr-h2 / .pr-sur) — grand titre Poppins 500, sans mot en bleu ;
   surtitre en majuscules, sans trait. Préfixe « body » pour passer devant les
   feuilles de page ; les couleurs des sections sombres (titre blanc, surtitre
   clair) restent celles des feuilles de page. Non concernés : titres dans le
   texte (.prose, .article-corps), titres de cartes et de formulaires. */
body :is(.cp-h2,.gm-h2),
body :is(.cmp-sec,.qs-sec,.ep-sec,.sec-head,.dc-tete,.dc-tete-ligne,.dc-catalogues-in,.dc-news,.dc-contact,.gm-devis,.qs-cta,.ep-cta,.cmp-relance-in) h2{
  font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(2.1rem,4.2vw,3.6rem);text-wrap:balance}
body :is(.cp-h2,.gm-h2) em,
body :is(.cmp-sec,.qs-sec,.ep-sec,.sec-head,.dc-tete,.dc-tete-ligne,.dc-catalogues-in,.dc-news,.dc-contact,.gm-devis,.qs-cta,.ep-cta,.cmp-relance-in) h2 em{
  font-style:normal;color:inherit!important}
body .eyebrow{font-family:"Hanken Grotesk",-apple-system,sans-serif;font-size:.92rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
body .eyebrow::before{display:none}
/* 1er oct. 2026 (Jeremy : « mets les mêmes typo des titres dans toutes les pages
   comme sur les pages gamme ») : tous les titres du contenu (h1, h2, h3 dans
   <main>) prennent la typo des pages gamme (gamme.css : Poppins 500,
   lettrage -0,02 em). !important : 37 règles de page fixent encore Jost /
   Hanken sur des titres, avec des sélecteurs plus précis. Tailles et couleurs
   inchangées. Le header, le méga-menu et le footer ne sont pas dans <main>. */
main :is(h1,h2,h3){font-family:"Poppins",-apple-system,sans-serif!important;font-weight:500!important;letter-spacing:-.02em!important}
/* Puis (même jour, « j'aimais bien que Essentiel par exemple soit plus fin ») :
   le mot mis en avant dans un titre (<em>) repasse en fin (Poppins 300), comme
   avant le passage en Poppins. Poppins 300 chargée dans views/layout.php. */
main :is(h1,h2) em{font-weight:300!important;font-style:normal}
/* 1er oct. 2026 (Jeremy : « dans le sous menu mets un bloc avec une image style
   nouveauté ») : bloc photo à droite du panneau, pour une rubrique qui déclare
   'nouveaute' dans config/nav.php (Produits : la marquise, comme le bloc
   « Nouveauté » de l'accueil). Même format que les cartes produit (300/420,
   25 rem au plus) pour s'aligner sur leur rangée ; badge et bouton blancs
   repris de accueil.css (.dc-marquise-badge, .dc-btn-blanc-plein). */
/* Même taille pour tous les blocs (Jeremy, même jour : « tous les blocs de la même
   taille ») : une seule largeur --gsm-carte pour les cartes et le bloc ; même
   format 300/420 plafonné à 25 rem, donc même hauteur. */
.gsm-grille.avec-nouv{--gsm-carte:clamp(210px,14vw,calc(25rem * 300 / 420));
  grid-template-columns:clamp(300px,24vw,400px) minmax(0,1fr) calc(var(--gsm-carte) + 64px)}
/* Trait de séparation retiré le 1er oct. 2026 (Jeremy : « enlève le filet »). Avant : border-left:1px solid var(--line-soft). */
.gsm-nouv-col{padding:48px 40px 48px 24px}
.gsm-nouv{position:relative;display:block;border-radius:16px;overflow:hidden;background:#0c1417;color:#fff;
  aspect-ratio:300/420;max-height:25rem;width:var(--gsm-carte,100%);box-shadow:0 24px 50px -30px rgba(12,40,58,.55)}
.gsm-nouv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 25%;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.gsm-nouv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,16,20,.88) 0%,rgba(8,16,20,.62) 38%,rgba(8,16,20,0) 72%)}
.gsm-nouv:hover img,.gsm-nouv:focus-visible img{transform:scale(1.05)}
.gsm-nouv-badge{position:absolute;top:16px;left:16px;z-index:1;background:#fff;color:#0d77bd;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.gsm-nouv-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding:22px}
.gsm-nouv-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.25rem,1.5vw,1.6rem);line-height:1.1;letter-spacing:-.02em;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.gsm-nouv-d{font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.92);margin-top:8px;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.gsm-nouv-btn{margin-top:16px;display:inline-flex;font-family:"Poppins",sans-serif;font-weight:600;font-size:.86rem;
  padding:10px 18px;border-radius:8px;background:#fff;color:#0f161b;box-shadow:0 10px 30px -12px rgba(0,0,0,.45);
  transition:transform .25s ease,color .25s ease}
.gsm-nouv:hover .gsm-nouv-btn{transform:translateY(-2px);color:#0d77bd}
/* Menu mobile (écran Produits) : bandeau paysage sous l'accroche. */
.gsm-nouv.gsm-nouv-mob{aspect-ratio:16/10;max-height:none;margin:4px 0 18px}
.gsm-nouv-mob .gsm-nouv-txt{padding:16px 18px}
.gsm-nouv-mob .gsm-nouv-t{font-size:1.25rem}
@media (prefers-reduced-motion:reduce){ .gsm-nouv img,.gsm-nouv-btn{transition:none} }
/* Les cartes produit gardent au moins 210 px de large à côté du bloc (en dessous,
   leur titre passait sur la 3D) : s'il n'y a pas la place pour 4, la rangée
   défile avec la flèche, comme celles de 6 produits. Sous 1280 px, pas de bloc. */
.gsm-grille.avec-nouv .gsm-piste:not(.en-grille){grid-auto-columns:var(--gsm-carte)}
/* Rubriques sans photo (cartes en grille) : même largeur, autant de colonnes que la place permet. */
.gsm-grille.avec-nouv .gsm-piste.en-grille{grid-template-columns:repeat(auto-fill,var(--gsm-carte))}
@media (max-width:1279px){
  .gsm-grille.avec-nouv{grid-template-columns:clamp(300px,24vw,400px) minmax(0,1fr)}
  .gsm-grille.avec-nouv .gsm-nouv-col{display:none}
}

/* Bloc étroit (moins de 250 px, écrans de 1280 à ~1780 px) : la phrase est masquée,
   le titre, le badge et le bouton tiennent sans se chevaucher. */
.gsm-nouv{container-type:inline-size}
.gsm-nouv-btn{white-space:nowrap}
.gsm-nouv::after{background:linear-gradient(0deg,rgba(8,16,20,.9) 0%,rgba(8,16,20,.66) 45%,rgba(8,16,20,0) 82%)}
.gsm-nouv-t{font-size:clamp(1.15rem,1.35vw,1.6rem)}
@container (max-width:249px){
  .gsm-nouv-d{display:none}
  .gsm-nouv-txt{padding:18px}
}

/* 2 oct. 2026 (Jeremy : « dans le sous menu Conseils & guide mets les 4 derniers
   articles », puis « mets-les en dessous et mets-les comme sur la home avec les
   images et tout ») : rangée de 4 cartes SOUS les cartes de la colonne (header.php,
   clé 'articles' de nav.php), au format des cartes « Conseils & guides » de
   l'accueil (accueil.css, .dc-conseil) : carte blanche, photo, titre, date + flèche.
   Photo en 4/3 au lieu du 4/4,6 de l'accueil, pour tenir dans la hauteur du panneau. */
.gsm-articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;max-width:1100px}
.gsm-art{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,22,27,.07);border-radius:6px;overflow:hidden;
  color:#0f161b;text-decoration:none;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.gsm-art:hover{border-color:#17a3ec;transform:translateY(-4px);box-shadow:0 20px 50px -30px rgba(12,40,58,.5);color:#0f161b}
.gsm-art-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#eef1f3}
.gsm-art-img img{display:block;width:100%;height:100%;object-fit:cover}
.gsm-art-txt{display:flex;flex-direction:column;justify-content:space-between;gap:12px;flex:1;padding:14px 16px 16px}
.gsm-art-t{display:block;font-family:"Jost",sans-serif;font-size:1rem;font-weight:500;line-height:1.3;min-width:0;max-width:100%}
.gsm-art-d{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;color:#3d4a52}
.gsm-art-d span{color:#0d77bd;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){ .gsm-art{transition:none} .gsm-art:hover{transform:none} }

/* La rangée ne doit pas élargir le panneau (sinon la 4e carte passe sous le bloc
   « Catalogues » ou sort de l'écran) : les conteneurs qui la portent peuvent rétrécir,
   et elle garde à droite la même réserve que les cartes du dessus (.en-grille). */
.gsm-contenu:has(.gsm-articles),.gsm-panneau:has(> .gsm-articles){min-width:0}
.gsm-articles{width:auto;max-width:min(1100px,calc(100% - 48px))}
.gsm-art{min-width:0}

/* 2 oct. 2026 (Jeremy : « mets un titre les derniers articles et mets les mêmes
   arrondis que les blocs du sous-menu ») : titre au-dessus de la rangée ; cartes
   arrondies à 24 px comme .gsm-carte (6 px avant, celui de l'accueil). */
.gsm-articles-titre{margin:30px 0 0;font-family:"Jost",sans-serif;font-size:1.25rem;font-weight:400;color:var(--ink)}
/* Titre -> cartes : 8 px. Le panneau est en flex avec gap:18px, d'où la marge négative
   (2 oct. 2026, Jeremy : « mets moins d'espace entre le titre et les articles » ; 32 px avant). */
.gsm-articles-titre + .gsm-articles{margin-top:-10px}
.gsm-art{border-radius:24px}

/* 2 oct. 2026 — ESSAI (Jeremy : « diminue la hauteur des images et enlève la date et
   la flèche pour voir ») : photo 4/3 -> 16/9, ligne date + flèche masquée (elle reste
   dans header.php). Pour revenir : supprimer ces trois lignes. */
.gsm-art-img{aspect-ratio:16/9}
.gsm-art-txt{padding:12px 16px 14px}
/* Même jour (Jeremy : « remets la flèche mais avec moins de margin et moins de margin
   au-dessus du titre ») : flèche seule (la date reste masquée : texte à 0), collée au
   titre (4 px au lieu de 12), alignée à droite ; titre « Les derniers articles » à 24 px
   des cartes du dessus au lieu de 48 (le panneau ajoute 18 px de gap). */
.gsm-art-d{display:flex;justify-content:flex-end;font-size:0;line-height:1}
.gsm-art-d span{font-size:1.05rem}
.gsm-art-txt{gap:4px;justify-content:flex-start}   /* flèche juste sous le titre (Jeremy : « remonte la flèche dans les blocs ») */
/* Même jour (Jeremy : « diminue l'espace avant et après la flèche des blocs ») : plus
   d'écart au-dessus de la flèche, ligne de la flèche au plus juste, 10 px en dessous. */
.gsm-art-txt{gap:0;padding-bottom:10px}
.gsm-art-d span{line-height:1;display:block}
.gsm-articles-titre{margin-top:6px}

/* 9 oct. 2026 (Jeremy : « dans le sous menu ressources > Documentation tu mettes recevoir le
   catalogue comme ceci », maquette jointe) : bandeau sous les cartes de la colonne
   (header.php, clé 'catalogue' de nav.php). Gauche : couverture du catalogue multiproduits
   inclinée sur fond vert d'eau ; droite : fond blanc, titre en gras. Bord fin et arrondi
   comme les autres blocs du sous-menu ; survol = bord bleu et léger soulèvement, comme .gsm-art. */
.gsm-cat{display:grid;grid-template-columns:40% 1fr;align-items:stretch;width:100%;max-width:420px;min-height:108px;
  background:#fff;border:1px solid rgba(15,22,27,.1);border-radius:16px;overflow:hidden;color:#0f161b;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.gsm-cat:hover{border-color:#17a3ec;transform:translateY(-3px);box-shadow:0 20px 50px -30px rgba(12,40,58,.5);color:#0f161b}
.gsm-cat-img{position:relative;display:flex;align-items:center;justify-content:center;background:#c6ecdb;overflow:hidden}
.gsm-cat-img img{display:block;width:auto;height:86px;max-width:none;transform:rotate(-8deg);border-radius:2px;
  box-shadow:0 10px 18px -8px rgba(12,40,58,.45)}
.gsm-cat-t{display:flex;align-items:center;padding:16px 20px;font-family:"Jost",sans-serif;font-size:1.15rem;font-weight:600;line-height:1.25}
.gsm-cat-mob{margin:16px 0 4px;max-width:none}
@media (prefers-reduced-motion:reduce){ .gsm-cat{transition:none} .gsm-cat:hover{transform:none} }

/* 9 oct. 2026 (Jeremy : « enlève la phrase dans le top barre et mets access pro a droite ») :
   la barre du haut ne porte plus que le lien « Accès pro », calé à droite, aligné sur la marge
   de la barre de navigation (24 px). « header .topbar » l'emporte sur le centrage de base.css
   et d'accueil.css. Couleurs et hauteur de la barre inchangées. */
header .topbar{justify-content:flex-end;padding-right:24px}
.topbar-pro{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-weight:500;letter-spacing:.04em}
.topbar-pro:hover{color:#5cc4f2}
@media(max-width:560px){ header .topbar{padding-right:12px} }
/* 13 oct. 2026 (Jeremy : « access pro centré à droite de étude gratuite », puis « reste dans la
   barre bleue ») : marge droite = celle de la barre de navigation (#head .nav, plus haut), le lien
   tombe au-dessus du bord droit du bouton « Étude gratuite ». Avant : 24 px. */
header .topbar{padding-right:clamp(56px,11vw,220px)}
@media (max-width:860px){ header .topbar{padding-right:24px} }
/* 13 oct. 2026 : 7e rubrique (Blog) -> la barre déborde. Le téléphone ne se coupe plus sur
   5 lignes (nowrap) et n'est affiché que s'il y a la place ; écart minimal menu / bouton ;
   rubriques un peu plus serrées sur les petits écrans larges. */
.nav-tel{white-space:nowrap}
@media (min-width:1100px){ .nav-cta{margin-left:24px} }
@media (min-width:1100px) and (max-width:1279px){ .gsn ul{gap:16px} }
@media (min-width:1100px) and (max-width:1699px){ .nav-tel{display:none!important} }
/* 15 oct. 2026 (Jeremy : « le lien dans le top bar je le voudrais plus gros ») : « Accès pro »
   passe de .82rem à 1rem, en gras, picto 20 px. Marges verticales réduites d'autant : la barre
   garde sa hauteur (≈ 35 px), le header et les grands visuels ne bougent pas. */
header .topbar{padding-top:7px;padding-bottom:7px}
.topbar-pro{font-size:1rem;font-weight:600;letter-spacing:.03em;gap:9px}
.topbar .topbar-pro svg{width:20px;height:20px}
@media(max-width:560px){ header .topbar{padding-top:6px;padding-bottom:6px} .topbar-pro{font-size:.9rem} .topbar .topbar-pro svg{width:17px;height:17px} }

/* 28 oct. 2026 (Jeremy : « grossis le logo sur la home, sur le footer, dans les pages et sur le header
   sticky ») : logo des pages +20 % — haut de page 80 -> 96 px, header sticky et pages sans grand
   visuel 66 -> 80 px, mobile 60/66 -> 72 px. Ces règles passent devant base.css (chargée avant) ;
   l'accueil a les siennes dans pages/accueil.css. */
.brand img{height:96px}
header.scrolled .brand img, body.sans-hero header .brand img{height:80px}
@media(max-width:560px){ .brand img, header.scrolled .brand img, body.sans-hero header .brand img{height:72px} }