/* colonne et ligne */
.colonne{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ligne{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      /* les éléments passent à la ligne si besoin */
    gap: 1rem;
}


/* === Section 1: Hero === */
#hero{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem);
    background-color:#e6dfc4;
    overflow: hidden;
}

.hero-contenu{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tag{
    color:#D9B36C;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .3px;
    background-color: #16321F;
    padding: .4rem 1rem;
    margin: 0 0 1rem;
    border-radius: 999px;
}

/* Les deux lignes du titre : même taille fluide, couleurs différentes */
.titre-hero1,
.titre-hero2{
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.12;
    font-weight: 800;
}
.titre-hero1{ color:#16321F; }
.titre-hero2{ color:#D9B36C; }

/* Correction du nom de classe : .description-hero (était .descritpiton) */
.description-hero{
    color:#3c4a3f;
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
    line-height: 1.6;
    max-width: 46ch;
    margin: 1.1rem 0 1.6rem;
}

.hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.btn-reservation{
    background-color:#16321F;
    color:#F4EDE0;
    font-weight:600;
    text-decoration:none;
    padding:.85rem 1.6rem;
    border-radius:999px;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn-reservation:hover{
    background-color:#0f2416;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(22,50,31,.28);
}

.btn-secondaire{
    border:2px solid #16321F;
    color:#16321F;
    font-weight:600;
    text-decoration:none;
    padding:.8rem 1.6rem;
    border-radius:999px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-secondaire:hover{
    background-color:#16321F;
    color:#F4EDE0;
    transform: translateY(-2px);
}

.hero-stats{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap: clamp(1.2rem, 4vw, 2.2rem);
    padding:0;
    margin:1.8rem 0 0;
}
.hero-stats li{
    display:flex;
    flex-direction:column;
}
.hero-stats strong{
    font-size:1.4rem;
    color:#16321F;
}
.hero-stats span{
    font-size:.8rem;
    color:#7a7a6d;
}

/* --- Visuel du hero --- */
.hero-visuel{
    position: relative;
    perspective: 1000px;   /* profondeur pour la parallaxe 3D de l'image */
}

.hero-image{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background-color:#16321F;
    box-shadow: 0 20px 40px rgba(22, 50, 31, .18);
    border:solid 3px #D9B36C;
    transition: transform .25s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Petite carte flottante "à partir de X €" */
.hero-carte-flottante{
    position:absolute;
    bottom:-16px;
    left:-16px;
    background:#fff;
    border-radius:14px;
    padding:.8rem 1.1rem;
    box-shadow:0 10px 24px rgba(22, 50, 31, .25);
    z-index:2;
}
.hero-carte-flottante small{
    display:block;
    font-size:.75rem;
    color:#7a7a6d;
}
.hero-carte-flottante b{
    font-size:1.15rem;
    color:#16321F;
}
.hero-carte-flottante b span{
    font-size:.75rem;
    font-weight:400;
    color:#7a7a6d;
}

/* === Section 2: Carte intéractive === */
#carte-logement{
    background-color:#16321F;
    width:100%;
    display:flex;
    flex-direction:column;
    text-align: center;
    align-items: center;
    gap:1.75rem;
    min-height: 900px;
}

#map{
    flex:1.4 1 0;
    max-width: none;
    height:500px;
    border-radius:12px;
}

/* Conteneur du marqueur : centre la pastille au-dessus du point */
.marqueur-prix{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:none;
    border:none;
}

/* La pastille elle-même */
.icon-prix{
    position:relative;
    background-color:#e6dfc4;
    color:#16321F;
    font-weight:700;
    font-size:13px;
    line-height:1;
    padding:6px 11px;
    border-radius:999px;
    border:2px solid #D9B36C;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
    white-space:nowrap;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* --- Marqueur sélectionné (survol depuis la liste ou la carte) --- */
.marqueur-prix.actif{
    z-index:1000 !important;   /* passe devant les autres pins */
}
.marqueur-prix.actif .icon-prix{
    background-color:#16321F;
    color:#D9B36C;
    border-color:#e6dfc4;
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.marqueur-prix.actif .icon-prix::after{
    border-top-color:#e6dfc4;
}

/* --- Annonce sélectionnée (survol depuis la carte) --- */
.carte-logement.actif{
    border-color:#D9B36C;
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* La petite flèche sous la pastille */
.icon-prix::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid #D9B36C;
}

/* Survol : inversion vert / doré */
.marqueur-prix:hover .icon-prix{
    background-color:#16321F;
    color:#D9B36C;
    transform:translateY(-2px);
    z-index:1000;
}
.marqueur-prix:hover .icon-prix::after{
    border-top-color:#16321F;
}

.trait{
    background-color:#e6dfc4;
    width:4px;
    align-self:stretch;     
}

#carte-logement .ligne{
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:center;
    width:100%;
    max-width:1200px;
    gap:1.5rem; 
    margin-top:3rem;
}

#carte-logement .colonne{
    display:flex;
    flex-direction:column;
    gap:1rem;
    flex:1 1 0;
    align-items:stretch; 
    max-height:500px;   
}

/* --- En-tête --- */
.carte-tag{
    color:#16321F;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .3px;
    background-color:#D9B36C;
    padding: .4rem 1rem;
    margin: 3rem 0 1rem;
    border-radius: 999px;
}
.carte-titre{
    color:#e6dfc4;
    margin-top: 1vh;
}

.carte-description{
    color:#7a7a6d;
    width:42%;
    text-align: center;
}
 
/* --- Liste verticale --- */
.entete-logements{
    display: flex;
    align-items: center;          
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.titre-partie-logement{
    color:#D9B36C;
    margin: 0;
}

#tri-logements{
    background-color:#16321F;
    color:#7a7a6d;
    border:none;
    cursor:pointer;
    margin: right;

    /* on retire l'apparence native (bordure + flèche du navigateur) */
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;


}

#tri-logements:focus,
#tri-logements:focus-visible{
    outline: none;
}

.liste-logements{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    max-width:none;
    max-height:430px;
    overflow-y: auto;
    padding-right:6px;
}
 
/* --- Une annonce : compacte, image à gauche --- */
.carte-logement{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    background-color:#fff;
    border-radius:12px;
    min-height: 96px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    border:solid 2px #16321F;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease;
}
.carte-logement:hover{
    border: solid 2px #D9B36C;
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
}
 
/* Image à gauche */
.logement-image{
    position:relative;
    flex:0 0 130px;
    width:130px;
    background-color:#16321F;
    overflow:hidden;
}
.img-logement{
    position:absolute;   
    inset:0;             
    width:100%;
    height:100%;
    object-fit:cover;    
    display:block;
}
.badge-distance{
    position:absolute;
    top:8px;
    left:8px;
    background-color:#D9B36C;
    color:#16321F;
    font-size:10.5px;
    font-weight:700;
    padding:3px 8px;
    border-radius:999px;
}
 
/* Texte à droite */
.case-logement{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:6px 12px;
    text-align:left;
}

.titre-logement{
    font-size:15px;
    font-weight:700;
    color:#16321F;
}

.infos-logement{
    font-size:12.5px;
    color:#7a7a6d;
}

.prix-logement{
    font-size:13.5px;
    font-weight:700;
    color:#16321F;
}
 
/* --- Aucun logement --- */
.aucun-logement{
    color:#e6dfc4;
    text-align:center;
    font-size:1rem;
}
.aucun-logement a{ color:#D9B36C; }
 
/* --- Bouton "voir tout" --- */
.btn-voir-tout{
    align-self: stretch;
    width:89%;
    text-align: center;
    margin-top: .5rem;
    background-color:#D9B36C;
    color:#16321F;
    font-weight:700;
    text-decoration:none;
    padding:.7rem 1.8rem;
    border-radius:999px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-voir-tout:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.25);
}

.legende{
    width: 100%;
    max-width: 1200px;   
    margin: 0 auto;      
    padding: 0;          
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    color: #7a7a6d;
    align-items: center;
}
.color{
    margin-left:0;
    width:20px;
    height:4px;
    background-color: #e10600;
}
/* --- Téléphone : image au-dessus --- */
@media (max-width:820px){
    #carte-logement .ligne{ flex-direction:column; align-items:stretch; }
    #map{ width:100%; height:340px; }
    #carte-logement .trait{ display:none; }   /* le trait vertical n'a plus de sens empilé */
    #carte-logement .colonne{ max-height:none; }
    #carte-logement .liste-logements{ max-height:none; overflow:visible; }
}

/* === Section 3: Fonctionnement === */
#fonctionnement{
    display:flex;
    flex-direction: column;
    gap:1.5rem;
    background-color: #e6dfc4;
    padding: clamp(2.5rem, 8vw, 5.5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem);
    align-items: center;
    text-align: center;
}

/* Petit tag "Simple & rapide" au dessus du titre */
.fonctionnement-tag{
    color:#D9B36C;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .3px;
    background-color: #16321F;
    padding: .4rem 1rem;
    margin: 0 0 1rem;
    border-radius: 999px;
}

#fonctionnement h1{
    margin:.3rem 0 0;
    color:#16321F;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.fonctionnement-sous-titre{
    color:#5c6b57;
    font-size: clamp(.95rem, 1.8vw, 1.1rem);
    max-width: 44ch;
    margin-bottom: 1.5rem;
}

.cases{
    display:flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width:100%;
    max-width:1150px;
    /* ligne de progression horizontale en fond, derrière les numéros */
    position: relative;
}

.case-fonctionnement{
    position: relative;
    flex: 1 1 0;
    display:flex;
    flex-direction: column;
    gap:1.25rem;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem 2rem;
    background-color:#F4EDE0;
    border:2px solid transparent;
    border-radius:20px;
    box-shadow: 0 6px 18px rgba(22, 50, 31, .08);
    /* état de départ pour l'apparition au scroll */
    opacity:0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease,
                box-shadow .3s ease, border-color .3s ease;
    transition-delay: var(--delai, 0ms);
}

.case-fonctionnement.visible{
    opacity:1;
    transform: translateY(0);
}

.case-fonctionnement:hover{
    transform: translateY(-8px);
    border-color:#D9B36C;
    box-shadow: 0 16px 32px rgba(22, 50, 31, .18);
}

/* Trait qui relie les étapes (desktop uniquement) */
.case-fonctionnement:not(:last-child)::after{
    content:"";
    position:absolute;
    top: clamp(3rem, 5vw, 4rem);
    right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 2px);
    width: clamp(1.5rem, 3vw, 2.5rem);
    height:3px;
    background: repeating-linear-gradient(
        90deg, #D9B36C 0 8px, transparent 8px 14px);
    z-index:0;
}

.case-number{
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D9B36C;
    font-weight: 700;
    font-size: 20px;
    filter: drop-shadow(0 4px 8px rgba(22,50,31,.35));
}

.case-number .etoile{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
}

.case-number .etoile path{
    fill: #16321F;
    stroke: #16321F;
    stroke-width: 22;
    stroke-linejoin: round;
}

.case-number span{
    position: relative;
    transition: transform .4s ease;
}

.content{
    display: flex;
    flex-direction: column;
    gap:.6rem;
}

.content h2{
    margin:0;
    color:#16321F;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.case-text{
    width:90%;
    margin:auto;
    color:#5c6b57;
    line-height:1.55;
}

/* CTA final de la section */
.btn-fonctionnement{
    margin-top:1rem;
    background-color:#16321F;
    color:#F4EDE0;
    font-weight:700;
    text-decoration:none;
    padding:.95rem 2.2rem;
    border-radius:999px;
    box-shadow:0 8px 20px rgba(22,50,31,.25);
    /* apparition au scroll */
    opacity:0;
    transform: translateY(20px);
    transition: opacity .6s ease .3s, transform .6s ease .3s,
                background-color .2s ease, box-shadow .2s ease;
}
.btn-fonctionnement.visible{
    opacity:1;
    transform: translateY(0);
}
.btn-fonctionnement:hover{
    background-color:#0f2416;
    transform: translateY(-3px);
    box-shadow:0 12px 26px rgba(22,50,31,.32);
}

/* === Section 4:CTA Hôte === */
#CTA-hote{
    height:400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-hote{
    background-color:#16321F ;
    width:80%;
    height: 70%;
    margin:auto;
    display: flex;
    flex-direction:column;
    overflow: hidden;
    border-radius: 25px;
    /* apparition au scroll */
    opacity:0;
    transform: translateY(40px) scale(.98);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--delai, 0ms);
}
.cta-hote.visible{
    opacity:1;
    transform: translateY(0) scale(1);
}

