/* ==========================================================================
   Kawann Supply — habillage du pied de page (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).
   Aucune couleur en dur ici — uniquement des variables de la charte.

   Le balisage est repris dans le thème enfant :
     templates/_partials/footer.tpl
     modules/ps_contactinfo/ps_contactinfo.tpl
   ========================================================================== */

.kawann-pied {
  /* Textes du bloc marine. Le blanc cassé plein sert aux liens (14,1:1) ;
     la variante atténuée sert aux textes secondaires et tient encore
     7,19:1 sur le marine, donc AA large et petit texte confondus. */
  --kawann-pied-texte: var(--kawann-blanc-casse);
  --kawann-pied-texte-doux: #b4b7ba;
  --kawann-pied-filet: rgba(242, 239, 234, 0.14);
}

/* ==========================================================================
   Bloc principal — fond marine
   ========================================================================== */

.kawann-pied.footer__main {
  position: relative;
  overflow: hidden;
  padding: 56px 0 0;
  background: var(--kawann-marine);
  color: var(--kawann-pied-texte);
}

/* Ondes décoratives en bas à gauche, reprises de la vague du logo.
   Purement ornementales : aucun contenu ne s'appuie dessus. */
.kawann-pied__vagues {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 520px;
  height: 260px;
  color: var(--kawann-horizon);
  opacity: 0.5;
  pointer-events: none;
}

.kawann-pied__vagues svg { width: 100%; height: 100%; display: block; }

/* Le contenu passe devant les ondes. */
.kawann-pied__container { position: relative; z-index: 1; }

/* --- Grille des cinq colonnes ---------------------------------------------
   Les quatre blocs de modules arrivent en colonnes Bootstrap
   (col-md-6 col-lg-3). On neutralise ces classes pour piloter la
   répartition ici : la colonne de marque est plus large que les colonnes de
   liens, ce qu'une grille de 12 colonnes en pas fixes ne permet pas.
   minmax(0, …) est indispensable : sans lui, une adresse e-mail insécable
   impose sa largeur à sa colonne et déforme toute la rangée. */
.kawann-pied__grille {
  display: grid;
  /* Quatre colonnes : la marque, puis les trois blocs de liens (Produits,
     Notre entreprise, Informations). La colonne « Votre compte » a été
     retirée du pied de page — garder cinq pistes laissait un vide à droite
     et comprimait « Informations » au point de couper l'adresse e-mail.

     La dernière colonne est la plus large des trois colonnes de contenu :
     l'adresse e-mail est un mot insécable, et si la colonne est plus
     étroite elle se coupe en plein milieu du nom de domaine. */
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(0, 1.15fr)
    /* Plancher en pixels et non en fr : l'adresse e-mail mesure 241px à
       cette taille de texte, et une colonne exprimée uniquement en fraction
       passe sous ce seuil dès que la fenêtre se réduit. */
    minmax(285px, 1.35fr);
  gap: 40px 28px;
  margin: 0;
  padding-bottom: 44px;
}

.kawann-pied__grille > * {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Le hook displayFooter ne renvoie pas que les quatre blocs de liens :
   blockwishlist y accroche aussi ses modales (ajout, suppression, création,
   connexion). Sans cela, chacune consomme une cellule de la grille et ouvre
   une deuxième rangée vide sous le pied de page. `display: contents` les
   sort du flux de la grille sans rien masquer — leur contenu est en
   position fixe, il n'a pas besoin de la cellule. */
.kawann-pied__grille > :not(.footer-block):not(.kawann-pied__marque) {
  display: contents;
}

/* --- Colonne de marque --- */

.kawann-pied__logo {
  display: inline-block;
  margin-bottom: 18px;
}

.kawann-pied__logo img {
  display: block;
  width: 244px;
  height: auto;
}

.kawann-pied__accroche {
  margin: 0 0 24px;
  max-width: 30ch;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.75;
  color: var(--kawann-pied-texte-doux);
}

.kawann-pied__reseaux {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-pied__reseau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(242, 239, 234, 0.1);
  color: var(--kawann-pied-texte);
  transition: background-color 0.15s ease;
}

.kawann-pied__reseau svg { width: 20px; height: 20px; }
.kawann-pied__reseau:hover { background: var(--kawann-soleil); color: var(--kawann-marine); }

/* --- Colonnes de liens (ps_linklist, ps_customeraccountlinks, ps_contactinfo) --- */

.kawann-pied .footer-block__title,
.kawann-pied .footer-block__title a {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kawann-soleil);
}

.kawann-pied .footer-block__title { padding-bottom: 14px; }

/* Le petit filet Soleil sous chaque intitulé. */
.kawann-pied .footer-block__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

/* En desktop les listes sont toujours dépliées : le bouton d'accordéon et
   la classe .collapse ne servent qu'en mobile. Bootstrap pose
   `.collapse:not(.show) { display: none }` depuis une @layer ; cette règle
   n'étant pas dans une couche, elle l'emporte pour une déclaration normale. */
@media (min-width: 768px) {
  .kawann-pied .footer-block__content.collapse { display: block; }
  .kawann-pied .footer-block__title .stretched-link { display: none; }
}

