/**
 * SITE V2 — socle commun des pages V2 (tokens ajoutés, typographie, boutons,
 * puces, champ, reveal). Chargé par la home V2 et l'Atelier ; les pages
 * Vidéos et Monde s'y brancheront au portage. Tout vient de style.css.
 *
 * @package SamRelaxe
 * @version 11.1.0
 */
:root {
  --sr2-scrim:        rgba(2, 10, 14, 0.62);
  --sr2-scrim-soft:   rgba(2, 10, 14, 0.34);
  --sr2-ink-shadow:   0 2px 12px rgba(2, 10, 14, 0.9), 0 2px 40px rgba(2, 10, 14, 0.75);
  --sr2-hair:         var(--gold-25);
  --sr2-hair-soft:    var(--white-8);
  --sr2-wrap:         1320px;
  --sr2-measure:      62ch;
  --sr2-rhythm:       clamp(72px, 10vw, 168px);
  --sr2-ease:         var(--ease-out);
  --sr2-gold-ink:     #17120a;
  --sr2-nav-h:        82px; /* hauteur du header du thème (.sr-nav) */
}
/* Les <button> gardent le style natif du navigateur (fond gris) hors de la démo : remise à zéro
   à spécificité nulle (:where) pour que chaque composant garde la main. */
:where(.sr-home, .sr-atelier, .sr-videos-v2, .sr-monde-v2, .sr-mondes-v2, .sr-video-v2, .sr-404-page) button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
/* Anneau de focus : or (style.css impose un cyan global). */
.sr-nav-icon:focus-visible, .sr2-btn:focus-visible, .sr2-chip:focus-visible, .sr2-search__close:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 3px; }
.sr2-search__input:focus, .sr2-search__input:focus-visible { outline: none !important; box-shadow: none; }
.sr2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr2-wrap { width: min(100% - 2 * var(--container-padding), var(--sr2-wrap)); margin-inline: auto; }
.sr2-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); }
.sr2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .7; }
.sr2-h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--snow); margin: var(--sp-4) 0 0; text-wrap: balance; max-width: 18ch; }
.sr2-h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--snow); margin: 0; text-wrap: balance; }
.sr2-h2 em, .sr2-h3 em { font-style: italic; color: var(--gold-soft); }
.sr2-lead { font-size: var(--text-md); color: var(--text-soft); max-width: var(--sr2-measure); margin: var(--sp-5) 0 0; }
.sr2-link { color: var(--gold-soft); border-bottom: 1px solid var(--sr2-hair); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.sr2-link:hover { color: var(--gold-bright); border-color: var(--gold); }
.sr2-kicker { font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); }
.sr2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-8); border-radius: var(--r-pill); border: 0; cursor: pointer; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); white-space: nowrap; background: var(--grad-gold); color: var(--sr2-gold-ink); box-shadow: var(--shadow-gold); transition: transform var(--t-fast) var(--sr2-ease), box-shadow var(--t-normal); }
.sr2-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold), 0 0 0 1px var(--gold-bright); color: var(--sr2-gold-ink); }
.sr2-btn:active { transform: scale(.98); }
a.sr2-btn, a.sr2-btn:visited, a.sr2-btn:hover, button.sr2-btn { color: var(--sr2-gold-ink) !important; text-decoration: none !important; }
.sr2-btn--ghost { background: var(--panel-soft); color: var(--text-main); border: 1px solid var(--sr2-hair); box-shadow: none; backdrop-filter: blur(6px); }
.sr2-btn--ghost:hover { border-color: var(--gold); box-shadow: none; color: var(--text-main); }
a.sr2-btn--ghost, a.sr2-btn--ghost:visited, a.sr2-btn--ghost:hover, button.sr2-btn--ghost { color: var(--text-main) !important; }
.sr2-btn svg { width: 16px; height: 16px; flex: none; }
.sr2-btn[disabled] { opacity: .6; pointer-events: none; }
.sr2-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--sr2-hair-soft); background: none; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--text-soft); white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.sr2-chip:hover { border-color: var(--gold-35); color: var(--text-main); }
.sr2-chip[aria-pressed="true"] { background: var(--gold); color: var(--sr2-gold-ink); border-color: transparent; font-weight: var(--weight-semibold); }
.sr2-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sr2-input { min-height: 52px; padding: 0 var(--sp-5); border-radius: var(--r-pill); border: 1px solid var(--sr2-hair); background: var(--bg-panel); color: var(--text-main); font: inherit; backdrop-filter: blur(8px); width: 100%; }
.sr2-input::placeholder { color: var(--text-muted); }
.sr2-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-12); }
.sr2-h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--snow); margin: var(--sp-4) 0 0; text-wrap: balance; max-width: 16ch; }
.sr2-h1 em { font-style: italic; color: var(--gold-soft); }
.sr2-head { display: grid; align-items: end; grid-template-columns: 1fr auto; column-gap: var(--sp-10); }
.sr2-head__aside { color: var(--text-muted); font-size: var(--text-sm); padding-bottom: var(--sp-2); margin: 0; }
.sr2-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.sr2-btn--sm { min-height: 42px; padding: 0 var(--sp-5); font-size: var(--text-xs); }
/* Cartes vidéo (rangées, grilles) */
.sr2-vcard { position: relative; display: grid; gap: var(--sp-3); border-radius: var(--r-md); }
.sr2-vcard__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--sr2-hair-soft); background: var(--abyss); }
.sr2-vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sr2-ease), filter 1.2s var(--sr2-ease); filter: saturate(.9) brightness(.9); }
.sr2-vcard:hover .sr2-vcard__thumb img { transform: scale(1.05); filter: none; }
.sr2-vcard__dur { position: absolute; right: var(--sp-2); bottom: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-xs); background: var(--bg-panel); backdrop-filter: blur(6px); font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--snow); }
.sr2-vcard__t { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--snow); font-weight: var(--weight-medium); }
.sr2-vcard__m { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.sr2-vcard__m b { color: var(--gold-soft); font-weight: var(--weight-medium); }
/* Pilule mobile */
.sr2-btn.sr2-pill { position: fixed; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: var(--z-sticky); opacity: 0; pointer-events: none; transition: opacity var(--t-normal), transform var(--t-normal) var(--sr2-ease); display: none; }
.sr2-pill.is-visible { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
@media (max-width: 900px) { .sr2-btn.sr2-pill { display: inline-flex; } .sr2-head { grid-template-columns: 1fr; row-gap: var(--sp-3); } }
/* ── Séparateur d'or entre les actes (toutes pages V2) : au milieu du souffle entre deux sections ── */
.sr2-sep { position: relative; z-index: 2; display: block; width: min(100% - 2 * var(--container-padding), var(--sr2-wrap)); height: 1px; margin: 0 auto; border: 0; overflow: visible; background: linear-gradient(90deg, transparent 0%, var(--gold-35) 18%, color-mix(in srgb, var(--c, var(--gold)) 65%, var(--gold)) 50%, var(--gold-35) 82%, transparent 100%); }
.sr2-sep::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); background: var(--void); border: 1px solid var(--gold); box-shadow: 0 0 16px color-mix(in srgb, var(--c, var(--gold)) 60%, transparent), 0 0 2px var(--gold); }
.sr2-sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold); }
.sr2-sep--tight { margin-block: calc(-1 * var(--sp-8)); }

