/*
Theme Name: Kalamar
Theme URI: https://thekalamar.com/
Author: Webiteasy
Author URI: https://webiteasy.fr/
Description: Custom theme for Kalamar — Breton sustainable streetwear brand. Editorial Swiss/grotesque art direction, ACF-driven content, WooCommerce-ready.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kalamar
*/

/* =========================================================
   1. DESIGN TOKENS
   Roles mapped from newamsterdamsurf.com → Kalamar palette.
   Kalamar brand: near-black ink, off-white/cream paper, teal accent.
   ========================================================= */
:root {
    /* --- Color (recolored by role) --- */
    --color-ink:      #16110d;   /* pageText — near-black warm ink */
    --color-paper:    #fffdf4;   /* pageBG — off-white / cream paper */
    --color-accent:   #108474;   /* brand accent — Kalamar teal */
    --color-muted:    #6f6a62;   /* secondary text */
    --color-border:   #e4e0d4;   /* hairline border */
    --color-bg-alt:   #f4f1e6;   /* muted section background */
    --color-inverse:  #fffdf4;   /* text on dark/media */
    --color-backdrop: rgba(22,17,13,.32); /* image scrim */

    /* --- Typography ---
       Helvetica (system) → Arial fallback (Windows). Pas de chargement réseau.
       Poids : 800 sur les titres, 400 partout ailleurs. */
    --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-weight-body: 400;
    --font-weight-title: 600;
    --fs-display: clamp(48px, 8.33vw, 180px);
    --fs-h1:      clamp(38px, 4.6vw, 88px);
    --fs-h2:      clamp(28px, 2.6vw, 52px);

    /* --- Échelle des titres, nommée par rôle ---
       Chaque bloc avait fini par définir sa propre taille : on comptait sept
       échelles différentes pour un même niveau de titre, et cinq définitions
       de surtitre entre 10 et 13px. Résultat, deux sections voisines ne se
       lisaient pas au même rang.

       Quatre niveaux suffisent, et chacun correspond à une situation réelle
       de mise en page — pas à un bloc en particulier. Toute nouvelle section
       doit se raccrocher à l'un d'eux plutôt qu'inventer sa taille.

       Les valeurs sont fluides (clamp) : la même variable donne la bonne
       taille sur mobile, sur iPad et sur ordinateur, sans point de rupture
       à gérer bloc par bloc. */
       La valeur médiane s'écrit `rem + vw` et non `vw` seul. Avec un `vw`
       seul, le coefficient restait sous le minimum jusqu'à environ 850px :
       cinq niveaux sur six affichaient donc la même taille sur iPad que sur
       un téléphone, alors que l'écran est deux fois plus large. La forme
       `rem + vw` fait démarrer l'interpolation dès le mobile et la fait
       passer par la tablette. */
    --fs-title-xl:      clamp(3rem, 1.1rem + 7.8vw, 7.5rem);       /* hero plein écran */
    /* Tous les titres qui ouvrent une section ou une page partagent une seule
       taille : titre de page, histoire, bannière, fiche produit, avis, guide
       des tailles, « Vous aimerez aussi ». Les trois échelles précédentes
       (bannière, page, colonne) sont conservées comme alias pour que chaque
       référence existante donne désormais exactement la même valeur. */
    --fs-title-section: clamp(2rem, 1.72rem + 1.14vw, 2.75rem);
    --fs-title-lg:      var(--fs-title-section);
    --fs-title-page:    var(--fs-title-section);
    --fs-title-col:     var(--fs-title-section);
    --fs-title-block:   clamp(1.25rem, 1.18rem + .29vw, 1.4375rem); /* carte, colonne, réassurance */
    --fs-eyebrow:       clamp(11px, .66rem + .1vw, 12.5px);         /* surtitre */

    /* Graisse des titres : Archivo 400. Volontairement distincte de
       --font-weight-title, qui sert aussi à `strong` et `b` — l'abaisser
       supprimerait le gras dans les textes de la boutique. */
    --fw-title: 400;

    /* Icônes des blocs jumeaux (colonnes et réassurance). Une seule valeur :
       les deux blocs employaient 40-52px d'un côté et 28-36px de l'autre,
       alors qu'ils se suivent sur la page d'accueil. */
    --icon-card: clamp(24px, 1.4rem + .3vw, 28px);
    --fs-h3:      clamp(20px, 1.65vw, 32px);
    --fs-body:    clamp(15px, 1.04vw, 18px);
    --fs-lg:      clamp(17px, 1.25vw, 22px);
    --fs-ui:      clamp(12px, .85vw, 13px);
    --fs-small:   clamp(11px, .8vw, 12px);
    --track-wide: .08em;
    --track-tight: -0.02em;

    /* --- Spacing & layout --- */
    --margin: clamp(16px, 2vw, 40px);
    --gap: 1vw;
    --container: 1600px;
    --container-readable: 760px;
    --section-y: clamp(56px, 8vw, 128px);

    /* --- Motion --- */
    --ease-expo:  cubic-bezier(.22, 1, .36, 1);
    --ease-quart: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: .25s;
    --dur-base: .4s;
    --dur-slow: .6s;

    /* legacy aliases (kept so older partials/WC overrides keep working) */
    --color-text: var(--color-ink);
    --color-bg: var(--color-paper);
    --color-button-bg: var(--color-ink);
    --color-button-text: var(--color-paper);
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);
    --gutter: var(--margin);
}

/* Arial metric-matched fallback to prevent CLS while Archivo loads. */
@font-face {
    font-family: "Helvetica Neue Fallback";
    src: local("Arial");
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-title);
    text-transform: none;
    letter-spacing: var(--track-tight);
    line-height: 1.05;
    margin: 0 0 .6em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
::selection { background: var(--color-accent); color: var(--color-paper); }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--margin);
    padding-right: var(--margin);
}

/* Eyebrow / UI label utility */
.eyebrow, .section-eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-weight: 500;
    color: var(--color-muted);
}

.section-title {
    font-size: var(--fs-title-page);
    letter-spacing: var(--track-tight);
    margin: 0 0 clamp(24px, 3vw, 56px);
}

/* =========================================================
   3. LINKS / BUTTONS
   ========================================================= */
/* underline sweep links */
.link-sweep, .main-nav a, .footer-nav a {
    position: relative;
    display: inline-block;
}
.link-sweep::after, .main-nav a::after, .footer-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur-base) var(--ease-expo);
}
.link-sweep:hover::after, .main-nav a:hover::after, .footer-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.btn, button.btn, a.btn,
.wp-block-button__link, .button,
.wc-block-components-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    background: var(--color-ink);
    color: var(--color-paper) !important;
    padding: .95em 2em;
    border: 1px solid var(--color-ink);
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-size: var(--fs-ui);
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                opacity var(--dur-fast) var(--ease-quart);
}
.btn:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-paper) !important;
}
.btn--outline {
    background: transparent;
    color: var(--color-ink) !important;
    border-color: var(--color-ink);
}
.btn--outline:hover {
    background: var(--color-ink);
    color: var(--color-paper) !important;
}
/* outline button placed over media */
.is-on-media .btn--outline,
.hero .btn--outline,
.block--image-banner .btn--outline {
    color: var(--color-inverse) !important;
    border-color: var(--color-inverse);
}

/* =========================================================
   4. ANIMATION HOOKS
   ========================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-expo),
                transform var(--dur-slow) var(--ease-expo);
    will-change: opacity, transform;
}
[data-reveal].is-visible,
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Filet de sécurité : si le JS ne tourne pas, ne jamais cacher le contenu critique */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

