/* ============================================================
   INSERT - Styles page d'accueil (vitrine)
   ============================================================ */

/* ------------------------------------------------------------
   Hero - logo géant + slogan
   ------------------------------------------------------------ */
.vitrine-hero {
    background: var(--fond-carte);
    padding: 70px 0 80px;
}

.vitrine-logo-geant {
    display: block;
    margin: 0 auto 28px;
    width: 200px;
    height: 200px;
    max-width: 60vw;
    max-height: 60vw;
}

.vitrine-slogan {
    font-size: 1.75rem;
    color: var(--vert-primaire);
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.vitrine-sous-titre {
    font-size: 1.35rem;
    color: var(--vert-moyen);
    font-weight: 500;
    margin: 0 0 24px;
    line-height: 1.4;
}

.vitrine-accroche {
    font-size: 1.05rem;
    color: var(--texte-secondaire);
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.vitrine-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Lien vidéos (au-dessus du logo dans le hero)
   ------------------------------------------------------------ */
.vitrine-lien-videos {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    margin-bottom  : 32px;
    padding        : 9px 22px;
    background     : var(--vert-primaire);
    color          : var(--fond-carte);
    font-size      : 0.95rem;
    font-weight    : 600;
    border-radius  : 100px;
    text-decoration: none;
    letter-spacing : 0.2px;
    box-shadow     : 0 3px 12px rgba(0,0,0,0.15);
    transition     : background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.vitrine-lien-videos:hover {
    background : var(--vert-moyen);
    color      : var(--fond-carte);
    transform  : translateY(-1px);
    box-shadow : 0 5px 16px rgba(0,0,0,0.2);
}

.vitrine-lien-videos svg {
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
.vitrine-section {
    padding: 70px 0;
}

.vitrine-section-grise {
    background: var(--fond-zone-alt);
}

.vitrine-section h2 {
    font-size: 2rem;
    margin-bottom: 16px;
}

/* Grille fonctionnalités */
.vitrine-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.vitrine-feature {
    background: var(--fond-carte);
    border: 1px solid var(--bordure-nette);
    border-radius: var(--rayon-carte);
    padding: 28px;
    transition: border-color 0.2s, transform 0.2s;
}

.vitrine-feature:hover {
    border-color: var(--vert-primaire);
    transform: translateY(-2px);
}

.vitrine-feature h3 {
    color: var(--vert-primaire);
    margin-bottom: 12px;
    font-size: 1.15rem;
}

.vitrine-feature p {
    color: var(--texte-secondaire);
    margin: 0;
    line-height: 1.6;
}

/* Bandeau roadmap V2 */
.vitrine-roadmap {
    margin: 28px auto 0;
    padding: 14px 20px;
    max-width: 680px;
    background: var(--fond-zone-alt);
    border-left: 3px solid var(--vert-primaire);
    border-radius: 0;
    font-size: 0.95rem;
    color: var(--texte-secondaire);
}

/* Texte de confort */
.vitrine-texte-confort {
    max-width: 720px;
    margin: 24px auto 0;
    font-size: 1.1rem;
    color: var(--texte-secondaire);
    line-height: 1.7;
}

/* ------------------------------------------------------------
   Tarifs
   ------------------------------------------------------------ */
.vitrine-tarifs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
    align-items: stretch;
}

.vitrine-tarif {
    background: var(--fond-carte);
    border: 1px solid var(--bordure-nette);
    border-radius: var(--rayon-carte);
    padding: 32px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.vitrine-tarif-recommande {
    border: 2px solid var(--vert-primaire);
}

.vitrine-tarif-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vert-primaire);
    color: var(--fond-carte);
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

.vitrine-tarif h3 {
    margin-top: 0;
    font-size: 1.3rem;
}

.vitrine-tarif-prix {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--vert-primaire);
    margin: 12px 0 6px;
}

.vitrine-tarif-prix span {
    font-size: 1rem;
    color: var(--texte-secondaire);
    font-weight: 400;
}

.vitrine-tarif-cible {
    color: var(--texte-secondaire);
    font-size: 14px;
    margin-bottom: 20px;
}

.vitrine-tarif ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}

.vitrine-tarif li {
    padding: 8px 0;
    border-bottom: 1px solid var(--bordure-nette);
    font-size: 15px;
    color: var(--texte-principal);
}

.vitrine-tarif li:last-child {
    border-bottom: none;
}

.vitrine-tarif-annuel {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--bordure-nette);
    font-size: 13px;
    color: var(--texte-secondaire);
    text-align: center;
}

.vitrine-tarif-eco {
    color: var(--couleur-succes);
    font-weight: 500;
}

.vitrine-tarif-indisponible {
    border-style: dashed;
    opacity: 0.85;
}

.vitrine-tarif-badge-prochainement {
    background: var(--texte-doux);
}

.btn-desactive {
    background: var(--fond-zone-alt);
    color: var(--texte-secondaire);
    border: 1px solid var(--bordure-nette);
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------------------------------------
   CTA final
   ------------------------------------------------------------ */
.vitrine-cta {
    background: var(--fond-zone-alt);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

/* ── Mobile portrait (≤ 600px) ─────────────────────────────── */
@media (max-width: 600px) {
    .vitrine-logo-geant {
        width: 150px;
        height: 150px;
    }
    .vitrine-slogan {
        font-size: 1.35rem;
    }
    .vitrine-sous-titre {
        font-size: 1.1rem;
    }
    .vitrine-actions {
        flex-direction: column;
    }
    .vitrine-actions .btn {
        width: 100%;
    }
}

/* ── Mobile paysage (hauteur ≤ 500px) ───────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

    /* Hero : réduire drastiquement les paddings verticaux */
    .vitrine-hero {
        padding: 24px 0 28px;
    }

    /* Logo : beaucoup plus petit */
    .vitrine-logo-geant {
        width  : 80px;
        height : 80px;
        margin-bottom : 14px;
    }

    /* Slogan et sous-titre : compacts */
    .vitrine-slogan {
        font-size   : 1.2rem;
        margin-bottom: 6px;
    }

    .vitrine-sous-titre {
        font-size   : 1rem;
        margin-bottom: 12px;
    }

    .vitrine-accroche {
        font-size   : 0.95rem;
        margin-bottom: 18px;
    }

    /* Sections : réduire les paddings */
    .vitrine-section {
        padding: 36px 0;
    }

    /* Boutons côte à côte */
    .vitrine-actions {
        flex-direction : row;
        flex-wrap      : wrap;
    }
}

/* ── Encart session expirée ──────────────────────────────────── */

.vitrine-encart-session {
    display      : flex;
    align-items  : center;
    gap          : 0.75rem;
    margin-top   : 1.5rem;
    padding      : 0.9rem 1.25rem;
    background   : #fff7ed;
    border       : 1px solid #f97316;
    border-radius: 8px;
    color        : #9a3412;
    font-size    : 0.92rem;
    font-weight  : 500;
}

.vitrine-encart-session svg {
    flex-shrink: 0;
    color      : #f97316;
}

/* ── Tarifs de lancement ─────────────────────────────────────── */

.vitrine-tarifs-lancement {
    display      : inline-block;
    margin       : 0 auto 1.5rem;
    padding      : 0.45rem 1.4rem;
    background   : linear-gradient(135deg, #e8620a, #f97316);
    color        : #fff;
    font-size    : 1.15rem;
    font-weight  : 700;
    border-radius: 24px;
    letter-spacing: 0.03em;
    box-shadow   : 0 3px 12px rgba(232,98,10,.35);
    width        : auto;
}