/* =====================================================================
   GK GENERAL SHOP — gks.css
   Système de design de la vitrine : jetons, typographie, grille,
   composants partagés, en-tête, menu mobile, pied de page.

   Chargé sur TOUTES les pages publiques (vitrine et boutique).
   Les écrans de la boutique ajoutent ensuite leur feuille dédiée
   (shop-base.css puis shop-catalog.css, shop-product.css…).

   Règle de couleur : indigo = la marque et la structure,
   vert = l'action et le positif, sable = la pédagogie (comment ça
   marche, engagements). Aucun dégradé décoratif, aucune ombre colorée.
   ===================================================================== */

/* ═════════════════════════════ JETONS ═════════════════════════════ */
:root {
    /* Couleurs de marque */
    --gk-indigo:        #2A2A6A;
    --gk-indigo-deep:   #1E1E52;
    --gk-indigo-soft:   #EEEFF7;
    --gk-green:         #0F8F49;
    --gk-green-deep:    #0B6B37;
    --gk-green-soft:    #E8F5ED;

    /* Neutres */
    --gk-ink:           #141828;
    --gk-slate:         #5C6474;
    --gk-line:          #E4E7EC;
    --gk-line-strong:   #CFD4DE;
    --gk-bg:            #FFFFFF;
    --gk-soft:          #F5F6F8;
    --gk-sand:          #F3EFE6;
    --gk-sand-line:     #E3DCCC;

    /* États */
    --gk-warn:          #A8611A;
    --gk-warn-soft:     #FBF3E6;
    --gk-danger:        #B3261E;
    --gk-danger-soft:   #FCEFEE;

    /* Typographie */
    --gk-font-title: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gk-font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gk-font-logo:  'Michroma', 'Manrope', system-ui, sans-serif;

    /* Rythme */
    --gk-container: 1200px;
    --gk-gutter: 32px;
    --gk-radius: 14px;
    --gk-radius-sm: 8px;
    --gk-radius-lg: 20px;

    /* Ombres — neutres et discrètes, jamais colorées */
    --gk-sh-sm: 0 1px 2px rgba(20, 24, 40, .05), 0 2px 10px rgba(20, 24, 40, .045);
    --gk-sh-md: 0 2px 6px rgba(20, 24, 40, .06), 0 14px 34px rgba(20, 24, 40, .08);
    --gk-sh-lg: 0 8px 18px rgba(20, 24, 40, .07), 0 30px 70px rgba(20, 24, 40, .12);

    --gk-tr: 180ms cubic-bezier(.4, 0, .2, 1);

    /* Hauteur cumulée des barres collantes (barre haute + en-tête) :
       sert d'ancrage aux colonnes sticky et au défilement par ancre. */
    --gk-header-h: 72px;
    --gk-topbar-h: 36px;
    --gk-top: calc(var(--gk-header-h) + var(--gk-topbar-h));
}

@media (max-width: 1024px) {
    :root { --gk-gutter: 24px; --gk-header-h: 64px; }
}
@media (max-width: 600px) {
    :root { --gk-gutter: 20px; --gk-topbar-h: 0px; }
}

/* ═════════════════════════════ SOCLE ══════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--gk-top) + 16px);
}

body {
    margin: 0;
    font-family: var(--gk-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gk-ink);
    background: var(--gk-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--gk-indigo); text-decoration: none; }
a:hover { color: var(--gk-green-deep); }

h1, h2, h3, h4, h5 {
    font-family: var(--gk-font-title);
    color: var(--gk-ink);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    font-weight: 700;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--gk-line); margin: 32px 0; }

::selection { background: var(--gk-indigo); color: #fff; }

:focus-visible {
    outline: 2px solid var(--gk-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Taille de repli des icônes du jeu GK : une icône ne doit jamais
   s'étaler à la largeur de son conteneur faute de règle dédiée. */
.gk-ico { width: 1.15em; height: 1.15em; flex: none; }

