/* ==========================================================================
   g-1.css - Feuille perso GranuloShop (ecrite a la main, AUCUN script ne la modifie)
   version 2026-09-20-3
   --------------------------------------------------------------------------
   Vit dans topas_public_reserve/assets/css/ ; liee a la place des feuilles
   d'origine par Python/09y_css_perso.py (pipe_aval_autoroute [11i]).
   Regroupe (dans cet ordre, = ordre des liens dans les pages) :
     galerie-produit.css v2.2, video.css v1.1, gns.css v3, share.css v1.4, shop.css v1.2, searchbtn.css v1.1
   20/09/2026-3 : .gs-ref-label #888 -> #666 (contraste 3,05 -> 4,95 sur le gris
   des encadres). La regle vit ICI parce que le bloc <style> qui la pose est ecrit par
   02_build_local_site, qui ne tourne PAS dans l'autoroute : le site local date d'avant.
   Le lien vers g-<c>.css est place APRES ce bloc dans les pages, donc c'est nous qui
   l'emportons. Le jour ou le site local est rebati, la valeur #666 arrivera par la
   source et cette regle deviendra redondante (sans dommage).
   g-1 (20/09/2026-2) : .gal-version #8b8b88 -> #6f6f6c (contraste 3,41 -> 5,04 ;
   ligne affichee seulement si l'option afficher_version_galerie vaut oui).
   Originaux archives dans topas_public_reserve/reserve/.
   Pour faire evoluer : copier en g-2.css (0-9 puis A-Z, apres Z retour a 0),
   modifier la copie ET la ligne « version AAAA-MM-JJ » ci-dessus (la date la
   plus recente est retenue ; meme jour : ajouter -2, -3...).
   ========================================================================== */


/* ######## galerie-produit.css ######## */

/* ================================================================
   galerie-produit.css v2.2 — 2026-08-05 11:07
   Composant galerie produit GranuloShop / Topas — conforme
   SPEC_galerie_produit_granuloshop vINT-1.0.
   Encodage : UTF-8 sans BOM · fins de ligne LF.
   Aucune dépendance. Réglages via variables CSS + data-* (voir .js).
   ================================================================ */

.prod-gallery{
  --gal-fade:600ms;
  --gal-ken-start:1.00;
  --gal-ken-end:1.06;
  --gal-ken-dur:7s;
  --gal-ratio:4/3;
  --gal-thumb-min:72px;
  --gal-thumb-max:120px;
  --gal-accent:#1d6fb8;
  --gal-border:#e2e2dc;
  --gal-surface:#f2f2ef;
  max-width:560px;margin:0 auto;font-family:inherit;
}

/* --- Scène --- */
.gal-stage{position:relative;width:100%;aspect-ratio:var(--gal-ratio);
  border-radius:12px;overflow:hidden;background:var(--gal-surface);
  border:1px solid var(--gal-border)}
.gal-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--gal-fade) ease}
.gal-slide.is-active{opacity:1}
.gal-main-img{width:100%;height:100%;object-fit:contain;display:block;background:var(--gal-surface)}
.prod-gallery[data-fit="cover"] .gal-main-img{object-fit:cover}

/* --- Ken Burns (discret), origine variée par slide --- */
.gal-slide.is-active .gal-main-img{animation:gal-ken var(--gal-ken-dur) ease-out both}
.gal-slide:nth-of-type(1) .gal-main-img{transform-origin:top left}
.gal-slide:nth-of-type(2) .gal-main-img{transform-origin:bottom right}
.gal-slide:nth-of-type(3) .gal-main-img{transform-origin:top right}
.gal-slide:nth-of-type(4) .gal-main-img{transform-origin:bottom left}
@keyframes gal-ken{from{transform:scale(var(--gal-ken-start))}to{transform:scale(var(--gal-ken-end))}}

/* --- Légende (sous-titre) --- */
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  color:#fff;font-size:14px;line-height:1.3;
  opacity:0;transition:opacity var(--gal-fade) ease;pointer-events:none}
.gal-slide.is-active .gal-cap{opacity:1}
.gal-cap:empty{display:none}

