/* ===== IJ Connect - app.css (centralisé) ===== */
:root{
  --brand: #00406B; /* Bleu nuit */
  --accent: #00ACA7; /* Bleu */
  --danger: #E73E22; /* Rouge */
  --paper: #ffffff;
  --ink: #00406B/*#0f172a*/;
  --muted: #64748b;
  --line: #e5e7eb;
  --bg: #f8fafc;
  --shadow: 0 6px 16px rgba(2,6,23,.06);
  --radius: 22px;


  --violet: #5E1664;
  --violet-700:#3B0B44;
  --violet-300:#8F4AA0;

  --gap-outer: 22px;
  --wrap-w: 1200px;

    /* ombres plus légères */
  --shadow-sm: 0 6px 16px rgba(94,22,100,.10);
  --shadow-md: 0 12px 28px rgba(94,22,100,.14);
}
*{box-sizing:border-box}

/****************/
/*****Global*****/
/****************/
p, div{
  font-size: 14px;
}
html,body{margin:0;padding:0;font-family:Poppins,Roboto,system-ui,-apple-system,Segoe UI,Arial,Helvetica,sans-serif;color:var(--ink);background:#F7F5FE;}
main{max-width:1100px;margin:0 auto;padding:16px;display: flex;flex-direction: column;}
h1,h2,h3{font-family:Poppins,Roboto,system-ui,Arial,sans-serif;margin:0 0 .5rem 0}
h1{font-size:1.8rem}
h2{font-size:1.2rem;font-weight: 700;display: flex;align-items: center;gap: 10px;margin: 10px 0 14px;}
h2::before{
  width: 10px; height: 10px; border-radius: 50%;
  background: #00ACA7;
  content: "";
}
h3{font-size:1.1rem}
h4{font-size:0.95rem}
a{color:var(--brand);text-decoration:none}
a.secondary,button.secondary, .btn.accent,button.btn.accent.btnQuestFeedback{font-weight:700;display:inline-block;border:1px solid var(--line);padding:.5rem .75rem;border-radius:var(--radius);background:var(--color-primary);color:white;}
a.secondary:hover,button:hover,button.secondary:hover,.btn.accent:hover,button.btn.accent.btnQuestFeedback:hover{border:1px solid var(--line)!important;background:#f1f5f9 !important; color:var(--color-primary) !important;}
button{font-size:inherit;font-family: 'Poppins';border: 1px solid var(--line);cursor:pointer;border-radius:var(--radius);background:var(--color-primary);color:#fff;padding:.6rem .9rem;font-weight:600;box-shadow:var(--shadow)}
button:disabled{opacity:.6;cursor:not-allowed}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:#fff}
label{display:block;margin:.4rem 0 .25rem;font-weight:600}
section{
  width: 100%;
  margin: 15px 0;
  background:#fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px clamp(16px, 2vw, 22px);
}
table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
thead {background: #f8fafc;font-weight: 600;}
thead th {
  text-align: left;
  font-size: 14px;
  padding: 10px 12px;
}
td {
  padding: 10px 12px;
  border-top: 1px solid #f0f2f4;
  font-size: 14px;
}
tbody tr:hover {
  background: #fcfdfd;
}
td.play{
  width: 15%;
}
ul{list-style: circle;
font-size: 14px;}

/****************/
/*****Header*****/
/****************/

header{background:#fff;border-bottom:1px solid var(--line)}
header .container{display:flex;gap:12px;align-items:center}
header a{padding:.4rem .6rem;border-radius:8px; font-weight: 700;}
header a:hover{background:#f1f5f9}


/* Header barre active, si besoin */
.site-header .nav a.active { color: var(--color-primary); }
/* Logos / barre du haut */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10000;
}
.site-header .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-wrap: wrap;
}
.brand a:hover{
  background: transparent;
}
.logo { display:block; height: 34px; width: auto; }
.logo-ijf { filter: none; }
.logo-ijc { filter: none; }

@media (max-width: 640px){
  .logo { height: 28px; }
}


/* Bouton burger masqué en desktop */
.nav-toggle {
  display: none;
  position: relative;
  width: 42px; height: 38px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 10px;
}
.nav-toggle:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 50%, #ffffff); outline-offset: 2px; }
.nav-toggle-bar {
  display: block;
  width: 24px; height: 2px; margin: 5px auto;
  background: #00406B; transition: transform .2s ease, opacity .2s ease;
}

/* Menu nav (desktop) */
.nav-menu {
  display: flex; gap: 12px; align-items: center;
}

/* Mobile: burger visible, nav en panneau coulissant */
@media (max-width: 768px){
  .nav-toggle { display: inline-block; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; /* full height, collé à droite */
    width: min(78vw, 340px);
    transform: translateX(100%);
    transition: transform .25s ease;
    background: #fff; box-shadow: -16px 0 40px rgba(0,0,0,.18);
    padding: 18px 16px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 70;
  }
  .nav-menu a {
    width: 100%;
    padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: #fff; font-weight: 700;
  }
  .nav-menu a.active {
    background: color-mix(in srgb, var(--color-primary) 14%, white);
    color: var(--color-primary);
  }

  /* Backdrop */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.35);
  }
  /* Panneau ouvert */
  body.nav-open .nav-menu { transform: translateX(0); }

  /* Anim du burger → croix */
  body.nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
  body.nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}


/****************/
/******Hero******/
/****************/

.hero{
  background: radial-gradient(160% 120% at 20% 0%, #7B3290 0%, var(--violet) 55%, var(--violet-700) 100%);
  border-radius: var(--radius-xl);
  color:#fff;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero_inner{
  max-width: 1100px;
  margin:0 auto;
  display:grid; grid-template-columns: 1.1fr .9fr;
  align-items:center;
  column-gap: 32px;
  padding: 42px clamp(22px, 4vw, 46px);
}
.hero_left h1{
  margin:0 0 30px;
  font-weight: normal;
  font-size: 4em;
  line-height: 1.1;
  letter-spacing: .2px;
}
.hero_left span{ margin: 0 0 18px; opacity: .95; font-weight: bold;}
.btn.primary.hero__cta{
  --py: 14px; --px: 24px;
  padding: 10px 20px;
  font-size: 16.5px; font-weight: 700; letter-spacing: .2px;
  background: var(--violet-700) !important;
  color:#fff; box-shadow: var(--shadow-md);
  border-radius: 999px; display:inline-flex; align-items:center; gap:10px;
}
.btn.primary.hero__cta:hover{
  background: #fff !important;
  color: var(--violet-700) !important;
}
.hero_right{
  width:min(520px, 100%); aspect-ratio: 16/10;
  border-radius: 250px 100px 250px 80px; overflow:hidden; background:#111;
  box-shadow: var(--shadow-md);
  transform: perspective(1100px) rotateY(-7deg) rotateX(2deg);
}
.hero_right img{ width:100%; height:100%; object-fit: cover; }

.hero__visual{ display:flex; justify-content:center; }

/*.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:54px;
  background: radial-gradient(90% 120% at 20% 0%, rgba(255,255,255,.95), rgba(255,255,255,1) 60%);
}*/

@media (max-width: 800px) {
  .hero_left h1{ font-size: 2em; }
}

/****************/
/****Accueil*****/
/****************/

.accueil_blocs{
  max-width: 1100px;
  margin: 8px auto 22px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.accueil_blocs>div{
  display: flex;
  margin: 10px;
  background:#fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px clamp(16px, 2vw, 22px);
  justify-content: space-between;
}

.accueil_blocs ul{
  list-style: circle; padding:0; margin:0;
}
.accueil_blocs li{
   align-items:center; gap:10px; margin:8px 15px;
}
.accueil_blocs li::marker{
  color: var(--color-primary);
}

@media (max-width: 800px) {
  .accueil_blocs { grid-template-columns: 1fr; }
}
.column2_3{width: 66%;}
.accueil_blocs>div img{width: 30%; height: auto; margin: auto;}

.accueil_top{
  /*ax-width: 1100px;
  margin: 12px auto 34px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--violet-300) 60%, var(--violet-700) 100%);
  border-radius: var(--radius);
  padding: 18px clamp(16px, 2vw, 26px);
  color:#fff; box-shadow: var(--shadow-md);*/
}
/*.accueil_top table{
  background: inherit;
}


.accueil_top tbody tr:hover{
  background: inherit;
}*/
/*.accueil_top .rank-cell{
  color: #fff;
}*/
.accueil_intro{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.accueil_intro .podium-card{height: 240px;}
@media (min-width: 800px) {
  .accueil_intro>div:first-child { width:30%; }
  .accueil_intro .podium { width:66%; }
}


.accueil_feedback{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 800px) {
  .accueil_feedback table { width:48% }
}


/****************/
/*****Profil*****/
/****************/
#registerForm{
  display: flex;
  flex-direction: column;
}
#registerForm button{
  align-self: center;
}

#registerForm input{
  width: 200px;
}
#suppr_me{
  margin-top: 10px;
}
/****************/
/*****Jouer******/
/****************/

.card_quest{
  background:#fff;
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
}
.card_quest_bandeau{
  background:var(--color-primary);
  min-height: 10px;
  border-radius:var(--radius);
}
.card_quest:nth-child(odd) .card_quest_bandeau,
.card_quest:nth-child(odd) .badge-cat,
.card_quest:nth-child(odd) button.btn.accent.btnQuestFeedback,
.card_quest:nth-child(odd) a.secondary{
  background:var(--color-secondary)!important;
}
.card_quest:nth-child(odd) a.secondary:hover,.card_quest:nth-child(odd) button.btn.accent.btnQuestFeedback:hover{background: #f1f5f9 !important;color: var(--color-secondary)!important;}
.card_quest:nth-child(odd) .badge-diff{
  background: color-mix(in srgb, var(--color-secondary) 16%, white);
}
.card_quest:nth-child(odd) a.tuto{
  color: var(--color-secondary);
}
.card_quest .time::before{
  content: '\0023F1';
  margin-right: 10px;
}
.card_quest .score::before{
  content: '\01F396';
  margin-right: 10px;
}
.card_quest .tuto::before{
  content: '\27A3';
  margin-right: 10px;
}
.card_quest .play::before{
  content: '\27A4';
  margin-right: 10px;
}
button.btn.accent.btnQuestFeedback{background:var(--color-primary) !important;}

.card-quest{border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.badge{display:inline-block;background:#eef2f7;color:#334155;border-radius:999px;padding:2px 8px;font-size:12px}
.caption{font-size:12px;color:var(--muted)}
/* Carte quête */
.quest-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 12px;
  border: 2px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow:var(--shadow-sm);
}
.quest-card__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 4px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.04);
}
.badge-cat{
  background: var(--color-primary);
  color: #fff;
}
.badge-diff{
  background: color-mix(in srgb, var(--color-primary) 16%, white);
}
.card_quest h3{
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  height: stretch;
}
.quest-card .actions{
  margin-top: auto; display:flex; gap: 8px; flex-wrap: wrap;
}
.quest-card.done{ border-color: color-mix(in srgb, var(--color-primary) 25%, white); }
.quest-card.available{ border-color: color-mix(in srgb, var(--color-secondary) 25%, white); }



#section-global .row{
  grid-template-columns: 56px 1fr 1fr 180px 120px 80px 80px;
}
#section-quest .row{
  grid-template-columns: 56px 1fr 1fr 180px 120px 120px;
}
#section-global .admin .row{
  grid-template-columns:80px 56px 1fr 1fr 180px 120px 80px 80px 80px;
}
#section-region .row{
  grid-template-columns: 56px 1fr 120px 120px 120px;
}
.row p,td p{
  margin: 0;
}

