/* ==========================================================================
   FICHIER CSS COMPLET - LE MAS DES SAGNES 2026
   ========================================================================== */
/* Si vous n'avez pas encore FontAwesome pour les icônes */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
/* --- 1. CONFIGURATION GÉNÉRALE --- */
body {font-family: 'Montserrat', sans-serif;line-height: 1.7;overflow-x: hidden; background-color: #fff2db; /* Votre couleur personnalisée */color: #1d202c; /* Votre couleur de texte */ margin: 0;}
a.mobile {color: #1d202c;text-decoration: none;}
a.mobile-footer{color: #f9f4ee;text-decoration: none;}
a.nav-link {color: #1d202c;}
/* Tous les titres en Playfair Display */
h1, h2, h3, h4, .font-serif, .welcome-title, .overlap-title {font-family: 'Playfair Display', serif !important;} /* Ajoute le trait vertical devant les H2 et H3 */
h2:not(.welcome-title-h1), h3 {position: relative; padding-left: 20px; /* Espace pour le trait */ display: inline-block; /* Pour que le trait s'arrête à la hauteur du texte */ text-align: left !important; /* L'alignement doit être à gauche pour le trait */	font-size:1.4rem;}
h2:not(.welcome-title-h1)::before, h3::before {content: ""; position: absolute;left: 0;top: 10%; /* Ajuste pour centrer verticalement */height: 80%; /* Hauteur du trait par rapport au texte */width: 4px; /* Épaisseur du trait */ background-color: brown; /* Remplacez par votre rouge exact si différent */border-radius: 2px;}
/* On s'assure que le H1 n'est pas touché si vous avez utilisé welcome-title */
h1.welcome-title::before {display: none !important;}
h2.welcome-title.text-center {font-size: 1.4rem; margin-bottom: 1rem;}
h2.section-title.mb-4 {font-size: 1.4rem;margin-bottom: 1rem!important;}
.subtitle-events {color: #8d6e63; font-style: italic; font-weight: 400;}
p.welcome-text,.text-muted {text-align: justify;font-size:1rem;color:#1d202c !important;margin-top:0px!important; margin-bottom: 0.5rem!important;}
p.small.text-uppercase.letter-spacing-2 {text-align: center;font-size:1.05em;color:#1d202c;}
p{margin-bottom:0.8rem!important;}ul.txtacc {margin-bottom: 0.5rem;}
p.small.text-muted.text-day {text-align: left;font-size: 0.95rem;}

/* Style pou les cartes Agenda */
.card-mds {transition: transform 0.3s ease;border-radius: 15px !important;}
.card-mds:hover {transform: translateY(-5px); /* Petit effet de survol sympa */}
.title-day {color: #2c3e50;letter-spacing: 1px; margin-bottom: 20px !important; border-bottom: 1px solid #eee; padding-bottom: 15px;}
.text-day {text-align: left; /* Plus pro pour une liste */ line-height: 1.8 !important; /* Donne de l'air au texte */font-size: 0.9rem !important;}
/* On remplace la puce par un style plus élégant */
.text-day strong {color: #333;display: inline-block;}
/* Mise en valeur du "Le +" et "Sérénité" */
.text-day strong:last-of-type {display: block; margin-top: 10px; padding: 5px 10px;
    background: #fdf7f2; /* Une couleur très douce */ border-radius: 5px; color: #8b4513;}
/* --- STYLE AGENDA MDS --- */

/* Conteneur global du texte dans la carte */
.agenda-content { margin-top: 20px;}
/* Transforme les titres (strong) en bandeaux colorés */
.agenda-content strong { /*display: block;  Force le titre sur sa propre ligne */ background-color: #fdf7f2; /* Beige clair par défaut */
    color: #8b4513;padding: 5px 10px; border-radius: 5px; font-size: 0.85em; text-transform: uppercase;letter-spacing: 0.5px;  margin-bottom: 5px;}
/* Style du texte explicatif sous le titre */
.agenda-content p {font-size: 0.95em; color: #555;margin-bottom: 15px; /* Espace avant le prochain bandeau */}
/* Style spécial pour les encadrés du bas (Le + / Sérénité) */
.agenda-footer {margin-top: 20px; padding: 10px;border-radius: 8px;}
/* Couleurs spécifiques pour les bas de cartes */
.footer-green,.footer-pink,.footer-orange  { background-color: #fdf2f5; color: #1e1d2b; }
/* On enlève le fond beige des titres dans le footer pour qu'ils soient transparents */
.agenda-footer strong {background: none;color: inherit;font-size: 1em;padding: 0;}
.agenda-footer p { margin-bottom: 0; color: inherit; }

	
a.lientxt {color: brown;text-decoration: none;font-weight: 800;}
img.main-logo {width: 60%;}
li.libull {text-align: justify;line-height: 1.6rem;margin-bottom:0.5rem;}
/* --- FORCE LA COULEUR DE LA NAVBAR --- *//* --- NAVBAR COULEUR + OMBRE PRONONCÉE --- */
.navbar {background-color: #fff2db !important;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; border-bottom: 1px solid rgba(109, 76, 65, 0.1); /* Optionnel: légère bordure pour la définition */}
/* Si vous utilisez une classe Bootstrap spécifique comme bg-light */
.navbar.bg-light, .bg-light {background-color: #fff2db !important;}
/*TOP BAR*/
.top-bar {background-color: #fff2db; /* Votre crème */border-bottom: 1px solid rgba(109, 76, 65, 0.1);}
.top-bar-text {color: #1d202c; /* Votre marron */ font-size: 0.75rem; /* Petit et élégant */font-weight: 600;letter-spacing: 1.5px;text-transform: uppercase;}
/* Style de base pour le bouton flottant */
.floating-cta {position: fixed;bottom: 30px;right: 30px;background-color: #821517; /* Couleur en accord avec votre charte */color: #ffffff !important;padding: 15px 25px; border-radius: 50px;text-decoration: none;font-weight: bold;display: flex;align-items: center;gap: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 9999;transition: all 0.3s ease;}
.floating-cta:hover {background-color: #a0522d;transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0,0,0,0.4);}
strong {font-weight: 600;}
/* Adaptation pour Mobile */
@media (max-width: 768px) {
    .floating-cta {bottom: 20px;right: 20px;padding: 12px 20px;font-size: 0.9rem;}
        /* Optionnel : masquer le texte sur petit mobile pour ne garder que l'icône */
    @media (max-width: 480px) {.floating-cta span {display: none; }
        .floating-cta {padding: 15px;border-radius: 50%;}
        .floating-cta i {margin: 0;font-size: 1.2rem;}
    }}
/* Style pour l'encadré RGPD */
.rgpd-container {
    border: 1px solid #e0e0e0; /* Contour gris clair */
    padding: 15px 15px 15px 35px; /* Espace intérieur (plus à gauche pour la case) */
    border-radius: 8px; /* Angles arrondis */
    background-color: #fcfcfc; /* Très léger fond gris pour détacher du blanc */
    transition: all 0.3s ease;
}

/* Changement de couleur si la case est cochée (optionnel mais pro) */
.rgpd-container:has(#rgpdCheck:checked) {border-color: #821517; /* Couleur brune du domaine */background-color: #fdfaf7;}
/* Accentuation de la case à cocher elle-même */
#rgpdCheck {cursor: pointer; border: 1px solid #821517;}
#rgpdCheck:checked {background-color: #821517; border-color: #821517;}
/* Sur mobile, on réduit un peu la taille si besoin */
@media (max-width: 768px) {.top-bar-text {font-size: 0.65rem;letter-spacing: 0.5px;}}
/* --- STYLE DU BOUTON RÉSERVER DANS LE MENU --- */ 
.navbar-nav .btn-booking {border: 1px solid brown !important; color: brown !important;border-radius: 5px;padding: 8px 20px !important;font-weight: 600;}
.navbar-nav .nav-item:last-child .nav-link:hover {transform: scale(1.05); }/* --- 2. HEADER PERSONNALISÉ --- */
.header-section {position: relative;height: 100vh; min-height: 600px;background-repeat: no-repeat; background-position: center center;
    background-size: cover;display: flex;align-items: center; justify-content: center;text-align: center;}
/*.container.txt-header {min-width: 1600px;}*/
.header-content h1 {font-size: 3.5rem;color: #ffffff;text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); margin-bottom: 20px;}
.header-content p {font-size: 2.5rem; /*1.5rem;*/color: #ffffff;text-shadow: 2px 2px 5px rgb(0 0 0 / 75%); margin-bottom: 40px;font-weight:400;}
.btn-header {border-radius: 0 !important;padding: 15px 35px !important;font-size: 0.8rem !important;letter-spacing: 2px !important;
    font-weight: 600 !important;text-transform: uppercase;transition: all 0.4s ease;min-width: 220px;}
.btn-light.btn-header {background-color: #ffffff !important;color: #1d202c !important;border: 1px solid #ffffff !important;}
.btn-outline-light.btn-header {background-color: transparent !important;color: #ffffff !important; border: 1px solid #ffffff !important;}
/* --- RÉDUCTION DES ESPACES (DIVISÉS PAR 2) --- */
/* Réduit les marges et paddings verticaux de niveau 5 */
.my-5 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.py-5 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}
/* Réduit les marges et paddings verticaux de niveau 4 (si utilisés) */
.mt-5, .pt-5 { margin-top: 1.5rem !important;padding-top: 1.5rem !important;}
.pb-5 {padding-bottom: 1.5rem !important;}
/* Correction spécifique pour la section bienvenue qui a un ID */
#mas-welcome-overlap {padding-top: 1rem !important;padding-bottom: 1.5rem !important;}
/* --- 3. SECTION BIENVENUE : CHEVAUCHEMENT STATIQUE --- */
#mas-welcome-overlap .overlap-wrapper-left {position: relative; width: 100%;min-height: 480px;display: flex;align-items: center;}
#mas-welcome-overlap .img-main-base {width: 85% !important; height: 480px !important; object-fit: cover !important;
    margin-left: auto !important; /* CHANGÉ : pousse la grande image à DROITE */ margin-right: 0 !important;display: block !important;box-shadow: 0 10px 30px rgba(0,0,0,0.15);}
#mas-welcome-overlap .img-overlay-side {position: absolute !important;
    width: 55% !important;        /* CHANGÉ : Image plus petite (était 55%) */
    height: 280px !important;      /* CHANGÉ : Hauteur réduite pour rester proportionnel */
    object-fit: cover !important;
    left: 0 !important;           /* CHANGÉ : Place l'image à GAUCHE */
    right: auto !important;        /* CHANGÉ : Annule le placement à droite */
    top: 95% !important; transform: translateY(-50%) !important; border: 8px solid #fff2db !important;box-shadow: 0 15px 45px rgb(0 0 0 / 25%);
    z-index: 2 !important;}
#mas-welcome-overlap .welcome-title {font-size: 1.4rem !important;line-height:2rem;margin-bottom: 1rem; color: #1d202c;} 
.btn-welcome {background-color: transparent !important; color: #1d202c !important; border: 1px solid #1d202c !important;
    border-radius: 0 !important;padding: 12px 35px !important;letter-spacing: 2px !important;font-family: 'Montserrat', sans-serif;
    font-weight: 600;transition: 0.3s;}
.btn-welcome:hover {background-color: #1d202c !important;color: #fff2db !important;}
#mas-welcome-overlap .btn-welcome { background-color: transparent !important;color: #1d202c !important;border: 1px solid #1d202c !important;
    border-radius: 0 !important;padding: 12px 35px !important;letter-spacing: 2px !important;font-family: 'Montserrat', sans-serif;
    font-weight: 600;transition: 0.3s;}
#mas-welcome-overlap .btn-welcome:hover {background-color: #1d202c !important;color: #fff2db !important;}
/*-----COMPTEUR --------*/
/* Encadré global avec élégance */
.counter-section-wrapper {background-color: #f2ddb8 !important; /* Couleur argile forcée */
    border: 1px solid rgba(109, 76, 65, 0.15) !important; padding: 30px 10px;border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    margin-top: 3rem; /* Marge par défaut sur ordinateur */}
/* Texte du dessus et du dessous */
.counter-label-top, .counter-label-bottom {color: #1d202c !important;text-transform: uppercase;letter-spacing: 1px;font-size: 0.8rem;
    font-weight: 500;margin: 5px 0;}
/* Chiffres en Brown (#6d4c41) */
.counter-number {color: brown !important; /* Utilisation de votre code précis */font-family: 'Montserrat', sans-serif !important;font-size:3rem;}
/* Unités (m2) */
.counter-unit {color: brown !important;font-family: 'Playfair Display', serif; font-size: 1.5rem;font-weight: bold;}
/* Texte spécifique pour les chambres (plus petit) */
.small-text {font-size: 0.65rem;opacity: 0.8;display: block;margin-top: 2px;}
/* --- Bloc de Services SEO sans aucun trait devant les titres --- */
.service-pillar { /* Séparateur fin à gauche uniquement entre les blocs */border-left: 1px solid #e0e0e0;  padding-left: 25px; height: 100%;}
/* On retire la bordure à gauche pour le tout premier bloc */
.services-seo-columns .col-md-4:first-child .service-pillar {border-left: none;padding-left: 0;}
/* Suppression de toute décoration avant le titre h3 */
.service-pillar h3 {font-size: 1.1rem;text-transform: uppercase;font-weight: 700;color: brown; /* Couleur Malaga */ margin-bottom: 12px;padding-left:0 ! important;}
/* Annulation forcée si votre CSS global ajoute un trait via ::before */
.service-pillar h3::before {display: none !important;content: none !important;}
.service-pillar p {font-size: 0.9rem;text-align:justify; line-height: 1.6;}
/* Adaptation mobile */
@media (max-width: 767px) {
    .service-pillar {border-left: none;border-bottom: 1px solid #e0e0e0;padding-left: 0;padding-bottom: 20px;}
    .services-seo-columns .col-md-4:last-child .service-pillar {border-bottom: none;}
}
/* --- AJUSTEMENTS MOBILE --- */
@media (max-width: 767px) {
    .counter-section-wrapper {margin-top: 0.5rem !important; /* Marge divisée par deux sur mobile */ margin-bottom: 0.5rem !important;padding: 20px 5px;}
        /* Séparation légère entre les compteurs quand ils s'empilent */
    .counter-border {border-bottom: 1px solid rgba(109, 76, 65, 0.1);padding-bottom: 15px;margin-bottom: 15px;}
    .counter-border:last-child {border-bottom: none;margin-bottom: 0;}
}
/* Séparateurs Desktop */
@media (min-width: 768px) {.counter-border:not(:last-child) {border-right: 1px solid rgba(109, 76, 65, 0.1);}}
/* Séparateurs verticaux entre les colonnes (desktop uniquement) */
@media (min-width: 768px) {.counter-border:not(:last-child) {border-right: 1px solid rgba(109, 76, 65, 0.1);}}
/* --- 4. GALERIE : IMAGES CARRÉES --- */
.img-square-gallery {width: 100% !important;aspect-ratio: 1 / 1 !important;object-fit: cover !important;margin-bottom: 20px;}
.btn-domaine-dark {background-color: #ffffff !important;color: #1d202c !important;border: 1px solid #1d202c !important;border-radius: 0 !important;padding: 12px 20px !important;font-size: 0.75rem !important;letter-spacing: 2px !important;min-width: 230px;transition: 0.3s;}
.btn-domaine-dark:hover {background-color: #1d202c !important;color: #ffffff !important;}
/* Style pour les liens du footer sombre */
footer a {transition: opacity 0.3s ease;}
footer a:hover {opacity: 0.7;color: #fff !important;}
/* Espacement des lettres pour le slogan */
.letter-spacing-2 {letter-spacing: 2px;}
/* Couleur de mise en avant pour le footer sombre */
.footer-highlight {color: #fff2db !important;font-weight: 600;font-size:0.85em !important;}
.border-highlight {border-color: #fff2db !important;}
.footer-link {color: #ffffff;text-decoration: none;transition: color 0.3s;}
.footer-link:hover {color: #fff2db !important;}
.letter-spacing-2 {letter-spacing: 2px;}
.italic {font-style: italic;}
/* --- 5. RESPONSIVE --- */
@media (max-width: 991px) {
.container.txt-header{min-width:350px;}	
.header-section { height: 75vh; }
.header-content h1 { font-size: 1.5rem;text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); margin-bottom: 20px; }
.header-content p {font-size: 1rem;text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);margin-bottom: 40px; font-weight:400;line-height: 1.4rem;}
h2.welcome-title.text-center {font-size: 1.3rem !important;}
h2.section-title.mb-4 {font-size: 1.3rem;margin-bottom: 0.5rem !important;}
#mas-welcome-overlap .welcome-title {font-size: 1.3rem !important;line-height: 1.8rem;}
#mas-welcome-overlap .img-overlay-side {display: none !important; /* Disparaît sur mobile */} 
#mas-welcome-overlap .img-main-base {width: 100% !important;height: 350px !important;}
.img-square-gallery {aspect-ratio: 16 / 9 !important; /* Moins haut sur mobile pour la lisibilité */}
/* 1. Enlever l'encadré, le fond et les bordures du bouton réserver */
.nav-item .btn-outline-dark,.nav-item .btn-malaga,.nav-link.btn {border: none !important;background: none !important;box-shadow: none !important;color: #1d202c !important; /* Couleur du texte standard */text-align: left; /* Aligné avec les autres liens */}
    /* 2. Supprimer les marges et paddings à gauche sur les éléments de liste */
    .navbar-nav {padding-left: 0 !important;margin-left: 0 !important;}
    .nav-item {padding-left: 0 !important;margin-left: 0 !important;}
    /* 3. Ajuster le lien lui-même pour qu'il soit bien aligné au bord */
    .nav-link {padding-left: 0 !important;margin-left: 0 !important;}.navbar-nav .btn-booking {border: none !important;  /* Cadre marron */color: brown !important; /* Texte marron */padding: 8px 0px !important;margin-left: 0px !important; font-weight: 600 !important; 
}}
/* ========================================SECTION ACCÈS & COMMODITÉS ======================================== */
.acces-section { background-color: #FAF8F3; /* Beige clair cohérent avec la maquette */  padding: 1rem 0;font-family: 'Montserrat', sans-serif;}
.acces-container {max-width: 1200px;margin: 0 auto;padding: 0 2rem;}
/* En-tête de section */
.acces-header {text-align: center; margin-bottom: 1rem;}
.acces-header h2 {font-family: 'Playfair Display', serif; /* Police titre maquette 2026 */  font-size: 1.4rem;font-weight: 400;color: #2C2C2C;margin-bottom: 1rem;letter-spacing: 0.5px;}
.acces-subtitle {font-size: 0.95rem;color: #666;line-height: 1.7;max-width: 800px; margin: 0 auto;}
/* Grille principale : Carte + Infos */
.acces-grid {display: grid;grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 2rem;}
/* Colonne carte */
.acces-map {display: flex;flex-direction: column;gap: 1.5rem;}
.map-wrapper {position: relative;width: 100%;height: 450px;border-radius: 8px;overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.map-wrapper iframe {display: block;}
.acces-address {background: white; padding: 1.5rem; border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.address-line {font-size: 1rem;line-height: 1.7;color: #2C2C2C;margin-bottom: 0.75rem;}
.gps-coords {font-size: 0.9rem; color: #888;font-family: 'Courier New', monospace;margin-bottom: 1.25rem;}
.btn-itineraire {display: inline-block;padding: 0.875rem 2rem; background-color: #821517; /* Marron cohérent avec maquette */  color: white;text-decoration: none;border-radius: 4px;font-weight: 500;font-size: 0.95rem; transition: background-color 0.3s ease, transform 0.2s ease;}
.btn-itineraire:hover {background-color: #6D3410;transform: translateY(-2px);}
/****Section acces accordeon*****//* 1. Structure du conteneur d'infos */
.acces-info {display: flex;flex-direction: column;gap: 1rem; /* Espace entre les accordéons */}
/* 2. Style des blocs (reprend votre ombre et arrondi) */
.acces-info .accordion-item {border: none;background: white;border-radius: 8px !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);margin-bottom: 1rem;overflow: hidden;transition: box-shadow 0.3s ease;}
.acces-info .accordion-item:hover {box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
/* 3. Style du bouton (Titre de l'accordéon) */
.acces-info .accordion-button {display: flex;justify-content: space-between;align-items: center;  padding: 1.25rem 1.5rem;background-color: transparent;border: none;box-shadow: none !important; /* Votre typographie */  font-family: 'Playfair Display', serif;font-size: 1.375rem;font-weight: 500;color: #2C2C2C;}
/* Style quand l'accordéon est ouvert */
.acces-info .accordion-button:not(.collapsed) {color: #821517; /* Votre marron */ background-color: #FAF8F3; /* Votre fond clair */}
/* 4. Remplacement du chevron par le tiret (Screenshot 2) */
.acces-info .accordion-button::after {content: "+"; /* Symbole fermé */ background-image: none; /* Supprime la flèche Bootstrap */ font-family: Arial, sans-serif; font-size: 1.8rem; font-weight: 300;color: #2C2C2C;transform: none !important; /* Empêche la rotation du chevron */  display: flex;align-items: center;justify-content: center;width: 20px;}
/* Changement du symbole quand c'est ouvert */
.acces-info .accordion-button:not(.collapsed)::after { content: "−"; /* Tiret (minus) */color: #821517;}
/* 5. Contenu intérieur (Listes et Notes) */
.acces-info .accordion-body {padding: 0 1.5rem 1.5rem 1.5rem;}
.acces-list {list-style: none;padding: 0;margin: 0;}
.acces-list li {display: flex;justify-content: space-between;padding: 0.6rem 0;border-bottom: 1px solid #F0F0F0;font-size: 0.95rem;color: #1d202c;}
.acces-list li:last-child {border-bottom: none;}
.acces-list li span {font-weight: 600;color: #821517;}
.acces-note {font-size: 0.875rem;color: #666;font-style: italic; margin-top: 1rem; padding: 0.75rem 1rem;background: #FAF8F3;border-radius: 4px;border-left: 3px solid #821517;}
/* Style du bouton (Titre de l'accordéon en Montserrat) */
.acces-info .accordion-button {display: flex;justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background-color: transparent; border: none; box-shadow: none !important;  /* Utilisation du Montserrat pour un look moderne et pro */ font-family: 'Montserrat', sans-serif; font-size: 0.85rem; /* Taille réduite pour l'aspect "label" */
  font-weight: 600;letter-spacing: 1.2px; /* Espacement chic pour les majuscules */ color: #2C2C2C;text-transform: uppercase;}
/* État ouvert : passage au marron */
.acces-info .accordion-button:not(.collapsed) {color: #821517;background-color: #FAF8F3;}
/* Remplacement du chevron par le symbole + / - */
.acces-info .accordion-button::after {content: "+"; background-image: none; /* On supprime la flèche par défaut */  font-family: 'Montserrat', sans-serif;font-size: 1.4rem;
  font-weight: 300;color: #2C2C2C; transform: none !important; /* On bloque la rotation */  display: flex;align-items: center;justify-content: center;width: 20px;}
/* Changement en tiret quand c'est ouvert */
.acces-info .accordion-button:not(.collapsed)::after {
  content: "−"; /* Tiret long */ color: #821517;}
/* Contenu intérieur (Listes et Temps de trajet) */
.acces-info .accordion-body {padding: 0 1.5rem 1.5rem 1.5rem;}
/* Section commodités */
.commodites-section {margin-top: 2rem;padding-top: 0rem;border-top: 1px solid #E8E4DC;}
.commodites-section h3 {font-family: 'Playfair Display', serif; font-size: 1.75rem;font-weight: 500;color: #2C2C2C;margin-bottom: 2rem; text-align: center;}
.commodites-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;}
.commodite-card {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.commodite-card:hover {transform: translateY(-4px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);}
.commodite-card h4 {font-size: 1.25rem;font-weight: 600;color: #2C2C2C; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;}
.commodite-card .distance {font-size: 0.875rem;font-weight: 400;color: #888;}
.commodite-card p {font-size: 0.95rem;line-height: 1.7;color: #555;margin-bottom: 1rem;}
.commodite-highlight {font-weight: 600;color: #821517 !important;margin-bottom: 0 !important;}
.cta-wrapper {display: flex;justify-content: center;gap: 15px;margin-top: 2rem;}
/* Style des boutons pour s'adapter à la largeur */
.cta-wrapper .btn-welcome {flex: 1; /* Les boutons prennent la même largeur */max-width: 49%; /* Limite la taille sur grand écran */}
/* ===========RESPONSIVE=================== */
/* Tablettes */
@media (max-width: 1024px) {
  .acces-grid {gap: 2rem;}
  .commodites-grid {grid-template-columns: repeat(2, 1fr);}
}
/* Tablettes portrait et mobiles larges */
@media (max-width: 768px) {
  .acces-section {padding: 3rem 0;}
  .acces-container {padding: 0 1.5rem;}
  .acces-header {margin-bottom: 2.5rem;}
  .acces-grid {grid-template-columns: 1fr;gap: 2rem;}
  .map-wrapper {height: 350px;}
  .acces-bloc {flex-direction: column;gap: 1rem; padding: 1.5rem; }
  .acces-icon {font-size: 2.5rem;}
  .commodites-grid {grid-template-columns: 1fr;gap: 1.5rem;}
  .commodites-section {margin-top: 3rem;}
  .tarifs-cards {display: flex;flex-direction: column; /* Force l'empilement vertical */gap: 20px;padding: 0 15px;}
.tarif-card {width: 100% !important; /* La carte prend toute la largeur */margin: 0 auto;}
.formules-grid {display: flex; flex-direction: column; /* Force l'empilement vertical */gap: 1.5rem;padding: 0 10px;}
.formule-card {width: 100% !important;max-width: none !important;}
.cta-wrapper {flex-direction: column; /* Empile les boutons */align-items: center;}
.cta-wrapper .btn-welcome {width: 100% !important; /* Prend toute la largeur du téléphone */max-width: none;margin-right: 0 !important; /* Supprime la marge de 1rem vue sur votre capture */}
}
/* Mobiles */
@media (max-width: 480px) {
  .acces-section {padding: 2rem 0;}
  .acces-container {padding: 0 1rem;}
  .acces-header h2 {font-size: 1.75rem;}
  .acces-subtitle {font-size: 1rem;}
  .map-wrapper {height: 300px;}
  .acces-address {padding: 1.25rem;}
  .btn-itineraire {width: 100%;text-align: center;padding: 1rem;}
  .acces-bloc {padding: 1.25rem;}
  .acces-content h3 {font-size: 1.25rem;}
  .acces-list li {flex-direction: column;gap: 0.25rem;}
  .acces-list li span {text-align: left;}
  .commodite-card {padding: 1.5rem;}
}
/****PAGE MARIAGE*****//* --- VARIABLES DE CHARTE --- */
:root {--ms-bordeaux: #8B2323;--ms-cream: #F9F4EE;--ms-dark: #2c2c2c;}
/* --- HEADER SECTION (Modèle Accueil) --- */
.header-mariage {height: 60vh;min-height: 400px;background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center;}
.header-mariage h1 { font-family: 'Playfair Display', serif; }
.letter-spacing-2 { letter-spacing: 2px; }
/* --- ÉLÉMENTS DE MISE EN PAGE --- */
.title-bordeaux {color: var(--ms-bordeaux);font-family: 'Playfair Display', serif;font-weight: 700;}
.bg-cream { background-color: var(--ms-cream); }
.border-cream { border: 8px solid var(--ms-cream); }
/* CHIFFRES CLÉS (Metrics) */
.key-metrics-row {display: flex;justify-content: space-between;gap: 15px;border-top: 1px solid #eee;padding-top: 25px;}
.metric-card { text-align: center; flex: 1; }
.metric-card strong {display: block;font-size: 2.2rem;color: var(--ms-bordeaux);line-height: 1;}
.metric-card span {font-size: 0.7rem;text-transform: uppercase;color: #777;font-weight: bold;}
/* CARREAUX SERVICES */
.feature-box {background: #fff;padding: 35px 20px;height: 100%;/*border-bottom: 3px solid var(--ms-bordeaux);*/ box-shadow: 0 4px 12px rgba(0,0,0,0.03);}
/* BOUTON D'ACTION PRINCIPAL */
.btn-ms-red {display: inline-block;background-color: var(--ms-bordeaux); color: #fff; padding: 18px 45px;text-decoration: none;font-weight: bold;letter-spacing: 1px;transition: all 0.3s ease;}
.btn-ms-red:hover {background-color: #6d1b1b;color: #fff;box-shadow: 0 8px 20px rgba(139, 35, 35, 0.2);transform: translateY(-2px);}

.mariage-price-sidebar {background-color: #fdfcf9; padding: 25px; border-radius: 5px; border: 1px solid #8B4513;}
.price-item {margin-bottom: 20px; display: block;}
.price-formule-title {color: #8B4513; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; font-weight: 600; display: block; margin-bottom: 4px;}
.price-formule-value {font-size: 1.1rem; color: #4a4a4a; display: block;}
.price-formule-value strong {font-weight: 700;}
.price-inclusion {border-top: 1px solid #c8935a; margin-top: 15px; padding-top: 15px; font-size: 0.85rem; color: #888; font-style: italic; display: block;}
.price-hours {display: block; font-size: 0.85rem; font-style: italic; color: #888; margin-top: 4px; line-height: 1.2;}
.btn-mariage-main {background-color: #c8935a; color: #fff; border: 1px solid #c8935a; padding: 10px 20px; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-radius: 4px; transition: all 0.3s; display: inline-block; text-decoration: none;}
.btn-mariage-main:hover {background-color: #8B4513; color: #fff;}
.btn-mariage-outline {background-color: transparent; color: #c8935a; border: 1px solid #c8935a; padding: 10px 20px; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-radius: 4px; transition: all 0.3s; display: inline-block; text-decoration: none; margin-left: 10px;}
.btn-mariage-outline:hover {background-color: #fdfcf9; color: #8B4513; border-color: #b07d4a;}

.famille-price-container { background: #fff; border: 1px solid brown; border-radius: 5px; overflow: hidden; margin-top: 30px; width: 100%; }
.famille-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.famille-grid .famille-item { padding: 15px; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; min-height: 150px; position: relative; }
.famille-inclusion { border-top: 1px solid #e0d8c3; background: #fdfcf9; text-align: center; padding: 15px; font-size: 0.9rem; color: #8b7355; font-style: italic; width: 100%; }
.famille-title { display: block; font-weight: bold; color: #8B4513; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 10px; }
.famille-price { display: block; font-size: 1.4rem; margin-bottom: 10px; color: #333; }
.famille-price small { font-size: 0.8rem; color: #999; }
.famille-text-hours { font-size: 0.85rem; color: #777; font-style: italic; line-height: 1.3; }

/* LE CODE POUR LES TRAITS */
.border-mobile::after { content: ""; position: absolute; background-color: #e0d8c3; z-index: 10; }

@media (min-width: 992px) { 
    .border-mobile::after { right: 0; top: 20%; height: 60%; width: 1px; } 
}

@media (max-width: 991px) { 
    .famille-grid { grid-template-columns: 1fr; } 
    .border-mobile::after { bottom: 0; left: 20%; width: 60%; height: 1px; top: auto; right: auto; } 
}

@media (max-width: 575px) { .famille-grid { grid-template-columns: 1fr; } }
.card-mds.d-flex { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.btn-sm { padding: 8px 15px; font-size: 0.85rem; background-color: transparent !important; color: #1d202c !important; border: 1px solid #1d202c !important; border-radius: 0 !important; 
font-family: 'Montserrat', sans-serif; font-weight: 600;transition: 0.3s; }
.btn-sm:hover {background-color: #1d202c !important;color: #fff2db !important;}
/* RESPONSIVE */
@media (max-width: 991px) {.header-mariage h1 { font-size: 2rem; }
.key-metrics-row { flex-wrap: wrap; }.metric-card { min-width: 100px; }11}
/*****TIMELINE PAGE MARIAGE----------------*/
/* Style pour la Timeline */
.timeline-container .card {transition: transform 0.3s ease, box-shadow 0.3s ease;border-radius: 15px;}
.timeline-container .card:hover {transform: translateY(-10px);box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;}
.text-gold {color: #821517; /* Ou votre couleur dorée actuelle */}
.border-top-gold {border-top: 5px solid #821517 !important;}
.letter-spacing-1 {letter-spacing: 1px;}
.letter-spacing-2 {letter-spacing: 2px;}
.timeline-icon {background: #fdfaf7;width: 70px;height: 70px;line-height: 70px;border-radius: 50%;margin: 0 auto;display: flex;align-items: center;justify-content: center;}
/* Titre H3 Avis */
h3.playfair {font-family: 'Playfair Display', serif;color: #1d202c;font-size: 1.4rem !important; 
	/* Garde la taille par défaut du H3 de votre thème ou ajustez si besoin */}
/* Titre H4 Timeline - Taille forcée à 1.4rem comme l'accueil */
.title-timeline-h4 {font-size: 1.4rem !important;color: #1d202c;margin-bottom: 15px;}
/* --- Reste du style inchangé --- */
/* Désactivation stricte de tout effet de survol sur les encarts */
.card-mds, .card-avis, .card-timeline {transform: none !important; /* Empêche le soulèvement */transition: none !important; /* Supprime l'animation */pointer-events: auto; /* Garde le curseur normal mais sans interaction visuelle */}
.card-mds:hover, .card-avis:hover, .card-timeline:hover {
transform: none !important; /* Force l'absence de mouvement au survol */box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; /* Garde l'ombre identique au repos */background-color: #ffffff !important; /* Empêche tout changement de couleur de fond */
}
/* On s'assure que les icônes ne bougent pas non plus */
.timeline-icon {transition: none !important;}
.card-mds {border: none !important;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;background-color: #ffffff;}
.card-samedi {border-left: 1px solid #8B4513 !important;border-right: 1px solid #8B4513 !important;border-radius: 0;}
.timeline-icon {background-color: #fdfaf7;width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;
    border-radius: 50%;margin: 0 auto;color: #8B4513 !important;}
.intro-text {font-family: 'Montserrat', sans-serif;max-width: 800px;}
.stars-color {color: #8B4513 !important;}
/* Optimisation des titres de la Timeline Mariage */
.title-day {white-space: nowrap; /* Force le titre sur une seule ligne */
    overflow: hidden;/* Empêche tout débordement */text-overflow: ellipsis;/* Ajoute "..." si vraiment l'écran est minuscule */
    font-size: 1rem; /* Taille harmonisée pour les 3 blocs */letter-spacing: 0.5px; /* Améliore la lisibilité des majuscules */
}
/* Ajustement spécifique pour les petits mobiles */
@media (max-width: 576px) {.title-day {font-size: 0.9rem;   /* Réduit légèrement la taille sur smartphone */}}
/* =============SECTION BIENVENUE : EFFET PÊLE-MÊLE (PHOTO OVERLAP)============== */
/**page pergola*/
/* --- Conteneur de la composition photo --- */
.content-images {position: relative;display: flex;justify-content: center; /* Centre l'image portrait horizontalement */
    align-items: center;padding-bottom: 80px; /* Espace pour laisser l'image paysage déborder en bas */}
/* --- Image Portrait (Arrière-plan) --- */
.image-portrait {width: 80%; /* Un peu plus étroite pour laisser respirer les côtés */
    height: 600px;z-index: 1;overflow: hidden;box-shadow: 0px 10px 30px rgba(0,0,0,0.1);margin-top:4rem;}
.image-portrait img {width: 100%;height: 100%;object-fit: cover;display: block;}
/* --- Image Landscape (Petit format, centrée en bas) --- */
.image-landscape {position: absolute;bottom: 0;/* Pose l'image sur le bord bas du conteneur */left: 50%; /* Positionne le bord gauche au milieu */
transform: translateX(-50%); /* Décale de moitié vers la gauche pour un centrage parfait */
width: 50%; /* Plus petite comme demandé */z-index: 2;/* Devant l'image portrait */
border: 8px solid #ffffff; box-shadow: 0px 10px 25px rgba(0,0,0,0.2);}
.image-landscape img {width: 100%;display: block;}
/* --- Adaptation Mobile --- */
@media (max-width: 991px) {.image-portrait {width: 100%;height: 400px;}
.image-landscape {width: 75%; /* On l'agrandit un peu sur mobile pour la lisibilité */border-width: 5px;}}
/* 1. Conteneur global de la zone image */
#mas-welcome-overlap .pele-mele-container {position: relative !important; display: block !important;padding: 10px; margin-bottom: 40px; /* Espace de sécurité en bas */z-index: 1;}
/* 2. Style "Tirage Photo" (Cadre blanc épais + Ombre) */
#mas-welcome-overlap .photo-base, #mas-welcome-overlap .photo-overlap {border: 8px solid #ffffff !important; /* Cadre blanc de la maquette */background-color: #ffffff !important;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important; /* Donne du relief */border-radius: 2px !important;transition: transform 0.3s ease;}
/* 3. Image principale du haut (L'apéritif) */
#mas-welcome-overlap .photo-base {width: 88% !important; /* Légèrement plus petite pour l'équilibre */margin-left: auto !important;display: block !important;position: relative !important;z-index: 2 !important; /* En dessous des petites */}
/* 4. Conteneur de la superposition (Le secret du montage) */
#mas-welcome-overlap .overlap-bottom-row {display: flex !important;justify-content: space-between !important;align-items: flex-start !important;margin-top: -130px !important; /* REMONTE les photos sur la grande */ position: relative !important;z-index: 10 !important; /* PASSE AU-DESSUS de la photo-base */}
/* 5. Image de la salle (Celle de gauche) */
#mas-welcome-overlap .salle-pic {width: 54% !important;transform: rotate(-3deg) !important; /* Inclinaison Photoshop */position: relative !important;left: -15px !important; /* Sort un peu du cadre à gauche */}
/* 6. Image du couple (Celle de droite) */
#mas-welcome-overlap .couple-pic {width: 48% !important;transform: rotate(2deg) !important; /* Inclinaison Photoshop */ margin-top: 50px !important; /* Décalage vers le bas pour le style pêle-mêle */}
/* ==========ADAPTATION MOBILE (Responsive)==================== */
@media (max-width: 991px) {#mas-welcome-overlap .pele-mele-container {margin-top: 30px;margin-bottom: 0;}
#mas-welcome-overlap .overlap-bottom-row {display: block !important; /* On annule le Flexbox pour empiler */margin-top: 20px !important; /* On annule la superposition */}
#mas-welcome-overlap .photo-base, #mas-welcome-overlap .photo-overlap {width: 100% !important;margin-left: 0 !important;
transform: none !important; /* On remet les photos droites */margin-top: 15px !important;position: static !important;border-width: 5px !important; /* Bordure plus fine sur mobile */}
}
/* Ajustement de l'espacement entre le texte et les photos */
.welcome-section {padding-bottom: 0 !important;}
.counter-section {margin-top: -50px; /* Remonte légèrement le bloc de photos/compteurs */}
@media (max-width: 768px) {.counter-section {margin-top: 0;padding-top: 10px !important;}}
/* On remonte tout le bloc de droite (les images) */
.overlap-wrapper-left {margin-top: -80px !important; /* Augmentez à -100px si besoin */}
/* On s'assure que la colonne n'a pas de marge parasite */
#mas-welcome-overlap .col-lg-7 {margin-top: -50px !important;}
/* Sur mobile, on annule ou on réduit pour éviter que ça ne chevauche trop le texte */
@media (max-width: 991px) {.overlap-wrapper-left {margin-top: 15px !important;}
}/* Décale l'icône vers la droite et ajoute de l'espace avec le texte */
.accordion-button::after {margin-left: 20px !important; /* Espace minimum entre le texte et l'icône */background-position: right center; /* Force l'icône à rester à droite */}
/* Augmente le padding global du bouton pour éviter que le texte ne touche l'icône */
.accordion-button {padding-right: 2.5rem !important;display: flex;justify-content: space-between;align-items: center;}
/* Si vous voulez que l'icône soit vraiment collée tout à droite du bloc */
.accordion-button::after {flex-shrink: 0; /* Empêche l'icône de s'écraser si le texte est long */}
/* Style pour transformer les vignettes en portrait */
.portrait-pic {
    width: 45% !important;   /* Largeur ajustée pour tenir à deux */
    aspect-ratio: 3 / 4;      /* Ratio vertical (Portrait) */
    object-fit: cover;        /* Coupe l'image proprement au centre */
    border: 6px solid #fff;   /* Bordure blanche pour l'effet photo */
    border-radius: 4px;}
/* On conserve le positionnement de la ligne du bas */
.overlap-bottom-row {display: flex;justify-content: center;gap: 15px;margin-top: -100px; /* Ajustez selon le chevauchement souhaité */
    position: relative;z-index: 5;}
/* Effet pêle-mêle pour les vignettes portraits */
/* La première vignette (gauche) s'incline légèrement à gauche */
.portrait-pic:first-of-type {transform: rotate(-3deg);transition: transform 0.3s ease;}
/* La deuxième vignette (droite) s'incline légèrement à droite */
.portrait-pic:last-of-type {transform: rotate(3deg);transition: transform 0.3s ease;}
/* Effet au survol : l'image se remet droite et s'agrandit légèrement */
.portrait-pic:hover {transform: rotate(0deg) scale(1.05);z-index: 10;}
button.accordion-button.collapsed {font-family: 'Montserrat', sans-serif; color: #1d202c;}
/* ===== SECTION AVIS ===== */
/* La row Bootstrap devient un flex stretch */
.row-avis {display: flex;flex-wrap: wrap;align-items: stretch;}
/* Chaque col-md-4 prend toute la hauteur */
.row-avis .col-md-4 {display: flex;flex-direction: column;}
/* La carte prend toute la hauteur de sa colonne */
.row-avis .col-md-4 .card-mds {display: flex;flex-direction: column;height: 100%;text-align: left;/* supprime le text-center hérité */}
/* Le texte de l'avis pousse le nom vers le bas */
.row-avis .col-md-4 .testimonial-quote {flex-grow: 1;}
/* Le nom reste toujours en bas de carte */
.row-avis .col-md-4 .client-name {margin-top: auto;text-align: center;}
.row-avis .col-md-4 .stars-color {text-align: center;}
/* --- STYLE INSPIRATION COMPLET --- */
:root {--stone: #f5f0e8; --cream: #faf7f2; --ocre: #c8935a; --earth: #3d2e1e; --text: #2c2118; --muted: #8a7a6a; --border: #ddd5c3;}
.ins-container { /*max-width: 1100px;*/ margin: 0 auto; /*padding: 0 20px;*/ }
.section-label { display: block; font-family: 'Jost', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: #6b7c52; margin-bottom: 1rem; }
.section-title { /*font-family: 'Cormorant Garamond', serif;*/ font-size: 3rem; color: var(--earth); line-height: 1.1; margin-bottom: 1.5rem; /*text-transform: uppercase;*/ font-weight: 300; }
.section-title em { font-style: italic; font-family: 'Cormorant Garamond', serif; text-transform: none; }
.divider { width: 60px; height: 1px; background: var(--ocre); margin-bottom: 2rem; }
/* Grilles */
.formules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 3rem; }
.espaces-grid, .resto-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 3rem; }
/* Cartes Hébergement (Formules) */
.formule-card { background: var(--stone); padding: 30px 20px; border: 1px solid var(--border); position: relative; transition: 0.3s; }
.formule-badge { font-size: 0.85rem; text-transform: uppercase; color: brown; letter-spacing: 0.1em; display: block; margin-bottom: 1rem;font-weight:600; }
.formule-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--earth); margin-bottom: 0.5rem; }
.formule-capacity { font-size: 2rem; color: brown; font-family: 'Cormorant Garamond', serif; margin-bottom: 1rem; }
.formule-capacity span { font-size: 0.9rem; font-family: 'Jost', sans-serif; color: var(--text); }
.formule-desc { font-size: 0.85rem; color: var(--text); line-height: 1.6; }
/* Cartes Espaces & Resto */
.espace-card, .resto-card { border: 1px solid brown; padding: 30px; transition: 0.3s; background: #fff; }
.espace-icon, .resto-icon { font-size: 2rem; color: brown; margin-bottom: 1.5rem; width: 40px; height: 40px; }
.espace-name, .resto-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--earth); margin-bottom: 0.5rem; }
.espace-detail { font-size: 0.80rem; text-transform: uppercase; color: brown; letter-spacing: 0.1em; margin-bottom: 1rem;font-weight:600; }
.espace-desc, .resto-desc { font-size: 0.95rem; color: var(--text); line-height: 1.6; }
/* Tableau Configuration */
.config-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-family: 'Jost', sans-serif; }
.config-table th { text-align: left; padding: 15px; background: var(--stone); font-size: 0.8rem; text-transform: uppercase; color: var(--earth); border: 1px solid var(--border); }
.config-table td { padding: 15px; border: 1px solid var(--border); font-size: 0.9rem; color: var(--text); }
/* Pourquoi / Atouts */
.pourquoi { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; padding: 80px 0; align-items: start; }
.atout-item { display: flex; gap: 20px; margin-bottom: 30px; }
.atout-num { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--ocre); font-style: italic; }
.atout-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--earth); margin-bottom: 0.5rem; }
.atout-desc { font-size: 0.95rem; color: var(--text); line-height: 1.6;text-align:justify; } 
/* Responsive */
@media (max-width: 992px) { .formules-grid { grid-template-columns: repeat(2, 1fr); } .espaces-grid, .resto-options, .pourquoi { grid-template-columns: 1fr; } }
/* --- COMPLÉMENT STYLE TARIFS & POURQUOI --- */
/* --- SECTION TARIFS CLAIRE (CHARTE GRAPHIQUE) --- */
sub {bottom: 0px!important;}
.tarifs {background: #faf7f2; /* Fond Cream de la charte */color: #2c2118;      /* Texte foncé pour lisibilité */
    padding: 100px 0; text-align: center; border-top: 1px solid #ddd5c3;border-bottom: 1px solid #ddd5c3;}
.tarifs .section-title { color: #3d2e1e; }
.tarifs-intro {margin-bottom: 40px;font-size: 0.95rem;color: var(--text)}
.tarifs-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px;margin-bottom: 50px;}
.tarif-card {background: #ffffff;border: 1px solid #c8935a; /* Bordure Ocre */padding: 20px 20px;transition: transform 0.3s ease;}
.tarif-card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(200, 147, 90, 0.1);}
.tarif-label { display: block; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0em;margin-bottom: 0px;color:var(--text); /* Vert Olive de la charte */font-weight: 500;}
.tarif-price {font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: brown;margin-bottom: 0px;}
.tarif-price sub { font-size: 1.1rem; color: #a06e3a; }
.tarif-formula { font-size: 0.85rem; color: var(--text); font-style: italic; }
.tarifs-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto 50px; text-align: left; }
.tarif-include-item { font-size: 0.95rem; padding-left: 30px; position: relative; color: #3d2e1e; }
.tarif-include-item::before { content: "✦"; position: absolute; left: 0; color: #c8935a;}
/* Bouton Devis */
.btn-primary { display: inline-block; padding: 20px 45px; background: #3d2e1e; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.85rem; r-spacing: 0.2em;transition: all 0.3s ease; }
.btn-primary:hover {background: #c8935a; color: #fff;}
.saison-block { border-left: 2px solid var(--ocre); padding-left: 20px; margin-bottom: 30px; }
.saison-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--earth); margin-bottom: 5px; }
.saison-desc { font-size: 0.95rem; color: var(--text); }
/* Modification pour forcer l'empilement sur mobile */
@media (max-width: 768px) {
.tarifs-cards {display: flex;flex-direction: column; /* Force l'empilement vertical */gap: 20px;padding: 0 15px;}
.tarif-card {width: 100% !important; /* La carte prend toute la largeur */margin: 0 auto;}
.formules-grid {display: flex; flex-direction: column; /* Force l'empilement vertical */gap: 1.5rem;padding: 0 10px;}
.formule-card {width: 100% !important;max-width: none !important;}
.cta-wrapper {flex-direction: column; /* Empile les boutons */align-items: center;}
.cta-wrapper .btn-welcome {width: 100% !important; /* Prend toute la largeur du téléphone */max-width: none;margin-right: 0 !important; /* Supprime la marge de 1rem vue sur votre capture */}
} 
.container-tarifs {max-width: 100%;margin: 20px auto;font-family: 'Montserrat', sans-serif;}
.global-note {text-align: center;font-size: 0.9em;margin-bottom: 15px;color: #555;}
.table-tarifs {width: 100%;border-collapse: collapse;background: #ffffff;box-shadow: 0 4px 12px rgba(0,0,0,0.08);border-radius: 8px;overflow: hidden;margin-bottom: 20px;}
.table-tarifs thead {background-color: #2c3e50;color: #ffffff;text-transform: uppercase;font-size: 0.85em;letter-spacing: 1px;}
.horaires-header {display: block;font-size: 0.7em;font-weight: 400;text-transform: none;margin-top: 8px;color: #bdc3c7;line-height: 1.3;}
.table-tarifs th, .table-tarifs td {padding: 18px 12px;text-align: center;border: 1px solid #eeeeee;vertical-align: middle;}
.saison-titre {font-weight: 700;text-align: left;background-color: #fdfdfd;}

/* --- STYLE DES BORDURES DE COULEUR INTERNES --- */
/* On définit la structure commune pour les 4 classes */
/* TECHNIQUE PAR OMBRE INTERNE POUR BORDURE DANS LE TABLEAU */
.saison-hiver,.saison-printemps, .saison-ete-douce, .saison-ete-full {
    /* On retire la vraie bordure qui pose problème */
    border-left: none !important;
    /* On crée une barre de 8px à l'intérieur avec box-shadow */
    box-shadow: inset 8px 0 0 0 red; /* 'red' est remplacé plus bas */
    /* On décale le texte pour laisser la place à la barre */
    padding-left: 25px !important; vertical-align: middle !important;}
/* On applique les couleurs via l'ombre */
.saison-hiver { box-shadow: inset 6px 0 0 0 #3498db !important; }
.saison-printemps { box-shadow: inset 6px 0 0 0 #27ae60 !important; }
.saison-ete-douce { box-shadow: inset 6px 0 0 0 #f39c12 !important; }
.saison-ete-full { box-shadow: inset 6px 0 0 0 #e91e63 !important; }

/* On nettoie les bordures de ligne qui pourraient traîner */
.badge-best {color:#8B4513;font-weight: 600;background: rgba(200, 169, 126, 0.1); padding: 2px 6px; border-radius: 2px;}
.table-tarifs tr:nth-child(even) {background-color: #fafafa;}
.table tbody tr { border-left: none !important; }
.price-tag {display: block;font-size: 1em;font-weight: 600;color: #2c3e50;}
.subtitle-saison {display: block;font-size: 0.85em;font-weight: 400;color: #7f8c8d;margin-top: 4px;}
.note-tarifs {font-size: 0.9em;font-style: italic;color: #555;padding: 15px;background: #f9f9f9;border-radius: 4px;}
.center{text-align:center; font-style:italic;}
.center a {color: #333333; text-decoration: underline; font-weight: bold;}
.center a:hover {color: brown; text-decoration: none;}
@media screen and (max-width: 768px) {
.badge-best {color:#8B4513;font-weight: 600;background: rgba(200, 169, 126, 0.1); padding: 2px 6px; border-radius: 2px;}
.table-tarifs tr:nth-child(even) {background-color: #fafafa;}	
.table-tarifs thead {display: none;}
.table-tarifs tr {display: block;margin-bottom: 25px;border: 1px solid #ddd;border-radius: 8px;}
.table-tarifs td {display: block;text-align: right;padding: 15px 15px 15px 20%;position: relative;border: none;border-bottom: 1px solid #f0f0f0;min-height: 50px;}
.table-tarifs td:before {content: attr(data-label);position: absolute;left: 15px;top: 50%;transform: translateY(-50%);width: 50%;text-align: left;font-weight: 700;color: #2c3e50;font-size: 0.75em;line-height: 1.2;white-space: normal;}
.saison-titre {text-align: center !important;padding-left: 15px !important;background-color: #f1f1f1 !important;font-size: 1.1em;border-left: none !important;border-bottom: 3px solid #ccc !important;}
.saison-titre.saison-hiver {border-bottom: 4px solid #3498db !important;}
.saison-titre.saison-printemps {border-bottom: 4px solid #27ae60 !important;}
.saison-titre.saison-ete-douce {border-bottom: 4px solid #f39c12 !important;}
.saison-titre.saison-ete-full {border-bottom: 4px solid #e91e63 !important;}
.saison-titre:before {content: "" !important;}
.price-tag {display: block;font-size: 0.95em;font-weight: 600;color: #2c3e50;}
.table-tarifs td,.table-tarifs th, .saison-titre {border-left: none !important;box-shadow: none !important;}
}
/* --- CSS POUR L'ALIGNEMENT DES CARTES MDS --- */

/* Force les cartes à prendre toute la hauteur disponible dans leur colonne */
.space-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px !important;
}

.space-card:hover {
    transform: translateY(-3px); /* Petit effet de survol sympa */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Force les images à avoir exactement la même dimension */
.img-fixe {
    width: 100%;
    height: 180px; /* Adapte cette hauteur selon tes images */
    object-fit: cover; /* Recadre l'image proprement sans la déformer */
    border-radius: 8px;
}

/* Style spécifique pour les titres de ces cartes */
.text-malaga {
    color: brown; /* Ta couleur Malaga */
    font-size: 1em;
	text-align:left;
}

/* Style spécifique pour les listes à puces intérieures */
.agenda-content {
    margin-bottom: 20px;
}

.agenda-content li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.agenda-content li:before {
    content: "•";
    color: #800040; /* Petite puce Malaga discrète */
    position: absolute;
    left: 0;
}

/* Ajustements Responsive */
@media (max-width: 991px) {
    .space-card h5 { font-size: 1em; } /* Titres un peu plus petits sur tablette */
}
.img-fixe {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}
/* 1. SUPPRESSION RADICALE DE LA BARRE (Trait vertical rouge) */
.titre-evenement::before, 
.titre-evenement::after {
    content: none !important;
    display: none !important;
    border: none !important;
    width: 0 !important;
}

/* 2. STYLE DE LA CARTE (Alignement vertical) */
.carte-blanche {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    text-align: center !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* 3. LE TITRE (Montserrat, Brown, Majuscules, Sans bordure) */
.titre-evenement {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    color: brown !important; /* Couleur Brown */
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    
    /* On force la suppression de toute bordure restante */
    border-left: none !important;
    border: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: block !important;
}

/* 4. LE CORPS DU TEXTE (Montserrat, Aligné à gauche, s'étire) */
.corps-texte {
    flex-grow: 1 !important;
    text-align: left !important;
}

.corps-texte p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #1d202c !important; /* Gris text-muted */
    line-height: 1.6 !important;
    text-align: justify;
}

/* Mise en gras dans le paragraphe */
.corps-texte strong {
    font-weight: 700 !important;
    color: #333 !important;
}

/* 5. LE FOOTER (Ligne de séparation et bouton) */
.pied-page-bouton {
    margin-top: 0px !important;
    padding-top: 0px !important;
    border-top: 1px solid #eee !important;
}

.pied-page-bouton .btn-mariage-outline {
    font-family: 'Montserrat', sans-serif !important;
}