/* ============================================================
   Pages — Accueil + sections luxe automobile
   Style : photos en grand, serif, accents gold + rouge
   ============================================================ */

/* ============== HERO PHOTO ============== */
.hero {
	position: relative;
	min-height: clamp(540px, 76vh, 760px);
	overflow: hidden;
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--c-ink);
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.4) 100%),
		linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.6) 100%);
}

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	padding-block: var(--space-10);
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--ff-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: var(--space-6);
}
.hero__eyebrow::before {
	content: "";
	width: 40px; height: 1px;
	background: var(--c-gold);
}
.hero__title {
	font-family: var(--ff-display);
	color: #fff;
	font-size: clamp(4rem, 11vw, 8.5rem);
	font-weight: 600;
	line-height: 0.92;
	letter-spacing: -0.025em;
	margin-bottom: var(--space-3);
}
.hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--c-gold);
}
.hero__tagline {
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-style: italic;
	font-weight: 400;
	color: var(--c-gold);
	margin-bottom: var(--space-7);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.hero__tagline em {
	font-style: italic;
	color: var(--c-gold);
}
.hero__lede {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.0625rem;
	max-width: 560px;
	margin-bottom: var(--space-7);
	line-height: 1.55;
}
.hero__actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	align-items: center;
}

/* Booking bar — sortie du hero, chevauche par margin-top négatif */
.hero-booking-wrap {
	position: relative;
	z-index: 10;
	margin-top: -56px;
	margin-bottom: var(--space-3);
}
.hero-booking-bar {
	background: #fff;
	border: 1px solid var(--c-line);
	border-top: 3px solid var(--c-red);
	padding: 0;
	box-shadow: var(--shadow-lg);
	max-width: 1120px;
	margin: 0 auto;
}
.hero-booking-bar form {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto;
	gap: 1px;
	background: var(--c-line);
	align-items: stretch;
}
@media (max-width: 1100px) {
	.hero-booking-bar form { grid-template-columns: 1fr 1fr; }
	.hero-booking-bar form button[type="submit"] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.hero-booking-wrap { margin-top: -32px; }
	.hero-booking-bar form { grid-template-columns: 1fr; gap: 1px; background: var(--c-line); }
}
.hero-booking-bar .field {
	background: #fff;
	gap: 4px;
	padding: 14px 18px;
	transition: background var(--t-fast);
}
.hero-booking-bar .field:hover { background: var(--c-bg-2); }
.hero-booking-bar .field__label {
	font-size: 0.6875rem;
	color: var(--c-mute);
	letter-spacing: 0.1em;
	font-weight: 600;
}
.hero-booking-bar .field input,
.hero-booking-bar .field select {
	border: 0; background: transparent; padding: 0; min-height: auto;
	font-size: 0.9375rem; font-weight: 500; color: var(--c-ink);
	box-shadow: none !important;
}
.hero-booking-bar .field select {
	background-position: right 0 center; background-size: 14px; padding-right: 1.25rem;
}
.hero-booking-bar button[type="submit"] {
	min-width: 160px;
	border-radius: 0;
	letter-spacing: 0.12em;
}