.media-zoom { overflow: hidden; }
.media-zoom img, .media-zoom video {
    transition: transform var(--dur-slow) var(--ease-expo);
    will-change: transform;
}
.media-zoom:hover img, .media-zoom:hover video { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .media-zoom img, .media-zoom video { transition: none !important; }
    .media-zoom:hover img, .media-zoom:hover video { transform: none !important; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================
   5. HEADER / NAV
   ========================================================= */
.site-header {
    position: sticky;          /* dans le flux : aucune zone de compensation */
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    /* Barre claire, alignee sur le pied de page. (Etat final : la version
       sombre d'origine et sa surcharge claire de components.css ne font plus
       qu'une definition.) */
    background: var(--color-paper);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    transition: transform .45s var(--ease-expo),
                background var(--dur-base) var(--ease-quart),
                border-color var(--dur-base) var(--ease-quart),
                color var(--dur-base) var(--ease-quart);
}
.site-header a,
.site-header .header-icon-btn { color: var(--color-paper); }
.site-header .cart-count {
    background: var(--color-paper);
    color: var(--color-ink);
}
.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(1.25rem, 1.6vw, 1.6rem) var(--margin);
}

/* Accueil : le header reste fixed pour se superposer au hero plein écran. */
.has-hero .site-header { position: fixed; top: 0; }
/* transparent over hero on the homepage until scrolled (text already white, stays readable) */
.has-hero .site-header.is-top {
    background: transparent;
    border-bottom-color: transparent;
}
/* Au survol de la navbar (ou mega-menu ouvert) : fond noir, même sur le hero. */
.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-ink);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* auto-hide : se cache en descendant, réapparaît en remontant */
.site-header.is-hidden { transform: translateY(-100%); }

.header-col { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 26px); }
.header-col--left { justify-content: flex-start; }
.header-col--center { justify-content: center; }
.header-col--right { justify-content: flex-end; }

.site-logo { display: inline-flex; align-items: center; }
.site-logo--image { display: inline-flex; align-items: center; line-height: 1; transition: opacity var(--dur-fast) var(--ease-quart); }
.site-logo--image:hover, .site-logo--image:focus-visible { opacity: .7; text-decoration: none; }
.site-logo--image::after { display: none !important; }
/* Sélecteur préfixé par .site-header (spécificité 0,2,1) : WooCommerce impose
   « .woocommerce img, .woocommerce-page img { height: auto } » (0,1,1) dans
   woocommerce-layout.css, ce qui écrasait le clamp ci-dessous sur la boutique
   et les fiches produit — le logo y rendait à sa taille naturelle (80px au
   lieu de 30,7px) et la navbar passait de 76 à 122px. */
.site-header .site-logo__img {
    display: block;
    width: auto;
    height: clamp(26px, 2.4vw, 38px);
    max-width: none;          /* on laisse le ratio natif décider — pas de distorsion */
    object-fit: contain;
    /* Logo sombre sur transparent → blanc sur la navbar noire */
    filter: brightness(0) invert(1);
    image-rendering: -webkit-optimize-contrast;  /* downscale net */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);                    /* lissage GPU du downscale */
}
@media (max-width: 900px) { .site-header .site-logo__img { height: 22px; } }
.site-logo--text {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1;
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 4px 0;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.site-logo--text:hover,
.site-logo--text:focus-visible { opacity: .65; text-decoration: none; }
.site-logo--text::after { display: none !important; } /* kill underline sweep on logo */
.site-logo__word { display: inline-block; }

.main-nav ul, .header-col ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav ul { gap: clamp(22px, 2vw, 40px); }
.main-nav a {
    font-size: clamp(14px, 1vw, 16px);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-weight: 500;
}

/* Icon button (consistent affordance for search, cart, menu, close) */
.kal-icon { display: block; width: 22px; height: 22px; }
.header-icon-btn {
    background: none; border: 0; padding: 6px; margin: 0;
    cursor: pointer; color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    border-radius: 0;
    transition: opacity var(--dur-fast) var(--ease-quart);
    position: relative;
}
.header-icon-btn:hover,
.header-icon-btn:focus-visible { opacity: .6; }
.header-icon-btn:focus { outline: 0; }
.header-icon-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

.cart-link { position: relative; }
.cart-count {
    position: absolute;
    top: 2px; right: 0;
    min-width: 16px;
    padding: 0 4px;
    height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    transform: translate(35%, -35%);
}
.cart-count:empty,
.cart-link:has(.cart-count:empty) .cart-count { display: none; }

/* hamburger (now uses icon, but keep nav-toggle reset) */
.nav-toggle { display: none; }

/* Active nav link */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* Header sticky (dans le flux) → aucune compensation nécessaire hors accueil. */

/* =========================================================
   MOBILE DRAWER — plein écran, fond papier (cohérent navbar)
   Structure : barre (logo + croix) / zone scrollable / pied.
   ========================================================= */
.mobile-drawer {
    position: fixed;
    inset: 0;
    width: 100%;
    background: var(--color-paper);
    color: var(--color-ink);
    z-index: 120;
    transform: translateX(100%);
    transition: transform .55s var(--ease-expo);
    display: flex;
    flex-direction: column;         /* bar / scroll / foot */
    padding: 0;
    overflow: hidden;               /* le scroll est délégué à __scroll */
}
.mobile-drawer.is-open { transform: translateX(0); }

/* --- Barre haute : logo + fermeture --- */
.mobile-drawer__bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: calc(env(safe-area-inset-top) + 18px) var(--margin) 18px;
    border-bottom: 1px solid var(--color-border);
}
.mobile-drawer__logo { display: block; line-height: 0; }
/* Même piège que la navbar : « .woocommerce img { height:auto } » écrasait
   cette hauteur sur la boutique, d'où un logo énorme dans le menu mobile. */
