/* =======================================================================
   RU Design : BARRE DU HAUT DU RÉSEAU ET MENU ☰ (17 octobre 2026).
   Modèle : la barre de RU Community, avec Reculer et Avancer. Blanc, filet
   fin, boutons de 44 px, icônes de 24 px, jetons --ru-* seulement.
   ======================================================================= */

/* --- 1. La barre ------------------------------------------------------ */
.rud-barre{
  box-sizing:border-box;height:60px;max-width:100%;padding:0 2px;margin:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--ru-fond,#FFFFFF);color:var(--ru-texte,#0e2438);
}
.rud-barre-g,.rud-barre-d{display:flex;align-items:center;min-width:0}
.rud-barre-d{justify-content:flex-end}
.rud-barre-bt{
  box-sizing:border-box;width:44px;height:44px;min-width:44px;padding:0;margin:0;flex:none;
  display:inline-grid;place-items:center;border:0;border-radius:12px;background:none;
  color:var(--ru-texte,#0e2438);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.rud-barre-bt svg{width:24px;height:24px}
.rud-barre-bt:active{background:var(--ru-accent-doux,rgba(29,92,143,.10))}
.rud-barre-bt[aria-expanded="true"]{background:var(--ru-accent-doux,rgba(29,92,143,.10));color:var(--ru-accent,#1d5c8f)}
.rud-barre-bt:focus-visible{outline:2px solid var(--ru-accent,#1d5c8f);outline-offset:-2px}

/* Reculer et Avancer : discrets, gris pâle quand ils ne servent pas. */
.rud-barre .rud-nav-fleches{display:flex;align-items:center;gap:0}
.rud-barre .rud-nav-fl{
  position:relative;box-sizing:border-box;width:38px;height:44px;margin:0;padding:0;
  display:inline-grid;place-items:center;border:0;border-radius:12px;background:none;
  color:var(--ru-texte,#0e2438);cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;
}
.rud-barre .rud-nav-fl::before{display:none}
.rud-barre .rud-nav-fl svg{width:22px;height:22px}
.rud-barre .rud-nav-fl:active{background:var(--ru-accent-doux,rgba(29,92,143,.10))}
.rud-barre .rud-nav-fl.rud-nav-off{color:var(--ru-discret-2,#C3CCD6);background:none;cursor:default}
@media (min-width:1000px){.rud-barre .rud-nav-fleches{display:flex}}

.rud-barre-logo{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 4px;border-radius:10px;text-decoration:none;color:inherit}
.rud-barre-logo img{display:block;height:30px;width:auto;max-width:120px;object-fit:contain}
.rud-barre-logo span{font-weight:800;font-size:18px;letter-spacing:-.02em}
.rud-barre-rond img,.rud-barre-rond span{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF);font-size:13px;font-weight:700}
.rud-barre-rond--vide svg{width:26px;height:26px}

/* Le nom de la page, sorti de la barre : petit titre dessous (sous-page). */
.rud-barre-titre{
  box-sizing:border-box;margin:0;padding:6px 16px 10px;background:var(--ru-fond,#FFFFFF);
  font:700 17px/1.3 var(--ru-police,system-ui,sans-serif);color:var(--ru-texte,#0e2438);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Très petits écrans : on garde tous les boutons, le logo rapetisse. */
@media (max-width:380px){
  .rud-barre .rud-nav-fl{width:34px}
  .rud-barre-bt{width:40px;min-width:40px}
  .rud-barre-logo img{height:26px;max-width:92px}
}
/* Livraison 5 : à 320 px, flèches serrées et logo plus petit (ils se touchaient). */
@media (max-width:359px){
  .rud-barre .rud-nav-fleches{gap:0}
  .rud-barre .rud-nav-fl{width:28px;margin:5px 0}
  .rud-barre-bt{width:38px;min-width:38px}
  .rud-barre-logo img{height:22px;max-width:78px}
}

/* --- 2. Dans l'en-tête de la navigation mobile (logiciels sans barre propre) */
.rud-nav-entete.rud-barre-reseau{box-shadow:0 1px 0 var(--ru-bord,rgba(0,0,0,.10))}
.rud-nav-entete.rud-barre-reseau .rud-nav-barre{display:block;height:auto;padding:0}

/* --- 3. Logiciel qui a sa propre barre (Community, Player One, hubs) ----
   La barre du Réseau la remplace sur téléphone et tablette seulement. */
header.rud-barre-reseau[data-rud-barre-integree]{
  position:sticky;top:0;z-index:60;display:block;box-sizing:border-box;width:100%;
  background:var(--ru-fond,#FFFFFF);border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10));
}
@media (min-width:1000px){header.rud-barre-reseau[data-rud-barre-integree]{display:none}}
/* Barre posée dans la barre fixe d'un hub : elle en prend toute la place,
   les éléments du hub sont cachés sur téléphone et tablette seulement. */
@media (max-width:999px){
  .rud-barre-hote.rud-barre-hote{padding:0;gap:0}
  .rud-barre-hote.rud-barre-hote > :not(.rud-barre-reseau){display:none}
  .rud-barre-hote > header.rud-barre-reseau[data-rud-barre-integree]{position:static;flex:1 1 auto;width:100%;height:100%;border:0;background:transparent}
  .rud-barre-hote > header.rud-barre-reseau .rud-barre{height:100%}
}

/* --- 4. Le menu ☰ ------------------------------------------------------- */
.rud-menu{position:fixed;inset:0;z-index:100000}
.rud-menu[hidden]{display:none}
.rud-menu-voile{position:absolute;inset:0;background:rgba(14,36,56,.38);opacity:0;transition:opacity .22s ease}
.rud-menu-panneau{
  position:absolute;top:0;bottom:0;left:0;box-sizing:border-box;width:min(86%,380px);
  padding:0 12px 24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--ru-fond,#FFFFFF);color:var(--ru-texte,#0e2438);
  box-shadow:8px 0 30px rgba(14,36,56,.18);transform:translateX(-100%);transition:transform .22s ease;
  font:400 15px/1.45 var(--ru-police,system-ui,sans-serif);scrollbar-width:thin;
}
.rud-menu.ouvert .rud-menu-voile{opacity:1}
.rud-menu.ouvert .rud-menu-panneau{transform:none}
@media (prefers-reduced-motion:reduce){.rud-menu-voile,.rud-menu-panneau{transition:none}}
html.rud-menu-ouvert,html.rud-menu-ouvert body{overflow:hidden}

.rud-menu-tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  height:60px;margin:0 -12px;padding:0 4px 0 16px;background:var(--ru-fond,#FFFFFF);border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10))}
.rud-menu-logo img{display:block;height:30px;width:auto;max-width:140px}
.rud-menu-moi{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10));
  text-decoration:none;color:inherit}
.rud-menu-av{width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;background:var(--ru-accent,#1d5c8f)}
.rud-menu-av img{width:42px;height:42px;object-fit:cover;display:block}
.rud-menu-moi b{display:block;font-size:15px}
.rud-menu-moi small{display:block;color:var(--ru-accent,#1d5c8f);font-weight:600;font-size:13px}
.rud-menu-visiteur{display:flex;gap:8px;flex-wrap:wrap;padding:14px 6px;border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10))}
.rud-menu-visiteur a{box-sizing:border-box;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
  border-radius:10px;border:1px solid var(--ru-accent,#1d5c8f);font-weight:700;font-size:15px;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.rud-menu-visiteur a:first-child{background:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF)}
.rud-menu-visiteur a:last-child{background:var(--ru-fond,#FFFFFF);color:var(--ru-accent,#1d5c8f)}
.rud-menu-visiteur a:hover{background:var(--ru-fond,#FFFFFF);color:var(--ru-accent,#1d5c8f);border-color:var(--ru-texte,#0e2438)}

.rud-menu-sec{margin:16px 6px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ru-discret,#6b7280)}
/* Correctif design 11 : sections du hub recopiées dans le bloc 1 du menu. */
.rud-menu-sous{margin:12px 12px 4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ru-discret,#6b7280)}
.rud-menu-bloc>.rud-menu-sous:first-child{margin-top:4px}
.rud-menu-bloc{display:flex;flex-direction:column;gap:2px}
.rud-menu-bloc--seul{margin-top:12px}
.rud-menu-it{
  box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0 10px;margin:0;
  border:0;border-radius:10px;background:none;font-family:inherit;font-size:15px;font-weight:600;line-height:1.3;color:var(--ru-texte,#0e2438);
  text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.rud-menu-it svg{width:22px;height:22px;flex:none;color:var(--ru-discret,#6b7280)}
.rud-menu-it:hover,.rud-menu-it:focus-visible{background:var(--ru-accent-doux,rgba(29,92,143,.10));outline:none}
.rud-menu-it.on{background:var(--ru-accent-doux,rgba(29,92,143,.10));color:var(--ru-accent,#1d5c8f)}
.rud-menu-it.on svg{color:var(--ru-accent,#1d5c8f)}
.rud-menu-bd{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF);font-size:11px}
.rud-menu-it--langue{cursor:default}
.rud-menu-it--langue:hover{background:none}
.rud-menu-lgs{margin-left:auto;display:flex;gap:4px}
.rud-menu-lg{min-width:36px;height:32px;padding:0 6px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--ru-bord,rgba(0,0,0,.10));
  font-size:12px;font-weight:700;color:var(--ru-texte,#0e2438);text-decoration:none}
.rud-menu-lg.on{background:var(--ru-accent,#1d5c8f);border-color:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF)}
.rud-menu-actions{display:flex;flex-wrap:wrap;gap:8px;padding:6px 6px 2px}

.rud-menu-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 2px}
.rud-menu-tuile{
  box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:10px 4px;
  border:1px solid var(--ru-bord,rgba(0,0,0,.10));border-radius:12px;font-size:12px;font-weight:600;line-height:1.2;text-align:center;
  color:var(--ru-texte,#0e2438);text-decoration:none;overflow-wrap:anywhere;
}
.rud-menu-tuile svg,.rud-menu-tuile img{width:24px;height:24px;color:var(--ru-accent,#1d5c8f);object-fit:contain}
.rud-menu-tuile:hover,.rud-menu-tuile:focus-visible{background:var(--ru-accent-doux,rgba(29,92,143,.10));outline:none}
.rud-menu-tuile.on{border-color:var(--ru-accent,#1d5c8f);background:var(--ru-accent-doux,rgba(29,92,143,.10))}

.rud-menu-hub{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:18px 2px 0;padding:0 14px;
  border-radius:12px;background:var(--ru-accent,#1d5c8f);border:1px solid var(--ru-accent,#1d5c8f);
  color:var(--ru-sur-accent,#FFFFFF);font-weight:700;text-decoration:none}
.rud-menu-hub svg{width:22px;height:22px}
.rud-menu-hub:hover{background:var(--ru-fond,#FFFFFF);color:var(--ru-accent,#1d5c8f);border-color:var(--ru-texte,#0e2438)}

/* Le thème ou la page ne souligne jamais les liens de la barre et du menu. */
#rud-menu a,.rud-barre a{text-decoration:none}
/* « Tu es ici » sur la ligne du Hub des abonnés (Correctif design 8). */
.rud-menu-ici{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--ru-accent,#1d5c8f);
  background:var(--ru-fond,#fff);border:1px solid rgba(29,92,143,.25);border-radius:99px;padding:2px 8px;white-space:nowrap}
.rud-menu-it svg{flex:0 0 auto}
/* Menu ☰ ouvert : les boutons flottants (témoins, langue) ne passent pas par-dessus. */
html.rud-menu-ouvert #ru-revoke-btn,html.rud-menu-ouvert #rutr-sw-float{visibility:hidden !important}