.gk-sr, .shop-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.gk-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--gk-indigo); color: #fff;
    padding: 12px 20px; border-radius: 0 0 var(--gk-radius-sm) 0;
    font-weight: 600;
}
.gk-skip:focus { left: 0; color: #fff; }

/* ═══════════════════════════ GRILLE ═══════════════════════════════ */
.container, .gk-container {
    width: 100%;
    max-width: var(--gk-container);
    margin: 0 auto;
    padding: 0 var(--gk-gutter);
}
.gk-container--narrow { max-width: 860px; }
.gk-container--mid    { max-width: 1020px; }

.gk-section { padding: 88px 0; }
.gk-section--tight { padding: 56px 0; }
.gk-section--flush-top { padding-top: 0; }
@media (max-width: 768px) {
    .gk-section { padding: 60px 0; }
    .gk-section--tight { padding: 40px 0; }
}

.gk-section--soft   { background: var(--gk-soft); }
.gk-section--sand   { background: var(--gk-sand); }
.gk-section--indigo { background: var(--gk-indigo-deep); color: #fff; }
.gk-section--indigo h2,
.gk-section--indigo h3 { color: #fff; }

/* ════════════════════════ TYPOGRAPHIE ═════════════════════════════ */
.gk-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--gk-font-body);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gk-green-deep);
    margin: 0 0 18px;
}
.gk-eyebrow::before {
    content: ''; width: 26px; height: 2px;
    background: var(--gk-green); flex: none;
}
.gk-eyebrow--light { color: #9FE3BC; }
.gk-eyebrow--light::before { background: #9FE3BC; }

.gk-h1 {
    font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.45rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.06;
}
.gk-h2 {
    font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
}
.gk-h3 {
    font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem);
    font-weight: 700;
    letter-spacing: -.02em;
}
.gk-h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }

.gk-lead {
    font-size: clamp(1rem, .96rem + .28vw, 1.14rem);
    line-height: 1.68;
    color: var(--gk-slate);
    max-width: 62ch;
}
.gk-lead--light { color: rgba(255, 255, 255, .78); }

.gk-muted { color: var(--gk-slate); }
.gk-small { font-size: .84rem; }
.gk-num   { font-variant-numeric: tabular-nums; }

/* Mot souligné d'un trait tracé à la main (SVG inline, voir gks-icons) */
.gk-underline { position: relative; white-space: nowrap; }
.gk-underline svg {
    position: absolute; left: 0; right: 0; bottom: -.08em;
    width: 100%; height: .26em; overflow: visible;
    color: var(--gk-green);
}

/* En-tête de section : titre à gauche, complément à droite */
.gk-sechead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; margin-bottom: 44px;
}
.gk-sechead__text { max-width: 60ch; }
.gk-sechead__text .gk-lead { margin: 14px 0 0; }
.gk-sechead__aside { flex: none; padding-bottom: 4px; }
@media (max-width: 860px) {
    .gk-sechead { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
}

/* ═════════════════════════ BOUTONS ════════════════════════════════ */
.gk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--gk-font-body);
    font-size: .92rem; font-weight: 600; letter-spacing: -.005em;
    line-height: 1.2; text-align: center;
    cursor: pointer; text-decoration: none;
    transition: background var(--gk-tr), border-color var(--gk-tr),
                color var(--gk-tr), transform var(--gk-tr), box-shadow var(--gk-tr);
}
.gk-btn svg { width: 18px; height: 18px; flex: none; }
.gk-btn:hover { transform: translateY(-1px); }
.gk-btn:active { transform: translateY(0); }

