/* css/nav-app.css — LA BARRE DE NAVIGATION DU BAS, SUR TELEPHONE — 01/11/2026.
 *
 * Helmi, capture a l appui : « une barre de navigation comme ça pour le menu
 * sur mobile, que ça fasse style application ». Reference : une barre
 * flottante aux bouts arrondis, l onglet actif souleve dans une bosse avec son
 * nom et un trait d or, les autres en icones seules.
 *
 * Construite par js/nav-app.js (une seule copie pour les 27 pages). Visible
 * sous 1024 px seulement, la ou le menu du haut devient un burger. Le burger
 * reste : il garde les pages qui ne tiennent pas dans cinq onglets.
 *
 * Pas de contour d 1 px (forme bannie n° 1, DESIGN.md) : la barre se detache
 * par son ombre. Couleurs : les jetons du site (--gold, --text...), donc la
 * nuit et le jour suivent tout seuls.
 */
.nav-app { display: none; }

@media (max-width: 1023px) {
  :root {
    --nav-app-h: 64px;
    --nav-app-fond: #0B1A3F;
    --nav-app-ombre: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(245, 241, 234, 0.06) inset;
    --nav-app-icone: rgba(245, 241, 234, 0.72);
  }
  :root[data-theme="light"] {
    --nav-app-fond: #FDFAF4;
    --nav-app-ombre: 0 10px 30px rgba(92, 74, 42, 0.18), 0 0 0 1px rgba(43, 37, 33, 0.04);
    --nav-app-icone: #5E554D;
  }

  .nav-app {
    display: block;
    position: fixed; left: 12px; right: 12px; z-index: 60;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: 520px; margin: 0 auto;
    transition: transform .28s ease, opacity .28s ease;
  }
  .nav-app__barre {
    position: relative;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: var(--nav-app-h);
    padding: 0 6px;
    border-radius: 26px;
    background: var(--nav-app-fond);
    box-shadow: var(--nav-app-ombre);
  }
  .nav-app__lien {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 100%; min-width: 44px;
    color: var(--nav-app-icone); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-app__lien svg { width: 24px; height: 24px; flex: none; transition: transform .25s ease, color .25s ease; }
  .nav-app__nom {
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  }
  .nav-app__lien:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; border-radius: 18px; }
  .nav-app__lien[aria-current="page"] { color: var(--gold); }

  /* La page laisse la place a la barre, et le bouton WhatsApp passe au-dessus. */
  body.avec-nav-app { padding-bottom: calc(var(--nav-app-h) + 26px + env(safe-area-inset-bottom, 0px)); }
  body.avec-nav-app .btn-floating { bottom: calc(var(--nav-app-h) + 24px + env(safe-area-inset-bottom, 0px)); }

  /* Le menu plein ecran ouvert : la barre s efface dessous. */
  body.nav-ouvert .nav-app { transform: translateY(140%); opacity: 0; pointer-events: none; }

  /* ── LA VERSION RETENUE : LA BOSSE + LE DEVIS EN OR — 01/11/2026 ──────
     Helmi a choisi « mélange » parmi trois directions : la bosse de la A
     (l onglet de la page ou l on est se souleve, avec son nom en capitales
     et un trait d or) et le rond d or de la C (« Devis » toujours en avant
     au centre : l action qui fait gagner un mariage reste sous le pouce).
     Les autres onglets en icones seules ; leur nom reste lu par le lecteur
     d ecran. */
  .nav-app__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* La bosse */
  .nav-app__lien[aria-current="page"]:not(.nav-app__lien--centre) { justify-content: flex-end; padding-bottom: 10px; }
  .nav-app__lien[aria-current="page"] .nav-app__nom { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-app__lien[aria-current="page"]:not(.nav-app__lien--centre) svg { transform: translateY(-10px); }
  .nav-app__lien[aria-current="page"]:not(.nav-app__lien--centre)::before {
    content: ""; position: absolute; z-index: -1;
    /* Opaque, comme la barre : la bosse se fond dedans sans couture. Pas plus
       large que l onglet, sinon elle deborde du bout arrondi de la barre.
       L ombre est coupee sous le haut de la barre (clip-path). */
    left: 50%; top: -18px; width: min(72px, 100%); height: 60px; transform: translateX(-50%);
    border-radius: 30px;
    background: var(--nav-app-fond);
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.16);
    clip-path: inset(-30px -30px 42px -30px);
  }
  .nav-app__lien[aria-current="page"]::after {
    content: ""; position: absolute; bottom: 5px; left: 50%; width: 22px; height: 3px; transform: translateX(-50%);
    border-radius: 3px; background: var(--gold);
  }

  /* Le Devis, toujours dans son rond d or. Texte quasi noir sur l or :
     le contraste de la DA (11:1 la nuit, 7:1 le jour). */
  .nav-app__lien--centre { color: #14100A; justify-content: flex-end; padding-bottom: 10px; }
  .nav-app__lien--centre::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: -18px; width: 56px; height: 56px; transform: translateX(-50%);
    border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 0 6px var(--nav-app-fond), 0 10px 24px rgba(0, 0, 0, 0.32);
  }
  .nav-app__lien--centre svg { position: absolute; top: -2px; left: 50%; margin-left: -12px; }
  .nav-app__lien--centre .nav-app__nom { color: var(--gold); }
  .nav-app__lien--centre:not([aria-current="page"]) .nav-app__nom { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--nav-app-icone); }
  .nav-app__lien--centre[aria-current="page"]::after { bottom: 5px; }
  /* Sur la page Devis, l icone garde son encre : de l or sur l or disparaissait. */
  .nav-app__lien--centre[aria-current="page"] { color: #14100A; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-app, .nav-app__lien svg { transition: none; }
}