@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
/* Force absolument tous les elements du site (y compris les formulaires) a heriter d'Anaheim */
body, input,
textarea,
select,
button,
label {
	font-family: 'Anaheim', sans-serif;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	max-width: 100%;
	overflow-x: hidden; /* Securite ultime anti-defilement horizontal sur mobile */
}
body {
	color: #1a1a1a;
	font-family: 'Anaheim', sans-serif;
	font-size: 16px; /* Base fixe propre pour les calculs en rem */
	line-height: 1.4;
	letter-spacing: 0.06em;
	word-spacing: 0.06em;
	display: flex;
	flex-direction: column;
	min-height: 20vh; /* Garde le footer en bas */
}
/* Le conteneur calibre a 1100px */
.wrapper {
	background-color: #f5f5f5;
	/*border-radius: 30px;*/
	box-shadow: 0px 0px 20px #1a1a1a;
	width: 100%;
	max-width: 1100px; /* Limite la largeur a 1100px */
	margin:  auto; /* Centre la page horizontalement */
	padding: 0 15px;   /* Marge de securite pour les mobiles */
	display: flex;
	flex-direction: column;
	flex: 1;           /* Occupe tout l'espace vertical libre */
	text-align: center;
}
/* En-tete (Header) */
header, headerGD {
	background-color: #f5f5f5;
	padding: 25px 0px 0px 0px;
	text-align: center;
	margin-top: 3px;   /* Preserve l'arrondi net du wrapper */
	width: 100%;
}
headerGD {
	width:1300px;
	}
