/*
Theme Name: Lechner Coach
Theme URI: https://coach-lechner.fr
Description: Thème enfant de Hello Elementor pour Lechner Coach — design sombre/rouge Strongman/militaire.
Author: Thortank
Author URI: https://thortank.fr
Template: hello-elementor
Version: 1.0.2
Text Domain: lechner-coach
*/

/* ============================================================
   Neutralize Elementor structural wrappers around HTML widgets
   so the maquette renders pixel-perfect (no extra padding /
   columns / containers eating up the layout).
   ============================================================ */
html, body { background: var(--bg, #0a0a0b); }

/* Section that simply wraps an HTML widget (our content). Kill padding. */
.elementor-section,
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.elementor-column,
.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-element-populated {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-widget-html, .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-widget-html .elementor-widget-container { padding: 0 !important; }

/* Hello Elementor / WP wrappers — if Canvas template isn't applied somewhere */
main#content, .site-main, .page-content {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Re-affirm key maquette tokens (in case Elementor base CSS resets them) */
body.lechner-coach {
    font-family: 'Barlow', 'Inter', system-ui, sans-serif;
    color: #f4f4f5;
    background: #0a0a0b;
}

/* Hero title — toned down (Russo One is much heavier than Anton, scale accordingly) */
.hero .h-xl {
    font-size: clamp(1.9rem, 4.4vw, 3.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}
@media (max-width: 760px) {
    .hero .h-xl { font-size: clamp(1.7rem, 7vw, 2.6rem) !important; }
}
.hero .lead { font-size: 1.05rem !important; }

/* ============================================================
   Header — icônes panier & compte (WooCommerce)
   ============================================================ */
.nav-cta { display: flex; align-items: center; gap: 10px; }
.header-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,.14);
    color: #f4f4f5;
    position: relative;
    transition: border-color .2s, background .2s, transform .2s;
}
.header-icon:hover {
    border-color: var(--red, #e11d2a);
    background: rgba(225,29,42,.08);
    transform: translateY(-2px);
}
.header-icon svg { width: 18px; height: 18px; display: block; }
.header-cart-count {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red, #e11d2a);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 4px 10px -3px rgba(225,29,42,.55);
}
.header-cart-count.is-empty { display: none; }

/* On mobile the cart + account icons stay visible (just hidden burger toggle hides nav-links) */
@media (max-width: 760px) {
    .nav-cta { display: flex !important; }
    .nav-cta .btn { display: none; } /* hide CTA "Réserver ma séance" on small screens, keep icons */
    .header-icon { width: 36px; height: 36px; }
}

/* ============================================================
   Footer — barre du bas (liens légaux) : forcer inline
   (maquette.css met display:block sur tous les <a> du footer)
   ============================================================ */
.site-footer .footer-bottom a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}
.site-footer .footer-bottom a:hover { color: var(--red-2, #ff2e3c) !important; }
.site-footer .footer-bottom span { display: inline-block; }

/* ============================================================
   FAQ — accordéon <details>/<summary>
   ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    background: var(--surface, #141417);
    border: 1px solid var(--line, rgba(255,255,255,.08));
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s ease;
}
.faq-item[open],
.faq-item:hover {
    border-color: var(--red, #e11d2a);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    user-select: none;
    transition: background .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-item summary:hover { background: rgba(225,29,42,.04); }
.faq-item .faq-q {
    font-family: 'Russo One', 'Impact', sans-serif;
    font-size: 1.05rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.25;
    flex: 1;
}
.faq-item .faq-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(225,29,42,.12);
    color: var(--red-2, #ff2e3c);
    display: grid;
    place-items: center;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), background .25s;
}
.faq-item .faq-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    background: var(--red, #e11d2a);
    color: #fff;
}
.faq-item .faq-a {
    padding: 0 26px 24px 26px;
    color: var(--muted, #a1a1aa);
    line-height: 1.65;
    font-size: 1rem;
    border-top: 1px solid var(--line, rgba(255,255,255,.06));
    margin-top: -1px;
}
.faq-item .faq-a p { margin: 18px 0 0 0; }

/* Smooth open animation (modern browsers) */
.faq-item[open] .faq-a {
    animation: lcFaqSlide .32s ease both;
}
@keyframes lcFaqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Tarifs — bannière horizontale "Forfait mensuel" (span 2 cols)
   Centrer verticalement le contenu pour éviter le vide en bas
   ============================================================ */
.price-card.price-card--banner {
    /* .price-card is flex-direction:column from maquette.css.
       Use justify-content:center to vertically center the content in column flex. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 36px 40px !important;
    position: relative;
}
.price-card.price-card--banner > div {
    width: 100%;
    align-items: center !important;
}
.price-card.price-card--banner .ptitle {
    font-size: 1.25rem;
}
.price-card.price-card--banner .psub {
    margin-bottom: 4px;
}
.price-card.price-card--banner .feat {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    columns: 2;
    column-gap: 28px;
}
.price-card.price-card--banner .feat li {
    break-inside: avoid;
    margin-bottom: 8px !important;
}
.price-card.price-card--banner .amount {
    font-size: 3.4rem !important;
    margin: 0 0 4px !important;
}
.price-card.price-card--banner .per {
    margin-bottom: 18px;
}
.price-card.price-card--banner .btn {
    padding: 16px 30px !important;
    font-size: 1rem !important;
}
@media (max-width: 760px) {
    .price-card.price-card--banner { padding: 24px !important; }
    .price-card.price-card--banner .feat { columns: 1; }
    .price-card.price-card--banner .amount { font-size: 2.4rem !important; }
}