/* ══════════════════════════════════════════════════════════════
   confrerie.css — La Confrérie · Système de design partagé
   Inclure en premier dans chaque app, avant le CSS spécifique.

   Contient :
   01 · Variables & tokens
   02 · Reset
   03 · Base body & scrollbar
   04 · Background
   05 · Typographie utilitaire
   06 · Boutons
   07 · Inputs
   08 · Badges
   09 · Cards
   10 · Info bar / chips
   11 · Toast
   12 · États vides
   13 · Footer
   14 · Animations partagées
   15 · Responsive
   ══════════════════════════════════════════════════════════════ */

/* ══ 01 · VARIABLES ═══════════════════════════════════════════ */
:root {
  /* ── Fonds — légèrement plus clairs que le tournoi original ── */
  --bg:   #0d0f1e;
  --bg2:  #121428;
  --bg3:  #171930;
  --bg4:  #1e2040;

  /* ── Or — couleur signature globale ── */
  --gold:          #c9a84c;
  --gold-light:    #f0d080;
  --gold-dark:     #8a6f2e;
  --gold-a06:      rgba(201,168,76,.06);
  --gold-a10:      rgba(201,168,76,.10);
  --gold-a20:      rgba(201,168,76,.20);
  --gold-a35:      rgba(201,168,76,.35);

  /* ── Bleu — accent tournoi ── */
  --blue:          #2299ee;
  --blue-light:    #55bbff;
  --blue-dark:     #1166aa;
  --blue-a10:      rgba(34,153,238,.10);
  --blue-a20:      rgba(34,153,238,.20);
  --blue-a35:      rgba(34,153,238,.35);

  /* ── Violet — accent OTS ── */
  --violet:        #8b5cf6;
  --violet-light:  #c4b5fd;
  --violet-a10:    rgba(139,92,246,.10);
  --violet-a20:    rgba(139,92,246,.20);

  /* ── Rouge — accent Collection ── */
  --red:           #cc3322;
  --red-light:     #ff5544;
  --red-a10:       rgba(204,51,34,.10);
  --red-a20:       rgba(204,51,34,.20);

  /* ── Texte ── */
  --text:          #dde8f5;
  --text-2:        rgba(221,232,245,.65);
  --text-muted:    rgba(221,232,245,.40);
  --text-dim:      rgba(221,232,245,.20);

  /* ── Résultats (win / loss / draw) ── */
  --win-bg:        rgba(30,110,55,.35);
  --win-border:    rgba(50,190,85,.45);
  --win-text:      #6ddc8a;
  --loss-bg:       rgba(130,20,20,.35);
  --loss-border:   rgba(210,55,40,.45);
  --loss-text:     #ff7070;
  --dl-bg:         rgba(110,80,10,.35);
  --dl-border:     rgba(190,140,25,.45);
  --dl-text:       #f0c040;

  /* ── Bordures ── */
  --border-gold:   rgba(201,168,76,.22);
  --border-blue:   rgba(34,153,238,.25);
  --border-subtle: rgba(255,255,255,.07);

  /* ── Typographie ── */
  --font-display:  'Cinzel Decorative', serif;
  --font-heading:  'Cinzel', serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* ── Rayons ── */
  --r-sm:  3px;
  --r:     6px;
  --r-lg:  10px;

  /* ── Ombres ── */
  --sh:    0 2px 8px rgba(0,0,0,.4);
  --sh-lg: 0 8px 32px rgba(0,0,0,.55);

  /* ── Easing ── */
  --ease:  cubic-bezier(.22,1,.36,1);
}

/* ══ 02 · RESET ═══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ══ 03 · BASE ════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-body);
  font-size:   15px;
  line-height: 1.6;
  min-height:  100vh;
  overflow-x:  hidden;
}

::selection {
  background: rgba(201,168,76,.25);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.32); border-radius: 3px; }

/* ══ 04 · BACKGROUND ══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,
      rgba(34,153,238,.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 30% at 10% 90%,
      rgba(201,168,76,.06) 0%, transparent 55%),
    repeating-linear-gradient(45deg,
      transparent, transparent 60px,
      rgba(201,168,76,.012) 60px, rgba(201,168,76,.012) 61px);
}

.app-shell {
  position: relative;
  z-index: 1;
}

/* ══ 05 · TYPOGRAPHIE UTILITAIRE ═════════════════════════════ */
.cf-label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.cf-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ══ 06 · BOUTONS ════════════════════════════════════════════ */
.btn {
  font-family:     var(--font-heading);
  font-size:       10px;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  padding:         10px 20px;
  border-radius:   var(--r-sm);
  cursor:          pointer;
  border:          1px solid var(--border-gold);
  background:      transparent;
  color:           var(--text-muted);
  transition:      color .18s, background .18s, border-color .18s, box-shadow .18s;
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  line-height:     1;
}

