/* =========================================================
   BEWIND SHIPPING — Page Accueil
   Maquette 1920px · Police : Outfit
   ========================================================= */

:root {
  --navy: #1e3658;
  --blue: #0076af;
  --blue-btn: #2e74ab;
  --grey: #a5a9ad;
  --grey-label: #aeaeae;
  --track: #dcdfe2;
  --white: #ffffff;
  --radius-card: 24px;
  --container: 1364px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
sub { font-size: 0.6em; }
p { font-size: 17px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
@media (min-width: 1445px) {
  .container { padding: 0; }
}

/* ---------- Titres ---------- */
.h2 {
  font-size: 47px;
  line-height: 1.09;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--navy);
}
.h2--white { color: var(--white); }
.thin { font-weight: 300; }
.h2--tall { line-height: 1.18; }

/* ---------- Tags (pills de section) ---------- */
.tag {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid;
  margin-bottom: 22px;
}
.tag--navy { color: var(--navy); border-color: rgba(30, 54, 88, 0.55); }
.tag--white { color: var(--white); border-color: rgba(255, 255, 255, 0.75); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 4px 10px 4px 28px;
  min-height: 43px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn__arrow { width: 35px; height: 35px; }
.btn--blue { background: var(--blue-btn); color: var(--white); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--white {
  background: var(--white);
  color: var(--navy);
  padding: 4px 26px;
}
.link-underline {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.link-underline--navy { color: var(--navy); }

/* ---------- Formes décoratives latérales (équipe, partenaires) ---------- */
.page-shapes { pointer-events: none; }
.page-shapes img {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.page-shapes__right { right: 0; top: 860px; width: 276px; }
.page-shapes__left { left: 0; top: 1900px; width: 128px; }

/* ---------- Apparitions douces (tout le site) ---------- */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* Flèche ronde bleue en haut à droite des cartes */
.card-arrow {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 48px;
  height: 48px;
  z-index: 2;
  transition: transform 0.2s ease;
}
.card-arrow:hover { transform: scale(1.08); }
.card-arrow img { width: 100%; height: 100%; }

/* =========================================================
   HERO + HEADER
   ========================================================= */
.hero {
  position: relative;
  /* La hauteur suit le contenu. Une hauteur figée combinée à overflow:hidden
     tronquait l'accroche dès que l'écran manquait de hauteur ; le minimum
     conserve l'ampleur de la bannière quand le texte est court. */
  min-height: min(920px, 82vh);
  padding-bottom: clamp(90px, 9vh, 150px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("../img/bg-hero-100.png") center / cover no-repeat;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
}
.hero__content, .header { position: relative; z-index: 2; }
/* Voile détourée, calée à droite de l'accroche dont elle reprend exactement la
   hauteur — titre et boutons exclus. Masquée sous 1280px, où le texte prend toute
   la largeur. */
.hero__voile {
  position: absolute;
  right: 0;
  /* Un peu plus haute que le texte, et centrée dessus : le débord se répartit
     également en haut et en bas. */
  top: 50%;
  transform: translateY(-50%);
  height: 118%;
  /* La bande occupe exactement l'espace laissé libre par l'accroche (880px, plus une
     gouttière de 40px). La voile s'y cale à gauche : elle reste au plus près du texte
     au lieu de flotter vers le bord, et survit donc aux écrans étroits. */
  width: calc(100% - 920px);
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

/* Header (absolu dans le hero, fixe au scroll) */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 49px 0 18px;
}
.header.is-stuck {
  position: fixed;
  padding: 14px 0;
  background: rgba(30, 54, 88, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(30, 54, 88, 0.25);
  animation: header-in 0.3s ease;
}
@keyframes header-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .header.is-stuck { animation: none; }
}
.header__inner {
  display: flex;
  align-items: center;
}
.header__logo img { width: 188px; height: auto; }
.nav {
  display: flex;
  gap: 26px;
  margin-left: 54px;
  font-size: 17px;
}
.nav a {
  color: var(--white);
  transition: opacity 0.2s;
}
.nav a:hover { opacity: 0.75; }
.header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-switch {
  display: flex;
  align-items: center;
  height: 43px;
  background: var(--navy);
  border-radius: 12px;
  padding: 5px;
}
.lang-switch__item {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  padding: 4px 8px;
  border-radius: 8px;
}
.lang-switch__item--active {
  background: var(--white);
  color: var(--navy);
}

/* ---------- Burger + menu mobile ---------- */
.burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 43px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(30, 54, 88, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 140px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__link {
  font-size: 27px;
  font-weight: 600;
  color: var(--white);
  padding: 10px 0;
}
.mobile-menu__link.is-active {
  text-decoration: underline;
  text-underline-offset: 8px;
}
.mobile-menu .header__right {
  display: flex;
  margin: 28px 0 0;
  align-items: center;
  gap: 14px;
}
body.menu-open { overflow: hidden; }
@media (max-width: 1280px) {
  .burger { display: flex; }
  .header .header__right { display: none; }
}

/* Sous 940px l'accroche a besoin de toute la largeur : la voile s'efface. Elle reste
   donc visible sur tablette en paysage, où elle disparaissait auparavant dès 1280px. */
@media (max-width: 940px) {
  .hero__voile { display: none; }
}

/* Contenu hero (header absolu → compensation) */
.hero__content { padding-top: 306px; }
.hero__title {
  font-size: 68px;
  line-height: 1.025;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--white);
}
.hero__title .thin { font-weight: 300; }
/* Conteneur de l'accroche : il porte la marge haute, sa hauteur vaut donc exactement
   celle du texte. C'est la référence de hauteur de la voile. */
.hero__accroche { position: relative; margin-top: 52px; }
.hero__text {
  font-size: 17px;
  line-height: 1.35;
  color: var(--white);
  /* L'accroche est volontairement plus étroite que le titre : environ 80 % de la
     longueur rendue du H1 à 68px (~1120px). Le palier 56px plus bas a sa valeur. */
  max-width: 880px;
}
/* Champ riche : le client peut y saisir plusieurs paragraphes. */
.hero__text p { font-size: inherit; line-height: inherit; color: inherit; }
.hero__text p + p { margin-top: 14px; }
.hero__actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.hero__certs {
  margin-top: 118px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.cert-pill {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 8px 14px;
}

/* Courbe bas de hero + flèche */
.hero__curve {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  line-height: 0;
}
.hero__curve-arrow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
}

/* Courbe blanche en haut des sections foncées */
.section-curve {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  line-height: 0;
}

/* =========================================================
   SECTION CO2
   ========================================================= */
.co2__inner {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.co2__left {
  max-width: 610px;
  padding-top: 200px;
}
.co2__text {
  margin-top: 60px;
  max-width: 560px;
}
.co2__bars { margin-top: 86px; max-width: 569px; }
.co2__bar-row { margin-bottom: 29px; }
.co2__bar-row:last-child { margin-bottom: 0; }
.co2__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.co2__bar-label {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.co2__bar-value { font-size: 20px; color: var(--grey); }
.co2__bar-track {
  height: 6px;
  background: var(--track);
  border-radius: 3px;
  overflow: hidden;
}
.co2__bar-fill {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}

/* Collage droite */
.co2__collage {
  position: relative;
  width: 675px;
  height: 817px;
  flex-shrink: 0;
  margin-top: 104px;
}
.co2__mer {
  position: absolute;
  left: 0;
  top: 0;
  width: 675px;
}
.co2__mer-shape {
  display: block;
  width: 100%;
  height: auto;
}
.co2__mer-wave {
  position: absolute;
  bottom: -1px;
  left: 150px;
}
.stat-card {
  position: absolute;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 24px 45px rgba(30, 54, 88, 0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}
.stat-card--1 {
  left: 0;
  top: 0;
  width: 323px;
  height: 267px;
}
.stat-card--2 {
  right: 0;
  top: 550px;
  width: 323px;
  height: 267px;
}
.stat-card__num {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -1px;
}
.stat-card__label {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card__sub {
  margin-top: 4px;
  font-size: 18px;
  color: var(--grey);
}

/* =========================================================
   SECTION NAVIRE
   ========================================================= */
.navire {
  position: relative;
  margin-top: 116px;
  min-height: 844px;
}
.navire__media {
  position: absolute;
  left: 0;
  /* Centré verticalement sur la hauteur de la section. */
  top: 50%;
  transform: translateY(-50%);
  width: 815px;
  /* La colonne de texte occupe les 675px de droite du conteneur : le visuel est
     plafonné à l'espace réellement libre pour ne jamais la croiser. */
  max-width: calc(50% - 24px);
  /* Le cadre reprend le format du visuel (paysage). En hauteur figée, il était
     portrait et object-fit: cover rognait le navire sur les côtés et la coque. */
  aspect-ratio: 4405 / 3091;
  height: auto;
}
.navire__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 28px 28px 0;
}
.navire__notch {
  position: absolute;
  right: -1px;
  top: 167px;
}
.navire__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.navire__content {
  width: 675px;
  padding-top: 85px;
}
.navire__content .h2 { margin-top: 22px; }
.navire__text { margin-top: 85px; max-width: 620px; }
.navire__stats {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 398px 1fr;
  gap: 31px 0;
}
.navire__stat-num {
  font-size: 50px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--blue);
}
.navire__stat-label {
  margin-top: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey);
}
.navire__content .btn { margin-top: 87px; }

/* =========================================================
   SECTION PILIERS
   ========================================================= */
.piliers {
  position: relative;
  margin-top: 191px;
  background: var(--navy);
  padding: 117px 0 155px;
  overflow: hidden;
}
.piliers__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
}
.piliers__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.piliers__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1e3658 0%, rgba(30, 54, 88, 0.1) 45%, rgba(30, 54, 88, 0.1) 100%);
}
.piliers__inner { position: relative; z-index: 2; }
.piliers__grid {
  margin-top: 160px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
}
.pilier-card {
  position: relative;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-card);
  padding: 36px 40px 42px;
  color: var(--white);
}
.pilier-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pilier-card__icon img { width: 34px; height: auto; }
.pilier-card__title {
  margin-top: 23px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
}
.pilier-card__text {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.35;
}

/* =========================================================
   SECTION CORRIDOR
   ========================================================= */
.corridor {
  position: relative;
  padding: 136px 0 0;
  min-height: 1168px;
  overflow: hidden;
}
.corridor__map {
  position: absolute;
  top: -142px;
  right: -91px;
  width: 724px;
}
.corridor__map img { width: 100%; height: auto; }
.map-port {
  position: absolute;
  transform: translate(-16px, -50%) scale(0.85);
  transform-origin: 16px 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--navy);
  background: var(--white);
  border-radius: 12px;
  padding: 8px 14px 8px 10px;
  box-shadow: 0 12px 26px rgba(30, 54, 88, 0.20);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.map-port::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 118, 175, 0.25);
  flex-shrink: 0;
}
.map-port.is-on {
  opacity: 1;
  transform: translate(-16px, -50%) scale(1);
}
.corridor__step-title { transition: color 0.2s ease; }
.corridor__step:hover .corridor__step-title { color: var(--blue); }
.corridor__inner { position: relative; z-index: 2; }
.corridor__text { margin-top: 74px; }
.corridor__freq {
  margin-top: 37px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue);
}
.corridor__freq img { width: 26px; height: 26px; }
.corridor__steps {
  margin-top: 77px;
  display: grid;
  grid-template-columns: 552px 520px;
  gap: 55px 0;
}
.corridor__step-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grey-label);
}
.corridor__step-title {
  margin-top: 4px;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.arrow-long { flex-shrink: 0; }
.corridor__step-info {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 12px;
  padding: 8px 22px;
}
.corridor__btn { margin-top: 87px; }

/* =========================================================
   SECTION VERTICALES
   ========================================================= */
.verticales {
  position: relative;
  background: #0d5183 url("../img/bg_woman.png") center / cover no-repeat;
  padding: 127px 0 0;
  height: 993px;
  overflow: hidden;
}
.verticales__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78.9%; /* woman.png : 1515px sur maquette 1920px */
}
.verticales__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.15;
}
.verticales__head { position: relative; z-index: 2; }
.verticales__carousel {
  position: relative;
  z-index: 2;
  margin-top: 87px;
  margin-left: max(40px, calc((100% - var(--container)) / 2));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.verticales__carousel.is-dragging { cursor: grabbing; }
.verticales__carousel.is-dragging .vertical-card { pointer-events: none; }
.verticales__track {
  display: flex;
  gap: 21px;
  transition: transform 0.5s ease;
}
.vertical-card {
  flex: 0 0 397px;
  width: 397px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.vertical-card__media {
  position: relative;
  height: 229px;
}
.vertical-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vertical-card__body {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 21px 35px 15px;
  min-height: 143px;
  color: var(--white);
}
.vertical-card__title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.vertical-card__text {
  margin-top: 11px;
  font-size: 17px;
  line-height: 1.35;
}
.verticales__nav {
  position: relative;
  z-index: 2;
  margin-top: 47px;
  display: flex;
  gap: 38px;
}
.carousel-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  border: 1.6px solid var(--white);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.carousel-btn:hover { background: var(--white); color: var(--navy); }
.carousel-btn:disabled { opacity: 1; cursor: default; }
.carousel-btn:disabled:hover { background: transparent; color: var(--white); }

/* =========================================================
   SECTION PARTENAIRES
   ========================================================= */
.partenaires {
  position: relative;
  padding-top: 108px;
}
.partenaires__shape-right {
  position: absolute;
  right: 0;
  top: 151px;
  width: 276px;
  pointer-events: none;
}
.partenaires__shape-left {
  position: absolute;
  left: 0;
  top: 809px;
  width: 128px;
  pointer-events: none;
}
.partenaires .container { position: relative; z-index: 2; }
.partenaires .h2 { margin-top: 16px; }
.partenaires__cols {
  position: relative;
  margin-top: 122px;
}
.partenaires__grid {
  display: grid;
  grid-template-columns: repeat(3, 323px);
  gap: 22px;
  flex-shrink: 0;
}
.partner-card {
  height: 210px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  font-size: 20px;
  line-height: 1.35;
}
.partner-card--empty {
  visibility: hidden;
}
.partenaires__quote {
  position: absolute;
  left: 812px;
  top: -94px;
  width: 480px;
}
.partenaires__quote blockquote {
  font-size: 30px;
  line-height: 1.17;
  color: var(--blue);
}
.partenaires__quote cite {
  display: block;
  margin-top: 48px;
  font-style: normal;
  font-size: 20px;
  color: var(--navy);
}

/* =========================================================
   SECTION ACTUALITÉS
   ========================================================= */
.actus {
  position: relative;
  padding: 159px 0 0;
}
.actus .container { position: relative; z-index: 2; }
.actus__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.actu-card {
  display: flex;
  flex-direction: column;
  background-color: var(--navy);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
}
.actu-card__media { height: 159px; flex-shrink: 0; }
.actu-card:nth-child(1) .actu-card__media img { object-position: 50% 22%; }
.actu-card:nth-child(2) .actu-card__media img { object-position: 50% 32%; }
.actu-card:nth-child(3) .actu-card__media img { object-position: 50% 30%; }
.actu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.actu-card__body {
  background: var(--navy);
  padding: 24px 34px 34px;
  min-height: 139px;
  flex: 1;
}
.actu-card__cat {
  display: block;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue);
}
.actu-card__title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
}
.actus .btn { margin-top: 83px; }

