/*!
 * Unique Cargo Express — feuille de style unique du site public.
 * Direction visuelle : bleu nuit #0B1F4B, rouge action #E2231A, gris clair
 * #f4f6f9 (design/mockup).
 * Aucune ressource externe : deux polices WOFF2 auto-hébergées, zéro CDN.
 * Cible : une seule requête CSS, < 30 Ko non compressés.
 */

/* ------------------------------------------------------------------ polices */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------- jetons */
:root {
	--ink: #0b1f4b;
	--ink-soft: #122a5c;
	--sand: #f4f6f9;
	--paper: #ffffff;
	--accent: #e2231a;
	--accent-dark: #b81a13;
	--accent-tint: #fdeceb;
	--amber: #0a5bd3;
	--amber-ink: #ffffff;
	--muted: #5f6b80;
	--line: #dfe4ee;
	--line-strong: #c9d2e2;
	--blue: #0a5bd3;
	--blue-dark: #0846a3;
	--danger: #8d1c15;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 18px 50px rgba(11, 31, 75, 0.1);
	--shadow-sm: 0 8px 24px rgba(11, 31, 75, 0.08);
	--container: 1180px;
	--gutter: 20px;
	/* Hauteur de section fluide : 44 px sur petit écran, 76 px au-delà de
	   1460 px. Remplace les anciens 76/60/44 px figés. */
	--section-y: clamp(44px, 5.2vw, 76px);
	/* Rythme commun aux grilles et aux cartes : mêmes écarts partout. */
	--space-grid: clamp(16px, 2vw, 24px);
	--space-card: clamp(20px, 2.4vw, 26px);
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-head: "Space Grotesk", "Manrope", sans-serif;
	--header-h: 76px;
	--focus: 3px solid #0a5bd3;
}

/* -------------------------------------------------------------------- reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden; /* filet de sécurité : aucun débordement horizontal */
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Un numéro de téléphone ne doit jamais être coupé en fin de ligne. */
a[href^="tel:"] {
	white-space: nowrap;
}

p {
	margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

/* Évite veuves et orphelins dans les textes courants. Les navigateurs qui ne
   connaissent pas `pretty` retombent sur le retour à la ligne normal. */
p,
li,
.card__text,
.step__text,
.faq__answer,
.notice,
.price__note {
	text-wrap: pretty;
}

h1 {
	font-size: clamp(2rem, 4.1vw, 3.4rem);
}

h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.5rem);
}

h3 {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

ul,
ol {
	margin: 0 0 1em;
	padding-left: 1.15em;
}

li {
	margin-bottom: 0.35em;
}

:focus-visible {
	outline: var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--accent);
	color: #fff;
}

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

/* ------------------------------------------------------------------ layout */
.container {
	width: min(var(--container), 100% - (2 * var(--gutter)));
	margin-inline: auto;
}

.site-main {
	display: block;
}

.section {
	padding: var(--section-y) 0;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.section--carded {
	background: var(--paper);
	border-block: 1px solid var(--line);
}

.section--hero {
	padding: 44px 0 40px;
}

.section--hero-interne {
	padding: 40px 0 32px;
	border-bottom: 1px solid var(--line);
}

.section--tight {
	padding-top: 0;
}

.section--prose .container {
	max-width: 900px;
}

.section--cta-final {
	padding-top: 0;
}

/* Sections de la page Services : le rythme est resserré (36 → 56 px) pour
   éviter les grands vides entre les blocs courts. Les gabarits anglais portent
   d'autres noms de section (container, vehicle, logistics, tracking) : les deux
   jeux de classes sont listés, sinon le resserrement n'existe qu'en français. */
.section--conteneur,
.section--container,
.section--vehicule,
.section--vehicle,
.section--logistique,
.section--logistics,
.section--suivi,
.section--tracking {
	padding-block: clamp(36px, 4.2vw, 56px);
}

/* Sections de la page Tarifs : même resserrement, un cran au-dessus. */
.section--methode,
.section--method,
.section--electromenager,
.section--appliances,
.section--vehicules,
.section--vehicles,
.section--tvs {
	padding-block: clamp(40px, 4.4vw, 56px);
}

/* « Groupage » et « Cartons » (« Boxes » en anglais) existent sur les deux pages
   avec deux valeurs voisines dans la demande : une seule valeur fluide,
   intermédiaire, pour que le rythme reste identique d'une page à l'autre. */
.section--groupage,
.section--cartons,
.section--boxes {
	padding-block: clamp(38px, 4.3vw, 56px);
}

/* Points de dépôt : page courte et dense, on resserre encore. Le nom
   `section--points-depot` est conservé pour la section de l'accueil. */
.section--points-depot,
.section--liste,
.section--list,
.section--preparer,
.section--prepare,
.section--retrait-domicile,
.section--collection {
	padding-block: clamp(36px, 4vw, 52px);
}

.split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(24px, 4vw, 40px);
	align-items: start;
}

