@layer reset, tokens, global, layout, components, blocks, utilities;
/**
 * LG Groupe — Point d'entrée CSS
 *
 * Compilé par PostCSS (postcss-import + tailwindcss/nesting + tailwindcss + autoprefixer)
 * vers assets/css/dist/main.css.
 *
 * Le fichier compilé est COMMITÉ dans le repo (Hostinger n'a pas Node.js).
 *
 * Architecture : CSS Cascade Layers
 * Ordre des couches (priorité croissante) :
 *   reset → tokens → global → layout → components → blocks → utilities
 *
 * @since 1.0.0
 */
/* ============================================
   ORDRE DES COUCHES
   Les dernières couches ont la priorité la plus haute.
   ============================================ */
/* ============================================
   BASE
   ============================================ */
/**
 * Modern CSS Reset — LG Groupe
 *
 * Reset minimal pour une base cohérente cross-browser.
 * Inspiré de Josh Comeau et Andy Bell.
 * Couche : @layer reset (priorité la plus basse)
 *
 * @since 1.0.0
 */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		     text-size-adjust: 100%;
	}

	html:focus-within {
		scroll-behavior: smooth;
	}

	body {
		min-height: 100dvh;
		line-height: 1.6;
		text-rendering: optimizeSpeed;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	img,
	picture,
	video {
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
	}

	/* Réduire les animations pour les utilisateurs qui le préfèrent */
	@media (prefers-reduced-motion: reduce) {
		html:focus-within {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}
/**
 * Design Tokens — LG Groupe
 *
 * Source de vérité pour toutes les custom properties du projet.
 * Valeurs extraites des maquettes finales et alignées avec theme.json.
 *
 * Couche : @layer tokens
 * Direction artistique : O2 — Innovation & Fluidité
 *
 * @since 1.0.0
 */
@layer tokens {
	:root {
		/* ============================================
		   COULEURS
		   ============================================ */

		/* Palette principale */
		--color-rouge-lg: #E30613;
		--color-noir-primary: #1A1A1A;
		--color-blanc: #FFFFFF;

		/* Échelle de gris */
		--color-gris-50: #F5F5F5;
		--color-gris-100: #E8E8E8;
		--color-gris-200: #E0E0E0;
		--color-gris-400: #888888;
		--color-gris-600: #666666;
		--color-gris-700: #4A4A4A;
		--color-gris-800: #525252;
		--color-gris-900: #1A1A1A;

		/* Services */
		--color-trucks: #EFAA1C;
		--color-rent: #3C68B0;
		--color-mobe: #24E5EA;

		/* Sémantiques */
		--color-text: var(--color-noir-primary);
		--color-text-muted: var(--color-gris-600);
		--color-text-inverse: var(--color-blanc);
		--color-accent: var(--color-rouge-lg);
		--color-surface: var(--color-blanc);
		--color-surface-alt: var(--color-gris-50);
		--color-border: var(--color-gris-200);

		/* Aliases rétrocompatibles */
		--color-white: var(--color-blanc);
		--color-grey-200: var(--color-gris-200);
		--color-grey-600: var(--color-gris-600);
		--color-grey-800: var(--color-gris-800);

		/* Dégradés */
		--gradient-noir: linear-gradient(272.29deg, #1A1A1A 1.95%, #525252 98.1%);
		--gradient-rouge: linear-gradient(270deg, #E30613 0%, #BF1E10 100%);

		/* ============================================
		   TYPOGRAPHIE
		   ============================================ */

		--ff-heading: 'Inria Sans', system-ui, sans-serif;
		--ff-body: 'Inria Sans', system-ui, sans-serif;

		/* Échelle responsive avec clamp() — 375px → 1440px */
		--fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);    /* 40px → 72px */
		--fs-hero-surtitle: clamp(1.75rem, 1rem + 3.1vw, 3.5rem); /* 28px → 56px */
		--fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3rem);             /* 32px → 48px */
		--fs-h2: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);          /* 24px → 32px */
		--fs-h3: clamp(1.25rem, 1.1rem + 0.625vw, 1.5rem);      /* 20px → 24px */
		--fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);     /* 18px → 20px */
		--fs-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px → 20px */
		--fs-body: 1rem;                                          /* 16px */
		--fs-body-sm: 0.875rem;                                   /* 14px */
		--fs-body-xs: 0.75rem;                                    /* 12px */
		--fs-caption: 1.5rem;                                    /* 12px */

		--fw-regular: 400;
		--fw-medium: 500;
		--fw-semibold: 600;
		--fw-bold: 700;

		--lh-heading: 1.2;
		--lh-body: 1.6;
		--lh-tight: 1.15;

		/* ============================================
		   ESPACEMENTS — base 8px
		   ============================================ */

		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 24px;
		--space-6: 32px;
		--space-8: 48px;
		--space-10: 64px;
		--space-12: 80px;
		--space-16: 128px;

		/* ============================================
		   BORDER RADIUS
		   ============================================ */

		--radius-sm: 4px;
		--radius-md: 8px;
		--radius-lg: 12px;
		--radius-xl: 16px;
		--radius-pill: 9999px;

		/* Alias rétrocompatible */
		--radius-soft: 30px;
		--radius-full: 9999px;

		/* ============================================
		   OMBRES
		   ============================================ */

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
		--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
		--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.2);

		/* ============================================
		   GLASS / GLASSMORPHISME
		   ============================================ */

		--glass-bg: rgba(255, 255, 255, 0.08);
		--glass-border: rgba(255, 255, 255, 0.15);
		--glass-blur: blur(16px);

		/* ============================================
		   GLOW
		   ============================================ */

		--glow-accent: 0 0 20px rgba(227, 6, 19, 0.3);
		--glow-light: 0 0 20px rgba(255, 255, 255, 0.2);

		/* ============================================
		   TRANSITIONS
		   ============================================ */

		--transition-fast: 150ms ease;
		--transition-base: 300ms ease;
		--transition-slow: 500ms ease-out;

		/* ============================================
		   Z-INDEX
		   ============================================ */

		--z-dropdown: 50;
		--z-header: 100;
		--z-overlay: 200;
		--z-modal: 300;
		--z-toast: 400;

		/* ============================================
		   LAYOUT
		   ============================================ */

		--container-max: 1440px;
		--container-px: 2rem;
		--grid-gap: var(--space-4);
	}

	/* Desktop — container padding */
	@media (min-width: 1024px) {
		:root {
			--container-px: 32px;
		}
	}
}
/**
 * Global — Styles de base body, typographie, liens, focus
 *
 * Couche : @layer global
 *
 * @since 1.0.0
 */
