/* =========================================================
   modern.css — Couche de modernisation additive
   Ne modifie NI les emplacements, NI la disposition, NI les
   couleurs de la charte (#003e7c bleu / #000 noir / #fff).
   Apporte : profondeur (ombres), dégradés dans les mêmes
   teintes, coins arrondis, transitions fluides, micro-
   interactions et apparitions au défilement.
   ========================================================= */

:root {
	--vp-blue: #003e7c;
	--vp-blue-dark: #002d5a;
	--vp-blue-light: #407eac;
	--vp-ease: cubic-bezier(.22, .61, .36, 1);
	--vp-shadow-sm: 0 2px 8px rgba(0, 62, 124, .08);
	--vp-shadow-md: 0 10px 30px rgba(0, 20, 45, .12);
	--vp-shadow-lg: 0 20px 50px rgba(0, 20, 45, .18);
}

/* --- Rendu global plus net & fluide --- */
html {
	scroll-behavior: smooth;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img {
	max-width: 100%;
}

/* --- Barre de défilement aux couleurs de la marque --- */
* {
	scrollbar-color: var(--vp-blue) #e7edf4;
	scrollbar-width: thin;
}
::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}
::-webkit-scrollbar-track {
	background: #e7edf4;
}
::-webkit-scrollbar-thumb {
	background: var(--vp-blue);
	border-radius: 20px;
	border: 3px solid #e7edf4;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--vp-blue-dark);
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
header {
	/* léger dégradé dans le même bleu + fine séparation lumineuse */
	background: linear-gradient(180deg, var(--vp-blue) 0%, var(--vp-blue-dark) 100%);
	box-shadow: var(--vp-shadow-md);
	z-index: 500;
}
header img.logo {
	transition: transform .5s var(--vp-ease), filter .5s var(--vp-ease);
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
header img.logo:hover {
	transform: translateY(-2px) scale(1.02);
}

/* Soulignement animé qui pousse depuis le centre (on garde le trait blanc) */
header nav ul li a {
	position: relative;
	border-bottom: 5px solid rgba(0, 0, 0, 0);
	transition: color .35s var(--vp-ease), background .35s var(--vp-ease), text-shadow .35s var(--vp-ease);
}
header nav ul li a:after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 5px;
	background: #fff;
	border-radius: 5px 5px 0 0;
	transition: left .35s var(--vp-ease), right .35s var(--vp-ease), opacity .35s var(--vp-ease);
	opacity: 0;
}
header nav ul li a:hover:after,
header nav ul li.on a:after {
	left: 15px;
	right: 15px;
	opacity: 1;
}
header nav ul li.on a {
	border-bottom-color: rgba(0, 0, 0, 0);
}
header nav ul li a:hover {
	background: rgba(255, 255, 255, .06);
}
header nav span#btn-nav {
	box-shadow: var(--vp-shadow-md);
	transition: transform .3s var(--vp-ease), box-shadow .3s var(--vp-ease);
}
header nav span#btn-nav:hover {
	transform: scale(1.06);
}

/* =========================================================
   SLIDER
   ========================================================= */
div.slider {
	position: relative;
	overflow: hidden;
}
div.slider .bx-wrapper .bx-viewport {
	box-shadow: inset 0 -60px 90px -40px rgba(0, 0, 0, .45);
}
div.slider img {
	transition: transform 8s ease-out;
}
/* léger effet de profondeur sur l'image active */
div.slider .bx-viewport li.active img {
	transform: scale(1.04);
}

/* =========================================================
   BANDEAU "2 ADRESSES" (bleu) — même couleur, plus de relief
   ========================================================= */
div[style*="background: #003e7c"] {
	background: linear-gradient(180deg, var(--vp-blue) 0%, var(--vp-blue-dark) 100%) !important;
	box-shadow: var(--vp-shadow-md);
	position: relative;
	z-index: 2;
}

/* =========================================================
   SECTIONS / ARTICLES
   ========================================================= */
