/* =====================================================================
   GK GENERAL SHOP — gks-v2.css
   « Le conteneur ouvert » : la couche V2 posée par-dessus gks.css.

   Elle ne remplace pas le système de design : elle ajoute la navigation
   en capsule, le rideau plein écran, la scène isométrique du hero, le
   parcours d'une commande, les quais partenaires, la liste de sourcing
   et les blocs de confiance. Tout le reste (jetons, boutons, champs,
   pied de page) continue de venir de gks.css.

   Isométrie : 30°, cos30 = .866, sin30 = .5. Faces indigo et vertes,
   arêtes blanches. Mouvement : apparitions en fondu montant, cubes qui
   se posent, ligne de parcours tracée en stroke-dashoffset. Tout est
   figé sous prefers-reduced-motion.
   ===================================================================== */

:root {
    /* La barre haute a quitté l'en-tête (elle vit dans le rideau et le
       pied de page) : les colonnes collantes du kit, qui s'ancrent sur
       --gk-top, ne doivent plus lui réserver de hauteur. */
    --gk-topbar-h: 0px;
    --gk-header-h: 84px;
    --gk-cap-h: 56px;
    --gk-cap-shadow: 0 2px 6px rgba(20, 24, 40, .06), 0 16px 40px rgba(20, 24, 40, .14);
    --gk-iso-line: rgba(255, 255, 255, .58);
}

/* ═════════════════ EN-TÊTE : LOGO + CAPSULE FLOTTANTE ═════════════════
   L'en-tête n'est plus une barre : c'est un logo posé sur la page et une
   capsule blanche qui contient tous les gestes. Au défilement, le logo
   s'efface et seule la capsule reste, fixée en haut à droite. */

.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 90;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none !important;
}

.gk-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    padding-top: 14px;
}

/* Le logo garde son dessin (cube + Michroma) et prend le ton de la page. */
.gk-head .gk-logo { position: relative; z-index: 2; transition: opacity 200ms ease; }
body.head-over .gk-head .gk-logo__over { color: rgba(255, 255, 255, .62); }
body.head-over .gk-head .gk-logo__word { color: #fff; }
body.head-over .gk-head .gk-logo__mark { filter: brightness(0) invert(1); }

/* Sur les pages à fond clair, un filet très discret sépare l'en-tête. */
body:not(.head-over) .site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--gk-line);
}

/* ── La capsule ── */
.gk-cap {
    display: flex; align-items: center; gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--gk-line);
    border-radius: 999px;
    box-shadow: var(--gk-cap-shadow);
    backdrop-filter: saturate(170%) blur(10px);
    transition: transform 240ms cubic-bezier(.4, 0, .2, 1), box-shadow var(--gk-tr);
}

/* Au défilement : la capsule se détache et reste seule. */
body.is-scrolled .site-header { position: fixed; pointer-events: none; }
body.is-scrolled .gk-head { min-height: 0; padding-top: 12px; }
body.is-scrolled .gk-head .gk-logo { opacity: 0; pointer-events: none; }
body.is-scrolled .gk-cap { pointer-events: auto; }
/* Le filet sous l'en-tête des pages claires ne doit pas suivre la capsule. */
body.is-scrolled .site-header::after { display: none; }

.gk-cap__btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px;
    background: transparent;
    font-family: var(--gk-font-body);
    font-size: .875rem; font-weight: 600;
    color: var(--gk-ink);
    cursor: pointer; white-space: nowrap;
    transition: background var(--gk-tr), color var(--gk-tr);
}
.gk-cap__btn svg { width: 19px; height: 19px; flex: none; }
/* Le bouton Menu garde la classe `mobile-menu-toggle` du kit (c'est elle
   que shop.js écoute) : on neutralise donc le dessin du hamburger de
   gks.css, qui l'empilait en colonne dans un carré de 42 px. */
.gk-cap__btn.mobile-menu-toggle {
    display: inline-flex; flex-direction: row;
    width: auto; height: 44px;
    border: 0; border-radius: 999px; background: transparent;
}
.gk-cap__btn.mobile-menu-toggle > span {
    width: auto; height: auto; background: none; border-radius: 0;
}
/* `.mobile-menu-toggle span` (gks.css) est plus spécifique que `.gk-burger` :
   on redit ici la colonne et son écart, sinon les trois traits se collent. */