@layer global {
	body {
		font-family: var(--ff-body);
		font-size: var(--fs-body);
		font-weight: var(--fw-regular);
		line-height: var(--lh-body);
		color: var(--color-text);
		background-color: var(--color-surface);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--ff-heading);
		font-weight: var(--fw-bold);
		line-height: var(--lh-heading);
		color: var(--color-text);
	}

	h1 {
		font-size: var(--fs-h1);
		line-height: var(--lh-tight);
	}

	h2 {
		font-size: var(--fs-h2);
	}

	h3 {
		font-size: var(--fs-h3);
	}

	h4 {
		font-size: var(--fs-h4);
	}

	a {
		color: var(--color-accent);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	a:hover {
		text-decoration: underline;
	}

	::-moz-selection {
		background-color: var(--color-rouge-lg);
		color: var(--color-blanc);
	}

	::selection {
		background-color: var(--color-rouge-lg);
		color: var(--color-blanc);
	}

	/* Focus visible — accessibilité clavier (WCAG AA) */
	:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	:focus:not(:focus-visible) {
		outline: none;
	}
}
/**
 * Layout — Primitives de mise en page
 *
 * Classes : .l-container, .l-section, .l-grid
 * Couche : @layer layout
 *
 * @since 1.0.0
 */
@layer layout {

	/* ============================================
	   CONTAINER — centrage + largeur max + padding
	   ============================================ */

	.l-container {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: 2rem;
	}

	/* ============================================
	   SECTION — espacement vertical entre blocs
	   ============================================ */

	.l-section {
		padding-block: var(--space-8);
	}

	@media (min-width: 1024px) {
		.l-section {
			padding-block: var(--space-10);
		}
	}

	/* Fond alterné gris clair */
	.l-section--alt {
		background-color: var(--color-surface-alt);
	}

	/* Fond sombre */
	.l-section--dark {
		background-color: var(--color-noir-primary);
		color: var(--color-text-inverse);
	}

	/* ============================================
	   GRID — grille de base responsive
	   ============================================ */

	.l-grid {
		display: grid;
		gap: var(--grid-gap);
	}

	/* Variantes colonnes — mobile-first (1 col par défaut) */

	@media (min-width: 768px) {
		.l-grid--2 {
			grid-template-columns: repeat(2, 1fr);
		}

		.l-grid--3 {
			grid-template-columns: repeat(2, 1fr);
		}

		.l-grid--4 {
			grid-template-columns: repeat(2, 1fr);
		}
		.l-container {
			padding-inline: var(--container-px);
		}
	}

	@media (min-width: 1024px) {
		.l-grid--3 {
			grid-template-columns: repeat(3, 1fr);
		}

		.l-grid--4 {
			grid-template-columns: repeat(4, 1fr);
		}
	}
}
/* ============================================
   COMPOSANTS
   ============================================ */
