/* ============================================================
   Sirāj UI – ÉDITION LUXE
   - Thème par défaut : BORDEAUX LUXE (cohérent avec ton admin)
   - Variante : CLAIR HAUTE JOAILLERIE (via .theme-clair)
   - Zéro dark, même switchs conservés
   ============================================================ */

/* --------------------- BORDEAUX LUXE (défaut) --------------------- */
:root{
  /* Palette signature */
  --iv:#F3EEE6;       /* ivoire chaud */
  --iv-2:#EEE7DD;     /* ivoire profond */
  --bdx:#6B1E1E;      /* bordeaux noble */
  --bdx-2:#541616;    /* bordeaux ombré */
  --dor:#C8A56F;      /* doré discret */
  --dor-soft:#EAD9BD; /* doré doux */
  --gris:#8F847A;     /* gris feutré */
  --encre:#141113;    /* encre chaude */

  /* Couleurs UI */
  --bg:var(--iv);
  --paper:#ffffff;
  --ink:var(--encre);
  --muted:#6A6159;
  --line:#E7DFD5;

  /* Accent principal (bordeaux) */
  --accent:var(--bdx);
  --accent-ink:#fff;
  --accent-soft:#F7E9EC;
  --accent-ghost:#FBF1F3;

  /* États */
  --ok:#35A56E;
  --err:#D25E59;
  --warn:#D6A200;

  /* Typo & Rythme */
  --ff:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-serif:"Cormorant Garamond", Georgia, serif;
  --leading:1.55;
  --tracking:.02em;

  /* Rayons & Ombres */
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --radius-sm:10px;

  --shadow-0:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 4px 14px rgba(25,10,10,.07);
  --shadow:0 12px 26px rgba(25,10,10,.10);
  --shadow-lg:0 28px 64px rgba(25,10,10,.14);

  /* Focus doré */
  --ring:0 0 0 3px rgba(200,165,111,.35);

  /* Décors spéciaux */
  --sheen: conic-gradient(from 180deg at 50% 50%, #F8F2EA 0deg, #FFFFFF 60deg, #F1E7DB 120deg, #FFFFFF 180deg, #F8F2EA 240deg, #FFFFFF 300deg, #F1E7DB 360deg);
}

/* --------------------- CLAIR HAUTE JOAILLERIE --------------------- */
.theme-clair{
  --bg:#F8F6F2;           /* porcelaine */
  --paper:#FFFFFF;
  --ink:#101112;
  --muted:#6D6F74;
  --line:#EAE4DA;

  /* Accent = doré satiné + ivoire champagne */
  --accent:#C7A26A;
  --accent-ink:#261C0E;
  --accent-soft:#F3E8D5;
  --accent-ghost:#FBF5EA;

  --shadow-0:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 6px 18px rgba(0,0,0,.06);
  --shadow:0 16px 36px rgba(0,0,0,.08);
  --shadow-lg:0 32px 72px rgba(0,0,0,.10);

  --ring:0 0 0 3px rgba(199,162,106,.35);
}

/* --------------------- Base & Layout --------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/var(--leading) var(--ff); letter-spacing:var(--tracking);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* grain très subtil */
  background-image:
    radial-gradient(90rem 60rem at -20% -30%, rgba(107,30,30,.05), transparent 60%),
    radial-gradient(80rem 60rem at 120% 130%, rgba(200,165,111,.07), transparent 60%);
}

.container{ width:min(1120px,92%); margin:0 auto; padding:28px 0; }

/* --------------------- Titres Signature --------------------- */
h1,h2,h3{
  margin:.6rem 0; line-height:1.18; letter-spacing:.3px;
  font-family:var(--ff-serif); color:var(--accent);
}
h1{ font-size:30px; font-weight:600 }
h2{ font-size:22px; font-weight:600 }
h3{ font-size:18px; font-weight:600 }
.muted{ color:var(--muted) }

/* --------------------- Header & Marque --------------------- */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.brand{
  display:flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none;
}
.brand .dot{
  width:12px; height:12px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(107,30,30,.18), inset 0 0 0 1px rgba(255,255,255,.6);
}
.brand span{ font-family:var(--ff-serif); font-weight:600; color:var(--accent); font-size:1.25rem }

