/* =======================================================================
   RU Design : NAVIGATION MOBILE RU (standard mobile RU, 2026-10-02)

   D'après la maquette acceptée par Dany (maquette-navigation-mobile-ru.html).
   Chargée par-dessus coque-mobile.css quand la navigation est allumée
   (RU Design > Mobile et application). Composant PHP : 12-navigation-mobile.

     <div class="rud-coque-app rud-nav-on" data-ru-ecran="page" ...>
       <div class="rud-coque-defil">
         <header class="rud-coque-haut rud-nav-entete">     une seule barre
           <div class="rud-nav-barre">                       44 px
             <div class="rud-nav-gauche">‹ Bottin</div>     flèche Retour
             <p class="rud-nav-titre">K-Nova</p>            petit titre
             <div class="rud-nav-actions">...</div>          boutons du logiciel
         <main class="rud-coque-contenu">
           <nav class="rud-nav-fil">...</nav>                ordinateur seulement
           <div class="rud-nav-grand"><h1>Bottin</h1></div>  écran principal

   Principes : aucune hauteur ajoutée (la flèche est DANS la barre de 44 px),
   verre dépoli discret avec repli en fond plein, aucune animation à rebond,
   cibles de 44 px, jetons --ru-* seulement.
   ======================================================================= */

/* --- 1. L'en-tête unique (remplace la barre du haut de la coque) ------- */
.rud-nav-entete{
  display:block;box-sizing:border-box;min-height:0;padding:0;gap:0;
  position:sticky;top:0;z-index:30;
  background:var(--ru-fond,#FFFFFF);
  /* Filet en ombre (pas de bordure) : l'en-tête garde 44 px tout juste. */
  border:0;box-shadow:0 1px 0 transparent;
  transition:box-shadow .2s ease;
}
/* Verre dépoli discret, seulement si le navigateur sait flouter et mélanger
   les couleurs ; sinon le fond plein ci-dessus reste (jamais de texte
   illisible sur un fond transparent). */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) and (background:color-mix(in srgb,white 50%,transparent)){
  .rud-nav-entete{
    background:color-mix(in srgb,var(--ru-fond,#FFFFFF) 86%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
  }
}
body.rud-coque .rud-nav-entete{transition:box-shadow .2s ease}
/* Filet fin sous l'en-tête dès que le contenu passe dessous. */
.rud-nav-entete.rud-nav-trait{box-shadow:0 1px 0 var(--ru-bord,rgba(0,0,0,.10))}

.rud-nav-barre{
  box-sizing:border-box;height:44px;max-width:100%;padding:0 6px;
  display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr);align-items:center;
}
.rud-nav-gauche{justify-self:start;display:flex;align-items:center;min-width:0;max-width:100%}
.rud-nav-actions{justify-self:end;display:flex;align-items:center;min-width:0}
.rud-nav-actions :is(a,button){
  box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content: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;
}
.rud-nav-actions :is(a,button):active{background:var(--ru-accent-doux,rgba(44,111,181,.12))}
.rud-nav-actions svg{width:21px;height:21px}
.rud-nav-gauche > :not(.rud-nav-retour){min-width:44px;min-height:44px}

/* --- 2. La flèche Retour avec le nom de la destination ----------------- */
.rud-nav-retour{
  box-sizing:border-box;display:inline-flex;align-items:center;
  height:44px;min-width:44px;max-width:100%;padding:0 8px 0 2px;margin:0;
  color:var(--ru-accent,#1d5c8f);font:400 16px/1 var(--ru-police,system-ui,sans-serif);letter-spacing:-.01em;
  text-decoration:none;border-radius:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.rud-nav-retour:active,html.rud-nav-geste .rud-nav-retour{background:var(--ru-accent-doux,rgba(44,111,181,.12))}
.rud-nav-chevron{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rud-nav-retour-nom{min-width:0;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Option « icône seulement », et petits écrans : la flèche seule, 44 px. */
.rud-nav-retour.rud-nav-icone-seule{width:44px;padding:0;justify-content:center}
@media (max-width:359px){
  .rud-nav-retour-nom{display:none}
  .rud-nav-retour{width:44px;padding:0;justify-content:center}
}

/* --- 2b. Retour et Avancer (option « avancer », 2026-10-16) ------------
   Deux flèches discrètes, toujours à la même place : 34 px visibles, 44 px à
   toucher. Grisées quand elles ne mènent nulle part. Téléphone et tablette
   seulement : sur ordinateur, le navigateur a déjà les siennes. */
.rud-nav-fleches{display:flex;align-items:center;gap:2px}
.rud-nav-fl{
  position:relative;box-sizing:border-box;width:34px;height:34px;margin:5px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;background:var(--ru-accent-doux,#EAF1F8);color:var(--ru-accent,#1d5c8f);
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  transition:background-color .2s ease,color .2s ease;
}
.rud-nav-fl::before{content:"";position:absolute;inset:-5px}
.rud-nav-fl .rud-nav-chevron{width:18px;height:18px}
.rud-nav-fl:active{background:var(--ru-accent-filet,rgba(44,111,181,.24))}
.rud-nav-fl.rud-nav-off{background:transparent;color:var(--ru-discret-2,#C3CCD6);cursor:default}
@media (min-width:1000px){.rud-nav-fleches{display:none}}
/* Livraison 5 : à 320 px, les deux flèches se serrent pour ne plus passer sous le logo (44 px à toucher gardés par ::before). */
@media (max-width:359px){.rud-nav-fleches{gap:0}.rud-nav-fl{width:30px;margin:5px 0}}

/* Logo du Réseau au centre ; il ramène à l'accueil. */
.rud-nav-logo{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 6px;border-radius:10px;text-decoration:none}
.rud-nav-logo img{display:block;height:26px;width:auto;max-width:132px;object-fit:contain}
.rud-nav-titre.rud-nav-titre--lecteur{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Appui long sur Retour : les pages visitées, dans une petite carte. */
.rud-nav-barre{position:relative}
.rud-nav-liste{
  position:absolute;top:44px;left:6px;z-index:40;box-sizing:border-box;
  width:min(300px,calc(100vw - 32px));max-height:60vh;overflow-y:auto;padding:8px;
  background:var(--ru-fond,#FFFFFF);border:1px solid var(--ru-bord,rgba(0,0,0,.10));border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
}
.rud-nav-liste-titre{margin:4px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ru-discret,#6b7280)}
.rud-nav-liste a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;font-size:16px;color:var(--ru-texte,#0e2438);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rud-nav-liste a:hover,.rud-nav-liste a:focus-visible{background:var(--ru-accent-doux,rgba(44,111,181,.12));outline:none}

/* --- 3. Petit titre (barre) et grand titre (écran principal) ----------- */
.rud-nav-titre{
  margin:0;min-width:0;max-width:100%;
  font:600 16px/1.2 var(--ru-police,system-ui,sans-serif);letter-spacing:-.01em;color:var(--ru-texte,#0e2438);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .18s ease;
}
.rud-nav-entete.rud-nav-replie .rud-nav-titre{opacity:1}
.rud-nav-grand{padding:6px 0 12px}
/* Coque sans marges (le logiciel a les siennes) : le grand titre garde 16 px. */
.rud-coque-app:not(.rud-coque-marges) .rud-nav-grand{padding-left:16px;padding-right:16px}
.rud-nav-grand-titre{
  margin:0;font:800 30px/1.15 var(--ru-police,system-ui,sans-serif);letter-spacing:-.02em;
  color:var(--ru-texte,#0e2438);overflow-wrap:anywhere;
}
.rud-nav-sous-titre{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--ru-discret,#6b7280)}
@media (max-width:359px){.rud-nav-grand-titre{font-size:26px}}

/* Zone lue par les lecteurs d'écran (titre annoncé quand la vue change). */
.rud-nav-annonce{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- 4. Focus visible (clavier) --------------------------------------- */
.rud-nav-entete :is(a,button):focus-visible,
.rud-nav-fil a:focus-visible{outline:2px solid var(--ru-accent,#1d5c8f);outline-offset:2px}

/* --- 5. Fil d'Ariane : ordinateur seulement --------------------------- */
.rud-nav-fil{display:none}
@media (min-width:1000px){
  .rud-nav-entete{top:var(--wp-admin--admin-bar--height,0px)}
  .rud-nav-fil{display:block;margin:12px 0 4px;font-size:13px;line-height:1.4;color:var(--ru-discret,#6b7280)}
  .rud-nav-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
  .rud-nav-fil li{display:inline-flex;align-items:center;min-width:0}
  .rud-nav-fil li + li::before{content:"\203A";margin:0 6px 0 4px;color:var(--ru-discret-2,#9ca3af)}
  .rud-nav-fil a{color:var(--ru-accent,#1d5c8f);text-decoration:none;border-radius:4px}
  .rud-nav-fil a:hover{text-decoration:underline}
  .rud-nav-fil [aria-current="page"]{color:var(--ru-texte,#0e2438);font-weight:600}
  /* Sur ordinateur, le fil d'Ariane remplace la flèche. */
  [data-rud-nav-options~="fil_ariane"] .rud-nav-retour{display:none}
}

/* --- 6. Mode application installée : l'en-tête couvre la zone d'état --
   La coque met la zone de sécurité du haut sur le cadre ; avec la
   navigation, elle passe dans l'en-tête, pour que le verre dépoli monte
   jusque sous l'heure et la batterie, comme dans les grandes applications. */
@media (display-mode:standalone) and (max-width:999px){
  html.rud-coque-app-installee body.rud-coque .rud-coque-app.rud-nav-on{padding-top:0}
  html.rud-coque-app-installee body.rud-coque .rud-nav-on .rud-nav-entete{padding-top:env(safe-area-inset-top,0px)}
}

/* --- 6b. Flèche intégrée (logiciel qui garde sa barre du haut) ---------
   Player One, RU Community, hubs : la flèche se pose dans LEUR barre, à
   gauche, sans hauteur ajoutée. Ordinateur : cachée, rien ne change. La
   couleur suit le jeton --rud-nav-couleur du logiciel (rouge de Player One),
   sinon l'accent de la charte. */
.rud-nav-retour.rud-nav-integree{color:var(--rud-nav-couleur,var(--ru-accent,#1d5c8f));flex:0 0 auto;max-width:150px}
.rud-nav-retour.rud-nav-integree[hidden]{display:none}
@media (min-width:1000px){
  .rud-nav-retour.rud-nav-integree{display:none !important}
}

/* --- 6c. Coque d'un logiciel qui garde son affichage d'ordinateur ------
   (argument « ordinateur » => false de ru_design_coque_mobile()) : sur
   ordinateur, ni en-tête RU, ni grand titre, ni fil d'Ariane : la page reste
   exactement comme avant. */
@media (min-width:1000px){
  .rud-nav-ordi-non .rud-nav-entete,
  .rud-nav-ordi-non .rud-nav-grand,
  .rud-nav-ordi-non .rud-nav-fil{display:none !important}
}

/* --- 7. Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rud-nav-entete,.rud-nav-titre,.rud-nav-fl{transition:none !important}
}