/* ==========================================================================
   Kawann Supply — habillage du header (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. */

/* --- Bandeau du haut (localisation / langue / compte / panier) --- */
/* --- Colonne de contenu commune header / hero / sections ---
   .container-md de Bootstrap avance par paliers (720 / 960 / 1140 / 1320px) :
   le contenu du header sautait donc d'un cran à chaque breakpoint pendant
   qu'on redimensionne, et sa colonne (1320px) ne coïncidait pas avec celle
   du hero, de la réassurance et des sections (1280px).
   On lui impose la même colonne : pleine largeur sous 1280px, figée et
   centrée au-delà — exactement le comportement de .kawann-hero. Les
   bandeaux .header-top / .header-bottom, eux, restent pleine largeur :
   leur fond va toujours d'un bord à l'autre de la fenêtre.
   Le retrait de 24px reprend celui de .kawann-section, pour que le logo
   s'aligne pile avec les titres de section (« Nos rayons »). */
@media (min-width: 768px) {
  .header-top > .container-md,
  .header-bottom__container {
    max-width: var(--kawann-colonne);
    padding-right: var(--kawann-colonne-retrait);
    padding-left: var(--kawann-colonne-retrait);
  }
}

.header-top {
  background-color: var(--kawann-marine);
  /* 4px au lieu de 6 : 49px -> 45px de haut. */
  padding: 4px 0;
}

.header-top a,
.header-top .header-block__title,
.header-top .header-block__icon {
  color: var(--kawann-blanc);
}

.kawann-topbar-location {
  display: flex;
  align-items: center;
  color: var(--kawann-blanc);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.kawann-topbar-location__icon {
  font-size: 1rem;
  margin-right: 6px;
  color: var(--kawann-soleil);
}

.header-top__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.header-top__right > div {
  display: flex;
  align-items: center;
}

/* Sélecteur de langue FR / EN */
.kawann-langselector {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  letter-spacing: 0.02em;
}

.kawann-langselector__link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 2px 4px;
}

.kawann-langselector__link:hover {
  color: var(--kawann-blanc);
}

.kawann-langselector__link--active {
  color: var(--kawann-blanc);
}

.kawann-langselector__sep {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 2px;
}

.header-top .header-block {
  background: transparent;
}

.header-top .header-block__action-btn {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  gap: 4px;
}

/* Panier : "Mon panier" + montant total en dessous (surcharge
   modules/ps_shoppingcart/ps_shoppingcart.tpl), pas de badge de quantité. */
.kawann-cart-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kawann-blanc);
  text-decoration: none;
}

.kawann-cart-link__icon-wrap {
  position: relative;
  display: flex;
  /* Marge à droite : c'est là que vit le badge, donc le chariot est
     décalé à gauche pour ne jamais passer dessous. */
  margin: 4px 14px 4px 4px;
}

.kawann-cart-link__icon {
  width: 19px;
  height: 19px;
  display: block;
}

