/* Direct Trade Import Export & Technology
   Le site reprend le vocabulaire du métier : flanc de conteneur nervuré,
   numéro ISO peint sur les portes, angle coupé du logo sur les boutons,
   jaune signal des quais (et de l'étoile du drapeau de la RDC).
   Une seule famille, Archivo : étirée pour les titres comme un lettrage
   de camion, normale pour le texte. */

:root {
  --navy: #1b3461;        /* bleu du logo */
  --navy-deep: #11234a;
  --ink: #15213a;
  --muted: #4d596c;
  --steel: #c7cdd6;       /* acier du « T » */
  --steel-light: #eceff3;
  --paper: #ffffff;
  --signal: #f5c518;      /* jaune signal */
  --signal-deep: #e2b100;
  --on-navy-muted: #b8c3d6;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --chamfer: 10px;
  --font: "Archivo", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.on-dark :focus-visible {
  outline-color: var(--signal);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--signal);
  color: var(--navy-deep);
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Boutons : l'angle coupé du logo ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: transform 160ms var(--ease-out), background-color .2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active {
  transform: scale(.97);
}

/* L'anneau de focus est dessiné à l'intérieur : la découpe le couperait à l'extérieur */
.btn:focus-visible {
  outline-offset: -5px;
}

.btn-signal {
  background: var(--signal);
  color: var(--navy-deep);
}

.btn-signal:focus-visible {
  outline-color: var(--navy-deep);
}

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

.btn-navy:focus-visible {
  outline-color: var(--signal);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--signal);
  text-underline-offset: 7px;
  transition: text-decoration-color .2s ease;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .btn-signal:hover {
    background: var(--signal-deep);
  }

  .btn-navy:hover {
    background: var(--navy-deep);
  }

  .btn-text:hover {
    text-decoration-color: currentColor;
  }
}

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 12px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--steel-light);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  width: 40px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
}

.brand-name small {
  margin-top: 5px;
  font-stretch: 100%;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 15.5px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
  touch-action: manipulation;
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: transparent;
  transition: background-color .15s ease;
}

.nav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
}

.nav a[aria-current="page"]::after {
  background: var(--signal);
}

.nav .btn {
  min-height: 42px;
  margin-left: 10px;
  padding: 0 20px;
  font-size: 15px;
}

@media (hover: hover) and (pointer: fine) {
  .nav a:not(.btn):hover {
    color: var(--navy);
  }

  .nav a:not(.btn):not([aria-current="page"]):hover::after {
    background: var(--steel);
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  touch-action: manipulation;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform 200ms var(--ease-in-out);
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- Flanc de conteneur (accueil et têtes de page) ---------- */

.ribbed {
  position: relative;
  color: #fff;
  background-color: var(--navy);
  /* nervures de la tôle ondulée : un reflet, une ombre, tous les 46 px */
  background-image: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .05) 0 2px,
      transparent 2px 21px,
      rgba(0, 0, 0, .16) 21px 23px,
      transparent 23px 46px);
}

/* Longerons haut et bas, avec les pièces de coin en acier */
.ribbed::before,
.ribbed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(90deg,
      var(--steel) 0 30px,
      var(--navy-deep) 30px calc(100% - 30px),
      var(--steel) calc(100% - 30px));
}

.ribbed::before {
  top: 0;
}

.ribbed::after {
  bottom: 0;
}

.hero-inner,
.page-head-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(56px, 7vw, 96px) clamp(60px, 7vw, 92px);
}

/* Numéro de conteneur ISO 6346, chiffre de contrôle encadré comme sur les portes */
.plate {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: .06em;
  line-height: 1.1;
}

.plate b {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 2px solid currentColor;
}

.plate small {
  font-stretch: 100%;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--on-navy-muted);
}

.hero-title {
  display: grid;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(40px, 7.3vw, 104px);
  line-height: .95;
  letter-spacing: -.028em;
}