.cta-text{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    margin-top:1rem;
}

.cta-question{
    color:#D9B36C;
    font-size: large;
}

.cta-titre{
    color:#e6dfc4;
    margin-top: 1vh;
}

.cta-description{
    color:#7a7a6d;
    width:30%;
    text-align: center;
}

.btn-cta-hote{
    width:30%;
    height:20%;
    margin:auto;
    color:#16321F;
    background-color: #D9B36C;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn-cta-hote:hover{
    color:#e6dfc4;
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(22, 50, 31, 0.16);
}

/* === Section 5: Calendrier === */

#calendrier{
    padding:  clamp(1rem, 4vw, 3rem) 4rem;
    background-color: #16321F;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titre-calendrier{
    text-align: center;
    font-size: clamp(1.35rem, 3.5vw, 2rem);   /* 22px → 32px */
    font-weight: 700;
    color:#e6dfc4;
    margin-bottom: clamp(1.5rem, 7vw, 3rem);
    line-height: 1.3;
}

/*  événements */

.grille-events{
    display: grid;
    /* minmax(min(100%, 280px), 1fr) : sur un écran plus étroit que
       280px la carte se réduit au lieu de déborder. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.2rem, 3vw, 2.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

.event{
    background-color: #ffffff;
    border:solid 3px #D9B36C;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(22, 50, 31, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity .6s ease;
}

/* état de départ pour l'apparition au scroll (ajouté via JS : data-reveal) */
.event[data-reveal]{
    opacity: 0;
    transform: translateY(30px);
}
.event[data-reveal].visible{
    opacity: 1;
    transform: translateY(0);
}

.event:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(22, 50, 31, 0.16);
}