.kawann-cart-link__badge {
  position: absolute;
  top: -8px;
  right: -14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rem;
  background-color: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-size: 0.5625rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.kawann-cart-link__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.kawann-cart-link__label {
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: rgba(255, 255, 255, 0.78);
}

.kawann-cart-link__amount {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

/* --- Bandeau principal (logo / navigation / téléphone) --- */
.header-bottom {
  background-color: var(--kawann-blanc);
  /* 12px au lieu de 18 : bandeau resserré (96px -> 84px de haut) sans
     toucher au logo ni aux cibles tactiles, qui gardent leur taille. */
  padding: 12px 0;
  border-bottom: 1px solid var(--kawann-border);
}

.header-bottom__row {
  align-items: center;
}

@media (min-width: 992px) {
  .header-bottom__row {
    flex-wrap: nowrap;
  }
}

/* Ordre garanti logo -> navigation -> téléphone : UNIQUEMENT à partir de
   992px. En dessous, ces margin-left/order forcés cassaient la ligne du
   header mobile (le burger et le téléphone atterrissaient sur une 2e
   ligne, avec un grand vide) — sur mobile on laisse les éléments
   (logo, burger, compte, panier, téléphone) dans leur ordre naturel. */
@media (min-width: 992px) {
  .header-bottom__logo {
    order: 0;
    flex: 0 0 auto;
  }

  /* L'espace entre logo et menu suit la largeur dispo : 40px sur un grand
     écran, 16px juste au-dessus de 992px. Une valeur fixe de 40px poussait
     le menu sur le téléphone entre 992 et 1400px. */
  .header-bottom .ps-mainmenu--desktop {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: clamp(16px, 2.2vw, 40px);
  }

  .header-bottom .ps-mainmenu__tree {
    flex-wrap: nowrap;
    justify-content: flex-start;
    white-space: nowrap;
    /* Idem pour l'espacement entre entrées : c'est la variable
       d'ajustement qui absorbe les largeurs de menu intermédiaires. */
    gap: clamp(0.9rem, 1.7vw, 1.75rem);
  }

  /* Entre le menu et le téléphone : de 992 à 1199px (ps-mainmenu--desktop
     est encore order:1 ici, le menu déroulant lui-même caché en
     d-xl-block). À partir de 1200px, ps-mainmenu--desktop passe à
     order:3/100% (voir plus bas) et bascule sur sa propre ligne — la
     recherche reste order:1 et récupère alors toute la ligne du haut. */
  .kawann-search {
    order: 1;
    margin-left: 16px;
  }

  .kawann-header-phone {
    order: 2;
    flex: 0 0 auto;
    margin-left: 16px;
  }
}

/* Ce bloc doit rester APRES les @media (min-width: 992px) ci-dessus :
   ils posent flex-wrap: nowrap sur la rangée et flex/order sur le menu.
   À spécificité égale, c'est l'ordre dans le fichier qui tranche. */
/* --------------------------------------------------------------------
   Recherche persistante + menu sur sa propre ligne (>= 1200px)
   La rangée était sur-souscrite : logo 257 + menu 679 + recherche 328 +
   téléphone 215 = ~1500px de contenu pour 1256px utiles, d'où un menu
   tronqué de 276px. On renvoie le menu sur une seconde ligne et la
   recherche récupère la place libérée.
   Seuil à 1200px (xl) et non 992 : en dessous, .ps-mainmenu__desktop est
   masqué (d-none d-xl-block) et .ps-mainmenu--desktop ne contient plus que
   le bouton burger, qui doit rester sur la première ligne.
   -------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* PAGES INTERNES : la recherche large ne tient pas sur la même ligne que
     le menu (logo 257 + menu 679 + recherche + téléphone dépassait de
     ~250px la colonne de 1256), donc le menu descend d'une ligne — et il
     doit se caler SOUS la recherche, pas au centre de la page.

     D'où une grille plutôt qu'un flex-wrap : la 2e ligne réutilise la
     colonne de la recherche, quelle que soit la largeur du logo. Avec un
     flex, il aurait fallu recopier cette largeur dans une marge en dur.

     Sûr ici parce que les seuls enfants EN FLUX de la rangée à cette taille
     sont ces quatre-là : l'offcanvas du menu mobile est en position: fixed
     et les blocs mobiles sont en display: none — aucun ne crée d'élément
     de grille. */
  .header-bottom--inner .header-bottom__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo recherche telephone"
      ".    menu      .";
    align-items: center;
    /* Pas de column-gap : l'écart vient déjà du padding des colonnes
       Bootstrap (12px de chaque côté), qui compense la marge négative de
       .row. Y toucher décalerait le logo de la colonne du site. */
    column-gap: 0;
    row-gap: 0;
  }

  .header-bottom--inner .header-bottom__logo {
    grid-area: logo;
  }

  .header-bottom--inner .kawann-search {
    grid-area: recherche;
    /* En grille, la colonne fait la largeur : ni flex ni marges. */
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .header-bottom--inner .kawann-header-phone {
    grid-area: telephone;
  }

  .header-bottom--inner .ps-mainmenu--desktop {
    grid-area: menu;
    /* Aligné à gauche DANS la colonne de la recherche : c'est ce qui met le
       premier item du menu à l'aplomb du champ. */
    justify-content: flex-start;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Les entrées du menu portent 20px de padding vertical du thème parent.
     Sur la première ligne d'un header classique ça passe ; sur une 2e ligne
     ça creusait ~29px de vide entre le texte et le bas du bandeau.
     10px suffisent : la cible cliquable reste à ~39px de haut, très au-dessus
     du minimum de 24px (WCAG 2.2 AA, 2.5.8), et le padding du haut garde la
     zone de survol continue jusqu'au sous-menu déroulant. */
  .header-bottom--inner .ps-mainmenu__tree-link,
  .header-bottom--inner .ps-mainmenu__tree-dropdown-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Le bandeau se referme plus près du menu. */
  .header-bottom--inner {
    padding-bottom: 4px;
  }

  .header-bottom .kawann-search .ps-searchbar,
  .header-bottom .kawann-search .ps-searchbar__form {
    width: 100%;
  }
}

/* ==========================================================================
   Variante ACCUEIL — maquette 1 : logo + menu en ligne, pas de recherche.
   Le hero porte déjà un champ de recherche pleine largeur juste en dessous :
   en remettre un dans le header ferait doublon et volerait la place du menu.
   Masqué et non retiré du DOM : le markup vient du hook displayTop du module
   ps_searchbar, et sa version mobile (offcanvas) partage le même template.
   ========================================================================== */
.header-bottom--home .kawann-search {
  display: none;
}

@media (min-width: 1200px) {
  /* Le menu reprend sa place naturelle sur la première ligne, poussé contre
     le téléphone par la marge auto. */
  .header-bottom--home .ps-mainmenu--desktop {
    order: 1;
    flex: 0 1 auto;
    max-width: none;
    margin-left: 32px;
    margin-right: auto;
  }
}

/* Logo
   Fichier recomposé à partir des sources officielles du dossier client
   (logo primaire vectoriel, marque + lettrage remis côte à côte) et livré
   en 757x156 pour un affichage à 48px de haut : ~3,2x la densité écran,
   donc net en Retina. Le fichier est détouré au pixel près — pas de vide
   transparent — donc la hauteur ci-dessous est la hauteur RÉELLEMENT
   visible et le bord gauche du dessin tombe pile sur la colonne. */
.kawann-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.kawann-logo__img {
  height: 48px;
  width: auto;
  max-width: none;
  margin: 0;
  flex-shrink: 0;
}

/* Navigation principale (ps_mainmenu) */
.ps-mainmenu__tree-link {
  font-weight: var(--kawann-weight-bold);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--kawann-marine);
}

/* Pas d'anneau bleu au clic souris — mais gardé pour la navigation
   clavier (:focus-visible), sinon on perd l'accessibilité au clavier. */
.ps-mainmenu__tree-link:focus {
  outline: none;
}

.ps-mainmenu__tree-link:focus-visible {
  outline: 2px solid var(--kawann-focus-ring);
  outline-offset: 2px;
}

/* Soleil pur sur blanc = 2,07:1 (échec AA) : on utilise la déclinaison
   assombrie de la même teinte (4,65:1) et on double le survol d'un
   soulignement, pour ne pas reposer sur la seule couleur (WCAG 1.4.1). */
.ps-mainmenu__tree-link:hover {
  color: var(--kawann-link-hover);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* Bloc téléphone à droite */
.kawann-header-phone__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--kawann-marine);
}

