/* =========================================================
   Style « moderne » de l'accueil, mis en ligne le 21/10/2026
   Chargé sur l'accueil seulement (inc/style-moderne.php).
   Même HTML et même contenu : header, pied de page et hero intacts.

   Parti pris : un fond gris très clair uni (plus de trame de points), des
   cartes blanches qui s'en détachent, deux temps forts sombres (Notre
   histoire, et les services en cartes photo), des titres plus grands et
   plus serrés, et des blocs qui apparaissent au défilement.
   Restent comme avant, choix déjà tranchés : logos des marques en couleurs,
   sur-titre en trait + texte (pas de pastille rose pleine). Texte aligné et
   non plus justifié, après vérification demandée par Maxime le 21/10.
   ========================================================= */

.style-moderne {
	--canvas: #F3F5F9;
	--carte-radius: 28px;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	background: var(--canvas);
}

/* ---------- Rythme et titres ---------- */
.style-moderne .section { padding: 96px 0; }
.style-moderne .section--alt { background: transparent; }

/* Tous les titres de section à la même taille, nettement sous le titre du
   hero (3,6rem) pour garder la hiérarchie. Zone de titre large : sur
   ordinateur, ils tiennent sur une ligne au lieu de se couper à 780 px. */
.style-moderne .section-head { max-width: 1040px; margin-bottom: 52px; }
.style-moderne .section h2,
.style-moderne .section--navy h2,
.style-moderne .engagements__title {
	font-size: clamp(1.9rem, 3.2vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -.03em;
}
.style-moderne .section-head p { max-width: 680px; margin-left: auto; margin-right: auto; font-size: 1.12rem; }

/* En-têtes avec bouton (occasions, blog) centrés comme les autres, bouton
   dessous : un seul alignement sur toute la page, hors « Notre histoire »
   qui reste à côté de sa photo. */
.style-moderne .section-head--split {
	flex-direction: column;
	align-items: center;
	gap: 26px;
	max-width: 1040px;
	margin: 0 auto 44px;
	text-align: center;
}
.style-moderne .section-head--split .kicker,
.style-moderne .section-head--split h2,
.style-moderne .section-head--split p { margin-left: auto; margin-right: auto; text-align: center; text-align-last: center; }
.style-moderne .section-head--split .kicker { justify-content: center; }
.style-moderne .kicker { font-size: .74rem; letter-spacing: .18em; margin-bottom: 22px; }
.style-moderne .kicker::before { width: 20px; border-radius: 2px; }

/* Texte aligné (à gauche, ou centré selon son bloc) plutôt que justifié, sans
   coupure des mots : sur mobile et dans les colonnes étroites, la justification
   creusait de grands blancs (« de   la   distribution ») et coupait les mots
   (« mar-ques », « prépa-ration »). Hero et pied de page non concernés. */
.style-moderne p:not(.site-footer p, .hero p) {
	text-align: inherit;
	text-align-last: auto;
	-webkit-hyphens: manual;
	hyphens: manual;
}
.style-moderne .section .vo-empty,
.style-moderne .section .vo-liens__titre { text-align: center; }

/* Boutons secondaires : pastille blanche qui se remplit en marine. */
.style-moderne .btn--ow {
	background: var(--white);
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(15,49,76,.06), 0 8px 24px rgba(15,49,76,.06);
}
.style-moderne .btn--ow:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Nos marques ---------- */
.style-moderne .brands-grid { gap: 14px; }
.style-moderne .brand-tile {
	flex-basis: calc((100% - 6 * 14px) / 7);
	background: var(--white);
	border: 1px solid transparent;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 1px 2px rgba(15,49,76,.05);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s ease;
}
.style-moderne .brand-tile img { transition: transform .5s var(--ease-out); }
.style-moderne .brand-tile:hover {
	background: var(--white);
	border-color: var(--pink-light);
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(15,49,76,.12);
}
.style-moderne .brand-tile:hover img { transform: scale(1.08); }
@media (max-width: 1200px) { .style-moderne .brand-tile { flex-basis: calc((100% - 4 * 14px) / 5); } }
@media (max-width: 960px) { .style-moderne .brand-tile { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 700px) { .style-moderne .brand-tile { padding: 12px; border-radius: 18px; } }
.style-moderne .brands-cta { margin-top: 40px; }

/* ---------- Notre histoire : panneau sombre immersif ---------- */
.style-moderne .section--navy {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0 24px;
	padding: 88px 72px;
	border-radius: 40px;
	background:
		radial-gradient(60% 80% at 0% 0%, rgba(193,127,181,.28) 0%, transparent 60%),
		radial-gradient(50% 70% at 100% 100%, rgba(16,67,102,.9) 0%, transparent 70%),
		var(--navy-dark);
}
/* Quadrillage fin qui s'efface vers le bas, pour la profondeur. */
.style-moderne .section--navy::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 75%);
}
.style-moderne .section--navy p { color: rgba(232,237,244,.78); font-size: 1.05rem; }
.style-moderne .section--navy .btn--primary { margin-top: 12px; }
.style-moderne .hero__visual {
	aspect-ratio: 4/5;
	border-radius: 30px;
	box-shadow: 0 40px 90px rgba(0,0,0,.45);
	transform: rotate(1.5deg);
	transition: transform .8s var(--ease-out);
}
.style-moderne .hero__visual:hover { transform: rotate(0deg) scale(1.01); }
.style-moderne .hero__visual::after { inset: 0; border-radius: inherit; border-color: rgba(255,255,255,.18); }
@media (max-width: 960px) {
	.style-moderne .section--navy { margin: 0 12px; padding: 56px 24px; border-radius: 32px; }
	.style-moderne .hero__visual { aspect-ratio: 16/10; transform: none; }
}
/* La carte flotte dans le panneau : ni cadre, ni ombre, ni inclinaison. */
.style-moderne .hero__visual--carte,
.style-moderne .hero__visual--carte:hover { aspect-ratio: auto; transform: none; box-shadow: none; border-radius: 0; }

