/* ==========================================================================
   MATIÈRE À CRÉATION — MINÉRAL DIRECT (couche V2, additive et réversible)
   ==========================================================================
   Namespaces principaux de ce fichier : .mac-md-* .mac-home-v2-* .mac-kit-v2-*
   Exception approuvée 2026-09-03 : la section NAVIGATION MINÉRALE V2 surcharge
   additivement les sélecteurs globaux existants du header (.mac-header/.mac-nav/
   .mac-mobile-*) afin de moderniser le menu sans toucher à sa logique ni au cockpit.
   Ne modifie JAMAIS les variables/règles existantes dans mac-theme.css : les
   corrections restent ici, chargées après mac-theme.css, donc réversibles.
   Chargé après mac-theme.css via templates/_partials/head.tpl (mécanisme validé sur cet hébergement).
   ========================================================================== */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
    --md-ink:   #20211E;
    --md-chalk: #FCFBF8;
    --md-stone: #E8E2D8;
    --md-earth: #E65F42;
    --md-blue:  #3157D5;
    --md-sun:   #F2D44C;

    /* Accents Minéral Direct (or / ocre / vert / fonds profonds) — valeurs
       d'origine conservées ici pour la réversibilité ; remappés sur la
       palette Pulse 02 dans mac-pulse02.css (audit É1, 2026-10-15). */
    --md-gold: #d99a45;
    --md-gold-soft: #e6aa59;
    --md-gold-pale: #e5c189;
    --md-ochre: #b06a1f;
    --md-ochre-soft: #a56b23;
    --md-green: #1f9d55;
    --md-green-soft: #5d8b70;
    --md-deep: #101b1b;
    --md-deep-2: #172726;
    --md-deep-3: #162524;
    --md-deep-4: #102022;
    --md-earth-hover: #d1503a;
    --md-sand: #e9e4dc;
    --md-beige: #c8b7a4;
    --md-alert: #c94b3f;

    /* Triplettes RGB (pour les teintes alpha : scrims, halos, ombres) —
       valeurs d'origine ; remappées dans mac-pulse02.css. */
    --md-ink-rgb: 32, 33, 30;
    --md-gold-rgb: 217, 154, 69;
    --md-earth-rgb: 230, 95, 66;
    --md-blue-rgb: 49, 87, 213;
    --md-ochre-rgb: 176, 106, 31;
    --md-sand-rgb: 232, 226, 216;
    --md-chalk-rgb: 252, 251, 248;

    --md-radius-btn:    8px;
    --md-radius-card:   11px;
    --md-radius-block:  14px;

    --md-shadow-sm: 0 1px 2px rgba(var(--md-ink-rgb), 0.06);
    --md-shadow-md: 0 4px 16px rgba(var(--md-ink-rgb), 0.08);

    --md-space-1: 8px;
    --md-space-2: 12px;
    --md-space-3: 16px;
    --md-space-4: 24px;
    --md-space-5: 32px;
    --md-space-6: 48px;
    --md-space-7: 64px;
    --md-space-8: 80px;
    --md-space-9: 96px;

    --md-container-max: 1320px;
    --md-gutter: 24px;

    --md-transition-fast: 180ms ease;

    --md-font-title: 'Space Grotesk', 'Poppins', system-ui, sans-serif;
    --md-font-body:  'Manrope', 'Montserrat', system-ui, sans-serif;
}

@media (max-width: 991px) {
    :root { --md-gutter: 20px; }
}
@media (max-width: 767px) {
    :root { --md-gutter: 16px; }
}

/* ==========================================================================
   LAYOUT / GRID
   ========================================================================== */
.mac-md-container {
    max-width: var(--md-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--md-gutter);
    padding-right: var(--md-gutter);
    box-sizing: border-box;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.mac-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 28px;
    border-radius: var(--md-radius-btn);
    font-family: var(--md-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color var(--md-transition-fast), color var(--md-transition-fast),
        border-color var(--md-transition-fast), transform var(--md-transition-fast);
    white-space: nowrap;
}
.mac-md-btn:active { transform: translateY(1px); }
.mac-md-btn:focus-visible {
    outline: 2px solid var(--md-blue);
    outline-offset: 2px;
}
.mac-md-btn[disabled],
.mac-md-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.mac-md-btn.is-loading { opacity: .75; cursor: wait; }

.mac-md-btn--primary {
    background: var(--md-earth);
    color: var(--md-chalk);
    border-color: var(--md-earth);
}
.mac-md-btn--primary:hover { background: var(--md-earth-hover); border-color: var(--md-earth-hover); }

.mac-md-btn--secondary {
    background: transparent;
    color: var(--md-blue);
    border-color: var(--md-blue);
}
.mac-md-btn--secondary:hover { background: rgba(var(--md-blue-rgb), 0.08); }

.mac-md-btn--ghost {
    background: transparent;
    color: var(--md-ink);
    border-color: var(--md-stone);
}
.mac-md-btn--ghost:hover { border-color: var(--md-ink); }

/* ==========================================================================
   CARDS (base partagée par les blocs V2)
   ========================================================================== */
.mac-md-card {
    background: var(--md-chalk);
    border: 1px solid var(--md-stone);
    border-radius: var(--md-radius-card);
    transition: border-color var(--md-transition-fast), transform var(--md-transition-fast);
}
.mac-md-card:hover {
    border-color: var(--md-ink);
}

/* ==========================================================================
   HERO / SLIDER — MINÉRAL DIRECT
   Référence visuelle : maquette validée 2026-09-01.
   Le variant reste techniquement "mineral_direct_split" pour compatibilité
   avec les données déjà stockées, mais le rendu est désormais un HERO
   photographique plein cadre, et non deux panneaux juxtaposés.
   ========================================================================== */
.mac-hero__slide--mineral-direct {
    position: relative;
    overflow: hidden;
    background: var(--md-ink);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split {
    position: relative;
    min-height: clamp(500px, 52vw, 670px);
    display: flex;
    align-items: center;
    isolation: isolate;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__media picture,
.mac-hero__slide--mineral-direct .mac-md-hero-split__media img,
.mac-hero__slide--mineral-direct .mac-md-hero-split__media video {
    width: 100%;
    height: 100%;
    display: block;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__media img,
.mac-hero__slide--mineral-direct .mac-md-hero-split__media video {
    object-fit: cover;
    object-position: center center;
    transform: scale(1.002);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(var(--md-ink-rgb), .92) 0%,
            rgba(var(--md-ink-rgb), .80) 31%,
            rgba(var(--md-ink-rgb), .42) 55%,
            rgba(var(--md-ink-rgb), .10) 78%,
            rgba(var(--md-ink-rgb), .03) 100%);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__text {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 58px var(--md-gutter) 64px;
    color: #fff;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__content {
    max-width: 610px;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 18px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 6px;
    background: rgba(var(--md-ink-rgb), .42);
    color: rgba(255,255,255,.92);
    font-family: var(--md-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__title {
    max-width: 590px;
    margin: 0 0 18px;
    padding: 0;
    color: #fff;
    font-family: var(--md-font-title);
    font-size: clamp(42px, 5.4vw, 74px);
    font-weight: 650;
    line-height: .99;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__subtitle {
    max-width: 540px;
    margin: 0 0 26px;
    color: rgba(255,255,255,.88);
    font-family: var(--md-font-body);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.55;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn--primary {
    background: var(--md-earth);
    border-color: var(--md-earth);
    color: #fff;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn--primary:hover {
    background: var(--md-earth-hover);
    border-color: var(--md-earth-hover);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn--secondary {
    background: rgba(var(--md-ink-rgb), .22);
    border-color: rgba(255,255,255,.72);
    color: #fff;
    backdrop-filter: blur(4px);
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn--secondary:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}
.mac-hero__slide--mineral-direct .mac-md-hero-split__proof {
    max-width: 370px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.72);
    font-family: var(--md-font-body);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split {
        min-height: 470px;
        align-items: flex-end;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split::after {
        background:
            linear-gradient(180deg,
                rgba(var(--md-ink-rgb), .20) 0%,
                rgba(var(--md-ink-rgb), .42) 34%,
                rgba(var(--md-ink-rgb), .88) 100%);
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__media img,
    .mac-hero__slide--mineral-direct .mac-md-hero-split__media video {
        object-position: center center;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__text {
        padding: 42px 18px 52px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__content {
        max-width: 440px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__badge {
        margin-bottom: 12px;
        font-size: 10px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__title {
        font-size: clamp(36px, 11vw, 50px);
        line-height: 1.01;
        margin-bottom: 14px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__subtitle {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 20px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__ctas {
        gap: 9px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn {
        height: 46px;
        padding: 0 18px;
        font-size: 13px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__proof {
        display: none;
    }

    /* --------------------------------------------------------------------------
       Hauteur du SLIDER pilotée par le contenu réel du hero (correctif 2026-09-04).
       CAUSE : .mac-hero__slider (mac-theme.css) impose une hauteur FIXE (clamp
       viewport-relative, ex. min(620px,72svh)) et .mac-hero__slide est
       `position:absolute;inset:0` (indispensable au fondu enchaîné entre slides)
       — un enfant absolument positionné ne peut jamais agrandir son parent, donc
       le bloc texte du hero mineral-direct (badge + titre 3 lignes + sous-titre +
       2 CTA + paddings) pouvait dépasser cette hauteur fixe et se faire tronquer
       par l'`overflow:hidden` du slider/du slide — coupant le CTA secondaire et
       collant la section suivante juste en dessous.
       FIX : sur mobile, la hauteur du slider n'est plus fixe mais pilotée par
       `--mac-hero-min-h`, une variable CSS mesurée et pausée dynamiquement par
       mac-mineral-direct.js d'après la hauteur RÉELLE du contenu du hero actif
       (jamais une valeur en dur) — 500px reste seulement le plancher de secours
       avant que le JS n'ait mesuré (identique au plancher déjà existant côté
       mac-theme.css, donc aucune régression si le JS échoue/est désactivé).
       Spécificité de `:has()` (0,2,0) l'emporte naturellement sur la règle
       `.mac-hero__slider{height:...}` de mac-theme.css (0,1,0), sans !important. */
    .mac-hero__slider:has(.mac-hero__slide--mineral-direct) {
        height: auto;
        min-height: var(--mac-hero-min-h, 500px);
    }
}

/* ==========================================================================
   HOME BUILDER V2 — DIRECTION ARTISTIQUE MINÉRAL DIRECT
   Le backend Home Builder reste inchangé. La couche ci-dessous transforme
   les 5 blocs dédiés en composition éditoriale, photographique et aérée.
   ========================================================================== */
.page-home > .mac-block,
.page-home [class^="mac-home-v2-"] {
    box-sizing: border-box;
}
[class^="mac-home-v2-"] {
    font-family: var(--md-font-body);
    color: var(--md-ink);
}
[class^="mac-home-v2-"] h2 {
    margin: 0;
    padding: 0;
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-weight: 650;
    letter-spacing: -.025em;
}

/* --------------------------------------------------------------------------
   RÉASSURANCE CLAIRE — la bande immédiatement sous le hero
   -------------------------------------------------------------------------- */
.mac-home-v2-reassurance:not(.mac-home-v2-reassurance--dark) {
    padding: 28px 0;
    background: #fff;
    border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
}
.mac-home-v2-reassurance:not(.mac-home-v2-reassurance--dark) .mac-home-v2-reassurance__title {
    display: none;
}
.mac-home-v2-reassurance__row {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 0 var(--md-gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.mac-home-v2-reassurance__item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 24px;
    color: var(--md-ink);
    text-decoration: none;
    border-right: 1px solid rgba(var(--md-ink-rgb),.09);
}
.mac-home-v2-reassurance__item:last-child { border-right: 0; }
.mac-home-v2-reassurance__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--md-ink);
}
.mac-home-v2-reassurance__icon svg { width: 100%; height: 100%; }
.mac-home-v2-reassurance__label {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}
.mac-home-v2-reassurance__text {
    display: block;
    margin-top: 3px;
    color: rgba(var(--md-ink-rgb),.58);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   PROJECT FINDER — cartes photographiques, pas des widgets à icônes
   -------------------------------------------------------------------------- */
.mac-home-v2-finder {
    padding: 56px 0 62px;
    background: var(--md-chalk);
}
.mac-home-v2-finder__head {
    width: min(100%, var(--md-container-max));
    margin: 0 auto 24px;
    padding: 0 var(--md-gutter);
    text-align: center;
}
.mac-home-v2-finder__title {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
}
.mac-home-v2-finder__grid {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 0 var(--md-gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}
.mac-home-v2-finder__card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(170px, 1fr) auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--md-ink-rgb),.10);
    border-radius: 10px;
    color: var(--md-ink);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(var(--md-ink-rgb),.035);
    transition: transform var(--md-transition-fast), box-shadow var(--md-transition-fast), border-color var(--md-transition-fast);
}
.mac-home-v2-finder__card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--md-ink-rgb),.22);
    box-shadow: 0 10px 28px rgba(var(--md-ink-rgb),.09);
}
.mac-home-v2-finder__card--disabled {
    cursor: default;
    opacity: .65;
}
.mac-home-v2-finder__card--disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(var(--md-ink-rgb),.035);
}
/* Carte devenue un <div> (2026-09-09, stratégie "3 portes + aide Bilan") —
   le lien principal devient un calque étiré cliquable en dessous du contenu,
   ce qui libère la place pour une 2e action (sub-action) cliquable au-dessus. */
.mac-home-v2-finder__card-stretch {
    position: absolute;
    inset: 0;
    /* z-index:1, PAS 0 — .mac-home-v2-finder__media/__body sont eux-memes
       position:relative (z-index:auto) et viennent APRES ce lien dans le DOM :
       avec z-index:0 (traite comme z-index:auto pour l'ordre de peinture),
       ils passeraient AU-DESSUS et intercepteraient tous les clics reels sur
       la photo/le texte — seule une zone de padding vide resterait cliquable.
       Bug reel trouve par E2E Playwright (locator.click timeout) le 2026-09-09,
       jamais visible sur une simple inspection HTML/CSS statique. */
    z-index: 1;
    text-decoration: none;
}
.mac-home-v2-finder__media {
    position: relative;
    display: block;
    min-height: 180px;
    overflow: hidden;
    background: var(--md-sand);
}
.mac-home-v2-finder__media img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 360ms ease;
}
.mac-home-v2-finder__card:hover .mac-home-v2-finder__media img { transform: scale(1.025); }
.mac-home-v2-finder__icon-fallback {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: rgba(var(--md-ink-rgb),.64);
}
.mac-home-v2-finder__icon-fallback svg { width: 54px; height: 54px; }
/* Badge icône superposé quand une photo a été choisie (sinon l'icône
   disparaissait totalement derrière l'image — bug signalé 2026-09-02) */
.mac-home-v2-finder__icon-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 4px 14px rgba(var(--md-ink-rgb),.18);
    backdrop-filter: blur(3px);
    color: var(--md-ink, #20211e);
    box-sizing: border-box;
}
.mac-home-v2-finder__icon-badge svg { width: 100%; height: 100%; }
.mac-home-v2-finder__body {
    position: relative;
    display: block;
    min-height: 108px;
    padding: 16px 42px 17px 16px;
}
.mac-home-v2-finder__label {
    display: block;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.28;
}
.mac-home-v2-finder__desc {
    display: block;
    margin-top: 7px;
    color: rgba(var(--md-ink-rgb),.62);
    font-size: 11.5px;
    line-height: 1.4;
}
.mac-home-v2-finder__arrow {
    position: absolute;
    right: 16px;
    bottom: 17px;
    font-size: 18px;
    line-height: 1;
    color: var(--md-earth);
    transition: transform var(--md-transition-fast);
}
.mac-home-v2-finder__card:hover .mac-home-v2-finder__arrow { transform: translateX(3px); }
.mac-home-v2-finder__subaction {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--md-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mac-home-v2-finder__subaction:hover { color: var(--md-ink); }
.mac-home-v2-finder__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 8px;
    border-radius: 5px;
    background: var(--md-sun);
    color: var(--md-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   CALCULATEUR — bande éditoriale sombre + grande image matière
   -------------------------------------------------------------------------- */
.mac-home-v2-calc {
    padding: 0 0 64px;
    background: var(--md-chalk);
}
.mac-home-v2-calc__inner {
    width: min(calc(100% - (var(--md-gutter) * 2)), var(--md-container-max));
    min-height: 320px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--md-deep);
    color: #fff;
    box-shadow: 0 10px 34px rgba(var(--md-ink-rgb),.08);
}
.mac-home-v2-calc--blue .mac-home-v2-calc__inner,
.mac-home-v2-calc--ink .mac-home-v2-calc__inner,
.mac-home-v2-calc--stone .mac-home-v2-calc__inner {
    background: var(--md-deep);
    color: #fff;
}
.mac-home-v2-calc__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 42px 44px;
}
.mac-home-v2-calc__kicker {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.mac-home-v2-calc__title {
    max-width: 470px;
    margin: 0 0 15px;
    color: #fff;
    font-family: var(--md-font-title);
    font-size: clamp(29px, 3.4vw, 45px);
    font-weight: 650;
    line-height: 1.03;
    letter-spacing: -.035em;
    text-align: left;
}
.mac-home-v2-calc__body {
    max-width: 430px;
    margin: 0 0 24px;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    line-height: 1.55;
}
.mac-home-v2-calc__text .mac-md-btn--primary {
    background: var(--md-gold);
    border-color: var(--md-gold);
    color: var(--md-ink);
}
.mac-home-v2-calc__text .mac-md-btn--primary:hover {
    background: var(--md-gold-soft);
    border-color: var(--md-gold-soft);
}
.mac-home-v2-calc__media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}
.mac-home-v2-calc__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--md-ink-rgb),.44), rgba(var(--md-ink-rgb),0) 34%);
}
.mac-home-v2-calc__media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   PRODUITS EN VEDETTE — cartes e-commerce sobres et photographiques
   -------------------------------------------------------------------------- */
.mac-home-v2-featured {
    padding: 62px 0 64px;
    background: #fff;
}
.mac-home-v2-featured__head {
    width: min(100%, var(--md-container-max));
    margin: 0 auto 26px;
    padding: 0 var(--md-gutter);
    text-align: center;
}
.mac-home-v2-featured__title {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
}
.mac-home-v2-featured__subtitle {
    max-width: 680px;
    margin: 8px auto 0;
    color: rgba(var(--md-ink-rgb),.60);
    font-size: 13px;
    line-height: 1.5;
}
.mac-home-v2-featured__grid {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 0 var(--md-gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.mac-home-v2-featured__card {
    min-width: 0;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--md-ink-rgb),.10);
    border-radius: 9px;
    color: var(--md-ink);
    text-decoration: none;
    transition: transform var(--md-transition-fast), box-shadow var(--md-transition-fast), border-color var(--md-transition-fast);
}
.mac-home-v2-featured__card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--md-ink-rgb),.22);
    box-shadow: 0 10px 28px rgba(var(--md-ink-rgb),.08);
}
.mac-home-v2-featured__img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--md-chalk);
}
.mac-home-v2-featured__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 360ms ease;
}
.mac-home-v2-featured__card:hover .mac-home-v2-featured__img img { transform: scale(1.02); }
.mac-home-v2-featured__body {
    display: block;
    padding: 14px 15px 16px;
}
.mac-home-v2-featured__name {
    display: block;
    min-height: 2.45em;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
}
.mac-home-v2-featured__price {
    display: block;
    margin-top: 8px;
    color: var(--md-ink);
    font-size: 13px;
    font-weight: 750;
}
.mac-home-v2-featured__oos {
    display: block;
    margin-top: 4px;
    color: rgba(var(--md-ink-rgb),.54);
    font-size: 10px;
}
.mac-home-v2-featured__link {
    display: block;
    margin-top: 11px;
    color: var(--md-ochre-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mac-home-v2-featured__cta {
    margin-top: 24px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   BANDEAU DE PREUVES — contraste fort, sans effet dashboard
   -------------------------------------------------------------------------- */
.mac-home-v2-reassurance--dark {
    position: relative;
    overflow: hidden;
    padding: 34px 0;
    background: var(--md-deep);
    color: #fff;
}
.mac-home-v2-reassurance--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        radial-gradient(circle at 16% 16%, rgba(var(--md-earth-rgb),.22), transparent 24%),
        radial-gradient(circle at 84% 72%, rgba(var(--md-blue-rgb),.17), transparent 26%);
}
.mac-home-v2-reassurance--dark .mac-home-v2-reassurance__title { display: none; }
.mac-home-v2-reassurance--dark .mac-home-v2-reassurance__row { position: relative; z-index: 1; }
.mac-home-v2-reassurance--dark .mac-home-v2-reassurance__item {
    color: #fff;
    border-right-color: rgba(255,255,255,.12);
}
.mac-home-v2-reassurance--dark .mac-home-v2-reassurance__icon { color: #fff; }
.mac-home-v2-reassurance--dark .mac-home-v2-reassurance__text { color: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   INSPIRATIONS — grande bande photographique, 4 cartes desktop
   -------------------------------------------------------------------------- */
.mac-home-v2-inspiration {
    padding: 58px 0 64px;
    background: #fff;
}
.mac-home-v2-inspiration__head {
    width: min(100%, var(--md-container-max));
    margin: 0 auto 22px;
    padding: 0 var(--md-gutter);
    text-align: center;
}
.mac-home-v2-inspiration__title {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
}
.mac-home-v2-inspiration__strip {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 0 var(--md-gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.mac-home-v2-inspiration__item {
    position: relative;
    min-width: 0;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    background: var(--md-sand);
}
.mac-home-v2-inspiration__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--md-ink-rgb),0) 45%, rgba(var(--md-ink-rgb),.72) 100%);
    pointer-events: none;
}
.mac-home-v2-inspiration__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 420ms ease;
}
.mac-home-v2-inspiration__item:hover img { transform: scale(1.025); }
.mac-home-v2-inspiration__caption {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   RESPONSIVE HOME
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .mac-home-v2-reassurance__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mac-home-v2-reassurance__item:nth-child(2n) { border-right: 0; }
    .mac-home-v2-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mac-home-v2-inspiration__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .mac-home-v2-reassurance:not(.mac-home-v2-reassurance--dark) {
        padding: 20px 0;
    }
    .mac-home-v2-reassurance__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mac-home-v2-reassurance__item,
    .mac-home-v2-reassurance__item:nth-child(2n) {
        justify-content: flex-start;
        padding: 10px 4px;
        border-right: 0;
        border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
    }
    .mac-home-v2-reassurance__item:last-child { border-bottom: 0; }
    .mac-home-v2-reassurance--dark .mac-home-v2-reassurance__item {
        border-bottom-color: rgba(255,255,255,.10);
    }
    .mac-home-v2-finder {
        padding: 42px 0 46px;
    }
    .mac-home-v2-finder__head {
        margin-bottom: 18px;
        text-align: left;
    }
    .mac-home-v2-finder__title { font-size: 28px; }
    .mac-home-v2-finder__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .mac-home-v2-finder__card {
        flex: 0 0 min(82vw, 310px);
        scroll-snap-align: start;
        grid-template-rows: 160px auto;
    }
    .mac-home-v2-finder__media,
    .mac-home-v2-finder__media img,
    .mac-home-v2-finder__icon-fallback {
        min-height: 160px;
    }
    .mac-home-v2-calc {
        padding-bottom: 48px;
    }
    .mac-home-v2-calc__inner {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .mac-home-v2-calc__text {
        padding: 30px 24px 28px;
    }
    .mac-home-v2-calc__title {
        font-size: 31px;
    }
    .mac-home-v2-calc__media {
        min-height: 210px;
        order: 2;
    }
    .mac-home-v2-calc__media img { min-height: 210px; }
    .mac-home-v2-calc__media::after {
        background: linear-gradient(180deg, rgba(var(--md-ink-rgb),.26), rgba(var(--md-ink-rgb),0) 40%);
    }
    .mac-home-v2-featured {
        padding: 48px 0 50px;
    }
    .mac-home-v2-featured__head {
        text-align: left;
        margin-bottom: 18px;
    }
    .mac-home-v2-featured__title { font-size: 28px; }
    .mac-home-v2-featured__subtitle { margin-left: 0; }
    .mac-home-v2-featured__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .mac-home-v2-featured__body {
        padding: 11px 11px 13px;
    }
    .mac-home-v2-featured__name {
        min-height: 0;
        font-size: 12px;
    }
    .mac-home-v2-featured__price { font-size: 11px; }
    .mac-home-v2-featured__link { font-size: 9px; }
    .mac-home-v2-inspiration {
        padding: 46px 0 50px;
    }
    .mac-home-v2-inspiration__head {
        margin-bottom: 16px;
        text-align: left;
    }
    .mac-home-v2-inspiration__title { font-size: 28px; }
    .mac-home-v2-inspiration__strip {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .mac-home-v2-inspiration__item {
        flex: 0 0 min(78vw, 285px);
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   KIT PRODUCT PAGE (refonte "Minéral Direct" §18-§23) — additif, gated
   $mac_kit_front.is_kit côté Smarty (product.tpl / product-buy-zone.tpl).
   Aucune règle ici n'affecte un produit standard (mac_kit_front absent).
   ========================================================================== */
.mac-kit-v2-badge {
    position: absolute;
    top: var(--md-space-2);
    left: var(--md-space-2);
    z-index: 5;
    background: var(--md-earth);
    color: var(--md-chalk);
    font-family: var(--md-font-body);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: var(--md-radius-btn);
}
.mac-kit-v2-composition {
    background: var(--md-chalk);
    border: 1px solid var(--md-stone);
    border-radius: var(--md-radius-card);
    padding: var(--md-space-3);
    margin: var(--md-space-2) 0;
}
.mac-kit-v2-coverage {
    margin: 0 0 var(--md-space-2);
    font-weight: 700;
    color: var(--md-ink);
}
.mac-kit-v2-coverage__m2price {
    font-weight: 400;
    color: rgba(var(--md-ink-rgb), .65);
    margin-left: 6px;
}
.mac-kit-v2-composition__title {
    margin: 0 0 var(--md-space-1);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(var(--md-ink-rgb), .6);
}
.mac-kit-v2-composition__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mac-kit-v2-composition__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .9rem;
    color: var(--md-ink);
}
.mac-kit-v2-composition__item svg { color: var(--md-blue); flex-shrink: 0; margin-top: 2px; }
.mac-kit-v2-composition__variant { color: rgba(var(--md-ink-rgb), .55); font-size: .82rem; }


/* ==========================================================================
   PRODUCT PAGE — MINÉRAL DIRECT
   Refonte visuelle additive : le fonctionnement PrestaShop, updatedProduct,
   ColoristeIA et le vrai bouton [data-button-action="add-to-cart"] restent
   inchangés. Tous les sélecteurs sont scopés sous .page-product .mac-pdp.
   ========================================================================== */
.page-product .mac-pdp {
    --md-pdp-border: rgba(var(--md-ink-rgb),.11);
    --md-pdp-muted: rgba(var(--md-ink-rgb),.60);
    --md-pdp-soft: var(--md-chalk);
    background: #fff;
    color: var(--md-ink);
    font-family: var(--md-font-body);
    padding-bottom: 70px;
}
.page-product .mac-pdp__breadcrumb {
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--md-ink-rgb),.07);
    background: #fff;
}
.page-product .mac-pdp__breadcrumb .breadcrumb {
    margin: 0;
    font-size: 11px;
    color: rgba(var(--md-ink-rgb),.48);
}
.page-product .mac-pdp__hero {
    padding: 26px 0 34px;
    background: #fff;
}
.page-product .mac-pdp__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
    gap: clamp(28px, 3.5vw, 50px);
    align-items: start;
}
.page-product .mac-pdp__gallery {
    position: relative;
    min-width: 0;
}
.page-product .mac-gallery {
    top: calc(var(--header-height) + var(--superheader-height) + 18px);
}
.page-product .mac-gallery__main {
    overflow: hidden;
    background: transparent;
    aspect-ratio: 1 / 1;
}
.page-product .mac-gallery__img {
    object-fit: contain;
    padding: 3%;
}
.page-product .mac-gallery--thumbs-left {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
}
.page-product .mac-gallery--thumbs-left .mac-gallery__thumbs {
    gap: 9px;
}
.page-product .mac-gallery__thumb {
    width: 68px;
    height: 68px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--md-ink-rgb),.11);
    border-radius: 6px;
    background: #fff;
}
.page-product .mac-gallery__thumb.is-active,
.page-product .mac-gallery__thumb:hover {
    border-color: var(--md-ink);
}
.page-product .mac-gallery__counter {
    right: 12px;
    bottom: 12px;
    border-radius: 5px;
    background: rgba(var(--md-ink-rgb),.64);
    backdrop-filter: blur(4px);
}
.page-product .mac-gallery__zoom-btn {
    left: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.90);
    color: var(--md-ink);
    box-shadow: 0 2px 12px rgba(var(--md-ink-rgb),.10);
}
.page-product .mac-gallery__zoom-btn:hover {
    background: #fff;
    color: var(--md-ink);
}

