/* ============================================================
   Refonte Home — Portage 1:1 maquette (handoff v4, 27/06/2026)
   Source : C:\Users\Dragon\Documents\Claude\Projects\One life van\
            maquette-styles.css (extrait du <style> de la maquette HTML).
   Charge SEULEMENT sur is_front_page() via inc/enqueue.php.
   Scope body.home pour éviter toute fuite sur le reste du site.
   Tokens (--bg, --sun, --font-*) viennent de tokens.css.
   Sections .olv-header / .olv-footer / .olv-hero du fichier maquette
   sont volontairement omises (gérées par header.php / footer.php
   du thème ; la home n'a pas de hero plein écran).
   ============================================================ */

/* ---------- Wrapper main--home : pas de container, sections gèrent ---------- */
body.home .olv-main--home { width:100%; max-width:100%; padding:0; }
body.home .olv-main--home > .alignfull,
body.home .olv-main--home > .wp-block-group.alignfull {
    width:100%; max-width:100%; margin-left:0; margin-right:0;
}
body.home .olv-main--home > .alignwide { max-width:1600px; margin-left:auto; margin-right:auto; }

/* ---------- SECTIONS génériques (maquette ligne 556-558) ---------- */
/* Padding réduit vs handoff (clamp 64-120px) — Stef 27/06 trouvait l'espace
   inter-sections trop généreux sur grand écran (jusqu'à 240px de blanc entre
   2 sections collées). Nouveau range : clamp(40-72px) → ~144px max entre 2. */
body.home .olv-section { padding: clamp(40px, 5vw, 72px) 0; }
body.home .olv-section--surface { background: var(--surface); }

/* ---------- EYEBROW / SEC HEAD / TITRES (maquette ligne 560-565) ---------- */
body.home .olv-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
body.home .olv-eyebrow__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rust);
    display: inline-block;
}
body.home .olv-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    /* Margin-bottom réduit vs handoff (clamp 36-60px) — Stef 27/06 trouvait
       l'espace titre→contenu trop grand. Nouveau range : clamp 20-36px. */
    margin-bottom: clamp(20px, 3vw, 36px);
    flex-wrap: wrap;
}
body.home .olv-sec-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 16ch;
    margin-top: 14px;
    color: var(--ink);
}
body.home .olv-sec-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sun);
}
body.home .olv-lede {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 56ch;
}

/* ---------- BOUTONS (maquette ligne 568-576) ---------- */
body.home .olv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform .15s, background .15s, color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
}
body.home .olv-btn:hover { transform: translateY(-1px); text-decoration: none; }
body.home .olv-btn--sun { background: var(--sun); color: #1a1f28; }
body.home .olv-btn--sun:hover { background: var(--sun-deep); color: #1a1f28; }
body.home .olv-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
}
body.home .olv-btn--ghost:hover {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
}
body.home .olv-btn--dark { background: var(--ink); color: var(--bg); }
body.home .olv-btn--sm { padding: 9px 16px; font-size: 13px; }
body.home .olv-btn svg { width: 16px; height: 16px; }

/* ---------- LIEN OLV (maquette ligne 578-579) ---------- */
body.home .olv-link {
    color: var(--sun);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap .15s;
    text-decoration: none;
}
body.home .olv-link:hover { gap: 11px; text-decoration: none; }

/* ---------- PLACEHOLDER IMAGE (maquette ligne 582-587) ---------- */
body.home .olv-ph {
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
        var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
body.home .olv-ph__tag {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    text-align: center;
    padding: 12px 16px;
    line-height: 1.5;
}
body.home .olv-ph__tag::before {
    content: "\2316"; /* ⌖ */
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--sun) 70%, transparent);
}

/* ============================================================
   1. ACCROCHE — bandeau réassurance (maquette ligne 592-599)
   ============================================================ */
