/* ══════════════════════════════════════════════════════════════════
   CTRL S — Le coffre à ressources de Ctrl F
   Feuille de style — charte graphique Contrôle F (Omada, 01/2026)
   ──────────────────────────────────────────────────────────────────
   Palette officielle (ControleF_Branding.pdf, p.7) :
     #14001d  prune (fond)     #fe6c50  corail (accent)
     #4c199d  violet foncé     #ecaf79  sable
     #b34be8  violet clair     #e8d7c2  beige
   Mise à jour Saison 2 (BESOINS ASSETS, 07/2026) :
     violets #491898 / #9f62ff · orange clair #fbcd91
   Typographies de la marque :
     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{
  /* charte officielle */
  --prune:#14001d;
  --violet:#4c199d;
  --violet-clair:#b34be8;
  --corail:#fe6c50;
  --sable:#ecaf79;
  --beige:#e8d7c2;
  /* mise à jour S2 (disponibles si besoin) */
  --violet-s2:#491898;
  --violet-clair-s2:#9f62ff;
  --sable-s2:#fbcd91;
  /* surfaces dérivées */
  --carte:#1d0630;
  --carte-2:#241038;
  --bordure:#3a1358;
  --muted:#9a7fae;
  --muted-2:#7a5c8f;
  /* typo */
  --f-display:'Clash Display','Gilroy',system-ui,sans-serif;
  --f-titre:'Gilroy',system-ui,sans-serif;
  --f-texte:'Gilroy',system-ui,sans-serif;
  /* rayons */
  --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);
  color:var(--beige);
  font-family:var(--f-texte);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body::before{ /* trame subtile façon habillage antenne */
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(76,25,157,.32), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(179,75,232,.10), transparent 55%),
    var(--prune);
}
.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}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:is(button,a,input,select,textarea):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{
  position:relative;
  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;
}
.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}
.keycap.violet-l{background:linear-gradient(180deg,#c76bf3,var(--violet-clair));border:1px solid #d795f7}

/* ── HEADER STICKY ──────────────────────────────────────────────── */
header.site{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--prune) 82%, 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:11px 20px;
  display:flex;align-items:center;gap:14px;
}
.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}
.badge-inv{
  display:none;align-items:center;gap:7px;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;font-size:10.5px;color:var(--sable);
  border:1px solid var(--bordure);background:rgba(20,0,29,.5);
  border-radius:20px;padding:6px 14px;
}
.badge-inv svg{width:13px;height:13px;stroke:var(--sable)}
@media(min-width:620px){.badge-inv{display:inline-flex}}
.btn-yt{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:#fff;
  background:var(--corail);border-radius:20px;padding:8px 16px;
  transition:transform .15s,opacity .15s;
}
.btn-yt:hover{opacity:.9;transform:translateY(-1px)}
.btn-yt svg{width:14px;height:14px;fill:#fff}

/* ── HERO ───────────────────────────────────────────────────────── */
.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{ /* liseré corail supérieur, façon cartouche antenne */
  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:13.5px;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;
}

/* countdown */
.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);
  opacity:.85;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(--beige);opacity:.7;margin-top:4px}

/* ── ONGLETS ÉPISODES / RESSOURCES ──────────────────────────────── */
.tabs{
  display:inline-flex;gap:4px;margin-top:30px;
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:24px;padding:4px;
}
.tab{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:var(--muted);
  background:none;border:none;border-radius:20px;
  padding:9px 20px;cursor:pointer;transition:all .15s;
}
.tab:hover{color:var(--beige)}
.tab.on{background:var(--violet);color:#fff}
.tab .n{color:var(--corail);margin-left:5px}
.tab.on .n{color:var(--sable-s2)}

/* ── OUTILS (recherche + filtres) ───────────────────────────────── */
.tools{margin-top:18px}
.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:14px 16px 14px 48px;outline:none;
  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-2)}
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--beige);
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:20px;padding:8px 16px;cursor:pointer;transition:all .15s;
}
.chip:hover{border-color:var(--violet-clair);color:var(--violet-clair)}
.chip.on{background:var(--violet);border-color:var(--violet-clair);color:#fff}
.count{margin-left:auto;font-size:12.5px;color:var(--muted)}
.count b{color:var(--corail);font-weight:800}

/* légende des types */
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:12px;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)}