/* Buy zone */
.page-product .mac-pdp__buy {
    min-width: 0;
}
.page-product .mac-pdp__buy--sticky {
    top: calc(var(--header-height) + var(--superheader-height) + 18px);
    max-height: none;
    overflow: visible;
}
.page-product .mac-buy__category {
    margin: 0 0 9px;
    color: rgba(var(--md-ink-rgb),.48);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .10em;
}
.page-product .mac-buy__category a { color: inherit; }
.page-product .mac-buy__name {
    margin: 0 0 10px;
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 680;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.page-product .mac-buy__reviews-row {
    margin-bottom: 8px;
}
.page-product .mac-buy__ref {
    margin-bottom: 12px;
    color: rgba(var(--md-ink-rgb),.43);
    font-size: 10px;
}
.page-product .mac-buy__pricing {
    margin: 0 0 14px;
}
.page-product .mac-product-page__price-current {
    line-height: 1;
}
.page-product .mac-product-page__price-value,
.page-product .current-price-value {
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 720;
    letter-spacing: -.025em;
}
.page-product .mac-product-page__price-old {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}
.page-product .mac-product-page__price-regular {
    color: rgba(var(--md-ink-rgb),.45);
    text-decoration: line-through;
}
.page-product .mac-product-page__price-badge {
    padding: 4px 7px;
    border-radius: 5px;
    background: var(--md-earth);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}
.page-product .mac-product-page__unit-price,
.page-product .mac-product-page__excl-tax,
.page-product .mac-product-page__price-label,
.page-product .mac-product-page__delivery {
    color: rgba(var(--md-ink-rgb),.50);
    font-size: 10px;
}
.page-product .mac-buy__desc-short {
    max-width: 620px;
    margin: 0 0 15px;
    color: rgba(var(--md-ink-rgb),.70);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}
.page-product .mac-buy__desc-short p:last-child { margin-bottom: 0; }
.page-product .mac-buy__badges { margin-bottom: 14px; }
.page-product .mac-badge {
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 9px;
    font-weight: 800;
}
.page-product .mac-buy__form {
    margin-top: 16px;
    padding-top: 17px;
    border-top: 1px solid var(--md-pdp-border);
}

/* Variantes */
.page-product .mac-product-page__variants,
.page-product .mac-buy__variants {
    margin-bottom: 16px;
}
.page-product .mac-product-page__variant-group,
.page-product .mac-buy__variant-group {
    margin-bottom: 14px;
}
.page-product .mac-product-page__variant-label,
.page-product .mac-buy__variant-label {
    margin-bottom: 8px;
    color: rgba(var(--md-ink-rgb),.62);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: none;
}
.page-product .mac-product-page__variant-label strong,
.page-product .mac-buy__variant-label strong {
    color: var(--md-ink);
    font-weight: 750;
}
.page-product .mac-product-page__variant-select,
.page-product .mac-buy__variant-select {
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(var(--md-ink-rgb),.16);
    border-radius: 7px;
    background: #fff;
    color: var(--md-ink);
    font-size: 13px;
}
.page-product .mac-product-page__variant-select:focus,
.page-product .mac-buy__variant-select:focus {
    outline: 2px solid rgba(var(--md-blue-rgb),.22);
    outline-offset: 1px;
    border-color: var(--md-blue);
}
.page-product .mac-product-page__variant-radios,
.page-product .mac-buy__variant-radios {
    gap: 8px;
}
.page-product .mac-product-page__variant-radio-label,
.page-product .mac-buy__variant-radio-label {
    min-width: 54px;
    padding: 9px 13px;
    border: 1px solid rgba(var(--md-ink-rgb),.15);
    border-radius: 7px;
    background: #fff;
    color: var(--md-ink);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}
.page-product .mac-product-page__variant-radio-item input.input-radio:checked + .mac-product-page__variant-radio-label,
.page-product .mac-buy__variant-radio-item input.input-radio:checked + .mac-buy__variant-radio-label {
    border-color: var(--md-ink);
    background: var(--md-chalk);
    box-shadow: inset 0 0 0 1px var(--md-ink);
}
.page-product .mac-color-swatch {
    width: 36px;
    height: 36px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(var(--md-ink-rgb),.15);
}
.page-product .mac-product-page__variant-color-item input.input-color:checked + .mac-color-swatch,
.page-product .mac-buy__variant-color-item input.input-color:checked + .mac-color-swatch {
    outline: 2px solid var(--md-ink);
    outline-offset: 2px;
}

/* ColoristeIA : habillage uniquement, aucune logique modifiée */
.page-product #macColoristeSelector.mac-teinte-wrap {
    margin: 14px 0 16px;
}
.page-product #macColoristeSelector .mac-teinte-trigger {
    min-height: 52px;
    border-radius: 8px;
    border-color: rgba(var(--md-ink-rgb),.14);
    background: #fff;
    box-shadow: none;
}
.page-product #macColoristeSelector .mac-teinte-trigger:hover {
    border-color: rgba(var(--md-ink-rgb),.32);
}
.page-product #macColoristeSelector .mac-teinte-trigger__label {
    color: var(--md-ink);
    font-weight: 750;
}
.page-product #macColoristeSelector .mac-teinte-trigger__sub {
    color: rgba(var(--md-ink-rgb),.55);
}
.page-product #macColoristeSelector .mac-teinte-confirm {
    border-radius: 8px;
}

