/**
 * Maritrans Classic — styles du thème.
 *
 * Couleurs de la charte d'origine, grille Bootstrap, et une typographie
 * revue : la famille IBM Plex, dont la condensée sert aux titres, la sans
 * au texte courant et la monospace aux références et aux chiffres. La
 * police historique reste disponible depuis la personnalisation.
 */

/* ══════════════════════════════════════════════ polices
   IBM Plex Sans est une fonte variable : un seul fichier couvre 400 à 600.
   Les sous-ensembles « ext » portent les caractères latins étendus ; le
   navigateur ne les télécharge que s'il en rencontre.                    */

@font-face {
	font-family: "Plex Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/plex-sans.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plex Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/plex-sans-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plex Cond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plex-cond-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plex Cond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plex-cond-600-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plex Cond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plex-cond-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plex Cond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plex-cond-700-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/plex-mono-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/plex-mono-500-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La police historique du site, conservée : elle reste sélectionnable. */
@font-face {
	font-family: "HKGrotesk-Regular";
	src: url("../fonts/HKGrotesk-Regular.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "HKGrotesk-ExtraBold";
	src: url("../fonts/HKGrotesk-ExtraBold.otf") format("opentype");
	font-weight: 700;
	font-display: swap;
}

/* ══════════════════════════════════════════════ jetons */
:root {
	/* Charte : inchangée. */
	--bs-primary: #003a5d;
	--bs-primary-rgb: 0, 58, 93;
	--maritrans-dark: #03283f;
	--maritrans-yellow: #ffc107;
	--maritrans-green: #e9c53d;

	/* Neutres tirés vers le bleu de la maison plutôt que gris purs. */
	--mt-ink: #16212b;
	--mt-muted: #5a6b78;
	--mt-faint: #8b98a3;
	--mt-line: #dde4ea;
	--mt-ground: #f4f7f9;

	/* Rôles typographiques. */
	--mt-display: "Plex Cond", "HK Grotesk", "Helvetica Neue", Arial, sans-serif;
	--mt-body: "Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--mt-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--mt-display-weight: 700;
	--mt-display-track: -.012em;

	/* Rythme vertical. */
	--mt-section: 118px;
	--mt-gap: 34px;
}

/* Retour à la typographie d'origine, au choix, depuis la personnalisation. */
body.type-hk {
	--mt-display: "HKGrotesk-ExtraBold", "Helvetica Neue", Arial, sans-serif;
	--mt-body: "HKGrotesk-Regular", "Helvetica Neue", Arial, sans-serif;
	--mt-display-weight: 700;
	--mt-display-track: 0;
}

body {
	font-family: var(--mt-body);
	font-size: 1.0125rem;
	line-height: 1.68;
	color: var(--mt-ink);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-family: var(--mt-display);
	font-weight: var(--mt-display-weight);
	letter-spacing: var(--mt-display-track);
	color: var(--maritrans-dark);
	text-wrap: balance;
	line-height: 1.08;
}

/* Une condensée n'a d'intérêt qu'aux grandes tailles : en dessous, on
   revient à la sans, plus lisible dans les titres courts. */
h4, h5, h6, .h4, .h5, .h6,
.card-title, .service-card-title, .point-card h3 {
	font-family: var(--mt-body);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

h1, .h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
h2, .h2 { font-size: clamp(1.85rem, 3.8vw, 2.85rem); margin-bottom: .6em; }
h3, .h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }

p { max-width: 68ch; }
.text-center p, .page-cta p { margin-left: auto; margin-right: auto; }
.text-center p { max-width: 62ch; }

/* Étiquette : petite capitale monospacée, pour les surtitres et les
   références. Une référence de conteneur se relit mieux en chasse fixe. */
.mt-label,
.page-kicker,
.fact-k {
	font-family: var(--mt-mono);
	font-weight: 500;
	font-size: .72rem;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.mt-num { font-family: var(--mt-mono); font-variant-numeric: tabular-nums; }

/* Bootstrap est neutre : on lui redonne les couleurs de la maison. */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.btn {
	font-family: var(--mt-body);
	font-weight: 600;
	letter-spacing: .005em;
}
.btn-primary {
	--bs-btn-bg: #003a5d;
	--bs-btn-border-color: #003a5d;
	--bs-btn-hover-bg: #03283f;
	--bs-btn-hover-border-color: #03283f;
	--bs-btn-active-bg: #03283f;
	--bs-btn-active-border-color: #03283f;
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
}
.btn-warning {
	--bs-btn-bg: #ffc107;
	--bs-btn-border-color: #ffc107;
	--bs-btn-hover-bg: #edb100;
	--bs-btn-hover-border-color: #edb100;
	--bs-btn-color: #03283f;
	--bs-btn-hover-color: #03283f;
}
.text-yellow { color: var(--maritrans-yellow); }

/* ══════════════════════════════════════════════ rythme des sections */
section { padding: var(--mt-section) 0; }
.container { max-width: 1160px; }

/* Deux blocs blancs qui se suivent ont besoin d'un filet pour ne pas se
   confondre. La règle ne vise que ce cas précis — deux sections sans
   habillage — pour ne pas poser de trait sous un fond coloré, ni au-dessus
   d'une section dont le rembourrage haut est nul : le filet arriverait
   alors collé au contenu. */
section:not([class]) + section:not([class]) { border-top: 1px solid var(--mt-line); }

/* ══════════════════════════════════════════════ entête */
.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2000;
	background: var(--maritrans-yellow);
	color: var(--maritrans-dark);
	padding: 10px 18px;
	border-radius: 6px;
	font-weight: 700;
}
.topbar {
	font-family: var(--mt-body);
	font-size: .82rem;
	letter-spacing: .01em;
	padding-block: .55rem;
}
.topbar svg { vertical-align: -2px; opacity: .85; }
.topbar a { transition: color .2s; }
.topbar a:hover { color: var(--maritrans-yellow) !important; }
.topbar .sep { opacity: .35; }

.navbar {
	box-shadow: 0 1px 0 rgba(3, 40, 63, .07), 0 8px 24px rgba(3, 40, 63, .05);
	padding-block: 1.1rem;
	transition: padding .32s cubic-bezier(.16, .84, .28, 1), box-shadow .32s;
}
.navbar.is-stuck {
	padding-block: .55rem;
	box-shadow: 0 1px 0 rgba(3, 40, 63, .08), 0 12px 34px rgba(3, 40, 63, .1);
}
.custom-logo {
	max-height: 62px;
	width: auto;
	transition: max-height .32s cubic-bezier(.16, .84, .28, 1);
}
.navbar.is-stuck .custom-logo { max-height: 46px; }

/* Le menu respire : chaque rubrique est séparée, et un trait discret
   marque le survol et la page courante.

   Le sélecteur reprend « .navbar-expand-lg » parce que Bootstrap fixe lui
   aussi le rembourrage horizontal des liens à ce niveau : sans cela, sa
   règle plus spécifique écrase la nôtre et le menu reste serré. */
.navbar-nav { column-gap: .5rem; }
.navbar-expand-lg .navbar-nav .nav-link,
.navbar-nav .nav-link {
	position: relative;
	font-family: var(--mt-body);
	font-weight: 600;
	font-size: .965rem;
	letter-spacing: .005em;
	color: var(--maritrans-dark);
	padding: .72rem 1.05rem;
	transition: color .22s;
}
.navbar-expand-lg .navbar-nav .nav-link::after,
.navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: 1.05rem;
	right: 1.05rem;
	bottom: .34rem;
	height: 2px;
	background: var(--maritrans-yellow);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .28s cubic-bezier(.16, .84, .28, 1);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current_page_item > .nav-link,
.navbar-nav .active > .nav-link { color: var(--bs-primary); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus-visible::after,
.navbar-nav .current-menu-item > .nav-link::after,
.navbar-nav .current_page_item > .nav-link::after { transform: scaleX(1); }

.navbar .btn { padding: .62rem 1.5rem; }
.dropdown-menu {
	border: 0;
	box-shadow: 0 14px 40px rgba(3, 40, 63, .14);
	border-radius: 8px;
	padding: .5rem;
	margin-top: .5rem;
}
.dropdown-item {
	border-radius: 5px;
	padding: .6rem .9rem;
	font-size: .94rem;
	font-weight: 500;
}
.dropdown-item:hover { background: var(--mt-ground); color: var(--bs-primary); }
.dropdown-item:active { background: var(--bs-primary); }

/* ── raccord avec la section de suivi ─────────────────────────────────
   La section de suivi de l'extension est habillée par le thème pour
   qu'elle prolonge le socle du hero au lieu de rompre avec lui.         */

.tracking-band { background: linear-gradient(180deg, #012238 0%, #03283f 100%); }

/* ══════════════════════════════════════════════ secteurs d'activité
   La bande « Notre métier » a été repliée ici : son titre coiffe désormais
   les huit icônes au lieu d'occuper une section à lui seul.             */
#business-areas .section-heading { max-width: 22ch; margin-inline: auto; margin-bottom: 52px; }
#business-areas .card {
	border: 1px solid var(--mt-line);
	border-radius: 10px;
	background: #fff;
	transition: transform .34s cubic-bezier(.16, .84, .28, 1), box-shadow .34s, border-color .34s;
}
#business-areas .card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(3, 40, 63, .13);
	border-color: transparent;
}
#business-areas .card-title { color: var(--maritrans-dark); font-size: 1.02rem; }
#business-areas .card-text { color: var(--mt-muted); font-size: .9rem; max-width: none; }
#business-areas svg { height: 52px; width: auto; }

/* ══════════════════════════════════════════════ nos services */
.bg-blue-gradient { background: linear-gradient(0deg, #1e5384 0%, #002648 100%); }
/* Une rangée « g-5 » porte une marge négative de 24 px, alors qu'un
   conteneur n'a que 12 px de rembourrage : sans cet accord, la page
   déborde de 12 px de chaque côté. */
.bg-blue-gradient > .container-fluid { --bs-gutter-x: 3rem; }
.container:has(> .row.g-5) { padding-left: 24px; padding-right: 24px; }
/* Même piège dans les pages internes : « .prose » n'est pas un conteneur
   Bootstrap et n'a donc pas ce rembourrage. Sous 992 px les colonnes sont
   de toute façon empilées, la gouttière horizontale n'y sert à rien — on
   la ramène à zéro plutôt que de compenser une marge négative. */
@media (max-width: 991.98px) {
	.prose > .row.g-5 { --bs-gutter-x: 0; }
}
.bg-blue-gradient .row + .row { margin-top: 84px; }
.bg-blue-gradient .row:last-child { padding-bottom: var(--mt-section); }
.bg-blue-gradient h2, .bg-blue-gradient h3 { color: #fff; }
.bg-blue-gradient h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.bg-blue-gradient p { color: rgba(255, 255, 255, .78); }

/* Le visuel d'un service : une image, et c'est tout.

   Elle déborde du côté de l'écran, comme avant — mais sans coin arrondi :
   un angle adouci sur un bord qui sort du cadre ne ressemble à rien. Le
   côté qui touche le texte, lui, reste franc. */
.service-shot {
	display: block;
	width: 100%;
	max-height: 470px;
	object-fit: cover;
}
.container-margin-right { padding-right: 12px; }
.text-service { list-style: none; }
.text-service .list-group-item {
	background: transparent;
	border: 0;
	border-left: 2px solid rgba(255, 193, 7, .6);
	color: inherit;
	padding: .4rem 0 .4rem 1.15rem;
	margin-bottom: .9rem;
	line-height: 1.66;
	max-width: 58ch;
}
section:not(.bg-blue-gradient) .text-service .list-group-item { color: var(--mt-muted); }

/* ══════════════════════════════════════════════ blocs suivants */
.bg-light { background: var(--mt-ground) !important; }
.bg-light img, .pb-4 img, .pt-4 img { border-radius: 10px; }

/* Surtitre de section : une étiquette et un trait, pour situer le bloc. */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--bs-primary);
	margin-bottom: 18px;
}
.section-label::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--maritrans-yellow);
	flex: none;
}
.bg-blue-gradient .section-label { color: var(--maritrans-yellow); }
.text-center .section-label { justify-content: center; }

.internal-page-banner {
	background: linear-gradient(0deg, #1e5384 0%, #002648 100%);
	padding: 84px 0;
}
.internal-page-banner h2 { color: #fff; }
.internal-page-banner p { color: rgba(255, 255, 255, .74); }

/* ══════════════════════════════════════════════ pied de page */
.site-footer { padding-block: 78px !important; }
.site-footer h3 {
	font-family: var(--mt-mono);
	font-size: .74rem;
	letter-spacing: .17em;
	color: rgba(255, 255, 255, .6) !important;
}
.site-footer .footer-logo { filter: brightness(0) invert(1); max-width: 220px; height: auto; }
.site-footer p { color: rgba(255, 255, 255, .68); }
.footer-list li { padding: .38rem 0; }
.footer-list a { color: rgba(255, 255, 255, .85); text-decoration: none; transition: color .2s; }
.footer-list a:hover { color: var(--maritrans-yellow); }

/* ══════════════════════════════════════════════════════════════════════
   Mouvement.

   Apparition des blocs au défilement, parallaxe des visuels, inclinaison
   du hero. Tout s'efface si le visiteur a demandé moins d'animation.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		transition: opacity .8s cubic-bezier(.16, .84, .28, 1), transform .8s cubic-bezier(.16, .84, .28, 1);
	}
	.reveal.is-in { opacity: 1; transform: none; }
	.reveal[data-delay="1"] { transition-delay: .09s; }
	.reveal[data-delay="2"] { transition-delay: .18s; }
	.reveal[data-delay="3"] { transition-delay: .27s; }

	/* Le visuel se découvre par un balayage venant du côté du texte. */
	.wipe { clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 1.05s cubic-bezier(.16, .84, .28, 1), opacity .7s ease-out; }
	.wipe.is-in { clip-path: inset(0 0 0 0); opacity: 1; }
	.wipe-right { clip-path: inset(0 0 0 100%); }
	.wipe-right.is-in { clip-path: inset(0 0 0 0); }
}
.no-motion .reveal, .no-motion .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
	.reveal, .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Animations liées au défilement : aucune boucle JavaScript, donc aucun
   risque de saccade. Les navigateurs qui les ignorent affichent tout à
   plat, ce qui reste une mise en page correcte. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.parallax-soft {
			animation: soft-lift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
		@keyframes soft-lift {
			from { transform: translate3d(0, 30px, 0); }
			to   { transform: translate3d(0, -30px, 0); }
		}

		/* Le bandeau des pages internes s'éloigne en défilant. */
		.page-hero {
			animation: hero-recede linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 70vh;
		}
		@keyframes hero-recede {
			from { background-position-y: 42%; }
			to   { background-position-y: 58%; }
		}
	}
}

/* Les grandes sections colorées ne sont peintes qu'à l'approche de l'écran. */
.bg-blue-gradient, .bg-light, .internal-page-banner {
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}

/* ══════════════════════════════════════════════════════════════════════
   Pages internes.
   ══════════════════════════════════════════════════════════════════════ */

.page-hero {
	background-color: #03283f;
	background-size: cover;
	background-position: center;
	padding: 152px 0 118px;
	color: #fff;
	isolation: isolate;
	position: relative;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(96deg, rgba(3, 40, 63, .94) 0%, rgba(3, 40, 63, .76) 52%, rgba(3, 40, 63, .42) 100%);
}
.page-kicker { margin: 0 0 16px; color: var(--maritrans-yellow); }
.page-hero .page-title {
	color: #fff;
	font-size: clamp(2rem, 4.8vw, 3.5rem);
	line-height: 1.04;
	max-width: 18ch;
}
.page-promise { color: rgba(255, 255, 255, .82); font-size: 1.1rem; max-width: 60ch; }

/* ── La bannière d'accueil ──────────────────────────────────────────────
   Le même bandeau que les pages internes, avec trois différences : elle
   monte un peu plus haut, son titre porte une seconde ligne en ambre, et
   elle sert son visuel léger sous 768 px. Rien d'autre — c'est le même
   système, pas un second à tenir. */
.page-hero-home { padding: 190px 0 150px; }

/* Le voile est un cran plus dense que sur les pages internes : celles-ci
   portent une image choisie pour leur texte, la bannière d'accueil en
   traverse trois, dont une carlingue d'avion très claire. Le titre doit
   tenir sur les trois, pas sur la plus sombre. */
.page-hero-home::before {
	background: linear-gradient(96deg, rgba(3, 40, 63, .96) 0%, rgba(3, 40, 63, .82) 52%, rgba(3, 40, 63, .55) 100%);
}

/* ── Les trois visuels, en fondu ────────────────────────────────────────
   Trois images empilées, une seule règle d'opacité, aucun script. Elles
   passent derrière le voile — « isolation: isolate » sur la bannière tient
   les couches négatives à l'intérieur, sinon elles fileraient sous la
   page. Un lent rapprochement les accompagne : une image qui se fond dans
   une autre sans bouger d'un pixel a l'air d'un défaut d'affichage. */
.hero-slides {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}
.hero-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
/* Sans animation — premier rendu, ou mouvement refusé — c'est la première
   qui reste, et la bannière est simplement fixe. */
.hero-slides img:first-child { opacity: 1; }
.page-hero-home .page-title { max-width: 14ch; margin-bottom: 34px; }
.page-hero-home .page-title em { display: block; font-style: normal; color: var(--maritrans-yellow); }

/* Une seule action, posée sous le titre. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; max-width: none; }
.btn-hero { padding: .82rem 2.05rem; font-size: 1.02rem; }

@media (prefers-reduced-motion: no-preference) {
	/* Dix-huit secondes de cycle, six par visuel : assez lent pour qu'on ne
	   le regarde pas, assez présent pour que la page ne soit pas figée. */
	.hero-slides img {
		animation: hero-fade 18s linear infinite, hero-zoom 18s ease-in-out infinite;
	}
	.hero-slides img:nth-child(2) { animation-delay: 6s, 6s; }
	.hero-slides img:nth-child(3) { animation-delay: 12s, 12s; }
	@keyframes hero-fade {
		0%, 28%  { opacity: 1; }
		34%, 94% { opacity: 0; }
		100%     { opacity: 1; }
	}
	@keyframes hero-zoom {
		0%   { transform: scale(1.02); }
		33%  { transform: scale(1.08); }
		100% { transform: scale(1.02); }
	}

	/* Le message monte à l'ouverture, dans l'ordre où on le lit. */
	.page-hero-home .page-kicker,
	.page-hero-home .page-title,
	.page-hero-home .hero-actions {
		animation: hero-in .85s cubic-bezier(.16, .84, .28, 1) both;
	}
	.page-hero-home .page-title   { animation-delay: .1s; }
	.page-hero-home .hero-actions { animation-delay: .2s; }
	@keyframes hero-in {
		from { opacity: 0; transform: translate3d(0, 20px, 0); }
	}
}

.page-body { padding: 100px 0 112px; }
.prose { max-width: 860px; }
.prose img { border-radius: 10px; height: auto; }
.prose h2 { margin-top: 1.6em; }
.lead-intro { font-size: 1.16rem; line-height: 1.74; color: #3b4a56; max-width: 66ch; }

/* points clés */
.point-card {
	background: var(--mt-ground);
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 30px 28px 28px;
	position: relative;
	height: 100%;
	transition: transform .32s cubic-bezier(.16, .84, .28, 1), box-shadow .32s, border-color .32s;
}
.point-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(3, 40, 63, .11); border-color: var(--mt-line); }
.point-rule { display: block; width: 34px; height: 3px; background: var(--maritrans-yellow); margin-bottom: 18px; border-radius: 2px; }
.point-card h3 { color: var(--maritrans-dark); font-size: 1.05rem; }
.point-card p { color: var(--mt-muted); font-size: .95rem; margin: 0; max-width: none; }

/* chiffres et repères */
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mt-line); border: 1px solid var(--mt-line); border-radius: 10px; overflow: hidden; }
.fact { background: #fff; padding: 22px 24px; }
.fact-k { display: block; color: var(--mt-faint); margin-bottom: 8px; }
.fact-v { display: block; font-family: var(--mt-body); font-weight: 600; color: var(--maritrans-dark); font-size: 1.05rem; }

/* questions fréquentes */
.faq-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--mt-line); background: transparent; }
.faq-accordion .accordion-button {
	background: transparent;
	font-family: var(--mt-body);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--maritrans-dark);
	padding: 22px 0;
	box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--bs-primary); background: transparent; }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-body { padding: 0 0 22px; color: var(--mt-muted); }

