/* ══════════════════════════════════════════════════════════════════
   CTRL S — Le coffre à ressources de Ctrl F
   Feuille de style, charte graphique Contrôle F (Omada, 01/2026)
   révisée selon les retours d'Eddy & Bastien (Notion, 08/2026) :
   fond prune plat, violet réservé à la structure, corail réservé
   aux boutons et accents, texte courant beige (contraste > 7:1),
   dégradé violet uniquement sur l'encadré du compte à rebours.
   ──────────────────────────────────────────────────────────────────
   Palette officielle :
     #14001d prune (fond)  ·  #4c199d violet (structure)
     #b34be8 violet clair  ·  #fe6c50 corail (boutons/accents)
     #ecaf79 sable         ·  #e8d7c2 beige (texte courant)
   Typographies : Clash Display (display) · Gilroy (titres & texte)
   ══════════════════════════════════════════════════════════════════ */

/* ── FONTES ─────────────────────────────────────────────────────── */
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root{
  --prune:#14001d;
  --violet:#4c199d;
  --violet-clair:#b34be8;
  --corail:#fe6c50;
  --sable:#ecaf79;
  --beige:#e8d7c2;
  /* surfaces : cartes détachées du fond prune plat */
  --carte:#22093a;
  --carte-2:#2a1145;
  --bordure:#42175f;
  --muted:#b59fc7;      /* texte secondaire, contraste ≥ 7:1 sur prune */
  --f-display:'Clash Display','Gilroy',system-ui,sans-serif;
  --f-titre:'Gilroy',system-ui,sans-serif;
  --f-texte:'Gilroy',system-ui,sans-serif;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  background:var(--prune); /* fond prune PLAT : aucun aplat violet de page */
  color:var(--beige);
  font-family:var(--f-texte);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px 70px}