/* ATC */
.page-product .mac-product-page__qty-row,
.page-product .mac-buy__qty-row {
    gap: 10px;
    margin-bottom: 8px;
}
.page-product .mac-product-page__qty,
.page-product .mac-buy__qty {
    height: 50px;
    border: 1px solid rgba(var(--md-ink-rgb),.15);
    border-radius: 7px;
    overflow: hidden;
}
.page-product .mac-qty-btn {
    width: 38px;
    color: rgba(var(--md-ink-rgb),.72);
}
.page-product .mac-qty-input {
    width: 42px;
    border-color: rgba(var(--md-ink-rgb),.10);
    color: var(--md-ink);
    font-weight: 700;
}
.page-product .mac-buy__atc .add-to-cart,
.page-product .mac-product-page__add-to-cart .add-to-cart,
.page-product .mac-product-page__qty-row .add-to-cart {
    min-height: 50px;
    border-radius: 7px;
    border-color: var(--md-deep-4);
    background: var(--md-deep-4);
    color: #fff;
    font-family: var(--md-font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: none;
}
.page-product .mac-buy__atc .add-to-cart:hover,
.page-product .mac-product-page__add-to-cart .add-to-cart:hover,
.page-product .mac-product-page__qty-row .add-to-cart:hover {
    background: var(--md-deep-2);
    border-color: var(--md-deep-2);
}
.page-product .mac-buy__atc .add-to-cart:disabled,
.page-product .mac-product-page__add-to-cart .add-to-cart:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.page-product .mac-product-page__availability,
.page-product .mac-buy__availability {
    margin-top: 9px;
    color: rgba(var(--md-ink-rgb),.62);
    font-size: 11px;
}

/* Kit — même design, avec composition plus visible */
.page-product .mac-pdp--kit .mac-kit-v2-badge {
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--md-gold);
    color: var(--md-ink);
    font-size: 10px;
    font-weight: 850;
    box-shadow: 0 3px 12px rgba(var(--md-ink-rgb),.08);
}
.page-product .mac-pdp--kit .mac-kit-v2-composition {
    margin: 16px 0;
    padding: 16px 17px;
    border: 1px solid rgba(var(--md-ink-rgb),.10);
    border-radius: 9px;
    background: var(--md-chalk);
}
.page-product .mac-pdp--kit .mac-kit-v2-coverage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--md-ink);
    font-size: 12px;
    font-weight: 800;
}
.page-product .mac-pdp--kit .mac-kit-v2-coverage__m2price {
    color: rgba(var(--md-ink-rgb),.56);
    font-size: 11px;
    font-weight: 500;
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__title {
    margin: 0 0 10px;
    color: rgba(var(--md-ink-rgb),.62);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__list {
    gap: 7px;
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__item {
    gap: 8px;
    color: var(--md-ink);
    font-size: 12px;
    line-height: 1.4;
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__item svg {
    width: 14px;
    height: 14px;
    color: var(--md-green-soft);
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__variant {
    color: rgba(var(--md-ink-rgb),.50);
    font-size: 11px;
}

/* USPs sous la zone d'achat */
.page-product .mac-pdp__usps {
    margin: 0;
    padding: 20px 0;
    background: #fff;
    border-top: 1px solid rgba(var(--md-ink-rgb),.08);
    border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
}
.page-product .mac-usps {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding: 0 var(--md-gutter);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.page-product .mac-usps__item {
    justify-content: center;
    min-width: 0;
    padding: 5px 22px;
    border-right: 1px solid rgba(var(--md-ink-rgb),.09);
    color: var(--md-ink);
    font-size: 11px;
    font-weight: 650;
}
.page-product .mac-usps__item:last-child { border-right: 0; }
.page-product .mac-usps__icon { color: var(--md-ink); }

/* Tabs / détails */
.page-product .mac-pdp__tabs {
    padding: 38px 0 46px;
    background: #fff;
    border-top: 0;
}
.page-product .mac-tabs__nav {
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(var(--md-ink-rgb),.10);
}
.page-product .mac-tabs__btn {
    margin-bottom: -1px;
    padding: 13px 18px;
    color: rgba(var(--md-ink-rgb),.52);
    font-family: var(--md-font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: none;
}
.page-product .mac-tabs__btn.is-active {
    color: var(--md-ink);
    border-bottom-color: var(--md-ink);
}
.page-product .mac-tabs__panel {
    color: rgba(var(--md-ink-rgb),.72);
}
.page-product .prose {
    max-width: 820px;
    color: rgba(var(--md-ink-rgb),.72);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.72;
}
.page-product .prose h2,
.page-product .prose h3 {
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-weight: 680;
}

/* Rassurance native/custom : intégration discrète */
.page-product .mac-pdp__native-reass,
.page-product .mac-pdp__reassurance {
    width: min(100%, var(--md-container-max));
    margin: 0 auto;
    padding-left: var(--md-gutter);
    padding-right: var(--md-gutter);
}

/* Responsive PDP */
@media (max-width: 991px) {
    .page-product .mac-pdp__hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
        gap: 24px;
    }
    .page-product .mac-gallery--thumbs-left {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 9px;
    }
    .page-product .mac-gallery__thumb {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 767px) {
    .page-product .mac-pdp {
        padding-bottom: 48px;
    }
    .page-product .mac-pdp__breadcrumb {
        padding: 9px 0;
    }
    .page-product .mac-pdp__hero {
        padding: 12px 0 22px;
    }
    .page-product .mac-pdp__hero-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .page-product .mac-pdp__gallery,
    .page-product .mac-pdp__buy {
        width: 100%;
    }
    .page-product .mac-gallery,
    .page-product .mac-pdp__buy--sticky {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }
    .page-product .mac-gallery--thumbs-left {
        display: flex;
        flex-direction: column;
    }
    .page-product .mac-gallery--thumbs-left .mac-gallery__main { order: 1; }
    .page-product .mac-gallery--thumbs-left .mac-gallery__thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
        gap: 7px;
        padding-bottom: 3px;
    }
    .page-product .mac-gallery__main {
        border-radius: 8px;
    }
    .page-product .mac-gallery__thumb {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
    }
    .page-product .mac-buy__category { margin-bottom: 7px; }
    .page-product .mac-buy__name {
        font-size: 27px;
        margin-bottom: 8px;
    }
    .page-product .mac-product-page__price-value,
    .page-product .current-price-value {
        font-size: 27px;
    }
    .page-product .mac-buy__desc-short {
        font-size: 12.5px;
        line-height: 1.55;
    }
    .page-product #macColoristeSelector.mac-teinte-wrap {
        margin: 12px 0 14px;
    }
    .page-product .mac-product-page__qty-row,
    .page-product .mac-buy__qty-row {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 9px;
    }
    .page-product .mac-product-page__qty,
    .page-product .mac-buy__qty {
        width: 116px;
    }
    .page-product .mac-buy__atc .add-to-cart,
    .page-product .mac-product-page__add-to-cart .add-to-cart,
    .page-product .mac-product-page__qty-row .add-to-cart {
        width: 100%;
        padding: 0 12px;
        font-size: 11px;
    }
    .page-product .mac-usps {
        grid-template-columns: 1fr;
    }
    .page-product .mac-usps__item {
        justify-content: flex-start;
        padding: 9px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
    }
    .page-product .mac-usps__item:last-child { border-bottom: 0; }
    .page-product .mac-pdp__tabs {
        padding: 24px 0 34px;
    }
    .page-product .mac-tabs__nav {
        gap: 0;
        margin-bottom: 18px;
    }
    .page-product .mac-tabs__btn {
        padding: 11px 13px;
        font-size: 10px;
    }
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints de référence pour toute la couche V2 (cohérent avec §6/§18) :
   >= 992px desktop · 768-991px tablet · < 768px mobile
   ========================================================================== */

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.mac-md-btn:focus-visible,
[class^="mac-home-v2-"] a:focus-visible,
[class^="mac-home-v2-"] button:focus-visible,
[class^="mac-kit-v2-"] a:focus-visible,
[class^="mac-kit-v2-"] button:focus-visible {
    outline: 2px solid var(--md-blue);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mac-md-btn,
    .mac-md-card,
    [class^="mac-home-v2-"],
    [class^="mac-kit-v2-"] {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   MINÉRAL DIRECT — PASS FINITION DA 2026-09-01
   Ajustements de fidélité à la maquette validée : plus photographique,
   moins "dashboard", rythme éditorial plus net. Les règles restent additives.
   ========================================================================== */

/* Home — titres et rythme communs */
.mac-home-v2-finder__title,
.mac-home-v2-featured__title,
.mac-home-v2-inspiration__title {
    margin: 0;
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-weight: 650;
    letter-spacing: -.035em;
}

/* Finder : 4 vrais univers visuels sur desktop, comme la maquette */
@media (min-width: 992px) {
    .mac-home-v2-finder__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
    .mac-home-v2-finder__media,
    .mac-home-v2-finder__media img,
    .mac-home-v2-finder__icon-fallback {
        min-height: 205px;
    }
}
.mac-home-v2-finder__card {
    border-color: rgba(var(--md-ink-rgb),.08);
    box-shadow: 0 5px 18px rgba(var(--md-ink-rgb),.055);
}
.mac-home-v2-finder__body {
    min-height: 116px;
    padding: 18px 44px 18px 18px;
}
.mac-home-v2-finder__label {
    font-size: 15px;
    letter-spacing: -.01em;
}
.mac-home-v2-finder__desc {
    font-size: 12px;
}

/* Featured : la photo domine, le cadre s'efface */
.mac-home-v2-featured__card {
    border-color: rgba(var(--md-ink-rgb),.07);
    box-shadow: 0 3px 14px rgba(var(--md-ink-rgb),.045);
}
.mac-home-v2-featured__img {
    aspect-ratio: 1.28 / 1;
}
.mac-home-v2-featured__body {
    padding: 16px 16px 18px;
}
.mac-home-v2-featured__name {
    font-size: 14.5px;
    min-height: 2.35em;
}
.mac-home-v2-featured__price {
    font-size: 13.5px;
}

/* Inspirations : légende sur l'image, pas une "card" séparée */
/* ⚠ Pas de min-height ici : combiné à aspect-ratio (base + var(--hv2-inspiration-ratio)),
   un min-height fixe forçait le navigateur à élargir la vignette au-delà de sa colonne
   de grille pour respecter le ratio (ex: 235px à 16/10 = 376px, contre une colonne de
   318px) — c'est ce qui faisait chevaucher les vignettes malgré un vrai gap CSS. La
   hauteur doit venir uniquement de l'aspect-ratio, dérivée de la largeur de colonne. */
.mac-home-v2-inspiration__item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--md-sand);
    color: #fff;
}
.mac-home-v2-inspiration__item::after {
    content: '';
    position: absolute;
    inset: 35% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--md-ink-rgb),0), rgba(var(--md-ink-rgb),.68));
}
.mac-home-v2-inspiration__item img {
    width: 100%;
    height: 100%;
    min-height: 235px;
    object-fit: cover;
    display: block;
    transition: transform 360ms ease;
}
.mac-home-v2-inspiration__item:hover img { transform: scale(1.025); }
.mac-home-v2-inspiration__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-family: var(--md-font-body);
    font-size: 12px;
    font-weight: 750;
    text-shadow: 0 1px 8px rgba(var(--md-ink-rgb),.22);
}

/* PDP desktop : image majoritaire, buy-zone plus proche de la maquette */
@media (min-width: 992px) {
    .page-product .mac-pdp__hero-grid {
        grid-template-columns: minmax(0, 1.22fr) minmax(360px, .78fr);
        gap: clamp(34px, 4vw, 62px);
    }
    .page-product .mac-pdp__hero {
        padding-top: 30px;
        padding-bottom: 42px;
    }
}
.page-product .mac-pdp__hero .container,
.page-product .mac-pdp__breadcrumb .container,
.page-product .mac-pdp__tabs .container,
.page-product .mac-pdp__accessories .container {
    max-width: var(--md-container-max);
}
.page-product .mac-pdp__buy {
    padding-top: 4px;
}
.page-product .mac-buy__name {
    max-width: 620px;
}
.page-product .mac-buy__pricing {
    padding: 2px 0;
}
.page-product .mac-buy__form {
    padding-top: 19px;
}
.page-product .mac-buy__pack,
.page-product .product-discounts,
.page-product .product-customization {
    border-radius: 8px;
}

/* Le Kit garde le même langage de marque, avec un encart composition plus premium */
.page-product .mac-pdp--kit .mac-kit-v2-composition {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 17px 20px;
    border-color: rgba(var(--md-ink-rgb),.09);
    background: var(--md-chalk);
}
.page-product .mac-pdp--kit .mac-kit-v2-composition::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--md-gold);
}
.page-product .mac-pdp--kit .mac-kit-v2-composition__title {
    color: var(--md-ink);
    font-size: 11px;
    letter-spacing: .025em;
    text-transform: none;
}

/* Accessoires / cross-sell : même langage visuel que la home */
.page-product .mac-pdp__accessories {
    padding: 52px 0 62px;
    background: var(--md-chalk);
}
.page-product .mac-pdp__accessories .section-title {
    margin-bottom: 24px;
    color: var(--md-ink);
    font-family: var(--md-font-title);
    font-size: clamp(25px, 2.7vw, 36px);
    font-weight: 650;
    letter-spacing: -.035em;
}
.page-product .mac-pdp__accessories-grid {
    gap: 16px;
}

/* Mobile — retrouver l'ordre et la respiration de la maquette */
@media (max-width: 767px) {
    .mac-home-v2-finder {
        padding: 40px 0 44px;
    }
    .mac-home-v2-finder__head,
    .mac-home-v2-featured__head,
    .mac-home-v2-inspiration__head {
        text-align: left;
    }
    .mac-home-v2-finder__grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-right: var(--md-gutter);
    }
    .mac-home-v2-finder__grid::-webkit-scrollbar { display: none; }
    .mac-home-v2-finder__card {
        flex: 0 0 min(82vw, 300px);
        scroll-snap-align: start;
    }
    .mac-home-v2-calc {
        padding-bottom: 44px;
    }
    .mac-home-v2-calc__inner {
        width: calc(100% - (var(--md-gutter) * 2));
        display: flex;
        flex-direction: column;
    }
    .mac-home-v2-calc__text {
        padding: 30px 24px 28px;
    }
    .mac-home-v2-calc__media,
    .mac-home-v2-calc__media img {
        min-height: 230px;
    }
    .mac-home-v2-featured__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .mac-home-v2-featured__body {
        padding: 12px;
    }
    .mac-home-v2-featured__name {
        min-height: 0;
        font-size: 12.5px;
    }
    .mac-home-v2-featured__link { display: none; }
    .mac-home-v2-inspiration__strip {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .mac-home-v2-inspiration__strip::-webkit-scrollbar { display: none; }
    .mac-home-v2-inspiration__item {
        flex: 0 0 min(78vw, 300px);
        min-height: 210px;
        scroll-snap-align: start;
    }
    .mac-home-v2-inspiration__item img { min-height: 210px; }

    .page-product .mac-pdp__hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .page-product .mac-buy__form {
        margin-top: 14px;
        padding-top: 16px;
    }
    .page-product .mac-pdp--kit .mac-kit-v2-composition {
        margin: 14px 0;
    }
    .page-product .mac-pdp__accessories {
        padding: 38px 0 46px;
    }
}

/* ==========================================================================
   MINÉRAL DIRECT — PASSE RESPONSIVE & POLISH 2026-09-01
   Objectif : garder la DA photographique sur tous les écrans, éviter les
   cartes trop petites et toute compression de la zone achat entre 768–900 px.
   Additif : ne change aucune donnée ni logique métier.
   ========================================================================== */