/* cartes de service */
.service-card {
	display: block;
	background: #fff;
	border: 1px solid var(--mt-line);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	transition: transform .34s cubic-bezier(.16, .84, .28, 1), box-shadow .34s, border-color .34s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(3, 40, 63, .15); border-color: transparent; }
.service-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mt-ground); }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.16, .84, .28, 1); }
.service-card:hover .service-card-media img { transform: scale(1.07); }
.service-card-body { display: block; padding: 24px 24px 26px; }
.service-card-title { display: block; font-family: var(--mt-body); font-weight: 600; font-size: 1.08rem; color: var(--maritrans-dark); margin-bottom: 9px; }
.service-card-text { display: block; color: var(--mt-muted); font-size: .92rem; margin-bottom: 16px; }
.service-card-more { display: block; font-family: var(--mt-mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bs-primary); }

/* appel à l'action de fin de page */
.page-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	margin-top: 78px;
	padding: 40px 42px;
	border-radius: 12px;
	background: linear-gradient(0deg, #1e5384 0%, #002648 100%);
	color: #fff;
}
.page-cta h2 { color: #fff; margin-bottom: .3em; }
.page-cta p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 52ch; }
.page-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.page-cta .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   Formulaire de contact.
   ══════════════════════════════════════════════════════════════════════ */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.contact-aside {
	background: var(--mt-ground);
	border: 1px solid var(--mt-line);
	border-radius: 12px;
	padding: 32px 30px;
}
.contact-aside h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.contact-aside dl { margin: 0; }
.contact-aside dt { font-family: var(--mt-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mt-faint); margin-top: 20px; }
.contact-aside dt:first-of-type { margin-top: 0; }
.contact-aside dd { margin: 5px 0 0; font-weight: 500; }
.contact-aside a { color: var(--bs-primary); text-decoration: none; }
.contact-aside a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
	.contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ══════════════════════════════════════════════ mobile */