/* =========================================================
   CTA FINAL + FOOTER
   ========================================================= */
.footer {
  display: flow-root;
  margin-top: 304px;
  background: linear-gradient(96deg, #0a4472 0%, #04517f 55%, #006093 100%);
  color: var(--white);
}
.cta-final {
  position: relative;
  margin: -150px 140px 0;
  border-radius: 24px;
  overflow: hidden;
}
.cta-final__bg {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  opacity: 0.77;
}
.cta-final__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-final__glass {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: no-repeat padding-box rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.cta-final__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 95px 138px 90px;
}
.cta-final__left { max-width: 720px; }
.cta-final__text { margin-top: 70px; color: var(--navy); }
.cta-final__actions {
  margin-top: 57px;
  display: flex;
  align-items: center;
  gap: 46px;
}
.cta-final__right {
  width: 398px;
  flex-shrink: 0;
  padding-top: 20px;
}
.cta-final__block { margin-bottom: 44px; }
.cta-final__block:last-child { margin-bottom: 0; }
.cta-final__block p { margin-top: 16px; color: var(--navy); }
.pill-label {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  border: 1.4px solid var(--blue);
  border-radius: 12px;
  padding: 6px 16px;
}

/* Footer principal */
.footer__main {
  display: grid;
  grid-template-columns: 1fr 276px 276px 260px;
  padding-top: 91px;
}
.footer__logo { width: 207px; }
.footer__tagline {
  margin-top: 19px;
  font-size: 16px;
  line-height: 1.375;
}
.footer__address {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.375;
}
.footer__col h4 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer__col ul { margin-top: 30px; }
.footer__col li { margin-bottom: 0; }
.footer__col a {
  font-size: 15px;
  line-height: 27px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.95;
}
.footer__col a:hover { opacity: 0.7; }

.footer__legal {
  /* padding-top/bottom seulement : le raccourci `padding` remettait à zéro les
     marges horizontales héritées de .container. */
  padding-top: 104px;
  padding-bottom: 44px;
  display: flex;
  gap: 28px;
  font-size: 15px;
  color: #aeaeae;
}
.footer__legal a:hover { color: var(--white); }
.footer__signature { margin-left: auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1919px) {
  :root { --container: 1200px; }
  .co2__inner { gap: 40px; }
  .co2__collage { transform-origin: top right; }
}

@media (max-width: 1600px) {
  .hero__title { font-size: 56px; }
  /* Titre à 56px : ~920px de large, l'accroche reste en retrait. */
  .hero__text { max-width: 740px; }
  .hero__voile { width: calc(100% - 780px); }
  .h2 { font-size: 39px; }
  .nav { gap: 22px; font-size: 15px; margin-left: 30px; }
  .header__logo img { width: 150px; }
  .co2__collage { width: 560px; height: 677px; }
  .co2__mer { width: 560px; top: 0; }
  .stat-card--1 { width: 268px; height: 222px; }
  .stat-card--2 { width: 268px; height: 222px; top: 455px; }
  .co2__mer-wave { left: 124px; }
  .navire__media { width: 42vw; }
  .corridor__steps { grid-template-columns: repeat(2, minmax(0, 520px)); gap: 70px 32px; }
  .corridor__step-title { font-size: 32px; }
  .cta-final { margin: -150px 60px 0; }
  .cta-final__inner { padding: 70px 80px; }
  .partenaires__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
  .partenaires__cols { gap: 60px; }
}

@media (max-width: 1280px) {
  .nav { display: none; }
  .hero { height: auto; padding-bottom: 90px; }
  .hero__content { padding-top: 190px; }
  .hero__certs { margin-top: 70px; }
  .co2__inner { flex-direction: column; }
  .co2__left { padding-top: 100px; }
  .co2__text, .co2__bars { margin-top: 60px; }
  .co2__collage { margin: 60px auto 0; }
  .navire { margin-top: 100px; min-height: 0; }
  .navire__media { position: relative; top: auto; transform: none; max-width: none; width: 90%; height: auto; }
  .navire__inner { justify-content: flex-start; }
  .navire__content { padding-top: 60px; width: auto; }
  .navire__text, .navire__stats { margin-top: 40px; }
  .piliers__photo { display: none; }
  .piliers__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .piliers { padding: 90px 0; margin-top: 100px; }
  .piliers__grid { margin-top: 60px; }
  .corridor { min-height: 0; padding: 100px 0 0; }
  .corridor__map { position: relative; top: 0; right: 0; width: 100%; max-width: 600px; margin: 40px auto 0; }
  .corridor__text, .corridor__steps { margin-top: 50px; }
  .corridor__steps { grid-template-columns: 1fr; gap: 50px; }
  .corridor__btn { margin-top: 60px; }
  .partenaires__quote { position: static; margin: 50px 0 0; width: auto; max-width: 480px; }
  .verticales { height: auto; padding-bottom: 90px; }
  .verticales__nav { margin-top: 50px; }
  .partenaires__cols { flex-direction: column; }
  .partenaires__grid { grid-template-columns: repeat(3, 1fr); }
  .cta-final { margin: -100px 30px 0; }
  .footer { margin-top: 100px; }
  .cta-final__inner { flex-direction: column; padding: 60px 50px; }
  .cta-final__text { margin-top: 40px; }
  .cta-final__actions { margin-top: 40px; }
  .cta-final__right { width: auto; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 50px; padding-top: 80px; }
  .footer__legal { flex-wrap: wrap; gap: 20px 30px; padding-top: 60px; padding-bottom: 40px; }
}

/* =========================================================
   LAPTOPS (MacBook Air / Pro, écrans ≤ 1080px de haut) :
   chaque section tient dans 100vh.
   Les grands écrans (≥ 1920px) gardent la maquette d'origine.
   ========================================================= */
@media (min-width: 1281px) and (max-width: 1919px) and (max-height: 1080px) {

  /* --- Hero --- */
  .hero {
    min-height: 80vh;
  }
  .hero__content { padding-top: calc(clamp(70px, 13vh, 196px) + 110px); }
  .hero__accroche { margin-top: clamp(24px, 5vh, 52px); }
  .hero__certs { margin-top: clamp(40px, 10vh, 118px); }

  /* --- CO2 --- */
  .co2__left { padding-top: clamp(80px, 12vh, 200px); }
  .co2__text { margin-top: clamp(28px, 5vh, 60px); }
  .co2__bars { margin-top: clamp(40px, 7vh, 86px); }
  .co2__collage {
    width: 560px;
    height: 677px;
    margin-top: clamp(36px, 6vh, 104px);
  }
  .co2__mer { width: 560px; top: 0; }
  .stat-card--1 { width: 268px; height: 222px; }
  .stat-card--2 { width: 268px; height: 222px; top: 455px; }
  .co2__mer-wave { left: 124px; }

  /* --- Navire --- */
  .navire {
    margin-top: clamp(70px, 10vh, 116px);
    min-height: min(844px, 100vh);
  }
  .navire__media { height: auto; }
  .navire__content { padding-top: clamp(50px, 7vh, 85px); }
  .navire__text { margin-top: clamp(44px, 6vh, 85px); }
  .navire__stats { margin-top: clamp(32px, 5vh, 50px); }
  .navire__content .btn { margin-top: clamp(48px, 7vh, 87px); }

  /* --- Piliers --- */
  .piliers {
    margin-top: clamp(90px, 12vh, 191px);
    padding: clamp(70px, 9vh, 117px) 0 clamp(80px, 11vh, 155px);
  }
  .piliers__grid { margin-top: clamp(60px, 10vh, 160px); }

  /* --- Corridor --- */
  .corridor {
    padding: clamp(70px, 8.5vh, 136px) 0 clamp(36px, 5vh, 90px);
    min-height: 0;
  }
  /* Carte dimensionnée par la hauteur de section : la route reste visible */
  .corridor__map {
    top: -60px;
    bottom: 0;
    right: -40px;
    width: auto;
  }
  .corridor__map img { width: auto; height: 100%; }
  .corridor__text { margin-top: clamp(32px, 5vh, 74px); }
  .corridor__freq { margin-top: clamp(20px, 3.5vh, 37px); }
  .corridor__steps {
    margin-top: clamp(36px, 5.5vh, 77px);
    gap: clamp(32px, 5vh, 55px) 32px;
  }
  .corridor__btn { margin-top: clamp(40px, 6vh, 87px); }

  /* --- Verticales --- */
  .verticales {
    height: 100vh;
    min-height: 780px;
    max-height: 993px;
    padding-top: clamp(70px, 10vh, 127px);
  }
  .verticales__carousel { margin-top: clamp(40px, 6vh, 87px); }
  .verticales__nav { margin-top: clamp(28px, 4vh, 47px); }

  /* --- Partenaires --- */
  .partenaires { padding-top: clamp(60px, 8vh, 108px); }
  .partenaires__cols { margin-top: clamp(56px, 9vh, 122px); }
  .partenaires__shape-left { top: auto; bottom: -604px; }

  /* --- Actualités --- */
  .actus { padding: clamp(70px, 9vh, 159px) 0 0; }
  .actus .btn { margin-top: clamp(44px, 6vh, 83px); }

  /* --- Footer / CTA --- */
  .footer { margin-top: clamp(200px, 26vh, 304px); }
}

/* =========================================================
   PAGES INTÉRIEURES — composants partagés
   ========================================================= */

/* ---------- Hero de page ---------- */
.page-hero {
  position: relative;
  background: url("../img/bg-hero-100.png") center / cover no-repeat;
  overflow: hidden;
  padding-bottom: 130px;
}
.page-hero__photo {
  position: absolute;
  inset: 0;
}
.page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.33;
}
.breadcrumb {
  position: relative;
  z-index: 2;
  margin-top: 140px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}
