/* ==========================================================================
   Kawann Supply — page « Livraison » (thème enfant hummingbird-kawann)
   Chargé après theme.css : ces règles surchargent le style Hummingbird.
   Palette et typographie : voir kawann-tokens.css (chargé avant celui-ci).

   Le balisage est dans templates/cms/page.tpl, branche $cms.id == 1.

   La page suit la même grammaire que « À propos » — en-tête illustré, blocs
   respirants, cartes bordées — pour que les deux pages éditoriales se
   ressemblent. Ce qui change ici : un en-tête marine, parce que la page
   répond à une question pratique et gagne à trancher avec le catalogue.
   ========================================================================== */

/* Le contenu CMS est habituellement du texte enrichi contraint en largeur de
   lecture ; ici c'est une mise en page pleine largeur. */
.cms-id-1 .page-content--cms {
  max-width: none;
  padding: 0;
}

.kawann-livraison {
  display: flex;
  flex-direction: column;
  gap: 56px;
  color: var(--kawann-marine);
}

/* ==========================================================================
   1. En-tête : titre, question, promesse — photo de la marina à droite
   ========================================================================== */

.kawann-livraison__hero {
  display: grid;
  /* La colonne texte reste la plus large : c'est elle qui porte la promesse,
     la photo situe le lieu. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--kawann-marine);
  color: var(--kawann-text-on-dark);
}

.kawann-livraison__hero-texte {
  padding: 48px 44px;
}

.kawann-livraison__titre {
  margin: 0 0 6px;
  font-size: 2.25rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.15;
  color: var(--kawann-blanc);
}

/* La question relance le titre : elle est plus petite, en Soleil, et sert de
   sur-titre à la promesse qui suit. */
.kawann-livraison__question {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-jaune);
}

.kawann-livraison__intro {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.75;
  /* Blanc légèrement adouci : 13,9:1 sur le marine, bien au-delà du seuil AA,
     sans la dureté du blanc pur sur une grande surface de texte. */
  color: color-mix(in srgb, var(--kawann-blanc) 90%, var(--kawann-marine));
}

.kawann-livraison__hero-image {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   2. Structure commune aux sections
   ========================================================================== */

.kawann-livraison__section-titre {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.2;
  color: var(--kawann-marine);
}

/* Filet Soleil sous le titre de section : le même repère visuel que sur la
   page d'accueil, en plus discret. */
.kawann-livraison__section-titre::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.kawann-livraison__accroche {
  margin: 0 0 24px;
  font-size: 1rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.75;
  color: var(--kawann-text-muted);
}

/* ==========================================================================
   3. Préparation de la commande : trois faits côte à côte
   ========================================================================== */

.kawann-livraison__faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-livraison__fait {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border: 1px solid var(--kawann-border);
  border-radius: 14px;
  background: var(--kawann-blanc);
}

.kawann-livraison__fait-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--kawann-soleil-wash);
  color: var(--kawann-marine);
}

.kawann-livraison__fait-icone svg { width: 23px; height: 23px; }

.kawann-livraison__fait-texte {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.7;
  color: var(--kawann-text-muted);
}

/* ==========================================================================
   4. Les deux modes de livraison
   ========================================================================== */

.kawann-livraison__modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.kawann-livraison__mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border: 1px solid var(--kawann-border);
  /* Le liseré Horizon distingue les deux choix des simples faits ci-dessus :
     ce sont les seules cartes de la page qui appellent une décision. */
  border-top: 3px solid var(--kawann-horizon);
  border-radius: 14px;
  background: var(--kawann-surface);
}

.kawann-livraison__mode-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kawann-blanc);
  border: 1px solid var(--kawann-border-clair);
  color: var(--kawann-horizon);
}

.kawann-livraison__mode-icone svg { width: 26px; height: 26px; }

.kawann-livraison__mode-nom {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-marine);
}

.kawann-livraison__mode-desc {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.7;
  color: var(--kawann-text-muted);
}

/* Précisions communes aux deux modes : date souhaitée, calcul des frais,
   illustration du camion à droite. */
.kawann-livraison__precisions {
  display: grid;
  /* La colonne image est bornée : au-delà de ~330px l'illustration écraserait
     le texte, en-deçà de 240px le camion devient illisible. */
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  align-items: center;
  gap: 32px;
  padding: 26px 28px;
  border-radius: 14px;
  /* Bleu très pâle dérivé du Bleu Horizon, comme le récit de « À propos ». */
  background: color-mix(in srgb, var(--kawann-horizon) 7%, white);
}

.kawann-livraison__precisions-texte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kawann-livraison__precisions p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.8;
  color: var(--kawann-marine);
}

.kawann-livraison__precisions-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ==========================================================================
   5. Bon à savoir : l'encart de vigilance
   ========================================================================== */

.kawann-livraison__avis {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--kawann-jaune);
  /* Barre Soleil à gauche : le seul endroit de la page qui demande une action
     au lecteur, il doit se repérer au survol de la page. */
  border-left: 4px solid var(--kawann-soleil);
  border-radius: 14px;
  background: var(--kawann-soleil-wash);
}

.kawann-livraison__avis-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* Soleil assombri : 5,73:1 sur le fond crème de l'encart. */
  color: var(--kawann-soleil-ink);
}

.kawann-livraison__avis-icone svg { width: 26px; height: 26px; }

.kawann-livraison__avis-texte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kawann-livraison__avis-titre {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-marine);
}

.kawann-livraison__avis-texte p {
  margin: 0;
  max-width: 78ch;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.8;
  color: var(--kawann-marine);
}

/* ==========================================================================
   6. Adaptations aux petites largeurs
   ========================================================================== */

@media (max-width: 991.98px) {
  .kawann-livraison { gap: 40px; }

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

  /* Empilée, la photo n'a plus à égaler la hauteur de la colonne texte : on
     lui rend un cadrage plus large et moins haut, et elle passe au-dessus du
     texte, comme une bannière. */
  .kawann-livraison__hero-image {
    order: -1;
    min-height: 0;
    max-height: 220px;
  }

  .kawann-livraison__hero-texte { padding: 32px 26px; }
  .kawann-livraison__titre { font-size: 1.875rem; }
  .kawann-livraison__intro { max-width: none; }

  .kawann-livraison__precisions,
  .kawann-livraison__avis { padding: 22px 20px; }

  /* Empilé, le bloc met l'illustration au-dessus du texte : elle sert alors
     d'ouverture au propos plutôt que de le repousser sous la ligne de flottaison. */
  .kawann-livraison__precisions {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .kawann-livraison__precisions-image {
    order: -1;
    max-width: 380px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .kawann-livraison__titre { font-size: 1.625rem; }
  .kawann-livraison__fait { padding: 22px 18px; }
  .kawann-livraison__mode { padding: 24px 20px; }

  /* Sous 576px, l'icône et le texte de l'encart s'empilent : côte à côte, la
     colonne de texte tomberait sous les 20 caractères par ligne. */
  .kawann-livraison__avis { flex-direction: column; gap: 12px; }
}