/* Desktop large : respiration maîtrisée, pas de hero disproportionné */
@media (min-width: 1280px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split {
        min-height: clamp(570px, 39vw, 660px);
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__content {
        max-width: 650px;
    }
    .mac-home-v2-finder,
    .mac-home-v2-featured,
    .mac-home-v2-inspiration {
        scroll-margin-top: 96px;
    }
}

/* Tablette paysage / petits laptops */
@media (min-width: 768px) and (max-width: 1100px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split {
        min-height: 550px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split::after {
        background: linear-gradient(90deg,
            rgba(var(--md-ink-rgb),.91) 0%,
            rgba(var(--md-ink-rgb),.76) 38%,
            rgba(var(--md-ink-rgb),.34) 66%,
            rgba(var(--md-ink-rgb),.05) 100%);
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__content {
        max-width: 52vw;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__title {
        font-size: clamp(44px, 6vw, 60px);
    }
    .mac-home-v2-finder__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .mac-home-v2-finder__media,
    .mac-home-v2-finder__media img,
    .mac-home-v2-finder__icon-fallback {
        min-height: 220px;
    }
    .mac-home-v2-featured__grid,
    .mac-home-v2-inspiration__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Le calculateur devient mono-colonne avant qu'il ne soit comprimé */
@media (max-width: 900px) and (min-width: 768px) {
    .mac-home-v2-calc__inner {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
    .mac-home-v2-calc__text {
        padding: 38px 38px 34px;
    }
    .mac-home-v2-calc__title {
        max-width: 620px;
        font-size: clamp(32px, 5vw, 42px);
    }
    .mac-home-v2-calc__body { max-width: 600px; }
    .mac-home-v2-calc__media,
    .mac-home-v2-calc__media img {
        min-height: 290px;
        max-height: 360px;
    }
    .mac-home-v2-calc__media::after {
        background: linear-gradient(180deg, rgba(var(--md-ink-rgb),.22), rgba(var(--md-ink-rgb),0) 38%);
    }
}

/* Téléphone : hero réellement conçu mobile, pas juste rétréci */
@media (max-width: 767px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split {
        min-height: min(680px, 82svh);
        max-height: 720px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split::after {
        background: linear-gradient(180deg,
            rgba(var(--md-ink-rgb),.06) 0%,
            rgba(var(--md-ink-rgb),.20) 28%,
            rgba(var(--md-ink-rgb),.58) 57%,
            rgba(var(--md-ink-rgb),.92) 100%);
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__text {
        padding: 36px var(--md-gutter) 44px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__content {
        max-width: 520px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__title {
        max-width: 12ch;
        font-size: clamp(38px, 11.5vw, 50px);
        line-height: .99;
        letter-spacing: -.045em;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__subtitle {
        max-width: 35em;
        font-size: 14px;
    }

    /* La réassurance reste visible sans manger un écran entier */
    .mac-home-v2-reassurance__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 var(--md-gutter);
    }
    .mac-home-v2-reassurance__item,
    .mac-home-v2-reassurance__item:nth-child(2n) {
        min-height: 72px;
        align-items: flex-start;
        padding: 11px 9px;
        border-right: 1px solid rgba(var(--md-ink-rgb),.08);
        border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
    }
    .mac-home-v2-reassurance__item:nth-child(2n) { border-right: 0; }
    .mac-home-v2-reassurance__item:nth-last-child(-n+2) { border-bottom: 0; }
    .mac-home-v2-reassurance--dark .mac-home-v2-reassurance__item {
        border-right-color: rgba(255,255,255,.10);
        border-bottom-color: rgba(255,255,255,.10);
    }
    .mac-home-v2-reassurance__icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
    .mac-home-v2-reassurance__label { font-size: 11.5px; }
    .mac-home-v2-reassurance__text { font-size: 10px; }

    /* Scrolls tactiles propres et intentionnels */
    .mac-home-v2-finder__grid,
    .mac-home-v2-inspiration__strip {
        scroll-padding-left: var(--md-gutter);
        overscroll-behavior-inline: contain;
    }
    .mac-home-v2-finder__card {
        flex-basis: min(84vw, 320px);
        border-radius: 9px;
    }
    .mac-home-v2-finder__card:first-child { margin-left: 0; }
    .mac-home-v2-finder__media,
    .mac-home-v2-finder__media img,
    .mac-home-v2-finder__icon-fallback {
        min-height: 178px;
    }
    .mac-home-v2-finder__body {
        min-height: 104px;
        padding: 15px 40px 16px 15px;
    }

    .mac-home-v2-calc__inner {
        border-radius: 9px;
        box-shadow: 0 8px 24px rgba(var(--md-ink-rgb),.08);
    }
    .mac-home-v2-calc__text {
        padding: 28px 22px 26px;
    }
    .mac-home-v2-calc__title {
        font-size: clamp(29px, 8.5vw, 36px);
    }
    .mac-home-v2-calc__body {
        margin-bottom: 20px;
        font-size: 12.5px;
    }
    .mac-home-v2-calc__media,
    .mac-home-v2-calc__media img { min-height: 215px; }

    .mac-home-v2-featured__head,
    .mac-home-v2-inspiration__head,
    .mac-home-v2-finder__head {
        padding-left: var(--md-gutter);
        padding-right: var(--md-gutter);
    }
    .mac-home-v2-featured__subtitle {
        max-width: 34em;
        font-size: 12px;
    }
}

/* Très petits écrans : CTA et produits gardent une vraie taille tactile/visuelle */
@media (max-width: 520px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split {
        min-height: min(660px, 84svh);
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__ctas {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 340px);
        gap: 9px;
    }
    .mac-hero__slide--mineral-direct .mac-md-hero-split__ctas .mac-md-btn {
        width: 100%;
        min-height: 48px;
    }
    .mac-home-v2-featured__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        scroll-padding-left: var(--md-gutter);
        padding-right: var(--md-gutter);
        padding-bottom: 8px;
    }
    .mac-home-v2-featured__grid::-webkit-scrollbar { display: none; }
    .mac-home-v2-featured__card {
        flex: 0 0 min(78vw, 292px);
        scroll-snap-align: start;
    }
    .mac-home-v2-featured__img { aspect-ratio: 4 / 3; }
    .mac-home-v2-featured__body { padding: 13px 14px 15px; }
    .mac-home-v2-featured__name { font-size: 13.5px; }
    .mac-home-v2-featured__price { font-size: 13px; }
}

/* iPhone étroit : préserver lisibilité sans réduire encore les textes */
@media (max-width: 374px) {
    .mac-hero__slide--mineral-direct .mac-md-hero-split__title {
        font-size: 36px;
    }
    .mac-home-v2-reassurance__row { grid-template-columns: 1fr; }
    .mac-home-v2-reassurance__item,
    .mac-home-v2-reassurance__item:nth-child(2n),
    .mac-home-v2-reassurance__item:nth-last-child(-n+2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(var(--md-ink-rgb),.08);
    }
    .mac-home-v2-reassurance__item:last-child { border-bottom: 0; }
    .mac-home-v2-reassurance--dark .mac-home-v2-reassurance__item {
        border-bottom-color: rgba(255,255,255,.10);
    }
}

/* PDP tablette : la grille 2 colonnes devenait trop étroite autour de 768 px */
@media (min-width: 768px) and (max-width: 899px) {
    .page-product .mac-pdp__hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    .page-product .mac-pdp__buy,
    .page-product .mac-pdp__buy--sticky,
    .page-product .mac-gallery {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }
    .page-product .mac-pdp__gallery,
    .page-product .mac-pdp__buy {
        width: 100%;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* PDP mobile : miniatures et onglets tactiles, sans débordement horizontal global */
@media (max-width: 767px) {
    .page-product .mac-gallery--thumbs-left .mac-gallery__thumbs,
    .page-product .mac-tabs__nav {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .page-product .mac-gallery--thumbs-left .mac-gallery__thumbs::-webkit-scrollbar,
    .page-product .mac-tabs__nav::-webkit-scrollbar { display: none; }
    .page-product .mac-tabs__nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .page-product .mac-tabs__btn {
        flex: 0 0 auto;
        min-height: 44px;
        scroll-snap-align: start;
    }
    .page-product .mac-product-page__qty-row,
    .page-product .mac-buy__qty-row {
        align-items: stretch;
    }
    .page-product .mac-buy__atc .add-to-cart,
    .page-product .mac-product-page__add-to-cart .add-to-cart,
    .page-product .mac-product-page__qty-row .add-to-cart {
        min-height: 48px;
        font-size: 12px;
        letter-spacing: .015em;
    }
}

/* ==========================================================================
   MINÉRAL DIRECT — PASS VISUEL 3 (capture réelle 2026-09-01 17:32)
   Objectif : supprimer l'effet "blocs dans des blocs", donner une vraie présence
   aux états sans média, corriger le calculateur sans image et resserrer le rythme.
   Cette passe reste 100% visuelle : aucun comportement métier n'est modifié.
   ========================================================================== */

/* Les sections Builder ajoutent historiquement 60px en haut/bas via style inline.
   Pour les blocs Home V2 dédiés, ce padding double celui du composant et créait les
   grands vides visibles sur la capture réelle. On neutralise uniquement ces sections. */
.page-index .mac-section:has(.mac-home-v2-finder),
.page-index .mac-section:has(.mac-home-v2-calc),
.page-index .mac-section:has(.mac-home-v2-reassurance),
.page-index .mac-section:has(.mac-home-v2-inspiration) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* Les bandes Home V2 deviennent de vraies sections de page, et non des cartes
   enfermées dans le conteneur historique du Builder. */
.page-index .mac-home-v2-finder,
.page-index .mac-home-v2-calc,
.page-index .mac-home-v2-reassurance,
.page-index .mac-home-v2-inspiration {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* `.mac-home-v2-featured` — rendu intrinsèquement autonome (2026-09-03), plus
   scopé à `.page-index` : ces 2 règles ne contiennent aucune valeur home-spécifique,
   seul le préfixe de sélecteur l'était. Généralisé pour rester réutilisable sur
   n'importe quelle page Builder (CMS/catégorie), pas seulement la home — voir
   MacThemeConfig::getCmsBuilderBlocks(), gate d'hydratation `featured_solutions_v2`.
   ⚠ Correctif 2026-09-07 — régression de centrage sur la home : le sélecteur
   `.mac-home-v2-featured` seul (spécificité 0,1,0) est à égalité avec la règle
   générique `.mac-block { width:100%; }` (mac-blocks.tpl, partagée par TOUS les
   blocs Builder) — à spécificité égale, l'ordre d'apparition dans le document
   tranche, et cette règle générique (inline, après la feuille externe) l'emportait
   silencieusement sur `width:100vw`, laissant `margin-left:calc(50% - 50vw)`
   s'appliquer seule → bloc décalé à gauche et rétréci. Fix générique (jamais
   `.page-index`, aucune condition par page) : `.mac-block.mac-home-v2-featured`
   (0,2,0) gagne cette égalité de façon fiable sur n'importe quelle page, exactement
   comme le font déjà les 4 autres blocs Home V2 restés `.page-index`-scopés. */
.mac-section:has(.mac-home-v2-featured) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}
.mac-block.mac-home-v2-featured {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   PROJECT FINDER — plus éditorial et beaucoup moins "dashboard"
   -------------------------------------------------------------------------- */
.page-index .mac-home-v2-finder {
    padding: 50px 0 38px;
    background: var(--md-chalk);
}
.page-index .mac-home-v2-finder__head {
    margin-bottom: 28px;
}
.page-index .mac-home-v2-finder__title {
    font-size: clamp(34px, 3.15vw, 44px);
    font-weight: 640;
    letter-spacing: -.045em;
}
.page-index .mac-home-v2-finder__grid {
    gap: 18px;
}
.page-index .mac-home-v2-finder__card {
    grid-template-rows: minmax(205px, 1fr) auto;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(var(--md-ink-rgb),.07);
    isolation: isolate;
}
.page-index .mac-home-v2-finder__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(var(--md-ink-rgb),.13);
}
.page-index .mac-home-v2-finder__media,
.page-index .mac-home-v2-finder__media img,
.page-index .mac-home-v2-finder__icon-fallback {
    min-height: 205px;
}
.page-index .mac-home-v2-finder__media {
    background: var(--md-sand);
}
.page-index .mac-home-v2-finder__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--md-ink-rgb),0), rgba(var(--md-ink-rgb),.16));
    z-index: 1;
}
.page-index .mac-home-v2-finder__media img {
    position: relative;
    z-index: 0;
}

/* Badge icône superposé quand une photo a été choisie (bug corrigé 2026-09-02 —
   l'icône disparaissait totalement dès qu'une image MacMédia était renseignée). */
.page-index .mac-home-v2-finder__icon-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 24px rgba(var(--md-ink-rgb),.14);
    backdrop-filter: blur(4px);
    color: var(--md-ink);
    box-sizing: border-box;
}
.page-index .mac-home-v2-finder__icon-badge svg { width: 100%; height: 100%; }

/* Etat sans image MacMédia : on remplace le grand rectangle beige vide par
   quatre mini-univers matière — l'icône plein-cadre `.icon-fallback` ci-dessous
   ne s'applique que dans cet état ; dès qu'une vraie photo est renseignée, c'est
   `.icon-badge` (ci-dessus) qui prend le relais en petit badge superposé. */
.page-index .mac-home-v2-finder__icon-fallback {
    position: relative;
    overflow: hidden;
    place-items: end start;
    padding: 20px;
    color: var(--md-ink);
}
.page-index .mac-home-v2-finder__icon-fallback::before,
.page-index .mac-home-v2-finder__icon-fallback::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.page-index .mac-home-v2-finder__icon-fallback::before {
    width: 72%;
    height: 74%;
    right: -8%;
    top: -14%;
    border-radius: 46% 54% 42% 58%;
    background: rgba(255,255,255,.34);
    transform: rotate(18deg);
}
.page-index .mac-home-v2-finder__icon-fallback::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(var(--md-ink-rgb),.09));
}
.page-index .mac-home-v2-finder__icon-fallback svg {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.62);
    box-shadow: 0 8px 24px rgba(var(--md-ink-rgb),.10);
    backdrop-filter: blur(4px);
}
.page-index .mac-home-v2-finder__card:nth-child(1) .mac-home-v2-finder__icon-fallback {
    background:
        linear-gradient(145deg, rgba(255,255,255,.28), transparent 42%),
        linear-gradient(125deg, var(--md-sand) 0%, var(--md-beige) 54%, var(--md-beige) 100%);
}
.page-index .mac-home-v2-finder__card:nth-child(2) .mac-home-v2-finder__icon-fallback {
    background:
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.30) 0 14%, transparent 15%),
        linear-gradient(135deg, var(--md-stone) 0%, var(--md-beige) 52%, var(--md-ink) 100%);
}
.page-index .mac-home-v2-finder__card:nth-child(3) .mac-home-v2-finder__icon-fallback {
    background:
        radial-gradient(circle at 75% 26%, rgba(var(--md-gold-rgb),.36) 0 16%, transparent 17%),
        linear-gradient(135deg, var(--md-sand) 0%, var(--md-beige) 52%, var(--md-earth) 100%);
}
.page-index .mac-home-v2-finder__card:nth-child(4) .mac-home-v2-finder__icon-fallback {
    background:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(135deg, var(--md-stone) 0%, var(--md-blue) 52%, var(--md-ink) 100%);
    background-size: 28px 28px, 28px 28px, auto;
}
.page-index .mac-home-v2-finder__body {
    min-height: 94px;
    padding: 17px 48px 18px 18px;
    background: rgba(255,255,255,.98);
}
.page-index .mac-home-v2-finder__label {
    max-width: 16em;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.24;
}
.page-index .mac-home-v2-finder__desc {
    margin-top: 6px;
    font-size: 11.5px;
}
.page-index .mac-home-v2-finder__arrow {
    right: 18px;
    bottom: 17px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--md-earth-rgb),.09);
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   CALCULATEUR — la capture réelle révélait deux problèmes : titre écrasé par
   une règle legacy et moitié droite vide quand aucune image n'est renseignée.
   -------------------------------------------------------------------------- */
.page-index .mac-home-v2-calc {
    padding: 34px 0 62px;
    background: var(--md-chalk);
}
.page-index .mac-home-v2-calc__inner {
    min-height: 340px;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(var(--md-ink-rgb),.14);
}
.page-index .mac-home-v2-calc .mac-home-v2-calc__title {
    color: #fff !important;
    text-shadow: none !important;
}
.page-index .mac-home-v2-calc .mac-home-v2-calc__body {
    color: rgba(255,255,255,.78) !important;
}
.page-index .mac-home-v2-calc__text {
    padding: 46px 50px;
}