@media (max-width: 1199.98px) {
	:root { --mt-section: 96px; }
}
@media (max-width: 991.98px) {
	:root { --mt-section: 88px; }
	/* Étirer l'unique bouton sur toute la rangée en ferait une barre : il
	   garde sa largeur de contenu jusqu'au téléphone, où le plein cadre
	   redevient le bon geste. */
	/* La phrase de la légende s'enroulerait sur trois lignes et viendrait
	   recouvrir les boutons. On garde le rang, le nom et le lien ; la
	   phrase, elle, se retrouve intacte dans la section « Nos services ». */
	.bg-blue-gradient .row + .row { margin-top: 52px; }
	.bg-blue-gradient .row:last-child { padding-bottom: var(--mt-section); }
	.container-margin-right { padding: 0 12px; }
	.navbar { padding-block: .7rem; }
	.navbar-collapse { padding-top: .5rem; }
	.navbar-nav { column-gap: 0; }
	.navbar-expand-lg .navbar-nav .nav-link,
	.navbar-nav .nav-link { padding: .85rem .25rem; }
	.navbar-expand-lg .navbar-nav .nav-link::after,
	.navbar-nav .nav-link::after { left: .25rem; right: auto; width: 22px; }
	.navbar-collapse .btn { margin-top: 1rem; width: 100%; }
	.service-shot { max-height: 300px; }
	.page-hero { padding: 96px 0 74px; }
	.page-hero-home { padding: 116px 0 92px; }
	.page-body { padding: 62px 0 70px; }
	.fact-grid { grid-template-columns: 1fr; }
	.page-cta { padding: 28px 24px; margin-top: 52px; }
	.page-cta-actions .btn { flex: 1 1 auto; }
	.site-footer { padding-block: 56px !important; }
}
@media (max-width: 575.98px) {
	:root { --mt-section: 80px; }
}