body.home .olv-accroche {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
body.home .olv-accroche__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}
body.home .olv-accroche__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 32px);
    border-left: 1px solid var(--line);
}
body.home .olv-accroche__item:first-child { border-left: none; }
body.home .olv-accroche__icon {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    /* Référence handoff design-reference/home-refonte.css ligne 68 :
       fond --sun à 14% (translucide), trait icône en --sun.
       Si rendu en rouge-rust au lieu d'orange : c'est qu'un CSS ailleurs
       override `color` sur les SVG enfants (à débugger via inspect). */
    background: color-mix(in srgb, var(--sun) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sun);
}
body.home .olv-accroche__icon svg { width: 22px; height: 22px; }
body.home .olv-accroche__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}
body.home .olv-accroche__sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.3;
}

/* ============================================================
   2. GRILLE DE KITS — Product Collection WC, stylé .olv-kit
   On garde le markup natif WC (ul.wc-block-product-template > li.product
   > [image, post-title, product-price, product-summary, wp-block-buttons])
   et on le réorganise en grid-template-areas pour reproduire la maquette :
   - image pleine largeur en haut
   - titre + prix sur la MÊME ligne (titre à gauche, prix à droite)
   - description tronquée 2 lignes
   - boutons en flex (1 seul natif : "Ajouter au panier")
   PAS de modif du pattern, PAS de PHP : 100% CSS sur les blocs WC existants.
   ============================================================ */
body.home .olv-kits__note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.home .olv-kits__note svg { width: 14px; height: 14px; color: var(--sun); }

/* ----- La carte : <li class="product"> ----- */
body.home ul.wc-block-product-template > li.product {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;

    /* Layout grid EMPILÉ (Stef 12/07) : titre pleine largeur, prix sur sa
       propre ligne dessous. L'ancienne version « titre | prix » côte à côte
       écrasait le titre dans une colonne étroite et la fourchette de prix
       cassait la mise en page (surtout mobile). */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "image"
        "title"
        "price"
        "summary"
        "actions";
    row-gap: 0;
}
body.home ul.wc-block-product-template > li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    border-color: color-mix(in srgb, var(--sun) 40%, var(--line));
}

/* ----- Image : grid-area "image", ratio 3/2, bord à bord ----- */
body.home ul.wc-block-product-template > li.product > .wp-block-woocommerce-product-image,
body.home ul.wc-block-product-template > li.product > [data-block-name="woocommerce/product-image"] {
    grid-area: image;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--paper);
    margin: 0;
    border-radius: 0;
    position: relative;
}
body.home ul.wc-block-product-template > li.product .wc-block-components-product-image,
body.home ul.wc-block-product-template > li.product .wc-block-components-product-image a {
    display: block;
    width: 100%;
    height: 100%;
}
body.home ul.wc-block-product-template > li.product .wc-block-components-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* ----- Titre : grid-area "title", aligné baseline avec le prix ----- */
body.home ul.wc-block-product-template > li.product > .wp-block-post-title {
    grid-area: title;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px; /* réduit de 30px (Stef 12/07 — titre trop imposant sur la carte) */
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
    padding: 22px 26px 0 26px;
}
body.home ul.wc-block-product-template > li.product > .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}
body.home ul.wc-block-product-template > li.product > .wp-block-post-title a:hover {
    color: var(--sun);
}

/* ----- Prix : grid-area "price", sous le titre, aligné à gauche ----- */
body.home ul.wc-block-product-template > li.product > .wp-block-woocommerce-product-price,
body.home ul.wc-block-product-template > li.product > [data-block-name="woocommerce/product-price"] {
    grid-area: price;
    font-family: var(--font-mono);
    font-size: 17px;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
    padding: 6px 26px 0 26px;
}
body.home ul.wc-block-product-template > li.product .price,
body.home ul.wc-block-product-template > li.product .price ins,
body.home ul.wc-block-product-template > li.product .price bdi {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    text-decoration: none;
    background: transparent;
}
body.home ul.wc-block-product-template > li.product .price del {
    color: var(--muted);
    margin-right: 6px;
    font-size: 13px;
}