a{color:var(--violet-clair)}
::selection{background:var(--corail);color:#fff}

/* ── UTILITAIRES ────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-titre);font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:var(--violet-clair);
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--corail);flex:none}
:is(button,a,input):focus-visible{outline:2px solid var(--corail);outline-offset:2px;border-radius:6px}

/* ── KEYCAPS (signature de la marque) ───────────────────────────── */
.keycaps{display:inline-flex;gap:7px;flex:none;align-items:flex-end}
.keycap{
  font-family:var(--f-titre);font-weight:800;letter-spacing:.02em;
  color:#fff;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.28);
  user-select:none;
  transition:font-size .2s,padding .2s;
}
.keycap.ctrl{background:linear-gradient(180deg,#6325be,var(--violet));border:1px solid #7d3bd6;font-size:13px;padding:6px 11px}
.keycap.lettre{background:linear-gradient(180deg,#ff8a68,var(--corail));border:1px solid #ffb09e;font-size:15px;padding:6px 12px}

/* ── HEADER STICKY RÉTRACTABLE ──────────────────────────────────── */
header.site{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--prune) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordure);
}
.h-in{
  max-width:1040px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;gap:14px;
  transition:padding .2s ease;
}
/* compacté après 40px de scroll */
header.site.shrunk .h-in{padding:7px 20px}
header.site.shrunk .keycap.ctrl{font-size:11px;padding:4px 9px}
header.site.shrunk .keycap.lettre{font-size:13px;padding:4px 10px}
header.site.shrunk .h-name small{display:none}
.h-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.h-name{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;font-size:15px;color:#fff;line-height:1.15;
}
.h-name small{
  display:block;font-family:var(--f-titre);font-weight:600;
  text-transform:none;letter-spacing:.03em;font-size:11px;
  color:var(--muted);margin-top:2px;
}
.h-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* bouton principal corail (CTA) */
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;font-size:11.5px;color:#fff;
  background:var(--corail);border-radius:20px;padding:10px 18px;
  transition:transform .15s,opacity .15s;
}
.btn-cta:hover{opacity:.9;transform:translateY(-1px)}
/* bouton secondaire outline */
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;font-size:11.5px;color:var(--beige);
  border:1px solid var(--bordure);background:none;
  border-radius:20px;padding:9px 16px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.btn-outline:hover{border-color:var(--violet-clair);color:var(--violet-clair)}
@media(max-width:560px){
  .btn-outline{display:none} /* mobile : une seule action, le CTA */
}

/* ── HERO / COMPTE À REBOURS ────────────────────────────────────────
   Seul bloc de la page à porter le dégradé violet.                  */
.hero{
  position:relative;overflow:hidden;
  margin-top:24px;border-radius:var(--r-lg);
  border:1px solid var(--bordure);
  background:
    linear-gradient(100deg, rgba(20,0,29,.92) 32%, rgba(20,0,29,.45) 68%, rgba(20,0,29,.25)),
    url('../img/bg-violet.jpg') center/cover no-repeat;
  padding:30px 26px;
  display:grid;grid-template-columns:1fr;gap:26px;
}
.hero::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--corail),var(--violet-clair));
}
@media(min-width:760px){
  .hero{grid-template-columns:1.15fr .85fr;align-items:center;padding:36px 34px}
}
.hero h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,4.6vw,40px);color:#fff;
  line-height:1.12;letter-spacing:.01em;
  margin:12px 0 8px;text-transform:uppercase;
}
.hero h1 .accent{color:var(--corail)}
.baseline{color:var(--violet-clair);font-size:14.5px;letter-spacing:.02em;font-weight:500}
.hero-unlock{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14px;color:var(--sable);margin-top:16px;max-width:46ch;
}
.hero-unlock svg{width:15px;height:15px;stroke:var(--sable);flex:none;margin-top:2px}
.hero-next{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--beige);
}
.hero-next .np{
  font-family:var(--f-titre);font-weight:700;font-size:12px;
  background:rgba(20,0,29,.55);border:1px solid var(--bordure);
  border-radius:16px;padding:5px 12px;
}
.hero-right{text-align:center}
.hero-line{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;font-size:12.5px;color:var(--beige);
  margin-bottom:14px;
}
.timer{display:flex;justify-content:center;gap:9px;margin-bottom:12px}
.t-box{
  min-width:66px;background:rgba(20,0,29,.72);
  border:1px solid var(--bordure);border-radius:var(--r-md);
  padding:12px 6px 10px;
  box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
.t-num{
  font-family:var(--f-display);font-weight:600;
  font-size:30px;color:var(--corail);line-height:1;
  font-variant-numeric:tabular-nums;
}
.t-lab{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.15em;font-size:9.5px;color:var(--violet-clair);margin-top:6px;
}
.live-now{
  display:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:18px;color:#fff;margin-bottom:14px;
}
.live-now .dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--corail);margin-right:9px;
  box-shadow:0 0 12px var(--corail);
  animation:pulse 1.2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.btn-live{
  display:none;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:12.5px;color:#fff;
  background:var(--corail);border-radius:22px;padding:12px 26px;
  box-shadow:0 0 24px color-mix(in srgb,var(--corail) 55%,transparent);
}
.hero-sub{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ── INVENTAIRE : légende, recherche, compteur ──────────────────── */
.inv-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 16px;
  margin-top:36px;scroll-margin-top:90px;
}
.inv-title{
  font-family:var(--f-titre);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:20px;color:#fff;
  text-shadow:0 0 18px color-mix(in srgb,var(--violet-clair) 45%,transparent);
}
.count{margin-left:auto;font-size:13px;color:var(--muted)}
.count b{color:var(--corail);font-weight:800}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.leg-item{display:flex;align-items:center;gap:7px}
.leg-dot{width:9px;height:9px;border-radius:3px;flex:none;background:var(--tc)}

/* couleurs par type de ressource */
.t-recap{--tc:var(--violet-clair)}
.t-fiche{--tc:var(--sable)}
.t-exclu{--tc:var(--corail)}
.type-tint{background:color-mix(in srgb,var(--tc) 15%,transparent);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.type-tint svg{stroke:var(--tc)}

.search{
  width:100%;background:var(--carte);
  border:1.5px solid var(--bordure);border-radius:var(--r-md);
  color:var(--beige);font-family:var(--f-texte);font-size:15px;
  padding:13px 16px 13px 48px;outline:none;margin-top:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b34be8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:16px center;
  transition:border-color .15s,box-shadow .15s;
}
.search:focus{
  border-color:var(--corail);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--corail) 18%,transparent);
}
.search::placeholder{color:var(--muted)}

/* ── GRILLE DE RESSOURCES : gabarit uniforme ────────────────────── */
.rgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:720px){.rgrid{grid-template-columns:1fr 1fr}}

.rcard{
  position:relative;
  display:flex;flex-direction:column;gap:9px;
  min-height:132px;
  background:var(--carte);border:1px solid var(--bordure);
  border-left:3px solid var(--tc);
  border-radius:var(--r-md);padding:16px 18px;
  color:var(--beige);text-decoration:none;
  transition:border-color .15s,transform .15s;
}
button.rcard{width:100%;text-align:left;font:inherit;cursor:pointer}
a.rcard:hover,button.rcard:hover{border-color:var(--tc);transform:translateY(-2px)}
/* badge de rattachement : date d'émission + invité, discret, au-dessus du titre */
.r-ep-badge{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:var(--f-titre);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;color:var(--muted);
}
.r-ep-badge svg{width:12px;height:12px;stroke:var(--muted);flex:none}
.r-label{
  font-size:16px;font-weight:700;color:#fff;line-height:1.35;
  font-family:var(--f-titre);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.r-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:auto;align-items:center}
