/* ==========================================================================
   Kawann Supply — page d'accueil (thème enfant hummingbird-kawann)
   Basé sur la maquette « Kawann Homepage » (Claude Design).
   ========================================================================== */

/* Palette et typographie : voir kawann-tokens.css. Aucune couleur en dur
   dans ce fichier — uniquement des jetons de la charte. */

.page-content--home {
  padding: 0;
  margin: 0;
  /* Le thème parent définit ce conteneur en CSS Grid avec gap:2.5rem, ce
     qui espace automatiquement TOUTES les sections (hero -> réassurance
     y compris). On neutralise ce gap : chaque section gère déjà son
     propre espacement via son padding interne (.kawann-section). */
  gap: 0;
}

/* Les enfants directs sont des items de cette grille et portent tous
   « max-width: 1280px; margin: 0 auto » pour se centrer au-delà de 1280px.
   Or des marges auto DÉSACTIVENT l'étirement (justify-self: stretch) d'un
   item de grille : la boîte passe alors en dimensionnement fit-content,
   dont le plancher est la largeur min-content du contenu. Résultat, la
   section « Nos produits du moment » restait bloquée à 604px et
   élargissait le document entier — scroll horizontal sur toute la page
   sous ~620px de large (idem .kawann-reassurance sous ~310px).
   width: 100% redonne à l'item la largeur de sa piste ; les marges auto
   n'ont alors plus d'espace libre à absorber sous 1280px, et le centrage
   au-delà reste intact. min-width: 0 neutralise en complément la taille
   minimale automatique des items de grille.
   Le carrousel interne (overflow-x: auto, voir .kawann-products-grid en
   <= 767.98px) reprend dès lors son rôle de zone défilable. */
.page-content--home > * {
  width: 100%;
  min-width: 0;
}

.kawann-placeholder-media {
  background: repeating-linear-gradient(135deg, var(--kawann-placeholder-a) 0 6px, var(--kawann-placeholder-b) 6px 12px);
}

/* ============ HERO ============ */
/* Classes utilisées ici, mappées sur le bloc demandé :
   .hero          -> .kawann-hero
   .hero__bg      -> .kawann-hero__bg   (balise <img>, plus fiable qu'un
                                          background-image CSS)
   .hero::before  -> .kawann-hero::before
   .hero::after   -> .kawann-hero::after
   .hero__content -> .kawann-hero__container (wrapper déjà existant qui
                                          englobe titre/sous-titre/recherche) */
.kawann-hero {
  position: relative;
  width: 100%;
  /* Bandeau pleine largeur : convention e-commerce — un bloc qui porte un
     FOND (ici une photo) va d'un bord à l'autre, seul son CONTENU reste sur
     la colonne (voir .kawann-hero__container). C'est déjà le comportement de
     .header-top, .header-bottom, .ps-emailsubscription et .footer ; le hero
     était le seul bloc coloré à s'arrêter à 1280, d'où l'effet de boîte
     flottante sur grand écran.
     Hauteur : le plafond passe de 400 à 560px. En pleine largeur, un cadre
     de 400px donnerait un ratio de 4.2 face à une photo en 2.4, soit 43% de
     l'image perdue ; à 560px on retombe à ~3.0 et ~20% de perte.
     Réduit à 480 : bandeau moins haut, le rognage se fait par le haut
     (voir object-position sur .kawann-hero__bg) pour garder le voilier
     et la tortue visibles en bas. */
  height: clamp(300px, 30vw, 480px);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--kawann-marine);
}

.kawann-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 70% horizontal : cadrage poussé à droite pour garder le voilier et la
     tortue visibles. 75% vertical (au lieu de "center") : le rognage se
     fait par le HAUT de la photo (ciel/mât) plutôt que d'être réparti de
     façon égale haut/bas, pour garder la tortue bien visible en bas. */
  object-position: 70% 75%;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
  box-shadow: none;
  border-radius: 0;
  opacity: 1;
}

/* Voile flou (pas un dégradé à bords nets) : décalé du bord gauche,
   ne touche ni le haut ni le bas ni la gauche du slider — bords adoucis
   par le flou pour se fondre dans la photo au lieu de trancher dessus. */
