/* =============================================
   RESPONSIVE MULTI-RESOLUTION — BYAM 2026
   Breakpoints : 720p · 1080p · 2K+
   ============================================= */

/* ---- Variables supplémentaires responsive ---- */
:root {
    --byam-container-sm: 680px;
    --byam-container-md: 960px;
    --byam-container-lg: 1200px;
    --byam-container-xl: 1440px;
    --byam-container-2k: 1800px;
}

/* =============================================
   BASE — IMAGES RESPONSIVES
   ============================================= */
img {
    max-width: 100%;
    height: auto;
}

.hero-image img,
.full-photo-section img,
#formules .img-fluid,
.black-prez-enterprise,
.black-prez-coaching {
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* =============================================
   720p — max-width: 1280px  (petits laptops)
   ============================================= */
@media (max-width: 1280px) {

    /* -- Navbar -- */
    #header-logo {
        height: 50px;
    }

    #header-title-jg {
        font-size: 1.15rem;
    }

    #header-subtitle-jg {
        font-size: 0.75rem;
    }

    #header-nav-link,
    #header-nav-link-active,
    #header-nav-link-dropdown {
        font-size: 0.82rem;
    }

    /* -- Hero landing -- */
    .coach-prez {
        min-height: 40vh;
    }

    .hero-inner {
        padding: 40px 0;
        gap: 24px;
        max-width: 95%;
    }

    .byam-page-header-content h1 {
        font-size: clamp(1.5rem, 4vw, 2.2rem);
    }

    .byam-page-header-content p {
        font-size: 0.92rem;
    }

    .hero-image {
        max-width: 360px;
        border-radius: 20px;
    }

    .hero-badges span {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .btn-pill {
        padding: 9px 18px;
        font-size: 0.82rem;
    }

    /* -- Section formules -- */
    #formules .img-fluid {
        width: 100% !important;
    }

    .card-home-prez {
        padding: 22px;
        max-width: 100%;
    }

    .card-home-prez h2 {
        font-size: 1.15rem;
    }

    .card-home-prez p,
    .card-home-prez ul li {
        font-size: 0.85rem;
    }

    /* -- Full photo section -- */
    .full-photo-section {
        min-height: 320px;
    }

    .card-home-pro {
        margin: 30px 0 30px 5%;
        max-width: 380px;
    }

    /* -- Footer -- */
    .footer-inner {
        gap: 30px;
        flex-direction: column;
    }

    .footer-right {
        max-width: 100%;
    }

    /* -- Enterprise hero -- */
    .black-prez-enterprise {
        max-height: 320px;
        min-height: 220px;
    }

    .black-prez-enterprise h1 {
        font-size: 1.5rem;
    }

    /* -- Coaching pages -- */
    .black-prez-coaching {
        min-height: 30vh;
    }

    .card-coaching {
        width: 300px;
        height: auto;
    }

    .card-coaching-domicile {
        left: 50%;
        width: 95%;
        max-width: 480px;
    }

    /* -- Tarifs -- */
    .tarifs-banner {
        height: 180px;
    }

    .tarifs-banner h1 {
        font-size: 1.6rem;
    }

    .price-card-tarifs {
        width: 220px;
    }

    .title-visio {
        font-size: 1.25rem;
    }

    /* -- Boutique -- */
    .boutique-product-card {
        max-width: 220px;
    }
}

/* =============================================
   900px – 1280px — Tablettes paysage / petit desktop
   ============================================= */
@media (min-width: 901px) and (max-width: 1280px) {

    .hero-inner {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .hero-image-wrapper {
        flex: 0 0 40%;
    }

    .byam-page-header-content {
        flex: 0 0 55%;
    }

    #formules .row {
        gap: 20px;
    }
}

/* =============================================
   1080p — 1281px à 1920px (standard desktop)
   Principalement des ajustements fins
   ============================================= */
@media (min-width: 1281px) and (max-width: 1920px) {

    /* -- Navbar -- */
    #header-logo {
        height: 65px;
    }

    /* -- Hero -- */
    .coach-prez {
        min-height: 45vh;
    }

    .hero-inner {
        max-width: 1200px;
        padding: 60px 0;
    }

    .hero-image {
        max-width: 480px;
    }

    .byam-page-header-content h1 {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    /* -- Full photo -- */
    .full-photo-section {
        min-height: 450px;
    }

    .card-home-pro {
        margin: 40px 0 40px 10%;
        max-width: 440px;
    }

    /* -- Enterprise -- */
    .black-prez-enterprise {
        max-height: 400px;
        min-height: 280px;
    }

    /* -- Tarifs -- */
    .price-card-tarifs {
        width: 250px;
    }
}

/* =============================================
   2K+ — min-width: 1921px (grands écrans)
   ============================================= */
