:root{
  --wn-bg:#090A0D; --wn-anthracite:#15171C; --wn-text:#F3F3F3;
  --wn-gold:#C59E58; --wn-navy:#071A2F; --wn-danger:#dc3545;
  --wn-accent:#C59E58; --wn-accent-rgb:197,158,88; --wn-accent-on:#15171C;
  --wn-accent-text:#C59E58; --wn-accent-text-rgb:197,158,88; --wn-accent-hover:#a9812f;
  color-scheme:dark;
}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-display:swap;}
body{background:var(--wn-bg);color:var(--wn-text);font-family:"Montserrat",system-ui,sans-serif;font-size:18px;line-height:1.6;}
h1,h2,h3,.font-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:.01em;}
a{color:var(--wn-accent-text);}
.btn-wn-primary{background:var(--wn-accent);color:var(--wn-accent-on);border:2px solid var(--wn-accent);min-height:52px;font-size:17px;font-weight:600;border-radius:10px;padding:.6rem 1.4rem;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.btn-wn-secondary{background:transparent;color:#fff;border:2px solid var(--wn-accent-text);min-height:52px;font-size:17px;font-weight:600;border-radius:10px;padding:.6rem 1.4rem;transition:background-color .18s ease,border-color .18s ease;}
.btn-wn-primary:hover,.btn-wn-primary:focus-visible{background:var(--wn-accent-hover);border-color:var(--wn-text);color:var(--wn-accent-on);box-shadow:0 0 0 2px rgba(243,243,243,.3);}
.btn-wn-secondary:hover,.btn-wn-secondary:focus-visible{background:rgba(var(--wn-accent-text-rgb),.18);border-color:var(--wn-text);color:#fff;}
/* Le gabarit senior de 52px vient d'un min-height : sans centrage explicite,
   le texte reste collé en haut du bouton, la hauteur d'appoint tombant
   entièrement sous lui. */
.btn-wn-primary,.btn-wn-secondary{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;}

/* Ligne de tracklist : horizontale au-dessus de 768px, empilée en dessous,
   afin que les boutons conservent le gabarit senior de 52px sans écraser
   la ligne sur mobile. */
/* Texte secondaire sur fond sombre. La classe text-muted de Bootstrap y rend
   un gris presque noir : elle est calculée pour un fond clair. */
.wn-muted{color:var(--wn-text);opacity:.75;}
.wn-contest-closed{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.625rem;font-weight:600;color:var(--wn-accent-text);padding:1rem 1.25rem;border-top:1px solid rgba(var(--wn-accent-text-rgb),.45);border-bottom:1px solid rgba(var(--wn-accent-text-rgb),.45);}
/* Pastille d'aide du back-office : porte son texte dans title, que Bootstrap
   reprend en infobulle. cursor:help signale qu'elle n'agit pas. */
.wn-admin-info{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;margin-left:.4rem;padding:0;border:1px solid var(--wn-gold);border-radius:50%;background:transparent;color:var(--wn-gold);font-family:Georgia,serif;font-size:.8rem;font-style:italic;font-weight:700;line-height:1;cursor:help;}
.wn-admin-info:hover,.wn-admin-info:focus-visible{background:var(--wn-gold);color:var(--wn-anthracite);}
.wn-track-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.10);}
.wn-track-row__artwork{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none;}
.wn-track-row__position{color:rgba(243,243,243,.55);min-width:2.25rem;font-size:1.125rem;}
.wn-track-row__title{flex:1 1 auto;font-size:1.125rem;}
.wn-track-row__duration{color:rgba(243,243,243,.55);font-size:1.125rem;}
.wn-track-row__actions{display:flex;align-items:center;gap:.75rem;flex:none;}
.wn-track-row__actions .btn{white-space:nowrap;}
/* Le panneau d'extrait est masqué/révélé via l'attribut `hidden` (JS) ;
   la garde `:not([hidden])` évite qu'une règle d'affichage nue n'écrase cet
   attribut, sans dépendre d'un `!important` tiers (ex. reboot Bootstrap). */
[data-preview-panel]:not([hidden]){display:block;}

@media (max-width:767.98px){
  .wn-track-row{flex-wrap:wrap;}
  .wn-track-row__title{flex:1 1 100%;order:2;}
  .wn-track-row__duration{order:3;}
  .wn-track-row__actions{flex:1 1 100%;order:4;flex-direction:column;align-items:stretch;min-width:0;}
  .wn-track-row__actions .btn,
  .wn-track-row__actions audio{width:100%;}
  /* `white-space:nowrap` (bloc desktop) fige le libellé complet du bouton
     d'écoute sur une seule ligne ; sur un enfant flex, min-width vaut `auto`
     par défaut, ce qui empêche le conteneur de rétrécir sous cette largeur
     et provoque un débordement horizontal de toute la page. On neutralise
     ces deux effets uniquement sous 768px : le libellé peut revenir sur
     plusieurs lignes, et chaque enfant flex peut redevenir plus étroit que
     son contenu intrinsèque. */
  .wn-track-row__actions .btn{white-space:normal;}
  .wn-track-row__actions audio{min-width:0;}
  .wn-track-row__actions > span{min-width:0;max-width:100%;}
}

/* Titres de section : centrés avec un séparateur décoratif doré */
.section-title{text-align:center;}
.section-title::after{content:"";display:block;width:64px;height:3px;background:var(--wn-accent-text);margin:.85rem auto 0;border-radius:2px;}

/* Pastilles de streaming */
.streaming-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.7rem 1.6rem;
  background:var(--wn-anthracite);color:var(--wn-accent-text);
  border:2px solid var(--wn-accent-text);border-radius:999px;
  font-weight:600;font-size:1.125rem;text-decoration:none;
  transition:background-color .2s ease, transform .2s ease;
}
.streaming-pill:hover{background:rgba(var(--wn-accent-text-rgb),.18);color:var(--wn-accent-text);transform:translateY(-2px);}