/* Theme switch (inchangé côté HTML) */
.theme-switch{ display:flex; gap:8px; flex-wrap:wrap }
.theme-pill{
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer;
  background:var(--paper); color:var(--ink); font-weight:700; font-size:12px;
}
.theme-pill[data-theme="clair"]{ background:#fff }

/* --------------------- Cartes – “luxe nacré” --------------------- */
.card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.92)),
    var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 220% at 100% -20%, rgba(200,165,111,.08), transparent 40%);
}
.card::after{
  /* filet interne nacré */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.card:hover{ box-shadow: var(--shadow-lg) }

/* --------------------- Bannières --------------------- */
.banner{
  position:relative;
  background: linear-gradient(180deg, var(--accent-ghost), #fff);
  border:1px solid var(--line);
  border-left:6px solid var(--accent);
  border-radius:var(--radius-lg);
  padding:12px 14px;
}
.banner.ok{
  border-left-color:var(--ok);
  background: linear-gradient(180deg, #EDF9F1, #FFFFFF);
}
.banner.err{
  border-left-color:var(--err);
  background: linear-gradient(180deg, #FFF1F1, #FFFFFF);
}

/* --------------------- Boutons – “éclat poli” --------------------- */
.btn{
  display:inline-block; padding:.6rem .9rem; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 55%, #ffffff 45%);
  color:var(--accent-ink); text-decoration:none; cursor:pointer;
  background:
    conic-gradient(from 200deg at 50% 50%,
      color-mix(in oklab, var(--accent) 74%, #EEDDD0 26%),
      var(--accent) 30%,
      color-mix(in oklab, var(--accent) 72%, #F2E6DB 28%) 55%,
      var(--accent) 80%,
      color-mix(in oklab, var(--accent) 74%, #EEDDD0 26%));
  background-size: 180% 180%;
  box-shadow: var(--shadow-sm);
  font-weight:800;
  transition: transform .06s ease, box-shadow .25s ease, filter .2s ease, background-position .6s ease;
}
.btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.02);
  background-position: 60% 40%;
  box-shadow: var(--shadow);
}
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:none; box-shadow: var(--shadow), var(--ring) }

.btn.ghost{
  background: #fff;
  color: var(--accent);
  border:1px solid var(--accent);
  box-shadow: var(--shadow-0);
}
.btn.small{ padding:.4rem .7rem; font-size:.85rem }
.btn.ok{
  background: linear-gradient(180deg, #49BB80, #2F9C65);
  color:#0e1a12; border-color:#79D1A3;
}
.btn.alt{
  background: linear-gradient(180deg, var(--dor), #B68F55);
  color:#24180B; border-color:#D9B97F;
}

/* --------------------- Formulaires --------------------- */
.form-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin:.6rem 0 }
input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], select, textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus{
  background:#FFFEFD;
  border-color:#E8DED2; box-shadow: var(--ring);
}

/* --------------------- Méta Chips (cours) --------------------- */
.kv{ display:flex; gap:.6rem; flex-wrap:wrap; color:#2d2d2d; font-size:14px }
.kv span{
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(180deg, #FFFDFC, #FFFBF8);
  padding:6px 10px; border-radius:999px;
  border:1px solid #EDE3D8;
}

/* --------------------- Tags --------------------- */
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 0 }
.tag{
  font-size:12px; color:#5b1f27;
  background: linear-gradient(180deg, var(--accent-ghost), #fff);
  padding:4px 8px; border-radius:999px; border:1px solid #E9D5D8;
}
.tag.lock{
  background: linear-gradient(180deg, #FFF4F4, #FFFFFF);
  border-color:#F0D9D9; color:#7a2832; font-weight:800;
}

/* --------------------- Tableaux – “ivoire zébré” --------------------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow-0);
}
.table th,.table td{ padding:.7rem .8rem; border-bottom:1px solid #EFE9DF; text-align:left }
.table th{
  background:linear-gradient(180deg, #FAF7F0, #F6F1E9);
  color:#5a463d; font-weight:800;
}
.table tr:nth-child(2n) td{ background:#FFFBF5 }
.table tr:last-child td{ border-bottom:none }
.table tbody tr:hover td{ background:#FFF8EF }

/* --------------------- Badges état --------------------- */
.badge{ display:inline-block; border-radius:999px; padding:.22rem .6rem; font-size:.78rem }
.badge.planned{   background:#F0F8FF; color:#0a5 }
.badge.completed{ background:#FFF6E3; color:#a66b00 }
.badge.published{ background:#EDF9EF; color:#0a6 }
.badge.cancelled{ background:#FFEAEA; color:#b00 }

/* --------------------- Covers & Vidéos --------------------- */
.course-card .cover{
  width:100%; height:150px; border-radius:14px; object-fit:cover;
  background:linear-gradient(180deg, #F7E9EC, #fff);
  border:1px solid #E7D9DC;
  box-shadow: 0 6px 18px rgba(25,10,10,.06);
}
.cover{
  width:120px; height:120px; border-radius:14px; object-fit:cover;
  border:1px solid #E7D9DC; background:linear-gradient(180deg, #F7E9EC, #fff);
  box-shadow: 0 6px 18px rgba(25,10,10,.06);
}
.video{
  max-width:360px; width:360px; height:202px;
  border:1px solid #E7D9DC; border-radius:14px; background:#000;
  box-shadow: 0 10px 32px rgba(25,10,10,.18);
}

/* --------------------- Grille catalogue --------------------- */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* --------------------- Footer --------------------- */
.footer{ border-top:1px solid var(--line); padding:1rem 0; color:#736A62; margin-top:2rem; font-size:.9rem }
.center{ display:flex; align-items:center; justify-content:center }

/* --------------------- Utilities --------------------- */
.mt-1{ margin-top:6px } .mt-2{ margin-top:12px } .mt-3{ margin-top:18px }
.mb-1{ margin-bottom:6px } .mb-2{ margin-bottom:12px } .mb-3{ margin-bottom:18px }

/* --------------------- Accessibilité & Motion --------------------- */
:focus-visible{ outline:none; box-shadow:var(--ring) }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* --------------------- Responsive --------------------- */
@media (max-width:720px){
  .header{ flex-direction:column; align-items:flex-start; gap:10px }
  .video{ width:100%; height:auto; aspect-ratio:16/9 }
}

/* =============== Variante CLAIR – finitions luxe =============== */

/* Cartes porcelaine à éclat doux */
.theme-clair .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96)),
    var(--paper);
  border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow);
}
.theme-clair .card:hover{ box-shadow: var(--shadow-lg) }
.theme-clair .card::before{
  background: radial-gradient(120% 220% at 100% -20%, rgba(199,162,106,.10), transparent 42%);
}

/* Bannière ruban champagne */
.theme-clair .banner{
  background: linear-gradient(180deg, var(--accent-ghost), #fff);
  border-left:6px solid var(--accent);
}

/* Boutons “haute joaillerie” */
.theme-clair .btn{
  border:1px solid color-mix(in oklab, var(--accent) 55%, #ffffff 45%);
  color:var(--accent-ink);
  background:
    conic-gradient(from 210deg at 50% 50%, #E9D6B3, var(--accent) 26%, #E3C89A 52%, var(--accent) 78%, #E9D6B3 100%);
  background-size:180% 180%;
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .25s ease, background-position .6s ease;
}
.theme-clair .btn:hover{
  transform:translateY(-1px);
  background-position: 60% 40%;
  box-shadow: var(--shadow);
}
.theme-clair .btn.ghost{
  background:#fff; color:var(--ink); border:1px solid var(--line);
}

/* Inputs ivoire + halo doré */
.theme-clair input[type="text"],
.theme-clair input[type="email"],
.theme-clair input[type="password"],
.theme-clair input[type="datetime-local"],
.theme-clair select, .theme-clair textarea{
  background:#fff; border:1px solid var(--line);
}
.theme-clair input:focus,
.theme-clair select:focus,
.theme-clair textarea:focus{
  background:#FFFEFC; border-color:#E9E3D8; box-shadow: var(--ring);
}

/* Tags & chips minimalistes */
.theme-clair .tag{
  color:#3b2a18; background:#fff; border:1px solid #ECE5D9;
}
.theme-clair .tag.lock{ color:#6e2a2a; background:#FFF7F7; border-color:#F0DADA; }

/* Table ivoire zébré chic */
.theme-clair .table{
  border:1px solid var(--line); background:#fff; border-radius:14px; overflow:hidden;
}
.theme-clair .table th{
  background:linear-gradient(180deg, #FAF7F0, #F6F1E9); color:#5a463d;
}
.theme-clair .table tr:nth-child(2n) td{ background:#FFFCF7 }
.theme-clair .table tbody tr:hover td{ background:#FFF9EE }

/* Covers & vidéo nacrés */
.theme-clair .course-card .cover,
.theme-clair .cover{
  background: linear-gradient(180deg, #F9F4EA, #fff);
  border:1px solid #EDE5D7;
}
.theme-clair .video{
  border:1px solid #EDE5D7; box-shadow: 0 10px 32px rgba(0,0,0,.12);
}