@media(max-width:720px){
  #section-global .row{grid-template-columns:48px 1fr 1fr 80px 80px}
  #section-quest .row{grid-template-columns:48px 1fr 1fr 90px}
  #section-global .admin .row{grid-template-columns:50px 48px 1fr 1fr 80px 80px 60px}
  #section-region .row{grid-template-columns: 56px 1fr 70px 70px 70px;}
  .hide_medium{display:none}
}
@media(max-width:480px){
  #section-global .row{grid-template-columns:48px 1fr 80px}
  #section-quest .row{grid-template-columns:48px 1fr 90px}
  #section-global .admin .row{grid-template-columns:30px 40px 1fr 80px 50px}
  #section-region .row{grid-template-columns: 56px 1fr 80px;}
  .hide_small{display:none}
}

.bubble{
  font-weight: 500;
  padding: 10px;
  width: fit-content;
  border-radius: var(--radius);
  font-size: 10px;
}
.bubble_primary{
  background: color-mix(in srgb, var(--color-primary) 20%, white);
  color: var(--color-primary);
  /*border: var(--color-primary) 1px solid;*/
}
.bubble_secondary{
  background: color-mix(in srgb, var(--color-secondary) 20%, white);
  color: var(--color-secondary);
  /*border: var(--color-secondary) 1px solid;*/
}
.bubble_top:before{
  content: '\2605';
  margin-right: 5px;
}
.bubble2{
  font-weight: 700;
  padding: 10px;
  width: fit-content;
  border-radius: var(--radius);
  background:var(--color-primary);
  color:white;
}



