/* =============================================================
   Kalamar — Pass 2 WooCommerce components
   Catalog grid, product cards, PDP, cart drawer.
   Built on Pass-1 tokens in style.css. Recolored by ROLE.
   ============================================================= */

:root {
    /* Motion tokens (DA spec §1.5) */
    --ease-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-quart: cubic-bezier(.165, .84, .44, 1);
    --dur-fast: .3s;
    --dur-med: .5s;
    --dur-slow: .6s;
    /* Role aliases mapped onto existing Pass-1 tokens */
    --bg-muted: #f1f1ef;
    --shop-margin: clamp(16px, 2vw, 40px);
    --shop-gap: clamp(8px, 1vw, 20px);
}

/* ---------- Shared helpers ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform var(--dur-med) var(--ease-expo); will-change: transform; }
.img-zoom:hover img { transform: scale(1.05); }

.ui-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: clamp(12px, 1vw, 15px);
}

/* Scroll-reveal (paired with kalamar.js IntersectionObserver) */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-quart), transform var(--dur-slow) var(--ease-quart);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   1. CATALOG / COLLECTION GRID
   ============================================================= */
/* Pas de padding en haut : la barre de catégories est le PREMIER enfant de
   .kal-shop, donc ce padding (jusqu'à 128px) la décrochait de la navbar et
   créait une grande bande vide — ce qui faisait paraître l'en-tête énorme sur
   la boutique. La barre doit se coller sous la navbar comme une navigation.
   La grille produits conserve son propre padding haut (clamp(20px,3vw,48px)). */
.kal-shop { padding: 0 0 clamp(3rem, 6vw, 7rem); }

/* ===== Top category bar (ALL · TEES · HOODIES …) — sticky sous la navbar ===== */
.kal-cats {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    /* overflow visible pour laisser le dropdown sous-cats déborder vers le bas */
    overflow: visible;
    position: sticky;
    top: 0;                 /* la navbar étant auto-hide, on colle en haut du viewport */
    z-index: 90;
    background: var(--color-paper);
    transition: top .45s var(--ease-expo);
}
/* Quand la navbar est visible, les barres cats se placent juste en dessous */
body:not(.nav-hidden) .kal-cats { top: var(--header-h, 64px); }
/* Sous-catégories : collantes JUSTE sous la barre de catégories parente.
   Sélecteur doublé pour battre « body:not(.nav-hidden) .kal-cats » (0,2,0) qui
   cible aussi cette barre (elle porte les deux classes) et lui imposait le
   top de la navbar : en position relative, ce décalage de 90px la faisait
   recouvrir la barre de filtres. --kal-cats-h = 56px + les 2 bordures. */
/* Spécificité (0,3,1) : « body:not(.nav-hidden) .kal-cats » vaut (0,2,1) et
   l'emportait, collant la sous-barre à la hauteur de la navbar seule — donc
   derrière la barre parente au scroll. */
body:not(.nav-hidden) .kal-cats.kal-cats--sub,
.kal-cats.kal-cats--sub {
    position: sticky;
    top: calc(var(--header-h, 76px) + var(--kal-cats-h, 58px));
    z-index: 89;
}
/* Navbar masquée (auto-hide mobile) : on remonte d'autant. */
body.nav-hidden .kal-cats.kal-cats--sub { top: var(--kal-cats-h, 58px); }
.kal-cats__inner {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 38px);
    padding: 0 var(--shop-margin);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    height: 56px;
}
.kal-cats__inner::-webkit-scrollbar { display: none; }
.kal-cats__item {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
    text-decoration: none;
    padding: 4px 0;
    transition: opacity var(--dur-fast) var(--ease-quart);
    position: relative;
}
.kal-cats__item:hover { opacity: .55; text-decoration: none; }
.kal-cats__item.is-active { font-weight: 700; }
.kal-cats__item::after { display: none !important; } /* kill global link sweep */

/* Sous-catégories (Femme/Homme → T-shirt, Crop top…) */
.kal-cats--sub { border-top: 0; background: var(--color-paper); }
.kal-cats--sub .kal-cats__inner { height: 44px; gap: clamp(16px, 2vw, 28px); }
.kal-cats--sub .kal-cats__item { font-size: 11px; color: var(--color-muted); letter-spacing: .1em; }
.kal-cats--sub .kal-cats__item.is-active { color: var(--color-ink); font-weight: 600; }

/* ===== Tools row (filters · count · sort) ===== */
.kal-shop__tools-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px var(--shop-margin);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;

    /* NON collante : la boutique empilait 3 barres fixes (navbar 90px + cats 57px
       + outils 43px + sous-cats 44px), soit un en-tête permanent 2 fois plus haut
       que sur le reste du site. Seule la barre de catégories reste collée ; celle
       des filtres et du tri défile avec la grille. */
    position: relative;
    z-index: 88;
    background: var(--color-paper);
}
.kal-shop__filters-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.kal-shop__filters-btn:hover { opacity: .6; }
.kal-shop__tools-right { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); min-width: 0; }
.kal-shop__count { color: var(--color-muted); min-width: 0; }
.kal-shop__count .woocommerce-result-count { margin: 0; font: inherit; color: inherit; }
.kal-shop__sort { min-width: 0; }
.kal-shop__sort .woocommerce-ordering { margin: 0; min-width: 0; max-width: 100%; }
/* Un <select> adopte par défaut la largeur de son option la plus longue
   ("Trier du plus récent au plus ancien" ≈ 300px en capitales espacées).
   Sans min-width:0 un élément flex ne peut pas descendre sous cette largeur :
   la barre débordait donc le viewport et rendait toute la page scrollable
   horizontalement en mobile. */
.kal-shop__sort select {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
    border: 0;
    background: transparent;
    padding: 0 18px 0 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: 700;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position: calc(100% - 8px) 55%, calc(100% - 3px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.kal-shop__sort select:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 2px; }

/* Mobile : la barre d'outils n'avait aucune adaptation. On resserre les
   espacements et on masque le compteur de résultats, redondant avec la grille,
   pour laisser la place au filtre et au tri. */
@media (max-width: 600px) {
    .kal-shop__tools-bar { gap: .5rem; letter-spacing: .05em; }
    .kal-shop__tools-right { gap: 12px; }
    .kal-shop__count { display: none; }
    .kal-shop__sort select { font-size: 11px; }
}
.kal-shop__empty { padding: 4rem var(--shop-margin); }

/* Grid: 2 (mobile) -> 3 (tablet) -> 4 (desktop). 4 colonnes dès 900px. */
.woocommerce ul.products.kal-grid,
ul.products.kal-grid {
    display: grid;
    /* minmax(0, 1fr) et non 1fr : « 1fr » vaut minmax(auto, 1fr), donc une
       colonne ne peut pas rétrécir sous la largeur min-content de son contenu
       et fait déborder la grille. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 64px) clamp(16px, 2vw, 32px);
    margin: 0;
    padding: clamp(20px, 3vw, 48px) var(--shop-margin) 0;
    list-style: none;
}
/* Kill WooCommerce default ::before/::after clearfix pseudo-elements that
   take a grid cell and push the first product off the visible grid. */
.woocommerce ul.products.kal-grid::before,
.woocommerce ul.products.kal-grid::after,
ul.products.kal-grid::before,
ul.products.kal-grid::after {
    content: none !important;
    display: none !important;
}
@media (min-width: 640px) {
    .woocommerce ul.products.kal-grid,
    ul.products.kal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .woocommerce ul.products.kal-grid,
    ul.products.kal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products.kal-grid li.product,
ul.products.kal-grid li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    text-align: left;
}

/* Card */
.kal-card { position: relative; display: block; }
.kal-card__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;   /* rectangulaire vertical (portrait) */
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 0;
}
.kal-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    padding: 0;
    transition: opacity 500ms var(--ease-expo),
                transform 700ms var(--ease-expo);
    margin: 0;
    will-change: opacity, transform;
}
.kal-card__img--secondary { opacity: 0; transform: scale(1.03); }
.kal-card:hover .kal-card__img--primary,
.kal-card:focus-visible .kal-card__img--primary { opacity: 0; transform: scale(1.03); }
.kal-card:hover .kal-card__img--secondary,
.kal-card:focus-visible .kal-card__img--secondary { opacity: 1; transform: scale(1); }
/* If no second image, zoom the primary instead (premium fallback) */
.kal-card--single:hover .kal-card__img--primary,
.kal-card--single:focus-visible .kal-card__img--primary { opacity: 1; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .kal-card__img { transition: opacity 200ms linear; transform: none !important; }
}

.kal-card__badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--color-accent);
    color: #fff;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .55rem;
    line-height: 1;
}

/* Quick add overlay */
.kal-card__quickadd {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: .75rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-fast) var(--ease-quart), transform var(--dur-fast) var(--ease-quart);
    pointer-events: none;
}
.kal-card:hover .kal-card__quickadd { opacity: 1; transform: none; pointer-events: auto; }
.kal-card__quickadd .button {
    display: block; width: 100%; text-align: center;
    background: var(--color-button-bg); color: #fff !important;
    border: 1px solid var(--color-button-bg);
    text-transform: uppercase; letter-spacing: .05em;
    font-size: clamp(11px, .85vw, 13px);
    padding: .7rem 1rem;
    border-radius: 0;
    margin: 0;
    transition: background var(--dur-fast) var(--ease-quart), color var(--dur-fast) var(--ease-quart);
}
.kal-card__quickadd .button:hover { background: var(--color-accent); border-color: var(--color-accent); }
.kal-card__quickadd .button.loading { opacity: .6; }
.kal-card__quickadd .added { display: none; }
@media (hover: none) { .kal-card__quickadd { display: none; } }

.kal-card__info {
    /* C'est un <span> : sans display:block il reste inline, et un élément
       inline IGNORE les marges verticales — le margin-top ci-dessous n'avait
       donc aucun effet et le titre restait collé à l'image. */
    display: block;
    margin-top: clamp(1.4rem, 1.8vw, 2rem);
}
.kal-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

/* ===== Sizes overlay on the image (premium hover reveal) ===== */
.kal-card__sizes-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 28px);
    padding: clamp(10px, 1vw, 14px) clamp(10px, 1.4vw, 18px);
    background: rgba(22, 17, 13, 0.86);
    color: var(--color-paper);
    font-size: clamp(11px, .85vw, 13px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 350ms var(--ease-expo),
                transform 450ms var(--ease-expo);
    pointer-events: none;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kal-card:hover .kal-card__sizes-overlay,
.kal-card:focus-visible .kal-card__sizes-overlay {
    opacity: 1;
    transform: translateY(0);
}
.kal-card__sizes-overlay .kal-card__size { line-height: 1; }
@media (hover: none) {
    .kal-card__sizes-overlay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kal-card__sizes-overlay { transition: opacity 200ms linear; transform: none; }
}

.kal-card__title {
    font-size: clamp(12px, .9vw, 14px);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    color: var(--color-text);
}
.kal-card__price {
    font-size: clamp(12px, .9vw, 14px);
    white-space: nowrap;
    font-weight: 500;
    color: var(--color-text);
}
.kal-card__price .price { color: var(--color-text); font-weight: 500; }
.kal-card__price del   { color: var(--color-muted); font-weight: 400; margin-right: .35rem; }
.kal-card__price ins   { text-decoration: none; color: var(--color-ink); font-weight: 600; }

.kal-card__sizes {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    font-size: clamp(12px, .9vw, 14px);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    color: var(--color-text);
}
.kal-card__size { line-height: 1; }

/* =============================================================
   2. PRODUCT DETAIL PAGE (PDP)
   ============================================================= */
.woocommerce div.product.kal-pdp,
.kal-pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 2.5vw, 3rem);
    max-width: 1500px;
    margin: 0 auto;
    /* Padding haut ramene de 9rem a 3rem : la fiche demarrait tres bas. */
    padding: clamp(1.5rem, 3vw, 3rem) var(--shop-margin) clamp(3rem, 6vw, 6rem);
}
@media (min-width: 900px) {
    .kal-pdp,
    .woocommerce div.product.kal-pdp {
        /* Le panneau d'infos etait compresse (~.75fr) avec un grand vide entre
           les deux colonnes : on lui donne une vraie largeur et on resserre
           l'ecart — l'espace revient au contenu plutot qu'a la gouttiere. */
        grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
        align-items: start;
    }
}

/* ============================================================
 * Gallery PDP — thumbnails verticaux à gauche + grande image à droite
 * (pattern Zalando / NewAmsterdam, no border-radius)
 * ============================================================ */
.kal-gallery {
    position: relative;
    display: grid;
    gap: clamp(10px, 1.2vw, 18px);
    grid-template-columns: 1fr; /* fallback (sans thumbs) */
}
/* Galerie empilée : toutes les photos l'une sous l'autre, pleine largeur de la
   colonne. Remplace l'ancienne colonne de vignettes (qui les rendait minuscules
   et n'apparaissait que sur les produits ayant plusieurs photos). */
.kal-gallery.kal-gallery--stacked {
    grid-template-columns: 1fr;
    gap: clamp(8px, 1vw, 16px);
}
/* Chaque photo garde son ratio natif. Le cadre 3/4 imposé + object-fit:contain
   laissait apparaître le fond gris en bandes dès que la photo n'était pas
   exactement en 3/4 — c'était la zone vide sous les images. */
.kal-gallery--stacked .kal-gallery__main {
    aspect-ratio: auto;
    max-height: none;
    background: transparent;
}
.kal-gallery--stacked .kal-gallery__main img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
@media (min-width: 900px) {
    /* Desktop : chaque photo tient dans la hauteur d'ecran (moins la navbar).
       Une image portrait remplissait sinon toute la largeur de colonne (~900px)
       et depassait donc l'ecran de plusieurs centaines de pixels, forcant le
       scroll. On plafonne la hauteur ; l'image se recentre dans la colonne et
       garde son ratio. Sur les produits a plusieurs photos, chacune tient a
       l'ecran et le panneau d'infos reste sticky pendant qu'on les fait defiler. */
    .kal-gallery--stacked .kal-gallery__main img {
        width: auto;
        max-width: 100%;
        max-height: calc(100svh - var(--header-h, 76px) - 3rem);
        margin-inline: auto;
    }
}
.kal-gallery.kal-gallery--has-thumbs {
    /* Miniatures genereuses : on navigue au coup d'oeil. */
    grid-template-columns: clamp(128px, 10vw, 176px) 1fr;
    align-items: start;
}
/* Colonne des photos empilees, a droite des miniatures. */
.kal-gallery__stack {
    display: flex;
    flex-direction: column;
    gap: 0;   /* photos collees verticalement, sans interstice */
    min-width: 0;
}
/* Le clic sur une miniature fait defiler jusqu'a la photo : on menage la
   place de la navbar sticky au point d'arrivee. */
.kal-gallery__stack .kal-gallery__main { scroll-margin-top: calc(var(--header-h, 76px) + 12px); }
/* Mobile : pas de miniatures ni d'empilement — on balaie horizontalement,
   une photo par ecran, avec accroche (scroll-snap). */
@media (max-width: 900px) {
    .kal-gallery--has-thumbs .kal-gallery__thumbs { display: none; }
    .kal-gallery.kal-gallery--has-thumbs { grid-template-columns: 1fr; }
    .kal-gallery__stack {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .kal-gallery__stack::-webkit-scrollbar { display: none; }
    .kal-gallery__stack .kal-gallery__main {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}
@media (max-width: 900px) {
    .kal-gallery.kal-gallery--has-thumbs {
        grid-template-columns: 1fr;          /* mobile : on bascule en stack */
        grid-template-rows: auto auto;
    }
    .kal-gallery--has-thumbs .kal-gallery__thumbs { order: 2; }
    .kal-gallery--has-thumbs .kal-gallery__main   { order: 1; }
}

/* Thumbs column (vertical desktop / horizontal mobile) */
.kal-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 12px);
    position: sticky;
    top: clamp(96px, 9vw, 140px);
    max-height: calc(100vh - clamp(96px, 9vw, 140px) - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding: 2px; /* room for border-glow on active */
}
@media (max-width: 900px) {
    .kal-gallery__thumbs {
        flex-direction: row;
        position: static;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        scrollbar-width: none;
    }
    .kal-gallery__thumbs::-webkit-scrollbar { display: none; }
}
.kal-gallery__thumb {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--bg-muted);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: 0;            /* explicit no-radius */
    padding: 0;
    margin: 0;
    transition: border-color var(--dur-fast) var(--ease-quart),
                opacity var(--dur-fast) var(--ease-quart);
    opacity: .65;
}
@media (max-width: 900px) {
    .kal-gallery__thumb {
        width: 88px;
        aspect-ratio: 3 / 4;
    }
}
.kal-gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.kal-gallery__thumb:hover,
.kal-gallery__thumb:focus-visible { opacity: .9; border-color: var(--color-muted); outline: 0; }
.kal-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--color-ink);   /* highlight prononcé sur l'active */
    box-shadow: 0 0 0 1px var(--color-ink) inset;
}

/* Main image — grand cadre, photo entière visible, no border-radius */
.kal-gallery__main {
    background: var(--bg-muted);
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 3 / 4;
    max-height: calc(100vh - 120px);
}
.kal-gallery__main img {
    width: 100%; height: 100%;
    object-fit: contain;        /* photo complète sans crop */
    display: block;
    border-radius: 0;
    transition: opacity 300ms var(--ease-expo);
}
.kal-gallery__main.is-zoomable { cursor: zoom-in; }
@media (max-width: 900px) {
    .kal-gallery__main { aspect-ratio: 3/4; max-height: 70vh; }
} { transform: scale(1.6); }
/* Ecrans tactiles : pas de survol reel — le navigateur declenche :hover au
   toucher et la photo sautait a 160% pendant le swipe. On neutralise la
   loupe au survol ; le zoom plein ecran au tap reste. */
@media (hover: none), (max-width: 900px) {
    .kal-gallery__main.is-zoomable:hover img { transform: none; }
}
/* (Une 2e definition de .kal-gallery__thumbs en repeat(5, 1fr) vivait ici :
   elle ecrasait la colonne verticale et rendait les miniatures minuscules
   et horizontales. Supprimee — la colonne est definie plus haut.) */

