/* ====================================================================
    SECTION 1 : GRILLE DES TARIFS
   ==================================================================== */

/* -- CONTENEUR PRINCIPAL DES TARIFS -- */
.tarifs-grid {
    display: flex;                    /* Flexbox pour alignement horizontal */
    justify-content: center;          /* Centrage horizontal des cartes */
    gap: 70px;                       /* Grand espacement entre les cartes */
    margin-top: 3rem;                /* Espace depuis le titre */
}

/* -- CARTE DE TARIF GÉNÉRIQUE -- */
.tarif-card {
    background-color: var(--white);   /* Fond blanc pur */
    padding: 2rem;                   /* Espacement interne généreux */
    border-radius: 10px;             /* Coins arrondis */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Ombre portée douce */
    text-align: center;              /* Centrage du contenu */
    width: 100%;                     /* Largeur flexible */
    max-width: 400px;                /* Largeur maximale pour lisibilité */
    border-top: 5px solid var(--primary); /* Bordure supérieure colorée */
    transition: transform 0.3s;      /* Animation au survol */
}

/* -- EFFET DE SURVOL -- */
.tarif-card:hover {
    transform: translateY(-5px);     /* Légère élévation au survol */
}

/* -- VARIANTES DE CARTES PAR TYPE DE TARIF -- */
.tarif-individuel {
    border-color: var(--primary);    /* Bordure verte pour individuel */
}
.tarif-groupe {
    border-color: var(--accent);     /* Bordure dorée pour groupe */
}

/* -- INTRODUCTION AUX TARIFS -- */
.tarif-intro {
    margin: 3rem 0;                  /* Grand espacement vertical */
}


/* ====================================================================
    SECTION 2 : STYLES DES CARTES DE TARIF
   ==================================================================== */

/* -- TITRE DE LA CARTE -- */
.card-title {
    font-size: 1.5rem;               /* Taille intermédiaire */
    color: var(--primary-dark);      /* Couleur foncée */
    margin-bottom: 1.5rem;           /* Espace après le titre */
    padding-bottom: 10px;            /* Espace pour la ligne */
    border-bottom: 1px dashed var(--border-light); /* Ligne de séparation */
}

/* -- ICÔNES DANS LES TITRES -- */
.card-title i {
    color: var(--accent);            /* Couleur dorée pour les icônes */
    margin-right: 8px;               /* Petit espace après l'icône */
}

/* -- CONTENEUR DES DÉTAILS DE PRIX -- */
.price-detail {
    margin-bottom: 1rem;             /* Espace après le prix */
}

/* -- PRIX POUR SÉANCES INDIVIDUELLES -- */
.price {
    font-size: 3rem;                 /* Très grande taille pour impact */
    font-weight: 700;                /* Gras pour mise en valeur */
    color: var(--primary);           /* Vert sauge */
    display: block;                  /* Sur sa propre ligne */
    line-height: 1;                  /* Hauteur de ligne réduite */
}

/* -- PRIX POUR GROUPES (SUR DEVIS) -- */
.price-group {
    font-size: 2rem;                 /* Taille légèrement réduite */
    font-weight: 700;                /* Toujours en gras */
    color: var(--accent);            /* Couleur dorée/sable */
    display: block;                  /* Sur sa propre ligne */
    line-height: 1;                  /* Hauteur de ligne réduite */
    margin-top: 0.5rem;              /* Petit espace au-dessus */
}

/* -- DURÉE DE LA SÉANCE -- */
.duration {
    font-size: 1rem;                 /* Taille normale */
    color: var(--text-light);        /* Couleur secondaire */
    display: block;                  /* Sur sa propre ligne */
    margin-top: 5px;                 /* Petit espace depuis le prix */
}

/* -- TYPE DE SÉANCE -- */
.sessions-type {
    font-style: italic;              /* Italique pour distinction */
    color: var(--text-dark);         /* Couleur principale */
    margin-bottom: 0.5rem;           /* Petit espace après */
}

/* -- NOTE D'INFORMATION -- */
.note-type {
    font-size: 0.9rem;               /* Texte légèrement plus petit */
    color: var(--text-light);        /* Couleur secondaire */
}



/* ====================================================================
    SECTION 3 : INFORMATIONS PRATIQUES (2 COLONNES)
   ==================================================================== */

/* -- GRILLE À 2 COLONNES -- */
.grid-2-col-pratique {
    display: grid;                    /* CSS Grid pour layout */
    grid-template-columns: 1fr 1fr;   /* Deux colonnes égales */
    gap: 3rem;                       /* Espacement important */
    align-items: start;              /* Alignement en haut */
    margin-top: 3rem;                /* Espace depuis la section précédente */
}

/* -- BLOC D'INFORMATION GÉNÉRIQUE -- */
.info-block {
    background-color: var(--white);   /* Fond blanc */
    padding: 2.5rem;                 /* Espacement interne généreux */
    border-radius: 10px;             /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombre légère */
}