/* Sans photo : composition graphique volontaire, pas un trou noir vide. */
.page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media)) {
    position: relative;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--md-gold-rgb),.22) 0 13%, transparent 14%),
        radial-gradient(circle at 74% 75%, rgba(var(--md-blue-rgb),.16) 0 18%, transparent 19%),
        linear-gradient(120deg, var(--md-deep) 0%, var(--md-deep) 56%, var(--md-deep-2) 100%);
}
.page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::before {
    content: '';
    position: absolute;
    width: 310px;
    height: 210px;
    right: 7%;
    top: 50%;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
    box-shadow: 0 24px 60px rgba(var(--md-ink-rgb),.22);
    transform: translateY(-50%) rotate(-4deg);
}
.page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    right: 18%;
    top: 50%;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--md-gold), var(--md-gold-pale));
    box-shadow:
        86px -52px 0 -24px rgba(var(--md-chalk-rgb),.16),
        -74px 64px 0 -36px rgba(var(--md-blue-rgb),.28),
        0 20px 40px rgba(var(--md-ink-rgb),.20);
    transform: translateY(-50%);
}
.page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media)) .mac-home-v2-calc__text {
    width: min(62%, 690px);
    min-height: 340px;
    position: relative;
    z-index: 3;
}
.page-index .mac-home-v2-calc__title {
    max-width: 540px;
    font-size: clamp(34px, 3.6vw, 49px);
    line-height: 1.01;
}
.page-index .mac-home-v2-calc__body {
    max-width: 470px;
    font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   Responsive de cette passe : priorité 430 / 390 / 360 + tablette.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
    .page-index .mac-home-v2-finder {
        padding: 44px 0 34px;
    }
    .page-index .mac-home-v2-finder__card {
        grid-template-rows: 230px auto;
    }
    .page-index .mac-home-v2-finder__media,
    .page-index .mac-home-v2-finder__media img,
    .page-index .mac-home-v2-finder__icon-fallback {
        min-height: 230px;
    }
    .page-index .mac-home-v2-calc {
        padding-top: 28px;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media)) .mac-home-v2-calc__text {
        width: 68%;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::before {
        right: 2%;
        width: 265px;
        height: 190px;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::after {
        right: 13%;
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 767px) {
    .page-index .mac-home-v2-finder {
        padding: 38px 0 30px;
    }
    .page-index .mac-home-v2-finder__head {
        margin-bottom: 18px;
    }
    .page-index .mac-home-v2-finder__title {
        font-size: clamp(30px, 9vw, 36px);
        line-height: 1.02;
    }
    .page-index .mac-home-v2-finder__grid {
        gap: 13px;
        padding-left: var(--md-gutter);
        padding-right: var(--md-gutter);
    }
    .page-index .mac-home-v2-finder__card {
        flex-basis: min(82vw, 310px);
        grid-template-rows: 184px auto;
        box-shadow: 0 8px 24px rgba(var(--md-ink-rgb),.08);
    }
    .page-index .mac-home-v2-finder__media,
    .page-index .mac-home-v2-finder__media img,
    .page-index .mac-home-v2-finder__icon-fallback {
        min-height: 184px;
    }
    .page-index .mac-home-v2-finder__body {
        min-height: 90px;
        padding: 15px 46px 16px 16px;
    }
    .page-index .mac-home-v2-finder__label {
        font-size: 14.5px;
    }
    .page-index .mac-home-v2-finder__icon-fallback svg {
        width: 42px;
        height: 42px;
    }

    .page-index .mac-home-v2-calc {
        padding: 24px 0 46px;
    }
    .page-index .mac-home-v2-calc__inner {
        width: calc(100% - 32px);
        border-radius: 12px;
        min-height: 0;
    }
    .page-index .mac-home-v2-calc__text {
        padding: 32px 24px 30px;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media)) {
        min-height: 390px;
        background:
            radial-gradient(circle at 82% 80%, rgba(var(--md-gold-rgb),.20) 0 15%, transparent 16%),
            radial-gradient(circle at 15% 12%, rgba(var(--md-blue-rgb),.12) 0 14%, transparent 15%),
            linear-gradient(145deg, var(--md-deep), var(--md-deep-3));
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media)) .mac-home-v2-calc__text {
        width: 100%;
        min-height: 390px;
        justify-content: flex-start;
        padding-bottom: 150px;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::before {
        width: 210px;
        height: 125px;
        right: -18px;
        top: auto;
        bottom: 18px;
        transform: rotate(-5deg);
        border-radius: 14px;
    }
    .page-index .mac-home-v2-calc__inner:not(:has(.mac-home-v2-calc__media))::after {
        width: 76px;
        height: 76px;
        right: 68px;
        top: auto;
        bottom: 43px;
        transform: none;
    }
    .page-index .mac-home-v2-calc__title {
        font-size: clamp(31px, 9.5vw, 39px);
        max-width: 12ch;
    }
    .page-index .mac-home-v2-calc__body {
        max-width: 31em;
        font-size: 13px;
    }
}

@media (max-width: 430px) {
    .page-index .mac-home-v2-finder__grid {
        padding-right: 16px;
    }
    .page-index .mac-home-v2-finder__card {
        flex-basis: min(84vw, 294px);
    }
    .page-index .mac-home-v2-calc__inner {
        width: calc(100% - 24px);
    }
}

@media (max-width: 374px) {
    .page-index .mac-home-v2-finder__card {
        flex-basis: 86vw;
    }
    .page-index .mac-home-v2-calc__text {
        padding-left: 20px;
        padding-right: 20px;
    }
    .page-index .mac-home-v2-calc__title {
        font-size: 30px;
    }
}

/* ==========================================================================
   HOME V2 — RÉGLAGES PILOTÉS PAR THEME CONFIG / BUILDER (2026-09-01)
   Les classes ci-dessous ne choisissent aucun contenu : elles traduisent les
   options enregistrées dans chaque bloc (largeur, colonnes, espacement, ratio).
   Les médias restent exclusivement issus de MacMédia.
   ========================================================================== */

/* Largeur de contenu — même vocabulaire pour Finder / Calculateur / Inspirations. */
.page-index .mac-home-v2-width--standard { --hv2-content-max: 1180px; }
.page-index .mac-home-v2-width--wide     { --hv2-content-max: 1320px; }
.page-index .mac-home-v2-width--full     { --hv2-content-max: 1500px; }

/* Espacement entre éléments — sélectionné dans les réglages du bloc. */
.page-index .mac-home-v2-gap--tight  { --hv2-gap: 10px; }
.page-index .mac-home-v2-gap--normal { --hv2-gap: 14px; }
.page-index .mac-home-v2-gap--airy   { --hv2-gap: 22px; }

/* Nos inspirations : mapping dédié. Les vignettes photo (sans cadre ni ombre)
   ont besoin de plus de respiration que les cartes Finder au même réglage —
   variable indépendante de --hv2-gap pour ne jamais modifier Finder. */
.page-index .mac-home-v2-inspiration.mac-home-v2-gap--tight  { --hv2-insp-gap: 12px; }
.page-index .mac-home-v2-inspiration.mac-home-v2-gap--normal { --hv2-insp-gap: 16px; }
.page-index .mac-home-v2-inspiration.mac-home-v2-gap--airy   { --hv2-insp-gap: 22px; }

/* Nombre de colonnes desktop — sélectionné dans les réglages du bloc. */
.page-index .mac-home-v2-cols--3 { --hv2-cols: 3; }
.page-index .mac-home-v2-cols--4 { --hv2-cols: 4; }
.page-index .mac-home-v2-cols--5 { --hv2-cols: 5; }

/* Proportion des vignettes Inspirations — sélectionnée dans les réglages. */
.page-index .mac-home-v2-ratio--wide    { --hv2-inspiration-ratio: 16 / 10; }
.page-index .mac-home-v2-ratio--classic { --hv2-inspiration-ratio: 4 / 3; }
.page-index .mac-home-v2-ratio--square  { --hv2-inspiration-ratio: 1 / 1; }

/* Desktop : Finder et Calculateur utilisent exactement la même formule de
   largeur. Si les deux blocs sont réglés sur « Large », leurs bords gauche et
   droit sont donc rigoureusement alignés. */
@media (min-width: 1101px) {
    .page-index .mac-home-v2-finder__head,
    .page-index .mac-home-v2-finder__grid,
    .page-index .mac-home-v2-inspiration__head,
    .page-index .mac-home-v2-inspiration__strip {
        width: min(calc(100% - (var(--md-gutter) * 2)), var(--hv2-content-max, var(--md-container-max)));
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .page-index .mac-home-v2-finder__grid,
    .page-index .mac-home-v2-inspiration__strip {
        grid-template-columns: repeat(var(--hv2-cols, 4), minmax(0, 1fr));
    }
    .page-index .mac-home-v2-finder__grid { gap: var(--hv2-gap, 14px); }
    .page-index .mac-home-v2-inspiration__strip { gap: var(--hv2-insp-gap, 16px); }

    .page-index .mac-home-v2-calc__inner {
        width: min(calc(100% - (var(--md-gutter) * 2)), var(--hv2-content-max, var(--md-container-max)));
    }

    .page-index .mac-home-v2-inspiration__item {
        aspect-ratio: var(--hv2-inspiration-ratio, 16 / 10);
    }
}

/* Tablette : largeur pilotée conservée, mais 2 colonnes pour garder une vraie
   surface photographique et des cibles tactiles confortables. */
@media (min-width: 768px) and (max-width: 1100px) {
    .page-index .mac-home-v2-finder__head,
    .page-index .mac-home-v2-finder__grid,
    .page-index .mac-home-v2-inspiration__head,
    .page-index .mac-home-v2-inspiration__strip {
        width: min(calc(100% - (var(--md-gutter) * 2)), var(--hv2-content-max, var(--md-container-max)));
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .page-index .mac-home-v2-finder__grid,
    .page-index .mac-home-v2-inspiration__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-index .mac-home-v2-finder__grid { gap: var(--hv2-gap, 14px); }
    .page-index .mac-home-v2-inspiration__strip { gap: var(--hv2-insp-gap, 16px); }

    .page-index .mac-home-v2-calc__inner {
        width: min(calc(100% - (var(--md-gutter) * 2)), var(--hv2-content-max, var(--md-container-max)));
    }

    .page-index .mac-home-v2-inspiration__item {
        aspect-ratio: var(--hv2-inspiration-ratio, 16 / 10);
    }
}

/* Mobile : les réglages desktop ne doivent jamais rendre les cartes trop
   petites. On garde donc les rails tactiles existants, mais l'espacement reste
   dérivé du choix du bloc et les marges sont homogènes. */
@media (max-width: 767px) {
    .page-index .mac-home-v2-finder__grid,
    .page-index .mac-home-v2-inspiration__strip {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--md-gutter);
        padding-right: var(--md-gutter);
        box-sizing: border-box;
    }
    .page-index .mac-home-v2-finder__grid { gap: clamp(10px, var(--hv2-gap, 14px), 18px); }
    .page-index .mac-home-v2-inspiration__strip { gap: clamp(12px, var(--hv2-insp-gap, 16px), 20px); }

    .page-index .mac-home-v2-finder__head,
    .page-index .mac-home-v2-inspiration__head {
        width: 100%;
        padding-left: var(--md-gutter);
        padding-right: var(--md-gutter);
        box-sizing: border-box;
    }

    .page-index .mac-home-v2-inspiration__item {
        aspect-ratio: var(--hv2-inspiration-ratio, 16 / 10);
    }
}

/* Aucune identité visuelle ne dépend plus de la position 1/2/3/4. Lorsqu'aucun
   média MacMédia n'est choisi, toutes les cartes utilisent le même fallback
   neutre. La vraie personnalité de chaque carte vient de son média Builder. */
.page-index .mac-home-v2-finder__card:nth-child(n) .mac-home-v2-finder__icon-fallback {
    background:
        linear-gradient(145deg, rgba(255,255,255,.30), transparent 48%),
        linear-gradient(135deg, var(--md-sand) 0%, var(--md-beige) 58%, var(--md-beige) 100%);
}

/* ==========================================================================
   FICHE KIT — finalisation frontend kit_v2 (refonte 2026-09-02)
   Additif uniquement — n'écrase aucune règle existante par recopie, gagne
   par ordre de cascade (fichier chargé une seule fois, ce bloc est le
   dernier lu) et par spécificité ciblée sur .mac-pdp--kit.
   ========================================================================== */

/* — Badges (KIT + flags natifs PS) — fin du chevauchement ————————————— */
.mac-product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
/* Neutralise le positionnement absolu individuel hérité (mac-theme.css,
   règle .mac-pdp__gallery .product-flags) — les deux enfants deviennent des
   membres normaux du flex wrapper ci-dessus. Spécificité (0,3,0) volontaire :
   mac-mineral-direct.css est chargé AVANT mac-theme.css (voir head.tpl) —
   une spécificité simplement égale (0,2,0) serait silencieusement battue
   par l'ordre de chargement, piège déjà documenté pour ce fichier. */
.page-product .mac-product-badges .product-flags {
    position: static;
    top: auto;
    left: auto;
    display: contents;
}
.page-product .mac-product-badges .product-flag {
    position: static;
}
.page-product .mac-pdp--kit .mac-product-badges .mac-kit-v2-badge {
    /* 4 classes (0,4,0) : bat sans ambiguïté l'ancienne règle
       .page-product .mac-pdp--kit .mac-kit-v2-badge (0,3,0) qui positionnait
       ce badge en absolute au même point que les flags — cause du
       chevauchement corrigé par ce chantier. */
    position: static;
    top: auto;
    left: auto;
}

/* — Identité commerciale (sous le H1) ————————————————————————————————— */
.mac-kit-v2-identity {
    margin: 4px 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(var(--md-ink-rgb), .62);
    letter-spacing: .01em;
}

/* — Prix : suffixe TTC —————————————————————————————————————————————————— */
.mac-product-page__price-ttc-suffix {
    font-size: .95rem;
    font-weight: 700;
    color: rgba(var(--md-ink-rgb), .55);
    margin-left: 6px;
    vertical-align: middle;
}

/* — Disponibilité + livraison (recomposition Kit) ——————————————————————— */
.mac-kit-v2-availability {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
    font-size: .88rem;
    color: rgba(var(--md-ink-rgb), .78);
}
.mac-kit-v2-availability__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.mac-kit-v2-availability__dot--ok { background: var(--md-green); }
.mac-kit-v2-availability__dot--ko { background: var(--md-alert); }
.mac-kit-v2-availability__text { font-weight: 700; color: var(--md-ink); }
.mac-kit-v2-availability__delivery {
    color: rgba(var(--md-ink-rgb), .55);
    padding-left: 8px;
    border-left: 1px solid rgba(var(--md-ink-rgb), .18);
}

/* — Fallback visuel Kit (aucune image propre au Kit) ——————————————————— */
.mac-kit-visual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.mac-kit-visual__main {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--md-chalk);
}
.mac-kit-visual__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mac-kit-visual__main-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(var(--md-ink-rgb), .82);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
}
.mac-kit-visual__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex-shrink: 0;
}
.mac-kit-visual__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--md-chalk);
    border: 1px solid rgba(var(--md-ink-rgb), .08);
}
.mac-kit-visual__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mac-kit-visual__thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(var(--md-ink-rgb), .72);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    text-align: center;
    padding: 3px 2px;
    letter-spacing: .02em;
}

/* — "Ce Kit comprend" — cartes par rôle métier (remplace la liste
   technique précédente ; réutilise les classes existantes __title/
   __list/__item comme conteneurs, la structure interne change) ————————— */
.mac-kit-v2-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 10px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--md-ink-rgb), .10);
}
.mac-kit-v2-stat {
    flex: 1 1 33%;
    min-width: 100px;
    padding: 14px 12px;
    text-align: center;
    background: #fff;
    border-right: 1px solid rgba(var(--md-ink-rgb), .10);
}
.mac-kit-v2-stat:last-child { border-right: none; }
.mac-kit-v2-stat strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--md-ink);
    margin-bottom: 2px;
}
.mac-kit-v2-stat span {
    display: block;
    font-size: .72rem;
    color: rgba(var(--md-ink-rgb), .55);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mac-kit-v2-composition__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(var(--md-ink-rgb), .08);
    list-style: none;
}
.mac-kit-v2-composition__item:last-child { border-bottom: none; }
.mac-kit-v2-composition__item--color {
    background: linear-gradient(90deg, rgba(var(--md-gold-rgb), .08), transparent 60%);
    border-radius: 8px;
}
.mac-kit-v2-composition__step {
    flex-shrink: 0;
    min-width: 78px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--md-ochre);
    padding-top: 2px;
}
.mac-kit-v2-composition__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mac-kit-v2-composition__name {
    font-weight: 700;
    color: var(--md-ink);
    font-size: .92rem;
}
.mac-kit-v2-composition__meta {
    font-size: .78rem;
    color: rgba(var(--md-ink-rgb), .55);
}

/* — Correction overflow horizontal mobile — div.mac-product-page__qty ———— */
.mac-product-page__qty-row,
.mac-buy__qty-row {
    min-width: 0;
}
.mac-product-page__qty,
.mac-buy__qty {
    min-width: 0;
    flex-shrink: 1;
}
.mac-buy__atc .add-to-cart,
.mac-product-page__add-to-cart .add-to-cart,
.mac-product-page__qty-row .add-to-cart {
    min-width: 0;
}
@media (max-width: 480px) {
    .page-product .mac-product-page__qty-row,
    .page-product .mac-buy__qty-row {
        display: grid;
        grid-template-columns: minmax(96px, 108px) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    .page-product .mac-product-page__qty,
    .page-product .mac-buy__qty {
        width: 100%;
        min-width: 0;
    }
    .page-product .mac-qty-btn { width: 32px; flex-shrink: 0; }
    .page-product .mac-qty-input { width: auto; min-width: 0; flex: 1; }
    .page-product .mac-buy__atc .add-to-cart,
    .page-product .mac-product-page__qty-row .add-to-cart {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* — Responsive Kit : identité/disponibilité restent lisibles en mobile ——— */
@media (max-width: 767px) {
    .mac-kit-v2-identity { font-size: .88rem; }
    .mac-kit-v2-availability { font-size: .82rem; }
    .mac-kit-v2-stat { flex: 1 1 50%; min-width: 0; }
    .mac-kit-visual { padding: 10px; gap: 8px; }
    .mac-kit-visual__thumb-label { font-size: .56rem; }
}

/* ==========================================================================
   FICHE KIT — refonte "page de vente" (mission 2026-09-03, référence mock-up)
   Additif — complète le bloc kit_v2 du 2026-09-02 ci-dessus.
   ========================================================================== */

/* — Promesse courte (description_short, si réellement présente) ———————— */
.mac-kit-v2-promise {
    margin: 8px 0 0;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(var(--md-ink-rgb), .78);
}
.mac-kit-v2-promise p { margin: 0 0 6px; }
.mac-kit-v2-promise ul { margin: 6px 0 0; padding: 0; list-style: none; }
.mac-kit-v2-promise li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 4px;
    font-size: .9rem;
}
.mac-kit-v2-promise li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--md-green);
    font-weight: 800;
}

/* — Galerie Kit — vraies slides + vignettes (mission §2) ——————————————— */
.mac-kit-visual-slide {
    background: var(--md-chalk);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mac-kit-visual-slide .mac-gallery__img {
    object-fit: contain;
    max-height: 92%;
    max-width: 92%;
}
.mac-kit-visual-slide__tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(var(--md-ink-rgb), .82);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 20px;
}
.mac-gallery--kit-fallback .mac-gallery__thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mac-gallery__thumb-caption {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(var(--md-ink-rgb), .55);
}
.mac-gallery--kit-fallback .mac-gallery__thumb.is-active .mac-gallery__thumb-caption {
    color: var(--md-ochre);
}