/* --- Compteur n / total --- */
.gal-counter{position:absolute;top:10px;right:12px;z-index:2;
  font-size:12px;color:#fff;background:rgba(0,0,0,.4);
  border-radius:4px;padding:2px 8px;letter-spacing:.02em}

/* --- Flèches --- */
.gal-prev,.gal-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border:none;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .25s ease,background .25s ease}
.gal-prev{left:8px}.gal-next{right:8px}
.gal-stage:hover .gal-prev,.gal-stage:hover .gal-next{opacity:1}
.gal-prev:hover,.gal-next:hover{background:rgba(0,0,0,.55)}
.gal-prev:focus-visible,.gal-next:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
@media (hover:none){.gal-prev,.gal-next{opacity:.6}}

/* --- Vignettes --- */
.gal-thumbs{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--gal-thumb-min),var(--gal-thumb-max)));
  gap:10px;margin-top:12px;justify-content:center;
  opacity:1;transition:opacity var(--gal-fade) ease}
.gal-thumb{padding:0;border:2px solid var(--gal-border);border-radius:6px;
  background:var(--gal-surface);aspect-ratio:var(--gal-ratio);overflow:hidden;
  cursor:pointer;opacity:.6;
  transition:opacity .25s ease,border-color .25s ease,transform .25s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:.9}
.gal-thumb.is-active{opacity:1;border-color:var(--gal-accent);transform:translateY(-2px)}
.gal-thumb:focus-visible{outline:2px solid var(--gal-accent);outline-offset:2px}

/* --- Mode image unique : masquer tout l'habillage --- */
.prod-gallery.is-single .gal-counter,
.prod-gallery.is-single .gal-prev,
.prod-gallery.is-single .gal-next,
.prod-gallery.is-single .gal-thumbs{display:none}
/* image unique : rendu statique (pas de Ken Burns) */
.prod-gallery.is-single .gal-slide.is-active .gal-main-img{animation:none;transform:none}

/* --- Pied de version --- */
.gal-version{max-width:560px;margin:8px auto 0;font-size:11px;color:#6f6f6c;text-align:right}

/* --- Réduction des animations --- */
@media (prefers-reduced-motion:reduce){
  .gal-slide{transition:none}
  .gal-slide.is-active .gal-main-img{animation:none;transform:none}
  .gal-cap{transition:none}
  .gal-thumbs{transition:none}
}

/* --- Responsive --- */
@media (max-width:640px){
  .prod-gallery{max-width:100%}
  .gal-thumbs{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
}


/* ######## video.css ######## */

/* ==========================================================================
   video.css — Gabarit des cadres vidéo Topas — v1.1 — 2026-08-19 15:20
   --------------------------------------------------------------------------
   Portée : COSMÉTIQUE UNIQUEMENT (largeur, centrage, mise en étage).
   Le fonctionnel — ratio 16:9, calage de la <video> — reste dans le
   <style id="granulo-video-overlay"> injecté par postprocess _60_video.
   Conséquence voulue : si ce fichier n'est pas publié, la vidéo reste
   correcte, seule la mise en page n'est pas appliquée.

   v1.1 (19/08/2026) :
     • accueil (body#p1) : la vidéo prend un étage à elle seule, centrée
       sur l'axe de la page et élargie (le bloc parent est
       « right-justified », d'où le décalage résiduel en demi-colonne) ;
     • icône play retirée du style inline (elle réutilisait l'image de
       fallback 640×360 écrasée en 80×80, d'où le carré sombre au centre).
       Une version propre, en data-URI, est fournie ci-dessous, désactivée.

   Réglages : les deux variables --gs-video-* ci-dessous.

   Fichier : topas_public_reserve/assets/css/video.css
   Lien injecté par _60_video (assets/css/video.css).
   Encodage : UTF-8 sans BOM.
   ========================================================================== */

:root {
  --gs-video-max:  520px;       /* cadre en demi-colonne */
  --gs-video-wide: 880px;       /* cadre sur un étage dédié */
}

/* --- Vidéo en demi-colonne (company/index, pages applications) ----------- */
/* Resserrée et centrée dans sa colonne. Les vidéos hors colonne —
   company/company-video.html — gardent la pleine largeur. */
.col-xl-6 .frame-type-textmedia figure.video,
.col-lg-6 .frame-type-textmedia figure.video {
  max-width: var(--gs-video-max);
  margin-left: auto;
  margin-right: auto;
}

/* --- Accueil : un étage pour la vidéo seule ------------------------------ */
/* La ligne texte + vidéo est dépliée : chaque colonne passe à 12/12, la
   vidéo se retrouve sous le texte et se centre sur l'axe de la page.
   :has() est supporté par tous les navigateurs courants depuis 2023 ; s'il
   manque, la règle est ignorée et on retombe sur la demi-colonne ci-dessus. */
body#p1 .row:has(figure.video) {
  flex-wrap: wrap;
}
body#p1 .row:has(figure.video) > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
body#p1 .row:has(figure.video) figure.video {
  max-width: var(--gs-video-wide);
  margin-left: auto;
  margin-right: auto;
}