/* -- TITRE DE COLONNE (PETIT) -- */
.section-title-small {
    font-size: 1.8rem;               /* Taille réduite par rapport aux titres principaux */
    color: var(--primary-dark);      /* Couleur foncée */
    margin-bottom: 2rem;             /* Espace après le titre */
    padding-bottom: 0.5rem;          /* Espace pour la ligne */
    border-bottom: 2px solid var(--accent); /* Ligne colorée de séparation */
}

/* -- SOUS-TITRE PRATIQUE -- */
.pratique-sub-title {
    font-size: 1.3rem;               /* Taille intermédiaire */
    color: var(--accent);            /* Couleur dorée/sable */
    margin-top: 1.5rem;              /* Espace avant le sous-titre */
    margin-bottom: 0.8rem;           /* Espace après */
}



/* ====================================================================
    SECTION 4 : STYLES SPÉCIFIQUES POUR LES NOTES ET AVERTISSEMENTS
   ==================================================================== */

/* -- NOTE IMPORTANTE (CB NON ACCEPTÉES) -- */
.note-important {
    font-weight: 600;                /* Demi-gras pour importance */
    color: var(--primary-dark);      /* Couleur foncée */
    margin-top: 1rem;                /* Espace au-dessus */
    padding: 0.5rem 1rem;            /* Padding intérieur */
    background-color: #fcebeb;       /* Fond rouge très clair (alerte douce) */
    border-radius: 4px;              /* Coins légèrement arrondis */
    border: 1px dashed #e74c3c;      /* Bordure rouge en pointillés */
    margin: 2rem 0;                  /* Marges verticales généreuses */
}

/* -- RAPPEL MUTUELLE -- */
.mutuelle-reminder {
    background-color: #e8f5e9;       /* Fond vert très clair (positif) */
    border-left: 5px solid var(--primary); /* Bordure gauche épaisse */
    padding: 1.5rem 2rem;            /* Padding généreux */
    margin-top: 2rem;                /* Grand espace au-dessus */
    border-radius: 4px;              /* Coins légèrement arrondis */
    display: flex;                   /* Flex pour aligner icône et texte */
    align-items: center;             /* Centrage vertical */
}

/* -- ICÔNE DANS LE RAPPEL MUTUELLE -- */
.mutuelle-reminder i {
    font-size: 2.2rem;               /* Grande icône */
    color: var(--primary);           /* Couleur verte */
    margin-right: 20px;              /* Espacement depuis le texte */
    flex-shrink: 0;                  /* Empêche le rétrécissement de l'icône */
}

/* -- BOÎTE D'ANNULATION -- */
.cancellation-box {
    background-color: var(--bg-light); /* Fond léger du site */
    padding: 2rem;                   /* Padding généreux */
    border: 1px solid var(--border-light); /* Bordure subtile */
    border-radius: 8px;              /* Coins arrondis */
    margin-top: 1.5rem;              /* Espace au-dessus */
}

/* -- AVERTISSEMENT D'ANNULATION -- */
.cancellation-warning {
    font-weight: 700;                /* Gras pour insistance */
    color: var(--primary-dark);      /* Couleur foncée */
    margin-top: 1.5rem;              /* Espace avant l'avertissement */
    padding-top: 1.5rem;             /* Espace au-dessus du texte */
    border-top: 1px dashed var(--border-light); /* Ligne de séparation */
}

/* -- ICÔNE D'AVERTISSEMENT -- */
.cancellation-warning i {
    color: var(--accent);            /* Couleur dorée/sable */
    margin-right: 8px;               /* Petit espace après l'icône */
}



/* ====================================================================
    SECTION 5 : BOUTON ACCENT
 ==================================================================== */

/* -- BOUTON SPÉCIAL POUR CETTE PAGE -- */
.btn-accent {
    border: 1px solid var(--accent); /* Bordure dorée */
    margin-top: 3rem;                /* Espace au-dessus */
}

/* -- EFFET DE SURVOL DU BOUTON -- */
.btn-accent:hover {
    background-color: var(--primary); /* Devient vert au survol */
    color: var(--white);             /* Texte blanc */
    border-color: var(--primary);    /* Bordure devient verte */
}



/* ====================================================================
    SECTION 6 : RESPONSIVE DESIGN
   ==================================================================== */

/* -- BREAKPOINT TABLETTE/MOBILE (≤ 992px) -- */
@media (max-width: 992px) {
    /* Adaptation de la grille des tarifs */
    .tarifs-grid {
        flex-direction: column;      /* Passe en colonne verticale */
        align-items: center;         /* Centrage des cartes */
    }
    
    /* Adaptation des cartes de tarif */
    .tarif-card {
        max-width: 100%;             /* Prend toute la largeur disponible */
    }
    
    /* Adaptation de la grille à 2 colonnes */
    .grid-2-col-pratique {
        grid-template-columns: 1fr;   /* Passe à une seule colonne */
    }
}