/* ============================================================
   POSITIONNEMENT DES DÉCORATIONS FLOTTANTES PARTAGÉES
   .luv-deco hérite déjà de position:absolute via calls.css ;
   on ajoute ici les positions des SVG cartes (♠/♥) référencés
   par presque toutes les pages mais non positionnés ailleurs.
   ============================================================ */
body.theme-luv .luv-deco-card-spade {
    top: 40%; left: 6%;
    --rot: -22deg;
    animation-delay: 1.8s;
}
body.theme-luv .luv-deco-card-heart {
    top: 30%; right: 14%;
    --rot: -14deg;
    animation-delay: 2.6s;
}
@media (max-width: 1240px) {
    body.theme-luv .luv-deco-card-spade,
    body.theme-luv .luv-deco-card-heart { display: none; }
}

/* ============================================================
   LUV-HERO — Hero unifié partagé par toutes les pages du site.
   À inclure APRÈS theme.css et index.css, AVANT la feuille
   spécifique à la page, pour que chaque page puisse override
   ses propres détails si besoin.

   Structure attendue :

   <section class="luv-hero">
       <div class="luv-hero-left">
           <h1 class="luv-hero-title">Titre <span class="text-accent">accent</span></h1>
           <p class="luv-hero-subtitle">Sous-titre.</p>
           <div class="luv-hero-chips">
               <span class="luv-hero-chip">…</span>
           </div>
       </div>
       <div class="luv-hero-right">
           <!-- contrôles spécifiques : tabs, CTA, sélecteur de période, etc. -->
       </div>
   </section>

   Si .luv-hero-right est absent ou vide, l'hero passe en
   une seule colonne pleine largeur (via :has).
   ============================================================ */

body.theme-luv .luv-hero {
    max-width: 1340px;
    margin: 0 auto;
    /* 110px top : laisse passer la navbar pill fixe (top:22px + ~70px de hauteur). */
    padding: 110px 28px 18px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 28px;
    position: relative;
    z-index: 1;
    animation: luvHeroFadeUp 0.5s ease both;
}
body.theme-luv .luv-hero:has(.luv-hero-right) {
    grid-template-columns: 1fr auto;
}
body.theme-luv .luv-hero-right:empty { display: none; }

@keyframes luvHeroFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.theme-luv .luv-hero-left {
    min-width: 0;
}