.breadcrumb a:hover { opacity: 0.75; }
.breadcrumb .sep { margin: 0 10px; }
.breadcrumb strong { color: var(--white); font-weight: 500; }
.page-hero__content {
  position: relative;
  z-index: 2;
  padding-top: 64px;
}
.page-hero__title {
  margin-top: 22px;
  font-size: 60px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--white);
  max-width: 980px;
}
.page-hero__title .thin { font-weight: 300; }
.page-hero__text {
  margin-top: 28px;
  max-width: 700px;
  color: var(--white);
}
.page-hero__actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* ---------- Rythme de section ---------- */
.page-section { padding-top: 120px; }
.section-sub { margin-top: 26px; max-width: 720px; }
.section-head--center { text-align: center; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- KPI (fiche technique / chiffres) ---------- */
.kpi-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px 32px;
}
.kpi {
  border-top: 1px solid var(--track);
  padding-top: 24px;
}
.kpi__num {
  font-size: 50px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--blue);
}
.kpi__label {
  margin-top: 10px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey);
}

/* ---------- Sections immersives à fond photo ---------- */
.photo-section {
  position: relative;
  margin-top: 120px;
  background: var(--navy);
  padding: 130px 0 140px;
  overflow: hidden;
}
.photo-section--air { padding: 170px 0 180px; }
.photo-section__bg { position: absolute; inset: 0; }
.photo-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-section__bg--blur img {
  filter: blur(14px);
  transform: scale(1.08);
}
.photo-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 54, 88, 0.9) 0%, rgba(30, 54, 88, 0.62) 50%, rgba(30, 54, 88, 0.8) 100%);
}
.photo-section__content { position: relative; z-index: 2; }
.photo-section .section-sub { color: var(--white); }