.top{font-weight: 600;}


/****************/
/***Palmarès*****/
/****************/
.suppr_user_on_click{justify-self: right;font-size: 20px;}
.info{font-size: 20px;}


.container{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}





.tabs{display:flex;gap:6px;margin:8px 0 16px;flex-wrap:wrap;font-family:Poppins;}
.tab{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff;cursor:pointer;color:var(--brand)}
.tab:hover{background:#f1f5f9}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.list{display:grid}
.row{display:grid;grid-template-columns:56px 1fr 1fr 120px;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}
.row.head{font-weight:600;background:#f8fafc;border-top-left-radius:12px;border-top-right-radius:12px}
.row.me{background:#f0f9ff}
.rank{font-variant-numeric:tabular-nums;text-align:right}
.score{font-variant-numeric:tabular-nums}
.sticky-me{position:sticky;bottom:0}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
select,.btn{font-family:Poppins;padding:8px;border:1px solid var(--line);background:#fff;color:var(--brand);cursor:pointer}
.btn.primary{background:var(--brand);color:#fff}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:8px}
.pager a{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.pager .current{font-weight:700}
.medal{font-size:18px}

.barlist{display:grid;gap:8px}
.barrow{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:10px}
.bar{height:10px;border-radius:999px;background:var(--color-primary);}
.barwrap{background:#f1f5f9;border-radius:999px;overflow:hidden}



.wrap{display:grid;gap:12px}
.meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.canvas{position:relative;max-width:900px}
.canvas img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.cross{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none}
.cross::before,.cross::after{content:'';position:absolute;left:50%;top:50%;background:var(--danger)}
.cross::before{width:2px;height:18px;transform:translate(-50%,-50%) rotate(45deg)}
.cross::after{width:2px;height:18px;transform:translate(-50%,-50%) rotate(-45deg)}
.flash{animation:pop .22s ease}
@keyframes pop{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1);opacity:1}}

.stack{display:grid;gap:12px}
.msg{border-left:4px solid var(--accent);padding:10px 12px;background:#f9fafb;border-radius:8px}
.meta-line{font-size:12px;color:#475569;margin-bottom:6px}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:8px 0}

.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;padding:8px 12px;border-radius:8px;margin-bottom:10px}
.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:8px 12px;border-radius:8px;margin-bottom:10px}
.success{background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe;padding:8px 12px;border-radius:8px;margin-bottom:10px}

@media(max-width:720px){
  .row{grid-template-columns:48px 1fr 100px 90px}
  .hide-sm{display:none}
}

/* --- Modal (auth) --- */
[hidden]{display:none !important;}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:#fff;border-radius:12px;padding:16px;width:min(420px,92vw);box-shadow:var(--shadow);border:1px solid var(--line)}
.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal header h3{font-size:1.2rem;margin:0}
.modal .close{border:0;background:transparent;font-size:20px;cursor:pointer;color:#475569}
.modal form{display:grid;gap:8px}



.modal_c[aria-hidden="true"] { display:none; }
.modal_c {
  position: fixed; inset: 0; z-index: 60;
}
.modal-backdrop_c {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
}
.modal-dialog {
  position: relative;
  background: #fff; max-width: 560px; margin: 10vh auto; padding: 18px;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-close {
  position:absolute; top:10px; right:10px; border:0; background:transparent; font-size:22px; cursor:pointer;
}
.modal-dialog h3 { margin: 0 0 10px; color: var(--color-primary); }
.modal-dialog textarea { width: 100%; resize: vertical; padding: 10px; border-radius: 10px; border:1px solid #e5e7eb; }
.modal-actions { display:flex; gap:10px; margin-top: 10px; }
.quest-feedback-cta { margin-top: 12px; }





/* ===== Play page refinements ===== */
.play-wrap{display:grid;gap:14px}
.play-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.play-badge{display:inline-flex;align-items:center;gap:6px;background:#00406B; color:#fff; border-radius:999px; padding:4px 10px; font-size:12px}
.play-badge .num{font-weight:700}
.canvas{position:relative;max-width:980px;margin-top:4px}
.canvas img{display:block;max-width:100%;height:auto;border-radius:14px;border:1px solid #dbe3ea;box-shadow:0 10px 24px rgba(0,34,68,.08)}
.cross::before,.cross::after{background:#E73E22}
.flash{animation:pop .18s ease}

/* ===== Admin Quest Builder ===== */
.builder-controls{display:flex;gap:10px;align-items:center;margin:10px 0 6px}
.btn{padding:8px 12px;border:1px solid var(--line);background:#fff;color:var(--brand);cursor:pointer;box-shadow:var(--shadow)}
/*.btn:hover{background:#f1f5f9}*/
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.accent{background:#00ACA7;color:#04353a;border-color:#00ACA7}
#stepsContainer{display:grid;gap:12px}
.step-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;gap:10px}
.step-head{display:flex;align-items:center;gap:10px}
.drag-handle{cursor:grab;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:6px 10px;font-size:12px;color:#0f3a58}
.drag-handle:active{cursor:grabbing}
.step-body{display:grid;gap:10px}
.step-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.step-grid{grid-template-columns:1fr}}
.preview{position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#f8fafc;min-height:180px;display:flex;align-items:center;justify-content:center}
.preview img{max-width:100%;height:auto;display:block}
.hotspot{position:absolute;border:2px dashed #00ACA7;border-radius:6px;background:rgba(0,172,167,0.08);pointer-events:none}
.field-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.field-row label{font-size:12px;color:#475569;margin:0}
.field-row input{font-variant-numeric:tabular-nums}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .btn.danger{background:#fff;color:#9b1c1c;border-color:#fecaca}
.filename{font-size:12px;color:#475569}
.hidden{display:none !important}

/* custom file input */
.file-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.file-row input[type=file]{display:none}
.file-row .choose{}


/* ===== Admin Quest Builder (layout recentré) ===== */
.builder-controls{display:flex;gap:10px;align-items:center;margin:10px 0 6px}
.btn{padding:8px 12px;border:1px solid var(--line);background:#fff;color:var(--brand);cursor:pointer;box-shadow:var(--shadow)}
/*.btn:hover{background:#f1f5f9}*/
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.accent{background:#00ACA7;color:#04353a;border-color:#00ACA7}
#stepsContainer{display:grid;gap:12px}
.step-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;gap:12px}
.step-head{display:flex;align-items:center;gap:10px}
.drag-handle{cursor:grab;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:6px 10px;font-size:12px;color:#0f3a58}
.drag-handle:active{cursor:grabbing}

/* Nouvelle structure: preview centré + champs dessous */
.step-body{display:grid;gap:12px;justify-items:center}
.preview{position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#f8fafc;min-height:220px;max-width:900px;width:100%;display:flex;align-items:center;justify-content:center}
.preview img{max-width:100%;height:auto;display:block}
.hotspot{position:absolute;border:2px dashed #00ACA7;border-radius:6px;background:rgba(0,172,167,0.08);pointer-events:none}
.filename{font-size:12px;color:#475569}

/* Coordonnées sous l’image, centrées */
.coords{display:grid;grid-template-columns:repeat(4,120px);gap:8px;justify-content:center}
.coords label{font-size:12px;color:#475569;margin:0}
.coords input{font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:720px){.coords{grid-template-columns:repeat(2,120px)}}

.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.actions .btn.danger{background:#fff;color:#9b1c1c;border-color:#fecaca}

/* Meilleur contraste pour le bouton ajouter */
#addStepBtn.btn.primary{background:#5E1664;border-color:#5E1664}

/* Empêche le drag natif de l'image et capte bien les gestes */
.preview { cursor: crosshair; touch-action: none; }
.preview img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* les événements arrivent au conteneur .preview */
}

/* Le dessin se fait dans un wrapper qui match exactement la taille affichée de l'image */
.img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;          /* pas d'espace fantôme */
}
.img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;    /* les events vont sur .overlay */
}
.img-wrap .overlay {
  position: absolute;
  inset: 0;                /* taille exacte de l'image affichée */
  cursor: crosshair;
  touch-action: none;
}
.img-wrap .hotspot {
  position: absolute;
  border: 2px dashed #00ACA7;
  border-radius: 6px;
  background: rgba(0,172,167,0.08);
  pointer-events: none;
}

/* Footer minimal & responsive */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.site-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  justify-content: space-between;
}
.site-footer .footer-copy {
  color: #605F51; /* gris chaud de ta charte */
  font-size: 14px;
}
.site-footer .footer-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.site-footer .footer-nav a {
  font-size: 14px;
  text-decoration: none;
  color: #00406B; /* bleu nuit */
}
.site-footer .footer-nav a:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .site-footer .footer-inner { padding: 16px 12px; }
  .site-footer .footer-nav { gap: 8px; }
}

/* Grids */
/*.home-section {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 12px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  font-weight: 800;
  color: #00406B;
}
.section-title .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00ACA7;
}*/

/* Scoreboard */
.card-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

.player-card {
  grid-column: span 3;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  border: 2px solid rgba(0,0,0,.04);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 6px;
}
.player-card .rank {
  font-weight: 800;
  color: #5E1664;
  font-size: 13px;
  letter-spacing: .3px;
}
.player-card .name {
  font-weight: 700;
  font-size: 16px;
  color: #00406B;
}
.player-card .score {
  margin-top: 4px;
  font-size: 14px;
  color: #605F51;
}
.player-card.top1 { border-color: #FBBA00; }
.player-card.top2 { border-color: #1DA5D1; }
.player-card.top3 { border-color: #EF7875; }

/* Dernières runs */
.runs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.run-item {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  border-left: 6px solid #00ACA7;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}
.run-item .user { font-weight: 700; color: #007883; }
.run-item .quest { color: #5E1664; font-weight: 600; }
.run-item .score { color: #EA5B0C; font-weight: 700; }
.run-item .time { color: #00406B; font-weight: 600; }
.run-item .date { color: #605F51; font-size: 13px; }

/* Mini badge “En direct” */
.live-badge {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: #0DAE8E; color: #fff; font-weight: 700; font-size: 13px;
}
.live-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #FBBA00; animation: pulse 1.3s infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.25); opacity: .5; }
  100% { transform: scale(1); opacity: .9; }
}

/* Petits helpers */
.text-muted { color: #605F51; }
.center { text-align: center; }


/* Variables par thème : une principale et une secondaire */
:root {
  --color-primary: #5E1664;   /* défaut = violet */
  --color-secondary: #EA5B0C; /* défaut = orange */
  --color-ink: #00406B;       /* bleu nuit pour textes/accents */
}

/* Thèmes */
.theme-guest  { --color-primary: #5E1664; --color-secondary: #EA5B0C; } /* violet / orange */
.theme-admin  { --color-primary: #605F51; --color-secondary: #1DA5D1; } /* gris chaud / presque cyan */
.theme-player { --color-primary: #00ACA7; --color-secondary: #EF7875; } /* bleu / rose */

/* Boutons génériques (si déjà définis, celles-ci surchargent légèrement) */
.btn.primary {
  background: var(--color-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/*.btn.primary:hover { filter: brightness(0.96); }*/

.btn.accent {
  background: var(--color-secondary) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/*.btn.accent:hover { filter: brightness(0.96); }*/

/* Liens actifs ou éléments UI secondaires */
a, .link { color: var(--color-primary); }


/* Cartes & petites touches colorées */
.player-card .rank { color: var(--color-secondary); }
.player-card.top1 { border-color: #FBBA00; }
.player-card.top2 { border-color: #1DA5D1; }
.player-card.top3 { border-color: #EF7875; }

.run-item { border-left-color: var(--color-primary); }
.run-item .user  { color: var(--color-primary); }
.run-item .score { color: var(--color-secondary); }







.tabs { display:flex; gap:10px; margin: 8px 0 12px; font-family:Poppins;}
.tabs .tab { font-family:Poppins;padding:8px 12px; border-radius:12px; text-decoration:none; background:#fff; border:1px solid #e5e7eb; color:#00406B; }
.tabs .tab.active { background: var(--color-primary); color:#fff; border-color: transparent; font-family:Poppins;}

.admin-msgs { display:flex; flex-direction:column; gap:12px; }
.msg-card { background:#fff; border-radius:14px; padding:12px 14px; border-left:6px solid var(--color-primary); box-shadow:0 6px 16px rgba(0,0,0,.05); }
.msg-card .meta { color:#605F51; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.msg-card .meta .dot { width:8px; height:8px; background: var(--color-secondary); border-radius:50%; display:inline-block; }
.msg-card .quest-tag { color:var(--color-secondary); margin-bottom:6px; font-weight:600; }
.msg-card .body { white-space:pre-wrap; }


.msg-card.unread { border-left-color: var(--color-secondary); box-shadow: 0 8px 18px rgba(239,120,117,.08); }
.badge-new {
  display:inline-flex; align-items:center; gap:6px;
  background: var(--color-secondary); color:#fff; font-weight:700;
  padding: 2px 8px; border-radius: 999px; font-size: 12px;
}
.read-toggle input[type="checkbox"] { transform: translateY(1px); }


/* ---- Flou des noms pour les invités ---- */
body.guest .blur-if-guest {
  filter: blur(4px);
  pointer-events: none;    /* empêche la sélection du texte */
  user-select: none;
  transition: filter .25s ease;
}

.radio-group {display:flex;gap: 10px;align-items: center;}
.radio-group input {width: fit-content;}



/* Grille des quêtes (si pas déjà) */
.quests-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.quests-grid .quest-card { grid-column: span 3; }
@media (max-width: 1000px){ .quests-grid .quest-card { grid-column: span 4; } }
@media (max-width: 720px) { .quests-grid .quest-card { grid-column: span 6; } }
@media (max-width: 520px) { .quests-grid .quest-card { grid-column: span 12; } }



.btn.external svg {
  margin-left: 6px;
  vertical-align: -2px;
}

.flex_between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}






/* ===== Podium Top 3 ===== */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 14px;
  align-items: center;
  margin: 20px 0;
}
.podium-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 16px 14px 14px;
  /*border: 2px solid rgba(0,0,0,.05);*/
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 160px;
  height: 200px;
}
.podium-card .podium-badge {
  font-size: 25px;
  position: absolute; top: 10px; right: 10px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.podium-card .name {
  font-weight: 600; color: var(--color-ink);
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 22px 0 0;
}
.podium-card .meta {
  font-size: 13px; color: #605F51;justify-content: center;
}
.podium-card .scoreline {
  margin-top: auto;
  font-size: 15px; color: var(--color-primary);
}
.podium .name, .podium .scoreline{
  color: var(--violet);
}
.podium .region{
  font-weight: 500;
  padding: 7px;
  font-size: 10px;
  width: fit-content;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: white;
}
.podium-card.rank1{
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-300) 60%, var(--violet-700) 100%);
}
.podium-card.rank1 .name, .podium-card.rank1 .scoreline{
  color: white;
}

/* Variations de hauteur pour l’effet podium */
.podium-card.rank1 { transform: translateY(-8px); }
.podium-card.rank2 { transform: translateY(8px); }
.podium-card.rank3 { transform: translateY(12px); }

/* Bordures colorées (thème) */
/*.podium-card.rank1 { border-color: color-mix(in srgb, var(--color-primary) 28%, white); }
.podium-card.rank2 { border-color: color-mix(in srgb, var(--color-secondary) 26%, white); }
.podium-card.rank3 { border-color: color-mix(in srgb, var(--color-primary) 18%, white); }*/

/* ===== Tableau Top 10 ===== */
.top10-wrap { margin-top: 6px; }
.top10-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.top10-table thead th {
  text-align: left;
  font-size: 13px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, #f9fafb);
  color: #00406B;
}
.top10-table td {
  padding: 10px 12px;
  border-top: 1px solid #f0f2f4;
  font-size: 14px;
}
.top10-table tbody tr:hover {
  background: #fcfdfd;
}
/*.rank-cell { width: 70px; font-weight: 800; color: #5E1664; }*/

/* Responsive */
@media (max-width: 800px) {
  /*.podium { grid-template-columns: 1fr; }*/
  /*.podium-card.rank1,
  .podium-card.rank2,
  .podium-card.rank3 { transform: none; }*/
}







/* Overlay de démarrage */
.start-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #F7F5FE;
  cursor: pointer;
  border-radius: 12px;
  pointer-events:auto;
}
.end_overlay{
  position: absolute;
  z-index: 30;
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #F7F5FE;
  cursor: initial;
  border-radius: 12px;
}
.start-overlay-inner, .end_overlay_inner {
  text-align: center;
  color: var(--brand);
  /*padding: 18px 20px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);*/
}
.end_overlay_inner{font-size: clamp(18px, 2.6vw, 24px);}
.start-title {
  font-weight: 900;
  font-size: clamp(18px, 2.6vw, 24px);
  margin-bottom: 6px;
}
.start-sub {
  opacity: 0.95;
  margin-bottom: 8px;
  font-size: 14px;
}
.start-hint {
  font-size: 13px;
  opacity: 0.85;
}

.mockup-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f7f9;
  touch-action: none; /* autorise pinch-zoom / panning custom */
}
.mockup-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  z-index:1;
}

.mockup-stage img { 
  display: block;
  max-width: none; /* on gère l’échelle via transform */
  user-select: none;
  pointer-events: none; /* clics captés par le container */
}

/* Marqueur de clic (croix rouge) placé dans le stage */
.click-marker {
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.click-marker::before, .click-marker::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; background: #E73E22;
  transform-origin: center;
}
.click-marker::before { transform: translate(-50%,-50%) rotate(45deg); }
.click-marker::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* Contrôles */
.zoom-controls {
  position: absolute; right: 10px; bottom: 10px; z-index: 20;
  display: inline-flex; align-items: center; gap: 8px;
  pointer-events:auto;
  background: rgba(255,255,255,.9);
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 6px 8px; box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.zoom-controls button {
  min-width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
  font-weight: 800;color:black;padding: 5px;
}
.zoom-controls #zoomLevel { min-width: 52px; text-align: center; font-weight: 700; color: #00406B; }

/* Curseur “main” pendant le pan */
.mockup-container.panning { cursor: grabbing; }


/* Le wrap DOIT avoir une hauteur : on fige un ratio 16:9 */
.canvas-wrap.mockup-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  overflow: hidden;
  background: #f6f7f9;
  touch-action: pan-y;
  box-sizing: border-box;
}

/* Le canvas s’étire visuellement (on garde ses pixels internes) */
#stage {
  width: 100%;
  height: 100%;
  display: block;
}
.stage{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:16px;box-shadow:0 6px 16px rgba(2,6,23,.08);justify-self: center;width: 100%;}
@media (min-width: 780px) {
  .stage.portrait { width:600px; }
}
@media (min-width: 1000px) {
  .stage.portrait { width:500px; }
}
/* Le feedback (croix rouge) ne doit PAS bloquer les clics */
.feedback { position:absolute; inset:0; z-index:10; pointer-events:none; }
.feedback .cross { pointer-events:none; }

#wrap { position: relative; overflow: hidden; }

.zoom-controls * { pointer-events:auto; }

.zoom-controls { position: absolute; right: 10px; bottom: 10px; z-index: 20; pointer-events: auto; }


.form-error {
  background: #FCE8E6;
  color: #B00020;
  border: 1px solid #F5C2C0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}