/*
 * GKS Mobile World — feuille du site vitrine.
 *
 * Écrite à la main, sans framework ni étape de construction : elle est servie
 * telle quelle par l'hébergement mutualisé. Mobile d'abord — tout se juge sur
 * un écran de 360 px, les écrans plus larges ne font qu'ajouter de l'air.
 *
 * Direction : une boutique de quartier, précise et sûre d'elle.
 *  - Deux neutres profonds plutôt que du blanc pur : un blanc cassé chaud pour
 *    les bandes claires, un presque-noir violacé pour les bandes sombres. Le
 *    blanc pur partout donnait un rendu froid et bon marché.
 *  - Sora (géométrique, technique) pour les titres, grands et serrés ; Inter
 *    pour le texte, calme. Ce contraste fait l'élégance, pas les effets.
 *  - Chaque appareil est posé sur un aplat teinté de SA couleur. Nos photos
 *    sont hétérogènes (visuels de fabricant, vignettes générées) : sur un
 *    même aplat, elles se ressemblent, et le catalogue devient cohérent.
 *  - Le violet de la marque est un accent (bouton principal, choix actif,
 *    repères), jamais un fond. Le vert WhatsApp ne sert qu'à l'icône et au
 *    liseré de son bouton : un gros bloc vert jurerait avec le violet.
 *
 * Toutes les couleurs sont déclarées ici, en variables, une seule fois. La
 * palette violette reprend partials/_theme.blade.php (back-office).
 */

/* ─── Polices ──────────────────────────────────────────────────────────────
   Servies localement (public/fonts). Sora 600 et 700 pour les titres, Inter
   400, 600 et 700 pour le texte : environ 15 Ko et 24 Ko par fichier. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/sora/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/sora/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }

/* ─── Variables ────────────────────────────────────────────────────────── */
:root {
    /* Palette de la marque, identique au back-office. */
    --gks-primary:       #7C3AED;
    --gks-primary-dark:  #5B21B6;
    --gks-primary-light: #A78BFA;
    --gks-primary-soft:  #F5F3FF;
    /* Violet d'un TEXTE sur fond clair : le foncé tient 8:1 sur le blanc cassé.
       Sur la nuit, c'est le clair qui porte le texte (7:1). */
    --gks-primary-text:  var(--gks-primary-dark);

    /* Neutres chauds, bandes claires. */
    --paper:       #F7F3EE;   /* fond de page */
    --paper-2:     #EFE8DF;   /* bande claire alternée */
    --surface:     #FFFCF8;   /* cartes, barres */
    --line:        #E4DCD2;
    --line-strong: #CFC5B8;
    --ink:         #1D1726;   /* texte principal, 15:1 sur le fond */
    --ink-2:       #463F50;   /* texte secondaire, 9:1 */
    --muted:       #5E5667;   /* légendes, 6:1 — jamais plus pâle pour du texte */

    /* Nuit, bandes sombres : un presque-noir légèrement violet. */
    --night:          #17121F;
    --night-2:        #211A2C;
    --night-line:     rgba(244, 240, 248, .14);
    --on-night:       #F4F0F8;   /* 16:1 */
    --on-night-muted: #C4BBD0;   /* 10:1 */

    /* WhatsApp : le vert officiel sur la nuit, un vert plus profond sur le
       clair (liseré et icône à 3,9:1, au-dessus du seuil de 3:1). */
    --wa-green:      #25D366;
    --wa-green-deep: #128C4B;
    --wa-soft:       #EDF7F0;

    /* Informations d'état. */
    --success:      #15803D;   /* « En stock », 5:1 */
    --success-soft: #E6F3EA;
    --used-bg:      #FFF1E0;
    --used-edge:    #E9A25B;
    --used-text:    #8A3510;   /* 7,5:1 sur son fond */
    /* Erreur de saisie : rouge brique, 6,4:1 sur le blanc cassé. Jamais seul :
       toujours accompagné d'un message écrit. */
    --danger:       #B42318;
    --danger-soft:  #FDECEA;

    /* Nuanciers : la couleur exacte de la pastille. */
    --swatch-noir:    #1C1917;
    --swatch-blanc:   #FFFFFF;
    --swatch-bleu:    #2563EB;
    --swatch-rouge:   #DC2626;
    --swatch-vert:    #16A34A;
    --swatch-gold:    #D4A64A;
    --swatch-naturel: #C9BFAF;
    --swatch-jaune:   #FACC15;
    --swatch-argent:  #D4D4D8;
    --swatch-rose:    #F9A8D4;
    --swatch-violet:  #8B5CF6;
    --swatch-orange:  #F97316;
    --swatch-gris:    #6B7280;

    /* Teintes d'aplat, une par couleur de la liste fermée du stock. Assez
       pâles pour porter un texte encre à plus de 12:1, assez marquées pour
       qu'un iPhone rose se lise « rose » avant même la photo. */
    --tint-default: #ECE6DF;
    --tint-noir:    #E7E2DC;   /* gris chaud : un noir sur du blanc paraîtrait découpé */
    --tint-blanc:   #EEEBE6;
    --tint-bleu:    #E1E9F6;
    --tint-rouge:   #F7E2DF;
    --tint-vert:    #E1EFE4;
    --tint-gold:    #F4EAD5;
    --tint-naturel: #ECE6DB;
    --tint-jaune:   #F8F0CF;
    --tint-argent:  #E8EAEE;
    --tint-rose:    #F8E4EC;
    --tint-violet:  #EAE3F7;
    --tint-orange:  #FAE6D7;
    --tint-gris:    #E4E4E7;
    --tint-autres:  #EDE8F2;

    /* Rayons : ceux du back-office pour les contrôles, plus généreux pour les
       aplats photo. */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;
    --radius-xl: 18px;
    --pill:      999px;

    --shadow:  0 1px 2px rgba(29, 23, 38, .05), 0 14px 32px -18px rgba(29, 23, 38, .28);
    --ring:    0 0 0 3px rgba(124, 58, 237, .30);
    --ring-danger: 0 0 0 3px rgba(180, 35, 24, .22);

    --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --wrap: 1240px;
    --gutter: clamp(16px, 4.5vw, 40px);
    --header-h: 64px;
    --buybar-h: 76px;

    /* Échelle d'espacement entre sections : TROIS valeurs, pas une de plus.
       Une bande courte prend --space-tight, une bande dense --space ou
       --space-wide. Aucune respiration ne dépasse 6rem : au-delà, on croyait
       la page finie. */
    --space-tight: clamp(2.25rem, 5vw, 3.25rem);
    --space:       clamp(3rem, 7vw, 4.5rem);
    --space-wide:  clamp(3.75rem, 9vw, 6rem);
}

