/* Reset et styles généraux */
body, html {
    height: 100%;
    margin: 0;
   /*  font-family: Arial, sans-serif; */
    overflow-x: hidden; /* Évite le défilement horizontal non souhaité */
    scroll-behavior: smooth;
}

/* bloc landing page chevauché*/
.container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 210px; /* Ajoute de l'espace pour le logo */
   /*  border: 1px solid black; */
  }
  
  /* Blocs individuels */
  .block {
    position: absolute;
    width: 70%;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Premier bloc - gris */
  .gray {
    background-color: #777; /* Gris du logo */
    top: -30px; /*0;*/
    width:60%; /*40%;/*30*/
    left: -9%;/*13%; /* 22 Décalage progressif */
    z-index: 3;
    border: 1px solid black;
    font-size: large;
  }
  
  /* Deuxième bloc - orange */
  .orange {
    background-color:rgb(230, 126, 34); /* #ffa500; */
    top: -20px; /*20px; /* Décalage vertical */
    width: 60%; /*35%; 25*/
    right: -9%;/* 13%; /* 23 */
    z-index: 2;
    border: 1px solid black;

    padding: 10px;

    font-size: large;
  }
 
  /* Troisième bloc - noir */
  .black {
    background-color: #000; /* Noir */
    top: 110px; 
    width: 60%; /* 50%; */
    left: 20% ;/*25%;*/
    z-index: 4;

    display: flex; 
    justify-content: center; 
    align-items: center; 

    padding-top: 15px;    
    text-align: center;
    padding: 0; 
    margin: 0; 
    height: 100px; 

    font-size: large;

    position: absolute;
    left: 50%; transform: translateX(-50%) rotate(calc(-5deg + 10deg * var(--rotation)));
    
}
.black i {
   position: absolute;
   left: 20px; 
}

.black {   --rotation: -0.009; z-index: 20;}
.orange {  --rotation: 0.8; z-index: 10;}
.gray {  --rotation: -0.4; z-index: 5;}


@media (max-width: 767px) {
    .block {
        font-size: 14px;
    }
    .container {
        padding-top: 260px; /* Ajoute de l'espace pour le logo */
      }
    .black {
       
        top: 160px; /* Décalage vertical */
        width: 94%;
         left: 3%;
         padding: 5px;
         padding-top: 13px;
         height: 70px;
         z-index: 2;
    }
   
    .orange {
      
        top: 40px; /* Décalage vertical */
        width:50%;
        right: 0.5%;
        z-index:3;
        padding: 5px;
         height:auto; 
          border: 1px solid black;
      }
      .gray {
       
        top: 55px;
        width:50%;
        left: 0.5%; /* Décalage progressif */
        z-index: 1;
        padding: 5px;
        /* height:80px; */
      }
      
}

  
/* Navbar */


.transparent-navbar {
    background-color: rgba(255, 255, 255, 0.4); /* Transparence */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
}

.transparent-navbar .navbar-nav .nav-link {
    /* color: #e67e22; */
    color: black;
    font-weight: bold;
    transition: color 0.3s ease;
}

.transparent-navbar .navbar-nav .nav-link:hover {
    color: #fdfd96 ; /*e67e22; /* #f1c40f;*/
}

.transparent-navbar .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligné à gauche en mode bureau */
}

.transparent-navbar .navbar-brand img {
    height: 50px;
    transition: all 0.3s ease;
}

/* Positionnement du logo pour la navbar */
.logo-container {
    display: flex;
    justify-content: flex-start; /* Aligné à gauche par défaut */
}

/* En mode mobile : centrer le logo */
/* En mode mobile : centrer le logo sur toute la navbar */
@media (max-width: 767px) {
    .transparent-navbar {
        display: flex; /* Activer Flexbox pour la navbar entière */
        justify-content: space-between; /* Espace entre le logo et le menu burger */
        align-items: center; /* Centre les éléments verticalement */
        padding: 0 15px; /* Ajout de marges latérales pour éviter que les éléments collent aux bords */
    }
    .transparent-navbar .navbar-brand {
        margin: 0 auto;
        display: flex;
        justify-content: left; /* Centre le logo */
        flex: 1; /* Permet au logo d'occuper l'espace central disponible */
    }
    .navbar-toggler {
        margin-left: auto; /* Garde le menu burger aligné à droite */
    }
}