/**
 * Button — Composant bouton
 *
 * Classes : .btn, .btn--primary (rouge), .btn--dark (noir),
 *           .btn--outline (bordure), .btn--ghost (transparent)
 * Style pill arrondi conforme aux maquettes.
 * Couche : @layer components
 *
 * @since 1.0.0
 */
/**
 * Badge — Labels, tags, indicateurs
 *
 * Classes : .badge, .badge--rouge, .badge--noir, .badge--label,
 *           .badge--open, .badge--closed
 * Couche : @layer components
 *
 * @since 1.0.0
 */
/**
 * Card — Base commune pour les cards
 *
 * Classes : .card, .card__body
 * Spécialisé dans les blocs : card-actu.css, card-marque.css, etc.
 * Couche : @layer components
 *
 * @since 1.0.0
 */
/**
 * Form — Styles de base inputs, selects, textareas
 *
 * Styles globaux pour les éléments de formulaire.
 * Les styles spécifiques au formulaire multi-étapes sont dans le bloc dédié.
 * Couche : @layer components (overridable par Tailwind utilities)
 *
 * @since 1.0.0
 */
/* ============================================
   STRUCTURE
   ============================================ */
/**
 * Header — Navigation principale
 *
 * Classes : .site-header, navigation, CTAs, mobile overlay
 * Direction O2 : navigation pilule, fond blanc sticky, ombre légère
 * Couche : @layer components (overridable par Tailwind utilities)
 *
 * @since 1.0.0
 */
/**
 * Footer — Pied de page
 *
 * Classes : .site-footer, 4 colonnes, barre légale
 * Couche : @layer components (overridable par Tailwind utilities)
 *
 * @since 1.0.0
 */
/* ============================================
   UTILITAIRES
   ============================================ */
/**
 * Utilities — Classes utilitaires transversales
 *
 * Classes : .u-sr-only, .u-sr-only--focusable, .u-text-accent, .u-container
 * Couche : @layer utilities (priorité la plus haute)
 *
 * @since 1.0.0
 */
/* ============================================
   TAILWIND
   Génère les classes utilitaires pour les templates Twig.
   Base (Preflight) omis — remplacé par reset.css.
   ============================================ */
.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-5);
		font-family: var(--ff-body);
		font-size: var(--fs-body);
		font-weight: var(--fw-bold);
		line-height: 1;
		text-transform: uppercase;
		text-decoration: none;
		border: none;
		border-radius: var(--radius-pill);
		cursor: pointer;
		transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
	}
.btn--primary {
			background: var(--color-rouge-lg);
			color: var(--color-blanc);
		}
.btn--primary:hover {
				background: var(--gradient-rouge);
				box-shadow: var(--glow-accent);
				text-decoration: none;
				color: var(--color-blanc);
			}
.btn--outline {
			background: transparent;
			color: var(--color-text);
			border: 1px solid var(--color-border);
		}
.btn--outline:hover {
				border-color: var(--color-accent);
				color: var(--color-accent);
				text-decoration: none;
			}
.btn--ghost {
			background: var(--glass-bg);
			color: var(--color-blanc);
			border: 1px solid var(--glass-border);
			backdrop-filter: var(--glass-blur);
			-webkit-backdrop-filter: var(--glass-blur);
		}