body.theme-luv .luv-hero-title {
    margin: 0;
    font-family: var(--luv-font-display, 'Bowlby One', 'Impact', sans-serif);
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 0.95;
    letter-spacing: 0.4px;
    font-weight: 400;
    color: var(--luv-text, #f3f6fb);
    /* Permet au titre de wrap correctement sur petit écran même s'il
       contient des espaces insécables (&nbsp;) entre les mots. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.theme-luv .luv-hero-title .text-accent {
    color: var(--luv-orange, #ff8a1f);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

body.theme-luv .luv-hero-subtitle {
    margin: 10px 0 0;
    color: var(--luv-text-dim, #aab3c5);
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 520px;
    text-align: left;
}
body.theme-luv .luv-hero-subtitle strong {
    color: var(--luv-text, #f3f6fb);
    font-weight: 700;
}

body.theme-luv .luv-hero-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}
body.theme-luv .luv-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--luv-line-strong, rgba(255, 255, 255, 0.14));
    background: rgba(255, 255, 255, 0.03);
    color: var(--luv-text-dim, #aab3c5);
    font-family: var(--luv-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.theme-luv .luv-hero-chip svg { color: var(--luv-orange, #ff8a1f); }
body.theme-luv .luv-hero-chip strong {
    color: var(--luv-orange, #ff8a1f);
    font-weight: 800;
}

body.theme-luv .luv-hero-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Tabs segmentés (pill) — utilisés pour la sous-nav */
body.theme-luv .luv-hero-tabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--luv-line-strong, rgba(255, 255, 255, 0.14));
    background: rgba(255, 255, 255, 0.03);
}
body.theme-luv .luv-hero-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: transparent;
    color: var(--luv-text-dim, #aab3c5);
    font-family: var(--luv-font-body, 'Space Grotesk', system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .18s, color .18s;
    white-space: nowrap;
}
body.theme-luv .luv-hero-tab:hover { color: var(--luv-text, #f3f6fb); }
body.theme-luv .luv-hero-tab.active {
    background: var(--luv-orange, #ff8a1f);
    color: #1a0a00;
    box-shadow: 0 4px 12px rgba(255, 138, 31, 0.3);
}

/* CTA principal (orange) */
body.theme-luv .luv-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--luv-orange, #ff8a1f);
    color: #1a0a00;
    font-family: var(--luv-font-body, 'Space Grotesk', system-ui, sans-serif);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 138, 31, 0.28);
    transition: transform .12s, filter .15s;
}
body.theme-luv .luv-hero-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
body.theme-luv .luv-hero-cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
/* CTA fantôme (bordure, transparent) */
body.theme-luv .luv-hero-cta--ghost {
    background: transparent;
    border: 1px solid var(--luv-line-strong, rgba(255, 255, 255, 0.14));
    color: var(--luv-text, #f3f6fb);
    box-shadow: none;
}
body.theme-luv .luv-hero-cta--ghost:hover {
    border-color: var(--luv-orange, #ff8a1f);
    background: rgba(255, 138, 31, 0.08);
    color: var(--luv-text, #f3f6fb);
}

/* Groupe d'actions horizontal (plusieurs CTA côte à côte) */
body.theme-luv .luv-hero-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.theme-luv .luv-hero-left .luv-hero-actions { justify-content: flex-start; }

/* Variante hero-right "media" : pour héberger un logo / visuel à droite (page d'accueil). */
body.theme-luv .luv-hero-right.luv-hero-right--media {
    align-items: center;
    justify-content: center;
}
body.theme-luv .luv-hero-right.luv-hero-right--media .home-hero-logo-wrap {
    width: clamp(220px, 22vw, 320px);
    max-width: 320px;
    margin: 0;
}
@media (max-width: 960px) {
    body.theme-luv .luv-hero-right.luv-hero-right--media .home-hero-logo-wrap {
        width: 240px;
        max-width: 240px;
        margin: 0 auto;
    }
}
@media (max-width: 480px) {
    body.theme-luv .luv-hero-right.luv-hero-right--media .home-hero-logo-wrap {
        width: 200px;
        max-width: 200px;
    }
}

/* Code badge inline (ex : LUVREIZEL dans le subtitle) */
body.theme-luv .luv-hero-subtitle .luv-hero-code,
body.theme-luv .luv-hero-code {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 6px;
    background: rgba(255, 138, 31, 0.12);
    color: var(--luv-orange, #ff8a1f);
    font-family: var(--luv-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-weight: 700;
    font-size: 0.92em;
    letter-spacing: 0.04em;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 960px) {
    body.theme-luv .luv-hero {
        grid-template-columns: 1fr;
        padding: 100px 16px 18px;
    }
    body.theme-luv .luv-hero:has(.luv-hero-right) {
        grid-template-columns: 1fr;
    }
    body.theme-luv .luv-hero-right {
        align-items: flex-start;
        width: 100%;
    }
}
@media (max-width: 720px) {
    body.theme-luv .luv-hero-tabs { width: 100%; }
    body.theme-luv .luv-hero-tab { flex: 1; justify-content: center; }
    body.theme-luv .luv-hero-cta { width: 100%; justify-content: center; }
    body.theme-luv .luv-hero-actions { width: 100%; }
    body.theme-luv .luv-hero-actions .luv-hero-cta { flex: 1; }
    /* Bowlby One a une métrique très généreuse ; les valeurs desktop
       paraissent surdimensionnees sur tablette/mobile. */
    body.theme-luv .luv-hero-title {
        font-size: clamp(24px, 5vw, 30px);
    }
    body.theme-luv .luv-hero-subtitle {
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    body.theme-luv .luv-hero {
        padding: 84px 12px 14px;
    }
    body.theme-luv .luv-hero-title {
        font-size: clamp(22px, 6.2vw, 26px);
        letter-spacing: 0.2px;
    }
    body.theme-luv .luv-hero-subtitle {
        font-size: 12.5px;
        line-height: 1.45;
    }
}

/* ── Cibles tactiles ≥44px sur mobile (audit UI/UX 06/2026) ── */
@media (max-width: 768px) {
    body.theme-luv .luv-hero-tab {
        min-height: 44px;
    }
}