/* Catamaran Zéphyr — composants
   Chaque bloc reprend une métrique de CHARTE-GRAPHIQUE.md §6. Les valeurs ne
   s'arrondissent pas : c'est l'écart au dixième qui distingue ce système d'un
   template générique. */

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.cz-btn {
  display: inline-block;
  padding: 19px 34px;
  font: var(--cz-button);
  letter-spacing: var(--cz-ls-button);
  text-transform: uppercase;
  border-radius: var(--cz-radius);
  border: var(--cz-hairline) solid transparent;
  transition: background var(--cz-dur) var(--cz-ease),
              color var(--cz-dur) var(--cz-ease);
  white-space: nowrap;
}

.cz-btn:hover { text-decoration: none; }
.cz-btn:active { transform: scale(.99); }

.cz-btn--primary {
  background: var(--cz-ink);
  color: var(--cz-paper);
}
.cz-btn--primary:hover { background: var(--cz-ink-hover); }

.cz-btn--ghost {
  border-color: var(--cz-ink);
  color: var(--cz-ink);
}
.cz-btn--ghost:hover { background: var(--cz-linen); }

@media (max-width: 900px) {
  /* 52 px de haut minimum pour un CTA — règle mobile de la charte. */
  .cz-btn { padding: 18px 26px; min-height: 52px; }
}

/* ── Cartes ──────────────────────────────────────────────────────────────── */

.cz-card {
  background: var(--cz-paper);
  border: var(--cz-hairline) solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: var(--cz-pad-card);
  transition: background var(--cz-dur) var(--cz-ease);
  display: block;
}

.cz-card:hover { background: var(--cz-paper-warm); text-decoration: none; }

.cz-card__label {
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-brass);
  margin-bottom: 12px;
}

.cz-card__name {
  font: var(--cz-product);
  color: var(--cz-ink);
  margin-bottom: 10px;
}

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

.cz-card__price {
  font: 400 14px/1 var(--cz-text-font);
  color: var(--cz-ink);
}

/* Carte destination : l'image en 4:5, le texte dessous. */
.cz-card--destination { padding: 0; border: 0; }
.cz-card--destination img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.cz-card--destination .cz-card__body { padding: 24px 0 0; }

/* ── Bandeau factuel ─────────────────────────────────────────────────────
   Les valeurs doivent rester du texte : c'est ce que lisent Google et les
   moteurs IA. Jamais d'image de texte ici. */

.cz-facts__label {
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-label);
  margin-bottom: 10px;
}

.cz-facts__value {
  font: 300 clamp(21px, 1.9vw, 26px)/1.2 var(--cz-display);
  color: var(--cz-ink);
}

.cz-grid > .cz-facts__cell { padding: 30px var(--cz-pad-card); }

/* ── Tableau de prix ─────────────────────────────────────────────────────── */

.cz-rates th {
  background: var(--cz-paper-warm);
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-label);
  text-align: left;
  padding: 14px 20px;
  font-weight: 400;
}

.cz-rates td {
  border-top: var(--cz-hairline) solid var(--cz-line);
  padding: 20px;
  vertical-align: baseline;
}

.cz-rates__name { font: 300 21px/1.2 var(--cz-display); }
.cz-rates__duration { font: var(--cz-body-sm); color: var(--cz-text-mute); }
.cz-rates__price { font: 400 14px/1 var(--cz-text-font); text-align: right; white-space: nowrap; }

.cz-rates tr[data-featured] { background: var(--cz-ink); color: var(--cz-paper); }
.cz-rates tr[data-featured] .cz-rates__duration { color: var(--cz-line); }

/* ── Accordéon FAQ ───────────────────────────────────────────────────────
   `<details>` natif : il fonctionne sans JavaScript, il est annoncé
   correctement par les lecteurs d'écran, et il est déjà indexable. Le script
   ne fait que refermer les voisins pour n'en garder qu'un d'ouvert. */

.cz-faq__item { border-top: var(--cz-hairline) solid var(--cz-line); }
.cz-faq__item:last-of-type { border-bottom: var(--cz-hairline) solid var(--cz-line); }

.cz-faq__item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  font: 300 clamp(19px, 1.8vw, 24px)/1.3 var(--cz-display);
  list-style: none;
}

.cz-faq__item > summary::-webkit-details-marker { display: none; }

.cz-faq__item > summary::after {
  content: '+';
  color: var(--cz-brass);
  font: 300 26px/1 var(--cz-display);
  flex: none;
}