.btn--ghost:hover {
				background: rgba(255, 255, 255, 0.15);
				text-decoration: none;
			}
.badge {
		display: inline-flex;
		align-items: center;
		padding: var(--space-1) var(--space-3);
		font-size: var(--fs-bloc-label);
		font-weight: var(--fw-bold);
		line-height: 1;
		border-radius: var(--radius-sm);
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}
/* Variante rouge — ex: "COMMUNIQUÉ OFFICIEL" */
/* Variante noir — ex: "REVUE DE PRESSE" */
.badge--noir {
			background: var(--color-noir-primary);
			color: var(--color-blanc);
		}
/* Variante neutre */
.badge--label {
			background: var(--color-surface-alt);
			color: var(--color-text-muted);
		}
/* Statut ouverture concession */
.badge--open {
			background: #E6F9E6;
			color: #1A7A1A;
		}
.badge--closed {
			background: #FDE8E8;
			color: #B91C1C;
		}
.card {
		display: flex;
		flex-direction: column;
		background: var(--color-surface);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-card);
		transition: box-shadow var(--transition-base), transform var(--transition-base);
	}
.card:hover {
			box-shadow: var(--shadow-card-hover);
			transform: translateY(-2px);
		}
input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	textarea,
	select {
		width: 100%;
		padding: var(--space-3) var(--space-4);
		font-family: var(--ff-body);
		font-size: var(--fs-body);
		color: var(--color-text);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		transition: border-color var(--transition-fast);
	}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, textarea:focus, select:focus {
			outline: none;
			border-color: var(--color-accent);
		}
input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="url"]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
			color: var(--color-text-muted);
		}
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder, textarea::placeholder, select::placeholder {
			color: var(--color-text-muted);
		}
/* ============================================
	   WRAPPER PRINCIPAL
	   ============================================ */
.site-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* background: var(--color-white); */
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
		z-index: 100;
		/* transition: background var(--transition-base), box-shadow var(--transition-base); */
		/* Blur + fond semi-transparent pour effet glassmorphism (optionnel) */
		backdrop-filter: var(--glass-blur);
		background: var(--glass-bg);
	}
.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-px);
		padding-block: 14px;
		min-height: 88px;
	}
/* ============================================
	   LOGO
	   ============================================ */
.site-header__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		text-decoration: none;
	}
.site-header__logo-img {
		max-height: 0.8rem;
		width: auto;
	}
.site-header__logo-text {
		display: inline-flex;
		align-items: baseline;
		gap: 4px;
		font-family: var(--ff-heading);
		font-size: 22px;
		font-weight: var(--fw-bold);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		line-height: 1;
	}
.site-header__logo-lg {
		color: var(--color-rouge-lg);
	}
.site-header__logo-groupe {
		color: var(--color-noir-primary);
	}
/* ============================================
	   NAVIGATION DESKTOP — conteneur pill
	   ============================================ */
.site-header__nav {
		display: none;
		align-items: center;
		gap: 4px;
		background: var(--color-surface-alt);
		border-radius: var(--radius-full);
		padding: 4px;
	}
.site-header__nav-link {
		display: inline-block;
		padding: 8px 18px;
		font-family: var(--ff-body);
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-bold);
		color: var(--color-noir-primary);
		text-decoration: none;
		border-radius: var(--radius-full);
		transition: background var(--transition-fast), color var(--transition-fast);
		white-space: nowrap;
	}
.site-header__nav-link:hover {
		background: rgba(20, 20, 20, 0.08);
		text-decoration: none;
	}
.site-header__nav-link--active {
		background: var(--color-noir-primary);
		color: var(--color-white);
	}
.site-header__nav-link--active:hover {
		background: var(--color-noir-primary);
		color: var(--color-white);
	}
/* ============================================
	   CTAs DESKTOP
	   ============================================ */
.site-header__ctas {
		display: none;
		align-items: center;
		gap: var(--space-2);
		flex-shrink: 0;
	}
.site-header__cta {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: 10px 20px;
		font-family: var(--ff-body);
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-bold);
		border-radius: var(--radius-full);
		text-decoration: none;
		white-space: nowrap;
		transition: background var(--transition-base), box-shadow var(--transition-base);
	}
.site-header__cta--rdv {
		background: var(--color-rouge-lg);
		color: var(--color-white);
	}
