/* Catamaran Zéphyr — les deux pages d'accueil
   Produites par tools/build_home.py. Les classes sont figées : le générateur
   les écrit, cette feuille les habille.

   Servie uniquement quand $offer === 'homepage' (voir templates/zephyr/index.php).
   Les 22 landings n'en chargent pas un octet, et réciproquement : chaque page
   paie ses propres règles, pas celles des autres.

   Ce qui n'est PAS ici, parce que la charte le portait déjà :
     · les tuiles          → .cz-card--destination (components.css)
     · le hero             → .cz-hero (landing.css), identique aux landings
     · les bandeaux ink    → .cz-section--ink + .cz-call (landing.css)
     · la ligne d'horizon  → .cz-horizon (components.css)
   La carte destination existait sans qu'aucun générateur ne la produise : elle
   avait été dessinée pour cet écran. */


/* ── Le catalogue ─────────────────────────────────────────────────────────
   Trois familles, onze croisières. C'est le seul écran du site qui les montre
   toutes : depuis le retrait de VikRentItems, l'accueil et le pied de page
   sont le seul maillage vers les landings. */

.cz-catalogue > .cz-wrap > .cz-eyebrow { margin-bottom: 14px; }
.cz-catalogue h2 { max-width: 1080px; }

.cz-catalogue__basis {
  font: var(--cz-body-sm);
  color: var(--cz-text-mute);
  max-width: 760px;
  margin: 18px 0 0;
}

/* Une famille. Le filet supérieur sépare les gammes sans ajouter de titre
   décoratif — la hiérarchie est portée par le h3, pas par un trait de plus. */
.cz-family {
  margin-top: 64px;
  padding-top: 40px;
  border-top: var(--cz-hairline) solid var(--cz-line);
}

.cz-family__title {
  font: var(--cz-chapter);
  color: var(--cz-ink);
  margin: 0;
}

.cz-family__range {
  font: var(--cz-body);
  color: var(--cz-text);
  max-width: 720px;
  margin: 10px 0 0;
}

/* Les cartes ne portent ni bordure ni fond : le motif « grille à filets » ne
   s'applique pas ici, d'où une vraie gouttière plutôt que l'interstice de 1 px.
   `auto-fill` évite d'avoir à décider une largeur par famille — trois tuiles
   pour les sorties à la journée, cinq pour les croisières signature. */
.cz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px 24px;
  margin-top: 32px;
}

.cz-cards .cz-card__text {
  font: var(--cz-body-sm);
  color: var(--cz-text-mute);
  margin-bottom: 8px;
}

.cz-cards .cz-card__price { color: var(--cz-brass-deep); }


/* ── La vie à bord ────────────────────────────────────────────────────────
   Photo à gauche, quatre repères à droite. Les icônes sont celles du jeu
   maison (SVG inline, aucun octet réseau) — pas les PNG de l'ancien accueil,
   dont l'un venait de la démonstration « école de surf » de YOOtheme. */

.cz-aboard__inner,
.cz-boat__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

.cz-aboard__media img,
.cz-boat__media img {
  width: 100%;
  height: auto;
  display: block;
}

.cz-aboard__media,
.cz-boat__media { margin: 0; }

.cz-aboard__text > .cz-eyebrow,
.cz-boat__text > .cz-eyebrow { margin-bottom: 14px; }

.cz-aboard__text h2,
.cz-boat__text h2 { margin: 0 0 28px; }

.cz-aboard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 32px;
}

.cz-aboard__item h3 {
  font: var(--cz-product);
  color: var(--cz-ink);
  margin: 12px 0 8px;
}

.cz-aboard__item p {
  font: var(--cz-body-sm);
  color: var(--cz-text);
  margin: 0;
}

.cz-aboard__icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--cz-brass);
}

.cz-aboard__icon svg { width: 100%; height: 100%; display: block; }


/* ── Le bateau ────────────────────────────────────────────────────────────
   Trois vues intérieures et un lien vers la page du catamaran. Ce lien pointe
   une adresse réécrite : celui de l'ancien accueil partait sur
   `index.php?option=…`, que Joomla renvoyait en 301 vers l'accueil. */

/* `.cz-boat__text`, `.cz-boat__shots` et `.cz-boat__shot` sont partis dans
   `components.css` : la page du catamaran les utilise aussi, et `home.css`
   n'est servie qu'à l'accueil. Ne restent ici que la mise en page propre à la
   section d'accueil — la colonne photo, la colonne texte et le lien. */

.cz-boat__more { margin: 32px 0 0; }


/* ── Mobile ───────────────────────────────────────────────────────────────
   Même seuil que le reste de la charte : 900 px. */

@media (max-width: 900px) {
  .cz-aboard__inner,
  .cz-boat__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .cz-aboard__grid { grid-template-columns: 1fr; gap: 28px; }

  .cz-family { margin-top: 44px; padding-top: 28px; }

  .cz-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 16px; }
}