.mobile-drawer .mobile-drawer__logo-img {
    height: 22px; width: auto; display: block;
    filter: brightness(0);   /* logo blanc -> encre, sur le fond clair */
}
.mobile-drawer__logo--text {
    font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.drawer-close {
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; line-height: 1; cursor: pointer;
    /* Le panneau est passe en creme : en --color-inverse, la croix etait
       creme sur creme, donc invisible. Le bouton fonctionnait pourtant. */
    color: var(--color-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.drawer-close:hover { opacity: .6; }
.drawer-close .kal-icon { width: 24px; height: 24px; }

/* --- Zone scrollable --- */
.mobile-drawer__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(2rem, 7vw, 3rem) var(--margin) 2rem;
}

/* --- Navigation principale --- */
.mobile-drawer__primary ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(.9rem, 3vw, 1.3rem);
}
/* Sélecteur préfixé par .mobile-drawer : une règle globale plus bas dans la
   feuille cible « .mobile-drawer a » en font-weight 400 avec la même
   spécificité et l'emporterait sinon. */
/* « > ul > li > a » et non « a » : depuis que les categories sont imbriquees
   dans l'entree Boutique, un selecteur large donnait aux sous-categories la
   meme typo geante (31px mesures) qu'aux entrees principales. */
.mobile-drawer .mobile-drawer__primary > ul > li > a {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
    /* Archivo 400, comme tous les titres du site. Les majuscules sont
       conservees : elles reprennent la navigation de bureau. */
    font-weight: var(--fw-title);
    line-height: 1.05;
    color: var(--color-ink);
    display: inline-block;
}
.mobile-drawer__primary a::after { display: none !important; }
.mobile-drawer__primary .current-menu-item > a,
.mobile-drawer__primary .current_page_item > a {
    text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px;
}
/* Entrée en cascade des liens à l'ouverture */
.mobile-drawer__primary li {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo);
}
.mobile-drawer.is-open .mobile-drawer__primary li { opacity: 1; transform: none; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(1) { transition-delay: .10s; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(2) { transition-delay: .16s; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(3) { transition-delay: .22s; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(4) { transition-delay: .28s; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(5) { transition-delay: .34s; }
.mobile-drawer.is-open .mobile-drawer__primary li:nth-child(n+6) { transition-delay: .40s; }

/* --- Pied : panier + réseaux --- */
.mobile-drawer__foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: clamp(1.2rem, 5vw, 2rem);
    flex-wrap: wrap;
    padding: 18px var(--margin) calc(env(safe-area-inset-bottom) + 20px);
    border-top: 1px solid var(--color-border);
}
.mobile-drawer a.mobile-drawer__foot-link {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
    color: var(--color-muted);
    transition: color var(--dur-fast) var(--ease-quart);
}
.mobile-drawer__foot-link:hover { color: var(--color-ink); }
.mobile-drawer__foot-link .kal-icon { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer { transition: none; }
    .mobile-drawer__primary li { opacity: 1; transform: none; transition: none; }
}
.drawer-overlay {
    position: fixed; inset: 0; background: var(--color-backdrop);
    opacity: 0; visibility: hidden; z-index: 110;
    transition: opacity var(--dur-base) var(--ease-quart), visibility var(--dur-base);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
    .header-col--center { display: none; }
    .site-header__inner { grid-template-columns: auto 1fr auto; }
    .nav-toggle { display: inline-flex; }
    .header-col--left { gap: 8px; }
}
@media (min-width: 901px) {
    .nav-toggle { display: none; }
}

/* =========================================================
   6. HERO
   ========================================================= */
.hero, .hero--block {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;            /* place inner toward the bottom */
    justify-content: flex-start;      /* ancré à gauche */
    text-align: left;
    overflow: hidden;
    color: var(--color-inverse);
    background-size: cover;
    background-position: center;
}
/* Voile plus marqué en bas : le texte est désormais posé sur l'image/vidéo
   dans le coin inférieur gauche, il lui faut un fond franc pour rester lisible. */
.hero::after, .hero--block::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22,17,13,.10) 0%, rgba(22,17,13,.05) 40%, rgba(22,17,13,.82) 100%);
    z-index: 1;
}
.hero__video,
.hero__bg-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__bg-img { object-position: center; }
.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    /* Push the content towards the lower third of the hero */
    padding: 0 var(--margin) clamp(64px, 12vh, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;              /* contenu centré */
    text-align: center;
    justify-content: flex-end;
    /* Gouttiere resserree : elle s'ajoutait aux marges et eloignait le CTA
       de l'accroche (39px mesures). */
    gap: clamp(.25rem, .5vw, .45rem);
    animation: kal-hero-rise 1100ms var(--ease-expo) both;
    text-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
}
.hero__title {
    font-size: var(--fs-title-xl);
    line-height: .92;
    margin: 0 0 .15em;
    max-width: 16ch;
    text-align: left;        /* cohérent avec les titres de section du site */
    letter-spacing: -0.01em;
}
/* Sur l'accueil le champ « titre » est vide : c'est le sous-titre qui porte le
   message. Il est donc dimensionné comme une accroche, pas comme un paragraphe. */
.hero__subtitle {
    /* Le champ « titre » du hero est vide sur l'accueil : c'est ce sous-titre
       qui porte le message. Il prend donc l'échelle des titres de section,
       soit 44px sur ordinateur — la taille demandée — en restant lisible sur
       mobile plutôt que figé à 44px sur une largeur de 390px. */
    font-size: var(--fs-title-section);
    font-weight: 400;
    /* 67 caractères de texte : ~36ch de mesure -> deux lignes pleines. */
    max-width: 36ch;
    margin-inline: auto;
    /* Marge basse resserree : le CTA doit suivre l'accroche de pres. */
    margin: .3em 0 .55em;
    opacity: 1;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -.01em;
    padding: 0;
}

/* Logo brand en grand au-dessus du subtitle */
.hero__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(1rem, 2vw, 1.6rem);
    width: 100%;
}
.hero__brand-img {
    display: block;
    width: auto;
    height: auto;
    /* Reduit une seconde fois de 20 %. Cumul depuis l'origine : 0,7 x 0,8,
       soit 56 % de la taille de depart.
       Largeur : 900->630->504px, 92->64,4->51,5vw, 1800->1260->1008px.
       Hauteur : 280->196->157px, 36->25,2->20,2vw, 560->392->314px. */
    max-width: clamp(504px, 51.5vw, 1008px);
    max-height: clamp(157px, 20.2vw, 314px);
    object-fit: contain;
    /* Logo (noir sur transparent) → blanc sur fond sombre du hero */
    filter: brightness(0) invert(1);
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}
@media (max-width: 640px) {
    .hero__brand-img {
        /* Meme reduction cumulee que sur grand ecran (56 % de l'origine),
           sinon la proportion changerait selon la taille de l'appareil. */
        max-width: 53.8vw;
        max-height: 157px;
    }
}
.hero__inner .btn { margin-top: .2rem; }

/* ---- Premium hero CTA (overrides .btn within hero only) ---- */
.hero__inner .btn,
.hero--block .btn {
    --btn-pad-y: clamp(14px, 1.4vw, 18px);
    --btn-pad-x: clamp(28px, 2.6vw, 44px);
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--color-paper);
    color: var(--color-ink) !important;
    border: 1px solid var(--color-paper);
    font-weight: 700;
    font-size: clamp(12px, .95vw, 14px);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: color 350ms var(--ease-expo),
                border-color 350ms var(--ease-expo),
                transform 350ms var(--ease-expo);
    isolation: isolate;
    text-shadow: none;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
}
.hero__inner .btn::before,
.hero--block .btn::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--color-ink);
    transform: translateY(101%);
    transition: transform 500ms var(--ease-expo);
    z-index: -1;
}
.hero__inner .btn::after,
.hero--block .btn::after {
    content: "→";
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    transform: translateX(0);
    transition: transform 500ms var(--ease-expo);
}
.hero__inner .btn:hover,
.hero__inner .btn:focus-visible,
.hero--block .btn:hover,
.hero--block .btn:focus-visible {
    color: var(--color-paper) !important;
    border-color: var(--color-ink);
    text-decoration: none;
    outline: 0;
}
.hero__inner .btn:hover::before,
.hero__inner .btn:focus-visible::before,
.hero--block .btn:hover::before,
.hero--block .btn:focus-visible::before { transform: translateY(0); }
.hero__inner .btn:hover::after,
.hero__inner .btn:focus-visible::after,
.hero--block .btn:hover::after,
.hero--block .btn:focus-visible::after { transform: translateX(6px); }
.hero__inner .btn:active,
.hero--block .btn:active { transform: scale(.98); }

@media (max-width: 640px) {
    .hero__inner { padding-bottom: clamp(48px, 10vh, 110px); gap: .7rem; }
}
@keyframes kal-hero-rise {
    from { opacity: 0; transform: translateY(28px); letter-spacing: .02em; }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__inner { animation: none; } }
.hero__scroll-cue {
    position: absolute;
    left: 50%; bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 2;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--color-inverse);
    display: inline-flex; flex-direction: column; align-items: center; gap: .5em;
}
.hero__scroll-cue::after {
    content: ""; width: 1px; height: 28px; background: currentColor;
    animation: kal-scrollcue 1.8s var(--ease-quart) infinite;
}
@keyframes kal-scrollcue { 0%,100% { opacity: .3; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* =========================================================
   7. BLOCKS
   ========================================================= */
.block { padding: var(--section-y) 0; }
.block + .block { padding-top: 0; }
.block--cta, .block--instagram { padding: var(--section-y) 0; }

/* image + text editorial 2-up — espacement resserré, animations premium */
.block--image-text { padding: clamp(48px, 7vw, 110px) 0; }
.block + .block.block--image-text { padding-top: clamp(48px, 7vw, 110px); }
/* Blocs qui doivent garder leur padding vertical symétrique.
   Cette règle ne posait que le padding-top : le bas restait au clamp(2rem,4vw,3.5rem)
   du bloc lui-même, soit 173px en haut contre 56px en bas à 1440 — le contenu
   paraissait collé au bloc suivant. On pose donc les deux côtés d'un coup. */
.block + .block.block--reassurance { padding-block: clamp(6rem, 12vw, 11rem); }
/* Colonnes : respiration resserrée. À 176px en haut ET en bas sur grand
   écran, le bloc flottait au milieu d'un vide qui cassait le rythme entre
   les deux bandes d'images qui l'encadrent. */
.block + .block.block--columns { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.block + .block.block--testimonials { padding-top: clamp(5rem, 10vw, 9rem); }
/* La FAQ n'avait pas son exception a « .block + .block { padding-top: 0 } » :
   son titre se collait au bloc precedent, ce qui saute aux yeux depuis que le
   flux Instagram, avec son fond colore, la precede sur l'accueil. */
.block + .block.block--faq { padding-top: var(--section-y); }
.block--image-text .block__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--margin);
}
.block--image-text.is-reverse .block__media { order: 2; }
.block--image-text .block__media {
    overflow: hidden;
    width: 100%;
    position: relative;
    background: var(--bg-muted);
    aspect-ratio: 4 / 3;
    /* Reveal cinématique : volet (clip-path) qui se lève */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease-expo);
}
.block--image-text .block__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* remplit le cadre — plein, immersif */
    display: block;
    transform: scale(1.1);
    transition: transform 1.5s var(--ease-expo);
}
/* Texte : fade + slide latéral depuis le bord opposé à l'image */
.block--image-text .block__text {
    max-width: 46ch;
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .9s var(--ease-quart) .2s, transform 1s var(--ease-expo) .2s;
}
.block--image-text.is-reverse .block__text { transform: translateX(28px); }