/* Encadré verre dépoli (patron des cartes piliers de l'accueil) */
.photo-section .callout {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--white);
}
.photo-section .callout__kicker { color: var(--white); }

/* ---------- Bento chiffres ---------- */
.bento {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 3 rangées + 2 gaps ≤ 80vh sur écran laptop, plafonné à 215px par rangée */
  grid-auto-rows: min(215px, calc((80vh - 42px) / 3));
  gap: 21px;
}
.bento__hero {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  background: var(--navy);
  border-radius: 28px;
  color: var(--white);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bento__hero-bg {
  position: absolute;
  inset: 0;
}
.bento__hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bento__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 54, 88, 0.78);
}
.bento__hero > .bento__hero-icon,
.bento__hero > div:not(.bento__hero-bg) {
  position: relative;
  z-index: 2;
}
.bento__hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento__hero-icon img { width: 38px; }
.bento__hero-num {
  font-size: 120px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -4px;
}
.bento__hero .kpi__label { color: rgba(255, 255, 255, 0.75); }
.bento__tile {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bento__media {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Duo + médaillon ---------- */
.duo { position: relative; }
/* Illustration en pied de carte de propulsion. Le format 16/9 correspond à celui des
   photos fournies : aucun recadrage n'est nécessaire. Le rayon reprend celui des
   vignettes du site (logos partenaires), plus discret que celui des cartes. */
.duo__photo {
  margin-top: 26px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--track);
}
.duo__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage par le haut : décisif pour le plan de voilure, en portrait, dont la
     partie haute porte le gréement. Sans effet sur la photo du kite, déjà en 16/9
     comme le cadre — elle n'est donc pas rognée. */
  object-position: center top;
}
.duo__plus {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(30, 54, 88, 0.25);
}
.duo__plus svg { width: 18px; height: 18px; }


/* ---------- Grilles de cartes ---------- */
.cards-2, .cards-3, .cards-4 {
  margin-top: 40px;
  display: grid;
  gap: 21px;
  align-items: stretch;
}
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Carte icône ---------- */
.icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 34px 36px 38px;
}
.icon-card h3 {
  margin-top: 22px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
}
.icon-card .block-label + h3 { margin-top: 12px; text-transform: none; font-size: 24px; }
.icon-card p { margin-top: 14px; }
.icon-card--navy {
  background: var(--navy);
  color: var(--white);
}
.icon-card--navy .icon-tile { background: rgba(255, 255, 255, 0.16); }
.icon-card--navy .block-label { color: var(--white); opacity: 0.8; }
.icon-card--light { background: #eef4f9; box-shadow: none; }

/* ---------- Label de bloc + pills ---------- */
.block-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
}
.pills {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid rgba(30, 54, 88, 0.35);
  border-radius: 10px;
  padding: 6px 12px;
}
.icon-card--navy .pill {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ---------- Encadré / bannière / panneau navy ---------- */
.callout {
  margin-top: 21px;
  background: #eef4f9;
  border-radius: var(--radius-card);
  padding: 36px 44px;
}
.callout__kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
}
.callout p { margin-top: 12px; }
.banner-navy {
  margin-top: 40px;
  background: var(--navy);
  border-radius: 28px;
  padding: 60px;
  text-align: center;
  color: var(--white);
}
.banner-navy__kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.banner-navy__title {
  margin-top: 14px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 1px;
}
.banner-navy p {
  margin-top: 16px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.panel-navy {
  background: var(--navy);
  border-radius: 28px;
  padding: 70px 80px;
  color: var(--white);
}
.panel-navy p { max-width: 700px; }
/* Texte du panneau : la marge reprend celle qui était posée en style en ligne, et les
   paragraphes multiples sont espacés (le reset global met toutes les marges à zéro). */
.panel-navy__texte { margin-top: 26px; }
/* Panneau illustré : le texte tient la colonne de gauche, l'image celle de droite.
   Le rayon de l'image est plus serré que celui du panneau, pour éviter l'effet de
   cadre dans le cadre. Sous 980px la colonne passe sous le texte. */
.panel-navy--illustre {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  gap: 56px;
  align-items: center;
}
.panel-navy--illustre .panel-navy__texte p { max-width: none; }
.panel-navy__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: rgba(255, 255, 255, 0.08);
}
.panel-navy__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) {
  .panel-navy--illustre { grid-template-columns: 1fr; gap: 36px; }
}
.panel-navy__texte p + p { margin-top: 16px; }
.panel-navy .btn { margin-top: 40px; }

/* ---------- Cartes transit (corridor) ---------- */
.transit-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 36px 40px 42px;
}
.transit-card__label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grey-label);
}
.transit-card h3 {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.transit-card__duration {
  margin-top: 26px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--blue);
}
.transit-card p { margin-top: 12px; }

/* ---------- Panneau carte (corridor) ---------- */
.map-panel {
  position: relative;
  margin-top: 40px;
  background: #eef4f9;
  border-radius: 28px;
  padding: 70px 80px;
  min-height: min(660px, 80vh);
  overflow: hidden;
}
.map-panel__map {
  position: absolute;
  top: -40px;
  right: 24px;
  bottom: -80px;
  display: flex;
}
.map-panel__map img { width: auto; height: 100%; }
.map-panel__content { position: relative; z-index: 2; max-width: 640px; }
.map-panel .kpi-grid {
  margin-top: 40px;
  grid-template-columns: repeat(2, minmax(0, 240px));
}
.map-panel .kpi { border-top-color: rgba(30, 54, 88, 0.18); }