/* --- Icône play centrale (DÉSACTIVÉE) ----------------------------------- */
/* Le player affiche déjà sa barre de contrôles avec un bouton de lecture,
   et les posters portent le visuel Topas : une pastille de plus surcharge
   l'image. Pour la rétablir, décommenter le bloc — cercle jaune charte
   #FFED00 en data-URI, sans fichier externe ni chemin relatif à calculer.
   NB : ::after uniquement, JAMAIS ::before, qui porte le ratio Bootstrap. */
/*
.embed.embed-responsive::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFED00
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9,7 9,17 17,12' fill='%231a2a3a'/%3E%3C/svg%3E")
    center / 46% no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 2;
  opacity: .92;
}
.embed.embed-responsive:hover::after { opacity: 1; }
.embed.embed-responsive:has(video:playing)::after { opacity: 0; }
*/


/* ######## gns.css ######## */

/* ==========================================================================
   gns.css — Global Navigation Selector (bloc CSS privé, réserve)  — v3
   --------------------------------------------------------------------------
   Portée : tout est scopé sous #languageMenue.gns-menu.
   v3 (17/07/2026) — variante « B », charte Topas :
     • en-têtes GLOBAL / NETWORK / FOR U. soulignés en jaune Topas (#FFED00) ;
     • langue active repérée par son nom souligné jaune (sobre, sans coche
       ni gras lourd) ;
     • code (DE/EN/FR…) atténué, secondaire.
   Aucune police imposée : le menu hérite de la typo du site.
   Encodage : UTF-8 sans BOM. Fichier : topas_public/assets/css/gns.css
   ========================================================================== */

/* Jaune de la charte Topas */
/* #FFED00 */

/* --- Ligne : CODE (chasse fixe) + Nom + éventuel ↗ ----------------------- */
#languageMenue.gns-menu .gns-item {
  display: flex;
  align-items: baseline;
  gap: .55em;
  white-space: nowrap;
}

/* Code : 2 lettres MAJ, aligné à gauche, largeur fixe, chasse constante. */
#languageMenue.gns-menu .gns-code {
  flex: 0 0 2.1em;
  text-align: left;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .04em;
  opacity: .5;                 /* secondaire, discret */
}

#languageMenue.gns-menu .gns-name {
  flex: 1 1 auto;
}

/* Symbole « quitte le site » (spec §6) — décoratif, aria-hidden côté HTML. */
#languageMenue.gns-menu .gns-ext {
  flex: 0 0 auto;
  margin-left: .4em;
  opacity: .75;
  font-size: .9em;
}

/* --- En-têtes de bloc : GLOBAL / NETWORK / FOR U. (soulignés jaune) ------ */
#languageMenue.gns-menu .gns-header {
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .8em;
  font-weight: 700;
  color: #1a1a1a;
}
#languageMenue.gns-menu .gns-header .line-bottom {
  display: inline-block;
  padding-bottom: .14em;
  border-bottom: 3px solid #FFED00;      /* jaune Topas */
}

