@font-face {
	font-family: 'Baloo';
	 src:  
		 url('fonts/B/baloo2__vf/Baloo2_VariableFont_wght.woff2') format('woff2');
		 /*url('/fonts/B/baloo2__vf/Baloo2-VariableFont_wght.ttf') format('ttf')*/ 
		font-weight: 400 800;  	
		font-style: normal;
		font-display: block;
     }
 

/* VARIABLES */
:root
{ 
  --fond-ecran: #eaeaea;
  --bleu-clair: #47CDD0; /*  71  205  208 */  
  --bleu-fonce: #5290AA; /*  82  143  174 */
  
  /**/
  --font-size-1-es: 8.0cqw;				/* font-size-1 tous sauf media query */
  --font-size-1-gros-es: 20.7cqw;		/* font-size-2,3,4  pour paliers media query */


  --font-size-1-fr:7.98cqw;		 
  --font-size-1-en:7.20cqw;		 
}



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

body 
{
	font-family: 'Baloo', sans-serif;
 	background-color: var(--fond-ecran);
	overflow-x: hidden;
 }

strong, b {
    font-variation-settings: 'wght' 700; 
}


.ecran-accueil{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	/* le temps du debug 
		justify-content: center;
		align-items: center;
	*/
	overflow: hidden;
}


/***** Claude : PAS DU TOUT A SA PLACE
regrouper tous les pictos ds un seul et meme css
*****/

[class^="icoFa-"]::before, [class*=" icoFa-"]::before {
    display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    
   
}
.icoFa-globe::before  		{ content: "\f0ac"; }	/* fa-solid fa-globe							*/
.icoFa-mainCoeur::before  	{ content: "\f4be"; }	/* fa-solid fa-hand-holding-heart">		*/
.icoFa-mail::before  		{ content: "\f0e0"; }	/*  fa-envelope"></i>  								*/

.icoFa-home::before  		{ content: "\f015"; }	/* fa-solid fa-house  								*/
.icoFa-engrenage::before  	{ content: "\f013"; }	/* fa-solid fa-gear  				*/
.icoFa-auteurs::before  	{ content: "\f56b"; }	/* fa-solid fa-feather-pointed  	*/
.icoFa-livres::before  		{ content: "\f02d"; }	/* fa-solid fa-book  				*/
.icoFa-lire::before     	{ content: "\f5da"; }  	/* fa-solid fa-book-open-reader 	*/
/* original \f518 fa-solid fa-book-open 
on ne doit pas l'utiliser pour Seguir sin cuenta 
on la grde pour la bibliothèque */



.icoFa-liste::before     			{ content: "\f03a"; }  	/* fa-solid fa-list 				*/



.icoFa-bascule-vide      			{ min-width:82px; }  	/* 		*/
.icoFa-bascule-vide::before       	{ min-width:82px; content: "\00a0\00a0"; } 

.icoFa-bascule-auteurs::before     	{ width:82px; content: "\f56b\00a0\00a0\⏵\00a0\00a0\f02d"; }  	/* fa-solid fa-list 				*/
.icoFa-bascule-livres::before     	{ width:82px; content: "\f02d\00a0\00a0\⏵\00a0\00a0\f56b"; }  	/* fa-solid fa-list 				*/
 	                   

.icoFa-download::before     		{ content: "\f0ed"; }  	/* fa-solid fa-cloud-arrow-down */  
.icoFa-upload::before     			{ content: "\f0ee"; }  	/* fa-solid fa-cloud-arrow-up 	*/  

.icoFa-compteEntrer::before     	{ content: "\f007"; }  	/* fa-solid fa-user	*/  	     

.icoFa-compteConnecte::before     	{ content: "\f4fe"; }  	/* fa-solid fa-user-gear	*/  	     
 
.icoFa-compteSortir::before     	{ content: "\f007"; }  	/* fa-solid fa-user	*/  	     
/***** Claude : icoFa-compteSortir n'est jamais ds la barre, c'est un bouton ds une fenetre, 


/***** Claude : ou alors, pour ces trois icoFa-compte...., 
on pense à un badge, ???
c'est plus extensible  **/



