/* Scrollix header — floating pill navbar (adapted from the Scrollix theme's
   navbar-glow component). Fixed floating card, centered at the top of the
   viewport, with desktop/compact/mobile variants toggled by JS
   (public/js/scrollix-header.js) via the is-* classes below. */

.nvg-root {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 41;
  display: flex;
  justify-content: center;
  padding: 12px 12px 0;
  pointer-events: none;
  padding: 40px 24px 0;
}

/* La barre porte sa propre police.
   Elle est posée sur des pages qui n'ont pas la même : le site public est
   en Capriola, l'espace mentor en Nunito. Sans déclaration ici, les liens
   du menu héritaient de la page — Capriola dehors, Nunito une fois
   connecté, où le même `font-weight: 500` rend nettement plus maigre.
   C'est la même barre partout : elle doit se lire pareil partout. */
.nvg-root,
.nvg-root input,
.nvg-root button,
.nvg-root select,
.nvg-root textarea {
  font-family: "Capriola", Georgia, serif;
}

.nvg-card [hidden] {
  display: none !important;
}

body > *:not(.nvg-root) {
  transition: filter 300ms ease;
}

html.nvg-panel-open body > *:not(.nvg-root) {
  filter: blur(8px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   PAS DE FLOU AU DOIGT

   La règle ci-dessus floute TOUT le contenu de la page pendant que le menu
   est ouvert. Sur cette page d'accueil, cela représente 2 853 éléments
   répartis sur 12 552 px de haut — près de cinq mégapixels que le
   navigateur doit rasteriser hors écran, puis flouter, puis animer
   pendant 300 ms.

   Un ordinateur l'absorbe. Un téléphone non : Safari fige le temps de
   produire l'image, le panneau n'est pas peint, et le défilement ne
   répond plus. C'est le « tout bloque à l'ouverture du menu ».

   `opacity` donne la même mise en retrait — le fond s'efface, l'attention
   va au menu — mais se compose sur le GPU sans rien rasteriser.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  body > *:not(.nvg-root) {
    transition: opacity 200ms ease;
  }

  html.nvg-panel-open body > *:not(.nvg-root) {
    filter: none;
    opacity: 0.25;
  }
}

.nvg-card {
  pointer-events: auto;
  width: 100%;
  max-width: 850px;
  /* Not `overflow: hidden` — that clips the absolutely-positioned
       .am-usermenu-dropdown (position:absolute; top:100%, see main.css)
       whenever the card's own collapsed height (just the toprow) is
       shorter than the dropdown, which is always true unless the
       hamburger menu panel also happens to be open. The menu/search
       expand panels already clip their own growth locally via
       .nvg-expand-inner { overflow: hidden }, so nothing here relies on
       the card itself clipping. */
  overflow: visible;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px -20px rgba(255, 99, 99, 0.35),
    0 8px 24px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: max-width 300ms ease-out;
  font-family: inherit;
}

.nvg-card * {
  box-sizing: border-box;
}

#nvg-card a {
  display: flex;
  /* justify-content: space-between; */
}

/* ---------- shared bits ---------- */

.nvg-circle-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54.0541%);
  box-shadow: 0 6px 18px -6px rgba(255, 99, 99, 0.55);
  cursor: pointer;
  transition: transform 150ms ease;
  padding: 0;
  font-size: 18px;
}

.nvg-circle-btn:active {
  transform: scale(0.95);
}

.nvg-circle-btn.nvg-btn-40 {
  width: 40px;
  height: 40px;
}

.nvg-circle-btn .nvg-icon-x {
  display: none;
}
.nvg-circle-btn.nvg-showing-x .nvg-icon-menu {
  display: none;
}

.nvg-circle-btn.nvg-showing-x .nvg-icon-x {
  display: block;
}

.nvg-root .am-icon-menu::before,
.nvg-root .am-icon-multiply-01::before {
  color: #fff;
}

.nvg-root .am-icon-search-02::before {
  color: #f04438;
}

#nvg-d-search-btn .am-icon-search-02::before {
  color: #f04438;
}

#nvg-m-search-btn .am-icon-search-02::before {
  color: #fff;
}

.nvg-plain-circle-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff1f1;
  color: #262626;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); */
  cursor: pointer;
  transition: transform 150ms ease;
  padding: 0;
  border: none;
  font-size: 16px;
}