.kawann-hero::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  /* Le voile doit démarrer avant le texte, qui est calé sur la colonne et
     non sur le bord de la fenêtre depuis que le hero est pleine largeur.
     max() : au-delà de 1280px on se cale 40px avant le bord de la colonne ;
     en dessous, la colonne EST la fenêtre et on retombe sur -40px. Valeur
     négative = le bord net sort du cadre (overflow: hidden du hero), donc le
     flou est à pleine opacité derrière le texte au lieu de s'y estomper. */
  left: max(-40px, calc(50% - var(--kawann-colonne) / 2 - 40px));
  width: min(50%, 720px);
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(40px);
  border-radius: 40px;
}

.kawann-hero::after {
  content: none;
}

.kawann-hero__container {
  /* Superposé à l'image (pas de min-height : la hauteur du bloc est
     désormais dictée par l'image via .kawann-hero__bg). */
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Le hero est désormais pleine largeur : c'est CE conteneur qui porte la
     colonne, sinon le titre se collerait au bord de la fenêtre. En position
     absolue avec inset: 0, des marges auto centrent la boîte.
     Le retrait de 24px est celui de .kawann-section et du header, ce qui
     aligne le titre du hero sur le logo et sur « Nos catégories ».
     max-width en jeton, et non le container-md de Bootstrap dont les paliers
     (1140px entre 1200 et 1399px) feraient décrocher le titre. */
  max-width: var(--kawann-colonne);
  margin-inline: auto;
  padding-right: var(--kawann-colonne-retrait);
  padding-left: var(--kawann-colonne-retrait);
}

@media (max-width: 767.98px) {
  /* En dessous de 768px, le texte FR (surtout "L'AVITAILLEMENT C'EST
     NOUS") ne tient plus sur une ligne et le titre passe sur 3 lignes :
     une hauteur figée en clamp() ne suit plus et le contenu se fait
     couper par l'overflow:hidden du hero. On repasse donc en hauteur
     pilotée par le contenu (comme un bandeau classique) : le conteneur
     redevient un bloc normal et l'image de fond se contente de couvrir
     la hauteur que le texte impose, quelle qu'elle soit. */
  .kawann-hero {
    height: auto;
    min-height: 240px;
  }

  .kawann-hero__container {
    position: static;
    /* 16px = retrait de .kawann-section sous 768px, pour rester aligné. */
    padding: 8px 16px;
  }

  .kawann-hero__bg {
    object-position: 78% center;
  }

  .kawann-hero::before {
    top: 20px;
    bottom: 20px;
    /* Même logique qu'au-dessus de 768px : le texte démarre à 16px, donc le
       voile doit être à pleine opacité avant lui — bord net sorti du cadre. */
    left: -24px;
    width: 86%;
    border-radius: 28px;
    filter: blur(28px);
  }
}

.kawann-hero__text {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: auto;
  max-width: 700px;
  /* Aucun retrait à gauche : .kawann-hero__container porte déjà les 24px
     de la colonne commune, donc le titre s'aligne pile avec le logo du
     header et les titres de section. */
  padding: 28px 24px 40px 0;
}

.kawann-hero__title {
  margin: 0 0 14px;
  font-size: 2.1rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--kawann-marine);
}

/* Deuxième ligne du titre en teinte Soleil : sur le voile clair du hero,
   le Soleil pur ne fait que 2,07:1. On garde la teinte de marque via la
   déclinaison assombrie (4,65:1 sur blanc). */
.kawann-hero__title span {
  color: var(--kawann-soleil);
}

.kawann-hero__subtitle {
  margin: 0 0 26px;
  max-width: 470px;
  font-size: 1rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.5;
  color: var(--kawann-marine);
}

.kawann-hero__search {
  background: var(--kawann-blanc);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 552px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.kawann-hero__search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}

.kawann-hero__search-icon {
  font-size: 1.15rem;
  color: var(--kawann-text-muted);
  flex: none;
}

.kawann-hero__search-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--kawann-marine);
  padding: 8px 4px;
  background: transparent;
}

/* Le outline natif est retiré ci-dessus (il tombait sur le fond blanc et
   débordait mal du champ) mais REMPLACÉ par un focus visible sur toute la
   barre — jamais de focus supprimé sans équivalent (WCAG 2.2 AA). */
.kawann-hero__search:focus-within {
  box-shadow:
    0 0 0 3px rgba(20, 38, 61, 0.45),
    0 10px 26px rgba(0, 0, 0, 0.25);
}

.kawann-hero__search-btn {
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-bold);
  font-size: 0.875rem;
  padding: 9px 22px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.kawann-hero__search-btn:hover {
  filter: brightness(1.05);
}

.kawann-hero__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.75rem;
}

.kawann-hero__tags-label {
  color: rgba(255, 255, 255, 0.75);
}