/* L'exception qui neutralisait la perspective sous 860 px n'a plus d'objet :
   il n'y a plus de perspective à neutraliser. Le recul à plat tient à toutes
   les largeurs sans rien déborder. */

/* ══════════════════════════════════════════════════════════════════════
   Parti pris mobile : sobre.

   Sur un téléphone, la page ne cherche plus à tout dire — elle montre. La
   bannière porte un titre et deux actions, un service montre un visuel et
   un nom, les sections d'intention tiennent en un titre. Ce qui explique
   est sur la page du service, à un lien de là.

   Ce qui reste gagne en respiration : les sections sont plus espacées ici
   qu'elles ne l'étaient, pas moins. Retirer du contenu sans rendre l'air
   qu'il occupait ne ferait que rapprocher ce qui subsiste.

   « hide-sm » est posé dans le gabarit, pas deviné par un sélecteur : on
   voit dans le HTML ce qui tombe, et on le rétablit en ôtant la classe.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
	.hide-sm { display: none !important; }

	/* ── La bannière ─────────────────────────────────────────────────────
	   Un titre, deux actions, une image. Le carrousel n'est plus qu'un
	   fond : sans légende, la carte n'a plus de bande à lui réserver. */
	/* Le voile bas de la carte protégeait la légende. Sans elle, il ne fait
	   qu'assombrir un visuel qu'on a justement gardé pour qu'il se voie. */
	/* Sur toute la largeur, la lueur n'apporte rien et le rembourrage
	   horizontal non plus : c'est la hauteur qui fait la cible. */
	.btn-hero { padding-block: .95rem; box-shadow: none; }

	/* ── Les secteurs ────────────────────────────────────────────────────
	   Le nom suffit ; la phrase pesait 218 px par carte, sur huit cartes. */
	#business-areas .section-heading { font-size: clamp(1.45rem, 6vw, 1.9rem); margin-bottom: 30px; }
	#business-areas .section-label { margin-bottom: 14px; }
	#business-areas .card-text { display: none; }
	#business-areas .card-body { padding: 26px 12px !important; }
	#business-areas .card-title { font-size: .92rem; padding-top: .7rem !important; }
	#business-areas svg { height: 40px; }

	/* ── Les services ────────────────────────────────────────────────────
	   Visuel, nom, phrase, lien. */
	.service-shot { max-height: 190px; }
	.bg-blue-gradient h3 { font-size: clamp(1.3rem, 5.4vw, 1.6rem); margin-bottom: 20px; }
	.bg-blue-gradient .row + .row { margin-top: 76px; }

	/* ── Le bandeau d'appel et le pied de page ───────────────────────── */
	.internal-page-banner { padding: 64px 0; }
	.internal-page-banner h2 { font-size: clamp(1.4rem, 5.8vw, 1.8rem); }
	.site-footer { padding-block: 52px !important; }
	.site-footer .row { --bs-gutter-y: 2rem; }

	/* ── Et l'air demandé : entre les rangées, et sous les titres. ───── */
	.row.g-5 { --bs-gutter-y: 2.6rem; }
	.section-label { margin-bottom: 16px; }
	h2, .h2 { margin-bottom: .8em; }
}