.gk-btn--primary { background: var(--gk-green); color: #fff; box-shadow: var(--gk-sh-sm); }
.gk-btn--primary:hover { background: var(--gk-green-deep); color: #fff; box-shadow: var(--gk-sh-md); }

.gk-btn--indigo { background: var(--gk-indigo); color: #fff; }
.gk-btn--indigo:hover { background: var(--gk-indigo-deep); color: #fff; }

.gk-btn--outline {
    background: transparent; color: var(--gk-indigo);
    border-color: var(--gk-line-strong);
}
.gk-btn--outline:hover { border-color: var(--gk-indigo); background: var(--gk-indigo-soft); color: var(--gk-indigo); }

.gk-btn--ghost-light {
    background: transparent; color: #fff;
    border-color: rgba(255, 255, 255, .34);
}
.gk-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; }

.gk-btn--wa { background: #FFFFFF; color: var(--gk-ink); border-color: var(--gk-line-strong); }
.gk-btn--wa:hover { border-color: #0F8F49; color: var(--gk-green-deep); }
.gk-btn--wa svg { color: #25D366; }

.gk-btn--sm { padding: 9px 16px; font-size: .84rem; }
.gk-btn--lg { padding: 16px 30px; font-size: 1rem; }
.gk-btn--block { display: flex; width: 100%; }

.gk-btn[disabled], .gk-btn.is-disabled { opacity: .5; pointer-events: none; }

.gk-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Lien fléché */
.gk-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .92rem; color: var(--gk-indigo);
}
.gk-arrow svg { width: 17px; height: 17px; transition: transform var(--gk-tr); }
.gk-arrow:hover { color: var(--gk-green-deep); }
.gk-arrow:hover svg { transform: translateX(4px); }

/* ═════════════════════════ PASTILLES ══════════════════════════════ */
.gk-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--gk-line);
    background: #fff;
    font-size: .76rem; font-weight: 600; letter-spacing: .005em;
    color: var(--gk-slate);
    white-space: nowrap;
}
.gk-chip svg { width: 14px; height: 14px; flex: none; }
.gk-chip--green  { background: var(--gk-green-soft); border-color: transparent; color: var(--gk-green-deep); }
.gk-chip--indigo { background: var(--gk-indigo-soft); border-color: transparent; color: var(--gk-indigo); }
.gk-chip--sand   { background: var(--gk-sand); border-color: var(--gk-sand-line); color: #6B5B3E; }
.gk-chip--dark   { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }

/* Badge de mandat — la signature visuelle des partenaires */
.gk-mandate {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 14px 6px 10px;
    background: var(--gk-green);
    color: #fff;
    font-size: .755rem; font-weight: 700;
    letter-spacing: .02em;
    border-radius: 4px 999px 999px 4px;
}
.gk-mandate svg { width: 15px; height: 15px; }
.gk-mandate small { font-weight: 500; opacity: .85; }

/* ═══════════════════════ BLOCS ET FILETS ══════════════════════════ */
.gk-panel {
    background: #fff;
    border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius);
}
.gk-panel--sand { background: var(--gk-sand); border-color: var(--gk-sand-line); }
.gk-panel--pad  { padding: 30px; }

/* Rangée de faits séparés par un filet vertical (jamais des cartes) */
.gk-facts {
    display: flex; flex-wrap: wrap;
    border-top: 1px solid var(--gk-line);
    padding-top: 26px; margin-top: 40px;
    gap: 0;
}
.gk-facts > * {
    flex: 1 1 180px;
    padding: 0 26px;
    border-left: 1px solid var(--gk-line);
}
.gk-facts > *:first-child { padding-left: 0; border-left: 0; }
.gk-facts dt {
    font-family: var(--gk-font-title);
    font-size: 1.62rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--gk-indigo);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.gk-facts dd { margin: 5px 0 0; font-size: .85rem; color: var(--gk-slate); line-height: 1.45; }
.gk-facts--light { border-top-color: rgba(255,255,255,.18); }
.gk-facts--light > * { border-left-color: rgba(255,255,255,.18); }
.gk-facts--light dt { color: #fff; }
.gk-facts--light dd { color: rgba(255,255,255,.7); }
@media (max-width: 600px) {
    .gk-facts > * { flex: 1 1 50%; padding: 14px 16px; border-left: 0; border-top: 1px solid var(--gk-line); }
    .gk-facts > *:first-child { padding-left: 16px; }
    .gk-facts { padding-top: 0; }
}

/* Liste d'engagements à coche verte */
.gk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gk-checks li { display: flex; gap: 14px; align-items: flex-start; }
.gk-checks svg {
    width: 21px; height: 21px; flex: none; margin-top: 2px;
    color: var(--gk-green);
}
.gk-checks strong { display: block; font-family: var(--gk-font-title); font-size: .98rem; margin-bottom: 3px; }
.gk-checks span { color: var(--gk-slate); font-size: .9rem; line-height: 1.55; }

/* Encadré d'information / avertissement */
.gk-note {
    display: flex; gap: 14px;
    padding: 18px 20px;
    border-radius: var(--gk-radius-sm);
    background: var(--gk-indigo-soft);
    border-left: 3px solid var(--gk-indigo);
    font-size: .9rem; line-height: 1.6; color: var(--gk-ink);
}
.gk-note svg { width: 20px; height: 20px; flex: none; color: var(--gk-indigo); margin-top: 1px; }
.gk-note p:last-child { margin-bottom: 0; }
.gk-note--sand { background: var(--gk-sand); border-left-color: #C7A15A; }
.gk-note--sand svg { color: #A2803F; }

/* ═══════════════════ FORMULAIRES (habillage kit) ══════════════════ */
.gk-field { margin-bottom: 18px; }
.gk-label, .shop-label {
    display: block;
    font-size: .845rem; font-weight: 600;
    color: var(--gk-ink);
    margin-bottom: 7px;
}
.gk-label .req, .shop-label .req { color: var(--gk-green-deep); }
/* L'indice se place SOUS le champ : à l'intérieur du libellé, il décalait
   verticalement les deux libellés d'une même rangée à deux colonnes. */
.gk-hint {
    display: block; font-weight: 400;
    color: var(--gk-slate); font-size: .8rem;
    margin: 6px 0 0; line-height: 1.45;
}

.gk-input, .gk-select, .gk-textarea,
.shop-input, .shop-select, .shop-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gk-line-strong);
    border-radius: var(--gk-radius-sm);
    background: #fff;
    font-size: .94rem;
    color: var(--gk-ink);
    transition: border-color var(--gk-tr), box-shadow var(--gk-tr);
}
.gk-textarea, .shop-textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.gk-input:focus, .gk-select:focus, .gk-textarea:focus,
.shop-input:focus, .shop-select:focus, .shop-textarea:focus {
    outline: none;
    border-color: var(--gk-indigo);
    box-shadow: 0 0 0 3px rgba(42, 42, 106, .12);
}
.gk-input::placeholder, .gk-textarea::placeholder,
.shop-input::placeholder, .shop-textarea::placeholder { color: #9AA1AE; }

.gk-select, .shop-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6474' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

/* `align-items: end` : quand un champ porte une aide sur deux lignes et
   pas son voisin, les deux saisies restent alignées par le bas. */
/* Rangée à deux colonnes : les libellés partent tous de la même ligne
   (`align-items: start`), les indices vivant désormais sous les champs. */
.gk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media (max-width: 640px) { .gk-row { grid-template-columns: 1fr; } }

.gk-check, .shop-check {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .88rem; line-height: 1.5; color: var(--gk-slate);
    cursor: pointer;
}
.gk-check input, .shop-check input { margin-top: 3px; accent-color: var(--gk-green); width: 16px; height: 16px; }

.gk-help, .shop-help { font-size: .8rem; color: var(--gk-slate); margin: 6px 0 0; }

.gk-error { color: var(--gk-danger); font-size: .8rem; margin: 6px 0 0; font-weight: 500; }
.gk-input.is-invalid, .shop-input.is-invalid { border-color: var(--gk-danger); }

/* Messages flash du kit */
.gk-flash, .shop-flash {
    padding: 14px 18px;
    border-radius: var(--gk-radius-sm);
    font-size: .9rem; font-weight: 500;
    margin: 22px 0;
    display: flex; gap: 10px; align-items: center;
}
.gk-flash--ok, .shop-flash--ok { background: var(--gk-green-soft); color: var(--gk-green-deep); }
.gk-flash--ko, .shop-flash--ko { background: var(--gk-danger-soft); color: var(--gk-danger); }

/* ═════════════════════════ BARRE HAUTE ════════════════════════════ */
.gk-topbar {
    background: var(--gk-indigo-deep);
    color: rgba(255, 255, 255, .8);
    font-size: .765rem;
    line-height: 1.3;
}
.gk-topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: var(--gk-topbar-h);
    padding: 7px 0;
}
.gk-topbar a { color: rgba(255, 255, 255, .88); }
.gk-topbar a:hover { color: #fff; }
.gk-topbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gk-topbar__sep { color: rgba(255, 255, 255, .3); }
.gk-topbar__right { display: flex; align-items: center; gap: 18px; flex: none; }
.gk-topbar__pledge { display: inline-flex; align-items: center; gap: 7px; color: #9FE3BC; font-weight: 600; }
.gk-topbar__pledge svg { width: 14px; height: 14px; }
.gk-topbar__wa { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.gk-topbar__wa svg { width: 15px; height: 15px; color: #25D366; }
@media (max-width: 860px) { .gk-topbar__group { display: none; } .gk-topbar__inner { justify-content: center; } }
@media (max-width: 600px) { .gk-topbar { display: none; } }

/* ═══════════════════════════ EN-TÊTE ══════════════════════════════ */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--gk-line);
    transition: box-shadow var(--gk-tr);
}
.site-header.scrolled { box-shadow: var(--gk-sh-sm); }

.gk-header__bar {
    display: flex; align-items: center; gap: 28px;
    min-height: var(--gk-header-h);
}

/* ── Logotype ── */
.gk-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.gk-logo__mark { width: 34px; height: 36px; flex: none; }
.gk-logo__type { display: flex; flex-direction: column; line-height: 1; }
.gk-logo__over {
    font-family: var(--gk-font-logo);
    font-size: .49rem; letter-spacing: .28em;
    color: var(--gk-slate);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.gk-logo__word {
    font-family: var(--gk-font-logo);
    font-size: 1.14rem; letter-spacing: .04em;
    color: var(--gk-indigo);
    line-height: 1;
}
.gk-logo--light .gk-logo__over { color: rgba(255, 255, 255, .6); }
.gk-logo--light .gk-logo__word { color: #fff; }
@media (max-width: 420px) {
    .gk-logo__word { font-size: 1rem; }
    .gk-logo__over { font-size: .44rem; letter-spacing: .24em; }
}

/* ── Navigation ── */
.gk-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.gk-nav > * { position: relative; }
.gk-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: .905rem; font-weight: 500;
    color: var(--gk-ink);
    white-space: nowrap;
    transition: color var(--gk-tr), background var(--gk-tr);
}
.gk-nav__link:hover { background: var(--gk-soft); color: var(--gk-indigo); }
.gk-nav__link.is-active { color: var(--gk-indigo); font-weight: 600; }
.gk-nav__link.is-active::after {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px;
    height: 2px; background: var(--gk-green); border-radius: 2px;
}
.gk-nav__link svg.gk-caret { width: 13px; height: 13px; transition: transform var(--gk-tr); color: var(--gk-slate); }
.gk-has-menu:hover .gk-caret, .gk-has-menu:focus-within .gk-caret { transform: rotate(180deg); }

/* Panneau déroulant des partenaires */
.gk-menu {
    position: absolute; top: calc(100% + 6px); left: -8px;
    min-width: 340px;
    background: #fff;
    border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius);
    box-shadow: var(--gk-sh-lg);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--gk-tr), transform var(--gk-tr), visibility var(--gk-tr);
    z-index: 95;
}
.gk-has-menu:hover .gk-menu,
.gk-has-menu:focus-within .gk-menu { opacity: 1; visibility: visible; transform: none; }

.gk-menu__item {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 11px 12px; border-radius: 9px;
    transition: background var(--gk-tr);
}
.gk-menu__item:hover { background: var(--gk-soft); }
.gk-menu__plate {
    width: 40px; height: 40px; flex: none;
    border-radius: 7px;
    background: var(--gk-indigo);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--gk-font-title);
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
    overflow: hidden;
}
.gk-menu__plate img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.gk-menu__txt strong { display: block; font-family: var(--gk-font-title); font-size: .92rem; color: var(--gk-ink); }
.gk-menu__txt small { display: block; font-size: .785rem; color: var(--gk-slate); line-height: 1.4; margin-top: 2px; }
.gk-menu__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px; padding: 11px 12px;
    border-top: 1px solid var(--gk-line);
    font-size: .845rem; font-weight: 600; color: var(--gk-indigo);
}
.gk-menu__foot svg { width: 15px; height: 15px; }
.gk-menu__empty { padding: 14px 12px; font-size: .85rem; color: var(--gk-slate); }

/* ── Actions à droite ── */
/* `margin-left: auto` : sur mobile la navigation est masquée, il faut
   donc que le bloc d'actions se plaque de lui-même à droite. */
.gk-header__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

.gk-icon-btn, .shop-icon-btn {
    position: relative;
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gk-line);
    background: #fff; color: var(--gk-ink);
    cursor: pointer;
    transition: border-color var(--gk-tr), color var(--gk-tr), background var(--gk-tr);
}
.gk-icon-btn svg, .shop-icon-btn svg { width: 18px; height: 18px; }
.gk-icon-btn:hover, .shop-icon-btn:hover { border-color: var(--gk-indigo); color: var(--gk-indigo); background: var(--gk-indigo-soft); }
.gk-icon-btn .gk-count, .shop-icon-btn .shop-badge-count {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--gk-green); color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.gk-icon-btn .gk-count[data-empty="1"],
.shop-icon-btn .shop-badge-count[data-empty="1"] { display: none; }

.gk-header__cta { margin-left: 4px; }

/* Recherche déployable */
.gk-search {
    position: relative;
    display: flex; align-items: center;
}
.gk-search input {
    width: 172px;
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--gk-line);
    border-radius: 999px;
    background: var(--gk-soft);
    font-size: .865rem;
    transition: width var(--gk-tr), background var(--gk-tr), border-color var(--gk-tr);
}
.gk-search input:focus {
    outline: none; width: 232px; background: #fff;
    border-color: var(--gk-indigo);
    box-shadow: 0 0 0 3px rgba(42, 42, 106, .1);
}
.gk-search button {
    position: absolute; right: 4px;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--gk-slate); display: grid; place-items: center; cursor: pointer;
}
.gk-search button svg { width: 16px; height: 16px; }
.gk-search button:hover { color: var(--gk-indigo); }