/* ─── Socle ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Une ancre ne doit pas finir cachée sous l'en-tête fixe. */
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 1rem);
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* Rien ne déborde horizontalement, jamais : un élément trop large ne
       doit pas faire glisser toute la page sous le doigt. */
    overflow-x: clip;
}
/* L'en-tête est fixe : la page lui réserve sa place, encoche comprise. */
main { flex: 1 0 auto; outline: none; padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--gks-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.band--night :focus-visible { outline-color: var(--gks-primary-light); }

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

.skip-link {
    position: absolute;
    left: var(--gutter); top: 8px;
    z-index: 100;
    padding: .7rem 1rem;
    background: var(--night);
    color: var(--on-night);
    font-weight: 600;
    border-radius: var(--radius);
    transform: translateY(-160%);
    transition: transform .15s ease-out;
}
.skip-link:focus { transform: translateY(0); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* ─── Typographie ──────────────────────────────────────────────────────── */
.display,
.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.page-title   { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); color: var(--ink); }
.section__title { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.9rem); }
.eyebrow {
    margin-bottom: .9rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gks-primary-text);
}
.eyebrow--on-night { color: var(--gks-primary-light); }
.eyebrow--ink { color: var(--ink-2); }
.page-lead {
    margin-top: 1rem;
    max-width: 58ch;
    font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem);
    color: var(--muted);
}
.price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--gks-primary-text);
    text-decoration: none;
}
.link-arrow .icon { transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow:hover span { text-decoration: underline; text-underline-offset: .2em; }

/* ─── Boutons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: .6rem 1.15rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; }

.btn--primary { background: var(--gks-primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--gks-primary-dark); }

/* WhatsApp : action de premier plan, mais le vert reste sur l'icône et le
   liseré. Le texte est à l'encre, lisible à 15:1. */
.btn--wa { background: var(--surface); color: var(--ink); border-color: var(--wa-green-deep); }
.btn--wa .icon { color: var(--wa-green-deep); }
.btn--wa:hover { background: var(--wa-soft); }
.btn--wa-night { background: transparent; color: var(--on-night); border-color: var(--wa-green); }
.btn--wa-night .icon { color: var(--wa-green); }
.btn--wa-night:hover { background: rgba(37, 211, 102, .1); }

.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--large { min-height: 54px; padding: .8rem 1.4rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ─── En-tête fixe ─────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header-h);
    transition: height .2s ease;
}
/* Une fois qu'on a défilé : plus compact, détaché du contenu par une ombre.
   Seul l'intérieur rétrécit ; la place réservée en haut de page ne bouge
   pas, rien ne saute. */
.site-header.is-scrolled { background: rgba(247, 243, 238, .97); box-shadow: 0 8px 24px -18px rgba(29, 23, 38, .45); }
.site-header.is-scrolled .site-header__inner { height: calc(var(--header-h) - 10px); }
.site-header.is-scrolled .brand__logo { width: 34px; height: 34px; }
.site-header.is-scrolled .brand__full { height: 38px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    margin-right: auto;
    text-decoration: none;
    color: var(--ink);
}
.brand__logo { width: 40px; height: 40px; border-radius: var(--radius); transition: width .2s ease, height .2s ease; }
/* Logo définitif : hauteur fixe, largeur libre. Rien ne saute à l'arrivée. */
/* Logotype : hauteur fixe (44 px, « MOBILE WORLD » y reste lisible), largeur
   tirée de ses proportions par les attributs de la balise. Rien ne saute. */
.brand__full { height: 44px; width: auto; transition: height .2s ease; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.brand__rest { font-weight: 600; color: var(--muted); }

.site-nav,
.site-header__wa { display: none; }
.site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .8rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-2);
    text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--gks-primary-text); }
.site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--gks-primary);
}

/* Menu du téléphone : trois traits en haut à droite, panneau déroulé dessous. */
.menu { position: static; }
.menu__toggle {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-right: -6px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__toggle:hover { background: var(--paper-2); }
.menu__bars { display: grid; gap: 5px; width: 22px; }
.menu__bars span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu[open] .menu__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] .menu__bars span:nth-child(2) { opacity: 0; }
.menu[open] .menu__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu__panel {
    position: absolute;
    inset: 100% 0 auto 0;
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(29, 23, 38, .45);
}
.menu__list { display: grid; }
.menu__list a {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
}
.menu__list a .icon { color: var(--gks-primary-text); }
.menu__list a[aria-current="page"] { color: var(--gks-primary-text); }
.menu__list .menu__wa .icon { color: var(--wa-green-deep); }
.menu__staff {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    margin-top: .5rem;
    font-size: .88rem;
    color: var(--muted);
    text-decoration: none;
}

@media (min-width: 768px) {
    :root { --header-h: 72px; }
    .site-nav { display: flex; }
    .site-header__wa { display: inline-flex; min-height: 44px; }
    .menu { display: none; }
}

/* Commande en cours : un sac et un compteur, 44 px sous le doigt. Le mot
   « Commande » n'apparaît qu'à partir de la tablette. */
.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .6rem;
    border-radius: var(--radius-lg);
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
}
.header-cart:hover { background: var(--paper-2); }
.header-cart[aria-current="page"] { color: var(--gks-primary-text); }
.header-cart__label { display: none; }
.header-cart__count {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: var(--pill);
    background: var(--gks-primary);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .header-cart__label { display: inline; } }

/* La barre d'achat de la fiche produit est la seule barre basse du site. */
.has-buybar { padding-bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom)); }

/* ─── Bandes ───────────────────────────────────────────────────────────── */
.band { padding-block: var(--space); }
.band--tight { padding-block: var(--space-tight); }
.band--wide  { padding-block: var(--space-wide); }
.band--paper   { background: var(--paper); }
.band--paper-2 { background: var(--paper-2); }
.band--night   { background: var(--night); color: var(--on-night); }
.band--night .section__title,
.band--night .display { color: var(--on-night); }

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
/* En-tête de page : une seule colonne, le chapeau sous le titre. Côte à côte,
   un titre de deux lignes et un chapeau d'une ligne rejeté en bas à droite
   faisaient deux colonnes très inégales. */
.page-head { padding-block: var(--space-tight) 0; }

/* ─── Aplat teinté : la couleur de l'appareil ──────────────────────────── */
.tint {
    --tint: var(--tint-default);
    /* Le visuel de repli (partials/_catalog_image) lit ces variables : traits
       et textes à l'encre, comme une étiquette posée sur le même aplat. */
    --tint-line: var(--ink);
    --tint-line-opacity: .16;
    --tint-ink: var(--ink);
    --tint-ink-2: var(--ink-2);
    background: var(--tint);
}
.tint--noir    { --tint: var(--tint-noir); }
.tint--blanc   { --tint: var(--tint-blanc); }
.tint--bleu    { --tint: var(--tint-bleu); }
.tint--rouge   { --tint: var(--tint-rouge); }
.tint--vert    { --tint: var(--tint-vert); }
.tint--gold    { --tint: var(--tint-gold); }
.tint--naturel { --tint: var(--tint-naturel); }
.tint--jaune   { --tint: var(--tint-jaune); }
.tint--argent  { --tint: var(--tint-argent); }
.tint--rose    { --tint: var(--tint-rose); }
.tint--violet  { --tint: var(--tint-violet); }
.tint--orange  { --tint: var(--tint-orange); }
.tint--gris    { --tint: var(--tint-gris); }
.tint--autres  { --tint: var(--tint-autres); }
/* catalog-image:debut
   Visuel d'un modèle (partials/_catalog_image). Règles IDENTIQUES dans
   public/css/site.css et partials/_theme.blade.php (SecuriteTest compare les
   deux) : la vitrine refuse les styles en ligne (CSP) et le back-office ne
   charge pas site.css. !important reproduit la priorité qu'avaient ces
   déclarations quand elles étaient en attribut style : le rendu ne change pas. */