/* Cibles tactiles : rien en dessous de 44 px sur écran étroit. */
@media (max-width: 991.98px) {
	.btn, .navbar-nav .nav-link, .dropdown-item, .footer-list a, .topbar a, .accordion-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.btn { justify-content: center; }
	.accordion-button { display: flex; }
	.navbar-toggler { min-width: 44px; min-height: 44px; }
}

/* Écrans tactiles : le survol reste « collé » après un appui. */
@media (hover: none) {
	.point-card:hover, .service-card:hover { transform: none; box-shadow: none; }
	.service-card:hover .service-card-media img { transform: none; }
	#business-areas .card:hover { transform: none; box-shadow: none; }
}

/* ══════════════════════════════════════════════ sauts d'ancre
   L'entête est collante : sans cette réserve, « Demande de devis » ferait
   atterrir le titre du formulaire derrière le menu. Le saut se fait en
   douceur, sauf pour qui a demandé moins d'animation.                   */

#contact-rapide, #devis, #suivi, #ecrire, #contenu { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (max-width: 991.98px) {
	#contact-rapide, #devis, #suivi, #ecrire, #contenu { scroll-margin-top: 76px; }
}

/* Le formulaire visé par l'ancre se signale une seconde : sur une page
   longue, on doit voir où l'on vient d'atterrir. */
