/*================================================
  ROOT & VARIABLE SYSTEM
================================================*/
:root{
  /* Monochrome Palette */
  --clr-bg: #e8eaec;
  --clr-bg-light: #f5f6f7;
  --clr-bg-dark: #d1d3d6;
  --clr-surface: #eceeef;
  --clr-surface-dark: #c5c7ca;
  --clr-accent: #60656b;      /* Subtle accent within monochrome */
  --clr-text: #222222;
  --clr-text-light: #ffffff;

  /* Typography */
  --ff-heading: 'Poppins', sans-serif;
  --ff-body: 'Work Sans', sans-serif;

  /* Neumorphism */
  --shadow-raised: -6px -6px 12px rgba(255,255,255,0.9),
                    6px 6px 12px rgba(0,0,0,0.12);
  --shadow-inset:  inset -4px -4px 8px rgba(255,255,255,0.8),
                    inset 4px 4px 8px rgba(0,0,0,0.12);

  /* Radius & Spacing */
  --radius: 14px;
  --gap: 2rem;

  /* Animation */
  --transition: 0.35s cubic-bezier(.25,.8,.25,1.25); /* elastic */
}

/* Dark Mode Support */
body.dark-mode{
  --clr-bg: #1f1f22;
  --clr-bg-light: #2b2b2e;
  --clr-bg-dark: #131315;
  --clr-surface: #252528;
  --clr-surface-dark: #1a1a1d;
  --clr-accent: #8c8f94;
  --clr-text: #f1f1f1;
  --clr-text-light: #ffffff;
  --shadow-raised: -6px -6px 12px rgba(255,255,255,0.04),
                    6px 6px 12px rgba(0,0,0,0.8);
  --shadow-inset:  inset -4px -4px 8px rgba(255,255,255,0.02),
                    inset 4px 4px 8px rgba(0,0,0,0.9);
}

/*================================================
  GLOBAL ELEMENTS
================================================*/
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--ff-body);
  color:var(--clr-text);
  background:var(--clr-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Typography */
h1,h2,h3,h4,h5{
  font-family:var(--ff-heading);
  color:var(--clr-text);
  text-align:center;
  line-height:1.2;
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
  margin-bottom:1rem;
}
p{margin-bottom:1rem}
.center{text-align:center}
.light-text{color:var(--clr-text-light)}

/* Containers */
.container{
  width:min(90%,1200px);
  margin-inline:auto;
}
.is-two-thirds{width:min(90%,800px);margin-inline:auto}

/* Utility */
.neumorph{
  background:var(--clr-surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
}
.parallax{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/*================================================
  HEADER & NAVIGATION
================================================*/
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--clr-surface);
  box-shadow:var(--shadow-raised);
}
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}
.logo {
  display: flex;
  align-items: center;
}
.logo a{
  font-size:1.5rem;
  font-family:var(--ff-heading);
  color:var(--clr-text);
  text-decoration:none;
}
#main-nav ul{
  list-style:none;
  display:flex;
  gap:1.5rem;
}
#main-nav a{
  color:var(--clr-text);
  text-decoration:none;
  font-weight:500;
  position:relative;
}
#main-nav a::after{
  content:'';
  position:absolute;
  width:0%;
  height:2px;
  background:var(--clr-accent);
  left:0;bottom:-4px;
  transition:width var(--transition);
}
#main-nav a:hover::after{width:100%}

/* Burger */
.burger{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
}
.burger span{
  width:25px;
  height:3px;
  background:var(--clr-text);
  border-radius:3px;
  transition:all .3s ease;
}

/*================================================
  HERO
================================================*/
.hero-section{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6rem 1.5rem;
  color:var(--clr-text-light);
  position:relative;
}
.hero-title{
  font-size:clamp(2rem,5vw,3.5rem);
  margin-bottom:1rem;
  color:#ffffff;
}
.hero-subtitle{
  font-size:1.25rem;
  margin-bottom:2rem;
  max-width:40rem;
  margin-inline:auto;
  color:#fdfdfd;
}

/*================================================
  BUTTONS
================================================*/
.btn,
button,
input[type='submit']{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:.75rem 1.75rem;
  font-family:var(--ff-heading);
  font-weight:600;
  font-size:1rem;
  border-radius:var(--radius);
  background:var(--clr-surface);
  color:var(--clr-text);
  box-shadow:var(--shadow-raised);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease;
}
.btn.neumorph{background:var(--clr-surface-dark);color:var(--clr-text-light)}
.btn.ghost{background:transparent;box-shadow:none;border:2px solid var(--clr-accent)}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:-4px -4px 8px rgba(255,255,255,0.7),
              4px 4px 8px rgba(0,0,0,0.15);
}

/*================================================
  SECTION GENERICS
================================================*/
.section{padding:4rem 1rem}
.section-title{margin-bottom:2rem}

