/* ============================================
   FICHIER CSS RESPONSIVE GLOBAL
   Cabinet Nabet - Responsive Design
   ============================================ */

/* Images responsive */
img {
	max-width: 100%;
	height: auto;
}

/* Conteneurs et marges */
.section {
	padding: 80px 0;
}

/* ============================================
   HEADER - Supprimer l'espace entre bandeau et menu
   ============================================ */

/* Header transparent */
.header-body {
	background-color: transparent;
}

.notice-top-bar {
	text-align: center;
}

.header-container {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Ne pas affecter les marges horizontales de header-row */
.header-row {
	margin-top: 0;
	margin-bottom: 0;
}

/* Ne pas affecter les paddings horizontaux de header-column */
.header-column {
	padding-top: 0;
	padding-bottom: 0;
}

/* Logo avec padding vertical minimal */
.header-logo img {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Assurer que la colonne de navigation reste alignée à droite */
.header-column.justify-content-end {
	justify-content: flex-end;
	display: flex;
}

/* Header sans espace en dessous */
#header {
	margin-bottom: 0;
}

/* ============================================
   HERO SECTION - Toutes tailles d'écran
   ============================================ */

/* Section hero commence après le header */
.main {
	margin-top: 0;
	padding-top: 0;
}

/* Section hero - Styles de base avec hauteur optimisée */
.hero-section {
	position: relative;
	width: 100%;
	background: #fff;
	margin-top: 0;
	padding-top: 0;
	min-height: 500px; /* Hauteur réduite pour améliorer LCP */
	height: auto;
	overflow: hidden;
	padding-bottom: 20px;
	contain: layout; /* Améliore les performances et réduit le CLS */
}

/* SVG backgrounds container animation */
.hero-backgrounds .appear-animation {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 110%;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* Assurer que le contenu est bien au-dessus des backgrounds - Hauteur optimisée */
.hero-section .container {
	position: relative;
	z-index: 10;
	min-height: 400px; /* Hauteur réduite pour améliorer LCP */
	contain: layout; /* Isolation du layout */
}

/* Marquee responsive - Position absolue comme dans le template */
.custom-marquee {
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: default;
}

.marquee.p-absolute {
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	pointer-events: none;
	cursor: default;
}

/* S'assurer que le texte du marquee est visible et non sélectionnable */
.custom-marquee p,
.custom-marquee *,
.custom-outline-text-style-1 {
	display: inline-block;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	pointer-events: none;
	cursor: default;
}

/* Section About - Séparée visuellement avec espace réservé pour images */
.about-section {
	background: #fff;
	position: relative;
	z-index: 5;
}

/* Réserver l'espace pour les images SVG dans about-section pour éviter CLS */
.about-section .max-width-custom-1 {
	min-height: 520px; /* Hauteur de l'image SVG */
	position: relative;
}

.about-section .max-width-custom-1 .p-relative {
	width: 550px; /* Largeur de l'image SVG */
	height: 520px; /* Hauteur de l'image SVG */
	max-width: 100%;
	margin: 0 auto;
}

.about-section .max-width-custom-1 img {
	width: 100%;
	height: auto;
	max-width: 550px;
}

/* ============================================
   DESKTOP (min 992px) - Hero Section
   ============================================ */
@media (min-width: 992px) {
	/* Hero section avec hauteur minimale */
	.hero-section {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Row hero - Centrer les colonnes */
	.hero-row-desktop {
		display: flex;
		align-items: center;
		min-height: 70vh;
	}

	/* Colonne texte - Aérée avec padding interne */
	.hero-text-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Wrapper interne pour le contenu texte avec marges */
	.hero-text-column > h1,
	.hero-text-column > p,
	.hero-text-column > a {
		margin-left: 30px;
		margin-right: 30px;
	}

	/* Bouton non étiré, aligné à gauche sur desktop */
	.hero-text-column > a.btn {
		width: auto;
		display: inline-block;
	}

	/* Colonne formulaire - Aérée */
	.hero-form-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Card dans la colonne formulaire - Centré et aéré avec marges */
	.hero-form-column .card {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	/* SVG décoratif sous la carte visible sur desktop */
	.hero-form-column .card-decorative-svg {
		display: block;
	}

	/* Backgrounds SVG - Positionnement fixe depuis le top */
	.hero-backgrounds {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		margin-top: 0;
		padding-top: 0;
	}

	.hero-backgrounds > div {
		top: 0;
		margin-top: 0;
	}

	/* Images décoratives - Positionnement */
	.hero-decorative-images {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		pointer-events: none;
	}

	/* Positionnement de l'image banniereCabinet pour desktop - CENTRÉ sur SVG hero */
	.hero-section .hero-decorative-images > div.p-absolute.z-index-8 {
		position: absolute;
		right: 252px; /* Centre l'image de 596px sur le SVG de 1100px: (1100-596)/2 */
		top: -200px; /* Remonté davantage pour meilleure visibilité */
		left: auto;
		transform: none;
	}

	/* Ajustement du formulaire - descente pour meilleur alignement */
	.hero-form-column-adjust {
		transform: translateY(20%);
	}
}

/* ============================================
   RÉSOLUTION 1920x1080 (Full HD)
   ============================================ */
@media (min-width: 992px) and (max-width: 1920px) {
	.hero-decorative-images {
		display: block;
	}

	.hero-decorative-images > div {
		display: block;
		position: absolute;
		right: 252px; /* Centre l'image de 596px sur le SVG de 1100px: (1100-596)/2 */
		left: auto;
		transform: none;
		top: 0;
	}

	.hero-decorative-images img {
		max-width: 500px;
		height: auto;
		display: block;
	}
}

/* ============================================
   RÉSOLUTIONS AU-DESSUS DE 1920px
   ============================================ */
@media (min-width: 1921px) {
	section.hero-section .hero-decorative-images.d-none.d-lg-block {
		display: block;
	}

	section.hero-section .hero-decorative-images.d-none.d-lg-block > div.p-absolute.z-index-8 {
		display: block;
		position: absolute;
		right: 252px; /* Centre l'image de 596px sur le SVG de 1100px: (1100-596)/2 */
		left: auto;
		transform: none;
		top: -200px; /* Remonté davantage pour meilleure visibilité */
	}

	section.hero-section .hero-decorative-images img {
		display: block;
		max-width: 600px;
		height: auto;
	}

	/* Formulaire positionné sur le SVG hero pour grands écrans */
	.hero-form-column-adjust {
		transform: translateY(-35%) translateX(35%);
	}
}

/* ============================================
   TABLETTE (max 991px)
   ============================================ */
@media (max-width: 991px) {
	/* ===== HERO SECTION TABLETTE ===== */

	/* Hero title tablet */
	.hero-title-mobile {
		font-size: 2.8rem;
	}

	/* Section title tablet */
	.section-title-mobile {
		font-size: 2.3rem;
	}

	/* Hero section adjustments */
	.custom-wrapper-1 {
		padding-top: 40px;
	}

	.custom-wrapper-1 .row {
		padding-top: 50px;
	}

	/* Card form tablet */
	.card-body {
		padding: 30px;
	}

	.card-title {
		font-size: 1.8rem;
	}

	/* Mission and metier cards */
	.mission-card, .metier-card {
		margin-bottom: 30px;
		padding: 25px;
	}

	.mission-title, .metier-title {
		font-size: 1.6rem;
	}

	/* Section titles */
	.missions-title h2,
	.section h2 {
		font-size: 3.5rem;
	}

	/* Contact info tablet */
	.contact-info-box {
		padding: 30px;
	}

	.contact-info-box h3 {
		font-size: 1.7rem;
	}

	/* Marquee tablet */
	.custom-marquee {
		font-size: 2rem;
	}

	/* ===== HERO SECTION TABLETTE ===== */
	.hero-section {
		min-height: auto;
		padding-top: 0;
		padding-bottom: 60px;
	}

	.hero-section .container {
		padding-top: 100px;
	}

	.hero-row-desktop {
		padding-top: 0;
	}

	/* Ajuster les marges sur tablette */
	.hero-text-column > h1,
	.hero-text-column > p,
	.hero-text-column > a {
		margin-left: 20px;
		margin-right: 20px;
	}

	.hero-form-column .card {
		max-width: 95%;
	}

	/* Sections */
	.section {
		padding: 60px 0;
	}

	/* Titres */
	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.6rem;
	}

	h4 {
		font-size: 1.3rem;
	}

	/* Espacements */
	.pt-5, .py-5 {
		padding-top: 3rem;
	}

	.pb-5, .py-5 {
		padding-bottom: 3rem;
	}

	.mt-5, .my-5 {
		margin-top: 3rem;
	}

	.mb-5, .my-5 {
		margin-bottom: 3rem;
	}

	/* Colonnes */
	.col-lg-6, .col-lg-4, .col-lg-3 {
		margin-bottom: 30px;
	}

	/* Footer */
	footer .footer-copyright {
		text-align: center;
		padding: 20px 0;
	}

	footer .footer-nav {
		text-align: center;
		margin-top: 15px;
	}

	/* Hero sections */
	.hero-section {
		padding: 80px 0 60px;
	}
}

/* ============================================
   MOBILE (max 767px)
   ============================================ */
@media (max-width: 767px) {
	/* ===== HERO SECTION RESPONSIVE ===== */

	/* Hero title responsive */
	.hero-title-mobile {
		font-size: 2rem;
	}

	/* Section title responsive */
	.section-title-mobile {
		font-size: 1.8rem;
	}

	/* ===== HERO SECTION MOBILE ===== */
	/* Wrapper avec espace pour header fixe + titre */
	.custom-wrapper-1 {
		padding-top: 200px;
	}

	.hero-section {
		min-height: auto;
		padding-top: 0;
		padding-bottom: 40px;
	}

	.hero-section .container {
		padding-top: 0px;
	}

	.hero-row-desktop {
		padding-top: 0;
		flex-direction: column;
	}

	.hero-text-column,
	.hero-form-column {
		width: 100%;
	}

	/* Ajuster les marges sur mobile */
	.hero-text-column > h1,
	.hero-text-column > p,
	.hero-text-column > a {
		margin-left: 15px;
		margin-right: 15px;
	}

	/* Bouton centré sur mobile */
	.hero-text-column > a.btn {
		display: block;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-form-column .card {
		max-width: 100%;
		margin-left: 15px;
		margin-right: 15px;
	}

	/* Card form responsive */
	.card-body {
		padding: 20px;
		margin: 0;
	}

	.card-title {
		font-size: 1.5rem;
	}

	/* Buttons responsive */
	.btn {
		font-size: 0.9rem;
		padding: 10px 20px;
	}

	.btn-lg {
		padding: 12px 25px;
	}

	/* Contact info in card */
	.hstack {
		flex-direction: column;
		gap: 15px;
	}

	.hstack .vr {
		display: none;
	}

	.hstack > div {
		margin: 0 auto;
		text-align: center;
	}

	/* Marquee responsive */
	.custom-marquee {
		font-size: 1.5rem;
	}

	/* Images dans hero */
	.hero .p-absolute img {
		max-width: 80%;
	}

	/* ===== SECTIONS MISSIONS ET MÉTIERS ===== */

	/* Mission cards responsive */
	.mission-card, .metier-card {
		margin-bottom: 25px;
		padding: 20px;
	}

	.mission-icon, .metier-icon {
		font-size: 2.5rem;
	}

	.mission-title, .metier-title {
		font-size: 1.5rem;
	}

	.mission-description, .metier-description {
		font-size: 0.9rem;
	}

	/* Section titles */
	.missions-title h3,
	.section h3 {
		font-size: 1.6rem;
	}

	/* Google Maps section responsive */
	.google-map-container {
		min-height: 300px;
	}

	.contact-info-box {
		margin-top: 20px;
		padding: 25px;
	}

	.contact-info-box h3 {
		font-size: 1.5rem;
	}

	.contact-info-box h4 {
		font-size: 1.1rem;
	}

	/* News section */
	#news-container .col-md-6 {
		margin-bottom: 20px;
	}

	/* ===== ÉLÉMENTS CACHÉS/OPTIMISÉS MOBILE ===== */

	/* Cacher les images décoratives complexes sur mobile */
	.hero .p-absolute.d-xl-block {
		display: none;
	}

	/* Simplifier les background SVG */
	.custom-wrapper-1 [data-icon] {
		opacity: 0.3;
	}

	/* Réduire la complexité du marquee */
	.custom-marquee p {
		-webkit-text-stroke: 1px;
	}

	/* Optimiser les vidéos */
	video {
		max-height: 300px;
	}

	/* Images de fond en mode scroll au lieu de fixed */
	[style*="background-attachment: fixed"] {
		background-attachment: scroll;
	}

	/* ===== PERFORMANCES : DÉSACTIVATION DES ANIMATIONS ===== */

	/* Désactiver toutes les animations et transitions lourdes */
	* {
		animation-duration: 0s;
		animation-delay: 0s;
		transition-duration: 0.15s; /* Transitions très courtes seulement */
	}

	/* Désactiver les animations d'apparition */
	[data-appear-animation],
	.appear-animation,
	[class*="fadeIn"],
	[class*="slideIn"],
	[class*="zoomIn"],
	[class*="bounceIn"] {
		opacity: 1;
		transform: none;
		animation: none;
		visibility: visible;
	}

	/* Désactiver les animations de parallax */
	[data-plugin-parallax],
	.parallax {
		transform: none;
		background-attachment: scroll;
	}

	/* Désactiver les float elements */
	[data-plugin-float-element] {
		animation: none;
		transform: none;
	}

	/* Désactiver les animations au scroll */
	[data-plugin-scroll],
	.scroll-animation {
		animation: none;
	}

	/* Réduire les animations des carousels */
	.owl-carousel {
		animation: none;
	}

	.owl-carousel .owl-item {
		animation: none;
		transition: opacity 0.2s ease;
	}

	/* Sections */
	.section {
		padding: 40px 0;
	}

	/* Titres */
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.7rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	h4 {
		font-size: 1.2rem;
	}

	h5 {
		font-size: 1.1rem;
	}

	/* Paragraphes */
	p {
		font-size: 0.95rem;
	}

	/* Espacements */
	.pt-5, .py-5 {
		padding-top: 2rem;
	}

	.pb-5, .py-5 {
		padding-bottom: 2rem;
	}

	.mt-5, .my-5 {
		margin-top: 2rem;
	}

	.mb-5, .my-5 {
		margin-bottom: 2rem;
	}

	/* Colonnes */
	.col-md-6, .col-md-4, .col-md-3 {
		margin-bottom: 20px;
	}

	/* Formulaires */
	.form-control {
		font-size: 0.95rem;
		padding: 10px 15px;
	}

	.form-label {
		font-size: 0.9rem;
		margin-bottom: 8px;
	}

	textarea.form-control {
		min-height: 150px;
	}

	/* Boutons dans les formulaires */
	.form-control + .btn {
		margin-top: 15px;
	}

	/* Hero sections */
	.hero-section {
		padding: 60px 0 40px;
	}

	/* Header logo */
	.header-logo img {
		max-width: 150px;
		height: auto;
	}

	/* Footer */
	footer {
		text-align: center;
	}

	footer .row > div {
		margin-bottom: 30px;
	}

	footer .footer-copyright {
		font-size: 0.85rem;
		padding: 15px 0;
	}

	footer .footer-nav li {
		display: inline-block;
		margin: 0 10px;
	}

	/* Cards et box */
	.card {
		margin-bottom: 20px;
	}

	.card-body {
		padding: 20px;
	}

	/* Owl Carousel */
	.owl-carousel .owl-nav button {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}

	.owl-carousel .owl-dots {
		margin-top: 20px;
	}

	/* Modales */
	.modal-dialog {
		margin: 10px;
	}

	.modal-content {
		border-radius: 15px;
	}

	/* Tables */
	.table-responsive {
		border: none;
	}

	table {
		font-size: 0.85rem;
	}

	/* Breadcrumb */
	.breadcrumb {
		font-size: 0.85rem;
		padding: 10px 15px;
	}

	/* ===== MODIFICATIONS POUR L'IMAGE DÉMATÉRIALISATION ET ESPACES ===== */

	/* Réduire l'espace entre le formulaire et "Quelques mots sur nous" */
	.about-section {
		margin-top: -120px;
		padding-top: 0;
		padding-bottom: 10px;
	}

	.about-section .row {
		margin-top: 0;
		margin-bottom: 0rem;
	}

	/* Réduire l'espace entre l'image dématérialisation et le texte "Quelques mots sur nous" */
	.about-section .col-lg-4.text-center.text-lg-start.mt-5.pt-5 {
		margin-top: -10rem;
		padding-top: 0;
	}

	.about-section .d-lg-none.order-3 {
		margin-bottom: -8rem;
		padding-bottom: 0;
	}

	.about-section .col-12.d-lg-none.text-center.p-relative.pt-2 {
		padding-top: 0;
		margin-top: -8rem;
		margin-bottom: -15rem;
	}

	.about-section .col-12.d-lg-none.order-3 {
		margin-top: -8rem;
		padding-top: 0;
	}

	/* Réduire l'espace entre l'image dématérialisation et la section spécialités */
	.about-section .row.mt-5 {
		margin-top: -8rem;
	}

	/* Supprimer le margin-top de l'image dématérialisation sur mobile */
	.about-section .d-lg-none img[src*="dématérialisation.svg"] {
		margin-top: 0;
	}

	/* Réduire l'espace de la section missions */
	.missions-section-wrapper {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		margin-top: 3.5rem;
		margin-bottom: 0;
	}

	.missions-section {
		margin-top: 0.5rem;
		margin-bottom: 0;
	}

	.missions-section .row {
		margin-bottom: 0.5rem;
	}

	/* Réduire l'espace de la section métiers */
	#metiers {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	#metiers .row {
		margin-bottom: 0.5rem;
	}

	/* Réduire l'espace entre la section actualités et la section nous trouver */
	.bg-grey-100.custom-pos-3 .container.py-5 {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.bg-grey-100.custom-pos-3 .row.pb-5 {
		padding-bottom: 0.5rem;
	}

	.section.bg-light.border-0.m-0.py-5 {
		padding-top: 0.5rem;
		padding-bottom: 0rem;
		margin-top: 0;
		margin-bottom: 0;
	}

	.section.bg-light.border-0.m-0 .container.py-5 {
		padding-top: 0.5rem;
		padding-bottom: 0rem;
	}

	/* Réduire l'espace entre la section nous trouver et le footer */
	footer#footer .container.pt-5-5 {
		padding-top: 0rem;
	}

	section.section.bg-light.border-0.m-0.py-5 {
		margin-bottom: 0;
		padding-bottom: 0rem;
	}

	footer#footer {
		margin-top: -7rem;
		padding-top: 0rem;
	}

	footer#footer .container {
		padding-top: 0rem;
	}

	.section.section-default.border-0.p-0 {
		padding: 0;
		margin: 0;
	}

	.bg-grey-100.custom-pos-3 {
		margin-top: 0;
		padding-top: 0.5rem;
	}

	.bg-grey-100.custom-pos-3 .row.pt-4 {
		padding-top: 0.5rem;
	}

	/* Réduire l'espace autour de notre-entreprise */
	#notre-entreprise.my-5.py-5 {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

/* ============================================
   PETITS MOBILES (max 575px)
   ============================================ */
@media (max-width: 575px) {
	/* ===== HERO SECTION PETITS MOBILES ===== */

	/* Hero title extra small */
	.hero-title-mobile {
		font-size: 1.8rem;
		line-height: 1.3;
	}

	/* Section title extra small */
	.section-title-mobile {
		font-size: 1.6rem;
	}

	/* Card responsive */
	.card-body {
		padding: 15px;
	}

	.card-title {
		font-size: 1.3rem;
	}

	/* Mission and metier cards */
	.mission-card, .metier-card {
		padding: 15px;
	}

	.mission-title, .metier-title {
		font-size: 1.3rem;
	}

	/* Section titles */
	.missions-title h3,
	.section h3 {
		font-size: 1.4rem;
	}

	/* Contact info responsive */
	.contact-info-box {
		padding: 20px;
	}

	.contact-info-box h3 {
		font-size: 1.3rem;
	}

	/* Marquee extra small */
	.custom-marquee {
		font-size: 1.2rem;
	}

	/* Sections */
	.section {
		padding: 30px 0;
	}

	/* Titres */
	h1 {
		font-size: 1.7rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.3rem;
	}

	h4 {
		font-size: 1.1rem;
	}

	h5 {
		font-size: 1rem;
	}

	h6 {
		font-size: 0.95rem;
	}

	/* Paragraphes et texte */
	p {
		font-size: 0.9rem;
		line-height: 1.6;
	}

	.lead {
		font-size: 1rem;
	}

	/* Espacements */
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	.pt-5, .py-5 {
		padding-top: 1.5rem;
	}

	.pb-5, .py-5 {
		padding-bottom: 1.5rem;
	}

	.mt-5, .my-5 {
		margin-top: 1.5rem;
	}

	.mb-5, .my-5 {
		margin-bottom: 1.5rem;
	}

	/* Colonnes */
	.col-sm-6, .col-sm-4, .col-sm-3 {
		margin-bottom: 15px;
	}

	/* Formulaires */
	.form-control {
		font-size: 0.9rem;
		padding: 8px 12px;
	}

	.form-label {
		font-size: 0.85rem;
		margin-bottom: 6px;
	}

	textarea.form-control {
		min-height: 120px;
	}

	.form-row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Hero sections */
	.hero-section {
		padding: 40px 0 30px;
	}

	/* Header logo */
	.header-logo img {
		max-width: 120px;
		height: auto;
	}

	/* Navigation */
	.header-nav-main nav > ul > li > a {
		padding: 10px 15px;
		font-size: 0.9rem;
	}

	/* Footer */
	footer {
		font-size: 0.85rem;
	}

	footer h4, footer h5 {
		font-size: 1rem;
		margin-bottom: 15px;
	}

	footer .row > div {
		margin-bottom: 25px;
	}

	footer .footer-copyright {
		font-size: 0.8rem;
		padding: 12px 0;
	}

	/* Cards */
	.card {
		margin-bottom: 15px;
		border-radius: 15px;
	}

	.card-body {
		padding: 15px;
	}

	.card-title {
		font-size: 1.1rem;
	}

	/* Boutons */
	.btn-group {
		display: flex;
		flex-direction: column;
	}

	.btn-group .btn {
		margin-bottom: 10px;
		width: 100%;
	}

	/* Alerts */
	.alert {
		font-size: 0.85rem;
		padding: 10px 15px;
	}

	/* Badges */
	.badge {
		font-size: 0.75rem;
		padding: 4px 8px;
	}

	/* Pagination */
	.pagination {
		font-size: 0.85rem;
	}

	.pagination .page-link {
		padding: 6px 12px;
	}

	/* Listes */
	ul, ol {
		padding-left: 20px;
	}

	li {
		margin-bottom: 8px;
	}

	/* Images dans les sections */
	.img-fluid {
		margin-bottom: 20px;
	}

	/* Vidéos responsive */
	.embed-responsive {
		margin-bottom: 20px;
	}

	/* Social Icons */
	.social-icons {
		text-align: center;
	}

	.social-icons li {
		margin: 5px;
	}

	.social-icons a {
		width: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
	}

	/* Owl Carousel */
	.owl-carousel .owl-nav button {
		width: 35px;
		height: 35px;
		font-size: 18px;
	}

	.owl-carousel .owl-item img {
		border-radius: 10px;
	}
}

/* ============================================
   TRÈS PETITS MOBILES (max 375px)
   ============================================ */
@media (max-width: 375px) {
	/* ===== HERO SECTION TRÈS PETITS MOBILES ===== */

	/* Hero title very small */
	.hero-title-mobile {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	/* Section title very small */
	.section-title-mobile {
		font-size: 1.4rem;
	}

	/* Card very small */
	.card-body {
		padding: 12px;
	}

	.card-title {
		font-size: 1.2rem;
	}

	/* Mission and metier cards */
	.mission-card, .metier-card {
		padding: 12px;
	}

	.mission-title, .metier-title {
		font-size: 1.2rem;
	}

	.mission-icon, .metier-icon {
		font-size: 2rem;
	}

	/* Section titles */
	.missions-title h3,
	.section h3 {
		font-size: 1.3rem;
	}

	/* Contact info very small */
	.contact-info-box {
		padding: 15px;
	}

	.contact-info-box h3 {
		font-size: 1.2rem;
	}

	.contact-info-box h4 {
		font-size: 1rem;
	}

	/* Marquee very small */
	.custom-marquee {
		font-size: 1rem;
	}

	/* Titres */
	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.3rem;
	}

	h3 {
		font-size: 1.2rem;
	}

	/* Container */
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Boutons */
	.btn {
		font-size: 0.8rem;
		padding: 8px 16px;
	}

	/* Header logo */
	.header-logo img {
		max-width: 100px;
		height: auto;
	}

	/* Footer */
	footer .footer-copyright {
		font-size: 0.75rem;
	}

	/* Cards */
	.card-body {
		padding: 12px;
	}

	/* Formulaires */
	.form-control {
		font-size: 0.85rem;
	}
}

/* ============================================
   ORIENTATION PAYSAGE MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
	/* Réduction des hauteurs pour l'orientation paysage */
	.hero-section {
		padding: 30px 0;
	}

	.section {
		padding: 30px 0;
	}

	/* Navigation mobile en mode paysage */
	.header-nav-main nav > ul {
		max-height: 300px;
		overflow-y: auto;
	}
}

/* ============================================
   PRINT MEDIA
   ============================================ */
@media print {
	/* Masquer les éléments non nécessaires pour l'impression */
	header, footer, .btn, .owl-carousel, .notice-top-bar {
		display: none;
	}

	/* Optimisation pour l'impression */
	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	.container {
		width: 100%;
		max-width: 100%;
	}

	/* Sauts de page */
	h1, h2, h3 {
		page-break-after: avoid;
	}

	img {
		page-break-inside: avoid;
	}
}