@media (prefers-reduced-motion: no-preference) {
	.quote-card:has(:target),
	#contact-rapide:target .quote-card {
		animation: quote-ping 1.5s cubic-bezier(.16, .84, .28, 1) both;
	}
	@keyframes quote-ping {
		0%   { box-shadow: 0 2px 4px rgba(3, 40, 63, .04), 0 26px 62px rgba(3, 40, 63, .11), 0 0 0 0 rgba(255, 193, 7, .5); }
		35%  { box-shadow: 0 2px 4px rgba(3, 40, 63, .04), 0 26px 62px rgba(3, 40, 63, .11), 0 0 0 8px rgba(255, 193, 7, .28); }
		100% { box-shadow: 0 2px 4px rgba(3, 40, 63, .04), 0 26px 62px rgba(3, 40, 63, .11), 0 0 0 0 rgba(255, 193, 7, 0); }
	}
}

/* Le focus doit toujours se voir. */
:focus-visible {
	outline: 3px solid var(--maritrans-yellow);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   Version 1.2 — allègement, formulaire de devis, mouvement.

   Trois choses ici : ce qui accompagne les sections nouvelles, ce qui
   pousse le mouvement plus loin, et ce que la version mobile retire en
   plus. Le tout est posé après le reste pour ne rien avoir à surcharger
   d'un « !important » qu'on regretterait ensuite.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════ apparitions enrichies */

@media (prefers-reduced-motion: no-preference) {
	/* Une grille entière entre en cascade : le rang vient du gabarit, pas
	   d'un compteur JavaScript qui se tromperait au redimensionnement. */
	.stagger .reveal { transition-delay: calc(var(--i, 0) * 85ms); }

	/* Le surtitre trace son filet avant que le titre n'arrive. Seuls les
	   surtitres pris dans un bloc à révéler sont concernés : ailleurs, le
	   filet est simplement là, comme il l'a toujours été. */
	.reveal .section-label::before { transform-origin: 0 50%; transition: transform .6s cubic-bezier(.16, .84, .28, 1) .12s; }
	.reveal:not(.is-in) .section-label::before { transform: scaleX(0); }

}

/* ══════════════════════════════════════════════ secteurs : les icônes */

#business-areas svg { transition: transform .4s cubic-bezier(.16, .84, .28, 1); }
#business-areas .card:hover svg { transform: translateY(-3px) scale(1.06); }
/* Un liseré ambre se pose sur la carte survolée, plutôt qu'une ombre seule. */
#business-areas .card { position: relative; overflow: hidden; }
#business-areas .card::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--maritrans-yellow);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .42s cubic-bezier(.16, .84, .28, 1);
}
#business-areas .card:hover::before { transform: scaleX(1); }