.top-bar 
{
	/* en commentaire le temps du debug*/ 
		position: fixed;
		top: 0;
	/**/
	
	left: 0;

	width: 100%;
	display: flex;
	align-items: center; 					/* Alignement vertical */
	justify-content: space-between;

	background-color: var(--fond-ecran);
	padding: 2px;
	box-shadow: 0 4px 10px rgba(82, 143, 174, 0.2);
	 
	z-index: 50;
	transition: opacity 0.3s ease;

	gap: 4px; 								/* Espace entre les blocs principaux */ 
}

.top-bar.atterrissage {	justify-content: flex-end;  }

.btn-group {
	display: flex;
	flex-shrink: 0; /* Empêche les boutons de rétrécir */
	padding: 0 ;
	/* TODO empecher passage boutons à la ligne */
}

.btn-group.atterrissage { margin-right: 3px;}

.center-zone {
	flex-grow: 1; 				/* Prend tout l'espace libre restant */
	display: flex;
	flex-direction: column; 		 
	justify-content: center;
	gap: 1px; 					/* Claude : px / em / idiot : mieux vaut le declarer au niveau des lignes ? */
	min-width: 0; 				 
	background:lemonChiffon;/*TODO A VIRER*/
}

.barBtn 
{
	min-width:43px;
	min-height:43px;
	
	padding:0.5em  0.5em 0.1em  0.5em;
	
	margin: 0 1px;
	box-sizing: border-box;
	border-radius: 4px; 
	
	font-family: inherit;
	font-size: 1.0em;
	font-weight:450;
	
	line-height: 1.2em;
	cursor: pointer;
	
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
  
	/*variante : fond plein
	border: 1px solid var(--bleu-fonce);
	background-color: var(--bleu-fonce);
	color: white;
	*/
	
	/*variante : fond vide */
  	border: 1px solid rgba(82, 143, 174, 0.4);
  	background-color: var(--fond-ecran);
	color: var(--bleu-fonce);
}

.barBtn.atterissage
{
	margin: 0 -1px;
	border-radius: 0; 	
	border: none; 	
	border-left: 1px solid rgba(82, 143, 174, 0.4);
	border-right: 1px solid rgba(82, 143, 174, 0.4);
}

.barBtn.q {	border-radius: 4px; 				border: 1px solid rgba(82, 143, 174, 0.4);			} /* q uatre */
.barBtn.l {	border-radius: 0; 	border: none; 	border-left:  1px solid rgba(82, 143, 174, 0.4);	} /* l eft */
.barBtn.r {	border-radius: 0; 	border: none; 	border-right: 1px solid rgba(82, 143, 174, 0.4);	} /* r ight */
.barBtn.d {	border-radius: 0; 	border: none; 	border-left:  1px solid rgba(82, 143, 174, 0.4); border-right: 1px solid rgba(82, 143, 174, 0.4);	}/* d ouble */


/*variante : fond plein
.barBtn:hover  { background-color: transparent; color: var(--bleu-fonce); transform: scale(1.05); } 
*/

/*variante : fond vide */
.barBtn:hover  { background-color: var(--bleu-fonce); color: white; transform: scale(1.05); } 

/*commun*/
.barBtn:active { transform: scale(0.95); } /*  clic */
.barBtn.cache  { visibility: hidden; }
.barBtn.absent { display: none; }

.cache  { visibility: hidden; }
.absent { display: none; }