/* --- Langue active (spec §5/§7) : nom souligné jaune, sobre ------------- */
/* Cible aria-current (posé au runtime) ET .active (posé au build). */
#languageMenue.gns-menu li.active > .gns-item .gns-name,
#languageMenue.gns-menu .gns-item[aria-current="true"] .gns-name {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #FFED00;    /* soulignement jaune du nom actif */
}

/* --- Focus visible clavier (spec §11) ----------------------------------- */
#languageMenue.gns-menu .gns-item:focus,
#languageMenue.gns-menu .gns-item:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Responsive : pas de chevauchement ni débordement (spec §10) -------- */
@media (max-width: 480px) {
  #languageMenue.gns-menu .gns-item {
    gap: .45em;
    white-space: normal;
  }
  #languageMenue.gns-menu .gns-code {
    flex-basis: 2em;
  }
}


/* ######## share.css ######## */

/* ============================================================
   share.css — Module de partage local GranuloShop / Topas
   v1.4 (25/07/2026) — FIX Safari : display:inline-block sur l'icone mask ; base  (16/07/2026)
   v1.3 : anneau jaune 7 px sur le bouton (meme traitement que
          Shop — groupe « outils » distinct du groupe contact).
          Hover : l'anneau se remplit (transition 150 ms).
   v1.2 : CDC ameliorations v1.1 —
     - le bouton est un 4e <li> DANS #kontaktnavi > ul.nav :
       plus AUCUN position:absolute / left / top pour le bouton,
       le layout flex du site fait tout (points 2 et 3 du CDC) ;
     - icone Contact (crayon, .tps.contact) masquee sous 992 px :
       le Share recupere naturellement l'espace (point 2) ;
     - menu mobile : position fixe pleine largeur, ordonnee top
       calculee par share.js depuis le bouton (aucune constante).
   v1.1 : icones du menu agrandies (21 px).
   Charte : #FFED00 / #000, border-radius:0, Lato, uppercase.
   Aucun !important.
   ============================================================ */

/* ── Le bouton : anneau jaune 7 px, remplissage au survol ── */
li.gs-share-wrap {
  display: flex;
  align-items: center;
  position: relative;       /* ancre du menu deroulant (overlay) */
  margin-left: 14px;        /* "un peu separe" du bouton Shop */
}

.gs-share-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 7px solid #FFED00;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  color: #000;
  line-height: 1;
  transition: background .15s;
}
.gs-share-trigger .ti {
  font-size: 20px;
  line-height: 1;
}
.gs-share-trigger:hover,
.gs-share-trigger:focus-visible {
  background: #FFED00;
}
.gs-share-trigger:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* ── Mobile / tablette (< lg) : masquer l'icone Contact (crayon).
      Telephone et e-mail restent ; le Share prend la place.
      Deux regles volontairement separees (une liste avec :has
      invaliderait tout le selecteur sur un vieux moteur) :
      1) cible robuste par contenu (.tps.contact) ;
      2) repli positionnel (3e item) pour moteurs sans :has(). ── */
@media (max-width: 991.98px) {
  /* g-1 : limite aux pages AVEC le bouton Share (share.css n'etait lie que la) */
  #kontaktnavi:has(#gs-share) li.nav-item:has(.tps.contact) { display: none; }
}
@supports not selector(:has(a)) {
  @media (max-width: 991.98px) {
    #kontaktnavi ul.nav > li.nav-item:nth-child(3):not(:last-child) { display: none; }
  }
}

/* ── Menu : overlay sous le bouton (desktop) ── */
.gs-share-menu {
  display: none;
  position: absolute;       /* overlay ancre sur le li, pas du layout */
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 16px));
  margin: 4px 0 0 0;
  padding: 0 0 .4rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  font-size: .75rem;
  color: #000;
  text-transform: uppercase;
}
.gs-share-menu-open { display: block; }
.gs-share-menu-right { left: auto; right: 0; }

/* Mobile : overlay pleine largeur ; l'ordonnee (top) est posee par
   share.js d'apres la position reelle du bouton — aucune constante. */
