@charset "utf-8";
@import url('https://googleapis.com');
/* CONFIGURATION : Le navigateur connaît maintenant Anaheim et peut appliquer le 400 */
body, h1, h2, h3, h4, h5, p, span {
	font-family: 'Anaheim', sans-serif !important;
	font-weight: 400 !important;
}
/* Sauf les éléments précis en gras (600) */
.gras, button, .btn-chapo, b, strong {
	font-family: 'Anaheim', sans-serif !important;
	font-weight: 600 !important;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	overflow-x: hidden; /* Sécurité ultime anti-défilement horizontal sur mobile */
	background-color: #f9f9f9; /* Fond très léger pour faire ressortir les vignettes *//*padding: 5px;  /* Marge de sécurité sur les côtés de l'écran */
}
body {
	font-family: "Anaheim", sans-serif;
	color: #1a1a1a;
	font-size: 16px; /* Taille de texte standard et lisible sur smartphone */
	max-width: 100%;
	font-style: normal;
	font-weight: 400;
}
/* ==========================================================================
   STRUCTURE
   ========================================================================== */
/*   DIAPORAMA SUR ACCUEIL*/
.conteneur-diapo {
	width: 1200px;
	max-width: 100%;        /* S'aligne sur la largeur maximale de votre design */
	margin: 10px 0px 0px 0px; /* Centre le bloc et ajoute une marge en bas */
	box-sizing: border-box;
}
/* SÉCURITÉ : On s'assure que les images à l'intérieur respectent le cadre */
.conteneur-diapo img {
	border-radius: 0 !important; /* Annule les arrondis des images pour éviter les doubles coins */
	margin: 0px;
	width: 1200px;
	height: auto;
}
/*   FIN DIAPORAMA SUR ACCUEIL*/
/* Le conteneur calibré à 1100px */
.wrapper {
	background-color: #fff;
	width: 100%;
	max-width: 1100px; /* Limite la largeur à 1100px */
	margin: 5px auto !important; /* Centre la page horizontalement */
	border-radius: 10px !important; /* Arrondis plus petits, plus adaptés aux smartphones */
	padding: 0 10px;   /* Marge de sécurité pour les mobiles */
	display: flex;
	flex-direction: column;
	flex: 1;           /* Occupe tout l'espace vertical libre */
	text-align:left;
}
.wrapper h2 {
	text-align:left;
}

main {
	display: block;
	flex: 2;             /* Proportion d'espace */
	min-width: 0;        /* Permet le rétrécissement fluide */
	background-color: #fff;
	padding: 0px 0px 0px 0px;
}
/* En-tête (Header) */
header {
	background-color: #fff;
	padding: 25px 25px 0px 25px;
	text-align: center;
	margin: 3px 0px 0px 0px;
}
/* Zone des 2 colonnes */
.main-content {
	display: flex;
	flex-direction: column; /* Côte à côte par défaut sur ordinateur */
	flex: 1;             /* S'étire verticalement */
	width: 100%;
}
/* Pied de page (Footer) */
footer {
	background-color: #fff;
	text-align: left;
	padding: 5px;
	margin-bottom: 10px;
	width: 100%;
}
/* ==========================================================================
   FIN STRUCTURE
   ========================================================================== */



/* ==========================================================================
   TYPOGRAPHIE ET BORDURES
   ========================================================================== */
h1 { /*TITRE CCPSA, STYLE UNIQUE*/
	font-size: 1.95rem;
	line-height: 1rem;
	color: #4c6ea7; /*bleu fort */
	margin-bottom: 20px;
	margin-top: 20px;
}
h2 { /*TOUS LES TITRES DE RUBRIQUES*/
	font-size: 2.1rem;
	line-height: 1;
	color: #2E5DC9; /*bleu*/
	margin-bottom: 0.7rem;
	margin-top: 0.8rem;
	text-align: center;
	font-weight: 400;
}
h3 {
	color: #A13006; /*rouge*/
	font-size: 1.8rem;
	line-height: 1.1;
	margin: 6px 0px 4px 0px;
}
h4, h5 {
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 5px 0px 3px 0px;
	color: #1a1a1a; /*noir*/
	font-weight: 600;
}
h5 {
	color: #b96738; /* orange brun */
	margin-bottom: 10px;
	text-align: center;
}
p, address {
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	word-spacing: 0.04em;
	margin-bottom: 10px;
}
address {
	font-style: italic;
	text-align: center;
}
.txtfooter {
	color: #6C7F94;
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	word-spacing: 0.05em;
	text-align : left;
}
.text-center {
	text-align: center !important;
}
.center {
	text-align: center;
}
.titre {
	font-size: 3.5rem;
	line-height: 1.1;
}
.menu {
	font-weight: normal;
	font-size: 1.08rem;
}
/* ALIGNEMENTS */
.fag {
	text-align: left;
}
.border, .borderbleu {
	border-bottom: solid 1px #aa3d3d;
	width: 100%;
	margin-bottom: 8px;
	clear: both;
}
.borderbleu {
	border-bottom: solid 2px #889fdf;
}
hr {
	border: dashed 1px #889fdf;
	margin: 3px 0px 5px 0px;
	clear: both;
}
hr.fondu {
	border: none;
	height: 1px;
	/* Un dégradé transparent -> noir -> transparent */
	background-image: linear-gradient(to right, transparent, #1a1a1a, transparent);
	margin: 5px 0 7px 0;
}
/* COULEURS DE TEXTE */
.txtbleu {
	color: #2E5DC9;
}
.txtbeige {
	color: #efe4a7;
}
.txtorange {
	color: #b96738;
} /*orange brun*/
.txtorangevif {
	color: #ff8800;
} /*orange brun*/
.txtrouge {
	color: #ef4444;
}
/* COULEURS DE FOND */
.bleu {
	background-color: #a5acbf;
}
.beige {
	background-color: #e1d5bf;
}
.vert {
	background-color: #b2c4ba;
}
.orange {
	background-color: #f9ebde;
}
.mauve {
	background-color: #9d8db4;
}
.gris {
	background-color: #DCDCDC;
}
/* ==========================================================================
   FIN TYPOGRAPHIE ET BORDURES
   ========================================================================== */


/* ==========================================================================
   LA VIGNETTE MOBILE MINIMALISTE
   ========================================================================== */

/* Le conteneur qui enveloppe toutes les vignettes utile pour annuaire*/
.grille-mobile {
	display: flex;
	flex-direction: column; /* Aligne les vignettes strictement l'une sous l'autre */
	gap: 20px;              /* Espace généreux entre chaque bloc adhérent */
	width: 100%;
}
.vignette-mobile {
	width: 70%;            /* Occupe toute la largeur du téléphone */
	background-color: #f4f4f4;
	border: 1px solid #e0e0e0;
	border-radius: 12px;    /* Jolis bords arrondis discrets */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); /* Ombre très subtile */
	/* Flexbox vertical pour ranger le contenu de la vignette */
	display: flex;
	flex-direction: column;
	align-items: center;    /* Centre tous les éléments horizontalement */
	text-align: center;
}
/* L'image de l'adhérent */
.vignette-mobile img {
	height: 140px;          /* Hauteur fixe raisonnable sur écran de téléphone */
	width: auto;
	max-width: 100%;
	object-fit: contain;    /* Ne déforme jamais la photo */
	border-radius: 8px;
	border: 1px solid #eee;
	margin-bottom: 5px;    /* Espace sous la photo */
}
/* Les textes à l'intérieur */
.vignette-mobile h4 {
	font-size: 1.3rem;      /* Titre bien visible mais pas géant */
	color: #889fdf;         /* Votre bleu de charte graphique */
	margin-bottom: 5px;
}
.vignette-mobile p {
	font-size: 1rem;
	color: #4a4a4a;
	margin-bottom: 8px;
}
/* Le texte en gras (Fonction, etc.) */
.vignette-mobile b {
	color: #1b1b1b;
}
/* ==========================================================================
   LE BOUTON EMAIL EN VERSION MOBILE
   ========================================================================== */