/* (Anciennes règles stack/swipe supprimées : la galerie actuelle = thumbs + 1 main.
   Le .kal-gallery__main DOIT toujours être visible.) */
.kal-gallery > .kal-gallery__main { display: block; }

/* Legacy swipe — gardé masqué (plus utilisé) */
.kal-gallery__swipe { display: none; }
.kal-gallery__swipe::-webkit-scrollbar { display: none; }
.kal-gallery__swipe > div { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3/4; background: var(--bg-muted); overflow: hidden; }
.kal-gallery__swipe img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
    .kal-gallery--swipe .kal-gallery__main { display: block; }
    .kal-gallery--swipe .kal-gallery__thumbs { display: none; }
    .kal-gallery--swipe .kal-gallery__swipe { display: flex; }
}

/* Info panel — reference DA */
.kal-pdp__summary { align-self: start; }
@media (min-width: 900px) { .kal-pdp__summary { position: sticky; top: clamp(96px, 9vw, 140px); } }

.kal-pdp__heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 .35rem;
}
.kal-pdp__title {
    letter-spacing: -.01em;
    line-height: 1.05;
    font-size: var(--fs-title-col);
    margin: 0;
}
.kal-pdp__stock {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .35rem .55rem;
    line-height: 1;
    color: var(--color-paper);
    background: var(--color-ink);
}
.kal-pdp__stock--low { background: var(--color-ink); }
.kal-pdp__stock--oos { background: var(--color-muted); }

.kal-pdp__price {
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 500;
    margin: 0 0 1.1rem;
    color: var(--color-text);
}
.kal-pdp__price .price { font-weight: 500; }
.kal-pdp__price del   { color: var(--color-muted); margin-right: .4rem; font-weight: 400; }
.kal-pdp__price ins   { text-decoration: none; color: var(--color-text); font-weight: 600; }

.kal-pdp__thumb {
    display: block;
    width: clamp(88px, 7.5vw, 118px);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border);
    padding: 6px;
    background: var(--color-paper);
    margin: 0 0 1.6rem;
    transition: border-color var(--dur-fast) var(--ease-quart);
}
.kal-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kal-pdp__thumb:hover { border-color: var(--color-ink); }
.kal-pdp__price .price { font-weight: 600; }
.kal-pdp__price del { color: var(--color-muted); font-weight: 400; margin-right: .5rem; }
.kal-pdp__price ins { text-decoration: none; color: var(--color-accent); font-weight: 700; }
.kal-pdp__excerpt { color: var(--color-text); font-size: clamp(14px, 1.04vw, 17px); line-height: 1.5; margin-bottom: 1.5rem; }

/* Variation / size pills */
.kal-variations { margin: 0 0 1.1rem; }
.kal-variations__label { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; margin-bottom: .6rem; color: var(--color-muted); }
.kal-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.kal-swatch {
    border: 1px solid var(--color-text);
    background: transparent;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: clamp(12px, .9vw, 14px);
    padding: .55rem 1rem;
    min-width: 2.75rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
    transition: background var(--dur-fast) var(--ease-quart), color var(--dur-fast) var(--ease-quart), opacity var(--dur-fast);
    line-height: 1;
}
.kal-swatch:hover { background: var(--color-text); color: #fff; }
.kal-swatch.is-selected { background: var(--color-text); color: #fff; }
.kal-swatch.is-disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.kal-swatch.is-disabled:hover { background: transparent; color: var(--color-text); }

/* ===== Rond couleur premium ===== */
.kal-swatches--color { gap: .85rem; }
.kal-swatch--dot {
    --swatch: #c9c4ba;
    width: 30px; height: 30px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--swatch);
    position: relative;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-quart);
    /* léger relief pour les couleurs claires */
    box-shadow: inset 0 0 0 1px rgba(22,17,13,.12);
}
.kal-swatch--dot:hover { background: var(--swatch); color: transparent; transform: scale(1.08); }
.kal-swatch--dot .kal-swatch__ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-quart);
    pointer-events: none;
}
.kal-swatch--dot.is-selected { background: var(--swatch); color: transparent; transform: none; }
.kal-swatch--dot.is-selected .kal-swatch__ring { border-color: var(--color-ink); }
.kal-swatch--dot.is-disabled { opacity: .3; }
.kal-swatch--dot.is-disabled::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(45deg, transparent 46%, rgba(22,17,13,.5) 46%, rgba(22,17,13,.5) 54%, transparent 54%);
    border-radius: 50%;
}

/* Variation reset link + price/availability injected by WC */
.kal-pdp .woocommerce-variation { margin-bottom: 1rem; }
.kal-pdp .reset_variations { display: inline-block; margin: 0 0 .2rem; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); opacity: .75; }

/* Produit variable : la quantité et le bouton vivent dans ce conteneur, imbriqué
   deux niveaux sous form.cart — le gap du formulaire ne les atteignait donc pas
   et ils se retrouvaient collés. On rétablit ici le même rythme vertical. */
.kal-pdp .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
}
.kal-pdp .woocommerce-variation-add-to-cart .kal-qty,
.kal-pdp .woocommerce-variation-add-to-cart .quantity { align-self: flex-start; }
/* La marge du bouton s'ajouterait au gap : on la neutralise ici. */
.kal-pdp .woocommerce-variation-add-to-cart .single_add_to_cart_button { margin-top: 0 !important; }
.kal-pdp .woocommerce-variation-price .price { font-weight: 600; }

/* Add-to-cart form */
.kal-pdp form.cart { margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.kal-pdp form.cart .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border); width: fit-content; }
.kal-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border); width: fit-content; }
.kal-qty button {
    background: transparent; border: 0; width: 2.75rem; cursor: pointer; font-size: 1.1rem; color: var(--color-text);
    line-height: 1; padding: 0;
}
.kal-qty input.qty {
    width: 3rem; text-align: center; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
    font: inherit; padding: .75rem 0; -moz-appearance: textfield; background: transparent;
}
.kal-qty input.qty::-webkit-outer-spin-button,
.kal-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kal-pdp .single_add_to_cart_button,
.woocommerce div.product.kal-pdp form.cart .single_add_to_cart_button,
.kal-btn-primary {
    display: block !important; width: 100% !important;
    background: var(--color-ink) !important;
    color: var(--color-paper) !important;
    border: 1px solid var(--color-ink) !important;
    text-transform: uppercase; letter-spacing: .12em;
    font-size: clamp(12px, .9vw, 14px) !important; font-weight: 600 !important;
    padding: 1.25rem 2rem !important; border-radius: 0 !important; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quart), opacity var(--dur-fast), transform var(--dur-fast) !important;
    text-align: center;
    margin: .5rem 0 0 !important;
    text-shadow: none;
    box-shadow: none;
    float: none !important;
}
.kal-pdp .single_add_to_cart_button:hover,
.woocommerce div.product.kal-pdp form.cart .single_add_to_cart_button:hover,
.kal-btn-primary:hover {
    background: var(--color-ink) !important;
    border-color: var(--color-ink) !important;
    color: var(--color-paper) !important;
    opacity: .85;
}
.kal-pdp .single_add_to_cart_button:active,
.kal-btn-primary:active { transform: scale(.99); }
.kal-pdp .single_add_to_cart_button.disabled,
.kal-pdp .single_add_to_cart_button:disabled { opacity: .35; cursor: not-allowed; background: var(--color-muted); border-color: var(--color-muted); }
/* Hide qty stepper on PDP per reference (qty stays at 1; cart drawer handles increments) */
.kal-pdp form.cart .quantity,
.kal-pdp form.cart .kal-qty { display: none; }

/* PDP description (always-visible block under add-to-cart) */
.kal-pdp__description {
    margin: 2rem 0 1.5rem;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.6;
    color: var(--color-text);
}
.kal-pdp__description p { margin: 0 0 1rem; }
.kal-pdp__description p:last-child { margin-bottom: 0; }
.kal-pdp__description ul,
.kal-pdp__description ol {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.kal-pdp__description li {
    position: relative;
    padding-left: 1rem;
    margin: 0;
    line-height: 1.55;
}
.kal-pdp__description li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-text);
}
.kal-pdp__description strong { font-weight: 600; }

/* Accordions */
.kal-accordions { border-top: 1px solid var(--color-border); margin-top: .5rem; }
.kal-accordion { border-bottom: 1px solid var(--color-border); }
.kal-accordion__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: transparent; border: 0; cursor: pointer;
    padding: 1.1rem 0; font: inherit;
    text-transform: uppercase; letter-spacing: .04em; font-size: clamp(12px, .95vw, 15px); font-weight: 600;
    color: var(--color-text); text-align: left;
}
.kal-accordion__icon { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.kal-accordion__icon::before,
.kal-accordion__icon::after { content: ""; position: absolute; background: var(--color-text); transition: transform var(--dur-fast) var(--ease-quart); }
.kal-accordion__icon::before { left: 0; top: 5px; width: 12px; height: 1px; }
.kal-accordion__icon::after { left: 5px; top: 0; width: 1px; height: 12px; }
.kal-accordion[open] .kal-accordion__icon::after,
.kal-accordion.is-open .kal-accordion__icon::after { transform: scaleY(0); }
.kal-accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-fast) var(--ease-quart); }
.kal-accordion.is-open .kal-accordion__panel { max-height: 1200px; }
.kal-accordion__inner { padding: 0 0 1.25rem; color: var(--color-text); font-size: clamp(14px, 1vw, 16px); line-height: 1.55; }
.kal-accordion__inner p:last-child { margin-bottom: 0; }

/* Mobile sticky add-to-cart bar */
.kal-sticky-atc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none;
    align-items: center; gap: .75rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: .6rem var(--shop-margin);
    transform: translateY(110%);
    transition: transform var(--dur-med) var(--ease-quart);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
.kal-sticky-atc.is-visible { transform: none; }
.kal-sticky-atc__price { font-weight: 600; font-size: 15px; white-space: nowrap; }
.kal-sticky-atc__btn { flex: 1; }
.kal-sticky-atc__btn .kal-btn-primary { padding: .85rem 1rem; }
@media (max-width: 767px) { .kal-sticky-atc { display: flex; } }

/* Related products */
.kal-related { padding: clamp(2rem, 4vw, 4rem) var(--shop-margin) clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--color-border); }
/* (Règle dupliquée retirée : une seconde définition plus bas dans le fichier
   l'écrasait déjà, avec une graisse et un interlettrage différents.) */

/* =============================================================
   3. CART DRAWER + mini-cart
   ============================================================= */
.kal-cart-toggle {
    background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
    text-transform: uppercase; letter-spacing: .04em; font-size: clamp(12px, 1vw, 15px);
    display: inline-flex; align-items: center; gap: .35rem; padding: 0;
}
.kal-cart-count { font-variant-numeric: tabular-nums; }

.kal-drawer-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,.4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-med) ease, visibility var(--dur-med) ease;
}
.kal-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.kal-drawer {
    position: fixed; top: 0; right: 0; z-index: 999;
    height: 100%; width: min(420px, 92vw);
    background: var(--color-bg);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-quart);
    box-shadow: -2px 0 30px rgba(0,0,0,.08);
}
.kal-drawer.is-open { transform: none; }

.kal-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem var(--shop-margin); border-bottom: 1px solid var(--color-border);
}
.kal-drawer__title { text-transform: uppercase; letter-spacing: .05em; font-size: 14px; font-weight: 700; margin: 0; }
.kal-drawer__close { background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--color-text); padding: 0; }

.kal-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--shop-margin); }
.kal-drawer__empty { padding: 3rem 0; text-align: center; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }

.kal-mini-cart { list-style: none; margin: 0; padding: 0; }
.kal-mini-item { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); position: relative; }
.kal-mini-item__thumb { flex: 0 0 64px; width: 64px; aspect-ratio: 3/4; background: var(--bg-muted); overflow: hidden; }
.kal-mini-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kal-mini-item__main { flex: 1; min-width: 0; }
.kal-mini-item__name { text-transform: uppercase; letter-spacing: .02em; font-size: 13px; font-weight: 500; margin: 0 0 .25rem; line-height: 1.3; }
.kal-mini-item__name a { color: inherit; }
.kal-mini-item__meta { color: var(--color-muted); font-size: 12px; margin-bottom: .5rem; }
.kal-mini-item__price { font-size: 13px; font-weight: 600; }
.kal-mini-item__remove {
    position: absolute; top: 1.25rem; right: 0;
    background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--color-muted); padding: 0;
    transition: color var(--dur-fast);
}
.kal-mini-item__remove:hover { color: var(--color-accent); }

.kal-drawer__foot { border-top: 1px solid var(--color-border); padding: 1.25rem var(--shop-margin) calc(1.25rem + env(safe-area-inset-bottom)); }
.kal-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.kal-drawer__subtotal .label { text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.kal-drawer__subtotal .amount { font-weight: 700; font-size: 1.05rem; }
.kal-drawer__actions { display: grid; gap: .6rem; }
.kal-drawer__actions .kal-btn-secondary {
    display: block; text-align: center; width: 100%;
    background: transparent; color: var(--color-text); border: 1px solid var(--color-text);
    text-transform: uppercase; letter-spacing: .05em; font-size: 13px; padding: .9rem 1rem; border-radius: 0;
    transition: background var(--dur-fast) var(--ease-quart), color var(--dur-fast) var(--ease-quart);
}
.kal-drawer__actions .kal-btn-secondary:hover { background: var(--color-text); color: #fff; }

body.kal-no-scroll { overflow: hidden; }

/* =============================================================
   Cart & checkout page light restyle
   ============================================================= */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { padding-inline: var(--shop-margin); }
.woocommerce-cart table.cart, .woocommerce table.shop_table { border-radius: 0; }
.woocommerce table.shop_table th { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--color-button-bg); color: #fff !important; border-radius: 0; text-transform: uppercase; letter-spacing: .05em;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--color-accent); }

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    *, [data-reveal] { transition-duration: .001ms !important; animation-duration: .001ms !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .img-zoom:hover img, .kal-card--single:hover .kal-card__img--primary, .kal-gallery__main.is-zoomable:hover img { transform: none; }
}

/* =========================================================
   KAL-CAROUSEL — premium auto-sliding marquee
   ========================================================= */
.block--carousel { padding: clamp(40px, 6vw, 96px) 0; overflow: hidden; }
.block--carousel__caption {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--color-muted);
    margin: 0 0 clamp(20px, 3vw, 40px);
}
.kal-carousel { position: relative; }
.kal-carousel__viewport {
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none; user-select: none;
}
.kal-carousel__viewport.is-grabbing { cursor: grabbing; }
.kal-carousel__track {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 0;
    will-change: transform;
    animation: kal-marquee var(--carousel-duration, 30s) linear infinite;
}
.kal-carousel:hover .kal-carousel__track,
.kal-carousel.is-paused .kal-carousel__track,
.kal-carousel:focus-within .kal-carousel__track { animation-play-state: paused; }
.kal-carousel.is-dragging .kal-carousel__track { animation: none; }

.kal-carousel__slide {
    flex: 0 0 auto;
    width: clamp(260px, 32vw, 520px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bg-muted);
    position: relative;
}
.kal-carousel__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms var(--ease-expo);
}
.kal-carousel__slide:hover .kal-carousel__img { transform: scale(1.03); }

/* Hide manual arrows on all carousels — manual control via drag/swipe only */
.kal-carousel__nav { display: none !important; }
.kal-carousel__nav--disabled-block {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    background: rgba(255, 253, 244, 0.92);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                transform var(--dur-base) var(--ease-quart);
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.kal-carousel:hover .kal-carousel__nav,
.kal-carousel:focus-within .kal-carousel__nav { opacity: 1; }
.kal-carousel__nav:hover { background: var(--color-ink); color: var(--color-paper); }
.kal-carousel__nav:focus-visible { opacity: 1; outline: 2px solid var(--color-ink); outline-offset: 3px; }
.kal-carousel__nav--prev { left: clamp(8px, 2vw, 28px); }
.kal-carousel__nav--next { right: clamp(8px, 2vw, 28px); }

@media (max-width: 640px) {
    .kal-carousel__slide { width: 78vw; }
    .kal-carousel__nav { width: 40px; height: 40px; opacity: 1; background: rgba(255, 253, 244, 0.85); }
}

@keyframes kal-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .kal-carousel__track { animation: none !important; }
    .kal-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
    .kal-carousel__slide { scroll-snap-align: center; }
}

/* =========================================================
   KAL-RELATED — Vous aimerez aussi (carrousel produits 1 ligne)
   ========================================================= */
/* « Découvrez la collection » : même traitement pleine largeur que
   « Vous aimerez aussi » ci-dessous. Le bloc utilisait .container, plafonné à
   var(--container) = 1600px, ce qui le rétrécissait sur grand écran alors que
   .kal-related n'a aucun max-width. */
.block--featured-products .container,
.page-blocks .block--featured-products .container {
    /* Selecteur double : « .page-blocks .container { max-width:1300px } » a la
       meme specificite (0,2,0) et arrive plus bas dans la feuille, il gagnait. */
    max-width: none;
    padding-left: var(--shop-margin);
    padding-right: var(--shop-margin);
}

.kal-related {
    padding: clamp(40px, 6vw, 96px) var(--shop-margin);
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}
.kal-related__title {
    font-size: var(--fs-title-col);
    letter-spacing: .12em;
    margin: 0 0 clamp(24px, 3vw, 44px);
}
.kal-related__carousel { position: relative; }

.kal-carousel--products .kal-carousel__viewport { overflow: hidden; }
.kal-carousel--products .kal-related__track {
    display: flex;
    gap: var(--shop-gap);
    margin: 0; padding: 0;
    list-style: none;
    will-change: transform;
    animation: kal-marquee var(--carousel-duration, 30s) linear infinite;
}
.kal-carousel--products:hover .kal-related__track,
.kal-carousel--products:focus-within .kal-related__track,
.kal-carousel--products.is-paused .kal-related__track { animation-play-state: paused; }
.kal-carousel--products.is-dragging .kal-related__track { animation: none; }