/* ============== STATS — bandeau ivoire compact entre 2 sections ============== */
.stats-section {
	padding-block: clamp(1.5rem, 3vw, 3rem);
	background: var(--c-bg-2);
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 720px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
.stat-card {
	text-align: center;
	padding: var(--space-4);
	border-left: 1px solid var(--c-line-2);
}
.stat-card:first-child { border-left: 0; }
.stat-number {
	font-family: var(--ff-body);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1;
	margin-bottom: 10px;
	letter-spacing: -0.04em;
	font-feature-settings: "tnum" 1;
}
.stat-number .gold {
	color: var(--c-gold);
	font-weight: 700;
	font-style: normal;
}
.stat-label {
	font-family: var(--ff-body);
	font-size: 0.75rem;
	color: var(--c-mute);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
}

/* ============== SERVICES — 3 cards photo ============== */
.services {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1100px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .services { grid-template-columns: 1fr; } }

/* Variante 2 portails (page Transport touristique) */
/* minmax(0,1fr) + min-width:0 : empêche les pistes de dépasser la largeur de
   l'écran (sinon débordement horizontal sur mobile). */
.services--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
.services--duo > * { min-width: 0; }
/* Cartes portails un peu moins hautes que les cartes services (4/5) : mieux cadrées
   pour les photos larges (voiture / chauffeur), et plus « carré » sur mobile. */
.services--duo .service-card { aspect-ratio: 4/3; }
@media (max-width: 720px) { .services--duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .services--duo .service-card { aspect-ratio: 16/10; } }

/* Formulaire de devis en panneau sombre (page Transport avec chauffeur) */
/* Spécificité (0,2,0) pour l'emporter sur .contact-form-wrap (fond papier) défini plus bas. */
.contact-form-wrap.quote-dark {
	background: var(--c-ink);
	color: #fff;
	border-color: transparent;
	border-radius: 22px;
	padding: clamp(1.75rem, 4vw, 3rem);
}
.quote-dark .contact-form__title { color: #fff; }
.quote-dark .contact-form__sub { color: rgba(255, 255, 255, 0.72); }
.quote-dark .field__label { color: rgba(255, 255, 255, 0.85); }
.quote-dark input,
.quote-dark textarea,
.quote-dark select {
	background: #fff;
	color: var(--c-ink);
	border-color: transparent;
}
.quote-dark input::placeholder,
.quote-dark textarea::placeholder { color: var(--c-mute); }

/* Page Transport avec chauffeur : contenu à gauche, formulaire à droite */
/* minmax(0,…) + min-width:0 sur les enfants : indispensable pour que les pistes
   puissent rétrécir et que le contenu ne déborde pas horizontalement sur mobile. */
.chauffeur-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.chauffeur-grid > * { min-width: 0; }
.chauffeur-grid .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chauffeur-form-col { position: sticky; top: 96px; }
@media (max-width: 960px) {
	.chauffeur-grid { grid-template-columns: minmax(0, 1fr); }
	.chauffeur-form-col { position: static; }
}
@media (max-width: 520px) {
	.chauffeur-grid .values { grid-template-columns: minmax(0, 1fr); }
}

.service-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/5;
	cursor: pointer;
	background: var(--c-ink);
}
.service-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.service-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.45) 50%, rgba(10,10,10,0.85) 100%);
	transition: background var(--t-base);
}
.service-card:hover .service-card__media::after {
	background: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.92) 100%);
}
.service-card__body {
	position: relative;
	z-index: 2;
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	color: #fff;
}
.service-card__index {
	position: absolute;
	top: var(--space-6); right: var(--space-7);
	font-family: var(--ff-display);
	font-size: 0.875rem;
	font-style: italic;
	color: var(--c-gold);
	letter-spacing: 0.05em;
}
.service-card__title {
	font-family: var(--ff-display);
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: var(--space-3);
	color: #fff;
	letter-spacing: -0.005em;
	line-height: 1.1;
}
.service-card__title em { color: inherit; font-style: italic; font-weight: 400; }
.service-card__text {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-bottom: var(--space-5);
	max-width: 320px;
}
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-body);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-gold);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-bottom: 1px solid var(--c-gold);
	padding-bottom: 4px;
	width: fit-content;
	transition: gap var(--t-base);
}
.service-card__link::after { content: "→"; }
.service-card:hover .service-card__link { gap: 14px; }

/* ============== POURQUOI NOUS — cards avec icône badge coloré ============== */
.values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1024px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .values { grid-template-columns: 1fr; } }

.value {
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: var(--space-7) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.value:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-2);
}

/* Icône badge — carré arrondi coloré */
.value__icon {
	width: 56px; height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: var(--space-3);
	transition: transform var(--t-base);
}
.value:hover .value__icon { transform: scale(1.06); }
.value__icon svg { width: 24px; height: 24px; }

/* Variantes colorées */
.value__icon--red  { background: rgba(227, 6, 19, 0.10);   color: var(--c-red); }
.value__icon--gold { background: rgba(227, 6, 19, 0.18); color: var(--c-gold); }
.value__icon--riad { background: rgba(21, 128, 61, 0.10);  color: var(--c-ok); }
.value__icon--ink  { background: rgba(10, 10, 10, 0.06);   color: var(--c-ink); }