.vignette-mobile .btn-mail-mobile {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #889fdf;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.9rem;
	padding: 12px 20px;     /* Bouton un peu plus épais pour être cliqué facilement au doigt */
	border-radius: 25px;
	margin-top: 10px;
	width: 100%;            /* Le bouton prend toute la largeur du bloc pour l'ergonomie mobile */
	word-break: break-all;  /* Coupe proprement l'adresse si elle est très longue */
}
.vignette-mobile .btn-mail-mobile:active {
	background-color: #aa3d3d; /* Devient rouge au clic sous le doigt */
}
/*----VOIR PLUS----*/
.ligne-mixte {
	display: flex !important;
	flex-direction: row;        /* Aligne les enfants horizontalement */
	align-items: baseline;      /* Aligne le texte sur la ligne d'écriture des lettres */
	justify-content: center;    /* Centre les éléments horizontalement (puisqu'il y a text-align: center) */
	width: 100%;
	text-shadow: none;
	box-shadow: none;
	text-decoration: none;
	border: none;
	font-size: 2.1rem;
	font-weight: 400;           /* Rétabli proprement en épaisseur fine/normale */
	color: #2E5DC9;             /* Votre bleu d'origine */
	margin-right: 15px;
	text-align: center;         /* Aligne le texte au centre */
}
/*----VOIR PLUS FIN----*/












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

a.headerM:link, a.headerM:visited, a.headerM:hover, a.headerM:active {
	text-decoration: none;
	color: #3d5b66;
	font-size: 1.2rem;
	line-height: 1.3;
	border-bottom: 2px solid #889fdf;
	font-weight: 400;
	margin-top: 3px;
}
a.headerM:hover {
	color: #f4a460;
	border-top: 2px solid #889fdf;
	border-bottom: 2px solid #889fdf;
}
a.header:link, a.header:visited, a.header:hover, a.header:active {
	text-decoration: none;
	color: #3d5b66;
	font-size: 1.2rem;
	line-height: 1.5;
	border-bottom: 1px solid #900;
	font-weight: 400;
}
a.header:hover {
	color: #C00;
	border-bottom: 1px solid #889fdf;
}
/*LIENS SANS CLASS*/
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	border-bottom : solid 1px;
	color: inherit;
	font-weight: 400;
}
a:hover {
	color: #C00;
}
/* ==========================================================================
   FIN LIENS
   ========================================================================== */



/* ==========================================================================
   BOUTONS PANNEAU SIGNALISATION VERT ORANGE ROUGE POUR PARTIE GESTION
   ========================================================================== */
	 
.btn-container {
	display: flex !important;       /* Active le mode Flexbox */
	flex-wrap: wrap;                /* Permet de passer à la ligne proprement sur mobile si l'écran est trop petit */
	justify-content: center;        /* Centre horizontalement le bloc de boutons */
	gap: 5px;                      /* Crée un espace fixe automatique de 15px ENTRE les boutons (plus besoin de calculer les pourcentages !) */
	width: 100%;                    /* S'assure que le conteneur prend toute la largeur */
}
.btn-chapo {
	font-size: 1.2rem;
	/*max-width: 220px;*/
	text-decoration: none;
	color: #fff;
	padding: 8px 5px 8px 5px;
	border: none;
	border-radius: 50px;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	/* Légère ombre portée au repos */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
	display: inline-block; /* Permet d'appliquer vos classes .minus, .demi, etc. */
	text-align: center;    /* Centre le texte à l'intérieur du bouton élargi */
	box-sizing: border-box; /* Évite que le bouton ne dépasse si vous ajoutez du padding */
	margin-top: 10px;
	/*TEST POUR CENTRER LES BOUTONS*/	
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* Effet au survol commun : l'ombre s'accentue légèrement et le bouton remonte d'un pixel */
.btn-chapo:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transform: translateX(-1px);
	color : rgba(0, 0, 0, 0.5);
	filter: brightness(1); /* Assombrit subtilement la couleur au survol */
}
/* Vos couleurs personnalisées appliquées via des classes */
.btn-vert {
	color: #fff !important;
	background-color: #6fba8f;
} /*OK VALIDER*/
.btn-orange {
	color: #fff !important;
	background-color: #f2b660;
} /*ANNULER*/
.btn-rouge {
	color: #fff !important;
	background-color: #A13006;
} /*SUPPRIMER*/
.btn-bleu {
	color: #fff !important;
	background-color: #2E5DC9;
}
/* ==========================================================================
   FIN BOUTONS PANNEAU SIGNALISATION VERT ORANGE ROUGE POUR PARTIE GESTION
   ========================================================================== */