@media (max-width: 1160px) { .gk-search input { width: 130px; } }
@media (max-width: 1080px) { .gk-nav, .gk-search, .gk-header__cta { display: none; } }

/* ── Hamburger ── */
.mobile-menu-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--gk-line); border-radius: 10px;
    background: #fff; cursor: pointer;
    padding: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mobile-menu-toggle span {
    display: block; width: 18px; height: 1.8px;
    background: var(--gk-ink); border-radius: 2px;
    transition: transform var(--gk-tr), opacity var(--gk-tr);
}
body.menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
body.menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
@media (max-width: 1080px) { .mobile-menu-toggle { display: flex; } }

/* ═════════════════════════ MENU MOBILE ════════════════════════════ */
.mobile-menu {
    position: fixed; inset: 0; z-index: 88;
    background: var(--gk-indigo-deep);
    color: #fff;
    display: flex; flex-direction: column;
    padding: calc(var(--gk-header-h) + 20px) var(--gk-gutter) 28px;
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 260ms ease, visibility 220ms;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }

.mm-nav { display: flex; flex-direction: column; }
.mm-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--gk-font-title);
    font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
    color: #fff;
}
.mm-link:hover, .mm-link.est-actif { color: #9FE3BC; }
.mm-link svg { width: 17px; height: 17px; opacity: .45; }

.mm-group { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mm-group > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; cursor: pointer; list-style: none;
    font-family: var(--gk-font-title);
    font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
    color: #fff;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group__sign { position: relative; width: 15px; height: 15px; flex: none; }
.mm-group__sign::before, .mm-group__sign::after {
    content: ''; position: absolute; background: rgba(255, 255, 255, .6);
    left: 50%; top: 50%;
}
.mm-group__sign::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }
.mm-group__sign::after  { width: 1.6px; height: 13px; transform: translate(-50%, -50%); transition: opacity var(--gk-tr); }
.mm-group[open] .mm-group__sign::after { opacity: 0; }

.mm-sub { padding: 2px 0 16px; display: grid; gap: 8px; }
.mm-sub a {
    display: block; padding: 12px 14px;
    background: rgba(255, 255, 255, .06);
    border-left: 2px solid var(--gk-green);
    border-radius: 0 9px 9px 0;
    color: #fff;
}
.mm-sub strong { display: block; font-family: var(--gk-font-title); font-size: .96rem; }
.mm-sub small { display: block; font-size: .8rem; color: rgba(255, 255, 255, .6); margin-top: 2px; }

.mm-foot { margin-top: auto; padding-top: 28px; }
.mm-foot .gk-btn { width: 100%; }
.mm-contact {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: 14px;
}
.mm-contact a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; font-size: .86rem; font-weight: 600;
}
.mm-contact svg { width: 16px; height: 16px; }
.mm-legal { margin-top: 20px; font-size: .78rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }
/* Fond sombre : les liens ne doivent pas hériter de l'indigo global
   (contraste mesuré 1,20:1 — illisible). */