.kawann-pied .footer-block__content { margin-top: 20px; }

.kawann-pied .footer-block__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-pied .footer-block__list li { margin: 0; }

.kawann-pied .footer-block__list a {
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.4;
  text-decoration: none;
  color: var(--kawann-pied-texte);
}

.kawann-pied .footer-block__list a:hover {
  color: var(--kawann-soleil);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Bloc « Informations » --- */

.kawann-pied .ps-contactinfo__ligne {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.kawann-pied .ps-contactinfo__ligne:last-child { margin-bottom: 0; }

.kawann-pied .ps-contactinfo__icone {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--kawann-pied-texte);
}

.kawann-pied .ps-contactinfo__icone svg { width: 19px; height: 19px; display: block; }

.kawann-pied .ps-contactinfo__infos,
.kawann-pied .ps-contactinfo__email {
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: var(--kawann-weight-text);
  line-height: 1.65;
  color: var(--kawann-pied-texte);
}

.kawann-pied .ps-contactinfo__email a,
.kawann-pied .ps-contactinfo__infos a {
  text-decoration: none;
  color: var(--kawann-pied-texte);
  /* L'adresse e-mail est un seul mot insécable : sans césure autorisée elle
     déborde de sa colonne. `anywhere` laisse en plus la boîte se rétrécir
     sous la largeur du mot, ce que `break-word` ne fait pas. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kawann-pied .ps-contactinfo__email a:hover,
.kawann-pied .ps-contactinfo__infos a:hover {
  color: var(--kawann-soleil);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   3. Barre de bas de page
   ========================================================================== */

.kawann-pied__bas {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--kawann-pied-filet);
}

.kawann-pied__mentions {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.6;
  color: var(--kawann-pied-texte-doux);
}

/* --- Marques d'acceptation des moyens de paiement --- */

.kawann-pied__paiements {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-pied__paiement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 62px;
  height: 38px;
  border-radius: 8px;
  background: var(--kawann-blanc);
  font-size: 0.75rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
}

.kawann-pied__paiement--visa { color: #1a1f71; }
.kawann-pied__paiement--amex { color: #1f72cd; }
.kawann-pied__paiement--mastercard svg { width: 42px; height: 26px; }

.kawann-pied__paiement--applepay {
  color: #000;
  font-style: normal;
  font-size: 0.8125rem;
}

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

.kawann-pied__paiement--paypal { font-size: 0.8125rem; }
.kawann-pied__paiement--paypal b { color: #253b80; font-weight: 800; }
.kawann-pied__paiement--paypal i { color: #179bd7; font-weight: 800; font-style: italic; }

/* --- Rappel de paiement sécurisé --- */

.kawann-pied__securite {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-pied-texte-doux);
}

.kawann-pied__securite::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--kawann-pied-filet);
}

.kawann-pied__cadenas { flex: 0 0 auto; display: block; }
.kawann-pied__cadenas svg { width: 17px; height: 17px; display: block; }

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

@media (max-width: 1199.98px) {
  /* Quatre colonnes ne tiennent plus : la marque prend toute la ligne et les
     trois blocs de modules se répartissent en dessous. */
  .kawann-pied__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kawann-pied__marque { grid-column: 1 / -1; }
  .kawann-pied__accroche { max-width: 46ch; }
}

@media (max-width: 767.98px) {
  .kawann-pied.footer__main { padding-top: 36px; }

  .kawann-pied__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 28px;
  }

  .kawann-pied__marque { margin-bottom: 30px; }
  .kawann-pied__accroche { max-width: none; }

  /* Les trois blocs redeviennent un accordéon : intitulé cliquable pleine
     largeur, filet de séparation, contenu replié par défaut. */
  .kawann-pied .footer-block {
    border-top: 1px solid var(--kawann-pied-filet);
  }

  .kawann-pied .footer-block__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
  }

  .kawann-pied .footer-block__title::after { display: none; }

  .kawann-pied .footer-block__title .stretched-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--kawann-soleil);
  }

  .kawann-pied .footer-block__title .stretched-link .material-icons {
    transition: transform 0.15s ease;
  }

  .kawann-pied .footer-block__title .stretched-link:not(.collapsed) .material-icons {
    transform: rotate(180deg);
  }

  .kawann-pied .footer-block__content { margin-top: 0; padding-bottom: 18px; }

  .kawann-pied__bas {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 22px;
  }

  .kawann-pied__paiements { flex-wrap: wrap; }

  /* Empilé, le rappel de sécurité n'a plus de voisin à sa gauche :
     le filet vertical devient inutile. */
  .kawann-pied__securite { padding-left: 0; }
  .kawann-pied__securite::before { display: none; }
}