/* ---------- Vue éclatée (navire) ---------- */
.exploded-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 21px;
  align-items: stretch;
}
.exploded {
  position: relative;
  height: min(640px, 80vh);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 45px rgba(30, 54, 88, 0.10);
}
.exploded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}
.hotspot {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  box-shadow: 0 8px 20px rgba(30, 54, 88, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: hotspot-pulse 2.4s ease-out infinite;
}
@keyframes hotspot-pulse {
  0% { transform: scale(0.75); opacity: 1; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot::after { animation: none; opacity: 0; }
}
.hotspot:hover, .hotspot:focus-visible, .hotspot.is-active {
  transform: scale(1.12);
  background: var(--navy);
}
.hotspot.is-active::after { animation: none; opacity: 0; }
.hotspot__label {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  background: var(--white);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(30, 54, 88, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hotspot--flip .hotspot__label {
  left: auto;
  right: calc(100% + 16px);
  transform: translateY(-50%) translateX(8px);
}
.hotspot.is-active .hotspot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.exploded-legend {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}
.exploded-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--track);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 17px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.exploded-legend li.is-active {
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(0, 118, 175, 0.15);
}
.exploded-legend .num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Vidéo ---------- */
.video-panel {
  margin: 40px auto 0;
  width: 1000px;
  max-width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 24px 45px rgba(30, 54, 88, 0.10);
}
.video-panel video {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* ---------- Filtres + tuiles verticales (services) ---------- */
.filters {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-pill {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid rgba(30, 54, 88, 0.35);
  border-radius: 12px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter-pill:hover { border-color: var(--navy); }
.filter-pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.vertical-tile {
  position: relative;
  display: block;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 34px 36px 38px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.vertical-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(30, 54, 88, 0.14);
}
.vertical-tile h3 {
  margin-top: 22px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
  padding-right: 40px;
}
.vertical-tile p { margin-top: 14px; }
.vertical-tile.is-hidden { display: none; }

/* Variante photo : image plein cadre + voile navy dégradé */
.vertical-tile--photo {
  overflow: hidden;
  min-height: 340px;
  padding: 0;
  display: flex;
  color: var(--white);
}
.vertical-tile__bg { position: absolute; inset: 0; }
.vertical-tile__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.vertical-tile__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 54, 88, 0.1) 0%, rgba(30, 54, 88, 0.45) 45%, rgba(30, 54, 88, 0.92) 100%);
}
.vertical-tile--photo:hover .vertical-tile__bg img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .vertical-tile--photo:hover .vertical-tile__bg img { transform: none; }
}
.vertical-tile__body {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  padding: 28px 30px 30px;
}
.vertical-tile--photo h3 {
  margin-top: 0;
  color: var(--white);
}
.vertical-tile--photo p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Split 2 colonnes (T&T, fiche verticale) ---------- */
.split {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.split__media {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 45px rgba(30, 54, 88, 0.10);
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stack {
  display: grid;
  gap: 21px;
  align-content: start;
}

/* ---------- Modalités tarifaires : colonnes éditoriales ---------- */
.pricing-panel { margin-top: 40px; }
.pricing-cols {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pricing-col {
  padding: 6px 40px;
  border-left: 1px solid rgba(30, 54, 88, 0.18);
}
.pricing-col:first-child { border-left: none; padding-left: 0; }
.pricing-col h3 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.pricing-col--star h3 { color: var(--blue); }
.pricing-col p { margin-top: 12px; }
.pricing-panel .banner-navy { margin-top: 56px; }

/* ---------- Cartes avec photo (propositions exclusives) ---------- */
.icon-card--media { padding: 0; overflow: hidden; }
.icon-card__media { height: 260px; }
.icon-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icon-card--media .icon-card__body { padding: 30px 36px 38px; }
.icon-card--media h3 { margin-top: 0; }

/* ---------- Track & Trace : cycle cartes ↔ carte ---------- */
.tnt-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 21px;
  align-items: stretch;
}
.tnt-cards {
  display: grid;
  gap: 21px;
  align-content: stretch;
}
.tnt-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.4s ease, color 0.4s ease;
}
.tnt-card .icon-tile {
  width: 44px;
  height: 44px;
  transition: background 0.4s ease;
}
.tnt-card .icon-tile svg { width: 22px; height: 22px; }
.tnt-card h3 {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  transition: color 0.4s ease;
}
.tnt-card p { margin-top: 10px; transition: color 0.4s ease; }
.tnt-card.is-active {
  background: var(--navy);
  color: var(--white);
}
.tnt-card.is-active h3 { color: var(--white); }
.tnt-card.is-active .icon-tile { background: rgba(255, 255, 255, 0.16); }
.tnt-map {
  position: relative;
  min-height: 480px;
  background: #eef4f9;
  border-radius: 28px;
  overflow: hidden;
}
.tnt-map__inner {
  position: absolute;
  inset: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tnt-map__frame {
  position: relative;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.7, 0.3, 1);
  transform-origin: 14.5% 54.1%;
}
.tnt-state-1 .tnt-map__frame { transform: scale(1.4); }
.tnt-map__frame img {
  height: 100%;
  width: auto;
  display: block;
}
.tnt-marker {
  position: absolute;
  transform: translate(-50%, -50%);
}
/* ---- Verticales : expansion d'une vignette en fiche secteur ---- */
.verticales-stage {
  position: relative;
  margin-top: 44px;
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.verticales-grid { transition: opacity 0.4s ease; }
.verticales-grid.is-dimmed { opacity: 0; }
.verticales-grid[hidden] { display: none; }
.vertical-clone {
  position: absolute;
  z-index: 5;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    top 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
}
.vertical-clone.is-fading { opacity: 0; }
.vertical-clone .vertical-tile__body,
.vertical-clone .card-arrow { transition: opacity 0.3s ease; }
.vertical-clone.is-blank .vertical-tile__body,
.vertical-clone.is-blank .card-arrow { opacity: 0; }
.vertical-clone__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--white);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.vertical-clone.is-blank .vertical-clone__veil { opacity: 0.92; }
.vertical-detail {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  padding: clamp(20px, 2vw, 32px);
}
.vertical-detail .vertical-detail__content {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vertical-detail.is-open .vertical-detail__content {
  opacity: 1;
  translate: 0 0;
}
.vd-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(22px, 2.4vw, 36px);
}
.vd-left {
  display: flex;
  flex-direction: column;
}
.vd-sector {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--navy);
}
.vd-media {
  position: relative;
  flex: 1;
  margin-top: 16px;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
}
.vd-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-media .btn {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
}
.vd-title {
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.25;
}
.vd-right .stack {
  margin-top: 14px;
  gap: 12px;
}
.vertical-detail .icon-card { padding: 18px 24px; }
.vertical-detail .icon-card h3 { margin-top: 10px; }
@media (max-width: 1280px) {
  .vd-grid { grid-template-columns: 1fr; }
  .vd-media { min-height: 260px; }
}
.vertical-detail[hidden] { display: none; }
.vertical-detail__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vertical-detail__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vertical-detail__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
}
.vertical-detail__content {
  position: relative;
  z-index: 1;
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.detail-back:hover { transform: translateY(-1px); }
.detail-back svg {
  width: 16px;
  height: 16px;
}
.detail-back[hidden],
.filters[hidden] { display: none; }

.tnt-overlay { opacity: 0; transition: opacity 0.35s ease; }
.tnt-map__frame img.tnt-overlay--futur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tnt-state-1 .tnt-overlay--gps,
.tnt-state-1 .tnt-overlay--futur,
.tnt-state-2 .tnt-overlay--gps,
.tnt-state-3 .tnt-overlay--alert { opacity: 1; }
.tnt-info {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  background: var(--white);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.tnt-state-2 .tnt-info--eta,
.tnt-state-3 .tnt-info--alert {
  animation: tnt-pop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes tnt-pop {
  0% { opacity: 0; transform: translateY(16px) scale(0.92); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tnt-info--alert .tnt-info__row { opacity: 0; }
.tnt-state-3 .tnt-info--alert .tnt-info__row {
  animation: tnt-notif 0.45s ease both;
}
.tnt-state-3 .tnt-info--alert .tnt-info__row:nth-child(1) { animation-delay: 0.25s; }
.tnt-state-3 .tnt-info--alert .tnt-info__row:nth-child(2) { animation-delay: 1s; }
.tnt-state-3 .tnt-info--alert .tnt-info__row:nth-child(3) { animation-delay: 1.75s; }
@keyframes tnt-notif {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tnt-state-2 .tnt-info--eta,
  .tnt-state-3 .tnt-info--alert,
  .tnt-state-3 .tnt-info--alert .tnt-info__row { animation: none; opacity: 1; transform: none; }
}
.tnt-info__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.tnt-info__row + .tnt-info__row { margin-top: 12px; }
.tnt-info__row::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.tnt-info__row svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
  flex-shrink: 0;
}
.tnt-info__row--icon::before { display: none; }

/* ---------- Visuel Track & Trace ---------- */
.tnt-visual {
  position: relative;
  background: #eef4f9;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.tnt-visual img {
  height: 88%;
  width: auto;
}
.tnt-visual--wide {
  margin-top: 40px;
  height: 400px;
  min-height: 0;
}
.ping {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(0, 118, 175, 0.55); }
  100% { box-shadow: 0 0 0 26px rgba(0, 118, 175, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ping { animation: none; }
}

/* ---------- Partenaires avec rôle (navire) ---------- */
.partner-card--role {
  height: auto;
  min-height: 210px;
  padding: 34px 24px;
}
.partner-card--role span {
  font-size: 17px;
  color: var(--grey);
}

/* ---------- Timeline réglementaire (engagement) ---------- */
.timeline {
  position: relative;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--track);
}
.timeline__item { position: relative; padding-top: 46px; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue);
}
.timeline__num {
  margin-top: 14px;
  font-size: 62px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--blue);
}
.timeline__item h3 {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.timeline__item p { margin-top: 14px; }

/* ---------- Acronymes géants (piliers OMI) ---------- */
.acronym {
  margin-top: 14px;
  font-size: 54px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--navy);
}
.icon-card--navy .acronym { color: var(--white); }
.acronym-sub {
  margin-top: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--grey);
}
.icon-card--navy .acronym-sub { color: rgba(255, 255, 255, 0.65); }

/* ---------- Liste éditoriale numérotée sur photo sombre ---------- */
.num-rows {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.num-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.num-row__num {
  font-size: 46px;
  line-height: 1;
  font-weight: 200;
  color: var(--white);
}
.num-row__kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.num-row h3 {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}
.num-row p { color: rgba(255, 255, 255, 0.88); }

/* ---------- Citations ---------- */
.quote-big {
  margin: 70px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: 34px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--white);
}
.quote-big strong { font-weight: 700; }
.manifesto { max-width: 920px; }
.manifesto blockquote {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--white);
}
.manifesto strong { font-weight: 700; }
.manifesto cite {
  display: block;
  margin-top: 30px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Panneau photo dans le container (manifeste équipe) ---------- */
.photo-panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--navy);
  padding: 150px 90px 120px;
}
.photo-panel__bg { position: absolute; inset: 0; }
.photo-panel__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 54, 88, 0.9) 0%, rgba(30, 54, 88, 0.62) 50%, rgba(30, 54, 88, 0.8) 100%);
}
.photo-panel__content { position: relative; z-index: 2; }
.photo-panel .section-curve { top: -1px; }