.mm-legal a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.mm-legal a:hover,
.mm-legal a:focus-visible { color: #fff; text-decoration-thickness: 2px; }

/* ══════════════════════════ PIED DE PAGE ══════════════════════════ */
.gk-footer {
    background: var(--gk-indigo-deep);
    color: rgba(255, 255, 255, .72);
    font-size: .89rem;
    padding: 72px 0 0;
    margin-top: 0;
}
.gk-footer a { color: rgba(255, 255, 255, .72); }
.gk-footer a:hover { color: #fff; }

.gk-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 52px;
}
@media (max-width: 980px)  { .gk-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px)  { .gk-footer__top { grid-template-columns: 1fr; gap: 30px; } }

.gk-footer__brand .gk-logo { margin-bottom: 18px; }
.gk-footer__pitch { color: rgba(255, 255, 255, .66); line-height: 1.65; max-width: 38ch; margin-bottom: 20px; }

.gk-footer__coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gk-footer__coords li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.5; }
.gk-footer__coords svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: #9FE3BC; }

.gk-footer__title {
    font-family: var(--gk-font-title);
    font-size: .76rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
}
.gk-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.gk-footer__group {
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 22px 0;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.gk-footer__group-label {
    font-size: .76rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.gk-footer__group a {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: #fff;
}
.gk-footer__group a svg { width: 14px; height: 14px; opacity: .6; }

.gk-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding: 24px 0 30px;
    font-size: .8rem; color: rgba(255, 255, 255, .5);
}
.gk-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ══════════════════════ FIL D'ARIANE ══════════════════════════════ */
.gk-breadcrumb, .shop-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--gk-slate);
    padding: 22px 0 0;
}
.gk-breadcrumb a, .shop-breadcrumb a { color: var(--gk-slate); }
.gk-breadcrumb a:hover, .shop-breadcrumb a:hover { color: var(--gk-indigo); }
.gk-breadcrumb .sep, .shop-breadcrumb .sep { color: var(--gk-line-strong); }
.gk-breadcrumb .current, .shop-breadcrumb .current { color: var(--gk-ink); font-weight: 500; }