.catalog-image { aspect-ratio: 1 / 1 !important; overflow: hidden !important; position: relative !important; background: var(--tint, transparent) !important; }
.catalog-image__photo { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.catalog-image__repli { display: block !important; }
.catalog-image__fond { fill: var(--tint, var(--tblr-primary-lt, var(--gks-primary-soft))) !important; }
.catalog-image__silhouette { fill: none !important; stroke: var(--tint-line, var(--gks-primary-light)) !important; stroke-width: 6 !important; opacity: var(--tint-line-opacity, .45) !important; }
.catalog-image__modele { fill: var(--tint-ink, var(--gks-primary-text, var(--gks-primary-dark))) !important; font-family: var(--font-display, Inter), system-ui, sans-serif !important; font-size: 26px !important; font-weight: 600 !important; }
.catalog-image__couleur { fill: var(--tint-ink-2, var(--gks-primary)) !important; font-family: Inter, system-ui, sans-serif !important; font-size: 22px !important; }
/* catalog-image:fin */
/* La photo se pose DANS l'aplat : « multiply » fond le blanc des visuels de
   fabricant dans la teinte, au lieu d'un carré blanc collé dessus. */
.tint .catalog-image:has(img),
.catalog-image.tint:has(img) { padding: 9%; }
.tint img { mix-blend-mode: multiply; }
.tint .catalog-image { transition: background-color .25s ease; }

/* ─── Accueil : ouverture ──────────────────────────────────────────────── */
.hero { padding-block: var(--space-tight) var(--space); overflow: hidden; }
/* Aligné en haut, jamais centré : le titre et les vignettes partent de la même
   ligne. */
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.hero__title { font-size: clamp(2.5rem, 1.55rem + 4vw, 4.4rem); max-width: 14ch; }
.hero__title em {
    font-style: normal;
    color: var(--gks-primary-light);
}
.hero__lead {
    margin-top: 1.4rem;
    max-width: 46ch;
    font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
    color: var(--on-night-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.hero__actions .btn { flex: 1 1 15rem; }
@media (min-width: 640px) { .hero__actions .btn { flex: 0 0 auto; } }
.hero__fact {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--night-line);
    max-width: 40ch;
    font-size: .92rem;
    color: var(--on-night-muted);
}
.hero__fact-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--on-night);
}

/* Trois modèles posés sur leur aplat, en vitrine : un grand, deux petits.
   Grand écran seulement : sur téléphone ils repoussaient le premier appareil
   réel de deux écrans, pour un simple décor. */
.hero__plaques {
    display: none;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    align-items: center;
}
.hero__plaque { border-radius: var(--radius-xl); overflow: hidden; }
.hero__plaque .catalog-image { border-radius: var(--radius-xl); }
.hero__plaque--1 { grid-row: 1 / span 2; }
.hero__plaques--2 { grid-template-columns: 1fr 1fr; }
.hero__plaques--2 .hero__plaque--1 { grid-row: auto; }
.hero__plaques--1 { grid-template-columns: 1fr; max-width: 420px; }
@media (min-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .hero__plaques { display: grid; gap: 16px; }
}

/* ─── Grille et cartes ─────────────────────────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } }

/* Une carte sans cadre au repos : l'aplat teinté fait le cadre, le texte
   respire dessous. Mais elle doit se donner à cliquer : main au survol, carte
   qui se soulève et se cerne sur ordinateur, qui s'enfonce sous le doigt sur
   téléphone, contour franc au clavier. La marge négative compense le rembourrage :
   au repos, la grille reste alignée comme avant. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: -8px;
    padding: 8px 8px 12px;
    border-radius: calc(var(--radius-xl) + 6px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, background-color .18s ease;
}
.card__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.card__image { border-radius: var(--radius-xl); }
.card__media img { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
@media (hover: hover) {
    .card:hover {
        transform: translateY(-3px);
        background: var(--surface);
        box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line-strong);
    }
    .card:hover .card__media img { transform: scale(1.04); }
    .card:hover .card__cta .icon { transform: translateX(3px); }
}
/* Au toucher : un retour immédiat, avant même le chargement de la fiche. */
.card:active { transform: scale(.985); background: var(--paper-2); }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--gks-primary); outline-offset: 2px; background: var(--surface); }
.card__tags {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.card__body { display: flex; flex-direction: column; gap: .15rem; padding: .85rem .15rem 0; }
.card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.card__link { color: var(--ink); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card__color { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--muted); }
.card__color .swatch { width: .8rem; height: .8rem; }
.card__price { margin-top: .35rem; font-size: 1.02rem; }
.card__from { font-size: .82rem; color: var(--muted); }
.card__on-demand { font-size: .9rem; font-weight: 600; color: var(--gks-primary-text); }
.card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .55rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gks-primary-text);
}
.card__cta .icon { width: 1.05em; height: 1.05em; transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
@media (min-width: 640px) {
    .card__title { font-size: 1.12rem; }
    .card__price { font-size: 1.08rem; }
}

/* Étiquettes : franches, lisibles, jamais une simple pastille de couleur. */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: var(--pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
}
.tag--last { background: var(--night); color: var(--on-night); }
.tag--last::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gks-primary-light); }
.tag--used { background: var(--used-bg); color: var(--used-text); box-shadow: inset 0 0 0 1px var(--used-edge); }

.swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    background: var(--line-strong);
    box-shadow: inset 0 0 0 1px rgba(29, 23, 38, .2);
}
.swatch--noir    { background: var(--swatch-noir); }
.swatch--blanc   { background: var(--swatch-blanc); }
.swatch--bleu    { background: var(--swatch-bleu); }
.swatch--rouge   { background: var(--swatch-rouge); }
.swatch--vert    { background: var(--swatch-vert); }
.swatch--gold    { background: var(--swatch-gold); }
.swatch--naturel { background: var(--swatch-naturel); }
.swatch--jaune   { background: var(--swatch-jaune); }
.swatch--argent  { background: linear-gradient(135deg, var(--swatch-blanc), var(--swatch-argent) 60%); }
.swatch--rose    { background: var(--swatch-rose); }
.swatch--violet  { background: var(--swatch-violet); }
.swatch--orange  { background: var(--swatch-orange); }
.swatch--gris    { background: var(--swatch-gris); }
.swatch--autres  { background: conic-gradient(var(--swatch-rouge), var(--swatch-jaune), var(--swatch-vert), var(--swatch-bleu), var(--swatch-violet), var(--swatch-rouge)); }