.kawann-header-phone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--kawann-border);
}

.kawann-header-phone__icon i {
  font-size: 1.1rem;
  color: var(--kawann-marine);
}

/* Numéro seul sur l'accueil ; numéro + « Nous contacter » sur les pages
   internes (maquette 2). L'empilement se fait ici plutôt qu'avec un <br>
   pour garder les deux lignes stylables séparément. */
.kawann-header-phone__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.kawann-header-phone__number {
  font-weight: var(--kawann-weight-bold);
  font-size: 0.95rem;
  white-space: nowrap;
}

.kawann-header-phone__label {
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-text-muted);
  white-space: nowrap;
}

/* Téléphone compact (icône seule), visible en dessous de lg, relais du
   bloc complet visible à partir de lg : jamais de trou entre les deux. */
.kawann-header-phone--compact {
  margin-left: 8px;
}

.kawann-header-phone--compact .kawann-header-phone__icon {
  width: 34px;
  height: 34px;
}

/* ==========================================================================
   Bandeau de localisation mobile — le bandeau du haut (.header-top) est
   masqué en dessous de md ; on affiche quand même la localisation seule
   sur une fine ligne au-dessus du bandeau principal.
   ========================================================================== */
.kawann-mobile-location {
  background-color: var(--kawann-marine);
  /* 12px de retrait et 8px d'écart (au lieu de 16 et 12) : c'est ce qu'il
     faut pour que « Marina du Marin, Martinique » et le numéro tiennent sur
     UNE ligne à 375px — sinon le bandeau double de hauteur (46px). */
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kawann-mobile-location .kawann-topbar-location {
  justify-content: flex-start;
  min-width: 0;
}

/* Lien d'appel remonté du bandeau principal (voir header.tpl) : c'est ce qui
   libère la place nécessaire au logo centré sous 768px. */
.kawann-mobile-location__phone {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--kawann-blanc);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.kawann-mobile-location__phone-icon {
  font-size: 0.9375rem;
}

/* ==========================================================================
   Icônes du bandeau principal (compte / panier / téléphone / burger) —
   couleurs de marque, cohérentes sur mobile comme sur desktop.
   ========================================================================== */
.header-bottom .header-block__icon,
.header-bottom .menu-toggle .material-icons {
  color: var(--kawann-marine);
}

/* Pastille du panier : Soleil en fond, marine en texte (7,40:1). Le thème
   parent y met du blanc sur Soleil, soit 2,07:1 — illisible. */
.header-bottom .header-block__badge {
  background-color: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-weight: var(--kawann-weight-bold);
}

/* ==========================================================================
   Responsive — le logo reste "agrandi" à toutes les tailles mais s'adapte
   pour ne pas écraser une ligne de header plus compacte sur petit écran.
   ========================================================================== */
@media (max-width: 991.98px) {
  .header-bottom {
    padding: 14px 0;
  }

  .kawann-logo__img {
    height: 44px;
  }

  .kawann-header-phone--compact {
    margin-left: 4px;
  }
}

@media (max-width: 767.98px) {
  .header-bottom {
    padding: 12px 0;
  }

  /* --- Header mobile : burger à gauche, logo centré, icônes à droite ---
     La rangée débordait (logo 189 + burger 51 + 3 icônes 122 = 362 pour
     359px utiles à 375px), donc le panier tombait à la ligne : d'où la
     bande blanche sous le logo. On passe en nowrap et on rééquilibre. */
  .header-bottom__row {
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    min-height: 40px;
  }

  /* Le burger pousse tout ce qui suit contre le bord droit. On agit sur lui
     plutôt que sur la 1re icône : le groupe de droite reste collé à droite
     quel que soit le nombre d'icônes réellement rendues (panier masqué en
     mode catalogue, etc.). */
  .header-bottom .ps-mainmenu--desktop {
    margin-right: auto;
  }

  /* Logo sorti du flux et centré sur la fenêtre : les deux groupes n'ont pas
     la même largeur (burger ~51 à gauche, ~104 d'icônes à droite), donc un
     simple flex le décalerait visuellement du centre. */
  .header-bottom__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 1;
  }

  /* max-height + max-width avec des dimensions auto : le navigateur réduit
     l'image proportionnellement pour respecter les DEUX bornes, donc pas de
     déformation. La borne de largeur réserve la place des deux groupes
     (2 x 104px) + 24px de respiration, ce qui garantit l'absence de
     chevauchement à n'importe quelle largeur, sans valeur figée. */
  .kawann-logo__img {
    height: auto;
    width: auto;
    max-height: 33px;
    /* Le logo étant centré sur la FENÊTRE, il faut réserver deux fois la
       largeur du groupe d'icônes (plus 32px de respiration) pour qu'il ne le
       touche jamais. Valeur par défaut = cas le plus chargé, 3 pastilles ;
       elle est affinée par variante juste après ce bloc. */
    max-width: calc(100vw - 224px);
  }

  /* La loupe vit dans .kawann-search, un bloc étiré sur la hauteur de la
     rangée (43px) où son bouton de 32px restait collé en haut : l'icône se
     retrouvait 5px plus haut que le compte et le panier, eux centrés. On
     centre le bloc comme ses voisins. */
  .header-bottom .kawann-search {
    display: flex;
    align-items: center;
  }

  /* Toutes les icônes d'action au même gabarit : 32x32 (au-dessus du
     minimum de 24x24 exigé par WCAG 2.2 AA, critère 2.5.8 Target Size). */
  .header-bottom .kawann-header-phone__icon,
  .header-bottom .header-block__action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .header-bottom .kawann-header-phone__icon i,
  .header-bottom .header-block__icon {
    font-size: 1.25rem;
    margin: 0;
  }

  /* Le téléphone est remonté dans .kawann-mobile-location : une pastille de
     moins ici, donc 36px rendus au logo centré. Le masquage se fait par les
     classes Bootstrap du template (d-none d-md-flex), pas en CSS : d-flex
     porte un !important qu'il vaut mieux ne pas avoir à contrer. */

  /* Gouttière Bootstrap resserrée (2px de chaque côté au lieu de 4) : autant
     de gagné sur la largeur du groupe d'icônes, donc sur celle du logo. */
  .header-bottom__row {
    /* Gouttière annulée : avec trois pastilles à droite, les 2px de chaque
       côté coûteraient 12px pris sur la largeur du logo centré. */
    --bs-gutter-x: 0;
  }

  /* Le JS responsive de PrestaShop déplace le composant panier COMPLET
     (« Mon panier » + montant, conçu pour le bandeau du haut) dans le header
     principal : 123px de large, et du texte blanc devenu invisible sur fond
     blanc. On le ramène au même gabarit que les autres icônes. */
  .header-bottom .kawann-cart-link {
    width: 32px;
    height: 32px;
    justify-content: center;
    gap: 0;
    color: var(--kawann-marine);
  }

  .header-bottom .kawann-cart-link__text {
    display: none;
  }

  .header-bottom .kawann-cart-link__icon-wrap {
    margin: 0;
  }

  .header-bottom .kawann-cart-link__icon {
    width: 20px;
    height: 20px;
  }

  .header-bottom .kawann-cart-link__badge {
    top: -6px;
    right: -8px;
  }

  .kawann-topbar-location {
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   Header compact au défilement
   Déployé, le header collant occupait 212px, soit 24% d'un écran de 900px
   confisqués en permanence dès qu'on descend dans la page. En mode compact
   il retombe autour de 70px, sans rien perdre d'essentiel : la recherche ET
   la navigation restent accessibles, seuls le bandeau utilitaire et la
   respiration disparaissent.
   La classe .is-compact est posée par kawann-header.js.
   Ces règles doivent rester en fin de fichier : elles surchargent les blocs
   min-width: 992px et 1200px ci-dessus, à spécificité comparable.
   ========================================================================== */
@media (min-width: 768px) {
  /* max-height plutôt que display: none : c'est la seule façon d'animer le
     repli. La valeur haute est un simple majorant du bandeau (45px réels). */
  .header-top {
    max-height: 80px;
    overflow: hidden;
  }

  .header-top,
  .header-bottom,
  .kawann-logo__img {
    transition: max-height 0.2s ease, padding 0.2s ease, height 0.2s ease;
  }

  .header.is-compact .header-top {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header.is-compact .header-bottom {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header.is-compact .kawann-logo__img {
    height: 34px;
  }

  /* Le numéro cède la place : c'est lui qui permet de ramener le header à
     ~78px en mode compact.

     On ne touche PAS à display, volontairement. Le bloc porte les classes
     utilitaires d-xxl-flex / d-md-flex, et le CSS du thème parent est servi
     dans un @layer. Or pour les déclarations !important l'ordre des couches
     est inversé : un !important déclaré dans une couche l'emporte sur un
     !important hors couche, quelle que soit la spécificité. Impossible donc
     de battre .d-xxl-flex{display:flex!important} depuis ce fichier —
     vérifié, y compris avec un sélecteur en (0,3,0) et !important.
     On replie donc la boîte par des propriétés que Bootstrap ne verrouille
     pas. visibility: hidden la retire aussi de l'ordre de tabulation et de
     l'arbre d'accessibilité, comme l'aurait fait display: none. */
  .header.is-compact .kawann-header-phone {
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* Mouvement réduit demandé par le système : on bascule sans animer. */
  @media (prefers-reduced-motion: reduce) {
    .header-top,
    .header-bottom,
    .kawann-logo__img {
      transition: none;
    }
  }
}

@media (min-width: 1200px) {
  /* Le menu quitte sa 2e ligne et revient à côté du logo : la place libérée
     par le bandeau replié, le logo réduit et le numéro masqué suffit à
     l'accueillir sans tronquer (679px de menu pour ~1000px disponibles). */
  /* La grille de la 2e ligne n'a plus lieu d'être : tout tient sur une ligne
     une fois le bandeau replié, le logo réduit et le numéro escamoté. */
  .header.is-compact .header-bottom--inner .header-bottom__row {
    display: flex;
    flex-wrap: nowrap;
  }

  .header.is-compact .header-bottom--inner .ps-mainmenu--desktop {
    order: 1;
    flex: 0 1 auto;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* La recherche absorbe ce qui reste, avec un plancher pour rester
     utilisable même sur les écrans les plus étroits de cette plage. */
  .header.is-compact .header-bottom--inner .kawann-search {
    flex: 1 1 auto;
    min-width: 220px;
    margin-left: 16px;
    margin-right: 0;
  }
}


/* ==========================================================================
   Barre de recherche du header (module ps_searchbar)
   Le template parent ne fournit qu'un <input> nu : sans habillage, le bouton
   d'envoi ajouté par la surcharge tombait SOUS le champ en bouton gris du
   navigateur, et la loupe absolue se retrouvait hors de la pilule.
   Même dessin que .kawann-hero__search pour que les deux champs de recherche
   du site soient reconnaissables comme un seul et même composant.
   ========================================================================== */
.kawann-search .ps-searchbar__form {
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: var(--kawann-blanc);
  border: 1px solid var(--kawann-border);
  border-radius: 50rem;
  /* Le bouton orange est collé au bord : overflow pour qu'il épouse l'arrondi. */
  overflow: hidden;
}

.kawann-search .ps-searchbar__form:focus-within {
  border-color: var(--kawann-soleil);
}

/* La loupe décorative de gauche fait doublon avec le bouton d'envoi, qui
   porte la même icône. On la retire du dessin sans la sortir du DOM :
   ps_searchbar.js s'en sert comme point d'ancrage (js-search-icon). */
.kawann-search .ps-searchbar__magnifier {
  display: none;
}

.kawann-search .ps-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 0.875rem;
  color: var(--kawann-marine);
}

/* Le halo de focus se pose sur la pilule entière (règle ci-dessus), pas sur
   le champ : deux contours imbriqués sinon. */
.kawann-search .ps-searchbar__input:focus {
  outline: none;
  box-shadow: none;
}

.kawann-search .ps-searchbar__submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border: 0;
  background-color: var(--kawann-soleil);
  color: var(--kawann-marine);
  cursor: pointer;
}

.kawann-search .ps-searchbar__submit:hover {
  background-color: var(--kawann-soleil-fonce, var(--kawann-soleil));
  filter: brightness(0.95);
}

.kawann-search .ps-searchbar__submit .material-icons {
  font-size: 1.25rem;
}

/* Bouton « effacer » : replacé dans le flux de la pilule, avant le bouton
   orange (le parent le positionnait en absolu par rapport au formulaire). */
.kawann-search .ps-searchbar__clear {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  margin-right: 4px;
  border: 0;
  background: transparent;
}

/* Le panneau de suggestions doit suivre la largeur de la pilule. */
/* --- Suggestions : panneau sous le champ, pleine largeur, résultats en
   lignes vignette + nom, lien « tous les résultats » en pied (ajouté par
   kawann-header.js). Le parent posait un panneau de 30rem calé à droite,
   avec les noms centrés et une barre de défilement permanente. --- */
.kawann-search .ps-searchbar { position: relative; }

.kawann-search .ps-searchbar__dropdown {
  left: auto;
  right: 0;
  top: calc(100% + 8px);
  width: max(100%, 440px);
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--kawann-border);
  border-radius: 14px;
  background: var(--kawann-blanc);
  box-shadow: 0 18px 40px -14px rgba(11, 26, 46, 0.28);
  overflow: hidden;
}

.kawann-search .ps-searchbar__results {
  display: block;
  max-height: 24rem;
  padding: 0;
  overflow-y: auto;
}

.kawann-search .ps-searchbar__result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.kawann-search .ps-searchbar__result-link:hover,
.kawann-search .ps-searchbar__result-link:focus,
.kawann-search .ps-searchbar__result-link[aria-selected="true"] {
  background: var(--kawann-surface);
}

.kawann-search .ps-searchbar__result-image {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid var(--kawann-border);
  border-radius: 8px;
  background: var(--kawann-blanc);
}

.kawann-search .ps-searchbar__result-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  line-height: 1.3;
  text-align: left;
  color: var(--kawann-marine) !important;
}

.kawann-search .ps-searchbar__result-fleche {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--kawann-text-muted);
}

.kawann-search .kawann-search__tous {
  display: block;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-top: 1px solid var(--kawann-border-clair, #efeae2);
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  text-align: center;
  color: var(--kawann-lien) !important;
  text-decoration: none;
}

.kawann-search .kawann-search__tous:hover { text-decoration: underline; text-underline-offset: 3px; }

.kawann-search .kawann-search__vide {
  margin: 0;
  padding: 14px 12px;
  font-size: 0.875rem;
  text-align: center;
  color: var(--kawann-text-muted);
}


/* ==========================================================================
   Borne du logo mobile, ajustée au nombre réel de pastilles
   L'accueil n'affiche pas la recherche (le hero la porte) : il n'a que
   2 pastilles au lieu de 3. Lui appliquer la réserve du cas le plus chargé
   coûtait 32px de logo pour rien — visible à 320px, où il tombait à 96px.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 2 pastilles de 32 = 64 -> 2 x 64 + 32 de respiration. */
  .header-bottom--home .kawann-logo__img {
    max-width: calc(100vw - 160px);
  }
}

@media (max-width: 374.98px) {
  /* Le panier est rendu par une surcharge du thème enfant, les deux autres
     pastilles par le thème parent : seule la première suit cette règle, les
     autres restent à 32px (leur largeur ne vient d'aucune déclaration CSS
     que l'on puisse surcharger d'ici — vérifié, zéro règle `width` ne les
     cible). On ne force donc pas : la réserve ci-dessous est calée sur la
     largeur RÉELLE du groupe, mesurée à 92px (32 + 32 + 28). */
  .header-bottom .kawann-cart-link {
    width: 28px;
    height: 28px;
  }

  /* 2 x 92 + 32 de respiration. Le logo tombe à 104px à 320px : c'est le
     prix d'un logo centré face à un burger et trois pastilles sur une
     largeur pareille — aucune autre répartition ne tient. */
  .header-bottom--inner .kawann-logo__img {
    max-width: calc(100vw - 216px);
  }

  .header-bottom--home .kawann-logo__img {
    max-width: calc(100vw - 144px);
  }
}

/* ==========================================================================
   Méga-menu (ps_mainmenu, version bureau)
   Structure rendue par themes/hummingbird-kawann/modules/ps_mainmenu :
   une colonne par catégorie (titre + sous-catégories) et un encart promo.
   Tout est préfixé .ps-mainmenu--desktop : le menu mobile est un offcanvas
   qui partage ces classes et ne doit rien hériter d'ici.
   ========================================================================== */
.ps-mainmenu--desktop .kawann-mega {
  border-top: 1px solid var(--kawann-border);
  box-shadow: 0 18px 32px -12px rgba(11, 26, 46, 0.22);
}

.ps-mainmenu--desktop .kawann-mega__inner {
  display: grid;
  /* L'encart promo est une piste fixe : il ne doit ni s'étirer ni se faire
     écraser quand une catégorie a beaucoup de sous-catégories. */
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  padding-block: 28px 32px;
}

/* Quatre colonnes fixes, et non auto-fill : le regroupement des catégories en
   trois rangées de quatre est un choix éditorial (ordre défini en
   back-office), il ne doit pas se réorganiser en 5+5+2 selon la largeur.
   minmax(0, …) empêche une piste de s'élargir sur son libellé le plus long —
   c'est ce qui rendait les colonnes inégales dans la version d'origine. */
.ps-mainmenu--desktop .kawann-mega__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 24px;
  align-content: start;
}