#nvg-d-close-search-btn {
  background: #fff1f1;
}

#nvg-d-close-search-btn .am-icon-multiply-01:before {
  color: #f04438;
}

/* LE BOUTON QUI FERME LA RECHERCHE.

   Son fond `#fff1f1` ne se détache que de 1,10:1 du blanc de la carte, et
   son icône fait 16 px en trait fin : posé à côté du bouton menu — corail
   plein, croix blanche — il passait pour un élément décoratif plutôt que
   pour la sortie. On ne voyait pas comment refermer la recherche.

   Fond plus soutenu, croix plus grande et plus dense. Le bouton reste
   secondaire par rapport au menu : c'est une sortie, pas l'action
   principale. */
#nvg-m-close-btn,
#nvg-d-close-btn,
#nvg-dc-close-btn {
  background: #F1E9E5;
  color: #1C1C1E;
  box-shadow: inset 0 0 0 1.5px rgba(28, 28, 30, 0.12);
}

#nvg-m-close-btn i,
#nvg-d-close-btn i,
#nvg-dc-close-btn i {
  font-size: 19px;
  font-weight: 700;
}

#nvg-m-close-btn:hover,
#nvg-d-close-btn:hover,
#nvg-dc-close-btn:hover {
  background: #E7DCD6;
}

.nvg-plain-circle-btn.nvg-btn-40 {
  width: 40px;
  height: 40px;
}

.nvg-plain-circle-btn:hover {
  transform: scale(1.05);
}

.nvg-plain-circle-btn:active {
  transform: scale(0.95);
}

.nvg-menu-label {
  font-size: 16px;
  font-weight: 600;
  color: #171717;
  white-space: nowrap;
}

.nvg-gradient-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54.0541%);
  cursor: pointer;
  transition: transform 150ms ease;
}

.nvg-gradient-btn:hover {
  color: #fff;
}

.scx-footer-social-btn.nvg-gradient-btn:hover {
  color: #ff6363;
}

.nvg-gradient-btn:active {
  transform: scale(0.98);
}

.nvg-gradient-btn.nvg-full {
  width: 100%;
  height: 48px;
}

.nvg-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  /* Le lien épouse son contenu : sans cela il restait à zéro de large et
     seule l'image était cliquable, débordant de sa propre case. */
  width: max-content;
  flex: 0 0 auto;
}

.nvg-logo-img {
  /* Hauteur fixe plutôt qu'une largeur en pourcentage : `width: 70%` se
     résolvait contre un conteneur de largeur indéfinie (`.nvg-logo` est un
     flex dimensionné par son contenu), ce qui laissait l'ancre à zéro de
     large — le logo débordait alors de sa case et ne pouvait pas être
     centré. Avec une hauteur, n'importe quel logo garde ses proportions et
     donne à sa case une largeur réelle. 21px = la taille rendue jusqu'ici
     (70 % d'un SVG de 136×30). */
  height: 21px;
  width: auto;
  max-width: 100%;
}

/* Cette règle habillait `<span>{{ $siteName }}</span>`, le logo en toutes
   lettres d'avant le mot-symbole. Ce span est commenté dans l'en-tête depuis,
   et la règle ne touchait plus que `<x-lernen.logo>` — qu'elle PEIGNAIT EN
   NOIR : `.nvg-logo span` (0-1-1) l'emporte sur `.mn-logo` (0-1-0), lettres
   comprises.

   Le mot paraissait donc noir au premier rendu, puis virait au rouge lettre
   par lettre à mesure que l'animation du reflet atteignait chacune — ses
   décalages s'échelonnent de 0 s à 1,4 s. Ce n'était pas un défaut de
   chargement : c'était cette règle, et l'animation qui la recouvrait.

   Elle imposait aussi 37 px et un interlettrage de −0,025em au mot-symbole,
   qui porte les siens. */

.nvg-pill-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 0%;
}

.nvg-pill-input i {
  position: absolute;
  left: 18px;
  font-size: 16px;
  color: #a3a3a3;
  pointer-events: none;
}

.nvg-pill-input input {
  height: 48px;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #fff1f1;
  padding: 0 20px 0 44px;
  font-size: 16px;
  color: #262626;
  outline: none;
  transition: background-color 150ms ease;
  font-family: inherit;
}

.nvg-pill-input input::placeholder {
  color: #a3a3a3;
}

.nvg-pill-input input:focus {
  background: #ffe8e8;
}