/* ─── Filtres du catalogue ─────────────────────────────────────────────── */
/* minmax(0, 1fr) et min-width: 0 : sans eux, une case de grille refuse de
   rétrécir sous la largeur de son contenu, et la ligne de pastilles (qui
   défile) élargissait tout le formulaire au-delà de l'écran. */
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.75rem; }
.filters > *,
.filters__rows > * { min-width: 0; }
.search {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 4px 4px 4px 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--gks-primary); box-shadow: var(--ring); }
.search__icon { display: grid; place-items: center; padding-inline: .85rem .4rem; color: var(--muted); }
.search__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    /* 16 px : en dessous, Safari zoome sur le champ au toucher. */
    font-size: 16px;
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--muted); opacity: 1; }
.search__submit { flex-shrink: 0; min-height: 44px; }

.filters__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
/* Téléphone : pastilles sur une ligne qui défile au doigt, plutôt que trois
   lignes au-dessus des résultats. */
.chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chips--secondary { gap: 1rem; }
.chips__group { display: flex; gap: .5rem; flex-shrink: 0; }
.chips__group + .chips__group { padding-left: 1rem; border-left: 1px solid var(--line-strong); }
.chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 1.05rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (min-width: 900px) {
    .filters { grid-template-columns: minmax(18rem, 26rem) 1fr; align-items: start; gap: 1.25rem 2rem; }
    .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
    /* En retour à la ligne, le filet entre groupes tomberait en début de
       ligne : on sépare les groupes par l'espace seul. */
    .chips--secondary { flex-wrap: wrap; gap: .5rem 1.5rem; }
    .chips__group + .chips__group { padding-left: 0; border-left: 0; }
}

/* ─── Résultats ────────────────────────────────────────────────────────── */
.catalog { padding-block: var(--space-tight) var(--space); }
.catalog__zone { position: relative; }
.catalog__zone[aria-busy="true"] .results { opacity: .45; transition: opacity .15s ease; pointer-events: none; }
/* Signal de chargement : un filet violet qui court en haut des résultats. */
.catalog__zone[aria-busy="true"]::before {
    content: "";
    position: absolute;
    top: -12px; left: 0;
    height: 3px; width: 30%;
    border-radius: 3px;
    background: var(--gks-primary);
    animation: chargement 1s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes chargement {
    from { transform: translateX(-100%); }
    to   { transform: translateX(340%); }
}
.catalog__error {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--used-bg);
    box-shadow: inset 0 0 0 1px var(--used-edge);
    color: var(--used-text);
    font-weight: 600;
    font-size: .92rem;
}
.results__count { margin-bottom: 1.25rem; font-size: .9rem; color: var(--muted); }
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1.25rem;
    margin-top: 2.75rem;
}
.pager__status { font-size: .88rem; color: var(--muted); }
/* Avec JavaScript, « Voir plus » ajoute à la suite : le numéro de page ne
   veut plus rien dire une fois deux pages l'une sous l'autre. */
.js .pager__status { display: none; }

/* ─── États vides ──────────────────────────────────────────────────────── */
.empty {
    padding: clamp(2.5rem, 6vw, 3.75rem) 1.25rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    text-align: center;
}
.empty__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--gks-primary-text);
    font-size: 1.5rem;
}
.empty__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    text-wrap: balance;
}
.empty__text { max-width: 48ch; margin: .7rem auto 0; color: var(--muted); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.6rem; }
.empty--card { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* ─── Accueil : entrées par marque et par type ─────────────────────────── */
/* auto-fit : les cases s'étirent pour occuper toute la rangée. Deux marques
   et trois types font une rangée régulière de cinq, pas deux cartes collées
   à gauche devant un grand vide. */
.entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 12px;
}
@media (min-width: 640px) { .entries { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 16px; } }
.entry {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 112px;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-xl);
    background: var(--surface);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .15s ease;
}
.entry:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.entry__name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
}
.entry__count { margin-top: .25rem; font-size: .84rem; color: var(--muted); }
.entry__icon { margin-bottom: auto; color: var(--gks-primary-text); font-size: 1.3rem; }
.entry--kind { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.entry--kind .entry__name { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); letter-spacing: -.02em; }
.entry__arrow {
    position: absolute;
    top: 1rem; right: 1rem;
    color: var(--gks-primary-text);
    transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
.entry:hover .entry__arrow { transform: translateX(3px); }

/* ─── Accueil : confiance (nuit) ───────────────────────────────────────── */
/* D'un seul tenant : la promesse et ses trois preuves à gauche, les quatre
   engagements en damier à droite. Le titre garde une mesure d'environ vingt
   caractères, jamais une colonne étroite qui le casse en cinq lignes. */
/* Deux colonnes qui finissent ensemble : tout le texte à gauche, la photo à
   droite étirée à sa hauteur. Jamais de centrage vertical, qui déplace le
   vide sans le supprimer et désaligne les titres. */
.trust__grid { display: grid; gap: var(--space-tight); }
@media (min-width: 960px) { .trust__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } }
.trust__claim .promises { margin-top: 2rem; }
.trust__title { max-width: 20ch; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); color: var(--on-night); }
.trust__facts { display: grid; gap: 1rem; margin-top: 1.75rem; counter-reset: none; }
.trust__facts li { display: flex; align-items: flex-start; gap: .9rem; font-size: clamp(1rem, .96rem + .25vw, 1.1rem); color: var(--on-night); }
.trust__num {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gks-primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
}
.promises {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* Les filets entre cases sont le fond qui passe entre elles. */
    background: var(--night-line);
}
@media (min-width: 560px) { .promises { grid-template-columns: 1fr 1fr; } }
.promise { padding: 1.35rem 1.3rem; background: var(--night-2); }
.promise__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: .9rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--night-line);
    color: var(--gks-primary-light);
    font-size: 1.05rem;
}
.promise__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
.promise__text { margin-top: .4rem; font-size: .92rem; color: var(--on-night-muted); }

/* ─── Accueil : la boutique ────────────────────────────────────────────── */
.shop__grid { display: grid; gap: var(--space-tight); }
@media (min-width: 960px) { .shop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.shop__lead { margin-top: 1rem; max-width: 46ch; color: var(--ink-2); font-size: 1.05rem; }
.shop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.shop__side { display: grid; gap: 1.25rem; }
.shop__text .shop__lines { margin-top: 2rem; }
.shop__lines {
    display: grid;
    gap: .6rem;
    padding: 1.25rem 1.3rem;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink-2);
}
.shop__lines li { display: flex; gap: .65rem; }
.shop__lines .icon { color: var(--gks-primary-text); margin-top: .2rem; }
/* Photos de la boutique : la devanture en grand, deux vignettes. Toujours sur
   un fond neutre (jamais un aplat violet) : les rayonnages lavande des photos
   tirent vers le bleu, le violet du site vers le prune ; côte à côte, ils se
   contrediraient. Chaque cadre a son rapport fixé : rien ne saute au chargement. */