.split--center {
	align-items: center;
}

/* ------------------------------------------------------------ lien d'évitement */
.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 200;
	background: var(--ink);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 10px 10px;
	font-weight: 700;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* ------------------------------------------------------------------ bandeau */
.topbar {
	background: var(--ink);
	color: #dbe4ec;
	font-size: 0.78rem;
}

.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 38px;
	flex-wrap: wrap;
	padding-block: 4px;
}

.topbar__contact,
.topbar__aux {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.topbar__link {
	color: #fff;
	opacity: 0.94;
	padding: 4px 2px;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.topbar__link:hover {
	opacity: 1;
}

.topbar__sep {
	opacity: 0.4;
}

.lang-switch {
	display: inline-flex;
	gap: 2px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 2px;
}

.lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: #fff;
}

.lang-switch__link.is-current {
	background: #fff;
	color: var(--ink);
}

/* ------------------------------------------------------------------- en-tête */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(246, 242, 234, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(10, 27, 42, 0.08);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 1.02rem;
	/* Le logo cède avant la barre : il se réduit (nom tronqué proprement)
	   plutôt que de pousser le bouton de menu hors de l'écran (B8). */
	flex: 0 1 auto;
	min-width: 0;
	min-height: 44px;
}

.brand:hover {
	text-decoration: none;
}

.brand__mark {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	flex: 0 0 auto;
}

.brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.brand__name {
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brand__tag {
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin-top: 1px;
}

.nav__nav {
	margin-left: auto;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.87rem;
	font-weight: 600;
}

.nav__item {
	margin: 0;
}

.nav__link {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	color: #24384a;
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.nav__link:hover {
	text-decoration: none;
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav__nav .nav__link[aria-current="page"] {
	color: var(--ink);
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* CTA de secours affiché dans le panneau du menu sous 560 px (voir B8).
   Spécificité .nav__nav pour passer devant .btn { display: inline-flex }. */
.nav__nav .nav__panel-quote {
	display: none;
}

.menu-btn {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	border: 1px solid rgba(10, 27, 42, 0.2);
	background: transparent;
	color: var(--ink);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.cta-links {
	margin: 18px 0 0;
}

.cta-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--accent-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------------- boutons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.88rem;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--accent);
	color: #fff;
}

.btn--primary:hover {
	background: var(--accent-dark);
	color: #fff;
}

.btn--dark {
	background: var(--ink);
	color: #fff;
}

.btn--dark:hover {
	background: #0b1f4b;
	color: #fff;
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: rgba(10, 27, 42, 0.28);
}

.btn--ghost:hover {
	border-color: var(--ink);
	background: rgba(10, 27, 42, 0.04);
}

.btn--wa {
	background: #16794a;
	color: #fff;
}

.btn--wa:hover {
	background: #106039;
	color: #fff;
}

.btn--small {
	min-height: 40px;
	padding: 0 14px;
	font-size: 0.82rem;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.actions .btn {
	flex: 0 1 auto;
}

/* ---------------------------------------------------------------------- hero */
.hero__eyebrow,
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin: 0 0 14px;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--accent);
	display: inline-block;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 46px;
	align-items: center;
}

.hero__title {
	margin: 8px 0 16px;
}

.lede {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: #42526e;
	max-width: 62ch;
	margin: 0 0 1em;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
}

.microtrust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	color: var(--muted);
	font-size: 0.79rem;
	font-weight: 600;
	list-style: none;
	margin: 0;
	padding: 0;
}

.microtrust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.microtrust li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex: 0 0 auto;
}

.hero__visual {
	position: relative;
	min-height: 420px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(160deg, #15346f, #0b1f4b);
	box-shadow: var(--shadow);
}

.hero__visual svg {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

/* Photo du hero : elle remplit le cadre (le SVG décoratif a été retiré),
   sans dicter la hauteur — celle-ci reste portée par .hero__visual, donc
   aucun décalage de mise en page au chargement. */
.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/* Voile bleu nuit : garantit le contraste du badge et de la carte
   d'itinéraire sans masquer les grues ni les conteneurs. */
.hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(11, 31, 75, 0.2) 0%, rgba(11, 31, 75, 0.05) 40%, rgba(11, 31, 75, 0.62) 76%, rgba(11, 31, 75, 0.9) 100%),
		linear-gradient(90deg, rgba(11, 31, 75, 0.42) 0%, rgba(11, 31, 75, 0) 58%);
}

.hero__badge {
	position: absolute;
	right: 18px;
	top: 20px;
	background: var(--amber);
	color: var(--amber-ink);
	padding: 9px 14px;
	border-radius: 12px;
	font-size: 0.74rem;
	font-weight: 800;
	box-shadow: var(--shadow-sm);
}

.route-card {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	background: rgba(255, 255, 255, 0.97);
	border-radius: 16px;
	padding: 16px 18px 14px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.route-card__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.route-card__main {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
}

.route-card__line {
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px);
}

.route-card__meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.74rem;
	color: var(--muted);
	font-weight: 600;
}