/* Cartes album */
.album-card{
  transition:transform .2s ease, box-shadow .2s ease;
}
.album-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(var(--wn-accent-text-rgb),.25);
}
.album-card .card-img-top{border-radius:12px 12px 0 0;}

/* Navigation : survol + page active */
.navbar-nav .nav-link{color:var(--wn-text);transition:color .15s ease;position:relative;}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--wn-accent-text);}
.navbar-nav .nav-link.active{color:var(--wn-accent-text);font-weight:600;}
.navbar-nav .nav-link.active::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.1rem;height:2px;background:var(--wn-accent-text);border-radius:2px;}
/* Menu vertical (mobile déplié) : bordure gauche au lieu du soulignement pleine largeur */
@media (max-width:991.98px){
  .navbar-nav .nav-link.active::after{display:none;}
  .navbar-nav .nav-link.active{border-left:3px solid var(--wn-accent-text);padding-left:.5rem;}
}

/* Bouton hamburger visible (barres dorées) */
.navbar-toggler{border-color:rgba(var(--wn-accent-text-rgb),.55);}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(var(--wn-accent-text-rgb),.35);}
.navbar-toggler-icon{background-image:none;background-color:var(--wn-accent-text);-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/100% 100% no-repeat;}

/* Formulaires lisibles quel que soit le thème système */
.form-control,.form-select{background-color:var(--wn-anthracite);color:var(--wn-text);border:1px solid rgba(var(--wn-accent-text-rgb),.4);}
.form-control:focus,.form-select:focus{background-color:var(--wn-anthracite);color:var(--wn-text);border-color:var(--wn-accent-text);box-shadow:0 0 0 .2rem rgba(var(--wn-accent-text-rgb),.25);}
.form-control::placeholder{color:rgba(243,243,243,.55);opacity:1;}
.form-select option{color:var(--wn-text);background-color:var(--wn-anthracite);}

/* Tableaux back-office : thème sombre (Bootstrap applique --bs-table-bg blanc par défaut) */
.table{--bs-table-bg:transparent;--bs-table-color:var(--wn-text);--bs-table-border-color:rgba(197,158,88,.2);color:var(--wn-text);}
.table > thead th{color:var(--wn-gold);border-bottom:2px solid rgba(197,158,88,.4);font-weight:600;}
.table > tbody td{border-color:rgba(197,158,88,.12);vertical-align:middle;}
.table > tbody tr:hover > *{--bs-table-bg-state:rgba(197,158,88,.06);}

/* Pagination du back-office : les couleurs par défaut de Bootstrap sont
   calculées pour un fond clair. */
.pagination{--bs-pagination-bg:var(--wn-anthracite);--bs-pagination-color:var(--wn-accent-text);--bs-pagination-border-color:rgba(var(--wn-accent-text-rgb),.3);--bs-pagination-hover-bg:rgba(var(--wn-accent-text-rgb),.15);--bs-pagination-hover-color:var(--wn-accent-text);--bs-pagination-hover-border-color:rgba(var(--wn-accent-text-rgb),.5);--bs-pagination-focus-bg:rgba(var(--wn-accent-text-rgb),.15);--bs-pagination-focus-color:var(--wn-accent-text);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(var(--wn-accent-text-rgb),.25);--bs-pagination-active-bg:var(--wn-accent);--bs-pagination-active-color:var(--wn-accent-on);--bs-pagination-active-border-color:var(--wn-accent);--bs-pagination-disabled-bg:transparent;--bs-pagination-disabled-color:rgba(243,243,243,.4);--bs-pagination-disabled-border-color:rgba(var(--wn-accent-text-rgb),.15);margin-bottom:0;}