.shop__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-photo--grande { grid-column: 1 / -1; }
@media (min-width: 960px) {
    .shop__photos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 12px; }
    .shop-photo--grande { grid-column: 1; grid-row: 1 / span 2; }
}
.shop-photo, .trust__photo, .contact__photo { margin: 0; }
.shop-photo__img, .trust__img, .contact__img { border-radius: var(--radius-xl); background: var(--paper-2); }
.trust__img { aspect-ratio: 4 / 3; height: auto; background: var(--night-2); box-shadow: 0 0 0 1px var(--night-line); }
/* Grand écran : le cadre prend la hauteur de la colonne de texte. L'image y
   est posée en absolu : elle remplit le cadre sans jamais imposer sa propre
   hauteur à la rangée (sinon c'est la photo qui dicterait, et le vide
   reviendrait sous le texte). */
@media (min-width: 960px) {
    .trust__photo { position: relative; min-height: 18rem; }
    .trust__photo picture, .trust__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
.contact__photo { display: flex; flex-direction: column; gap: .5rem; }
.contact__photo figcaption { font-size: .84rem; color: var(--muted); }
.contact__img { aspect-ratio: 4 / 3; height: auto; }
@media (min-width: 900px) {
    /* Même principe que la photo de confiance : le cadre suit la hauteur des
       cartes, l'image le remplit en absolu. */
    .contact__photo picture { position: relative; display: block; flex: 1 1 0; min-height: 16rem; }
    .contact__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    /* Le plan : pleine largeur, en bandeau, sous les deux colonnes. */
    .contact__map { grid-column: 1 / -1; }
    .contact__map .map { aspect-ratio: 4 / 1; }
}
/* Rapport et cadrage des photos (site/_photo.blade.php). Ils étaient posés
   en attribut style, que la CSP de la vitrine refuse désormais. !important
   reproduit la priorité qu'avait ce style en ligne sur les règles des
   composants : le rendu ne change pas. Une nouvelle valeur se déclare ici ET
   dans la liste du partial. */
.photo-img { display: block !important; width: 100% !important; object-fit: cover !important; }
.photo-img--r4-5 { height: auto !important; aspect-ratio: 4 / 5 !important; }
.photo-img--r4-3 { height: auto !important; aspect-ratio: 4 / 3 !important; }
.photo-img--p50-0 { object-position: 50% 0% !important; }
.photo-img--p50-35 { object-position: 50% 35% !important; }
.photo-img--p50-45 { object-position: 50% 45% !important; }
.photo-img--p50-58 { object-position: 50% 58% !important; }
.photo-pending--r4-5 { aspect-ratio: 4 / 5 !important; }
.photo-pending--r4-3 { aspect-ratio: 4 / 3 !important; }
/* Variante absente : un cadre marqué au même rapport, jamais une image cassée. */
.photo-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-xl);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}
/* ─── Accueil : appel final (nuit) ─────────────────────────────────────── */
/* Boutons calés sur la dernière ligne du texte, pas centrés : le titre reste
   aligné en haut, et un bouton garde sa hauteur de bouton, il ne s'étire
   jamais à la hauteur de sa rangée. */
.cta__inner { display: grid; gap: 1.5rem; align-items: end; }
.cta__title { max-width: 20ch; font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.6rem); }
.cta__text { margin-top: .75rem; max-width: 52ch; color: var(--on-night-muted); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cta__actions .btn { flex: 1 1 14rem; }
@media (min-width: 960px) {
    .cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
    .cta__actions { flex-wrap: nowrap; }
    .cta__actions .btn { flex: 0 0 auto; }
}

/* ─── Fiche produit : bandeau teinté ───────────────────────────────────── */
.pdp-hero {
    /* Téléphone : le bandeau occupe l'écran sous l'en-tête, barre d'achat
       déduite. */
    min-height: calc(100svh - var(--header-h) - var(--buybar-h));
    padding-block: 1rem 1.75rem;
    transition: background-color .25s ease;
    /* Colonne flexible : la grille remplit la hauteur SANS la dépasser (un
       min-height hérité ajoutait les marges intérieures et poussait les
       pastilles sous la barre d'achat). */
    display: flex;
    flex-direction: column;
}
.pdp-hero__grid {
    flex: 1;
    display: grid;
    gap: 1rem;
    grid-template-areas: "head" "photo" "colors";
    align-content: space-between;
}
.pdp-hero__head { grid-area: head; }
.pdp-hero__photo { grid-area: photo; position: relative; justify-self: center; width: min(100%, 36svh, 560px); }
/* Téléphone : la couleur est déjà nommée au-dessus des pastilles ; ce
   doublon repoussait les pastilles sous la barre d'achat. */
@media (max-width: 899px) { .pdp-hero__sub { display: none; } }
.pdp-hero__colors { grid-area: colors; }
.pdp-hero__title { font-size: clamp(2.5rem, 1.55rem + 4.3vw, 4.6rem); color: var(--ink); }
.pdp-hero__sub { margin-top: .5rem; font-size: 1.05rem; font-weight: 600; color: var(--ink-2); }
.pdp-hero .eyebrow { margin-bottom: .6rem; }
.pdp-hero__img .catalog-image { background: transparent; }
.pdp-hero__photo-note {
    position: absolute;
    left: 50%; bottom: 4%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: var(--pill);
    background: var(--night);
    color: var(--on-night);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}
@media (min-width: 900px) {
    /* Grand écran : marges de l'échelle. Sur téléphone, le bandeau garde ses
       marges serrées, sa hauteur étant calée sur l'écran (voir plus haut). */
    /* Tout aligné en haut, jamais centré : la photo est taillée à la hauteur
       habituelle de la colonne de texte (fil d'Ariane, titre, pastilles,
       lien vers la suite), et le bandeau n'a pas de hauteur imposée, donc
       pas de vide sous le plus court des deux. */
    .pdp-hero { min-height: 0; padding-block: var(--space-tight); }
    .pdp-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "head photo" "colors photo";
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 1.5rem 3rem;
    }
    .pdp-hero__photo { width: min(100%, 440px); }
}

