/* 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;
  right: 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 44px 0 20px;
  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: right;
  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;
  right: auto !important;
  margin: 6px 16px 4px 0 !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-right: 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;
  left: 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-right: 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-right: auto;
  padding-right: 12px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #9a999e;
  white-space: nowrap;
}

/* =============================================================
   LA BARRE, CENTRÉE DANS SON PANNEAU — SUR TÉLÉPHONE.

   Le panneau coloré (`.scx-hero-bg`) est encarté de 10 px du bord de
   l'écran. La barre, elle, porte `padding: 40px 24px 0`. L'écart entre
   les deux valait donc 24 − 10 = 14 px sur les côtés, mais 40 − 10 =
   30 px en haut : la barre était posée deux fois plus bas dans son
   panneau qu'elle n'en était écartée à gauche et à droite.

   24 px en haut ramène l'écart haut à 14 px lui aussi. La barre est
   alors à la même distance des trois bords.

   POURQUOI SEULEMENT SOUS 760 px : au-delà, la barre cesse d'être
   tenue par son `padding` et se centre sur sa largeur maximale. L'écart
   latéral n'est plus 14 px mais 4, 5, 55… selon la largeur — mesuré.
   Il n'y a donc plus de valeur à laquelle égaler le haut, et 30 px s'y
   lit très bien puisque les côtés sont larges.
   ============================================================= */
@media (max-width: 760px) {
  .nvg-root {
    padding-top: 24px;
  }

  /* La barre perd 16 px de hauteur (108 → 92) : le message flottant, qui
     se plaçait juste dessous, doit descendre d'autant moins. Sans ça il
     laisserait un trou de 26 px là où il en laissait 10. */
  .toast-container {
    top: 102px;
  }
}

/* =============================================================
   LE PANNEAU EN PLEIN ÉCRAN, SUR TÉLÉPHONE.

   Ouvert, il occupait la hauteur de son contenu et laissait la page
   défiler derrière : on pouvait faire glisser le fond sous le panneau,
   ce qui donne l'impression que le geste ne « prend » pas. Il prend
   maintenant tout l'écran, et la page est bloquée le temps qu'il est
   ouvert.

   Le verrou porte sur `html` ET `body` : selon le navigateur, c'est
   l'un ou l'autre qui porte le défilement du document.
   ============================================================= */
@media (max-width: 820px) {

  html.nvg-panel-open,
  html.nvg-panel-open body {
    overflow: hidden;
    /* `height` en plus d'`overflow` : sur iOS, `overflow: hidden` seul
       ne suffit pas à empêcher le rebond élastique du document. */
    height: 100%;
  }

  /* La barre devient le plein écran : elle est déjà `position: fixed` et
     calée en haut, il ne lui manque que le bas — et l'abandon de son
     `padding`, qui laissait sinon 24 px de page visible tout autour du
     panneau. « Plein écran » veut dire les quatre bords. */
  html.nvg-panel-open .nvg-root {
    bottom: 0;
    padding: 0;
  }

  html.nvg-panel-open .nvg-card {
    height: 100%;
    max-height: 100%;
    /* Les coins arrondis et l'ombre n'ont plus de sens quand la carte
       touche les quatre bords de l'écran : un arrondi dans un coin
       coupé laisse juste voir la page par une encoche. */
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  /* Le volet dépliant prend la hauteur restante et défile LUI-MÊME :
     c'est la liste des suggestions qu'on veut pouvoir parcourir, pas la
     page derrière. */
  html.nvg-panel-open .nvg-expand {
    flex: 1 1 auto;
    min-height: 0;
  }
  html.nvg-panel-open .nvg-expand-inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Le contenu de la page n'a plus à être atténué : il est entièrement
     recouvert. L'opacité coûtait une couche de composition sur toute la
     hauteur du document pour rien. */
  html.nvg-panel-open body > *:not(.nvg-root) {
    opacity: 1;
  }
}

/* =============================================================
   LE BOUTON FERMER PREND LE DÉGRADÉ DE LA LOUPE.

   Il remplace le bouton de recherche à l'endroit exact où celui-ci se
   trouvait : c'est le même bouton qui change d'état, pas un second. Un
   rond rose pâle à la place d'un rond rouge se lisait comme un bouton
   désactivé.
   ============================================================= */
#nvg-m-close-btn,
#nvg-d-close-search-btn {
  background: linear-gradient(-38deg, #ffbcbc 0%, #ff6363 54.0541%);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(255, 99, 99, 0.55);
}

/* =============================================================
   SEPT SUGGESTIONS, PAS PLUS — panneau de recherche du téléphone.

   La liste en proposait une douzaine : sur un écran haut et étroit,
   elle poussait le bouton « Rechercher » hors de vue et donnait au
   panneau l'air d'un catalogue plutôt que d'une aide à la frappe.

   Une règle `nth-child` plutôt qu'une coupe côté serveur, pour deux
   raisons. La liste est REMPLACÉE en entier à chaque frappe par les
   résultats de `/api/subjects/search` — elle n'est pas masquée ligne
   par ligne — donc le compteur repart de un sur les résultats filtrés
   et la limite vaut pour eux aussi, sans une ligne de JavaScript. Et
   les sujets restent tous dans le document : c'est le même balisage qui
   sert au panneau du bureau, où la liste complète a sa place.

   Visé sur `#nvg-m-` seulement : les deux autres panneaux
   (`nvg-d`, `nvg-dc`) sont ceux du bureau.
   ============================================================= */
@media (max-width: 820px) {
  #nvg-m-subject-list li:nth-child(n + 8) {
    display: none;
  }
}

/* =============================================================
   LE PANNEAU DE MENU DU TÉLÉPHONE — respiration et bouton.
   ============================================================= */
@media (max-width: 820px) {

  /* Les entrées se suivaient sans écart : sept lignes collées se lisent
     comme un bloc de texte, pas comme une liste de destinations. L'écart
     est posé sur les `li` et non sur les liens, pour que la zone
     touchable grandisse avec — un lien de 18 px de haut demande une
     visée que personne n'a au pouce. */
  .nvg-m-menu-panel .nvg-menu-columns > ul > li + li {
    margin-top: 6px;
  }
  .nvg-m-menu-panel .nvg-menu-columns > ul > li > a {
    display: block;
    padding: 9px 0;
  }

  /* « Connecter » est la seule action du panneau : 44 px la faisaient
     passer pour un lien parmi d'autres. */
  .nvg-m-menu-panel .nvg-gradient-btn {
    height: 56px;
    font-size: 17px;
  }
}