/* ── GRILLE ÉPISODES ────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.card{
  position:relative;
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:var(--r-lg);padding:19px 19px 17px;cursor:pointer;
  transition:border-color .15s,transform .15s,box-shadow .15s;
  text-align:left;color:inherit;font:inherit;width:100%;
  display:flex;flex-direction:column;gap:11px;
}
.card:hover{
  border-color:var(--violet-clair);transform:translateY(-3px);
  box-shadow:0 12px 30px color-mix(in srgb,var(--violet-clair) 15%,transparent);
}
.card.next{border-color:color-mix(in srgb,var(--corail) 55%,var(--bordure));}
.card.next::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));
}
.c-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.c-code{
  font-family:var(--f-titre);font-weight:800;letter-spacing:.1em;
  font-size:11px;color:var(--violet-clair);
  background:var(--prune);border:1px solid var(--bordure);
  border-radius:7px;padding:4px 9px;
}
.c-date{
  font-family:var(--f-titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:10.5px;color:var(--muted);
}
.c-status{
  margin-left:auto;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:10px;color:var(--corail);
  border:1px solid color-mix(in srgb,var(--corail) 45%,transparent);
  background:color-mix(in srgb,var(--corail) 12%,transparent);
  border-radius:12px;padding:3px 10px;
}
.c-title{
  font-family:var(--f-titre);font-weight:700;
  font-size:17.5px;color:#fff;line-height:1.32;
}
.c-guest{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sable);font-weight:500}
.c-guest svg{width:13px;height:13px;stroke:var(--sable);flex:none}
.c-resume{
  font-size:13.5px;color:var(--beige);opacity:.72;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* slots d'inventaire — façon touches de clavier */
.c-slots{display:flex;align-items:center;gap:9px;margin-top:3px}
.slot{
  position:relative;width:40px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.slot svg{width:17px;height:17px}
.slot-lock{
  border:1.5px dashed var(--bordure);box-shadow:none;background:rgba(20,0,29,.4);
}
.slot-lock svg{stroke:var(--muted-2);width:14px;height:14px}
.slot-n{
  position:absolute;top:-7px;right:-7px;
  font-family:var(--f-titre);font-weight:800;font-size:9.5px;color:#fff;
  background:var(--violet);border:1px solid var(--violet-clair);
  border-radius:9px;padding:1px 5px;line-height:1.25;
}
.slots-hint{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;font-size:10px;color:var(--muted-2);
}
.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);
}

/* ── GRILLE RESSOURCES (vue bibliothèque) ───────────────────────── */
.rgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
@media(min-width:720px){.rgrid{grid-template-columns:1fr 1fr}}
.rcard{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--carte);border:1px solid var(--bordure);
  border-left:3px solid var(--tc);
  border-radius:var(--r-md);padding:14px 16px;color:var(--beige);
  transition:border-color .15s,transform .15s;
}
.rcard:hover{border-color:var(--tc);transform:translateX(3px)}
.r-pill{width:38px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 3px 0 rgba(0,0,0,.35)}
.r-pill svg{width:16px;height:16px}
.r-main{flex:1;min-width:0}
.r-label{font-size:14.5px;font-weight:600;color:#fff;line-height:1.35}
.r-meta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:4px;align-items:center}
.r-type{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--tc)}
.r-format{
  font-family:var(--f-titre);font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--beige);opacity:.75;
  border:1px solid var(--bordure);border-radius:9px;padding:1.5px 7px;
}
.r-ep{font-size:11px;color:var(--muted)}
.r-dl svg{width:16px;height:16px;stroke:var(--tc);flex:none}