.r-pill{width:30px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 2px 0 rgba(0,0,0,.3)}
.r-pill svg{width:14px;height:14px}
.r-type{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--tc)}
.r-format{
  font-family:var(--f-titre);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--beige);
  border:1px solid var(--bordure);border-radius:9px;padding:2px 8px;
}
.r-dl{margin-left:auto}
.r-dl svg{width:16px;height:16px;stroke:var(--tc);flex:none}

/* ── RESSOURCE VERROUILLÉE (épisode à venir) ────────────────────────
   Titre lisible, reste flouté, cadenas blanc centré.               */
.rcard.locked{cursor:default}
.rcard.locked .r-meta,
.rcard.locked .r-ep-badge{filter:blur(5px);opacity:.6;pointer-events:none}
.lk-overlay{
  position:absolute;inset:0;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:14px;gap:5px;text-align:center;
  background:linear-gradient(180deg, transparent 30%, rgba(20,0,29,.55));
}
.lk-overlay svg{width:22px;height:22px;stroke:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.lk-txt{
  font-family:var(--f-titre);font-weight:700;font-size:11.5px;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* ── ÉTATS VIDES ────────────────────────────────────────────────── */
.empty-msg{
  grid-column:1/-1;text-align:center;padding:46px 20px;
  color:var(--muted);font-size:14px;
  border:1.5px dashed var(--bordure);border-radius:var(--r-lg);
}
.vault-empty{
  grid-column:1/-1;text-align:center;
  border:1.5px dashed var(--bordure);border-radius:var(--r-lg);
  padding:52px 24px;background:var(--carte); /* plat : le dégradé reste réservé au timer */
}
.ve-key{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:60px;border-radius:14px;margin-bottom:18px;
  background:var(--carte-2);
  border:1.5px dashed var(--bordure);
}
.ve-key svg{width:24px;height:24px;stroke:var(--muted)}
.ve-title{
  font-family:var(--f-titre);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:19px;color:#fff;
  text-shadow:0 0 18px color-mix(in srgb,var(--violet-clair) 45%,transparent);
}
.ve-sub{font-size:14px;color:var(--muted);max-width:52ch;margin:10px auto 0}
.ve-sub b{color:var(--sable)}

/* ── FICHE RESSOURCE (fenêtre de détail) ────────────────────────── */
.rov{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,0,16,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;justify-content:center;
  padding:24px 16px;overflow-y:auto;
}
.rov[hidden]{display:none}
.rov-card{
  width:100%;max-width:560px;position:relative;
  margin:auto; /* centré si court, défile dans l'overlay si long */
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:var(--r-lg);padding:28px 26px 24px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.rov-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--corail),var(--violet-clair));
}
.rov-close{
  position:absolute;top:14px;right:14px;
  background:none;border:1px solid var(--bordure);border-radius:50%;
  width:34px;height:34px;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;transition:all .15s;
}
.rov-close:hover{border-color:var(--corail);color:var(--corail)}
.rov-title{
  font-family:var(--f-titre);font-weight:800;
  font-size:21px;color:#fff;line-height:1.3;
  margin:10px 24px 0 0;
}
.rov-desc{
  font-size:14.5px;color:var(--beige);line-height:1.65;
  margin-top:14px;white-space:pre-line;
}
.rov-desc[hidden]{display:none}
.rov-meta{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--bordure);
}
.rov-actions{margin-top:20px;display:flex;justify-content:flex-end}
.rov-actions .btn-cta{padding:12px 26px;font-size:12.5px}

/* ── FOOTER ─────────────────────────────────────────────────────── */
footer.site{
  margin-top:56px;border-top:1px solid var(--bordure);
  padding:34px 0 10px;text-align:center;
}
.f-logo{height:44px;margin-bottom:6px}
.f-base{
  font-family:var(--f-titre);font-weight:700;font-size:13px;
  color:var(--violet-clair);letter-spacing:.02em;margin-bottom:14px;
}
.f-txt{font-size:13px;color:var(--muted);margin-bottom:18px}
.soc-row{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bordure);color:var(--beige);
  transition:border-color .15s,color .15s,transform .15s;
}
.soc:hover{border-color:var(--violet-clair);color:var(--violet-clair);transform:translateY(-2px)}
.soc svg{width:17px;height:17px;fill:currentColor}
.f-fine{font-size:11.5px;color:var(--muted)}