.kawann-hero__tag {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.kawann-hero__tag:hover {
  color: var(--kawann-soleil) !important;
  border-color: var(--kawann-soleil);
}

/* ============ RÉASSURANCE ============ */
/* Carte posée sous le hero, et non plus un bandeau pleine largeur : coins
   arrondis, filet Soleil en haut, onglet en accroche au centre, et un décor
   marin très pâle en fond. Quatre arguments, chacun avec sa pastille, son
   titre souligné et sa phrase, centrés. */
.kawann-reassurance {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Pleine largeur, comme le hero juste au-dessus : le fond crème et le filet
     Soleil vont d'un bord à l'autre de l'écran, et c'est un retrait latéral —
     et non un max-width — qui ramène les quatre arguments sur la colonne du
     site. Au-delà de 1280px le retrait vaut la moitié du débord ; en dessous
     il tombe à 0 et le bandeau occupe toute la largeur. */
  margin: 0;
  padding-block: 18px 17px;
  padding-inline: max(24px, calc((100% - var(--kawann-colonne)) / 2));
  /* Filet Soleil sur le seul bord haut, comme la maquette. */
  border-top: 2px solid var(--kawann-soleil);
  /* Crème très pâle : le Blanc cassé de la charte, éclairci pour rester en
     retrait du contenu. */
  background: color-mix(in srgb, var(--kawann-blanc-casse) 45%, white);
  /* Le décor déborderait des coins arrondis sans cela. */
  overflow: hidden;
}

/* Les enveloppes du carrousel ne servent qu'en mobile : display: contents les
   retire de la mise en page, si bien que les .kawann-reassurance__item
   redeviennent les enfants directs de la grille ci-dessus. */
/* Onglet centré sur le filet : un carré pivoté à 45° dont seule la pointe
   dépasse sous le bord, surmonté du chevron. */
.kawann-reassurance__onglet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 54px;
  height: 24px;
  padding-top: 2px;
  background: var(--kawann-soleil);
  /* Fanion plutôt que triangle plein : le bas reste pointu, mais la partie
     haute garde sa pleine largeur — un triangle rognait le chevron. */
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  color: var(--kawann-blanc);
  z-index: 2;
}

.kawann-reassurance__onglet svg { width: 15px; height: 15px; }

.kawann-reassurance__track,
.kawann-reassurance__set {
  display: contents;
}

/* Les points de position ne servent qu'au carrousel mobile. */
.kawann-carrousel__points { display: none; }

/* Ce bandeau et celui du pied de page disent la même chose sous la même
   forme — pastille ronde, titre, sous-titre. Ils sont donc habillés à
   l'identique : mêmes dimensions de pastille, mêmes tailles de texte, même
   séparateur. Voir .kawann-rassurance__* dans kawann-footer.css.
   Seule différence assumée : ici les arguments sont alignés à gauche et non
   centrés, pour que la première pastille tombe pile sur le bord de la
   colonne du site (67px), comme le logo, le titre du hero et les titres de
   section. */
/* Argument centré : pastille, titre souligné, phrase. Aligné en haut pour
   que les quatre titres partent de la même ligne, quel que soit le nombre
   de lignes de leur phrase. */
.kawann-reassurance__item {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}

/* Séparateur haut et fin entre les colonnes, jamais avant la première. */
.kawann-reassurance__item + .kawann-reassurance__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--kawann-border);
}

.kawann-reassurance__texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.kawann-reassurance__titre {
  position: relative;
  padding-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-marine);
}

/* Le petit trait Soleil sous chaque titre. */
.kawann-reassurance__titre::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

.kawann-reassurance__desc {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.5;
  color: var(--kawann-text-muted);
}

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

.kawann-reassurance__icon svg {
  width: 24px;
  height: 24px;
}

/* Pictogrammes monochromes marine, conformément à la planche
   « PICTOGRAMMES » de la charte. Les cinq teintes précédentes (bleu, jaune,
   sarcelle, vert) étaient hors charte, et deux d'entre elles passaient sous
   les 3:1 exigés pour un pictogramme porteur de sens (WCAG 1.4.11). */
.kawann-reassurance__icon--delivery,
.kawann-reassurance__icon--order,
.kawann-reassurance__icon--boat,
.kawann-reassurance__icon--team {
  color: var(--kawann-marine);
}

.kawann-reassurance__label {
  font-weight: var(--kawann-weight-text);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--kawann-marine);
}