.gk-cap__btn.mobile-menu-toggle .gk-burger {
    display: flex; flex-direction: column; gap: 5px; width: 18px;
}
.gk-cap__btn:hover { background: var(--gk-soft); color: var(--gk-indigo); }
.gk-cap__btn--ico { width: 44px; padding: 0; justify-content: center; }
.gk-cap__btn--wa svg { color: #25D366; }

.gk-cap__cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border-radius: 999px;
    background: var(--gk-green); color: #fff;
    /* Charte : le blanc sur vert #0F8F49 n'est lisible qu'à partir de
       16 px gras — on ne descend pas sous cette taille. */
    font-size: 1rem; font-weight: 700; white-space: nowrap;
    transition: background var(--gk-tr);
}
.gk-cap__cta:hover { background: var(--gk-green-deep); color: #fff; }

.gk-cap__sep { width: 1px; height: 24px; background: var(--gk-line); flex: none; margin: 0 4px; }

.gk-cap__cta-short { display: none; }
@media (max-width: 900px) {
    .gk-cap__cta-long { display: none; }
    .gk-cap__cta-short { display: inline; }
}

/* Compteur de la liste de sourcing */
.gk-cap__count {
    position: absolute; top: 3px; right: 3px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px;
    background: var(--gk-green); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px #fff;
}
.gk-cap__count[hidden] { display: none; }

/* Trait du bouton Menu (trois traits qui deviennent une croix) */
.gk-burger { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.gk-burger span {
    display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform 220ms ease, opacity 160ms ease, width 220ms ease;
}
.gk-burger span:nth-child(2) { width: 12px; }
body.menu-open .gk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .gk-burger span:nth-child(2) { opacity: 0; }
body.menu-open .gk-burger span:nth-child(3) { width: 18px; transform: translateY(-7px) rotate(-45deg); }

/* ── Recherche qui se déploie dans la capsule ── */
.gk-capsearch { display: flex; align-items: center; }
.gk-capsearch input {
    width: 0; padding: 0; border: 0; background: transparent;
    font-size: .875rem; color: var(--gk-ink);
    transition: width 240ms cubic-bezier(.4, 0, .2, 1), padding 240ms;
    min-width: 0;
}
.gk-capsearch.is-open input { width: 200px; padding: 0 10px; }
.gk-capsearch input:focus { outline: none; }
@media (max-width: 1200px) { .gk-capsearch.is-open input { width: 150px; } }

/* ── Capsule en barre basse sur mobile ── */
@media (max-width: 900px) {
    .gk-head { min-height: 64px; padding-top: 8px; }
    .gk-cap {
        position: fixed; z-index: 92;
        left: 12px; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        justify-content: space-between;
        border-radius: 22px;
        padding: 6px 8px;
    }
    body.is-scrolled .site-header { position: absolute; }
    body.is-scrolled .gk-head .gk-logo { opacity: 1; pointer-events: auto; }
    .gk-cap__btn { height: 44px; min-width: 44px; padding: 0 8px; }
    /* On masque les libellés, jamais les icônes : le trait du bouton
       Menu (.gk-burger) doit rester. */
    .gk-cap__btn > span:not(.gk-cap__count):not(.gk-sr):not(.gk-burger) { display: none; }
    .gk-cap__sep { display: none; }
    .gk-cap__cta { padding: 0 16px; font-size: .84rem; }
    .gk-capsearch.is-open input { width: 100%; }
    .gk-capsearch { flex: 1; }
    body { padding-bottom: 76px; }
    /* Le bandeau cookies du kit et le tiroir mini-panier partagent le bas
       de l'écran avec la capsule : on les décale au-dessus d'elle. */
    .cookie-banner { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ═════════════════════════ RIDEAU PLEIN ÉCRAN ═════════════════════════
   Le menu n'est pas une liste : c'est un plan du site en très grand, sur
   fond indigo, avec les catégories numérotées en vert et leurs comptages
   réels. La classe `.mobile-menu` est conservée : c'est elle que le
   script du kit (shop.js) ouvre et ferme. */

.mobile-menu.gk-curtain {
    position: fixed; inset: 0; z-index: 95;
    background: var(--gk-indigo-deep);
    color: #fff;
    display: block;
    padding: 0;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transform: none;
    transition: opacity 260ms ease, visibility 260ms;
}
body.menu-open .mobile-menu.gk-curtain { opacity: 1; visibility: visible; }

/* Trame isométrique de fond : les trois familles d'arêtes du cube. */
.gk-curtain::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px);
}

.gk-curtain__inner { position: relative; padding: 108px 0 64px; }
@media (max-width: 900px) { .gk-curtain__inner { padding: 88px 0 120px; } }

.gk-curtain__grid {
    display: grid; grid-template-columns: 1.25fr 1fr;
    gap: 56px;
}
@media (max-width: 980px) { .gk-curtain__grid { grid-template-columns: 1fr; gap: 40px; } }

/* Fermeture : bouton dédié, en plus de la capsule et de Échap. */
.gk-curtain__close {
    position: absolute; top: 26px; right: var(--gk-gutter); z-index: 3;
    display: inline-flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 18px;
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    background: transparent; color: #fff;
    font-size: .85rem; font-weight: 600; cursor: pointer;
}
.gk-curtain__close:hover { background: rgba(255,255,255,.1); }
.gk-curtain__close svg { width: 15px; height: 15px; }

.gk-curtain__label {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    margin: 0 0 20px;
}

/* Catégories en très grand, numérotées en vert */
.gk-curtain__cats { list-style: none; margin: 0 0 34px; padding: 0; }
.gk-curtain__cats li { border-top: 1px solid rgba(255, 255, 255, .13); }
.gk-curtain__cats li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.gk-curtain__cat {
    display: flex; align-items: baseline; gap: 16px;
    padding: 13px 0;
    color: #fff;
    font-family: var(--gk-font-title);
    font-size: clamp(1.28rem, .9rem + 1.5vw, 2.05rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    transition: color var(--gk-tr), padding-left var(--gk-tr);
}
.gk-curtain__cat:hover, .gk-curtain__cat:focus-visible { color: #9FE3BC; padding-left: 10px; }
.gk-curtain__n {
    flex: none; width: 2.1em;
    font-family: var(--gk-font-body);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    color: #34C776;
    font-variant-numeric: tabular-nums;
}
.gk-curtain__qty {
    margin-left: auto; flex: none;
    font-family: var(--gk-font-body);
    font-size: .78rem; font-weight: 500;
    color: rgba(255, 255, 255, .6);
    font-variant-numeric: tabular-nums;
}

/* Les deux quais partenaires, en vignettes */
.gk-curtain__docks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
@media (max-width: 560px) { .gk-curtain__docks { grid-template-columns: 1fr; } }
.gk-curtain__dock {
    display: flex; gap: 13px; align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--gk-radius);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    transition: border-color var(--gk-tr), background var(--gk-tr);
}
.gk-curtain__dock:hover { border-color: #34C776; background: rgba(255, 255, 255, .1); color: #fff; }
.gk-curtain__plate {
    width: 46px; height: 46px; flex: none;
    border-radius: 9px; background: #fff;
    display: grid; place-items: center; overflow: hidden;
    font-family: var(--gk-font-title); font-weight: 800; color: var(--gk-indigo);
}
.gk-curtain__plate img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.gk-curtain__dock strong { display: block; font-family: var(--gk-font-title); font-size: .97rem; }
.gk-curtain__dock small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .68); margin-top: 2px; line-height: 1.35; }

/* Colonne de droite : pages, groupe, coordonnées */
.gk-curtain__links { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 2px; }
.gk-curtain__links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-family: var(--gk-font-title); font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
}
.gk-curtain__links a:hover { color: #9FE3BC; }
.gk-curtain__links svg { width: 16px; height: 16px; opacity: .4; }

.gk-curtain__coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .87rem; }
.gk-curtain__coords li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.72); line-height: 1.5; }
.gk-curtain__coords svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: #9FE3BC; }
.gk-curtain__coords a { color: #fff; }

.gk-curtain__group {
    margin-top: 26px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: .8rem; color: rgba(255, 255, 255, .66); line-height: 1.6;
}
.gk-curtain__group a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.gk-curtain__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

/* Sans JavaScript (ou en capture) : ?menu=1 ouvre le rideau. */
body.menu-forced .mobile-menu.gk-curtain { opacity: 1; visibility: visible; }

/* ═══════════════════════════ HERO — LE CONTENEUR ══════════════════════ */
.gk-hero2 {
    position: relative;
    background: var(--gk-indigo-deep);
    color: #fff;
    padding: 148px 0 76px;
    overflow: hidden;
}
@media (max-width: 900px) { .gk-hero2 { padding: 96px 0 56px; } }

.gk-hero2__trame {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,.055) 0 1px, transparent 1px 48px);
    mask-image: radial-gradient(120% 90% at 60% 30%, #000 20%, transparent 78%);
}
.gk-hero2__halo {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(48% 55% at 72% 30%, rgba(15, 143, 73, .30) 0%, rgba(15, 143, 73, 0) 62%);
}

