/* ==========================================================
   Prodige2rue — la barre du bas, façon « dock » (toutes les pages)
   Une plaque posée au-dessus de la page ; la rubrique ouverte est un autocollant vert qui dépasse, collé de travers.

   Ce fichier se charge APRÈS la feuille de style de la page et remplace l'habillage de sa barre :
     .ec-nav   l'écoute (ecoute.html, fond sombre)
     .cw-nav   Mon espace, l'espace artiste et la fiche d'un artiste (sur téléphone)
     .rc-nav   Chercher (recherche.html)
     .fv-nav   Favoris (favoris.html)
   Le code HTML des barres ne change pas. Pour redessiner la barre partout, il n'y a que ce fichier à modifier.
   Après une modification, change le ?v= du lien vers ce fichier dans les six pages.
   ========================================================== */

/* ---------- La barre : transparente, elle ne sert plus que de cadre à la plaque ----------
   Elle garde sa hauteur d'origine (64 px) : la mise en page des pages ne bouge pas, seul l'autocollant dépasse un peu au-dessus. */
.ec-nav,.cw-nav,.rc-nav,.fv-nav{height:calc(64px + env(safe-area-inset-bottom,0px));padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:0;
  border:0;border-radius:0;isolation:isolate;background:linear-gradient(to top,var(--bone) 62%,rgba(243,239,230,0))}
.ec-nav{background:none}   /* sur l'écoute, la page est déjà sombre derrière la plaque */

/* ---------- La plaque ---------- */
.ec-nav::before,.cw-nav::before,.rc-nav::before,.fv-nav::before{content:"";position:absolute;left:10px;right:10px;top:6px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:-1;
  background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}
.ec-nav::before{box-shadow:4px 4px 0 var(--green)}   /* ombre verte sur fond sombre */

/* ---------- Les rubriques ---------- */
.ec-nav__it,.cw-nav__it,.rc-nav__it,.fv-nav__it{gap:0;margin:0 4px;padding:0;border:2.5px solid transparent;border-radius:13px;color:var(--ink);text-decoration:none;white-space:nowrap;
  font-family:var(--disp);font-weight:400;font-size:13px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;transition:transform .12s}
.ec-nav__ic,.cw-nav__ic,.rc-nav__ic,.fv-nav__ic{height:23px;min-width:0;border-radius:0}
.ec-nav__ic svg,.cw-nav__ic svg,.rc-nav__ic svg,.fv-nav__ic svg{width:22px;height:22px}
.ec-nav__it:active,.cw-nav__it:active,.rc-nav__it:active,.fv-nav__it:active{transform:translateY(2px)}
.ec-nav__it:focus-visible,.cw-nav__it:focus-visible,.rc-nav__it:focus-visible,.fv-nav__it:focus-visible{outline:3px solid var(--green);outline-offset:1px}

/* ---------- La rubrique ouverte : l'autocollant vert ---------- */
.ec-nav__it[aria-current="page"],.cw-nav__it[aria-current="page"],.rc-nav__it[aria-current="page"],.fv-nav__it[aria-current="page"]{
  background:var(--green);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translateY(-8px) rotate(-3deg)}
.ec-nav__it[aria-current="page"] .ec-nav__ic,.cw-nav__it[aria-current="page"] .cw-nav__ic,.rc-nav__it[aria-current="page"] .rc-nav__ic,.fv-nav__it[aria-current="page"] .fv-nav__ic{background:none;border:0}
.ec-nav__it[aria-current="page"] .ec-nav__ic svg,.cw-nav__it[aria-current="page"] .cw-nav__ic svg,.rc-nav__it[aria-current="page"] .rc-nav__ic svg,.fv-nav__it[aria-current="page"] .fv-nav__ic svg{width:22px;height:22px}

/* ---------- Petits téléphones ---------- */
@media (max-width:350px){
  .ec-nav,.cw-nav,.rc-nav,.fv-nav{padding-left:10px;padding-right:10px}
  .ec-nav::before,.cw-nav::before,.rc-nav::before,.fv-nav::before{left:7px;right:7px}
  .ec-nav__it,.cw-nav__it,.rc-nav__it,.fv-nav__it{margin-left:2px;margin-right:2px;font-size:12px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .ec-nav__it,.cw-nav__it,.rc-nav__it,.fv-nav__it{transition:none}
}