/* ============ SECTIONS GÉNÉRIQUES ============ */
.kawann-section {
  max-width: var(--kawann-colonne);
  margin: 0 auto;
  padding: 44px 24px 0;
}

.kawann-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.kawann-section__head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kawann-section__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: -0.01em;
  color: var(--kawann-marine);
}

/* Variante « kicker » : titre en capitales, plus compact. Limité à la section
   « Nos catégories » pour l'instant — les autres titres gardent leur casse. */
.kawann-section__title--kicker {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kawann-section__link {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine) !important;
  border-bottom: 2px solid var(--kawann-soleil);
  padding-bottom: 2px;
  white-space: nowrap;
}

.kawann-section__link:hover {
  color: var(--kawann-link-hover) !important;
}

.kawann-badge {
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-bold);
  letter-spacing: 0.04em;
  color: var(--kawann-soleil-ink);
  background: var(--kawann-soleil-wash);
  padding: 6px 10px;
  border-radius: 5px;
}

/* ============ RAYONS ============
   La cliente veut voir TOUS les rayons sur l'accueil (douze aujourd'hui, et le
   nombre suit le back-office), chacun avec sa photo de produits sur fond
   blanc. La grille s'ajuste d'elle-même au nombre de rayons.

   Les visuels partagent tous le même cadrage (groupe de produits centré, fond
   blanc, 760 × 317) : la carte les affiche donc en 12/5 sans recadrage, et
   c'est ce qui donne à la rangée son alignement. Un rayon créé au back-office
   n'a pas encore sa photo : la carte montre alors le pictogramme du rayon sur
   une pastille sable, au même format, pour que la grille reste régulière.
   ================================== */
.kawann-rayons-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kawann-rayon-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kawann-border);
  border-radius: 12px;
  background-color: var(--kawann-blanc);
  color: inherit !important;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.kawann-rayon-card:hover,
.kawann-rayon-card:focus-visible {
  border-color: var(--kawann-soleil);
  box-shadow: 0 6px 18px rgb(20 38 61 / 10%);
  transform: translateY(-2px);
}

.kawann-rayon-card__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 12 / 5;
  padding: 8px;
  background-color: var(--kawann-blanc);
}

/* contain et non cover : la cliente veut voir la photo entière, pas un
   recadrage. Les visuels sont tous en 760 × 317 sur fond blanc, donc les
   quelques pixels laissés libres dans le cadre 12/5 ne se voient pas. */
.kawann-rayon-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Repli sans photo : pastille sable, comme dans la colonne du catalogue. */
.kawann-rayon-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kawann-soleil-wash);
  color: var(--kawann-marine);
}

.kawann-rayon-card__icone svg {
  display: block;
  width: 26px;
  height: 26px;
}

.kawann-rayon-card__texte {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--kawann-border);
}

.kawann-rayon-card__nom {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1.25;
  color: var(--kawann-marine);
  /* break-word et non anywhere : on ne coupe un mot que s'il ne tient
     vraiment pas, sinon « BOULANGERIE » se scindait en plein milieu. */
  overflow-wrap: break-word;
}

.kawann-rayon-card__compte {
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
}

/* ============ BANNIÈRE PROMOTIONS ============ */
.kawann-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fond de sécurité : le texte blanc n'est jamais posé sur du vide tant que
     la photo n'est pas chargée, ou si elle manque. */
  background: var(--kawann-marine-clair);
  border-radius: 12px;
  padding: 34px 32px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kawann-promo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage vers la droite de la photo : le voilier se retrouve du côté
     resté clair, le côté chargé passe sous le texte. */
  object-position: 65% center;
}

/* Voile marine, réduit au minimum : la photo fournie porte déjà son propre
   fondu marine sur la moitié gauche, là où vit le texte. On n'ajoute qu'un
   léger renfort à gauche, presque rien à droite pour laisser voir les
   rayons. Si la photo change pour une image claire à gauche, ce voile ne
   suffira plus au contraste du texte blanc (WCAG 2.2 AA, 1.4.3). */
.kawann-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(11, 26, 46, 0.42) 0%,
    rgba(11, 26, 46, 0.30) 45%,
    rgba(11, 26, 46, 0.08) 75%,
    rgba(11, 26, 46, 0) 100%
  );
}

/* Empilé, le texte court sur toute la largeur et passe au-dessus des rayons
   clairs : un voile uniforme et modéré reste nécessaire à la lecture. */
@media (max-width: 991.98px) {
  .kawann-promo::before {
    background: rgba(11, 26, 46, 0.62);
  }
}