@media (min-width: 1921px) {

    /* -- Conteneurs plus larges -- */
    .container,
    .container-fluid {
        max-width: var(--byam-container-2k);
    }

    .hero-inner {
        max-width: var(--byam-container-2k);
        padding: 100px 0;
        gap: 80px;
    }

    .formulas,
    .footer-inner {
        max-width: var(--byam-container-xl);
    }

    /* -- Navbar -- */
    #header-logo {
        height: 85px;
    }

    #header-title-jg {
        font-size: 1.8rem;
    }

    #header-subtitle-jg {
        font-size: 1rem;
    }

    #header-nav-link,
    #header-nav-link-active,
    #header-nav-link-dropdown {
        font-size: 1.05rem;
    }

    .navbar {
        padding: 14px 0;
    }

    .dropdown-item {
        font-size: 1rem;
        padding: 10px 18px;
    }

    /* -- Hero -- */
    .coach-prez {
        min-height: 55vh;
    }

    .byam-page-header-content {
        max-width: 700px;
    }

    .byam-page-header-content h1 {
        font-size: 3.4rem;
    }

    .byam-page-header-content p {
        font-size: 1.2rem;
        line-height: 1.8;
    }

    .hero-label {
        font-size: 0.85rem;
        padding: 7px 18px;
    }

    .hero-badges span {
        font-size: 15px !important;
        padding: 8px 18px !important;
    }

    .hero-image {
        max-width: 700px;
        border-radius: 32px;
    }

    .hero-social a {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .btn-pill {
        padding: 14px 32px;
        font-size: 1rem;
    }

    /* -- Section formules -- */
    #formules .container {
        max-width: var(--byam-container-xl);
    }

    #formules .img-fluid {
        width: 90% !important;
        border-radius: 24px;
    }

    .card-home-prez {
        padding: 40px;
        max-width: 540px;
        border-radius: 24px;
    }

    .card-home-prez h2 {
        font-size: 1.7rem;
    }

    .card-home-prez p,
    .card-home-prez ul li {
        font-size: 1.05rem;
    }

    /* -- Full photo section -- */
    .full-photo-section {
        min-height: 600px;
    }

    .card-home-pro {
        margin: 50px 0 50px 12%;
        max-width: 540px;
    }

    /* -- Enterprise page -- */
    .black-prez-enterprise {
        max-height: 550px;
        min-height: 400px;
    }

    .black-prez-enterprise h1 {
        font-size: 3rem;
    }

    .black-prez-enterprise .lead {
        font-size: 1.2rem;
    }

    /* -- Coaching pages -- */
    .black-prez-coaching {
        min-height: 50vh;
    }

    .black-prez-coaching h1 {
        font-size: 3rem;
    }

    .card-coaching {
        width: 440px;
        height: auto;
    }

    .card-coaching-domicile {
        max-width: 650px;
    }

    /* -- Tarifs -- */
    .tarifs-banner {
        height: 300px;
        border-radius: 0 0 48px 48px;
    }

    .tarifs-banner h1 {
        font-size: 2.8rem;
    }

    .tarifs-banner .lead {
        font-size: 1.2rem;
    }

    .title-visio {
        font-size: 1.8rem;
        margin-top: 50px;
        margin-bottom: 36px;
    }

    .price-card-tarifs {
        width: 300px;
    }

    .price-card .amount {
        font-size: 3.2rem !important;
    }

    .price-card .card-text {
        font-size: 0.95rem;
    }

    /* -- Boutique -- */
    .boutique-product-card {
        max-width: 320px;
    }

    .boutique-product-name {
        font-size: 1rem;
    }

    .boutique-product-price {
        font-size: 1.1rem;
    }

    /* -- Footer -- */
    footer.landing-footer {
        padding: 80px 0 60px;
        border-radius: 48px 48px 0 0;
    }

    .footer-inner {
        max-width: var(--byam-container-xl);
        gap: 80px;
    }

    .footer-left h3 {
        font-size: 1.6rem;
    }

    .footer-left p,
    .footer-left a {
        font-size: 1.05rem;
    }

    .footer-right {
        max-width: 440px;
    }

    .footer-right input,
    .footer-right textarea {
        font-size: 1rem;
        padding: 12px 6px;
    }

    /* -- Global footer -- */
    body > footer a,
    footer:not(.landing-footer) a {
        font-size: 0.88rem;
    }

    body > footer p,
    footer:not(.landing-footer) p {
        font-size: 0.82rem;
    }

    /* -- Forms -- */
    .form-control,
    .form-select {
        padding: 12px 16px;
        font-size: 1rem;
    }

    /* -- Cards generiques -- */
    .card.shadow-sm .card-body {
        padding: 28px;
    }

    /* -- Profil -- */
    .profile-card {
        border-radius: 20px !important;
    }

    /* -- Alerts -- */
    .alert {
        font-size: 1rem;
        padding: 16px 20px;
    }
}

/* =============================================
   4K — min-width: 2560px (ultra-wide)
   ============================================= */
@media (min-width: 2560px) {

    .hero-inner {
        max-width: 2000px;
        padding: 120px 0;
    }

    .byam-page-header-content h1 {
        font-size: 4rem;
    }

    .byam-page-header-content p {
        font-size: 1.35rem;
    }

    .hero-image {
        max-width: 850px;
    }

    .full-photo-section {
        min-height: 750px;
    }

    #formules .container {
        max-width: 1800px;
    }

    .tarifs-banner {
        height: 360px;
    }

    .price-card-tarifs {
        width: 360px;
    }

    footer.landing-footer {
        padding: 100px 0 80px;
    }
}

/* =============================================
   UTILITAIRES RESPONSIVE
   ============================================= */

/* Image container avec ratio fixe */
.img-responsive-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--byam-radius, 16px);
}

.img-responsive-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.img-responsive-container:hover img {
    transform: scale(1.03);
}

/* Aspect ratios */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1;
}

/* Texte responsive */
.text-responsive-sm {
    font-size: clamp(0.82rem, 1.2vw, 1rem);
}

.text-responsive-md {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
}

.text-responsive-lg {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.text-responsive-xl {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

/* Spacing responsive */
.py-responsive {
    padding-top: clamp(40px, 6vw, 100px);
    padding-bottom: clamp(40px, 6vw, 100px);
}

.gap-responsive {
    gap: clamp(16px, 3vw, 48px);
}

/* Print */
@media print {
    header, footer, .hero-social, .byam-buttons, .btn-pill {
        display: none !important;
    }

    .coach-prez, .tarifs-banner, .black-prez-enterprise, .black-prez-coaching {
        background: #f0f0f0 !important;
        color: #000 !important;
        min-height: auto !important;
        height: auto !important;
    }

    body {
        font-size: 12pt;
    }
}