.ps-mainmenu--desktop .kawann-mega__col {
  min-width: 0;
}

.ps-mainmenu--desktop .kawann-mega__heading {
  display: block;
  /* Même héritage à neutraliser que sur les liens : sans ça,
     « PETIT-DÉJEUNER & BOULANGERIE » sortait de sa colonne et chevauchait
     le titre voisin. */
  white-space: normal;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kawann-border);
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kawann-marine);
  text-decoration: none;
}

.ps-mainmenu--desktop .kawann-mega__heading:hover {
  color: var(--kawann-soleil-ink);
  border-bottom-color: var(--kawann-soleil);
}

.ps-mainmenu--desktop .kawann-mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-mainmenu--desktop .kawann-mega__link {
  display: block;
  padding: 5px 0;
  /* Le white-space: nowrap posé sur .ps-mainmenu__tree (menu principal)
     descend jusqu'ici par héritage et tronquerait les libellés longs. */
  white-space: normal;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.35;
  color: var(--kawann-text-muted);
  text-decoration: none;
}

.ps-mainmenu--desktop .kawann-mega__link:hover {
  color: var(--kawann-marine);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--kawann-soleil);
  text-decoration-thickness: 2px;
}

/* --- Encart promo --- */
/* Colonne des encarts : deux blocs de hauteur égale, empilés sur toute la
   hauteur des catégories. minmax(0, 1fr) x2 pour qu'ils se partagent la
   colonne à parts égales quel que soit leur contenu. */