/* ---------- Occasions ---------- */
.style-moderne .vo-card__inner {
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(15,49,76,.05);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.style-moderne .vo-card__inner:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15,49,76,.14); }
.style-moderne .vo-carousel__arrow { box-shadow: 0 10px 30px rgba(15,49,76,.25); }
.style-moderne .vo-empty { background: var(--white); border: 0; border-radius: var(--carte-radius); }
.style-moderne .vo-liens__pill {
	border-color: transparent;
	padding: 10px 10px 10px 18px;
	box-shadow: 0 1px 2px rgba(15,49,76,.05);
	transition: background-color .3s ease, color .3s ease, transform .4s var(--ease-out);
}
.style-moderne .vo-liens__nb {
	min-width: 30px;
	padding: 2px 9px;
	border-radius: var(--radius-pill);
	background: var(--g50);
	color: var(--navy);
	text-align: center;
}
.style-moderne .vo-liens__pill:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.style-moderne .vo-liens__pill:hover .vo-liens__nb { background: var(--pink); color: var(--white); }

/* ---------- Nos services : cartes photo pleine hauteur ---------- */
.style-moderne .cards-grid { gap: 18px; }
.style-moderne .intent-card:not(.news-card) {
	min-height: 440px;
	justify-content: flex-end;
	padding: 30px 28px;
	border: 0;
	border-radius: var(--carte-radius);
	background: var(--navy-dark);
	box-shadow: none;
	color: var(--white);
	transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.style-moderne .intent-card:not(.news-card) > .intent-card__thumb {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
}
.style-moderne .intent-card:not(.news-card) .intent-card__thumb img { transition: transform 1.2s var(--ease-out); }
/* Voile : léger en haut pour que les photos claires gardent un bord net sur
   le fond gris, appuyé en bas pour que le texte reste lisible. */
.style-moderne .intent-card:not(.news-card)::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(12,32,48,.22) 0%, rgba(12,32,48,.08) 30%, rgba(12,32,48,.6) 58%, rgba(12,32,48,.95) 100%);
	transition: opacity .6s var(--ease-out);
}
.style-moderne .intent-card:not(.news-card) h3 { color: var(--white); font-size: 1.55rem; letter-spacing: -.02em; }
.style-moderne .intent-card:not(.news-card) p { color: rgba(255,255,255,.78); text-align: left; text-align-last: auto; }
.style-moderne .intent-card:not(.news-card) .intent-card__link {
	margin-top: 6px;
	align-self: flex-start;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--white);
	transition: background-color .3s ease, color .3s ease;
}
.style-moderne .intent-card:not(.news-card):hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(15,49,76,.28); }
.style-moderne .intent-card:not(.news-card):hover .intent-card__thumb img { transform: scale(1.08); }
.style-moderne .intent-card:not(.news-card):hover .intent-card__link { background: var(--white); color: var(--navy); }
@media (max-width: 700px) {
	.style-moderne .intent-card:not(.news-card) { min-height: 340px; }
}

