/* Responsive */
@media (max-width: 768px) {
    section {                   padding-left: 10% !important; padding-right: 10% !important; /*padding-top: 10px !important; padding-bottom: 10px !important;*/}
    h1 {                        font-size: 1.6rem !important;}
    h2 {                        font-size: 1.2rem !important; }
    h3 {                        font-size: 1rem !important; }
    li strong {                 font-size: 1rem !important; } 
    p {                         font-size: 1rem !important; padding: 0px !important; line-height: 2;}
    footer p {                  font-size: 0.6rem !important; }
    .header-index {             padding-left: 10%; padding-right: 10%; height: 135vh !important;}
    .header-index H1 {          width: 100% !important; padding-bottom: 25px;}    
    .header-index p {           width: 100% !important;}
    .header-index, .hero-banner-lamethode, .hero-banner-lestarifs {
        height: auto !important; /* On casse le 100vh pour s'adapter au contenu */
        min-height: 100vh;
        /*padding: 40px 20px !important;*/ /* On réduit les marges de côté */
        padding-top: 140px;
        padding-left: 10%; padding-right: 10%;
        /* On remplace la grande image par ton fond bleu nuit */
        background-image: none !important;
        background-color: var(--bleu-nuit) !important; 
        color: var(--blanc) !important;
        justify-content: flex-start; /* On aligne le contenu vers le haut */
    }
    .hero-banner-lamethode, .hero-banner-lestarifs { padding-top: 40px !important; min-height: 94vh;}

    /* Optionnel : Si tu veux quand même afficher ton image sans qu'elle soit écrasée, 
       on peut l'insérer proprement tout en bas du texte */
    .header-index::after {
        content: "";
        width: 100%;
        height: 250px; /* Hauteur fixe et propre pour mobile */
        margin-top: 30px;
        background-image: url('/images/BANDEAU/Bandeau_Khyoba.webp');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain; /* L'image s'adaptera sans être coupée ni déformée */
    }
    .hero-banner-lamethode::after, .hero-banner-lestarifs::after {
        content: "";
        width: 100%;
        height: 250px; /* Hauteur fixe et propre pour mobile */
        margin-top: 30px;
        background-image: url('/images/BANDEAU/bandeau\ Khyoba\ \(1920\ x\ 600\ px\).webp');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain; /* L'image s'adaptera sans être coupée ni déformée */
    }

    .container {                flex-direction: column;gap: 15px;max-width: 90%;}
    .bloc {                     width: 100%;margin: 0 auto;box-sizing: border-box;}

    .btn-orange { border: none; font-size: 0.6rem;}
    .btn-bleu { border: none; font-size: 0.6rem;}
    .divBouton { margin-left: 20px !important; margin-right: 20px !important; margin-top: 40px !important;}
    .badge {                    font-size: 6px;}
    .intro {                    font-size: 7px;}
    .badges-certification {     width: 100%;}
    .tarifs-container-bloc {    display: block; margin: 0px;}
    .tarifs-bloc {              display: block; width: 100%; margin-top: 25px;}
    .main-title {               font-size: 28px;    }

    .section-propos {           flex-direction: column;text-align: center;}

    .propos-image img {         width: 100%; }
    .icon-recalibrage {         width: 25%;}

    .hero-content {             max-width: none !important; }

    /*
    .hamburger {                display: flex;  }
    .nav-links {                display: none; flex-direction: column;    position: absolute;    top: 70px;    left: 0;    width: 100%;    background-color: #fff;   text-align: center;    padding: 20px 0;    box-shadow: 0 10px 10px rgba(0,0,0,0.1);  }
    .nav-links.active {         display: flex;  }
    */
    
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 25px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: black;
    }

    /* MENU */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* caché */
        width: 250px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 80px 20px;
        gap: 20px;
        transition: right 0.3s ease;
        z-index: 1000;
    }

    /* MENU OUVERT */
    .nav-links.active {
        right: 0;
    }

    /* OVERLAY noir */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 999;
    }

    .menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .lamethode-section-content-wrapper, 
    .lecoach-section-content-wrapper {   
                                flex-direction: column-reverse; gap: 30px;  }
    .lamethode-content-wrapper { 
                                display: block;}
    .lecoach-text-col, 
    .lamethode-text-col, 
    .seance-text-col, 
    .lecoach-images-col, 
    .lamethode-images-col, 
    .seance-images-col {        width: 100%;    }  
    .lecoach-img, 
    .lamethode-img, 
    .seance-img {               width: 100%; }
    .lecoach-biographie 
    .img-wrap {                 width: 100% !important; }
    .badge-propos {             width: 32% !important; }


    .section-reservation h2 {   padding-left: 0px !important; padding-right: 0px !important; margin: 0px !important; }
    .section-reservation p {    padding-left: 0px !important; padding-right: 0px !important; }
    .propos-content {           margin-left: 0px !important;}
    .tarif-box {                width: 100%; max-width: 400px; }
    .grid-formule {             display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 20px; }

    .card-formule {             width: 100%; max-width: 450px; padding: 20px 10px; }
    .container-lecoach {        flex-direction: column; }
    .sidebar {                  order: -1; }

    .banner-content {           flex-direction: column; gap: 30px;}
    .banner-mamission h2, 
    .banner-mamission p {       text-align: center; }
    .banner-mamission::before { width: 200px;top: -20px; }
    .mesvaleurs-div {           display:inline; max-width: 1200px; padding: 0px!important; margin: auto;}
    .mesvaleurs-divenfant {     display:inline; }
    .section-recalibrage p {    text-align: left;}
    .hero-banner-lamethode {    height: auto;}
    .hero-banner-lecoach {      height: auto;   }
    .hero-banner-lestarifs {    height: auto; }
    .section-prestations p {    margin: auto;}

    table thead {               display: none;    }
    table, table tbody, 
    table tr, table td {        display: block;        width: 100%;    }
    table tr {                  margin-bottom: 15px;        
        border: 1px solid var(--bordure);        
        border-radius: 8px;        
        padding: 10px;        
        background: var(--blanc);    }
    table td {                  text-align: right;        padding-left: 50%;        position: relative;        border-bottom: 1px solid var(--bordure);        
        line-height: 2;    }

    /* On insère le nom de la colonne à gauche */
    table td::before {          content: attr(data-label);        position: absolute;        left: 10px;        width: 45%;        font-weight: bold;        text-align: left;        
        color: var(--orange); }
    table td:last-child {       border-bottom: 0;    }

    .palmares-strip {           flex-direction: column; gap: 20px; }
    .divider {                  display: none; }
    .contact-grid {             grid-template-columns: 1fr; }

        .mobile-text {
        display: inline;
    }
    .desktop-text {
        display: none;
    }
}
/* Responsive */
@media (max-width: 900px) {
    .lamethode-container, 
    .container-seance {         flex-direction: column; }
    .card-coaching, 
    .card-coaching:nth-child(even) {        
                                flex-direction: column;        text-align: center;    }
    .palmares-eleve ul li {     padding-left: 0;    }
    .palmares-eleve ul li::before {        
                                display: none;    }
}
/* Adaptation Mobile (1 colonne si l'écran est petit) */
@media (max-width: 1024px) {
    .grid-lamethode {           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
}

/* Responsive */
@media (max-width: 900px) {
    .lamethode-container, 
    .container-seance {         flex-direction: column; }
    .card-coaching, 
    .card-coaching:nth-child(even) {        
                                flex-direction: column;        text-align: center;    }
    .palmares-eleve ul li {     padding-left: 0;    }
    .palmares-eleve ul li::before {        
                                display: none;    }
}
/* Adaptation Mobile (1 colonne si l'écran est petit) */
@media (max-width: 1024px) {
    .grid-lamethode {           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
}