/* ==========================================================================
   DIMENSIONS BOUTONS
   ========================================================================== */
/* On force les classes proportionnelles à réagir au système flex */
.maxi {
	width: 100%;
}
.grand {
	width: 80%;
}
.troisquart {
	width: 66%;
}
.dbltiers {
	width: 66%;
}
.med {
	width: 48.5%;
}
.demi {
	width: 48.5%;
}
.demi {
	width: 48%;
}
.tiers {
	width: 32%;
}
.trentetrois {
	width: 31%;
}
.minus {
	width: 24%;
}
/*PRIVILIGIER CES CSS POUR BOUTOND*/
.gd {
	width: 385px;
}
.mid {
	width: 280px;
}
.pt {
	width: 185px;
}
.minus {
	width: 40px;
}
.total {
	flex: 1;
}
.tiers {
	flex: 0.3;
}
.demi {
	flex: 0.5;
}
.dbltiers {
	flex: 0.6;
}
/* ==========================================================================
   FIN DIMENSIONS BOUTONS PANNEAU SIGNALISATION VERT ORANGE ROUGE POUR PARTIE GESTION
	 ========================================================================== */


/* ==========================================================================
   STRUCTURE DE LA NAVIGATION (ORDINATEUR)
   ========================================================================== */
.navigation-principale {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 15px;
}
/* Cache la case à cocher et le bouton hamburger par défaut sur ordinateur */
.menu-toggle, .hamburger-btn {
	display: none;
}
/* Alignement horizontal de vos liens sur ordinateur */
.menu-liens {
	display: flex;
	gap: 20px;
	justify-content: center;
	width: 100%;
}
/* ==========================================================================
   TOUTES LES VIGNETTES SYSTÈME DE GRILLE ET VIGNETTES (FLEXBOX)
   ========================================================================== */

/* Le conteneur parent des vignettes */
/* 2. ON FORCE LA GRILLE À PRENDRE TOUT L'ESPACE ET À NE PAS RÉTRÉCIR */