.breadcrumb { margin-bottom: 1rem; font-size: .85rem; color: var(--ink-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.option-label {
    margin-bottom: .65rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.option-label strong { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.option-label { display: flex; align-items: center; gap: .5rem; }
/* Le chemin de la fiche, numéroté : couleur, capacité, état, puis Commander. */
.step-dot {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: .72rem;
    letter-spacing: 0;
}
.pdp-hero__next { display: none; }
@media (min-width: 900px) {
    .pdp-hero__next {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 48px;
        margin-top: 1.25rem;
        padding: .6rem 1.1rem;
        border-radius: var(--radius-lg);
        background: var(--ink);
        color: var(--paper);
        font-weight: 600;
        text-decoration: none;
        transition: background-color .15s ease;
    }
    .pdp-hero__next:hover { background: var(--gks-primary-dark); }
    .pdp-hero__next .icon { transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
    .pdp-hero__next:hover .icon { transform: translateY(2px); }
}

/* Pastilles de couleur : de vraies couleurs, 48 px sous le doigt. */
.dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.dot {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    text-decoration: none;
}
.dot .swatch { width: 32px; height: 32px; transition: transform .15s ease; }
.dot:hover .swatch { transform: scale(1.08); }
.dot[aria-current="true"] .swatch { box-shadow: 0 0 0 3px var(--tint, var(--paper)), 0 0 0 5px var(--ink); }
.dot:focus-visible { border-radius: 50%; }

/* ─── Fiche produit : bande de caractéristiques ────────────────────────── */
.specs { background: var(--surface); border-bottom: 1px solid var(--line); }
/* Téléphone : deux par deux, tout est lisible sans défiler (une case coupée au
   bord de l'écran passerait inaperçue). Dès 520 px, une seule ligne. */
.specs__list { display: grid; grid-template-columns: 1fr 1fr; }
.spec { padding: .9rem 1rem .9rem 0; }
.spec:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--line); }
.spec:nth-child(n + 3) { border-top: 1px solid var(--line); }
@media (min-width: 520px) {
    .specs__list { display: flex; }
    .spec { flex: 1 1 0; padding: 1.1rem 1.25rem; border: 0; border-left: 1px solid var(--line); }
    .spec:nth-child(n) { border-top: 0; }
    .spec:first-child { padding-left: 0; border-left: 0; }
}
.spec dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spec dd {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .25rem;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.spec dd .swatch { width: .85rem; height: .85rem; }
.spec dd.is-ok { color: var(--success); }
.spec dd.is-last { color: var(--used-text); }

/* ─── Fiche produit : corps ────────────────────────────────────────────── */
.pdp-body {
    display: grid;
    gap: 2.5rem;
    padding-block: var(--space-tight) var(--space);
}
@media (min-width: 960px) {
    .pdp-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
    /* La décision reste en vue pendant qu'on choisit, sous l'en-tête fixe. */
    .pdp-body__side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

/* Le prix : une information forte, pas une ligne de tableau. */
.pdp-price { display: grid; gap: .5rem; justify-items: start; }
.pdp-price__label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pdp-price__value {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.8rem + 2.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: var(--ink);
}
.on-demand__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--gks-primary-text);
}
.on-demand__text { margin-top: .5rem; max-width: 46ch; font-size: .94rem; color: var(--ink-2); }
.stock-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border-radius: var(--pill);
    background: var(--success-soft);
    color: var(--success);
    font-size: .85rem;
    font-weight: 700;
}
.stock-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock-tag--last { background: var(--night); color: var(--on-night); }
.stock-tag--last .stock-tag__dot { background: var(--gks-primary-light); }

.option-group { margin-top: 2rem; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .55rem; }
.option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    min-height: 56px;
    padding: .5rem .75rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.option__label { font-weight: 600; font-size: .96rem; line-height: 1.2; }
.option__note { font-size: .72rem; line-height: 1.2; color: var(--muted); }
.option__note:empty { display: none; }
a.option[href]:hover { border-color: var(--ink); }
.option[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* Indisponible : visible, barré, hachuré. Le client voit que la variante
   existe, et qu'elle manque seulement dans ce choix-là. */
.option.is-unavailable {
    cursor: not-allowed;
    color: var(--muted);
    border-style: dashed;
    background: repeating-linear-gradient(135deg, var(--paper), var(--paper) 6px, var(--surface) 6px, var(--surface) 12px);
}
.option.is-unavailable .option__label { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.option-help { margin-top: .65rem; font-size: .9rem; color: var(--ink-2); }

/* L'occasion, dite franchement : un encart qui se voit, pas une note en gris. */
.used-alert {
    margin-top: 2rem;
    padding: 1.25rem 1.3rem 1.3rem;
    border-radius: var(--radius-xl);
    background: var(--used-bg);
    box-shadow: inset 0 0 0 1.5px var(--used-edge);
}
.used-alert__title {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
}
.used-alert__title .icon { margin-top: .2em; color: var(--used-text); }
.used-alert__text { margin-top: .5rem; font-size: .94rem; color: var(--ink-2); }
.used-alert__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-top: .5rem;
    font-weight: 700;
    color: var(--ink);
    text-underline-offset: .2em;
}
.used-alert__link .icon { color: var(--wa-green-deep); }

.pdp-actions { display: grid; gap: .65rem; margin-top: 2rem; }
.pdp-actions > form { display: grid; }
@media (min-width: 520px) { .pdp-actions { grid-template-columns: 1fr 1fr; } .pdp-actions .hint, .pdp-actions__notice { grid-column: 1 / -1; } }
.hint { font-size: .84rem; color: var(--muted); }

/* Dans la colonne latérale : l'encart occasion, puis les actions empilées,
   puis les engagements. */
.pdp-body__side .used-alert { margin: 0 0 1.25rem; }
/* Grand écran : colonne latérale compacte (engagements en deux colonnes,
   encart occasion resserré), pour finir avec la colonne des choix, que
   l'appareil soit neuf ou d'occasion. */
@media (min-width: 960px) {
    .pdp-body__side .used-alert { padding: 1rem 1.1rem 1.05rem; }
    .pdp-body__side .used-alert__title { font-size: 1.02rem; }
    .pdp-body__side .used-alert__text { margin-top: .3rem; }
    .pdp-body__side .used-alert__link { margin-top: .15rem; }
    .pdp-body__side .reassurance { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; padding: 1.2rem 1.25rem; }
    .pdp-body__side .reassurance li { flex-direction: column; gap: .4rem; font-size: .88rem; }
}
.pdp-body__side .pdp-actions { margin-top: 0; grid-template-columns: 1fr; }
.pdp-body__side .pdp-actions .hint { grid-column: auto; }
.pdp-body__side .reassurance { margin-top: 1.5rem; }
.reassurance {
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--paper-2);
}
.reassurance li { display: flex; gap: .8rem; font-size: .93rem; color: var(--ink-2); }
.reassurance strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.reassurance .icon { color: var(--gks-primary-text); margin-top: .15rem; }

.pdp-description { margin-top: 2rem; }
.pdp-description h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.pdp-description p { margin-top: .6rem; white-space: pre-line; color: var(--ink-2); }

/* Barre d'achat collée en bas : le prix toujours visible, les deux actions
   sous le pouce. Téléphone et tablette seulement. */
.buybar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px -16px rgba(29, 23, 38, .3);
    padding-bottom: env(safe-area-inset-bottom);
}
.buybar__inner { display: flex; align-items: center; gap: .6rem; min-height: var(--buybar-h); }
.buybar__summary { flex: 1; min-width: 0; }
.buybar__name { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    white-space: nowrap;
}
.buybar__wa { width: 52px; min-height: 52px; padding: 0; flex-shrink: 0; }
.buybar__wa .icon { width: 1.5rem; height: 1.5rem; }
.buybar__order { min-height: 52px; min-width: 7.5rem; line-height: 1.15; }
@media (min-width: 900px) {
    .buybar { display: none; }
    .has-buybar { padding-bottom: 0; }
}

/* ─── Messages courts ──────────────────────────────────────────────────── */
.notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-lg);
    font-size: .94rem;
    line-height: 1.45;
}
.notice .icon { margin-top: .1rem; }
.notice a { font-weight: 600; text-underline-offset: .2em; }
.notice--ok   { background: var(--success-soft); color: var(--ink); }
.notice--ok .icon { color: var(--success); }
.notice--info { background: var(--gks-primary-soft); color: var(--ink); }
.notice--info .icon { color: var(--gks-primary-text); }
.notice--warn { background: var(--used-bg); color: var(--used-text); box-shadow: inset 0 0 0 1px var(--used-edge); }

