/* ══════════════════════════════════════════════════════════════════
   LSVEVO — bannière et pied de page universels
   À inclure sur toutes les pages : <link rel="stylesheet" href="/lsv-shell.css">
   Le balisage correspondant se trouve dans lsv-shell.html (modèle).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --lsv-ink:#18213A;
  --lsv-gris:#657083;
  --lsv-bord:#E5E9E5;
  --lsv-brun:#7A5230;
  --lsv-brun-l:#F3ECE3;
  --lsv-serif:'Playfair Display', Georgia, serif;
  --lsv-sans:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─────────── BANNIÈRE ─────────── */
.lsv-head {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lsv-bord);
  font-family: var(--lsv-sans);
}

/* le logo, tout à gauche, avec le nom collé */
.lsv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.lsv-brand__mark {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 1.5px solid rgba(122,82,48,.28);
  transition: transform .3s ease, border-color .3s ease;
}
.lsv-brand__mark video,
.lsv-brand__mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); display: block; }
.lsv-brand:hover .lsv-brand__mark { transform: scale(1.06); border-color: var(--lsv-brun); }
.lsv-brand__name {
  font-family: var(--lsv-serif); font-size: 1.24rem; font-weight: 700;
  letter-spacing: .07em; color: var(--lsv-ink); line-height: 1;
}

/* navigation */
.lsv-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.lsv-nav a {
  position: relative; font-size: .84rem; font-weight: 500;
  color: var(--lsv-gris); text-decoration: none; transition: color .25s;
}
.lsv-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 0; height: 1.5px; background: var(--lsv-brun); transition: width .3s;
}
.lsv-nav a:hover { color: var(--lsv-ink); }
.lsv-nav a:hover::after { width: 100%; }
.lsv-nav a.on { color: var(--lsv-brun); font-weight: 600; }
.lsv-nav a.on::after { width: 100%; }

/* le rond avec le bonhomme — accès à l'espace client */
.lsv-account {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--lsv-bord);
  transition: border-color .28s, background .28s, transform .28s;
}
.lsv-account svg { width: 18px; height: 18px; stroke: var(--lsv-gris); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .28s; }
.lsv-account:hover { border-color: var(--lsv-brun); background: var(--lsv-brun-l); transform: translateY(-2px); }
.lsv-account:hover svg { stroke: var(--lsv-brun); }

/* ─────────── PIED DE PAGE ─────────── */
.lsv-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 16px clamp(16px, 3vw, 40px);
  background: #fff; border-top: 1px solid var(--lsv-bord);
  font-family: var(--lsv-sans); font-size: .73rem; color: var(--lsv-gris);
}
.lsv-foot a { color: inherit; text-decoration: none; transition: color .25s; }
.lsv-foot a:hover { color: var(--lsv-brun); }
.lsv-foot__sep { opacity: .35; }

/* ─────────── RETOUR AUX CATÉGORIES ───────────
   La petite barre posée juste sous la bannière, alignée sur le logo. */
.lsv-retour { padding: 16px clamp(16px, 3vw, 40px) 0; }
.lsv-retour a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lsv-sans); font-size: .8rem; color: var(--lsv-gris);
  text-decoration: none; transition: color .25s, gap .25s;
}
.lsv-retour a:hover { color: var(--lsv-brun); gap: 12px; }
.lsv-retour svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────── EN-TÊTE DE PAGE ───────────
   Le grand bandeau de titre prenait presque tout l'écran à l'ouverture.
   On le ramène à une taille raisonnable, partout d'un coup.
   (Chargée après style.css, cette feuille a le dernier mot.) */
.page-hero { padding: 30px 0 26px; }
.page-hero::before { display: none; }          /* la grosse tache floue */
.page-hero__title {
  font-family: var(--lsv-serif); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15;
  letter-spacing: -.01em; margin-bottom: 10px;
}
.page-hero__title br { display: none; }         /* le titre tient sur une ligne */
.page-hero__desc { font-size: .92rem; line-height: 1.7; max-width: 620px; }
.page-hero__back { margin-bottom: 18px; }
.page-content { padding-top: 46px; }

/* ─────────── VARIANTE SOMBRE ───────────
   Pour les pages sur fond noir : <body class="lsv-nuit">.
   Mêmes liens, même logo, même place — seules les couleurs changent. */
body.lsv-nuit .lsv-retour a { color: rgba(255,255,255,.55); }
body.lsv-nuit .lsv-retour a:hover { color: #E8C86A; }
body.lsv-nuit .lsv-head { background: rgba(9,9,11,.86); border-bottom-color: rgba(255,255,255,.09); }
body.lsv-nuit .lsv-brand__name { color: #F4F3F0; }
body.lsv-nuit .lsv-brand__mark { border-color: rgba(201,162,39,.38); }
body.lsv-nuit .lsv-brand:hover .lsv-brand__mark { border-color: #C9A227; }
body.lsv-nuit .lsv-nav a { color: rgba(255,255,255,.6); }
body.lsv-nuit .lsv-nav a:hover { color: #fff; }
body.lsv-nuit .lsv-nav a::after { background: #C9A227; }
body.lsv-nuit .lsv-nav a.on { color: #E8C86A; }
body.lsv-nuit .lsv-account { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
body.lsv-nuit .lsv-account svg { stroke: rgba(255,255,255,.72); }
body.lsv-nuit .lsv-account:hover { background: rgba(201,162,39,.15); border-color: #C9A227; }
body.lsv-nuit .lsv-account:hover svg { stroke: #E8C86A; }
body.lsv-nuit .lsv-foot { background: #08080A; border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.45); }
body.lsv-nuit .lsv-foot a:hover { color: #E8C86A; }

@media (max-width: 780px) {
  .lsv-nav { display: none; }
  .lsv-foot { gap: 12px; font-size: .68rem; }
}