/*================================================
  CARDS & GALLERIES
================================================*/
.cards-wrapper{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.card{
  background:var(--clr-surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .35s ease;
}
.card:hover{transform:translateY(-4px)}
.card-image{
  width:100%;
  height:230px;
  overflow:hidden;
  border-radius:var(--radius);
  margin-bottom:1rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.card-content h3{margin-bottom:.5rem}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.gallery .image-container{
  height:300px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-raised);
}
.gallery img{
  width:100%;height:100%;object-fit:cover;display:block
}

/*================================================
  TIMELINE
================================================*/
.timeline{
  list-style:none;
  position:relative;
  padding-left:2rem;
}
.timeline::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:var(--clr-accent);
}
.timeline li{
  margin-bottom:2rem;
  position:relative;
}
.timeline-content{
  background:var(--clr-surface);
  padding:1rem 1.25rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
}
.timeline-content::before{
  content:'';
  position:absolute;
  left:-1.1rem;
  top:1rem;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--clr-accent);
}

/*================================================
  TOGGLE SWITCH
================================================*/
.switch{
  position:relative;
  display:inline-block;
  width:50px;height:26px;
  margin-right:.5rem;
}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;
  cursor:pointer;
  top:0;left:0;right:0;bottom:0;
  background:var(--clr-accent);
  border-radius:34px;
  transition:.4s;
}
.slider:before{
  position:absolute;
  content:'';
  height:20px;width:20px;
  left:3px;bottom:3px;
  background:var(--clr-bg-light);
  border-radius:50%;
  transition:.4s;
}
input:checked + .slider{background:var(--clr-text)}
input:checked + .slider:before{transform:translateX(24px)}
.slider.round{border-radius:34px}
.slider.round:before{border-radius:50%}
.toggle-label{vertical-align:middle}

/*================================================
  MODALS
================================================*/
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease;
  z-index:2000;
}
.modal.active{visibility:visible;opacity:1}
.modal-content{
  background:var(--clr-surface);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
  width:min(90%,500px);
  max-height:80vh;
  overflow-y:auto;
  position:relative;
}
.modal .close{
  position:absolute;
  top:12px;right:16px;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--clr-accent);
}

/*================================================
  FORM ELEMENTS
================================================*/
form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
input,textarea{
  padding:.75rem 1rem;
  border:none;
  border-radius:var(--radius);
  background:var(--clr-surface);
  color:var(--clr-text);
  box-shadow:var(--shadow-inset);
  resize:vertical;
  font-family:var(--ff-body);
}
input:focus,textarea:focus{outline:none;box-shadow:var(--shadow-raised)}

/*================================================
  FOOTER
================================================*/
.footer{
  background:var(--clr-surface-dark);
  color:var(--clr-text-light);
  padding:2rem 1rem;
}
.footer .columns{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:space-between;
}
.footer-nav,
.social{
  list-style:none;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.footer a{
  color:var(--clr-text-light);
  text-decoration:none;
  position:relative;
}
.footer a::after{
  content:'';
  position:absolute;
  width:0;height:2px;
  left:0;bottom:-4px;
  background:var(--clr-text-light);
  transition:width .25s ease;
}
.footer a:hover::after{width:100%}

/* Social “icon” text styling */
.social li a{
  padding:.25rem .5rem;
  border:1px solid var(--clr-text-light);
  border-radius:var(--radius);
  transition:background .3s ease,color .3s ease;
}
.social li a:hover{
  background:var(--clr-text-light);
  color:var(--clr-surface-dark);
}

/*================================================
  SECTION-SPECIFIC TWEAKS
================================================*/
#ressources ul{padding-left:1rem}
#ressources li{margin-bottom:.5rem}
#ressources a{color:var(--clr-accent);font-weight:500;text-decoration:none}
#ressources a:hover{text-decoration:underline}

/*================================================
  SUCCESS PAGE
================================================*/
.success-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--clr-bg);
}
.success-wrapper h2{font-size:2rem}

/*================================================
  PRIVACY & TERMS PAGES
================================================*/
.legal-page{
  padding-top:100px;
  padding-inline:1rem;
  max-width:900px;
  margin-inline:auto;
}

/*================================================
  COOKIE POPUP OVERRIDES
================================================*/
#cookiePopup{
  font-size:.9rem;
}
#cookiePopup button:hover{background:var(--clr-accent);color:var(--clr-text-light)}

/*================================================
  RESPONSIVE
================================================*/
@media (max-width:768px){
  #main-nav{
    position:fixed;
    inset:0 0 0 30%;
    background:var(--clr-surface);
    transform:translateX(100%);
    transition:transform .4s ease;
    padding:4rem 2rem;
  }
  #main-nav.open{transform:translateX(0)}
  #main-nav ul{flex-direction:column;gap:2rem}
  .burger{display:flex}
}

/*================================================
  SMOOTH FADE-IN ON SCROLL (ScrollReveal placeholder)
================================================*/
[data-sr]{
  visibility:hidden;
}