.nvg-list-wrap,
.nvg-list-wrap li {
  list-style: none !important;
}

.nvg-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 15px 20px;
}

.nvg-list-wrap[hidden] {
  display: none;
}

.nvg-list-wrap button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  border: none;
  background: none;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
  font-family: inherit;
}

.nvg-list-wrap button:hover {
  background: #fff1f1;
}

.nvg-list-wrap button i {
  font-size: 18px;
  color: #737373;
  flex-shrink: 0;
}

.nvg-list-wrap button span {
  font-size: 17.5px;
  color: #262626;
}

/* Menu panel: dynamic getMenu('header') items, flowed into a 2-column grid
   (rather than 2 hand-authored groups) so any number of admin-configured
   menu items lays out sensibly. Grid, not CSS `columns` — multicol
   rebalances/re-flows its column split whenever total content height
   changes, which fights visibly with an accordion item (below) growing
   taller when its submenu opens; grid tracks don't rebalance like that. */
.nvg-menu-columns > ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 40px;
  row-gap: 10px;
  align-content: start;
  margin: 0;
  padding: 0;
}

/* Belt-and-suspenders bullet removal: list-style:none on the <ul> above
   should already suppress markers by inheritance, but explicitly resetting
   it on every <li> (top-level and nested .sub-menu alike) avoids relying on
   inheritance winning a specificity fight against base site rules. */
.nvg-menu-columns ul,
.nvg-menu-columns li {
  list-style: none !important;
}

/* .sub-menu (from <x-menu-item>) is normally a hover-triggered flyout
   dropdown (see main.css: position:absolute, opacity:0/visibility:hidden
   by default, shown via `.page-item-has-children:hover > .sub-menu`) meant
   for a plain horizontal top-nav. Nested inside this floating card, no
   ancestor between it and .nvg-root has `position` set, so `position:
   absolute` resolved against .nvg-root (the nearest positioned ancestor,
   itself `position: fixed`) — landing the submenu pinned near the
   viewport's top-left corner instead of under its parent link. Here it's
   toggled by Bootstrap's `.collapse`/`.show` (via :enableToggle="true"),
   not hover, so it needs its own reset: flow in-document (`position:
   static`) and stay visible whenever `.show` is applied, instead of
   depending on a `:hover` rule that click-toggling never triggers. */
.nvg-menu-columns .sub-menu {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 6px 0 4px 16px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.nvg-menu-columns .sub-menu a {
  font-size: 15px;
  font-weight: 400;
  color: #737373;
}

.nvg-menu-columns a {
  font-size: 18px;
  font-weight: 500;
  color: #171717;
  text-decoration: none;
  transition: color 150ms ease;
}

.nvg-menu-columns a:hover {
  color: #ff6363;
}

.nvg-menu-columns .page-item-has-children > a {
  cursor: pointer;
}

.nvg-social-row h4,
.nvg-menu-columns h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: #737373;
  text-transform: uppercase;
}

/* Carte « Mon espace mentor » — la seule entrée du panneau qui mène
   ailleurs que sur le site public, d'où le fond teinté : elle doit se
   distinguer des six liens au-dessus sans crier plus fort qu'eux.
   Les glyphes sont des ligatures Material Symbols ; la police est
   déclarée ici parce que le site public n'a pas de `.ico` global —
   chaque feuille (site-footer.css, notifications-bell.css) porte la
   sienne. */
/* Le filet qui ouvre le bloc « Mon espace » : il ferme la liste des
   adresses publiques. La marge vit ici et non sur la carte, pour que le
   filet et la carte se déplacent ensemble. */
.nvg-space-block {
  margin-top: 24px;
}

.nvg-menu-rule {
  display: block;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.nvg-space-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 20px;
  background: #fff1f1;
  padding: 14px 18px;
  text-decoration: none;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.nvg-space-card:hover {
  background: #ffe6e6;
  box-shadow: 0 6px 18px -8px rgba(255, 99, 99, 0.55);
}

.nvg-space-card__ico,
.nvg-space-card__go {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: 'liga';
}

.nvg-space-card__ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ff6363;
  color: #fff;
  font-size: 24px;
}

.nvg-space-card__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nvg-space-card__txt strong {
  font-size: 18px;
  font-weight: 700;
  color: #171717;
}

.nvg-space-card__txt small {
  font-size: 14px;
  font-weight: 400;
  color: #737373;
}