.gs-share-menu-mobile {
  position: fixed;
  left: 8px;
  right: 8px;
  min-width: 0;
  max-width: none;
}

.gs-share-header {
  padding: .5rem 1rem .9rem 1rem;
  font-family: 'Lato Bold', Arial, sans-serif;
}
.gs-share-header .line-bottom { position: relative; }
.gs-share-header .line-bottom:after {
  content: "";
  background: #FFED00;
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 4px;
  width: 60%;
}

.gs-share-li { margin: 0; }

.gs-share-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .32rem 1rem;
  border: 0;
  background: none;
  font-family: 'Lato Regular', Arial, sans-serif;
  font-weight: 300;
  font-size: .75rem;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.gs-share-item .ti {
  font-size: 21px;
  width: 26px;
  text-align: center;
}
.gs-share-item:hover,
.gs-share-item:focus-visible {
  color: #16181b;
  background-color: #e9ecef;
  outline: none;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .gs-share-item { padding: .55rem 1rem; }   /* cibles tactiles */
}

.gs-share-sep {
  height: 0;
  margin: .35rem 1rem;
  border-top: 1px solid #e9ecef;
}

/* ── Feedback discret (aria-live), overlay sous le bouton ── */
.gs-share-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  margin-top: 4px;
  padding: .3rem .7rem;
  background: #000;
  color: #FFED00;
  font-family: 'Lato Bold', Arial, sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100vw - 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.gs-share-feedback-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Modale QR locale ── */
.gs-share-qr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.gs-share-qr-backdrop[hidden] { display: none; }