/* ---------- Le blog : cartes blanches, photo bord à bord ---------- */
.style-moderne .news-card {
	border: 0;
	border-radius: var(--carte-radius);
	box-shadow: 0 1px 2px rgba(15,49,76,.05);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.style-moderne .news-card .intent-card__thumb { margin: -36px -30px 24px; border-radius: 0; }
.style-moderne .news-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15,49,76,.14); }

/* ---------- Questions fréquentes ---------- */
.style-moderne .faq { gap: 10px; }
.style-moderne .faq__item {
	border: 1px solid transparent;
	border-radius: 22px;
	box-shadow: 0 1px 2px rgba(15,49,76,.05);
	transition: border-color .3s ease, box-shadow .4s var(--ease-out);
}
.style-moderne .faq__item:hover { border-color: var(--g100); }
.style-moderne .faq__item[open] { border-color: var(--pink-light); box-shadow: 0 18px 40px rgba(15,49,76,.08); }
.style-moderne .faq__q { padding: 22px 24px 22px 28px; font-size: 1.08rem; font-weight: 700; }
.style-moderne .faq__r { padding: 0 28px 24px; }
.style-moderne .faq__chevron {
	box-sizing: content-box;
	padding: 8px;
	border-radius: 50%;
	background: var(--g50);
	color: var(--navy);
}
.style-moderne .faq__item[open] .faq__chevron { background: var(--pink); color: var(--white); }

/* ---------- Nos engagements : le bloc actuel, préféré par Maxime ----------
   Ne changent que le fond (celui de la page, sans filet) et la mention
   « Pensez à covoiturer », trop petite : c'est la mention prévue pour les
   publicités automobiles, elle doit se lire sans effort. */
.style-moderne .engagements { padding: 8px 0 88px; background: transparent; border-top: 0; }
.style-moderne .engagements__title { margin-bottom: 28px; }
.style-moderne .engagements__tagline { margin-top: 26px; font-size: 1.15rem; letter-spacing: -.01em; }
@media (max-width: 560px) {
	.style-moderne .engagements__tagline { font-size: 1.02rem; }
}

@media (max-width: 700px) {
	.style-moderne .section { padding: 64px 0; }
}

/* ---------- Apparition au défilement (sans JavaScript) ----------
   Animations liées au défilement : les navigateurs qui ne les gèrent pas
   affichent simplement tout, sans effet. Rien pour qui a demandé moins
   d'animations. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.style-moderne .section-head,
		.style-moderne .brand-tile,
		.style-moderne .section--navy > .container,
		.style-moderne .cards-grid > *,
		.style-moderne .faq__item,
		.style-moderne .engagements__list li,
		.style-moderne .vo-liens__groupe {
			animation: pm-apparition linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
	}
}
@keyframes pm-apparition {
	from { opacity: 0; translate: 0 40px; }
	to { opacity: 1; translate: 0 0; }
}