/* ─── Commande ─────────────────────────────────────────────────────────── */
.checkout { display: grid; gap: 1.25rem; padding-block: var(--space-tight) var(--space); }

/* Les trois temps de la commande. Sur téléphone, une colonne serrée : on la
   lit d'un coup d'œil avant de remplir. */
.steps { display: grid; gap: .75rem; counter-reset: none; }
.step {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: .92rem;
    color: var(--ink-2);
}
.step strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.step__num {
    display: grid;
    place-items: center;
    flex: 0 0 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--gks-primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
}
/* Dans le récapitulatif, les étapes restent en colonne quelle que soit la
   largeur : c'est ce qui allonge la colonne courte à côté du formulaire. */
.checkout__summary .steps { grid-template-columns: 1fr; }

.checkout__grid { display: grid; gap: 2rem; grid-template-areas: "summary" "form"; }
.checkout__summary { grid-area: summary; display: grid; gap: 1.1rem; align-content: start; }
.checkout__form { grid-area: form; }
@media (min-width: 960px) {
    .checkout__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "form summary"; gap: 3rem; align-items: start; }
    .checkout__summary { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.checkout__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--ink);
}

/* Lignes du panier : vignette carrée fixe, rien ne saute à l'arrivée de la photo. */
.cart-lines { display: grid; gap: .75rem; }
.cart-line {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: .9rem;
    padding: .75rem;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
.cart-line__media { display: block; width: 76px; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; }
.cart-line__media .catalog-image:has(img) { padding: 8%; }
.cart-line__body { display: grid; gap: .2rem; align-content: start; min-width: 0; }
.cart-line__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
}
.cart-line__name:hover { text-decoration: underline; text-underline-offset: .2em; }
.cart-line__meta { font-size: .86rem; color: var(--muted); }
.cart-line__body .tag { justify-self: start; margin-top: .15rem; }
.cart-line__price { margin-top: .15rem; font-size: 1rem; }
.cart-line__unit { margin-left: .3rem; font-size: .8rem; color: var(--muted); }
.cart-line__subtotal { margin-top: .1rem; font-size: .85rem; color: var(--muted); }
.cart-line__subtotal .price { color: var(--ink); font-weight: 600; }
/* Pendant l'aller-retour d'un geste sur le panier : le récapitulatif pâlit
   et ne se touche plus, le signal que quelque chose se passe. */
.cart-summary[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.page-order [data-cart-error] { margin-bottom: .75rem; }
.cart-line__on-demand { font-size: .9rem; font-weight: 600; color: var(--gks-primary-text); }
.cart-line__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .35rem; }
.cart-line__remove {
    min-height: 44px;
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--ink-2);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
.cart-line__remove:hover { color: var(--danger); }

/* Sélecteur de quantité : deux boutons de 44 px et la valeur entre eux. */
.qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--surface);
}
.qty__btn {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
}
.qty__btn:hover:not(:disabled) { background: var(--paper-2); }
.qty__btn:disabled { color: var(--line-strong); cursor: not-allowed; }
.qty__value { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.cart-total { display: grid; gap: .35rem; padding: 1rem 0 .25rem; border-top: 1.5px solid var(--ink); }
.cart-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cart-total__row dt { font-weight: 600; color: var(--ink); }
.cart-total__row dd {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.03em;
    text-align: right;
}
.cart-total__row--small dt,
.cart-total__row--small dd { font-family: var(--font); font-size: .88rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }

.delivery-note {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--paper-2);
    font-size: .92rem;
    color: var(--ink-2);
}
.delivery-note__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
    font-weight: 700;
    color: var(--ink);
}
.delivery-note__title .icon { color: var(--gks-primary-text); }
.delivery-note strong { color: var(--ink); }

/* ─── Formulaire de commande ───────────────────────────────────────────── */
/* Rempli au pouce : champs de 52 px, texte à 16 px (en dessous, Safari zoome),
   une colonne, l'erreur sous le champ qu'elle concerne. */
.order-form {
    display: grid;
    gap: 1.75rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
}
@media (min-width: 640px) { .order-form { padding: 1.75rem; } }
.fieldset { display: grid; gap: 1.1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset legend { padding: 0; margin-bottom: .1rem; }

.field { display: grid; gap: .35rem; }
/* Deux champs courts côte à côte sur grand écran (les deux téléphones). */
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 960px) { .field-row { grid-template-columns: 1fr 1fr; align-items: start; } }
.field__label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field__optional { margin-left: .35rem; font-weight: 400; font-size: .84rem; color: var(--muted); }
.field__hint { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.field__input {
    width: 100%;
    min-height: 52px;
    padding: .75rem .9rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
textarea.field__input { min-height: 84px; resize: vertical; }
.field__input:hover { border-color: var(--ink-2); }
.field__input:focus { outline: none; border-color: var(--gks-primary); box-shadow: var(--ring); }
/* Flèche du menu déroulant dessinée en CSS : l'apparence native est retirée
   pour que le champ ait la même hauteur partout. */
.field__select {
    padding-right: 2.6rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 50%, calc(100% - .95rem) 50%;
    background-size: .38rem .38rem;
    background-repeat: no-repeat;
}
.field__error { display: none; font-size: .88rem; font-weight: 600; color: var(--danger); line-height: 1.4; }
.field__error:not(:empty) { display: flex; gap: .4rem; }
.field__error:not(:empty)::before { content: "!"; display: grid; place-items: center; flex: 0 0 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 50%; background: var(--danger); color: #fff; font-size: .72rem; }
.field.is-invalid .field__input { border-color: var(--danger); background-color: var(--danger-soft); }
.field.is-invalid .field__input:focus { box-shadow: var(--ring-danger); }

.error-summary {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--danger-soft);
    box-shadow: inset 0 0 0 1.5px var(--danger);
    color: var(--ink);
    font-size: .92rem;
}
.error-summary:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--danger), var(--ring); }
.error-summary__title { margin-bottom: .4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--danger); }
.error-summary ul { display: grid; gap: .3rem; padding-left: 1.1rem; list-style: disc; }
.error-summary a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; }