/* ----- Description (short_description) : grid-area "summary", tronquée 2 lignes ----- */
body.home ul.wc-block-product-template > li.product > .wp-block-woocommerce-product-summary,
body.home ul.wc-block-product-template > li.product > [data-block-name="woocommerce/product-summary"] {
    grid-area: summary;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    padding: 8px 26px 20px;
    margin: 0;
    /* Troncature à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.home ul.wc-block-product-template > li.product .wc-block-components-product-summary p,
body.home ul.wc-block-product-template > li.product .wp-block-woocommerce-product-summary p {
    margin: 0;
    color: inherit;
}

/* ----- Actions (boutons "Ajouter au panier") : grid-area "actions" ----- */
body.home ul.wc-block-product-template > li.product > .wp-block-buttons {
    grid-area: actions;
    display: flex;
    gap: 8px;
    padding: 0 26px 26px;
    margin: 0;
}
body.home ul.wc-block-product-template > li.product > .wp-block-buttons .wp-block-button {
    flex: 1;
    margin: 0;
}
/* ----- BOUTONS — 2 styles selon position ----- */
/* Style commun (pilule .olv-btn--sm, flex:1 garanti dans le flex parent) */
body.home ul.wc-block-product-template > li.product .wp-block-button .wp-block-button__link,
body.home ul.wc-block-product-template > li.product .wc-block-components-product-button .wp-block-button__link,
body.home ul.wc-block-product-template > li.product .add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: auto;
    text-align: center;
    border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    white-space: normal;     /* permet wrap au lieu de cercle "1 dans le panier" */
    cursor: pointer;
    box-sizing: border-box;
}

/* 1er bouton (Ajouter au panier — wp:woocommerce/product-button) = SUN plein */
body.home ul.wc-block-product-template > li.product .wc-block-components-product-button .wp-block-button__link,
body.home ul.wc-block-product-template > li.product .add_to_cart_button,
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
    background: var(--sun);
    color: var(--bg);
    border: none;
}
body.home ul.wc-block-product-template > li.product .wc-block-components-product-button .wp-block-button__link:hover,
body.home ul.wc-block-product-template > li.product .add_to_cart_button:hover,
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link:hover {
    background: var(--sun-deep);
    color: var(--bg);
    transform: translateY(-1px);
}

/* 2ème bouton (Voir le kit — wp:button ajouté manuellement) = GHOST */
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button:nth-child(2):not(.wc-block-components-product-button) .wp-block-button__link,
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
}
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button:nth-child(2):not(.wc-block-components-product-button) .wp-block-button__link:hover,
body.home ul.wc-block-product-template > li.product > .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link:hover {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
    transform: translateY(-1px);
}

/* MASQUE le lien ".added_to_cart" (bouton "Voir le panier" que WC injecte
   après ajout AJAX). Le bouton "Ajouter au panier" est remplacé côté PHP
   par un lien simple (filter render_block_woocommerce/product-button), donc
   en théorie ce link n'apparaîtra plus — règle CSS conservée par sécurité. */
body.home ul.wc-block-product-template > li.product .added_to_cart {
    display: none !important;
}

/* État "Bientôt disponible" — affiché par wp:query-no-results quand catalogue vide.
   Référence handoff README §3 (Nos kits) : "Bientôt disponible : carte bordure
   pointillée, icône horloge, titre + texte". */
body.home .olv-kit--soon {
    border: 1px dashed var(--line);
    background: transparent;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 360px;
    padding: 32px;
    max-width: 420px;
    margin: 0 auto;
}
body.home .olv-kit--soon .olv-kit__soon-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sun);
    margin: 0 auto 16px;
}
body.home .olv-kit--soon h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--ink);
}
body.home .olv-kit--soon p {
    color: var(--muted);
    font-size: 13px;
    max-width: 24ch;
    margin: 0 auto;
}

/* ============================================================
   3. POURQUOI ONE LIFE VAN — atouts (maquette ligne 668-674)
   ============================================================ */
body.home .olv-atouts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
body.home .olv-atout {
    border-top: 1px solid var(--line);
    padding-top: 24px;
}
body.home .olv-atout__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sun) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sun);
    margin-bottom: 20px;
}
body.home .olv-atout__icon svg { width: 24px; height: 24px; }
body.home .olv-atout h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--ink);
}
body.home .olv-atout__metric {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--rust);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
body.home .olv-atout p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   4. COMMENT ÇA MARCHE — 3 étapes (maquette ligne 679-686)
   ============================================================ */
