/* ****************************************************************************************
 * Charte commune Force 12 : bandeau du menu, boutons kaki, panneaux (login, admin…)
 * **************************************************************************************** */

/* ---------- Bouton kaki skeuomorphique, intérieur de couleur unie ---------- */
.bouton-f12{
  --fond: #7fc8f0;
  display: inline-block;
  font-family: 'bauhausregular';
  font-size: 1rem;
  line-height: 1.2;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  background: var(--fond) !important;             /* !important : style.css rend transparents les « form button » */
  border: 0.3em solid;
  border-color: #ece5c6 #8b835e #6c6545 #ddd5b2 !important;  /* relief : clair en haut et à gauche */
  border-radius: 0.55em;
  box-shadow: 0 0 0 1px #2f2b1d, inset 0 0 0 1px #0000004d, 0 2px 5px #0009;
  padding: 0.3em 1.1em;
  cursor: pointer;
  user-select: none;
}
.bouton-f12:hover{ filter: brightness(1.1); color: #000; text-decoration: none; }
.bouton-f12:active{ border-color: #6c6545 #ddd5b2 #ece5c6 #8b835e !important; transform: translateY(1px); }
.bouton-f12:disabled{ opacity: 0.5; cursor: default; filter: none; }
.bouton-f12.vert   { --fond: #8fd18f; }
.bouton-f12.orange { --fond: #f0a35a; }
.bouton-f12.rouge  { --fond: #ef7f7f; }
.bouton-f12.gris   { --fond: #c9c9c9; }
.bouton-f12.violet { --fond: #c6a6e6; }
.bouton-f12.jaune  { --fond: #f4e542; }

/* ---------- Bandeau fixe du menu Force12 (toutes les pages) ---------- */
#bandeau-f12{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4.9rem;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.2rem;
  background: linear-gradient(to bottom, #0b0d24f2 0%, #0b0d24d9 70%, #0b0d2400 100%);
  pointer-events: none; /* seul le logo est cliquable : rien d'autre ne laisse croire le contraire */
}
#bandeau-f12 #logo{ pointer-events: auto; height: 4.3rem; width: auto; }
#bandeau-f12 #logo:hover{ background-image: none; } /* l'image de survol remplace le logo (modal.ejs), au lieu d'apparaître derrière à sa taille réelle */

/* ---------- Panneau sombre (login, admin) ---------- */
.panneau-f12{
  background-color: #3d3b22d9;
  border: 2px solid #ffffff44;
  border-radius: 1.2rem;
  box-shadow: 0 0 2rem #000a;
  color: whitesmoke;
  font-family: 'bauhausregular';
  padding: 2rem 2.4rem;
}
.panneau-f12 h1, .panneau-f12 h2{ font-family: 'bauhausregular'; color: white; }
.champ-f12{
  width: 100%;
  font-family: 'bauhausregular';
  font-size: 1rem;
  color: #111;
  background: #f4f1e4;
  border: 2px solid #8b835e;
  border-radius: 0.5em;
  padding: 0.45em 0.8em;
}
.champ-f12:valid, .champ-f12:invalid{ color: #111; } /* style.css colore les champs en vert ou rouge */
.champ-f12:focus{ outline: none; border-color: #f0a35a; box-shadow: 0 0 0 3px #f0a35a55; }
.erreur-f12{
  background: #ef7f7f33;
  border: 1px solid #ef7f7f;
  border-radius: 0.5em;
  color: #ffd6d6;
  padding: 0.5em 0.8em;
}
.succes-f12{
  background: #8fd18f33;
  border: 1px solid #8fd18f;
  border-radius: 0.5em;
  color: #dff5df;
  padding: 0.5em 0.8em;
}

/* ---------- Choix de la langue ---------- */
.langues-f12{ display: flex; gap: 0.4rem; flex-wrap: wrap; }
.langues-f12 a{
  font-family: 'bauhausregular';
  color: whitesmoke;
  border: 1px solid #ffffff55;
  border-radius: 0.4em;
  padding: 0.15em 0.6em;
  text-decoration: none;
}
.langues-f12 a.active, .langues-f12 a:hover{ background: #f0a35a; color: #111; border-color: #f0a35a; }

/* ---------- Eureka, Encyclopédie, Auto : espacements resserrés (classe posée sur le cadre de la page) ---------- */
.compact-f12{ margin-top: 1.9rem !important; padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; } /* 3rem (py-5) + 1.9rem : le cadre commence sous le bandeau */
.compact-f12 input.texte{ margin: 0 !important; }               /* .texte (prévue pour les zones blanches) ajoutait 3 % de marge au champ « sons » */
.compact-f12 label{ margin-bottom: 0; }
.compact-f12 .titre{ margin: 0.3rem 0 0.2rem; }
.compact-f12 #contenuEtude{ padding-top: 0; padding-bottom: 0; }
.compact-f12 .bouton-image{                                     /* boutons images (195 × 55) : plus de case de 200 px de haut */
  padding: 0 !important;
  width: 12.5rem;
  height: 3.6rem;
  margin: 0.3rem 1% !important;
  background-size: contain !important;
}
.compact-f12 .btn-group .my-auto{ margin-top: auto !important; margin-bottom: auto !important; }
.compact-f12 .texte-ency p, .compact-f12 #nomenclature-auto p{ margin-bottom: 0.35rem; }
.compact-f12 #nomenclature, .compact-f12 #nomenclature-auto{ padding-top: 2.2rem; padding-bottom: 2.2rem; }
.compact-f12 #nomenclature-auto{ height: 22rem; }               /* zone des nomenclatures d'Auto un peu moins haute */