/* Champ piège : sorti de l'écran, pas masqué par display (certains robots
   ignorent les champs en display: none). */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.order-form__submit { display: grid; gap: .85rem; }
.order-form__reassure { display: flex; gap: .6rem; font-size: .92rem; color: var(--ink-2); }
.order-form__reassure .icon { margin-top: .15rem; color: var(--success); }
.order-form__reassure strong { color: var(--ink); }
.fine-print { font-size: .8rem; color: var(--muted); text-align: center; }
.fine-print a { color: var(--ink-2); text-underline-offset: .2em; }

/* ─── Confidentialité ─────────────────────────────────────────────────── */
/* Une colonne de lecture : texte courant, mesure d'environ 70 caractères. */
.legal-page { max-width: calc(70ch + 2 * var(--gutter)); padding-block: var(--space-tight) var(--space); color: var(--ink-2); }
.legal-page section + section { margin-top: 2.25rem; }
.legal-page h2 {
    margin-bottom: .6rem;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.legal-page p + p, .legal-page p + ul, .legal-page ul + p { margin-top: .7rem; }
.legal-page ul { display: grid; gap: .35rem; padding-left: 1.2rem; list-style: disc; }
.legal-page strong { color: var(--ink); }
.legal-page a { color: var(--gks-primary-text); font-weight: 600; text-underline-offset: .2em; overflow-wrap: anywhere; }
.legal-page ul.legal-page__facts { list-style: none; padding: 1rem 1.2rem; margin-top: .7rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.legal-page__date { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }

/* Bouton en cours d'envoi : désactivé, libellé changé, anneau qui tourne.
   La largeur ne bouge pas, rien ne saute sous le doigt. */
.spinner { display: none; width: 1.05em; height: 1.05em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .7s linear infinite; }
.btn.is-loading { cursor: progress; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .icon { display: none; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ─── Commande envoyée ─────────────────────────────────────────────────── */
.thanks { padding-block: var(--space-tight) var(--space); background: var(--night); color: var(--on-night); }
.thanks__inner { display: grid; justify-items: start; }
.thanks__check {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 1.4rem;
}
.thanks__title { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); color: var(--on-night); max-width: 18ch; }
.thanks__lead { margin-top: 1rem; max-width: 52ch; font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem); color: var(--on-night-muted); }
.thanks__lead strong { color: var(--on-night); }
.thanks__phone { white-space: nowrap; }
.thanks__ref {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--night-2);
    box-shadow: inset 0 0 0 1px var(--night-line);
}
.thanks__ref-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gks-primary-light); }
.thanks__ref-value {
    margin-top: .2rem;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    user-select: all;
}
.thanks__ref-hint { margin-top: .2rem; font-size: .86rem; color: var(--on-night-muted); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; width: 100%; }
.thanks__actions .btn { flex: 1 1 15rem; }
@media (min-width: 640px) { .thanks__actions .btn { flex: 0 0 auto; } }

.thanks__recap { display: grid; gap: 2.5rem; padding-block: var(--space-tight) var(--space); }
@media (min-width: 900px) { .thanks__recap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } }
.recap-lines { display: grid; margin-top: 1rem; }
.recap-line { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.recap-line__label { color: var(--ink); }
.recap-line__price { flex-shrink: 0; }
.thanks__recap .cart-total { border-top: 0; }
.thanks__zone { margin-top: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.thanks__address { color: var(--ink-2); }
.thanks__promises { margin-top: 1.25rem; }

/* ─── Contact ──────────────────────────────────────────────────────────── */
.contact { display: grid; gap: 1.25rem; padding-block: var(--space-tight) var(--space); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; } }
.contact__cards { display: grid; gap: 1rem; }
.info-card {
    display: flex;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
.info-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--gks-primary-text);
}
.info-card__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .3rem; }
.info-card p, .info-card li { color: var(--ink-2); }
.info-card .link-arrow { margin-top: .25rem; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.contact__mail { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.contact__mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gks-primary-text); font-weight: 600; overflow-wrap: anywhere; }
.contact__socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

.map {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    background: var(--paper-2);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Téléphone : carrée, sinon les mentions d'OpenStreetMap en bas de la carte
   en couvraient le tiers et les rues autour de la boutique disparaissaient. */
@media (max-width: 599px) { .map { aspect-ratio: 1 / 1; } }
.map__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--gks-primary-text);
    font-size: 2.5rem;
}
.map__title { font-size: 1rem; font-weight: 600; color: var(--ink); }
.map__hint { font-size: .8rem; color: var(--muted); }
.map__actions { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ─── Pages d'erreur ───────────────────────────────────────────────────── */
.error-page { padding-block: var(--space-tight) var(--space); max-width: 760px; }
.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(5.5rem, 3rem + 13vw, 11rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.07em;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 2px var(--gks-primary-light);
    margin-bottom: -1.2rem;
    user-select: none;
}

/* ─── Pied de page ─────────────────────────────────────────────────────── */
.site-footer { margin-top: auto; background: var(--paper-2); font-size: .92rem; }
.site-footer__grid { display: grid; gap: 2.25rem; padding-block: var(--space-tight); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr auto; gap: 3rem; } }
.brand--footer { margin-right: 0; }
.brand--footer .brand__full { height: 56px; }
.site-footer__slogan {
    margin-top: 1rem;
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.25;
    color: var(--ink);
}
.site-footer__tagline { margin-top: .6rem; max-width: 36ch; color: var(--muted); }
.site-footer__title {
    margin-bottom: .75rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}
.site-footer__list { display: grid; gap: .1rem; color: var(--ink-2); }
.site-footer__list li { display: flex; gap: .6rem; align-items: flex-start; padding-block: .3rem; }
.site-footer__list li > .icon { margin-top: .15rem; color: var(--muted); }
.site-footer__list a { display: inline-flex; align-items: center; gap: .6rem; min-height: 32px; text-decoration: none; color: var(--ink-2); }
.site-footer__list a .icon { color: var(--muted); }
.site-footer__list a:hover,
.site-footer__list a:hover .icon { color: var(--gks-primary-text); }
.site-footer__socials { display: flex; gap: .5rem; }
.site-footer__socials a {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--ink-2);
}
.site-footer__socials a:hover { box-shadow: inset 0 0 0 1.5px var(--gks-primary); color: var(--gks-primary-text); }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1rem;
    border-top: 1px solid var(--line-strong);
    font-size: .82rem;
    color: var(--muted);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
/* L'accès du personnel : trouvable, pas mis en avant. */
.site-footer__staff {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
}
.site-footer__staff:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* ─── Mouvement ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ─── Impression : une fiche imprimée pour un client au comptoir. ───────── */
@media print {
    .site-header, .site-footer, .buybar, .pdp-actions, .breadcrumb, .skip-link { display: none !important; }
    body { background: #fff; padding: 0; }
}