.hero-title > span {
  display: block;
  overflow: hidden;
  padding-bottom: .07em;
}

.hero-title > span > span {
  display: block;
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.hero-foot p {
  max-width: 58ch;
  font-size: 18px;
  color: var(--on-navy-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

/* Les portes du conteneur s'ouvrent : le seul mouvement automatique du site */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: doors 900ms var(--ease-in-out) both;
  }

  .hero-title > span > span {
    animation: rise 650ms var(--ease-out) both;
  }

  .hero-title > span:nth-child(1) > span {
    animation-delay: 420ms;
  }

  .hero-title > span:nth-child(2) > span {
    animation-delay: 480ms;
  }

  .hero-title > span:nth-child(3) > span {
    animation-delay: 540ms;
  }

  .plate,
  .hero-foot {
    animation: appear 500ms var(--ease-out) 650ms both;
  }
}

@keyframes doors {
  from {
    clip-path: inset(0 50% 0 50%);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rise {
  from {
    transform: translateY(105%);
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

.page-head-inner {
  padding-block: clamp(60px, 7vw, 100px);
}

.page-head h1 {
  max-width: 17ch;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: .98;
  letter-spacing: -.026em;
}

.page-head p {
  max-width: 60ch;
  margin-top: 24px;
  font-size: 18px;
  color: var(--on-navy-muted);
}

/* ---------- Sections ---------- */

.section {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}

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

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-intro:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.section-intro h2,
.h2 {
  font-stretch: 112%;
  font-weight: 750;
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: 1.03;
  letter-spacing: -.022em;
  color: var(--navy);
}

.section-intro p {
  max-width: 56ch;
  color: var(--muted);
}

.section-intro .btn-text {
  justify-self: end;
}

/* ---------- Manifeste : services en lignes, pas en cartes ---------- */

.ledger {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.5fr);
  gap: 28px 56px;
  padding-top: 32px;
  border-top: 3px solid var(--navy);
}

.ledger + .ledger {
  margin-top: clamp(48px, 6vw, 80px);
}

.ledger-head {
  position: sticky;
  top: 96px;
  align-self: start;
}

.ledger-head h3 {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  color: var(--navy);
}

.ledger-head p {
  margin-top: 12px;
  color: var(--muted);
}

.ledger-head .btn-text {
  margin-top: 8px;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 2fr) minmax(130px, 1fr);
  gap: 6px 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--steel-light);
}

.ledger-row:first-child {
  padding-top: 0;
}

.ledger-row dt {
  font-weight: 700;
}

.ledger-row dd {
  color: var(--muted);
}

.ledger-row .tools {
  font-size: 14.5px;
  color: var(--navy);
}

/* ---------- Bande sombre ---------- */

.band {
  background: var(--navy-deep);
  color: #fff;
}

.band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 72px;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}

/* Bande avec un texte puis un itinéraire en pleine largeur */
.band-stack {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}

.band h2 {
  font-stretch: 112%;
  font-weight: 750;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.band-copy p {
  max-width: 52ch;
  margin-top: 18px;
  color: var(--on-navy-muted);
}

.band-copy .btn {
  margin-top: 28px;
}

.checklist {
  list-style: none;
}

.checklist li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 20px 0 20px 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.checklist li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 29px;
  width: 10px;
  height: 10px;
  background: var(--signal);
}

.checklist strong {
  font-size: 18px;
}

.checklist span {
  color: var(--on-navy-muted);
}

/* ---------- Itinéraire : une vraie suite d'étapes ---------- */

.route {
  --stops: 5;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stops), minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  counter-reset: stop;
}

.route::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy);
}

.route > li {
  position: relative;
  padding-top: 54px;
  counter-increment: stop;
}

.route > li::before {
  content: counter(stop);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--navy);
  color: #fff;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.route h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.route p {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--muted);
}

.route ul {
  margin-top: 12px;
  list-style: none;
  font-size: 15px;
}

