/*VERSION 4*/

:root{
 --bg:#f4f6f8; --text:#111827; --primary:#1d4ed8; --success:#15803d; --danger:#b91c1c;
 --warning:#f59e0b; --border:#d1d5db; --card:#ffffff; --gray:#e5e7eb;
 --vote-color:#7B9DD2; --vote-blanc:#FFA500; --vote-nul:#FF6347; --vote-vide:#FF4500; 
}
body{margin:0;font-family:Arial;background:var(--bg);color:var(--text);}
header{background:white;padding:12px;display:flex;justify-content:space-between;border-bottom:2px solid var(--border);}
h1{font-size:24px;margin:0;text-align:center;width: 55%;}
#saveStatus{ text-align:center; font-size:14px; font-weight:bold; color:#15803d; margin-top:6px; }

.container{max-width:1200px; margin:auto; padding:20px;}

.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:10px;}
input, select { width: 95%; padding:10px; margin-top:4px; border:1px solid var(--border); border-radius:6px; }
button{margin-top:10px;padding:12px;border-radius:10px;border:none;cursor:pointer; transition:0.2s;}
button:hover{opacity:0.9;}
.btn-primary{background:var(--primary);color:white;}

.vote-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.vote-btn{
  height:180px;
  font-size:22px;
  border:2px solid var(--border);
  background:white;
  border-radius:12px;
  transition:0.2s;
  font-weight:bold;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  min-width:260px;
}

.vote-btn span{font-size:42px;display:block;margin-top:10px;font-weight:bold;}
.vote-btn:active{transform:scale(0.98); opacity:0.8;}
.hidden{display:none;}
#error{color:red;margin-top:10px;font-weight:bold;}
.list-item{display:flex;gap:6px;margin-top:6px;align-items:center;position:relative;cursor:pointer;}
.list-item input{flex:1;}
#moveMessage{ position:absolute; top:-25px; left:0; right:0; text-align:center; color:#1d4ed8; font-weight:bold; font-size:14px; display:none; }
/*#log{height:120px;overflow:auto;background:white;border:1px solid #ccc;padding:5px;font-size:12px;}*/
#coherence{font-weight:bold;padding:0 0 0 10px;}
#summary{ background:#e0f2fe; border:1px solid #60a5fa; padding:20px; border-radius:8px; margin:10px auto;
 max-width:55%; font-size:18px; text-align:center; font-weight:bold; }
#dashboard{display:flex;gap:20px;flex-wrap:wrap;}
#dashboard .card{flex:1; min-width:200px;}
#remaining-coherence{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:26px;font-weight:bold;color:#1d4ed8;}
.progress-bar-container{background:var(--gray);border-radius:8px;overflow:hidden;height:24px;margin-top:4px;}
.progress-bar{height:24px;text-align:right;color:white;padding-right:5px;line-height:24px;font-weight:bold;border-radius:6px;transition:width 0.5s;}
#footerLogo .text-center { line-height: 1.2; }
#resetBtn, #pdfBtn{ background:#9ca3af; cursor:not-allowed; color:white; }
#resetBtn.enabled{ background:#b91c1c; cursor:pointer; }
#pdfBtn.enabled{ background:#15803d; cursor:pointer; }
#closeBtn{ background:#9ca3af; cursor:not-allowed; color:white; }
#closeBtn.enabled{ background:#1d4ed8; cursor:pointer; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.vote-btn.flash {
  transform: scale(0.95);
  filter: brightness(1.3);
}

/* ===================================================== */
/* 🔽 AJUSTEMENT SPÉCIFIQUE MODE DÉPOUILLEMENT UNIQUEMENT */
/* ===================================================== */

#vote .vote-grid{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

#vote .vote-btn{
  height:110px;
  font-size:16px;
  min-width:180px;
}

#vote .vote-btn span{
  font-size:26px;
  margin-top:6px;
}


.form-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 15px;
  align-items: center;
  margin-top: 15px;
}

.form-grid label {
  font-weight: 600;
  text-align: right;
}

/*.form-grid input,*/
.form-grid select {
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.stat-name{
  flex:2;
  min-width:0;

  font-weight:bold;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stat-value{
  flex:0 0 60px;
  text-align:right;
  font-weight:bold;
}

.stat-bar-container{
  flex:1;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  height:20px;
  position:relative;
  min-width:120px;
}

.stat-bar {
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 11px;
  font-weight: bold;
  color: white;
  padding-right: 6px;
  transition: width 0.3s ease;
}

.stat-head{
  display:flex;
  align-items:center;
  gap:10px;

  flex:0 0 320px;

  box-sizing:border-box;
  padding:4px 10px;
}

#container-setup {
  max-width:1200px;   /* largeur actuelle  */
  margin: auto;
}

#container-vote {
  max-width:1200px;	/* largeur actuelle  */
  margin: auto;
}

#setup{
  position:relative;
}

#resetSetupBtn{
  position:absolute;
  bottom:10px;
  right:10px;

  font-size:11px;
  padding:4px 8px;

  background:#e5e7eb;
  color:#6b7280;

  border:none;
  border-radius:6px;

  cursor:pointer;

  opacity:0.45;
}

#resetSetupBtn:hover{
  opacity:1;
}


#title{
  margin:0;
  width:100%;
  text-align:left;

  font-size:28px;
  font-weight:bold;
  color:#242423;

  line-height:1.2;
}

.main-header{
  display:flex;
  justify-content:center;   /* centre horizontal */
  align-items:center;       /* centre vertical */
  padding:16px 20px;
  background:white;
  border-bottom:2px solid var(--border);
}
/* =========================
   MESSAGE LÉGAL
========================= */

.legal-warning{
  text-align:center;
  font-size:18px;
  color:#b91c1c;
font-weight:bold;

  /*margin-top:5px; */
  margin-bottom:10px;

  line-height:1.5;
}

/* =========================
   FOOTER
========================= */

.app-footer{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:16px;

  padding-top:12px;
  padding-bottom:20px;

  border-top:1px solid #d1d5db;

  flex-wrap:wrap;
}

#logoImage{
  width:50px;
  height:50px;

  object-fit:contain;
}

.credit-ia{
  font-size:14px;
  line-height:1.4;
  color:#374151;
}