.event-image{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;    /* hauteur proportionnelle à la largeur */
    background-color: #16321F;
    overflow: hidden;
}

.img-event{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-date{
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: #D9B36C;
    color: #16321F;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.case-event{
    padding: 1.1rem 1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.titre-event{
    font-size: clamp(1.05rem, 2vw, 1.25rem);   /* 17px → 20px */
    font-weight: 700;
    color: #16321F;
}

.date{
    font-size: 0.9375rem;
    font-weight: 400;
    color: #7a7a6d;
}

/* =========================================================================
   ANIMATIONS GÉNÉRIQUES (pilotées par accueil.js)
   ========================================================================= */

/* Barre de progression de lecture en haut de page */
.barre-progression{
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: #D9B36C;
    z-index: 9999;
    transition: width .1s linear;
}

/* Révélation générique au scroll — éléments [data-reveal] */
[data-reveal]{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--delai, 0ms);
}
[data-reveal].visible{
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de direction pour [data-reveal="..."] */
[data-reveal="left"]{  transform: translateX(-40px); }
[data-reveal="right"]{ transform: translateX(40px); }
[data-reveal="zoom"]{  transform: scale(.9); }
[data-reveal="left"].visible,
[data-reveal="right"].visible,
[data-reveal="zoom"].visible{ transform: none; }

/* Entrée en cascade des éléments du hero au chargement — [data-hero] */
#hero [data-hero]{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
#hero [data-hero].hero-in{
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 820px){
    #hero{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;               /* l'espacement est géré au margin ci-dessous */
    }

    /* Ses enfants deviennent directement des éléments du hero */
    .hero-contenu{
        display: contents;
    }

    /* Ordre d'affichage sur mobile */
    .lieu           { order: 1; margin: 0 0 1rem; }
    .titre-hero1    { order: 2; margin: 0; }
    .titre-hero2    { order: 3; margin: 0 0 1.1rem; }
    .description-hero{ order: 4; margin: 0 auto 1.6rem; max-width: 55ch; }
    .hero-stats     { order: 5; margin: 0 0 1.8rem; justify-content: center; }
    .hero-visuel    { order: 6; width: 100%; max-width: 480px; margin: 0 auto; }
    .hero-actions   { order: 7; margin: 1.8rem 0 0; justify-content: center; }

    .hero-image{
        aspect-ratio: 16 / 11;   /* moins haute une fois pleine largeur */
    }
}

