@font-face {
    font-family: Harbara;
    src: url(../font/Harabara.ttf) format('truetype'),
         url('/font/Harabara.woff2') format('woff2'),
         url('/font/Harabara.woff') format('woff'),
}

@font-face {
    font-family: Satoshi;
    src: url(../font/Satoshi-Variable.ttf);
}

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

:root {
    --blue:   #3255a4;  
    --green:  #00A95C;  
    --yellow: #FFE800;  
    --red:    #ff1919;  
    --white:  #FFFFFF;
    --black:  #000000;
    /* Pour de petites animations */
    --transition-default: 0.3s ease-in-out;
  }

  /* ==================== RESET DE BASE ==================== */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  /* ==================== TYPOGRAPHIE ==================== */

  body {

    font-family: "Open Sans", sans-serif;

    background-color: #b8ddff; /* couleur de fond globale */

    color: #333;

    overflow-x: hidden; /* évite le scroll horizontal */

  }



  #reservation{

    font-weight: 700;

    color: var(--blue);

  }



  .footer{

    display: flex ;

    min-height: fit-content;

    padding: 0;

    align-content: center;

    flex-direction: row;

    justify-content: space-between

  }



  .fa-brands{

    scale: 2;

    width: 50px;

  }



  /* ========== BLOCS (RESPONSIVE) ========== */