/* Hero Section */
.hero {
    height: auto; /* Permet à Hero de s'adapter au contenu */
    min-height: 100vh; /* Garantit qu'il occupe au moins la hauteur de la fenêtre */

   /*  height: 100vh; */
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
                url('img/fond03.webp') no-repeat center center/cover;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne le contenu vers le haut */
    align-items: center;
    text-align: center;
    padding-top: 80px; /* Ajoute un espace en haut */
    /* filter: brightness(0.9) saturate(0.7); /* Réduit la saturation et ajuste la luminosité */ 
}

.hero .text-block {
    padding: 40px;
    padding-top: 0;
    border-radius: 10px;
    text-align: center; /* Centre le contenu du bloc */
    width: 80%; /* Largeur fixe */
    justify-content: center;
    color:#000000;
}
.hero .hero-title {
    font-family: "Bangers", system-ui;
    font-weight: 200;
    font-style: normal;
    font-size:42px;
    color:#000000;
    /* text-shadow: 
                1px 1px 0 white, 
                -1px 1px 0 white, 
                1px -1px 0 white, 
                -1px -1px 0 white; */ /* Contour blanc d'1px */

   /*  font-family: "huntress";
    font-weight: 400;
    font-style: normal;
    font-size:42px;
    color:#000000; */
}

.hero .text-block b {
    /* font-family: "Bangers", system-ui; */
    font-family: "huntress";
    font-weight: 200;
    font-style: normal;
    font-size:42px;
    color:#000000;
    /* text-shadow: 
                1px 1px 0 white, 
                -1px 1px 0 white, 
                1px -1px 0 white, 
                -1px -1px 0 white; */ /* Contour blanc d'1px */
}

.hero .text-block h1 {
    font-size: 3rem;
}

.hero .text-block h2 {
    font-family: "Life Savers", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 50px;
}

.hero .logo {
    display: block; /* Transforme l'image en bloc pour appliquer margin */
    margin: 0 auto; /* Centre l'image horizontalement */
    width: 750px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero .button-container {
    margin-top: 60px;
}
 
/* couleur truc rebondissant  #fc556e;*/
.hero .btn-custom {
    padding: 15px 30px;
     padding-top: 5px;
    padding-bottom: 5px; 
    color: black;
    background-color:rgb(230, 126, 34);/*rgba(249, 155, 73) ;*/
   
    width: 220px;

    font-size: 1.2rem;
    font-weight: bold;
   /*  border-radius: 10px; */
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
     border: 1px solid black; 
   
    font-family: "Caveat", sans-serif;
    font-weight: 600;
    font-size: xx-large;
}

.hero .btn-custom:hover {
    
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    background-color:#fdfd96 ;
    
    color: black; /*#fdfd96; */
}


/* Hero Blocks */
.hero-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.hero-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.9)); /* Fond pastel */
    border-radius: 15px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.hero-block i {
    color: #e67e22;
    margin-bottom: 10px;
}

.hero-block h4 {
    font-size: 1.5rem;
    margin: 10px 0;
}

.hero-block p {
    font-size: 1rem;
    color: #333;
}

/* Lottie Animation */
.lottie-container {
    position: absolute;
    top: 35%;
    right: 2%;
    text-align: center;
    transition: position 0.3s ease-in-out;
}
.lottie-container.fixed {
    position: fixed;
    top: 20px; /* Ajuste la hauteur où il reste collé */
    right: 2%;
}
.lottie-container.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
.lottie-container h2 {
    font-family: "Caveat", sans-serif;
    font-weight: 600;
    font-size: xx-large;/*larger;*/
    text-align: center;
    margin-bottom: 0px; 
    transform: rotate(-5deg);
}
.lottie-container img {
    margin-left: -70px;
    margin-bottom: -60px;
    transform: rotate(20deg);
}
#lottie-animation {
    width: 300px;
    height: 300px;
}