section article.bg-black {
	background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* --- Colonnes du bloc noir transformées en vraies cartes ---
   La largeur des colonnes reste identique (box-sizing: border-box) ;
   seul le contenu prend un léger retrait intérieur de « carte ». */
section article.bg-black .row .col {
	box-sizing: border-box;
	padding: 36px 34px;
	background: linear-gradient(160deg, #1a1a1a 0%, #0c0c0c 100%);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
	transition: transform .35s var(--vp-ease), box-shadow .35s var(--vp-ease), border-color .35s var(--vp-ease);
}
section article.bg-black .row .col:hover {
	transform: translateY(-5px);
	border-color: rgba(64, 126, 172, .55);
	box-shadow: 0 26px 55px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Le titre de la carte : sa barre soulignée reprend le bleu de la marque */
section article.bg-black .row .col h2:after {
	background: linear-gradient(90deg, var(--vp-blue-light), rgba(64, 126, 172, .25)) !important;
}

/* Titres H1 : même couleur, ombre plus douce */
section h1 {
	text-shadow: 0 10px 40px rgba(0, 0, 0, .12);
}

/* Soulignement des H2 : dégradé arrondi dans le même bleu + animation */
section h2:after {
	background: linear-gradient(90deg, var(--vp-blue), var(--vp-blue-light)) !important;
	border-radius: 6px;
	transform-origin: left center;
	transition: width .6s var(--vp-ease);
}
section article.bg-black h2:after {
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .35)) !important;
}

/* Paragraphe "important" : léger liseré bleu à gauche pour la hiérarchie */
section .important {
	padding-left: 18px;
	border-left: 4px solid var(--vp-blue);
	border-radius: 3px;
}
section article.bg-black .important {
	border-left-color: #fff;
}

/* Liens de contenu : soulignement animé discret */
section a:not(.btn) {
	background-image: linear-gradient(var(--vp-blue), var(--vp-blue));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s var(--vp-ease);
}
section a:not(.btn):hover {
	background-size: 100% 2px;
}
section article.bg-black a:not(.btn) {
	background-image: linear-gradient(#fff, #fff);
}

/* Boutons : coins arrondis, relief, survol qui « soulève » */
section a.btn {
	border-radius: 10px;
	box-shadow: var(--vp-shadow-sm);
	transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease), background .25s var(--vp-ease);
}
section a.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--vp-shadow-md);
	background: var(--vp-blue-dark);
}

/* Badges d'étapes : dégradé + relief + centrage parfait de l'icône/chiffre */
section .step {
	background: linear-gradient(145deg, var(--vp-blue), var(--vp-blue-dark));
	box-shadow: var(--vp-shadow-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
section .step i,
section .step .fa {
	line-height: 1;
}

/* =========================================================
   ACCUEIL — "news item" transformé en carte moderne
   (même position dans le flux, simple mise en relief)
   ========================================================= */
body#home .news-item {
	box-sizing: border-box;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
	border: 1px solid #e2ebf4;
	border-radius: 18px;
	padding: 32px 34px;
	box-shadow: var(--vp-shadow-md);
	transition: transform .3s var(--vp-ease), box-shadow .3s var(--vp-ease);
}
body#home .news-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--vp-shadow-lg);
}

/* =========================================================
   FORMULAIRE DE CONTACT — champs arrondis, focus lumineux
   ========================================================= */
body#contact section .bloc-contact-form .formMail input,
body#contact section .bloc-contact-form .formMail textarea,
body#contact section .bloc-contact-form .formMail select {
	border-radius: 10px;
	transition: border-color .25s var(--vp-ease), box-shadow .25s var(--vp-ease);
}
body#contact section .bloc-contact-form .formMail input:focus,
body#contact section .bloc-contact-form .formMail textarea:focus,
body#contact section .bloc-contact-form .formMail select:focus {
	box-shadow: 0 0 0 4px rgba(0, 62, 124, .15);
}
body#contact section .bloc-contact-form .formMail input.formBtn {
	border-radius: 12px;
	box-shadow: var(--vp-shadow-sm);
	transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease), background .25s var(--vp-ease);
}
body#contact section .bloc-contact-form .formMail input.formBtn:hover {
	transform: translateY(-2px);
	box-shadow: var(--vp-shadow-md);
}