.cz-faq__item[open] > summary::after { content: '—'; }

.cz-faq__answer {
  padding: 0 0 26px;
  max-width: 720px;
  font: var(--cz-body);
  color: var(--cz-text);
}

/* ── Calendrier de disponibilités ────────────────────────────────────────── */

.cz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cz-cal__head {
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-label);
  text-align: center;
  padding-bottom: 8px;
}

.cz-cal__day {
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--cz-cal-free);
  color: var(--cz-ink);
  font: var(--cz-body-sm);
  border-radius: var(--cz-radius);
  transition: background var(--cz-dur) var(--cz-ease);
}

.cz-cal__day[data-state='booked'] {
  background: var(--cz-line);
  color: var(--cz-label-soft);
  text-decoration: line-through;
  cursor: not-allowed;
}

.cz-cal__day[data-state='selected'] { background: var(--cz-ink); color: var(--cz-paper); }
.cz-cal__day[data-state='range']    { background: var(--cz-linen); }

@media (max-width: 900px) {
  .cz-cal__day { height: 40px; }
}

/* ── Formulaire de devis ─────────────────────────────────────────────────── */

.cz-field { display: block; margin-bottom: 20px; }

.cz-field__label {
  display: block;
  font: var(--cz-eyebrow);
  letter-spacing: var(--cz-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cz-label);
  margin-bottom: 8px;
}

.cz-field input,
.cz-field select,
.cz-field textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--cz-paper);
  border: var(--cz-hairline) solid var(--cz-line);
  border-radius: var(--cz-radius);
  font: var(--cz-body);
  color: var(--cz-ink);
}

.cz-field input:focus,
.cz-field select:focus,
.cz-field textarea:focus { border-color: var(--cz-ink); }

@media (max-width: 900px) {
  /* 52 px minimum : sous cette hauteur, la saisie au pouce devient pénible et
     iOS zoome à la mise au point si la police descend sous 16 px. */
  .cz-field input,
  .cz-field select,
  .cz-field textarea { min-height: 52px; font-size: 16px; }
}

/* Puces d'effectif : des boutons radio déguisés, donc accessibles au clavier. */
.cz-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cz-chips input { position: absolute; opacity: 0; pointer-events: none; }

.cz-chips label {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 16px;
  border: var(--cz-hairline) solid var(--cz-line);
  font: var(--cz-body-sm);
  cursor: pointer;
  transition: background var(--cz-dur) var(--cz-ease);
}

.cz-chips input:checked + label { background: var(--cz-ink); color: var(--cz-paper); }
.cz-chips input:focus-visible + label { outline: 2px solid var(--cz-brass); outline-offset: 3px; }

/* ── Barre d'action mobile ───────────────────────────────────────────────
   Le CTA primaire en pleine largeur, WhatsApp intégré à la barre — jamais
   flottant par-dessus le contenu, où il masquerait un prix. */

.cz-actionbar { display: none; }

@media (max-width: 900px) {
  .cz-actionbar {
    display: grid;
    grid-template-columns: 1fr 52px;
    gap: 8px;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: 10px var(--cz-pad);
    background: var(--cz-paper);
    border-top: var(--cz-hairline) solid var(--cz-line);
  }

  .cz-actionbar__wa {
    display: grid;
    place-items: center;
    background: var(--cz-ink);
    color: var(--cz-paper);
  }

  /* Sans cette réserve, la barre recouvre la fin du contenu. */
  body { padding-bottom: 84px; }
}

/* ── Bouton WhatsApp flottant (desktop) ──────────────────────────────────── */

@media (min-width: 901px) {
  .cz-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--cz-ink);
    color: var(--cz-paper);
    font: var(--cz-button);
    letter-spacing: var(--cz-ls-button);
    text-transform: uppercase;
  }

  /* La seule forme arrondie du système, et elle est assumée : une pastille de
     statut carrée ne se lirait pas comme un statut. */
  .cz-whatsapp::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cz-whatsapp);
  }
}

/* ── Sélecteur de langue ─────────────────────────────────────────────────── */

.cz-lang ul {
  display: flex;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
  font: var(--cz-nav);
  letter-spacing: var(--cz-ls-nav);
  text-transform: uppercase;
}

.cz-lang li + li::before { content: '·'; margin-right: 8px; color: var(--cz-line); }
.cz-lang li { margin: 0; display: flex; }
.cz-lang .lang-active a { color: var(--cz-brass); }