/* ============================================================================
 * Fichier : /style.css
 * Créé le : 2026-03-16 16:15 (Europe/Zurich)
 *
 * Objectif :
 * - Interface noire, sobre, alignée avec le flyer Mecabatt
 * - Responsive public + admin
 * ========================================================================== */

:root{
  --bg:#000000;
  --card:#101010;
  --card-soft:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.72);
  --green:#95c11f;
  --green-dark:#719d10;
  --danger:#cf5b64;
  --danger-bg:rgba(207,91,100,.14);
  --success:#8cc63f;
  --success-bg:rgba(140,198,63,.14);
  --radius:18px;
  --shadow:0 18px 42px rgba(0,0,0,.48);
  --max:1080px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

a{color:inherit;text-decoration:none;}
strong{color:rgba(255,255,255,.92);}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:22px 18px 26px;
}

.wrap--admin-login{
  max-width:720px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:6px 0 18px;
}

.brand{
  min-width:0;
}

.brand--header{
  display:flex;
  align-items:center;
}

.logo{
  width:min(460px, 72vw);
  height:auto;
  display:block;
}

.titles .h1{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.03em;
}

.titles .sub{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(300px, .8fr);
  gap:18px;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.inner{padding:20px;}

.bigdate{
  font-size:clamp(32px, 5vw, 48px);
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
  margin:0 0 10px;
}

.place{
  font-size:18px;
  font-weight:750;
  color:rgba(255,255,255,.90);
  margin:0 0 18px;
}

h2{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}

p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.5;
}

.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.form--inner{
  grid-template-columns:1fr;
}

.full{grid-column:1 / -1;}

label{
  display:block;
  margin:0 0 7px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
}

input{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus{
  border-color:rgba(149,193,31,.7);
  box-shadow:0 0 0 4px rgba(149,193,31,.14);
  background:rgba(255,255,255,.05);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:13px 16px;
  border-radius:14px;
  font-size:15px;
  font-weight:850;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.primary{
  background:linear-gradient(180deg, var(--green), var(--green-dark));
  color:#0c1203;
}

.btn.ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid var(--stroke);
}

.alert,
.success,
.note{
  border-radius:14px;
  padding:11px 13px;
}

.alert{
  border:1px solid rgba(207,91,100,.45);
  background:var(--danger-bg);
  color:rgba(255,255,255,.94);
  margin-bottom:12px;
}

.success{
  border:1px solid rgba(140,198,63,.45);
  background:var(--success-bg);
  color:rgba(255,255,255,.94);
  margin-bottom:12px;
}

.note{
  border:1px dashed rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
}

.note--tight{
  margin-top:12px;
}

.small{
  font-size:12px;
  color:var(--muted);
}

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.choice-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.choice-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.choice-card input{
  width:auto;
  margin:0;
  padding:0;
  box-shadow:none;
  accent-color:var(--green);
}

.choice-card span{
  font-weight:800;
  color:rgba(255,255,255,.92);
}

.choice-card.active{
  border-color:rgba(149,193,31,.72);
  box-shadow:0 0 0 4px rgba(149,193,31,.12);
  background:rgba(149,193,31,.06);
}

.sub-block{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.025);
}

.hidden-block{display:none;}

.info-panel p:last-child{margin-bottom:0;}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:0 0 18px;
}

.stat-card .inner{
  padding:16px;
}

.stat-value{
  font-size:28px;
  font-weight:950;
  line-height:1;
  margin-bottom:8px;
}

.stat-label{
  font-size:13px;
  color:var(--muted);
}

.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius:16px;
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

.table th,
.table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
  vertical-align:top;
  font-size:13px;
}

.table th{
  color:rgba(255,255,255,.92);
  font-weight:900;
  background:rgba(255,255,255,.04);
}

.footer{
  margin:16px 0 6px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  text-align:center;
}

@media (max-width: 920px){
  .grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 640px){
  .top{align-items:flex-start;flex-direction:column;}
  .logo{width:min(420px, 88vw);}
  .form{grid-template-columns:1fr;}
  .choice-wrap{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr;}
  .btn{width:100%;}
  .actions{flex-direction:column;}
  .admin-actions{width:100%;}
  .admin-actions .btn{flex:1 1 auto;}
}


.map-box{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  background:#080808;
}

.map-box iframe{
  width:100%;
  min-height:340px;
  display:block;
}

.actions--map{
  margin-top:12px;
}

@media (max-width: 640px){
  .map-box iframe{
    min-height:280px;
  }
}


.input-error{
  border: 3px solid #ff0000 !important;
  background: rgba(255, 0, 0, .14) !important;
  box-shadow: 0 0 0 5px rgba(255, 0, 0, .22) !important;
}

.input-error:focus{
  border-color: #ff0000 !important;
  box-shadow: 0 0 0 6px rgba(255, 0, 0, .28) !important;
}

.error-msg{
  margin-top: 7px;
  color: #ff2a2a;
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 800;
}

.error-msg--strong{
  color: #ff1414;
  font-size: 0.96rem;
  text-shadow: 0 0 10px rgba(255, 20, 20, .18);
}

.choice-wrap-error{
  border: 2px solid #ff0000;
  border-radius: 14px;
  padding: 8px;
  background: rgba(255, 0, 0, .10);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, .14);
}

.choice-wrap-error .choice-card{
  border-color: rgba(255, 0, 0, .42);
}

.captcha-box{
  border-radius: 14px;
}

.captcha-error{
  border: 3px solid #ff0000;
  padding: 10px;
  background: rgba(255, 0, 0, .12);
  box-shadow: 0 0 0 5px rgba(255, 0, 0, .16);
}

.alert--strong{
  border: 2px solid #ff0000;
  background: rgba(255, 0, 0, .14);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, .14);
}

.confirmation-card{
  margin-top: 14px;
}

.confirmation-badge{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(149,193,31,.14);
  border: 1px solid rgba(149,193,31,.45);
  color: #d7f68a;
  font-weight: 900;
  margin-bottom: 16px;
}

.confirmation-title{
  margin: 0 0 12px;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.05;
}

.confirmation-text{
  font-size: 16px;
  margin-bottom: 18px;
}

.confirmation-box{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 16px;
  margin-bottom: 18px;
}

.confirmation-box p:last-child{
  margin-bottom: 0;
}

.success--big{
  font-weight: 800;
}


select,
textarea{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

select:focus,
textarea:focus{
  border-color:rgba(149,193,31,.7);
  box-shadow:0 0 0 4px rgba(149,193,31,.14);
  background:rgba(255,255,255,.05);
}

textarea{
  resize:vertical;
  min-height:92px;
}

.admin-edit-list{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.inscription-editor{
  overflow:visible;
}

.inscription-editor__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.inscription-editor__title{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  margin-bottom:6px;
}

.inscription-editor__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

.badge--green{
  background:rgba(149,193,31,.14);
  border-color:rgba(149,193,31,.45);
  color:#d7f68a;
}

.badge--warning{
  background:rgba(255,165,0,.12);
  border-color:rgba(255,165,0,.34);
  color:#ffd48a;
}

.badge--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
}

.form--admin-edit{
  align-items:start;
}

.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}

.check-row input{
  width:auto;
  margin:0;
  accent-color:var(--green);
}

.check-row span{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.actions--admin-edit{
  margin-top:8px;
}

@media (max-width: 640px){
  .inscription-editor__head{
    flex-direction:column;
  }

  .inscription-editor__badges{
    justify-content:flex-start;
  }
}