/* État révélé (classe posée par le JS initImageTextReveal) */
.block--image-text.is-revealed .block__media { clip-path: inset(0 0 0 0); }
.block--image-text.is-revealed .block__media img { transform: scale(1); }
.block--image-text.is-revealed .block__text { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .block--image-text .block__media { clip-path: none !important; }
    .block--image-text .block__media img { transform: none !important; }
    .block--image-text .block__text { opacity: 1 !important; transform: none !important; }
}
.block--image-text .block__text {
    max-width: 46ch;
}
.block--image-text .block__eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--color-muted);
    margin: 0 0 1.2rem;
}
.block--image-text .block__title {
    font-size: var(--fs-title-page);
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0 0 clamp(1rem, 2vw, 1.6rem);
    color: var(--color-ink);
}
.block--image-text .block__body {
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.65;
    color: var(--color-muted);
    margin: 0;
}
.block--image-text .block__body p { margin: 0 0 1.1em; }
.block--image-text .block__body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .block--image-text .block__grid { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 36px); }
    .block--image-text.is-reverse .block__media { order: 0; }
    .block--image-text .block__media img { max-height: 70vh; }
    .block--image-text .block__text { max-width: none; }
}

/* image banner full-bleed */
.block--image-banner {
    position: relative;
    min-height: clamp(480px, 82vh, 900px);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: var(--color-inverse);
    background-size: cover; background-position: center;
    padding: var(--section-y) var(--margin);
    overflow: hidden;
}
/* Scrim seulement si overlay texte présent (sinon image full, non assombrie) */
.block--image-banner:has(.block__overlay)::after { content: ""; position: absolute; inset: 0; background: var(--color-backdrop); }
/* Bandeau pleine largeur (déborde le container parent éventuel) */
.page-blocks .block--image-banner,
.block--image-banner { width: 100%; }
/* Parallaxe : le fond reste fixe pendant le scroll (animation d'origine).
   Le faux vide d'avant venait de la marge inter-blocs (corrigée à 0), pas de l'effet.
   Limité au desktop pointeur fin (instable sur Safari iOS) + désactivé en reduced-motion. */
@media (min-width: 900px) and (hover: hover) {
    .block--image-banner { background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce) {
    .block--image-banner { background-attachment: scroll; }
}
.block--image-banner .block__overlay { position: relative; z-index: 1; max-width: 720px; }
.block--image-banner .block__title { font-size: var(--fs-title-lg); margin-bottom: .4em; }
.block--image-banner .block__subtitle { font-size: var(--fs-lg); margin-bottom: 1.5em; opacity: .92; }

/* columns */
.block--columns .columns-grid {
    display: grid;
    gap: clamp(20px, 2vw, 40px);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.columns-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.columns-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.columns-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.block--columns .column { overflow: hidden; }
/* =========================================================
   USP TRIPLET PREMIUM (Stay Local / Live Long / 2nd Life)
   ========================================================= */
.block--columns {
    /* Rythme vertical resserré : le bloc était trop haut (l'ancienne valeur
       montait à ~170px en haut ET en bas sur grand écran). */
    /* Marges haut/bas strictement identiques et resserrees. */
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    background: var(--color-paper);
    color: var(--color-ink);
}
.block--columns .container { max-width: 1320px; margin: 0 auto; padding: 0 var(--shop-margin); }
.block--columns .columns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(50px, 6vw, 80px);
    align-items: start;
    position: relative;
}
@media (min-width: 800px) {
    .block--columns .columns-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .block--columns .columns-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .block--columns .columns-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); gap: 0; }
    /* Pas de traits verticaux entre colonnes (épuré). */
}

.block--columns .column {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    /* L'ecart icone-titre cumulait cette gouttiere ET une marge haute sur le
       titre : 29 a 45px au total, contre 19px sur le bloc reassurance, son
       jumeau. La marge du titre est retiree et la gouttiere resserree, ce qui
       aligne les deux blocs. */
    gap: clamp(1rem, 1.3vw, 1.3rem);
    max-width: 36ch;
    margin: 0 auto;
    /* Padding vertical retiré : la hauteur est gérée par le bloc lui-même. */
    padding: 0 clamp(1.4rem, 3vw, 3rem);
    position: relative;
}

/* Pas de séparateurs verticaux entre colonnes (voulu : aucun trait gris) */

/* Icône sans cercle, hover doux */
.block--columns .column__icon {
    width: clamp(40px, 4vw, 52px);
    height: clamp(40px, 4vw, 52px);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--color-ink);
    transition: transform .6s var(--ease-expo);
}
/* Pas d'animation au survol : sur mobile, le survol n'existe pas et le
   deplacement se declenchait au simple effleurement. */
.block--columns .column__icon { transition: none; }
.block--columns .column__icon svg {
    width: 100%; height: 100%; display: block;
    stroke-width: 1.25;
}
.block--columns .column__icon img {
    width: 60%; height: 60%;
    object-fit: contain;
    display: block;
    margin: 0;
}

/* Aligné sur le bloc réassurance (.reassurance-item__title) : même famille,
   même échelle, même graisse. Les deux blocs jouent le même rôle — trois
   arguments courts en colonnes — et se lisaient pourtant comme deux systèmes
   typographiques distincts : 12px en petites capitales très espacées ici,
   26px en bas de casse là. Seule la couleur diffère, chacune restant
   accordée à son fond (encre sur crème, crème sur encre). */
.block--columns .column__title {
    font-family: var(--font-sans);
    font-size: var(--fs-title-block);
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 .35rem;
}

/* Même échelle que .reassurance-item__text, pour que le rapport titre/texte
   soit identique d'un bloc à l'autre. */
.block--columns .column__text {
    font-size: clamp(13.5px, .95vw, 14.5px);
    line-height: 1.6;
    color: var(--color-muted);
    margin: .1rem 0 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    max-width: 32ch;
}
.block--columns .column__text p { margin: 0; }

/* Mobile : empilement sur UNE colonne.
   En deux colonnes le texte tombait à ~15 caractères par ligne (mots orphelins,
   titres coupés en deux) et le 3e item restait seul sur sa ligne. Les filets
   séparateurs ci-dessous sont pensés pour un empilement vertical : en grille
   2 colonnes ils se plaçaient de travers. */
@media (max-width: 799px) {
    .block--columns { padding: clamp(2.5rem, 8vw, 4rem) 0; }
    .block--columns .columns-grid,
    .block--columns .columns-grid[data-cols="2"],
    .block--columns .columns-grid[data-cols="3"],
    .block--columns .columns-grid[data-cols="4"] {
        grid-template-columns: 1fr;
        gap: 0;                     /* le rythme est donné par le filet + padding */
    }
    .block--columns .column {
        padding: clamp(2rem, 7vw, 2.6rem) 0;
        max-width: 34ch;
    }
    .block--columns .column__text { max-width: none; }
    .block--columns .columns-grid > .column + .column {
        border-top: 1px solid var(--color-border);
    }
}
/* L'ancienne règle qui repassait le titre en petites capitales de 12px est
   retirée : à spécificité égale (0,2,0) elle était plus bas dans le fichier
   et écrasait donc silencieusement la règle ci-dessus. */