/* ════════════════════════ ÉTAT VIDE ═══════════════════════════════ */
.gk-empty {
    text-align: center;
    padding: 56px 28px;
    border: 1px dashed var(--gk-line-strong);
    border-radius: var(--gk-radius);
    background: var(--gk-soft);
}
.gk-empty__ico {
    width: 52px; height: 52px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; border: 1px solid var(--gk-line);
    color: var(--gk-indigo);
}
.gk-empty__ico svg { width: 24px; height: 24px; }
.gk-empty h3 { font-size: 1.1rem; margin-bottom: 8px; }
.gk-empty p { color: var(--gk-slate); max-width: 48ch; margin: 0 auto 20px; font-size: .92rem; }

/* ════════════════════════ ANIMATIONS ══════════════════════════════ */
/* Révélation discrète au défilement, activée seulement si le JS a posé
   la classe `js` sur <html> — sans JS, tout reste visible. */
.js .gk-reveal { opacity: 0; transform: translateY(14px); }
.js .gk-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 620ms cubic-bezier(.22, .68, .35, 1),
                transform 620ms cubic-bezier(.22, .68, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js .gk-reveal { opacity: 1; transform: none; }
}

/* ═══════════════════ BANNIÈRE / POPUP PROMO (kit) ═════════════════ */
#site-promo-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 9px var(--gk-gutter);
    font-size: .84rem; font-weight: 500;
    position: relative;
}
.promo-banner-inner { flex: 1; text-align: center; }
.promo-banner-text { color: inherit; font-weight: 600; }
.promo-banner-close {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    width: 26px; height: 26px; display: grid; place-items: center; opacity: .7;
}
.promo-banner-close svg { width: 12px; height: 12px; }
.promo-banner-close:hover { opacity: 1; }
#site-promo-banner.is-hidden { display: none; }