/* /*------------------------*/
/* .bottom-bar {
/* 	position: fixed;
/* 	bottom: 0;
/* 	left: 0;
/* 	width: 100%;
/* 	background-color: var(--fond-ecran);
/* 	padding: 12px 0;
/* 	box-shadow: 0 -4px 10px rgba(82, 143, 174, 0.2);
/* 	
/* 	display: flex;
/* 	justify-content: center;
/* 	z-index: 5;
/* 	transition: opacity 0.3s ease;
/* }
/* 
/* 
/* 
/* .btn-rond {
/* 	position: fixed;
/* 	bottom: 16px;       
/* 	left: 50%;          
/* 	transform: translateX(-50%);
/*  	width: 100px;       
/* 	height: 100px;
/* 	border-radius: 50%;
/* 	border: none;
/* 	background-color: var(--fond-ecran);
/* 	color: var(--bleu-fonce);
/* 	font-size: 60px;    
/* 	cursor: pointer;
/* 	z-index: 10;        
/* 	border: 1px solid         rgba(82, 143, 174, 0.4);
/* 	box-shadow: -4px -4px 8px rgba(82, 143, 174, 0.3);
/* 	display: flex;
/* 	justify-content: center;
/* 	align-items: center;
/*  
/*   opacity: 0;
/*    pointer-events: none;
/*    
/* 	transition: opacity 0.3s ease, transform 0.2s;
/* }
/* .btn-rond.visible {
/*   opacity: 1;         
/*   pointer-events: auto;
/*  }
/* .btn-rond:hover {	
/* 	background-color: var(--fond-ecran);
/* 	color: var(--bleu-fonce);
/* 	transform: translateX(-50%) scale(1.05);
/*  }
/* .btn-rond:active {	/*  clic */
/* 	transform: translateX(-50%) scale(0.95);
/*  } 
/* .btn-rond.hidden {
/*   display:none;
/*   pointer-events: none; /* Empêche de cliquer dessus quand c'est invisible */
/* }
/* /* boutons classiques */
/* .bottom-bar .btn:not(.btn-rond) {
/* 	width: 22%;
/*  	/*height: 44px; */
/* 	max-width: 160px;
/* 	padding: 8px;
/* 	border-radius: 6px;
/*  }
/* 
/* /*  style commun  btn */
/* .bottom-bar .btn 
/* {
/* 	margin: 0 2%;
/*  	box-sizing: border-box;
/* 	border: 1px solid var(--bleu-fonce);
/* 	border-radius: 6px;
/* 	background-color: var(--bleu-fonce);
/* 	color: white;
/* 	font-family: inherit;
/* 	font-size: 1.2em;
/* 	font-weight: bold;
/* 	cursor: pointer;
/* }
/* .bottom-bar .btn:hover 	{ background-color: transparent; color: var(--bleu-fonce); transform: scale(1.05); } 
/* .bottom-bar .btn:active { transform: scale(0.95); } /*  clic */
/* 
/*  
/* .bottom-bar .btn:first-child { margin-left: 6%; }
/* .bottom-bar .btn:last-child  { margin-right: 6%; }
/* 
/* 
/* /*--- */
/* .bottom-bar .btn.hidden 
/* {
/*   opacity: 0 !important;
/*   pointer-events: none; /* Empêche de cliquer dessus quand c'est invisible */
/* }
/* 
/* .ecran-accueil.hidden 
/* {
/*   display:none;
/*   pointer-events: none; /* Empêche de cliquer dessus quand c'est invisible */
/* }
/* 
/* 
/* */

/* ========================================================
   IMAGE logo
   ======================================================== */
/* .hero-surface 
/* {
/* 	aspect-ratio: 16 / 4; /*   image 1600x400 */
/* 	/*background-image: url('logo-estupenDis_2.webp');
/*  	background-size: contain;
/*  	background-repeat: no-repeat;*/
/*  	position: absolute;
/*   /*  background-origin: content-box;*/
/*  
/* 	left: 60px;
/*  	right: 60px;
/*  	top:calc(44vh - 12.5cqi);
/* }
/*  
/*  
/*   
/*  .contenu-texte 
/*  {
/*  	position: absolute;
/*   
/*  	left: 0;
/*  	right: 0;
/*   	padding:0;padding-top: 10px;
/*  	margin:0;
/*  	container-type: inline-size;
/*   	top: 50%;
/*  	transform: translateY(calc(-40% + 12.5cqi)); /* 12.5cqi = 200px quand écran larg = 1600px*/
/*  	 font-size: 8.0cqw; /* TODO  C'est plus un padding ou une line-height qu'une size */
/*   }
/*  
/*  .titre-principal-anime 
/*  {
/*  	display: inline-flex;
/*  	align-items: baseline;
/*  	gap: 0 0.25em;
/*   	width: 100%;
/*  	white-space: nowrap;
/*   	overflow: hidden;
/*  	text-align: left;    
/*  	font-size: 1em;					font-weight:400;
/*   	color: var(--bleu-clair);
/*  
/*  	/* animation */
/*  	opacity: 0;
/*  	animation: fonduEntreeTitre 1.5s ease-out forwards;
/*  	animation-delay: 0.2s;
/*  }
/*  
/*   
/*  @keyframes fonduEntreeTitre 
/*  {
/*    from { opacity: 0; }
/*    to { opacity: 1; }
/*  }
/*  
/*  
/*  /*.texte-relief {
/*  /*	font-size: var(--font-size-1-fr); /*9.02cqw;*/
/*  /* 	text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.9), 	/* Lueur en haut */
/*  /*				  1px  1px 2px rgba(0, 0, 0, 0.08);     	/* Ombre en bas */
/*  /*}
/*  */
/*  */ 

