/* ═══════════════════════════════════════════════════════════════════════
   MARQUE LUVIA — le lockup partagé par tout le site
   ═══════════════════════════════════════════════════════════════════════

   Pourquoi un fichier à part : le lockup est recopié en dur dans 247 pages.
   Tant que le style vit ici, un ajustement de chasse ou de couleur se fait
   dans UN fichier au lieu de 312 remplacements.

   Aucun JavaScript : les pages SEO ne doivent rien charger de plus, leur LCP
   est déjà le sujet. La marque est un SVG inline (~400 octets, zéro requête)
   et son animation est du CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La marque ──────────────────────────────────────────────────────── */

.lv-mark {
  color: #D9A85C;
  display: block;
  flex: none;
  overflow: visible;          /* le battement dépasse la boîte */
}
.lv-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lv-mark circle {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

/* Deux rythmes, volontairement désaccordés.

   LE TRACÉ — toutes les 3,5 s. La marque se redessine entièrement, têtes
   comprises : 0,77 s de dessin, 2,73 s de repos.

   LE BATTEMENT — toutes les 1,2 s. Une pulsation courte et faible
   (scale 1,075), en `transform` : le GPU s'en charge, coût de rendu nul.
   Les repères sont exprimés en pourcentage, donc doublés pour que la
   pulsation garde sa durée réelle (0,77 s) au lieu de se comprimer.

   Les deux durées ne sont pas multiples l'une de l'autre : elles se
   déphasent et ne retombent en phase que toutes les 21 s. Le battement
   tombe donc tantôt sur le tracé, tantôt sur le repos — ce décalage rend le
   mouvement organique au lieu de mécanique. */
.lv-mark        { animation: lv-beat 1.2s ease-out infinite; }
.lv-mark path   { animation: lv-draw 3.5s cubic-bezier(.45, 0, .2, 1) infinite; }
.lv-mark .lv-d1 { animation: lv-pop1 3.5s cubic-bezier(.2, 1.6, .4, 1) infinite; }
.lv-mark .lv-d2 { animation: lv-pop2 3.5s cubic-bezier(.2, 1.6, .4, 1) infinite; }

@keyframes lv-draw {
  0%        { stroke-dasharray: 62; stroke-dashoffset: 62; }
  22%, 100% { stroke-dasharray: 62; stroke-dashoffset: 0; }
}
@keyframes lv-pop1 { 0%, 11% { transform: scale(0); } 22%, 100% { transform: scale(1); } }
@keyframes lv-pop2 { 0%, 14% { transform: scale(0); } 25%, 100% { transform: scale(1); } }

/* Deux temps, comme un vrai battement — puis 0,43 s de repos. L'amplitude
   reste basse : à cette fréquence, un rebond marqué deviendrait agaçant. */
@keyframes lv-beat {
  0%        { transform: scale(1); }
  16%       { transform: scale(1.075); }
  32%       { transform: scale(1); }
  48%       { transform: scale(1.04); }
  64%, 100% { transform: scale(1); }
}

/* ── Le mot ─────────────────────────────────────────────────────────── */

/* Capitales espacées : registre hôtellerie plutôt que place de marché.
   .18em et non .30em — au-delà, le mot perd son poids face à la marque et
   l'œil doit l'épeler lettre à lettre au lieu d'en lire la silhouette. */
.lv-wordmark {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;             /* pieds de page sombres : le blanc descend */
  /* Le letter-spacing ajoute de la chasse APRÈS la dernière lettre et
     décale optiquement tout le bloc vers la droite. On la retire. */
  margin-right: -.18em;
}

/* Contexte clair : l'encre est décidée ici, plus de dégradé. */
.lv-wordmark--ink { color: #1C1614; }

@media (max-width: 380px) {
  .lv-wordmark { font-size: 14.5px; letter-spacing: .15em; margin-right: -.15em; }
}

/* ── La barre de navigation, en verre ───────────────────────────────────
   Rien à changer dans le HTML : 113 nav portent déjà bg-white/80 +
   backdrop-blur-md. On renforce ce qui existe — flou plus large, saturation,
   reflet de bord — au lieu d'ajouter une classe dans 268 fichiers.
   Spécificité 0,2,1 : passe devant l'utilitaire Tailwind sans !important. */

nav[class*="top-0"][class*="bg-white"] {
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
              0 8px 30px rgba(20, 14, 10, .07);
}

/* Barre du bas sur mobile : même traitement, reflet inversé. */
nav[class*="bottom-0"][class*="bg-white"] {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top-color: rgba(255, 255, 255, .5);
}

/* Le verre suppose qu'on voit à travers. Si l'utilisateur a demandé moins
   de transparence, on redevient opaque plutôt que d'insister. */
@media (prefers-reduced-transparency: reduce) {
  nav[class*="top-0"][class*="bg-white"],
  nav[class*="bottom-0"][class*="bg-white"] {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-mark, .lv-mark path, .lv-mark circle { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION — le bandeau du voyageur connecté
   ═══════════════════════════════════════════════════════════════════════

   POURQUOI CES STYLES NE SONT PAS EN TAILWIND. Ce menu est construit par
   auth.js AU MOMENT DE L'EXÉCUTION. Or le Tailwind du site est un build
   statique purgé : il ne contient que les classes présentes dans le HTML au
   moment de la compilation. Les classes écrites en JavaScript n'y sont
   jamais entrées — `lg:inline-flex`, `xl:block`, `py-2.5`, `max-w-[140px]`,
   `hover:bg-red-50` sont toutes absentes du fichier servi. D'où des liens
   collés les uns aux autres et un « Coups de cœur » qui passe à la ligne.

   Tout ce que auth.js génère doit donc s'appuyer sur du CSS écrit à la main.
   ═══════════════════════════════════════════════════════════════════════ */

.lv-nav-user{ display:flex; align-items:center; gap:26px; }

.lv-nav-link{
  font-size:14.5px; font-weight:600; color:#40352E; white-space:nowrap;
  text-decoration:none; transition:color .2s ease; line-height:1;
}
.lv-nav-link:hover{ color:#C68F45; }
/* Sous 1100 px, les trois liens et la barre de recherche se disputent la
   largeur : on les replie dans le menu plutôt que de les laisser s'écraser. */
@media (max-width:1099px){ .lv-nav-link{ display:none; } }

.lv-nav-pill{
  display:flex; align-items:center; gap:9px; flex:none;
  border:1px solid #E2D8CE; background:#fff; border-radius:99px;
  padding:6px 12px 6px 7px; cursor:pointer; font-family:inherit;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.lv-nav-pill:hover{ box-shadow:0 3px 14px rgba(31,38,60,.12); border-color:#D6C8BB; }
.lv-nav-av{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#F7DCC5,#E3B384);
  color:#7A5330; font-size:13px; font-weight:800; line-height:1;
}
.lv-nav-name{
  font-size:14px; font-weight:600; color:#1C1614; line-height:1;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Le nom disparaît avant les liens : c'est l'élément le plus long et le
   moins informatif une fois l'avatar visible. */
@media (max-width:1279px){ .lv-nav-name{ display:none; } }
.lv-nav-chev{ color:#9A8875; flex:none; transition:transform .25s ease; }
.lv-nav-pill[aria-expanded="true"] .lv-nav-chev{ transform:rotate(180deg); }

.lv-nav-menu{
  position:absolute; right:0; top:calc(100% + 10px); width:260px; z-index:60;
  background:#fff; border:1px solid #EFE9E3; border-radius:16px;
  box-shadow:0 18px 44px rgba(31,25,20,.16); padding:6px 0; overflow:hidden;
}
.lv-nav-menu[hidden]{ display:none; }
.lv-nav-head{ padding:12px 16px 11px; border-bottom:1px solid #F3EDE7; }
.lv-nav-head b{ display:block; font-size:14px; font-weight:700; color:#1C1614;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-nav-head span{ display:block; font-size:12px; color:#9A8875; margin-top:2px; }
.lv-nav-item{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:11px 16px; font-family:inherit; font-size:14px; font-weight:500;
  color:#40352E; text-decoration:none; cursor:pointer;
  transition:background .15s ease;
}
.lv-nav-item:hover{ background:#FBF8F5; }
.lv-nav-sep{ height:1px; background:#F3EDE7; margin:6px 0; }
.lv-nav-out{ color:#C0392B; font-weight:700; }
.lv-nav-out:hover{ background:#FDF2F0; }