/* — Formats (chips, générique 1..N) ———————————————————————————————————— */
.mac-kit-v2-formats { margin: 4px 0 14px; }
.mac-kit-v2-formats__label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(var(--md-ink-rgb), .55);
    margin-bottom: 8px;
}
.mac-kit-v2-formats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.mac-kit-v2-formats__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 9px 14px;
    border: 1.5px solid rgba(var(--md-ink-rgb), .16);
    border-radius: 8px;
    background: #fff;
    color: var(--md-ink);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
a.mac-kit-v2-formats__chip:hover { border-color: rgba(var(--md-ink-rgb), .4); }
.mac-kit-v2-formats__chip.is-active {
    border-color: var(--md-ink);
    background: var(--md-ink);
    color: #fff;
}
.mac-kit-v2-formats__chip.is-single {
    cursor: default;
    background: var(--md-chalk);
    border-color: rgba(var(--md-ink-rgb), .12);
    color: var(--md-ink);
}

/* — Résumé "Ce Kit comprend" (mini, dans le hero) ——————————————————————— */
.mac-kit-v2-mini-summary {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--md-chalk);
    border: 1px solid rgba(var(--md-ink-rgb), .08);
    border-radius: 12px;
}
.mac-kit-v2-mini-summary__title {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--md-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mac-kit-v2-mini-summary__title strong { color: var(--md-ochre); }
.mac-kit-v2-mini-summary__list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}
.mac-kit-v2-mini-summary__list li {
    font-size: .82rem;
    color: rgba(var(--md-ink-rgb), .72);
    padding-left: 14px;
    position: relative;
}
.mac-kit-v2-mini-summary__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--md-gold);
}
.mac-kit-v2-mini-summary__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--md-ink);
    text-decoration: none;
    border-bottom: 1.5px solid var(--md-gold);
    padding-bottom: 1px;
}
.mac-kit-v2-mini-summary__link:hover { color: var(--md-ochre); }

/* — Besoin d'aide —————————————————————————————————————————————————————— */
.mac-kit-v2-help {
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px dashed rgba(var(--md-ink-rgb), .16);
    border-radius: 12px;
}
.mac-kit-v2-help__title { margin: 0; font-size: .85rem; font-weight: 700; color: var(--md-ink); }
.mac-kit-v2-help__sub { margin: 2px 0 8px; font-size: .78rem; color: rgba(var(--md-ink-rgb), .55); }
.mac-kit-v2-help__phone {
    display: inline-block;
    font-size: .95rem;
    font-weight: 800;
    color: var(--md-ink);
    text-decoration: none;
}
.mac-kit-v2-help__phone:hover { text-decoration: underline; }
.mac-kit-v2-help__hours { margin: 4px 0 0; font-size: .74rem; color: rgba(var(--md-ink-rgb), .5); }

/* — Onglet "Composition du Kit" (tableau détaillé) —————————————————————— */
.mac-kit-v2-comp-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mac-kit-v2-comp-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(var(--md-ink-rgb), .5);
    border-bottom: 1.5px solid rgba(var(--md-ink-rgb), .12);
}
.mac-kit-v2-comp-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(var(--md-ink-rgb), .07);
    color: var(--md-ink);
    vertical-align: top;
}
.mac-kit-v2-comp-table__row--color td:first-child { color: var(--md-ochre); font-weight: 700; }
.mac-kit-v2-comp-table__color-hint {
    display: block;
    font-size: .76rem;
    color: rgba(var(--md-ink-rgb), .5);
    font-weight: 400;
    margin-top: 2px;
}

/* Mobile (2026-09-03) — cartes verticales au lieu du tableau 4 colonnes,
   qui provoquait un débordement horizontal réel à 390px (scrollWidth 413
   vs viewport 390, audit visual-audit). Desktop/tablette (>767px)
   inchangés — aucune règle ci-dessus n'est modifiée. Cohérent avec le
   pattern déjà utilisé pour l'accordéon mobile du grand bandeau
   (.mac-kit-v2-band__mobile-item). */
@media (max-width: 767px) {
    .mac-kit-v2-comp-table,
    .mac-kit-v2-comp-table thead,
    .mac-kit-v2-comp-table tbody,
    .mac-kit-v2-comp-table th,
    .mac-kit-v2-comp-table td,
    .mac-kit-v2-comp-table tr { display: block; }
    .mac-kit-v2-comp-table thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .mac-kit-v2-comp-table tr {
        border: 1px solid rgba(var(--md-ink-rgb), .1);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #fff;
    }
    .mac-kit-v2-comp-table__row--color { border-color: rgba(var(--md-ochre-rgb), .35); }
    .mac-kit-v2-comp-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 6px 0;
        border-bottom: none;
        text-align: right;
    }
    .mac-kit-v2-comp-table td:not(:last-child) { border-bottom: 1px solid rgba(var(--md-ink-rgb), .06); }
    .mac-kit-v2-comp-table td::before {
        content: attr(data-label);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: rgba(var(--md-ink-rgb), .5);
        text-align: left;
        flex-shrink: 0;
    }
    .mac-kit-v2-comp-table__color-hint { text-align: right; }
}

/* — GRAND BANDEAU HORIZONTAL "Composition du Kit" ——————————————————————— */
.mac-kit-v2-band {
    background: var(--md-chalk);
    padding: 56px 0 60px;
    border-top: 1px solid rgba(var(--md-ink-rgb), .08);
}
.mac-kit-v2-band__title {
    text-align: center;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: var(--md-ink);
    margin: 0 0 36px;
    letter-spacing: -.01em;
}
.mac-kit-v2-band__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}
.mac-kit-v2-band__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 168px;
    padding: 4px 10px;
}
.mac-kit-v2-band__step {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--md-ochre);
    margin-bottom: 10px;
}
.mac-kit-v2-band__img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(var(--md-ink-rgb), .08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}
.mac-kit-v2-band__card--color .mac-kit-v2-band__img { border-color: var(--md-gold); border-width: 2px; }
.mac-kit-v2-band__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.mac-kit-v2-band__img-fallback { color: rgba(var(--md-ink-rgb), .3); }
.mac-kit-v2-band__name { margin: 0; font-size: .88rem; font-weight: 700; color: var(--md-ink); line-height: 1.3; }
.mac-kit-v2-band__meta { margin: 2px 0 0; font-size: .76rem; color: rgba(var(--md-ink-rgb), .5); min-height: 1em; }
.mac-kit-v2-band__color-hint { margin: 4px 0 0; font-size: .7rem; font-weight: 700; color: var(--md-ochre); }
.mac-kit-v2-band__plus {
    align-self: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(var(--md-ink-rgb), .28);
    padding: 0 6px;
    margin-top: 54px;
}

.mac-kit-v2-band__footnote {
    text-align: center;
    max-width: 640px;
    margin: 34px auto 0;
    font-size: .82rem;
    color: rgba(var(--md-ink-rgb), .55);
    line-height: 1.5;
}

/* Mobile — accordéon (mission §16), remplace la rangée horizontale */
.mac-kit-v2-band__mobile { display: none; }
.mac-kit-v2-band__mobile-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid rgba(var(--md-ink-rgb), .12);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--md-ink);
    cursor: pointer;
    min-height: 44px;
}
.mac-kit-v2-band__mobile-toggle svg { transition: transform .2s; flex-shrink: 0; }
.mac-kit-v2-band__mobile-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mac-kit-v2-band__mobile-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mac-kit-v2-band__mobile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(var(--md-ink-rgb), .08);
    border-radius: 10px;
    padding: 10px 12px;
}
.mac-kit-v2-band__mobile-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--md-chalk);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mac-kit-v2-band__mobile-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.mac-kit-v2-band__mobile-text { display: flex; flex-direction: column; min-width: 0; }
.mac-kit-v2-band__mobile-step {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--md-ochre);
}
.mac-kit-v2-band__mobile-name { font-size: .85rem; font-weight: 700; color: var(--md-ink); }
.mac-kit-v2-band__mobile-meta { font-size: .74rem; color: rgba(var(--md-ink-rgb), .5); }

@media (max-width: 899px) {
    .mac-kit-v2-band__row { display: none; }
    .mac-kit-v2-band__mobile { display: block; }
    .mac-kit-v2-band { padding: 40px 0 44px; }
    .mac-kit-v2-band__title { margin-bottom: 22px; font-size: 1.2rem; }
}
@media (min-width: 900px) {
    /* Wrap contrôlé si trop de composants (mission §15) — jamais réduit
       sous 120px de large, un carousel horizontal serait la suite logique
       au-delà de ~8 composants mais n'a pas de cas réel à ce jour. */
    .mac-kit-v2-band__row { row-gap: 28px; }
}

/* ==========================================================================
   NAVIGATION MINÉRALE V2 — HEADER / MENU FRONT
   2026-09-03 — Refonte visuelle uniquement, desktop + mobile.

   GARDE-FOUS :
   - aucune modification de $mac_menu ni de macthemeconfig ;
   - aucune modification du contenu, de l'ordre ou des URLs ;
   - le mega-menu "Galerie Minérale" existant est conservé ;
   - la couche reste additive : mac-theme.css demeure intact.

   ⚠ CORRECTIF SPÉCIFICITÉ 2026-09-03 (post-déploiement, capture réelle) :
   mac-mineral-direct.css est en réalité chargé AVANT mac-theme.css (piège
   déjà documenté plus haut dans ce fichier, section "Badges KIT") — pas
   après comme l'affirmait l'en-tête historique. mac-theme.css redéfinit
   .mac-header/.mac-nav__link/.mac-mobile-menu/.mac-mobile-nav__* à
   spécificité égale (et .mac-mobile-menu__header/.mac-mobile-nav__sub
   dans son bloc "MODERNISATION 2026" en fin de fichier) — sans le
   correctif ci-dessous, mac-theme.css gagne silencieusement la cascade et
   le drawer mobile restait rendu SOMBRE malgré ces règles (confirmé par
   capture réelle 390px : fond quasi-noir au lieu du chalk clair attendu).
   Fix : chaque déclaration contestée (background/color/height/border/
   box-shadow critiques) est renforcée avec `!important` — cohérent avec
   le pattern déjà utilisé ailleurs dans ce fichier pour la même cause
   racine (ex. `.page-index .mac-home-v2-calc__title { color:#fff !important }`
   plus haut). Ne PAS retirer ces `!important` sans d'abord vérifier l'ordre
   réel de chargement CSS servi en production (voir tête de fichier head.tpl).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau supérieur : garantit un rail continu et évite un vide visuel
   pendant le marquee, sans modifier les messages configurés.
   -------------------------------------------------------------------------- */
.mac-superheader__track {
    width: max-content !important;
    min-width: max-content !important;
    flex: 0 0 auto;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Desktop — navigation principale plus lisible et plus éditoriale
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .mac-header,
    .mac-header.scrolled {
        background: rgba(var(--md-chalk-rgb), .965) !important;
        border-bottom-color: rgba(var(--md-ink-rgb), .09) !important;
    }

    .mac-header {
        height: 80px !important;
    }

    .mac-header.scrolled {
        height: 72px !important;
        box-shadow: 0 10px 32px rgba(var(--md-ink-rgb), .07) !important;
    }

    .mac-header__inner {
        max-width: 1500px;
        grid-template-columns: minmax(190px, 1fr) auto minmax(250px, 1fr);
        gap: clamp(10px, 1.4vw, 22px);
        padding-inline: clamp(18px, 2.4vw, 38px);
    }

    .mac-header__nav,
    .mac-nav__list,
    .mac-nav__item {
        min-width: 0;
    }

    .mac-nav__list {
        gap: 2px;
    }

    .mac-nav__link {
        height: auto !important;
        min-height: 44px;
        padding: 0 12px !important;
        border-radius: 9px;
        font-family: var(--md-font-body);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 0;
        text-transform: none;
        color: var(--md-ink) !important;
        transition:
            color 180ms ease,
            background-color 180ms ease,
            transform 180ms ease;
    }

    .mac-nav__link:hover,
    .mac-nav__item--mega:hover > .mac-nav__link,
    .mac-nav__item--mega:focus-within > .mac-nav__link {
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .48) !important;
    }

    .mac-nav__item--mega:hover > .mac-nav__link,
    .mac-nav__item--mega:focus-within > .mac-nav__link {
        transform: translateY(-1px);
    }

    .mac-nav__item--kilitek > .mac-nav__link {
        color: var(--kili-vert) !important;
    }

    .mac-nav__item--kilitek > .mac-nav__link:hover,
    .mac-nav__item--kilitek:focus-within > .mac-nav__link {
        color: var(--kili-vert) !important;
        background: color-mix(in srgb, var(--kili-vert) 8%, transparent) !important;
    }

    .mac-nav__chevron {
        width: 11px;
        height: 11px;
        margin-left: 1px;
        opacity: .52;
        stroke-width: 1.75;
    }

    .mac-nav__indicator {
        bottom: 7px;
        height: 2px;
        border-radius: 999px;
        background: var(--md-earth) !important;
    }

    /* Actions header : vraies zones interactives, sans effet "petits labels" */
    .mac-header__actions {
        gap: 4px;
        padding-left: clamp(8px, 1.4vw, 22px);
    }

    .mac-header__actions-sep {
        display: none;
    }

    .mac-header__action-btn,
    .mac-header__actions .user-info a,
    .mac-header__actions .blockcart .header {
        min-height: 44px;
        border-radius: 9px;
        padding: 0 10px !important;
        font-family: var(--md-font-body) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: var(--md-ink) !important;
        transition: color 180ms ease, background-color 180ms ease;
    }

    .mac-header__action-btn:hover,
    .mac-header__actions .user-info a:hover,
    .mac-header__actions .blockcart .header:hover,
    .mac-header__actions .blockcart.active .header:hover {
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .48) !important;
    }

    .mac-header__action-label {
        font-family: var(--md-font-body);
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
    }

    .mac-header__action-btn svg,
    .mac-header__actions .material-icons {
        flex: 0 0 auto;
    }

    .mac-header__action-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.6;
    }

    .mac-header__actions .material-icons {
        font-size: 20px !important;
    }

    .mac-header__actions .cart-products-count {
        font-size: 12px;
        font-weight: 700;
    }
}