.kawann-promo__text {
  flex: 1 1 320px;
  min-width: 0;
}

/* Pastille « PROMOTIONS » : Soleil plein, texte marine — 7,40:1. */
.kawann-promo__badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.08em;
}

.kawann-promo__title {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: var(--kawann-weight-title);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--kawann-blanc);
}

.kawann-promo__value {
  color: var(--kawann-soleil);
}

.kawann-promo__subtitle {
  margin: 8px 0 0;
  font-size: clamp(0.9rem, 1.3vw, 1.0625rem);
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.02em;
  color: var(--kawann-blanc);
}

.kawann-promo__desc {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  /* 0.82 d'opacité sur le voile le plus clair traversé par le texte reste
     au-dessus de 4,5:1 — vérifié. */
  color: rgba(255, 255, 255, 0.82);
}

/* CTA en contour, comme la maquette : Soleil sur marine, pas de aplat. */
.kawann-promo__cta {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 20px;
  border: 2px solid var(--kawann-soleil);
  border-radius: 7px;
  background: transparent;
  color: var(--kawann-soleil) !important;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  text-align: center;
}

.kawann-promo__cta:hover {
  background: var(--kawann-soleil);
  color: var(--kawann-marine) !important;
}

/* Pastille ronde à droite. */
.kawann-promo__seal {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.kawann-promo__seal-label {
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-bold);
  letter-spacing: 0.06em;
}

.kawann-promo__seal-value {
  font-size: 1.5rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1;
}

.kawann-promo__seal-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}


/* ============ BOUTONS ============ */
.kawann-btn {
  display: inline-block;
  font-weight: var(--kawann-weight-bold);
  font-size: 0.875rem;
  padding: 13px 22px;
  border-radius: 7px;
  text-align: center;
}

.kawann-btn--navy {
  background: var(--kawann-marine);
  color: var(--kawann-blanc) !important;
}

.kawann-btn--navy:hover {
  filter: brightness(1.2);
}

/* ============ PRODUITS DU MOMENT ============ */
.kawann-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.kawann-product-card {
  border: 1px solid var(--kawann-border);
  border-radius: 9px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kawann-product-card__media {
  height: 136px;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--kawann-placeholder-a) 0 6px, var(--kawann-placeholder-b) 6px 12px);
  position: relative;
}

.kawann-product-card__promo {
  position: absolute;
  top: 7px;
  left: 7px;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-bold);
  font-size: 0.625rem;
  padding: 3px 6px;
  border-radius: 4px;
}

.kawann-product-card__brand {
  font-size: 0.6875rem;
  color: var(--kawann-text-muted);
}

.kawann-product-card__name {
  font-weight: var(--kawann-weight-text);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--kawann-marine);
  min-height: 36px;
}

.kawann-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.kawann-product-card__price {
  font-weight: var(--kawann-weight-title);
  font-size: 1.0625rem;
  color: var(--kawann-marine);
}

.kawann-product-card__was {
  font-size: 0.75rem;
  color: var(--kawann-text-muted);
  text-decoration: line-through;
}

.kawann-product-card__add {
  border: 1.5px solid var(--kawann-marine);
  border-radius: 6px;
  text-align: center;
  padding: 9px;
  font-weight: var(--kawann-weight-bold);
  font-size: 0.78rem;
  color: var(--kawann-marine);
  cursor: pointer;
}

.kawann-product-card__add:hover {
  background: var(--kawann-marine);
  color: var(--kawann-blanc);
}

/* ============ CONSEILS CROISIÈRE + CONTACT ============ */
.kawann-section--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 44px;
}

.kawann-articles {
  border: 1px solid var(--kawann-border);
  border-radius: 11px;
  padding: 26px 28px;
}

.kawann-articles__title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-articles__list {
  display: flex;
  flex-direction: column;
}

.kawann-article {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--kawann-border-subtle);
  color: inherit !important;
}

.kawann-article:first-child {
  border-top: none;
}

.kawann-article__media {
  width: 88px;
  height: 60px;
  border-radius: 6px;
  flex: none;
  overflow: hidden;
  /* Hachures de réserve, recouvertes par la couverture du guide. */
  background: repeating-linear-gradient(135deg, var(--kawann-placeholder-a) 0 6px, var(--kawann-placeholder-b) 6px 12px);
}

.kawann-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

.kawann-article__tag {
  font-size: 0.65625rem;
  letter-spacing: 0.06em;
  color: var(--kawann-soleil-ink);
  text-transform: uppercase;
  font-weight: var(--kawann-weight-bold);
}