.ps-mainmenu--desktop .kawann-mega__aside {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-self: stretch;
}

.ps-mainmenu--desktop .kawann-mega__promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 20px;
  border-radius: 12px;
  /* Fond de sécurité tant que la photo n'est pas chargée. */
  background: var(--kawann-marine-clair);
}

.ps-mainmenu--desktop .kawann-mega__promo-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

/* Voile dégradé. Il était uniforme à 90 % d'opacité : le contraste du texte
   était garanti, mais la photo n'apparaissait plus — l'encart ressemblait à un
   aplat marine. Le texte occupant le haut de l'encart, le voile y reste dense
   et s'allège vers le bas, où la photo peut enfin se voir. Le dégradé croise
   le bouton, dont le fond propre assure son propre contraste. */
.ps-mainmenu--desktop .kawann-mega__promo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgb(11 26 46 / 92%) 0%,
    rgb(11 26 46 / 88%) 38%,
    rgb(11 26 46 / 55%) 72%,
    rgb(11 26 46 / 35%) 100%
  );
}

/* En écran large, l'encart est haut : la photo occupe le bas, et le visuel
   est cadré pour que le sujet y tombe. */
.ps-mainmenu--desktop .kawann-mega__promo-bg {
  object-position: 60% 70%;
}

.ps-mainmenu--desktop .kawann-mega__promo-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
  font-size: 0.625rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.08em;
}