/* Responsive Design */
@media (max-width: 767px) {
    .hero .logo {
        /* max-width: 380px; */
        width: 98%;
    }

    .hero .text-block {
        width: 95%;
        padding: 20px; /* Réduit les marges internes */
    }

   
    .lottie-container {
        position: static;
        margin-top: 20px;
    }

    .hero {
        height: auto; /* Permet à Hero de s'adapter au contenu */
        min-height: 100vh; /* Garantit qu'il occupe au moins la hauteur de la fenêtre */
        padding-top: 40px; /* Ajuste l'espacement pour les petits écrans */
        padding-bottom: 20px;
    }

       
    .hero-blocks {
        grid-template-columns: 1fr; /* Une seule colonne en mobile */
    }

    .hero-block {
        margin-bottom: 15px;
    }
    .hero .btn-custom {
        font-size: x-large;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
 
/*details objectifs services*/

/* Style du cadre principal (gros post-it incliné) */
.text-block-details {
   /*  background-color: #ffeb3b; */ 
    background-color: #fdfd96; /* Couleur style post-it */
    padding: 20px;
    /* border: 1px solid #f1c40f;  */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); 
    transform: rotate(-3deg); 
    position: relative; 
    margin: 20px auto; 
    max-width: 800px; 
    
}

/* Ajout d'un coin plié pour un effet réaliste */
.text-block-details::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #f1c40f, transparent);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* Texte dans le cadre pour rester lisible */
.text-block-details h1,
.text-block-details h2,
.text-block-details p {
    font-family: 'Montserrat', sans-serif;
    color: #333; /* Couleur de texte sombre pour contraste */
    margin: 10px 0;
    text-align: left;
}

/* Bouton CTA ajusté */
.text-block-details .btn {
    background-color: #f39c12;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    /* text-transform: uppercase; */
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.text-block-details .btn:hover {
    background-color: #d35400;
    transform: scale(1.05);
}
.text-block-details h1 {
    font-family: "Caveat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    margin-top: 40px;
}
.text-block-details h2 {
    font-family: "Caveat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  /*   font-size: xx-large; */
  text-align: center;
   
}
.text-block-details a {
    text-decoration: none; /* Supprime le soulignement par défaut */
    color: inherit; /* Utilise la couleur héritée pour éviter le bleu par défaut */
    font-size: 1rem;
}
.text-block-details .retour {
    font-size: 14px; 
    font-weight: bold; 
}

.text-block-details .quote {
    position: relative;
    font-size: 1.5rem; /* Taille du texte de la citation */
    font-style: italic;
    color: #333; /* Couleur du texte */
    margin: 100px auto;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 10px 10px;
    max-width: 600px; /* Limite la largeur */
    line-height: 1.2;
    justify-self: center;
    font-size: xx-large;
    font-family: "Caveat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    text-align: center;
}

.quote::before,
.quote::after {
    content: '“'; /* Guillemets ouvrants et fermants */
    font-size: 4rem; /* Taille des guillemets */
    color: #f39c12; /* Couleur des guillemets */
    position: absolute;
}

.quote::before {
    left: -10px; /* Place le guillemet ouvrant */
    top: -10px;
}

.quote::after {
    content: '”'; /* Guillemets fermants */
    right: -10px; /* Place le guillemet fermant */
    bottom: -10px;
}

@media (max-width: 767px) {
    .text-block-details {
        
         transform: rotate(-1deg); 
        
     }
    
    
    }

    

 /* bloc Accomplir */
 .accomplir {
    background-color: #abaaaa; 
    height: auto;/*100vh; /* Occupe toute la hauteur de la fenêtre */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.accomplir-content {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    text-align: left; /* Alignement à gauche pour le contenu interne */
    padding-top: 50px;
    padding-bottom: 50px;
}

.accomplir h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color:0;
    text-align: center; /* Le titre reste centré */
    font-family: "huntress";
    font-weight: 200;
    font-style: normal;
    font-size:42px;
    color:#000000;
}

.accomplir .intro-text {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: left; /* Alignement à gauche pour l'intro */
}

.accomplir p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.accomplir ul {
    list-style-type: disc;
    margin: 20px 0;
    padding-left: 20px;
    text-align: left; /* Alignement à gauche pour la liste */
}

.accomplir ul li {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/*About me*/ 
.about-me {
    background-color: rgba(249, 155, 73, 0.5);
    height: auto; /* Assure que le bloc occupe toute la hauteur de la fenêtre */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.about-me-container {
    max-width: 1000px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-me-photo {
    position: absolute;
    left: 0px; /* Marge gauche de 100px */
    top: 50%;
    transform: translateY(-50%); /* Centre la photo verticalement */
}

.about-me-photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.about-me-content {
    margin-left: 300px; /* Espace laissé pour la photo */
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

.about-me h2 {
    /* font-size: 2.5rem; */
    margin-bottom: 20px;
    font-family: "huntress";
    font-weight: 200;
    font-style: normal;
    font-size:42px;
    color:#000000;
    text-align: center;
}

.about-me p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}




.about-me .btn-custom {
    padding: 15px 30px;
    padding-top: 5px;
   padding-bottom: 5px; 
   color: black;
   background-color:rgb(230, 126, 34);/*rgba(249, 155, 73) ;*/
  
   width: 340px;

   font-size: 1.2rem;
   font-weight: bold;
  /*  border-radius: 10px; */
   text-decoration: none;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid black; 
  
   font-family: "Caveat", serif;
   font-weight: 600;
   font-size: xx-large;

   display: inline-block;
    text-align: center;
}

.about-me .btn-custom:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    background-color:#fdfd96 ;
    
    color: black; /*#fdfd96; */
}

@media (max-width: 767px) {
    .about-me-container {
        flex-direction: column; /* Aligne les éléments en colonne */
        align-items: center; /* Centre les éléments */
        padding: 20px;
    }
    .about-me-photo {
        position: static;
        transform: none;
        margin: 0 auto 20px auto; /* Centre la photo en mobile */
    }

    .about-me-content {
        margin-left: 0;
        text-align: justify; 
    }
    .about-me .btn-custom {
        margin-top: 50px;
        margin-left: 5%;
        display: block;
        text-align: center;
        width: 90%;
        font-size: x-large;
    }
}

/* Nos Engagements */

.commitments {
    background-color: #abaaaa;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.commitments-container {
    max-width: 1000px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Ajout pour gérer le responsive */
    padding-top: 50px;
    padding-bottom: 50px;
}

.commitments-photo {
    flex: 0 0 200px; /* Fixe la largeur pour la photo */
    margin: 20px;
}

.commitments-photo img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.commitments-content {
    flex: 1; /* Prend le reste de l'espace */
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

.commitments h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color:0;
    text-align: center; /* Le titre reste centré */
    font-family: "huntress";
    font-weight: 200;
    font-style: normal;
    font-size:42px;
    color:#000000;
}

.commitments ul {
    list-style-type: disc;
    margin-left: 20px;
}

.commitments ul li {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.commitments p {
    font-size: 1.2rem;
    margin-top: 20px;
    font-weight: bold;
}

@media (max-width: 767px) {
    .commitments-container {
        flex-direction: column; /* Aligne les éléments en colonne */
    }

    .commitments-photo {
        margin: 0 0 20px 0; /* Photo centrée au-dessus */
    }

    .commitments-content {
        margin: 0;
        text-align: left; /* Conserve l'alignement à gauche pour le texte */
    }

    .commitments h2 {
        text-align: center; /* Centre les titres H2 uniquement */
    }

    .commitments ul {
        margin-left: 20px; /* Liste alignée à gauche en mode mobile */
    }
}


/* footer */
.footer {
    background-color: black; /* Bleu marine foncé pour élégance et contraste */
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    margin: 10px;
}

.footer-info p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.footer-links {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #f0a500;
}

.footer-links i {
    margin-right: 5px;
}

@media (max-width: 767px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-info, .footer-links {
        margin: 10px 0;
    }
}

/* Blocs style post-it */

.tableau_blanc {
    background-color: #ffffff; /* Fond blanc pour le tableau */
    width: 1100px; /* Le tableau occupe 95% de la largeur de la page */
    margin: 0 auto; /* Centre le tableau horizontalement */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ajoute une ombre pour l'effet tableau */
    border-radius: 10px; /* Coins arrondis pour le tableau */
    padding: 30px; /* Ajoute un espace interne */
    padding-bottom: 0px;
    position: relative;
    max-height: 90%; /* Limite la hauteur du tableau blanc à 90% de la section */
   
    border: 2px solid black;

   font-family: "Caveat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
   
   margin-top: 20px;

   
}
.tableau_blanc .tableau-title {
    font-size: 60px;
    font-weight: 800;
    position: relative;
}
.tableau-title::after {
    content: ''; /* Génère la ligne de soulignement */
    position: absolute;
    left: 50%; /* Centre horizontalement */
    bottom: -5px; /* Positionne sous le texte */
    transform: translateX(-50%) rotate(-3deg); /* Centre et incline la ligne */
    width: 45%; /* Longueur de la ligne */
    height: 6px; /* Épaisseur de la ligne */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); /* Dégradé pour un effet dessiné */
    border-radius: 3px; /* Adoucit les coins */
    /* box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);  *//* Ajoute une légère ombre pour plus de réalisme */
   
} 

.tableau_blanc h4 {
    padding-top: 5px;
     font-size:large; 
     font-weight: 800;
   text-transform:uppercase;
}



.tableau_support_svg {
    position: absolute; /* Position relative au tableau blanc */
    bottom: -40px; /* Colle le support au bas du tableau blanc */
    left: 0; /* Aligne le support au bord gauche du tableau */
    width: 100%; /* Étire le SVG pour qu'il occupe toute la largeur */
    height: auto; /* Garde les proportions du SVG */
}

.objectifs-blocks {
    position: relative;
    width: 100%;
    height: 800px; /* Ajustez en fonction de la hauteur souhaitée */
    overflow: hidden; /* Évite les débordements des blocs */
    display: flex; /* Active Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement les post-it */
    align-items: center; /* Centre verticalement les post-it */



}

.objectifs-block {
    position: absolute;
    width: 200px; /* Taille des blocs */
    height: auto;
    padding: 15px;
   /*  border-radius: 5px; */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    background-color: #fdfd96; /* Couleur style post-it */
    text-align: center;
    transform: rotate(calc(-5deg + 10deg * var(--rotation)));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #000;
    font-family: "Caveat", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    /* border: 1px solid black;  */
    /* border: 1px solid #f1c40f;  */
    text-decoration: none; /* Supprime le soulignement par défaut */
    color: inherit; /* Utilise la couleur héritée pour éviter le bleu par défaut */
    font-weight: normal; /* Police normale par défaut */
    transition: font-weight 0.2s ease; /* Ajoute une transition fluide */
}
.objectifs-block {
    font-size: larger;
}    
.objectifs-block:hover {
    transform: scale(1.05) rotate(calc(-5deg + 10deg * var(--rotation)));
    -webkit-transform: scale(1.05) rotate(calc(-5deg + 10deg * var(--rotation)));
    -moz-transform: scale(1.05) rotate(calc(-5deg + 10deg * var(--rotation)));
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);

    text-decoration: none; /* Assure qu'il reste sans soulignement au survol */
    color: inherit; /* Assure qu'il conserve la couleur existante */
   /*  font-weight: bold; */ /* Devient en gras au survol */
}


/* Positions aléatoires */
.objectifs-block:nth-child(1) { top: 40px; left: 30px; --rotation: -0.5; }
.objectifs-block:nth-child(2) { top: 50px; left: 220px; --rotation: 1.5; }
.objectifs-block:nth-child(3) { top: 320px; left: 50px; --rotation: 1; }
.objectifs-block:nth-child(4) { top: 330px; left: 270px; --rotation: 0.2; }
.objectifs-block:nth-child(5) { top: 70px; left: 430px; --rotation: -1.2; }
.objectifs-block:nth-child(6) { top: 350px; left: 510px; --rotation: 1; }
.objectifs-block:nth-child(7) { top: 40px; left: 630px; --rotation: -0.5; }
.objectifs-block:nth-child(8) { top: 320px; left: 720px; --rotation: -0.42; }
.objectifs-block:nth-child(9) { top: 50px; left: 820px; --rotation: 1; }

/* Responsiveness */
@media (max-width: 767px) {
    .tableau_blanc {
        width: 96%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Espacement entre les blocs */
        margin-top: 50px;
    }
    .tableau_blanc h1 {
        font-size: 35px;
    }
    .tableau_blanc .tableau-title {
        font-size: 40px;
        font-weight: 800;
        position: relative;
    }
    .objectifs-blocks {
       /*  margin-top: 15px; */
        padding-top: 30px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Espacement entre les blocs */
    }

    .objectifs-block {
        position: static;
        margin: 0 auto;
        width: 90%; /* Adapte la taille en mobile */
        transform: rotate(calc(-3deg + 6deg * var(--rotation))); /* Légère rotation aléatoire */
    }
    .tableau_support_svg {
       
        bottom: -20px; /* Colle le support au bas du tableau blanc */
        
    }
}

/* Style général du bandeau */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8); 
    color: white;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    font-size: 14px;
}

/* Texte */
.cookie-banner p {
    margin: 0;
    flex: 1;
    padding-right: 15px;
}

/* Conteneur des boutons */
.cookie-buttons {
    display: flex;
    gap: 10px;
}

/* Boutons */
.cookie-banner button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
}

