/* ══════════════════════════════════════════════════════════════════
   GROOMLY — barre de navigation pleine largeur a menus deroulants
   Portage natif de « motion-navigation-menu » (unlumen-ui).

   Le composant d'origine est en React + framer-motion + Tailwind. Le
   site est en Spring Boot + Thymeleaf, sans build : tout est refait en
   CSS et en JS simple. Les quatre effets qui font ce composant :

     1. Highlight / HighlightItem
        Une pastille unique glisse d'un onglet a l'autre au survol,
        au lieu d'un fond qui s'allume sur chacun.

     2. Viewport
        UN SEUL panneau pour tous les menus. Il change de taille ET se
        deplace horizontalement pour venir sous l'onglet ouvert
        (animate={{ left: viewportX }}), en restant dans l'ecran.

     3. contentVariants + direction
        Le contenu entre par la droite quand on va vers un menu situe
        plus a droite, par la gauche dans l'autre sens.

     4. spring { stiffness: 350, damping: 32, bounce: 0 }
        Reproduit exactement, pas approxime : voir --ressort ci-dessous.

   Prefixe « nv- » : la barre historique (.entete, pastille sombre) est
   intacte dans vitrine.css et sur les autres gabarits.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Le ressort de framer-motion, echantillonne puis rendu en linear().
     Masse 1, raideur 350, amortissement 32 : pulsation propre 18,708
     rad/s, coefficient d'amortissement 0,855 — sous-amorti mais sans
     depassement visible (−0,08 %). Regime etabli a 265 ms. */
  --ressort: linear(0.0000, 0.0104, 0.0380, 0.0785, 0.1282, 0.1839, 0.2432,
                    0.3041, 0.3650, 0.4247, 0.4824, 0.5372, 0.5888, 0.6369,
                    0.6813, 0.7220, 0.7590, 0.7923, 0.8223, 0.8490, 0.8726,
                    0.8934, 0.9117, 0.9275, 0.9412, 0.9529, 0.9630, 0.9715,
                    0.9786, 0.9845, 0.9894, 0.9934, 0.9967, 0.9992);
  --ressort-duree: .265s;
}

/* ── JETONS DE LA BARRE ──────────────────────────────────────────
   La barre est posee sur deux feuilles differentes : vitrine.css pour
   l'accueil et les pages du service, groomly.css pour les mentions
   legales, la confidentialite et la suppression de compte. La seconde
   ne declare ni --blanc ni --max : la barre s'y affichait sans fond de
   panneau et sans largeur maximale.

   Chaque couleur passe donc par un jeton local qui se REPLIE sur celui
   du site quand il existe. Les deux feuilles gardent la main sur
   l'allure, et la barre reste lisible meme posee sur une page qui n'en
   declare aucun. On ne peut pas ecrire « --encre: var(--encre, ...) » :
   une propriete qui se reference elle-meme forme un cycle et devient
   invalide — d'ou le prefixe. */