.block--columns .column__text { color: var(--color-muted); }
/* (L'ancienne règle 2 colonnes < 768px est supprimée : elle entrait en conflit
   avec l'empilement 1 colonne défini plus haut à 799px, et laissait une zone
   morte entre 769 et 799px.) */

/* ===== Galerie premium masonry (CSS columns, ratios natifs préservés) ===== */
.block--gallery { padding: clamp(50px, 8vw, 120px) 0; }
.kal-masonry {
    column-count: 3;
    column-gap: clamp(10px, 1.4vw, 22px);
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 var(--shop-margin);
}
@media (max-width: 1024px) { .kal-masonry { column-count: 2; } }
@media (max-width: 560px)  { .kal-masonry { column-count: 1; } }

.kal-masonry__item {
    break-inside: avoid;
    margin: 0 0 clamp(10px, 1.4vw, 22px);
    overflow: hidden;
    background: var(--bg-muted, #f1f1ef);
}
/* Reveal cinématique appliqué UNIQUEMENT si le JS tourne (.kal-js) :
   sans JS, les images restent visibles (pas de clip-path). */
.kal-js .kal-masonry__item {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.15s var(--ease-expo) var(--gp-delay, 0ms);
    will-change: clip-path;
}
.kal-js .kal-masonry__item.is-shown { clip-path: inset(0 0 0 0); }
.kal-masonry__link {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.kal-masonry__link::after { display: none !important; } /* kill underline sweep */
.kal-masonry__img {
    width: 100%;
    height: auto;          /* ratio natif → tailles variées organiques */
    display: block;
    transition: transform 1.2s var(--ease-expo), filter 600ms var(--ease-quart);
    filter: saturate(.96);
    transform: scale(1.12);                 /* dézoome au reveal */
    will-change: transform;
}
.kal-masonry__item.is-shown .kal-masonry__img { transform: scale(1); }
.kal-masonry__link:hover .kal-masonry__img {
    transform: scale(1.05);
    filter: saturate(1.08);
}
/* La parallaxe applique un translateY inline via JS sur l'item ; on garde le clip-path propre */
@media (prefers-reduced-motion: reduce) {
    .kal-masonry__item { clip-path: none !important; }
    .kal-masonry__img { transform: none !important; }
}
/* léger voile au hover pour signaler la cliquabilité */
.kal-masonry__link::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(22,17,13,0);
    transition: background var(--dur-base) var(--ease-quart);
    z-index: 1;
}
.kal-masonry__link:hover::before { background: rgba(22,17,13,.12); }

/* ===== Lightbox plein écran ===== */
.kal-lightbox {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(16,12,9,.94);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 300ms var(--ease-quart), visibility 300ms;
    cursor: zoom-out;
    padding: clamp(20px, 5vw, 80px);
}
.kal-lightbox.is-open { opacity: 1; visibility: visible; }
.kal-lightbox img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    transform: scale(.97);
    transition: transform 350ms var(--ease-expo);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.kal-lightbox.is-open img { transform: scale(1); }
.kal-lightbox__close,
.kal-lightbox__nav {
    position: absolute;
    background: none; border: 0; color: #fffdf4;
    cursor: pointer; opacity: .8;
    transition: opacity var(--dur-fast) var(--ease-quart);
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
}
.kal-lightbox__close { top: clamp(16px,3vw,32px); right: clamp(16px,3vw,32px); width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.kal-lightbox__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 40px; }
.kal-lightbox__nav--prev { left: clamp(8px,2vw,28px); }
.kal-lightbox__nav--next { right: clamp(8px,2vw,28px); }
.kal-lightbox__close:hover, .kal-lightbox__nav:hover { opacity: 1; }
@media (max-width: 560px) { .kal-lightbox__nav { display: none; } }

/* featured products grid */
.block--featured .products,
.products-grid, ul.products {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1vw, 28px);
}
@media (max-width: 768px) {
    .block--featured .products, .products-grid, ul.products { grid-template-columns: repeat(2, 1fr); }
}
.product-card, ul.products li.product, .block--featured .products li.product {
    width: 100% !important; margin: 0 !important; float: none !important; text-align: left;
}
.product-card__image,
ul.products li.product a img,
.block--featured .products li.product img {
    aspect-ratio: 3/4; object-fit: cover; width: 100%;
    margin-bottom: .9rem; background: var(--color-bg-alt);
    transition: transform var(--dur-slow) var(--ease-expo);
}
ul.products li.product a:hover img,
.block--featured .products li.product a:hover img { transform: scale(1.04); }
ul.products li.product a, .block--featured .products li.product a { display: block; overflow: hidden; }
.product-card__title,
ul.products li.product .woocommerce-loop-product__title,
.block--featured .products li.product .woocommerce-loop-product__title,
.feature-grid__products li.product .woocommerce-loop-product__title {
    /* Titre produit agrandi (~×1.6) */
    font-size: clamp(15px, 1.05vw, 18px) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 .35rem !important;
    padding: 0 !important;
    color: var(--color-ink);
}
.product-card__price,
ul.products li.product .price,
.block--featured .products li.product .price,
.feature-grid__products li.product .price {
    /* Prix agrandi (~×1.4) et plus présent */
    color: var(--color-ink);
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    letter-spacing: .02em;
}
.woocommerce ul.products li.product .price ins { background: none; font-weight: 700; color: var(--color-ink); }
.woocommerce ul.products li.product .price del { color: var(--color-muted); opacity: .7; }
.woocommerce ul.products li.product a.button { display: none; }

/* CTA */
.block--cta { background: var(--color-bg-alt); text-align: center; }
.block--cta .block__title { font-size: var(--fs-title-lg); margin-bottom: .3em; }
.block--cta .block__text { font-size: var(--fs-lg); color: var(--color-muted); max-width: 50ch; margin: 0 auto 1.6em; }

/* image block */
.block--image img { width: 100%; }
.block__caption { color: var(--color-muted); font-size: var(--fs-small); margin-top: .6rem; text-transform: uppercase; letter-spacing: var(--track-wide); }

/* instagram */
.block--instagram { text-align: center; background: var(--color-bg-alt); }
.block--instagram .instagram-handle {
    font-size: var(--fs-h3); text-transform: lowercase; letter-spacing: var(--track-tight);
    display: inline-block;
}

/* text block */
/* Bloc texte libre (WYSIWYG) — aligné sur le système typographique du site.
   Avant : aucun rythme vertical, titre en 700 sentence-case, et un corps de
   texte sur ~115 caractères par ligne (illisible). On reprend les mêmes
   réglages que .story__title / .story__body pour l'homogénéité. */
.block--text {
    padding: clamp(3rem, 7vw, 6.5rem) 0;
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    line-height: 1.7;
    color: var(--color-text);
}
.block--text .container { max-width: min(1240px, 92vw); padding: 0 var(--margin); }

/* Titres : mêmes caractéristiques que les titres de section (.story__title) */
/* Titres des contenus libres (bloc texte : accueil, pages légales, pages
   locales). Cette règle échappait à l'harmonisation : majuscules, graisse
   600, et une taille qui suivait encore l'ancienne échelle — les titres de
   ces blocs étaient donc plus gros que tous les autres titres du site. */
.block--text :is(h1, h2, h3) {
    font-weight: var(--fw-title);
    letter-spacing: -.02em;
    line-height: 1.1;
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 clamp(1.2rem, 2.2vw, 1.8rem);
}
.block--text h2 { font-size: var(--fs-title-section); }
.block--text h3 { font-size: var(--fs-title-block); }

/* Corps : longueur de ligne ramenée dans la zone lisible (60-75 caractères) */
.block--text p { max-width: 68ch; margin: 0 0 1.5em; }
.block--text p:last-child { margin-bottom: 0; }
.block--text strong { font-weight: 700; color: var(--color-ink); }

/* Documents longs (CGV, confidentialité) : respiration entre les articles,
   listes lisibles et liens explicitement soulignés. */