/* Boutons admin (charte) */
.btn-admin{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--wn-gold);color:var(--wn-gold);background:transparent;border-radius:8px;padding:.45rem .9rem;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease;}
.btn-admin:hover{background:rgba(197,158,88,.15);color:var(--wn-gold);}
.btn-admin-danger{border-color:rgba(220,53,69,.6);color:var(--wn-danger);background:transparent;border-radius:8px;padding:.45rem .9rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .15s ease;}
.btn-admin-danger:hover{background:rgba(220,53,69,.14);}
.btn-admin-primary{display:inline-flex;align-items:center;gap:.35rem;background:var(--wn-gold);color:var(--wn-anthracite);border:1.5px solid var(--wn-gold);border-radius:8px;padding:.45rem .9rem;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;}
.btn-admin-primary:hover,.btn-admin-primary:focus-visible{background:#a9812f;border-color:var(--wn-text);color:var(--wn-anthracite);}

/* Champs du back-office renseignés par la publication sur la boutique : ils
   restent lisibles et sélectionnables, mais n'invitent plus à la saisie tant
   que la case de déverrouillage n'a pas retiré leur attribut `readonly`.
   `!important` est nécessaire — les champs portent leur fond en style en
   ligne, comme tous ceux du back-office, et une règle ordinaire serait sans
   effet. Le sélecteur suit l'attribut, donc l'aspect ordinaire revient de
   lui-même au déverrouillage. */
.form-control[readonly],.form-select[readonly]{background-color:rgba(255,255,255,.04) !important;color:rgba(243,243,243,.55) !important;border-color:rgba(197,158,88,.15) !important;cursor:not-allowed;}
.form-control[readonly]:focus,.form-select[readonly]:focus{border-color:rgba(197,158,88,.3) !important;box-shadow:none !important;}


/* Apparition progressive des bandeaux au défilement. L'état masqué est porté
   par `.js-reveal`, que seul `reveal-on-scroll.js` pose : sans JavaScript, le
   contenu est servi visible. La requête média neutralise l'effet une seconde
   fois pour qui a demandé moins d'animations. Durées volontairement douces :
   la charte proscrit les animations rapides.

   Le décalage latéral déborderait de la fenêtre le temps de l'animation, et
   ferait apparaître une barre de défilement horizontale : `overflow-x: clip`
   l'en empêche sans créer de conteneur de défilement, contrairement à
   `hidden`. La règle est portée par `.js-reveal`, donc elle disparaît avec
   elle. */
.js-reveal{overflow-x:clip;}

.js-reveal [data-reveal],
.js-reveal [data-reveal-cascade] > *{opacity:0;transform:translateY(1.5rem);transition:opacity .6s ease-out,transform .6s ease-out;}

/* Sens d'entrée. Ces règles précèdent celles de l'état révélé : à
   spécificité égale, c'est l'ordre qui tranche. */
.js-reveal [data-reveal="left"],
.js-reveal [data-reveal-cascade="left"] > *{transform:translateX(-1.75rem);}
.js-reveal [data-reveal="right"],
.js-reveal [data-reveal-cascade="right"] > *{transform:translateX(1.75rem);}
.js-reveal [data-reveal-cascade="alterne"] > *:nth-child(odd){transform:translateX(-1.75rem);}
.js-reveal [data-reveal-cascade="alterne"] > *:nth-child(even){transform:translateX(1.75rem);}

.js-reveal [data-reveal].is-revealed,
.js-reveal [data-reveal-cascade].is-revealed > *{opacity:1;transform:none;}
.js-reveal [data-reveal-delay="1"]{transition-delay:.12s;}
.js-reveal [data-reveal-delay="2"]{transition-delay:.24s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(2){transition-delay:.09s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(3){transition-delay:.18s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(4){transition-delay:.27s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(5){transition-delay:.36s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(6){transition-delay:.45s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(7){transition-delay:.54s;}
.js-reveal [data-reveal-cascade].is-revealed > *:nth-child(n+8){transition-delay:.63s;}

/* Les variantes d'alternance sont plus spécifiques que la règle de base : il
   faut les nommer ici, sinon le décalage latéral survivrait à la demande de
   réduction des animations. */
@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-cascade] > *,
  .js-reveal [data-reveal-cascade="alterne"] > *:nth-child(odd),
  .js-reveal [data-reveal-cascade="alterne"] > *:nth-child(even){opacity:1;transform:none;transition:none;}
}