/*			.texte-emboss {
/*				padding:0; margin:0 0.06em;
/*				font-weight:400;
/*			 	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12),   		/* ombre dans le creux */
/*							  1px  1px 1px rgba(255, 255, 255, 0.9); 	/* Lumière en bas */
/*			}   
/*			
/*			.texte-emboss.clair {color:var(--bleu-clair);}
/*			.texte-emboss.fonce {color:var(--bleu-fonce);}
/*			
/*			
/*			.texte-emboss.gros-es { padding:0; margin:0; font-size: var(--font-size-1-gros-es);}
/*			
/*			.texte-emboss.es { font-size: var(--font-size-1-es);}
/*			.texte-emboss.fr { font-size: var(--font-size-1-fr);}
/*			.texte-emboss.en { font-size: var(--font-size-1-en);}
/*			*/

/*---*/
 
 
/*====*/
/*--- LE CONTENEUR SCROLLANT --- */
.scroll-container {
 width: 80vw;       		 
  max-width: 1024px;       
  margin: 20px auto;       
  margin-bottom: 200px;    
  
  padding: 20px;
  box-sizing: border-box;

  
  overflow-y: auto;         
  overflow-x: hidden;      
  
   display: flex;
  flex-direction: column;   
  gap: 40px;               /*   espace  entre   cartes */
}

/*--- LES CARDS RESPONSIVES --- */
.card-item 
{
  width: 100%;             
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
    
  padding: 0;
  
  box-sizing: border-box;

  /* EFFET RELIEF DISCRET ET ÉLÉGANT (vu à l'étape précédente) 
  box-shadow: 
    4px 4px 10px rgba(0, 0, 0, 0.00), 
    -4px -4px 10px rgba(0, 0, 0, 0.0);*/
 
 
	border: 1px solid         rgba(82, 143, 174, 0.4);
	transition: transform 0.2s ease;
}

.card-item:hover {
    box-shadow: 4px 4px 4px rgba(82, 143, 174, 0.1);
}

/* Style rapide pour le texte à l'intérieur */
.card-item h2 {
	margin-top: 0;
	color: var(--bleu-sombre);
	padding: 0.6em 1em;
	font-size: 1.2rem;
	border-bottom: 1px solid rgba(82, 143, 174, 0.4);
}
.card-item p {
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;
	color: #4b5563;
	font-size: 1.2rem;
	line-height: 1.6;
}
.bloc-repliable {
  background-color: var(--fond-ecran);
  border-radius: 6px;
  margin : 1em;
  padding: 1em;
  transition: all 0.3s ease;
}


 /* 1. Pour Chrome, Firefox et les ordinateurs modernes */
.bloc-repliable summary 						{ list-style: none;} /* Chrome, Firefox et les ordinateurs modernes */
.bloc-repliable summary::-webkit-details-marker { display: none; }	 /* Safari et Apple */
 
 
.bloc-repliable summary::after {
  content: "Desplegar  ▼";
  font-weight: bold;
  color: var(--bleu-fonce);
  cursor: pointer;
}