.sr-monde-v2 .sr2-sep, .sr-mondes-v2 .sr2-sep { margin: calc(-1 * var(--sr2-rhythm) / 2) auto calc(var(--sr2-rhythm) / 2); }
.sr-video-v2 .sr2-sep { margin: calc(var(--sr2-rhythm) / 2) auto calc(-1 * var(--sr2-rhythm) / 2); }
/* ── Transitions cinématiques entre pages (Chrome / Safari : View Transitions inter-documents ; ailleurs : fondu JS) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sr2-vt-out .34s var(--sr2-ease) both; }
::view-transition-new(root) { animation: sr2-vt-in .55s var(--sr2-ease) both; }
@keyframes sr2-vt-out { to { opacity: 0; transform: scale(1.02); filter: brightness(.55); } }
@keyframes sr2-vt-in { from { opacity: 0; transform: scale(.985); filter: brightness(.5); } }
.sr-nav { view-transition-name: sr-nav; }
::view-transition-group(sr-nav) { animation-duration: .3s; }
html.sr2-leave body { opacity: 0; transition: opacity .3s var(--sr2-ease); }
html.sr2-arrive body { animation: sr2-vt-in .55s var(--sr2-ease) both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), html.sr2-arrive body { animation: none; } html.sr2-leave body { transition: none; opacity: 1; } }
.js .sr2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--sr2-ease), transform .8s var(--sr2-ease); }
.js .sr2-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .sr2-reveal { opacity: 1; transform: none; transition: none; } .sr2-btn { transition: none; } }