.kawann-article__title {
  font-weight: var(--kawann-weight-text);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--kawann-marine);
  margin-top: 3px;
}

.kawann-contact-card {
  background: var(--kawann-surface);
  border: 1px solid var(--kawann-border);
  border-radius: 11px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}

.kawann-contact-card__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
  /* Lignes équilibrées : sur mobile le « ? » se retrouvait seul en
     troisième ligne. */
  text-wrap: balance;
}

@media (max-width: 575.98px) {
  .kawann-contact-card__title { font-size: 1rem; }
}

.kawann-contact-card__desc {
  margin: 0 0 18px;
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--kawann-text-muted);
}

.kawann-contact-card__phone {
  font-weight: var(--kawann-weight-title);
  font-size: 1.3125rem;
  color: var(--kawann-marine) !important;
  margin-bottom: 6px;
}

.kawann-contact-card__email {
  font-size: 0.84375rem;
  color: var(--kawann-text-muted) !important;
  border-bottom: 1px solid var(--kawann-border);
  align-self: flex-start;
  margin-bottom: 18px;
}

.kawann-contact-card .kawann-btn {
  margin-top: auto;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1279.98px) {
  .kawann-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .kawann-hero__text {
    max-width: none;
    padding: 24px 20px 32px 0;
  }

  /* Quatre arguments : 2×2 plutôt que 3 colonnes, qui laissaient le
     dernier seul sur sa rangée. Séparateurs en croix : un vertical entre
     les deux colonnes, un horizontal entre les deux rangées — le même
     dessin sur chaque carte, et l'onglet Soleil du haut tombe pile sur le
     séparateur vertical. */
  .kawann-reassurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 20px 12px;
  }

  .kawann-reassurance__item {
    padding: 8px 12px 14px;
    gap: 7px;
  }

  .kawann-reassurance__item + .kawann-reassurance__item::before { display: none; }

  /* nth-of-type et non nth-child : l'onglet Soleil (un span) est le premier
     enfant de la section et décalerait le compte d'un cran. */
  .kawann-reassurance__item:nth-of-type(2n)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--kawann-border);
  }

  .kawann-reassurance__item:nth-of-type(n + 3) {
    padding-top: 16px;
    border-top: 1px solid var(--kawann-border);
  }

  /* Palier intermédiaire : trois cartes par rangée, assez larges pour que les
     intitulés longs (« PETIT-DÉJEUNER & BOULANGERIE ») tiennent sur deux
     lignes sous la photo. */
  .kawann-rayons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kawann-promo {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* En colonne, l'axe principal devient la verticale : le flex-basis de 320px
     posé plus haut s'appliquait alors à la HAUTEUR et imposait 320px au bloc
     texte, d'où un vide de ~110px entre le bouton et la pastille. */
  .kawann-promo__text {
    flex: 0 0 auto;
    width: 100%;
  }

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

@media (max-width: 767.98px) {
  .kawann-hero__title {
    font-size: 1.6rem;
  }

  .kawann-hero__subtitle {
    font-size: 0.875rem;
    margin-bottom: 18px;
  }

  /* Sous 768px : carrousel d'un argument à la fois, au doigt (défilement
     natif à crans) ; l'avance automatique et les points sont dans
     kawann-home.js. L'argument occupe toute la largeur et se centre : l'onglet
     Soleil, centré lui aussi, tombe pile au-dessus de sa pastille. Aucun
     séparateur — il n'y a qu'une carte visible. */
  .kawann-reassurance {
    display: block;
    padding: 22px 0 12px;
  }

  .kawann-reassurance__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .kawann-reassurance__track::-webkit-scrollbar { display: none; }

  .kawann-reassurance__set { display: contents; }

  .kawann-reassurance__item {
    flex: 0 0 100%;
    width: 100%;
    padding: 6px 28px 6px;
    border: 0;
    scroll-snap-align: start;
  }

  .kawann-reassurance__item::before { display: none !important; }

  .kawann-reassurance__titre { font-size: 0.875rem; }
  .kawann-reassurance__desc { font-size: 0.8125rem; max-width: 34ch; }

  /* Points de position : la cible tactile fait 24px (WCAG 2.5.8), le point
     visible 8px ; le point courant s'allonge en Soleil. */
  .kawann-carrousel__points {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 6px;
  }

  .kawann-carrousel__point {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .kawann-carrousel__point::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--kawann-border);
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .kawann-carrousel__point[aria-current="true"]::before {
    width: 20px;
    background: var(--kawann-soleil);
  }

  .kawann-carrousel__point:focus-visible {
    outline: 2px solid var(--kawann-focus-ring);
    outline-offset: -2px;
    border-radius: 12px;
  }

  .kawann-rayons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kawann-rayon-card__texte {
    padding: 10px 12px 12px;
  }

  .kawann-rayon-card__icone { width: 42px; height: 42px; }
  .kawann-rayon-card__icone svg { width: 21px; height: 21px; }

  /* Deux colonnes sur téléphone : le texte descend d'un cran pour que les
     intitulés longs tiennent sans césure. */
  .kawann-rayon-card__nom { font-size: 0.75rem; }
  .kawann-rayon-card__compte { font-size: 0.6875rem; }

  .kawann-products-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .kawann-product-card {
    scroll-snap-align: start;
  }

  .kawann-section {
    padding: 32px 16px 0;
  }

  .kawann-section--split {
    padding-bottom: 32px;
  }
}

@media (max-width: 479.98px) {
  .kawann-promo__seal {
    width: 108px;
    height: 108px;
    padding: 0 10px;
  }

  /* « PROMOS » en 24px débordait du rond réduit ; le corps suit la taille
     de la pastille. */
  .kawann-promo__seal-label { font-size: 0.625rem; }
  .kawann-promo__seal-value { font-size: 1.125rem; }
  .kawann-promo__seal-icon { width: 15px; height: 15px; }
}

/* --------------------------------------------------------------------
   Appels à l'action du hero — sous la barre de recherche.
   Deux niveaux : le catalogue en plein, « comment ça marche » en contour.
   -------------------------------------------------------------------- */
.kawann-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* Les boutons suivent directement le sous-titre depuis le retrait de la
     barre de recherche : il leur faut l'écart que celle-ci ménageait. */
  margin-top: 4px;
}