/* Téléphone : on resserre et on évite tout débordement horizontal */
@media (max-width: 480px){
    .hero-carte-flottante{
        left: 0;              /* collée dans le cadre : plus de débordement */
        bottom: -12px;
        padding: .65rem .9rem;
    }

    /* Les deux boutons empilés, pleine largeur, centrés */
    .hero-actions{
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-reservation,
    .btn-secondaire{
        text-align: center;
    }

    .hero-stats{
        gap: 1.4rem 1.8rem;
    }
}

/* Empilement sur tablette / mobile */
@media (max-width: 820px){
    .cases{
        flex-direction: column;
        align-items: center;
    }
    .case-fonctionnement{
        width:100%;
        max-width:420px;
    }
    /* le trait de liaison devient vertical entre les cartes */
    .case-fonctionnement:not(:last-child)::after{
        top:auto;
        right:auto;
        bottom: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 1px);
        left:50%;
        transform: translateX(-50%);
        width:3px;
        height: clamp(1.5rem, 3vw, 2.5rem);
        background: repeating-linear-gradient(
            180deg, #D9B36C 0 8px, transparent 8px 14px);
    }
}

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce){
    .case-fonctionnement,
    .btn-fonctionnement,
    .cta-hote,
    .event[data-reveal],
    [data-reveal],
    #hero [data-hero]{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .hero-carte-flottante{
        animation: none;
    }
    .hero-image,
    .hero-image img,
    .img-event{
        transition: none;
    }
    .barre-progression{
        display: none;
    }
}