/* ----------------------------------------------------------- cartes génériques */
.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-grid);
	margin: 0;
}

.cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-card);
	margin: 0;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.section:not(.section--carded) .card {
	background: #ffffff;
}

/* Élévation discrète au survol : 3 px vers le haut et une ombre légère, sans
   toucher aux couleurs. Neutralisée sous prefers-reduced-motion (plus bas). */
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.card__title {
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.card__text {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0;
}

.card--feature {
	background: linear-gradient(160deg, #14306b, #0b1f4b);
	color: #fff;
	border: none;
	position: relative;
	overflow: hidden;
}

.card--feature .card__title {
	color: #fff;
}

.card--feature .card__text {
	color: #c9d7e3;
}

.card__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: 8px;
}

.card--feature .card__tag {
	color: #9dc0f5;
}

.card__icon {
	display: block;
	width: 30px;
	height: 30px;
	color: var(--accent-dark);
	margin-bottom: 12px;
}

/* Cartes illustrées (« Nos solutions d'expédition ») : photo 16/10 en tête,
   rayon d'angle cohérent avec la carte, texte jamais écrasé. */
.card--media {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.card__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ink);
	flex: 0 0 auto;
}

.card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Zoom très discret au survol, coupé sous prefers-reduced-motion. */
.card--media:hover .card__media img {
	transform: scale(1.03);
}

.card--media .card__body {
	padding: 20px 24px 24px;
}

/* Bandeau photo de l'en-tête « À propos » : ratio large, jamais déformé. */
.page-photo {
	margin: 30px 0 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink);
	box-shadow: var(--shadow-sm);
}

.page-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

/* ------------------------------------------------------- bande de réassurance */
.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.trust-item {
	padding: var(--space-card);
	border-right: 1px solid var(--line);
}

.trust-item:last-child {
	border-right: none;
}

.trust-item__title {
	font-family: var(--font-head);
	font-size: 0.94rem;
	margin: 0 0 4px;
}

.trust-item__text {
	font-size: 0.82rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.trust-item__icon {
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: 12px;
	color: var(--accent);
}

/* ------------------------------------------------------------------- étapes */
.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-grid);
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.step {
	position: relative;
	padding: var(--space-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #ffffff;
	margin: 0;
}

.step::before {
	counter-increment: step;
	content: "0" counter(step);
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--accent-dark);
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 8px;
}

.step__title {
	font-family: var(--font-head);
	font-size: 1rem;
	margin: 0 0 6px;
}

.step__text {
	font-size: 0.85rem;
	color: var(--muted);
	margin: 0;
}

/* ------------------------------------------------------------------- tarifs */
.price-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-grid);
	margin: 0 0 18px;
}

.price {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-card);
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.section:not(.section--carded) .price {
	background: #ffffff;
}

.price__label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.price__value {
	font-family: var(--font-head);
	font-size: 1.6rem;
	letter-spacing: -0.02em;
}

.price__note {
	font-size: 0.78rem;
	color: var(--muted);
}

.price--highlight {
	background: var(--ink);
	color: #fff;
	border: none;
}

.price--highlight .price__label,
.price--highlight .price__note {
	color: #b9c8d5;
}

/* ------------------------------------------------------------------ tableaux */
.table-wrap {
	overflow-x: auto;
	margin: 0 0 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	-webkit-overflow-scrolling: touch;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 420px;
}

caption {
	text-align: left;
	padding: 14px 16px 0;
	font-size: 0.8rem;
	color: var(--muted);
}

th,
td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

thead th {
	font-family: var(--font-head);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	background: #f1f4f9;
}

tbody tr:last-child td,
tbody tr:last-child th {
	border-bottom: none;
}

tbody th {
	font-weight: 700;
}

/* Tableaux de tarifs : la colonne des prix est alignée à droite, en chiffres
   tabulaires, pour que les montants se lisent en colonne. Les sections sont
   nommées une par une : aucun autre tableau du site n'est touché. Les alias
   anglais (boxes, appliances, vehicles) sont listés à côté des classes FR. */
.section--groupage table th,
.section--groupage table td,
.section--cartons table th,
.section--cartons table td,
.section--boxes table th,
.section--boxes table td,
.section--electromenager table th,
.section--electromenager table td,
.section--appliances table th,
.section--appliances table td,
.section--vehicules table th,
.section--vehicules table td,
.section--vehicles table th,
.section--vehicles table td,
.section--tvs table th,
.section--tvs table td {
	vertical-align: middle;
}