/* grand état vide (bibliothèque au lancement) */
.vault-empty{
  margin-top:20px;text-align:center;
  border:1.5px dashed var(--bordure);border-radius:var(--r-lg);
  padding:52px 24px;
  background:
    linear-gradient(180deg, rgba(29,6,48,.85), rgba(29,6,48,.95)),
    url('../img/bg-violet-soft.jpg') center/cover no-repeat;
}
.ve-key{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:60px;border-radius:14px;margin-bottom:18px;
  background:linear-gradient(180deg,#2c1046,var(--carte));
  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) 55%,transparent);
}
.ve-sub{font-size:14px;color:var(--muted);max-width:52ch;margin:10px auto 0}
.ve-sub b{color:var(--sable)}

/* ── VUE DÉTAIL ÉPISODE ─────────────────────────────────────────── */
.detail{display:none;margin-top:24px}
.btn-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:var(--violet-clair);
  background:none;border:1px solid var(--bordure);border-radius:20px;
  padding:9px 18px;cursor:pointer;margin-bottom:18px;transition:all .15s;
}
.btn-back:hover{border-color:var(--violet-clair)}
.btn-back svg{width:14px;height:14px;stroke:var(--violet-clair)}
.d-box{
  position:relative;overflow:hidden;
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:var(--r-lg);padding:30px 28px;
}
.d-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--corail),var(--violet-clair));
}
.d-title{
  font-family:var(--f-titre);font-weight:800;
  font-size:clamp(21px,3.8vw,28px);color:#fff;line-height:1.25;
  margin:12px 0 8px;
}
.d-resume{font-size:15px;margin-top:12px;opacity:.9;max-width:70ch}
.d-sec{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-titre);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.13em;font-size:12.5px;
  color:var(--violet-clair);margin:28px 0 14px;
  text-shadow:0 0 14px color-mix(in srgb,var(--violet-clair) 45%,transparent);
}
.d-sec::after{content:'';height:1px;flex:1;background:var(--bordure)}

/* sommaire façon antenne : numéro en pastille */
.d-points{list-style:none;display:flex;flex-direction:column;gap:9px}
.d-points li{
  position:relative;display:flex;gap:12px;align-items:baseline;
  font-size:14.5px;font-weight:500;
}
.d-points .pn{
  font-family:var(--f-titre);font-weight:800;font-size:11px;color:#fff;
  background:var(--violet);border:1px solid var(--violet-clair);
  border-radius:50%;width:22px;height:22px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transform:translateY(3px);
}
.res-list{display:flex;flex-direction:column;gap:10px}
.d-locked{
  border:1.5px dashed var(--bordure);border-radius:var(--r-md);
  padding:26px;text-align:center;color:var(--muted);font-size:13.5px;
}
.d-locked svg{width:22px;height:22px;stroke:var(--muted);display:block;margin:0 auto 10px}
.d-locked b{color:var(--sable);font-weight:700}

/* bandeau mode démo */
.demo-note{
  margin-top:14px;font-size:12px;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--sable) 40%,transparent);
  border-radius:var(--r-sm);padding:9px 13px;
  background:color-mix(in srgb,var(--sable) 6%,transparent);
}
.demo-note b{color:var(--sable)}

