/* event.mykollector.com — styles communs (pages publiques et back-office) */
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --fond: #f6f3ee; --carte: #ffffff; --texte: #1d1a16; --doux: #6d655a; --ligne: #e4ddd1;
  --accent: #e2561a; --accent-fonce: #b9420f; --accent-clair: #fdeee5;
  --nuit: #1b1830; --ok: #22804a; --ok-clair: #e3f4ea; --alerte: #b3261e; --alerte-clair: #fbe9e7; --info-clair: #eef2fb;
  --rayon: 14px; --ombre: 0 1px 2px rgba(29,26,22,.06), 0 6px 20px rgba(29,26,22,.07);
  --titre: "Bricolage", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.17em; }
.btn .ic { width: 1.15em; height: 1.15em; }
img { max-width: 100%; display: block; }
a { color: var(--accent-fonce); }
h1, h2, h3 { font-family: var(--titre); line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
h2 { font-size: 1.35rem; }
p { margin: 0 0 .8em; }
main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px 60px; }
main.etroit { max-width: 640px; padding-top: 28px; }
.aide, small.aide { color: var(--doux); font-size: .88rem; }
.cache { display: none !important; }

/* En-tête du site */
.entete { background: var(--nuit); color: #fff; }
.entete .in { max-width: 1080px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.entete a { color: #fff; text-decoration: none; font-family: var(--titre); font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; white-space: nowrap; }
.entete a b { color: #ffb08a; }
.entete .droite { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: .9rem; }
.entete .droite a { font: inherit; font-weight: 600; opacity: .85; }
@media (max-width: 520px) { .entete a { font-size: 1.05rem; } .entete .droite { gap: 10px; font-size: .82rem; } }

/* Boutons et champs */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: .95rem; line-height: 1.2; font-family: inherit; padding: 0 18px; cursor: pointer; text-decoration: none; min-height: 42px; transition: background .15s, transform .1s; }
.btn:hover { background: var(--accent-fonce); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.second { background: var(--carte); color: var(--texte); border: 1.5px solid var(--ligne); }
.btn.second:hover { border-color: var(--accent); background: var(--carte); }
.btn.sombre { background: var(--nuit); }
.btn.danger { background: var(--carte); color: var(--alerte); border: 1.5px solid #e9c3bf; }
/* « petit » ne change plus la hauteur : un seul format de bouton sur toutes les pages de gestion (desktop) */
.btn.petit { padding: 0 14px; }
.btn.large { width: 100%; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; font: inherit; color: inherit; background: #fff; border: 1.5px solid var(--ligne); border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { display: inline-block; width: auto; margin: 0 8px 0 0; accent-color: var(--accent); transform: scale(1.15); vertical-align: -2px; }
textarea { min-height: 90px; resize: vertical; }
input[type=color] { height: 46px; padding: 4px; cursor: pointer; }
.case { display: flex; align-items: flex-start; gap: 4px; font-weight: 500; }
.case input { margin-top: 4px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .grille2 { grid-template-columns: 1fr; } }

/* Cartes et messages */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; margin: 0 0 18px; }
.alerte, .succes, .info { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-weight: 500; }
.alerte { background: var(--alerte-clair); color: var(--alerte); }
.succes { background: var(--ok-clair); color: var(--ok); }
.info { background: var(--info-clair); color: #263a6b; }
.liste-ok { padding-left: 0; list-style: none; } .liste-ok li { margin: 6px 0; }
.pastille { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; background: #eee8de; color: var(--doux); white-space: nowrap; }
.pastille.ok { background: var(--ok-clair); color: var(--ok); }
.pastille.alerte { background: var(--alerte-clair); color: var(--alerte); }
.pastille.accent { background: var(--accent-clair); color: var(--accent-fonce); }

/* Agenda */
.hero-agenda { padding: 34px 0 22px; }
.hero-agenda p { color: var(--doux); max-width: 620px; }
.grille-ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.ev { display: flex; flex-direction: column; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ev:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(29,26,22,.13); }
.ev .img { aspect-ratio: 16/9; background: linear-gradient(135deg, #2a2347, #e2561a); }
.ev .img img { width: 100%; height: 100%; object-fit: cover; }
.ev .corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ev h2 { font-size: 1.25rem; margin: 0; }
.ev .meta { color: var(--doux); font-size: .9rem; }
.ev .bas { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; }
.vide { text-align: center; color: var(--doux); padding: 50px 10px; }

/* Fiche événement */
.banniere { position: relative; background: var(--nuit); color: #fff; }
.banniere .img { position: absolute; inset: 0; opacity: .42; background-size: cover; background-position: center; }
.banniere .in { position: relative; max-width: 1080px; margin: 0 auto; padding: 46px 16px 34px; }
.banniere h1 { color: #fff; }
.banniere .sous { font-size: 1.15rem; opacity: .9; margin: 0 0 10px; }
.banniere .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.banniere .pastille { background: rgba(255,255,255,.16); color: #fff; }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; margin-top: 24px; align-items: start; }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; } }
.texte-long { white-space: pre-line; }
.resa { position: sticky; top: 14px; }
@media (max-width: 900px) { .resa { position: static; } }
.jour { margin: 0 0 12px; }
.jour h3 { font-size: 1rem; margin: 0 0 6px; }
.jour h3::first-letter { text-transform: uppercase; }
.creneaux { display: flex; flex-wrap: wrap; gap: 8px; }
.cr { border: 1.5px solid var(--ligne); background: #fff; border-radius: 12px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; min-width: 92px; }
.cr b { display: block; font-size: 1.05rem; }
.cr small { color: var(--doux); font-size: .78rem; }
.cr.on { border-color: var(--accent); background: var(--accent-clair); box-shadow: 0 0 0 2px var(--accent) inset; }
.cr:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.cr.peu small { color: var(--accent-fonce); font-weight: 700; }
.tarif { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.tarif:first-child { border-top: 0; }
.tarif .nom b { display: block; } .tarif .nom small { color: var(--doux); }
.compteur { display: flex; align-items: center; gap: 4px; }
.compteur button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ligne); background: #fff; font-size: 1.2rem; font-weight: 700; cursor: pointer; color: var(--texte); }
.compteur button:hover { border-color: var(--accent); }
.compteur output { min-width: 28px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; font-weight: 800; margin: 12px 0; padding-top: 10px; border-top: 2px solid var(--texte); }
.piege { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.etape-titre { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-size: 1.1rem; font-weight: 800; margin: 18px 0 8px; }
.etape-titre:first-child { margin-top: 0; }
.etape-titre i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--nuit); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }

/* Billets */
.billets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.billet { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; text-align: center; border-top: 6px solid var(--accent); }
.billet .qr { width: 210px; margin: 8px auto; }
.billet .qr svg { width: 100%; height: auto; display: block; }
.billet.pointe { opacity: .55; }
.gros-lien { display: block; text-align: center; font-size: 1.15rem; padding: 16px; }

/* Fenêtre modale */
dialog { border: 0; border-radius: var(--rayon); padding: 22px; max-width: 620px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(20,18,30,.55); }
dialog .texte-long { max-height: 60vh; overflow: auto; }

/* ───────── Back-office ───────── */
body.adm { background: #f3f1ed; }
.adm .barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 16px; }
.adm .barre h1 { margin: 0; font-size: 1.7rem; }
.adm .barre .droite { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.onglets { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--ligne); margin: 0 0 18px; scrollbar-width: none; }
.onglets button { border: 0; background: none; font-weight: 700; font-size: .95rem; line-height: 1; font-family: inherit; color: var(--doux); padding: 12px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.onglets button.on { color: var(--texte); border-color: var(--accent); }
table.tab { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); font-size: .92rem; }
.tab th, .tab td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tab th { background: #faf8f4; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.tab tr:last-child td { border-bottom: 0; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-scroll { overflow-x: auto; border-radius: var(--rayon); }
@media (max-width: 720px) {
  .tab.cartes thead { display: none; }
  .tab.cartes, .tab.cartes tbody, .tab.cartes tr, .tab.cartes td { display: block; width: 100%; }
  .tab.cartes tr { border-bottom: 1px solid var(--ligne); padding: 8px 4px; }
  .tab.cartes td { border: 0; padding: 3px 10px; }
  .tab.cartes td[data-l]::before { content: attr(data-l) " : "; color: var(--doux); font-weight: 600; }
}
.liste-ev { display: grid; gap: 12px; }
.ligne-ev { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: var(--rayon); padding: 12px; box-shadow: var(--ombre); color: inherit; text-decoration: none; }
.ligne-ev .vign { width: 84px; height: 60px; border-radius: 10px; background: linear-gradient(135deg, #2a2347, #e2561a) center/cover; }
.ligne-ev h3 { margin: 0 0 2px; font-size: 1.1rem; }
.ligne-ev .chiffres { display: flex; gap: 14px; text-align: right; font-size: .85rem; color: var(--doux); }
.ligne-ev .chiffres b { display: block; font-size: 1.1rem; color: var(--texte); }
@media (max-width: 640px) { .ligne-ev { grid-template-columns: 64px 1fr; } .ligne-ev .vign { width: 64px; height: 48px; } .ligne-ev .chiffres { grid-column: 1 / -1; justify-content: flex-start; text-align: left; } }
.depot { border: 2px dashed #d4c6b0; border-radius: 12px; padding: 18px; text-align: center; color: var(--doux); background: #fffdf9; cursor: pointer; transition: background .15s, border-color .15s; }
.depot.survol { background: var(--accent-clair); border-color: var(--accent); }
.depot b { color: var(--texte); }
.fichiers { margin-top: 10px; display: grid; gap: 6px; }
.fichier { display: flex; align-items: center; gap: 10px; background: #faf8f4; border-radius: 10px; padding: 6px 10px; font-size: .9rem; }
.fichier .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier input { margin: 0; padding: 5px 8px; max-width: 220px; font-size: .86rem; }
.fichier audio { height: 32px; max-width: 200px; }
.barre-prog { height: 6px; background: var(--ligne); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.barre-prog i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.lien-copie { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.lien-copie input { margin: 0; font-size: .82rem; color: var(--doux); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100% - 32px); }
.toast.err { background: var(--alerte); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.stat { background: #fff; border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); }
.stat b { display: block; font-size: 1.5rem; font-family: var(--titre); }
.stat span { color: var(--doux); font-size: .85rem; }
.jauge { height: 6px; background: var(--ligne); border-radius: 3px; overflow: hidden; min-width: 70px; }
.jauge i { display: block; height: 100%; background: var(--ok); }
.jauge.pleine i { background: var(--accent); }

/* Pointage */
.scan-video { width: 100%; max-height: 52vh; object-fit: cover; border-radius: var(--rayon); background: #000; }
.verdict { font-size: 1.3rem; font-weight: 800; text-align: center; padding: 18px; border-radius: var(--rayon); margin: 12px 0; }
.verdict.ok { background: var(--ok); color: #fff; }
.verdict.ko { background: var(--alerte); color: #fff; }
.verdict.deja { background: #a86b00; color: #fff; }