.section--groupage table th:nth-child(even),
.section--groupage table td:nth-child(even),
.section--cartons table th:nth-child(even),
.section--cartons table td:nth-child(even),
.section--boxes table th:nth-child(even),
.section--boxes table td:nth-child(even),
.section--electromenager table th:nth-child(even),
.section--electromenager table td:nth-child(even),
.section--appliances table th:nth-child(even),
.section--appliances table td:nth-child(even),
.section--vehicules table th:nth-child(even),
.section--vehicules table td:nth-child(even),
.section--vehicles table th:nth-child(even),
.section--vehicles table td:nth-child(even),
.section--tvs table th:nth-child(even),
.section--tvs table td:nth-child(even) {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Points de dépôt : le numéro reste sur une ligne et occupe la dernière
   colonne, aligné à droite. La colonne garde une largeur minimale pour que
   l'en-tête « Téléphone » ne soit pas écrasé à 4 colonnes. */
.section--liste table th:last-child,
.section--liste table td:last-child,
.section--list table th:last-child,
.section--list table td:last-child {
	text-align: right;
	min-width: 150px;
}

.section--liste table td:last-child,
.section--list table td:last-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- FAQ */
.faq {
	max-width: 860px;
	margin: 0;
}

.faq__item {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0 18px;
	margin: 0 0 10px;
}

.faq__item[open] {
	border-color: rgba(14, 124, 107, 0.5);
}

.faq__question {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-weight: 700;
	font-family: var(--font-head);
	font-size: 0.98rem;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--accent-dark);
	font-weight: 400;
	line-height: 1;
	flex: 0 0 auto;
}

.faq__item[open] .faq__question::after {
	content: "–";
}