.cookie-banner button:hover {
    opacity: 0.8;
}

/* Bouton de refus */
.cookie-banner button:nth-child(2) {
    background: #d9534f;
}

/* Mode mobile : texte au-dessus, boutons en dessous */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .cookie-banner p {
        padding-right: 0;
        margin-bottom: 10px;
    }

    .cookie-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-banner button {
        width: 100%;
        padding: 12px;
    }
}

/* Nouveaux styles pour les post-its sur la landing page */
.landing-postit-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 40px;
    padding-top: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacement entre les post-its */
    flex-wrap: wrap;
  /*  border: 1px solid black;  */
}

.landing-postit {
    width: 220px; /* Taille ajustée */
    padding: 15px;
    background-color: #fdfd96; /* Jaune post-it */
    text-align: center;
    transform: rotate(calc(-5deg + 10deg * var(--rotation)));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #000;
    font-family: "Caveat", sans-serif;
    font-weight: 600;
    font-size: x-large;/*larger;*/
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    position: absolute;
}

/* Effet au survol */
.landing-postit:hover {
    transform: scale(1.05) rotate(calc(-5deg + 10deg * var(--rotation)));
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
}

/* Positions des post-its */
.landing-postit:nth-child(1) { top: -30px; left: 10%; --rotation: -0.2; z-index: 2;  ;  }/*background-color: #777; background-color:rgb(230, 126, 34)*/
.landing-postit:nth-child(2) { top: -10px; left: 50%; transform: translateX(-50%) ; --rotation: 0.8; z-index: 10; /* color:white */}
.landing-postit:nth-child(3) { top: -30px; right: 10%; --rotation: -0.005; z-index: 5;  } /*background-color:#777;*/