.route ul li {
  padding: 4px 0;
  border-top: 1px solid var(--steel-light);
}

.band .route::before {
  background: rgba(255, 255, 255, .3);
}

.band .route > li::before {
  background: var(--signal);
  color: var(--navy-deep);
}

.band .route h3 {
  color: #fff;
}

.band .route p {
  color: var(--on-navy-muted);
}

/* ---------- Réalisations ---------- */

.work {
  list-style: none;
  border-top: 3px solid var(--navy);
}

.work-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr) minmax(170px, 1fr);
  gap: 8px 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--steel-light);
}

.work-cat {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
}

.work-row h3 {
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--navy);
}

.work-row h3 + p {
  margin-top: 6px;
  color: var(--muted);
}

.work-result {
  font-weight: 700;
}

.work + .section-intro {
  margin-top: clamp(56px, 7vw, 96px);
}

/* ---------- Listes simples ---------- */

.ticks {
  list-style: none;
  margin-top: 20px;
}

.ticks li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--steel-light);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  background: var(--signal);
}

.columns-list {
  columns: 3 220px;
  column-gap: 40px;
  list-style: none;
  border-top: 3px solid var(--navy);
  padding-top: 8px;
}

.columns-list li {
  break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid var(--steel-light);
  font-weight: 600;
}

/* Deux colonnes séparées par un filet, pour deux idées en regard */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 3px solid var(--navy);
}

.pair > * {
  padding: 32px 0;
}

.pair > :first-child {
  padding-right: clamp(24px, 4vw, 56px);
  border-right: 1px solid var(--steel);
}

.pair > :last-child {
  padding-left: clamp(24px, 4vw, 56px);
}

.pair h3 {
  font-stretch: 112%;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 750;
  line-height: 1.1;
  color: var(--navy);
}

.pair .kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.pair p {
  margin-top: 12px;
  color: var(--muted);
}

/* ---------- Images : en bichromie bleue, pour unifier les visuels ---------- */

.duotone {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
}

/* Les blancs deviennent bleu du logo, les noirs restent noirs */
.duotone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.2);
  mix-blend-mode: multiply;
}

.figure {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 112px);
}

.figure .duotone {
  aspect-ratio: 21 / 8;
}

.figure-after-band {
  padding-top: clamp(64px, 8vw, 112px);
}

.figure figcaption .btn-text {
  display: flex;
  width: fit-content;
  margin-top: 6px;
}

.figure figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 48px;
  margin-top: 20px;
}

.figure figcaption strong {
  font-stretch: 112%;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 750;
  line-height: 1.1;
  color: var(--navy);
}

.figure figcaption span {
  color: var(--muted);
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

.gallery .duotone {
  aspect-ratio: 4 / 3;
}

.gallery figcaption {
  margin-top: 12px;
  font-weight: 650;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 880px;
  border-top: 3px solid var(--navy);
}

.faq-item {
  border-bottom: 1px solid var(--steel-light);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  font-weight: 650;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

/* Un « + » dessiné, qui tourne en « × » */
.faq-question::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 16px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 16px no-repeat;
  transition: transform 200ms var(--ease-out);
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease-out);
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer > * {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.faq-item.open .faq-answer > * {
  opacity: 1;
}

.faq-answer p {
  max-width: 68ch;
  color: var(--muted);
}

.faq-answer p::after {
  content: "";
  display: block;
  height: 22px;
}

/* ---------- Onglets (Technologie) ---------- */

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}

.tab-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--steel);
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color .2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.tab-btn:active {
  transform: scale(.97);
}

.tab-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .tab-btn:hover {
    border-color: var(--navy);
  }
}

/* Copie « active » de la barre, découpée sur l'onglet choisi : fond et texte glissent ensemble */
.tabs-nav.has-active-copy {
  position: relative;
}