/* ---------- Directoire (équipe) ---------- */
.people {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 21px;
}
.person {
  grid-column: span 2;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 36px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.person:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(30, 54, 88, 0.14);
}
.person:nth-child(4) { grid-column: 2 / span 2; }
.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 20%, var(--blue) 100%);
  color: var(--white);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar svg {
  width: 34px;
  height: 34px;
}
.avatar--photo {
  overflow: hidden;
  background: var(--track);
}
.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--blue-btn);
  border-radius: 10px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.btn-mini:hover {
  transform: translateY(-1px);
}
.btn-mini svg {
  width: 15px;
  height: 15px;
}
.person__name {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.person__role {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
}
.person p { margin-top: 14px; }
.person .pills { margin-top: 18px; }

/* ---------- Panneau clair + mur de logos ---------- */
.panel-light {
  background: #eef4f9;
  border-radius: 28px;
  padding: 70px 80px;
}
.panel-light__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.panel-light .btn { margin-top: 36px; }
.logo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.logo-tile {
  background: var(--white);
  border-radius: 16px;
  min-height: 96px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(30, 54, 88, 0.06);
}
.logo-tile img {
  max-height: 44px;
  max-width: 82%;
  width: auto;
}
.logo-tile--text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--navy);
  text-align: center;
}

/* ---------- Formulaire (contact) ---------- */
.contact-split {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.form-panel {
  background: #eef4f9;
  border-radius: 28px;
  padding: 48px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.req { color: var(--blue); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--track);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 118, 175, 0.12);
}
.field ::placeholder { color: var(--grey); }
.form-submit { margin-top: 30px; }
.form-submit .btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Carte interlocuteur (contact) ---------- */
.contact-card {
  background: var(--navy);
  border-radius: 28px;
  padding: 40px;
  color: var(--white);
}
.contact-card__head {
  display: flex;
  gap: 18px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-card__head .avatar {
  width: 64px;
  height: 64px;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.16);
}
.contact-card__name { font-size: 20px; font-weight: 700; }
.contact-card__role {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.contact-card__intro { margin-top: 18px; color: rgba(255, 255, 255, 0.88); }
.contact-lines { margin-top: 24px; display: grid; gap: 14px; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
}
.contact-line svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Partenaires : cartes logo + soutiens ---------- */
.partner-row { display: flex; gap: 24px; align-items: flex-start; }
.partner-row__logo {
  width: 132px;
  height: 92px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--track);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.partner-row__logo img { max-height: 54px; max-width: 102px; width: auto; }
.partner-row h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.partner-row p { margin-top: 10px; }
.partner-row .pills { margin-top: 16px; }
.cards-5 {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 21px;
}
.soutien-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(30, 54, 88, 0.08);
  padding: 32px 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.soutien-card strong { font-size: 18px; letter-spacing: -0.2px; }
.soutien-card span { font-size: 15px; color: var(--grey); line-height: 1.4; }
/* Fiches « soutien » : présentation identique aux fiches industrielles (logo à gauche,
   texte à droite), sur une grille à 2 colonnes. Seul ajout : le bouton est plaqué en
   bas de carte pour que les rangées restent régulières malgré des descriptions de
   longueurs très inégales. */
.icon-card--soutien { display: flex; }
.icon-card--soutien .partner-row { width: 100%; }
.icon-card--soutien .partner-row > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* `margin-top: auto` plaque le bouton en bas mais écrase son margin-top natif de 18px,
   et retombe à 0 sur la carte la plus haute de la rangée, qui n'a aucun mou. L'écart
   est donc porté par l'élément qui précède, pour rester identique à celui des fiches
   industrielles quelle que soit la hauteur de la carte. */
.icon-card--soutien .partner-row .pills { margin-bottom: 18px; }
.icon-card--soutien .btn-mini { margin-top: auto; align-self: flex-start; }

/* ---------- Actualités : à la une + cartes ---------- */
.featured {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 45px rgba(30, 54, 88, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 55px rgba(30, 54, 88, 0.16);
}
.featured__media { position: relative; min-height: 300px; }
.featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured__body {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.featured__meta {
  margin-top: 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--grey);
}
.featured__body .h3-article,
.featured__title {
  margin-top: 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.featured__body p { margin-top: 16px; }
.featured__body .btn { margin-top: 28px; }
a.actu-card {
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.actu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(30, 54, 88, 0.16);
}
.actu-card__text { margin-top: 10px; color: rgba(255, 255, 255, 0.75); }
.actu-card.is-hidden, .featured.is-hidden { display: none; }
.actus-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ---------- Gabarit article ---------- */
.article-meta {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.article-meta strong { color: var(--white); font-weight: 600; }
.article-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.article-aside {
  position: sticky;
  top: 32px;
  display: grid;
  gap: 14px;
}
.aside-box {
  background: #eef4f9;
  border-radius: 16px;
  padding: 24px;
}
.aside-box__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
}
.aside-box ul { margin-top: 12px; }
.aside-box li { border-bottom: 1px solid rgba(30, 54, 88, 0.12); }
.aside-box li:last-child { border-bottom: none; }
.aside-box li a {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  transition: color 0.2s ease;
}
.aside-box li a:hover { color: var(--blue); }
.share-btns { margin-top: 14px; display: flex; gap: 10px; }
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--track);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.share-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.share-btn svg { width: 17px; height: 17px; }
.article-body { max-width: 760px; }
.article-body .lead {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 36px;
}
.article-body h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 40px 0 14px;
  scroll-margin-top: 32px;
}
.article-body > p { margin-bottom: 14px; line-height: 1.6; }
.article-body ul {
  margin: 16px 0 24px;
  display: grid;
  gap: 10px;
}
.article-body ul li {
  position: relative;
  padding-left: 26px;
  line-height: 1.6;
  font-size: 17px;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.article-quote {
  background: #eef4f9;
  border-left: 4px solid var(--blue);
  border-radius: 0 20px 20px 0;
  padding: 34px 40px;
  margin: 30px 0;
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}
.article-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
}
.article-img {
  border-radius: 20px;
  overflow: hidden;
  margin: 30px 0 10px;
}
.article-img img { width: 100%; }
.article-caption {
  font-size: 14px;
  font-style: italic;
  color: var(--grey);
  margin-bottom: 26px;
}
.article-cta {
  background: var(--navy);
  border-radius: 20px;
  padding: 38px 42px;
  margin: 38px 0;
  color: var(--white);
}
.article-cta h3 { font-size: 21px; font-weight: 700; }
.article-cta p { margin-top: 10px; color: rgba(255, 255, 255, 0.85); }
.article-cta .btn { margin-top: 22px; }
.article-tags {
  border-top: 1px solid var(--track);
  padding-top: 26px;
  margin-top: 40px;
}
.article-tags .pills { margin-top: 12px; }

/* ---------- 404 ---------- */
.page-hero--center .page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 70px;
}
.page-hero--center .page-hero__text { max-width: 560px; }
.page-hero--center .page-hero__actions { justify-content: center; }
.error-code {
  font-size: 140px;
  line-height: 1;
  font-weight: 200;
  letter-spacing: -6px;
  color: var(--white);
}