/* Each slide = a product card (li.product from content-product.php) */
.kal-carousel--products .kal-carousel__slide {
    flex: 0 0 calc((100% - var(--shop-gap) * 1) / 2);
    width: calc((100% - var(--shop-gap) * 1) / 2);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Annule les styles du carrousel d'IMAGES (aspect-ratio fixe + bg gris + crop)
       qui créaient un carré gris sous la fiche produit. */
    aspect-ratio: auto !important;
    background: transparent !important;
    overflow: visible !important;
    height: auto;
}
@media (min-width: 768px) {
    .kal-carousel--products .kal-carousel__slide { flex-basis: calc((100% - var(--shop-gap) * 2) / 3); width: calc((100% - var(--shop-gap) * 2) / 3); }
}
@media (min-width: 1024px) {
    .kal-carousel--products .kal-carousel__slide { flex-basis: calc((100% - var(--shop-gap) * 3) / 4); width: calc((100% - var(--shop-gap) * 3) / 4); }
}
/* The .product li inside slides keeps its kal-card styling but must not enforce its own width */
.kal-carousel--products .kal-carousel__slide.product { float: none !important; width: 100% !important; }
.kal-carousel--products .kal-carousel__slide > .kal-card { display: block; }

/* =========================================================
   FEATURE GRID — big image left + 4 products right (and reversed)
   ========================================================= */
/* Bloc Image+Grille produits — image edge-to-edge (zéro marge autour).
   Seule la colonne produits garde son padding interne. */
.block--feature-grid {
    padding: 0;
}
.feature-grid__eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 var(--shop-margin);
    margin: 0 0 clamp(20px, 3vw, 36px);
}
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
}
@media (max-width: 899px) {
    /* Mobile : l'image colle bord à bord, les produits gardent un peu d'air sous */
    .feature-grid__products { padding: clamp(20px, 4vw, 32px) var(--shop-margin) !important; }
}
@media (min-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;   /* both columns share the same row height */
        gap: 0;
    }
    .block--feature-grid.is-reversed .feature-grid__media    { order: 2; }
    .block--feature-grid.is-reversed .feature-grid__products { order: 1; }
    /* Image colle bord viewport, produits gardent padding côté intérieur+extérieur */
    .feature-grid__products {
        padding: clamp(28px, 3.5vw, 56px) var(--shop-margin) clamp(28px, 3.5vw, 56px) clamp(20px, 2.4vw, 40px) !important;
    }
    .block--feature-grid.is-reversed .feature-grid__products {
        padding: clamp(28px, 3.5vw, 56px) clamp(20px, 2.4vw, 40px) clamp(28px, 3.5vw, 56px) var(--shop-margin) !important;
    }
}

.feature-grid__media {
    position: relative;
    overflow: hidden;
    background: var(--bg-muted);
    /* Mobile : ratio fixe pour éviter une image démesurée. */
    aspect-ratio: 4 / 5;
    height: 100%;
    min-height: 0;
}
/* L'image remplit toujours sa colonne (clé pour matcher la hauteur des produits) */
.feature-grid__media-link,
.feature-grid__media > img,
.feature-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Big eyebrow overlay sur l'image (style mega-menu) */
.feature-grid__media-link { position: relative; display: block; width: 100%; height: 100%; }
/* Gradient désactivé : l'overlay est désormais un petit eyebrow discret
   (style NewAmsterdam Surf / éditorial), pas un titre géant. */
.feature-grid__media::before { content: none; }
.feature-grid__overlay {
    position: absolute;
    top: clamp(14px, 1.6vw, 22px);
    left: clamp(16px, 1.8vw, 26px);
    right: auto;
    z-index: 2;
    color: #fff;
    /* Format éditorial — taille réduite, intermédiaire */
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    pointer-events: none;
    max-width: 80%;
}
@media (min-width: 900px) {
    /* Desktop : la colonne média s'étire à la hauteur EXACTE de la grille produits.
       On neutralise l'aspect-ratio et on remplit en absolu pour ne jamais dépasser. */
    .feature-grid__media {
        aspect-ratio: auto;
        height: 100%;
        align-self: stretch;
    }
    .feature-grid__media-link {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .feature-grid__media-link .feature-grid__img,
    .feature-grid__media > .feature-grid__img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }
}
.feature-grid__media-link { display: block; width: 100%; height: 100%; }
.feature-grid__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Pas d'animation au hover sur les images feature-grid (voulu : photos statiques). */
.feature-grid__media:hover .feature-grid__img,
.feature-grid__media-link:hover .feature-grid__img { transform: none; }

/* Products column: always 2 columns × 2 rows when 4 products, cards keep their natural 4/5 aspect. */
/* Specificity must match `.woocommerce ul.products` to win over WC core defaults. */
.woocommerce ul.products.feature-grid__products,
ul.products.feature-grid__products,
.feature-grid__products {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto;
    gap: 0 !important;            /* aucun écart entre les produits */
    align-content: start;
    width: 100%;
    float: none !important;
}
.woocommerce ul.products.feature-grid__products li.product,
ul.products.feature-grid__products li.product,
.feature-grid__products .product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    clear: none !important;
}
/* Kill the WC clearfix pseudo-elements that would steal a grid cell */
.woocommerce ul.products.feature-grid__products::before,
.woocommerce ul.products.feature-grid__products::after,
ul.products.feature-grid__products::before,
ul.products.feature-grid__products::after,
.feature-grid__products::before,
.feature-grid__products::after { content: none !important; display: none !important; }

/* =========================================================
   PAGE GENERIC HEADER (La Marque, Retours, etc.)
   ========================================================= */
.page-banner {
    width: 100%;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center;
}
.page-hero {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(48px, 8vh, 96px) var(--shop-margin) clamp(32px, 4vw, 56px);
    text-align: center;
}
.page-hero__inner { display: flex; flex-direction: column; gap: clamp(.8rem, 1.6vw, 1.4rem); align-items: center; }
.page-hero__eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    color: var(--color-muted);
}
.page-hero__title {
    letter-spacing: -.015em;
    line-height: 1.02;
    /* 5,5rem (88px) etait une taille d'affichage : disproportionnee pour des
       pages de contenu. Aligne sur les titres de section du site. */
    font-size: var(--fs-title-page);
    margin: 0;
}
.page-hero__intro {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.6;
    max-width: 60ch;
    color: var(--color-text);
    margin: 0 auto;
}
.page-hero__intro p { margin: 0 0 1em; }
.page-hero__intro p:last-child { margin-bottom: 0; }

/* Spacing rhythm between flexible blocks on inner pages.
   Marge inter-blocs supprimée : chaque bloc gère son propre padding interne,
   et les blocs visuels (padding 0) se collent. */
.page-blocks > .block + .block { margin-top: 0; }
.page-blocks .block { padding-block: clamp(40px, 6vw, 88px); }
/* Blocs visuels collés : aucune marge entre eux et leurs voisins,
   aucun padding vertical (les images se touchent). */
.page-blocks > :is(.block--story, .block--image-banner, .block--image-pair, .block--manifesto.is-dark) + .block,
.page-blocks > .block + :is(.block--story, .block--image-banner, .block--image-pair, .block--manifesto.is-dark) {
    margin-top: 0 !important;
}
.page-blocks > :is(.block--story, .block--image-banner, .block--image-pair) {
    padding-block: 0 !important;
}

/* Image+Text block tightening for premium feel */
.block--image-text .container {
    display: grid;
    gap: clamp(20px, 4vw, 64px);
    align-items: center;
}
@media (min-width: 900px) {
    .block--image-text .container { grid-template-columns: 1fr 1fr; }
    .block--image-text.is-reverse .container > :first-child { order: 2; }
}
.block--image-text img { width: 100%; height: auto; display: block; object-fit: contain; }
.block--image-text .image-text__text { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; }

/* Container fallback for blocks that don't set their own */
.page-blocks .container { max-width: 1300px; margin: 0 auto; padding: 0 var(--shop-margin); }

/* Masque le contenu WordPress « historique » quand un en-tête de page est rendu
   au-dessus (il ferait doublon). Exception : les contenus marqués --keep, qui
   portent le panier, la commande, le compte client ou de vrais blocs Gutenberg.
   Sans cette exception, tout le parcours d'achat était invisible. */
.page-hero + .page-content:not(.page-content--keep) { display: none; }

/* "Vous aimerez aussi" — neutralize WC list defaults inside slides */
.woocommerce ul.products.kal-related__inner-list,
ul.products.kal-related__inner-list,
.kal-related__inner-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}
.woocommerce ul.products.kal-related__inner-list::before,
.woocommerce ul.products.kal-related__inner-list::after,
ul.products.kal-related__inner-list::before,
ul.products.kal-related__inner-list::after,
.kal-related__inner-list::before,
.kal-related__inner-list::after { content: none !important; display: none !important; }
.woocommerce ul.products.kal-related__inner-list > li.product,
ul.products.kal-related__inner-list > li.product,
.kal-related__inner-list > li.product {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}
/* Le card dans le slide doit aussi remplir le slide */
.kal-carousel--products .kal-carousel__slide .kal-card { display: block; width: 100%; }
.kal-carousel--products .kal-carousel__slide .kal-card__media { width: 100%; }

/* =========================================================
   KAL-ANNOUNCEMENT — bandeau au-dessus de la navbar
   ========================================================= */
.kal-announcement {
    position: relative;
    z-index: 90;                      /* sous le header (100) : le header la recouvre au scroll */
    background: var(--color-paper);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    font-size: 13px;
    text-transform: none;             /* sentence case, plus élégant */
    letter-spacing: 0.01em;
    font-weight: 400;
    line-height: 1;
    font-feature-settings: "kern" 1, "liga" 1;
}
.kal-announcement__inner {
    padding: 12px var(--margin);
    max-width: 1700px;
    margin: 0 auto;
    color: var(--color-text);
    opacity: .88;
}
/* Hors accueil : le bandeau défile normalement et sort de l'écran, exactement
   comme sur l'accueil où il se rétracte au scroll. Il était auparavant sticky
   top:0, donc empilé en permanence sous la navbar : c'est ce qui faisait
   paraître l'en-tête plus haut sur la boutique que sur l'accueil. */
body:not(.has-hero) .kal-announcement { position: relative; }
/* Sur l'accueil (hero) : l'annonce est FIXÉE en haut + le header fixed juste
   en dessous -> la navbar reste collée (plus de bande de hero au-dessus au scroll). */
body.has-hero .kal-announcement {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99;
    transition: transform .4s var(--ease-expo);
    will-change: transform;
}
body.has-hero:has(.kal-announcement) .site-header { top: 39px; }
/* Au scroll (header plus en .is-top) : le bandeau se cache et la navbar remonte à 0. */
body.has-hero:has(.site-header:not(.is-top)) .kal-announcement { transform: translateY(-100%); }
body.has-hero:has(.site-header:not(.is-top)) .site-header { top: 0; }
@media (max-width: 640px) {
    .kal-announcement { font-size: 12px; }
    .kal-announcement__inner { padding: 10px 14px; }
    body.has-hero:has(.kal-announcement) .site-header { top: 35px; }
}

/* =========================================================
   KAL-MEGAMENU — sous-menu Boutique
   ========================================================= */
.kal-megamenu {
    position: fixed;
    top: var(--megamenu-top, 64px); /* sera ajusté par JS selon hauteur navbar (+ bandeau) */
    left: 0; right: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 250ms var(--ease-expo),
                transform 350ms var(--ease-expo),
                visibility 250ms;
    pointer-events: none;
}
.kal-megamenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.kal-megamenu__inner {
    max-width: none;        /* edge-to-edge — pas de container limité */
    margin: 0;
    padding: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 64px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 72px);
    align-items: stretch;
}
/* Photos prennent ~60% du viewport sur grand desktop */
.kal-megamenu.has-features .kal-megamenu__inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
}
/* Tablet landscape */
@media (max-width: 1280px) {
    .kal-megamenu.has-features .kal-megamenu__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: clamp(28px, 3vw, 44px);
    }
}
/* Tablet portrait : photos passent en dessous */
@media (max-width: 1080px) {
    .kal-megamenu.has-features .kal-megamenu__inner {
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vw, 48px);
    }
}
.kal-megamenu__cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(24px, 3vw, 48px);
    align-content: start;
}
.kal-megamenu__col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* Visuels éditoriaux à droite du mega-menu */
.kal-megamenu__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.4vw, 20px);
    align-items: start;
    align-self: start;
}
/* Remonte les visuels (desktop, quand ils sont a droite des colonnes) : ils
   absorbent une partie du padding haut du panneau au lieu de laisser un
   bandeau vide au-dessus des photos. Sous 1080px ils passent sous les
   colonnes — la marge negative les ferait chevaucher, on ne l'applique pas. */
@media (min-width: 1081px) {
    .kal-megamenu__features { margin-top: calc(-1 * clamp(16px, 1.8vw, 32px)); }
}
.kal-megamenu__features .kal-megamenu__feature { height: 100%; }
.kal-megamenu__feature {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    max-height: clamp(260px, 38vh, 420px);
    overflow: hidden;
    background: var(--color-bg-alt);
    text-decoration: none !important;
}
.kal-megamenu__feature::after { display: none !important; }
.kal-megamenu__feature-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms var(--ease-expo), opacity var(--dur-base) var(--ease-quart);
    opacity: .94;
}
.kal-megamenu__feature:hover .kal-megamenu__feature-img,
.kal-megamenu__feature:focus-visible .kal-megamenu__feature-img {
    transform: scale(1.04);
    opacity: 1;
}
.kal-megamenu__feature::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.7) 100%);
    pointer-events: none;
    z-index: 1;
}
.kal-megamenu__feature-title {
    position: absolute;
    left: clamp(22px, 2.2vw, 38px);
    bottom: clamp(22px, 2.2vw, 38px);
    right: clamp(22px, 2.2vw, 38px);
    color: #fff !important;
    z-index: 2;
    font-size: clamp(28px, 3vw, 56px);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.05;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.kal-megamenu__title {
    font-size: clamp(14px, 1.05vw, 17px);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--color-ink) !important;
    text-decoration: none;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--color-border);
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.kal-megamenu__title:hover { opacity: .7; text-decoration: none; }
.kal-megamenu__title::after { display: none !important; }
.kal-megamenu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.kal-megamenu__list a {
    font-size: clamp(14px, 1vw, 16px);
    color: var(--color-muted) !important;
    text-decoration: none;
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 400;
    transition: color var(--dur-fast) var(--ease-quart), padding-left var(--dur-fast) var(--ease-quart);
    display: inline-block;
    line-height: 1.45;
}
.kal-megamenu__list a:hover {
    color: var(--color-ink) !important;
    text-decoration: none;
    padding-left: .35rem;
}
.kal-megamenu__list a::after { display: none !important; }

/* Mobile : pas de mega-menu (drawer mobile gère la nav) */
@media (max-width: 900px) {
    .kal-megamenu { display: none !important; }
}

/* Mobile drawer — sous-cats Boutique en accordéon (sur fond encre) */
.mobile-drawer__shop {
    margin-top: clamp(2rem, 7vw, 2.8rem);
    padding-top: clamp(1.6rem, 6vw, 2.2rem);
    border-top: 1px solid var(--color-border);
}
.mobile-drawer__heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    color: var(--color-muted);
    margin: 0 0 .4rem;
}
.mobile-drawer__cat { border-bottom: 1px solid var(--color-border); }
.mobile-drawer__cat:last-child { border-bottom: 0; }
.mobile-drawer__cat > summary {
    list-style: none;
    cursor: pointer;
    padding: .95rem 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
    color: var(--color-ink);
    position: relative;
}
.mobile-drawer__cat > summary::-webkit-details-marker { display: none; }
.mobile-drawer__cat > summary::after {
    content: "+";
    position: absolute; right: .25rem; top: 50%;
    transform: translateY(-50%);
    font-size: 18px; font-weight: 300; line-height: 1;
    transition: transform var(--dur-fast) var(--ease-quart);
}
.mobile-drawer__cat[open] > summary::after { content: "–"; }
.mobile-drawer__cat ul {
    list-style: none; padding: 0 0 1rem .1rem; margin: 0;
    display: flex; flex-direction: column; gap: .7rem;
}
.mobile-drawer__cat ul a {
    font-size: 14px; color: var(--color-muted);
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.mobile-drawer__cat ul a:hover { color: var(--color-ink); }
.mobile-drawer__cat ul a::after { display: none !important; }

/* Vous aimerez aussi — marge sup entre image et nom/prix */
/* Même calibrage que la grille boutique (la marge ne s'appliquait pas non plus
   ici tant que .kal-card__info restait inline). */
.kal-related__inner-list .kal-card__info,
.kal-carousel--products .kal-card__info {
    margin-top: clamp(1.4rem, 1.8vw, 2rem);
}

/* =========================================================
   BLOC MANIFESTE — grosse citation centrée
   ========================================================= */
.block--manifesto {
    padding: clamp(70px, 12vw, 180px) 0;
    background: var(--color-paper);
}
.block--manifesto.is-dark {
    background: var(--color-ink);
    color: var(--color-paper);
}
.manifesto__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--shop-margin);
    text-align: center;
}
.manifesto__eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 600;
    color: var(--color-muted);
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.block--manifesto.is-dark .manifesto__eyebrow,
.block--manifesto.is-dark .manifesto__author { color: rgba(255,253,244,.6); }
.manifesto__text {
    /* -15% : clamp(1.6,3.4vw,3.4) -> clamp(1.36,2.89vw,2.89) */
    font-size: clamp(1.36rem, 2.89vw, 2.89rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}
.manifesto__author {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-muted);
    font-weight: 600;
}

/* =========================================================
   BLOC CHIFFRES-CLÉS / ENGAGEMENTS — premium, sobre (cream)
   ========================================================= */
.block--stats {
    padding: clamp(80px, 12vw, 170px) 0;
    background: var(--color-paper);
}
.block--stats .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--shop-margin); }