.landing-postit:nth-child(2):hover {
    transform: scale(1.05) rotate(calc(-5deg + 10deg * var(--rotation))) translateX(-50%);
}

.landing-postit:nth-child(1) i { color: #777; }
.landing-postit:nth-child(2)  i { color: rgb(230, 126, 34); }



@media screen and (max-width: 768px) {
    .landing-postit-container {
        padding-top: 20px;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        min-height: 250px;
        gap: 0px;
        position: relative;
    }

    .landing-postit {
        width: 180px;
        font-size: medium;
        padding: 10px;
        position: absolute;
    }

     
    /* Post-it gauche */
    .landing-postit:nth-child(1) { 
        top: 0px; 
        left: calc(50% - 120px - 17%); /* Décalé symétriquement à gauche */
        --rotation: -0.5; 
        z-index: 3; 
    }

    /* Post-it droit */
    .landing-postit:nth-child(2) { 
        top: 0px; 
        left: calc(50% + 27%); /* Décalé symétriquement à droite */
        --rotation: 0.8; 
        z-index: 2; 
    }

    /* Post-it du bas centré */
    .landing-postit:nth-child(3) { 
        top: 120px; 
        left: 50%; 
        transform: translateX(-50%) rotate(calc(-5deg + 10deg * var(--rotation))); 
        --rotation: -0.2; 
        z-index: 10; 
    } }

/* scroll reveal */
.reveal {
    opacity: 0;
   
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Effet venant du bas */
.reveal.bottom {
    transform: translateY(100px); 
}

/* Effet venant de la gauche */
.reveal.left {
    transform: translateX(-100px); 
}

/* Effet venant de la droite */
.reveal.right {
    transform: translateX(100px); /* Départ depuis la droite */
}


.reveal.visible {
    opacity: 1;
    transform: translate(0,0);
}


/* Chargement en 2eme temps de les polices huntress, caveat*/
@font-face {
    font-family: 'Huntress';
    src: url('/fonts/huntress.woff2') format('woff2'),
         url('/fonts/huntress.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat-regular.woff2') format('woff2'),
         url('/fonts/caveat-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat-bold.woff2') format('woff2'),
         url('/fonts/caveat-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FontAwesomeSolid';
    src: url('/fonts/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FontAwesomeRegular';
    src: url('/fonts/fontawesome/webfonts/fa-regular-400.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* vu seulement par les robots */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}