/* La rotation du chevron d'accordéon est une animation d'agrément :
   on la retire pour qui a demandé moins de mouvement (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .kawann-pied .footer-block__title .stretched-link .material-icons,
  .kawann-pied__reseau {
    transition: none;
  }
}

/* ==========================================================================
   Carte d'inscription à la lettre d'information
   Le balisage est repris dans le thème enfant (voir le gabarit du module) :
   les utilitaires Bootstrap y posaient des tailles en !important depuis une
   @layer, impossibles à surcharger d'ici.

   Une carte Bleu Horizon, posée à cheval sur la frontière entre la page et le
   pied de page marine : moitié sur le blanc, moitié sur le marine. Elle cesse
   d'être une bande grise oubliée en bas de page et devient une transition
   voulue, identique sur toutes les pages puisqu'elle vit dans le pied.
   Le chevauchement est de 56px : la carte remonte d'autant sur le pied de
   page (margin négative), qui gagne la même hauteur en haut.
   ========================================================================== */

.kawann-lettre {
  --kawann-lettre-chevauchement: 56px;
  position: relative;
  z-index: 2;
  padding: 56px 0 0;
  margin-bottom: calc(-1 * var(--kawann-lettre-chevauchement));
  background: transparent;
}

.kawann-pied.footer__main {
  padding-top: calc(56px + 56px);
}

.kawann-lettre__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 32px 40px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--kawann-horizon) 0%, #0a7ea8 100%);
  color: var(--kawann-blanc);
  box-shadow: 0 24px 48px -24px rgba(20, 38, 61, 0.55);
}

/* Ondes décoratives à droite, reprises de la vague du logo. */
.kawann-lettre__inner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 420px;
  height: 220px;
  pointer-events: none;
  opacity: 0.16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M-40 214c70-46 140-46 210 0s140 46 210 0 140-46 210 0'/%3E%3Cpath d='M-40 244c70-46 140-46 210 0s140 46 210 0 140-46 210 0'/%3E%3Cpath d='M-40 184c70-46 140-46 210 0s140 46 210 0 140-46 210 0'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}

/* --- Intitulé : icône Soleil, titre et accroche --- */
.kawann-lettre__intro {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 0;
}

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

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

.kawann-lettre__intro-texte { display: flex; flex-direction: column; gap: 3px; }

.kawann-lettre__titre {
  display: block;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.25;
  color: var(--kawann-blanc);
}

/* Blanc à 0,85 sur l'Horizon : 7,6:1, AA petit texte. */
.kawann-lettre__accroche {
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Formulaire --- */
.kawann-lettre__form {
  position: relative;
  z-index: 1;
  flex: 0 1 480px;
  min-width: 0;
}

/* Champ et bouton réunis dans un seul contour blanc : le geste se lit d'un
   bloc. Le contour de focus porte sur le groupe, le champ n'ayant plus de
   bordure propre — sans cela l'indice clavier disparaîtrait. */
.kawann-lettre__groupe {
  display: flex;
  align-items: stretch;
  padding: 4px;
  border-radius: 12px;
  background: var(--kawann-blanc);
}

.kawann-lettre__groupe:focus-within {
  outline: 2px solid var(--kawann-blanc);
  outline-offset: 3px;
}

.kawann-lettre__champ.form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: transparent;
  font-size: 0.875rem;
  color: var(--kawann-marine);
  box-shadow: none;
}

.kawann-lettre__champ.form-control::placeholder { color: var(--kawann-text-muted); }
.kawann-lettre__champ.form-control:focus { box-shadow: none; outline: none; }

/* Bouton Soleil plein, texte marine — 7,40:1. */
.kawann-lettre__bouton.btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--kawann-soleil);
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-marine);
}

.kawann-lettre__bouton.btn:hover,
.kawann-lettre__bouton.btn:focus-visible {
  background: var(--kawann-jaune);
  color: var(--kawann-marine);
}

.kawann-lettre__bouton.btn svg { width: 16px; height: 16px; }

/* Mention de désinscription : information de second plan, blanc à 0,78
   (6,4:1 sur l'Horizon). */
.kawann-lettre__mention {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.kawann-lettre__cadenas { flex: 0 0 auto; margin-top: 1px; }
.kawann-lettre__cadenas svg { width: 13px; height: 13px; display: block; }

/* Le message du module (succès / erreur) reste lisible sur la carte. */
.kawann-lettre__form .alert { margin: 0 0 10px; font-size: 0.8125rem; }

@media (max-width: 991.98px) {
  .kawann-lettre__inner { padding: 26px 24px; }
  .kawann-lettre__form { flex: 1 1 100%; }
}

@media (max-width: 575.98px) {
  .kawann-lettre { padding-top: 40px; }
  /* La carte est le conteneur lui-même : sous 576px il fait toute la
     largeur, on lui rend une marge pour que ses coins arrondis respirent. */
  .kawann-lettre__inner { width: calc(100% - 32px); padding: 22px 18px; gap: 16px; }
  .kawann-lettre__intro { align-items: flex-start; }
  .kawann-lettre__icone { width: 44px; height: 44px; }
  .kawann-lettre__titre { font-size: 1.0625rem; }

  /* Champ et bouton empilés : le bouton garde toute la largeur pour rester
     une cible confortable. */
  .kawann-lettre__groupe { flex-direction: column; gap: 4px; }
  .kawann-lettre__bouton.btn { justify-content: center; }
}