.tabs-nav.has-active-copy > .tab-btn.active {
  background: #fff;
  border-color: var(--steel);
  color: var(--ink);
}

.tabs-active-copy {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  transition: clip-path 250ms var(--ease-in-out);
}

.tabs-active-copy .tab-btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(6px);
  }
}

.solution {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px 72px;
}

.solution h2 {
  font-stretch: 112%;
  font-weight: 750;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
}

.solution h2 + p {
  margin-top: 14px;
  color: var(--muted);
}

.notes {
  align-self: start;
  border-top: 3px solid var(--navy);
}

.note {
  padding: 20px 0;
  border-bottom: 1px solid var(--steel-light);
}

.note h3 {
  font-size: 18px;
  font-weight: 700;
}

.note p {
  margin-top: 4px;
  color: var(--muted);
}

.note small {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--navy);
}

/* ---------- À propos ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--steel);
}

.facts div {
  padding-top: 16px;
}

.facts dt {
  font-size: 14.5px;
  color: var(--muted);
}

.facts dd {
  margin-top: 4px;
  font-stretch: 112%;
  font-weight: 750;
  font-size: 20px;
  color: var(--navy);
}

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.values div {
  padding-top: 20px;
  border-top: 3px solid var(--navy);
}

.values h3 {
  font-size: 20px;
  font-weight: 750;
  color: var(--navy);
}

.values p {
  margin-top: 8px;
  color: var(--muted);
}

.person {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 72px);
  padding-block: 40px;
  border-top: 3px solid var(--navy);
}

.person + .person {
  margin-top: 24px;
}

.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  background: var(--steel-light);
}

.person-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.person h3 {
  margin-top: 6px;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--navy);
}

.person-bio {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--muted);
}

.expertise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 32px;
  margin-top: 28px;
}

.expertise div {
  padding: 14px 0;
  border-top: 1px solid var(--steel-light);
}

.expertise dt {
  font-weight: 700;
}

.expertise dd {
  font-size: 15.5px;
  color: var(--muted);
}

.legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px 64px;
  padding-top: 32px;
  border-top: 3px solid var(--navy);
}

.legal-copy p + p {
  margin-top: 14px;
}

.legal-copy p {
  color: var(--muted);
}

.legal-copy .btn {
  margin-top: 24px;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  gap: 48px clamp(40px, 6vw, 96px);
}

.channels {
  border-top: 3px solid var(--navy);
}

.channels div {
  padding: 18px 0;
  border-bottom: 1px solid var(--steel-light);
}

.channels dt {
  font-size: 14.5px;
  color: var(--muted);
}

.channels dd {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.channels dd a {
  text-decoration: none;
}

.channels dd + dd {
  margin-top: 4px;
}

.channels .btn-text {
  font-size: 16px;
  min-height: 36px;
}

@media (hover: hover) and (pointer: fine) {
  .channels dd a:not(.btn-text):hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}

.contact-aside h2 {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 750;
  color: var(--navy);
}

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 24px;
  align-content: start;
}

.form .full {
  grid-column: 1 / -1;
}

.form label {
  display: grid;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
}

.form .optional {
  font-weight: 400;
  color: var(--muted);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--steel);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 16px; /* 16 px minimum : iOS ne zoome pas sur le champ */
  color: var(--ink);
  transition: border-color .15s ease;
}

.form textarea {
  min-height: 150px;
  resize: vertical;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 0;
  border-color: var(--navy);
}

.form .btn {
  justify-self: start;
}

/* ---------- Appel final ---------- */

.cta-band {
  background: var(--signal);
  color: var(--navy-deep);
}

.cta-inner {
  display: grid;
  gap: 20px;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}

.cta-band h2 {
  max-width: 17ch;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(34px, 5.6vw, 80px);
  line-height: .98;
  letter-spacing: -.026em;
}

.cta-band p {
  max-width: 52ch;
  font-size: 18px;
}

