/* =========================================================
   FOOTER + POPUPS (MODALS) + COOKIES
   À mettre dans un fichier séparé (ex: footer-popups-cookies.css)
   ========================================================= */


/* =========================
   FOOTER
   ========================= */
footer{
  background-color:#333;
  color:#fff;
  padding:20px;
  text-align:center;
  font-size:14px;
  line-height:1.8;
}

footer a{
  color:#87b7e0;
  text-decoration:none;
  margin:0 10px;
}

footer a:hover{ text-decoration:underline; }

footer div{ margin-bottom:15px; }

footer img{
  display:block;
  margin:20px auto 0;
  max-height:70px;
  padding-bottom:20px;
}


/* =========================
   POPUPS / MODALS (base)
   ========================= */

/* Empêcher le scroll du body quand une modale est ouverte */
body.modal-open{ overflow:hidden; }

/* Overlay de modale (générique) */
.modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:rgba(0,0,0,.5);
}

/* Contenu de modale (générique) */
.modal .modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:20px;
  border-radius:10px;
  max-width:800px;
  width:calc(100% - 32px);
  max-height:80vh;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  color:#333;
  font-size:14px;
  overflow-y:auto;
}

/* Bouton fermeture “x” (générique) */
.modal .close{
  color:#aaa;
  float:right;
  font-size:28px;
  font-weight:bold;
  cursor:pointer;
  line-height:1;
}

.modal .close:hover,
.modal .close:focus{
  color:#000;
  text-decoration:none;
}

/* Maintenance : si tu veux une modale un peu plus compacte */
#maintenance-modal .modal-content{
  max-width:400px;
  text-align:center;
}

#maintenance-close{
  color:#aaa;
  float:right;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
  margin-top:-10px;
  line-height:1;
}

#maintenance-close:hover{ color:#000; }

#maintenance-ok-button{
  background-color:#0056a3;
  color:#fff;
  padding:10px 20px;
  border:none;
  border-radius:5px;
  font-size:14px;
  cursor:pointer;
}

#maintenance-ok-button:hover{ background-color:#003d73; }

/* Mentions / Cookies (modales HTML “#mentions-modal” et “#cookies-modal”) */
#cookies-modal .modal-content{ max-width:980px; }

/* Playstore client (modale) */
#playstore-client-modal .modal-content{
  max-width:520px;
  text-align:center;
}


/* =========================
   POPUP EMAIL (vérification code)
   ========================= */
.email-verification-modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  overflow:hidden;
}

/* On réutilise .modal-content mais dans ton HTML c’est un .modal-content “simple” */
.email-verification-modal .modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:20px;
  border-radius:10px;
  max-width:400px;
  width:calc(100% - 32px);
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
}

/* Close “x” dans la modale email */
.email-verification-modal .close{
  color:#aaa;
  float:right;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
  line-height:1;
}

.email-verification-modal .close:hover{ color:#000; }

/* Champs code */
.code-inputs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:20px 0;
}

.code-field{
  width:50px;
  height:50px;
  text-align:center;
  font-size:20px;
  border:1px solid #ddd;
  border-radius:5px;
}

#validate-code-button{
  background-color:#0056a3;
  color:#fff;
  border:none;
  border-radius:5px;
  font-size:14px;
  padding:10px 20px;
  cursor:pointer;
  transition:background-color .3s ease;
}

#validate-code-button:hover{ background-color:#003d73; }

#validate-code-button:disabled{
  background-color:#ccc;
  color:#666;
  cursor:not-allowed;
}


/* =========================
   MODALE ERREUR (showErrorModal)
   ========================= */
.error-modal-container{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  display:none; /* tu l’affiches en flex via JS */
  justify-content:center;
  align-items:center;
  z-index:1000;
}

.error-modal-content{
  background:#fff;
  padding:20px;
  border-radius:10px;
  width:300px;
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
}

.error-modal-content p{
  margin-bottom:20px;
  font-size:16px;
  color:#333;
}

.error-btn{
  background-color:#0056a3;
  color:#fff;
  padding:10px 20px;
  border:none;
  border-radius:5px;
  font-size:14px;
  cursor:pointer;
}

.error-btn:hover{ background-color:#003d73; }


/* =========================
   COOKIES (bannière + préférences + bouton)
   Remplace les gros styles inline (si tu veux)
   ========================= */

/* Bannière cookies */
#cookie-banner{
  display:none;
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:99999;
}

#cookie-banner > div{
  max-width:980px;
  margin:0 auto;
  background:#0b1220;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Boutons bannière */
#cookie-refuse,
#cookie-customize{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}

#cookie-refuse:hover,
#cookie-customize:hover{
  background:rgba(255,255,255,.12);
}

#cookie-accept{
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:#1f6feb;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

#cookie-accept:hover{ filter:brightness(1.05); }

/* Modale préférences cookies */
#cookie-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,.55);
}

#cookie-modal > div{
  max-width:980px;
  margin:6vh auto;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  width:calc(100% - 32px);
}

#cookie-modal-close{
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}

/* Toggle checkbox analytics */
#cookie-analytics-toggle{
  width:auto !important;
}

/* Boutons modale cookies */
#cookie-save{
  flex:1;
  min-width:220px;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  background:#1f6feb;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

#cookie-save:hover{ filter:brightness(1.05); }

#cookie-refuse-all{
  flex:1;
  min-width:220px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  color:#000;
}

#cookie-refuse-all:hover{ background:#f8fafc; }

/* Bouton persistant "Gestion des cookies" */
#cookie-manage{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:99998;
  display:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  cursor:pointer;
  font-weight:700;
  color:#000;
}

#cookie-manage:hover{ background:rgba(255,255,255,.98); }

/* Responsive cookies */
@media (max-width:768px){
  #cookie-banner{ left:12px; right:12px; bottom:12px; }
  #cookie-banner > div{ padding:12px; }
  #cookie-save, #cookie-refuse-all{ width:100%; }
}