/* ==========================================================================
   Le KAB — feuille de style spécifique au site
   (extraite des <style> inline et attributs style="" pour clarté/perfs)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Préservation des ratios d'image — width/height en attribut HTML servent
   uniquement à éviter le CLS, le ratio doit rester piloté par le CSS.
   -------------------------------------------------------------------------- */

.image img,
.image-container img,
img.img-fluid {
	height: auto;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.text-white { color: #fff; }
.text-black { color: #000; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Bouton flottant Doctolib
   -------------------------------------------------------------------------- */

.doctolib-float-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #107aca;
	color: #fff;
	padding: 0.2rem 1.5rem;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	z-index: 9999;
	transition: background-color 0.3s ease, transform 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	overflow: visible;
}

.doctolib-float-btn:hover {
	background-color: #008e8b;
	transform: translateY(-2px);
}

.doctolib-float-btn img {
	height: 80px;
	width: auto;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Flip cards — base partagée
   -------------------------------------------------------------------------- */

.flip-card {
	background-color: transparent;
	width: 100%;
	position: relative;
	perspective: 1000px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}

.flip-card-front { border-radius: 15px; }
.flip-card-back  { border-radius: 15px; }

.flip-card-back {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(135deg, #000 0%, #a9a9a9 100%);
	color: #fff;
	transform: rotateY(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
	transform: rotateY(180deg);
}

@media (hover: none) {
	.flip-card .flip-card-inner { cursor: pointer; }
}

.back-content { text-align: left; }

/* Image avec titre superposé (section VOUS ACCOMPAGNER) */
.image-container {
	position: relative;
	overflow: hidden;
}

.image-container img {
	width: 100%;
	display: block;
}

.image-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.4;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Section NOS ENGAGEMENTS
   -------------------------------------------------------------------------- */

.services-container {
	display: flex;
	height: 80vh;
	margin: 0;
	padding: 0;
}

.service-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.service-card-wrapper {
	flex-grow: 1;
	margin: 0;
	padding: 0;
}

/* Dans cette section, les flip-cards remplissent toute la hauteur du wrapper */
.services-container .flip-card,
.services-container .flip-card-inner {
	height: 100%;
}

.services-container .flip-card-front,
.services-container .flip-card-back {
	height: 100%;
	border-radius: 0;
}

.services-container .flip-card-back {
	background: linear-gradient(135deg, #000 0%, #a9a9a9 100%);
}

.back-content h3 {
	color: #fff;
	font-size: 2.5rem;
	font-weight: bold;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
	margin-bottom: 45px;
}

.back-content p {
	font-size: 1.3rem;
	line-height: 1.5;
	margin: 0;
	opacity: 0.95;
}

.service-card {
	border: none;
	border-radius: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px 20px;
}

.card-primary {
	background: linear-gradient(135deg, rgba(64, 64, 64, 0.8) 0%, rgba(128, 128, 128, 0.8) 100%);
	color: #fff;
}

.card-light {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 249, 250, 0.85) 100%);
	color: #2c3e50;
}

.service-icon {
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.card-light .service-icon {
	background: linear-gradient(135deg, #a9a9a9 0%, #d3d3d3 100%);
	color: #fff;
}

.service-icon i { font-size: 2rem; }

.card-title {
	font-size: 2.5rem;
	font-weight: bold;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
	margin-bottom: 0;
	line-height: 1.3;
	opacity: 0.75;
	color: #fff;
}

.card-title.is-dark { color: #000; }

/* Hauteurs différentielles des 3 colonnes */
.col-1 .card-1 { flex-grow: 3; }
.col-1 .card-2 { flex-grow: 1; }
.col-2 .card-1 { flex-grow: 1; }
.col-2 .card-2 { flex-grow: 1; }
.col-3 .card-1 { flex-grow: 1; }
.col-3 .card-2 { flex-grow: 3; }

.engagements-bg {
	width: 100%;
	position: relative;
	background-image: url("../../images/hands.webp");
	background-size: cover;
	background-position: center center;
}

@media (max-width: 768px) {
	.services-container {
		flex-direction: column;
		height: auto;
	}
	.service-column {
		flex-direction: row;
		height: auto;
	}
	.service-card { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   Titre rotatif (AVANT/PENDANT/APRES)
   -------------------------------------------------------------------------- */

#js-rotating .rotating-word {
	display: inline-block;
	animation: kabBounceIn 0.6s ease;
}

@keyframes kabBounceIn {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-legal {
	text-align: center;
	padding-top: 2rem;
	opacity: 0.7;
}

.footer-legal p { font-size: 0.85rem; }

.footer-legal a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Page Mentions légales
   -------------------------------------------------------------------------- */

body.legal-page {
	background: #fff;
	color: #333;
	font-family: 'Barlow', sans-serif;
}

.legal-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

.legal-container h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 2rem;
	border-bottom: 2px solid #107aca;
	padding-bottom: 0.75rem;
}

.legal-container h2 {
	font-size: 1.3rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	color: #107aca;
}

.legal-container p,
.legal-container li {
	line-height: 1.7;
	font-size: 1rem;
}

.legal-container ul { padding-left: 1.5rem; }
.legal-container a  { color: #107aca; }

.legal-container .todo {
	background: #fff3cd;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 600;
	color: #856404;
}

.legal-back {
	display: inline-block;
	margin-top: 2.5rem;
	padding: 0.6rem 1.4rem;
	background: #107aca;
	color: #fff !important;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
}

.legal-back:hover { background: #008e8b; }