/* Titre eyebrow centré, SANS trait dessous */
.stats__title {
    text-align: center;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .34em;
    font-weight: 700;
    margin: 0 0 clamp(4rem, 8vw, 7rem);
    color: var(--color-muted);
}

.stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(56px, 6vw, 80px);
}
/* Sur iPad (700–1023px), quatre colonnes ramenaient chacune a environ 160px
   de large — la meme largeur que sur un telephone, pour une valeur affichee
   plus grande. On garde deux colonnes jusqu'a 1024px, ou la place existe
   reellement. */
@media (min-width: 700px) {
    .stats__grid[data-cols="2"],
    .stats__grid[data-cols="3"],
    .stats__grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .stats__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .stats__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.stats__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 0;
    /* 40px de chaque cote mangeaient un quart de la colonne sur grand
       ecran, ce qui forcait les valeurs longues a passer sur deux lignes. */
    padding: 0 clamp(8px, 1.2vw, 20px);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease-quart), transform .9s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 110ms);
}
[data-stats].is-revealed .stats__item { opacity: 1; transform: none; }

/* Pas de trait vertical entre les colonnes (retiré). */

/* Petit point d'accent teal qui s'ouvre au reveal (fallback sans icône) */
.stats__mark {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: scale(0);
    transition: transform .6s var(--ease-expo) calc(var(--i,0) * 110ms + .15s);
    margin: 0 0 clamp(1.4rem, 2.4vw, 2rem);
}
[data-stats].is-revealed .stats__mark { transform: scale(1); }

/* Icône en tête (style réassurance) */
.stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    margin: 0 0 clamp(1.2rem, 2.2vw, 1.8rem);
    transition: transform .5s var(--ease-expo);
}
.stats__icon svg { width: clamp(28px, 2.4vw, 34px); height: clamp(28px, 2.4vw, 34px); display: block; }
.stats__icon { transition: none; }

/* Valeur en ink — Archivo 400 */
.stats__value {
    /* Echelle fluide reelle : la precedente valait 2.1vw, coefficient trop
       faible pour depasser son minimum avant 1100px. */
    font-size: clamp(1.35rem, 1.31rem + .76vw, 1.9rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--color-ink);
    /* `nowrap` interdisait tout retour a la ligne : une valeur de deux mots
       comme « Petites series » ne pouvait que deborder de sa colonne, quelle
       que soit la largeur d'ecran. Les valeurs courtes tiennent de toute
       facon sur une ligne a cette taille ; seules les plus longues passent
       sur deux, reparties par `balance`. */
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
    margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
/* Label muted uppercase */
.stats__label {
    font-size: clamp(11px, .9vw, 12.5px);
    color: var(--color-muted);
    line-height: 1.7;
    max-width: 18ch;
    margin: 0 auto;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .stats__item { opacity: 1 !important; transform: none !important; }
    .stats__mark { transform: scale(1) !important; }
}
@media (max-width: 699px) {
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 8vw, 56px) clamp(10px, 3vw, 20px); }
    .stats__grid[data-cols] > .stats__item + .stats__item { border-left: 0; }
    /* L'ancienne regle poussait la valeur a 35px au moment precis ou la
       colonne tombait a 160px de large. C'etait la cause du debordement. */
    .stats__item { padding: 0 6px; }
    .stats__label { max-width: 16ch; letter-spacing: .1em; }
}

/* =========================================================
   PAGE CONTACT — premium
   ========================================================= */
/* Section Contact : tout en noir, typo blanche, plein écran (premium) */
.kal-contact {
    background: var(--color-paper);
    color: var(--color-ink);
    margin: 0;
    padding: clamp(5rem, 9vw, 9rem) var(--shop-margin) clamp(5rem, 9vw, 9rem);
}
.kal-contact__hero { text-align: center; max-width: 640px; margin: 0 auto clamp(3rem, 6vw, 5.5rem); }
.kal-contact__eyebrow {
    font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em;
    font-weight: 600; color: var(--color-muted); margin: 0 0 1.2rem;
}
.kal-contact__title {
    /* 5rem (80px mesures) : demesure pour un simple titre de page. Aligne sur
       l'echelle des titres de section du site. */
    font-size: var(--fs-title-page);
    letter-spacing: -.02em; line-height: 1.02; margin: 0 0 1rem;
    color: var(--color-ink);
}
.kal-contact__intro { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.6; color: var(--color-muted); }
.kal-contact__intro p { margin: 0; }

.kal-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 860px) {
    .kal-contact__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}

/* Cartes coordonnées */
.kal-contact__aside { display: flex; flex-direction: column; gap: 0; }
.kal-contact__card {
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--color-border);
}
.kal-contact__card:first-child { padding-top: 0; }
.kal-contact__card-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
    font-weight: 600; color: var(--color-muted);
}
.kal-contact__card-value { font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--color-ink); line-height: 1.4; }
.kal-contact__card-link { color: var(--color-ink); transition: opacity var(--dur-fast) var(--ease-quart); }
.kal-contact__card-link:hover { opacity: .6; }
.kal-contact__socials { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.kal-contact__socials a { color: var(--color-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

/* Carte : carree, alignee sur le haut du formulaire, en couleur (le vert des
   terres et le bleu de l'Atlantique situent la marque mieux qu'un aplat gris).
   Une seule definition : trois couches successives s'ecrasaient ici. */
.kal-contact__map {
    margin-top: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.kal-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== Formulaire CF7 : panneau translucide sur la section noire ===== */
.kal-contact__form {
    background: var(--color-bg-alt);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 860px) {
    .kal-contact__grid { align-items: start; }
    .kal-contact__form { align-self: start; }
}
.kal-contact__form .wpcf7-form p { margin: 0 0 1rem; }
.kal-contact__form label {
    display: block;
    font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    font-weight: 600; color: var(--color-muted); margin-bottom: .5rem;
}
.kal-contact__form input[type="text"],
.kal-contact__form input[type="email"],
.kal-contact__form input[type="tel"],
.kal-contact__form textarea,
.kal-contact__form select {
    width: 100%;
    /* Champs clairement visibles : boîte translucide + bord net sur fond noir */
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    /* Champs resserres : 56px de haut chacun, c'etait massif. */
    padding: .62rem .85rem;
    font: inherit;
    font-size: .95rem;
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease-quart), background var(--dur-fast) var(--ease-quart);
    -webkit-appearance: none; appearance: none;
}
.kal-contact__form input:hover,
.kal-contact__form textarea:hover { border-color: var(--color-muted); }
.kal-contact__form input:focus,
.kal-contact__form textarea:focus {
    outline: 0;
    border-color: var(--color-ink);
    background: var(--color-paper);
}
.kal-contact__form textarea { min-height: 140px; resize: vertical; }
.kal-contact__form input::placeholder,
.kal-contact__form textarea::placeholder { color: var(--color-muted); }
/* autofill : garde texte clair sur fond noir */
.kal-contact__form input:-webkit-autofill,
.kal-contact__form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--color-paper) inset;
    caret-color: var(--color-ink);
}

.kal-contact__form .wpcf7-submit {
    width: 100%;
    background: var(--color-ink);
    color: var(--color-paper);
    border: 1px solid var(--color-ink);
    padding: 1.15rem 2rem;
    font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
    border-radius: 0; cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-quart);
    margin-top: .8rem;
}
.kal-contact__form .wpcf7-submit:hover { opacity: .85; }
.kal-contact__form .wpcf7-spinner { margin: 1rem auto 0; display: block; }
.kal-contact__form .wpcf7-response-output {
    border-radius: 0 !important;
    border-width: 1px !important;
    border-color: var(--color-muted) !important;
    color: var(--color-ink);
    margin: 1.5rem 0 0 !important;
    padding: 1rem !important;
    font-size: 14px;
}

/* =========================================================
   BLOC RÉCIT — texte long + image portrait fixe (sticky)
   ========================================================= */
/* Story sans padding vertical : les images se collent aux blocs voisins
   (bannière, autre récit). Le texte conserve son espacement via .story__text. */
.block--story { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Bannière image entourée de blocs story : aucun padding vertical (collée). */
.block--story + .block--image-banner,
.block--image-banner + .block--story,
.block--image-banner:has(+ .block--story),
.block--story:has(+ .block--image-banner) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.story__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 64px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--shop-margin);
    align-items: start;
}
@media (min-width: 900px) {
    .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); }
    .block--story.is-reverse .story__media { order: 1; }
    .block--story.is-reverse .story__text  { order: 2; }
}

/* Texte long */
/* La colonne etait bridee a 52 caracteres alors que sa cellule en fait environ
   76 : un vide net apparaissait a droite du texte. On laisse la grille decider
   de la largeur — elle est deja plafonnee par les 1400px de .story__grid. */
.story__text { padding: clamp(1rem, 4vw, 4rem) 0; max-width: none; }
.story__eyebrow {
    font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em;
    font-weight: 600; color: var(--color-muted); margin: 0 0 1.4rem;
}
.story__title {
    font-size: var(--fs-title-page); letter-spacing: -.02em; line-height: 1.02;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); color: var(--color-ink);
}
.story__body { font-size: clamp(1rem, 1.15vw, 1.18rem); line-height: 1.7; color: var(--color-text); }
.story__body p { margin: 0 0 1.5em; }
.story__body p:last-child { margin-bottom: 0; }
.story__body strong { font-weight: 700; color: var(--color-ink); }

/* Image portrait FIXE pendant le scroll du texte */
.story__media { position: relative; }
.story__media-inner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--bg-muted);
}
@media (min-width: 900px) {
    /* L'image remplit TOUTE la hauteur du bloc (= hauteur du texte) :
       plus de vide sous l'image -> les blocs se collent verticalement.
       On utilise flex (et non height:100% qui ne résout pas sur un grid auto). */
    .story__grid { align-items: stretch; }
    /* Texte centré verticalement dans sa colonne (cream équilibré, pas tout en bas) */
    .story__text { display: flex; flex-direction: column; justify-content: center; }
    .story__media { display: flex; flex-direction: column; }
    .story__media-inner {
        position: relative;
        top: auto;
        aspect-ratio: auto;
        flex: 1 1 auto;
        height: auto;
        min-height: 420px;
        max-height: none;
    }
    /* L'image occupe exactement la MOITIÉ du viewport, ancrée sur son bord
       extérieur. Deux récits qui se suivent alternent les côtés : leurs images
       se rejoignent donc pile au centre et les coins se touchent. Avant, chaque
       image s'arrêtait à la largeur de sa colonne (945px pour un viewport de
       2000px) et il restait 110px de vide entre les deux coins. */
    /* Image à droite : sa colonne démarre au centre + la moitié de la gouttière
       de la grille. On décale donc de cette demi-gouttière vers la gauche pour
       que le bord gauche tombe pile au centre — « margin-left: auto » ne peut
       pas le faire ici, l'espace libre du conteneur étant négatif. */
    .block--story:not(.is-reverse) .story__media-inner {
        width: 50vw;
        margin-left: calc(-0.5 * clamp(48px, 6vw, 110px));
    }
    .block--story.is-reverse .story__media-inner {
        width: 50vw;
        margin-right: auto;
        margin-left: calc(-1 * (var(--shop-margin) + max(0px, (100vw - 1400px) / 2)));
    }
    /* L'image est sortie du flux (absolue) : sa hauteur naturelle ne pousse plus
       le bloc. C'est donc le TEXTE qui fixe la hauteur, et l'image la remplit en
       cover. Résultat : zéro crème au-dessus/dessous du texte, photos collées. */
    .block--story .story__media-inner { min-height: 460px; }
    .block--story .story__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}
.story__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    /* Photo a son echelle naturelle, sans animation. Elle etait affichee en
       permanence a 106% et revenait a 100% au survol, en 1,4 s : un dezoom
       lent au passage de la souris, et un cadrage rogne le reste du temps. */
}

/* =============================================================
   Réassurance — Retour · Paiement · Livraison
   Style éditorial premium (Asphalte-like) en bas d'accueil.
   ============================================================= */
/* Bloc inversé : fond encre, typo + icônes en blanc. */
.block--reassurance {
    padding: clamp(6rem, 12vw, 11rem) 0;
    /* Fond papier : echange avec le bloc colonnes, qui passe en encre. */
    background: var(--color-paper);
    color: var(--color-ink);
    border-top: 0;
}
.block--reassurance .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--margin);
}
.reassurance-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4.5rem);
    grid-template-columns: repeat(3, 1fr);
}
.reassurance-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.reassurance-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 799px) {
    .reassurance-grid,
    .reassurance-grid[data-cols="2"],
    .reassurance-grid[data-cols="3"],
    .reassurance-grid[data-cols="4"] {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 2.6rem);
    }
}

.reassurance-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    max-width: 36ch;
    margin: 0 auto;
}
.reassurance-item__icon {
    color: var(--color-ink);
    margin-bottom: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: none;   /* pas d'animation au survol */
}
.reassurance-item__icon svg {
    width: clamp(28px, 2.4vw, 36px);
    height: clamp(28px, 2.4vw, 36px);
    display: block;
}

/* Titre — "Retour facile" : gras + italique fin, taille éditoriale */
.reassurance-item__title {
    font-family: var(--font-sans);
    font-size: var(--fs-title-block);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.01em;
    color: var(--color-ink);
}
.reassurance-item__title-strong {
    font-style: normal;
}
.reassurance-item__title-em {
    font-weight: 400;
    color: var(--color-ink);
    opacity: .92;
    letter-spacing: 0;
    font-style: normal;   /* plus d'italique : le titre se lit d'un seul trait */
}

.reassurance-item__text {
    margin: .1rem 0 0;
    color: var(--color-muted);
    font-size: clamp(13.5px, .95vw, 14.5px);
    line-height: 1.6;
    max-width: 30ch;
}

/* =============================================================
   2 images côte à côte — diptyque éditorial edge-to-edge
   ============================================================= */
.block--image-pair { padding: 0; margin: 0; }
.image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
}
.image-pair--gap-thin   .image-pair { gap: 2px; }
.image-pair--gap-normal .image-pair { gap: clamp(8px, 1vw, 16px); }

.image-pair__cell {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bg-muted);
    aspect-ratio: 4 / 5;
    text-decoration: none;
}
.image-pair__cell::after { display: none !important; } /* kill global link sweep */
.image-pair__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .image-pair { grid-template-columns: 1fr; }
    .image-pair--gap-thin   .image-pair,
    .image-pair--gap-normal .image-pair { gap: 2px; }
    .image-pair__cell { aspect-ratio: 4 / 5; }
}

/* =============================================================
   Bande d'images statique (style NewAmsterdam "VISIT OUR FLAGSHIP")
   ============================================================= */
.block--image-strip { padding: 0; margin: 0; }
.image-strip__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: clamp(22px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px);
    /* Format éditorial taille moyenne — alignée avec les eyebrows feature_grid */
    font-size: clamp(16px, 1.3vw, 20px);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--color-ink);
}
.image-strip__eyebrow,
.image-strip__caption { margin: 0; }
.image-strip__caption { color: var(--color-muted); font-weight: 500; }
.image-strip__link {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.image-strip__link::after { display: none !important; }
.image-strip__link:hover { opacity: .65; }

.image-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    width: 100%;
}
.image-strip__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.image-strip__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.image-strip__grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.image-strip__grid[data-count="6"] { grid-template-columns: repeat(6, 1fr); }
.image-strip--gap-none   .image-strip__grid { gap: 0; }
.image-strip--gap-thin   .image-strip__grid { gap: 2px; }
.image-strip--gap-normal .image-strip__grid { gap: clamp(8px, 1vw, 16px); }

.image-strip__cell {
    position: relative;
    overflow: hidden;
    background: var(--bg-muted);
    /* Plus portrait, proche de la référence NewAmsterdam */
    aspect-ratio: 3 / 4;
}
.image-strip__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    /* Mobile : on garde la bande horizontale scrollable plutôt que d'empiler */
    .image-strip__grid,
    .image-strip__grid[data-count="2"],
    .image-strip__grid[data-count="3"],
    .image-strip__grid[data-count="5"],
    .image-strip__grid[data-count="6"] {
        grid-template-columns: repeat(var(--cols, 4), 70vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .image-strip__grid::-webkit-scrollbar { display: none; }
    .image-strip__cell { scroll-snap-align: start; }
}

/* =============================================================
   Barre catégories : clic parent => 2e ligne (sous-catégories)
   ============================================================= */
.kal-cats__item--toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    padding: 4px 0;
}
.kal-cats__item--toggle .kal-cats__chev {
    transition: transform .3s var(--ease-quart);
}
.kal-cats__item--toggle[aria-expanded="true"] .kal-cats__chev {
    transform: rotate(180deg);
}

/* La 2e ligne (sous-catégories) : révélation douce quand .is-open */
.kal-cats--sub {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s var(--ease-expo), opacity .3s var(--ease-quart);
}
.kal-cats--sub.is-open {
    max-height: 200px;
    opacity: 1;
}
/* La sous-ligne défile avec le contenu (voir .kal-cats--sub plus haut) : seule
   la barre de catégories parente reste collée sous la navbar. */

/* =============================================================
   image_pair / image_strip — parallax léger (images TOUJOURS visibles)
   Pas de clip-path masquant : on ne risque jamais une image blanche.
   ============================================================= */
.kal-immersive { overflow: hidden; }
.kal-immersive img {
    /* Parallax + micro-zoom subtil, état par défaut entièrement visible. */
    transform:
        translate3d(0, calc((0.5 - var(--kal-imm-p, 0.5)) * 5%), 0)
        scale(1.04);
    transform-origin: center center;
    transition: transform .6s var(--ease-expo);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .kal-immersive img { transform: none !important; }
}

/* =============================================================
   Galerie immersive — défilement HORIZONTAL piloté au scroll
   La section (haute) est "pinnée" ; la piste se translate en X.
   Hauteur de section calculée en JS (data-ghscroll). Fallback CSS ci-dessous.
   ============================================================= */