.block--text :is(h2, h3) + p { margin-top: 0; }
.block--text h3 { margin-top: 2.6em; }
.block--text :is(h1, h2, h3):first-child { margin-top: 0; }
.block--text :is(ul, ol) {
    max-width: 68ch;
    margin: 0 0 1.5em;
    padding-left: 1.25em;
}
.block--text li { margin: 0 0 .6em; }
.block--text li:last-child { margin-bottom: 0; }
.block--text a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.block--text em { color: var(--color-muted); }

/* Variante fond sombre (interrupteur ACF « Fond sombre »). Réservée aux textes
   courts : on ne l'active pas sur les documents longs, illisibles en inversé. */
.block--text.is-dark {
    background: var(--color-ink);
    color: rgba(255, 253, 244, .78);
}
.block--text.is-dark :is(h1, h2, h3),
.block--text.is-dark strong { color: var(--color-inverse); }
.block--text.is-dark em { color: rgba(255, 253, 244, .6); }
.block--text.is-dark a { color: var(--color-inverse); }

/* faq */
.block--faq .container { max-width: var(--container-readable); }
.block--faq .faq-item { border-bottom: 1px solid var(--color-border); padding: 1.1rem 0; }
.block--faq .faq-item summary { cursor: pointer; font-weight: 600; list-style: none; }
.block--faq .faq-item__answer { padding-top: .75rem; color: var(--color-muted); }

/* ─────────────── Avis clients (testimonials) — premium éditorial ─────────────── */
.block--testimonials { padding: clamp(5rem, 10vw, 9rem) 0; background: var(--color-paper); }
.block--testimonials .container { max-width: 1560px; margin: 0 auto; padding: 0 var(--margin); }

.testimonials__header {
    text-align: center;
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    /* Élargi : à 720px « ILS NOUS FONT CONFIANCE » passait à la ligne. */
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}
.testimonials__eyebrow {
    margin: 0;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--color-muted);
    font-weight: 600;
}
/* Même traitement que les autres titres de section (.story__title) :
   capitales, 600, interlettrage resserré. */
.testimonials__title {
    margin: 0;
    /* Section secondaire (preuve sociale) : titre volontairement plus discret
       que les titres de recit, qui portent le discours principal.
       54,4px -> 38,4px a 2000px de large. */
    font-size: var(--fs-title-col);
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--color-ink);
}
/* Sur écran large, le titre tient sur une seule ligne (il reste libre de
   passer à la ligne en dessous, où la place manque réellement). */
@media (min-width: 901px) {
    .testimonials__title { white-space: nowrap; }
}
.testimonials__score {
    margin-top: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-ink);
}
/* Étoiles en encre, pas en ambre Google : la palette du site est monochrome
   chaude. La forme de l'étoile porte le sens, la couleur n'y ajoute rien. */
.testimonials__score-stars { display: inline-flex; gap: 3px; color: var(--color-ink); }
.testimonials__score-stars .kal-star { fill: currentColor; stroke: currentColor; }
.testimonials__score-value {
    font-size: 13px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--color-muted);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;                     /* séparation assurée par les filets ci-dessous */
}
/* Filets séparateurs : le site structure ses blocs par des traits fins
   (colonnes, récits, pied de page, menu). On applique le même vocabulaire
   plutôt que de laisser les citations flotter dans le vide. */
@media (min-width: 901px) {
    .testimonials-grid > .testimonial + .testimonial {
        border-left: 1px solid var(--color-border);
    }
    .testimonials-grid > .testimonial { padding: 0 clamp(2rem, 3.2vw, 3.5rem); }
    .testimonials-grid > .testimonial:first-child { padding-left: 0; }
    .testimonials-grid > .testimonial:last-child  { padding-right: 0; }
}
@media (max-width: 900px) {
    .testimonials-grid > .testimonial { padding-left: 0; padding-right: 0; }
    .testimonials-grid > .testimonial + .testimonial {
        border-top: 1px solid var(--color-border);
        margin-top: clamp(2rem, 7vw, 2.6rem);
        padding-top: clamp(2rem, 7vw, 2.6rem);
    }
}
.testimonials-grid[data-count="1"] { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.testimonials-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 960px; margin: 0 auto; }
.testimonials-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .testimonials-grid, .testimonials-grid[data-count] { grid-template-columns: 1fr; } }

/* Cartes sans fond ni bordure : ultra épuré, juste l'espace */
.testimonial {
    margin: 0;
    padding: 0 clamp(.5rem, 1.5vw, 1.5rem);
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Head : badge G + étoiles jaunes Google */
.testimonial__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .2rem;
}
.testimonial__google-g {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    color: var(--color-ink);
    opacity: .55;               /* discret : c'est une caution, pas un logo mis en avant */
}
.testimonial__rating { display: inline-flex; gap: 3px; color: var(--color-ink); }
.testimonial__rating .kal-star { fill: currentColor; stroke: currentColor; }

/* Signature "Avis Google" */
.testimonial__source {
    margin-top: auto;
    font-size: clamp(12px, .85vw, 13px);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--color-muted);
    font-weight: 600;
}

/* Citation : légèrement plus grande et plus aérée que du texte courant,
   pour qu'elle se lise comme une parole rapportée. */
.testimonial__text {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.7;
    color: var(--color-ink);
    font-weight: 400;
    max-width: 34ch;
}
.testimonial__text p { margin: 0; }

.testimonial__author {
    margin-top: auto;
    font-size: clamp(12px, .9vw, 13px);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-muted);
    font-weight: 600;
}
.testimonial__author-name { color: var(--color-ink); }

/* embed */
.block--embed iframe { max-width: 100%; display: block; margin: 0 auto; }

/* =========================================================
   8. PAGE / GENERIC
   ========================================================= */
.page-banner { aspect-ratio: 16/6; background-size: cover; background-position: center; margin-bottom: clamp(32px,4vw,64px); }
.page-content { max-width: var(--container-readable); margin: 0 auto; padding: var(--section-y) var(--margin); }
.page-content h1 { font-size: var(--fs-h1); margin-bottom: 1em; }
.page-content img { margin: 2rem auto; }

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

/* skip link */
.skip-link {
    position: absolute; left: 50%; top: 0; z-index: 200;
    transform: translateX(-50%) translateY(-120%);
    background: var(--color-ink); color: var(--color-paper);
    padding: .75rem 1.25rem;
    font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--track-wide);
    transition: transform var(--dur-fast) var(--ease-quart);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,72px); max-width: 1100px; margin: 0 auto; padding: 0 var(--margin); }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info p { margin-bottom: .5rem; }

/* forms */
input[type="text"], input[type="email"], input[type="search"], textarea,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    width: 100%; padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-paper);
    font-family: inherit; font-size: var(--fs-body);
    border-radius: 0; color: var(--color-ink);
}
input:focus, textarea:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.wpcf7 textarea { min-height: 150px; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer {
    /* Pied de page en clair, aligne sur la barre de navigation. */
    background: var(--color-paper);
    color: var(--color-ink);
    padding: clamp(56px, 8vw, 112px) 0 2rem;
    margin-top: var(--section-y);
}
.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}
.site-footer h4,
.site-footer .site-footer__coltitle {
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-size: var(--fs-ui);
    font-weight: 500;
    margin-bottom: 1.4rem;
    opacity: .6;
}
.site-footer a { color: var(--color-ink); opacity: .85; transition: opacity var(--dur-fast); }
.site-footer a:hover { opacity: 1; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.site-footer li { font-size: var(--fs-body); }
.site-footer__brand-text { font-size: var(--fs-body); opacity: .75; max-width: 36ch; margin-top: 1rem; }
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.1rem;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.site-footer__logo::after { display: none !important; }
.site-footer__logo:hover { opacity: .7; }
/* Sélecteur porté à (0,2,0) : WooCommerce impose `.woocommerce-page img
   { height: auto }` en (0,1,1), qui l'emportait sur `.site-footer__logo-img`
   en (0,1,0). Le logo reprenait donc sa taille naturelle sur la boutique, les
   fiches produit, le panier — soit la majorité des pages. */
.site-footer .site-footer__logo-img {
    display: block;
    width: auto;
    height: clamp(36px, 3vw, 52px);
    max-width: 240px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* dark logo → white on the dark footer */
}


.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    margin-top: clamp(40px, 5vw, 80px);
    padding-top: 1.6rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    font-size: 11px;
    /* Attenuation par la COULEUR et non par « opacity ». L'opacite d'un parent
       cree un calque : elle s'appliquait aussi au logo Webiteasy, qui ressortait
       delave, et aucun « opacity: 1 » sur l'enfant ne pouvait la defaire. La
       couleur, elle, n'affecte que le texte. Gain annexe : le contraste passe
       de 4,13:1 (sous le seuil AA pour du 11px) a 5,27:1. */
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    flex-wrap: wrap;
}
.site-footer__copy { flex: 0 0 auto; }
.site-footer__locale { flex: 0 0 auto; white-space: nowrap; }