/*--- LE TITRE MODIFIÉ (Quand c'est OUVERT) --- */
.bloc-repliable[open] summary::after {
  content: "Plegar  ▲";
  font-weight: normal;
  color: var(--bleu-fonce);
  cursor: pointer;
}

 
.bloc-repliable summary:hover {
  opacity: 1.0;
}




/*--- LE CONTENU MASQUÉ --- */
.contenu-repliable {
  padding: 0;
  /*border-top: 1px solid rgba(0, 0, 0, 0.05); /* Ligne de séparation très fine 
  margin-top: 1 px;*/
  color: #4b5563;
   line-height: 1.6;
}

.contenu-repliable p {
  margin-top: 1em;
  margin-bottom: 0.1em;
   padding: 0 ;
  color: var(--bleu-fonce);
  font-size: 1.2rem;
  line-height: 1.6;
}


.contenu-repliable .img-responsive {
  width: 100%;            
  max-width: 100%;        
  height: auto;           
  display: block;         
   
  margin: 1em 0;      
  border-radius: 6px;     


/* L'image s'adaptera sur mobile/tablette, mais ne dépassera JAMAIS 450px sur ordi */
  max-width: 450px;
 }


 
/*--- (Optionnel) Masquer la barre de défilement moche en bas --- 
.carousel-conteneur::-webkit-scrollbar {
  display: none; /* Pour Safari et Chrome  
}
.carousel-conteneur {
  scrollbar-width: none; /* Pour Firefox  
}
 */

.carousel-conteneur {
  display: flex;
  width: 100%;
  max-width: calc(100% - 2em);
  margin: 15px 1em;
  overflow-x: auto;
   overflow-y: hidden;
  flex-wrap: nowrap;
   
  /* L'aimantage reste actif sur ordi et tablette */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  
  /* STYLE DU CURSEUR SUR ORDINATEUR : Affiche une main ouverte
  cursor: grab; */
}

/*  /* Quand l'utilisateur clique et glisse, la main se ferme */
/*  .carousel-conteneur.active-drag {
/*    cursor: grabbing;
/*    /* Désactive l'aimantage fluide STRICTEMENT pendant le mouvement de souris
/*       pour éviter que le CSS ne lutte contre le déplacement de la main */
/*    scroll-snap-type: none !important;
 /*  }
/*  
*/

.carousel-slide {
  flex: 0 0 100% !important;
   /*width: 100%;*/
  scroll-snap-align: center;
  padding-right: 4px;
   box-sizing: border-box;
  }


 
.carousel-slide img {
pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
 width: 100%;
margin-left:4px;
 }



/* Conteneur global pour englober le carrousel et ses points */
.carousel-cadre {
  width: 100%;
  max-width: 100%;
  margin: 15px auto;
}

/* Zone des points alignés au centre */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

/* Le style de chaque petit point individuel */
.carousel-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--fond-ecran);
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Micro relief doux pour les points inactifs */
  box-shadow: 
    inset 1px 1px 2px rgba(0, 0, 0, 0.1),
    1px 1px 1px rgba(255, 255, 255, 0.8);
}

/* Le style du point actif (l'image en cours) */
.carousel-dots .dot.active {
  background-color: var(--bleu-fonce);
  transform: scale(1.2); /* Grossit légèrement pour attirer l'œil */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}



 
/*--- mobiles */
@media (orientation: portrait) 
{
	.hero-surface 			{ top:30vh; }
	.contenu-texte 			{ font-size: 8.0cqw; }  
	.titre-principal-anime 	{ font-size: 8.3cqw; }

.bottom-bar .btn:first-child { margin-left: 2%; }
.bottom-bar .btn:last-child  { margin-right: 2%; }



	/*--- Masquer la barre de défilement    en bas --- */
	.carousel-conteneur::-webkit-scrollbar {
		display: none; /* Pour Safari et Chrome  */
	}
	.carousel-conteneur {
		scrollbar-width: none; /* Pour Firefox  */
	}
 
	.carousel-slide img 
	{
		/* L'image s'adaptera sur mobile/tablette, mais ne dépassera JAMAIS 450px sur ordi 
		max-width: 450px; */
	}


}