.nvg-space-card__go {
  flex: none;
  color: #ff6363;
  font-size: 22px;
}

.nvg-social-row {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

/* Le titre se prolonge par un filet jusqu'au bord : c'est lui qui sépare
   les réseaux de ce qui précède, sans ajouter une ligne de plus. */
.nvg-social-row h4 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nvg-social-row h4::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e5e5e5;
}

.nvg-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Ronde et sans nom : le logo suffit. Six pastilles nommées tenaient sur
   trois lignes ; six ronds de 44 px tiennent sur une, et 44 px reste la
   plus petite cible qu'on se permet. */
.nvg-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  color: #262626;
  text-decoration: none;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: box-shadow 150ms ease;
}

.nvg-social-links a:hover {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Expand-area: animates auto height via grid-template-rows 0fr -> 1fr. */
.nvg-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms ease-out, opacity 300ms ease-out;
}

.nvg-expand.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.nvg-expand-inner {
  min-height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   LE PANNEAU DU MENU AU DOIGT

   L'ouverture anime `grid-template-rows` de `0fr` à `1fr` : une astuce
   élégante pour animer une hauteur automatique, mais que Safari calcule
   mal — la piste se retrouve à zéro alors que le panneau contient bien ses
   liens, et le menu paraît vide ou coupé. C'est ce qu'on voyait sur
   iPhone.

   Sur tactile, on ne joue donc plus de hauteur du tout : `display`, que
   tous les moteurs traitent sans calcul ni transition. On perd le
   déroulé — trois cents millisecondes que personne ne réclame — et on
   gagne un menu qui s'ouvre.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nvg-expand {
    display: none;
    grid-template-rows: none;
    opacity: 1;
    transition: none;
  }

  .nvg-expand.is-open {
    display: block;
  }

  /* `overflow: hidden` ne servait qu'à masquer pendant le déroulé ; le
     garder ici rognerait un menu long au lieu de le laisser défiler. */
  .nvg-expand-inner {
    overflow: visible;
  }
}

/* ---------- Desktop ---------- */

.nvg-desktop {
  display: none;
  position: relative;
}

@media (min-width: 768px) {
  .nvg-desktop {
    display: block;
  }
  .nvg-mobile {
    display: none;
  }
}