/* Pages légales : strip horizontal très discret, séparateurs · */
.site-footer ul.site-footer__legal,
.site-footer .site-footer__legal,
ul.site-footer__legal,
nav.site-footer__legal > ul,
.site-footer__legal {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    gap: 0 .9rem !important;
    flex: 1 1 auto;
    justify-content: center !important;
    align-items: center;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-footer ul.site-footer__legal > li,
.site-footer .site-footer__legal > li,
ul.site-footer__legal > li,
.site-footer__legal > li {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: auto !important;
}
.site-footer .site-footer__legal li + li::before {
    content: "·";
    position: absolute;
    left: -.55rem;
    opacity: .5;
    font-size: 11px;
    line-height: 1;
}
.site-footer .site-footer__legal a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    transition: opacity var(--dur-fast) var(--ease-quart);
    opacity: .8;
}
.site-footer .site-footer__legal a:hover { opacity: 1; }
.site-footer .site-footer__legal a::after { display: none !important; } /* kill global underline sweep */

/* Social links — pictos discrets sous le titre */
.footer-nav--social {
    margin-bottom: 1.2rem;
}

@media (max-width: 768px) {
    .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .site-footer__legal { justify-content: flex-start; }
}

/* =========================================================
   10. WOOCOMMERCE (Pass 2 lives here — keep functional)
   ========================================================= */
.woocommerce div.product {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(28px,4vw,72px);
    max-width: var(--container); margin: clamp(40px,5vw,80px) auto; padding: 0 var(--margin);
}
@media (max-width: 768px) { .woocommerce div.product { grid-template-columns: 1fr; } }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: 100%; }
.woocommerce div.product .product_title { font-size: var(--fs-title-col); letter-spacing: var(--track-tight); }
.woocommerce div.product p.price { font-size: var(--fs-lg); font-weight: 600; }
.woocommerce div.product form.cart { margin-top: 2rem; }
.woocommerce div.product .quantity input { padding: .5rem; width: 60px; }
.woocommerce-result-count { color: var(--color-muted); font-size: var(--fs-small); }
.woocommerce-ordering select { padding: .5rem; }
.woocommerce-breadcrumb { font-size: var(--fs-small); color: var(--color-muted); margin: 1.5rem 0; text-transform: uppercase; letter-spacing: var(--track-wide); }

/* main shop padding so fixed header doesn't overlap */
.woocommerce-page:not(.has-hero) .site-main,
.page:not(.has-hero) .site-main { padding-top: 0; }

/* =========================================================
   PREMIUM SEARCH OVERLAY
   ========================================================= */
.kal-search {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}
.kal-search[hidden] { display: none; }
.kal-search.is-open { visibility: visible; pointer-events: auto; }

.kal-search__backdrop {
    position: absolute; inset: 0;
    background: rgba(22,17,13,0);
    transition: background-color var(--dur-base) var(--ease-quart);
}
.kal-search.is-open .kal-search__backdrop { background-color: rgba(22,17,13,0.4); }

.kal-search__panel {
    position: relative;
    background: var(--color-paper);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-expo);
    will-change: transform;
    max-height: 100vh;
    overflow-y: auto;
}
.kal-search.is-open .kal-search__panel { transform: translateY(0); }