.value__step {
	font-family: var(--ff-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-mute);
	margin-top: -4px;
}
.value__title {
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--c-ink);
	letter-spacing: -0.005em;
	line-height: 1.2;
}
.value__text {
	color: var(--c-mute);
	font-size: 0.9375rem;
	line-height: 1.6;
	flex: 1;
}
.value__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-3);
	font-family: var(--ff-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-red);
	letter-spacing: 0.01em;
	transition: gap var(--t-base);
	align-self: flex-start;
}

/* === Section dark : adapter les value cards en glass === */
.section--dark .value {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
.section--dark .value:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.section--dark .value__title { color: #fff; }
.section--dark .value__text  { color: rgba(255, 255, 255, 0.65); }
.section--dark .value__step  { color: rgba(255, 255, 255, 0.45); }
.section--dark .section-head__eyebrow { color: var(--c-red); }
/* Sur fond noir, l'icône "ink" doit rester lisible — bascule sur tons clairs. */
.section--dark .value__icon--ink {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
}
.value__link::after { content: "→"; transition: transform var(--t-base); }
.value__link:hover { gap: 12px; }
.value__link:hover::after { transform: translateX(2px); }

/* === Variante compacte des values (sections "4 étapes" et "Pourquoi nous") === */
.section--compact { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
/* Quand "compact" est utilisé sur fond noir SANS la variante cuir,
   on bascule sur un noir-gris pour bien différencier des sections cuir. */
.section--dark.section--compact:not(.section--leather) {
	background: linear-gradient(180deg, #1c1c20 0%, #131316 100%);
}
.section--compact .section-head { margin-bottom: var(--space-7); }
.section--compact .section-head__title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }

.values--compact { gap: var(--space-4); }
.values--compact .value {
	padding: var(--space-5) var(--space-5);
	gap: var(--space-2);
	border-radius: 14px;
}
.values--compact .value__icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	margin-bottom: var(--space-2);
}
.values--compact .value__icon svg {
	width: 20px;
	height: 20px;
}
.values--compact .value__step {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
}
.values--compact .value__title {
	font-size: 1.125rem;
	line-height: 1.25;
}
.values--compact .value__text {
	font-size: 0.875rem;
	line-height: 1.55;
}
.values--compact .value__link {
	font-size: 0.8125rem;
	margin-top: var(--space-2);
}

/* Stagger d'apparition + petit pulse de l'icône à l'arrivée */
.values--compact .value {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.values--compact .value.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.values--compact .value:nth-child(1).is-visible { transition-delay: 0s; }
.values--compact .value:nth-child(2).is-visible { transition-delay: 0.12s; }
.values--compact .value:nth-child(3).is-visible { transition-delay: 0.24s; }
.values--compact .value:nth-child(4).is-visible { transition-delay: 0.36s; }

.values--compact .value.is-visible .value__icon {
	animation: step-icon-pop 0.6s var(--ease-out) both;
}
.values--compact .value:nth-child(1).is-visible .value__icon { animation-delay: 0.25s; }
.values--compact .value:nth-child(2).is-visible .value__icon { animation-delay: 0.37s; }
.values--compact .value:nth-child(3).is-visible .value__icon { animation-delay: 0.49s; }
.values--compact .value:nth-child(4).is-visible .value__icon { animation-delay: 0.61s; }

@keyframes step-icon-pop {
	0%   { transform: scale(0.7); opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   Section --leather : fond cuir noir avec coutures cream/gold
   Évoque l'intérieur d'une berline de luxe (Bentley, Rolls).
   ============================================================ */
.section--leather {
	position: relative;
	background-color: #0a0a0a;
	background-image:
		/* Reflet doux haut-gauche, comme la lumière qui glisse sur le cuir */
		radial-gradient(ellipse at 25% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 100%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
		/* Grain de cuir — tramage diagonal très subtil */
		repeating-linear-gradient(45deg,  rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.010) 0 1px, transparent 1px 5px);
	overflow: hidden;
}


/* ============== STEPS / Comment ça marche ============== */
.steps {
	display: grid;
	gap: 0;
	max-width: 760px;
	margin-inline: auto;
}
.step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-6);
	padding-block: var(--space-7);
	border-top: 1px solid var(--c-line);
	align-items: start;
}
.step:first-child { border-top: 0; }
.step__num {
	font-family: var(--ff-display);
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 500;
	color: var(--c-gold);
	line-height: 1;
}
.step__body h3 {
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: var(--space-2);
	letter-spacing: -0.005em;
}
.step__body p {
	color: var(--c-mute);
	font-size: 1rem;
	max-width: 540px;
	line-height: 1.6;
}

/* ============== GALERIE PHOTO ============== */
.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery__item {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--c-bg-3);
	cursor: pointer;
}
.gallery__item:nth-child(2n) { aspect-ratio: 1/1; }
.gallery__item:nth-child(3n) { aspect-ratio: 4/5; }
.gallery__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(10,10,10,0.5) 100%);
	opacity: 0;
	transition: opacity var(--t-base);
}
.gallery__item:hover::after { opacity: 1; }

