/* ── Charte Yesuifan ──────────────────────────────────────────────────────
   Mêmes couleurs que l'application Flutter (lib/utils/app_colors.dart) pour
   que les deux versions restent reconnaissables comme un seul produit.       */

:root {
  --blue: #2878C8;
  --blue-dark: #1F5FA0;
  --blue-soft: #E8F1FB;
  --pink: #E91E8C;
  --pink-soft: #FDE7F3;
  --dark: #1A1A2E;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --line: #E6EAF0;
  --muted: #6B7280;
  --muted-light: #9AA3AF;
  --green: #22A06B;
  --green-soft: #E6F6EF;
  --red: #E5484D;
  --red-soft: #FDECEC;
  --amber: #F0A020;
  --amber-soft: #FEF4E4;

  --grad-brand: linear-gradient(135deg, #2878C8 0%, #6A5AE0 45%, #E91E8C 100%);
  --grad-pink: linear-gradient(135deg, #E91E8C 0%, #FF6BB5 100%);
  --grad-green: linear-gradient(135deg, #43C6AC 0%, #4CAF50 100%);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-1: 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, .14);

  --topbar-h: 60px;
  --bottomnav-h: 62px;
  --sidebar-w: 232px;
  --maxw: 1180px;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` sert de commutateur à toute la coquille (barre supérieure,
   navigations, calque modal). Sans cette règle, le `display` explicite de ces
   éléments l'emporte sur la feuille de style du navigateur et l'attribut ne
   masque plus rien. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--dark);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Amorçage ─────────────────────────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg);
  z-index: 999;
}
.boot img { width: 210px; height: auto; }

/* Les attributs `width`/`height` des logos ne servent qu'à réserver la place
   avant le chargement : la hauteur suit toujours les proportions réelles du
   fichier. Sans ça, remplacer le logo par une image d'un autre format l'écrase.
   Les emplacements déjà dimensionnés par le CSS (barre supérieure, bandeau
   d'accueil, panneau de connexion) fixent une seule dimension, jamais deux. */
.verif__logo img,
.errorpage > a img,
.lp-footer img,
.auth__logo img { height: auto; }
.boot-bar {
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.boot-bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--grad-brand);
  animation: boot-slide 1.1s ease-in-out infinite;
}
@keyframes boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Coquille applicative ─────────────────────────────────────────────── */

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  width: 100%;
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + 8px);
}

/* Barre supérieure */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
.topbar-logo {
  height: 28px;
  width: auto;
  margin: 0 auto;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* Navigation basse (téléphone) */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: calc(var(--bottomnav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
}
.navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted-light);
  position: relative;
  transition: color .15s;
}
.navbtn[aria-current="page"] { color: var(--blue); }
.navbtn svg { width: 23px; height: 23px; }
.navbtn .badge {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  box-sizing: content-box;
}

/* Barre latérale (ordinateur) */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  padding: 16px 12px;
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}
.sidebtn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  position: relative;
  transition: background .15s, color .15s;
}
.sidebtn:hover { background: var(--bg); }
.sidebtn[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.sidebtn svg { width: 21px; height: 21px; flex: none; }
.sidebtn .badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Bascule des deux navigations à 900px : au-delà, la barre latérale remplace
   la barre du bas et la vue se décale d'autant. */
@media (min-width: 900px) {
  .bottomnav { display: none !important; }
  #app.has-nav .view {
    margin-left: var(--sidebar-w);
    padding-bottom: 32px;
  }
  #app.has-nav .topbar { padding-left: 20px; }
}
@media (max-width: 899px) {
  .sidebar { display: none !important; }
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
}
.page--narrow { max-width: 680px; }
.page--tight { max-width: 460px; }

@media (max-width: 520px) {
  .page { padding: 12px; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}