.ps-mainmenu--desktop .kawann-mega__promo-kicker--clair {
  background: var(--kawann-blanc);
  color: var(--kawann-marine);
}

.ps-mainmenu--desktop .kawann-mega__promo-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.1;
  color: var(--kawann-blanc);
}

.ps-mainmenu--desktop .kawann-mega__promo-title span {
  color: var(--kawann-soleil);
}

.ps-mainmenu--desktop .kawann-mega__promo-desc {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Fond plein et non plus simple contour : le bouton tombe désormais sur la
   partie claire de la photo, où un texte orange sur fond transparent devenait
   illisible. Le soleil plein sur texte marine reprend le bouton principal du
   site et garde son contraste quel que soit le visuel derrière. */
.ps-mainmenu--desktop .kawann-mega__promo-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 16px;
  border: 2px solid var(--kawann-soleil);
  border-radius: 7px;
  background: var(--kawann-soleil);
  color: var(--kawann-marine) !important;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
}

.ps-mainmenu--desktop .kawann-mega__promo-cta:hover {
  background: var(--kawann-blanc);
  border-color: var(--kawann-blanc);
  color: var(--kawann-marine) !important;
}

/* Sous 1400px la place manque pour l'encart à côté des colonnes : il passe
   sous elles, en bandeau. */