#site-promo-popup-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(20, 24, 40, .6);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
#site-promo-popup-overlay.visible { display: flex; }
.promo-popup-card {
    position: relative; background: #fff;
    border-radius: var(--gk-radius);
    max-width: 520px; width: 100%; overflow: hidden;
    box-shadow: var(--gk-sh-lg);
}
.promo-popup-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .92); color: var(--gk-ink);
    display: grid; place-items: center; cursor: pointer;
}
.promo-popup-close svg { width: 13px; height: 13px; }
.promo-popup-img { width: 100%; display: block; }
.promo-popup-footer { padding: 18px; text-align: center; }

/* ═══════════════════ BANDEAU COOKIES (kit) ════════════════════════ */
.cookie-banner {
    position: fixed; left: 20px; bottom: 20px; z-index: 190;
    width: min(400px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius);
    box-shadow: var(--gk-sh-lg);
    padding: 22px;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity 260ms ease, transform 260ms ease, visibility 260ms;
}
.cookie-banner.visible { opacity: 1; visibility: visible; transform: none; }
.cookie-banner h4 { font-size: .98rem; margin-bottom: 8px; }
.cookie-banner p { font-size: .84rem; color: var(--gk-slate); line-height: 1.55; margin-bottom: 16px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .gk-btn { flex: 1; }

/* ═══════════════════ EMPLACEMENTS MÉDIA (gks_media) ═══════════════
   Un emplacement occupe toujours sa place, qu'il soit rempli ou non :
   la page ne bouge pas quand le client dépose enfin le fichier.
   Repli : surface de marque + grille isométrique (les trois faces du
   cube GK) + lueur douce. Muet, sans texte, sans cadre gris. */
.gks-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--gk-radius);
    background: var(--gk-indigo);
    isolation: isolate;
}
.gks-media__img,
.gks-media__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.gks-media__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 24, 40, .12) 0%, rgba(20, 24, 40, .62) 100%);
}
/* Emplacement « fond de section » : il épouse son conteneur au lieu
   d'imposer un ratio (hero, bandeaux pleine largeur). */