.site-header__cta--rdv:hover {
		background: var(--gradient-rouge);
		box-shadow: var(--glow-accent);
		text-decoration: none;
		color: var(--color-white);
	}
.site-header__cta--contact {
		background: var(--color-noir-primary);
		color: var(--color-white);
	}
.site-header__cta--contact:hover {
		background: #2a2a2a;
		text-decoration: none;
		color: var(--color-white);
	}
.site-header__cta-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: var(--color-white);
	}
/* ============================================
	   BURGER MOBILE
	   ============================================ */
.site-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		/* width: 40px; */
		/* height: 40px; */
		padding: 8px;
		background: none;
		border: none;
		cursor: pointer;
		flex-shrink: 0;
	}
.site-header__burger img {
		width: 3.6rem;
		max-height: 1.5rem;
	}
/* ============================================
	   MENU MOBILE — overlay plein écran
	   ============================================ */
.site-header__mobile-menu {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		background: var(--color-white);
		z-index: 200;
		overflow-y: auto;
		padding: var(--space-5);
		transform: translateX(100%);
		transition: transform var(--transition-base);
	}
.site-header__mobile-menu[aria-hidden="false"] {
		transform: translateX(0);
	}
.site-header__mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--space-6);
	}
.site-header__mobile-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: var(--color-surface-alt);
		border: none;
		border-radius: var(--radius-full);
		cursor: pointer;
		color: var(--color-noir-primary);
		flex-shrink: 0;
	}
/* Navigation mobile — liste verticale avec séparateurs */
.site-header__mobile-nav {
		border-top: 1px solid var(--color-border);
	}
.site-header__mobile-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
.site-header__mobile-item {
		border-bottom: 1px solid var(--color-border);
	}
.site-header__mobile-link {
		display: block;
		padding: var(--space-4) 0;
		font-family: var(--ff-heading);
		font-size: var(--fs-body-lg);
		font-weight: var(--fw-bold);
		color: var(--color-noir-primary);
		text-decoration: none;
	}
.site-header__mobile-link--active {
		color: var(--color-rouge-lg);
	}
/* CTAs mobile — pleine largeur */
.site-header__mobile-ctas {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin-top: var(--space-6);
	}
.site-header__mobile-ctas .site-header__cta {
		justify-content: center;
		padding: 14px 20px;
		font-size: var(--fs-body);
	}
.site-header__mobile-ctas .site-header__cta--contact {
		background: var(--color-white);
		color: var(--color-noir-primary);
		border: 1px solid var(--color-border);
	}
.site-header__mobile-ctas .site-header__cta--contact:hover {
		background: var(--color-surface-alt);
	}
/* Section réseaux sociaux mobile */
.site-header__mobile-social {
		margin-top: auto;
		padding-top: var(--space-6);
	}
.site-header__mobile-social-title {
		text-align: center;
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-bold);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-text-muted);
		margin-bottom: var(--space-4);
	}
.site-header__mobile-social-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
	}
.site-header__mobile-social-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: var(--color-surface-alt);
		border-radius: var(--radius-full);
		margin-inline: auto;
		color: var(--color-noir-primary);
		transition: background var(--transition-fast);
	}
.site-header__mobile-social-link:hover {
		background: var(--color-grey-200);
	}
/* ============================================
	   DESKTOP (≥ 1024px)
	   ============================================ */
@media (min-width: 1024px) {
		.site-header__nav {
			display: flex;
		}

		.site-header__ctas {
			display: flex;
		}

		.site-header__burger {
			display: none;
		}

		.site-header__mobile-menu {
			display: none;
		}
	}
/* ============================================
	   BODY OFFSET — compense le header fixed
	   ============================================ */
body {
		padding-top: 72px;
	}
@media (min-width: 1024px) {
		body {
			padding-top: 76px;
		}
	}
/* ============================================
	   WRAPPER PRINCIPAL
	   ============================================ */
.site-footer {
		background: var(--color-white);
		border-top: 1px solid var(--color-border);
		padding-top: var(--space-10);
	}
.site-footer__inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-px);
	}
/* ============================================
	   GRILLE 4 COLONNES
	   ============================================ */
.site-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
		padding-bottom: var(--space-8);
	}