/* reCAPTCHA : léger espacement + message d'erreur */
.formMail_tr-recaptcha .g-recaptcha {
	transform-origin: 0 0;
}
.antirobot-error {
	margin-top: 8px;
	color: #d10003;
	font-size: 0.85em;
	font-weight: 700;
}
/* Message de statut d'envoi du formulaire */
.form-status {
	margin: 16px auto 0;
	max-width: 340px;
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 700;
	text-align: center;
}
.form-status--info {
	background: #eef3f9;
	color: var(--vp-blue);
}
.form-status--ok {
	background: #e6f6ec;
	color: #1a7f3c;
	border: 1px solid #b7e2c6;
}
.form-status--error {
	background: #fdecec;
	color: #d10003;
	border: 1px solid #f4c3c3;
}

/* Bouton téléphone (footer/contact) : relief + survol */
.contact-tel a {
	box-shadow: var(--vp-shadow-md);
	transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease);
}
.contact-tel a:hover {
	transform: translateY(-2px);
	box-shadow: var(--vp-shadow-lg);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
	background: linear-gradient(180deg, var(--vp-blue) 0%, var(--vp-blue-dark) 100%);
	box-shadow: 0 -10px 30px rgba(0, 20, 45, .12);
}
footer .footer-contact img.logo {
	transition: transform .5s var(--vp-ease);
}
footer .footer-contact img.logo:hover {
	transform: translateY(-3px) scale(1.03);
}
footer .footer-mentions a {
	transition: color .25s var(--vp-ease);
}
footer .footer-mentions a:hover {
	color: #fff;
}

/* =========================================================
   APPARITION AU DÉFILEMENT (positions finales inchangées)
   ========================================================= */
.reveal-ready .vp-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--vp-ease), transform .7s var(--vp-ease);
	will-change: opacity, transform;
}
.reveal-ready .vp-reveal.vp-in {
	opacity: 1;
	transform: none;
}

/* Apparition décalée (stagger) des cartes du bloc noir */
.reveal-ready section article.bg-black .row .col {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--vp-ease), transform .6s var(--vp-ease),
		box-shadow .35s var(--vp-ease), border-color .35s var(--vp-ease);
}
.reveal-ready section article.bg-black.vp-in .row .col {
	opacity: 1;
	transform: none;
}
.reveal-ready section article.bg-black.vp-in .row .col:nth-child(2) {
	transition-delay: .14s;
}
.reveal-ready section article.bg-black.vp-in .row .col:nth-child(3) {
	transition-delay: .28s;
}

/* Accessibilité : on respecte la préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.reveal-ready .vp-reveal,
	.reveal-ready section article.bg-black .row .col {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	div.slider .bx-viewport li.active img {
		transform: none;
	}
}

/* =========================================================
   FORMULAIRE DE CONTACT — version mobile (empilée & fluide)
   Le formulaire est désormais affiché sur téléphone : on
   convertit le tableau à largeurs fixes en champs pleine
   largeur pour éviter tout débordement horizontal.
   ========================================================= */
@media screen and (max-width: 760px) {
	body#contact section .bloc-contact-form .formMail table,
	body#contact section .bloc-contact-form .formMail tbody,
	body#contact section .bloc-contact-form .formMail tr,
	body#contact section .bloc-contact-form .formMail td {
		display: block;
		width: auto;
	}
	body#contact section .bloc-contact-form .formMail tr {
		margin-bottom: 12px;
	}
	body#contact section .bloc-contact-form .formMail td.formLabel {
		width: auto;
		padding: 0 0 4px 0;
		font-weight: 700;
	}
	body#contact section .bloc-contact-form .formMail td.formChamp {
		width: auto;
	}
	body#contact section .bloc-contact-form .formMail input,
	body#contact section .bloc-contact-form .formMail textarea,
	body#contact section .bloc-contact-form .formMail select {
		width: 100%;
		box-sizing: border-box;
	}
	/* Le widget reCAPTCHA tient sur les petits écrans */
	.formMail_tr-recaptcha .g-recaptcha {
		transform: scale(0.86);
		transform-origin: 0 0;
		height: 66px;
	}
	.form-status {
		max-width: none;
	}
}