.kawann-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 46px de haut : au-dessus des 24px exigés pour une cible tactile
     (WCAG 2.2 AA, 2.5.8), et aligné sur la hauteur du bouton de recherche. */
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid var(--kawann-soleil);
  border-radius: 10px;
  background: var(--kawann-soleil);
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* Marine sur Soleil = 7,40:1. Du blanc n'y ferait que 2,07:1. */
  color: var(--kawann-marine);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kawann-hero__cta:hover {
  background: var(--kawann-jaune);
  border-color: var(--kawann-jaune);
  color: var(--kawann-marine);
}

/* Second niveau : contour marine sur le voile clair du hero. */
.kawann-hero__cta--secondaire {
  border-color: var(--kawann-marine);
  background: transparent;
  color: var(--kawann-marine);
}

.kawann-hero__cta--secondaire:hover {
  background: var(--kawann-marine);
  border-color: var(--kawann-marine);
  color: var(--kawann-blanc);
}

@media (max-width: 575.98px) {
  /* Empilés, les deux boutons prennent toute la largeur : plus lisibles et
     plus faciles à viser au pouce qu'une paire serrée. */
  .kawann-hero__actions { flex-direction: column; }
  .kawann-hero__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kawann-hero__cta { transition: none; }
}

/* --------------------------------------------------------------------
   En-tête de section avec accroche : titre + phrase d'introduction à
   gauche, lien catalogue à droite.
   -------------------------------------------------------------------- */
.kawann-section__head--accroche {
  /* Le lien se cale en haut, sur la ligne du titre : aligné en bas, il
     tombait au niveau de la dernière ligne de l'accroche, loin du titre
     auquel il se rapporte. */
  align-items: flex-start;
}

.kawann-section__head-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kawann-section__intro {
  margin: 0;
  /* Une accroche se lit d'un trait : on la borne à une longueur de ligne
     confortable plutôt que de la laisser courir sur toute la colonne. */
  max-width: 62ch;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.6;
  color: var(--kawann-text-muted);
}

@media (max-width: 575.98px) {
  .kawann-section__intro { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------
   Intitulé de section : un tiret Soleil suivi du mot-clé en capitales.
   Partagé par les deux sections ci-dessous.
   -------------------------------------------------------------------- */
.kawann-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Soleil assombri : le Soleil pur ne fait que 2,07:1 sur fond clair. */
  color: var(--kawann-soleil-ink);
}

.kawann-kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--kawann-soleil);
}

/* Sur le fond marine, le Soleil pur passe largement (7,40:1). */
.kawann-kicker--sombre { color: var(--kawann-soleil); }