.nv, .nv-vue, .nv-fleche, .nv-tiroir, .nv-voile{
  --nv-encre:      var(--encre, #18181b);
  --nv-gris:       var(--gris, #71717a);
  --nv-gris-clair: var(--gris-clair, #a1a1aa);
  --nv-trait:      var(--trait, #e7e7ec);
  --nv-fond:       var(--fond, #fbfbfd);
  --nv-blanc:      var(--blanc, #ffffff);
  --nv-rose:       var(--rose, #f43f5e);
  --nv-rose-fonce: var(--rose-fonce, #e11d48);
  --nv-max:        var(--max, 1180px);
}

/* ── LA BARRE, PLEINE LARGEUR ────────────────────────────────────── */
.nv{
  position: sticky; top: 0; z-index: 120;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
/* En haut de page la barre est transparente : posee sur le hero, un fond
   blanc y dessine une bande claire au-dessus du gris du hero, et cette
   lisiere se voit. Le fond et la ligne n'arrivent qu'au defilement,
   quand la barre doit vraiment se detacher du contenu qui passe dessous.
   Classe posee par le JS. */
.nv.nv-pose{
  background: rgba(255,255,255,.86);
  border-bottom-color: var(--nv-trait);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.nv-env{
  width: 100%; max-width: var(--nv-max); margin: 0 auto;
  padding: 0 24px; height: 68px;
  display: flex; align-items: center; gap: 22px;
}

.nv-marque{
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-size: 1.16rem; font-weight: 800; letter-spacing: -.04em; color: var(--nv-encre);
}
.nv-marque img{ width: 30px; height: 30px; border-radius: 9px; }

/* ── LES ONGLETS + LA PASTILLE QUI GLISSE ────────────────────────── */
.nv-menu{ position: relative; display: none; align-items: center; gap: 2px; }
@media (min-width: 1000px){ .nv-menu{ display: flex; } }

/* « Highlight mode=parent » : une seule pastille, posee derriere, dont
   la position et la largeur sont ecrites par le JS. */
.nv-surlignage{
  position: absolute; left: 0; top: 50%; z-index: 0;
  height: 38px; width: 0; margin-top: -19px;
  border-radius: 10px; background: rgba(20,20,40,.06);
  opacity: 0; pointer-events: none;
  transform: translateX(0);
  transition: transform var(--ressort-duree) var(--ressort),
              width     var(--ressort-duree) var(--ressort),
              opacity   .16s ease;
}
.nv-menu.nv-eveille .nv-surlignage{ opacity: 1; }

.nv-onglet{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  font: inherit; font-size: .89rem; font-weight: 500;
  color: var(--nv-gris); background: none; border: 0; cursor: pointer;
  transition: color .18s ease;
}
.nv-onglet:hover,
.nv-onglet[aria-expanded="true"]{ color: var(--nv-encre); }
.nv-onglet:focus-visible{ outline: 2px solid var(--nv-rose-fonce); outline-offset: 2px; }
.nv-chevron{ width: 14px; height: 14px; flex: none;
             transition: transform var(--ressort-duree) var(--ressort); }
.nv-onglet[aria-expanded="true"] .nv-chevron{ transform: rotate(180deg) translateY(-1px); }

/* ── ACTIONS A DROITE ────────────────────────────────────────────── */
.nv-actions{ display: flex; align-items: center; gap: 9px; margin-left: auto; flex: none; }
.nv-discret{
  display: none; height: 38px; align-items: center; padding: 0 13px; border-radius: 10px;
  font-size: .89rem; font-weight: 500; color: var(--nv-gris);
  transition: color .18s, background .18s;
}
@media (min-width: 1000px){ .nv-discret{ display: inline-flex; } }
.nv-discret:hover{ color: var(--nv-encre); background: rgba(20,20,40,.05); }

.nv-cta{
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 19px; border-radius: 11px;
  font-size: .89rem; font-weight: 600;
  background: var(--nv-encre); color: var(--nv-blanc);
  transition: background .18s, transform .18s;
}
.nv-cta:hover{ background: #000; transform: translateY(-1px); }
.nv-cta:focus-visible{ outline: 2px solid var(--nv-rose-fonce); outline-offset: 3px; }

.nv-burger{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: rgba(20,20,40,.05); border: 1px solid rgba(20,20,40,.1);
  color: var(--nv-encre); cursor: pointer;
}
@media (min-width: 1000px){ .nv-burger{ display: none; } }
.nv-burger svg{ width: 20px; height: 20px; }

/* ── LE PANNEAU QUI COULISSE ─────────────────────────────────────
   Une seule boite pour tous les menus. Le JS lui donne sa taille et sa
   position horizontale ; le ressort fait le reste. Elle est en
   overflow:hidden, donc la fleche est un element separe. */
.nv-vue{
  position: absolute; top: calc(100% + 9px); left: 0;
  width: 0; height: 0; overflow: hidden;
  background: var(--nv-blanc); border: 1px solid var(--nv-trait); border-radius: 18px;
  box-shadow: 0 28px 64px -26px rgba(15,15,30,.36);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--nv-x, 0px)) scale(.96); transform-origin: top center;
  transition: transform var(--ressort-duree) var(--ressort),
              width     var(--ressort-duree) var(--ressort),
              height    var(--ressort-duree) var(--ressort),
              opacity   .2s ease,
              visibility 0s linear .2s;
}
.nv.nv-ouvert .nv-vue{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(var(--nv-x, 0px)) scale(1);
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}
@media (max-width: 999px){ .nv-vue, .nv-fleche{ display: none; } }

.nv-fleche{
  position: absolute; top: calc(100% + 3px); left: 0;
  width: 13px; height: 13px; margin-left: -6.5px;
  background: var(--nv-blanc);
  border-left: 1px solid var(--nv-trait); border-top: 1px solid var(--nv-trait);
  border-radius: 3px 0 0 0;
  opacity: 0; pointer-events: none;
  transform: translateX(var(--nv-fx, 0px)) rotate(45deg);
  transition: transform var(--ressort-duree) var(--ressort), opacity .18s ease;
}
.nv.nv-ouvert .nv-fleche{ opacity: 1; }

/* Les cartes sont superposees et glissent lateralement. « visibility »
   plutot que « display:none » : une carte masquee doit rester mesurable,
   sinon le panneau ne sait pas quelle taille prendre avant de l'ouvrir. */
.nv-carte{
  position: absolute; top: 0; left: 0; padding: 16px;
  display: flex; gap: 10px;
  opacity: 0; visibility: hidden;
  transition: transform var(--ressort-duree) var(--ressort),
              opacity .2s ease,
              visibility 0s linear .2s;
}
.nv-carte.nv-active{
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s, 0s, 0s;
}

.nv-colonne{ display: flex; flex-direction: column; gap: 2px; width: 268px; }
.nv-titre-colonne{
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nv-gris-clair);
  padding: 6px 12px 8px; margin: 0;
}

/* ── LES ENTREES ─────────────────────────────────────────────────
   Meme « highlight » que les onglets, en version simple : le fond
   apparait sous l'entree survolee. */
.nv-entree{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px; border-radius: 12px;
  transition: background .16s ease;
}
.nv-entree:hover{ background: var(--nv-fond); }
.nv-entree:focus-visible{ outline: 2px solid var(--nv-rose-fonce); outline-offset: -2px; }

/* La pastille et le bloc de texte sont tous deux des <span>. Une regle
   « .nv-entree span » atteindrait les deux et rendrait la pastille grise
   et non centree : le bloc de texte porte donc son propre nom. */
.nv-entree .nv-icone{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  margin: 0; font-size: 0; line-height: 0;
  background: var(--nv-fond); border: 1px solid var(--nv-trait); color: var(--nv-rose-fonce);
  transition: background .16s, border-color .16s;
}
.nv-entree:hover .nv-icone{ background: var(--nv-blanc); border-color: var(--nv-rose); }
.nv-icone svg{ width: 17px; height: 17px; display: block; }
.nv-texte b{ display: block; font-size: .875rem; font-weight: 600; color: var(--nv-encre); line-height: 1.35; }
.nv-texte span{ display: block; font-size: .8125rem; line-height: 1.4; color: var(--nv-gris); margin-top: 1px; }

/* Etat de mesure, pose et retire dans la meme image par le JS : la carte
   revient dans le flux, plus aucune largeur ne la contraint, on lit sa
   taille. Rien n'est peint entre les deux. */
.nv-vue.nv-mesure{ width: max-content !important; height: auto !important;
                   transition: none !important; }
.nv-carte.nv-mesure{ position: relative; transform: none; transition: none; }

/* ── LE MENU MOBILE ──────────────────────────────────────────────── */
.nv-voile{
  position: fixed; inset: 0; z-index: 115;
  background: rgba(10,10,18,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .24s, visibility 0s linear .24s;
}
.nv-voile.actif{ opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
@media (min-width: 1000px){ .nv-voile{ display: none; } }

.nv-tiroir{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
  width: min(360px, 88vw); overflow-y: auto;
  padding: 22px 20px 40px;
  background: var(--nv-blanc); border-left: 1px solid var(--nv-trait);
  box-shadow: -30px 0 70px -30px rgba(15,15,30,.4);
  transform: translateX(102%); visibility: hidden;
  transition: transform .34s var(--ressort), visibility 0s linear .34s;
}
.nv-tiroir.actif{ transform: none; visibility: visible; transition-delay: 0s, 0s; }
@media (min-width: 1000px){ .nv-tiroir{ display: none; } }

.nv-tiroir-haut{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.nv-fermer{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(20,20,40,.05); border: 1px solid rgba(20,20,40,.1);
  color: var(--nv-encre); cursor: pointer;
}
.nv-fermer svg{ width: 20px; height: 20px; }
.nv-tiroir .nv-titre-colonne{ padding: 16px 0 6px; }
.nv-tiroir .nv-entree{ padding: 10px 0; }
.nv-tiroir .nv-entree:hover{ background: none; }
.nv-tiroir .nv-cta{ width: 100%; height: 46px; justify-content: center; margin-top: 22px; }

/* « overflow: hidden » seul ne bloque RIEN sur iOS Safari : la page
   continue de defiler derriere le tiroir. Il faut sortir le corps du
   flux et le decaler de la hauteur deja parcourue — c'est le script qui
   pose ce decalage, et qui le rend a la fermeture. Sans la ligne
   « top », on rouvrirait la page tout en haut a chaque fermeture. */
body.nv-fige{
  overflow: hidden;
  position: fixed;
  left: 0; right: 0; width: 100%;
}

/* ── PLACE POUR LA BARRE ─────────────────────────────────────────
   La barre est en position sticky : elle occupe sa place dans le flux.
   Le hero commencerait donc SOUS elle, et son degrade s'arreterait net
   a 68 px — une lisiere bien visible en travers de la page. On remonte
   le hero de la hauteur de la barre et on lui rend ce decalage en
   rembourrage : le fond passe derriere la barre, qui est transparente
   en haut de page, et le contenu reste a sa place. */
:root{ --nv-hauteur: 68px; }
.nv ~ main > .hs{
  margin-top: calc(var(--nv-hauteur) * -1);
  padding-top: calc(56px + var(--nv-hauteur));
}
@media (min-width: 1024px){
  .nv ~ main > .hs{ padding-top: calc(96px + var(--nv-hauteur)); }
}
html{ scroll-padding-top: 84px; }

/* ── VARIANTE OPAQUE ─────────────────────────────────────────────
   Posee par le fragment sur les pages dont la premiere section est
   sombre (.section-tete a un fond var(--nuit)). Une barre transparente
   y afficherait du texte sombre sur fond sombre. */
.nv.nv-opaque{
  background: rgba(255,255,255,.88);
  border-bottom-color: var(--nv-trait);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

/* ── PAGE COURANTE ───────────────────────────────────────────────
   aria-current est pose par le fragment. On s'en sert aussi comme
   crochet de style : l'information est deja la, inutile d'ajouter une
   classe qui dirait la meme chose et qui pourrait diverger. */
.nv-onglet[aria-current="page"]{ color: var(--nv-encre); font-weight: 600; }
.nv-entree[aria-current="page"]{ background: var(--nv-fond); }
.nv-entree[aria-current="page"] .nv-icone{ border-color: var(--nv-rose); background: var(--nv-blanc); }
.nv-marque[aria-current="page"]{ cursor: default; }

/* ── PAGES INTERIEURES ───────────────────────────────────────────
   .section-tete reserve 150 px (186 au-dela de 900) en haut : c'etait
   la place de l'ancienne barre, qui etait en position fixe et flottait
   au-dessus. La nouvelle est en flux et occupe deja sa hauteur — sans
   cette correction, l'espace serait compte deux fois. */
.nv ~ main > .section-tete{ padding-top: calc(150px - var(--nv-hauteur)); }
@media (min-width: 900px){
  .nv ~ main > .section-tete{ padding-top: calc(186px - var(--nv-hauteur)); }
}


@media (prefers-reduced-motion: reduce){
  .nv-vue, .nv-carte, .nv-fleche, .nv-surlignage,
  .nv-chevron, .nv-tiroir, .nv-voile{ transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   L'ETAT DU COMPTE DANS LA BARRE

   On ne se reconnecte pas a chaque visite : le jeton vit dans le
   navigateur et la barre doit le refleter tout de suite. « Tout de
   suite » veut dire : sans que « Se connecter » apparaisse une demi-
   seconde avant d'etre remplace par le nom. C'est pourquoi la decision
   est prise par un script minuscule pose AVANT la barre, qui ne fait
   qu'une chose — ajouter « compte-ouvert » sur <html> — et que le reste
   est du CSS, applique au moment meme ou la barre est peinte.

   Les deux regles ci-dessous ne font que MASQUER. Chaque element garde
   donc la mise en forme de sa propre classe (.nv-entree est en flex,
   .nv-cta en inline-flex) : on n'a jamais a redonner un « display »
   qu'on ne connait pas.

   Sans JavaScript, <html> ne porte aucune classe : ce sont les entrees
   « deconnecte » qui s'affichent. C'est le bon repli — un visiteur sans
   script se voit proposer de se connecter, ce qui marche toujours.
   ══════════════════════════════════════════════════════════════════ */
html:not(.compte-ouvert) .nv-si-connecte { display: none; }
html.compte-ouvert .nv-si-deconnecte { display: none; }

/* La pastille du compte, a cote du bouton de telechargement. */
.nv-compte{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 8px; border-radius: 11px;
  font-size: .89rem; font-weight: 650; color: var(--nv-encre);
  background: rgba(20,20,40,.05); border: 1px solid rgba(20,20,40,.1);
  transition: background .18s, border-color .18s;
}
.nv-compte:hover{ background: rgba(20,20,40,.08); border-color: rgba(20,20,40,.16); }
.nv-compte:focus-visible{ outline: 2px solid var(--nv-rose-fonce); outline-offset: 3px; }
.nv-initiale{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--nv-rose-fonce, #e11d48), #be123c);
  color: #fff; font-size: .78rem; font-weight: 800;
}
/* Le prenom seul : « Dylan Forestier » ferait deborder la barre sur un
   petit portable, et le nom de famille n'apprend rien ici. */
.nv-prenom{ max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px){ .nv-prenom{ display: none; } .nv-compte{ padding: 0 8px; } }

/* « Se deconnecter » dans le menu et dans le tiroir : un vrai bouton,
   pas un lien — il ne mene nulle part, il agit. */
.nv-deconnexion{
  border: 0; background: none; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   LA BARRE SUR LES PETITS ECRANS

   Mesures faites a 320, 390, 430, 768 et 999 px. Deux debordements
   reels a 320 px — un iPhone SE, un Android d'entree de gamme :

     - deconnecte :  4 px de trop (logo + « Telecharger » + le burger) ;
     - connecte   : 57 px de trop, la pastille du compte s'ajoutant a
                    tout le reste. La barre sortait de l'ecran et la
                    page gagnait une barre de defilement horizontale.

   On ne retire pas la pastille du compte : savoir qu'on est connecte
   est justement ce qu'elle sert a montrer. C'est « Telecharger » qui
   s'efface quand le compte est ouvert — l'application est de toute
   facon proposee en bas du tiroir, et quelqu'un qui a deja un compte
   n'a plus besoin qu'on la lui pousse en permanence. */
@media (max-width: 999px) {
  html.compte-ouvert .nv-actions .nv-cta { display: none; }
}

/* Sous 380 px, on resserre : le logo peut retrecir, les espaces et les
   rembourrages diminuent. Rien ne disparait, tout tient. */
@media (max-width: 380px) {
  .nv-env { gap: 8px; }
  .nv-marque { min-width: 0; overflow: hidden; }
  .nv-actions { gap: 6px; }
  .nv-actions .nv-cta { padding: 0 13px; font-size: .84rem; }
}

/* ══════════════════════════════════════════════════════════════════
   CONNEXION ET INSCRIPTION DANS LA BARRE

   Le numero de telephone occupait cette place. Il n'a pas disparu — il
   reste dans le menu « Aide » (« Nous appeler »), dans le tiroir mobile
   et dans le pied de page — mais ce n'est pas ce qu'on attend d'une
   barre de navigation : on y cherche son compte.

   Les deux entrees ne s'affichent que deconnecte ; connecte, c'est la
   pastille du compte qui prend leur place. Les classes « nv-si-… » ci-
   dessus s'en chargent, et elles valent pour n'importe quel element de
   n'importe quelle page — le bouton du hero d'accueil s'en sert aussi. */
.nv-inscrire{
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 17px; border-radius: 11px;
  font-size: .89rem; font-weight: 650; color: var(--nv-encre);
  background: var(--nv-blanc); border: 1px solid rgba(20,20,40,.14);
  transition: border-color .18s, background .18s, transform .18s;
}
.nv-inscrire:hover{
  border-color: rgba(20,20,40,.26); background: rgba(20,20,40,.03);
  transform: translateY(-1px);
}
.nv-inscrire:focus-visible{ outline: 2px solid var(--nv-rose-fonce); outline-offset: 3px; }

/* Sous 1000 px la barre se reduit au burger : tout est dans le tiroir.
   Entre 1000 et 1180 px, « Creer un compte » s'efface — le menu
   deroulant « Le service » le propose, et garder trois boutons cote a
   cote poussait « Telecharger » hors de l'ecran. */
.nv-inscrire{ display: none; }
@media (min-width: 1180px){ .nv-inscrire{ display: inline-flex; } }
html.compte-ouvert .nv-inscrire{ display: none; }

/* ══════════════════════════════════════════════════════════════════
   LE TIROIR MOBILE, EN RUBRIQUES REPLIABLES

   C'etait une seule liste de neuf entrees a la file : il fallait la
   parcourir en entier pour trouver quoi que ce soit, et elle depassait
   la hauteur de l'ecran — 869 px de contenu pour 844 px d'affichage,
   donc un menu qui defile.

   Chaque rubrique est un <details> natif. Rien de fait main : le
   navigateur gere l'ouverture au clavier, annonce l'etat aux lecteurs
   d'ecran, et Ctrl+F trouve le texte meme replie. Un accordeon ecrit en
   JavaScript ne donne aucune de ces trois choses gratuitement.

   On n'anime pas la hauteur. Un <details> ne sait animer que son
   ouverture, jamais sa fermeture : une moitie animee et l'autre non
   est plus genante qu'aucune animation. Seul le chevron tourne. */
.nv-groupe { border-top: 1px solid var(--nv-trait); }
.nv-groupe:first-of-type { border-top: 0; }

.nv-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 2px; cursor: pointer;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nv-gris);
  transition: color .18s;
  /* Le triangle par defaut du navigateur : on met le notre a la place,
     du bon cote et de la bonne couleur. « list-style » suffit sur les
     navigateurs recents, « ::-webkit-details-marker » couvre Safari. */
  list-style: none;
}
.nv-tete::-webkit-details-marker { display: none; }
.nv-tete::marker { content: ""; }
.nv-tete:hover { color: var(--nv-encre); }
.nv-groupe[open] > .nv-tete { color: var(--nv-encre); }
.nv-tete:focus-visible { outline: 2px solid var(--nv-rose-fonce); outline-offset: 2px; border-radius: 8px; }

.nv-tete .nv-chevron { width: 16px; height: 16px; flex: none; transition: transform .22s; }
.nv-groupe[open] > .nv-tete .nv-chevron { transform: rotate(180deg); }

.nv-corps { padding-bottom: 8px; }
/* Dans une rubrique repliable, les entrees sont deja indentees par le
   groupe : on retire le rembourrage vertical qui les espacait quand
   elles etaient toutes a la file. */
.nv-tiroir .nv-corps .nv-entree { padding: 9px 0; }

@media (prefers-reduced-motion: reduce) {
  .nv-tete, .nv-tete .nv-chevron { transition: none; }
}

/* Le focus est donne au bouton de fermeture des l'ouverture du tiroir —
   sans cela, la tabulation continue derriere le panneau. Il doit donc se
   voir, mais avec le contour du site plutot que le jaune par defaut du
   navigateur. */
.nv-fermer:focus-visible { outline: 2px solid var(--nv-rose-fonce); outline-offset: 3px; }