@media (min-width: 1024px) {
		.site-footer__cols {
			grid-template-columns: repeat(4, 1fr);
			gap: var(--space-6);
		}
	}
/* ============================================
	   COLONNES
	   ============================================ */
.site-footer__col {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}
.site-footer__title {
		font-family: var(--ff-heading);
		font-size: var(--fs-body-sm);
		font-weight: var(--fw-bold);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-noir-primary);
		margin: 0;
	}
.site-footer__links {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
.site-footer__link {
		font-size: var(--fs-body-sm);
		color: var(--color-grey-600);
		text-decoration: none;
		transition: color var(--transition-fast);
		line-height: 1.5;
	}
.site-footer__link:hover {
		color: var(--color-noir-primary);
		text-decoration: none;
	}
/* ============================================
	   COLONNE BRAND (4e colonne)
	   ============================================ */
.site-footer__brand {
		gap: var(--space-5);
	}
.site-footer__brand-logo {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
	}
.site-footer__brand-logo img {
		height: 48px;
		width: auto;
	}
.site-footer__tagline {
		font-family: var(--ff-heading);
		font-size: var(--fs-body-sm);
		font-style: italic;
		color: var(--color-grey-600);
		margin: 0;
	}
/* Réseaux sociaux */
.site-footer__social {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2);
	}
.site-footer__social-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background: var(--color-surface-alt);
		border-radius: var(--radius-full);
		color: var(--color-grey-600);
		transition: background var(--transition-fast), color var(--transition-fast);
	}
.site-footer__social-link:hover {
		background: var(--color-grey-200);
		color: var(--color-noir-primary);
	}
.site-footer__social-link svg {
		width: 16px;
		height: 16px;
	}
/* Adresse */
.site-footer__address {
		font-size: var(--fs-caption);
		color: var(--color-grey-600);
		font-style: normal;
		line-height: 1.6;
		margin: 0;
	}
/* ============================================
	   BARRE LÉGALE
	   ============================================ */
.site-footer__legal {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding-block: var(--space-5);
		border-top: 1px solid var(--color-border);
	}
