/* ========================================================================== */
/*  ÉLAN INTÉRIEUR – STYLE.CSS                                                */
/*  Design system : Glassmorphism + Blocky interfaces | Pastel color scheme   */
/*  Fonts        : Manrope (headings) | Rubik (body)                          */
/*  Framework    : Complements Bootstrap 5                                    */
/* ========================================================================== */

/* -------------------- 1. ROOT VARIABLES & UTILITIES ----------------------- */
:root{
    /* Pastel Core Palette */
    --clr-primary:      #8FB7FF;  /* pastel blue */
    --clr-primary-dark: #5f8ae1;
    --clr-secondary:    #FFB2D7;  /* pastel pink */
    --clr-secondary-dark:#e189b3;
    --clr-accent:       #AFF8DB;  /* pastel mint */
    --clr-accent-dark:  #6fdcb4;
    --clr-bg-light:     #F7FAFF;
    --clr-bg-dark:      #151515;
    --clr-text-dark:    #222222;
    --clr-text-light:   #FFFFFF;

    /* Glassmorphism */
    --glass-bg:         rgba(255,255,255,0.35);
    --glass-brd:        rgba(255,255,255,0.45);
    --glass-blur:       15px;

    /* Global radius / shadows */
    --radius:           18px;
    --shadow:           0 6px 20px rgba(0,0,0,0.08);
    --transition:       0.35s cubic-bezier(.43,.01,.58,1); /* Non-linear */
}

/* Utility classes */
.text-dark   {color:var(--clr-text-dark)!important;}
.text-light  {color:var(--clr-text-light)!important;}
.bg-primary  {background-color:var(--clr-primary)!important;}
.bg-dark-90  {background:rgba(0,0,0,0.9)!important;}
.read-more   {color:var(--clr-primary-dark);font-weight:500;text-decoration:none;position:relative;}
.read-more::after{content:'»';margin-left:4px;transition:transform var(--transition);}
.read-more:hover::after{transform:translateX(4px);}

/* -------------------- 2. TYPOGRAPHY -------------------------------------- */
body{
    font-family:'Rubik',sans-serif;
    color:var(--clr-text-dark);
    background-color:var(--clr-bg-light);
    line-height:1.65;
    scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Manrope',sans-serif;
    color:var(--clr-text-dark);
    font-weight:700;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.25);
}

/* -------------------- 3. GLOBAL BUTTONS ---------------------------------- */
.btn, button, input[type='submit']{
    font-family:'Manrope',sans-serif;
    border:none;
    border-radius:var(--radius);
    padding:.65rem 1.5rem;
    font-weight:700;
    transition:all var(--transition);
}
.btn-primary{
    background:var(--clr-primary);
    color:var(--clr-text-light);
}
.btn-primary:hover,
.btn-primary:focus{
    background:var(--clr-primary-dark);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.btn-outline-light{
    color:#fff;
    border:2px solid #fff;
}
.btn-outline-light:hover{background:#fff;color:var(--clr-text-dark);}

/* -------------------- 4. NAVBAR / HEADER --------------------------------- */
.glass-nav{
    backdrop-filter:blur(var(--glass-blur));
    background:var(--glass-bg);
    border-bottom:1px solid var(--glass-brd);
}
.navbar-brand{font-weight:800;font-size:1.4rem;}
.nav-link{
    font-weight:500;
    transition:color var(--transition);
}
.nav-link:hover,
.nav-link:focus{color:var(--clr-primary-dark)!important;}

/* -------------------- 5. HERO SECTION ------------------------------------ */
#hero{
    position:relative;
    color:#fff;
}
#hero .btn{box-shadow:0 4px 14px rgba(0,0,0,0.25);}


/* Non-linear floating animation for hero elements */
@keyframes floatY{
    0%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
    100%{transform:translateY(0);}
}
#hero h1{animation:floatY 7s ease-in-out infinite;}
#hero p {animation:floatY 9s ease-in-out infinite;}

/* -------------------- 6. CARDS & GLASS COMPONENT ------------------------- */
.glass-card{
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-brd);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:none;
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,0.12);}

/* Image containers */
.card-image,.image-container{
    width:100%;
    height:260px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
}
.card-image img,.image-container img{
    width:100%;height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* -------------------- 7. SECTIONS LAYOUT --------------------------------- */
section{padding:4rem 0;}
section.bg-light{background:#fff;}
.parallax-bg{
    position:absolute;inset:0;
    z-index:-1;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    filter:brightness(0.9);
}

/* Floating pastel circles for decorative background */
.pastel-circle{
    position:absolute;
    top:-80px;right:-80px;
    width:240px;height:240px;
    background:var(--clr-accent);
    opacity:.35;
    border-radius:50%;
    animation:orbit 20s linear infinite;
}
@keyframes orbit{
    0%{transform:translate(-20px,20px) rotate(0deg);}
    50%{transform:translate(20px,-20px) rotate(180deg);}
    100%{transform:translate(-20px,20px) rotate(360deg);}
}

/* -------------------- 8. EVENTS TABLE ------------------------------------ */
table th{font-weight:600;}
table tr:hover td{background:var(--clr-accent);color:var(--clr-text-dark);}

/* -------------------- 9. CONTACT FORM ------------------------------------ */
#contact form .form-control{
    border-radius:var(--radius);
    border:2px solid transparent;
    background:rgba(255,255,255,0.65);
    transition:border var(--transition),box-shadow var(--transition);
}
#contact form .form-control:focus{
    border-color:var(--clr-primary);
    box-shadow:0 0 0 4px rgba(143,183,255,0.25);
}
#contact .btn{font-size:1.1rem;}

/* -------------------- 10. MEDIA CAROUSEL --------------------------------- */
.carousel .carousel-item{transition:transform .8s ease-out;}

/* -------------------- 11. FOOTER ----------------------------------------- */
footer{
    background:var(--clr-bg-dark);
    color:var(--clr-text-light);
}
footer a{
    color:var(--clr-accent);
    transition:color var(--transition);
}
footer a:hover{color:var(--clr-accent-dark);}
.social-link{margin:0 .6rem;font-weight:600;}

/* -------------------- 12. COOKIE POPUP ----------------------------------- */
#cookiePopup{
    backdrop-filter:blur(6px);
    box-shadow:0 -4px 10px rgba(0,0,0,0.4);
}

/* -------------------- 13. SUCCESS, PRIVACY & TERMS PAGES ----------------- */
body.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
    color:#fff;
    text-align:center;
}
body.page-legal{padding-top:100px;} /* privacy & terms */

/* -------------------- 14. RESPONSIVE ADJUSTMENTS ------------------------- */
@media (max-width:992px){
    .navbar-collapse{backdrop-filter:blur(var(--glass-blur));background:var(--glass-bg);}
    section{padding:3rem 0;}
    .card-image,.image-container{height:220px;}
}
@media (max-width:576px){
    h1{font-size:2rem;}
    .card-image,.image-container{height:200px;}
}

/* -------------------- 15. ANIMATED NON-LINEAR ENTRY ---------------------- */
@keyframes slideUpSoft{
    from{opacity:0;transform:translateY(40px) scale(0.95);}
    60%{transform:translateY(-8px) scale(1.02);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
[data-aos]{opacity:0;animation:slideUpSoft .9s forwards;}