@charset "utf-8";
/* CSS Document */

:root {
    --primary-color: #F5A743; /* Couleur principale */
    --secondary-color: #8EA9A2; /* Couleur secondaire */
    --background-color: #fafcf9;
    --font-color: #000000;
    --accent-color:#669088;
}

h1  {
    color: #0D1D2C;
}

h1 a:visited, h1 a:link {
    color: #0D1D2C;
}
h2  {
    color: #0D1D2C;
	margin-bottom: 1em;
}
h3  {
    color: #0D1D2C;
}

.sous-titre  {
    color: #0D1D2C;
}



.dropdown:hover .dropbtn {
    background-color: #91c7ba;
}

/*afficher le bannière en haut*/

.header-container, .header-container-accueil {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.banner {
    width: 100%;
    max-width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* grand écran */
@media (min-width: 1200px) {
    .banner {
        margin-top: -3.4em;
    }
}

.banner img {min-height: 1px;
    
}

.banner picture,
.banner img {
   width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    max-height: 60vh; /* ou même 50vh si tu veux plus discret */
    filter: brightness(90%);
}

@media (min-width: 768px) and (max-width: 1080px) {
    .banner {
        margin: 0 auto;
        margin-top: 0; /* annule le décalage */
        max-width: 100%;
        height: auto;
        display: block;
	    margin-top: -3.4em;
    }

    .banner img,
    .banner picture {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    .header-container,
    .header-container-accueil {
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }
}

@media (min-width: 1400px)  {
    .banner {
        margin-bottom: 8em;
		
}
}

@media (min-width: 1200px) and (max-width: 1800px) {
    .banner {
        margin-bottom: 4em;
		
}
}
@media (max-width: 767px) {
  .banner {
    margin-top: 0 !important;
  }
}



/**ajuster la grosseur des accordéons***/

.pictogramme {
    width: 4em;
    height: 4em;
    grid-area: 1 / 1;
	margin-right: 20px;
}

/**ressources affichées*/

.ressource-bd {
   
    border-left: 5px solid #F5A743; /* Bande colorée sur le côté */
  
}



@media only screen and (max-width: 1080px) and (min-width: 768px) {
    .header-container-accueil, .titre-overlay {
        width: 90%; /* Élargit le titre et le header-container pour qu'ils restent bien centrés */
        left: 50%;
	    top: 25%;
        transform: translateX(-50%); /* Centre bien le titre */
    }

    .titre-overlay h1 {
        font-size: 2.5em; /* Réduit légèrement le texte pour éviter qu'il déborde */
    }

    .banner {
/*        height: 35vh; /* Réduit un peu la hauteur de la bannière si nécessaire */
    }
}
/****dans cette version les accordéons se collent, voici de quoi les décoller****/

.btn-outil.accordion {
    margin-bottom: 10px;
}
/**pour rétrécir les accordéons**/
.accordion  {
	padding: 10px;
}


/*  Ajustements pour tablettes */


/* 📱 Ajustements spécifiques pour mobiles */

@media (min-width: 1025px) and (max-width: 1439px) {
    .banner {
        height: 40vh;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .banner {
        height: 30vh;
    }
}

@media (min-width: 1920px) {
    .banner {
        height: 25vh;
    }
}

@media screen and (max-width: 480px) {
  
    
    .titre-overlay {
        width: 95%;
        padding: 0.6em;
        top: 50%; /* Remonte un peu le texte */
        transform: translate(-50%, -40%); /* Corrige légèrement la position */
    }

    .titre-overlay h1 {
        font-size: 2em; /* Texte plus petit pour éviter qu'il déborde */
    }
	
	.header-container, .header-container-accueil {
        width: 100%; /* Prend toute la largeur de l'écran */
        margin: 0; /* Supprime les marges */
    }

}

header {
  padding-top: 1em;
  
}


/* Correction générale */
.header-container-accueil {
  padding-top: 0 ;
  margin-top: 0 !important;
}

.banner {
  margin-top: 0 ;
  padding-top: ;
}

@media (max-width: 1024px) {
  .banner img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  .header-container-accueil {
    padding-top: 1.4em; /* adapte selon la hauteur de ton menu */
  }

  .banner {
    margin-top: 0 !important;
  }
	
	header {
  padding-top: 2em;
  
}
}
@media (min-width: 768px) and (max-width: 1024px) {
  .header-container-accueil,
  .banner,
  .banner img {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .banner img {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
  }
}
/***Gérer l'espace entre la bennière et le contenu*/
@media (min-width: 1025px) and (max-width: 1400px) {
	.accueil {
  padding-top: 0em;
		m
  
}
}

main {
  margin-top: 0;
  padding-top: 2em; /* ou ce qui est juste visuellement */
}


.contenu {
  margin-top: 0;
  padding-top: 2em;
}


/*<!--Boutons-->*/
a.bouton-deco {
    
   background: #0d1d2c;
	font-size: 25px;
	width: auto;
	 margin: auto;
	text-align: center;
	padding:10px;
	
  
}