.btn:hover {
  color:         var(--gold-light);
  border-color:  var(--gold-dark);
  background:    var(--gold-a06);
}

/* Variantes */
.btn-gold {
  background:   linear-gradient(135deg, rgba(138,111,46,.85), rgba(201,168,76,.85));
  border-color: var(--gold);
  color:        #07090e;
  font-weight:  600;
}
.btn-gold:hover {
  background:   linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  box-shadow:   0 0 16px rgba(201,168,76,.3);
  color:        #07090e;
}

.btn-blue {
  background:   var(--blue-a10);
  border-color: var(--blue-dark);
  color:        var(--blue-light);
}
.btn-blue:hover {
  background:  var(--blue-a20);
  box-shadow:  0 0 12px rgba(34,153,238,.25);
}

.btn-red {
  background:   var(--red-a10);
  border-color: rgba(200,55,40,.38);
  color:        var(--loss-text);
}
.btn-red:hover {
  background:  var(--red-a20);
}

/* Tailles */
.btn-sm { padding: 6px 14px;  font-size: 10px; }
.btn-lg { padding: 13px 28px; font-size: 12px; }

/* Toggle buttons (top cut, etc.) */
.tbtn {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        6px 14px;
  border-radius:  var(--r-sm);
  cursor:         pointer;
  background:     transparent;
  border:         1px solid var(--border-subtle);
  color:          var(--text-muted);
  transition:     all .2s;
}
.tbtn:hover  { border-color: var(--gold-dark); color: var(--gold-light); }
.tbtn.active {
  background:   var(--blue-a10);
  border-color: var(--blue-dark);
  color:        var(--blue-light);
  font-weight:  600;
}

/* ══ 07 · INPUTS ════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="search"] {
  font-family:  var(--font-body);
  font-size:    14px;
  background:   var(--bg3);
  border:       1px solid var(--border-gold);
  border-radius: var(--r-sm);
  padding:      10px 14px;
  color:        var(--text);
  outline:      none;
  transition:   border-color .2s, box-shadow .2s;
  width:        100%;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder { color: var(--text-dim); }

input[type="text"]:focus,
input[type="search"]:focus {
  border-color: var(--blue-dark);
  box-shadow:   0 0 0 3px rgba(34,153,238,.12);
}

select {
  font-family:      var(--font-body);
  font-size:        13px;
  background:       var(--bg3);
  border:           1px solid var(--border-gold);
  border-radius:    var(--r-sm);
  padding:          8px 12px;
  color:            var(--text-2);
  outline:          none;
  cursor:           pointer;
  transition:       border-color .2s;
  -webkit-appearance: none;
  appearance:       none;
}
select:focus  { border-color: var(--blue-dark); outline: none; }
select:hover  { border-color: var(--gold-dark); }

/* ══ 08 · BADGES ════════════════════════════════════════════ */
.badge {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .06em;
  padding:        2px 9px;
  border-radius:  var(--r-sm);
  font-weight:    600;
  display:        inline-flex;
  align-items:    center;
  white-space:    nowrap;
}

.badge-w       { background: var(--win-bg);  color: var(--win-text);  border: 1px solid var(--win-border); }
.badge-l       { background: var(--loss-bg); color: var(--loss-text); border: 1px solid var(--loss-border); }
.badge-dl      { background: var(--dl-bg);   color: var(--dl-text);   border: 1px solid var(--dl-border); }
.badge-neutral { background: var(--bg4);     color: var(--text-muted); border: 1px solid var(--border-subtle); }
.badge-bye     { background: var(--blue-a10); color: var(--blue-light); border: 1px solid var(--blue-a35); }

/* ══ 09 · CARDS ════════════════════════════════════════════ */
.card {
  background:    var(--bg2);
  border:        1px solid var(--border-gold);
  border-radius: var(--r-sm);
  padding:       1.5rem;
  margin-bottom: 1.25rem;
  position:      relative;
}

/* Filet or en haut de chaque card */
.card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 2rem; right: 2rem;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold-a35), transparent);
}

.card-title {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1.25rem;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.card-title::before { content: '◈'; font-size: 9px; color: var(--blue); }

.card-header-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
  flex-wrap:       wrap;
  gap:             8px;
}

/* ══ 10 · INFO BAR / CHIPS ══════════════════════════════════ */
.info-bar {
  display:       flex;
  gap:           8px;
  flex-wrap:     wrap;
  margin-bottom: 1.25rem;
}

.info-chip {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        5px 12px;
  border:         1px solid var(--blue-a35);
  border-radius:  var(--r-sm);
  color:          var(--text-muted);
  background:     var(--blue-a10);
}