/* --------------------------------------------------------------------
   Section « Pourquoi naviguer avec Kawann Supply » : l'accroche à gauche,
   les trois arguments numérotés à droite.
   -------------------------------------------------------------------- */
.kawann-engagements {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 56px;
}

.kawann-engagements__titre {
  margin: 0 0 16px;
  font-size: 2.125rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.15;
  color: var(--kawann-marine);
}

.kawann-engagements__accroche {
  margin: 0;
  max-width: 34ch;
  font-size: 1rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.7;
  color: var(--kawann-text-muted);
}

/* Les numéros viennent d'un compteur CSS : ils numérotent l'affichage, pas
   le contenu, et n'ont donc rien à faire dans le balisage. */
.kawann-engagements__liste {
  counter-reset: engagement;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-engagements__item {
  counter-increment: engagement;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px 0;
}

.kawann-engagements__item + .kawann-engagements__item {
  border-top: 1px solid var(--kawann-border-clair);
}

/* Le numéro et son filet de séparation. decimal-leading-zero donne « 01 »
   sans l'écrire dans le gabarit. */
.kawann-engagements__item::before {
  content: counter(engagement, decimal-leading-zero);
  padding-right: 22px;
  border-right: 1px solid var(--kawann-border-clair);
  font-size: 1.75rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1;
  color: var(--kawann-soleil);
}

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

.kawann-engagements__icone svg { width: 24px; height: 24px; }

.kawann-engagements__texte {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

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

.kawann-engagements__desc {
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.55;
  color: var(--kawann-text-muted);
}

/* --------------------------------------------------------------------
   Bande « ancrage local » : carte marine, discours à gauche, photo de la
   marina à droite, séparées par une coupe en biais.
   -------------------------------------------------------------------- */
.kawann-ancrage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: stretch;
  border-radius: 18px;
  /* La photo est détourée en biais ; sans cela elle déborderait des coins. */
  overflow: hidden;
  background: var(--kawann-marine);
}

.kawann-ancrage__contenu {
  padding: 44px 42px;
  /* Le contenu passe devant la coupe de la photo. */
  position: relative;
  z-index: 1;
}

.kawann-ancrage__titre {
  margin: 0 0 18px;
  max-width: 20ch;
  font-size: 1.875rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.2;
  color: var(--kawann-blanc);
}

.kawann-ancrage__texte {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.75;
  /* Blanc à 88% : le paragraphe passe derrière le titre sans descendre sous
     le seuil AA (6,3:1 sur le marine). */
  color: rgba(255, 255, 255, 0.88);
}

/* Trois repères sur une seule ligne, en trois colonnes égales : en flex à
   largeur naturelle, le troisième passait à la ligne dès que la colonne de
   texte se resserrait. */
.kawann-ancrage__reperes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 163, 22, 0.45);
  list-style: none;
}

.kawann-ancrage__repere {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
}

.kawann-ancrage__repere:first-child { padding-left: 0; }
.kawann-ancrage__repere:last-child { padding-right: 0; }

.kawann-ancrage__repere:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
}

.kawann-ancrage__repere-icone {
  flex: none;
  display: flex;
  color: var(--kawann-soleil);
}

.kawann-ancrage__repere-icone svg { width: 24px; height: 24px; }

.kawann-ancrage__repere-texte {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
}

.kawann-ancrage__repere-fort {
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

/* Coupe en biais : la photo est plus étroite en haut qu'en bas, le marine
   gagne donc du terrain vers le haut — comme sur la maquette. */
.kawann-ancrage__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 991.98px) {
  .kawann-engagements {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .kawann-engagements__titre { font-size: 1.75rem; }
  .kawann-engagements__accroche { max-width: none; }

  /* Empilées, la photo repasse au-dessus du texte et la coupe en biais
     n'aurait plus de sens : elle devient horizontale. */
  .kawann-ancrage {
    grid-template-columns: minmax(0, 1fr);
  }

  .kawann-ancrage__contenu { order: 2; padding: 30px 24px; }

  .kawann-ancrage__photo {
    order: 1;
    height: 220px;
    clip-path: none;
  }

  .kawann-ancrage__titre { max-width: none; font-size: 1.5rem; }
}

@media (max-width: 575.98px) {
  .kawann-engagements__item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }

  /* Sous 576px le numéro passerait en troisième colonne : on le retire
     plutôt que de serrer trois colonnes sur une largeur de téléphone. */
  .kawann-engagements__item::before { display: none; }
}