.block--gallery-hscroll {
    position: relative;
    background: var(--color-ink);
    /* Fallback si JS off : hauteur = course approximative */
    min-height: 100vh;
}
.ghscroll__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-ink);
    display: flex;
    align-items: center;
}
.ghscroll__track {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 28px);
    height: 78vh;
    padding: 0 clamp(20px, 6vw, 9vw);
    will-change: transform;
    /* translateX appliqué en JS via --x (px). Lissé par lerp. */
    transform: translate3d(calc(var(--x, 0) * -1px), 0, 0);
}

.ghframe {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    width: clamp(280px, 62vw, 1080px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
    box-shadow: 0 40px 80px -50px rgba(0,0,0,.8);
}
/* Variantes de largeur pour rythmer la piste (portrait / paysage alternés) */
.ghframe:nth-child(3n+2) { aspect-ratio: 4 / 5; width: clamp(240px, 42vw, 720px); }
.ghframe:nth-child(3n+3) { aspect-ratio: 3 / 2; }

.ghframe__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ghframe__img {
    position: absolute;
    top: 0; left: 50%;
    width: 118%;            /* surdimension pour le parallax horizontal */
    height: 100%;
    object-fit: cover;
    /* --fp : -1 (frame à droite) -> 1 (frame à gauche), parallax horizontal doux */
    transform: translate3d(calc(-50% + var(--fp, 0) * 5%), 0, 0) scale(1.02);
    will-change: transform;
}
.ghframe__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}

.ghframe__counter {
    position: absolute;
    top: clamp(16px, 1.6vw, 28px);
    right: clamp(16px, 1.6vw, 28px);
    color: #fff;
    z-index: 2;
    display: inline-flex; align-items: baseline; gap: 6px;
    font-feature-settings: "tnum" 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ghframe__counter-num { font-size: clamp(22px, 2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.ghframe__counter-tot { font-size: clamp(12px, 1vw, 16px); opacity: .8; }

.ghframe__overlay {
    position: absolute;
    left: clamp(18px, 2vw, 34px);
    right: clamp(18px, 2vw, 34px);
    bottom: clamp(18px, 2.4vw, 36px);
    color: #fff;
    z-index: 2;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.ghframe__eyebrow {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .26em;
    font-weight: 600;
    opacity: .9;
}
.ghframe__caption {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 2.4rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.02em;
    max-width: 20ch;
}

/* Barre de progression en bas */
.ghscroll__progress {
    position: absolute;
    left: clamp(20px, 6vw, 9vw);
    right: clamp(20px, 6vw, 9vw);
    bottom: clamp(24px, 4vh, 54px);
    height: 2px;
    background: rgba(255,255,255,.18);
    z-index: 3;
}
.ghscroll__bar {
    display: block;
    height: 100%;
    width: calc(var(--prog, 0) * 100%);
    background: var(--color-paper);
}
.ghscroll__hint {
    position: absolute;
    bottom: clamp(34px, 5vh, 70px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3em;
    z-index: 3;
    opacity: calc(1 - var(--prog, 0) * 3); /* disparaît dès qu'on commence */
    pointer-events: none;
}

/* Mobile : on garde l'horizontal mais frames plus larges */
@media (max-width: 768px) {
    .ghscroll__track { height: 66vh; gap: 10px; }
    .ghframe { width: 80vw; aspect-ratio: 4/5; }
    .ghframe:nth-child(3n+2) { width: 72vw; }
    .ghframe:nth-child(3n+3) { width: 84vw; aspect-ratio: 4/5; }
}

@media (prefers-reduced-motion: reduce) {
    /* Pas de pin : fallback en bande scrollable horizontale native */
    .block--gallery-hscroll { min-height: 0; height: auto !important; }
    .ghscroll__pin { position: relative; height: auto; overflow-x: auto; }
    .ghscroll__track { transform: none !important; height: 70vh; }
    .ghframe__img { transform: translateX(-50%) !important; }
    .ghscroll__hint { display: none; }
}

/* Produits liés : scroll horizontal manuel (natif) */
.kal-carousel--products.is-manual .kal-carousel__viewport,
.kal-carousel--products .kal-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: default;
}
.kal-carousel--products .kal-carousel__viewport::-webkit-scrollbar { display: none; }
.kal-carousel--products .kal-carousel__track { animation: none !important; }
.kal-carousel--products .kal-carousel__slide,
.kal-carousel--products .kal-related__inner-list { scroll-snap-align: start; }

/* PDP en-tête : titre + prix à gauche, couleurs à droite (réf Asphalte) */
.kal-pdp__headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}
.kal-pdp__headcol { flex: 1 1 auto; min-width: 0; }
.kal-pdp__colors {
    flex: 0 0 auto;
    text-align: right;
    margin: .2rem 0 0;
}
.kal-pdp__colors .kal-variations__label {
    display: block;
    margin-bottom: .6rem;
    font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    font-weight: 600; color: var(--color-muted);
}
.kal-pdp__colors .kal-swatches--color { justify-content: flex-end; gap: 10px; }

/* Page Contact : fond noir derrière la zone de compensation du header fixe */
body.kal-contact-page,
body.kal-contact-page .site-main { background: var(--color-paper); }
html:has(body.kal-contact-page) { background: var(--color-paper); }
body.kal-contact-page .site-footer { margin-top: 0; }

/* =============================================================
   Accueil : titre + prix EN OVERLAY dans la photo produit
   UNIQUEMENT sur les grilles feature_grid ("Nouvelle collection").
   Le bloc featured_products (ex. "Découvrez la collection") garde
   son titre/prix SOUS l'image (sinon hauteur effondrée -> footer dessus).
   Pas la boutique (markup .kal-card distinct).
   ============================================================= */
/* Aucun écart entre les produits */
.woocommerce ul.products.feature-grid__products,
ul.products.feature-grid__products,
.feature-grid__products { gap: 0 !important; }
/* Carte = lien .kal-card : on positionne titre/prix par-dessus l'image */
.feature-grid__products .kal-card { position: relative; }
.feature-grid__products .kal-card__media::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    z-index: 1; pointer-events: none;
}
.feature-grid__products .kal-card__info {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 22px);
    z-index: 3;
}
.feature-grid__products .kal-card__title,
.feature-grid__products .kal-card__price,
.feature-grid__products .kal-card__price .price,
.feature-grid__products .kal-card__price ins,
.feature-grid__products .kal-card__price del {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* Accueil feature_grid : pas de pastille tailles (le titre/prix est déjà en overlay) */
.feature-grid__products .kal-card__sizes-overlay { display: none !important; }

/* =============================================================
   Icônes importées depuis le back-office (champ « Icône personnalisée »)
   Elles remplacent l'icône Lucide et doivent occuper exactement le même
   encombrement pour ne pas déséquilibrer les grilles.
   ============================================================= */
.kal-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.reassurance-item__icon .kal-icon-img { width: clamp(28px, 2.4vw, 36px); height: clamp(28px, 2.4vw, 36px); }
.stats__icon .kal-icon-img          { width: 30px; height: 30px; }
.column__icon .kal-icon-img         { width: 100%; height: 100%; }
/* Sur fond encre (bloc réassurance inversé), une icône sombre importée
   deviendrait invisible : on la force en blanc comme les icônes natives. */
/* L'icone importee en back-office etait forcee en blanc pour le fond
   sombre. Sur fond papier, on la force en noir pour garder le meme
   trait, quelle que soit la couleur du fichier envoye. */
.block--reassurance .kal-icon-img { filter: brightness(0); }

/* =============================================================
   BANDEAU PROMO — variante « Promotion » + version cliquable
   ============================================================= */
.kal-announcement--accent {
    background: var(--color-ink);
    color: var(--color-inverse);
    border-bottom-color: rgba(255, 253, 244, .14);
}
.kal-announcement--accent .kal-announcement__inner { color: var(--color-inverse); opacity: 1; font-weight: 500; }
.kal-announcement__inner--link {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    text-decoration: none;
    transition: gap var(--dur-fast) var(--ease-quart);
}
.kal-announcement__inner--link:hover { gap: .85rem; text-decoration: none; }
.kal-announcement__inner--link::after { display: none !important; }
.kal-announcement__arrow { transition: transform var(--dur-fast) var(--ease-quart); }

/* =============================================================
   PANIER — progression vers la livraison offerte
   ============================================================= */
.kal-freeship {
    padding: .9rem var(--shop-margin) 1rem;
    border-top: 1px solid var(--color-border);
}
.kal-freeship__text {
    margin: 0 0 .55rem;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
}
.kal-freeship__text .woocommerce-Price-amount { color: var(--color-ink); }
.kal-freeship__bar {
    height: 3px;
    background: var(--color-border);
    overflow: hidden;
}
.kal-freeship__fill {
    display: block;
    height: 100%;
    background: var(--color-ink);
    transition: width .5s var(--ease-expo);
}
.kal-freeship.is-reached .kal-freeship__text { color: var(--color-ink); }

/* =============================================================
   FOOTER — supprime la bande creme quand la page finit en sombre
   ============================================================= */
/* .site-footer porte « margin-top: var(--section-y) » (128px). Lorsque la page
   se termine par un bloc pleine largeur a fond sombre (galerie, banniere,
   manifeste sombre, recit), cette marge laisse voir le fond creme du body :
   une bande blanche s'intercale entre deux zones sombres. */
.site-main:has(.page-blocks > :last-child:is(
    .block--gallery-hscroll,
    .block--image-banner,
    .block--image-pair,
    .block--story,
    .block--manifesto.is-dark,
    .block--text.is-dark
)) + .site-footer {
    margin-top: 0;
}


/* WooCommerce applique un margin-top de 32px a form.cart, ce qui creusait
   l'ecart entre le prix et le selecteur de taille (70px mesures). Selecteur
   aligne sur celui de WooCommerce pour reprendre la main. */
.woocommerce div.product.kal-pdp form.cart,
.kal-pdp form.cart { margin-top: 0; }

/* =============================================================
   FEATURE GRID — tient dans un écran sur ordinateur
   ============================================================= */
/* Le bloc mesurait 1333px de haut pour un viewport de 900px : il fallait
   scroller pour voir la fin de l'image et la 2e ligne de produits. On le cale
   sur la hauteur d'écran disponible (moins la navbar) : l'image de gauche est
   visible en entier et les deux lignes de produits tiennent d'un coup d'œil. */
@media (min-width: 900px) {
    /* Les produits gardent le portrait 3/4 d'une fiche produit normale : c'est
       la hauteur des deux lignes de produits qui commande celle du bloc, et
       l'image de gauche s'etire pour s'y aligner (object-fit: cover). On ne
       cale plus le bloc sur la hauteur d'ecran — ce calage divisait la hauteur
       en deux et ecrasait chaque carte en carre. */
    .feature-grid { align-items: stretch; }
    .feature-grid__media {
        height: 100%;
        overflow: hidden;
    }
    .feature-grid__media-link,
    .feature-grid__media .feature-grid__img {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
    }
    .feature-grid__products > li { min-height: 0; }
}

/* =============================================================
   GUIDE DES TAILLES — tags de navigation + sections par produit
   ============================================================= */
.kal-sizeguide { padding: 0 0 clamp(4rem, 8vw, 8rem); }
.kal-sizeguide__head {
    max-width: 720px;
    padding: clamp(2.5rem, 6vw, 5rem) var(--shop-margin) clamp(1.5rem, 3vw, 2.5rem);
}
.kal-sizeguide__title {
    font-size: var(--fs-title-page); letter-spacing: -.02em; line-height: 1.02; margin: 0 0 1rem; color: var(--color-ink);
}
.kal-sizeguide__intro {
    margin: 0; color: var(--color-muted);
    font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.7; max-width: 60ch;
}

/* --- Tags : collants sous la navbar, comme la barre catégories --- */
.kal-sizeguide__nav {
    position: sticky;
    top: var(--header-h, 76px);
    z-index: 80;
    background: var(--color-paper);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: .9rem var(--shop-margin);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}
.kal-sizeguide__navgroup { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kal-sizeguide__navlabel {
    font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
    font-weight: 600; color: var(--color-muted); flex: 0 0 auto;
}
.kal-sizeguide__tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kal-sizeguide__tag {
    display: inline-block;
    padding: .4rem .85rem;
    border: 1px solid var(--color-border);
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    color: var(--color-ink); text-decoration: none; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-quart), color var(--dur-fast) var(--ease-quart), border-color var(--dur-fast) var(--ease-quart);
}
.kal-sizeguide__tag::after { display: none !important; }
.kal-sizeguide__tag:hover,
.kal-sizeguide__tag.is-active {
    background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink);
}

/* --- Sections --- */
.kal-sizeguide__section {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--shop-margin);
    border-bottom: 1px solid var(--color-border);
    /* Décale l'ancre pour que le titre ne passe pas sous la navbar + les tags. */
    scroll-margin-top: calc(var(--header-h, 76px) + 90px);
}
.kal-sizeguide__section:last-child { border-bottom: 0; }
.kal-sizeguide__eyebrow {
    margin: 0 0 .5rem; font-size: var(--fs-eyebrow); text-transform: uppercase;
    letter-spacing: .18em; font-weight: 600; color: var(--color-muted);
}
.kal-sizeguide__h2 {
    margin: 0; font-size: var(--fs-title-col); letter-spacing: -.02em; color: var(--color-ink);
}
.kal-sizeguide__fit {
    margin: .4rem 0 0; font-size: 12px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--color-muted); font-weight: 600;
}
.kal-sizeguide__text {
    margin: 1.2rem 0 0; max-width: 62ch;
    font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7; color: var(--color-text);
}

/* --- Tableau --- */
.kal-sizeguide__tablewrap { margin-top: clamp(1.5rem, 3vw, 2.2rem); overflow-x: auto; }
.kal-sizeguide__table {
    width: 100%; max-width: 760px; border-collapse: collapse;
    font-size: clamp(13px, 1vw, 15px);
}
.kal-sizeguide__table th,
.kal-sizeguide__table td {
    text-align: left; padding: .85rem 1rem;
    border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.kal-sizeguide__table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
    font-weight: 600; color: var(--color-muted); border-bottom-color: var(--color-ink);
}
.kal-sizeguide__table tbody th { font-weight: 700; color: var(--color-ink); }
.kal-sizeguide__table tbody tr:hover td,
.kal-sizeguide__table tbody tr:hover th { background: var(--color-paper); }

@media (max-width: 700px) {
    .kal-sizeguide__nav { gap: .8rem; padding: .75rem var(--shop-margin); }
    .kal-sizeguide__navgroup { flex-direction: column; align-items: flex-start; gap: .4rem; width: 100%; }
}

/* =============================================================
   ZOOM PRODUIT — visionneuse plein écran
   ============================================================= */
.kal-zoom {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(22, 17, 13, .97);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-expo), visibility .35s;
}
.kal-zoom.is-open { opacity: 1; visibility: visible; }

.kal-zoom__stage {
    width: min(94vw, 1500px);
    height: min(90vh, 1100px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kal-zoom__img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform .4s var(--ease-expo);
    /* Le pinch natif reste disponible sur mobile. */
    touch-action: pinch-zoom;
    user-select: none; -webkit-user-drag: none;
}
.kal-zoom.is-zoomed .kal-zoom__img { cursor: grab; }
.kal-zoom.is-dragging .kal-zoom__img { cursor: grabbing; }

/* Aucune animation sur l'image : une animation CSS (meme limitee a l'opacite)
   prend la main sur le style inline et figeait le transform pose en JS, donc le
   zoom. Le fondu d'ouverture est deja porte par le conteneur .kal-zoom. */

/* --- Commandes --- */
.kal-zoom__close,
.kal-zoom__nav {
    position: absolute; z-index: 2;
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-inverse);
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.kal-zoom__close { top: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px); width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.kal-zoom__nav {
    top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; font-size: 22px;
    border: 1px solid rgba(255, 253, 244, .22);
}
.kal-zoom__nav--prev { left: clamp(8px, 2vw, 32px); }
.kal-zoom__nav--next { right: clamp(8px, 2vw, 32px); }
.kal-zoom__close:hover,
.kal-zoom__nav:hover { opacity: .6; }
.kal-zoom__nav[hidden] { display: none; }

.kal-zoom__counter,
.kal-zoom__hint {
    position: absolute; left: 0; right: 0; text-align: center;
    color: rgba(255, 253, 244, .55);
    font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
    font-weight: 600; margin: 0; pointer-events: none;
}
.kal-zoom__counter { top: clamp(16px, 2.5vw, 32px); }
.kal-zoom__hint    { bottom: clamp(16px, 2.5vw, 32px); letter-spacing: .12em; font-weight: 400; }
.kal-zoom__counter[hidden] { display: none; }
/* Une fois zoomé, l'aide n'a plus lieu d'être. */
.kal-zoom.is-zoomed .kal-zoom__hint { opacity: 0; }


@media (max-width: 700px) {
    .kal-zoom__nav { width: 44px; height: 44px; }
    .kal-zoom__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kal-zoom, .kal-zoom__img { transition: none; }
}

/* =============================================================
   PAGES DOCUMENT (CGV, confidentialité, mentions) — mise en page
   ============================================================= */
/* Quand la page ne contient QU'UN bloc texte, c'est un document : on centre le
   bloc de lecture dans la page au lieu de le laisser collé à gauche du
   conteneur, tout en gardant une mesure lisible. Les pages à plusieurs blocs
   (accueil, La Marque…) ne sont pas concernées. */
.page-blocks:has(> .block--text:only-child) .block--text__body {
    max-width: 78ch;
    margin-inline: auto;
}
.page-blocks:has(> .block--text:only-child) .block--text__body :is(p, ul, ol) {
    max-width: none;
}

/* =============================================================
   GUIDE DES TAILLES — tags plus lisibles
   ============================================================= */
/* Les tags se confondaient avec le fond : bordure trop pâle et libellé de
   groupe presque invisible. On contraste les deux. */
.kal-sizeguide__navlabel {
    color: var(--color-ink);
    opacity: .55;
}
.kal-sizeguide__tag {
    border-color: var(--color-ink);
    background: transparent;
}
.kal-sizeguide__tag:hover,
.kal-sizeguide__tag:focus-visible,
.kal-sizeguide__tag.is-active {
    background: var(--color-ink);
    color: var(--color-paper);
}

/* Mobile : les tags tenaient sur plusieurs lignes et mangeaient l'écran.
   On les met sur UNE ligne défilante horizontalement. */
@media (max-width: 700px) {
    .kal-sizeguide__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 1rem;
        padding: .7rem var(--shop-margin);
    }
    .kal-sizeguide__nav::-webkit-scrollbar { display: none; }
    .kal-sizeguide__navgroup {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        width: auto;
        flex: 0 0 auto;
    }
    .kal-sizeguide__tags { flex-wrap: nowrap; }
    .kal-sizeguide__tag { white-space: nowrap; font-size: 11px; padding: .35rem .7rem; }
}