.faq__answer {
	padding: 0 0 18px;
	color: var(--muted);
	font-size: 0.9rem;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- bandeau CTA */
.cta-panel {
	background: linear-gradient(135deg, #0b1f4b 0%, #15346f 70%, #e2231a 140%);
	color: #fff;
	border-radius: 24px;
	padding: clamp(24px, 4vw, 44px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.cta-panel h2 {
	max-width: 22ch;
	margin-bottom: 10px;
}

.cta-panel p {
	color: #cfdde8;
	max-width: 46ch;
	margin: 0;
}

.cta-panel .actions {
	margin-top: 0;
}

/* Le bandeau CTA est posé sur un dégradé bleu nuit : la variante ghost
   « fond clair » (texte bleu nuit, bordure foncée) y tombait à 1,34:1.
   Le bouton secondaire devient un bouton blanc plein, bleu nuit sur blanc
   (14,3:1) ; le survol passe à un blanc bleuté sans changer le texte. */
.cta-panel .btn--ghost {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.cta-panel .btn--ghost:hover {
	background: #eef3fb;
	color: var(--ink);
	border-color: #fff;
}

.cta-panel .eyebrow {
	color: #9dc0f5;
}

.cta-panel .eyebrow::before {
	background: #9dc0f5;
}

/* -------------------------------------------------------------- fil d'Ariane */
.breadcrumb {
	padding: 16px 0 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumb__item {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	color: var(--line-strong);
}

.breadcrumb__item a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------- avis */
.notice {
	border-left: 4px solid #0a5bd3;
	background: #eef3fc;
	color: #122a5c;
	padding: 14px 18px;
	border-radius: 0 10px 10px 0;
	font-size: 0.88rem;
	margin: 0 0 20px;
}

.notice strong {
	display: block;
	margin-bottom: 2px;
}

/* ------------------------------------------------------------------- prose */
.section--prose h2 {
	margin-top: 2.1em;
	margin-bottom: 0.65em;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.section--prose h2:first-child,
.section--prose > .container > h2:first-child {
	margin-top: 0;
}

.section--prose h3 {
	margin-top: 1.7em;
	margin-bottom: 0.5em;
	font-size: 1.05rem;
}

.section--prose p,
.section--prose li {
	color: #24384a;
	line-height: 1.75;
}

.section--prose p {
	margin-bottom: 1.2em;
}

.section--prose ul,
.section--prose ol {
	margin-bottom: 1.25em;
}

.section--prose li + li {
	margin-top: 0.35em;
}

.section--prose .muted {
	color: var(--muted);
	font-size: 0.86rem;
}

/* ------------------------------------------------------------------- footer */
.site-footer {
	background: var(--ink);
	color: #b9c8d5;
	padding: 56px 0 26px;
	margin-top: 0;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.9fr 0.8fr;
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
}

/* Langue sans traduction des pages de service (DE : pages légales seules) :
   une colonne vide laisserait un titre sans aucun lien. */
.footer__col:has(.footer__list:empty) {
	display: none;
}

/* Le carré du logo est dessiné par le SVG (contour blanc) : pas de fond de
   pastille, sinon le contour blanc disparaîtrait sur un carré blanc. */
.brand--footer .brand__mark {
	background: transparent;
	border-radius: 0;
}

.brand--footer .brand__name {
	color: #fff;
}

.brand--footer .brand__tag {
	color: #93a7b8;
}

.footer__desc {
	font-size: 0.84rem;
	line-height: 1.7;
	max-width: 34ch;
	margin: 14px 0 12px;
}

.footer__hours {
	font-size: 0.8rem;
	color: #93a7b8;
	margin: 0;
}

.footer__title {
	font-family: var(--font-body);
	color: #fff;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 12px;
	font-weight: 800;
}

.footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__item {
	margin: 0 0 2px;
}

.footer__link,
.footer__list a,
.footer__legal a {
	color: #b9c8d5;
	font-size: 0.85rem;
	line-height: 1.6;
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 1px 0;
}

.footer__link:hover,
.footer__list a:hover,
.footer__legal a:hover {
	color: #fff;
}

/* Lien courant du pied de page. Le fond est bleu nuit : #fff donne 16:1
   (WCAG AA = 4,5:1) là où --accent-dark tombait à 2,44:1. Le gras ajoute un
   repère qui ne repose pas sur la couleur seule (WCAG 1.4.1). */
.footer__link[aria-current="page"],
.footer__list a[aria-current="page"] {
	color: #fff;
	font-weight: 700;
}

.footer__bottom {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 12px 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 36px;
	padding-top: 18px;
	font-size: 0.75rem;
	color: #93a7b8;
}

.footer__copy {
	margin: 0;
}

.footer__legal {
	display: flex;
	justify-content: flex-start;
	gap: 10px 18px;
	flex-wrap: wrap;
}

.addr {
	display: inline-flex;
	flex-direction: column;
}

/* ------------------------------------------------------------------ résultats */
.results {
	list-style: none;
	margin: 24px 0;
	padding: 0;
}

.results__item {
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
	margin: 0;
}

.results__title {
	font-size: 1.1rem;
	margin: 0 0 4px;
}

.results__excerpt {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0;
}

.sitemap__list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 30px;
}

.sitemap__list .nav__item {
	margin: 0 0 6px;
}

.sitemap__list .nav__link {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------- recherche */
.search-form {
	margin: 16px 0 0;
}

.search-form__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}

.search-form__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.search-form__input {
	flex: 1 1 220px;
	min-height: 46px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	padding: 0 14px;
	font: inherit;
	background: #fff;
	color: var(--ink);
}

/* -------------------------------------------------------------- responsive */
/* ------------------------------------------------------------------ divers */
/* Compléments pour le balisage généré par tools/build.mjs et les gabarits de
   l'extension : ces classes n'ont pas de règle propre dans la feuille de base. */
.split__main,
.split__aside {
	min-width: 0;
}

.addr__line {
	display: block;
}

.footer__col {
	min-width: 0;
}

.section--sitemap {
	padding-bottom: 4rem;
}

.card--form {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Cibles tactiles : jamais moins de 44 px sous 375 px (RGAA / WCAG 2.5.5). */
@media (max-width: 380px) {
	.nav__link,
	.footer__list a,
	.footer__legal a,
	.topbar__link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.nav__item + .nav__item {
		border-top: 1px solid var(--line);
	}

	.table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	h1,
	h2,
	h3,
	p,
	li {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 1100px) {
	.nav__list {
		gap: 16px;
		font-size: 0.83rem;
	}

	.nav__call {
		display: none;
	}

	.footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1020px) {
	:root {
		--header-h: 66px;
	}

	.brand__mark {
		width: 36px;
		height: 36px;
		font-size: 1rem;
	}

	.menu-btn {
		display: inline-flex;
	}

	.nav {
		gap: 12px;
	}

	.nav__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--sand);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-sm);
		padding: 10px 20px 18px;
		max-height: calc(100vh - var(--header-h) - 40px);
		overflow-y: auto;
	}

	.nav__nav.is-open {
		display: block;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 1rem;
	}

	.nav__item + .nav__item {
		border-top: 1px solid rgba(10, 27, 42, 0.07);
	}

	.nav__link {
		display: block;
		padding: 14px 0;
	}

	.nav__link::after {
		display: none;
	}

	/* Panneau de navigation uniquement : le pied de page réutilise
	   `.nav__link` sur fond bleu nuit, où --accent-dark ne donne que 2,44:1
	   (M3). Sa couleur de lien courant est définie plus haut. */
	.nav__nav .nav__link[aria-current="page"] {
		color: var(--accent-dark);
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hero__visual,
	.hero__visual svg {
		min-height: 340px;
	}

	.trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trust-item:nth-child(2n) {
		border-right: none;
	}

	.trust-item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--line);
	}

	.cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.price-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.split {
		grid-template-columns: 1fr;
	}
}

/* Entre 1021 et 1060 px, le bandeau CTA passait en ligne avant d'avoir la
   place : le texte et les actions ne tenaient plus côte à côte, les boutons
   glissaient sous le texte, alignés à gauche, avec un grand vide à droite
   (constat QA à 960 px, reproduit jusqu'à 1035 px ; la disposition en ligne
   ne tient qu'à partir de ~1040 px). Le bas du pied de page se cassait de la
   même façon. Les deux blocs restent donc empilés jusqu'à 1060 px. */
@media (max-width: 1060px) {
	.cta-panel {
		padding: clamp(24px, 3vw, 34px);
		gap: 18px;
	}

	.cta-panel > div:first-child {
		flex: 1 1 360px;
		min-width: 0;
	}

	.cta-panel h2 {
		max-width: 20ch;
	}

	.cta-panel p {
		max-width: 42ch;
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* À 960 px, le texte et les boutons tiennent côte à côte ; empiler laissait
   un grand vide à droite. On n'empile qu'en dessous de 900 px. */
@media (max-width: 900px) {
	.cta-panel {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.cta-panel h2 {
		max-width: none;
	}

	.cta-panel p {
		max-width: 58ch;
	}
}

@media (max-width: 760px) {
	.cards,
	.cards--3 {
		grid-template-columns: 1fr;
	}

	.sitemap__list {
		columns: 1;
	}

	.hero__visual,
	.hero__visual svg {
		min-height: 300px;
	}

	.footer__grid {
		grid-template-columns: 1fr;
	}

	/* Sur écran tactile, les liens de service et de pied de page atteignent
	   44 px de haut : cibles confortables au pouce. */
	.topbar__link {
		min-height: 44px;
		padding-block: 8px;
	}

	.footer__link,
	.footer__list a,
	.footer__legal a,
	.footer__cookie-btn {
		min-height: 44px;
	}

	.lang-switch__link {
		min-height: 44px;
		min-width: 40px;
	}
}

@media (max-width: 620px) {
	:root {
		--gutter: 14px;
	}

	.section--hero {
		padding-top: 26px;
	}

	.hero__visual,
	.hero__visual svg {
		min-height: 260px;
	}

	.route-card {
		left: 10px;
		right: 10px;
		bottom: 10px;
		padding: 12px 14px;
	}

	.hero__badge {
		display: none;
	}

	.trust-grid {
		grid-template-columns: 1fr;
	}

	.trust-item {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding: 18px 0;
	}

	.trust-item:last-child {
		border-bottom: none;
	}

	.steps,
	.price-grid {
		grid-template-columns: 1fr;
	}

	.actions .btn,
	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.topbar__inner {
		justify-content: center;
		text-align: center;
	}

	.topbar__aux {
		justify-content: center;
	}

	.brand__tag {
		display: none;
	}

	.cta-panel {
		padding: 26px 20px;
		border-radius: 18px;
	}

	.faq__item {
		padding: 0 14px;
	}

	.section--prose .container {
		max-width: none;
	}

	table {
		font-size: 0.85rem;
	}

	th,
	td {
		padding: 10px 12px;
	}
}

/* B8 : sous 560 px, le CTA de l'en-tête ne tient plus à côté du logo et du
   bouton de menu (mesure : 217 + 12 + 185 px de contenu pour 292 px utiles à
   320 px, 397 px à 440 px). Il est masqué ici et proposé en tête du panneau de
   navigation, pour ne pas perdre le point d'entrée vers le devis. */
@media (max-width: 560px) {
	.nav__quote {
		display: none;
	}

	.nav__nav .nav__panel-quote {
		display: inline-flex;
		width: 100%;
		margin-top: 14px;
	}
}

/* --------------------------------------------------- préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.card:hover {
		transform: none;
		box-shadow: none;
	}

	.card--media:hover .card__media img {
		transform: none;
	}
}

/* --------------------------------------------------------------------- print */
@media print {
	.topbar,
	.site-header,
	.site-footer,
	.cta-panel,
	.actions,
	.menu-btn,
	.cookie-bar {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.section {
		padding: 0 0 12pt;
	}

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

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
	}
}


/* breadcrumb */
.breadcrumb{margin:18px 0 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.breadcrumb__item{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted);font-weight:600}
.breadcrumb__item + .breadcrumb__item::before{content:"/";opacity:.4;font-weight:400}
.breadcrumb__item a{color:var(--muted)}
.breadcrumb__item a:hover{color:var(--ink)}
.breadcrumb__item[aria-current="page"]{color:var(--ink)}


/* ------------------------------------------------ accents de section (cartes) */

/* Filet supérieur : repère de section, purement décoratif (aucun texte porté
   par la bordure, donc hors du périmètre des contrastes AA). */
.section--bandeau-confiance .cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section--bandeau-confiance .card {
	border-top: 3px solid var(--accent);
}

/* « Nos solutions d'expédition » : 4 cartes en 2 x 2, de hauteur égale, au
   lieu du 3 + 1 produit par .cards--3. Une colonne sur mobile. */
.section--services .cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}

.section--services .card {
	border-top: 3px solid var(--ink);
}

/* « Ce que nous transportons » (À propos) : 4 cartes en 2 × 2 de hauteur
   égale, au lieu du 3 + 1 produit par .cards--3. */
.section--metier .cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}

@media (max-width: 1100px) {
	.section--bandeau-confiance .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.section--services .cards {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.section--metier .cards {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
}

@media (max-width: 620px) {
	.section--bandeau-confiance .cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	/* Photo de hero : le cadre garde assez de hauteur pour que la carte
	   d'itinéraire ne recouvre pas la photo (260 px venait du SVG). */
	.hero__visual {
		min-height: 330px;
	}

	.page-photo img {
		aspect-ratio: 16 / 9;
	}
}


/* ------------------------------------------- tableaux de tarifs sur petit écran */
/* Sous 620 px, `table { min-width: 420px }` et le `nowrap` des colonnes de prix
   faisaient déborder la grille d'une soixantaine de pixels à 390 px : les
   montants sortaient du cadre et se lisaient mal. Les tableaux de tarifs
   (FR et EN) se rétrécissent et les prix passent à la ligne au lieu d'être
   coupés ; au-delà, le `.table-wrap` reste la seule zone défilante. */
@media (max-width: 620px) {
	:is(
			.section--groupage,
			.section--cartons,
			.section--boxes,
			.section--electromenager,
			.section--appliances,
			.section--vehicules,
			.section--vehicles,
			.section--tvs
		)
		table {
		min-width: 0;
	}

	:is(
			.section--groupage,
			.section--cartons,
			.section--boxes,
			.section--electromenager,
			.section--appliances,
			.section--vehicules,
			.section--vehicles,
			.section--tvs
		)
		table :is(th, td) {
		padding: 10px 8px;
	}

	:is(
			.section--groupage,
			.section--cartons,
			.section--boxes,
			.section--electromenager,
			.section--appliances,
			.section--vehicules,
			.section--vehicles,
			.section--tvs
		)
		table :is(th, td):nth-child(even) {
		white-space: normal;
	}
}

/* --------------------------------------------- points de dépôt sur petit écran */
/* Quatre colonnes (ville, adresse, commerce, téléphone) ne tiennent pas dans
   360 px utiles : sous 760 px le tableau des points de dépôt devient une liste
   de cartes empilées. Chaque valeur porte son libellé, dans la langue de la
   page, et le numéro reste visible sans défilement horizontal. */
@media (max-width: 760px) {
	.section--liste .table-wrap,
	.section--list .table-wrap {
		overflow: visible;
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.section--liste table,
	.section--list table {
		display: block;
		width: 100%;
		min-width: 0;
		font-size: 0.9rem;
	}

	.section--liste thead,
	.section--list thead {
		display: none;
	}

	.section--liste tbody,
	.section--list tbody {
		display: block;
	}

	.section--liste tbody tr,
	.section--list tbody tr {
		display: block;
		margin: 0 0 10px;
		padding: 12px 14px;
		background: var(--paper);
		border: 1px solid var(--line);
		border-radius: 12px;
	}

	.section--liste tbody tr:last-child,
	.section--list tbody tr:last-child {
		margin-bottom: 0;
	}

	.section--liste tbody td,
	.section--list tbody td {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* La ville ouvre la carte : c'est le titre, il n'a pas besoin de libellé. */
	.section--liste tbody td:first-child,
	.section--list tbody td:first-child {
		margin-bottom: 4px;
		font-family: var(--font-head);
		font-size: 1rem;
		font-weight: 700;
		color: var(--ink);
	}

	.section--liste tbody td:nth-child(n + 2),
	.section--list tbody td:nth-child(n + 2) {
		font-size: 0.85rem;
		color: var(--muted);
	}

	.section--liste tbody td:nth-child(n + 2)::before,
	.section--list tbody td:nth-child(n + 2)::before {
		font-weight: 700;
		color: var(--ink);
	}

	.section--liste tbody td:nth-child(2)::before {
		content: "Adresse : ";
	}

	.section--liste tbody td:nth-child(3)::before {
		content: "Commerce : ";
	}

	.section--liste tbody td:nth-child(4)::before {
		content: "Téléphone : ";
	}

	.section--list tbody td:nth-child(2)::before {
		content: "Address: ";
	}

	.section--list tbody td:nth-child(3)::before {
		content: "Shop: ";
	}

	.section--list tbody td:nth-child(4)::before {
		content: "Phone: ";
	}

	/* Le numéro ferme la carte, séparé par un filet, en gras : c'est
	   l'information qu'on cherche en premier sur cette page. */
	.section--liste tbody td:last-child,
	.section--list tbody td:last-child {
		margin-top: 8px;
		padding-top: 6px;
		border-top: 1px solid var(--line);
		text-align: left;
		white-space: normal;
		min-width: 0;
	}

	.section--liste tbody td:last-child a,
	.section--list tbody td:last-child a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-weight: 700;
		color: var(--ink);
		white-space: nowrap;
	}
}

/* ----------------------------------------- bandeau cookies (première visite) */
/* Bandeau non modal posé dans le conteneur, à cheval sur le bas de la page :
   il ne pousse aucun contenu (aucun décalage de mise en page) et reste
   actionnable au clavier. main.js ne le révèle que si
   localStorage['uce_cookie_consent_v1'] est absent : sans JavaScript, il
   n'apparaît jamais et le site reste utilisable. */
.cookie-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	padding: 0 var(--gutter) max(12px, env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.cookie-bar[hidden] {
	display: none;
}

.cookie-bar__inner {
	width: min(var(--container), 100%);
	margin-inline: auto;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 28px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	box-shadow: 0 16px 44px rgba(11, 31, 75, 0.22);
	padding: 16px 20px;
}

.cookie-bar__text {
	flex: 1 1 320px;
	min-width: 0;
}

.cookie-bar__title {
	margin: 0 0 2px;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.cookie-bar__desc {
	margin: 0;
	max-width: 72ch;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted);
}

.cookie-bar__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.cookie-bar__btn {
	min-height: 44px;
	padding: 0 18px;
	font-size: 0.85rem;
}

/* Le bouton secondaire garde une bordure pleine bleu nuit : en `--line-strong`
   il ne se distingue plus du fond blanc (moins de 3:1, WCAG 1.4.11). */
.cookie-bar .btn--ghost {
	border-color: var(--ink);
	background: var(--paper);
}

.cookie-bar .btn--ghost:hover {
	background: #eef3fb;
	border-color: var(--ink);
}

.cookie-bar__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--blue-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cookie-bar__link:hover {
	color: var(--ink);
}

@media (max-width: 620px) {
	.cookie-bar__inner {
		padding: 14px 16px;
		gap: 10px 16px;
	}

	.cookie-bar__btn {
		flex: 1 1 auto;
	}
}

/* Lien « Cookies » du pied de page : un bouton, puisque rouvrir le bandeau ne
   navigue pas. Présenté comme les liens légaux voisins, et masqué tant que
   main.js ne l'active pas : rien d'inutile sans JavaScript. */
.footer__cookie-btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.75rem;
	line-height: 1.6;
	color: #b9c8d5;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.footer__cookie-btn:hover {
	color: #fff;
}

.footer__cookie-btn[hidden] {
	display: none;
}


/* Devis : le formulaire occupe la largeur utile, le contact passe dessous
   (plus de carte étroite collée à droite). */
.quote-form-wrap {
	max-width: 760px;
}

.quote-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
	padding: var(--space-card);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.quote-contact__text {
	min-width: 0;
}

.quote-contact__text .card__title {
	margin-bottom: 4px;
}

.quote-contact__text .card__text {
	margin: 0;
	color: var(--muted);
}

.quote-contact__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	flex: 0 0 auto;
}

@media (max-width: 760px) {
	.quote-contact {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 24px;
	}
}

/* --------------------------------------- statuts du suivi sur petit écran */
/* Le tableau « Statut affiché / Ce que cela veut dire » (2 colonnes) ne tient
   pas dans 360 px avec min-width:420px, et rien n'indiquait qu'il défilait.
   Sous 480 px, chaque ligne devient une carte : le statut est le titre,
   l'explication suit. Pas de défilement horizontal, aucune régression
   desktop. (P3-7 audit Opus 2026-10-20.) */
@media (max-width: 480px) {
	.section--statuts .table-wrap,
	.section--statuses .table-wrap {
		overflow: visible;
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.section--statuts table,
	.section--statuses table {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.section--statuts thead,
	.section--statuses thead {
		display: none;
	}

	.section--statuts tbody,
	.section--statuses tbody {
		display: block;
	}

	.section--statuts tbody tr,
	.section--statuses tbody tr {
		display: block;
		margin: 0 0 10px;
		padding: 12px 14px;
		background: var(--paper);
		border: 1px solid var(--line);
		border-radius: 12px;
	}

	.section--statuts tbody tr:last-child,
	.section--statuses tbody tr:last-child {
		margin-bottom: 0;
	}

	.section--statuts tbody td,
	.section--statuses tbody td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.section--statuts tbody td:first-child,
	.section--statuses tbody td:first-child {
		margin-bottom: 4px;
		font-family: var(--font-head);
		font-size: 1rem;
		font-weight: 700;
		color: var(--ink);
	}

	.section--statuts tbody td:nth-child(2),
	.section--statuses tbody td:nth-child(2) {
		font-size: 0.88rem;
		color: var(--muted);
	}
}