.nvg-d-toprow {
  display: grid;
  /* Colonnes latérales de largeur égale : le logo tombe alors au centre
     exact de la carte, et n'y bouge plus selon ce que portent les côtés —
     bouton de connexion pour un visiteur, avatar et commandes pour un
     compte connecté. La colonne centrale se dimensionne sur le logo.
     L'état compact rétablit `auto 1fr auto` (voir plus bas) : là, c'est
     le champ de recherche qui occupe le centre et doit s'étirer. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  position: relative;
}

/* Shared, fixed anchor: the menu button + label is genuinely identical
   between normal/compact, so it exists once, in its own grid column, and
   NEVER receives a transition/transform/opacity rule tied to .is-compact.
   Column 1's width is driven solely by this element's own (unchanging)
   content, so its on-screen (X, Y) is stable regardless of what toggles
   in columns 2/3. */
.nvg-d-menu-slot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nvg-d-right {
  gap: 12px;
}

.nvg-d-center {
  display: flex;
  justify-content: center;
}

/* Each of these holds two mutually-exclusive real content sets (only ever
   one of which actually differs between states) stacked in the same grid
   cell, crossfading via the pre-existing .nvg-card.is-compact toggle — see
   .nvg-d-normal-only / .nvg-d-compact-only below. */
.nvg-d-slot {
  position: relative;
  min-height: 44px;
}

.nvg-d-slot-center {
  display: flex;
}

.nvg-d-slot-right {
  display: flex;
  justify-content: flex-end;
}

.nvg-d-normal-only,
.nvg-d-compact-only {
  display: flex;
  /* align-items: center; */
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 820px) {
  .nvg-d-normal-only {
    flex-direction: row-reverse;
  }
}

.nvg-d-slot-center .nvg-d-normal-only,
.nvg-d-slot-center .nvg-d-compact-only {
  width: 100%;
}

.nvg-d-slot-right .nvg-d-normal-only,
.nvg-d-slot-right .nvg-d-compact-only {
  gap: 15px;
}

.nvg-d-normal-only {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nvg-d-compact-only {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.nvg-d-slot-right .nvg-d-compact-only {
  justify-content: flex-end;
}

.nvg-card.is-compact .nvg-d-normal-only {
  position: absolute;
  /* inset: 0; */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.nvg-card.is-compact .nvg-d-compact-only {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Compact : le logo laisse la place aux champs de recherche, qui ont
   besoin de toute la largeur restante. */
.nvg-card.is-compact .nvg-d-toprow {
  grid-template-columns: auto 1fr auto;
}

.nvg-menu-panel,
.nvg-search-panel {
  display: none;
}

.nvg-card[data-panel="menu"] .nvg-menu-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
  padding: 20px 40px 30px;
}

.nvg-card[data-panel="search"] .nvg-search-panel,
.nvg-card[data-panel="subject"] .nvg-search-panel,
.nvg-card[data-panel="location"] .nvg-search-panel,
/* `city` : la liste des villes, dépliée par « Près de moi ». Sans cette
   ligne le panneau reste en display:none et la carte se replie alors
   même que l'état interne est bien passé sur « city ». */
.nvg-card[data-panel="city"] .nvg-search-panel {
  display: block;
}

.nvg-menu-panel-left {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 30px;
  padding-left: 8px;
}

.nvg-menu-panel-image {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 16px;
}

.nvg-menu-panel-image img,
.nvg-menu-panel-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.nvg-search-panel {
  padding: 0 16px 20px;
}

.nvg-search-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 4px;
  margin: 0;
}

.nvg-search-panel .nvg-list-wrap {
  margin-top: 12px;
  padding: 0 8px;
}

.nvg-search-btn-wrap {
  margin-top: 16px;
  padding: 0 4px;
}

/* Compact-only inline search fields (shown in the center slot instead of
   the logo — see .nvg-d-normal-only/.nvg-d-compact-only above for the
   crossfade mechanics). */
.nvg-d-compact-search-fields {
  flex: 1;
}

/* Height pinned explicitly to 44px (not left to intrinsic grid/content
   sizing) to match the shared menu button's own height — so the toprow's
   overall row height, and thus the menu button's vertical centering, is
   identical whether the row's tallest active content is the button
   (normal state) or this form (compact state). A "fixed" anchor that's
   merely centered in a row whose height silently changes between states
   isn't actually fixed. */
.nvg-d-compact-search-fields .nvg-search-fields {
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 44px;
  padding: 0;
}

.nvg-d-compact-search-fields .nvg-pill-input,
.nvg-d-compact-search-fields .nvg-pill-input input {
  height: 44px;
}

.nvg-d-compact-search-btn {
  /* 44px, matching the shared menu button — see the comment on
     .nvg-d-compact-search-fields .nvg-pill-input input above. */
  height: 44px;
  flex-shrink: 0;
  padding: 0 28px;
}

.nvg-d-compact-expand .nvg-list-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  margin-top: 0;
}

/* ---------- Mobile ---------- */

.nvg-m-toprow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  justify-content: center;
}

.nvg-m-left {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Mêmes parts à gauche et à droite (voir .nvg-m-right) pour que le logo
     tienne le centre de la barre quel que soit le nombre de commandes. */
  flex: 1 1 0;
  min-width: 0;
}

.nvg-m-left .nvg-menu-label {
  font-size: 14px;
}

.nvg-m-center {
  display: flex;
  /* Largeur du logo, ni plus ni moins : ce sont les deux côtés qui se
     partagent le reste à parts égales. */
  flex: 0 0 auto;
  justify-content: center;
}

.nvg-m-right {
  display: flex;
  flex-direction: row-reverse;
  gap: 15px;
  flex: 1 1 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   LA BARRE MOBILE QUAND UN PANNEAU EST OUVERT

   Les deux côtés se partagent la place à parts égales (`flex: 1 1 0`), ce
   qui donne 76 px de chaque côté sur un écran de 390. Or l'ouverture du
   menu AJOUTE deux éléments à droite — le X de fermeture — et un libellé à
   gauche, sur une rangée qui logeait déjà la cloche, l'avatar et la loupe :
   quatre boutons de 40 px plus leurs écarts, soit 205 px à caser dans 76.

   `min-width: 0` autorise le dépassement et `row-reverse` l'envoie vers la
   GAUCHE : les commandes venaient se poser sur le logo. C'est le X rose
   au milieu de « mentorni ».

   Le temps du panneau, on ne garde donc que de quoi fermer. Chercher,
   consulter ses notifications ou son compte n'a pas de sens pendant qu'on
   lit le menu — et le menu contient déjà ces accès.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nvg-card[data-panel]:not([data-panel="none"]) .nvg-m-right > *:not(#nvg-m-close-btn) {
    display: none;
  }

  /* Le libellé « Menu » n'apparaît qu'à l'ouverture, et il touchait la
     première lettre du logo. L'icône passée en croix dit déjà l'état. */
  .nvg-m-left .nvg-menu-label {
    display: none;
  }
}

@media (min-width: 420px) and (max-width: 767px) {
  /* Assez large pour que le libellé tienne sans mordre sur le logo. */
  .nvg-m-left .nvg-menu-label {
    display: inline;
  }
}

.nvg-m-search-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 16px;
}