/* =============================================================
   PANIER — pleine largeur sur mobile
   ============================================================= */
@media (max-width: 700px) {
    .kal-drawer { width: 100%; max-width: 100%; }
}

/* =============================================================
   GALERIE PDP MOBILE — défilement horizontal
   ============================================================= */
/* Sur mobile les photos s'empilaient verticalement : il fallait scroller
   longuement avant d'atteindre le prix et le bouton. On les met sur une
   rangée qui se fait glisser latéralement, l'info produit remonte d'autant. */
@media (max-width: 900px) {
    .kal-gallery.kal-gallery--stacked {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 6px;
        /* Débordement pleine largeur, bord à bord */
        /* Pas de 100vw : cette unite INCLUT la barre de defilement, ce qui
           cree un debordement horizontal des qu'elle est visible. Les marges
           negatives suffisent a atteindre les bords du conteneur. */
        width: auto;
        margin-left: calc(-1 * var(--shop-margin));
        margin-right: calc(-1 * var(--shop-margin));
        padding: 0 0 .5rem;
    }
    .kal-gallery.kal-gallery--stacked::-webkit-scrollbar { display: none; }
    .kal-gallery--stacked .kal-gallery__main {
        flex: 0 0 100%;
        scroll-snap-align: start;
        max-height: 70vh;
    }
    .kal-gallery--stacked .kal-gallery__main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* =============================================================
   RÉCIT — images pleine largeur sur mobile
   ============================================================= */
/* En dessous de 900px la grille passe en colonne : l'image restait dans la
   gouttière du conteneur (358px mesurés pour 413 de viewport). On la fait
   déborder bord à bord, comme sur les autres blocs visuels du site. */
@media (max-width: 899px) {
    .block--story .story__media-inner {
        /* idem : marges negatives plutot que 100vw (qui inclut la scrollbar) */
        width: auto;
        max-width: none;
        margin-left: calc(-1 * var(--margin));
        margin-right: calc(-1 * var(--margin));
    }
    /* Tablette : la colonne texte gardait une mesure de 52ch et laissait un
       grand vide a droite une fois la grille passee en une colonne. */
    .story__text { max-width: none; }
    .story__body { max-width: 62ch; }
}

/* =============================================================
   FICHE PRODUIT — quantité et bouton toujours visibles
   ============================================================= */
/* WooCommerce masque .single_variation_wrap puis le fait apparaitre en
   slideDown() des qu'une taille est choisie : le selecteur de quantite et le
   bouton « surgissaient ». Une declaration !important en feuille de style
   l'emporte sur le style inline pose par jQuery, ce qui neutralise a la fois
   le masquage et l'animation. */
.kal-pdp .single_variation_wrap { display: block !important; }
.kal-pdp .woocommerce-variation-add-to-cart { display: flex !important; }
/* Zone d'info de variation : vide dans notre mise en page, elle ne doit pas
   reserver d'espace ni s'animer. */
.kal-pdp .woocommerce-variation.single_variation:empty { display: none !important; }

/* =============================================================
   PAGES DOCUMENT — hiérarchie des titres de section
   ============================================================= */
/* Les sections etaient en h2 a la meme taille que le titre de page (49px
   mesures) : aucune hierarchie lisible sur un document long. */
.page-blocks:has(> .block--text:only-child) .block--text__body h2 {
    font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    margin-top: 2.4em;
}
.page-blocks:has(> .block--text:only-child) .block--text__body h3 {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    margin-top: 2em;
}
.page-blocks:has(> .block--text:only-child) .block--text__body :is(h2, h3):first-child {
    margin-top: 0;
}

/* Le theme masque « .kal-pdp form.cart .kal-qty » (pour eviter un doublon sur
   les produits simples) ; jQuery le reaffiche en inline une fois la taille
   choisie, d'ou l'apparition. On force celui du selecteur de variation a
   rester visible des le chargement. */
.kal-pdp .woocommerce-variation-add-to-cart .kal-qty,
.kal-pdp .woocommerce-variation-add-to-cart .quantity {
    display: inline-flex !important;
}

/* =============================================================
   AVIS — tablette et mobile
   ============================================================= */
/* En une colonne, la citation restait bridée à 34 caractères : elle occupait
   moins de la moitié de la largeur disponible (787px mesurés sur iPad), d'où
   un grand vide à droite. On libère la mesure et on aère la séparation. */
@media (max-width: 900px) {
    .testimonial__text { max-width: none; }
    .testimonials-grid > .testimonial + .testimonial {
        margin-top: clamp(2.2rem, 5vw, 3rem);
        padding-top: clamp(2.2rem, 5vw, 3rem);
    }
    .testimonial__head { margin-bottom: .6rem; }
}

/* =============================================================
   CONTACT — formulaire resserré et carte
   ============================================================= */
/* Le formulaire faisait 866px de haut pour 725 de large : trop massif face à
   la colonne de coordonnées. On borne sa largeur et on limite la zone de
   message, qui montait seule à 279px. */
.kal-contact__form { max-width: 560px; }
.kal-contact__form textarea {
    min-height: 140px;
    max-height: 220px;
    resize: vertical;
}
.kal-contact__form label {
    font-size: 11px;
    letter-spacing: .14em;
}
/* Bouton d'envoi : à la largeur de son texte, pas pleine largeur. */
.kal-contact__form input[type="submit"],
.kal-contact__form .wpcf7-submit {
    width: auto;
    padding: .85rem 2.2rem;
}

@media (max-width: 900px) {
    .kal-contact__map { aspect-ratio: 4 / 3; }
    .kal-contact__form { max-width: none; }
}

/* =============================================================
   PRODUITS EN AVANT — slider manuel sur tablette
   ============================================================= */
/* Sur iPad, la grille laissait un produit orphelin sur une 2e ligne (4 pieces
   en 3 colonnes). Un defilement lateral avec accroche est plus lisible et
   plus naturel au doigt. */
@media (min-width: 701px) and (max-width: 1024px) {
    /* Specificite (0,3,1) : « ul.products.kal-grid { display:grid } » vaut
       (0,2,1) et l'emportait sur un simple « .block--featured-products .kal-grid ». */
    .block--featured-products ul.products.kal-grid,
    .woocommerce ul.products.kal-grid.kal-grid--featured {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: clamp(12px, 2vw, 20px);
        padding-bottom: .75rem;
    }
    .block--featured-products ul.products.kal-grid::-webkit-scrollbar { display: none; }
    .block--featured-products ul.products.kal-grid > li {
        flex: 0 0 clamp(240px, 38%, 320px);
        scroll-snap-align: start;
        min-width: 0;
    }
    /* Repere visuel : on laisse deviner qu'il y a une suite. */
    .block--featured-products ul.products.kal-grid > li:last-child { margin-right: var(--shop-margin); }
}

/* =============================================================
   GUIDE DES TAILLES — corrections de la barre collante
   ============================================================= */
/* 1. Quand la navbar se masque au defilement (auto-hide mobile), la barre
   restait calee a la hauteur d'une navbar absente : un vide apparaissait
   au-dessus et le contenu defilait dedans. La barre boutique avait deja sa
   regle dediee, pas celle-ci. */
body.nav-hidden .kal-sizeguide__nav { top: 0; }

/* 2. Sans ombre ni separation, le contenu qui passe dessous donnait
   l'impression d'un tableau coupe en deux. */
.kal-sizeguide__nav {
    box-shadow: 0 6px 18px -12px rgba(22, 17, 13, .45);
    transition: top .45s var(--ease-expo);
}

/* 3. Mobile : navbar 75px + tags 55px = 130px figes sur 844 de haut.
   On resserre la barre pour rendre de la place au contenu. */
@media (max-width: 700px) {
    .kal-sizeguide__nav { padding: .55rem var(--shop-margin); }
    .kal-sizeguide__tag { padding: .3rem .6rem; }
    .kal-sizeguide__navlabel { font-size: 10px; letter-spacing: .14em; }
    /* L'ancre doit tenir compte de la navbar ET de la barre de tags. */
    .kal-sizeguide__section { scroll-margin-top: calc(var(--header-h, 76px) + 62px); }
}

/* =============================================================
   CONTACT — carte carrée + coordonnées, puis accroche + formulaire
   ============================================================= */
.kal-contact__locate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.kal-contact__aside { display: flex; flex-direction: column; gap: 0; }
/* Alignee sur le haut du formulaire, et non centree verticalement. */
.kal-contact__pitch { align-self: start; }
.kal-contact__pitch-title {
    font-size: var(--fs-title-col);
    line-height: 1.2;
    margin: 0 0 .7rem;
}
.kal-contact__pitch-text {
    /* --color-muted est une teinte prévue pour fond clair. Posée sur le fond
       encre de la page contact, elle tombait à 3,5:1 de contraste, sous le
       minimum de 4,5:1 requis pour du texte courant. La hiérarchie avec le
       titre reste portée par la taille et la graisse, pas par la couleur. */
    color: var(--color-ink);
    font-size: var(--fs-body);
    max-width: 34ch;
    margin: 0;
}

@media (max-width: 860px) {
    .kal-contact__locate { grid-template-columns: 1fr; align-items: start; }
    .kal-contact__map { aspect-ratio: 4 / 3; }
    .kal-contact__pitch { align-self: start; }
    .kal-contact__pitch-text { max-width: none; }
}

/* =============================================================
   TUNNEL DE CONVERSION — panier + page de commande
   Les blocs WooCommerce arrivent avec leur habillage par defaut
   (Inter, coins arrondis, bleu WordPress). Sur un site a la
   direction artistique aussi marquee, ce decrochage au moment de
   saisir sa carte bancaire fait douter de la securite du paiement.
   ============================================================= */

/* ---------- Panier : une seule action dominante ---------- */
.kal-drawer__actions { display: block; }
.kal-drawer__checkout {
    display: flex !important;
    align-items: center; justify-content: center; gap: .6rem;
}
.kal-drawer__checkout-total { opacity: .7; font-weight: 400; }
.kal-drawer__checkout-total .woocommerce-Price-amount { color: inherit; }
/* « Voir le panier » redevient un lien discret : il ne doit plus
   concurrencer visuellement le passage au paiement. */
.kal-drawer__cartlink {
    display: block; text-align: center;
    margin-top: .85rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-wide); text-transform: uppercase;
    color: var(--color-muted); text-decoration: underline;
    text-underline-offset: 3px;
}
.kal-drawer__cartlink:hover { color: var(--color-ink); }
.kal-drawer__reassure {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin: 1rem 0 0;
    font-size: var(--fs-small);
    color: var(--color-muted);
}
.kal-drawer__reassure svg { flex: 0 0 auto; }

/* ---------- En-tete et pied de page en mode tunnel ---------- */
.kal-funnel .site-header__inner { justify-content: space-between; }
/* En-tete du tunnel : trois colonnes, comme le reste du site — menu a
   gauche, logo centre, retour au panier a droite. En simple « espace
   entre », le libelle se retrouvait colle au logo et passait sur deux
   lignes des que l'ecran se resserrait. */
.kal-funnel .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(.5rem, 2vw, 1.5rem);
}
.kal-funnel .header-col--left { display: contents; }
.kal-funnel .site-logo { grid-column: 2; justify-self: center; }
.kal-funnel .header-col--right { grid-column: 3; display: flex; justify-content: flex-end; }

.kal-funnel__back {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    text-decoration: none;
    /* Le lien ne doit jamais se couper : c'est la seule sortie de la page. */
    white-space: nowrap;
    /* `inline-block` et non `inline-flex` : en flex, « Retour au » et « panier »
       devenaient deux elements distincts, et l'espace qui les separe etait
       supprime — le lien affichait « RETOUR AUPANIER ». */
    display: inline-block;
    opacity: .8;
    transition: opacity var(--dur-fast);
}
.kal-funnel__back::before { content: "\2190"; margin-right: .45rem; }
.kal-funnel__back:hover,
.kal-funnel__back:focus-visible { opacity: 1; }

/* Sous 620px, « Retour au » disparait : il reste « ← panier », qui dit
   la meme chose et tient sur une ligne a cote du logo. */
@media (max-width: 620px) {
    .kal-funnel__back-long { display: none; }
}
.site-footer--funnel { padding-bottom: 0; background: transparent; }
.site-footer--funnel .site-footer__bottom { border-top: 1px solid var(--color-border); }

/* ---------- Blocs WooCommerce : typographie et couleurs de la marque ---------- */
.kal-funnel .wc-block-checkout,
.kal-funnel .wp-block-woocommerce-checkout,
.kal-funnel .wc-block-components-form,
.kal-funnel .wc-block-components-text-input input,
.kal-funnel .wc-block-components-select select,
.kal-funnel .wc-block-components-button {
    font-family: var(--font-sans);
}
.kal-funnel .wc-block-components-title,
.kal-funnel .wc-block-components-checkout-step__title {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-title);
    letter-spacing: var(--track-tight);
    color: var(--color-ink);
}
/* Champs : trait fin et angles vifs, comme le reste du site. */
.kal-funnel .wc-block-components-text-input input,
.kal-funnel .wc-block-components-select .wc-blocks-components-select__container,
.kal-funnel .wc-block-components-textarea {
    border-radius: 0;
    border: 1px solid var(--color-border);
    background: var(--color-paper);
}
.kal-funnel .wc-block-components-text-input.is-active input:focus,
.kal-funnel .wc-block-components-text-input input:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: none;
}
/* Bouton de paiement : identique au bouton « Ajouter au panier » de la fiche. */
.kal-funnel .wc-block-components-checkout-place-order-button {
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: clamp(12px, .9vw, 14px);
    padding: 1.25rem 2rem;
}
.kal-funnel .wc-block-components-checkout-place-order-button:hover { opacity: .85; }
/* Options de livraison : le choix doit etre lisible d'un coup d'oeil. */
.kal-funnel .wc-block-components-radio-control__option { border-radius: 0; }
.kal-funnel .wc-block-components-radio-control-accordion-option,
.kal-funnel .wc-block-components-shipping-rates-control__package { border-radius: 0; }
.kal-funnel .wc-block-components-totals-item__value { font-weight: 600; }

/* ---------- Reassurance sous le recapitulatif ---------- */
.kal-funnel__trust {
    max-width: 1200px;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    padding: 1.4rem var(--shop-margin) 0;
    border-top: 1px solid var(--color-border);
}
.kal-funnel__trust ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: .8rem clamp(1.5rem, 4vw, 3rem);
    justify-content: center;
}
.kal-funnel__trust li {
    display: flex; align-items: center; gap: .5rem;
    font-size: var(--fs-small);
    color: var(--color-muted);
}
.kal-funnel__trust svg { flex: 0 0 auto; color: var(--color-ink); opacity: .55; }

@media (max-width: 700px) {
    .kal-funnel__trust ul { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   BOUTIQUE — titre de page (H1)
   La boutique et les categories sortaient sans le moindre titre :
   ni H1 pour Google, ni reperage pour le visiteur qui arrive
   directement sur « t-shirt homme » depuis un resultat de recherche.
   Volontairement discret, au niveau de la barre d'outils, pour ne pas
   repousser la grille produits sous la ligne de flottaison.
   ============================================================= */
.kal-shop__head {
    padding: clamp(1.4rem, 3vw, 2.2rem) var(--shop-margin) 0;
}
.kal-shop__title {
    margin: 0;
    font-size: var(--fs-title-block);
    letter-spacing: var(--track-tight);
    line-height: 1.15;
}
.kal-shop__desc {
    margin-top: .6rem;
    max-width: 68ch;
    color: var(--color-muted);
    font-size: var(--fs-body);
}
.kal-shop__desc p { margin: 0; }

/* ---------- Tunnel : titre de page a l'echelle ----------
   « VALIDATION DE LA COMMANDE » sortait en --fs-h1 (jusqu'a 88px) et
   repoussait le formulaire sous la ligne de flottaison. Au paiement, le
   titre n'a pas a dominer : c'est le formulaire qui compte. */
.kal-funnel .page-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.kal-funnel .page-hero__title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 0;
}
.kal-funnel .page-content { padding-top: clamp(1.5rem, 3vw, 2.5rem); max-width: none; }

/* =============================================================
   PAGE DE COMMANDE — mise en page desktop et mobile
   Fond blanc demande : la page de paiement se distingue du reste
   du site, ce qui aide aussi a signaler « zone securisee ».
   ============================================================= */
/* Le blanc du tunnel est celui de la marque (--color-paper, #fffdf4) et non
   un blanc pur : pose a cote du creme du reste du site, le #fff se voyait
   comme une rupture plutot que comme une zone distincte. */
body.kal-funnel,
body.kal-funnel .site-main,
body.kal-funnel .page-content,
body.kal-funnel .page-hero { background: var(--color-paper); }
body.kal-funnel .site-footer--funnel { background: var(--color-paper); }

/* Deux colonnes lisibles : formulaire large a gauche, recapitulatif
   compact a droite qui suit le defilement. */
.kal-funnel .wc-block-checkout__main { padding-right: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 1000px) {
    .kal-funnel .wc-block-components-sidebar-layout .wc-block-components-main { flex: 1 1 62%; }
    .kal-funnel .wc-block-components-sidebar-layout .wc-block-components-sidebar { flex: 0 0 clamp(320px, 34%, 420px); }
    .kal-funnel .wc-block-components-sidebar {
        position: sticky;
        top: calc(var(--header-h, 76px) + 1.5rem);
        align-self: flex-start;
    }
}

/* Encadre du recapitulatif */
.kal-funnel .wc-block-components-order-summary,
.kal-funnel .wc-block-components-totals-wrapper {
    border-color: var(--color-border);
}
.kal-funnel .wc-block-components-sidebar .wc-block-components-panel {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

/* --- Le recapitulatif ---
   La ligne article est passee en grille plutot qu'en flex. WooCommerce
   centre verticalement la vignette dans une cellule etiree a la hauteur du
   texte : l'image se retrouvait plus bas que le nom du produit, comme si
   elle appartenait a la ligne suivante. Une grille en trois colonnes fixe
   les trois blocs au meme niveau, une bonne fois. */
.kal-funnel .wc-block-components-order-summary-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}
.kal-funnel .wc-block-components-order-summary-item:last-child { border-bottom: 0; }

/* Vignette : carree, calee en haut, avec un filet qui la detache du fond. */
.kal-funnel .wc-block-components-order-summary-item__image {
    grid-column: 1;
    display: block;
    position: relative;
    width: 64px;
    /* Hauteur imposee : WooCommerce etirait ce conteneur a 128px et y centrait
       la vignette, qui se retrouvait 36px plus bas que le nom du produit — et
       qui etirait la ligne entiere a 176px. `auto` ne suffisait pas a
       l'annuler. */
    height: 64px;
    min-height: 0;
    padding: 0;
    flex: none;
    justify-content: flex-start;
    align-self: start;
}
.kal-funnel .wc-block-components-order-summary-item__image img {
    width: 64px;
    max-width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--color-border);
}
/* Pastille de quantite : posee sur le coin de la vignette. */
.kal-funnel .wc-block-components-order-summary-item__quantity {
    position: absolute;
    top: -8px;
    left: auto;
    right: -8px;
    background: var(--color-ink);
    color: var(--color-paper);
    border: 2px solid var(--color-paper);
    box-shadow: none;
}