/* Le footer colle à la section photo qui le précède : le CTA chevauche la section sombre (équipe) */
.photo-section + .footer { margin-top: 0; }
.photo-section:has(+ .footer) { padding-bottom: 230px; }

/* ---------- Hero compact + footer sans CTA ---------- */
.page-hero--compact { padding-bottom: 100px; }
.page-hero--compact .page-hero__content { padding-top: 46px; }
.footer--simple { margin-top: 140px; }
.footer--simple .footer__main { padding-top: 84px; }

/* ---------- Nav : page active ---------- */
.nav a.is-active { position: relative; }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
}

/* ---------- Responsive pages intérieures ---------- */
/* Laptops : les blocs tiennent dans la hauteur d'écran */
@media (min-width: 1281px) and (max-height: 1080px) {
  .page-section { padding-top: clamp(80px, 11vh, 120px); }
  .photo-section {
    margin-top: clamp(80px, 11vh, 120px);
    padding: clamp(56px, 8vh, 130px) 0 clamp(56px, 8vh, 140px);
  }
  .photo-section--air { padding: clamp(110px, 15vh, 170px) 0 clamp(120px, 16vh, 180px); }
  .photo-section .callout { margin-top: 16px; }
}
@media (max-width: 1600px) {
  .page-hero__title { font-size: 48px; }
}
@media (max-width: 1280px) {
  .page-hero__title { font-size: 42px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .bento__hero { grid-row: span 1; padding: 32px 36px; }
  .bento__hero-num { font-size: 68px; letter-spacing: -2px; }
  .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .exploded-layout { grid-template-columns: 1fr; }
  .exploded-legend { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .timeline { grid-template-columns: 1fr; gap: 36px; }
  .timeline::before { top: 0; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; }
  .timeline__item { padding-top: 0; padding-left: 44px; }
  .timeline__item::before { top: 6px; }
  .num-row { grid-template-columns: 70px 1fr; gap: 16px 28px; }
  .num-row p { grid-column: 2; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .person, .person:nth-child(4) { grid-column: span 1; }
  .panel-light { padding: 50px 40px; }
  .panel-light__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-split { grid-template-columns: 1fr; }
  .form-panel { padding: 36px 30px; }
  .cards-5 { grid-template-columns: repeat(3, 1fr); }
  .pricing-cols { grid-template-columns: 1fr; gap: 32px; }
  .pricing-col { border-left: none; border-top: 1px solid rgba(30, 54, 88, 0.18); padding: 28px 0 0; }
  .pricing-col:first-child { border-top: none; padding-top: 0; }
  .tnt-layout { grid-template-columns: 1fr; }
  .tnt-map { min-height: 440px; }
  .featured { grid-template-columns: 1fr; }
  .featured__media { min-height: 300px; }
  .featured__body { padding: 40px 36px; }
  .actus-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: 1fr 1fr; }
  .error-code { font-size: 100px; }
  .map-panel { padding: 50px 40px; }
  .map-panel__map { position: static; margin-top: 40px; justify-content: center; max-height: 620px; }
  .map-panel__map img { height: 620px; }
  .panel-navy { padding: 56px 44px; }
  .page-section { padding-top: 90px; }
  .photo-section { margin-top: 90px; padding: 100px 0 110px; }
}
@media (max-width: 760px) {
  .page-hero__title { font-size: 33px; }
  .page-hero__actions { flex-direction: column; align-items: flex-start; gap: 22px; }
  .kpi-grid, .cards-2, .cards-3, .cards-4, .exploded-legend { grid-template-columns: 1fr; }
  .kpi__num { font-size: 38px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(150px, auto); }
  .bento__hero { grid-column: span 1; }
  .bento__hero-num { font-size: 56px; }
  .hotspot__label { display: none; }
  .video-panel video { height: 380px; }
  .people { grid-template-columns: 1fr; }
  .cards-5 { grid-template-columns: 1fr; }
  .actus-grid { grid-template-columns: 1fr; }
  .partner-row { flex-direction: column; }
  .article-aside { grid-template-columns: 1fr; }
  .featured__title { font-size: 24px; }
  .error-code { font-size: 76px; letter-spacing: -3px; }
  .num-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .num-row p { grid-column: 1; }
  .quote-big { font-size: 25px; }
  .manifesto blockquote { font-size: 28px; }
  .acronym { font-size: 42px; }
  .timeline__num { font-size: 46px; }
  .transit-card__duration { font-size: 32px; }
  .banner-navy { padding: 44px 26px; }
  .banner-navy__title { font-size: 26px; }
  .panel-navy { padding: 44px 28px; }
  .callout { padding: 28px 26px; }
  .photo-panel { padding: 100px 30px 70px; }
  .map-panel .kpi-grid { grid-template-columns: 1fr; }
  .map-panel__map img { height: 420px; }
  .hotspot { width: 34px; height: 34px; font-size: 14px; }
  .tnt-visual { min-height: 360px; }
  .page-section { padding-top: 70px; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .header__inner { flex-wrap: wrap; gap: 16px; }
  .header__right { margin-left: 0; width: 100%; justify-content: flex-start; gap: 12px; }
  .btn--white { padding: 10px 18px; font-size: 15px; }
  .hero__title { font-size: 36px; }
  .hero__title br { display: none; }
  .h2 { font-size: 32px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 24px; }
  .co2__collage { width: 100%; height: auto; position: static; margin-top: 40px; }
  .co2__mer { position: static; width: 100%; }
  .co2__mer-wave { display: none; }
  .stat-card { position: static; width: 100% !important; height: auto !important; box-shadow: 0 18px 40px rgba(30,54,88,0.08); padding: 40px 24px; margin-top: 24px; }
  .piliers__grid { grid-template-columns: 1fr; }
  .navire__media { width: 100%; height: auto; }
  .navire__media img { border-radius: 0; }
  .navire__notch { display: none; }
  .navire__stats { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .navire__stat-num { font-size: 34px; }
  .corridor__step-title { font-size: 24px; }
  .vertical-card { flex: 0 0 300px; width: 300px; }
  .partenaires__grid { grid-template-columns: 1fr 1fr; }
  .partner-card--empty { display: none; }
  .actus__grid { grid-template-columns: 1fr; }
  .actus .btn { margin-top: 40px; }
  /* Sur mobile la carte ne remonte plus dans le blanc : on resserre l'espace blanc
     avant le pied de page et on dégage du bleu au-dessus de la carte. */
  .footer { margin-top: 48px; }
  .cta-final { margin: 40px 16px 0; }
  .cta-final__inner { padding: 40px 28px; }
  .cta-final__actions { flex-direction: column; align-items: flex-start; gap: 22px; }
  .corridor__step-title { flex-wrap: wrap; }
  .footer__main { grid-template-columns: 1fr; gap: 40px; }
  .footer__signature { margin-left: 0; }
}

/* =========================================================================
   Ajouts CMS — états du formulaire de contact (erreurs, confirmation).
   Ces règles ne modifient aucun style de la maquette : elles ne s'appliquent
   qu'à des éléments qui n'existent pas dans les pages statiques d'origine.
   ========================================================================= */
.form-erreur {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: #b3261e;
}
.form-erreur--global {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(179, 38, 30, 0.08);
}
.form-succes {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy);
}
.form-panel--succes {
  display: flex;
  align-items: center;
}
/* Champ-piège anti-robots : invisible pour les visiteurs, rempli par les robots. */
.form-piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* -------------------------------------------------------------------------
   Mobile — section « Corridor Celtique ».

   La carte est une image très haute (708 × 1366 px). À 360 px de large elle
   occupe près de 700 px de hauteur, dont l'essentiel n'apporte rien : mer et
   nord de l'Écosse en haut, péninsule ibérique en bas. On resserre donc le
   cadrage sur le corridor lui-même et on réduit le blanc qui le précède.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .corridor {
    /* La carte vient au contact de la section bleue qui précède : aucun blanc entre
       les deux, comme sur le reste du site. */
    padding-top: 0;
    padding-bottom: 84px; /* respiration sous le bouton « Découvrir » */
  }

  .corridor__map {
    position: relative;
    margin-top: 0;
    /* Cadre volontairement moins haut que l'image : le débord est masqué. */
    aspect-ratio: 708 / 900;
    overflow: hidden;
    /* Respiration avant l'étiquette « La ligne maritime » qui suit. */
    margin-bottom: 34px;
  }
  /* Remonte l'image dans son cadre pour écarter la mer du nord. */
  .corridor__map img { margin-top: -18%; }
  /* Fondu vers le blanc : le recadrage ne se lit plus comme une coupure nette. */
  .corridor__map::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 88%);
    pointer-events: none;
  }

  /* Les repères de ports ne se révèlent qu'au survol : sans souris ils n'ont
     pas lieu d'être, et le recadrage décalerait leur position. */
  .map-port { display: none; }
}