.nvg-m-search-panel .nvg-search-fields {
  grid-template-columns: 1fr;
}

.nvg-m-search-panel .nvg-pill-input {
  flex: none;
}

.nvg-m-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 8px 20px 20px;
}

.nvg-m-menu-panel .nvg-menu-columns > ul {
  columns: 1;
}

/* Le panneau mobile espace ses blocs lui-même (`gap: 20px`) : la marge
   de la carte s'y ajouterait. Et à 390 px, « Mon espace mentor » sur
   deux lignes faisait une carte de 126 px de haut — on resserre le
   dessin plutôt que de laisser le titre se casser. */
.nvg-m-menu-panel .nvg-space-block {
  margin-top: 0;
}

.nvg-m-menu-panel .nvg-space-card {
  gap: 12px;
  padding: 12px 14px;
}

.nvg-m-menu-panel .nvg-space-card__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 22px;
}

.nvg-m-menu-panel .nvg-space-card__txt strong {
  font-size: 16px;
}

.nvg-m-menu-panel .nvg-space-card__txt small {
  font-size: 13px;
}

.nvg-m-menu-panel .nvg-space-card__go {
  font-size: 20px;
}

.am-notifywrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: translateX(-35px);
}

.am-header_user_notify {
  width: 10px;
  height: 10px;
  background: #eee;
}

.am-icon-notification-ring-bell-01:before {
  content: unset;
}

.am-header_user {
  position: relative;
  gap: 14px;
  flex: unset;
  display: unset;
  margin-left: unset;
  align-items: unset;
  margin-bottom: unset !important;
}

.am-header_user_menu > a,
.am-header_user_menu > a figure,
.am-header_user_menu > a figure img {
  width: 43px;
  height: 43px;
  border-radius: 50%;
}

/* =============================================================
   Suggestions de recherche — groupe du sujet, et liste des villes
   dépliée par « Près de moi ».
   Voir components/front/nav-search-suggestions.blade.php et
   public/js/scrollix-header.js.
   ============================================================= */

/* La place du sujet dans le catalogue, collée à son nom : « Arabe -
   Scolaire - Primaire » — la famille, puis le groupe. Elle remplace le
   compte de mentors qui occupait la droite de la ligne.
   Sélecteur qualifié par `.nvg-list-wrap button` : la règle voisine
   `.nvg-list-wrap button span` fixe déjà couleur et taille du libellé,
   la classe seule perdrait l'arbitrage. */
.nvg-list-wrap button span.nvg-list-group {
  color: #ff6363;
  font-weight: 500;
  font-size: 12px;
}

/* Aucun sujet ne correspond à la saisie — la liste des sujets est
   servie par api/subjects/search, voir filtrerSujets() dans
   public/js/scrollix-header.js. Même traitement que le message d'état de
   la géolocalisation, juste en dessous. */
.nvg-list-empty {
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #6e6d72;
}

/* La liste des villes est longue : elle défile au lieu de pousser la
   carte du menu hors de l'écran. */
.nvg-city-wrap {
  max-height: 320px;
  overflow-y: auto;
}

.nvg-city-locate button {
  font-weight: 700;
  color: #ff6363;
}

.nvg-city-status {
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #6e6d72;
}

/* Le gouvernorat, en retrait à droite du nom de la ville : « El Hamma »
   puis « Gabès ». Même traitement que le compte de mentors des sujets. */
.nvg-city-gov {
  margin-left: auto;
  padding-left: 12px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #9a999e;
  white-space: nowrap;
}