.kal-funnel .wc-block-components-order-summary-item__description {
    grid-column: 2;
    align-self: start;
    padding-right: 0;
}
.kal-funnel .wc-block-components-product-name {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 .25rem;
    text-transform: none;
    letter-spacing: 0;
}
/* Prix unitaire : information secondaire. Il repete le total de ligne quand
   la quantite vaut 1, il ne doit donc jamais lui disputer l'attention. */
.kal-funnel .wc-block-components-order-summary-item__individual-prices,
.kal-funnel .wc-block-components-order-summary-item__individual-price {
    font-size: 12px;
    color: var(--color-muted);
}
.kal-funnel .wc-block-components-product-metadata {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: .15rem;
}
.kal-funnel .wc-block-components-product-metadata__description p { margin: 0; }

.kal-funnel .wc-block-components-order-summary-item__total-price {
    grid-column: 3;
    align-self: start;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

/* --- Mobile --- */
@media (max-width: 780px) {
    .kal-funnel .page-hero { padding-block: 1rem 0; }
    .kal-funnel .page-hero__title { font-size: 1.25rem; }
    .kal-funnel .wc-block-checkout__main,
    .kal-funnel .wc-block-components-sidebar-layout { padding-inline: 0; }
    .kal-funnel .wc-block-components-sidebar-layout > * { padding-inline: 1rem; }
    /* Champs plus hauts : la saisie au pouce sur un formulaire de paiement
       est le moment ou l'on perd le plus de commandes. */
    .kal-funnel .wc-block-components-text-input input,
    .kal-funnel .wc-block-components-select select {
        font-size: 16px;          /* < 16px provoque un zoom automatique sur iOS */
        padding-top: 1.1rem;
        padding-bottom: .55rem;
    }
    .kal-funnel .wc-block-components-checkout-place-order-button {
        padding: 1.15rem 1.5rem;
        font-size: 13px;
    }
    .kal-funnel .wc-block-components-order-summary-item__image,
    .kal-funnel .wc-block-components-order-summary-item__image img { flex-basis: 48px; width: 48px; max-width: 48px; }
    .kal-funnel__trust { padding-inline: 1rem; }
}

/* ---------- Pied de page : logo de marque sur mobile ----------
   Sur un ecran de 390px, le logo occupait presque toute la largeur et
   ecrasait le texte de marque juste en dessous. On le ramene a une
   taille de signature. Selecteur en (0,2,0) pour passer devant la regle
   WooCommerce `.woocommerce-page img { height: auto }` en (0,1,1). */
@media (max-width: 700px) {
    .site-footer .site-footer__logo-img {
        height: 30px;
        max-width: 150px;
    }
    .site-footer .site-footer__logo { margin-bottom: .9rem; }
}

/* =============================================================
   HARMONISATION DES TITRES
   Une seule graisse (Archivo 400), aucune majuscule, et une seule
   taille pour tout ce qui ouvre une section ou une page. Les
   niveaux qui subsistent correspondent a des situations de mise en
   page reellement differentes, pas a des blocs particuliers :
     - le hero occupe l'ecran entier ;
     - un intitule de carte vit dans une colonne etroite.
   Toute nouvelle section se raccroche au niveau « section ».
   ============================================================= */
.page-hero__title,
.story__title,
.kal-contact__title,
.kal-sizeguide__title,
.section-title,
.block--image-text .block__title,
.block--image-banner .block__title,
.block--cta .block__title,
.kal-pdp__title,
.kal-related__title,
.testimonials__title,
.kal-sizeguide__h2,
.kal-contact__pitch-title,
.woocommerce div.product .product_title,
.hero__title,
.kal-thankyou__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-title);
    text-transform: none;
    letter-spacing: -.02em;
}

/* Intitules de carte, de colonne, de reassurance. Meme graisse et meme
   casse ; seule la taille change, parce qu'ils vivent dans une colonne. */
.block--columns .column__title,
.reassurance-item__title,
.reassurance-item__title-strong,
.kal-shop__title,
.kal-thankyou__h2,
.kal-thankyou__step-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-title);
    text-transform: none;
    letter-spacing: -.01em;
}

/* Surtitres : meme graisse et meme interlettrage partout. */
.page-hero__eyebrow,
.story__eyebrow,
.kal-contact__eyebrow,
.manifesto__eyebrow,
.kal-sizeguide__eyebrow,
.testimonials__eyebrow,
.feature-grid__eyebrow,
.block--image-text .block__eyebrow,
.eyebrow,
.section-eyebrow {
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
}

/* =============================================================
   CONFIRMATION DE COMMANDE
   L'ecran par defaut se resume a une phrase et une liste de champs
   techniques. C'est pourtant le moment le plus charge d'attente du
   parcours : le client vient de payer et veut savoir quand il
   recevra son colis.
   ============================================================= */
.kal-thankyou {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) var(--shop-margin) clamp(4rem, 8vw, 7rem);
}
.kal-thankyou__eyebrow {
    display: block;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: .8rem;
}
.kal-thankyou__title {
    font-size: var(--fs-title-page);
    letter-spacing: -.02em;
    margin: 0 0 .8rem;
    text-wrap: balance;
}
.kal-thankyou__lede {
    font-size: var(--fs-lg);
    color: var(--color-muted);
    max-width: 54ch;
    margin: 0;
    line-height: 1.6;
}
.kal-thankyou__head--failed .kal-thankyou__title { color: #a5342a; }

/* Reperes de commande : numero, date, total, paiement */
.kal-thankyou__facts {
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: clamp(1.2rem, 2.5vw, 1.6rem) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.2rem clamp(1rem, 3vw, 2.5rem);
}
.kal-thankyou__facts li { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.kal-thankyou__fact-label {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--color-muted);
}
.kal-thankyou__fact-value { font-size: var(--fs-body); font-weight: 600; }
.kal-thankyou__fact-value .woocommerce-Price-amount { font-weight: 600; }

/* Les trois etapes */
.kal-thankyou__h2 {
    font-size: var(--fs-title-block);
    text-transform: none;
    letter-spacing: -.01em;
    margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem);
}
.kal-thankyou__next { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kal-thankyou__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 720px) {
    .kal-thankyou__steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
.kal-thankyou__steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "num titre" "num texte";
    gap: .2rem .8rem;
    align-content: start;
}
@media (min-width: 720px) {
    .kal-thankyou__steps li {
        grid-template-columns: 1fr;
        grid-template-areas: "num" "titre" "texte";
        gap: .5rem;
        padding-top: 1.1rem;
        border-top: 2px solid var(--color-ink);
    }
}
.kal-thankyou__step-num {
    grid-area: num;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    color: var(--color-muted);
}
.kal-thankyou__step-title { grid-area: titre; font-weight: 600; font-size: var(--fs-body); }
.kal-thankyou__step-text  { grid-area: texte; color: var(--color-muted); font-size: var(--fs-small); line-height: 1.6; }

/* Detail de commande : on reprend la sobriete du site sur les tableaux WC */
.kal-thankyou__details { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kal-thankyou__details table.woocommerce-table,
.kal-thankyou__details table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-body);
}
.kal-thankyou__details table th,
.kal-thankyou__details table td {
    border: 0;
    border-bottom: 1px solid var(--color-border);
    padding: .85rem 0;
    text-align: left;
}
.kal-thankyou__details table tfoot tr:last-child th,
.kal-thankyou__details table tfoot tr:last-child td {
    border-top: 2px solid var(--color-ink);
    border-bottom: 0;
    font-weight: 700;
}
.kal-thankyou__details h2,
.kal-thankyou__details h3 {
    font-size: var(--fs-title-block);
    text-transform: none;
    letter-spacing: -.01em;
    font-weight: 700;
    margin: clamp(2rem, 4vw, 2.8rem) 0 1rem;
}
.kal-thankyou__details .woocommerce-customer-details address {
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 1.1rem 1.2rem;
    font-style: normal;
    line-height: 1.7;
}

.kal-thankyou__foot {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2.2rem);
    border-top: 1px solid var(--color-border);
}
.kal-thankyou__reassure {
    color: var(--color-muted);
    font-size: var(--fs-small);
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 0 1.4rem;
}
.kal-thankyou__btn { display: inline-block !important; width: auto !important; }
.kal-thankyou__actions { margin-top: 1.6rem; }

/* Les deux blocs jumeaux sont sur fond clair : l'icone importee en
   back-office est forcee en noir, quelle que soit la couleur du fichier. */
.block--columns .kal-icon-img { filter: brightness(0); }

/* =============================================================
   BLOCS JUMEAUX (colonnes et reassurance)
   Ils se suivent sur la page d'accueil et doivent se lire comme une
   paire : meme taille d'icone, meme alignement, meme graisse.
   ============================================================= */

/* --- Icones : une seule taille, plus petite --- */
.block--columns .column__icon,
.reassurance-item__icon {
    width: var(--icon-card);
    height: var(--icon-card);
    justify-content: flex-start;
}
.block--columns .column__icon svg,
.reassurance-item__icon svg,
.block--columns .column__icon .kal-icon-img,
.reassurance-item__icon .kal-icon-img,
.block--columns .column__icon img {
    width: var(--icon-card);
    height: var(--icon-card);
    display: block;
}

/* --- Tout le contenu cale a gauche ---
   L'icone seule a gauche au-dessus d'un texte centre se lirait comme un
   defaut d'alignement : on cale donc la colonne entiere. */
.block--columns .column,
.reassurance-item {
    text-align: left;
    align-items: flex-start;
}
.block--columns .column__text,
.reassurance-item__text {
    margin-left: 0;
    margin-right: 0;
}

/* --- Titres en Archivo 400, comme partout ailleurs --- */
.block--columns .column__title,
.reassurance-item__title,
.reassurance-item__title-strong,
.reassurance-item__title-em {
    font-weight: var(--fw-title);
}

/* =============================================================
   « Ils nous font confiance » et « Questions frequentes »
   Le second etait aligne a gauche dans son conteneur etroit, le
   premier centre dans un conteneur large : leurs axes ne
   coincidaient pas. Les deux conteneurs etant centres, il suffit de
   centrer le texte pour que les deux titres partagent le meme axe.
   ============================================================= */
.block--faq .section-title,
.testimonials__title {
    text-align: center;
    font-size: var(--fs-title-section);
    font-weight: var(--fw-title);
    text-transform: none;
    letter-spacing: -.02em;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================
   BARRE DE NAVIGATION EN BLANC
   Fond papier, logo et liens en encre.

   Exception necessaire : sur l'accueil, la barre est transparente et
   posee sur la photo plein ecran du hero. En encre, elle y deviendrait
   illisible. Elle garde donc son contenu blanc tant qu'elle flotte sur
   le hero, et bascule en blanc/encre des qu'elle prend un fond — au
   defilement, au survol, ou a l'ouverture du menu.
   ============================================================= */
.site-header a,
.site-header .header-icon-btn { color: var(--color-ink); }
.site-header .cart-count {
    background: var(--color-ink);
    color: var(--color-paper);
}
/* Le fichier du logo est blanc : brightness(0) le rend noir. */
.site-header .site-logo__img { filter: brightness(0); }

/* --- Etat transparent au-dessus du hero : contenu blanc --- */
.has-hero .site-header.is-top {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--color-paper);
}
.has-hero .site-header.is-top a,
.has-hero .site-header.is-top .header-icon-btn { color: var(--color-paper); }
.has-hero .site-header.is-top .site-logo__img { filter: brightness(0) invert(1); }
.has-hero .site-header.is-top .cart-count {
    background: var(--color-paper);
    color: var(--color-ink);
}

/* --- Des que la barre reprend un fond : blanc et encre --- */
.has-hero .site-header.is-top:hover,
.has-hero .site-header.is-top:focus-within,
body:has(#kal-megamenu.is-open) .site-header.is-top {
    background: var(--color-paper);
    border-bottom-color: var(--color-border);
    color: var(--color-ink);
}
.has-hero .site-header.is-top:hover a,
.has-hero .site-header.is-top:hover .header-icon-btn,
.has-hero .site-header.is-top:focus-within a,
.has-hero .site-header.is-top:focus-within .header-icon-btn,
body:has(#kal-megamenu.is-open) .site-header.is-top a,
body:has(#kal-megamenu.is-open) .site-header.is-top .header-icon-btn { color: var(--color-ink); }
.has-hero .site-header.is-top:hover .site-logo__img,
.has-hero .site-header.is-top:focus-within .site-logo__img,
body:has(#kal-megamenu.is-open) .site-header.is-top .site-logo__img { filter: brightness(0); }
.has-hero .site-header.is-top:hover .cart-count,
.has-hero .site-header.is-top:focus-within .cart-count,
body:has(#kal-megamenu.is-open) .site-header.is-top .cart-count {
    /* Barre claire : la pastille reste sombre. Elle avait ete inversee par
       erreur, son selecteur contenant « megamenu ». */
    background: var(--color-ink);
    color: var(--color-paper);
}

/* --- Pied de page : credit accole a la mention de localite --- */
.site-footer__locale {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .9rem;
}
.site-footer__credit {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.site-footer__credit-logo { height: 14px; width: auto; }

/* --- FAQ : questions et reponses alignees a gauche ---
   Seul le titre de section reste centre, pour rester sur le meme axe que
   « Ils nous font confiance ». */
.block--faq .faq-item summary,
.block--faq .faq-item__answer {
    text-align: left;
}
.block--faq .faq-item summary { justify-content: flex-start; }
.block--faq .faq-item__answer > * { margin-inline: 0; }

/* =============================================================
   BANDEAU DEFILANT
   Le ruban contient deux fois la meme liste et se deplace de la
   moitie de sa largeur : la boucle se referme sans saut visible.
   ============================================================= */
/* Sans filets : le bandeau se fond dans la page au lieu d'y decouper une
   bande. Il lui faut donc sa propre respiration.

   Le selecteur porte « .block + .block » : la regle generale
   `.block + .block { padding-top: 0 }` a une specificite (0,2,0) qui battait
   celle du bloc (0,1,0). La marge haute valait donc zero et la basse 18 a
   26px — d'ou un bandeau ecrase et asymetrique.

   Valeur en `rem + vw` pour que l'espacement progresse aussi sur tablette :
   40px sur mobile, 50px sur iPad, 64px sur ordinateur. Soit environ la
   moitie d'une section, ce qu'est ce bandeau : une respiration, pas une
   section a part entiere. */
.block--marquee,
.block + .block.block--marquee {
    background: var(--color-paper);
    color: var(--color-ink);
    border: 0;
    /* Marges dissymetriques, et c'est voulu. Le bloc qui precede apporte deja
       sa propre marge basse (80 a 144px pour les avis), tandis que le bloc qui
       suit demarre a zero — la regle generale `.block + .block` annule son
       padding-top. Tout l'espace sous le bandeau vient donc de lui seul : on
       le charge davantage pour equilibrer ce que l'oeil percoit. */
    padding-top: clamp(3.5rem, 2.8rem + 2.9vw, 5.5rem);
    padding-bottom: clamp(6rem, 4.6rem + 4.6vw, 9rem);
    padding-inline: 0;
}
.block--marquee.is-dark {
    background: var(--color-ink);
    color: var(--color-inverse);
}
.kal-marquee {
    overflow: hidden;
    /* `clip` et non `hidden` : `hidden` sur un axe cree un conteneur de
       defilement qui casserait les elements collants de la page. */
    overflow-x: clip;
    width: 100%;
}
.kal-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: kal-marquee var(--marquee-duration, 30s) linear infinite;
}
.kal-marquee:hover .kal-marquee__track,
.kal-marquee:focus-within .kal-marquee__track { animation-play-state: paused; }
.kal-marquee__group {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}
.kal-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.6rem);
    padding-right: clamp(1.2rem, 3vw, 2.6rem);
    white-space: nowrap;
}
.kal-marquee__text {
    font-size: var(--fs-title-block);
    font-weight: var(--fw-title);
    letter-spacing: -.01em;
    line-height: 1.2;
}
.kal-marquee__sep {
    font-size: .6em;
    opacity: .45;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    /* Sans animation, le ruban reste lisible : on masque le doublon et on
       laisse la liste se replier sur plusieurs lignes. */
    .kal-marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
    .kal-marquee__group[aria-hidden="true"] { display: none; }
    .kal-marquee__group { flex-wrap: wrap; justify-content: center; }
}

/* --- Bloc chiffres-cles : mode defilant --- */
.block--stats.is-scrolling .stats__marquee {
    overflow: hidden;
    /* `clip` et non `hidden` : `hidden` sur un axe cree un conteneur de
       defilement qui casserait les elements collants de la page. */
    overflow-x: clip;
    width: 100%;
    /* Le masquage reste indispensable — sans lui la page defilerait
       horizontalement — mais la coupe nette se lisait comme un defaut. Un
       fondu aux deux extremites fait entrer et sortir les fiches en douceur. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.block--stats.is-scrolling .stats__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: kal-marquee var(--marquee-duration, 32s) linear infinite;
}
/* Le bandeau ne s'arrete jamais au survol : sur tactile, le navigateur
   declenche :hover au simple effleurement, donc le defilement se figeait
   aussi sur mobile et tablette. Aucun element focusable dans le bloc, la
   pause au focus n'avait pas d'utilite non plus. */
/* En mode defilant la grille devient une rangee : les colonnes fixes
   empecheraient le ruban de prendre sa largeur naturelle. */
.block--stats.is-scrolling .stats__grid,
.block--stats.is-scrolling .stats__grid[data-cols] {
    display: flex;
    grid-template-columns: none;
    flex: 0 0 auto;
    gap: 0;
}
.block--stats.is-scrolling .stats__item {
    flex: 0 0 auto;
    /* Fiches elargies : a 190-280px, un libelle comme « distance maximale
       parcourue par nos pieces » se cassait sur quatre lignes. */
    width: clamp(240px, 26vw, 340px);
    padding-inline: clamp(20px, 2.6vw, 36px);
    opacity: 1;
    transform: none;
}
/* Libelles : la mesure passe de 18 a 26 caracteres, ce qui divise par deux le
   nombre de retours a la ligne. */
.block--stats.is-scrolling .stats__label { max-width: 26ch; }
.block--stats.is-scrolling .stats__grid[data-cols] > .stats__item + .stats__item { border-left: 0; }

@media (prefers-reduced-motion: reduce) {
    .block--stats.is-scrolling .stats__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
    .block--stats.is-scrolling .stats__grid[aria-hidden="true"] { display: none; }
    .block--stats.is-scrolling .stats__grid { flex-wrap: wrap; justify-content: center; }
}

/* --- Guide des tailles : deux fiches par ligne sur grand ecran --- */
.kal-sizeguide__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1100px) {
    .kal-sizeguide__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(2rem, 4vw, 4rem);
    }
    /* Le filet horizontal d'origine separait des sections empilees. En deux
       colonnes il faut aussi un filet vertical entre les deux fiches. */
    .kal-sizeguide__grid > .kal-sizeguide__section:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }
    /* Les deux dernieres fiches n'ont pas de voisine en dessous. */
    .kal-sizeguide__grid > .kal-sizeguide__section:nth-last-child(-n+2) { border-bottom: 0; }
    .kal-sizeguide__grid > .kal-sizeguide__section:last-child:nth-child(odd) { border-right: 0; }
}