/* Intermédiaire desktop/tablette paysage : garder la typo lisible sans tasser. */
@media (min-width: 992px) and (max-width: 1200px) {
    .mac-header__inner {
        grid-template-columns: minmax(155px, .8fr) auto minmax(104px, .6fr);
        gap: 8px;
        padding-inline: 14px;
    }

    .mac-nav__list {
        gap: 0;
    }

    .mac-nav__link {
        min-height: 42px;
        padding-inline: 8px !important;
        font-size: 15px !important;
    }

    .mac-header__actions {
        padding-left: 4px;
        gap: 2px;
    }

    .mac-header__action-label,
    .mac-header__actions .user-info a > span:not(.material-icons),
    .mac-header__actions .blockcart .header > span:not(.material-icons):not(.cart-products-count) {
        display: none !important;
    }

    .mac-header__action-btn,
    .mac-header__actions .user-info a,
    .mac-header__actions .blockcart .header {
        width: 44px;
        min-width: 44px;
        padding-inline: 0 !important;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Mobile — header fermé : icônes tactiles, calme, plus net
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mac-header,
    .mac-header.scrolled {
        height: 68px !important;
        background: rgba(var(--md-chalk-rgb), .98) !important;
        border-bottom-color: rgba(var(--md-ink-rgb), .09) !important;
        box-shadow: 0 5px 20px rgba(var(--md-ink-rgb), .045) !important;
    }

    .mac-header__inner {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .mac-header__actions {
        gap: 2px;
        padding-left: 0;
    }

    .mac-header__actions-sep {
        display: none;
    }

    .mac-header__action-btn,
    .mac-header__burger {
        width: 46px;
        min-width: 46px;
        height: 46px !important;
        min-height: 46px;
        padding: 0 !important;
        border-radius: 11px;
        align-items: center;
        justify-content: center;
        color: var(--md-ink) !important;
        transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .mac-header__action-btn:hover,
    .mac-header__burger:hover {
        background: rgba(var(--md-sand-rgb), .5) !important;
        color: var(--md-ink) !important;
    }

    .mac-header__action-btn:active,
    .mac-header__burger:active {
        transform: scale(.96);
    }

    .mac-header__action-label {
        display: none !important;
    }

    .mac-header__burger {
        gap: 5px;
    }

    .mac-header__burger-bar {
        width: 23px;
        height: 1.5px !important;
        border-radius: 999px;
        background: var(--md-ink) !important;
    }

    /* Overlay plus léger : le drawer clair reste le point focal. */
    .mac-mobile-overlay {
        background: rgba(var(--md-ink-rgb), .34) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity 250ms ease;
    }

    /* Drawer minéral clair */
    .mac-mobile-menu {
        width: min(420px, 96vw) !important;
        background: var(--md-chalk) !important;
        color: var(--md-ink) !important;
        border-right: 1px solid rgba(var(--md-ink-rgb), .08) !important;
        box-shadow: 22px 0 58px rgba(var(--md-ink-rgb), .18) !important;
        transition: transform 250ms cubic-bezier(.2, .76, .25, 1);
    }

    .mac-mobile-menu__header {
        min-height: 76px;
        padding: 12px 16px 12px 18px;
        border-bottom: 1px solid var(--md-stone) !important;
        background: rgba(var(--md-chalk-rgb), .98) !important;
    }

    .mac-mobile-logo {
        max-height: 52px;
    }

    .mac-mobile-logo img,
    .mac-mobile-logo svg {
        max-height: 50px !important;
        max-width: 178px;
        filter: none !important;
    }

    .mac-mobile-logo__text {
        font-family: var(--md-font-title);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.01em;
        text-transform: none;
        color: var(--md-ink) !important;
    }

    .mac-mobile-menu__close {
        width: 46px;
        min-width: 46px;
        height: 46px !important;
        min-height: 46px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .52) !important;
        transition: background-color 160ms ease, transform 160ms ease;
    }

    .mac-mobile-menu__close:hover {
        color: var(--md-ink) !important;
        background: var(--md-stone) !important;
    }

    .mac-mobile-menu__close:active {
        transform: scale(.95);
    }

    .mac-mobile-menu__close svg {
        width: 21px;
        height: 21px;
        stroke-width: 1.7;
    }

    .mac-mobile-menu__scroll {
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--md-ink-rgb), .22) transparent;
    }

    .mac-mobile-nav {
        padding: 8px 10px 12px !important;
    }

    .mac-mobile-nav__item {
        border-bottom: 1px solid rgba(var(--md-ink-rgb), .075) !important;
    }

    .mac-mobile-nav__row {
        min-height: 58px;
    }

    .mac-mobile-nav__link {
        min-height: 58px !important;
        display: flex !important;
        align-items: center;
        padding: 12px 10px 12px 8px !important;
        border-radius: 9px;
        font-family: var(--md-font-body);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -.015em;
        color: var(--md-ink) !important;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .mac-mobile-nav__link:hover {
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .48) !important;
        padding-left: 8px !important;
    }

    .mac-mobile-nav__item--kilitek .mac-mobile-nav__link,
    .mac-mobile-nav__item--kilitek .mac-mobile-nav__link:hover {
        color: var(--kili-vert) !important;
    }

    .mac-mobile-nav__link-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        margin-right: 10px;
    }

    .mac-mobile-nav__toggle {
        width: 52px !important;
        min-width: 52px;
        height: 52px !important;
        min-height: 52px;
        margin-right: 1px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
        color: rgba(var(--md-ink-rgb), .52) !important;
        transition: background-color 160ms ease, color 160ms ease;
    }

    .mac-mobile-nav__toggle:hover,
    .mac-mobile-nav__item.is-open .mac-mobile-nav__toggle {
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .58) !important;
    }

    .mac-mobile-nav__toggle svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.75;
        transition: transform 220ms cubic-bezier(.2, .76, .25, 1);
    }

    /* Accordéon : une vraie sous-zone minérale au lieu d'un panneau sombre. */
    .mac-mobile-nav__sub {
        margin: 0 2px 8px !important;
        padding: 0 !important;
        border-radius: 10px;
        background: var(--md-chalk) !important;
        box-shadow: inset 0 0 0 1px rgba(var(--md-ink-rgb), .045) !important;
        transition: max-height 240ms cubic-bezier(.2, .76, .25, 1);
    }

    .mac-mobile-nav__sub-link {
        position: relative;
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 11px 16px 11px 34px !important;
        border-bottom: 1px solid rgba(var(--md-ink-rgb), .055) !important;
        font-family: var(--md-font-body);
        font-size: 15.5px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: -.005em;
        color: rgba(var(--md-ink-rgb), .78) !important;
        transition: color 160ms ease, background-color 160ms ease;
    }

    .mac-mobile-nav__sub li:last-child .mac-mobile-nav__sub-link {
        border-bottom: 0 !important;
    }

    .mac-mobile-nav__sub-link::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 50%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--md-earth) !important;
        transform: translateY(-50%);
        opacity: .7;
    }

    .mac-mobile-nav__sub-link:hover {
        color: var(--md-ink) !important;
        background: rgba(255, 255, 255, .52) !important;
        padding-left: 34px !important;
    }

    .mac-mobile-menu__utils {
        gap: 10px;
        padding: 14px 18px 16px;
        border-top: 0 !important;
        margin-top: 4px;
        color: rgba(var(--md-ink-rgb), .7) !important;
    }

    .mac-mobile-menu__footer {
        gap: 6px;
        padding: 12px 18px max(14px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--md-stone) !important;
        background: var(--md-chalk) !important;
    }

    .mac-mobile-menu__footer .user-info a,
    .mac-mobile-menu__footer .blockcart .header,
    .mac-mobile-menu__footer .blockcart .header a,
    .mac-mobile-menu__tel {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        gap: 9px;
        padding: 0 8px !important;
        border-radius: 8px;
        font-family: var(--md-font-body) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: rgba(var(--md-ink-rgb), .78) !important;
        text-decoration: none !important;
    }

    .mac-mobile-menu__footer .user-info a:hover,
    .mac-mobile-menu__footer .blockcart .header:hover,
    .mac-mobile-menu__tel:hover {
        color: var(--md-ink) !important;
        background: rgba(var(--md-sand-rgb), .55) !important;
    }

    .mac-mobile-menu__footer .material-icons {
        font-size: 20px !important;
        color: currentColor !important;
    }

    .mac-mobile-menu__tel svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 575px) {
    .mac-mobile-menu {
        width: 100vw !important;
        max-width: 100vw !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }

    .mac-mobile-menu__header {
        padding-left: 16px;
        padding-right: 12px;
    }

    .mac-mobile-nav {
        padding-inline: 8px !important;
    }

    .mac-mobile-nav__link {
        font-size: 18px;
    }

    .mac-superheader__track {
        gap: 2rem;
    }
}

/* Accessibilité mouvement : aucune animation décorative imposée. */
@media (prefers-reduced-motion: reduce) {
    .mac-mobile-overlay,
    .mac-mobile-menu,
    .mac-mobile-nav__toggle svg,
    .mac-nav__link,
    .mac-header__action-btn,
    .mac-header__burger,
    .mac-mobile-menu__close {
        transition: none !important;
    }
}

/* ==========================================================================
   FICHE KIT — RECOMPOSITION VISUELLE FINALE (mission 2026-09-03)
   Compaction réelle à partir des mesures MAC UI Inspector (tools/visual-audit).
   Hero 3 colonnes (galerie / achat / colonne secondaire), mini-résumé et aide
   compacts et latéraux, espacements réduits, bandeau composition sans effet
   "carte technique". Scopé Kit uniquement (.mac-pdp--kit), aucun effet sur
   un produit standard. Spécificité obtenue par chaînage de classes (2-3
   niveaux) ou sélecteur #add-to-cart-or-refresh (ID) — jamais de !important.
   ========================================================================== */

/* — Hero 3 colonnes desktop (mission §2/§3) — (0,3,0), bat .page-product
   .mac-pdp__hero-grid (0,2,0) sans !important. */
.page-product .mac-pdp--kit .mac-pdp__hero-grid--kit {
    /* Galerie élargie à ~46-48% de la largeur hero (mission "DERNIÈRE PASSE
       UI" §1 — mesurée à 40% avant ce changement) sans écraser la colonne
       ColorIA/CTA : ratio 2.5:1.5:1 au lieu de 2.3:1.55:1. */
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(226px, 1fr);
    gap: 22px;
}
@media (max-width: 1100px) {
    .page-product .mac-pdp--kit .mac-pdp__hero-grid--kit { grid-template-columns: 1fr 1fr; }
    .mac-pdp--kit .mac-pdp__kit-aside { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    /* Flex plutôt que grid 1 colonne (mission "ULTIME PASSE — PRIORITÉ
       MOBILE", §5) : avec 4 items dont un `grid-column:1/-1` combiné à
       `order`, CSS Grid produisait des largeurs incohérentes selon les
       items (aside constaté à 228px au lieu de 366px, cause exacte non
       élucidée avec certitude malgré investigation réelle — probable
       edge-case du moteur de rendu sur repositionnement de span+order dans
       une grille à 1 colonne). Flexbox stretch (comportement par défaut,
       align-items) donne une largeur pleine et fiable à tous les enfants
       sans hack par élément, et `order` fonctionne identiquement. */
    .page-product .mac-pdp--kit .mac-pdp__hero-grid--kit {
        display: flex;
        flex-direction: column;
        /* ⚠ .mac-pdp__hero-grid porte align-items:start (mac-theme.css,
           règle générique tous produits) — sans l'écraser explicitement
           ici, les enfants ne s'étirent pas sur l'axe transverse (largeur)
           et retombent sur leur largeur intrinsèque (constaté : aside à
           228px au lieu de 366px). */
        align-items: stretch;
    }
}

/* — Colonne secondaire : "Ce Kit comprend" + "Besoin d'aide" empilés — */
.mac-pdp__kit-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* — Mini-résumé compact, 1 colonne (mission §5/§6/§7) — remplace la grille
   2 colonnes, incompatible avec de vrais noms produits. */
.mac-pdp__kit-aside .mac-kit-v2-mini-summary {
    margin-top: 0;
    padding: 14px 16px;
}
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
}
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__list li {
    padding-left: 12px;
}
.mac-kit-v2-mini-summary__name {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--md-ink);
}
.mac-kit-v2-mini-summary__sub {
    display: block;
    font-size: .72rem;
    color: rgba(var(--md-ink-rgb), .55);
}

/* — Besoin d'aide compact (mission §8) — même largeur que le mini-résumé
   via le parent flex commun, pas de largeur en dur. */
.mac-pdp__kit-aside .mac-kit-v2-help {
    margin-top: 0;
    padding: 12px 16px;
}
.mac-pdp__kit-aside .mac-kit-v2-help__title { font-size: .8rem; }
.mac-pdp__kit-aside .mac-kit-v2-help__sub { font-size: .74rem; }

/* — Espacements verticaux du bloc achat (mission §4) — chaque règle cible
   directement le bloc dont la marge-bas détermine l'espace APRÈS lui.
   #add-to-cart-or-refresh (ID) suffit à battre les règles existantes sans
   !important — voir le correctif sticky précédent pour le seul cas où un
   ID ne suffisait pas (ID natif Classic, hors de propos ici). */
.mac-pdp--kit .mac-buy__pricing { margin-bottom: 6px; }
.page-product .mac-pdp--kit .mac-kit-v2-coverage { margin: 0 0 18px; }
/* ⚠ !important exceptionnel ici (comme le sticky galerie précédent) —
   constaté en conditions réelles : l'élément porte en fait 2 classes
   (`mac-teinte-wrap mac-teinte-wrap--kit`), et malgré une spécificité
   ID+classe supérieure à toute règle trouvable par inspection des
   stylesheets (document.styleSheets, y compris les <style> inline du
   widget), la marge du haut restait bloquée à 14px. Cause exacte non
   identifiée après investigation réelle (probable limite d'inspection
   CSSOM sur un <style> injecté dynamiquement) — !important est le seul
   levier qui a réellement fonctionné une fois vérifié dans le navigateur. */
#add-to-cart-or-refresh .mac-teinte-wrap,
#add-to-cart-or-refresh .mac-teinte-wrap--kit { margin: 0 0 16px !important; }
/* Blocs Variantes/Remises PS natifs — vides pour ce Kit (pas de déclinaison
   PS propre ni de remise) mais leurs classes génériques portent une marge
   par défaut même à vide, créant ~40px d'espace fantôme avant ColorIA.
   Neutralisé en contexte Kit uniquement (produit standard inchangé). Si un
   futur Kit a de vraies variantes PS, ce bloc redeviendra visible avec du
   contenu réel — cette règle ne fait que retirer la marge, jamais masquer
   le bloc lui-même. */
#add-to-cart-or-refresh .mac-product-page__variants,
#add-to-cart-or-refresh .product-discounts { margin: 0; }
#add-to-cart-or-refresh .mac-kit-v2-formats { margin: 4px 0 14px; }
#add-to-cart-or-refresh .mac-kit-v2-availability { margin: 0 0 10px; }
#add-to-cart-or-refresh .mac-buy__atc { margin-bottom: 0; }

/* — Bandeau composition : le nom le plus long ne doit plus dicter la
   hauteur de toute la rangée (mission §11/§13/§14) — plafonné à 2 lignes,
   quel que soit le nom catalogue réel (les noms courts frontend suffisent
   déjà la plupart du temps, ce plafond protège aussi tout futur composant
   non mappé qui retomberait sur le repli générique plus long). */
.mac-kit-v2-band__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mac-kit-v2-band__footnote { margin-top: 22px; }

/* — Réassurance Kit (mission §18) — bandeau compact icône+libellé, réutilise
   le vrai contenu Home Builder V2. Oubliée lors du premier passage : les SVG
   de mac-hv2-icon.tpl n'ont pas de taille intrinsèque hors de leur contexte
   Home V2 d'origine (qui la fixe ailleurs) — sans cette règle ils héritent
   d'un rendu par défaut du navigateur bien plus grand que prévu. */
.mac-kit-v2-reass {
    border-top: 1px solid rgba(var(--md-ink-rgb), .08);
    border-bottom: 1px solid rgba(var(--md-ink-rgb), .08);
    padding: 18px 0;
    background: var(--md-chalk);
}
.mac-kit-v2-reass__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 40px;
}
.mac-kit-v2-reass__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--md-ink);
}
.mac-kit-v2-reass__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--md-ochre);
}
.mac-kit-v2-reass__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 575px) {
    .mac-kit-v2-reass__list { gap: 14px 24px; }
    .mac-kit-v2-reass__item { font-size: .78rem; }
}

/* ==========================================================================
   kit_v2 — DERNIÈRE PASSE UI (2026-09-03) — fidélité maximale au mock-up.
   Uniquement de la présentation (CSS/gabarit) au-dessus de l'existant :
   aucune donnée métier, aucun prix/stock/composition/version active
   touché. Scopé Kit uniquement, toujours par chaînage de classes ou ID
   (jamais de nouveau !important hors des 2 cas déjà justifiés plus haut).
   ========================================================================== */

/* — §1 (suite) Le vrai plafond qui empêchait la galerie de dépasser 452px
   n'était pas le ratio du grid (déjà correct : track réel 523.75px vérifié
   via getComputedStyle) mais une règle NATIVE PrestaShop Classic non
   documentée jusqu'ici : `#product #content{max-width:452px}` (theme.css,
   2 sélecteurs ID = spécificité (2,0,0)) — `.mac-pdp__gallery` EST ce même
   `#content` (le thème Classic fork ajoute ses classes sur le conteneur
   natif). Seul un sélecteur au moins aussi spécifique peut la battre sans
   !important ; scopé Kit uniquement via `.mac-pdp--kit` (2 ID + 1 classe
   = (2,1,0), bat (2,0,0) quel que soit l'ordre de chargement). — */
#product .mac-pdp--kit #content { max-width: none; }

/* — §3 Avis : pastille compacte (24-30px), le module macavis lui-même
   n'est jamais modifié — seul un override scopé au conteneur Kit. — */
.mac-buy__reviews-row--kit .mac-avis-compact {
    margin: 0 0 6px;
    padding: 3px 10px 3px 8px;
    gap: 5px;
    min-height: 0;
}
.mac-buy__reviews-row--kit .mac-avis-compact__invite-text { font-size: 11px; }
.mac-buy__reviews-row--kit .mac-avis-stars--sm { font-size: 11px; }
.mac-buy__reviews-row--kit .mac-avis-compact__count,
.mac-buy__reviews-row--kit .mac-avis-compact__rating { font-size: 11px; }

/* — §4 Titre/prix : dominants mais moins massifs (titre -8%, prix -15%). — */
.page-product .mac-pdp--kit .mac-buy__name {
    font-size: clamp(26px, 2.7vw, 35px);
}
.page-product .mac-pdp--kit .mac-product-page__price-value,
.page-product .mac-pdp--kit .current-price-value {
    font-size: clamp(21px, 2.1vw, 29px);
}

/* — §5 ColorIA : trigger compacté en ligne interactive ~46-54px, aide
   discrète. Le widget maccoloriste.tpl n'est jamais édité — override
   2-classes (0,2,0), bat sa propre règle 1-classe sans !important. — */
.mac-pdp--kit .mac-teinte-trigger {
    padding: 9px 14px;
    gap: 10px;
}
.mac-pdp--kit .mac-teinte-trigger__ico {
    width: 28px;
    height: 28px;
}
.mac-pdp--kit .mac-teinte-trigger__ico svg { width: 15px; height: 15px; }
.mac-pdp--kit .mac-teinte-trigger__label { font-size: 11px; }
.mac-pdp--kit .mac-teinte-trigger__sub { font-size: 10px; margin-top: 1px; }
.mac-pdp--kit .mac-teinte-kit-hint {
    margin: 0 0 4px;
    font-size: 10px;
    opacity: .58;
    line-height: 1.3;
}

/* — §6 Espace prix/m² → ColorIA : la vraie source de l'écart de 36px n'était
   ni .mac-kit-v2-coverage ni .mac-teinte-wrap (déjà traités) mais
   #add-to-cart-or-refresh (le <form> ATC) lui-même — `.mac-buy__form` porte
   `margin-top:16px` + `border-top:1px` + `padding-top:19px` (mac-theme.css,
   2 règles à la même sélectivité, la 2e écrasant seulement padding-top).
   Trouvé via inspection réelle du DOM (getBoundingClientRect + computed
   style de chaque enfant entre le prix/m² et ColorIA), pas deviné. Scopé
   Kit : (0,3,0) bat les 2 règles (0,2,0) existantes. */