div.block {

  background-color: white;

  border-radius: 25px;

  max-width: 1200px;

  margin: auto;

  margin-inline: 300px;

  padding-block: 20px;

  padding-inline: 10rem;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



@media (max-width: 992px) {

  div.block {

    margin-inline: 100px; /* Réduit les marges horizontales */

    padding-inline: 1.5rem; /* Ajuste le rembourrage interne */

  }

}



@media (max-width: 768px) {

  div.block {

    margin-inline: 20px; /* Réduit davantage les marges */

    padding-inline: 1rem; /* Resserre le rembourrage */

  }

}





    h2, h3 {

    font-family: Satoshi;

  }



  h1{

    font-family: Harabara;

    font-size: 2.5rem;

  }



  /* ==================== LIENS ==================== */

  a {

    text-decoration: none;

    color: inherit;

    transition: opacity var(--transition-default);

  }



  ul {

    list-style-type: none; /* Supprime les puces */

    margin-block: 20px;

  }



  li{

    margin: 6px 0;

    padding: 10px;

  }



  li.dons {

      border-radius: 8px;

      background-color: #95ccab;

      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

      transition: transform 0.2s ease, background-color 0.3s ease;

  }



  li:hover {

      transform: scale(1.05); /* Agrandit légèrement au survol */

  }



  a:hover {

    opacity: 0.8;

  }



  img{

    border-radius: 15px;

  }



  p{

    font-family: Satoshi;

  }



  /* ==================== BARRE DE DONS FIXÉE ==================== */

  .donation-bar {

    position: fixed;

    left: 50%;

    transform: translateX(-50%);

    bottom: 1.5rem;

    width: 70%;

    background-color: var(--white);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.8rem 1.2rem;

    border-radius: 9999px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    z-index: 999;

  }

  .donation-info {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex: 1;

  }

  .donation-amount, .donation-goal {

    background-color: var(--blue);

    color: var(--white);

    padding: 0.4rem 0.8rem;

    border-radius: 16px;

    font-weight: bold;

    font-size: 0.9rem;

    box-shadow: 0 3px 6px rgba(0,0,0,0.1);

  }

  .progress-bar {

    flex: 1;

    height: 12px;

    background-color: #ddd;

    border-radius: 6px;

    margin: 0 1rem;

    overflow: hidden;

    position: relative;

  }

  .progress-fill {

    background-color: var(--blue);

    height: 100%;

    width: 5%; /* Pour l’exemple */

    border-radius: 6px 0 0 6px;

    transition: width 0.4s ease;

  }

  .donation-bar button {

    padding: 0.5rem 1rem;

    background-color: var(--blue);

    color: var(--white);

    border: none;

    border-radius: 24px;

    font-size: 0.9rem;

    cursor: pointer;

    transition: background-color var(--transition-default);

    box-shadow: 0 3px 6px rgba(0,0,0,0.1);

  }

  .donation-bar button:hover {

    background-color: #005e94;

  }



  /* ==================== HEADER (PLEINE HAUTEUR) ==================== */

  header {

    position: relative;

    min-height: 100vh; 

    /* Dégradé pour le fond du header (desktops) */

    background: var(--blue) 45%;

    overflow: hidden; 

  }



  /* ==========  NAVIGATION / MENU BURGER  ========== */

  .top-nav {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    padding: 1rem 2rem;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: space-between;

  }

  /* Le bloc ul qui contient les liens */

  .menu-links {

    margin-left: 20px;

    display: flex;

    gap: 1rem;

  }

  .menu-links a {

    text-decoration: none;

    color: var(--white);

    font-weight: 600;

    padding: 0.5rem 0.7rem;

    border-radius: 4px;

    transition: background-color var(--transition-default);

  }

  .menu-links a:hover {

    background-color: rgba(255,255,255,0.2);

  }



  /* Bouton burger (pour mobile) */

  .burger-btn {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

  }

  .burger-btn span {

    width: 25px;

    height: 3px;

    background-color: var(--white);

    border-radius: 2px;

  }



  /* ==========  MODE MOBILE  ========== */

  @media (max-width: 992px) {

    /* On affiche le bouton burger, on masque les liens au départ */

    .burger-btn {

      display: flex;

    }

    .menu-links {

      position: absolute;

      top: 100%;

      right: 0;

      background-color: rgba(0,0,0,0.85);

      flex-direction: column;

      align-items: flex-start;

      gap: 0;

      width: 200px;

      padding: 1rem;

      transform: translateY(-200%);

      opacity: 0;

      pointer-events: none;

      transition: transform var(--transition-default), opacity var(--transition-default);

    }

    .menu-links a {

      width: 100%;

      padding: 0.75rem 1rem;

      border-radius: 0;

    }

    /* Classe qui ouvre le menu */

    .menu-links.open {

      transform: translateY(0);

      opacity: 1;

      pointer-events: auto;

    }

  }



  /* HERO SECTION CONTENT : 2 COLONNES (SUR DESKTOP) */

  .hero-section-content {

    display: flex;

    width: 100%;

    min-height: 100vh; /* occupe toute la hauteur de l'écran */

    position: relative;

    z-index: 1;

  }



  /* Colonne gauche */

  .hero-text {

    flex: 0 0 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #fff;

    padding: 3rem;

  }

  .hero-text h1 {

    font-size: 7rem;

    margin-bottom: 1rem;

    line-height: 1.2;

    color: var(--white);

    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

  }

  .hero-text h2 {

    font-size: 1.8rem;

    margin-bottom: 1rem;

    font-weight: normal;

    color: var(--yellow);

    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

  }

  .hero-text p {

    font-size: 1rem;

    margin-bottom: 1.5rem;

    line-height: 1.5;

    max-width: 90%;

  }

  .cta-button {

    display: inline-block;

    width: fit-content;

    padding: 0.8rem 1.5rem;

    background-color: var(--yellow);

    color: #333;

    text-decoration: none;

    border-radius: 24px;

    font-weight: bold;

    transition: background-color var(--transition-default);

  }

  .cta-button:hover {

    background-color: #f2da00;

  }



  /* Colonne droite : image */

  .hero-image {

    flex: 1; 

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    overflow: hidden;

    padding: 2rem;

  }

  .hero-image img {

    width: 70%;  

    height: auto;

    max-height: 100vh;

    object-fit: cover;

    border-radius: 0;

    box-shadow: 0 10px 15px rgba(0,0,0,0.2);

    transition: transform var(--transition-default);

  }

  .hero-image img:hover {

    transform: scale(1.03);

  }



  /* ========== Adaptation de la “hero” pour le MOBILE ========== */

  @media (max-width: 992px) {

.hero-section-content {

  position: relative;

  min-height: 100vh;

  flex-direction: column;

}



/* L'image occupe toute la hauteur et la largeur */

.hero-image {

  position: relative;       /* On précise position: relative */

  width: 100%;

  min-height: 100vh;

  padding: 0;

  z-index: 1;               /* Z-index plus bas que le texte */

}



.hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  max-height: none;

  display: block;

}



/* Le texte se superpose à l'image grâce à "position: absolute" et un z-index élevé */

.hero-text {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2;               /* Pour être au-dessus de l'image */

  width: 100%;

  min-height: 100vh;

  background-color: rgba(0, 0, 0, 0.3); /* Fond transparent foncé */

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 2rem;

}



/* On force la couleur du texte en blanc pour la lisibilité */

.hero-text h1,

.hero-text h2,

.hero-text p {

  color: #fff;

}



.hero-text h1 {

  font-size: 2rem;

  margin-bottom: 1rem;

}



.hero-text h2 {

  font-size: 1.2rem;

  margin-bottom: 1rem;

}



.hero-text p {

  font-size: 1rem;

  margin-bottom: 1.5rem;

}



.cta-button {

  align-self: start; /* ou center, selon tes préférences */

}

}



   



  /* ==================== SECTIONS (PLEIN ÉCRAN) ==================== */

  section {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    padding: 2rem;

  }



  /* ========== SECTION 1 : CARROUSEL (ADH65) ========== */

  .carrousel-section {

    background-image: url("../images/15.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

  }

  .carrousel-title-section {

    text-align: center;

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;

    color: #333;

  }

  .carousel-container {

    position: relative;

    z-index: 1;

    background-color: var(--white);

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    padding: 2rem;

    display: flex;

    flex-wrap: wrap;

    margin: 0 auto;

    max-width: 1200px;

  }

  .text-block {

    flex: 1 1 300px;

    padding: 1rem 2rem;

    color: #333; 

  }

  .text-block h2 {

    color: var(--blue);

    margin-bottom: 1rem;

    font-weight: bold;

    font-size: 1.5rem;

  }

  .text-block p {

    line-height: 1.8;

  }

  .carousel-slides {

    position: relative;

    flex: 1 1 300px;

    background-color: #f0f6fb;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1rem;

    margin-bottom: 1rem;

  }

  .slide-one {

    display: none;

  }

  .slide-one.active {

    display: block;

    text-align: center;

    color: #333;

  }

  .carousel-arrows {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    pointer-events: none;

  }

  .arrow-btn {

    pointer-events: auto;

    background-color: var(--white);

    border: 1px solid #ccc;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 1.2rem;

    transition: background-color var(--transition-default);

    user-select: none;

    box-shadow: 0 3px 6px rgba(0,0,0,0.1);

  }

  .arrow-btn:hover {

    background-color: #f0f0f0;

  }

  .arrow-left {

    margin-left: 1rem;

  }

  .arrow-right {

    margin-right: 1rem;

  }

    .carousel-slides img {

width: 100%;

height: auto;

display: block;

/* éventuellement un border-radius ou une ombre, par ex. */

border-radius: 8px;

box-shadow: 0 3px 6px rgba(0,0,0,0.15);

}

  @media (max-width: 768px) {

    .carousel-container {

      flex-direction: column;

    }

  }



  /* ========== SECTION 2 : FESTIVAL / DONS ========== */

  .festival-section {

    background-image: url("../images/3.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

  }

  .festival-section-inner {

    position: relative;

    z-index: 1;

    background-color: var(--white);

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    padding: 1.5rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 2rem;

    max-width: 1200px;

    margin: 0 auto;

  }

  .left-festival {

    flex: 1 1 300px;

    color: #333;

  }

  .left-festival h1 {

    font-size: 1.8rem;

    margin-bottom: 1rem;

    color: var(--green);

  }

  .left-festival h1 em {

    font-style: italic;

    font-weight: bold;

  }

  .left-festival p {

    line-height: 1.5;

    margin-bottom: 1rem;

  }

  .donation-button {

    display: inline-block;

    margin-top: 2rem;

    padding: 1rem 1.8rem;

    width: 10rem;

    background-color: var(--green);

    color: var(--white);

    border: none;

    border-radius: 24px;

    cursor: pointer;

    font-size: 1rem;

    transition: background-color var(--transition-default);

    box-shadow: 0 3px 6px rgba(0,0,0,0.1);

    font-weight: 600;

  }

  .donation-button:hover {

    background-color: #95ccab;

  }

  .right-donation {

    flex: 1 1 300px;

    background-color: var(--green);

    color: white;

    border-radius: 12px;

    padding: 1.5rem;

    text-align: center;

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);

  }

  .right-donation p {

    line-height: 1.5;

  }

  @media (max-width: 768px) {

    .festival-section-inner {

      flex-direction: column;

      align-items: center;

    }

    .left-festival,

    .right-donation {

      max-width: 600px;

      width: 100%;

    }

    .left-festival h1 {

      text-align: center;

    }

  }



  /* ========== SECTION PROGRAMME (FRISE ANIMÉE) ========== */

  .programme-section {

    background-image: url("../images/4.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

  }

  .programme-section h2 {

    text-align: center;

    font-size: 2.5rem;

    font-family: Harabara;

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;

    color: var(--black);

    

  }

  .timeline-container {

    position: relative;

    width: 100%;

    margin: 0 auto;

    padding: 2rem 0;

    max-width: 800px;

    background-color: var(--white);

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    z-index: 1;

    overflow: hidden;

  }

  .timeline-line {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 2px;

    height: 560px;

    background: repeating-linear-gradient(

      to bottom,

      #000,

      #000 4px,

      transparent 4px,

      transparent 8px

    );

  }

  .scroll-circle {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: var(--red);

    border: 2px solid var(--white);

    box-shadow: 0 0 0 2px var(--red);

    pointer-events: none;

    transition: top var(--transition-default);

  }

  @media (max-width: 768px) {

    .timeline-container {

      padding: 2rem 1rem; /* Réduit le padding pour les petits écrans */

    }

  

    .timeline-line {

      height: auto; /* Permet à la hauteur de s'adapter */

      min-height: 94%; /* Garantit que la ligne s'étend sur toute la hauteur du contenu */

    }

  

    .scroll-circle {

      width: 16px; /* Réduit la taille du cercle pour s'adapter */

      height: 16px;

      top: 0; /* Réinitialise la position de départ */

    }

  }

  

  .time-item {

    position: relative;

    width: 45%;

    margin-bottom: 2rem;

  }

  .time-item h3 {

    font-size: 2rem;

    margin-bottom: 0.5rem;

    color: var(--red);

    font-weight: 1000;

  }

  .time-item p {

    margin-bottom: 1rem;

    font-weight: 900;

    margin-left: 1rem;

    line-height: 1.4;

    color: #333;

  }

  .left-event {

    left: 0;

    text-align: right;

    margin-right: 50%;

    padding-right: 2rem;

  }

  .right-event {

    right: 0;

    margin-left: 50%;

    padding-left: 2rem;

  }

  .connector {

    position: absolute;

    top: 10px;

    width: 50px;

    height: 2px;

  }

  .left-event .connector {

    right: -50px;

  }

  .right-event .connector {

    left: -50px;

  }



  /* ========== SECTION 3 : NOUVEAU SLIDER (SOUTENU PAR...) ========== */

  .new-slider-section {

    background-image: url("../images/5.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

  }

  .new-slider-title {

    text-align: center;

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;

    color: var(--white);

    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);

  }

  .slider-container-2 {

    position: relative;

    border-radius: 20px;

    max-width: 1200px;

    margin: 0 auto;

    padding: 2rem;

    background-color: var(--white);

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    z-index: 1;

  }

  .slides-2 {

    width: 100%;

  }

  .slide-2 {

    display: none;

    width: 100%;

  }

  .slide-2.active-2 {

    display: block;

  }

  .slide-content-2 {

display: flex;

flex-wrap: wrap;

background-color: #fff;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

/* Si tu veux que .photo-area-2 et .text-area-2 

   aient chacun 50% de la largeur en desktop, 

   tu peux garder "flex" et "flex: 1" ci-dessous. */

}



.text-area-2 {

flex: 1 1 400px; 

padding: 2rem;

/* ...autres styles... */

}



.photo-area-2 {

flex: 1 1 400px;

background-color: transparent; /* ou supprime cette ligne */

position: relative;

padding: 0;   /* supprime l'espace interne */

margin: 0;    /* au cas où il y aurait un margin */

display: flex;  /* tu peux garder flex si tu veux */

justify-content: center; /* si besoin */

align-items: center;     /* si besoin */

}



/* L'image */

.photo-area-2 img {

width: 100%;

height: 100%;

object-fit: cover;

display: block; /* évite les espaces résiduels */

}





  .text-area-2 h2 {

    color: var(--blue);

    margin-bottom: 1rem;

    font-size: 2rem;

    font-family: Harabara;

  }

  .text-area-2 p {

    line-height: 1.5;

    margin-bottom: 1rem;

  }

  .photo-area-2 {

    flex: 1 1 400px;

    background-color: var(--blue);

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    padding: 2rem;

    font-size: 2rem;

    color: #444;

    text-transform: uppercase;

    font-weight: bold;

  }

  /* Flèches internes */

  .slider-arrow-left,

  .slider-arrow-right {

    position: absolute;

    background-color: #000;

    color: #fff;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 1.2rem;

    cursor: pointer;

    transition: background-color var(--transition-default);

  }

  .slider-arrow-left,

.slider-arrow-right {

position: absolute;

top: 50%;                   /* place le centre à 50% de la hauteur */

transform: translateY(-50%); /* recule de moitié de la hauteur de l’élément */

}



/* On conserve left/right pour l’horizontal */

.slider-arrow-left {

left: 1rem;

}

.slider-arrow-right {

right: 1rem;

}



  .slider-arrow-left:hover,

  .slider-arrow-right:hover {

    background-color: #333;

  }

  .slider-dots-2 {

    display: flex;

    gap: 0.5rem;

    justify-content: center;

    margin-top: 1rem;

  }

  .slider-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ccc;

    cursor: pointer;

    transition: background-color var(--transition-default);

  }

  .slider-dot.active-2 {

    background-color: #333;

  }

  @media (max-width: 768px) {

    .slide-content-2 {

      flex-direction: column;

    }

  }



  /* ========== SECTION PHOTO FINALE ========== */

  .photo-section {

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    padding: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

  }

  .photo-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background-color: rgba(255,255,255,0.3);

    z-index: 0;

  }

  .photo-section h2 {

    position: relative;

    z-index: 1;

    color: var(--white);

    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);

    margin-bottom: 1rem;

  }

  .photo-section img {

    position: relative;

    z-index: 1;

    max-width: 80%;

    height: auto;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.4);

    margin-top: 1rem;

  }



  /* ========== INFORMATIONS UTILES ========== */

  .useful-info {

    background-image: url("../images/7.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #333;

  }
  .useful-info2 {
    background-image: url("../images/8.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #333;
  }

  .useful-info h2 {

    font-family: Harabara;

    font-size: 3rem !important;

    text-align: center;

    color: var(--blue);

    margin-bottom: 1rem;

    font-size: 1.8rem;

  }

  .useful-info p {

    line-height: 1.8;

    margin-bottom: 1rem;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

  }



  /* ========== INFORMATIONS UTILES (RESPONSIVE) ========== */

.useful-info {

  background-image: url("../images/7.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: #333;

}



.useful-info h2 {

  font-family: Harabara;

  font-size: 2rem;

  text-align: center;

  color: var(--blue);

  margin-bottom: 1rem;

}



.useful-info p {

  line-height: 1.8;

  margin-bottom: 1rem;

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

}



@media (max-width: 768px) {

  .useful-info {

    padding: 1.5rem;

  }



  .useful-info h2 {

    font-size: 1.5rem;

  }



  .useful-info p {

    font-size: 0.9rem;

    max-width: 90%;

  }

}





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

  footer {

    background-color: var(--blue);

    color: var(--white);

    text-align: center;

    padding: 1rem;

    position: relative;

  }

  footer a {

    color: var(--yellow);

    text-decoration: underline;

    transition: opacity var(--transition-default);

  }

  footer a:hover {

    opacity: 0.8;

  }