/* @import Google Fonts retiré le 2 oct. 2026 (audit RGPD) : polices servies par assets/css/fonts.css, lié par views/layout.php. */
/* gamme.css — pages gamme (GAM_SYSPANO en premier).
 * 30 sept. 2026, Jeremy : « voici une inspiration pour la page gamme verres &
 * panoramique : tylko.com/fr-fr/gammes-de-produits/etageres-murales/ — fais
 * pareil mais avec la charte de Glass Systems ».
 * Repris de Tylko : fond blanc, grand titre sobre avec chapeau en regard,
 * filtres en pastilles, grandes cartes produit (visuel détouré sur fond gris
 * clair, nom, usage, caractéristiques, pastilles de couleur), grand visuel
 * éditorial, bandeau d'arguments, comparatif, FAQ.
 * Charte Glass Systems : tokens de base.css (encre, bleu --accent), titres en
 * Poppins 500 comme l'accueil et la page Solutions, rayons 16-24 px.
 */

.gm{background:#fff;color:var(--ink)}
/* 30 sept. (Jeremy : « prends la même largeur que la page tous les produits ») :
   pleine largeur, marges de solutions.css (5 % de l'écran entre 48 et 96 px,
   24 px sous 860 px). Avant : conteneur de 1400 px. */
/* Puis (« mets plus de marges, le site est un peu trop large ») : 5 % -> 8 % de l'écran,
   entre 48 et 160 px (115 px à 1440, 154 px à 1920). */
/* Puis (30 sept., « mets la même sur la gamme ») : 11 % comme la page Essentiel. */
.gm .wrap{max-width:none;padding:0 clamp(56px,11vw,220px)}
@media (max-width:860px){ .gm .wrap{padding:0 24px} }
.gm h1,.gm h2,.gm h3{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.02em}
.gm-sec{padding:clamp(64px,8vw,112px) 0}
.gm-h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;margin:0 0 14px;text-wrap:balance}
.gm-h2 em{font-style:normal;color:var(--accent-deep)}
.gm-intro{font-size:1.02rem;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin:0}
.gm-tete-sec{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,44px)}
.gm-lien{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:var(--ink);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.gm-lien:hover{color:var(--accent-deep)}
.gm-lien svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------
   En-tête : fil d'Ariane, titre à gauche, chapeau à droite (Tylko)
   ------------------------------------------------------------------ */
.gm-haut{padding:clamp(28px,4vw,48px) 0 0}
.gm-ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.82rem;color:var(--ink-soft)}
.gm-ariane li+li::before{content:"/";margin-right:6px;opacity:.5}
.gm-ariane a:hover{color:var(--accent-deep);text-decoration:underline}
.gm-titre{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(32px,6vw,96px);align-items:end;
  margin:clamp(20px,3vw,36px) 0 clamp(28px,3.5vw,44px)}
.gm-titre h1{font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.02;margin:0}
.gm-titre h1 small{display:block;margin-top:14px;font-size:.95rem;font-weight:400;letter-spacing:0;color:var(--ink-soft);font-family:"Hanken Grotesk",sans-serif}
.gm-chapo{font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.65;color:var(--ink-soft);margin:0}
.gm-chapo b{color:var(--ink);font-weight:600}

