/* ================= VARIABLES ================= */

:root{
--bleu:#7ECAD3;
--vert:#C8E3C8;
--violet:#B77BCB;
--fond:#FAFAFA;
--texte:#333;
--shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* ================= GLOBAL ================= */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Manrope', sans-serif;
background:var(--fond);
color:var(--texte);
line-height:1.6;
}

/* ================= NAVBAR FLOTTANTE ================= */

.navbar-wrapper{
position:fixed;
top:25px;
left:0;
right:0;
display:flex;
justify-content:center;
z-index:1000;
}

.navbar{
display:flex;
align-items:center;
gap:40px;
padding:12px 30px;
background:rgba(255,255,255,0.7); /* plus glass */
backdrop-filter:blur(20px);
border-radius:50px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border:1px solid rgba(255,255,255,0.4); /* AJOUT */
}

.navbar img{
height:45px;
}

.nav-links{
display:flex;
gap:30px;
}

.nav-links a{

text-decoration:none;
color:var(--texte);
font-weight:500;
font-size:15px;
transition:0.3s;

}

.nav-links a:hover{
color:var(--bleu);
}

/* ================= PRESENTATION ================= */

.presentation{
padding:140px 20px;
background:white;
}

.presentation-container{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
gap:80px;
}

.presentation img{
width:340px;
border-radius:30px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.presentation h2{
font-size:38px;
margin-bottom:20px;
}

.presentation p{
font-size:18px;
color:#666;
max-width:500px;
}

/* ================= ACTIVITIES ================= */

.activities{
padding:140px 40px;
display:flex;
gap:60px;
justify-content:center;
flex-wrap:wrap;
}

.activity{
max-width:420px;
background:white;
border-radius:30px;
padding-bottom:40px;
text-align:center;

box-shadow:0 20px 40px rgba(0,0,0,0.06);

transition:all 0.4s ease;
overflow:hidden;
}

.activity:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 30px 60px rgba(0,0,0,0.12);
}

.activity img{
width:100%;
height:260px;
object-fit:cover;
}

.activity h3{
font-size:30px;
margin-top:25px;
}

.activity p{
padding:0 30px;
font-size:17px;
}

/* ================= FOOTER PREMIUM ================= */

.footer{
background:linear-gradient(
180deg,
#f8f9fb 0%,
#eef4f6 100%
);
}

.footer-logo{
width:170px;
margin-top: 30px;
}

/* CONTAINER */

.footer-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
gap:60px;
padding:0 30px;
flex-wrap:wrap;
}

/* COLONNES */

.footer-col{
flex:1;
min-width:220px;
}

/* TITRES */

.footer-col h4{
margin-bottom:25px;
margin-top: 110px;
font-size:15px;
letter-spacing:2px;
text-transform:uppercase;
color:#555;
font-weight:600;
}

/* LIENS */

.footer-col a{
display:block;
margin-bottom:16px;
color:#222;
text-decoration:none;
font-size:16px; /* 🔥 au lieu de 15 */
font-weight:500;
transition:all 0.25s ease;
}

.footer-col a:hover{
color:var(--bleu);
transform:translateX(3px);
}

/* BRAND */

.footer-brand{
max-width:320px;
}

.footer-brand p{
color:#222;
font-size:16px;
line-height:1.8;
font-weight:400;
max-width:280px;
margin-top:-30px;
}

/* CONTACT */

.footer-col p{
margin-bottom:10px;
color:#444;
font-size:15px;
}

/* COPYRIGHT */

.footer-text{
color:#333;
font-size:15px;
line-height:1.4; /* 🔥 beaucoup plus compact */
max-width:280px;
margin-top:10px;
}

.footer-text span{
display:block;
font-weight:600;
font-size:18px;
margin-bottom:5px; /* 🔥 quasiment collé */
margin-top: 40px;
}

.footer-bottom{
max-width:1200px;
margin:30px auto 0;
padding:0 30px;
display:flex;
justify-content:flex-start; /* bien à gauche */
font-size:13px;
font-weight:600;
color:#777;
}

.footer-col:last-child a{
font-size:16px;
font-weight:500;
color:#222;
}

/* ================= FOOTER LEGAL ================= */

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.footer-legal{
display:flex;
gap:20px;
}

.footer-legal a{
font-size:13px;
color:#777;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.footer-legal a:hover{
color:#000;
}

/* RESPONSIVE */

@media (max-width:768px){
.footer-container{
flex-direction:column;
gap:40px;
}
}

/* ================= RESPONSIVE ================= */

@media (max-width:900px){
.presentation-container{
flex-direction:column;
text-align:center;
}
.navbar{
padding:20px 25px;
}
nav a{
margin-left:15px;
}
.hero h1{
font-size:46px;
}
.activities{
padding:80px 20px;
}
}

/* ================= AVIS MODERNE ================= */

.reviews{
padding:120px 20px;
text-align:center;
background:linear-gradient(
180deg,
#ffffff 0%,
#f3fafb 40%,
#f7f3fb 100%
);
}

/* TITRE */

.reviews h2{
font-size:36px;
margin-bottom:60px;
font-weight:600;
}

/* CONTAINER */

.reviews-container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

/* CARD */

.review-card{
max-width:360px;
padding:30px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
text-align:left;
position:relative;
transition:all 0.3s ease;
border:1px solid rgba(255,255,255,0.5);
}

