/* ══════════════════════════════════════════════════════════════════════════
   BF-SITE.CSS — Styles propres au squelette (hors socle bf-suite)
   ──────────────────────────────────────────────────────────────────────────
   Le socle bf-suite.css fournit déjà : palette + dark mode, bandeau (hero),
   pied de page, page admin (tuiles + modale), barre de navigation (.bf-nav).
   Ici on ajoute seulement : conteneur de contenu, panneaux d'onglets, module
   Enfants, toast, login et loader. Tout dérive des variables --bf-*.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  margin: 0;
  background: var(--bf-fond);
  color: var(--bf-texte);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ── Conteneur principal + panneaux d'onglets ──────────────────────────── */
.bf-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 10px;
}
.bf-panel { display: none; animation: bf-fade .25s ease; }
.bf-panel.active { display: block; }
@keyframes bf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bf-section-label {
  font-family: var(--bf-titre);
  font-size: 1.15rem;
  color: var(--bf-brun);
  font-weight: 700;
  margin: 6px 0 14px;
}

/* Carte générique réutilisable par les onglets */
.bf-card {
  background: var(--bf-carte);
  border: 1px solid var(--bf-bord-doux);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px var(--bf-ombre);
  margin-bottom: 16px;
}

/* ── Module Enfants ────────────────────────────────────────────────────── */
.bf-enf-av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 6px var(--bf-ombre);
  vertical-align: middle;
}
.bf-enf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-enf-av-init { color: #fff; font-weight: 700; font-family: var(--bf-titre); }

.bf-enf-tetes { display: inline-flex; gap: 4px; }
.bf-enf-tetes .bf-enf-av { margin-left: -6px; border: 2px solid var(--bf-carte); }
.bf-enf-tetes .bf-enf-av:first-child { margin-left: 0; }

.bf-enf-selecteur { display: flex; flex-wrap: wrap; gap: 10px; }
.bf-enf-choice {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: var(--bf-creme-clair); border: 2px solid transparent;
  font-family: inherit; transition: border-color .15s, transform .12s;
}
.bf-enf-choice:hover { transform: translateY(-2px); }
.bf-enf-choice.selected { border-color: var(--bf-accent); background: color-mix(in srgb, var(--bf-accent) 10%, var(--bf-carte)); }
.bf-enf-choice-nom { font-size: .78rem; color: var(--bf-texte-doux); font-weight: 700; }

.bf-enf-galerie { display: flex; flex-wrap: wrap; gap: 20px; }
.bf-enf-carte { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bf-enf-carte-nom { font-family: var(--bf-titre); font-weight: 700; color: var(--bf-brun); }
.bf-enf-vide { color: var(--bf-texte-pale); font-style: italic; }

/* Lignes admin enfants */
.bf-enf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bf-enf-row-av { border: none; background: none; padding: 0; cursor: pointer; }
.bf-enf-row-nom {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--bf-bord); background: var(--bf-creme-clair);
  color: var(--bf-texte); font-family: inherit; font-size: .95rem;
}

/* Champs génériques dans l'admin */
.bf-admin-content input[type="text"],
.bf-admin-content input:not([type]),
.bf-admin-content input[type="url"],
.bf-admin-content input[type="number"] {
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--bf-bord); background: var(--bf-creme-clair);
  color: var(--bf-texte); font-family: inherit; font-size: .95rem;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.bf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--bf-brun-fonce); color: var(--bf-creme);
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 3000;
}
.bf-toast.show { opacity: 1; transform: translate(-50%, 0); }
.bf-toast.error { background: var(--bf-rouge); }

/* ── Login ─────────────────────────────────────────────────────────────── */
.bf-overlay {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,14,9,.55); backdrop-filter: blur(3px); padding: 20px;
}
.bf-overlay.open { display: flex; }
.bf-login-card {
  background: var(--bf-carte); border: 1px solid var(--bf-bord);
  border-radius: 16px; padding: 28px; width: 100%; max-width: 360px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.bf-login-card h2 { font-family: var(--bf-titre); color: var(--bf-brun); margin: 0 0 4px; }
.bf-login-card p { color: var(--bf-texte-doux); font-size: .86rem; margin: 0 0 16px; }
.bf-fgroup { margin-bottom: 12px; }
.bf-fgroup label { display: block; font-size: .78rem; font-weight: 700; color: var(--bf-texte-doux); margin-bottom: 4px; }
.bf-fgroup input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--bf-bord); background: var(--bf-creme-clair);
  color: var(--bf-texte); font-family: inherit; font-size: .95rem;
}
.bf-btn-primary {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: var(--bf-accent); color: #fff; font-weight: 700;
  font-family: inherit; font-size: .95rem; cursor: pointer; margin-top: 6px;
}
.bf-btn-primary:hover { filter: brightness(1.05); }
.bf-login-cancel {
  background: none; border: none; color: var(--bf-texte-pale);
  margin-top: 12px; font-size: .82rem; cursor: pointer; width: 100%;
}
.bf-login-err { color: var(--bf-rouge); font-size: .82rem; margin-top: 8px; min-height: 1em; }

/* ── Loader ────────────────────────────────────────────────────────────── */
#bf-loader {
  position: fixed; inset: 0; background: var(--bf-fond);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; font-family: var(--bf-titre);
}
#bf-loader .bf-loader-name { font-size: 1.4rem; color: var(--bf-brun); margin-bottom: 10px; }
#bf-loader .bf-loader-sub { font-size: .85rem; color: var(--bf-texte-pale); font-family: 'Nunito', sans-serif; }