.cta-band .actions {
  margin-top: 12px;
}

.cta-band .btn-text {
  text-decoration-color: var(--navy-deep);
}

/* ---------- Pied de page ---------- */

.site-footer {
  padding: 64px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--navy-deep);
  color: var(--on-navy-muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  max-width: var(--max);
  margin-inline: auto;
}

.footer-brand img {
  width: 60px;
  padding: 8px;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.footer-name {
  margin-top: 18px;
  font-stretch: 112%;
  font-weight: 750;
  color: #fff;
}

.footer-brand p + p {
  margin-top: 6px;
  max-width: 36ch;
}

.footer-links,
.footer-contact {
  display: grid;
  gap: 2px;
  align-content: start;
}

.site-footer a {
  justify-self: start;
  padding: 5px 0;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--max);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
}

/* ---------- Menu replié ---------- */

@media (max-width: 1180px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: calc(76px + env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    display: grid;
    gap: 2px;
    width: min(340px, calc(100% - 24px));
    padding: 10px;
    background: #fff;
    border: 1px solid var(--steel-light);
    box-shadow: 0 24px 60px rgba(17, 35, 74, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transform: scale(.95);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }

  .nav a {
    padding: 13px 12px;
  }

  .nav a:not(.btn)::after {
    left: 12px;
    right: auto;
    width: 24px;
    bottom: 6px;
  }

  .nav .btn {
    margin: 8px 0 0;
  }
}

/* ---------- Tablette ---------- */

@media (max-width: 900px) {
  .section-intro,
  .band-inner,
  .solution,
  .contact-grid,
  .legal,
  .figure figcaption {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-intro .btn-text {
    justify-self: start;
  }

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

  .ledger-head {
    position: static;
  }

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

  .work-result {
    grid-column: 2;
  }

  .route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .route::before {
    display: none;
  }

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

  .facts div:nth-child(n + 3) {
    margin-top: 16px;
  }

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

  .person img {
    max-width: 360px;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Téléphone ---------- */

@media (max-width: 620px) {
  body {
    font-size: 16.5px;
  }

  .brand-name small {
    display: none;
  }

  .plate {
    justify-self: start;
    align-items: flex-start;
  }

  /* Sur un écran étroit, la largeur normale garde les mots entiers */
  .hero-title {
    font-stretch: 100%;
    font-size: clamp(29px, 9.3vw, 52px); /* « les marchandises » tient sur une ligne dès 320 px */
    letter-spacing: -.03em;
  }

  .page-head h1,
  .cta-band h2 {
    font-stretch: 108%;
  }

  .hero-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-foot p,
  .page-head p {
    font-size: 17px;
  }

  .ledger-row,
  .work-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-result {
    grid-column: auto;
  }

  .route {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .route > li {
    padding: 0 0 28px 54px;
  }

  .route::before {
    display: block;
    top: 0;
    bottom: 0;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .route > li:last-child {
    padding-bottom: 0;
  }

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

  .pair > :first-child {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--steel);
  }

  .pair > :last-child {
    padding-left: 0;
  }

  .values,
  .expertise,
  .gallery,
  .form,
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts div,
  .facts div:nth-child(n + 3) {
    margin-top: 0;
    padding-block: 12px;
    border-bottom: 1px solid var(--steel-light);
  }

  .figure .duotone {
    aspect-ratio: 4 / 3;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .actions .btn {
    width: 100%;
  }
}

/* ---------- Préférences ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn:active,
  .tab-btn:active {
    transform: none;
  }

  .nav,
  .nav.open {
    transform: none;
  }

  .tab-panel.active {
    transform: none;

    @starting-style {
      transform: none;
    }
  }

  .faq-answer,
  .tabs-active-copy,
  .nav-toggle span,
  .faq-question::after {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .ledger-row,
  .work-row,
  .faq-item,
  .channels div,
  .note {
    border-color: var(--muted);
  }
}