/* -------------------------------------------------------------------------
   Carrousel des verticales — hauteur des cartes.

   La piste est en flex : les cartes s'étirent sur la hauteur de la plus haute.
   Mais leur contenu (photo à hauteur fixe + corps à hauteur libre) ne remplissait
   pas cet espace : le bloc coloré s'arrêtait avant le bas de la carte, et l'arrondi
   inférieur n'apparaissait pas. On fait descendre le corps jusqu'en bas.
   ------------------------------------------------------------------------- */
.vertical-card {
  display: flex;
  flex-direction: column;
}
.vertical-card__media { flex: 0 0 229px; }
.vertical-card__body { flex: 1 1 auto; }

/* -------------------------------------------------------------------------
   Mobile — section « Verticales d'expertise ».
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* La photo d'ambiance ne couvre que 78,9 % de la largeur sur la maquette
     (calé sur 1920 px) : en dessous, la césure devenait visible à gauche. */
  .verticales__photo { width: 100%; }

  .vertical-card__media { flex-basis: 190px; }
}

/* -------------------------------------------------------------------------
   Mobile — section « Partenaires » de l'accueil.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Le titre était trop détaché du mur de logos. */
  .partenaires__cols { margin-top: 30px; }

  /* Logos calibrés sur une hauteur commune, avec la même respiration latérale :
     les largeurs de la maquette (90 à 134 px) déséquilibraient la grille à deux
     colonnes. */
  .partner-card { padding-inline: 24px; }
  .partner-card img {
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .partenaires__quote blockquote { font-size: 22px; }
  .partenaires__quote cite { margin-top: 24px; font-size: 17px; }
}

/* -------------------------------------------------------------------------
   Mobile — respiration sous le dernier bouton de l'accueil.
   Le pied de page remonte de 80 px : sans marge, le bouton « Toutes les
   actualités » se retrouvait collé au bloc d'appel à l'action.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .actus { padding-bottom: 56px; }
}

/* =========================================================================
   Très grands écrans (au-delà de la largeur de maquette, 1920 px).

   Les sections restent pleine largeur. Seuls deux visuels combinent une largeur
   fixe et un ancrage au bord de la fenêtre : au-delà de 1920 px, l'écart entre
   eux et le texte — placé dans un conteneur centré de 1364 px — se creusait.

   On les fait donc grandir avec l'écran, en conservant exactement l'écart au
   texte prévu par la maquette. Les formules redonnent la valeur d'origine à
   1920 px : la transition est continue, sans saut.
   ========================================================================= */
@media (min-width: 1921px) {
  /* Maquette : le visuel déborde de 537 px sous le conteneur (815 − 278). */
  .navire__media { width: calc((100% - var(--container)) / 2 + 537px); }

  /* Maquette : le bord gauche de la carte reste à 355 px du bord droit du
     conteneur — soit une demi-largeur d'écran moins 236 px. */
  .corridor__map { width: calc(50% - 236px); }
}

/* -------------------------------------------------------------------------
   Pages de contenu : texte libre (mentions légales, confidentialité) et plan
   du site. Ces gabarits n'existent pas dans la maquette statique ; leur mise
   en forme reprend celle du corps d'article.
   ------------------------------------------------------------------------- */
.texte-libre { margin-top: 40px; max-width: 860px; }
.texte-libre h2 { font-size: 27px; font-weight: 700; color: var(--navy); margin: 46px 0 14px; }
.texte-libre h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 30px 0 10px; }
.texte-libre p { margin-bottom: 16px; line-height: 1.6; }
.texte-libre ul { margin: 0 0 20px 22px; list-style: disc; }
.texte-libre li { margin-bottom: 9px; line-height: 1.55; font-size: 17px; }
.texte-libre a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.texte-libre strong { font-weight: 600; }
.texte-libre dl { margin-bottom: 20px; }
.texte-libre dt { font-weight: 600; color: var(--navy); margin-top: 12px; }
.texte-libre dd { margin: 2px 0 0; color: var(--grey); }

.plan-site {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 44px 32px;
}
.plan-site__titre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--track);
}
.plan-site__liste { margin-top: 18px; }
.plan-site__liste li { margin-bottom: 11px; font-size: 17px; line-height: 1.4; }
.plan-site__liste a { color: var(--navy); }
.plan-site__liste a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.plan-site__xml { margin-top: 44px; font-size: 16px; }
.plan-site__xml a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------------------------------
   Zone de sécurité des écrans à encoche / Dynamic Island.

   Avec « viewport-fit=cover », la page occupe aussi la bande de la barre d'état :
   la bannière colorée y remonte au lieu de laisser le blanc du navigateur. On
   décale en retour les éléments qui viendraient se glisser sous l'encoche.

   env(safe-area-inset-top) vaut 0 partout ailleurs : ces règles n'ont aucun
   effet sur les écrans sans encoche ni sur le bureau.
   ------------------------------------------------------------------------- */
.header { padding-top: calc(49px + env(safe-area-inset-top, 0px)); }
.header.is-stuck { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.mobile-menu { padding-top: calc(140px + env(safe-area-inset-top, 0px)); }

/* La bannière gagne la hauteur de la barre d'état : son contenu reste à la même
   distance visuelle du haut de l'écran. */
.hero { padding-top: env(safe-area-inset-top, 0px); }
.page-hero { padding-top: env(safe-area-inset-top, 0px); }

/* Barre d'outils de l'éditeur : elle grandit de la hauteur de la barre d'état,
   pour que ses boutons restent sous l'encoche. */
.ed-bar {
  height: calc(58px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
body.ed-actif { padding-top: calc(58px + env(safe-area-inset-top, 0px)); }

/* Paysage sur écran à encoche : le contenu ne doit pas passer sous les coins
   arrondis ni sous la barre latérale. */
@media (max-width: 1280px) and (orientation: landscape) {
  .container {
    padding-left: max(40px, env(safe-area-inset-left, 0px));
    padding-right: max(40px, env(safe-area-inset-right, 0px));
  }
}