/* ============== TÉMOIGNAGES ============== */
.testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 880px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial {
	background: #fff;
	padding: var(--space-7) var(--space-6);
	border: 1px solid var(--c-line);
	transition: all var(--t-base);
	position: relative;
}
.testimonial:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-gold);
}
.testimonial__rating {
	color: var(--c-gold);
	margin-bottom: var(--space-4);
	letter-spacing: 0.15em;
	font-size: 1rem;
}
.testimonial__quote {
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-ink);
	margin-bottom: var(--space-5);
	letter-spacing: -0.005em;
}
.testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-line);
}
.testimonial__author-name {
	font-weight: 600;
	color: var(--c-ink);
	font-size: 0.9375rem;
}
.testimonial__author-loc {
	font-size: 0.8125rem;
	color: var(--c-mute);
}

/* ============== CTA — pleine largeur photo bg ============== */
.cta-photo {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	padding: var(--space-12) var(--space-5);
}
.cta-photo__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.cta-photo__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.cta-photo__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.6);
}
.cta-photo__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}
.cta-photo h2 {
	color: #fff;
	font-size: clamp(2.25rem, 5vw, 4rem);
	margin-bottom: var(--space-4);
	letter-spacing: -0.01em;
}
.cta-photo h2 em { color: var(--c-gold); font-style: italic; font-weight: 400; }
.cta-photo p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.125rem;
	max-width: 540px;
	margin: 0 auto var(--space-7);
	line-height: 1.55;
}
.cta-photo__actions {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ============== À PROPOS — édition luxe automobile ============== */

/* Hero photo paysage Maroc en pleine largeur, texte blanc sur overlay sombre */
.about-hero--photo {
	position: relative;
	min-height: clamp(440px, 60vh, 580px);
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--c-ink);
}
.about-hero--photo .about-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.about-hero--photo .about-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.about-hero--photo .about-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.4) 100%);
}
.about-hero--photo .about-hero__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
}
.about-hero--photo .eyebrow { color: var(--c-red); }
.about-hero--photo .eyebrow::before { background: var(--c-red); }
.about-hero__title {
	font-family: var(--ff-display);
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	color: #fff;
	font-weight: 500;
	margin-block: var(--space-3);
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.about-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: inherit;
}
.about-hero__lede {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.1875rem;
	max-width: 580px;
	line-height: 1.55;
	margin-top: var(--space-5);
}

/* Section "Notre histoire" — éditorial sur fond cuir noir, format magazine */
.about-story-section {
	padding-block: clamp(3rem, 6vw, 5rem);
}
.about-story {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.about-story__title {
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	color: #fff;
	font-weight: 500;
	margin-block: var(--space-3) var(--space-7);
	letter-spacing: -0.015em;
	line-height: 1.1;
}
.about-story__title em {
	font-style: italic;
	font-weight: 400;
	color: inherit;
}
.about-story__pull {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 400;
	color: var(--c-red);
	line-height: 1.4;
	max-width: 600px;
	margin: 0 auto var(--space-7);
	padding-inline: var(--space-5);
	position: relative;
}
.about-story__pull::before,
.about-story__pull::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
	margin: var(--space-5) auto;
}
.about-story__body {
	max-width: 580px;
	margin-inline: auto;
	text-align: left;
}
.about-story__body p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.0625rem;
	line-height: 1.75;
}
.about-story__body p + p { margin-top: var(--space-4); }
.about-story__signature {
	margin-top: var(--space-8);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	max-width: 320px;
	margin-inline: auto;
}
.about-story__signature-name {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
}
.about-story__signature-role {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--c-red);
	font-weight: 600;
}