.page-product .mac-pdp--kit .mac-kit-v2-coverage { margin: 0 0 8px; }
.page-product .mac-pdp--kit .mac-buy__form {
    margin-top: 0;
    padding-top: 10px;
    border-top: none;
}

/* — §7 Mini-résumé : 1 ligne par produit (nom à gauche, format à droite),
   suppression de la puce décorative héritée, dimensions resserrées. — */
.mac-pdp__kit-aside .mac-kit-v2-mini-summary {
    padding: 12px 15px;
}
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__title { margin: 0 0 6px; }
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__list {
    gap: 4px;
    margin: 0 0 6px;
}
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 8px;
    padding-left: 0;
}
.mac-pdp__kit-aside .mac-kit-v2-mini-summary__list li::before { display: none; }
.mac-kit-v2-mini-summary__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mac-kit-v2-mini-summary__qty {
    display: inline;
    font-size: .72rem;
    color: rgba(var(--md-ink-rgb), .55);
    white-space: nowrap;
    text-align: right;
}

/* — Accordéon mobile du mini-résumé (§17, NOUVEAU) : fermé par défaut sous
   768px ("Ce Kit comprend / N produits ⌄" + lien "Voir la composition"),
   toujours entièrement ouvert au-delà — jamais le même mécanisme que
   l'accordéon du grand bandeau (id différent, JS séparé plus bas). — */
.mac-kit-v2-mini-summary__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 2px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--md-ink);
    cursor: pointer;
    text-align: left;
}
.mac-kit-v2-mini-summary__toggle strong { color: var(--md-ochre); }
.mac-kit-v2-mini-summary__toggle svg { transition: transform .2s; flex-shrink: 0; }
.mac-kit-v2-mini-summary__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 767px) {
    .mac-kit-v2-mini-summary__toggle { display: flex; }
    .mac-kit-v2-mini-summary--closed .mac-kit-v2-mini-summary__title { display: none; }
    .mac-kit-v2-mini-summary--closed .mac-kit-v2-mini-summary__list,
    .mac-kit-v2-mini-summary--closed .mac-kit-v2-mini-summary__link { display: none; }
}

/* — §8 Besoin d'aide : dimensions resserrées (padding réduit, lisibilité
   conservée). — */
.mac-pdp__kit-aside .mac-kit-v2-help {
    padding: 8px 14px;
}
.mac-pdp__kit-aside .mac-kit-v2-help__sub { margin: 1px 0 4px; font-size: .7rem; }
.mac-pdp__kit-aside .mac-kit-v2-help__title { font-size: .76rem; }
.mac-pdp__kit-aside .mac-kit-v2-help__phone { font-size: .84rem; }
.mac-pdp__kit-aside .mac-kit-v2-help__hours { margin: 2px 0 0; }

/* — §10-§15 Grand bandeau composition : hauteur ramenée vers 280-330px,
   fond mineral partagé (aucun fond/bordure/ombre individuelle par carte),
   titre "COMPOSITION DU KIT" aligné à gauche, images plus dominantes que
   le texte, footnote discrète sur une seule ligne quand la largeur le
   permet. — */
.mac-kit-v2-band { padding: 20px 0 24px; }
.mac-kit-v2-band__head {
    text-align: left;
    margin: 0 0 12px;
}
.mac-kit-v2-band__title {
    text-align: left;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    margin: 0;
}
.mac-kit-v2-band__subtitle {
    margin: 4px 0 0;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(var(--md-ink-rgb), .55);
}
.mac-kit-v2-band__row { row-gap: 14px; }
.mac-kit-v2-band__card {
    padding: 0 10px;
}
.mac-kit-v2-band__step { margin-bottom: 6px; }
.mac-kit-v2-band__img {
    width: 88px;
    height: 88px;
    background: transparent;
    border: none;
    margin-bottom: 8px;
}
.mac-kit-v2-band__card--color .mac-kit-v2-band__img { border: none; }
.mac-kit-v2-band__name { font-size: .8rem; }
.mac-kit-v2-band__plus { margin-top: 24px; }
.mac-kit-v2-band__footnote {
    margin-top: 14px;
    font-size: .76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 899px) {
    .mac-kit-v2-band { padding: 18px 0 22px; }
    .mac-kit-v2-band__footnote { white-space: normal; }
}

/* — §18 Réassurance mobile : liste verticale (mission "ULTIME PASSE",
   §7/§9 — seuil élargi à 767px pour rester cohérent avec le
   réordonnancement mobile ci-dessous ; 3 items déjà filtrés côté PHP,
   :nth-child ci-dessous reste un filet de sécurité défensif). — */
@media (max-width: 767px) {
    .mac-kit-v2-reass__list { flex-direction: column; align-items: flex-start; gap: 10px 0; }
    .mac-kit-v2-reass__item { width: 100%; }
    .mac-kit-v2-reass__item:nth-child(n+4) { display: none; }
}

/* — §13/§19 Onglets produit : titre "Composition du Kit" aligné cohérent
   avec le nouvel entête du bandeau (présentation uniquement). — */
.page-product .mac-pdp--kit #btn-tab-kit-composition { order: 2; }

/* ==========================================================================
   kit_v2 — ULTIME PASSE DE FIDÉLITÉ, PRIORITÉ MOBILE (2026-09-03)
   Macro-layout desktop inchangé (3 colonnes, largeurs, galerie/résumé/aide).
   Uniquement : avis (desktop+mobile), réassurance limitée à 3 items
   (desktop+mobile), et un resserrage mobile ciblé (<768px).
   ========================================================================== */

/* — §1/§12A Avis vraiment compact — desktop ET mobile, jamais de pill/fond/
   bordure visible, ~20-26px de haut. Le module macavis n'est pas modifié,
   seul un override scopé sur son conteneur Kit. — */
.mac-buy__reviews-row--kit .mac-avis-compact {
    margin: 0 0 6px;
    padding: 2px 0;
    gap: 4px;
    min-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.mac-buy__reviews-row--kit .mac-avis-compact--invite {
    background: transparent;
    border-style: none;
}
.mac-buy__reviews-row--kit .mac-avis-compact__invite-text {
    font-size: 11px;
    line-height: 1.3;
}
.mac-buy__reviews-row--kit .mac-avis-stars--sm {
    font-size: 10px;
    line-height: 1;
}

/* — §5 Réassurance déplacée dans le hero-grid (voir product.tpl) — reste
   pleine largeur sur sa propre ligne à toutes les largeurs (comportement
   visuel desktop strictement inchangé). — */
.mac-pdp--kit .mac-kit-v2-reass--in-grid { grid-column: 1 / -1; width: 100%; }

/* — §7 "Conseils d'experts" porte désormais le vrai téléphone (absorbe
   l'info de la carte "Besoin d'aide ?" masquée sur mobile, §6) — discret,
   jamais une donnée inventée (même source que la carte aide). — */
.mac-kit-v2-reass__text { display: flex; flex-direction: column; }
.mac-kit-v2-reass__phone {
    font-size: .78em;
    font-weight: 700;
    color: var(--md-ochre);
    text-decoration: none;
}
.mac-kit-v2-reass__phone:hover { text-decoration: underline; }

/* — §2/§3 Galerie mobile + dots (kit_v2 uniquement, jamais le produit
   standard) — dots masqués par défaut (desktop/tablette gardent les vraies
   miniatures), activés uniquement sous 768px. — */
.mac-pdp--kit .mac-gallery__dots { display: none; }
.mac-pdp--kit .mac-gallery__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mac-pdp--kit .mac-gallery__dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--md-ink-rgb), .25);
    transition: background .2s, width .2s, border-radius .2s;
}
.mac-pdp--kit .mac-gallery__dot.is-active::before {
    background: var(--md-ochre);
    width: 16px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    /* §2 — galerie ramenée à ~270-300px de haut, jamais déformée
       (object-fit:contain déjà en place sur .mac-gallery__img). */
    .mac-pdp--kit .mac-gallery__main {
        aspect-ratio: auto;
        height: 280px;
    }

    /* §3 — strip de miniatures masqué, dots affichés à la place.
       ⚠ (0,3,0) nécessaire : mac-theme.css a déjà
       .mac-gallery--thumbs-bottom .mac-gallery__thumbs{display:flex}
       (0,2,0), chargé APRÈS ce fichier — à spécificité égale il gagnerait
       le lien malgré la media query. */
    .page-product .mac-pdp--kit .mac-gallery__thumbs { display: none; }
    .mac-pdp--kit .mac-gallery__dots {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-top: 10px;
    }

    /* §4 — catégorie masquée en présentation uniquement (HTML conservé). */
    .mac-pdp--kit .mac-buy__category { display: none; }

    /* §5 — réordonnancement : quantité+CTA (ordre naturel du form) →
       réassurance → mini-résumé "Ce Kit comprend". La colonne .mac-pdp__buy
       (galerie exclue) garde son order implicite (2) ; seuls les deux
       éléments suivants du hero-grid sont explicitement replacés. */
    .mac-pdp--kit .mac-kit-v2-reass--in-grid { order: 3; }
    .mac-pdp--kit .mac-pdp__kit-aside { order: 4; }

    /* §6 — carte "Besoin d'aide ?" masquée sur mobile (info absorbée par
       "Conseils d'experts" dans la réassurance, §7) — donnée conservée,
       jamais supprimée du DOM. */
    .mac-pdp__kit-aside .mac-kit-v2-help { display: none; }

    /* §8 — ColorIA encore plus compact sur mobile (aucun changement
       fonctionnel) — ligne interactive ~48-52px. */
    .mac-pdp--kit .mac-teinte-trigger {
        padding: 7px 12px;
        gap: 8px;
    }
    .mac-pdp--kit .mac-teinte-trigger__ico {
        width: 24px;
        height: 24px;
    }
    .mac-pdp--kit .mac-teinte-trigger__ico svg { width: 13px; height: 13px; }
    .mac-pdp--kit .mac-teinte-trigger__label { font-size: 10.5px; }
    .mac-pdp--kit .mac-teinte-trigger__sub { font-size: 9px; }
    .mac-pdp--kit .mac-teinte-kit-hint {
        margin: 0 0 4px;
        font-size: 9px;
        opacity: .5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* §9 — resserrage des espacements verticaux mobile (mesures avant
       ajustement final — voir mission pour les cibles précises par
       intervalle). Scopé Kit + mobile uniquement, desktop inchangé. */
    .mac-pdp--kit .mac-buy__name { margin: 0 0 7px; }
    .mac-pdp--kit .mac-kit-v2-identity { margin: 0 0 7px; }
    .mac-pdp--kit .mac-buy__pricing { margin-bottom: 5px; }
    .page-product .mac-pdp--kit .mac-kit-v2-coverage { margin: 0 0 8px; }
    .page-product .mac-pdp--kit .mac-buy__form { padding-top: 8px; }
    #add-to-cart-or-refresh .mac-kit-v2-formats { margin: 2px 0 10px; }
    #add-to-cart-or-refresh .mac-kit-v2-availability { margin: 0 0 8px; }
}

/* ==========================================================================
   RECHERCHE V2 (2026-09-09) — refonte modale + live search
   Additive : surcharge .mac-search-* défini dans mac-theme.css (overlay
   plein écran sombre "Éclat Vivant"/legacy) — chargé après, mêmes classes,
   même logique documentée en tête de fichier (exception header/nav déjà
   approuvée le 2026-09-03, étendue ici à la recherche pour cohérence DA).
   Corrige au passage le halo turquoise/bleu vif au focus (voir aussi le fix
   générique dans mac-theme.css, body :where(...):focus-visible → --argile) :
   la modale de recherche a son propre focus discret --md-blue, sobre.
   ========================================================================== */

.mac-search-overlay {
    background: rgba(var(--md-ink-rgb), 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* .mac-search-overlay est flex-direction:column (mac-theme.css) : en
       column, align-items pilote l'axe horizontal et justify-content
       l'axe vertical — inverse d'un flex row. flex-start ici = centrage
       horizontal réel, flex-start = ancrage en haut (respecte le
       padding-top 9vh) au lieu du centrage vertical précédent qui
       plaquait la modale à gauche de l'écran. */
    align-items: center;
    justify-content: flex-start;
    padding: 9vh 20px 20px;
}

.mac-search-modal {
    width: min(760px, 100%);
    max-height: min(78vh, 640px);
    background: var(--md-chalk);
    border-radius: var(--md-radius-block);
    box-shadow: 0 24px 64px rgba(var(--md-ink-rgb), 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-14px) scale(.98);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
}
.mac-search-overlay.is-open .mac-search-modal { transform: none; opacity: 1; }

.mac-search-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 0 22px;
    flex-shrink: 0;
}
.mac-search-modal__title {
    font-family: var(--md-font-title);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--md-ink);
}
.mac-search-overlay__close {
    position: static;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--md-stone);
    color: var(--md-ink);
    opacity: .85;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 150ms ease, opacity 150ms ease;
}
.mac-search-overlay__close:hover { background: var(--md-earth); color: #fff; opacity: 1; }

.mac-search-form { padding: 14px 22px 10px; flex-shrink: 0; }
.mac-search-form__wrap {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--md-stone);
    border-radius: 999px;
    padding: 11px 18px;
    background: #fff;
    transition: border-color 150ms ease;
}
.mac-search-form__wrap:focus-within { border-color: var(--md-blue); }
.mac-search-form__icon { color: var(--md-ink); opacity: .45; flex-shrink: 0; }
.mac-search-form__input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none;
    font-family: var(--md-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--md-ink);
    letter-spacing: normal;
}
.mac-search-form__input::placeholder { color: var(--md-ink); opacity: .38; }
.mac-search-form__clear {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--md-stone);
    color: var(--md-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: .7;
}
.mac-search-form__clear:hover { opacity: 1; background: var(--md-earth); color: #fff; }

.mac-search-modal__body {
    overflow-y: auto;
    padding: 2px 10px 8px;
    flex: 1 1 auto;
    min-height: 120px;
}

.mac-search-group { padding: 6px 0; }
.mac-search-group + .mac-search-group { border-top: 1px solid var(--md-stone); margin-top: 4px; }
.mac-search-group__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--md-ink);
    opacity: .48;
    padding: 8px 12px 4px;
}
.mac-search-group__list { display: flex; flex-direction: column; }

.mac-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
}
.mac-search-item:hover,
.mac-search-item.is-active { background: var(--md-stone); }

.mac-search-item__thumb {
    width: 42px; height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--md-stone);
}
.mac-search-item__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--md-ink); opacity: .4; }
.mac-search-item__swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(var(--md-ink-rgb), .12);
    box-shadow: inset 0 0 0 2px #fff;
}
.mac-search-item__icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--md-stone);
    color: var(--md-ink);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mac-search-item__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mac-search-item__title {
    font-family: var(--md-font-body);
    font-weight: 600;
    font-size: .92rem;
    color: var(--md-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mac-search-item__sub { font-size: .78rem; color: var(--md-ink); opacity: .55; }

.mac-search-empty { padding: 30px 24px; text-align: center; }
.mac-search-empty__title { font-weight: 600; color: var(--md-ink); margin: 0 0 6px; font-size: .95rem; }
.mac-search-empty__hint { font-size: .84rem; color: var(--md-ink); opacity: .6; margin: 0 0 14px; }
.mac-search-empty__links { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mac-search-empty__link { color: var(--md-blue); text-decoration: underline; font-size: .88rem; }
.mac-search-empty__link:hover { color: var(--md-earth); }

.mac-search-idle { padding: 26px 20px; text-align: center; }
.mac-search-idle__hint { font-size: .84rem; color: var(--md-ink); opacity: .45; margin: 0; }

.mac-search-loading { display: flex; gap: 6px; justify-content: center; padding: 34px; }
.mac-search-loading span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--md-stone);
    animation: mac-search-pulse 1s infinite ease-in-out;
}
.mac-search-loading span:nth-child(2) { animation-delay: .15s; }
.mac-search-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes mac-search-pulse {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40% { opacity: 1; transform: scale(1); }
}

.mac-search-overlay__hint {
    text-align: center;
    padding: 8px 20px 16px;
    margin: 0;
    font-size: .7rem;
    color: var(--md-ink);
    opacity: .4;
    flex-shrink: 0;
}
.mac-search-overlay__hint kbd {
    background: var(--md-stone);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .66rem;
    color: var(--md-ink);
}

body.mac-search-locked { overflow: hidden; }

/* Focus clavier discret sur la carte/résultats — jamais le halo turquoise
   hérité de l'ancien design system global (voir mac-theme.css, corrigé). */
#mac-search-input:focus { outline: none; }
.mac-search-item:focus-visible,
.mac-search-overlay__close:focus-visible,
.mac-search-form__clear:focus-visible {
    outline: 2px solid var(--md-blue);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .mac-search-overlay { padding: 0; align-items: stretch; }
    .mac-search-modal {
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
        transform: translateY(10px);
    }
    .mac-search-overlay.is-open .mac-search-modal { transform: none; }
    .mac-search-modal__head { padding: 16px 16px 0 18px; }
    .mac-search-form { padding: 12px 16px 8px; }
    .mac-search-modal__body { padding: 2px 8px 8px; }
    .mac-search-item__title { font-size: .9rem; }
}