/* =============================================================
   PIED DE PAGE EN CLAIR
   Fond papier, textes et logo en encre, aligne sur la barre de
   navigation et sur le reste du site.
   ============================================================= */
.site-footer {
    background: var(--color-paper);
    color: var(--color-ink);
    border-top: 1px solid var(--color-border);
}
.site-footer a { color: var(--color-ink); }
.site-footer .site-footer__coltitle,
.site-footer h4 { color: var(--color-ink); }
.site-footer__brand-text,
.site-footer__copy,
.site-footer__locale,
.site-footer__legal a,
.site-footer__credit-text { color: var(--color-muted); }
/* Le fichier du logo est blanc : brightness(0) le rend noir. */
.site-footer .site-footer__logo-img { filter: brightness(0); }
/* Le credit est un lien : il heritait du « opacity: .85 » applique a tous les
   liens du pied de page, ce qui delavait le logo Webiteasy (l'opacite porte
   sur l'element entier, image comprise). On le remet a pleine intensite ;
   l'attenuation au survol reste geree par sa propre regle. */
.site-footer a.site-footer__credit-link { opacity: 1; }
.site-footer__bottom { border-top: 1px solid var(--color-border); }

/* =============================================================
   RECAPITULATIF DE COMMANDE — panneau
   Un recapitulatif se lit dans cet ordre : ce que j'achete, ce que
   ca coute, combien je paie. La hierarchie typographique suit.
   ============================================================= */
.kal-funnel .wc-block-components-sidebar .wc-block-components-panel,
.kal-funnel .wc-block-checkout__sidebar .wc-block-components-panel {
    background: transparent;
    border: 0;
}
.kal-funnel .wc-block-components-order-summary {
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-paper);
}
/* Titre du panneau : au meme rang que les titres de carte du site. */
.kal-funnel .wc-block-components-order-summary .wc-block-components-panel__button,
.kal-funnel .wc-block-components-checkout-order-summary__title {
    font-size: var(--fs-title-block);
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    padding: 18px 20px;
}
.kal-funnel .wc-block-components-order-summary .wc-block-components-panel__content {
    padding: 0 20px;
}

/* --- Lignes de totaux --- */
.kal-funnel .wc-block-components-totals-wrapper {
    border-top: 1px solid var(--color-border);
    padding: 14px 20px;
}
.kal-funnel .wc-block-components-totals-item {
    font-size: var(--fs-small);
    padding: 3px 0;
}
.kal-funnel .wc-block-components-totals-item__label { color: var(--color-muted); }
.kal-funnel .wc-block-components-totals-item__value { font-weight: 600; color: var(--color-ink); }
/* Livraison offerte : le seul montant qu'on souhaite voir remarque. */
.kal-funnel .wc-block-components-totals-shipping .wc-block-components-totals-item__value { color: var(--color-accent); }

/* --- Total a payer : le point d'arrivee du regard --- */
.kal-funnel .wc-block-components-totals-footer-item {
    border-top: 2px solid var(--color-ink);
    margin-top: 6px;
    padding-top: 14px;
}
.kal-funnel .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-ink);
    text-transform: none;
}
.kal-funnel .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    font-weight: 700;
}
.kal-funnel .wc-block-components-totals-footer-item__description { color: var(--color-muted); font-size: 11px; }

/* --- Codes promo : une ligne discrete, pas un encart colore --- */
.kal-funnel .wc-block-components-totals-coupon .wc-block-components-panel__button {
    background: transparent;
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--color-muted);
    padding: 12px 0;
    text-transform: none;
    letter-spacing: 0;
}
.kal-funnel .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: var(--color-ink); }
.kal-funnel .wc-block-components-totals-coupon { border-top: 1px solid var(--color-border); }
.kal-funnel .wc-block-components-totals-coupon__form { padding-bottom: 12px; }

@media (max-width: 780px) {
    .kal-funnel .wc-block-components-order-summary-item {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        column-gap: 12px;
        padding: 16px 0;
    }
    .kal-funnel .wc-block-components-order-summary-item__image,
    .kal-funnel .wc-block-components-order-summary-item__image img {
        width: 56px; max-width: 56px; height: 56px; min-height: 0;
    }
}

/* Le contenu de la page de commande vit dans .page-content, qui applique
   `img { margin: 2rem auto }` aux images d'article — pensee pour les images
   d'un texte, pas pour les vignettes d'un recapitulatif. C'est elle qui
   poussait la vignette 32px sous le nom du produit. */
.kal-funnel .page-content img { margin: 0; }

/* =============================================================
   PANIER — harmonise avec la page de commande
   Les blocs WooCommerce posent leurs propres fonds blancs et coins
   arrondis. On les ramene au creme de la marque et aux angles vifs,
   comme le recapitulatif de la page de commande.
   ============================================================= */
body.woocommerce-cart .site-main,
body.woocommerce-cart .page-content { background: var(--color-paper); }

.woocommerce-cart .wc-block-cart,
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .wc-block-components-panel {
    background: var(--color-paper);
}
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .wc-block-components-totals-wrapper {
    border-color: var(--color-border);
}
.woocommerce-cart .wc-block-cart-items__header {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
}
.woocommerce-cart .wc-block-cart-items__row { border-bottom: 1px solid var(--color-border); }
/* Meme traitement que le recapitulatif : angles vifs, filet fin. */
.woocommerce-cart .wc-block-components-panel,
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-panel { border-radius: 0; }
.woocommerce-cart .wc-block-cart-item__image img {
    border: 1px solid var(--color-border);
    margin: 0;
}
.woocommerce-cart .wc-block-components-product-name {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
/* Le bouton « Valider la commande » reprend le bouton principal du site. */
.woocommerce-cart .wc-block-cart__submit-button {
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: clamp(12px, .9vw, 14px);
    padding: 1.25rem 2rem;
}
.woocommerce-cart .wc-block-cart__submit-button:hover { opacity: .85; }
/* La page panier vit dans .page-content : la marge d'image des articles de
   texte s'y appliquait aussi, comme sur la page de commande. */
.woocommerce-cart .page-content img { margin: 0; }

/* --- Lien vers la section du guide correspondant au produit --- */
.kal-variations__guide {
    float: right;
    font-size: var(--fs-small);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    letter-spacing: 0;
    text-transform: none;
    transition: color var(--dur-fast);
}
.kal-variations__guide:hover,
.kal-variations__guide:focus-visible { color: var(--color-ink); }

/* --- Hero : sous-titre long ---
   Au-dela de 90 caracteres il s'agit d'un paragraphe et non d'une accroche.
   A l'echelle des titres de section, il occupait la moitie de l'ecran sur
   mobile. On le ramene a une echelle de texte, un peu au-dessus du corps. */
.hero__subtitle--long {
    font-size: clamp(1rem, .95rem + .5vw, 1.35rem);
    line-height: 1.5;
    max-width: 46ch;
}

/* --- Bandeau chiffres-cles : defilement plus vif et manipulable ---
   Sur mobile, le bandeau defile plus vite et le doigt peut le faire avancer
   ou reculer : l'animation se met en pause pendant l'interaction et reprend
   deux secondes apres, geree par kalamar.js. */
.block--stats.is-scrolling .stats__marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.block--stats.is-scrolling .stats__marquee::-webkit-scrollbar { display: none; }
.block--stats.is-scrolling .stats__marquee.is-paused .stats__track { animation-play-state: paused; }
@media (max-width: 780px) {
    /* Deux fois plus rapide : sur un ecran etroit, moins de fiches sont
       visibles a la fois, l'attente entre deux est donc plus longue. */
    .block--stats.is-scrolling .stats__track { animation-duration: calc(var(--marquee-duration, 32s) / 2); }
}

/* --- Contact : accroche centree sur mobile --- */
@media (max-width: 860px) {
    .kal-contact__pitch { text-align: center; }
    .kal-contact__pitch-text { margin-inline: auto; }
}

/* =============================================================
   FLUX INSTAGRAM (Smash Balloon)
   Le plugin apporte sa propre grille : on se contente de le caler
   dans la largeur du site et de neutraliser la marge que le thème
   applique aux images de contenu, qui decollait les vignettes.
   ============================================================= */
.block--instagram-feed { text-align: left; }
.block--instagram-feed .section-title { text-align: center; }
.kal-instagram-feed { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kal-instagram-feed img { margin: 0; }
#sb_instagram { padding-bottom: 0 !important; }
/* Quand le flux FERME la page, deux espaces s'additionnaient sous lui : le
   padding bas du bloc (jusqu'a 128px, visible en bande crème) puis la marge
   haute du pied de page (128px de plus). On supprime la marge du pied de page
   et on reduit le padding a une simple respiration sous le bouton « Suivre ».
   Conditionne a « :last-child » : depuis que la FAQ passe apres le flux, ces
   deux reductions ne doivent plus s'appliquer, sinon la FAQ se collerait au
   flux et au pied de page. */
.block--instagram-feed:last-child { padding-bottom: clamp(28px, 3vw, 44px); }
body:has(.block--instagram-feed:last-child) .site-footer { margin-top: 0; }

/* =============================================================
   COMPTE CLIENT — connexion, tableau de bord, commandes
   WooCommerce sort ces pages sans aucun style : sur un site ou tout
   le reste est dessine, la page de connexion faisait formulaire
   administratif. On reprend les memes champs que la page contact et
   le meme bouton que « Ajouter au panier », pour que le client ne
   sente aucune rupture au moment ou il donne son mot de passe.
   ============================================================= */

/* --- Colonne de lecture : un formulaire de connexion n'a aucune
       raison de s'etaler sur 1500px. --- */
.woocommerce-account .page-content > .woocommerce,
.woocommerce-account .site-main > .container > .woocommerce {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--shop-margin);
}

/* ---------- Ecran de connexion ---------- */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 460px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--shop-margin) clamp(4rem, 8vw, 7rem);
}
.woocommerce-account .woocommerce-form-login {
    border: 1px solid var(--color-border);
    background: var(--color-paper);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0;
}
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account .woocommerce-form-login-toggle + .woocommerce > h2 {
    font-size: var(--fs-title-block);
    font-weight: var(--fw-title);
    text-transform: lowercase;
    text-align: center;
    margin: 0 0 1.75rem;
}

/* --- Champs : identiques a ceux de la page contact --- */
.woocommerce-account .woocommerce-form-row { margin-bottom: 1.1rem; }
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-EditAccountForm label {
    display: block;
    font-size: var(--fs-small);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: .4rem;
}
.woocommerce-account .woocommerce-form-row label .required { color: var(--color-muted); text-decoration: none; }
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select {
    width: 100%;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: .62rem .85rem;
    font: inherit;
    font-size: .95rem;
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease-quart);
    -webkit-appearance: none; appearance: none;
}
.woocommerce-account input:hover { border-color: var(--color-muted); }
.woocommerce-account input:focus { outline: 0; border-color: var(--color-ink); }
/* Le champ mot de passe recoit un bouton « oeil » : on lui laisse la place. */
.woocommerce-account .woocommerce-password-input { position: relative; display: block; }
.woocommerce-account .show-password-input {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: var(--color-muted);
}

/* --- « Se souvenir de moi » + mot de passe perdu, sur une ligne --- */
.woocommerce-account .woocommerce-form-login .form-row:has(#rememberme) {
    display: flex; align-items: center; gap: .5rem;
    margin: .25rem 0 1.4rem;
}
.woocommerce-account .woocommerce-form-login__rememberme {
    display: inline-flex; align-items: center; gap: .5rem;
    margin: 0; text-transform: none; letter-spacing: 0;
    font-size: var(--fs-small); color: var(--color-muted); cursor: pointer;
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; margin: 0; accent-color: var(--color-ink); }
.woocommerce-account .woocommerce-LostPassword {
    margin: 1.25rem 0 0; text-align: center; font-size: var(--fs-small);
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--color-muted); text-decoration: underline; }
.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--color-ink); }

/* --- Bouton : le meme que « Ajouter au panier » --- */
.woocommerce-account button[type="submit"],
.woocommerce-account .woocommerce-Button {
    display: block; width: 100%;
    background: var(--color-ink);
    color: var(--color-paper);
    border: 1px solid var(--color-ink);
    text-transform: uppercase; letter-spacing: .12em;
    font-size: clamp(12px, .9vw, 14px); font-weight: 600;
    padding: 1.05rem 2rem; border-radius: 0; cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-quart);
    margin-top: .5rem;
}
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover { opacity: .85; }

/* ---------- Tableau de bord (connecte) ---------- */
@media (min-width: 900px) {
    .woocommerce-account.logged-in .woocommerce {
        display: grid;
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }
    .woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block; padding: .85rem .25rem;
    font-size: var(--fs-small);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-muted); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-quart);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--color-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { font-weight: 600; }
/* La deconnexion se distingue du reste de la liste. */
.woocommerce-account .woocommerce-MyAccount-navigation--link--customer-logout a { color: var(--color-muted); font-style: italic; text-transform: none; letter-spacing: 0; }

.woocommerce-account .woocommerce-MyAccount-content p { color: var(--color-muted); }
.woocommerce-account .woocommerce-MyAccount-content mark {
    background: none; color: var(--color-ink); font-weight: 600;
}

/* --- Tableaux (commandes, telechargements) --- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table {
    width: 100%; border-collapse: collapse; border: 0;
    font-size: var(--fs-small);
}
.woocommerce-account .shop_table th {
    text-align: left; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-muted);
    padding: .75rem 0; border-bottom: 1px solid var(--color-border);
}
.woocommerce-account .shop_table td {
    padding: 1rem 0; border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
}
.woocommerce-account .shop_table .woocommerce-button {
    display: inline-block; width: auto; margin: 0;
    padding: .5rem 1rem; font-size: 11px;
}

/* --- Adresses --- */
.woocommerce-account .woocommerce-Addresses { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .woocommerce-Address {
    border: 1px solid var(--color-border); padding: 1.5rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-size: var(--fs-title-block);
    font-weight: var(--fw-title);
    text-transform: lowercase;
    margin: 0 0 1rem;
}
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.woocommerce-account .woocommerce-Address-title .edit { font-size: var(--fs-small); color: var(--color-muted); text-decoration: underline; }
.woocommerce-account .woocommerce-Address address { font-style: normal; color: var(--color-muted); line-height: 1.7; }

/* --- Messages (erreur, succes, info) --- */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    list-style: none; margin: 0 0 1.5rem; padding: .9rem 1.1rem;
    border: 1px solid var(--color-border); border-left-width: 3px;
    background: var(--color-bg-alt);
    font-size: var(--fs-small); color: var(--color-ink);
}
.woocommerce-account .woocommerce-error { border-left-color: #9b2c2c; }
.woocommerce-account .woocommerce-message { border-left-color: var(--color-ink); }
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-message a { color: var(--color-ink); text-decoration: underline; }