@media (min-width: 768px) {
		.site-footer__legal {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
.site-footer__copyright {
		font-size: var(--fs-caption);
		color: var(--color-grey-600);
		margin: 0;
	}
.site-footer__legal-links {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}
.site-footer__legal-links li + li::before {
		content: '|';
		color: var(--color-grey-200);
		margin-right: var(--space-2);
	}
.site-footer__legal-link {
		font-size: var(--fs-caption);
		color: var(--color-grey-600);
		text-decoration: none;
		transition: color var(--transition-fast);
	}
.site-footer__legal-link:hover {
		color: var(--color-noir-primary);
		text-decoration: none;
	}
.visible{
	visibility: visible;
}
.sticky{
	position: sticky;
}
.mx-auto{
	margin-left: auto;
	margin-right: auto;
}
.mb-2{
	margin-bottom: 8px;
}
.mb-4{
	margin-bottom: 16px;
}
.mb-6{
	margin-bottom: 32px;
}
.mb-8{
	margin-bottom: 48px;
}
.mt-4{
	margin-top: 16px;
}
.block{
	display: block;
}
.inline-block{
	display: inline-block;
}
.inline{
	display: inline;
}
.flex{
	display: flex;
}
.table{
	display: table;
}
.grid{
	display: grid;
}
.hidden{
	display: none;
}
.h-\[200px\]{
	height: 200px;
}
.max-w-\[400px\]{
	max-width: 400px;
}
.max-w-container{
	max-width: 1440px;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.animate-fade-in{
	animation: fadeIn 0.5s ease-out;
}
.grid-cols-1{
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-wrap{
	flex-wrap: wrap;
}
.items-start{
	align-items: flex-start;
}
.gap-4{
	gap: 16px;
}
.gap-5{
	gap: 24px;
}
.truncate{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rounded-full{
	border-radius: 9999px;
}
.rounded-lg{
	border-radius: 16px;
}
.rounded-md{
	border-radius: 12px;
}
.rounded-sm{
	border-radius: 8px;
}
.rounded-soft{
	border-radius: 30px;
}
.rounded-xl{
	border-radius: 24px;
}
.border{
	border-width: 1px;
}
.border-grey-200{
	--tw-border-opacity: 1;
	border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}
.bg-grey-200{
	--tw-bg-opacity: 1;
	background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}
.bg-mobe{
	--tw-bg-opacity: 1;
	background-color: rgb(36 229 234 / var(--tw-bg-opacity, 1));
}
.bg-noir-primary{
	--tw-bg-opacity: 1;
	background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));
}
.bg-rent{
	--tw-bg-opacity: 1;
	background-color: rgb(60 104 176 / var(--tw-bg-opacity, 1));
}
.bg-rouge-lg{
	--tw-bg-opacity: 1;
	background-color: rgb(229 42 25 / var(--tw-bg-opacity, 1));
}
.bg-surface-alt{
	--tw-bg-opacity: 1;
	background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-trucks{
	--tw-bg-opacity: 1;
	background-color: rgb(239 170 28 / var(--tw-bg-opacity, 1));
}
.bg-white{
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-noir{
	background-image: linear-gradient(272.29deg, #141414 1.95%, #525252 98.1%);
}
.bg-gradient-rouge{
	background-image: linear-gradient(270deg, #E52A19 0%, #BF1E10 100%);
}
.p-2{
	padding: 8px;
}
.p-4{
	padding: 16px;
}
.p-5{
	padding: 24px;
}
.p-6{
	padding: 32px;
}
.px-4{
	padding-left: 16px;
	padding-right: 16px;
}
.px-5{
	padding-left: 24px;
	padding-right: 24px;
}
.py-10{
	padding-top: 64px;
	padding-bottom: 64px;
}
.py-2{
	padding-top: 8px;
	padding-bottom: 8px;
}
.font-heading{
	font-family: 'Inria Sans', system-ui, sans-serif;
}
.text-body{
	font-size: 16px;
	line-height: 1.6;
}
.text-body-lg{
	font-size: 18px;
	line-height: 1.6;
}
.text-body-sm{
	font-size: 14px;
	line-height: 1.5;
}
.text-caption{
	font-size: 12px;
	line-height: 1.4;
}
.text-h1{
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
}
.text-h2{
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
}
.text-h3{
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
}
.uppercase{
	text-transform: uppercase;
}
.capitalize{
	text-transform: capitalize;
}
.italic{
	font-style: italic;
}
.text-grey-600{
	--tw-text-opacity: 1;
	color: rgb(107 107 107 / var(--tw-text-opacity, 1));
}
.text-grey-800{
	--tw-text-opacity: 1;
	color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-noir-primary{
	--tw-text-opacity: 1;
	color: rgb(20 20 20 / var(--tw-text-opacity, 1));
}
.text-white{
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
	text-decoration-line: underline;
}
.shadow-card{
	--tw-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	--tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card-hover{
	--tw-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	--tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-modal{
	--tw-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
	--tw-shadow-colored: 0 16px 48px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
	--tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
	outline-style: solid;
}
.blur{
	--tw-blur: blur(8px);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
	--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter{
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
/* ============================================
	   SCREEN READER ONLY
	   Masque visuellement, reste accessible aux lecteurs d'écran.
	   ============================================ */
.u-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
/* Skip link — visible au focus clavier */
.u-sr-only--focusable:focus {
		position: fixed;
		top: var(--space-2);
		left: var(--space-2);
		z-index: var(--z-toast);
		width: auto;
		height: auto;
		padding: var(--space-2) var(--space-4);
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		background: var(--color-noir-primary);
		color: var(--color-blanc);
		border-radius: var(--radius-sm);
		font-size: var(--fs-body);
	}
/* ============================================
	   TEXTE
	   ============================================ */
.u-text-accent {
		color: var(--color-accent);
	}
/* ============================================
	   CONTAINER
	   ============================================ */
@media (min-width: 768px){
	.md\:grid-cols-2{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px){
	.lg\:grid-cols-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lg\:text-body-lg-desktop{
		font-size: 20px;
		line-height: 1.6;
	}
	.lg\:text-h1-desktop{
		font-size: 48px;
		line-height: 1.15;
		font-weight: 700;
	}
	.lg\:text-h2-desktop{
		font-size: 32px;
		line-height: 1.2;
		font-weight: 700;
	}
	.lg\:text-h3-desktop{
		font-size: 24px;
		line-height: 1.25;
		font-weight: 700;
	}
}