/* ══ 11 · TOAST ════════════════════════════════════════════ */
.toast {
  position:       fixed;
  bottom:         2rem;
  left:           50%;
  transform:      translateX(-50%) translateY(12px);
  background:     var(--bg2);
  border:         1px solid var(--border-gold);
  border-radius:  var(--r);
  padding:        10px 22px;
  font-family:    var(--font-heading);
  font-size:      12px;
  letter-spacing: .08em;
  color:          var(--gold-light);
  opacity:        0;
  pointer-events: none;
  z-index:        2000;
  white-space:    nowrap;
  box-shadow:     var(--sh-lg);
  transition:     opacity .28s, transform .28s var(--ease);
}
.toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ══ 12 · ÉTATS VIDES ═══════════════════════════════════════ */
.empty {
  text-align:  center;
  padding:     3rem 1.5rem;
  color:       var(--text-dim);
  font-style:  italic;
  font-size:   13px;
  line-height: 1.8;
}

/* ══ 13 · FOOTER ════════════════════════════════════════════ */
.cf-footer {
  border-top:  1px solid var(--border-gold);
  margin-top:  2rem;
  padding:     1.75rem 1.5rem;
  text-align:  center;
}

.cf-footer-inner {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--text-muted);
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
  flex-wrap:      wrap;
}

.cf-footer-sep {
  width:      4px; height: 4px;
  background: var(--gold-dark);
  transform:  rotate(45deg);
  flex-shrink:0;
  opacity:    .5;
}

.cf-footer-inner a {
  color:           var(--gold);
  text-decoration: none;
  transition:      color .18s;
}
.cf-footer-inner a:hover { color: var(--gold-light); }

/* ══ 14 · ANIMATIONS PARTAGÉES ══════════════════════════════ */
@keyframes cf-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cf-spin {
  to { transform: rotate(360deg); }
}
@keyframes cf-glow-scan {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1;  }
}
@keyframes cf-danger-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ══ 15 · RESPONSIVE ════════════════════════════════════════ */
@media (max-width: 600px) {
  .btn     { padding: 9px 16px; }
  .btn-lg  { padding: 11px 20px; }
  .card    { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══ 16 · HEADER UNIFIÉ — commun à Tournoi & OTS ═══════════ */

.cf-app-header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        2.5rem 1.5rem 1.75rem;
  position:       relative;
}

/* ── Logo circulaire avec anneaux pulsants ── */

.cf-logo-ring {
  display:       inline-block;
  position:      relative;
  margin-bottom: 1.5rem;
}

/* Anneau 1 */
.cf-logo-ring::before {
  content:       '';
  position:      absolute;
  inset:         -14px;
  border-radius: 50%;
  border:        1px solid rgba(201,168,76,.32);
  pointer-events:none;
  animation:     cf-ring-pulse 3.5s ease-in-out infinite;
}

/* Anneau 2 */
.cf-logo-ring::after {
  content:        '';
  position:       absolute;
  inset:          -28px;
  border-radius:  50%;
  border:         1px solid rgba(34,153,238,.18);
  pointer-events: none;
  animation:      cf-ring-pulse 3.5s ease-in-out infinite;
  animation-delay:1.75s;
}

.cf-logo-img {
  display:       block;
  width:         130px;
  height:        130px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--gold-dark);
  filter:
    drop-shadow(0 0 22px rgba(201,168,76,.55))
    drop-shadow(0 0 55px rgba(34,153,238,.2));
  animation: cf-logo-breathe 4s ease-in-out infinite;
}

/* ── Titre ── */

.cf-app-title {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .06em;
  line-height:    1.1;
  margin-bottom:  .4rem;
  background:     linear-gradient(135deg,
    var(--gold-light) 0%,
    var(--gold)       45%,
    #d4a84a           75%,
    var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Sous-titre ── */

.cf-app-sub {
  font-family:    var(--font-heading);
  font-size:      .75rem;
  font-weight:    400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  .85rem;
}

/* ── Divider ── */

.cf-app-divider {
  width:      70%;
  max-width:  600px;
  height:     1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-a35) 30%,
    var(--blue-a20) 70%,
    transparent);
  margin-top: .5rem;
}

/* ── Keyframes spécifiques header ── */

@keyframes cf-ring-pulse {
  0%, 100% { opacity: .35; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.025);}
}

@keyframes cf-logo-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 22px rgba(201,168,76,.55))
      drop-shadow(0 0 55px rgba(34,153,238,.2));
  }
  50% {
    filter:
      drop-shadow(0 0 38px rgba(201,168,76,.85))
      drop-shadow(0 0 80px rgba(34,153,238,.35));
  }
}

/* ── Responsive header ── */

@media (max-width: 600px) {
  .cf-logo-img      { width: 100px; height: 100px; }
  .cf-logo-ring::before { inset: -10px; }
  .cf-logo-ring::after  { inset: -20px; }
  .cf-app-header    { padding: 2rem 1rem 1.5rem; }
}