/* ============== NOTRE AGENCE (photos réelles) ============== */
.about-agence__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-5);
	margin-top: var(--space-8);
	align-items: stretch;
}
.about-agence__photo {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--c-bg-2);
}
.about-agence__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: 520px;
	object-fit: cover;
}
@media (max-width: 760px) {
	.about-agence__grid { grid-template-columns: 1fr; }
	.about-agence__photo img { max-height: 360px; }
}

/* ============== CONTACT ============== */
.contact-head {
	max-width: 720px;
	margin: 0 auto var(--space-12);
	text-align: center;
}
.contact-head__title {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	margin-block: var(--space-3) var(--space-4);
	letter-spacing: -0.015em;
}
.contact-head__lede {
	color: var(--c-mute);
	font-size: 1.125rem;
	line-height: 1.55;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 960px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* === Formulaire (colonne gauche) === */
.contact-form-wrap {
	background: var(--c-paper);
	padding: clamp(var(--space-6), 4vw, var(--space-8));
	border: 1px solid var(--c-line);
	border-radius: 18px;
}
.contact-form__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-display);
	font-size: clamp(1.625rem, 2.6vw, 2rem);
	margin-block: 0 var(--space-2);
	letter-spacing: -0.015em;
	font-weight: 500;
	color: var(--c-ink);
}
.contact-form__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-gold);
	flex-shrink: 0;
}
.contact-form__sub {
	color: var(--c-mute);
	font-size: 0.9375rem;
	margin-bottom: var(--space-6);
}
.contact-form .form-row { margin-bottom: var(--space-4); }
.contact-form .field { margin-bottom: var(--space-4); }
.contact-form button[type="submit"] { margin-top: var(--space-3); }
.contact-form .alert { margin-bottom: var(--space-4); }

/* === Coordonnées (colonne droite) === */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
}
@media (max-width: 960px) { .contact-info { position: static; } }

.contact-info__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-display);
	font-size: clamp(1.625rem, 2.6vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--c-ink);
	margin: 0 0 var(--space-3);
}
.contact-info__title-icon {
	display: inline-flex;
	color: var(--c-gold);
	flex-shrink: 0;
}

/* Card de coordonnée */
.contact-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	transition: all var(--t-fast);
	color: var(--c-ink);
}
a.contact-card:hover {
	border-color: var(--c-gold);
	transform: translateX(2px);
}
.contact-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.contact-card__icon--gold {
	background: rgba(227, 6, 19, 0.15);
	color: var(--c-gold);
}
.contact-card__icon--whatsapp {
	background: rgba(37, 211, 102, 0.12);
	color: #25D366;
}
.contact-card__label {
	display: block;
	font-family: var(--ff-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-mute);
	margin-bottom: 4px;
}
.contact-card__value {
	display: block;
	/* Police courante (pas la police display décorative) : les numéros de
	   téléphone et coordonnées restent simples et bien lisibles. */
	font-family: var(--ff-body);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-ink);
	letter-spacing: 0;
	line-height: 1.3;
}

.contact-info__socials {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line);
}
.contact-info__socials a {
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(227, 6, 19, 0.15);
	color: var(--c-gold);
	transition: all var(--t-fast);
}
.contact-info__socials a:hover {
	background: var(--c-gold);
	color: #fff;
}

/* Carte */
.contact-map {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: var(--c-bg-3);
}