.grille {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;               /* On passe de 16px à 12px pour gagner de précieux pixels */
	justify-content: center;
	width: 100% !important;  /* Force la grille à occuper 100% de sa colonne */
	max-width: 100% !important;
}
/* 3. LA VIGNETTE AJUSTÉE AVEC LE NOUVEAU GAP */
.vignette {
	/* 50% de la largeur moins la moitié 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: 250px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 16px;
	box-sizing: border-box;
	background-color: #e6e6e6;
	border-radius: 12px;
	border: 1px solid #b5b5b5;
}
/* L'image à l'intérieur de la vignette */
.vignette img {
	max-width: 150px;
	height: 100px;
	max-height: 100%;
	object-fit: contain;
	margin-bottom: 8px; /* Ajoute un espace entre l'image et le texte */
	border-radius: 5px;
	box-shadow: 0px 0px 15px #737373;
}
.vignette p {
	margin: 0;
	text-align: center;
	width: 100%;
}
/* ==========================================================================
	 Le style de votre vignette reste isolé 
   ========================================================================== */
.conteneur-unique {
	display: flex;
	justify-content: center; /* Centre horizontalement */
	/*align-items: center;      Centre verticalement */
	min-height: 20vh;        /* Prend 20% de la hauteur de l'écran (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 #ccc;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 30px;
	background-color: #e6e6e6;
}
.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%;
}
/* ==========================================================================
   VIGNETTE 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; /* Évite les petits espaces fantômes sous l'image */
}
/* Par sécurité, on s'assure que le lien lui-même n'a pas de soulignement forcé */
a {
	text-decoration: none !important;
}
.grilleENGLOB h2 {
	margin-top: 20px !important;
	color: #ff8800 !important;
	font-size: 1.8rem;
}
.grillePDM {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;               /* On passe de 16px à 12px pour gagner de précieux pixels */
	justify-content: center;
	width: 100% !important;  /* Force la grille à occuper 100% de sa colonne */
	max-width: 100% !important;
	margin-bottom: 5px;
 margin:top:10px;
}
.vign {
	display: block;
	text-align: center;
	position: relative;
	float: left;
}
.vign img {
	object-fit: cover;
	border-radius: 9px;
	width: 73px;
	height: 73px;
}
.vign a:hover img {
	box-shadow: 0px 0px 10px 6px #0f276a;
	opacity: 0.6;
}
/* ==========================================================================
   PHOTO DU MOIS FIN
   ========================================================================== */

/* ==========================================================================
   SECTION PRIVATE ADHERENTS
   ========================================================================== */


/* CONSERVE VOTRE ANCIENNE MISE EN PAGE SUR ORDINATEUR (TEXTE À DROITE DE L'IMAGE) */
.vignetteGD {
	width: 100%;
	height: 650px;
	background-color: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 15px; /* Ajoute une sécurité pour le texte */
	/* 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;
}
/* Le conteneur global */

.vignetteGD img {
	border: solid 1px #ccc;
	height: auto;
	width: 180px;
	margin: auto;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
}
/* Effet de survol */
.vignetteGD:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
/*VIGNETTES TROMBINOSCOPE*/

.vign_trombin {
	height: 500px;
	width: 100%;
	padding: 10px 2px 5px 2px;
	background-color: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 15px;
	margin: 0px 10px 15px 0px;
	float: left;
	/* --- NOUVELLE OMBRE DOUCE ET MODERNE --- */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
	/* Transition fluide pour l'effet de survol */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vign_trombin:hover {
	transform: translateY(-4px); /* Soulève légèrement la vignette */
	/* L'ombre devient un peu plus profonde pour simuler l'élévation */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.vign_trombin img {
	align-items: center;
	max-width: 120px;
	max-height: 150px;
	object-fit: contain;
	margin: auto; /* Ajoute un espace entre l'image et le texte */
	margin-bottom: 15px;
	border-radius: 5px;
	box-shadow: 0px 0px 15px #737373;
}
.vign_trombin p {
	margin: 0;
	text-align: center;
	width: 100%;
}
/* ========================================================================== 
	STYLE DU BOUTON EMAIL ADHÉRENT
   ========================================================================== */
   
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: #889fdf;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 400;
	font-size: 1rem;          /* Légèrement réduit pour faire tenir les longues adresses */
	padding: 5px 9px;
	border-radius: 25px;
	border: none;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	width: auto;
	max-width: 100%;
	margin: 10px 0px 10px 0px;
	/* SÉCURITÉS ANTI-DÉBORDEMENT 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 à l'étape précédente */
a.btn-mail:hover {
	background-color: #aa3d3d;
	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 spécifique pour espacer l'icône du texte */
.icone-mail {
	margin-right: 8px;  /* Crée un espace de 8px à droite de l'enveloppe */
	font-size: 1.1rem;  /* Rend l'enveloppe légèrement plus grande pour l'esthétique */
	line-height: 1;
	display: inline-block;
}
/* Ajustement de sécurité sur le bouton global */
a.btn-mail:link, a.btn-mail:visited, a.btn-mail:hover, a.btn-mail:active {
	/* ... vos propriétés existantes ... */
	display: inline-flex;
	align-items: center; /* Force l'icône et le texte à être parfaitement alignés sur la même ligne horizontale */
	justify-content: center;
}
/* ==========================================================================
   4. LIENS & BOUTONS
   ========================================================================== */

/* En CSS : On désactive les clics et on change l'apparence */
.lien-desactive {
	pointer-events: none;    /* Interdit tout clic, survol ou interaction de la souris */
	cursor: default;         /* Remplace la main cliquable par le curseur normal */
	color: #ff8800 !important;       /* orange le texte pour montrer qu'il est inactif */
	text-decoration: none;   /* Retire le soulignement si nécessaire */
}
a.headermoins:link, a.headermoins:visited, a.headermoins:hover, a.headermoins:active { /*essentiellement sur documents utiles*/
	text-decoration: none;
	color: #2a393f;
	font-size: 1.15rem;
	text-align: left;
	border-bottom: 1px solid #aa3d3d;
	clear: both;
	transition: color 1s ease;
}
a.headermoins:hover {
	color: #aa3d3d;
	border-bottom: 1px dashed;
}
a.headerX:link, a.headerX:visited, a.headerX:hover, a.headerX:active {
	text-decoration: none;
	color: #fff;
	background-color: #a5acbf;
	font-size: 1.2rem;
	line-height: 1.2;
	text-align: center;
	margin: auto;
	clear: both;
	width: 90%;
	padding: 8px 15px;
	display: inline-block;
	display: block;
	border-radius: 35px;
	transition: all 2s ease;
	margin-bottom: 14px;
	font-weight: 700;
}
a.headerX:hover {
	color: #000;
	background-color: #889fdf;
	width: 400px;
	transform: translateY(-7px); /* Soulève légèrement la vignette */
	/* L'ombre devient un peu plus profonde pour simuler l'élévation */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
}
a.suite:link, a.suite:visited, a.suite:hover, a.suite:active {
	justify-content: center;
	display: inline-block;
	/* Largeur et espacements */
	width: auto;                    /* "auto" est plus sûr que 30% pour éviter que le texte ne se coupe */
	padding: 4px 20px;              /* Un peu plus épais pour l'ergonomie */
	color: #fff;
	background-color: #738ebc;
	text-decoration: none;
	font-weight: 400;
	font-size: 1rem;              /* Légèrement plus petit pour un effet cartouche élégant */
	border-radius: 20px;
	text-align: center;
	margin-bottom: 25px;
}
a.suite:hover {
	background-color: #ffcc5f;
}
/* ==========================================================================
   GESTION DE L'INFOBULLE (RÈGLE DU JEU)
   ========================================================================== */

/* 1. Le lien "Voir la règle du jeu" */
a.bulle {
	position: relative;          /* CRUCIAL : sert de repère pour positionner l'info-bulle */
	text-decoration: none;
	color: #a13006;              /* Votre rouge bordeaux */
	/*border-bottom: 1px dashed #aa3d3d;*/
	font-weight: 400;
	cursor: help;
	margin-left: 30px;
	font-size: 1.2rem;
}
/* 2. L'info-bulle (Le texte de la règle caché par défaut) */
a.bulle span {
	display: none;               /* MASQUE LE TEXTE PAR DÉFAUT */
	/* 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: 300px;                /* Largeur confortable pour lire la règle */
	background-color: #333333;   /* 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 */
	margin-left: 55px;
}
/* 3. L'EFFET MAGIQUE : Quand la souris survole le lien (hover), le span s'affiche */
a.bulle:hover span {
	display: block;              /* FAIT APPARAÎTRE L'INFOBULLE */
}
/* 4. Optionnel : Ajout d'une petite flèche sous la bulle */
a.bulle span::after {
	content: "";
	position: absolute;
	top: 100%;                   /* Au bas de la bulle */
	left: 50%;
	margin-left: 20px;
	border-width: 6px;
	border-style: solid;
	border-color: #333333 transparent transparent transparent; /* Flèche pointant vers le bas */
}
/* Cache l'info-bulle si elle est strictement vide */
a.bulle span:empty {
	display: none !important;
}
/* Permet de fermer la bulle dès que l'on clique ailleurs */
a.bulle:focus span {
	display: block;
	display: hidden;
}
/*---FIN BULLE---*/


/* ==========================================================================
   ACCORDEON REGLE
   ========================================================================== */


/* Style du texte d'appel cliquable (Le titre) */
details.accordeon-regle summary {
	font-weight: 700 !important;
	/*color: #2E5DC9 !important; /* Bleu fort */
	/*cursor: pointer !important;*/
	font-size: 1.2rem !important;
	list-style: none !important; /* Enlève la flèche noire native */
	outline: none !important;
	display: flex !important; /* Permet d'aligner la flèche et le texte */
	align-items: center !important;
	margin-bottom : 10px;
}

/* Enlève aussi la flèche native spécifique à Safari (iPhone) */
details.accordeon-regle summary::-webkit-details-marker {
 display: none !important;
}
/* Ajoute la mention de fermeture à la fin du texte */
details.accordeon-regle[open] summary::after {
	content: " [ Fermer x ]" !important;
	font-size: 1.1rem !important;
	font-weight: normal !important;
	color: #2E5DC9 !important;
	vertical-align: middle !important;
	margin-left: 5px !important;
}
/* ==========================================================================
   ACCORDÉON : DESIGN GÉOMÉTRIQUE ET ROTATION FLUIDE
   ========================================================================== */

/* 1. Supprime la flèche noire d'origine du système */
.accordeon-regle summary {
	list-style: none !important;
}
.accordeon-regle summary::-webkit-details-marker {
 display: none !important;
}
/* 2. Dessin de la flèche personnalisée (Fermée : pointe vers la droite) */
.accordeon-regle summary::before {
	content: "" !important;
	display: inline-block !important;
	width: 12px !important;
	height: 12px !important;
	border-top: 2px solid #2E5DC9 !important;   /* Votre beau bleu */
	border-right: 2px solid #2E5DC9 !important;
	/* Postion de départ : inclinée à 45° pour pointer à droite */
	transform: rotate(45deg) !important;
	margin-right: 12px !important;
	margin-bottom: 2px !important;
	/* 🌟 EFFET MAGIQUE : Animation fluide lors du pivotement */
	transition: transform 0.5s ease-in-out !important;
}
/* 3. 🌟 LA CORRECTION CHIRURGICALE : Quand l'accordéon est ouvert [open] */
.accordeon-regle[open] summary::before {
	/* Pivotement à 135° : la pointe tourne proprement vers le bas ! */
	transform: rotate(135deg) !important;
	margin-bottom: 4px !important;
}
/*fin*/








/* ==========================================================================
   5. MODERN FORM ELEMENTS DE FORMULAIRE
   ========================================================================== */

/* ==========================================================================
   MENU HAMBURGER MOBILE AVEC PAGE GLISSANTE (NETTOYÉ)
   ========================================================================== */

/* --- LE BOUTON HAMBURGER --- */
.hamburger-btn {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 60px;
	height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1000;    /* Reste au-dessus du reste du site */
	margin: 10px auto 15px auto; /* 🌟 AJOUT : Centre parfaitement le bouton horizontalement ! */
}
/* Style des 3 barres du hamburger */
.hamburger-btn span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: #1a1a1a;
	/*border-radius: 3px;*/
	transition: all 0.3s ease;
}
/* --- LE MENU PLEIN ÉCRAN (GLISSANT) --- */
.menu-liens {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;          /* Prend toute la largeur de l'écran */
	height: 100vh;        /* Prend toute la hauteur de l'écran */
	background-color: #fff;
	z-index: 999;
	/* L'EFFET GLISSANT : Cache le menu à gauche de l'écran par défaut */
	transform: translateX(-100%);
	transition: transform 0.8s ease-in-out; /* Animation fluide */
	/* Centrage des liens dans la page */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* Style des liens à l'intérieur */
.menu-liens a {
	display: block;
	font-size: 1.4rem;      /* Gros texte pour mobile */
	color: #2E5DC9;       /* Votre couleur bleue */
	text-decoration: none;
	border-bottom: 1px solid #ff8800;
	padding: 10px 0;
	width: 100%;
	text-align: center;
	transition: color 0.2s;
}
.menu-liens a:hover {
	color: #000;       /* Devient noir au survol */
}
/* Bouton de fermeture (la croix) en haut à droite du menu */
.close-btn {
	position: relative;
	top: 20px;
	right: 55px;
	align-self: flex-end; /* Force la croix à sortir du centrage Flexbox horizontal */
	font-size: 5rem;
	color: #ff8800;
	cursor: pointer;
	line-height: 1;       /* Évite que la hauteur de ligne ne décale la croix vers le bas */
	width: 8px;
}
/* --- L'ACTION MAGIQUE : AU CLIC --- */
/* Quand la case est cochée, le menu glisse vers la droite pour apparaître */
.menu-toggle:checked ~ .menu-liens {
	transform: translateX(0);
}
/* Cache le bouton hamburger initial quand le menu est ouvert */
.menu-toggle:checked ~ .hamburger-btn {
	display: none;
}
/* ==========================================================================
   5. MODERN FORM ELEMENTS DE FORMULAIRE
   ========================================================================== */

/* Ajout pour placement correct Alignement horizontal de vos inputs */
.form-row {
	display: flex !important;
	gap: 15px;
	margin-bottom: 5px;
	width: 100%;
	box-sizing: border-box;
}
/* Conteneur pour espacer proprement les blocs avec leurs étiquettes */
.form-group {
	margin-bottom: 5px;
}
.form-group label {
	display: block;
	margin-top: 0 !important;      /* Supprime toute marge haute parasite */
	margin-bottom: 3px !important;   /* 🌟 RÉDUIT : Ajustez ce chiffre (ex: 2px ou 3px) pour resserrer le texte */
	line-height: 1.2 !important;    /* Force une hauteur de ligne serrée */
	padding-bottom: 0 !important;   /* Sécurité : supprime tout espace interne bas */
}
/* 🌟 NOUVEAU : On force le champ de saisie à se coller au label */
.form-group input, .form-group select, .form-group textarea {
	margin-top: 0 !important;       /* Supprime l'espace automatique au-dessus du champ */
}
/* Alignement et centrage des boutons du bas (Ajouter + Annuler) */
.form-buttons-row {
	display: flex !important;
	justify-content: center;
	gap: 20px;
	margin-top: 15px;
	width: 100%;
}
/* Exemple pour styliser votre bouton de soumission s'il n'est pas déjà prêt */
.submit-btnmax {
	flex: 1;
	max-width: 300px; /* Évite qu'il ne devienne immense */
	padding: 10px 20px;
	cursor: pointer;/* Ajoutez vos styles de couleurs ici */
}
/* Style de base de votre zone */
.file-drop-zone {
	position: relative;
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 30px;
	text-align: center;
	background: #fdfdfd;
	transition: all 0.3s ease; /* Rend l'animation fluide */
}
/* Effet magique déclenché par le JavaScript quand on survole avec une image */
.file-drop-zone.drag-over {
	border-color: #ff8800; /* Devient orange au survol */
	background-color: #fff5ea;
	transform: scale(1.01); /* Léger effet de zoom dynamique */
}
/* Masquer l'input file réel qui est moche, tout en le laissant cliquable */
.file-drop-zone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
/* Masquage initial de l'aperçu et du bouton */
.preview-thumbnail {
	display: none;
	max-height: 180px;
	margin: 0 auto;
	border-radius: 4px;
}
.remove-btn {
	display: none; /* Géré par le JS */
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ff4d4d;
	color: white;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
}
/* Cette règle force TOUS les select à copier le design des inputs */
input[type="text"], select {
	font-size: 1rem;
	font-family: inherit;     /* Utilise la même police */
	border: 1px solid #777;   /* Même bordure grise que vos inputs */
	border-radius: 4px;       /* Même arrondi */
	padding: 8px 12px;        /* Même espace pour le texte */
	background-color: #fff;   /* Supprime le fond gris ou transparent natif */
	/* FORCE LA MÊME HAUTEUR : Évite que le select soit plus petit */
	box-sizing: border-box !important;
	height: 38px;             /* Mettez ici la hauteur exacte de vos inputs */
}
/*===========fin ajout formulaire=====================*/

.modern-form {
	margin: 40px auto;
	padding: 32px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modern-form h2 {
	margin-bottom: 24px;
	color: #333;
	font-size: 24px;
	font-weight: 600;
}
.form-group {
	margin-bottom: 5px;
	margin-top: 20px;
}
.form-group label {
	display: block;
	margin-bottom: 5px;
	color: #4a5568;
	font-size: 17px;
	font-weight: 500;
	margin-top: 10px;
}
.form-group input, .form-group textarea {
	padding: 9px 12px;
	border: 1px solid #777;
	border-radius: 20px;
	background-color: #f4f4f4;
	color: #333;
	font-size: 1.2rem;
	box-sizing: border-box;
	transition: all 1s ease;
	display: inline-block;
	margin-bottom: 10px;
}
/* Effet moderne au clic (Focus) */
.form-group input:focus, .form-group textarea:focus {
	outline: none;
	border-color: #6366f1; /* Couleur violette moderne */
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
	display: inline-block;
}
/* Style du bouton (Votre version optimisée) */
.submit-btn {
	/*width: 50%;*/
	padding: 6px;
	background-color: #A13006;
	color: white;
	border: 5px solid #A13006;
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	/* CORRECTION 1 : On passe à 0.2 seconde pour que ce soit instantané et nerveux */
	transition: all 0.2s ease;
	/* CORRECTION 2 : Au repos, le bouton est sagement à 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: #A13006;
	/* 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);
	/* Votre superbe idée de bordure verte émeraude pour le succès */
	border: 5px solid #ffcc5f;
	text-align: center;
}
/* Effet au clic du bouton */
.submit-btn:active {
	/* CORRECTION 3 : On cumule l'effet d'écrasement (scale) ET on annule la lévitation */
	transform: scale(0.9) translateY(0);
	/* Votre couleur ocre/marron fétiche au clic */
	background-color: #a13006;
	border-color: #a13006; /* On colore aussi la bordure pour éviter un reste de vert */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Styles spécifiques pour la zone de fichier moderne */
.file-drop-zone {
	position: relative;
	width: 100%;
	height: 160px;
	border: 2px dashed #e2e8f0;
	border-radius: 12px;
	background-color: #f4f4f4;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	overflow: hidden;
}
/* On cache l'input HTML natif qui est très moche */
.file-drop-zone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
/* Masque visuel personnalisé */
.file-drop-mask {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	pointer-events: none;
	padding: 16px;
}
.upload-icon {
	color: #6366f1;
	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: #6366f1;
	background-color: #f4f4f4;
}
.file-drop-zone:hover .upload-icon {
	transform: translateY(-2px);
}

/* Quand l'input caché reçoit le focus (navigation au clavier) */
.file-drop-zone:has(input:focus) {
 border-color: #6366f1;
 box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
/* liste deroulante Conteneur pour positionner la flèche personnalisée */
.select-wrapper {
	position: relative;
	display: inline-block;
}
.select-wrapper select {
	display: inline-block;
	padding: 12px 40px 12px 16px; /* Plus de padding à droite pour la flèche */
	border: 1px solid #777;
	border-radius: 10px;
	background-color: #f4f4f4;
	color: #fff;
	font-size: 16px;
	transition: all 0.3s ease;
	/* Supprime la flèche par défaut du navigateur (Chrome, Safari, Firefox) */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Flèche moderne personnalisée en SVG intégrée en image de fond */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}

/* Changement de style quand une option grise par défaut est sélectionnée */
.select-wrapper select:invalid {
 color: #1a1a1a;
}
/* Effet au clic (Focus) identique aux autres champs */
.select-wrapper select:focus {
	outline: none;
	border-color: #6366f1;
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
/* pour avoir la visu immediate de la photo chargée Style de la vignette d'aperçu */
.preview-thumbnail {
	display: none; /* Cachée au départ */
	width: auto;
	height: 95%; /* S'intègre 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 appliquée quand une image est chargée */
.file-drop-zone.has-image {
	border-style: solid; /* Devient une ligne continue plutôt que pointillée */
	border-color: #10b981; /* Devient verte pour valider le succès */
	background-color: #f0fdf4;
}
/* Bouton supprimer la photo personnalisé */
.remove-btn {
	display: none; /* Caché au départ */
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background-color: #ef4444; /* 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.3);
	transition: all 0.8s ease;
	z-index: 3; /* Indispensable pour passer au-dessus de l'input de fichier */
}
.remove-btn:hover {
	background-color: #ef4444;
	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;
}
/* ==========================================================================
   STYLE MODERN FORM : GRILLE DE DATE 2x2 ÉQUILIBRÉE POUR PROGRAMME
   ========================================================================== */

/* Le parent devient une grille invisible de 2 colonnes égales */
.ligne-selection-date {
	display: grid !important;
	grid-template-columns: 1fr 1fr; /* 2 colonnes strictement égales */
	gap: 10px;                     /* Espace de 10px entre les boîtes */
	width: 100%;
	margin-top: 10px;
}
/* Stylisation individuelle de chaque menu déroulant */
.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: #fafafa;  /* Fond blanc cassé mat */
	border: 1px solid #777;  /* Filet gris fin */
	border-radius: 8px;         /* Arrondi moderne */
	/* Typographie : On remet une taille confortable ! */
	font-size: 1rem;
	color: #738ebc;             /* Votre bleu de charte */
	font-weight: normal;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
}
/* Interactivité au survol */
.ligne-selection-date select:hover {
	border-color: #889fdf;
	background-color: #ffffff;
}
/* Interactivité au clic (Focus) */
.ligne-selection-date select:focus {
	border-color: #a13006;      /* Halo bordeaux au clic */
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(170, 61, 61, 0.15);
}


/* Donne l'aspect gris estompé d'un vrai placeholder aux valeurs par défaut */
.ligne-selection-date select:invalid, .ligne-selection-date select option[value=""] {
 color: #999999 !important;
 font-weight: normal;
}
/* ==========================================================================
   FORMULAIRE STRUCTUREL & GLOBAL (.modern-form) VERSION NETTOYEE
   ========================================================================== */
.modern-form {
	margin: 40px auto;
	padding: 32px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modern-form h2 {
	margin-bottom: 24px;
	color: #333;
	font-size: 24px;
	font-weight: 600;
}
.form-group {
	margin-top: 20px;
	margin-bottom: 5px;
}
.form-group label {
	display: block;
	margin-top: 10px;
	margin-bottom: 5px;
	color: #4a5568;
	font-size: 17px;
	font-weight: 500;
}
/* ==========================================================================
   HARMONISATION ABSOLUE DES CHAMPS (INPUT, TEXTAREA, SELECT)
   ========================================================================== */
.form-group input, .form-group textarea, .select-wrapper select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #777 !important;
	border-radius: 20px !important;       /* Filet d'entourage identique pour tous */
	background-color: #f4f4f4 !important; /* Couleur de fond identique */
	color: #333 !important;               /* Couleur de texte noire par défaut */
	font-size: 1.1rem !important;         /* Taille de police harmonisée */
	box-sizing: border-box;
	display: block;
	margin-bottom: 10px;
	transition: all 0.3s ease;            /* Animation lissée à 0.3s (1s était trop lent) */
}
/* Ajustement pour les zones de texte longues */
.form-group textarea {
	resize: vertical;
	min-height: 100px;
}
/* ==========================================================================
   EFFET DE FOCUS COMMUN (AU CLIC DES CHAMPS)
   ========================================================================== */
.form-group input:focus, .form-group textarea:focus, .select-wrapper select:focus {
	outline: none;
	border-color: #6366f1 !important;     /* Cadre violet moderne */
	background-color: #ffffff !important; /* Devient blanc pour la clarté de saisie */
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}
/* ==========================================================================
   CHAMP LISTE DÉROULANTE (.select-wrapper)
   ========================================================================== */
.select-wrapper {
	position: relative;
	display: block;                       /* Aligné sur la structure des inputs */
	width: 100%;
}
.select-wrapper select {
	padding-right: 40px;                 /* Espace à droite pour accueillir la flèche */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Flèche moderne personnalisée intégrée en image de fond */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	cursor: pointer;
}

/* Gestion du texte si la valeur sélectionnée par défaut est considérée "invalide" */
.select-wrapper select:invalid {
 color: #1a1a1a !important;
}
/* ==========================================================================
   ZONE DE FICHIER GLISSER/DÉPOSER (.file-drop-zone)
   ========================================================================== */
.file-drop-zone {
	position: relative;
	width: 100%;
	height: 160px;
	border: 2px dashed #e2e8f0;
	border-radius: 12px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	overflow: hidden;
}
.file-drop-zone input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.file-drop-mask {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	pointer-events: none;
	padding: 16px;
}
.upload-icon {
	color: #6366f1;
	margin-bottom: 8px;
	transition: transform 0.3s ease;
}
.file-text {
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 500;
}
.file-subtext {
	font-size: 14px;
	color: #666;
	margin-top: 4px;
}
.file-drop-zone:hover {
	border-color: #6366f1;
}
.file-drop-zone:hover .upload-icon {
	transform: translateY(-2px);
}
 .file-drop-zone:has(input:focus) {
 border-color: #6366f1;
 box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
/* Vignette d'aperçu d'image chargée */
.preview-thumbnail {
	display: none;
	width: auto;
	height: 95%;
	max-width: 90%;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1;
}
.file-drop-zone.has-image {
	border-style: solid;
	border-color: #10b981;
	background-color: #f0fdf4;
}
.remove-btn {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background-color: #ef4444;
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
	transition: all 0.3s ease;
	z-index: 3;
}
.remove-btn:hover {
	transform: scale(1.1);
}
.file-drop-zone.has-image .remove-btn {
	display: flex;
}
/* ==========================================================================
   STYLE DU BOUTON SOUMETTRE (.submit-btn)
   ========================================================================== */
.submit-btn {
	padding: 10px 24px;
	background-color: #A13006;
	color: white;
	border: 5px solid #A13006;
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	transition: all 0.2s ease;
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.submit-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
	border: 5px solid #ffcc5f;
}
.submit-btn:active {
	transform: scale(0.9) translateY(0);
	background-color: #a13006;
	border-color: #a13006;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/*===============================================*/
/* FIN MODERN FORM NETTOYE
/*===============================================*/




/*===============================================*/
/* 1. FORCE TOUS TOUS LES INPUTS ET MENUS DÉROULANTS */
/*===============================================*/
/* 1. TOUS LES INPUTS ET MENUS DÉROULANTS */
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 #777;
	border-radius: 20px;
	padding: 8px 16px;
	background-color: #F7FAFF;
	box-sizing: border-box !important;
	height: 38px;
	color: #1a1a1a;
}
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: #F7FAFF;
	color: #1a1a1a;
}
/* 2. LE MENU DÉROULANT CORRIGÉ (Avec une vraie flèche en texte intégrée) */
select {
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid #777;
	border-radius: 20px;
	padding: 8px 35px 8px 16px; /* Plus d'espace à droite pour la flèche */
	background-color: #F7FAFF;
	box-sizing: border-box !important;
	height: 38px;
	color: #1a1a1a;
	/* Force le navigateur à accepter le design */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* LA FLÈCHE 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 flèche pile à droite */
}
/* 3. LES ZONES DE TEXTE MULTI-LIGNES */
textarea {
	font-size: 1.2rem;
	font-family: inherit;
	border: 1px solid #777;
	border-radius: 20px;
	padding: 12px 16px;
	background-color: #F7FAFF;
	box-sizing: border-box !important;
	height: auto;
	min-height: 100px;
	resize: vertical;
	color: #1a1a1a;
}
textarea:hover {
	background-color: #F7FFFC;
}
/* 4. LES BOUTONS DE VALIDATION */
/*input[type="submit"], 
button {
  font-size: 1rem;
  font-family: inherit;
  font-weight: 400;
  border: none;             
  border-radius: 20px;      
  padding: 8px 24px;        
  background-color: #007bff;
  color: #fff;              
  cursor: pointer;          
  box-sizing: border-box !important;
  height: 38px;             
  transition: background-color 0.2s; 
}

/* Effet au survol du bouton */
/*input[type="submit"]:hover, 
button:hover {
  background-color: #0056b3; 
}*/



.ligne-selection-date select, .ligne-selection-date select option {
	color: #000000 !important;
	font-weight: 700;
}
/* ==========================================================================
   RUBRIQUE TÉLÉCHARGEMENTS DOCUMENTS UTILES MOBILE (ERGONOMIE TACTILE)
   ========================================================================== */

/* 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: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	box-sizing: border-box !important;
	width: 100% !important;
}
/* L'icône de fichier (grosse et centrée) */
.doc-icone {
	font-size: 2.5rem !important;      /* Rend l'émoji très grand visuellement */
	margin-bottom: 8px !important;
}
/* Zone de textes (Titre + Description) */
.doc-info {
	text-align: center !important;
	width: 100% !important;
	margin-bottom: 6px !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;
}
/* LE BOUTON TACTILE ULTRA LISIBLE */
.btn-download {
	display: block !important;
	width: 60% !important;            /* Prend toute la largeur de la vignette */
	padding: 5px !important;          /* Grosse zone de clic pour le pouce */
	background-color: #738ebc !important; /* Votre beau bleu d'origine */
	color: #ffffff !important;
	font-weight: 600;
	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;
}
/* Effet au clic pour le mobile */
.btn-download:active {
	background-color: #1a3fa0 !important; /* Devient bleu foncé au toucher */
	transform: scale(0.98);
}
/* ==========================================================================
   RUBRIQUE TÉLÉCHARGEMENTS FIN
   ========================================================================== */










/* ==========================================================================
   PAGE LUDIQUE : SÉCURISATION ET DESIGN DE LA BOÎTE AUX LETTRES
   ========================================================================== */
.page-ludique {
	text-align: center !important;
	padding: 20px 10px !important;
	box-sizing: border-box !important;
}
.page-ludique h2 {
	color: #ff8800 !important; /* Votre orange vif */
	font-size: 1.8rem !important;
	margin-bottom: 10px !important;
}
.consigne {
	font-size: 1rem !important;
	color: #64748b !important;
	margin-bottom: 30px !important;
	line-height: 1.4 !important;
}
/* LE CADRE DE LA BOÎTE */
/* ==========================================================================
   BOÎTE AUX LETTRES : BORDURE TOURNANTE ET ANIMÉE
   ========================================================================== */

.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: #f8fafc !important;
	border-radius: 24px !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	/* 🎨 On crée une bordure de fond bicolore (Bleu et Blanc) */
	border: 2px dotted solid transparent !important;
	background-image: linear-gradient(#f8fafc, #DFE5EB),  repeating-linear-gradient(-45deg, #2E5DC9, #2E5DC9 10px, #ffffff 10px, #ffffff 20px) !important;
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
	transition: all 0.3s ease !important;
}
/* 🌟 Au survol, le dégradé s'anime et tourne ! */
.zone-boite-lettres:hover, .zone-boite-lettres:active {
	transform: scale(1.02);
	background-image: linear-gradient(#f1f5f9, #f1f5f9),  repeating-linear-gradient(-45deg, #ff8800, #ff8800 10px, #ffffff 10px, #ffffff 20px) !important;
	animation: defilementBordure 1s linear infinite !important;
}
 @keyframes defilementBordure {
 from {
background-position: 0 0;
}
to {
	background-position: 40px 0;
}
}
/* L'ICÔNE GÉANTE DE LA BOÎTE */
.boite-lettres-icon {
	font-size: 5.5rem !important; /* Force la boîte à devenir très 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: #2E5DC9 !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: #fee2e2 !important;
	color: #991b1b !important;
	padding: 12px !important;
	border-radius: 12px !important;
	margin-bottom: 20px !important;
}
/* ==========================================================================
   PAGE LUDIQUE : FIN
   ========================================================================== */




/* ==========================================================================
   PROGRAMME SEANCE PRIORITAIRE PROCHAINE SEANCE
   ========================================================================== */


/* Style de base pour toutes les séances de la liste */
.item-seance {
	padding-left: 10px !important;
	margin-bottom: 5px !important;
	background-color: #ffffff !important;
	border-left: 10px solid #2E5DC9 !important; /* Bordure bleue par défaut */
	border-radius: 4px !important;
}
/* 🌟 LE STYLE MAGIQUE POUR LA PROCHAINE SÉANCE (L'INDEX GAGNANT) */
.seance-prioritaire {
	background-color: #fff7ed !important; /* Léger fond orange très doux */
	border-left: 10px solid #ff8800 !important; /* Grosse bordure orange vif */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; /* Ombre pour la faire ressortir */
}
/* On change le titre de la séance prioritaire en haut */
.seance-prioritaire .txtorange {
	font-weight: bold !important;
}
/* ==========================================================================
     CORRECTION FORCEE DU CARTOUCHE "SUITE" SUR MOBILE (DANS LA MEDIA QUERY)
     ========================================================================== */

  /* Force le conteneur à casser la ligne et à empiler les éléments */
div.bloc-titre-news {
	display: flex !important;
	flex-direction: column !important; /* Force l'empilement vertical */
	align-items: flex-start !important; /* Aligne le titre et le bouton à gauche */
	justify-content: flex-start !important;
	gap: 8px !important;               /* Espace de sécurité entre le titre et le bouton */
	width: 100% !important;
	float: none !important;            /* Annule tout float résiduel */
}
/* Force le bouton à se comporter comme un bloc indépendant sous le titre */
div.bloc-titre-news a.suite {
	display: inline-flex !important;   /* Force l'affichage en bouton */
	float: none !important;            /* Désactive impérativement le float: right d'ordinateur */
	clear: both !important;            /* Force le retour à la ligne automatique */
	width: auto !important;            /* Garde sa taille de cartouche sans s'étirer à 100% */
	margin: 5px 0 15px 0 !important;   /* Crée une marge propre : 5px sous le titre, 15px avant la suite */
	position: static !important;
}
}