/* ══════════════════════════════════════════════ formalités
   Une section pour quatre : trois repères numérotés, et le détail sur les
   pages dédiées.                                                        */

.formality-grid { display: grid; gap: 14px; }
.formality {
	position: relative;
	background: #fff;
	border: 1px solid var(--mt-line);
	border-radius: 12px;
	padding: 22px 26px 20px 68px;
	/* L'opacité est de la partie : sans elle, la règle écraserait celle de
	   « .reveal » — déclarée plus haut — et le bloc apparaîtrait d'un coup. */
	transition:
		opacity .8s cubic-bezier(.16, .84, .28, 1),
		transform .38s cubic-bezier(.16, .84, .28, 1),
		box-shadow .38s,
		border-color .38s;
}
.formality:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(3, 40, 63, .12);
	border-color: transparent;
	/* Le rang de la carte décale son apparition, pas sa réponse au survol. */
	transition-delay: 0s;
}
.formality-k {
	position: absolute;
	left: 26px;
	top: 24px;
	font-family: var(--mt-mono);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .08em;
	color: var(--maritrans-yellow);
}
.formality h3 { font-size: 1.05rem; color: var(--maritrans-dark); margin: 0 0 6px; }
.formality p { color: var(--mt-muted); font-size: .93rem; margin: 0; max-width: none; }

/* ══════════════════════════════════════════════ devis express
   Le point d'arrivée de la page : un formulaire court sur une carte
   blanche, posée sur un fond clair qui la détache sans crier.           */

