/* ==========================================================================
   Surcharges de tokens Nocturne pour "Salles obscures"
   (accent gris-bleu acier + fond légèrement désaturé — voir handoff)
   ========================================================================== */
:root{
  --color-bg:#15171c;      /* Nocturne d'origine : #161826 */
  --color-surface:#1c1f25;  /* Nocturne d'origine : #232532 */
  --color-accent:#8ba6b3;   /* remplace le violet #9184d9 */
  --color-accent-100:#eef3f6; --color-accent-200:#dce6eb; --color-accent-300:#c3d1d9;
  --color-accent-400:#a5b9c3; --color-accent-500:#8ba6b3; --color-accent-600:#6d8894;
  --color-accent-700:#546a75; --color-accent-800:#3b4a53; --color-accent-900:#272f35;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --so-overlay-opacity:0.74; /* écrasé en ligne par les réglages admin */
}

/* ==========================================================================
   Page — reset local, ce gabarit ne dépend d'aucun style du thème actif
   ========================================================================== */
.so-body{ margin:0; }
.so-page{
  position:relative;
  background-color:var(--color-bg);
  min-height:100vh;
  padding:64px 24px 96px;
  overflow:hidden;
  isolation:isolate;
}
.so-container{
  max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-8);
  font-family:var(--font-body);color:var(--color-text);
}

/* — fond en <img> natif + voile — remplace l'ancien background-image CSS
   (qui forçait un upscale flou sur mobile) : voir
   functions.php::so_render_background_image(). Fixe au viewport sur desktop
   comme sur mobile, afin d'éviter d'étirer l'image sur toute la page. */
.so-bg-image{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;pointer-events:none;
}
.so-bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb, var(--color-bg) calc(var(--so-overlay-opacity) * 100%), transparent);
}
@media (max-width: 768px){
  .so-bg-image,
  .so-bg-veil{
    position:fixed;
    inset:0;
    width:100%;
    height:100svh;
  }
}

/* — en-tête — */
.so-header{display:flex;flex-direction:column;gap:var(--space-4)}
.so-kicker{display:flex;align-items:center;gap:var(--space-3)}
.so-kicker-rule{display:block;width:20px;height:1px;background:var(--color-accent)}
.so-kicker-label{font:500 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-400)}
.so-page h1{margin:0;font:500 34px/1.15 var(--font-heading);letter-spacing:-.02em;color:var(--color-text)}
.so-chapo{font:400 15px/1.7 var(--font-body);color:var(--color-neutral-400);text-wrap:pretty}
.so-chapo p{margin:0}

/* — bloc concert — */
.so-concert{display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800)}
.so-concert-head{display:flex;flex-direction:column;gap:var(--space-3)}
.so-meta{display:flex;align-items:baseline;gap:var(--space-4);font:400 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-600)}
.so-meta-num{color:var(--color-accent-400)}
.so-page h2{margin:0;font:500 25px/1.22 var(--font-heading);letter-spacing:-.015em;color:var(--color-text);text-wrap:pretty}
.so-subtitle{margin:0;font:400 15px/1.6 var(--font-body);color:var(--color-neutral-400);text-wrap:pretty}
.so-texte{margin:0;font:400 15.5px/1.75 var(--font-body);color:var(--color-neutral-300);text-wrap:pretty}
.so-texte p{margin:0 0 var(--space-3)}
.so-texte p:last-child{margin-bottom:0}
.so-texte a{color:var(--color-accent-300);text-decoration-color:color-mix(in srgb, var(--color-accent-300) 55%, transparent)}
.so-texte a:hover{color:var(--color-accent-200)}

/* — vidéo — */
.so-video{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.so-frame{position:relative;aspect-ratio:16/9;background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.so-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.so-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:block;overflow:hidden;
  background-color:var(--color-surface);background-size:cover;background-position:center;background-repeat:no-repeat}
.so-facade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,23,28,.15) 0%, rgba(21,23,28,.55) 100%);pointer-events:none}
.so-lire{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:var(--space-3);
  padding:9px 16px;border:1px solid var(--color-accent-600);background:rgba(21,23,28,.72);color:var(--color-accent-200);
  font:500 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;transition:border-color .15s,color .15s,background .15s}
.so-facade:hover .so-lire{border-color:var(--color-accent-300);color:var(--color-accent-100)}
.so-tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}

/* — commentaires natifs WordPress — */
.so-comments{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-2);padding-top:var(--space-6);border-top:1px solid var(--color-neutral-900)}
.so-comments-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.so-page h3{margin:0;font:400 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-500)}
.so-count{font:400 10.5px/1 var(--font-mono);color:var(--color-neutral-700)}
.so-comments ol.comment-list,
.so-comments ul.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-6)}
.so-comments li{list-style:none}
.so-comment{display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-4);border-left:1px solid var(--color-neutral-800)}
.so-comment-who{display:flex;align-items:baseline;gap:var(--space-3);font:400 10.5px/1 var(--font-mono);color:var(--color-neutral-600)}
.so-comment-author{color:var(--color-accent-400);letter-spacing:.06em}
.so-comment-body{margin:0;font:400 14px/1.65 var(--font-body);color:var(--color-neutral-400);text-wrap:pretty}

/* — formulaire de commentaire (comment_form()) — */
.so-comments .comment-respond{display:flex;flex-direction:column;gap:var(--space-3)}
.so-comments .comment-form-author,
.so-comments .comment-form-comment{margin:0}
.so-input{width:100%;min-height:90px;padding:6px 10px;font:inherit;font-size:14px;line-height:1.6;color:var(--color-text);
  caret-color:var(--color-accent);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);resize:vertical}
.so-input-line{min-height:36px;resize:none}
.so-input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.so-input:focus-visible{border-color:var(--color-accent);outline-offset:0}
.so-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--color-accent);color:var(--color-accent);
  padding:var(--space-2) calc(var(--space-3) * 1.2);border-radius:var(--radius-md)}
.so-btn:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}
.so-btn:active{background:color-mix(in srgb, var(--color-accent) 22%, transparent)}
.so-comments .logged-in-as{font:400 12px/1.5 var(--font-body);color:var(--color-neutral-500);margin:0}

/* — pied de page de contenu — */
.so-foot{padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800);font:400 11px/1.6 var(--font-mono);color:var(--color-neutral-700)}
.comment-form-cookies-consent {
  display: none;
}