.kal-search__form {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 3vw, 36px) var(--margin);
    border-bottom: 1px solid var(--color-border);
}
.kal-search__icon { display: inline-flex; opacity: .7; }
.kal-search__icon .kal-icon { width: 26px; height: 26px; }
.kal-search__input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: var(--track-tight);
    line-height: 1.1;
    padding: 4px 0;
    outline: 0;
    min-width: 0;
}
.kal-search__input::placeholder { color: var(--color-muted); opacity: .7; }
.kal-search__input::-webkit-search-cancel-button { display: none; }
.kal-search__submit {
    background: none; border: 0; color: inherit; cursor: pointer;
    font-size: clamp(20px, 2vw, 28px);
    padding: 8px 12px;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.kal-search__submit:hover { opacity: .6; }
.kal-search__close { margin-left: 4px; }

.kal-search__results {
    padding: clamp(16px, 2vw, 28px) var(--margin) clamp(24px, 3vw, 40px);
    max-width: var(--container);
    margin: 0 auto;
}
.kal-search__heading {
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--color-muted);
    margin: 0 0 12px;
    font-weight: 500;
}
.kal-search__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.kal-search__item {
    border-top: 1px solid var(--color-border);
}
.kal-search__item:last-child { border-bottom: 1px solid var(--color-border); }
.kal-search__link {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 8px;
    min-height: 88px;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-quart);
}
.kal-search__link:hover,
.kal-search__item.is-active .kal-search__link {
    background-color: var(--color-bg-alt);
}
.kal-search__thumb {
    width: 60px; height: 80px;
    flex: 0 0 60px;
    background: var(--color-bg-alt);
    overflow: hidden;
}
.kal-search__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kal-search__meta {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.kal-search__title {
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kal-search__cat {
    font-size: var(--fs-small);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
}
.kal-search__price {
    font-size: var(--fs-ui);
    color: var(--color-ink);
}
.kal-search__price del { color: var(--color-muted); margin-right: .4em; }

.kal-search__empty {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: var(--fs-body);
}
.kal-search__view-all {
    display: inline-block;
    margin-top: 22px;
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-weight: 500;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.kal-search__view-all:hover { opacity: .6; }
.kal-search__live {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

body.kal-search-open { overflow: hidden; }

@media (max-width: 768px) {
    .kal-search__form { padding: 14px var(--margin); gap: 10px; }
    .kal-search__icon .kal-icon { width: 22px; height: 22px; }
    .kal-search__input { font-size: clamp(20px, 6vw, 32px); }
    .kal-search__panel { min-height: 100vh; }
    .kal-search__link { min-height: 64px; }
    .kal-search__thumb { width: 48px; height: 64px; flex-basis: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .kal-search__panel,
    .kal-search__backdrop { transition: none !important; }
}

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

/* =========================================================
   HELVETICA TYPOGRAPHY OVERRIDE — titres 600, body 400
   Doit rester en fin de fichier pour gagner la cascade.
   ========================================================= */
html, body, button, input, select, textarea {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-body); /* 400 */
}
p, li, label, span, dd, dt, td, th, blockquote, figcaption, small {
    font-weight: var(--font-weight-body);
}

/* Titres : Archivo 400 (voir --fw-title). Cette liste ne porte plus de
   graisse — elle est definie une seule fois, dans le bloc d'harmonisation
   des titres. */
h1, h2, h3, h4, h5, h6,
.hero__title, .page-hero__title, .kal-shop__title,
.kal-pdp__title, .kal-related__title,
.section-title, .column__title, .kal-card__title {
    font-weight: var(--fw-title);
}

/* Libelles d'interface et gras du contenu : ils gardent leur graisse.
   Ils etaient groupes avec les titres ci-dessus ; abaisser l'ensemble a 400
   aurait fait disparaitre le gras des textes de la boutique. */
.feature-grid__eyebrow,
.kal-pdp__stock, .block--carousel__caption,
.kal-megamenu__title, .kal-megamenu__feature-title,
.kal-cats__item.is-active,
.site-logo--text, .site-logo__word,
.kal-accordion__trigger,
.site-footer h4, .site-footer .site-footer__coltitle {
    font-weight: var(--font-weight-title);
}
strong, b { font-weight: 700; }

/* Tout le reste (nav, boutons, sélecteurs, body, UI) → 400 strictement */
.main-nav a, .footer-nav a, .kal-cats__item:not(.is-active),
.kal-megamenu__list a, .mobile-drawer a,
.btn, .button, .wp-block-button__link,
.kal-pdp .single_add_to_cart_button, .kal-btn-primary,
.kal-shop__sort select, .kal-shop__filters-btn,
input, select, textarea {
    font-weight: var(--font-weight-body);
}

/* =========================================================
   FOOTER — wordmark géant + crédit Webiteasy
   ========================================================= */
/* Crédit création — au-dessus du wordmark */
.site-footer__credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    text-align: center;
    padding: clamp(1.6rem, 3vw, 2.6rem) var(--margin) clamp(1.2rem, 2.5vw, 2rem);
    border-top: 1px solid var(--color-border);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-muted);
}
.site-footer__credit-link {
    display: inline-flex;
    align-items: center;
    transition: opacity var(--dur-fast) var(--ease-quart);
}
.site-footer__credit-link:hover { opacity: .7; }
.site-footer__credit-link::after { display: none !important; }
.site-footer__credit-logo {
    height: clamp(20px, 1.8vw, 28px) !important;
    width: auto !important;
    /* Pas de max-width : le logo fait 600x138 (ratio 4,35), donc ~122px de large
       à 28px de haut. L'ancien plafond de 96px l'aurait comprimé horizontalement
       puisque la hauteur est imposée. */
    max-width: none !important;
    object-fit: contain;
    display: block;
}

/* Wordmark géant tout en bas */
.site-footer__wordmark {
    overflow: hidden;
    line-height: .8;
    padding: 0 0 clamp(1rem, 2vw, 1.6rem);
    text-align: center;
}
.site-footer__wordmark span {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(3.5rem, 19vw, 22rem);
    line-height: .82;
    color: var(--color-paper);
    white-space: nowrap;
}
/* Logo géant (image) en remplacement du wordmark texte. */
.site-footer__wordmark--logo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Marges haute et basse resserrées autour du logo géant. */
    padding: clamp(.8rem, 1.6vw, 1.6rem) clamp(1rem, 3vw, 2rem) clamp(.4rem, 1vw, .8rem);
}
.site-footer__wordmark-img {
    display: block;
    width: clamp(260px, 70vw, 1100px);
    height: auto;
    max-width: 100%;
    filter: brightness(0) invert(1); /* logo noir → blanc sur fond sombre */
    object-fit: contain;
}

/* =============================================================
   BLOC TEXTE — emplacement icône (droite en desktop / dessous en mobile)
   ============================================================= */
.block--text__inner { display: block; }
.block--text.has-icon .block--text__inner {
    display: flex;
    flex-direction: column;      /* mobile : icône SOUS le texte */
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}
.block--text__body { min-width: 0; }
.block--text__icon { flex: 0 0 auto; line-height: 0; }
.block--text__icon img {
    display: block;
    width: auto;
    height: clamp(56px, 7vw, 104px);
    max-width: 100%;
    object-fit: contain;
}
@media (min-width: 900px) {
    .block--text.has-icon .block--text__inner {
        flex-direction: row;     /* desktop : icône À DROITE du texte */
        align-items: center;
        justify-content: space-between;
        gap: clamp(2rem, 5vw, 5rem);
    }
    .block--text.has-icon .block--text__body { flex: 1 1 auto; }
}
/* Sur fond sombre, une icône encre serait invisible : on l'éclaircit. */
.block--text.is-dark .block--text__icon img { filter: brightness(0) invert(1); }

/* --- Menu mobile : sous-navigation Boutique (imbriquée par JS) --- */
.mobile-drawer__primary li.has-subnav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: .5rem;
}
.mobile-drawer__expand {
    background: none; border: 0; cursor: pointer; padding: 0 .25rem;
    color: var(--color-ink);
    font-size: 26px; font-weight: 300; line-height: 1;
    justify-self: end;
}
.mobile-drawer__subnav {
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s var(--ease-expo), opacity .3s var(--ease-quart);
}
.mobile-drawer__primary li.has-subnav.is-open .mobile-drawer__subnav {
    max-height: 60vh;
    opacity: 1;
    overflow-y: auto;
    margin-top: .6rem;
}

/* --- Menu mobile : hiérarchie des 3 niveaux --- */
/* 1. Entrées principales : grandes (règle plus haut)
   2. Catégories (Homme, Femme…) : petite capitale espacée
   3. Sous-catégories : discrètes, alignées sous leur parent */
.mobile-drawer__subnav .mobile-drawer__cat > summary {
    /* En 12px, Homme/Femme/Accessoires disparaissaient a cote des entrees
       principales (~40px) et la cible tactile faisait ~35px de haut. On les
       remonte a une vraie taille intermediaire, cible >= 44px. */
    font-size: clamp(17px, 1rem + .5vw, 20px);
    letter-spacing: .12em;
    color: var(--color-muted);
    padding: .9rem 0;
}
.mobile-drawer__subnav .mobile-drawer__cat[open] > summary { color: var(--color-ink); }
.mobile-drawer .mobile-drawer__subnav .mobile-drawer__cat ul a {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    color: var(--color-muted);
    /* Cible tactile confortable pour chaque sous-categorie. */
    display: block;
    padding: .35rem 0;
}
.mobile-drawer .mobile-drawer__subnav .mobile-drawer__cat ul a:hover { color: var(--color-ink); }
.mobile-drawer__subnav .mobile-drawer__cat ul { padding-left: .9rem; gap: .35rem; }
/* Le « + » suit la taille de son entrée */
.mobile-drawer__subnav .mobile-drawer__cat > summary::after { font-size: 18px; }

/* --- Hero : CTA en lien souligné plutôt qu'en bouton plein --- */
/* Un bouton crème plein concurrençait visuellement l'accroche. On garde
   l'affordance (soulignement + flèche) sans le pavé. */
.hero__inner .btn,
.hero--block .btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--color-inverse) !important;
    padding: .35rem 0 !important;
    border-bottom: 1px solid rgba(255, 253, 244, .55) !important;
    border-radius: 0 !important;
    transition: border-color var(--dur-fast) var(--ease-quart),
                gap var(--dur-fast) var(--ease-quart) !important;
}
.hero__inner .btn:hover,
.hero--block .btn:hover {
    background: transparent !important;
    color: var(--color-inverse) !important;
    border-bottom-color: var(--color-inverse) !important;
}
/* Les fonds/voiles décoratifs du bouton global n'ont plus lieu d'être ici. */
.hero__inner .btn::before,
.hero--block .btn::before,
.hero__inner .btn::after,
.hero--block .btn::after { display: none !important; }

/* --- Tablette / mobile : logo centré dans la navbar --- */
/* La navigation centrale est masquée sous 900px : le logo restait collé au
   burger, en haut à gauche. On répartit en trois colonnes egales et on place
   le logo au centre. « display: contents » sort le burger et le logo de leur
   conteneur commun pour en faire des elements de grille a part entiere,
   sans toucher au balisage. */
@media (max-width: 900px) {
    .site-header__inner { grid-template-columns: 1fr auto 1fr; }
    .header-col--left { display: contents; }
    .nav-toggle { grid-column: 1; justify-self: start; }
    .site-logo   { grid-column: 2; justify-self: center; }
    .header-col--right { grid-column: 3; justify-self: end; }
}

/* =============================================================
   GARDE-FOU — aucun défilement horizontal parasite
   ============================================================= */
/* « clip » et non « hidden » : hidden cree un contexte de defilement qui
   casse position:sticky (navbar, barre de categories). clip coupe le
   debordement sans cet effet de bord. */
html { overflow-x: clip; }

/* Footer : wordmark géant moins envahissant sur tablette */
@media (max-width: 1024px) {
    .site-footer__wordmark-img { width: clamp(220px, 52vw, 620px); }
}