/* ATTENTION POUR FORM sur deux colonnes On indique au CSS le nouveau chemin en passant par le formulaire */
.main-content form left,
.main-content left,
.main-content form aside,
.main-content aside {
	width: 35% !important;
	float: left !important;
	display: block !important;/*text-align:center;*/
		background-color: #f5f5f5;

}
.main-content form right,
.main-content right,
.main-content form section,
.main-content section {
	width: 65% !important;
	float: right !important;
	display: block !important;/*text-align:center;*/
		background-color: #f5f5f5;

}
/* Colonne Principale (Gauche) */
left,
aside {
	display: block;
	flex: 2;             /* Proportion d'espace */
	min-width: 0;        /* Permet le retrecissement fluide */
	background-color: #f5f5f5;
	padding: 0px 25px 0px 25px;
	border-right: solid 1px #999;
	text-align:left;
}
left img,
aside img {
	max-width: 100%;
	display: block;
	border: none;
	margin: 0px 0px 15px 0px;
	height: auto;
	/* HARMONISATION AVEC LES VIGNETTES */
	border-radius: 5px;      /* Meme arrondi que la .vignetteGD */
	/*border: 1px solid #b5b5b5;   /* Meme bordure discrete */
  /* Meme ombre douce et moderne a 12% d'opacite */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* Colonne (Droite) */
right,
section {
	display: block;
	flex: 3;             /* Proportion d'espace */
	min-width: 0;        /* Empeche l'image de pousser la colonne */
	padding: 0px 25px 0px 25px;
	/*border-left: solid 1px #889fdf;*/
	background-color: #f5f5f5;
}
right img,
section img {
	max-width: 100%;
	display: block;
	border: none;
	margin: 0px auto 15px auto;
	height: auto;
	border-radius: 5px;      /* Meme arrondi que la .vignetteGD */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* Pied de page (Footer) */
footer {
	background-color: #f5f5f5;
	text-align: center;
	padding: 25px;
	margin-bottom: 20px;
	width: 100%;
}
.conteneur-diapo {
	width: 100%;
	width: 1100px;        /* S'aligne sur la largeur maximale de votre design */
	margin: 20px 0px 0px -15px; /* Centre le bloc et ajoute une marge en bas */
	box-sizing: border-box;
	overflow: hidden;         /* CRUCIAL : force les images du diapo a epouser l'arrondi sans depasser */
	/* HARMONISATION AVEC LES VIGNETTES */
	/*border-radius: 5px;      /* Meme arrondi que la .vignetteGD */
	/*border: 1px solid #b5b5b5;   /* Meme bordure discrete */
  /* Meme ombre douce et moderne a 12% d'opacite */
	/*box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.4);*/
}
/* SECURITE : On s'assure que les images a l'interieur respectent le cadre */
.conteneur-diapo img {
	border-radius: 0 !important; /* Annule les arrondis des images pour eviter les doubles coins */
	width: 1100px;
	height: auto;
}
/* Style du sous-titre de l'adresse */
.sous-titre {
	color: #1a1a1a;
	font-size: 1rem;
	margin-top: 5px;
	margin-bottom: 15px; /* Cree l'espace avant la ligne de separation */
}
/* Ligne de separation moderne a supprimer si plus employee*/
.separation-header {
	border: dashed 1px #999;
	width: 100%;
	margin: 10px 0px 10px 0px;
	clear: both;
}


/* ==========================================================================
   3. TYPOGRAPHIE & CLASSES UTILITAIRES FILETS SEPARATIONS ...
   ========================================================================== */
   
.titre {
	font-size: 3.5rem;
	line-height: 1.1;/* text-shadow: 1px 2px 4px rgba(0, 2, 2, 0.15);*/
}
h1 {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 10px;
}
h2, h3 {
	font-size: 1.8rem;
	line-height: 1.3;
	margin-bottom: 10px;
	color: #1a1a1a; /*bleu*/
}
h3 {
	color: #1a1a1a;
}
h4 {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 8px 0px 20px 0px;
}
h4.bienvenue::before { /* pas utilise mais garder pour modele*/
	content: "Bienvenue"; /* Le texte injecte par le CSS */
	color: #555;                   
	text-align:center;
	}
h5 {
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: bold;
}
p, address {
	color: #1a1a1a;
	font-size: 1.1rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	word-spacing: 0.04em;
	margin-bottom: 15px;
}
.menu {
	font-weight: normal;
	font-size: 1.08rem;
}
address {
	font-style: italic;
	padding-top: 10px;
}
/* SEPARATIONS */
.border,
.borderbleu {
	border-bottom: solid 1px #1a1a1a; /*rouge*/
	width: 100%;
	margin-bottom: 8px;
	clear: both;
}
.borderbleu {
	border-bottom: solid 2px #1a1a1a;
}
.bordleft {
	border-left: solid 1px #1a1a1a;
}
.bordright {
	border-right: solid 1px #1a1a1a;
}
.bordnone {
	border: none;
}
hr {
	border: dashed 1px #1a1a1a;
	margin: 10px 0px 10px 0px;
	clear: both;
}
hr.fondu, hr.fondurouge {
	border: none;
	height: 1px;
	/* Un degrade transparent -> noir -> transparent */
	background-image: linear-gradient(to right, transparent, #1a1a1a, transparent);
	margin: 25px 0;
}
hr.fondurouge {
	background-image: linear-gradient(to right, transparent, #1a1a1a, transparent);
	height: 3px;
}

hr.fonducourt {
	border: none;
	height: 1px;
	/* Un degrade transparent -> noir -> transparent */
	background-image: linear-gradient(to right, transparent, #1a1a1a, transparent);
	margin: 25px 100px 20px 100px;
}

/* ALIGNEMENTS */
.txtbleucenter {
	color: #1a1a1a;
	text-align: center;
}
.txtorangecenter {
	color: #999;
	text-align: center;
}
.fag, 
.alignleft	{
	text-align: left;
}

.txtcenter,
.texte-center {
	text-align: center;
}
.espace {
	width: 100%;
	margin: 10px 0px 10px 0px;
	clear: both;
}
/* ==========================================================================
   COULEURS
   ========================================================================== */
/* COULEURS DE FOND */
.vert		{	background-color: #555;}
.beige	{	background-color: #555;}
.orange {	background-color: #555;}
.mauve	{	background-color: #555;}
.gris 	{	background-color: #555;}
.bleu		{	background-color: #555;}
.rouge  { background-color: #555;}/*--FOND DES PAGES SUPPRESSION--*/
.orangefort  	{ background-color: #444;}
.vertkaki  		{ background-color: #555;}

/* COULEURS DE TEXTE */
.txtbleu 		{	color: #1a1a1a;}
.txtorange	{	color: #999;}
.txtmauve		{	color: #888;}
.txtrouge 	{	color: #000;}



.vignMED {
	width: 100%;
	height: auto;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 25px 15px; /* Un peu plus d'espace en haut et en bas */
	/* ACTIVATION DU CENTRAGE UNIQUE FLEXBOX */
  /*display: flex !important;
  /*flex-direction: column !important;   /* Aligne les elements du haut vers le bas */
  /*justify-content: flex-start !important; /* Aligne le contenu vers le haut de la boite */
  /*align-items: center !important;  */     /* CENTRE PARFAITEMENT TOUT LE MONDE SUR L'AXE VERTICAL */
  
  /* FORCE TOUS LES TEXTES INTERNES A SE CENTRER */
	text-align: center !important;
	/* L'ombre douce que vous aimiez */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/*VIGNETTES TROMBINOSCOPE*/

/* ==========================================================================
   PASTILLE DE CONFIRMATION AVEC DISPARITION COMPLETE EN 8 SECONDES
   ========================================================================== */

.pastille-succes {
	/* On utilise une hauteur maximale pour permettre l'ecrasement en fin d'animation */
	max-height: 200px;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 800px;
	margin: 15px auto 25px auto;
	padding: 15px 20px;
	background-color: #fff;
	border-left: 5px solid #999;
	border-radius: 8px;
	color: #166534;
	font-family: 'Anaheim', sans-serif;
	font-weight: bold;
	font-size: 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	box-sizing: border-box;
	/* REGLAGE CRUCIAL : 3 secondes globales, arret fige a la fin (forwards) */
	animation: disparition-eclair 8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Style de la petite coche de validation */
.pastille-succes .icone-succes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #166534;
	color: #ffffff;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0.85rem;
}

/* CHRONOLOGIE DE L'ANIMATION POUR 3 SECONDES */
@keyframes disparition-eclair {
 0% {
 opacity: 1;
 max-height: 200px;
 margin: 15px auto 25px auto;
 padding: 15px 20px;
}
  /* Reste visible pendant les 2 premieres secondes (environ 65% du temps) */
  65% {
 opacity: 1;
 max-height: 200px;
 margin: 15px auto 25px auto;
 padding: 15px 20px;
 border-left: 5px solid #999;
}
  /* Amorce du fondu entre la 2eme et la 2,8eme seconde */
  90% {
 opacity: 0;
 max-height: 200px;
 margin: 15px auto 25px auto;
 padding: 15px 20px;
 border-left: 0px solid transparent;
}
  /* a la 3eme seconde (100%), on desactive TOUT pour effacer le bloc physique du site */
  100% {
 opacity: 0;
 max-height: 0;
 margin: 0 auto;
 padding: 0;
 border: none;
 box-shadow: none;
    
    /* DOUBLE VERROU ELECTRIQUE POUR LE NAVIGATEUR : */
    visibility: hidden;
 display: none !important;
}
}
/* ==========================================================================
   2. LE SYSTEME DE GRILLE ET VIGNETTES (FLEXBOX)
   ========================================================================== */

/* Le conteneur parent des vignettes */
/* 2. ON FORCE LA GRILLE A PRENDRE TOUT L'ESPACE ET A NE PAS RETRECIR */



.grille {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;               /* On passe de 16px a 12px pour gagner de precieux pixels */
	justify-content: center;
	width: 100% !important;  /* Force la grille a occuper 100% de sa colonne */
	max-width: 100% !important;
}
/* 3. LA VIGNETTE AJUSTEE AVEC LE NOUVEAU GAP */
.vignette {
	/* 50% de la largeur moins la moitie du nouveau gap de 12px (donc 6px) */
	flex: 1 1 calc(50% - 6px) !important;
	/* Supprimez temporairement le max-width: 250px si les vignettes refusent de grandir */
	max-width: 280px;
	min-width: 120px;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 16px;
	box-sizing: border-box;
	background-color: #eeeeee;
	border-radius: 12px;
	border: 1px solid #999;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Effet de survol */
.vignette:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* L'image a l'interieur de la vignette */
.vignette img {
	max-width: 250px;
	height: 166px;
	max-height: 70%;
	object-fit: contain;
	margin-bottom: 8px; /* Ajoute un espace entre l'image et le texte */
	border-radius: 5px;
	box-shadow: 0px 0px 15px #1a1a1a;
}
.vignette p {
	margin: 0;
	text-align: center;
	width: 100%;
}

/* ==========================================================================
   1. VIE DU CLUB PAGE INDEX FORCE LE PASSAGE EN 2 COLONNES SUR COLONNE DE DROITE
   ========================================================================== */
/* On cible le conteneur principal de la boucle (mettez ici la classe parente globale) */
.conteneur-vignettes {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes strictes */
	gap: 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 8px !important;
}
/* L'ASTUCE MAGIQUE POUR LES BLOCS INTERMEDIAIRES REDONDANTS 
   Si votre boucle genere un div intermediaire (ex: conteneur-unique), 
   cette regle dit au navigateur : "Fais comme si ce div n'existait pas graphiquement, 
   et fait monter la .vignetteVDC directement dans la grille de 2 colonnes" */
.conteneur-vignettes > div:not(.vignetteVDC), .conteneur-unique {
	display: contents !important;
}
/* ==========================================================================
   2. CONFIGURATION DE LA VIGNETTE (ELLE PREND TOUTE SA PLACE DANS LA GRILLE)
   ========================================================================== */
.vignetteVDC {
	/* On lui dit de prendre 100% de la colonne attribuee par la grille (soit la moitie de l'ecran) */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important; /* Image en haut, textes en bas */
	justify-content: flex-start !important;
	align-items: center !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	background-color: #eeeeee;
	border-radius: 12px;
	border: 1px solid #999;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
}
.vignetteVDC img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	margin-bottom: 8px !important;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #1a1a1a;
}
.vignetteVDC p {
	margin: 3px 0 !important;
	text-align: center !important;
	width: 100% !important;
	font-size: 0.9rem !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
/* ==========================================================================
	 Le style de votre vignette reste isole 
   ========================================================================== */

 
.conteneur-unique {
	display: flex;
	justify-content: center; /* Centre horizontalement */
	/*align-items: center;      Centre verticalement */
	min-height: 20vh;        /* Prend 20% de la hauteur de l'ecran (ajustable selon vos besoins) */
	width: 100%;             /* Occupe toute la largeur */
}
.conteneur-unique .vignette {
	width: 100%;
	height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	border: 1px solid #999;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 30px;
	background-color: #eeeeee;
}
.enligne {
	display: flex;
	flex-direction: row;
}
.conteneur-unique .vignette img {
	max-width: 100%;
	max-height: 75%;
	object-fit: contain;
	margin-bottom: 15px;
	margin-top: 15px;
}
.conteneur-unique .vignette p {
	margin: 0;
	text-align: center;
	width: 100%;
}
/* ==========================================================================
   SECTION PRIVATE ADHERENTS
   ========================================================================== */


/* CONSERVE VOTRE ANCIENNE MISE EN PAGE SUR ORDINATEUR (TEXTE A DROITE DE L'IMAGE) */
.vignetteGD {
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 25px 15px; /* Un peu plus d'espace en haut et en bas */
	/* ACTIVATION DU CENTRAGE UNIQUE FLEXBOX */
  /*display: flex !important;
  /*flex-direction: column !important;   /* Aligne les elements du haut vers le bas */
  /*justify-content: flex-start !important; /* Aligne le contenu vers le haut de la boite */
  /*align-items: center !important;  */     /* CENTRE PARFAITEMENT TOUT LE MONDE SUR L'AXE VERTICAL */
  
  /* FORCE TOUS LES TEXTES INTERNES A SE CENTRER */
	text-align: center !important;
	/* L'ombre douce que vous aimiez */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vignetteGD img {
	border: solid 1px #999;
	height: auto;
	width: 300px;
	height: auto;
	border-radius: 10px;
	align-items: center !important;
	/* NETTOYAGE DU CSS : On supprime les lignes cassees ou inutiles en Flexbox */
  /* (Supprime : content, position relative, margin:auto, text-align) */
	margin-bottom: 10px; /* Ajoute un espace propre de 5px sous l'image avant le texte */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
	display: inline-block;      /* Evite les micro-espaces blancs sous l'image */
}
.GDimg {
	width:80%;
	height:auto;
	}
/* SECURITE TYPOGRAPHIQUE : On s'assure que vos paragraphes prennent 100% de la largeur pour bien se centrer */
.vignetteGD p, .vignetteGD h4 {
	width: 100% !important;
	text-align: center !important;
	margin-bottom: 6px; /* Un espacement regulier entre chaque ligne d'info */
}
/* Effet de survol */
.vignetteGD:hover {
	transform: translateY(4px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   VIGNETTES ANALYSE IMAGES
   ========================================================================== */


/* 1. LE CONTENEUR GLOBAL (La ligne) */
.ligne-multiple-blocs {
    display: flex;
    flex-direction: row;        /* Aligne les blocs cote a cote */
    align-items: stretch;       /* LE SECRET : Force tous les blocs a prendre la hauteur du plus grand */
    gap: 15px;                  /* Cree un espace de 15px entre chaque bloc */
    box-sizing: border-box;
	justify-content: center; /* Centre horizontalement */
}

/* 2. LES 3 BLOCS ENFANTS (Les colonnes) */
/* 1. LE BLOC ENFANT (Repete dans la boucle PHP) */
.bloc-colonne {
    display: flex;         /* NOUVEAU VERROU : On passe le bloc lui-meme en Flexbox vertical */
    flex-direction: column; 
    justify-content: space-between; /* Pousse le nom du membre tout en bas du bloc */
    align-items: center;   /* Centre horizontalement l'image et le texte */
    
    flex: 2;               
    min-width: 50px;      
    max-width: 20%;        
    background-color: #fafafa;
    border: 1px solid #fff;
    border-radius: 15px;
    padding: 12px;
    text-align: center;
    box-sizing: border-box;
}

/* 2. L'IMAGE A L'INTERIEUR (PROTECTION ANTI-DEFORMATION) */
.bloc-colonne img {
    max-width: 100%;
    height: 100px;         /* OPTIONS RECOMMANDEE : On fixe une hauteur max pour les miniatures */
    object-fit: contain;   /* LE BOUCLIER : L'image garde ses proportions sans AUCUNE deformation, qu'elle soit verticale ou horizontale */
    display: block;
    margin: 0 auto 10px auto;
}




/* ==========================================================================
   TROMBINOSCOPE DYNAMIQUE : LISTE A GAUCHE / VIGNETTE A DROITE
   TROMBINOSCOPE EN CSS PUR (INFO-BULLE GEANTE INTER-COLONNES)
   ========================================================================== */
/* Cache toutes fiches a droite a l'ouverture (SANS !important pour laisser agir le JS) */
.fiche-detaillee {
	display: none;
	width: 100%;
}
/* Style de la liste des noms a gauche */
.item-membre {
	display: inline-block;
	/*width: 100%;*/
	padding: 10px 15px;
	background-color: #eeeeee;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	color: #1a1a1a;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	margin-bottom: 5px;
	cursor: pointer;
	transition: all 0.2s ease;
}
/* Survol a la souris sur les noms */
.item-membre:hover {
	background-color: #889fdf !important; /* Allume en bleu */
	color: #ffffff !important;
	padding-left: 20px !important;
}
/* Zone d'attente pointillee */
.vignette-vide {
	width: 80%;
	max-width: 500px;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #1a1a1a;
	border-radius: 15px;
	color: #1a1a1a;
	font-style: italic;
	text-align: center;
	padding: 80px 30px;
	background-color: #eeeeee;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center !important;
}







 /* Personnalisation de la barre de defilement de la liste (optionnel mais joli) */
.liste-membres::-webkit-scrollbar {
 width: 6px;
}
.liste-membres::-webkit-scrollbar-thumb {
 background: #889fdf;
 border-radius: 10px;
}
.liste-membres {
	display: flex !important;
	flex-direction: row !important; /* Aligne les boutons horizontalement */
	flex-wrap: wrap !important;     /* Autorise le passage a la ligne automatique */
	gap: 8px !important;            /* Espace de 8px entre les boutons (horizontal et vertical) */
	width: 100%;
	max-height: 600px;
	overflow-y: auto;
	padding-right: 4px;
}
/* 2. LES BOUTONS (LES NOMS) */
.item-membre {
	/* L'ASTUCE : Chaque bouton prend 50% de la largeur moins la moitie du gap (4px) */
	flex: 0 0 calc(50% - 4px) !important;
	padding: 10px 12px; /* Legerement reduit sur les cotes pour les noms longs */
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 6px;
	color: #1a1a1a;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	/* SECURITE GRAPHIQUE ANTI-DEBORDEMENT */
	white-space: nowrap;      /* Empeche le nom de sauter a la ligne dans le bouton */
	overflow: hidden;         /* Coupe le texte s'il est vraiment trop long */
	text-overflow: ellipsis;  /* Ajoute "..." a la fin du nom s'il est coupe */
	transition: all 0.2s ease;
	margin-bottom: 0 !important; /* Le gap gere deja l'espace du bas */
}
/* Effet au survol a la souris */
.item-membre:hover {
	background-color: #889fdf !important;
	color: #ffffff !important;
	padding-left: 16px !important; /* Un decalage plus court (16px) pour eviter de masquer le nom */
}
/* ==========================================================================
   RUBRIQUE TELECHARGEMENTS PHOTO DU MOIS
   ========================================================================== */

/* Conteneur global qui aligne les blocs en liste verticale */
.grille-telechargements {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;              /* Espace de 16px entre chaque document */
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px !important;
}
/* La vignette document individuelle */
.vignette-doc {
	display: flex !important;
	flex-direction: column !important; /* Tout s'empile verticalement sur mobile */
	align-items: center !important;
	padding: 16px !important;
	background-color: #d9d9d9;
	border: 1px solid #555;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	box-sizing: border-box !important;
	width: 100% !important;
}
/* L'icone de fichier (grosse et centree) */
.doc-icone {
	font-size: 2rem !important;      /* Rend l'emoji boite aux lettres tres grand visuellement */
	margin-bottom: 5px !important;
}
/* Zone de textes (Titre + Description) */
.doc-info {
	text-align: center !important;
	width: 100% !important;
	margin-bottom: 10px !important;
}
.doc-info h4 {
	font-size: 1.15rem !important;
	color: #1a1a1a !important;
	margin: 0 0 6px 0 !important;
	font-weight: 600 !important;
}
.doc-info p {
	font-size: 1rem !important;
	color: #1a1a1a !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
/* VIGNETTE AFFICHAGE DE LA PHOTO DU MOIS*/
	
/* Supprime toute bordure ou soulignement sur un lien contenant une image */
a img {
	border: none !important;
	text-decoration: none !important;
	outline: none !important;
	display: block !important; /* evite les petits espaces fantomes sous l'image */
}
/* Par securite on s'assure que le lien lui-meme n'a pas de soulignement force */
a {
	text-decoration: none !important;
}
.grilleENGLOB h2 {
	margin-top: 20px !important;
	margin-bottom: 5px !important;
	color: #ff8800 !important;
	font-size: 1.8rem;
	text-align: left;
}
.grillePDM { /* encadre les vignettes photo du mois */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px; /* ecart parfait de 5px horizontal et vertical */              
	justify-content: left;
	width: 100% !important;  
	max-width: 100% !important;
	align-items: flex-start; 
}

.vign {
	display: block;
	text-align: center;
	position: relative;
	/* AJUSTEMENT : On retire la hauteur fixe et le overflow pour que plus rien ne soit tranche */
	width: 73px;
	height: auto; 
}

/* NOUVEAU VERROU DE SECURITE : On force le lien a faire exactement la taille de l'image */
.vign a {
	display: block;
	width: 73px;
	height: 73px;
	text-decoration: none !important;
}

.vign img {
	object-fit: cover; 
	border-radius: 9px;
	width: 73px;
	height: 73px;
	display: block; /* Supprime l'espace fantome sous l'image */
}

.vign a:hover img {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
	opacity: 0.6;
}
/*    TENTATIVE DE PLUS GRANDES VIGNETTES */

.grillePDMGRANDE { /* encadre les vignettes photo du mois */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px; /* ecart parfait de 5px horizontal et vertical */              
	justify-content: left;
	width: 100% !important;  
	max-width: 100% !important;
	align-items: flex-start; 
}

.vignGRANDE {
	display: block;
	text-align: center;
	position: relative;
	/* AJUSTEMENT : On retire la hauteur fixe et le overflow pour que plus rien ne soit tranche */
	width: 100px;
	height: auto; 
}

/* NOUVEAU VERROU DE SECURITE : On force le lien a faire exactement la taille de l'image */
.vignGRANDE a {
	display: block;
	width: 100px;
	height: 100px;
	text-decoration: none !important;
}

.vignGRANDE img {
	object-fit: cover; 
	border-radius: 9px;
	width: 100px;
	height: 100px;
	display: block; /* Supprime l'espace fantome sous l'image */
}

.vignGRANDE a:hover img {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
	opacity: 0.6;
}




/*    PHOTO DU MOIS FIN */

/* LE BOUTON TELECHARGEMENT PAGE DOCUMENTS UTILES */
.btn-download {
	display: block !important;
	width: 50% !important;            /* Prend toute la largeur de la vignette */
	padding: 5px !important;          /* Grosse zone de clic pour le pouce */
	background-color: #555 !important; /* Vert */
	color: #ffffff !important;
	text-decoration: none !important;
	text-align: center !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	border-radius: 50px !important;    /* Bouton tout arrondi comme votre submit */
	box-shadow: 0 4px 10px rgba(178, 196, 188, 0.8);
	box-sizing: border-box !important;
	transition: background-color 0.2s ease;
	margin-bottom: 10px;
}
/* Effet au clic */
.btn-download:active, .btn-download:hover {
	background-color: #1a1a1a !important; /* Devient bleu fonce au toucher */
	transform: scale(0.98);
}
/* ==========================================================================
   RUBRIQUE TELECHARGEMENTS FIN
   ========================================================================== */






/* ==========================================================================
   PAGE LUDIQUE : SECURISATION ET DESIGN DE LA BOITE AUX LETTRES
   ========================================================================== */
.page-ludique {
	text-align: center !important;
	padding: 20px 10px !important;
	box-sizing: border-box !important;
}
.page-ludique h2 {
	color: #ff8800 !important; /* orange vif */
	font-size: 1.8rem !important;
	margin-bottom: 10px !important;
}
.consigne {
	font-size: 1rem !important;
	color: #1a1a1a !important;
	margin-bottom: 30px !important;
	line-height: 1.4 !important;
}
/* LE CADRE DE LA BOITE */
/* ==========================================================================
   BOITE AUX LETTRES : BORDURE TOURNANTE ET ANIMEE
   ========================================================================== */

.zone-boite-lettres {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 320px !important;
	margin: 0 auto !important;
	padding: 40px 20px !important;
	background-color: #fff !important;
	border-radius: 24px !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	/* On cree une bordure de fond bicolore (Bleu et Blanc) */
	border: 3px dotted solid transparent !important;
	background-image: linear-gradient(#fff, #fff),  repeating-linear-gradient(-45deg, #1a1a1a, #1a1a1a 10px, #ffffff 10px, #ffffff 20px) !important;
	animation: defilementBordure 1s linear infinite !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
	transition: all 0.3s ease !important;
}
/* Au survol, le degrade s'anime et tourne ! */
.zone-boite-lettres:hover, .zone-boite-lettres:active {
	transform: scale(1.02);
	background-image: linear-gradient(#fff, #fff),  repeating-linear-gradient(-45deg, #ff8800, #ff8800 10px, #ffffff 10px, #ffffff 20px) !important;
	animation: defilementBordure 1s linear infinite !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
 @keyframes defilementBordure {
 from {
background-position: 0 0;
}
to {
	background-position: 40px 0;
}
}
/* L'ICO�NE GEANTE DE LA BOITE */
.boite-lettres-icon {
	font-size: 5.5rem !important; /* Force la boite a devenir tres grosse ! */
	margin-bottom: 15px !important;
	display: inline-block !important;
}
.zone-boite-lettres:hover .boite-lettres-icon {
	animation: battement 0.6s infinite alternate;
}
 @keyframes battement {
 0% {
transform: scale(1) rotate(-3deg);
}
 100% {
transform: scale(1.15) rotate(3deg);
}
}
.texte-action {
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	margin-bottom: 6px !important;
}
.zone-boite-lettres:hover .texte-action {
	color: #ff8800 !important;
}
.texte-mini {
	font-size: 1rem !important;
	color: #1a1a1a !important;
}
.succes {
	background-color: #dcfce7 !important;
	color: #166534 !important;
	padding: 12px !important;
	border-radius: 12px !important;
	margin-bottom: 20px !important;
}
.erreur {
	background-color: #fff !important;
	color: #1a1a1a !important;
	padding: 12px !important;
	border-radius: 12px !important;
	margin-bottom: 20px !important;
}
/* ==========================================================================
   PAGE LUDIQUE : FIN
   ========================================================================== */
/* ==========================================================================
   CODE ACTIF PAGE PROGRAMME SEANCE PRIORITAIRE PROCHAINE SEANCE
   ========================================================================== */
.double-colonne-programme {
	column-count: 2;
	column-gap: 5px; /* Elargi a 40px pour laisser respirer la ligne centrale */
	width: 100%;/*margin-top: 1px;*/

  /* FINITION 1 : TRACE LA LIGNE DE SEPARATION VERTICALE */
  /* Syntaxe : epaisseur | style | couleur (ici votre bleu de charte discret) */
  /*column-rule: 1px solid #889fdf;*/
}
/* Style de base pour toutes les seances de la liste */
/* Style de base pour toutes les seances de la liste (AVEC SECURITES ANTI-COUPURE) */
.item-seance {
	margin: 0 5px 10px 10px;
	padding: 12px !important;
	background-color: #fff !important;
	border: 1px solid #a5acbf !important; /* Bordure bleue gris par defaut */
	border-radius: 15px !important;
	break-inside: avoid !important;      /* Regle standard universelle moderne */
	-webkit-column-break-inside: avoid;  /* Securite pour Safari / iPhone */
	page-break-inside: avoid;            /* Compatibilite historique navigateurs */
}
/* LE STYLE MAGIQUE POUR LA PROCHAINE SEANCE (L'INDEX GAGNANT) */
.seance-prioritaire {
	background-color: #fff !important; /* Leger fond orange tres doux */
	border-left: 7px solid #999 !important; /* Grosse bordure orange vif */
	border-right: 7px solid #444 !important; /* Grosse bordure orange vif */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important; /* Ombre pour la faire ressortir */
}
/* On change le titre de la seance prioritaire en haut */
.seance-prioritaire .txtorange {
	font-weight: bold !important;
}
/* On change subtilement la couleur du titre de la seance prioritaire */
.item-seance.seance-prioritaire h4 {
	color: #1a1a1a;
}
/* Nettoyage des espacements internes */
.item-seance h4 {
	margin-bottom: 5px;
}
.item-seance p {
	color: #1a1a1a;
	margin-bottom: 6px;
}
/* Securite : On masque le filet de separation sous la seance prioritaire 
   car le bloc de couleur se suffit a lui-meme */
.item-seance.seance-prioritaire hr {
	display: none;
}
/* MASQUAGE PAR DEFAUT DES ANCIENNES SEANCES */
.seance-passee {
	display: none;
}
/*   FIN PROGRAMME MASQUER ANCIENNES SEANCES*/


/* ==========================================================================
   TOUS LES LIENS ET BOUTONS CLIQUABLES
   ========================================================================== */
/*	STYLE DU BOUTON EMAIL ADHERENT*/
   
a.btn-mail:link,
a.btn-mail:visited,
a.btn-mail:hover,
a.btn-mail:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #666;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: bold;
	font-size: 1.2rem;          /* Legerement reduit pour faire tenir les longues adresses */
	padding: 10px 18px;
	border-radius: 25px;
	border: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	width: auto;
	max-width: 100%;
	margin: 10px 0px 10px 0px;
	/* SECURITES ANTI-DEBORDEMENT POUR LES MAILS LONGS */
	word-break: break-all;       /* Autorise la coupure de l'adresse si elle est trop longue pour le mobile */
	text-align: center;
}
/* Le reste du CSS (:hover et :active) reste identique a l'etape precedente */
a.btn-mail:hover {
	background-color: #1a1a1a;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	color: #ffffff !important;
	border-top: none !important;
	border-bottom: none !important;
}
a.btn-mail:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Style specifique pour espacer l'icone du texte */
.icone-mail {
	margin-right: 8px;  /* Cree un espace de 8px a droite de l'enveloppe */
	font-size: 1.1rem;  /* Rend l'enveloppe legerement plus grande pour l'esthetique */
	line-height: 1;
	display: inline-block;
}
/* Ajustement de securite sur le bouton global */
a.btn-mail:link,
a.btn-mail:visited,
a.btn-mail:hover,
a.btn-mail:active {
	/* ... vos proprietes existantes ... */
	display: inline-flex;
	align-items: center; /* Force l'icone et le texte a etre parfaitement alignes sur la meme ligne horizontale */
	justify-content: center;
}
/* ==========================================================================
   BOUTONS PANNEAU SIGNALISATION VERT ORANGE ROUGE POUR PARTIE GESTION
   ========================================================================== */
	 
.btn-container {
	display: flex !important;       /* Active le mode Flexbox */
	flex-wrap: wrap;                /* Permet de passer a la ligne proprement sur mobile si l'ecran est trop petit */
	justify-content: center;        /* Centre horizontalement le bloc de boutons */
	gap: 5px;                      /* Cree un espace fixe automatique de 5px ENTRE les boutons (plus besoin de calculer les pourcentages !) */
	width: 100%;
	margin-top:20px;
	margin-bottom:20px;
	
	box-sizing: border-box !important;
}
.btn-chapo {
	font-size: 1.2rem;
	/*max-width: 220px;*/
	text-decoration: none;
	padding: 8px 5px 8px 5px;
	margin-top:5px;
	margin-bottom:5px;
	border: none;
	border-radius: 50px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	/* Legere ombre portee au repos */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transform: translateY(5px);
	/*margin-top: 10px;*/
	display: inline-block; /* Permet d'appliquer vos classes .minus, .demi, etc. */
	text-align: center;    /* Centre le texte a l'interieur du bouton elargi */
	box-sizing: border-box; /* Evite que le bouton ne depasse si vous ajoutez du padding */
}
/* Effet au survol commun : l'ombre s'accentue legerement et le bouton remonte d'un pixel */
.btn-chapo:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transform: translateY(1px);
	color : #1a1a1a;
	filter: brightness(0.7); /* Assombrit subtilement la couleur au survol */
}
/* Couleurs personnalisees appliquees via des classes */
.btn-vert {
	background-color: #999;/*OK VALIDER - GARDER CES COULEURS SPECIFIQUES*/
} 
.btn-orange {
	background-color: #dedede; /*ANNULER - GARDER CES COULEURS SPECIFIQUES*/
} 
.btn-rouge {
	background-color: #404040; /*SUPPRIMER - GARDER CES COULEURS SPECIFIQUES*/
} 
/* ==========================================================================
   "VOIR +" : ALIGNEMENT  + BOUTON ARRONDI CAPSULE
   ========================================================================== */
/* Le voile noir translucide qui assombrit le site en arriere-plan */



.ligne-mixte {
	width: 100%;
	margin-bottom: 15px;
	clear: both;
}
/* On garde strictement l'alignement de l'archive qui fonctionne */
.ligne-mixte h1,
.ligne-mixte .txtbleu {
	display: inline-block !important;
	vertical-align: middle !important; /* Ajuste middle pour centrer le bouton avec le H1 */
	margin: 0 15px 0 0 !important;
	padding: 0 !important;
}
/* LE BOUTON CLIQUABLE : On lui donne le look capsule arrondi */
.ligne-mixte .classe-suite {
	display: inline-block !important;
	vertical-align: middle !important; /* Ajuste middle pour un alignement parfait */
	/* Le volume du bouton */
	padding: 5px 14px !important;
	border-radius: 20px !important; /* Arrondi moderne style menu */
	/* Couleurs de securite (Texte blanc sur fond Bleu de charte) */
	background-color: #555 !important;
	color: #ffffff !important;
	border: 1px solid #999 !important;
	/* Typographie */
	font-size: 0.85rem !important;
	font-weight: bold !important;
	text-transform: uppercase;
	text-decoration: none !important; /* Supprime le soulignement */
	letter-spacing: 0.5px;
	/* Douceur de l'effet */
	transition: all 0.2s ease !important;
}
/* L'EFFET AU SURVOL (Inversion elegante) */
.ligne-mixte .classe-suite:hover {
	background-color: #ffffff !important;
	color: #889FDF !important;
	box-shadow: 0 4px 10px rgba(136, 159, 223, 0.25);
	transform: translateY(-1px); /* Petite levitation moderne */
}
/* Securite pour la balise de lien */
.ligne-mixte a {
	display: inline-block !important;
	text-decoration: none !important;
	vertical-align: middle !important;
}
/*--------------FIN BOUTON VOIR PLUS-----------------*/







/* ==========================================================================
   4. LIENS & BOUTONS
   ========================================================================== */
a.header:link,
a.header:visited,
a.header:hover,
a.header:active {
	text-decoration: none;
	color: #1a1a1a;
	font-size: 1.1rem;
	line-height: 1.4;
	text-align: center;
	border-bottom: 1px dashed #999;
	clear: both;
	transition: color 0.5s ease;
}
a.header:hover {
	color: #1a1a1a;
	border-bottom: 2px solid #999;
}
a.headerM:link,
a.headerM:visited,
a.headerM:hover,
a.headerM:active {
	font-weight: bold;
	border: hidden;
}
a.headerM:hover {
	color: #ff8800;
	border-top: 2px solid #999;
	border-bottom: 2px solid #999;
}

a.headerPLUS:link,
a.headerPLUS:visited,
a.headerPLUS:hover,
a.headerPLUS:active {
	text-decoration: none;
	color: #1a1a1a;
	font-size: 1.3rem;
	line-height: 1.4;
	text-align: center;
	border-bottom: 1px dashed #999;
	clear: both;
	transition: color 0.5s ease;
	font-weight:bold;
	margin-top:200px;
}
a.headerPLUS:hover {
	color: #1a1a1a;
	border-bottom: 2px solid #1a1a1a;
}

/* ==========================================================================
   BOUTON PRINCIPAL D'ATELIER (LARGEUR ADAPTATIVE PAR DEFAUT)
   ========================================================================== */
a.headerX:link,
a.headerX:visited,
a.headerX:hover,
a.headerX:active {
	text-decoration: none;
	color: #fff;
	background-color: #555; /* bleu gris */
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	margin: auto;
	clear: both;
	/* CORRECTION CRUCIALISEE : On retire le width fixe de 50% pour permettre aux classes de piloter */
	width: auto;
	padding: 8px 10px;
	display: block;
	border-radius: 35px;
	margin-bottom: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease; /* Animation fluide ajustable */
}
/* LES CLASSES ADDITIONNELLES POUR CHANGER LA TAILLE A LA DEMANDE */
.headerX-100 {width: 100% !important;}
.headerX-80 {width: 80% !important;}
.headerX-60 {width: 60% !important;} /* Equivaut a la taille d'origine */
.headerX-40 {width: 40% !important;}
.headerX-20 {width: 20% !important;}
.headerX-15 {width: 15% !important;}
.headerX-10 {width: 10% !important;}

a.headerX:hover {
	color: #fff;
	background-color: #777;
	transform: translateY(-7px); /* Souleve legerement la vignette */
	/* L'ombre devient un peu plus profonde pour simuler l'elevation */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* ==========================================================================
   GESTION DE L'INFOBULLE (REGLE DU JEU)
   ========================================================================== */

/* 1. Le lien "Voir la regle du jeu" */
a.bulle {
	position: relative;          /* CRUCIAL : sert de repere pour positionner l'info-bulle */
	text-decoration: none;
	color: #1a1a1a;              /* Rouge bordeaux */
	border-bottom: 1px dashed #1a1a1a;
	font-weight: bold;
	cursor: help;                /* Change le curseur en point d'interrogation */
}
/* 2. L'info-bulle (Le texte de la regle cache par defaut) */
a.bulle span {
	display: none;               /* MASQUE LE TEXTE PAR DEFAUT */
	/* Positionnement absolu juste au-dessus du lien */
	position: absolute;
	bottom: 130%;                /* Place la bulle au-dessus du texte */
	left: 50%;
	transform: translateX(-50%); /* Centre parfaitement la bulle horizontalement */
	/* Design de la bulle */
	width: 280px;                /* Largeur confortable pour lire la regle */
	background-color: #1a1a1a;   /* Fond sombre moderne */
	color: #ffffff;              /* Texte blanc */
	padding: 12px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.4;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	z-index: 999;                /* S'assure que la bulle passe par-dessus tout le reste */
}
/* 3. L'EFFET MAGIQUE : Quand la souris survole le lien (hover), le span s'affiche */
a.bulle:hover span {
	display: block;              /* FAIT APPARAITRE L'INFOBULLE */
}
/* 4. Optionnel : Ajout d'une petite fleche sous la bulle */
a.bulle span::after {
	content: "";
	position: absolute;
	top: 100%;                   /* Au bas de la bulle */
	left: 50%;
	margin-left: -6px;
	border-width: 6px;
	border-style: solid;
	border-color: #1a1a1a transparent transparent transparent; /* Fleche pointant vers le bas */
}
/* Cache l'info-bulle si elle est strictement vide */
a.bulle span:empty {
	display: none !important;
}

/* ==========================================================================
   TAILLES ET DIMENSIONS
   ========================================================================== */

/* On force les classes proportionnelles a reagir au systeme flex */
.maxi 				{	width: 100%;}
.deuxtiers 	{	
	width: calc(70% - 6px) !important; /*on triche un peu*/
}
.demi 				{	
	width: calc(50% - 6px) !important;
}
.tiers 				{	
	width: calc(33% - 6px) !important;
}
/*PRIVILIGIER CES CSS POUR BOUTOND*/
.grand 				{	width: 80%;}
.dbltiers 		{	flex: 0.6;}
.total 				{	flex: 1;}*/


/* ==========================================================================
   ELEMENTS BOUTONS ARRONDIS DE MENU DE NAVIGATION TOUTES PAGES
   ========================================================================== */

/* 1. LE CONTENEUR GLOBAL (Gere le centrage parfait sur ordinateur) */
.navigation-principale {
	width: 100%;
	margin: 5px 0;
 	text-align: center;
	clear: both;
}
.menu-liens {
	display: inline-flex;       /* Aligne les boutons cote a cote de facon flexible */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 2px;                  /* Cree un espace entre chaque bouton */
	width: auto;
}
/* 2. STYLE DES LIENS TRANSFORMES EN BOUTONS MODERNES */
.menu-liens a.headerM {
	display: inline-block !important;
	width: auto !important;
	clear: none !important;
	float: none !important;
	margin: 5px 5px;      /* Cree un espace respirable entre vos boutons */
	/* Marges internes pour creer le volume du bouton */
	padding: 8px 15px !important;
	/* Couleurs au repos */
	background-color: #eeeeee;/*gris tres pale*/
	color: #1a1a1a !important;  /* Votre bleu de texte d'origine */
	border: 1px solid #1a1a1a !important; /* Un filet bleu electrique tres fin */
	border-radius: 20px !important; /* Bords parfaitement arrondis style capsule */
	/* Typographie */
	font-size: 0.95rem;
	font-weight: bold;
	text-decoration: none !important; /* PLUS AUCUN SOULIGNEMENT BLEU ! */
	text-transform: uppercase;  /* Optionnel : force les majuscules elegantes */
	letter-spacing: 0.5px;
	/* Ombre douce identique a vos formulaires */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease !important; /* Animation douce au survol */
}
/* 3. L'INTERACTIVITE AU SURVOL (Hover) */
.menu-liens a.headerM:hover {
	/* Le bouton s'illumine avec bleu */
	background-color: #555 !important;
	border-color: #999 !important;
	color: #fff !important;   /* Le texte passe en blanc pour le contraste */
	/* Legere levitation comme votre bouton valider */
	transform: translateY(-5px);
	box-shadow: 0 6px 15px rgba(136, 159, 223, 0.3);
}
/* L'effet au clic physique */
.menu-liens a.headerM:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(136, 159, 223, 0.2);
}



/* ==========================================================================
   FORMULAIRE DE GESTION RUBRIQUES
   ========================================================================== */




/* Une seule classe à appliquer directement sur la balise <select> */
.select-moderne-unique {
    width: 100%;
    max-width: 300px;
    padding: 6px 35px 6px 10px; /* On laisse 35px à droite pour la flèche */
    border-radius: 6px;
    border: 1px solid #999;
    background-color: #ffffff; /* Couleur de fond propre */
    cursor: pointer;

    /* 1. On retire la flèche moche par défaut */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* 2. On injecte la flèche en image de fond, encodée proprement (100% compatible ISO/Europe de l'Ouest) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23889fdf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Calée à 12px du bord droit, centrée verticalement */
    background-size: 12px; /* Petite flèche fine et mignonne */
}



























/* 1. FLECHE POUR MENU DEROULANT Le conteneur qui englobe le select */
.select-fleche {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* 2. Le menu déroulant à l'intérieur */
.select-fleche select {
    width: 100%;
    padding: 6px 30px 6px 10px;
    border-radius: 20px;
    border: 1px solid #999;
    background: #fff;
    cursor: pointer;
    
    /* On masque la flèche moche d'origine */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 3. La magie : CSS fabrique lui-même la petite flèche textuelle à droite ! */
/* La magie : CSS fabrique lui-même la petite flèche sans risque d'encodage ! */
.select-fleche::after {
    content: "\25BC"; /* C'est le code de sécurité pour le triangle plein pointant vers le bas */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #889fdf; 
    font-size: 11px;
    pointer-events: none; 
}


.select-wrapper {
  position: relative;
  display:inline-block;
}
/* Ajout pour placement correct Alignement horizontal de vos inputs */
.form-row {
	display: flex !important;
	gap: 15px;
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box;
}
.form-group {
	margin-bottom: 20px;
	margin-top: 20px;
}
.form-group label {
	display: block;
	margin-bottom: 5px;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 600;
	margin-top: 20px;
}
.form-group input,
.form-group textarea {
	padding: 9px 12px;
	border: 1px solid #999;
	border-radius: 20px;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.2rem;
	box-sizing: border-box;
	transition: all 1s ease;
	display: inline-block;
	margin-bottom: 12px;
}
/* Effet moderne au clic (Focus) */
.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: #1a1a1a; /* Couleur violette moderne */
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
	display: inline-block;
}

/* Alignement et centrage des boutons du bas (Ajouter + Annuler) */
.form-buttons-row {
	display: flex !important;
	justify-content: center; /* Centre les boutons horizontalement */
	gap: 20px;               /* Espace entre le bouton vert/bleu et votre bouton orange */
	margin-top: 30px;
	width: 100%;
}
.modern-form {
	max-width: 100%;/*attention modif a verifier sur autres pages*/
	margin: 40px auto;
	padding: 32px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.09);
}
.modern-form h2 {
	margin-bottom: 24px;
	color: #1a1a1a;
	font-size: 24px;
	font-weight: 600;
}
.sans {
	margin-top:0px;
	padding-top:0px;
}

/* Exemple pour styliser votre bouton de soumission s'il n'est pas deja pret */
.submit-btnmax {
	flex: 1;
	max-width: 300px; /* Evite qu'il ne devienne immense */
	padding: 10px 20px;
	cursor: pointer;/* Ajoutez styles de couleurs ici */
}

/* Styles specifiques pour la zone de fichier moderne */
.file-drop-zone {
	position: relative;
	width: 100%;
	height: 160px;
	border: 2px dashed #fff;
	border-radius: 12px;
	background-color: #fff;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	overflow: hidden;
}



/* Effet magique declenche par le JavaScript quand on survole avec une image */
.file-drop-zone.drag-over {
	border-color: #999; /* Devient orange au survol */
	background-color: #fff;
	transform: scale(1.01); /* Leger effet de zoom dynamique */
}

/* On cache l'input HTML natif qui est tres moche */
.file-drop-zone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}


/* Masquage initial de l'apercu et du bouton */
.preview-thumbnail {
	display: none;
	max-height: 180px;
	margin: 0 auto;
	border-radius: 4px;
}
.remove-btn {
	display: none; /* Gere par le JS */
	position: absolute;
	top: 10px;
	right: 10px;
	background: #1a1a1a;
	color: fff;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
}
/* Cette regle force TOUS les select a copier le design des inputs */
input[type="text"], select {
	font-size: 1rem;
	font-family: inherit;     /* Utilise la meme police */
	border: 1px solid #999;   /* Meme bordure grise que vos inputs */
	border-radius: 4px;       /* Meme arrondi */
	padding: 8px 12px;        /* Meme espace pour le texte */
	background-color: #fff;   /* Supprime le fond gris ou transparent natif */
	/* FORCE LA MEME HAUTEUR : Evite que le select soit plus petit */
	box-sizing: border-box !important;
	height: 38px;             /* Mettez ici la hauteur exacte de vos inputs */
}
/*===========fin ajout formulaire=====================*/

.submit-btn {
	/*width: 50%;*/
	padding: 6px;
	background-color: #1a1a1a;
	color: white;
	border: 5px solid #1a1a1a;
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	/* CORRECTION 1 : On passe a 0.2 seconde pour que ce soit instantane et nerveux */
	transition: all 0.2s ease;
	/* CORRECTION 2 : Au repos, le bouton est sagement a sa place */
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre plus douce au repos */
}
/* Effet au survol du bouton */
.submit-btn:hover {
	background-color: #1a1a1a;
	/* CORRECTION 2 SUITE : C'est ICI qu'il monte de 4px et que l'ombre grandit ! */
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
	/* idee de bordure verte emeraude pour le succes */
	border: 5px solid #999;
	text-align: center;
}
/* Effet au clic du bouton */
.submit-btn:active {
	/* CORRECTION 3 : On cumule l'effet d'ecrasement (scale) ET on annule la levitation */
	transform: scale(0.9) translateY(0);
	/* couleur ocre/marron au clic */
	background-color: #1a1a1a;
	border-color: #1a1a1a; /* On colore aussi la bordure pour eviter un reste de vert */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Masque visuel personnalise */
.file-drop-mask {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	pointer-events: none;
	padding: 16px;
}
.upload-icon {
	color: #1a1a1a;
	margin-bottom: 8px;
	transition: transform 0.8s ease;
}
.file-text {
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 500;
}
.file-subtext {
	font-size: 16px;
	color: #1a1a1a;
	margin-top: 4px;
}
/* Animations au survol et au clic de la zone de fichier */
.file-drop-zone:hover {
	border-color: #1a1a1a;
	background-color: #fff;
}
.file-drop-zone:hover .upload-icon {
	transform: translateY(-2px);
}

/* Quand l'input cache recoit le focus (navigation au clavier) */
.file-drop-zone:has(input:focus) {
 border-color: #1a1a1a;
 box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* pour avoir la visu immediate de la photo chargee Style de la vignette d'aperacu */
.preview-thumbnail {
	display: none; /* Cachee au depart */
	width: auto;
	height: 95%; /* S'integre bien dans les 120px de la zone */
	max-width: 90%;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1; /* Reste sous l'input invisible pour pouvoir re-cliquer dessus */
}
/* Classe utilitaire appliquee quand une image est chargee */
.file-drop-zone.has-image {
	border-style: solid; /* Devient une ligne continue plutot que pointillee */
	border-color: #333; /* Devient verte pour valider le succes */
	background-color: #fff;
}
/* Bouton supprimer la photo personnalise */
.remove-btn {
	display: none; /* Cache au depart */
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background-color: #1a1a1a; /* Rouge moderne */
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(239, 68, 68, 0.7);
	transition: all 0.8s ease;
	z-index: 3; /* Indispensable pour passer au-dessus de l'input de fichier */
}
.remove-btn:hover {
	background-color: #1a1a1a;
	transform: scale(1.1);
}
/* On force l'affichage via JS en ciblant le bouton quand l'image est active */
.file-drop-zone.has-image .remove-btn {
	display: flex;
}
/* ==========================================================================
   GRILLE DE DATE 2x2 EQUILIBREE POUR GESTION PROGRAMME
   ========================================================================== */
/* Le parent devient une grille invisible de 2 colonnes egales */
.ligne-selection-date {
	display: grid !important;
	grid-template-columns: 1fr 1fr; /* 2 colonnes strictement egales */
	gap: 10px;                     /* Espace de 10px entre les boites */
	width: 100%;
	margin-top: 10px;
}
/* Stylisation individuelle de chaque menu deroulant */
.ligne-selection-date select {
	/* On redonne des dimensions saines et stables */
	width: 100% !important;
	min-width: 0 !important;
	/* Textures et Graphisme Modern Form */
	padding: 10px 8px;
	background-color: #eeeeee;  /* Fond blanc casse mat */
	border: 1px solid #999;  /* Filet gris fin */
	border-radius: 8px;         /* Arrondi moderne */
	/* Typographie : On remet une taille confortable ! */
	font-size: 1rem;
	color: #1a1a1a;             /* bleu de charte */
	font-weight: normal;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
}
/* Interactivite au survol */
.ligne-selection-date select:hover {
	border-color: #999;
	background-color: #ffffff;
}
/* Interactivite au clic (Focus) */
.ligne-selection-date select:focus {
	border-color: #1a1a1a;      /* Halo bordeaux au clic */
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(170, 61, 61, 0.15);
}
/* Donne l'aspect gris estompe d'un vrai placeholder aux valeurs par defaut */
.ligne-selection-date select:invalid,
.ligne-selection-date select option[value=""] {
 color: #1a1a1a !important;
 font-weight: normal;
}

/*===============================================*/
/* 1. FORCE TOUS TOUS LES INPUTS ET MENUS DEROULANTS */
/*===============================================*/
/* 1. TOUS LES INPUTS ET MENUS DEROULANTS */
input[type="text"],
input[type="password"],
input[type="name"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"] {
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid #999;
	border-radius: 20px;
	padding: 8px 16px;
	background-color: #fff;
	box-sizing: border-box !important;
	height: 38px;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="name"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover {
	background-color: #fff;
	color: #1a1a1a;
}
/* 2. LE MENU DEROULANT CORRIGE (Avec une vraie fleche en texte integree) */
select {
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid #999;
	border-radius: 20px;
	padding: 8px 35px 8px 16px; /* Plus d'espace a droite pour la fleche */
	background-color: #fff;
	box-sizing: border-box !important;
	height: 38px;
	/* Force le navigateur a accepter le design */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* LA FLECHE INFAILLIBLE : On utilise un simple triangle en texte noir */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='14' height='14' viewBox='0 0 24 24'><path fill='%23666' d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: calc(100% - 14px) center; /* Place la fleche pile a droite */
}
/* 3. LES ZONES DE TEXTE MULTI-LIGNES */
textarea {
	font-size: 1.2rem;
	font-family: inherit;
	border: 1px solid #999;
	border-radius: 20px;
	padding: 12px 16px;
	background-color: #fff;
	box-sizing: border-box !important;
	height: auto;
	min-height: 100px;
	resize: vertical;
}
textarea:hover {
	background-color: #fff;
}






/*TROMBINOSCOPE*/

/* 1. LE CONTENEUR GLOBAL (La grille magique) */
.grille-trombinoscope {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;           /* Permet aux membres de passer a la ligne suivante */
    align-items: stretch;      /* Force toutes les cartes de la meme lignea la meme hauteur */
    gap: 20px;                 /* Espace regulier de 20px tout autour des cartes */
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
}

/* 2. LA CARTE INDIVIDUELLE DE CHAQUE MEMBRE */
.carte-membre {
    flex: 1;
    min-width: 250px;          /* Securite sur smartphone : max 2 par ligne */
    max-width: 25%;            /* Verrouille l'affichage à 5 membres maximum par ligne sur PC */
    background-color: #f5f5f5; /* Votre fond gris clair modern-form */
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligne les noms au meme niveau en bas */
}

/* Petit effet au survol de la souris sur la fiche */
.carte-membre:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    border-color: #999;     /* bleu */
}

/* 3. LE CONTENEUR ET LA PHOTO DE L'ADHERENT */
.cadre-photo-portrait {
    width: 100%;
    height: 225px;             /* Hauteur fixe pour le rectangle de prise de vue */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #f5f5f5; /* Fond d'attente si pas de photo */
}

.cadre-photo-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* LE BOUCLIER PHOTO : recadre automatiquement le portrait au centre sans AUCUNE deformation */
    display: block;
}

/* 4. LE DESIGN DU TEXTE */
.nom-trombi {
    margin: 0;
    font-size: 20px;
		font-weight:normal;
    color: ;#718096
    line-height: 1.3;
}

.nom-famille {
    font-size: 2rem;
		font-weight:bold;
    color:#1a1a1a ;
    letter-spacing: 0.5px;
}
.fiche-detaillee {
	color:#555;
	}
/*FIN TROMBINOSCOPE*/

  /* ==========================================================================
     BOUTON TELECHARGEMENT UNIVERSEL
     ========================================================================== */
.btn-telechargement-universel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #166534; /* Vert securisant et professionnel */
	color: #ffffff !important;
	font-weight: bold;
	font-size: 1.05rem;
	padding: 10px 22px;
	border-radius: 30px; /* Look capsule arrondi moderne */
	text-decoration: none !important;
	box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2); /* Ombre douce verte */
	transition: all 0.2s ease-in-out;
}
/* Au survol (PC) ou a l'appui (Mobile) */
.btn-telechargement-universel:hover, .btn-telechargement-universel:active {
	background-color: #166534; /* Devient legerement plus fonce */
	transform: translateY(-2px); /* Petite levitation nerveuse */
	box-shadow: 0 6px 12px rgba(4, 120, 87, 0.3);
}
/* ==========================================================================
     STYLISATION GRAPHIQUE DE LIENS 
     ========================================================================== */
		
/* 1. L'EFFET ONDE (Une bulle pastel qui gonfle au toucher) */
.lien-onde-modifier,
.lien-onde-supprimer {
	position: relative;
	display: inline-block;
	color: #1a1a1a; /* bleu de base */
	text-decoration: none !important;
	font-weight: bold;
	padding: 6px 12px;
	z-index: 1;
	transition: color 0.3s ease;
}
.lien-onde-supprimer {
		color: #1a1a1a; /* rouge de base */
}
/* On prepare la bulle invisible au centre */
.lien-onde-modifier::before,
.lien-onde-supprimer::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: rgba(136, 159, 223, 0.25); /* bleu pastel transparent */
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.5s ease, height 0.3s ease, border-radius 0.3s ease;
	z-index: -1; /* Reste sagement cache derriere le texte */
}
.lien-onde-supprimer::before {
		background-color: rgba(223, 138, 136, 0.25); /* rouge pastel transparent */
}

/* Au survol ou au clic tactile mobile, la bulle se deploie en capsule douce */
.lien-onde-modifier:hover,
.lien-onde-modifier:active {
	color: #1a1a1a; /* Devient bleu fonce intense */
}

.lien-onde-supprimer:hover,
.lien-onde-supprimer:active {
		color: #1a1a1a; /* Devient rouge fonce intense */
}

.lien-onde-modifier:hover::before,
.lien-onde-supprimer:hover::before,
.lien-onde-modifier:active::before,
.lien-onde-supprimer:active::before {
	width: 100%;
	height: 100%;
	border-radius: 20px; /* Epouse la forme d'un bouton arrondi autour du texte */
}




/* 2. L'EFFET SURLIGNE (Le coup de feutre orange de gauche a droite) */
.lien-surligne {
	color: #1a1a1a;
	text-decoration: none !important;
	font-weight: bold;
	padding: 0 4px;
	/* On cree un degrade orange transparent cache en bas du mot */
	background-image: linear-gradient(rgba(255, 136, 0, 0.35), rgba(255, 136, 0, 0.35)); /* orange */
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 100%; /* Masque au depart (0% de largeur) */
	transition: background-size 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease;
}
/* Au survol ou au clic tactile, le surligneur se deploie */
.lien-surligne:hover,
.lien-surligne:active {
	background-size: 100% 100%; /* Le feutre sature tout le fond du texte */
	color: #1a1a1a; /* Le texte passe en bordeaux pour un superbe contraste */
}
.btn-viseur { /*--**---*/
	position: relative;
	display: inline-block;
	color: #1a1a1a;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 20px;
	transition: all 0.3s ease;
}
/* On prepare les petits coins graphiques caches */
.btn-viseur::before,
.btn-viseur::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 0 solid transparent;
	transition: all 0.3s ease;
	opacity: 0;
}
/* Coins haut-gauche et bas-droite */
.btn-viseur::before {
	top: 0;
	left: 0;
}
/* Coins bas-gauche et haut-droite */
.btn-viseur::after {
	bottom: 0;
	right: 0;
}
.btn-viseur:hover {
	color: #ff8800;
}
.btn-viseur:hover::before {
	opacity: 1;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
}
.btn-viseur:hover::after {
	opacity: 1;
	border-bottom: 2px solid #999;
	border-right: 2px solid #999;
}
/*-----------------------------------*/
.lien-magique {
	position: relative;
	color: #1a1a1a; /* bleu */
	text-decoration: none !important; /* On supprime le soulignement moche natif */
	font-weight: bold;
	display: inline-block;
	padding-bottom: 2px; /* Cree un petit espace pour la future ligne */
}
/* On prepare la ligne magique invisible (largeur 0) calee a gauche */
.lien-magique::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px; /* Epaisseur de la ligne fine graphique */
	background-color: #ff8800; /* orange de charte dynamique */
	transform: scaleX(0); /* La ligne est ecrasee au depart (largeur 0%) */
	transform-origin: bottom left; /* L'animation demarre depuis la gauche */
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Mouvement fluide */
}
/* ETAPE A : Au survol de la souris, la ligne se deploie a 100% de gauche a droite */
.lien-magique:hover {
	color: #ff8800; /* Le texte passe a l'orange en douceur */
	transition: color 0.3s ease;
}
.lien-magique:hover::after {
	transform: scaleX(1); /* Deploiement total */
}
/* ETAPE B : L'ASTUCE PRO POUR L'EFFET DE FUITE PAR LA DROITE
   Quand la souris s'en va, l'origine de l'animation bascule instantanement a droite. 
   La ligne se retracte donc vers la droite au lieu de revenir en arriere ! */
.lien-magique::after {
	transform-origin: bottom right;
}
.lien-magique:hover::after {
	transform-origin: bottom left;
}

.btn-liquide {
	position: relative;
	display: inline-block;
	padding: 12px 28px;
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
	border-radius: 30px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	z-index: 1;
	transition: color 0.4s ease;
}


/* ==========================================================================
   CHAPITRE 6 : INFRASTRUCTURE DE LA VISIONNEUSE (LIGHTBOX)
   ========================================================================== */

/* 1. SECURITE DE DEFILEMENT DE LA PAGE DE FOND */
body.lb-disable-scrolling {
	overflow: hidden; /* Empeche le visiteur de faire defiler la page web du club en arriere-plan tant que la photo est ouverte en grand */
}

/* 2. LE VOILE NOIR D'ARRIERE-PLAN (L'OVERLAY) */
.lightboxOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;             /* S'assure que le voile noir passe par-dessus tout le site */
	background-color: #575757; /* Couleur gris fonce du voile d'arriere-plan */
	opacity: 1;                /* Opacite maximale */
	display: none;             /* Masque par defaut (gere par le script au clic) */
	
	/* OBSOLETE (IE6-8) : Ce vieux filtre Microsoft peut etre supprime, il est ignore par les smartphones */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
}

/* 3. LA BOITE DE DIALOGUE PRINCIPALE (CONTENEUR GLOBAL) */
.lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10000;      /* Doit etre superieur a l'overlay (9999) pour passer devant le voile noir */
	text-align: center;  /* Centre horizontalement l'image affichee */
	line-height: 0;
	font-weight: normal;
	outline: none;
}

/* 4. LE STYLE GRAPHIQUE DE LA PHOTO EXPOSEE */
.lightbox .lb-image {
	display: block;
	height: auto;
	max-width: inherit;
	max-height: none;
	border: solid 1px #fff; /* Fine bordure blanche style encadrement de galerie d'art */
	
	/* OMBRE PORTEE ENRICHIE (Unifiee pour tous les types de navigateurs PC et mobiles) */
	box-shadow: 8px 13px 8px #1a1a1a;
}

/* 5. NETTOYAGE DES LIENS PHOTOS */
.lightbox a img {
	border: none; /* Supprime les filets bleus indesirables que les vieux navigateurs mettent sur les images cliquables */
}

/* 6. LE CADRE EXTERIEUR DE TRANSITION */
.lb-outerContainer {
	position: relative;
	width: 250px;
	height: 250px;
	margin: 0 auto;             /* Centre le cadre a l'ecran */
	background-color: #1a1a1a;  /* Couleur de fond noir visible uniquement pendant le chargement ou l'animation de taille */
	
}

/* 7. LE NETTOYAGE DES FLUX (CLEARFIX) */
.lb-outerContainer:after {
	content: "";
	display: table;
	clear: both; /* Force le cadre noir a s'etirer proprement pour englober l'image sans bafouiller */
}

/* 8. L'ICONE DE CHARGEMENT DE L'IMAGE (LE LOADER) */
.lb-loader {
	position: absolute;
	top: 43%; /* Centre l'icone verticalement au milieu de la zone */
	left: 0;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

/* 9. LE BOUTON ANNULER LE CHARGEMENT */
.lb-cancel {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: url(../css/js/images/loading.png) no-repeat; /* Image du petit rond qui tourne */
}

/* ==========================================================================
   INTERACTIVITE : MENUS ET FLECHES DE NAVIGATION SUIVANT / PRECEDENT
   ========================================================================== */

/* ==========================================================================
   MODIFICATION GRAPHIQUE : FLECHES EXPULSEES A L'EXTERIEUR DE L'IMAGE
   ========================================================================== */

/* 10. LA ZONE DE NAVIGATION ELARGIE */
.lb-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

/* 11. LA FLECHE PRECEDENTE (POUSSEE A GAUCHE) */
.lb-nav a.lb-prev {
	width: 60px;       /* On lui donne une largeur fixe de bouton (60px) */
	height: 60px;       /* Hauteur fixe */
	position: absolute;
	top: 50%;           /* On la centre verticalement au milieu de la photo */
	transform: translateY(-50%);
	
	/*L'ASTUCE MAGIQUE : Une marge negative pour la faire SORTIR du cadre blanc */
	left: -80px;        /* Pousse la fleche a 80px a gauche de l'image */
	
	background: url(js/images/prev.png) center center no-repeat; /* Centrage de l'icone dans son bouton */
	opacity: 0.5;       /* Legerement visible (50%) au repos pour que l'adherent sache qu'elle est la  */
	transition: opacity 0.2s, transform 0.2s ease;
}

/* Effet au survol de la fleche gauche */
.lb-nav a.lb-prev:hover {
	opacity: 1;         /* S'illumine a 100% au survol */
	transform: translateY(-50%) scale(1.1); /* Petit gonflement ludique */
}

/* 12. LA FLECHE SUIVANTE (POUSSEE A DROITE) */
.lb-nav a.lb-next {
	width: 60px;       /* Largeur fixe */
	height: 60px;       /* Hauteur fixe */
	position: absolute;
	top: 50%;           /* Centree verticalement */
	transform: translateY(-50%);
	
	/* L'ASTUCE MAGIQUE : Une marge negative pour la faire SORTIR a droite */
	right: -80px;       /* Pousse la fleche a 80px a droite de l'image */
	
	background: url(js/images/next.png) center center no-repeat; /* Centrage de l'icone */
	opacity: 0.5;       /* Semi-transparente au repos */
	transition: opacity 0.2s, transform 0.2s ease;
}

/* Effet au survol de la fleche droite */
.lb-nav a.lb-next:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   BLOC D'INFORMATIONS : LEGENDES, COMPTEUR ET BOUTON FERMER (LE BAS)
   ========================================================================== */

/* 13. LE CONTENEUR DES TEXTES DE BAS DE PAGE */
.lb-dataContainer {
	margin: 0 auto;
	padding-top: 5px;
	width: 100%;
	
	/* OBSOLETE (IE6-7) : Hack de zoom Microsoft a ignorer */
	/* *zoom: 1; */
}
.lb-dataContainer:after {
	content: "";
	display: table;
	clear: both; /* Aligne le sous-bloc proprement sous l'image */
}
.lb-data {
	padding: 0 4px;
	color: #fff; /* ecrit les legendes en blanc sur le fond noir */
}

/* 14. LA LEGENDE DU CLICHE (LE COMPOSANT EXPLICATIF) */
.lb-data .lb-details {
	width: 85%;
	float: left;
	text-align: center;
}
.lb-data .lb-caption {
	font-family: 'Anaheim', sans-serif; 
	letter-spacing: 0.17em;             /* ecarte legerement les lettres pour un style galerie */
	line-height: 1.8em;
	font-size: 1.1em;
	word-spacing: 0.1em;
	color: #fff;
}
.lb-data .lb-caption a {
	color: #fff;
	text-align: center;
}

/* 15. LE LE COMPTEUR DE SELECTION (Ex: "Image 3 sur 24") */
.lb-data .lb-number {
	display: block;
	clear: left;
	padding-bottom: 1em;
	padding-top: 2em;
	font-size: 1.1em;
	color: #fff;
	text-align: left; /* Aligne le numero d'index sur le bord gauche */
}

/* 16. LE BOUTON FERMER LA BOITE NOIRE (LA CROIX "X") */
.lb-data .lb-close {
	display: block;
	float: right;
	margin-top:20px;               /* Se range tout en bas a droite sous la photo */
	width: 40px;
	height: 40px;
	background: url(js/images/close.png) top right no-repeat; /* Image de votre petite croix de fermeture */
	text-align: right;
	outline: none;
	opacity: 0.5;               /* Presque transparente au repos (50% visible) pour rester discrete */
	transition: opacity 0.1s;   /* eclairement fluide au survol */
}
.lb-data .lb-close:hover {
	cursor: pointer;
	opacity: 1;                 /* S'illumine a 100% blanc des que le pouce ou la souris s'approche */
}

/* ==========================================================================
   BOITE DIALOGUE SUPPRIMER OUI NON
   ========================================================================== */
.voile-noir-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Voile a 60% d'opacite */
    z-index: 9999; /* Passe au-dessus de tout, meme de la Lightbox */
    display: flex;
    justify-content: center;
    align-items: center;
		backdrop-filter: blur(205px);
}

/* Le design de boite d'alerte */
.boite-alerte-design {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: apparitionLegere 0.3s ease;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.icone-alerte {
    font-size: 40px;
    margin-bottom: 10px;
}

.boite-alerte-design h3 {
    color: #1a1a1a; /* bleu de charte */
    margin-bottom: 10px;
    font-size: 20px;
}

.boite-alerte-design p {
    color: #4a5568;
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.4;
}

.boutons-alerte-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
}

.boutons-alerte-row .btn-chapo {
    flex: 1;
    text-align: center;
}

/* Petite animation d'apparition douce */
@keyframes apparitionLegere {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}




/* --- 1. Vos blocs principaux --- */
.fond-blanc { 
background-color: #ffffff; color: #1a1a1a;
width:1100px;
margin-left:-40px;
 }
.fond-gris  { 
background-color: #555555; color: #eefffeeee;
width:1100px;
margin-left:-40px;
 }
.fond-noir  { 
background-color: #1a1a1a; color: #fff; width:1100px;
width:1100px;
margin-left:-40px;
 }

/* --- 2. Adaptation automatique des titres (La Cascade CSS) --- */
.fond-blanc h2 { 
color: ##1a1a1a;; } /* bleu habituel */
.fond-gris h2  { 
color: #fff; }    
.fond-noir h2  { 
color: #fff; } /* Blanc pur pour un contraste maximal */

/* --- 3. Adaptation des paragraphes --- */
.fond-blanc p { 
color: #1a1a1a; }    
.fond-gris p { 
color: #fff; }    
.fond-noir p { 
color: #fff; }    

.fond-noir img {
	border: solid 1px #fff;
	}
	
/* 1. FLECHE POUR MENU DEROULANT Le conteneur qui englobe le select */
.select-fleche-analyse {
    position: relative;
    display: inline-block;
    width: 30%;
}

/* 2. Le menu déroulant à l'intérieur */
.select-fleche-analyse select {
    width: 100%;
    padding: 6px 30px 6px 10px;
    border: 1px solid #999;
    background: #fff;
    cursor: pointer;
    
    /* On masque la flèche moche d'origine */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 3. La magie : CSS fabrique lui-même la petite flèche textuelle à droite ! */
/* La magie : CSS fabrique lui-même la petite flèche sans risque d'encodage ! */
.select-fleche-analyse::after {
    content: "\25BC"; /* C'est le code de sécurité pour le triangle plein pointant vers le bas */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #889fdf; 
    font-size: 11px;
    pointer-events: none; 
}
	
/*--------------FIN-------------------*/