/* Filtres en pastilles */
.gm-filtres{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:clamp(22px,3vw,32px);border-bottom:1px solid var(--line-soft)}
.gm-filtre{position:relative;display:inline-flex;cursor:pointer}
.gm-filtre input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gm-filtre span{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#f2f4f5;
  border:1px solid transparent;font-size:.92rem;line-height:1.2;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.gm-filtre span i{font-style:normal;font-size:.78rem;color:var(--ink-soft)}
.gm-filtre:hover span{background:#e7ebee}
.gm-filtre input:checked + span{background:var(--ink);color:#fff}
.gm-filtre input:checked + span i{color:rgba(255,255,255,.7)}
.gm-filtre input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------------
   Grille produits
   ------------------------------------------------------------------ */
.gm-liste{padding:clamp(28px,3.5vw,44px) 0 clamp(64px,8vw,104px)}
.gm-produits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.gm-produit[hidden],.gm-encart[hidden]{display:none}
.gm-carte{display:flex;flex-direction:column;gap:18px;color:var(--ink);text-decoration:none;height:100%}
.gm-visu{position:relative;display:block;aspect-ratio:4/4.3;border-radius:18px;overflow:hidden;background:var(--bone)}
.gm-3d{position:absolute;inset:12% 10% 10%;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,transform .5s ease}
.gm-3d img{width:100%;height:100%;object-fit:contain;transform:translateX(var(--dx,0%)) scale(var(--e,1))}
.gm-photo{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.gm-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.gm-carte:hover .gm-photo,.gm-carte:focus-visible .gm-photo{opacity:1}
.gm-carte:hover .gm-photo img,.gm-carte:focus-visible .gm-photo img{transform:scale(1.05)}
.gm-carte:hover .gm-3d,.gm-carte:focus-visible .gm-3d{opacity:0;transform:scale(.96)}
.gm-badges{position:absolute;top:16px;left:16px;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.gm-badge{padding:6px 11px;border-radius:999px;background:#fff;font-size:.74rem;font-weight:600;letter-spacing:.01em;color:var(--ink);
  box-shadow:0 2px 8px -4px rgba(0,0,0,.25)}
.gm-badge.bleu{background:var(--accent);color:#fff}
.gm-info{display:flex;flex-direction:column;gap:8px;flex:1}
.gm-nom-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gm-nom{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
.gm-type{flex:none;font-size:.78rem;color:var(--ink-soft);white-space:nowrap}
.gm-role{font-size:.93rem;line-height:1.5;color:var(--ink-soft);margin:0}
.gm-specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0}
.gm-specs li{padding:5px 10px;border-radius:6px;border:1px solid var(--line);font-size:.78rem;line-height:1.25;color:var(--ink)}
.gm-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px}
.gm-teintes{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-soft)}
.gm-teinte{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 2px #fff}
.gm-decouvrir{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--accent-deep)}
.gm-decouvrir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.gm-carte:hover .gm-decouvrir svg{transform:translateX(4px)}
.gm-carte:hover .gm-nom{color:var(--accent-deep)}

/* Encart dans la grille : aide au choix */
/* (span 2 retiré le 30 sept. : avec le bloc Configurez en tête, 1 + 4 produits + encart = 2 rangées pleines.) */
.gm-encart a{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:100%;min-height:360px;padding:clamp(26px,3vw,38px);
  border-radius:18px;background:#001d6d;color:#fff;text-decoration:none;position:relative;overflow:hidden}   /* bleu foncé du logo (30 sept., Jeremy) ; avant : var(--dark) */
.gm-encart a::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 100% 0%,rgba(90,173,220,.35),transparent 60%)}   /* halo bleu clair du logo */
.gm-encart a > *{position:relative}
.gm-encart .eyebrow{color:#86d3f6}
.gm-encart-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.15;letter-spacing:-.02em}
.gm-encart-d{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.8)}
.gm-encart-b{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;transition:background .2s,color .2s}
.gm-encart a:hover .gm-encart-b{background:var(--accent);color:#fff}
.gm-encart-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Bloc « Configurez » (30 sept., capture Tylko de Jeremy) : dégradé aux
   couleurs de la marque, surtitre + grand mot en blanc, produit détouré qui
   sort du cadre à gauche, bouton blanc centré en bas. */
.gm-config a{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:540px;
  border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#0d77bd 0%,#4aa9e2 38%,#bfe0f4 72%,#e6f2fa 100%)}
.gm-config-haut{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:clamp(26px,2.6vw,36px)}
.gm-config-sur{font-weight:600;font-size:1rem}
.gm-config-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(2rem,3vw,3.2rem);line-height:1;letter-spacing:-.03em}   /* réduit avec les marges à 11 % : le mot débordait de la carte */
.gm-config-d{font-size:.92rem;color:rgba(255,255,255,.85);margin-top:6px}
.gm-config-img{position:absolute;left:-12%;bottom:16%;width:80%;max-width:none;height:auto;
  filter:drop-shadow(0 30px 30px rgba(12,40,58,.25));transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gm-config a:hover .gm-config-img{transform:translateX(4%) scale(1.03)}
.gm-config-b{position:relative;z-index:1;align-self:center;margin-bottom:clamp(24px,2.6vw,34px);padding:15px 30px;border-radius:999px;
  background:#fff;color:var(--ink);font-weight:600;font-size:1rem;box-shadow:0 10px 24px -12px rgba(0,0,0,.35);transition:background .2s,color .2s}
.gm-config a:hover .gm-config-b{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){ .gm-config-img{transition:none} }
/* ------------------------------------------------------------------
   Grand visuel éditorial
   ------------------------------------------------------------------ */
.gm-edito{position:relative}
.gm-edito-img{position:relative;border-radius:24px;overflow:hidden;min-height:clamp(380px,42vw,560px)}
.gm-edito-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gm-edito-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,20,.82) 0%,rgba(8,16,20,.6) 38%,rgba(8,16,20,.1) 68%,rgba(8,16,20,0) 80%)}
.gm-edito-txt{text-shadow:0 1px 12px rgba(0,0,0,.35);position:absolute;z-index:1;left:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,56px);max-width:520px;color:#fff}
.gm-edito-txt .eyebrow{color:#86d3f6}
.gm-edito-txt .eyebrow::before{background:#86d3f6}
.gm-edito-txt h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;margin:14px 0 14px}
.gm-edito-txt p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.88);margin:0 0 22px}

/* ------------------------------------------------------------------
   Arguments
   ------------------------------------------------------------------ */
.gm-args{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
/* 30 sept. (Jeremy) : fond bleu clair essayé puis abandonné (« non reviens comme
   avant en gris mais mets la typo en bleu clair du logo ») : fond gris d'origine,
   texte et icônes en bleu clair du logo #56add8. */
.gm-arg{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:18px;background:var(--bone);color:#001d6d}   /* texte : bleu foncé du logo (30 sept., « mets typo en bleu foncé ») ; icônes restées bleu clair */
.gm-arg svg{stroke:#56add8!important}
.gm-arg .gm-arg-d{color:#001d6d;opacity:.8}
/* « moins de margin en haut et en bas » (30 sept.) : 64-112 px -> 28-48 px. */
.gm-args-sec{padding:clamp(40px,5vw,72px) 0}   /* « un peu plus de margin quand même » : 48 -> 72 px */
/* L'espace au-dessus venait surtout du bas de la grille produits (64-104 px) : ramené à 28-48 px, et le haut du bloc à 0 -> même écart dessus et dessous. */
.gm-liste{padding-bottom:clamp(40px,5vw,72px)}
.gm-args-sec{padding-top:0}
.gm-arg svg{width:34px;height:34px;fill:none;stroke:var(--accent-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.gm-arg-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.12rem;line-height:1.25;letter-spacing:-.01em}
.gm-arg-d{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

/* ------------------------------------------------------------------
   Comparatif
   ------------------------------------------------------------------ */
.gm-comp{background:var(--cream)}
/* 30 sept. (Jeremy : « en plus grand, 2 par 2, flèche vers la droite, filtre en
   haut ») : critères fixes à gauche, produits en rangée qui défile 2 par 2.
   Les lignes ont une hauteur fixe pour rester alignées avec les critères. */
.gm-cmp-barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.gm-cmp-filtres{padding:0;border:0}
.gm-cmp-filtres .gm-filtre span{background:#fff}
.gm-cmp-filtres .gm-filtre input:checked + span{background:var(--ink)}
.gm-cmp-nav{display:flex;align-items:center;gap:10px}
.gm-cmp-pos{font-size:.88rem;color:var(--ink-soft);margin-right:6px;min-width:4.5em;text-align:right}
.gm-cmp-fl{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.gm-cmp-fl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gm-cmp-fl:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.gm-cmp-fl:disabled{opacity:.3;cursor:default}
.gm-cmp-nav[hidden]{display:none}
/* 30 sept. (Jeremy : « mets plus de hauteur dans les images du comparer ») : 400 -> 580 px. */
.gm-cmp{--hd:580px;--lh:66px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px}   /* colonne des critères : 220 -> 280 -> 360 px (30 sept., « encore plus grande ») */
.gm-cmp-hd{height:var(--hd)}
.gm-cmp-l{height:var(--lh);display:flex;align-items:center;border-top:1px solid var(--line);font-weight:600;font-size:.98rem;color:var(--ink-soft)}   /* +1 pt (30 sept.) */
.gm-cmp-piste{list-style:none;margin:0;padding:0;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.gm-cmp-piste::-webkit-scrollbar{display:none}
.gm-cmp-col{flex:0 0 calc((100% - 16px) / 2);scroll-snap-align:start;background:#fff;border-radius:22px;overflow:hidden}
.gm-cmp-col[hidden]{display:none}
.gm-cmp-col a.gm-cmp-hd{display:flex;flex-direction:column;gap:8px;padding:24px 28px 26px;color:var(--ink);text-decoration:none}
.gm-cmp-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--bone);padding:18px;margin-bottom:10px}
.gm-cmp-img img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(var(--e,1));transition:transform .5s ease}
.gm-cmp-col a.gm-cmp-hd:hover .gm-cmp-img img{transform:scale(calc(var(--e,1) * 1.05))}
.gm-cmp-type{font-size:.8rem;color:var(--ink-soft)}
.gm-cmp-nom{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em}
.gm-cmp-col a.gm-cmp-hd:hover .gm-cmp-nom{color:var(--accent-deep)}
.gm-cmp-col dl{margin:0;padding:0 28px}
.gm-cmp-v{height:var(--lh);display:flex;align-items:center;border-top:1px solid var(--line);font-size:1.08rem;line-height:1.35}   /* +1 pt (30 sept.) */
.gm-cmp-v dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gm-cmp-v dd{margin:0}
.gm-oui{color:var(--accent-deep);font-weight:600}
.gm-non{color:var(--ink-soft)}
@media (max-width:1100px){ .gm-cmp{grid-template-columns:260px minmax(0,1fr);gap:24px} }
@media (max-width:760px){
  /* Une colonne à la fois ; les critères passent dans chaque carte. */
  .gm-cmp{grid-template-columns:minmax(0,1fr)}
  .gm-cmp-labels{display:none}
  .gm-cmp-col{flex-basis:88%}
  .gm-cmp-hd{height:auto}
  .gm-cmp-img{height:300px}
  .gm-cmp-v{height:auto;min-height:0;display:block;padding:14px 0}
  .gm-cmp-v dt{position:static;width:auto;height:auto;clip:auto;font-size:.86rem;font-weight:600;color:var(--ink-soft);margin-bottom:3px}
  .gm-cmp-pos{display:none}
}

/* ------------------------------------------------------------------
   Comparer les détails (30 sept., captures Tylko de Jeremy) : fond gris
   chaud clair, lignes séparées par un filet, icône + titre ; ouvert, la
   grille 1/3 vide + 2 colonnes (photo, nom, 2-3 lignes). (Remplace la
   rangée « Inspirations » du même jour.)
   ------------------------------------------------------------------ */
.gm-det{background:#f2f0ef}
.gm-det .gm-h2{margin-bottom:clamp(28px,3.5vw,44px)}
/* 30 sept. (Jeremy : « mets pareil qu'en haut, c'est la suite logique : Essentiel,
   Premium, Rideau de Verre, Paroi, avec la flèche comme en haut et le filtre ») :
   les 4 systèmes dans l'ordre du comparatif, 2 visibles ; flèches et filtre font
   glisser TOUTES les lignes ensemble (--i posé sur la section par gamme.js). */
.gm-det{--n:2;--g:16px}
.gm-det-barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.gm-det-barre .gm-filtres{padding:0;border:0}
.gm-det-barre .gm-filtre span{background:#fff}
.gm-det-barre .gm-filtre input:checked + span{background:var(--ink)}
.gm-det-tete,.gm-det-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--g)}
.gm-det-vue{overflow:hidden;min-width:0}
.gm-det-piste{display:flex;gap:var(--g);transition:transform .5s cubic-bezier(.22,1,.36,1);
  transform:translateX(calc(var(--i,0) * -1 * (100% + var(--g)) / var(--n)))}
.gm-det-piste > *{flex:0 0 calc((100% - var(--g) * (var(--n) - 1)) / var(--n));min-width:0}
.gm-det-piste > [hidden]{display:none}
.gm-det-tete{padding-bottom:14px}
.gm-det-tete a{display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none}
.gm-det-photo{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#e4e1df}
.gm-det-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gm-det-tete a:hover .gm-det-photo img{transform:scale(1.04)}
.gm-det-tete b{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.1rem;letter-spacing:-.01em}
.gm-det-tete small{font-size:.84rem;color:var(--ink-soft)}
.gm-det-tete a:hover b{color:var(--accent-deep)}
.gm-det-l{border-top:1px solid rgba(15,22,27,.25)}
.gm-det-l:last-of-type{border-bottom:1px solid rgba(15,22,27,.25)}
.gm-det-l summary{display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer;list-style:none;font-size:1.25rem;color:var(--ink)}
.gm-det-l summary::-webkit-details-marker{display:none}
.gm-det-l summary::after{margin-left:auto}
.gm-det-l summary svg{width:20px;height:20px;flex:none;fill:none;stroke:#001d6d;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gm-det-l summary:hover{color:var(--accent-deep)}
.gm-det-l summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.gm-det-grille{padding:4px 0 34px}
.gm-det-grille figure{margin:0}
.gm-det-grille img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#e4e1df}
.gm-det-grille img.entier{object-fit:contain;padding:6%;background:#e8e5e3}   /* photos de la Paroi (~320 px) : entières, pas recadrées */
.gm-det-grille img.entier[src*="couleurs-garde-corps-glass-systems"]{background:#fff}   /* 21 oct. 2026 (Jeremy) : Finitions & couleurs du Garde-corps sur fond blanc */
.gm-det-grille img.entier[src*="garde-corps-verre-profile-fixation-au-sol"],
.gm-det-grille img.entier[src*="cloture-vitree-noire-a-quatre-travees"]{background:#fff;padding:2%}   /* 22 oct. 2026 (Jeremy) : fixation du garde-corps, fond blanc et plus grand */
.gm-det-vide{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#e8e5e3;color:var(--ink-soft);font-size:.9rem}
.gm-det-grille figcaption{display:flex;flex-direction:column;gap:12px;padding-top:22px;font-size:1rem;line-height:1.4;color:var(--ink)}
.gm-det-nom{display:none;font-weight:600}
@media (max-width:860px){
  .gm-det-tete,.gm-det-grille{grid-template-columns:minmax(0,1fr)}
  .gm-det-tete > span:first-child,.gm-det-grille > span:first-child{display:none}
}
@media (max-width:560px){ .gm-det{--n:1} .gm-det-nom{display:block} .gm-det-tete{display:none} }
@media (prefers-reduced-motion:reduce){ .gm-det-piste{transition:none} }
/* ------------------------------------------------------------------
   Ressources
   ------------------------------------------------------------------ */
.gm-res{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gm-res a{display:flex;flex-direction:column;gap:14px;height:100%;padding:22px;border-radius:16px;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.gm-res a:hover{border-color:var(--accent);background:var(--accent-soft)}
.gm-res svg{width:28px;height:28px;fill:none;stroke:var(--accent-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gm-res-t{font-weight:600;font-size:.98rem;line-height:1.3}
.gm-res-d{font-size:.84rem;line-height:1.45;color:var(--ink-soft)}

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */
.gm-faq-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px);align-items:start}
.gm-faq-q{border-bottom:1px solid var(--line)}
.gm-faq-q:first-child{border-top:1px solid var(--line)}
.gm-faq-q summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
  font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.06rem;line-height:1.35}
.gm-faq-q summary::-webkit-details-marker{display:none}
/* Flèche fine bleue, la même que les accordéons des fiches produits (.cp-acc) */
.gm-faq-q summary::after,.gm-det-l 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}
.gm-faq-q[open] summary::after,.gm-det-l[open] summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){ .gm-faq-q summary::after,.gm-det-l summary::after{transition:none} }
.gm-faq-q summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.gm-faq-r{padding:0 52px 24px 0;color:var(--ink-soft);line-height:1.65}
.gm-faq-r p{margin:0}

/* ------------------------------------------------------------------
   Articles
   ------------------------------------------------------------------ */
.gm-blog{background:var(--cream)}
.gm-articles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.gm-article a{display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration:none}
.gm-article-img{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--bone)}
.gm-article-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gm-article a:hover .gm-article-img img{transform:scale(1.05)}
.gm-article-date{font-size:.78rem;color:var(--ink-soft)}
.gm-article-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.02rem;line-height:1.35;letter-spacing:-.01em}
.gm-article a:hover .gm-article-t{color:var(--accent-deep)}

/* ------------------------------------------------------------------
   Étude gratuite
   ------------------------------------------------------------------ */
.gm-devis{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.gm-devis::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 0% 100%,rgba(23,163,236,.28),transparent 60%)}
.gm-devis .wrap{position:relative}
.gm-devis-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.gm-devis .eyebrow{color:#86d3f6}
.gm-devis .eyebrow::before{background:#86d3f6}
.gm-devis h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;margin:14px 0 16px;color:#fff}
.gm-devis h2 em{font-style:normal;color:#5cc4f2}
.gm-devis-lede{color:rgba(255,255,255,.8);line-height:1.65;margin:0 0 22px;max-width:52ch}
.gm-devis-args{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.gm-devis-args li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.9)}
.gm-devis-args svg{flex:none;width:20px;height:20px;fill:none;stroke:#5cc4f2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.gm-devis-tel{display:inline-flex;align-items:center;gap:12px;color:#fff}
.gm-devis-tel b{font-size:1.1rem}
.gm-devis-tel svg{width:20px;height:20px;fill:none;stroke:#5cc4f2;stroke-width:2}
.gm-form{background:#fff;color:var(--ink);border-radius:22px;padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.gm-form h3{font-size:1.35rem;margin:0 0 4px}
.gm-form-sous{font-size:.84rem;color:var(--ink-soft);margin:0 0 18px}
.gm-form-req{color:#d33}
.gm-form-champs{display:grid;gap:14px}
.gm-form-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gm-form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.gm-form input[type=text],.gm-form input[type=email],.gm-form input[type=tel],.gm-form select,.gm-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
.gm-form input:focus,.gm-form select:focus,.gm-form textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.gm-form-radios{display:flex;gap:18px}
.gm-form-radios label{display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:500;color:var(--ink)}
.gm-form-consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;font-size:.8rem!important;line-height:1.45}
.gm-form-consent a{text-decoration:underline}
.gm-form-mentions{font-size:.76rem;color:var(--ink-soft);text-align:center;margin:0}
.gm-form-erreurs{margin:0 0 14px;padding:12px 16px 12px 32px;border-radius:10px;background:#fdecec;color:#a11;font-size:.86rem}
.gm-form-ok{text-align:center;padding:20px 0}
.gm-form-ok h3{margin:10px 0}
.gm-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gm-form .btn{width:100%;justify-content:center}

/* ------------------------------------------------------------------
   Écrans plus étroits
   ------------------------------------------------------------------ */
@media (max-width:1100px){
  .gm-res{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gm-args{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .gm-produits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-titre,.gm-faq-grille,.gm-devis-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .gm-produits,.gm-args,.gm-articles{grid-template-columns:minmax(0,1fr)}
  .gm-res{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-form-duo{grid-template-columns:minmax(0,1fr)}
  .gm-edito-img{min-height:460px}
  .gm-edito-img::after{background:linear-gradient(0deg,rgba(8,16,20,.75) 0%,rgba(8,16,20,.3) 55%,rgba(8,16,20,0) 80%)}
  .gm-edito-txt{right:24px}
  .gm-faq-r{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .gm-3d,.gm-photo,.gm-photo img,.gm-article-img img,.gm-decouvrir svg{transition:none}
}
/* 30 sept. (Jeremy : « mets le header aligné à la page ») : la barre du header prend
   les mêmes marges que le contenu (.gm .wrap) — logo calé sur le titre, bouton
   « Étude gratuite » sur le bord droit du contenu. Le méga-menu suit (site.js lit
   le padding de la barre). Avant : max-width 1360 px, marges 24 px. */
body.page-gamme #head .nav{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
@media (max-width:860px){ body.page-gamme #head .nav{padding-left:24px;padding-right:24px} }

/* 30 sept. (Jeremy : « mets un background bleu dans comparer les systèmes »,
   puis « non un bleu clair très doux ») : fond #eaf4fa = bleu clair du logo
   (#56add8) très dilué. Textes foncés comme ailleurs, accent du titre et filtre
   actif en bleu foncé du logo #001d6d. (Essai bleu foncé abandonné.) */
#comparatif{background:#eaf4fa}
#comparatif .gm-h2 em{color:#56add8}
#comparatif .gm-cmp-l{border-top-color:rgba(0,29,109,.14)}
#comparatif .gm-filtre input:checked + span{background:#001d6d;color:#fff}
/* Carte sans rendu 3D (Protection Vitrée, gamme Garde-corps, 30 sept.) : la photo est visible d'emblée. */
.gm-carte.sans-3d .gm-photo{opacity:1}

/* Encart « Quel système » sur 2 colonnes quand la grille compte 5 cases (gamme Garde-corps : bloc + 3 produits + encart). */
.gm-encart-large{grid-column:span 2}
@media (max-width:620px){ .gm-encart-large{grid-column:auto} }

/* Gamme Pergolas (bloc + 7 produits + encart = 9 cases) : pleine en 3 colonnes ; en 2 colonnes, l'encart prend la rangée entière. */
@media (min-width:621px) and (max-width:960px){ .gm-encart-l2{grid-column:span 2} }

/* Bloc « Configurez » de la gamme Pergolas (30 sept., Jeremy : « laisse la couleur d'avant, le marron qui était dans la page ») : taupe #8C7B6C de l'ancienne page gamme (dos des cartes), fondu vers un beige clair comme le modèle Tylko. */
.gm-config-taupe a{background:linear-gradient(180deg,#8c7b6c 0%,#a89888 38%,#d6cbbf 72%,#efe9e2 100%)}
/* 22 oct. 2026 (Jeremy : « grossis-la et fais une animation… ») : pergola bioclimatique animée (WebP animé
   transparent, ombre au sol dans l'image : pas d'ombre CSS), plus grande et sortant à gauche. */
.gm-config-pergola .gm-config-img{width:110%;left:-8%;bottom:14%;filter:none}   /* l'image contient la pergola à sa taille maxi : peu de débord, sinon le poteau gauche serait coupé */
.gm-config-pergola a:hover .gm-config-img{transform:translateX(3%) scale(1.02)}

/* Encart « Quel système » selon le nombre de produits (pages générées Pergolas / Carports) :
   -l3 : 2 colonnes en affichage 3 colonnes (bloc + 6 produits + encart) ;
   -full : toute la rangée en affichage 3 colonnes (bloc + 2 produits + encart), 1 case sinon. */
@media (min-width:961px){ .gm-encart-l3{grid-column:span 2} .gm-encart-full{grid-column:1 / -1} .gm-encart-full a{min-height:0} }

/* Bloc « Sur mesure » de la page Carports (30 sept., Jeremy : « mets-le en grand dans le configurer, sur la gauche ») : carport photovoltaïque agrandi, qui sort du cadre à gauche. */
.gm-config-grand .gm-config-img{width:115%;left:-28%;bottom:18%}   /* « un peu moins gros » : 135 % -> 115 % */
.gm-config-grand a:hover .gm-config-img{transform:translateX(3%) scale(1.02)}

/* Bloc « Configurez » de la gamme Protections solaires : orange #da8837 de l'ancienne page gamme (dos des cartes), fondu vers un sable clair. */
.gm-config-orange a{background:linear-gradient(180deg,#da8837 0%,#e6a468 38%,#f3cfa6 72%,#fbeee0 100%)}

/* Marquise du bloc « Configurez » (Protections solaires, 30 sept. : « enlève l'ombre et mets-la plus grosse ») : image sans ombre peinte, pas d'ombre CSS, plus grande et sortant à gauche. */
.gm-config-mq .gm-config-img{width:125%;left:-30%;bottom:24%;filter:none}

/* Bloc « Configurez » des Barrières de piscine (30 sept.) : visuel configurer-barriere-piscine (verre semi-transparent), grand et sortant à gauche, sans ombre. */
.gm-config-piscine .gm-config-img{width:100%;left:-16%;bottom:17%;filter:none}   /* « mets-la plus petite » : 125 % -> 100 % */