/*=========================*
 | 1. Variables / Couleurs |
 *=========================*/

/***********
 * Couleur *
 ***********/
.dark{ color: #333!important }
.white{ color: white!important }
.red{ color: #DD5A43!important }
.red2{ color: #E08374!important }
.light-red{ color: #F77!important }
.blue{ color: #478FCA!important }
.light-blue{ color: #93CBF9!important }
.green{ color: #69AA46!important }
.light-green{ color: #B0D877!important }
.orange{ color: #FF892A!important }
.orange2{ color: #FEB902!important }
.light-orange{ color: #FCAC6F!important }
.purple{ color: #A069C3!important }
.pink{ color: #C6699F!important }
.pink2{ color: #D6487E!important }
.brown{ color: brown!important }
.grey{ color: #777!important }

:root{
	--Primaire: #003366;	/* Bleu foncé */
	--Secondaire: #0073e6;	/* Bleu clair */
	--Accent: #ff6600;		/* Orange */
	--Neutre: #333333;		/* Gris foncé */
	--Fond: #e0e0e0;		/* Gris très clair */
	--Survol: #0055aa;		/* Jaune */
}

/*============*
 | 2. Polices |
 *============*/
@font-face{
	font-family: NonBreakingSpaceOverride;
	src: url(./fonts/NonBreakingSpaceOverride.woff2) format("woff2");
}

@font-face{
	font-family: "Inter var";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url(./fonts/Inter-upright-var.woff2) format("woff2");
}

@font-face{
	font-family: "Inter var";
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	src: url(./fonts/Inter-italic-var.woff2) format("woff2");
}

/*===================*
 | 3. Reset & Global |
 *===================*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body{
	height: 100%;
}

body{
	position: relative;
	display: flex;
	flex-direction: column;
	font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	background-color: var(--Fond);
}

/*=================== ===*
 | 4. Composants Globaux |
 *=======================*/

/**********
 * Bouton *
 **********/
.btn{
	display: inline-block;
	background-color: var(--Primaire);
	color: white;
	margin: 10px 5px;
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: bold;
	font-family: inherit;
	font-size: 1em;
}

a.btn{ text-decoration: none; }
a.btn:hover{ background-color: var(--Survol); }

a.btn:focus{
	outline: 2px solid var(--Survol);
	outline-offset: 2px;
}

button.btn{
	border: none;
	cursor: pointer;
}

button.btn:hover{ background-color: var(--Survol); }
button.btn:active{ background-color: #002244; }

button.btn:focus{
	outline: 2px solid var(--Survol);
	outline-offset: 2px;
}

/**********
 * Saisie *
 **********/
.inp{
	position: relative;
	margin: 1em 0;
	text-align: left;
}

.inp input[readonly],
.inp select[readonly],
.inp textarea[readonly]{
	background: #eee;
	color: #666;
	cursor: not-allowed;
	font-style: italic;
}

.inp input ~ label::before,
.inp textarea ~ label::before,
.inp select ~ label::before{
	content: "📝 ";
	font-size: 0.9em;
}

.inp input[readonly] ~ label::before,
.inp select[readonly] ~ label::before,
.inp textarea[readonly] ~ label::before{
	content: "🔒 ";
	color: #999;
}

.inp input[required] ~ label::before,
.inp select[required] ~ label::before,
.inp textarea[required] ~ label::before{
	content: '❌ ';
	color: red;
}

.inp input[required]:valid ~ label::before,
.inp select[required]:valid ~ label::before,
.inp textarea[required]:valid ~ label::before{
	content: '✅ ';
	color: green;
}

.inp label{
	position: absolute;
	top: 20px;
	left: 15px;
	padding: 0 4px;
	pointer-events: none;
	transition: 0.2s;
	background: white;
	color: #666;
}

.inp input,
.inp select,
.inp textarea{
	width: 100%;
	padding: 20px 15px 10px 15px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	color: var(--Neutre);
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
}

.inp select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D'0%200%204%205'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20fill%3D'%23333'%20d%3D'M2%200L0%202h4L2%200zm0%205l2-2H0l2%202z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 12px;
}

.inp input:focus ~ label,
.inp input:not(:placeholder-shown) ~ label,
.inp select:focus ~ label,
.inp select:valid ~ label,
.inp textarea:focus ~ label,
.inp textarea:not(:placeholder-shown) ~ label{
	top: 3px;
	font-size: 0.75em;
	color: var(--Primaire);
}

.inp textarea{
	min-height: 10em;
	resize: none;
}

/**********
 * Autres *
 **********/
p.msg-err{ color: red; }

/*============*
 | 5. Layouts |
 *============*/
main{
	margin: 0;
	padding: 0;
	flex: 1;
}

/***********
 * Style ? *
 ***********/
.stl-fll{
	background-color: white;
	margin: 20px 20px;
	padding: 10px 20px;
	font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	letter-spacing: normal;
}

/*****************
 * Style Grille  *
 *****************/
.stl_grd{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 1rem;
}

.stl_grd table{
	width: auto;
	border-collapse: collapse;
	font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	margin-bottom: 1rem;
}

.stl_grd th,
.stl_grd td{
	padding: 0.1rem 1rem;
	border: 1px solid #ccc;
	text-align: left;
}

.stl_grd th{
	background-color: #f0f0f0;
}

.stl_grd td{
	background-color: #fff;
}

.stl_grd form{
	display: inline-block;
	margin: 0 0.2rem;
}

.btn-action{
	border: none;
	background: none;
	font-size: 1.2em;
	cursor: pointer;
	padding: 0 0.2rem;
}

.btn-action:hover{
	opacity: 0.8;
}

.pagination{
	margin-top: 10px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.pagination form{
	display: inline-block;
}

.pagination p{
	margin: 0;
}


/***************
 * Style Page  *
 ***************/
.stl-pge{
	max-width: 1280px;
	background-color: white;
	margin: 20px auto;
	padding: 10px 20px;
	font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	letter-spacing: normal;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stl-pge p {
	font-size: 16px;
	margin-bottom: 16px;
	text-align: justify;
}

.stl-pge ul {
	padding-left: 20px;
	list-style-type: disc;
}

.stl-pge ul li {
	margin-bottom: 10px;
	font-size: 16px;
}

.stl-pge a {
	color: #0073e6;
	text-decoration: none;
}

.stl-pge a:hover{ text-decoration: underline; }

.stl-pge strong {
	font-weight: bold;
	color: var(--Neutre);
}

.stl-pge p strong{ font-size: 17px; }

.stl-pge ul li strong {
	color: var(--Neutre);
	font-weight: bold;
}

/*===========*
 | 6. Header |
 *===========*/
.hdr{
	background-color: var(--Primaire);
	color: white;
	padding: 5px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hdr-h1{
	background-color: var(--Primaire);
	color: white;
	padding: 0 0 10px 0;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

.hdr-left{
	display: flex;
	align-items: center;
}

.hdr img{
	background-color: white;
	padding: 5px;
	border-radius: 5px;
	height: 80px;
	width: 80px;
	margin-right: 10px;
}

.hdr-right{
	display: flex;
	align-items: center;
}

.hdr-mnu ul{
	list-style: none;
}

.hdr-mnu ul li{
	display: inline;
	margin: 0 0 0 15px;
}

.hdr-mnu ul li:first-child{ margin: 0; }

.hdr-mnu a{
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.hdr-mnu a:hover{ text-decoration: underline; }

/*===========*
 | 7. Footer |
 *===========*/
.ftr{
	background-color: var(--Primaire);
	color: white;
	padding: 1em;
}

.ftr-mnu ul{ list-style: none; }

.ftr-mnu ul li{
	display: inline;
	margin: 0 0 0 15px;
}

.ftr-mnu ul li:first-child{ margin: 0; }

.ftr-mnu a{
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.ftr-mnu a:hover{ text-decoration: underline; }

.ftr-cpr{
	margin: 12px 0 0 0;
	font-size: 0.60em;
	font-weight: bold;
}

.ftr-cpr a{
	color: white;
	text-decoration: none;
}

.ftr-cpr a:hover{ text-decoration: underline; }

/*========================*
 | 8. Modules Spécifiques |
 *========================*/

/*************
 * Recherche *
 *************/
.search-toggle-checkbox{ display: none; }

.hdr-right{
	display: flex;
	align-items: center;
	gap: 15px;
}

.search-container{
	border-left: 2px solid rgba(255, 255, 255, 0.4);
	margin-left: 15px;
	padding-left: 15px;
	display: flex;
	align-items: center;
}

.hdr-fnd-ico{
	cursor: pointer;
	font-size: 1.4rem;
	display: inline-block;
	color: white;
}

.hdr-fnd-ico::before{
	content: '🔍';
	display: inline-block;
	cursor: pointer;
	font-size: 1.4rem;
	width: 1.6rem;
	text-align: center;
	color: white;
}

.search-toggle-checkbox:checked ~ .search-container .hdr-fnd-ico::before{ content: '✖'; }

.search-overlay{
	display: none;
	position: static;
	background: white;
	box-shadow: none;
	height: 100%;
	padding: 0 1em;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	border-left: 2px solid rgba(0,0,0,0.1);
}

.search-form{
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 600px;
}

.search-field{
	flex: 1;
	padding: 0.5em 0.75em;
	border: 1px solid #ccc;
	font-size: 1rem;
}

.hdr-fnd-cls{
	margin-left: 0.5em;
	cursor: pointer;
	font-size: 1.4rem;
	color: var(--Neutre);
}

.search-toggle-checkbox:checked ~ .search-overlay{ display: flex; }

.search-toggle-checkbox:checked ~ .hdr-mnu{ display: none; }


/***********
 * Accueil *
 ***********/
.accueil-container{
	padding: 1rem;
	max-width: 1280px;
	margin: 0 auto; 
}

.intro{
	text-align: center;
	margin-bottom: 2rem;
}

.services{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

.service-box{
	background-color: #f9f9f9;
	border-radius: 1rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	padding: 1.5rem;
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between; 
	text-align: center;
}

.service-box .btn{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	align-self: center;
}

.service-box h3{ margin-bottom: 0.5rem; }

.service-box p{ margin-bottom: 1rem; }

/***********
 * Contact *
 ***********/
.contact-container{
	max-width: 600px;
	margin: 30px auto;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	background: white;
	text-align: center;
}

.contact-container h2{
	margin: 0 0 10px;
	font-size: 24px;
	color: var(--Primaire);
}

.contact-container p{ margin: 0 0 20px; }

/**************
 * Info cards *
 **************/
.info-grd{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
	margin: 20px 0;
}

.info-crd{
	background: #f9f9f9;
	border-radius: 12px;
	padding: 20px 10px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%; 
}

.info-crd:hover{
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.info-crd .icon{
	font-size: 2em;
	margin-bottom: 10px;
}

.info-crd .valeur {
	font-size: 1.6em;
	font-weight: bold;
	color: #006699;
	margin: 0 0 10px 0;
}

.info-crd .label {
	font-size: 0.95em;
	color: #444;
	margin: 0;
}

/*******************
 * Acces Restreint *
 *******************/
.bnr{
	max-width: 1280px;
	margin: 30px auto;
	padding: 20px;
	background-color: #ffeecc;
	border: 2px solid #ffa500;
	border-radius: 8px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.bnr h2{
	margin: 10px 0 5px;
	color: #cc6600;
}

.bnr p{ margin: 10px 0; }

.bnr .banner-img{
	width: 120px;
	height: auto;
	margin-bottom: 10px;
}

/*================*
 | 9. Utilitaires |
 *================*/
body::after{
	position: fixed;
	top: 5px;
	right: 10px;
	background: var(--Neutre);
	color: white;
	padding: 2px 6px;
	font-size: 12px;
	z-index: 2000;
}

body::after{ content: "Desktop XL"; }
@media(max-width: 1400px){ body::after{ content: "Desktop L"; } }
@media(max-width: 1200px){ body::after{ content: "Desktop M"; } }
@media(max-width: 1024px){ body::after{ content: "Tablette paysage / Desktop S"; } }
@media(max-width: 992px){ body::after{ content: "Tablette portrait"; } }
@media(max-width: 768px){ body::after{ content: "Mobile paysage"; } }
@media(max-width: 576px){ body::after{ content: "Mobile portrait"; } }
@media(max-width: 400px){ body::after{ content: "Mini écran"; } }

/*===================*
 | 10. Media Queries |
 *===================*/