/* vocals.miraé : styles communs à toutes les pages */
:root{
  --noir:#0e1119;
  --noir-2:#171c29;
  --papier:#eef1f5;
  --papier-att:#7c8a95;
  --bleu:#5d9dd6;
  --bleu-vif:#7ab2e6;
  --alerte:#b8452f;
  --ligne:#2a3140;
  --r-sans:'Archivo',system-ui,sans-serif;
  --r-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-titre:'Archivo',system-ui,sans-serif;
  /* charte vocals.miraé, thème Night */
  --raised:#1f2536;
  --accent-soft:#1a2a40;
  /* hauteur réelle de .topbar : 64px de contenu + 1px de bordure basse.
     Sert de point d'ancrage au bandeau d'annonce et au menu mobile. */
  --h-barre:65px;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* titres de la charte : Archivo extra-gras, capitales pour les titres de page et de section */
h1, h2{font-family:var(--r-titre); font-weight:800 !important; letter-spacing:-.015em; text-transform:uppercase; text-wrap:balance;}
h3{font-family:var(--r-sans);}
html{scroll-behavior:smooth;}
body{
  background:var(--noir);
  color:var(--papier);
  font-family:var(--r-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
::selection{background:var(--bleu); color:var(--noir);}

/* ---------- topbar, commune aux trois pages ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(14,17,25,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ligne);
}
.topbar .in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.brand{font-weight:800; font-size:18px; letter-spacing:.01em; text-decoration:none;}
.brand span{color:var(--bleu);}
nav{display:flex; gap:28px; font-size:14px; color:var(--papier-att);}
nav a{text-decoration:none; transition:color .15s;}
nav a:hover, nav a.actif{color:var(--papier);}
.right-group{display:flex; align-items:center; gap:16px;}
.lang-switch{display:flex; border:1px solid var(--ligne); border-radius:4px; overflow:hidden; font-family:var(--r-mono); font-size:12px;}
.lang-switch button{background:transparent; border:none; color:var(--papier-att); padding:7px 11px; cursor:pointer;}
.lang-switch button.actif{background:var(--bleu); color:var(--noir); font-weight:600;}

.lien-panier{position:relative; display:flex; align-items:center; color:var(--papier); text-decoration:none;}
.lien-panier svg{width:20px; height:20px; fill:none; stroke:var(--papier); stroke-width:1.6;}
.lien-compte{margin-right:2px;} .lien-compte:hover svg{stroke:var(--bleu-vif);}
.panier-badge{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:-8px; right:-9px; min-width:16px; height:16px; padding:0 4px;
  background:var(--bleu); color:var(--noir); border-radius:10px;
  font-family:var(--r-mono); font-size:10px; font-weight:700;
}

/* ---------- menu mobile : remplace la nav plutôt que de la cacher ---------- */
.bouton-menu{display:none; background:none; border:1px solid var(--ligne); border-radius:4px;
  width:38px; height:38px; cursor:pointer; flex:none; align-items:center; justify-content:center;}
.bouton-menu span, .bouton-menu span::before, .bouton-menu span::after{
  display:block; width:16px; height:2px; background:var(--papier); position:relative; transition:.2s;}
.bouton-menu span::before, .bouton-menu span::after{content:''; position:absolute; left:0;}
.bouton-menu span::before{top:-5px;}
.bouton-menu span::after{top:5px;}
.bouton-menu.ouvert span{background:transparent;}
.bouton-menu.ouvert span::before{transform:rotate(45deg); top:0;}
.bouton-menu.ouvert span::after{transform:rotate(-45deg); top:0;}

.nav-mobile{
  display:none; position:fixed; top:var(--h-barre); left:0; right:0; bottom:0; z-index:39;
  background:var(--noir); border-top:1px solid var(--ligne); padding:24px 28px;
}
.nav-mobile.ouvert{display:block;}
.nav-mobile a{display:block; padding:16px 0; font-size:17px; color:var(--papier); text-decoration:none;
  border-bottom:1px solid var(--ligne);}
.nav-mobile a.actif{color:var(--bleu-vif);}

@media (max-width:760px){
  nav{display:none;}
  .bouton-menu{display:flex;}
}

/* ---------- boutons, communs ---------- */
.btn{
  font-family:var(--r-sans); font-weight:700; font-size:15px; padding:14px 26px;
  border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  border:1px solid transparent; cursor:pointer;
}
.btn-primaire{background:var(--bleu); color:var(--noir);}
.btn-primaire:hover{background:var(--bleu-vif);}
.btn-fantome{border-color:var(--papier); color:var(--papier);}
.btn-fantome:hover{background:var(--raised);}

/* ---------- en-tête de page générique (packs, topline) ---------- */
.page-hero{padding:56px 0 44px; border-bottom:1px solid var(--ligne);}
.page-hero .fil{font-family:var(--r-mono); font-size:12px; color:var(--papier-att); margin-bottom:18px;}
.page-hero .fil a{color:var(--papier-att); text-decoration:none;}
.page-hero .fil a:hover{color:var(--papier);}
.page-hero h1{font-family:var(--r-titre); font-size:clamp(30px,4.6vw,46px); font-weight:600; line-height:1.1; letter-spacing:-0.005em; max-width:16ch;}
.page-hero .sub{margin-top:16px; font-size:17px; color:var(--papier-att); max-width:56ch; line-height:1.6;}

/* ---------- footer, commun ---------- */
footer{border-top:1px solid var(--ligne); padding:44px 0; font-size:13px; color:var(--papier-att);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer a{text-decoration:none; color:var(--papier-att);}
footer a:hover{color:var(--bleu-vif);}
.foot-links{display:flex; gap:22px; flex-wrap:wrap;}

/* les cibles d'ancre se calent sous la barre + le bandeau, sinon le
   titre visé se retrouve caché derrière eux au moment du saut */
[id]{scroll-margin-top:130px;}

.section{padding:60px 0;}
.section + .section{border-top:1px solid var(--ligne);}

/* ---------- bandeau d'annonce ----------
   Ancré juste sous la barre de navigation : il reste visible pendant
   tout le défilement, sans se superposer à elle ni masquer sa bordure. */
.bandeau-annonce{
  position:sticky; top:var(--h-barre); z-index:38;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:var(--bleu); color:var(--noir); text-decoration:none;
  padding:13px 20px; font-family:var(--r-mono); font-size:12.5px; font-weight:600;
  text-align:center; border-bottom:1px solid var(--bleu-fonce, #3d6f9c);
}
.bandeau-annonce svg{width:15px; height:15px; flex:none; stroke:var(--noir); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.bandeau-annonce:hover{background:var(--bleu-vif);}
.bandeau-annonce .bandeau-date{font-weight:400; opacity:.75;}

/* bouton « Plugin gratuit » de la barre du haut : visible sur ordinateur, dans le menu sur téléphone */
.bouton-plugin{font-size:12.5px; font-weight:700; color:var(--noir); background:var(--bleu); border-radius:20px; padding:7px 14px; text-decoration:none; white-space:nowrap;}
.bouton-plugin:hover{background:var(--bleu-vif);}
@media (max-width:720px){ .bouton-plugin{display:none;} }

/* téléphone : la barre du haut tient sur une ligne (langue, compte, panier, menu),
   et les icônes gardent une zone de toucher confortable */
@media (max-width:480px){
  .topbar .in{gap:10px;}
  .right-group{gap:4px;}
  .lang-switch{flex:none;}
  .lang-switch button{padding:8px 9px;}
  .lien-panier{padding:10px 7px;}
}