/* ── 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;opacity:.95}
.f-base{
  font-family:var(--f-titre);font-weight:700;font-size:13px;
  color:var(--violet-clair);letter-spacing:.02em;margin-bottom:16px;
}
.f-txt{font-size:13px;color:var(--muted);margin-bottom:16px}
.f-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.btn-out{
  display:inline-block;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;color:#fff;
  background:var(--corail);border-radius:20px;padding:11px 22px;
  transition:opacity .15s,transform .15s;
}
.btn-out:hover{opacity:.88;transform:translateY(-1px)}
.btn-ghost{
  display:inline-block;text-decoration:none;
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;color:var(--beige);
  border:1px solid var(--bordure);border-radius:20px;padding:10px 20px;
  transition:border-color .15s;
}
.btn-ghost:hover{border-color:var(--violet-clair);color:var(--violet-clair)}
.f-fine{font-size:11.5px;color:var(--muted-2)}
.f-fine a{color:var(--muted)}

/* ── PAGE AJOUTER (formulaire) ──────────────────────────────────── */
.form-box{
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:var(--r-lg);padding:26px 24px;margin-top:22px;
}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
.fg-full{grid-column:1/-1}
label.f-lab{
  display:block;font-family:var(--f-titre);font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:var(--violet-clair);margin-bottom:7px;
}
.f-input,.f-select,.f-ta{
  width:100%;background:var(--prune);
  border:1.5px solid var(--bordure);border-radius:var(--r-sm);
  color:var(--beige);font-family:var(--f-texte);font-size:14.5px;
  padding:11px 13px;outline:none;transition:border-color .15s;
}
.f-input:focus,.f-select:focus,.f-ta:focus{border-color:var(--corail)}
.f-hint{font-size:11.5px;color:var(--muted-2);margin-top:5px}
.code-out{
  background:#0d0016;border:1px solid var(--bordure);
  border-radius:var(--r-md);padding:18px;margin-top:18px;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;
  font-size:12.5px;line-height:1.55;color:var(--beige);
  white-space:pre;overflow-x:auto;
}
.code-out .k{color:var(--violet-clair)}
.code-out .s{color:var(--sable)}
.steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.steps li{
  counter-increment:st;position:relative;padding-left:38px;font-size:14px;
}
.steps li::before{
  content:counter(st);position:absolute;left:0;top:0;
  font-family:var(--f-titre);font-weight:800;font-size:12px;color:#fff;
  background:var(--violet);border:1px solid var(--violet-clair);
  border-radius:50%;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
}
.copy-ok{color:var(--sable);font-size:13px;font-weight:600;margin-left:12px}

/* ── MODALE « AJOUTER UNE RESSOURCE » ───────────────────────────── */
.modal-ov{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,0,16,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:5vh 16px 40px;
}
.modal-ov[hidden]{display:none}
.modal{
  width:100%;max-width:640px;
  background:var(--carte);border:1px solid var(--bordure);
  border-radius:var(--r-lg);padding:26px 24px;position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.modal::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));
}
.m-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;
}
.m-close:hover{border-color:var(--corail);color:var(--corail)}
.m-title{
  font-family:var(--f-titre);font-weight:800;font-size:20px;color:#fff;
  margin:8px 0 4px;
}
.m-sub{font-size:13px;color:var(--muted);margin-bottom:18px;max-width:60ch}
.m-note{
  margin-top:16px;font-size:12px;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--sable) 40%,transparent);
  border-radius:var(--r-sm);padding:9px 13px;
  background:color-mix(in srgb,var(--sable) 6%,transparent);
}
.m-note b{color:var(--sable)}
.m-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn-primary{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:#fff;
  background:var(--corail);border:none;border-radius:20px;
  padding:12px 24px;cursor:pointer;transition:opacity .15s,transform .15s;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.f-err{display:none;font-size:12.5px;color:var(--corail);font-weight:600}
.f-err.on{display:block}

/* mes ajouts (liste locale) */
.myadds{margin-top:22px;border-top:1px solid var(--bordure);padding-top:16px}
.myadds-title{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--violet-clair);margin-bottom:10px;
}
.myadd-row{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--beige);
  background:var(--prune);border:1px solid var(--bordure);
  border-radius:var(--r-sm);padding:8px 12px;margin-bottom:7px;
}
.myadd-row .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myadd-row .ep{font-size:11px;color:var(--muted);flex:none}
.myadd-del{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:3px 6px;border-radius:6px;flex:none;
}
.myadd-del:hover{color:var(--corail)}
.myadds-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* badge « ajout local » sur les ressources */
.badge-local{
  font-family:var(--f-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;font-size:9.5px;color:var(--violet-clair);
  border:1px dashed color-mix(in srgb,var(--violet-clair) 55%,transparent);
  border-radius:9px;padding:1.5px 7px;
}

/* toast de confirmation */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  z-index:120;opacity:0;pointer-events:none;
  font-family:var(--f-titre);font-weight:800;font-size:13px;color:#fff;
  background:var(--violet);border:1px solid var(--violet-clair);
  border-radius:22px;padding:12px 22px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:opacity .2s,transform .2s;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* lien-bouton du footer */
.linklike{
  background:none;border:none;cursor:pointer;
  font-family:var(--f-texte);font-size:11.5px;color:var(--muted);
  text-decoration:underline;padding:0;
}
.linklike:hover{color:var(--violet-clair)}