.gks-media--fill {
    position: absolute; inset: 0;
    height: 100%; border-radius: 0;
}

/* Teintes du repli */
.gks-media--indigo { background: var(--gk-indigo); }
.gks-media--deep   { background: var(--gk-indigo-deep); }
.gks-media--green  { background: var(--gk-green-deep); }
.gks-media--sand   { background: #D9CEB6; }

/* Grille isométrique : trois familles de filets à 0°, 60° et −60°,
   exactement l'axonométrie du cube de la marque. */
.gks-media__iso {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(60deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,.07) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg,   rgba(255,255,255,.045) 0 1px, transparent 1px 42px);
}
.gks-media--sand .gks-media__iso {
    background-image:
        repeating-linear-gradient(60deg,  rgba(90,70,30,.10) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(-60deg, rgba(90,70,30,.10) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg,   rgba(90,70,30,.06) 0 1px, transparent 1px 42px);
}
/* La lueur : un seul halo très doux, décentré. Pas un dégradé décoratif. */
.gks-media__glow {
    position: absolute; inset: 0;
    background: radial-gradient(52% 62% at 28% 22%, rgba(15, 143, 73, .38) 0%, rgba(15, 143, 73, 0) 62%),
                radial-gradient(60% 70% at 82% 88%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 60%);
}
.gks-media--sand .gks-media__glow {
    background: radial-gradient(52% 62% at 28% 22%, rgba(42, 42, 106, .16) 0%, rgba(42, 42, 106, 0) 62%);
}

/* Le repli porte discrètement la marque : une silhouette de cube,
   dessinée en filets, très peu contrastée. */
.gks-media--empty::after {
    content: '';
    position: absolute; right: 7%; bottom: 8%;
    width: clamp(74px, 18%, 158px); aspect-ratio: 200 / 210;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='4' stroke-linejoin='round'%3E%3Cpolygon points='13.4,55 100,5 186.6,55 186.6,155 100,205 13.4,155'/%3E%3Cpolyline points='13.4,55 100,105 186.6,55'/%3E%3Cline x1='100' y1='105' x2='100' y2='205'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.gks-media--sand.gks-media--empty::after { filter: invert(1) opacity(.5); }

@media (prefers-reduced-motion: reduce) {
    /* La vidéo est mise en pause par gks.js ; on masque aussi tout
       mouvement résiduel en s'appuyant sur le poster. */
    .gks-media__video { animation: none !important; }
}

/* ═════════════════════════ IMPRESSION ═════════════════════════════ */
@media print {
    .site-header, .gk-topbar, .gk-footer, .mobile-menu,
    .cookie-banner, #site-promo-banner, .pd-sticky { display: none !important; }
    body { background: #fff; }
}