@media (max-width: 1399.98px) {
  .ps-mainmenu--desktop .kawann-mega__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Les deux encarts passent côte à côte sous les catégories. */
  .ps-mainmenu--desktop .kawann-mega__aside {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: auto;
  }

  .ps-mainmenu--desktop .kawann-mega__promo {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .ps-mainmenu--desktop .kawann-mega__promo-kicker,
  .ps-mainmenu--desktop .kawann-mega__promo-title,
  .ps-mainmenu--desktop .kawann-mega__promo-desc,
  .ps-mainmenu--desktop .kawann-mega__promo-cta {
    margin: 0;
  }

  .ps-mainmenu--desktop .kawann-mega__promo-cta {
    margin-left: auto;
  }
}

/* ==========================================================================
   Menu du compte client : ne plus le découper
   --------------------------------------------------------------------------
   .header-top porte « overflow: hidden », indispensable pour animer son repli
   en mode compact. Mais le menu déroulant du compte vit à l'intérieur de ce
   bandeau et descend 144px plus bas : il s'ouvrait bel et bien, puis se
   faisait couper net. De l'extérieur, cliquer sur son nom ne produisait
   « rien ».
   On lève le découpage uniquement pendant qu'un menu est ouvert : l'animation
   de repli, elle, continue de fonctionner comme avant.
   ========================================================================== */
@media (min-width: 768px) {
  /* Deux écritures du même correctif : :has() pour les navigateurs récents,
     et une classe posée par kawann-header.js pour tous les autres — la
     pseudo-classe :has() est ignorée avant Firefox 121 / Safari 15.4. */
  .header-top:has(.dropdown-menu.show),
  .header-top.kawann-menu-ouvert,
  /* Troisième filet, et le plus fiable des trois : ouvrir le menu suppose
     d'avoir cliqué le bouton, donc de lui avoir donné le focus. :focus-within
     est supporté partout depuis Chrome 60 / Safari 10.1 / Firefox 52, ne
     dépend pas de :has() — ignoré avant Chrome 105 / Safari 15.4 — ni de
     l'exécution du JS. Si l'une des deux autres écritures ne s'applique pas,
     le menu s'ouvre quand même sans être découpé par le bandeau. */
  .header-top:focus-within {
    overflow: visible;
  }
}

/* Le menu hérite du fond marine du bandeau et de sa couleur de texte blanche,
   qui le rendaient illisible sur fond clair. On le remet au registre des
   autres menus du site. */
/* Affichage du menu ouvert, réaffirmé depuis ce fichier.
   Constaté en production : le menu recevait bien la classe « show » mais
   restait en display:none — la règle .dropdown-menu.show{display:block} de
   Bootstrap ne s'appliquait pas. Le CSS du thème parent est servi dans une
   @layer, et pour une déclaration NORMALE une règle hors couche l'emporte sur
   une règle en couche, quelle que soit la spécificité. Ce fichier étant hors
   couche, la règle ci-dessous ne peut pas perdre. */
.header-top .dropdown-menu.show {
  display: block;
}

.header-top .dropdown-menu {
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--kawann-border);
  border-radius: 10px;
  background: var(--kawann-blanc);
  box-shadow: 0 10px 28px rgba(20, 38, 61, 0.16);
}

.header-top .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  color: var(--kawann-marine);
}

.header-top .dropdown-menu .dropdown-item:hover,
.header-top .dropdown-menu .dropdown-item:focus-visible {
  background: var(--kawann-surface);
  color: var(--kawann-marine);
}

.header-top .dropdown-menu .dropdown-item .material-icons {
  font-size: 17px;
  color: var(--kawann-text-muted);
}

.header-top .dropdown-menu .dropdown-divider {
  margin: 4px 0;
  border-top-color: var(--kawann-border);
}

/* --------------------------------------------------------------------
   Bloc « compte » de la barre supérieure : nom du client, groupe
   tarifaire en dessous (surcharge modules/ps_customersignin).

   Mêmes tailles et même interligne que le bloc panier voisin, pour que
   les deux s'alignent sur la même grille — voir .kawann-cart-link__text.
   -------------------------------------------------------------------- */
.kawann-compte-lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Zone cliquable élargie sans toucher à la mise en page.
   Le bouton ne fait que 30px de haut dans un bandeau de 40 : un clic un peu
   au-dessus ou au-dessous du nom tombe à côté et « ne fait rien ». Ce
   calque transparent rend cliquable toute la hauteur du bandeau et déborde
   de 6px de chaque côté, sans décaler d'un pixel le texte ni le bloc
   panier voisin (20px de dégagement, vérifié à 1024px). */
.kawann-compte-lien::before {
  content: "";
  position: absolute;
  inset: -5px -6px;
}

.kawann-compte-lien__texte {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  text-align: left;
}

.kawann-compte-lien__nom {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  color: var(--kawann-blanc);
}