.gs-share-qr-dialog {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  padding: 1.1rem 1.3rem 1.2rem;
  max-width: 340px;
  width: calc(100% - 32px);
  text-align: center;
}
.gs-share-qr-title {
  font-family: 'Lato Bold', Arial, sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 1.1rem;
}
.gs-share-qr-title .line-bottom { position: relative; }
.gs-share-qr-title .line-bottom:after {
  content: "";
  background: #FFED00;
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 4px;
  width: 50%;
}
.gs-share-qr-holder svg {
  width: 240px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.gs-share-qr-url {
  margin-top: .7rem;
  font-size: .68rem;
  word-break: break-all;
  color: #555;
}
.gs-share-qr-close {
  margin-top: .9rem;
  padding: .45rem 1.4rem;
  font-size: .75rem;
  text-transform: uppercase;
  border-radius: 0;
  background: #000;
  color: #FFED00;
  border: 1px solid #000;
  cursor: pointer;
}
.gs-share-qr-close:hover,
.gs-share-qr-close:focus-visible {
  background: #FFED00;
  color: #000;
}

/* ════════════════════════════════════════════════════════════
   FIX iPad (21/07/2026) — icone du bouton en mask CSS.
   iOS Safari rejetait la fonte Tabler subsettee (glyphes vides).
   Ici : plus aucune dependance a la fonte pour ce bouton.
   Place en fin de fichier pour prevaloir sur la regle .ti ci-dessus.
   Encodage : UTF-8 sans BOM.
   ════════════════════════════════════════════════════════════ */
/* --- FIX iPad : icone en mask CSS (aucune fonte) --- */
.gs-share-trigger .ti {
  display: inline-block;   /* FIX Safari 25/07/2026 : width/height sont
                              ignores sur un element inline -> boite 0x0,
                              le mask ne peignait rien. inline-block est
                              indispensable au FIX iPad ci-dessus. */
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 0;            /* neutralise le glyphe fonte (Windows) */
  background-color: currentColor;   /* = #000 ; reste noir au survol jaune */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3%2012a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M15%206a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M15%2018a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M8.7%2010.7l6.6%20-3.4%22%20/%3E%20%3Cpath%20d=%22M8.7%2013.3l6.6%203.4%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3%2012a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M15%206a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M15%2018a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20/%3E%20%3Cpath%20d=%22M8.7%2010.7l6.6%20-3.4%22%20/%3E%20%3Cpath%20d=%22M8.7%2013.3l6.6%203.4%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}


/* ######## shop.css ######## */

/* ============================================================
   shop.css — Bouton Shop + page passerelle GranuloShop
   v1.2 (25/07/2026) — FIX Safari : display:inline-block sur l'icone mask ; base  (16/07/2026)
   v1.1 : icone shopping-cart ; anneau jaune 7 px (meme traitement
          que Share — groupe « outils » distinct du groupe contact).
   Encodage : UTF-8 sans BOM.
   Charte : #FFED00 / #000, border-radius:0, Lato, uppercase.
   Aucun !important.
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARTIE 1 — Bouton dans le header (toutes pages eligibles)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

li.gs-shop-wrap {
  display: flex;
  align-items: center;
  margin-left: 14px;
}

.gs-shop-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 7px solid #FFED00;
  background: transparent;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  transition: background .15s;
}
.gs-shop-trigger .ti {
  font-size: 20px;
  line-height: 1;
}
.gs-shop-trigger:hover,
.gs-shop-trigger:focus-visible {
  background: #FFED00;
}
.gs-shop-trigger:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* ── Mobile / tablette (< lg) ──────────────────────────── */
@media (max-width: 991.98px) {
  li.gs-shop-wrap {
    margin-left: 0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARTIE 2 — Page passerelle (shop-gateway.html)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.gs-gw {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', Arial, sans-serif;
  color: #222;
  background: #f8f8f8;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.gs-gw-logo {
  margin-bottom: 2rem;
  text-align: center;
}
.gs-gw-logo img {
  height: 56px;
  width: auto;
}

.gs-gw-card {
  background: #fff;
  max-width: 560px;
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

.gs-gw-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a3a5c;
  margin: 0 0 1.2rem 0;
  line-height: 1.3;
}

.gs-gw-text {
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 .8rem 0;
  color: #333;
}

.gs-gw-note {
  font-size: .85rem;
  line-height: 1.5;
  color: #666;
  margin: 0 0 1.5rem 0;
  font-style: italic;
}

.gs-gw-product {
  background: #fafafa;
  border-left: 3px solid #FFED00;
  padding: .8rem 1rem;
  margin: 0 0 1.5rem 0;
  text-align: left;
  font-size: .95rem;
}
.gs-gw-product-label {
  font-weight: 700;
  color: #1a3a5c;
  margin-right: .4em;
}
.gs-gw-product-model {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
}

.gs-gw-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.gs-gw-btn-continue {
  display: inline-block;
  background: #FFED00;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .85rem 2.5rem;
  border: 2px solid #000;
  transition: background .15s, color .15s;
  cursor: pointer;
  text-align: center;
  min-width: 280px;
}
.gs-gw-btn-continue:hover,
.gs-gw-btn-continue:focus-visible {
  background: #000;
  color: #FFED00;
}
.gs-gw-btn-continue:focus-visible {
  outline: 2px solid #FFED00;
  outline-offset: 2px;
}

.gs-gw-btn-back {
  display: inline-block;
  color: #1a3a5c;
  font-size: .9rem;
  text-decoration: none;
  padding: .5rem 1rem;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.gs-gw-btn-back:hover,
.gs-gw-btn-back:focus-visible {
  border-bottom-color: #1a3a5c;
}

.gs-gw-footer {
  margin-top: 2rem;
  font-size: .8rem;
  color: #999;
  text-align: center;
}

.gs-gw-loading {
  color: #888;
  font-style: italic;
}
.gs-gw-error {
  color: #c00;
  font-size: .9rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .gs-gw-card {
    padding: 1.8rem 1.2rem;
  }
  .gs-gw-btn-continue {
    min-width: 0;
    width: 100%;
    padding: .85rem 1.5rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FIX iPad (21/07/2026) — icone du bouton en mask CSS.
   iOS Safari rejetait la fonte Tabler subsettee (glyphes vides).
   Ici : plus aucune dependance a la fonte pour ce bouton.
   Place en fin de fichier pour prevaloir sur la regle .ti ci-dessus.
   Encodage : UTF-8 sans BOM.
   ════════════════════════════════════════════════════════════ */
/* --- FIX iPad : icone en mask CSS (aucune fonte) --- */
.gs-shop-trigger .ti {
  display: inline-block;   /* FIX Safari 25/07/2026 : width/height sont
                              ignores sur un element inline -> boite 0x0,
                              le mask ne peignait rien. inline-block est
                              indispensable au FIX iPad ci-dessus. */
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 0;            /* neutralise le glyphe fonte (Windows) */
  background-color: currentColor;   /* = #000 ; reste noir au survol jaune */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%2019a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20/%3E%20%3Cpath%20d=%22M15%2019a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20/%3E%20%3Cpath%20d=%22M17%2017h-11v-14h-2%22%20/%3E%20%3Cpath%20d=%22M6%205l14%201l-1%207h-13%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M4%2019a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20/%3E%20%3Cpath%20d=%22M15%2019a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20/%3E%20%3Cpath%20d=%22M17%2017h-11v-14h-2%22%20/%3E%20%3Cpath%20d=%22M6%205l14%201l-1%207h-13%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}


/* ######## searchbtn.css ######## */

/* ============================================================
   searchbtn.css — Pastille Granulosearch du bandeau superieur
   v1.1 (25/07/2026) — FIX Safari : display:inline-block sur l'icone mask ; base  (15/07/2026)
   Meme traitement que Shop/Share (groupe « outils ») : cercle
   42 px, anneau jaune 7 px, fond jaune au survol, icone Tabler.
   Position : dernier <li> de #kontaktnavi, donc immediatement
   a gauche du globe des langues (#language-menu).
   MOBILE (< lg) : bouton entierement masque (pas de place).
   Prerequis fonte : ajouter "search" (U+EB1C) a CLASSES_UTILISEES
   de subset_tabler.py.
   Encodage : UTF-8 sans BOM. Charte : #FFED00 / #000, radius 50%
   assume (pastille circulaire comme Shop/Share). Aucun !important.
   ============================================================ */

li.gs-searchbtn-wrap {
  display: flex;
  align-items: center;
  margin-left: 14px;
}

.gs-searchbtn-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 7px solid #FFED00;
  background: transparent;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  transition: background .15s;
}
.gs-searchbtn-trigger .ti {
  font-size: 20px;
  line-height: 1;
}
.gs-searchbtn-trigger:hover,
.gs-searchbtn-trigger:focus-visible {
  background: #FFED00;
}
.gs-searchbtn-trigger:focus-visible {
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* ── Mobile / tablette (< lg) : shunt complet ─────────────── */
@media (max-width: 991.98px) {
  li.gs-searchbtn-wrap {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   FIX iPad (21/07/2026) — icone du bouton en mask CSS.
   iOS Safari rejetait la fonte Tabler subsettee (glyphes vides).
   Ici : plus aucune dependance a la fonte pour ce bouton.
   Place en fin de fichier pour prevaloir sur la regle .ti ci-dessus.
   Encodage : UTF-8 sans BOM.
   ════════════════════════════════════════════════════════════ */
/* --- FIX iPad : icone en mask CSS (aucune fonte) --- */
.gs-searchbtn-trigger .ti {
  display: inline-block;   /* FIX Safari 25/07/2026 : width/height sont
                              ignores sur un element inline -> boite 0x0,
                              le mask ne peignait rien. inline-block est
                              indispensable au FIX iPad ci-dessus. */
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 0;            /* neutralise le glyphe fonte (Windows) */
  background-color: currentColor;   /* = #000 ; reste noir au survol jaune */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3%2010a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20/%3E%20%3Cpath%20d=%22M21%2021l-6%20-6%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M3%2010a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20/%3E%20%3Cpath%20d=%22M21%2021l-6%20-6%22%20/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

/* ######## corrections du 20/09/2026 ######## */

/* Petit label "Pour aller plus loin" des actualites : #888 sur le gris #eeeeee ne
   donne que 3,05:1 (norme WCAG AA : 4,5:1). Voir MD/charte_graphique_granuloshop_topas.md. */
.gs-ref-label { color: #666; }