body.home .olv-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
body.home .olv-step__media {
    aspect-ratio: 5/4;
    margin-bottom: 20px;
}
body.home .olv-step__num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--sun);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
}
body.home .olv-step__num::before {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--sun);
    display: inline-flex;
}
body.home .olv-step__num b {
    position: absolute;
    left: 0;
    width: 28px;
    text-align: center;
    color: var(--sun);
    font-weight: 500;
}
body.home .olv-step h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--ink);
}
body.home .olv-step p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   5. BANDEAU ATELIER (maquette ligne 691-694)
   Classe .olv-atelier alignée sur la maquette (anciennement
   .olv-home-atelier dans le thème — renommé pour fidélité).
   ============================================================ */
body.home .olv-atelier {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
body.home .olv-atelier__media {
    aspect-ratio: 4/3;
    min-height: 320px;
}
body.home .olv-atelier__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 14px 0 18px;
    color: var(--ink);
}
body.home .olv-atelier__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sun);
}

/* ============================================================
   6. AVIS — grille témoignages (maquette ligne 699-705)
   ============================================================ */
body.home .olv-avis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
body.home .olv-avis {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
}
body.home .olv-avis__stars {
    display: flex;
    gap: 3px;
    color: var(--sun);
    margin-bottom: 18px;
}
body.home .olv-avis__stars svg { width: 17px; height: 17px; }
body.home .olv-avis blockquote {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.45;
    font-style: italic;
    margin: 0 0 22px;
    flex: 1;
    color: var(--ink);
}
body.home .olv-avis figcaption,
body.home .olv-avis__caption {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}
body.home .olv-placeholder-note {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rust);
    border: 1px dashed color-mix(in srgb, var(--rust) 55%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-block;
    margin-bottom: 18px;
}

/* ============================================================
   7. NEWSLETTER (maquette ligne 710-718)
   ============================================================ */
body.home .olv-news {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: clamp(36px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}
body.home .olv-news h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 44px);
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: var(--ink);
}
body.home .olv-news h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--sun);
}
body.home .olv-news p {
    color: var(--muted);
    font-size: 15px;
    max-width: 42ch;
    margin: 0;
}
body.home .olv-news__form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: min(420px, 90vw);
}
body.home .olv-news__form input {
    flex: 1;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 14px 20px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
}
body.home .olv-news__form input::placeholder { color: var(--muted); }
body.home .olv-news__form input:focus { outline: none; border-color: var(--sun); }
body.home .olv-news__hint {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: 14px;
}

/* ============================================================
   RESPONSIVE (maquette ligne 735-767)
   ============================================================ */
@media (max-width: 1040px) {
    body.home .olv-atouts { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 920px) {
    body.home .olv-accroche__inner { grid-template-columns: repeat(2, 1fr); }
    body.home .olv-accroche__item:nth-child(odd) { border-left: none; }
    body.home .olv-accroche__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
    body.home .olv-steps { grid-template-columns: 1fr; gap: 40px; }
    body.home .olv-avis-grid { grid-template-columns: 1fr; }
    body.home .olv-atelier { grid-template-columns: 1fr; }
    body.home .olv-news { grid-template-columns: 1fr; }
    body.home .olv-news__form { min-width: 0; width: 100%; }
}
/* Note : la grille Product Collection WC gère son propre responsive
   (via le bloc Gutenberg shrinkColumns), pas besoin de l'overrider ici. */
@media (max-width: 560px) {
    body.home .olv-atouts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    body.home .olv-accroche__inner { grid-template-columns: 1fr; }
    body.home .olv-accroche__item { border-left: none; }
    body.home .olv-accroche__item:not(:first-child) { border-top: 1px solid var(--line); }
}

/* H1 unique de la home (Stef 18/08). Classe DÉDIÉE (pas .olv-sec-title qui est
   calibré pour les titres de section courts et écrasait le hero). Objectif :
   2 lignes max sur desktop, le hero respire. */
body.home .olv-home-h1 { padding-top: clamp(16px, 3vh, 32px); padding-bottom: 2px; }
.olv-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 660px;
  margin: 0;
  color: var(--ink);
}