/* -------------------------------------------------------
   Police événementielle
------------------------------------------------------- */
@font-face {
  font-family: 'Rastanty Cortez';
  src: url('../fonts/rastanty-cortez.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* -------------------------------------------------------
   Reset minimal & base
------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #eef1f5;
  margin: 0;
}

main { padding: 40px 15px; }

/* -------------------------------------------------------
   Header (centré)
------------------------------------------------------- */
header {
  background: linear-gradient(90deg, #001f5b, #003a8f);
  color: #fff;
  display: flex;
  flex-direction: column;   /* empile logo + textes */
  align-items: center;      /* centrage horizontal */
  justify-content: center;  /* centrage vertical si besoin */
  text-align: center;
}

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

.header-brand h1 { margin: 0; }

header .logo {
  max-height: 70px;  /* Ajuste: 50/60/70px */
  width: auto;       /* conserve proportions */
}

@media (max-width: 700px){
  header .logo { max-height: 56px; }
}

/* -------------------------------------------------------
   Carte générique (container principal)
------------------------------------------------------- */
.card {
  background: #fff;
  max-width: 900px;
  padding-left: 24px;
  padding-right: 24px;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: relative;
}

.badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: #cfa13d;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

/* -------------------------------------------------------
   Titres & textes
------------------------------------------------------- */
h2 {
  margin-top: 0;
  color: #001f5b;
  font-size: 40px;  /* 50px -> 40px : meilleur équilibre */
  text-align: center;
}

.titre { text-align: center; }

.titre h2 {
  margin: 0;
  color: #001f5b;
  font-family: 'Rastanty Cortez';
}

.subtitle { margin: 0; color: #555; }

.section { margin-bottom: 25px; }
.section h3 { margin-bottom: 10px; color: #003a8f; font-size: 16px; }

/* -------------------------------------------------------
   Formulaires (neutraliser radios/checkbox)
------------------------------------------------------- */
label { display: block; margin-top: 10px; font-size: 14px; color: #333; }

/* Champs classiques uniquement */
input:not([type="radio"]):not([type="checkbox"]),
select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

input:not([type="radio"]):not([type="checkbox"]),
select,
button {
  min-height: 48px;
  font-size: 16px;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
}

input:focus, select:focus {
  outline: none;
  border-color: #003a8f;
}

button {
  width: 100%;
  margin-top: 30px;
  padding: 14px;
  font-size: 15px;
  font-weight: bold;
  background: #003a8f;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: #002a6b; }

.footer-note {
  text-align: center;
  font-size: 13px;
  color: #666;
}

/* -------------------------------------------------------
   Form grid (responsive)
------------------------------------------------------- */
.form-row {
  display: grid;
  gap: 20px;
  margin-top: 15px;
  width: 100%;
}
.form-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-group label { margin-top: 0; }

@media (max-width: 768px) {
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  label { font-size: 14px; margin-bottom: 4px; }
  input:not([type="radio"]):not([type="checkbox"]),
  select { margin-top: 6px; }
  .section { margin-bottom: 30px; }
}

/* -------------------------------------------------------
   Flash messages
------------------------------------------------------- */
.flash-container { max-width: 650px; margin: 0 auto 20px auto; }

.flash {
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
}
.flash.success { background: #e6f4ea; color: #1e7e34; border-left: 4px solid #28a745; }
.flash.error   { background: #fdecea; color: #a71d2a; border-left: 4px solid #dc3545; }

/* -------------------------------------------------------
   Filtres & boutons admin (page admin)
------------------------------------------------------- */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 20px;
}
.filters label { font-size: 13px; }
.filters select, .filters button { padding: 8px; }

.btn-export, .btn-logout {
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 6px;
}
.btn-export { background: #28a745; }
.btn-logout { background: #dc3545; }

.rdv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rdv-table th, .rdv-table td { border: 1px solid #ddd; padding: 8px; }
.rdv-table th { background: #003a8f; color: #fff; }

/* -------------------------------------------------------
   RDV — Grille 3/2/1 colonnes
   (UNE SEULE VERSION, unifiée)
------------------------------------------------------- */
.rdv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
@media (max-width: 1024px) { .rdv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .rdv-grid { grid-template-columns: 1fr; } }

/* Carte RDV (thème + horaires dans un seul bloc) */
.rdv-card {
  border: 1.5px solid #d8dee6;
  border-radius: 12px;
  background: #fff;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

/* Surbrillance carte sélectionnée (Chrome/Edge/Safari) */
.rdv-card:has(.rdv-header input[type="radio"]:checked) {
  border-color: #003a8f;
  box-shadow: 0 6px 18px rgba(0, 58, 143, 0.12);
}

/* En-tête de carte (thématique) */
.rdv-header {
  display: flex;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 12px;
}
.rdv-header input[type="radio"] { width: 16px; height: 16px; margin-top: 4px; }
.rdv-header strong { font-size: 14px; color: #0a1f44; }
.rdv-header span   { font-size: 13px; color: #555; }

/* Liste d’horaires (toujours visibles) */
.rdv-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ligne créneau */
.rdv-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  background: #F9FBFF;
}

.rdv-slot input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: #003a8f; /* bleu AFG */
}

.rdv-slot small { color: #666; font-size: 12px; }
.rdv-slot.disabled { opacity: 0.4; cursor: not-allowed; }

/* -------------------------------------------------------
   (Option) Conteneur central étroit
------------------------------------------------------- */
.section .container-narrow {
  max-width: 1200px;
  margin: 0 auto;
}

/* Bouton Déconnexion fixe en haut de page */
.btn-logout-top {
  position: fixed;
  top: 12px;         /* distance du haut de la fenêtre */
  right: 16px;       /* distance du bord droit */
  z-index: 1000;     /* au-dessus du header/logos */
  background: #dc3545;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .08s ease, opacity .2s ease;
}
.btn-logout-top:hover {
  opacity: .95;
  transform: translateY(-1px);
}

/* Ajuste sur mobile si besoin */
@media (max-width: 680px){
  .btn-logout-top {
    top: 10px;
    right: 10px;
    padding: 8px 12px;
  }
}