/* Catamaran Zéphyr — mise en page
   Navigation, pied de page, marges, et la règle qui fait tout le dessin :
   les grilles se construisent en `gap: 1px` sur un fond de filet. Les traits
   entre les cellules ne sont pas des bordures, ce sont les interstices. */

/* ── Marge de page ───────────────────────────────────────────────────────── */

:root { --cz-pad: var(--cz-pad-x); }

@media (max-width: 900px) {
  :root { --cz-pad: 16px; }
}

.cz-wrap {
  padding-inline: var(--cz-pad);
  margin-inline: auto;
  max-width: 1440px;
}

/* ── Navigation ──────────────────────────────────────────────────────────
   En flux, pas en `fixed` : la barre du handoff n'est pas collante en desktop,
   et une barre flottante mangerait 100 px du premier écran sur mobile. */

.cz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--cz-pad);
  background: var(--cz-paper);
  border-bottom: var(--cz-hairline) solid var(--cz-line);
}

.cz-nav__logo img { height: 100px; width: auto; }

.cz-nav__links ul {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-nav__links li { margin: 0; }

.cz-nav__links a {
  font: var(--cz-nav);
  letter-spacing: var(--cz-ls-nav);
  text-transform: uppercase;
  color: var(--cz-ink);
}

.cz-nav__links .current > a { color: var(--cz-brass); }

.cz-nav__end {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cz-nav__burger { display: none; }

@media (max-width: 900px) {
  .cz-nav { padding: 14px var(--cz-pad); gap: 12px; }
  .cz-nav__logo img { height: 38px; }
  .cz-nav__links { display: none; }
  /* Le CTA quitte la barre haute : il vit dans la barre d'action basse, où le
     pouce l'atteint. En garder deux ferait deux CTA primaires concurrents. */
  .cz-nav__end .cz-btn--primary { display: none; }
  .cz-nav__burger {
    display: block;
    width: 44px; height: 44px;   /* cible tactile minimale de la charte */
    position: relative;
  }
  /* Trois filets de 1 px, dessinés en pseudo-éléments. Un `box-shadow` aurait
     fait le même trait en une ligne, mais le système n'admet aucune ombre :
     le contrôle de recette est un `grep`, il ne distingue pas les intentions. */
  .cz-nav__burger span[aria-hidden],
  .cz-nav__burger span[aria-hidden]::before,
  .cz-nav__burger span[aria-hidden]::after {
    position: absolute;
    left: 10px; right: 10px;
    height: 1px;
    background: var(--cz-ink);
    content: '';
  }
  .cz-nav__burger span[aria-hidden] { top: 50%; }
  .cz-nav__burger span[aria-hidden]::before { top: -7px; }
  .cz-nav__burger span[aria-hidden]::after  { top: 7px; }
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */

.cz-breadcrumbs {
  padding: 18px var(--cz-pad);
  border-bottom: var(--cz-hairline) solid var(--cz-line);
}

.cz-breadcrumbs ol,
.cz-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-nav);
  text-transform: uppercase;
  color: var(--cz-label);
}

.cz-breadcrumbs li { margin: 0; display: flex; gap: 10px; align-items: center; }
.cz-breadcrumbs li + li::before { content: '→'; color: var(--cz-brass); }
.cz-breadcrumbs [aria-current='page'] { color: var(--cz-ink); }

/* ── Contenu ─────────────────────────────────────────────────────────────── */

main { display: block; }

/* Les pages de service (FAQ, CGV, confidentialité) sont du texte long : une
   colonne mesurée, pas la pleine largeur. Les gabarits de prestation gèrent
   leur propre mise en page section par section. */
.cz-prose {
  padding: 64px var(--cz-pad) 96px;
  max-width: 860px;
  margin-inline: auto;
}

.cz-prose h2 { margin: 2em 0 .6em; }
.cz-prose h3 { margin: 1.6em 0 .5em; }
.cz-prose h2:first-child, .cz-prose h3:first-child { margin-top: 0; }

/* ── Grilles à filets ────────────────────────────────────────────────────
   Le motif signature du système. Le fond porte la couleur du filet, les
   cellules portent celle du papier : l'écart de 1 px devient le trait. */

.cz-grid {
  display: grid;
  gap: var(--cz-hairline);
  background: var(--cz-line);
  border-block: var(--cz-hairline) solid var(--cz-line);
}

.cz-grid > * { background: var(--cz-paper); }

/* Sur fond lin, le filet doit s'assombrir pour rester lisible. */
.cz-section--linen .cz-grid { background: var(--cz-line-linen); }
.cz-section--linen .cz-grid > * { background: var(--cz-linen); }

.cz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cz-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 900px) {
  .cz-grid--3, .cz-grid--4, .cz-grid--5 { grid-template-columns: 1fr; }
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.cz-section { padding: 96px 0; }
.cz-section--linen { background: var(--cz-linen); }
.cz-section--ink { background: var(--cz-ink); color: var(--cz-paper); }
.cz-section--ink h1, .cz-section--ink h2, .cz-section--ink h3 { color: var(--cz-paper); }

@media (max-width: 900px) {
  .cz-section { padding: 56px 0; }
}

/* ── Ligne d'horizon signature ───────────────────────────────────────────
   Deux filets de 2 px encadrant les coordonnées du port d'attache. Elle
   apparaît en pied de page, en tête de galerie, et en séparateur de section. */

.cz-horizon {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 40px var(--cz-pad);
}

.cz-horizon__rule {
  flex: 1;
  height: var(--cz-horizon);
  background: var(--cz-brass);
}

.cz-horizon__gps {
  font: var(--cz-coords);
  letter-spacing: var(--cz-ls-coords);
  color: var(--cz-brass);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cz-horizon { gap: 12px; padding: 28px var(--cz-pad); }
  .cz-horizon__gps { font-size: 9px; letter-spacing: 1.6px; }
}

/* ── Pied de page ────────────────────────────────────────────────────────── */

.cz-footer {
  border-top: var(--cz-hairline) solid var(--cz-ink);
  padding-top: 64px;
}

.cz-nap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 0 var(--cz-pad) 48px;
  font: var(--cz-body-sm);
  font-style: normal;         /* <address> italique par défaut */
  color: var(--cz-text);
  text-align: center;
}

.cz-nap strong { color: var(--cz-ink); }

/* ── Page d'erreur ───────────────────────────────────────────────────────── */

.cz-error__body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px var(--cz-pad);
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.cz-error__text { margin: 22px auto 40px; color: var(--cz-text); }

.cz-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: none;
}