/* Encart du menu Boutique : l'entrée qui porte la classe kito-encart devient un bloc large.
   Le thème Ohio construit ses menus en mega-menu-item sur trois niveaux ; une entrée ordinaire
   suffit donc, sans toucher au thème. */
.nav .kito-encart > .menu-link {
  display: block;
  margin: 8px 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(120deg, #1A1A1E 0%, #121216 100%);
  box-shadow: inset 0 0 0 1px rgba(219, 20, 30, .55);
}
.nav .kito-encart > .menu-link span { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.nav .kito-encart > .menu-link::after {
  content: "Transferts DTF, au mètre ou à la planche, l'A3 de 13.90 à 8.90 CHF";
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #A6A6AC;
  white-space: normal;
  max-width: 280px;
}
@media (max-width: 640px) {
  .nav .kito-encart > .menu-link { padding: 12px 14px; }
  .nav .kito-encart > .menu-link::after { max-width: none; }
}

/* Reprise des mêmes valeurs à un poids de sélecteur supérieur.
   Mesuré sur la feuille du thème Ohio 3.7.7 et sur le balisage réel de kito.ch : le déroulant
   Boutique est un `sub-menu-wide`, et le thème y vise le même lien avec des règles plus précises
   que les trois classes ci dessus. Elles gagnaient sur quatre points, tous visibles :
     .header:not(.-mobile) .menu li > ul > li a                    : display flex
     .header:not(.-mobile) .menu li > ul > li a:not(:has(...))     : marge intérieure 0 12px
     .header:not(.-mobile) .menu .sub-menu-wide > li > a.menu-link : marges hautes et basses à zéro
     .header:not(.-mobile) .menu .sub-menu-wide ... a.menu-link:hover : fond effacé au survol
   Le `display: flex` est le plus gênant : il mettait la phrase de l'encart à côté du titre au lieu
   de la placer dessous. Rien n'est changé à l'habillage voulu, les quatre déclarations reprises
   portent les valeurs du bloc ci dessus ; seul le sélecteur est plus précis, en partant de
   l'en-tête, ce qui ajoute une classe au poids de la règle du thème.

   La marge intérieure porte en plus un `!important`, et elle seule. kito.ch ajoute, hors des
   fichiers du thème, dans une feuille écrite à même la page, deux règles marquées `!important` qui
   visent tous les liens des déroulants :
     @media (min-width: 783px) .slide-in-overlay .sub-menu .menu-link : 6px en haut et en bas
     @media (max-width: 782px) .slide-in-overlay .sub-menu .menu-link : 11px 0 11px 2px
   La seconde est la plus visible : sur téléphone, le texte de l'encart viendrait se coller au bord
   gauche de son cadre arrondi. Un `!important` ne se bat qu'avec un `!important` ; celui ci ne vise
   que la classe kito-encart et laisse les autres entrées du déroulant telles que la boutique les a
   réglées. */
.header .nav .menu li.kito-encart > a.menu-link,
.header .nav .menu li.kito-encart > a.menu-link:hover {
  display: block;
  padding: 16px 18px !important;
  border-radius: 14px;
  background: linear-gradient(120deg, #1A1A1E 0%, #121216 100%);
}
@media (max-width: 640px) {
  .header .nav .menu li.kito-encart > a.menu-link,
  .header .nav .menu li.kito-encart > a.menu-link:hover { padding: 12px 14px !important; }
}

/* Le volet lateral, troisieme rendu du menu.

   Le menu de kito.ch est ecrit trois fois dans la page. Le menu du haut et celui du telephone sont
   dans `nav.nav`, a l'interieur de `header` : les regles ci dessus les atteignent toutes les deux.
   Le volet que le bouton a trois barres fait glisser est construit ailleurs, dans
   `div.clb-popup.hamburger-nav`, enfant direct de la page et hors de `header` comme de `nav`. Aucun
   selecteur partant de `.nav` ne peut l'atteindre, et l'entree y restait un lien ordinaire parmi
   ses cinq voisines.

   Mesures prises en style calcule sur le document servi par kito.ch, sans rien y ecrire. Une seule
   regle du theme vise ce lien, `.hamburger-nav .menu .mega-menu-item > a`, qui pese trois classes
   et un element. Les deux regles marquees `important` que kito.ch ajoute dans une feuille ecrite a
   meme la page ne l'atteignent pas : elles partent de `.slide-in-overlay`, qui est dans l'en-tete.
   Le selecteur ci dessous compte quatre classes et deux elements, il passe donc devant sans avoir
   besoin d'un `important`.

   Pourquoi la phrase de l'encart ne descend pas ici, alors qu'elle est le coeur du bloc du haut :
   le volet n'a pas la place en hauteur. Il affiche ses entrees en 5vh et cale son pied en bas de
   l'ecran ; l'espace entre la derniere entree du deroulant Boutique et le texte du pied vaut donc
   une fraction constante de la hauteur de fenetre, mesuree a 16 px sur une fenetre de 560 px de
   haut, 26 px a 620, 43 px a 720. La phrase, elle, coute environ 43 px fixes, deux lignes a 13 px
   et leur marge. En dessous de 720 px de haut, elle recouvrait « Venez-nous voir ! », constate sur
   quatre hauteurs de fenetre. L'habillage retenu ne change donc aucune hauteur : la marge negative
   compense exactement la marge interieure, le cadre deborde de 4 px en haut et en bas dans
   l'intervalle de 8 px que le theme laisse entre deux entrees, et la mise en page du volet reste
   celle du theme, a la ligne pres.

   Le `display: block` n'est pas decoratif : le theme met ce lien en `flex`, ce qui etale le cadre
   sur la hauteur de la ligne au lieu de l'ajuster au titre. */
.hamburger-nav .menu li.kito-encart > a.menu-link,
.hamburger-nav .menu li.kito-encart > a.menu-link:hover {
  display: block;
  margin: -4px 0;
  padding: 4px 16px;
  border-radius: 12px;
  background: linear-gradient(120deg, #1A1A1E 0%, #121216 100%);
  box-shadow: inset 0 0 0 1px rgba(219, 20, 30, .55);
}