/* ============== POST GRID (blog) ============== */
.post-grid {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.post-card {
	background: transparent;
	border: 0;
	display: flex;
	flex-direction: column;
}
.post-card__media {
	aspect-ratio: 4/3;
	overflow: hidden;
	display: block;
	margin-bottom: var(--space-4);
	background: var(--c-bg-3);
}
.post-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.post-card__date {
	font-family: var(--ff-body);
	font-size: 0.6875rem;
	color: var(--c-gold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: var(--space-3);
}
.post-card__title {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
	margin-bottom: var(--space-3);
}
.post-card__title a {
	color: var(--c-ink);
	transition: color var(--t-fast);
}
.post-card__title a:hover { color: var(--c-red); }
.post-card__excerpt {
	color: var(--c-mute);
	font-size: 0.9375rem;
	flex: 1;
	margin-bottom: var(--space-4);
	line-height: 1.6;
}
.post-card__link {
	font-family: var(--ff-body);
	font-weight: 600;
	color: var(--c-ink);
	font-size: 0.75rem;
	border-bottom: 1px solid var(--c-ink);
	padding-bottom: 2px;
	align-self: flex-start;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color var(--t-fast), border-color var(--t-fast);
}
.post-card__link:hover { color: var(--c-red); border-color: var(--c-red); }

.single-post .post-share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
}
.single-post .post-share a {
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	background: var(--c-bg-2);
	color: var(--c-ink-2);
	font-weight: 500;
	font-size: 0.8125rem;
}
.single-post .post-share a:hover { background: var(--c-ink); color: #fff; }
.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
}
.tag {
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: var(--c-bg-2);
	color: var(--c-ink-2);
	font-size: var(--fs-xs);
	font-weight: 500;
}
.tag:hover { background: var(--c-ink); color: #fff; }

/* ============================================================
   FAQ — accordéons sobres style luxe automobile
   ============================================================ */
.faq-section {
	padding-top: var(--space-12);
	/* Compense le header sticky (topbar 38px + header-h 72px + respiration) lors d'une arrivée par #faq. */
	scroll-margin-top: calc(var(--header-h) + 38px + var(--space-3));
}

.faq-list {
	max-width: 880px;
	margin: 0 auto;
	border-top: 1px solid var(--c-line);
}

.faq-item {
	border-bottom: 1px solid var(--c-line);
	transition: background var(--t-base);
}
.faq-item[open] {
	background: rgba(10, 10, 10, 0.02);
}

.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(0.5rem, 2vw, 1.25rem);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color var(--t-fast);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

.faq-item__q-text {
	font-family: var(--ff-display);
	font-size: clamp(1.05rem, 1.8vw, 1.375rem);
	font-weight: 500;
	color: var(--c-ink);
	letter-spacing: -0.005em;
	line-height: 1.35;
	flex: 1;
}

.faq-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	color: var(--c-ink-2);
	flex-shrink: 0;
	transition: transform var(--t-base), border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.faq-item:hover .faq-item__q-text { color: var(--c-red); }
.faq-item:hover .faq-item__icon {
	border-color: var(--c-red);
	color: var(--c-red);
}
.faq-item[open] .faq-item__icon {
	transform: rotate(45deg);
	background: var(--c-red);
	border-color: var(--c-red);
	color: #fff;
}

.faq-item__a {
	padding: 0 clamp(0.5rem, 2vw, 1.25rem) clamp(1.2rem, 2.4vw, 1.75rem);
	max-width: 760px;
	animation: faq-reveal 0.32s ease both;
}
.faq-item__a p {
	color: var(--c-mute);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

@keyframes faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.faq-cta {
	margin-top: var(--space-10);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}
.faq-cta p {
	color: var(--c-mute);
	font-size: 0.9375rem;
	margin: 0;
}

/* Click-to-activate map */
.contact-map__placeholder {
	width: 100%;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px;
	background: linear-gradient(135deg, var(--c-bg-2) 0%, var(--c-bg-3) 100%);
	border: 0;
	cursor: pointer;
	color: var(--c-ink-2);
	transition: background var(--t-fast);
	font-family: var(--ff-body);
}
.contact-map__placeholder:hover {
	background: linear-gradient(135deg, var(--c-bg-3) 0%, var(--c-bg-2) 100%);
}
.contact-map__placeholder svg {
	color: var(--c-red);
	margin-bottom: 8px;
}
.contact-map__placeholder-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--c-ink);
	text-align: center;
}
.contact-map__placeholder-cta {
	font-size: 0.875rem;
	color: var(--c-mute);
	padding: 8px 18px;
	border: 1px solid var(--c-ink);
	border-radius: 999px;
	background: #fff;
}
.contact-map iframe { display: block; }