.review-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

/* ÉTOILES */

.review-stars{
color:#FFD700;
font-size:18px;
margin-bottom:12px;
letter-spacing:2px;
}

/* TEXTE */

.review-text{
font-size:16px;
line-height:1.7;
margin-bottom:15px;
color:#444;
}

/* AUTEUR */

.review-author{
font-weight:500;
font-size:14px;
color:#888;
}

/* ================= FOOTER LEGAL ================= */

.footer-bottom{
max-width:1200px;
margin:30px auto 0;
padding:0 30px;

display:flex;
justify-content:space-between;
align-items:center;
}

.footer-legal{
display:flex;
gap:30px; /* plus d’air */
margin-left:auto;
margin-right:80px; /* décale vers la gauche */
}

.footer-legal a{
font-size:14px;
color:#555;
text-decoration:none;
font-weight:600; /* + visible */
transition:0.3s;
position:relative;
}

.footer-legal a:hover{
color:#000;
}

.footer-legal a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:2px;
background:#7ECAD3; /* couleur de ton site */
transition:0.3s;
}

.footer-legal a:hover::after{
width:100%;
}

/* ================= LEGAL PAGES ================= */

.legal-page{
max-width:900px;
margin:120px auto;
padding:0 20px;
line-height:1.8;
font-family:'Manrope', sans-serif;
color:#2F2F2F;
}

/* TITRE PRINCIPAL */

.legal-page h1{
font-size:42px;
margin-bottom:40px;
font-weight:600;
letter-spacing:-0.5px;
}

/* SECTIONS */

.legal-page h2{
font-size:22px;
margin-top:40px;
margin-bottom:10px;
font-weight:600;
}

/* TEXTE */

.legal-page p{
font-size:16px;
color:#555;
margin-bottom:15px;
}

/* LISTES */

.legal-page ul{
margin-top:10px;
margin-bottom:20px;
padding-left:20px;
}

.legal-page li{
margin-bottom:8px;
color:#555;
}

/* BLOCS INFOS (contact, etc.) */

.legal-page p strong{
color:#000;
}

/* SÉPARATION VISUELLE (optionnel mais stylé) */

.legal-page h2::before{
content:"";
display:block;
width:40px;
height:3px;
background:#7ECAD3; /* ton bleu */
margin-bottom:10px;
border-radius:2px;
}

/* RESPONSIVE */

@media(max-width:768px){

.legal-page{
margin:80px auto;
}

.legal-page h1{
font-size:32px;
}

.legal-page h2{
font-size:20px;
}

}

/* ================= LEGAL NAV ================= */

.legal-nav{
position:fixed;
top:20px;
left:0;
right:0;
display:flex;
justify-content:flex-start;
padding:0 30px;
z-index:1000;
}

.back-home{
text-decoration:none;
font-size:14px;
font-weight:500;
color:#555;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);
padding:8px 14px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:0.3s;
}

.back-home:hover{
color:#000;
transform:translateX(-3px);
}

/* ================= FACEBOOK LINK ================= */

.facebook-link{
display:inline-flex; /* IMPORTANT */
align-items:center;
gap:8px;
text-decoration:none;
color:#555;
font-weight:500;
margin-top:10px;
}

.facebook-link:hover{
color:#1877F2; /* couleur Facebook */
}

.facebook-icon{
width:40px;
height:40px;
fill:#555;
display:block;
}

.facebook-link:hover .facebook-icon{
fill:#1877F2;
}

.seo-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ================= RESPONSIVE MOBILE ================= */

@media (max-width: 768px) {

  /* NAVBAR */
  .navbar-wrapper {
    top: 12px;
  }

  .navbar {
    gap: 16px;
    padding: 10px 18px;
  }

  .navbar img {
    height: 32px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 13px;
  }

  /* PRESENTATION */
  .presentation {
    padding: 80px 20px;
  }

  .presentation-container {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .presentation img {
    width: 100%;
    height: auto;
  }

  .presentation h2 {
    font-size: 28px;
  }

  .presentation p {
    font-size: 16px;
  }

  /* ACTIVITIES */
  .activities {
    padding: 60px 20px;
    gap: 30px;
  }

  .activity {
    max-width: 100%;
    width: 100%;
  }

  .activity h3 {
    font-size: 22px;
  }

  .activity p {
    font-size: 15px;
  }

  /* REVIEWS */
  .reviews {
    padding: 60px 20px;
  }

  .reviews h2 {
    font-size: 26px;
    margin-bottom: 36px;
  }

  .reviews-container {
    gap: 20px;
  }

  .review-card {
    max-width: 100%;
    width: 100%;
  }

  /* FOOTER */
  .footer-container {
    flex-direction: column;
    gap: 0px;
    padding: 0 20px;
  }

  .footer-col {
    min-width: unset;
    width: 100%;
  }

  .footer-col h4 {
    margin-top: 40px;
    margin-bottom: 16px;
  }

  .footer-brand p {
    max-width: 100%;
    margin-top: 0;
  }

  .footer-logo {
    width: 130px;
    margin-top: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 20px;
    margin-bottom: 24px;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
  }

  .footer-legal a {
    font-size: 13px;
  }

}

/* NAVBAR - texte court sur mobile, long sur desktop */
@media (min-width: 769px) {
  .nav-mobile { display: none; }
  .nav-desktop { display: inline; }
}

@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: inline; }
}