.gk-hero2__inner {
    position: relative;
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: 48px; align-items: center;
}
@media (max-width: 980px) {
    .gk-hero2__inner { grid-template-columns: 1fr; gap: 30px; }
    /* Sur mobile, le conteneur passe AU-DESSUS du titre : c'est lui qui
       raconte le métier avant la première phrase. */
    .gk-hero2__scene { order: -1; }
}

.gk-hero2 h1, .gk-hero2 h2, .gk-hero2 h3 { color: #fff; }
.gk-hero2__title { margin-bottom: 18px; }
.gk-hero2__lead { margin-bottom: 26px; max-width: 54ch; }

/* ── Le premier geste : « Quel produit cherchez-vous ? » ── */
.gk-seek {
    display: flex; gap: 8px;
    padding: 7px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    max-width: 560px;
    transition: border-color var(--gk-tr), background var(--gk-tr);
}
.gk-seek:focus-within { border-color: #34C776; background: rgba(255, 255, 255, .1); }
.gk-seek input {
    flex: 1; min-width: 0;
    padding: 12px 8px 12px 20px;
    border: 0; background: transparent;
    color: #fff; font-size: 1rem;
}
.gk-seek input::placeholder { color: rgba(255, 255, 255, .55); }
.gk-seek input:focus { outline: none; }
.gk-seek button {
    flex: none;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 24px; height: 48px;
    border: 0; border-radius: 999px;
    background: var(--gk-green); color: #fff;
    font-family: var(--gk-font-body); font-size: 1rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background var(--gk-tr);
}
.gk-seek button:hover { background: var(--gk-green-deep); }
.gk-seek button svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
    .gk-seek { flex-direction: column; border-radius: var(--gk-radius); padding: 10px; }
    .gk-seek input { padding: 10px 12px; }
    .gk-seek button { justify-content: center; }
}

/* Les trois parcours en pastilles, sous le champ */
.gk-ways2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.gk-way2 {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px 7px 11px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: .82rem; font-weight: 600;
    transition: border-color var(--gk-tr), background var(--gk-tr), color var(--gk-tr);
}
.gk-way2:hover { border-color: #34C776; background: rgba(255, 255, 255, .09); color: #fff; }
.gk-way2 svg { width: 16px; height: 16px; color: #34C776; }
.gk-hero2__pledge {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 16px 0 0;
    font-size: .84rem; color: rgba(255, 255, 255, .6);
}
.gk-hero2__pledge svg { width: 15px; height: 15px; color: #9FE3BC; }

/* ═══════════════════ SCÈNE ISOMÉTRIQUE (SVG, sans WebGL) ══════════════ */
.gk-iso { display: block; width: 100%; height: auto; overflow: visible; }
.gk-iso__face--top   { fill: #3A3A86; }
.gk-iso__face--left  { fill: #232358; }
.gk-iso__face--right { fill: #2F2F72; }
.gk-iso__edge { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 1.4; stroke-linejoin: round; }
.gk-iso__rib  { stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.gk-iso__accent { fill: none; stroke: #34C776; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

.gk-iso__cube--g .gk-iso__face--top   { fill: #17A257; }
.gk-iso__cube--g .gk-iso__face--left  { fill: #0B6B37; }
.gk-iso__cube--g .gk-iso__face--right { fill: #0F8F49; }

.gk-iso__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9.6px; font-weight: 600; letter-spacing: .01em;
    fill: rgba(255, 255, 255, .78);
    text-anchor: middle;
}
.gk-iso__shadow { fill: rgba(0, 0, 0, .22); }

/* Le couvercle s'ouvre, les cubes sortent et se posent en file. */
.gk-iso__lid {
    transform-box: fill-box; transform-origin: 8% 82%;
    transform: rotate(0deg);
    transition: transform 900ms cubic-bezier(.22, .9, .3, 1);
}
.gk-iso.is-open .gk-iso__lid { transform: rotate(-46deg) translate(-6px, -10px); }

/* Le tapis roulant : les familles sortent du conteneur et défilent,
   de droite à gauche, en boucle sans couture (piste doublée, -50 %). */
.gk-hero2__scene { min-width: 0; }
.gk-hero2__inner > * { min-width: 0; }
.gk-belt {
    position: relative; width: 100%; margin-top: -14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    opacity: 0; transform: translateY(10px);
    transition: opacity 700ms ease 700ms, transform 900ms cubic-bezier(.2,.82,.3,1) 700ms;
}
.gk-hero2__scene:has(.gk-iso.is-open) .gk-belt { opacity: 1; transform: none; }
.gk-belt__track {
    display: flex; width: max-content; gap: 34px;
    animation: gk-belt 58s linear infinite;
}
.gk-belt:hover .gk-belt__track { animation-play-state: paused; }
@keyframes gk-belt { to { transform: translateX(-50%); } }
.gk-belt__item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 92px; flex: none;
}
.gk-belt__item svg { width: 56px; height: 60px; display: block; overflow: visible; }
.gk-belt__item .gk-iso__face--top   { fill: #3A3A86; }
.gk-belt__item .gk-iso__face--left  { fill: #232358; }
.gk-belt__item .gk-iso__face--right { fill: #2F2F72; }
.gk-belt__item--g .gk-iso__face--top   { fill: #17A257; }
.gk-belt__item--g .gk-iso__face--left  { fill: #0B6B37; }
.gk-belt__item--g .gk-iso__face--right { fill: #0F8F49; }
.gk-belt__label {
    font-size: .74rem; font-weight: 600; letter-spacing: .01em; text-align: center;
    color: rgba(255,255,255,.8); white-space: nowrap;
}
@media (max-width: 980px) { .gk-belt { margin-top: -6px; } .gk-belt__track { gap: 26px; animation-duration: 46s; } .gk-belt__item { width: 82px; } }

@media (prefers-reduced-motion: reduce) {
    .gk-iso__lid { transform: rotate(-46deg) translate(-6px, -10px); }
    .gk-belt { opacity: 1; transform: none; }
    .gk-belt__track { animation: none; }
}

/* ══════════════ PARCOURS D'UNE COMMANDE — SIX ARRÊTS ══════════════════
   Section sombre, pièce maîtresse : une ligne verte se dessine au
   défilement et la marchandise avance d'arrêt en arrêt. */

.gk-journey {
    position: relative;
    background: var(--gk-indigo-deep);
    color: #fff;
    padding: 96px 0 104px;
    overflow: hidden;
}
@media (max-width: 768px) { .gk-journey { padding: 64px 0 72px; } }
.gk-journey__trame {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 52px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px);
}
.gk-journey .gk-h2, .gk-journey h3 { color: #fff; }
.gk-journey__head { position: relative; max-width: 62ch; margin-bottom: 52px; }

.gk-journey__track { position: relative; }

/* La ligne : un SVG en pleine largeur, tracé au défilement. */
.gk-journey__line { position: absolute; left: 0; right: 0; top: 30px; height: 4px; }
.gk-journey__line svg { width: 100%; height: 4px; display: block; overflow: visible; }
.gk-journey__line .rail { stroke: rgba(255, 255, 255, .16); stroke-width: 2.4; }
.gk-journey__line .live {
    stroke: var(--gk-green); stroke-width: 2.8; stroke-linecap: round;
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1800ms cubic-bezier(.3, .7, .3, 1);
}
.gk-journey.is-in .gk-journey__line .live { stroke-dashoffset: 0; }

.gk-journey__stops {
    position: relative;
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
@media (max-width: 1080px) { .gk-journey__stops { grid-template-columns: repeat(3, 1fr); row-gap: 42px; } }
@media (max-width: 680px)  { .gk-journey__stops { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } }
@media (max-width: 1080px) { .gk-journey__line { display: none; } }

/* Colonne : la preuve se cale en bas, pour que les six pastilles
   s'alignent quel que soit le nombre de lignes du texte. */
.gk-stop { position: relative; display: flex; flex-direction: column; }
.gk-stop__proof { margin-top: auto; align-self: flex-start; }
.gk-stop__mark {
    display: block;                 /* <span> : sans cela, la taille est ignorée */
    position: relative; z-index: 2;
    width: 60px; height: 64px; margin-bottom: 16px;
}
.gk-stop__mark svg { width: 100%; height: 100%; overflow: visible; }
.gk-stop__mark .gk-iso__face--top   { fill: #3A3A86; }
.gk-stop__mark .gk-iso__face--left  { fill: #232358; }
.gk-stop__mark .gk-iso__face--right { fill: #2F2F72; }
/* La marchandise avance : chaque arrêt passe au vert quand la ligne
   l'atteint — le même décalage que celui du texte. */
.gk-stop__mark polygon { transition: fill 420ms ease var(--d, 0ms); }
.gk-journey.is-in .gk-stop .gk-iso__face--top   { fill: #17A257; }
.gk-journey.is-in .gk-stop .gk-iso__face--left  { fill: #0B6B37; }
.gk-journey.is-in .gk-stop .gk-iso__face--right { fill: #0F8F49; }

.gk-stop__n {
    display: inline-block;
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    color: #34C776;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.gk-stop__title {
    font-family: var(--gk-font-title);
    font-size: 1.03rem; font-weight: 800; letter-spacing: -.02em;
    margin-bottom: 8px; line-height: 1.25;
}
.gk-stop__text { font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .66); margin: 0 0 12px; }
.gk-stop__proof {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .82);
}
.gk-stop__proof svg { width: 13px; height: 13px; color: #34C776; }

/* Les arrêts apparaissent l'un après l'autre quand la ligne les atteint. */
.js .gk-journey .gk-stop { opacity: 0; transform: translateY(16px); }
.js .gk-journey.is-in .gk-stop {
    opacity: 1; transform: none;
    transition: opacity 560ms ease var(--d, 0ms), transform 560ms cubic-bezier(.22,.68,.35,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .js .gk-journey .gk-stop { opacity: 1; transform: none; }
    .gk-journey__line .live { stroke-dashoffset: 0; }
}

.gk-journey__foot {
    position: relative;
    margin-top: 56px; padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.gk-journey__foot p { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .66); max-width: 60ch; }

/* ══════════════════════ QUAIS PARTENAIRES (showroom) ══════════════════ */
.gk-docks { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .gk-docks { grid-template-columns: 1fr; } }

.gk-dock {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius-lg);
    overflow: hidden;
    transition: border-color var(--gk-tr), box-shadow var(--gk-tr), transform var(--gk-tr);
}
.gk-dock:hover { border-color: var(--gk-line-strong); box-shadow: var(--gk-sh-md); transform: translateY(-2px); }

/* Le grand visuel sur socle isométrique */
.gk-dock__stage {
    position: relative;
    padding: 34px 30px 0;
    background: var(--gk-indigo-deep);
    overflow: hidden;
}
.gk-dock__stage::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
}
.gk-dock__shot {
    position: relative; z-index: 2;
    height: 216px;
    display: grid; place-items: end center;
}
/* Les photos fournies par les constructeurs sont détourées sur blanc :
   plutôt que de les poser telles quelles sur l'indigo (un carré blanc
   qui casse la scène), on les assume en vitrine — une plaque blanche
   posée sur le socle. */
.gk-dock__shot img {
    max-height: 196px; width: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 20px 34px rgba(0, 0, 0, .34);
}
.gk-dock__shot .gk-dock__nophoto {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: rgba(255,255,255,.3);
}
.gk-dock__shot .gk-dock__nophoto svg { width: 58px; height: 58px; }

/* Le socle : une plaque isométrique verte sous le produit */
.gk-dock__plinth {
    position: relative; z-index: 1;
    height: 54px; margin: -14px -30px 0;
    background:
        radial-gradient(55% 90% at 50% 0%, rgba(15, 143, 73, .45) 0%, rgba(15, 143, 73, 0) 70%);
}
.gk-dock__plinth::after {
    content: ''; position: absolute; left: 50%; top: 6px;
    width: 230px; height: 118px; margin-left: -115px;
    transform: rotateX(60deg) rotateZ(45deg);
    border: 1px solid rgba(52, 199, 118, .5);
    background: rgba(15, 143, 73, .12);
}

.gk-dock__badge {
    position: absolute; z-index: 3; top: 18px; left: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px 7px 11px;
    background: var(--gk-green-deep); color: #fff;
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
    border-radius: 0 999px 999px 0;
}
.gk-dock__badge svg { width: 15px; height: 15px; }

.gk-dock__body { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.gk-dock__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gk-dock__logo {
    width: 52px; height: 52px; flex: none;
    border: 1px solid var(--gk-line); border-radius: 10px;
    background: #fff; display: grid; place-items: center; overflow: hidden;
    font-family: var(--gk-font-title); font-weight: 800; color: var(--gk-indigo);
}
.gk-dock__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gk-dock__name { font-family: var(--gk-font-title); font-size: 1.28rem; font-weight: 800; letter-spacing: -.025em; }
.gk-dock__terr { display: block; font-size: .8rem; color: var(--gk-slate); margin-top: 2px; }
.gk-dock__pitch { color: var(--gk-slate); font-size: .93rem; line-height: 1.6; margin-bottom: 18px; }

.gk-dock__stars { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.gk-dock__stars li {
    display: flex; align-items: center; gap: 10px;
    font-size: .875rem; color: var(--gk-ink);
    padding-bottom: 9px; border-bottom: 1px solid var(--gk-line);
}
.gk-dock__stars li:last-child { border-bottom: 0; padding-bottom: 0; }
.gk-dock__stars .gk-dock__chip {
    flex: none; width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 5px; background: var(--gk-indigo-soft); color: var(--gk-indigo);
    font-size: .68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gk-dock__stars a { color: var(--gk-ink); }
.gk-dock__stars a:hover { color: var(--gk-green-deep); }
.gk-dock__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gk-dock__count { font-size: .82rem; color: var(--gk-slate); font-variant-numeric: tabular-nums; }

/* ══════════════════════ LISTE DE SOURCING (tiroir) ════════════════════
   Aucune table, aucune route : la liste vit dans le navigateur
   (localStorage) et se transforme en UNE demande de devis, envoyée par
   le formulaire du kit. */

.gk-src-backdrop {
    position: fixed; inset: 0; z-index: 108;
    background: rgba(20, 24, 40, .52);
    opacity: 0; visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms;
}
body.src-open .gk-src-backdrop { opacity: 1; visibility: visible; }

.gk-src {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 109;
    width: min(430px, 100vw);
    background: #fff;
    display: flex; flex-direction: column;
    box-shadow: var(--gk-sh-lg);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
}
body.src-open .gk-src { transform: none; }

.gk-src__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--gk-line);
}
.gk-src__head h2 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.gk-src__head p { margin: 3px 0 0; font-size: .8rem; color: var(--gk-slate); }
.gk-src__close {
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--gk-line); border-radius: 50%;
    background: #fff; color: var(--gk-ink);
    display: grid; place-items: center; cursor: pointer;
}
.gk-src__close svg { width: 14px; height: 14px; }
.gk-src__close:hover { border-color: var(--gk-indigo); color: var(--gk-indigo); }

.gk-src__body { flex: 1; overflow-y: auto; padding: 18px 22px; }

.gk-src__item {
    display: grid; grid-template-columns: 62px 1fr; gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gk-line);
}
.gk-src__item:first-child { padding-top: 0; }
.gk-src__thumb {
    width: 62px; height: 62px;
    border: 1px solid var(--gk-line); border-radius: var(--gk-radius-sm);
    background: var(--gk-soft); overflow: hidden;
}
.gk-src__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gk-src__name { font-family: var(--gk-font-title); font-size: .92rem; font-weight: 700; line-height: 1.3; }
.gk-src__name a { color: var(--gk-ink); }
.gk-src__name a:hover { color: var(--gk-green-deep); }
.gk-src__meta { font-size: .78rem; color: var(--gk-slate); margin: 3px 0 9px; font-variant-numeric: tabular-nums; }
.gk-src__row { display: flex; align-items: center; gap: 10px; }
.gk-src__qty {
    width: 96px; padding: 7px 10px;
    border: 1px solid var(--gk-line-strong); border-radius: var(--gk-radius-sm);
    font-size: .85rem; font-variant-numeric: tabular-nums;
}
.gk-src__note {
    width: 100%; margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid var(--gk-line); border-radius: var(--gk-radius-sm);
    font-size: .82rem; background: var(--gk-soft);
}
.gk-src__del {
    margin-left: auto;
    border: 0; background: transparent; cursor: pointer;
    color: var(--gk-slate); font-size: .8rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.gk-src__del:hover { color: var(--gk-danger); }

.gk-src__empty { text-align: center; padding: 48px 10px; }
.gk-src__empty svg { width: 34px; height: 34px; color: var(--gk-line-strong); margin-bottom: 14px; }
.gk-src__empty h3 { font-size: 1rem; margin-bottom: 8px; }
.gk-src__empty p { font-size: .87rem; color: var(--gk-slate); margin: 0 auto 18px; max-width: 32ch; }

.gk-src__foot { border-top: 1px solid var(--gk-line); padding: 18px 22px; background: var(--gk-soft); }
.gk-src__foot .gk-btn { width: 100%; }
.gk-src__foot p { margin: 12px 0 0; font-size: .78rem; color: var(--gk-slate); line-height: 1.5; text-align: center; }

/* Le bouton « Ajouter à ma liste », posé sur les fiches et les cartes */
.gk-addlist {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 20px;
    border: 1.5px solid var(--gk-line-strong); border-radius: 999px;
    background: #fff; color: var(--gk-indigo);
    font-family: var(--gk-font-body); font-size: .9rem; font-weight: 600;
    cursor: pointer;
    transition: border-color var(--gk-tr), background var(--gk-tr), color var(--gk-tr);
}
.gk-addlist svg { width: 17px; height: 17px; }
.gk-addlist:hover { border-color: var(--gk-indigo); background: var(--gk-indigo-soft); }
.gk-addlist.is-in { border-color: var(--gk-green); background: var(--gk-green-soft); color: var(--gk-green-deep); }
.gk-addlist--sm { padding: 8px 14px; font-size: .82rem; }
.gk-addlist--block { display: flex; width: 100%; }
.pd-addlist { margin-top: 12px; }

/* ══════════════════════════ CONFIANCE (sable) ═════════════════════════ */
.gk-trust { background: var(--gk-sand); padding: 88px 0; }
@media (max-width: 768px) { .gk-trust { padding: 60px 0; } }
.gk-trust__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .gk-trust__grid { grid-template-columns: 1fr; gap: 34px; } }

.gk-trust__claim {
    margin: 22px 0 0;
    padding: 20px 22px;
    background: #fff;
    border-left: 3px solid var(--gk-green);
    border-radius: 0 var(--gk-radius-sm) var(--gk-radius-sm) 0;
    font-family: var(--gk-font-title);
    font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: -.015em;
    color: var(--gk-ink);
}

.gk-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
@media (max-width: 640px) { .gk-trust__list { grid-template-columns: 1fr; } }
.gk-trust__list li { padding: 18px 0; border-top: 1px solid var(--gk-sand-line); }
.gk-trust__list li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .gk-trust__list li:nth-child(2) { border-top: 1px solid var(--gk-sand-line); padding-top: 18px; } }
.gk-trust__n {
    display: block;
    font-family: var(--gk-font-body);
    font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    color: var(--gk-green-deep); margin-bottom: 7px;
    font-variant-numeric: tabular-nums;
}
.gk-trust__list strong { display: block; font-family: var(--gk-font-title); font-size: .97rem; margin-bottom: 5px; letter-spacing: -.015em; }
.gk-trust__list span { font-size: .87rem; color: #6B6355; line-height: 1.55; }

.gk-trust__contact {
    margin-top: 34px; padding-top: 26px;
    border-top: 1px solid var(--gk-sand-line);
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* ═════════════ AFFAIRES RAPIDES — habillage de la grille ══════════════ */
.shop-pcard-flow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gk-green-soft); color: var(--gk-green-deep);
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    margin-bottom: 9px;
    align-self: flex-start;   /* la carte est une colonne flex : ne pas s'étirer */
}
.shop-pcard-flow svg { width: 13px; height: 13px; }
.shop-pcard-facts {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    margin: 0 0 10px;
    font-size: .765rem; color: var(--gk-slate); line-height: 1.4;
}
.shop-pcard-facts span { display: inline-flex; align-items: center; gap: 5px; }
.shop-pcard-facts svg { width: 13px; height: 13px; color: var(--gk-line-strong); }
/* Fiche technique dépliante (quai partenaire) : un <details> natif,
   donc utilisable sans JavaScript et imprimable. */
.shop-pcard-specs { margin: 4px 0 2px; border-top: 1px solid var(--gk-line); }
.shop-pcard-specs > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; cursor: pointer; list-style: none;
    font-size: .8rem; font-weight: 600; color: var(--gk-indigo);
}
.shop-pcard-specs > summary::-webkit-details-marker { display: none; }
.shop-pcard-specs > summary svg { width: 15px; height: 15px; color: var(--gk-slate); }
.shop-pcard-specs__n {
    margin-left: auto;
    min-width: 20px; padding: 1px 6px;
    border-radius: 999px; background: var(--gk-soft);
    font-size: .68rem; font-weight: 700; color: var(--gk-slate);
    font-variant-numeric: tabular-nums; text-align: center;
}
.shop-pcard-specs[open] > summary { color: var(--gk-green-deep); }
.shop-pcard-specs dl { margin: 0 0 10px; display: grid; gap: 7px; }
.shop-pcard-specs dl > div {
    display: grid; grid-template-columns: 1fr auto; gap: 10px;
    font-size: .78rem; line-height: 1.4;
}
.shop-pcard-specs dt { color: var(--gk-slate); }
.shop-pcard-specs dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.shop-pcard-actions { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.shop-pcard-actions .shop-btn { flex: 1; margin: 0; }
.shop-pcard-actions .gk-addlist { flex: none; white-space: nowrap; }
.shop-pcard-actions .gk-addlist:only-child { flex: 1; }
/* Sur mobile, deux cartes côte à côte étouffent le texte et les boutons :
   une seule colonne. */
@media (max-width: 560px) {
    .shop-grid { grid-template-columns: 1fr; gap: 16px; }
    .shop-pcard-actions .shop-btn, .shop-pcard-actions .gk-addlist { white-space: nowrap; }
}

/* ═══════════════ EN-TÊTES DE PAGE : espace pour la capsule ════════════
   L'en-tête V2 flotte au-dessus du contenu : chaque écran doit lui
   réserver sa hauteur, sinon le logo et la capsule chevauchent le
   bandeau (fil d'Ariane, titre, boutons du quai partenaire). */
.gk-pagehead { padding-top: 112px !important; }
.gk-phero { padding-top: 104px; }
.gk-phero .gk-breadcrumb { padding-top: 0; }
@media (max-width: 900px) {
    .gk-pagehead { padding-top: 84px !important; }
    .gk-phero { padding-top: 80px; }
}
/* Les écrans de la boutique n'ont pas de bandeau : on réserve la place
   de l'en-tête transparent. */
body.page-shop_catalog .shop-main,
body.page-shop_product .shop-main,
body.page-shop_cart .shop-main,
body.page-shop_checkout .shop-main,
body.page-shop_account .shop-main,
body.page-shop_track .shop-main,
body.page-shop_confirmation .shop-main,
body.page-shop_download .shop-main,
body.page-merci .shop-main { padding-top: 96px; }
@media (max-width: 900px) {
    body.page-shop_catalog .shop-main,
    body.page-shop_product .shop-main,
    body.page-shop_cart .shop-main,
    body.page-shop_checkout .shop-main,
    body.page-shop_account .shop-main,
    body.page-shop_track .shop-main,
    body.page-shop_confirmation .shop-main,
    body.page-shop_download .shop-main,
    body.page-merci .shop-main { padding-top: 76px; }
}

/* ═══════════════════════ APPARITIONS AU DÉFILEMENT ════════════════════ */
.js .gk-rise { opacity: 0; transform: translateY(18px); }
.js .gk-rise.is-in {
    opacity: 1; transform: none;
    transition: opacity 640ms cubic-bezier(.22,.68,.35,1) var(--d, 0ms),
                transform 640ms cubic-bezier(.22,.68,.35,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) { .js .gk-rise { opacity: 1; transform: none; } }

@media print {
    .gk-cap, .gk-curtain, .gk-src, .gk-src-backdrop { display: none !important; }
}

/* ══════════════ SIGNATURE DE L'AGENCE, PIED DE PAGE ═══════════════════ */
.gk-footer__bottom { align-items: center; }
.gk-sign {
    display: inline-flex; align-items: center; gap: 9px;
    color: rgba(255,255,255,.62); text-decoration: none; font-size: .8rem;
}
.gk-sign__label { font-style: italic; }
.gk-sign__name {
    position: relative; font-weight: 800; letter-spacing: .18em; font-size: .72rem; color: #fff;
}
.gk-sign__name::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gk-green);
    transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.gk-sign:hover .gk-sign__name::after { transform: scaleX(1); }
.gk-sign__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gk-green); box-shadow: 0 0 0 4px rgba(15,143,73,.22); }
@media (max-width: 560px) { .gk-footer__bottom { flex-direction: column; align-items: flex-start; } }