.quote-band { background: linear-gradient(180deg, #e8f5fb 0%, #dcedf7 100%) !important; }
.quote-band h2 { max-width: 16ch; }
.quote-band p { color: #3d5666; }
.quote-card {
	background: #fff;
	border: 1px solid rgba(3, 40, 63, .07);
	border-radius: 16px;
	padding: 30px 32px 28px;
	box-shadow: 0 2px 4px rgba(3, 40, 63, .04), 0 26px 62px rgba(3, 40, 63, .11);
}
.quote-fallback { margin: 0; text-align: center; }

/* Les jetons de l'extension, accordés à la carte : le formulaire doit
   avoir l'air d'appartenir au thème, pas d'y être posé. */
.quote-card .mts-contact { --mts-radius: 9px; }

/* ══════════════════════════════════════════════ écrans tactiles */

@media (hover: none) {
	.formality:hover { transform: none; box-shadow: none; }
	#business-areas .card:hover svg { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile — la suite de l'allègement.

   La page d'accueil a perdu quatre sections pour tout le monde ; sur
   téléphone, elle en perd le fil défilant et le bandeau d'appel du pied de
   page en plus. Ce qui reste s'aère : le formulaire de devis a besoin
   d'être confortable, c'est là que la visite se conclut.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
	.formality { padding: 20px 22px 18px 60px; }
	.formality-k { left: 22px; top: 22px; }
	.quote-card { padding: 26px 24px 24px; }
}

@media (max-width: 767.98px) {
	/* ── La marge d'écran ────────────────────────────────────────────────
	   Bootstrap laisse douze pixels de chaque bord. Sur un téléphone, le
	   texte y touche presque le verre : une ligne qui commence au ras du
	   cadre se lit mal et donne l'impression que la page déborde. On passe
	   à vingt.

	   Le réglage se fait par la gouttière du conteneur, pas par un
	   rembourrage écrit à la main : les rangées Bootstrap redéclarent la
	   leur, elles ne sont donc pas entraînées, et leurs marges négatives
	   restent compensées comme avant. */
	.container, .container-fluid { --bs-gutter-x: 2.5rem; }

	/* Le bandeau : sans le fil défilant en dessous, il se termine plus tôt. */

	/* Entre deux services, 76 px de bleu vide : c'était l'air d'une page qui
	   portait encore ses deux arguments par service. Ils sont partis, la
	   respiration se resserre d'autant. */
	.bg-blue-gradient .row + .row { margin-top: 56px; }

	/* Les repères de formalités : la grille redevient une colonne, et le
	   numéro passe au-dessus du titre plutôt qu'à sa gauche — 68 px de
	   rembourrage pour deux chiffres, c'était de la place perdue. */
	.formality { padding: 20px 20px 18px; }
	.formality-k { position: static; display: block; margin-bottom: 8px; }
	.formality h3 { font-size: 1rem; }

	/* Le devis : la carte prend toute la largeur utile et perd son ombre
	   portée, qui ne se voit pas sur un écran de six pouces. */
	.quote-band h2 { max-width: none; }
	.quote-card {
		padding: 22px 18px 20px;
		border-radius: 14px;
		box-shadow: 0 10px 30px rgba(3, 40, 63, .09);
	}

	/* Les titres découpés : sur une mesure étroite, un décalage par mot
	   devient un défilé. On resserre la cadence. */

	/* Le halo du bandeau tourne en continu : sur un téléphone, c'est de la
	   batterie dépensée pour un effet qu'on ne voit pas sur 380 px. */
}

@media (max-width: 575.98px) {
	.quote-card { padding: 20px 16px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Version 1.2.2 — la phrase des services, et le courriel dans la barre.
   ══════════════════════════════════════════════════════════════════════ */

/* ── La phrase de chaque service ────────────────────────────────────────
   Entre le nom du service et le lien vers sa fiche. C'est la promesse
   écrite pour le bandeau de cette fiche : la même phrase, au même endroit
   du parcours, avant et après le clic. Elle reste sur téléphone, où le
   bloc n'avait plus qu'un nom et un bouton — les deux arguments détaillés,
   eux, continuent de tomber sous 768 px. */
.service-pitch {
	color: rgba(255, 255, 255, .82);
	font-size: 1rem;
	line-height: 1.62;
	max-width: 46ch;
	margin: 0 0 22px;
}

/* ── Le courriel dans la barre du haut ──────────────────────────────────
   Il n'apparaissait qu'à partir de 576 px : sur un téléphone, la barre ne
   portait que le numéro. Elle porte maintenant les deux, ce qui demande de
   la place — la fonte se resserre plutôt que la ligne ne se coupe, parce
   qu'un rang qui se replie double la hauteur de la barre pour deux mots. */
.topbar-contact { min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 0; }
.topbar-contact a { word-break: break-word; }

@media (max-width: 767.98px) {
	/* Une phrase de quatre lignes n'est plus une petite phrase : sur la
	   mesure étroite du téléphone, elle se resserre d'un cran. */
	.service-pitch { font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }

	.topbar { font-size: .78rem; }
	.topbar-contact { gap: .35rem; }
	.topbar .sep { padding-inline: .35rem !important; }
}
/* ── Le courriel, partout où il est écrit ───────────────────────────────
   « contact@maritrans.tn » est un seul mot de vingt caractères : il ne se
   coupe nulle part et pousse sa colonne. Dans le pied de page, une demi-
   colonne de 120 px ne peut pas le contenir — il débordait de dix pixels
   sous 340 px de large. Les deux colonnes se dépilent là où elles ne
   suffisent plus, et la coupure de dernier recours reste autorisée. */
.footer-list a, .topbar-contact a { overflow-wrap: anywhere; }

@media (max-width: 359.98px) {
	.site-footer .col-6 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 575.98px) {
	.topbar { font-size: .72rem; padding-block: .35rem; }
	/* Les deux pictogrammes valent 48 px pour une information que le texte
	   donne déjà. Sur la largeur qui reste, c'est le texte qui compte. */
	.topbar svg { display: none; }
	.topbar-contact { gap: .2rem; }
}