/* ═══════════════════════════════════════════════════════════════
   LDari — ldari-home.css  v5.1
   Correctifs :
   - CTA buttons : font-size 16px forcé (surcharge base.css 12px !important)
   - Sticky CTA : visibility remplacé par opacity+pointer-events
     (élimine "animation non composée" signalée par PageSpeed)
   - Grille bestsellers : supprimée (on utilise les styles WooCommerce natifs)
   Conservé de v5 :
   - content-visibility sur sections hors-fold
   - contain-intrinsic-size (CLS fix)
   - focus-visible WCAG 2.1
   - .ldari-review-full display:none (CLS fix)
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   ESPACEMENTS GLOBAUX
───────────────────────────────────────── */
section {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero-section {
    background: var(--couleur-Background);
    padding-top: 60px;
    padding-bottom: 60px;
}

.ldari-hero-title {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 20px;
}

.ldari-hero-sub {
    font-size: 18px;
    max-width: 650px;
    margin: auto;
    color: #333;
}

.ldari-hero-img-wrap {
    margin: 40px 0;
}

.ldari-hero-img {
    max-width: 320px;
    width: 100%;
    height: auto;
}

.ldari-hero-trust {
    margin-bottom: 30px;
}

.ldari-trust-link {
    text-decoration: none;
    color: #777;
}

/* ─────────────────────────────────────────
   CTA BUTTONS
   Le thème (0-mah-base.css) force sur tous les <button> et <a> :
     font-size: 12px !important
     line-height: 42px !important
   On doit surcharger avec la même spécificité + !important uniquement
   sur les propriétés concernées.
───────────────────────────────────────── */
.ldari-cta-btn,
a.ldari-cta-btn,
.ldari-sticky-btn,
a.ldari-sticky-btn {
    padding: 14px 28px !important;
    font-size: 16px !important;
    line-height: 42px !important;
    height: auto !important;
    display: inline-block;
}

/* ─────────────────────────────────────────
   FOCUS VISIBLE — WCAG 2.1 AA
───────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.ldari-toggle-btn:focus-visible {
    outline: 3px solid #9ab968;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────
   SECTION FOND CRÈME
───────────────────────────────────────── */
.section-light {
    background-color: var(--couleur-Background);
}

/* Cache le bandeau titre automatique sur l'accueil */
.home .banner-wrapper {
    display: none !important;
}

/* ─────────────────────────────────────────
   IMAGES PRODUITS
───────────────────────────────────────── */
.img-fluid {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-fluid:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────
   FADE-IN AU SCROLL
───────────────────────────────────────── */
.fade-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────
   CONTENT-VISIBILITY — sections hors-fold
   Gain LCP/FCP mobile : skip du paint avant scroll
───────────────────────────────────────── */
.bestseller-section,
.collections-section,
.ldari-avis-section,
.about-section,
.ldari-cta-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ─────────────────────────────────────────
   TITRES DE SECTION
───────────────────────────────────────── */
.section-title {
    color: #111;
    font-weight: 700;
    font-size: 2.2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #9ab968;
    border-radius: 2px;
}

/* ─────────────────────────────────────────
   ICÔNES
───────────────────────────────────────── */
.flaticon-check {
    color: var(--couleur-accent);
    font-size: 20px;
    margin-right: 10px;
}

.flaticon-heart {
    color: #000;
    font-size: 16px;
    margin-right: 6px;
}

/* ─────────────────────────────────────────
   BADGE DE RÉASSURANCE HERO
───────────────────────────────────────── */
.ldari-reassurance {
    display: inline-block;
    border: 1px solid var(--couleur-accent);
    padding: 25px 40px;
    border-radius: 8px;
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.4;
    position: relative;
    text-align: center;
    min-width: 320px;
}

.ldari-reassurance .icon-speed {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 25px;
    color: var(--couleur-accent);
}

.ldari-reassurance strong {
    font-weight: 600;
    display: block;
}

/* ─────────────────────────────────────────
   LISTE AVANTAGES
───────────────────────────────────────── */
.ldari-benefits {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px;
    max-width: 600px;
    text-align: left;
    font-size: 16px;
    color: #333;
}

.ldari-benefits li {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    line-height: 1.5;
}

.ldari-benefits i {
    color: var(--couleur-accent);
    margin-right: 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.ldari-benefits .highlight,
.ldari-benefits .normale {
    font-weight: 600;
    padding: 10px 14px;
}

.ldari-benefits .highlight {
    background: #f6f9f2;
    border: 1px solid #e2ecd2;
    border-radius: 10px;
}

.ldari-benefits .highlight span {
    color: var(--couleur-accent);
    font-weight: 600;
}

.ldari-benefits .normale {
    background: var(--couleur-Background);
}

.ldari-benefits .sub {
    font-size: 14px;
    color: #777;
}

/* ─────────────────────────────────────────
   ICÔNE VERTE (emoji teinté)
───────────────────────────────────────── */
.ldari-icon-vert {
    font-size: 32px;
    margin-bottom: 10px;
    display: inline-block;
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(160%);
    color: #9ab968;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ldari-icon-lg {
    font-size: 28px;
}

/* ─────────────────────────────────────────
   CARDS TEXTE COMMUNS
───────────────────────────────────────── */
.ldari-section-intro {
    color: #333;
    max-width: 600px;
    margin-bottom: 50px;
}

.ldari-card-title {
    font-weight: 600;
    font-size: 18px;
}

.ldari-card-text {
    color: #333;
    font-size: 17px;
    line-height: 1.9;
}

/* ─────────────────────────────────────────
   CARTE PERSONNALISATION
───────────────────────────────────────── */
.ldari-perso-card {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px var(--couleur-accent); */
    height: 100%;
    border: 1px solid var(--couleur-accent);
    margin-bottom: 15px;
}

.ldari-perso-title {
    font-size: 18px;
    margin-top: 16px;
}

/* ─────────────────────────────────────────
   CARTE IDÉES MESSAGES
───────────────────────────────────────── */
.ldari-msg-card {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px var(--couleur-accent); */
    height: 100%;
    border: 1px solid var(--couleur-accent);
    margin-bottom: 15px;
}

.ldari-msg-title {
    font-size: 17px;
    margin-top: 10px;
}

.ldari-msg-text {
    color: #555;
}

/* ─────────────────────────────────────────
   COLLECTIONS
───────────────────────────────────────── */
.ldari-cat-title {
    font-size: 17px;
}

/* ───────────────────────────────────────── SECTION AVIS ───────────────────────────────────────── */
.ldari-avis-section {
    padding: 30px 0;
}

.ldari-avis-meta {
    color: #777;
    margin-bottom: 40px;
}

.ldari-review-card {
    padding: 25px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    border: 1px solid #f0f0f0;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    position: relative;
    height: 100%;
}

.ldari-review-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ldari-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.ldari-review-meta {
    flex: 1;
    min-width: 0;
}

.ldari-stars {
    font-size: 12px;
    color: #ecb02f;
    margin-bottom: 5px;
}

.ldari-review-author {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: #111;
}

.ldari-review-city {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ldari-review-photos {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ldari-review-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}

.ldari-zoom-link:hover img {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 5;
    position: relative;
}

.ldari-review-date {
    font-size: 11px;
    color: #bbb;
    display: block;
    margin-bottom: 15px;
}

.ldari-review-body {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.ldari-review-short {
    margin: 0;
}

/* CLS fix : caché dès le chargement */
.ldari-review-full {
    display: none;
}

/* Bouton Lire la suite */
.ldari-toggle-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: #000;
    background: #f0f0f0;
    border: none;
    padding: 4px 10px !important;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    font-weight: 600;
    height: auto !important;
    line-height: 1.4 !important;
}

.ldari-toggle-btn:hover {
    background: #e5e5e5;
    transform: translateY(-1px);
}

.ldari-toggle-btn .btn-icon {
    margin-left: 5px;
    transition: transform 0.3s;
}

.ldari-toggle-btn.is-active .btn-icon {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────
   CTA FINAL
───────────────────────────────────────── */
.ldari-cta-section {
    padding: 30px 0;
}

.ldari-cta-title {
    font-size: 30px;
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────
   À PROPOS
───────────────────────────────────────── */
.ldari-about-sub {
    color: #888;
    margin-bottom: 40px;
}

.ldari-about-text {
    color: #333;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 24px;
}

.ldari-stat-val {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.ldari-stat-label {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 992px) {
    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-title {
        font-size: 1.9rem;
    }
}

@media (max-width: 576px) {
    section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .ldari-hero-title {
        font-size: 28px;
    }

    .ldari-hero-sub {
        font-size: 16px;
    }

    .ldari-benefits {
        font-size: 15px;
    }

    .ldari-benefits .highlight,
    .ldari-benefits .normale {
        padding: 8px 12px;
    }

    .ldari-reassurance {
        min-width: unset;
        padding: 20px 20px 20px 44px;
        font-size: 16px;
    }
}

/* ─────────────────────────────────────────
   CTA STICKY MOBILE
   CORRECTIF PageSpeed : visibility remplacé par
   opacity + pointer-events → animation composée
   (élimine l'avertissement "animations non composées")
───────────────────────────────────────── */
.ldari-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    text-align: center;
    /* opacity+transform : propriétés composées = pas d'avertissement PageSpeed */
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.ldari-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ldari-sticky-btn {
    display: block;
    width: 100%;
    box-shadow: 0 4px 15px rgba(154, 185, 104, 0.4);
}

@media (max-width: 992px) {
    #main-content {
        padding-bottom: 70px;
    }
}

@media (min-width: 992px) {
    .ldari-sticky-cta {
        display: none !important;
    }
}

/* ─────────────────────────────────────────
   AJUSTEMENT WHATSAPP / CTA STICKY
───────────────────────────────────────── */
.whatsapp-float {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), bottom 0.4s ease !important;
}

body:has(.ldari-sticky-cta.is-visible) .whatsapp-float {
    transform: translateY(-80px);
}

@media (max-width: 992px) {
    .ldari-sticky-cta {
        z-index: 9998;
    }

    .whatsapp-float {
        z-index: 9999;
    }
}