@font-face {                    font-family: 'Agrandir';src: url('fonts/Agrandir\ regular.otf') format('opentype');font-weight: bold;}
@font-face {                    font-family: 'Telegraf';src: url('fonts/PP\ Telegraf\ Regular.otf') format('truetype');font-weight: normal;}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;800&display=swap');

:root {
    --orange: #DB5A23;
    --beige: #E9C7B1;
    --bleu-nuit: #0F1C3D;
    --gris-acier: #BAC4C6;
    --gris-clair: #F5F5F5;
    --blanc: #FFFFFF;
    --noir: #000000;
    --noir-profond: #1A1A1A;
    --orangeleger: #E9C7B1;
    --citation: #444
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {                          font-family: 'Telegraf', sans-serif; margin: 0;}
h1 {                            font-size: 5vw; font-weight: 800; letter-spacing: -2px; color: var(--blanc); margin-bottom: 10px;}
h2 {                            font-family: 'Agrandir', sans-serif; font-size: 30px; margin: 0px 60px 60px; letter-spacing: -1px;}
p {                             font-size: 1rem; line-height: 1.6;}
section {                       padding-left: 10%; padding-right: 10%; text-align: center; }
footer {                        padding: 40px; background: var(--noir); color: var(--gris-acier); text-align: center; font-size: 0.75rem; letter-spacing: 1px; }
ul {                            list-style-type: disc; padding-left: 20px; }
li {                            text-align: left; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;  color: var(--noir-profond); line-height: 1.1; font-weight: 400;}
table {                         width: 92%;margin: 0 auto 40px auto;border-collapse: collapse;font-size: 18px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);border-radius: 8px;overflow: hidden;}
th, td {                        border: 1px solid #ccc;padding: 14px;text-align: center;word-wrap: break-word;}
th {                            background-color: #f4f4f4;font-weight: bold;}

.header-index {                 height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;background: url('images/fond-index.jpg') no-repeat center center/cover;    text-align: center;border-bottom: 8px solid var(--orange);}

/* NAV */
.navbar {                       height: 110px;position: absolute;top: 0;left: 0;width: 100%;z-index: 1000;background-color: var(--blanc);min-height: 80px;}
.navbar.transparent {           background-color: transparent;box-shadow: none;}
.nav-container {                max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;}
.nav-logo img {                 height: 120px;width: auto;position: relative;}
.nav-links {                    list-style: none;display: flex;gap: 30px;margin: 0;}
.nav-links a {                  text-decoration: none;color: #0a1633;font-weight: 100;text-transform: uppercase;font-size: 14px;transition: color 0.3s;}
.nav-links a:hover {            color: #e65c2e;}

/* --- Le bouton Hamburger (caché sur ordinateur) --- */
.hamburger {  display: none; /* Masqué par défaut */  flex-direction: column;  cursor: pointer;  background: none;  border: none;  gap: 5px;}
.hamburger span {  width: 25px;  height: 3px;  background-color: #000;  transition: 0.3s;}

/***************************/
/* BANDEAU */
.hero-banner-mamethode {         background: url('images/etirementsJoggeur.jpg');background-size: cover;background-position: center;height: 540px;display: flex;flex-direction: column;align-items: center;text-align: center;color: var(--blanc);box-sizing: border-box;justify-content: flex-start;padding-top: 250px;}
.hero-banner-lecoach {          background: url('images/Yann-Buste.jpg');background-size: cover;background-position: center;height: 540px;display: flex;flex-direction: column;align-items: center;text-align: center;color: var(--blanc);box-sizing: border-box;justify-content: flex-start;padding-top: 160px;}
.hero-banner-lestarifs {        background: url('images/PoigneeDeMain.jpg');background-size: cover;background-position: center;height: 540px;display: flex;flex-direction: column;align-items: center;text-align: center;color: var(--blanc);box-sizing: border-box;justify-content: flex-start;padding-top: 160px;}
.hero-content {                 max-width: 50%;}
.hero-content h1 {              font-size: 3rem;margin-bottom: 10px;font-weight: 400;}
.separator {                    width: 40px;height: 2px;background-color: white;margin: 0 auto 20px auto;}
.hero-content p {               font-size: 1.2rem;}
/***************************/

/* INDEX */
.section-prestations {          background-color: var(--beige); text-align: center; padding-top: 30px; padding-bottom: 30px;}
.section-prestations h2 {       color: var(--bleu-nuit);  margin-bottom: 20px; letter-spacing: 1px; }
.section-prestations 
.intro-text {                   margin: 0 auto 50px auto; color: var(--bleu-nuit);}

/* Grille de 3 colonnes */
.grid-formule {                 display: grid; grid-template-columns: repeat(3, 2fr); gap: 15px; margin: 0 auto; padding-left: 10%; padding-right: 10%;}
.card-formule {                 background-color: var(--bleu-nuit); padding: 40px 20px; display: flex; flex-direction: column; border-radius: 4px; transition: transform 0.3s ease; padding: 30px; height: 100%; text-align: center; }
.card-formule:hover {           transform: translateY(-5px);}
.card-formule h3 {              font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; height: 50px; display: flex; align-items: center; justify-content: center;}
.card-formule p {               color: var(--beige) !important; font-size: 0.85rem; margin-top: auto; margin-top: 0;}
.card-formule a {               color: var(--beige) !important; padding: 0 !important;}

.section-reservation {          background-color: var(--orange); color: var(--beige);padding-top: 10px;padding-bottom: 30px; text-align:  center;}
.section-reservation h2 {       margin-bottom: 30px;letter-spacing: 1px;padding-left: 10%; padding-right:10%;}
.section-reservation p {        padding-left: 10%; padding-right:10%; }
.icon-dumbbell {                width: 150px;margin-top: -20px;}

.section-propos {               background-color: var(--gris-acier); color: var(--bleu-nuit); display: flex; justify-content: space-between;align-items: center; gap: 50px; padding-top: 30px;padding-bottom: 30px; }
.section-propos h2 {            line-height: 1.1;margin-bottom: 40px;}
.section-propos p {             padding-left: 10%; padding-right:10%; }
.propos-content {               flex: 1;text-align: left;margin-left: 10%;}
.propos-image {                 flex: 1;display: flex;     max-width: 500px;position: relative;}
.propos-image img {             width: 70%;display: block;margin-left: auto !important;margin-right: 0;margin-right: 10%;}
.badge-propos {                 background-color: var(--orange);color: var(--bleu-nuit);display: inline-block;padding: 2px 8px;    font-size: 0.8rem;margin-bottom: 20px;}

.subtitle {                     font-size: 1.1rem; letter-spacing: 6px; font-weight: 400; text-transform: uppercase; color: var(--orange); /* Prénom en Orange */}

/* Bouton Wix Style revisité */
.btn-wix {                      margin-top: 40px;padding: 18px 45px;border: 2px solid var(--orange);background: var(--orange);color: var(--blanc);text-decoration: none;font-weight: 700;font-size: 0.9rem;letter-spacing: 2px;transition: 0.3s ease;text-transform: uppercase;}
.btn-wix:hover {                background: transparent;color: var(--orange);}
.divBouton {                    margin: 40px; text-align: center;}
/* Sections */


/* Grille de services */
/*.grid {                         display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }*/
/*
.card {                         padding: 60px 30px; border-radius: 4px; transition: 0.3s; }
.card.boxe {                    background-color: var(--noir); border-top: 5px solid var(--orange); }
.card.pilates {                 background-color: var(--gris-acier); color: var(--bleu-nuit); border-top: 5px solid var(--bleu-nuit); }
.card.magistraux {              background-color: var(--bleu-nuit); border: 1px solid var(--gris-acier); border-top: 5px solid var(--beige); }
.card h3 {                      font-size: 1.6rem; margin-bottom: 20px; letter-spacing: 2px; font-weight: 800; }
*/


/* Section Ma Méthode / Services */




/* Section Orange : Réserver ma séance */


/* Section Grise : À Propos */

.btn-bleu {                     background-color: var(--bleu-nuit);color: var(--blanc);padding: 15px 35px;text-decoration: none;font-family: 'Agrandir', sans-serif;font-size: 0.8rem;letter-spacing: 1px;display: inline-block;}

/* Emplacement Image Coach */


.section-contact{               background-color: var(--beige);color: var(--blanc);padding-top: 30px;padding-bottom: 30px;}
.section-temoignages {          background-color: var(--bleu-nuit); color: var(--gris-acier);padding: 60px 20px;display: flex;align-items: center;justify-content: center;position: relative;padding-top: 30px;padding-bottom: 30px;}
.temoignages-container {        max-width: 800px;overflow: hidden; }
.temoignages-slider {           display: flex;transition: transform 0.5s ease-in-out; }
.temoignages-item {             min-width: 100%;  text-align: center;padding: 0 40px;}
.line {                         width: 50px;height: 2px;background-color: var(--blanc);margin: 20px auto;}
.arrow {                        background: none;border: none;color: white;font-size: 2rem;cursor: pointer;position: absolute;z-index: 10;}
.left {                         left: 20px; }
.right {                        right: 20px; }

/************ FORMULES *********/ 
/* Section Boxe Coaching */
/* On s'assure que la section est propre et alignée à gauche */
.seance-header {                width: 100%; margin-bottom: 40px; text-align: center; /*margin-bottom: 50px;*/ }
.seance{                        text-align: left;}/*padding: 10px 23%; */
.seance-content-wrapper {       display: flex;    gap: 40px; /* Espace central entre le texte et les images */    align-items: flex-start; /* Aligne le haut du texte avec le haut des images */}
.seance-pilates {               background-color: var(--blanc);}
.seance-pilates-pulse {         background-color: var(--blanc); }
.seance-flowandfight {          background-color: var(--gris-clair);}
.container-seance {             max-width: 1200px;  margin: 0 auto;  padding: 40px 120px; /*padding: 20px;*/}
.container-seance h2 {          margin-left: 0px !important; }
.seance-bandeau-section {       background-color: var(--gris-acier); height: 300px;}
.seance-bandeau h2 {            font-size: 2.2rem;color: var(--bleu-nuit);margin: 15px 0; text-align: center; padding-top: 60px;;}
.section-soustitre {            margin: 0 auto; max-width: 870px; text-align: left; font-style: italic;}

.main-title {                   font-size: 34px;    font-weight: 500;    margin: 0 0 15px 0;    color: var(--noir)}
.main-title em {                font-style: italic;    font-weight: 900 !important; }
.citation {                     font-size: 16px;    font-style: italic;    color: var(--citation);    margin: 0;}
.seance-text-col {              flex: 1.2; display: flex;    flex-direction: column;}
.seance-info-list {             list-style-type: disc;  padding-left: 20px;   margin: 0 0 15px 0; }
.seance-info-list li {          font-size: 15px;  color: #2c3e50;}
.seance-info-list li strong {   color: var(--noir-profond);     font-weight: 600;}
.seance-sub-title {             font-size: 17px; font-weight: 900; margin: 5px 0 1px 0;}
.seance-text-col 
h3:first-of-type {              margin-top: 0;}
.seance-images-col {            flex: 1; display: flex;    flex-direction: column;    gap: 15px; }
.img-wrap {                     width: 100%;    border-radius: 4px;    overflow: hidden;    box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.seance-img {                   width: 100%;    height: auto;    display: block;    object-fit: cover;}
.orange {                       color: var(--orange); }
.no-margin{                     margin: auto !important;}
/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */

/***********************************/
strong {                        font-weight: 600; }
.container-tarifs {             max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
.flex-tarifs-wrapper {
    display: flex; /* Active Flexbox */
    gap: 40px; /* Espace central entre les deux blocs */
    align-items: stretch; /* C'EST ICI LA COMMANDE MAGIQUE : Force les enfants à s'étirer verticalement */
}

/* --- LE STYLE DES BOITES DE TARIFS --- */
.tarif-box {
    flex: 1; /* Chaque boite prend 50% de la largeur du parent flex */
    background: #fff;
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Petite ombre portée propre */
    
    /* Gère la structure interne pour un alignement parfait du contenu */
    display: flex;
    flex-direction: column;
}
.box-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #E67E22; /* Ton orange */
    text-align: center;
}

.price-tag {
    display: inline-block;
    padding: 10px 20px;
    background-color: #F8E6DD; /* Exemple de saumon très clair de ton image */
    color: #000;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 auto 20px auto; /* Centre horizontalement */
    width: fit-content;
}
.info-list {
    list-style-type: disc; /* Puces rondes noires */
    padding-left: 20px;
    margin: 0;
    color: #333;
}

.info-list li {
    font-size: 15px;
    margin-bottom: 12px;
}
.tarifs-content-wrapper {       display: flex; gap: 60px; align-items: flex-start; margin-bottom: 60px; padding-top: 50px; }
.tarifs-text-col {              flex: 1.2; display: flex; flex-direction: column; gap: 30px; }
.tarif-card {                   background: #fff; padding: 25px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.tarifs-text-col 
h3:first-of-type {              margin-top: 0;}
.seance-info-list {             list-style-type: disc; padding-left: 20px; margin: 0 0 10px 0;}

.seance-info-list li {          font-size: 15px; margin-bottom: 10px; color: #333;}
.tarif-price-tag {              display: inline-block; padding: 8px 15px; background-color: #F8E6DD; color: #2c3e50; border-radius: 4px; font-size: 16px; font-weight: 500; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.03);}
/* --- COLONNE IMAGE/ACTION (Droite) --- */
.tarifs-images-col {            flex: 1; display: flex; flex-direction: column; gap: 30px; /* Espace entre image et bouton */ }
/* Shadow Box générique */
.shadow-box {                   background: #fff; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Ombre plus marquée */}

/* ==========================================================================
   3. STYLES DE LA GRILLE DE PRIX COMPLÈTE (Inspirée de l'image 1)
   ========================================================================== */

.tarifs-grid-wrapper { margin-top: 60px; overflow-x: auto; }
.tarif-grid-header {   font-size: 22px; font-weight: 500; text-align: center; margin-bottom: 25px;}

/* Structure de la ligne */
.grid-row {                     display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 15px; padding: 15px; border-bottom: 1px solid #eee; align-items: center; text-align: center;}
.grid-row div {                 font-size: 15px;}
/* Titres de colonnes */
.grid-titles {                  background-color: #f7f7f7; font-weight: 600;  border-top: 1px solid #eee;}
/* Noms de formules */
.formule-name {
    font-weight: 600;
    text-align: left; /* Aligne le nom à gauche */
    padding-left: 10px;
}



/*************** LES TARFIS *******************************/
.boxe-lestarifs-section {       padding: 80px 10%;background-color: #ffffff; text-align: left; color: var(--noir);}
/* Éléments Rose (Badges et bordures) */
.highlight-price {              background-color: #E9C7B1;    color: #333;    padding: 6px 12px;    border-radius: 6px;    font-weight: bold;    display: inline-block;    margin-bottom: 15px;  }

/* Tableau Coaching */

/* Conteneur flex pour blocs */
.container {                    display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;margin: 0 auto;}
.bloc {                         width: 45%;background: #fafafa;border: 1px solid #ccc;border-radius: 8px;padding: 20px;box-sizing: border-box;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.bloc:hover {                   transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.bloc ul li::before {           content: "•";color: #E9C7B1;font-weight: bold;position: absolute;left: 0;}
.bloc h3 {                      font-size: 20px;margin-bottom: 15px;display: flex;align-items: center;gap: 8px;}
.bloc ul {                      list-style:none;padding: 0;margin: 0;}
.bloc ul li {                   margin-bottom: 10px;font-size: 16px;    position: relative;    padding-left: 20px;}
.bloclifirst {                  font-size: 20px;color: #0077b6;font-weight: bold;}
.distancielle{                  width: 92%;}
.badge {                        background: #ff9800;color: #fff;padding: 4px 8px;border-radius: 4px;font-size: 12px;margin-left: 8px;font-weight: bold;}
.badge-dev {                    background: #eee;    color: #777;    padding: 3px 8px;    border-radius: 4px;    font-size: 11px;    text-transform: uppercase;    letter-spacing: 0.5px;    margin-top: 5px;    display: inline-block;  }
.badge-choice {                 background: #007bff;color: #fff;padding: 5px 10px;border-radius: 5px;font-weight: bold;font-size: 12px;margin-left: 8px;}
.abonnement-premium {           background: #fff8e1; border: 2px solid #ffd700; }
.badge {                        background: #ffd700; color: #000; padding: 5px 10px; border-radius: 5px; font-weight: bold; }
.cta-buttons {                  text-align: center; margin-top: 20px; }
.btn-primary, .btn-secondary {  display: inline-block; padding: 10px 20px; margin: 5px; border-radius: 5px; text-decoration: none; }
.btn-primary {                  background: #007bff; color: #fff; }
.btn-secondary {                background: #f1f1f1; color: #333; }
.intro {                        margin-top: 0;    margin-bottom: 20px;    font-size: 14px;     text-align: center;  }
.titre-abonnements {            margin-top: 40px;  margin-bottom: 10px;  }
.footer-note {                  font-style: italic;font-size: 13px;color: #999;margin-top: auto;padding-top: 15px;}
.important-line {               border-left: 3px solid #E9C7B1;padding-left: 12px !important;margin: 15px 0;font-weight: bold;}


/* Responsive */
@media (max-width: 768px) {
    /*section {                   padding: 0px !important; }*/
    h2 {                        font-size: 16px;}
    table {                     max-width: 90%;margin: 0 auto;box-shadow: none;font-size: 10px;}
    thead {                     display: none;}
    tr {                        display: block;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 8px;padding: 10px;background: #fff;box-sizing: border-box;}
    td {                        display: block;width: 100%;text-align: left;padding: 10px;position: relative;box-sizing: border-box;}
    td::before {                content: attr(data-label);font-weight: bold;display: block;margin-bottom: 5px;color: #555;}
    .container {                flex-direction: column;gap: 15px;max-width: 90%;}
    .bloc {                     width: 100%;margin: 0 auto;box-sizing: border-box;}
    .bloc ul li {               font-size: 10px;}
    .bloc h3 {                  font-size: 12px;}
    .bloc ul li:first-child {   font-size: 10px;}
    
    .badge {                    font-size: 6px;}
    .intro {                    font-size: 7px;}
    .container-tarifs {         padding: 50px 0px;    }
    .main-title {               font-size: 28px;    }
    .tarifs-content-wrapper {   flex-direction: column; gap: 40px; }
    .tarifs-content-wrapper {   flex-direction: column-reverse; }
    .section-propos {           flex-direction: column;text-align: center;}
    .propos-content {           text-align: center; }
    .propos-image img {         width: 100%; }
    .icon-dumbbell {            width: 50%;}
    .container-seance {         flex-direction: column; padding: 0px; }
    .hero-content {             max-width: none !important;}
    /*.seance {                   padding: 0px !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;  }
    .main-title {               font-size: 26px;    }
    .seance-sub-title {         font-size: 18px;    }
    .seance-content-wrapper {   flex-direction: column-reverse; gap: 30px;  }
    .seance-text-col, 
    .seance-images-col {        width: 100%;    }  
/* On cible le conteneur qui contient vos deux cartes */
    .flex-tarifs-wrapper {
        flex-direction: column; /* Force l'empilement vertical */
        align-items: center;    /* Centre les cartes horizontalement */
        gap: 20px;              /* Ajoute un espace entre les cartes */
    }

    /* On s'assure que les boîtes prennent toute la largeur disponible */
    .tarif-box {
        width: 100%;
        max-width: 400px; /* Optionnel : pour éviter qu'elles ne soient trop larges */
    }
    .grid-formule {
        /* On passe d'un affichage en colonnes à une colonne unique */
        display: flex;
        flex-direction: column;
        
        /* On centre les cartes et on ajoute de l'espace entre elles */
        align-items: center;
        gap: 20px;
        
        /* Optionnel : on ajoute un peu de marge sur les côtés */
        padding: 20px 20px;
    }

    .card-formule {
        /* Les cartes prennent toute la largeur disponible */
        width: 100%;
        /* On peut limiter la largeur max pour que ce soit plus esthétique sur tablette */
        max-width: 450px; 
    }
}
/* Responsive */
@media (max-width: 900px) {
    .container-seance { flex-direction: column; }
}
/* Adaptation Mobile (1 colonne si l'écran est petit) */
@media (max-width: 1024px) {
    .grid-mamethode { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
}
/* --- Styles de base et Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
}