/* Le groupe en Soleil : il se lit comme un statut, pas comme un second
   nom, et se distingue de l'intitulé atténué du panier voisin.
   Soleil sur le marine de la barre = 7,40:1, largement au-dessus du
   seuil AA, y compris à cette taille. */
.kawann-compte-lien__groupe {
  font-size: 0.6875rem;
  font-weight: var(--kawann-weight-text);
  letter-spacing: 0.01em;
  color: var(--kawann-soleil);
  white-space: nowrap;
}

/* Le chevron du menu déroulant reste aligné sur le nom, pas au centre
   des deux lignes : sinon il flotte au milieu du bloc. */
.kawann-compte-lien.dropdown-toggle::after {
  align-self: center;
}

/* ==========================================================================
   Tiroir du menu mobile (ps_mainmenu, offcanvas)
   Balisage : themes/hummingbird-kawann/modules/ps_mainmenu/ps_mainmenu.tpl,
   bloc « TIROIR MOBILE ». Trois étages : en-tête marine avec le logo, liste
   des entrées, pied avec langue, appel, horaires et adresse.
   ========================================================================== */
.kawann-tiroir.offcanvas {
  --bs-offcanvas-width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  border: 0;
  background: var(--kawann-blanc);
  color: var(--kawann-marine);
}

/* --- En-tête marine --- */
.kawann-tiroir__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--kawann-marine);
  color: var(--kawann-blanc);
}

.kawann-tiroir__retour { flex: 0 0 auto; }

.kawann-tiroir__retour .js-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 2px;
  color: var(--kawann-blanc) !important;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
}

.kawann-tiroir__retour .js-back-button .material-icons { font-size: 22px; }

/* Le logo occupe le centre ; quand le bouton retour apparaît (sous-menu
   ouvert), il se décale mais reste visible. */
.kawann-tiroir__logo {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.kawann-tiroir__logo img {
  display: block;
  width: auto;
  height: 30px;
}

/* Croix blanche : le bouton Bootstrap est une icône noire en fond ; on
   l'inverse et on lui donne une zone tactile de 44px. */
.kawann-tiroir__fermer.btn-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-size: 18px;
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.9;
}

.kawann-tiroir__fermer.btn-close:hover,
.kawann-tiroir__fermer.btn-close:focus-visible { opacity: 1; }

/* --- Liste des entrées --- */
.kawann-tiroir__corps {
  flex: 1 1 auto;
  padding: 8px 0;
  overflow-y: auto;
}

.kawann-tiroir .menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-tiroir .menu__list > li {
  display: flex;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--kawann-border-clair);
}

.kawann-tiroir .menu__list > li:last-child { border-bottom: 0; }

.kawann-tiroir .menu__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 20px;
  color: var(--kawann-marine) !important;
  font-size: 1rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
}

/* L'entrée de la page courante : filet Soleil à gauche. */
.kawann-tiroir .menu__list > li.current > .menu__link {
  box-shadow: inset 4px 0 0 var(--kawann-soleil);
  background: var(--kawann-surface);
}

/* Titre d'un sous-menu (« Catalogue », en tête de la liste enfant). */
.kawann-tiroir .menu__title {
  padding: 14px 20px 8px;
  font-size: 0.75rem;
  font-weight: var(--kawann-weight-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kawann-soleil-ink);
  border-bottom: 0 !important;
}

/* Chevron des entrées à enfants, dans une pastille ronde. */
.kawann-tiroir .menu__toggle-child.btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kawann-surface);
  color: var(--kawann-marine) !important;
}

.kawann-tiroir .menu__toggle-child.btn .material-icons { font-size: 22px; }

.kawann-tiroir .menu__toggle-child.btn:hover,
.kawann-tiroir .menu__toggle-child.btn:focus-visible {
  background: var(--kawann-soleil-wash);
}

/* --- Pied : langue, contact, infos --- */
.kawann-tiroir__pied {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--kawann-border);
  background: var(--kawann-surface);
}

/* Sélecteur de langue déplacé ici par le thème : il arrive avec son style
   « blanc sur marine » de la barre du haut, on le remet en pilules. */
.kawann-tiroir__langues { display: flex; }

.kawann-tiroir__langues .kawann-langselector {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--kawann-border);
  border-radius: 999px;
  background: var(--kawann-blanc);
}

.kawann-tiroir__langues .kawann-langselector__sep { display: none; }

.kawann-tiroir__langues .kawann-langselector__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--kawann-text-muted) !important;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
}

.kawann-tiroir__langues .kawann-langselector__link--active {
  background: var(--kawann-marine);
  color: var(--kawann-blanc) !important;
}

.kawann-tiroir__contact { display: flex; }
.kawann-tiroir__contact .kawann-tiroir__bouton { flex: 1 1 auto; }

.kawann-tiroir__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none !important;
  white-space: nowrap;
}

.kawann-tiroir__bouton svg { width: 18px; height: 18px; flex: none; }

/* Appel : Soleil plein, texte marine (7,40:1). */
.kawann-tiroir__bouton--appel {
  background: var(--kawann-soleil);
  color: var(--kawann-marine) !important;
}


.kawann-tiroir__infos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-tiroir__infos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.5;
  color: var(--kawann-text-muted);
}

.kawann-tiroir__infos svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--kawann-marine);
}

/* Petits écrans en hauteur : le pied ne doit pas manger la liste. */
@media (max-height: 640px) {
  .kawann-tiroir__infos { display: none; }
  .kawann-tiroir__pied { gap: 10px; padding: 12px 20px 14px; }
}