/* BASE COLOR  */
:root{
    --main-color: #1F425D;
    --second-color: #E94D1A;
    --third-color: #4AB9CF;
    --white-color: #FFFFFF;
}


* {
   box-sizing: border-box; 
   margin: 0; 
   padding: 0; 
  }


img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Body */
body { 
   height:100%;
   color:#222;
   background: #f6f8fb; 
}

/* Container */
.container 
{
  max-width:1100px; 
  margin:0 auto;
  padding:18px; 
}

/* Header */
.site-header 
  {
   background: var(--main-color);
   color:white;
   padding:20px 0; 
  }
.header-inner {

    display:flex;
    flex-direction:column; 
    gap:8px; 
    align-items:flex-start; 
  }
.header-inner h1 {
   font-size:1.6rem; 
   margin-bottom:4px; 
  }
.tagline { 
  opacity:0.95; 
  font-size:0.95rem; 
}

/* Navigation */
.main-nav { 
  display:flex;
   gap:8px; 
   margin-top:8px;
 }
.nav-btn {
  background: rgba(255,255,255,0.12);
  color:white;
  border:0;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.nav-btn.active 
{
   background:white;
   color:#0b2545;
   box-shadow:0 6px 18px rgba(11,37,69,0.08); 
}

/* Views */
.view { 
  margin-top:20px;
 }
.hidden {
   display:none; 
  }

h2{
  text-align: center;
  font-weight: 700;
  font-size: 7vh ;
  }

.content{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 14px;
  grid-row-gap: 5px;

 }
  
  .place-image { 
    grid-area: 1 / 1 / 2 / 2; 
   
  }
  .place-texte { 
    grid-area: 1 / 2 / 2 / 3; 
   
  }
  .content .place-image {
    text-align: center;
  }
  .content .place-image img {
   width: 100%;
   max-width: 360px; 
   height: auto;
   display: block;
   margin: 0 auto;
   -o-object-fit: contain;
   object-fit: contain;
  }
  .content .place-texte{

    margin-top: 6vh; 
    font-size: 17px;
  }

/* Cards and forms */
.card, .form-card { 
   background:white;
    border-radius:10px; 
    padding:16px;
    box-shadow: 0 6px 18px rgba(11,37,69,0.04);
    margin-top:12px; 
  }
.form-card label { 
  display:block;
  font-weight:600;
  margin:10px 0 6px; 
}
.form-card input[type="text"], .form-card input[type="number"], textarea 
{
  width:100%;
  padding:10px; 
  border-radius:8px;
  border:1px solid #e6eef8;

}
.form-actions {
   margin-top:12px; 
   display:flex; 
   gap:8px; 
   align-items:center; }

/* Buttons */
.btn {
  padding:8px 12px; 
  border-radius:8px;
  border:1px solid rgba(11,37,69,0.08);
  background:white; cursor:pointer;
}
.btn.primary {
 background:#0b2545; 
 color:white; 
 border:0; 
}
.btn:active {
  transform:translateY(1px);
}

/* Candidates list (vote) */
.candidates-list 
{ 
  display:flex;
  flex-direction:column;
   gap:8px; 
   margin-top:8px;
   }
.candidate-card 
{
  display:flex; 
  gap:12px; 
  align-items:center;
  border-radius:8px;
  padding:10px; 
  border:1px solid #eef6ff;
  cursor:pointer;
}
.candidate-card input[type="radio"] 
{ 
  transform:scale(1.1); 
}
.candidate-meta 
{ 
  display:flex; 
  flex-direction:column;
 }
.candidate-meta .name 
{ 
  font-weight:700; 
}
.candidate-meta .slogan 
 { 
  font-size:0.9rem; 
  color:#555; 
}

/* Results */
.results-list 
{ 
  display:flex; 
  flex-direction:column;
  gap:10px; 
  margin-top:12px; }
.result-row 
{ 
  display:flex; 
  gap:12px; 
  align-items:center; 
}
.result-info 
{
   width:220px;
   min-width:160px;
    font-weight:600;
 }
.result-bar {
  height:18px; 
  border-radius:8px;
  background:#e6eef8;
  position:relative; 
  overflow:hidden; 
  flex:1;
}
.result-fill {
  height:100%; 
  background: linear-gradient(90deg,#3b82f6,#06b6d4);
  border-radius:8px 0 0 8px;
  transition: width 400ms ease;
}
.result-count { 
  width:58px; 
  text-align:right;
  font-weight:700;
  color:#0b2545; 
}

/* Winner */
.winner-box 
{ 
  margin-top:16px; 
  padding:12px;
  border-radius:8px;
  background:#fff7ed; 
  border:1px solid #ffe6c2;
  font-weight:700; 
  color:#a45100; 
  }

/* Admin candidates list */
.admin-candidates 
{ 
  list-style:none;
  margin-top:8px;
  display:flex; 
  flex-direction:column; 
  gap:8px; 
}
.admin-candidates li 
{ 
  display:flex;
  justify-content:space-between;
  align-items:center; 
  padding:10px; 
  border-radius:8px;
  border:1px solid #eef6ff;
 }

/* Messages */
.message 
{
  margin-top:8px; 
  font-weight:600; 
  color:#0b2545; 
}

/* Responsive */
@media (min-width:1000px) 
{
  .header-inner 
  { 
    flex-direction:row; 
    align-items:center; 
    justify-content:space-between; 
  }
  .main-nav
   { 
    margin-top:0;
   }
}
/* --- MENU LATERAL --- */

.menu-btn {
    background: white;
    border: none;
    color: #0b2545;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.sidebar {
    position: fixed;
    top: 0;
    left: -260px; /* caché */
    width: 260px;
    height: 100%;
    background: #0b2545;
    color: white;
    padding-top: 40px;
    transition: 0.35s ease;
    z-index: 2000;
}

.sidebar.open {
    left: 0; /* affiché */
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 20px;
}

.sidebar ul li {
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}
.site-footer {
    background: var(--main-color);
    padding: 2px 0;
    text-align: center;
    color: white;
}