/*
  ============================================================
  Copyright © 2026 Redlina SAS — redlina.com
  All rights reserved. Tous droits réservés.
  This file and all its contents are the exclusive intellectual
  property of Redlina SAS. Any reproduction, copying,
  distribution, modification, or use — in whole or in part,
  by any means whatsoever — without the prior written consent
  of Redlina SAS is strictly prohibited and may result in
  civil and criminal prosecution.
  Ce fichier et l'intégralité de son contenu constituent la
  propriété intellectuelle exclusive de Redlina SAS. Toute
  reproduction, copie, diffusion, modification ou utilisation
  — totale ou partielle, par quelque moyen que ce soit — sans
  l'autorisation écrite préalable de Redlina SAS est
  strictement interdite et susceptible d'engager des
  poursuites civiles et pénales.
  ============================================================
*/

/* ─── NAVBAR MOBILE ─────────────────────────────────────────────────────────── */

/* Tokens locaux : évite de dupliquer des valeurs magiques (z-index, timing,
   rayon) à travers les règles ci-dessous. Les couleurs restent sur les
   variables globales (--redlina-black, --redlina-red) définies ailleurs. */
:root {
  --navbar-height: 60px;
  --navbar-z-index: 2000;
  --navbar-signup-z-index: 2100;
  --navbar-transition-fast: 0.2s ease;
  --navbar-transition-arrow: 0.3s ease;
  --navbar-radius: 15px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--navbar-z-index);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(242, 239, 235, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
}

.logo-link {
  display: block;
}

.logo-link img {
  display: block;
  width: auto;
  height: 22px;
}

/* Pas de règle :hover ici (volontaire) : sur iOS/Android l'état hover
   simulé au tap peut rester "collé" après le tap, contrairement au
   desktop où :hover a un sens réel avec une souris. */
.a-navbar-login {
  color: var(--redlina-black);
  font-size: 14px;
  text-decoration: none;
  transition: opacity var(--navbar-transition-fast);
}

/* Le bouton desktop existe dans le DOM sur toutes les pages (script
   partagé) : on le masque ici plutôt que de conditionner son injection
   en JS. */
.a-navbar-signup-desktop {
  display: none;
}

/* Conteneur plein largeur à fond opaque : masque le contenu qui défile
   sous le bouton fixed. env(safe-area-inset-bottom) évite que le bouton
   colle à la home indicator sur iPhone. */
.signup-mobile-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--navbar-signup-z-index);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: #F2EFEB;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* CTA "signup" mobile : rouge uniquement sur les pages à forte intention
   (data-page-type="landing"), noir partout ailleurs par défaut — voir la
   règle body[data-page-type="landing"] en bas de fichier. Pas de :hover,
   même raison que .a-navbar-login ci-dessus. */
.a-navbar-signup-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  background: var(--redlina-black);
  border-radius: var(--navbar-radius);
  color: #fff;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}

.a-navbar-signup svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  transform: translateY(1px);
  transition: transform var(--navbar-transition-arrow);
}

/* Règle partagée avec navbar-desktop.css : le noir est la valeur par défaut
   du bouton signup (sur les articles, y compris tout futur article oublié
   sans balisage), le rouge devient l'exception explicite réservée aux pages
   à forte intention d'achat. */
body[data-page-type="landing"] .a-navbar-signup {
  background: var(--redlina-red);
}