/* ============================================================
   SCOUBIDOU — style.css
   Palette : #522A92 (violet) · #FBAA24 (orange) · #00B672 (vert) · #FFFFFF
   Desktop-first
   ============================================================ */

/* ══════════════════════════════════════
   VARIABLES
══════════════════════════════════════ */
:root {
  /* Couleurs principales */
  --violet:      #522A92;
  --violet-dark: #3d1f6e;
  --violet-mid:  #6b3db8;
  --violet-light:#ede8f7;
  --orange:      #FBAA24;
  --orange-light:#fff4dc;
  --green:       #00B672;
  --green-light: #e0f7ef;
  --white:       #FFFFFF;

  /* Neutres */
  --gray-50:  #F7F6FB;
  --gray-100: #EEEDF5;
  --gray-200: #E2DFF0;
  --gray-400: #9B94B8;
  --gray-600: #5e577a;
  --gray-700: #3a3550;
  --gray-900: #1a1730;

  /* Sémantiques */
  --color-error:   #e84040;
  --color-success: #00B672;
  --color-warning: #FBAA24;

  /* Typographie */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Espacements */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Ombres */
  --shadow-sm: 0 1px 4px rgba(82,42,146,.08);
  --shadow-md: 0 4px 16px rgba(82,42,146,.12);
  --shadow-lg: 0 8px 32px rgba(82,42,146,.16);

  /* Layout */
  --sidebar-w:    240px;
  --header-h:     60px;
  --content-max:  1200px;
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-700);
  background: var(--gray-50);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gray-700);
  line-height: 1.2;
}

a { color: var(--violet); text-decoration: none; transition: color .2s; }
a:hover { color: var(--violet-mid); }

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: var(--font-body); }

input, select, textarea, button { font-family: inherit; }

/* ══════════════════════════════════════
   LAYOUT PRINCIPAL (post-login)
══════════════════════════════════════ */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* ── Header ── */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: .875rem;
}

.app-header__name {
  color: var(--gray-600);
  font-weight: 500;
}

.app-header__structure {
  font-size: .75rem;
  color: var(--gray-400);
  padding: 2px 10px;
  background: var(--gray-100);
  border-radius: 20px;
}

.app-header__logout {
  font-size: .8rem;
  color: var(--gray-400);
  padding: 4px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.app-header__logout:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* Burger (mobile uniquement) */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all .3s;
}

/* ── Sidebar ── */
.app-sidebar {
  grid-area: sidebar;
  background: var(--violet-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  height: var(--header-h);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.sidebar-brand__logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius-md);
}

.sidebar-brand__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
}

.sidebar-nav {
  padding: var(--space-md) 0;
  flex: 1;
}

.sidebar-nav__label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: var(--space-md) var(--space-lg) var(--space-xs);
}

.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg);
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  font-weight: 400;
  transition: all .2s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-nav__link:hover {
  color: var(--white);
  background: rgba(255,255,255,.07);
}
.sidebar-nav__link.is-active {
  color: var(--white);
  background: rgba(255,255,255,.1);
  border-left-color: var(--orange);
  font-weight: 500;
}

.sidebar-nav__pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-nav__icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .75rem;
  color: rgba(255,255,255,.3);
}

/* ── Main ── */
.app-main {
  grid-area: main;
  padding: var(--space-lg);
  max-width: var(--content-max);
  width: 100%;
}

/* ══════════════════════════════════════
   COMPOSANTS — TOOLBAR
══════════════════════════════════════ */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.page-toolbar__left { display: flex; align-items: center; gap: var(--space-md); }
.page-toolbar__right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-title__count {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 10px;
  border-radius: 20px;
}

.btn-back {
  font-size: .85rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
}
.btn-back:hover { color: var(--violet); }

/* ══════════════════════════════════════
   COMPOSANTS — BOUTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 9px 18px;
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: all .2s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--violet);
  color: var(--white);
  border-color: var(--violet);
}
.btn--primary:hover {
  background: var(--violet-mid);
  border-color: var(--violet-mid);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--white);
  color: var(--gray-700);
  border-color: var(--gray-200);
}
.btn--secondary:hover {
  border-color: var(--gray-400);
  color: var(--gray-900);
}

.btn--danger {
  background: var(--white);
  color: var(--color-error);
  border-color: #fcc;
}
.btn--danger:hover {
  background: #fff0f0;
  border-color: var(--color-error);
}

.btn--sm {
  padding: 5px 12px;
  font-size: .8rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: .9rem;
  transition: all .2s;
  text-decoration: none;
}
.btn-icon:hover { border-color: var(--gray-400); background: var(--gray-50); }
.btn-icon--danger:hover { border-color: var(--color-error); background: #fff0f0; }

/* ══════════════════════════════════════
   COMPOSANTS — ALERTES & FLASH
══════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: .875rem;
  margin-bottom: var(--space-lg);
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.alert-success {
  background: var(--green-light);
  border-color: #9fe8cf;
  color: #005c39;
}
.alert-error {
  background: #fff0f0;
  border-color: #fcc;
  color: var(--color-error);
}
.alert-warning {
  background: var(--orange-light);
  border-color: #fde4a0;
  color: #7a5000;
}

.error-list { padding-left: var(--space-md); list-style: disc; }
.error-list li { margin-bottom: 2px; }

/* ══════════════════════════════════════
   COMPOSANTS — FILTRES
══════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.filter-bar__search {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.filter-bar__search .input-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: .9rem;
  pointer-events: none;
}
.filter-bar__search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: .875rem;
  background: var(--white);
  color: var(--gray-700);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.filter-bar__search input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(82,42,146,.08);
}

.filter-bar__tabs {
  display: flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
}
.tab {
  padding: 5px 14px;
  font-size: .8rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  transition: all .2s;
  text-decoration: none;
}
.tab:hover { color: var(--gray-700); }
.tab.is-active {
  background: var(--white);
  color: var(--violet);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════
   COMPOSANTS — TABLEAU
══════════════════════════════════════ */
.table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.data-table thead {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.data-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  color: var(--gray-700);
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr {
  transition: background .15s;
}
.data-table tbody tr:hover { background: var(--gray-50); }

.table-link {
  color: var(--gray-700);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.table-link:hover { color: var(--violet); }

.col-actions {
  width: 100px;
  text-align: right;
}
.col-actions .btn-icon + .btn-icon { margin-left: 4px; }

/* ══════════════════════════════════════
   COMPOSANTS — BADGES
══════════════════════════════════════ */
.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge--green  { background: var(--green-light);   color: #005c39; }
.badge--orange { background: var(--orange-light);  color: #7a5000; }
.badge--violet { background: var(--violet-light);  color: var(--violet); }
.badge--gray   { background: var(--gray-100);      color: var(--gray-400); }
.badge--red    { background: #fff0f0;              color: var(--color-error); }

/* ══════════════════════════════════════
   COMPOSANTS — CARDS
══════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__header {
  padding: 14px var(--space-lg);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.card__body { padding: var(--space-lg); }

/* ══════════════════════════════════════
   COMPOSANTS — FICHE (grille détail)
══════════════════════════════════════ */
.fiche-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: baseline;
  font-size: .875rem;
}
.info-list dt {
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
}
.info-list dd { color: var(--gray-700); }

.muted { color: var(--gray-400); font-style: normal; font-size: .85em; }

/* ══════════════════════════════════════
   COMPOSANTS — FORMULAIRES
══════════════════════════════════════ */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  max-width: 860px;
}

.form-section {
  border: none;
  padding: 0;
  margin-bottom: var(--space-xl);
}
.form-section + .form-section {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-100);
}

.form-section__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.form-section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-100);
  margin-left: var(--space-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--gray-700);
  letter-spacing: .01em;
}
.field--required label::after {
  content: ' *';
  color: var(--color-error);
}

.input-wrap { position: relative; }

.input-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: .9rem;
  pointer-events: none;
  transition: color .2s;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  appearance: none;
}
.field input.has-icon,
.field select.has-icon { padding-left: 38px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--violet);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(82,42,146,.08);
}
.field input.is-invalid,
.field select.is-invalid { border-color: var(--color-error); }

.field textarea { resize: vertical; min-height: 100px; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B94B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.field-error {
  font-size: .775rem;
  color: var(--color-error);
}

.input-wrap:focus-within .input-icon { color: var(--violet); }

.form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: .875rem;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--gray-400);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .15s, border-color .15s;
}
.checkbox-label input[type="checkbox"]:checked {
  background: var(--violet);
  border-color: var(--violet);
}
.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid var(--white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--space-lg);
}

/* Toggle password */
.toggle-pw {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: .9rem;
  padding: 2px;
  transition: color .2s;
  cursor: pointer;
}
.toggle-pw:hover { color: var(--violet); }

/* ══════════════════════════════════════
   COMPOSANTS — ÉTAT VIDE
══════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
  gap: var(--space-md);
}
.empty-state__icon { font-size: 2.5rem; }
.empty-state__msg  { font-size: .95rem; color: var(--gray-400); }

/* ══════════════════════════════════════
   PAGE LOGIN
══════════════════════════════════════ */
.login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--violet-dark);
}

.login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 3.5rem;
  overflow: hidden;
  background: var(--violet-dark);
}
.login-panel::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--violet-mid) 0%, transparent 70%);
  opacity: .55;
}
.login-panel::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a0f5e 0%, transparent 70%);
  opacity: .7;
}

/* Décorations géométriques */
.geo { position: absolute; pointer-events: none; }
.geo-circle1 {
  top: 12%; left: 60%; width: 14px; height: 14px;
  border-radius: 50%; background: var(--orange); opacity: .9;
  animation: float1 4s ease-in-out infinite;
}
.geo-circle2 {
  top: 38%; left: 75%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); opacity: .8;
  animation: float2 5s ease-in-out infinite;
}
.geo-square {
  bottom: 28%; right: 8%; width: 28px; height: 28px;
  border: 2px solid var(--orange); opacity: .5;
  transform: rotate(18deg); animation: spin 14s linear infinite;
}
.geo-tri {
  top: 65%; left: 66%; width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid var(--green);
  opacity: .45; animation: float1 6s ease-in-out infinite reverse;
}
.geo-ring {
  top: 20%; left: 55%; width: 80px; height: 80px;
  border-radius: 50%; border: 1.5px solid rgba(251,170,36,.25);
}
.geo-ring2 {
  top: 16%; left: 51%; width: 140px; height: 140px;
  border-radius: 50%; border: 1px solid rgba(251,170,36,.1);
}
.deco-line {
  position: absolute; right: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12), transparent);
}

.brand { position: relative; z-index: 2; animation: fadeUp .7s ease both; }
.brand-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 3rem; }
.brand-logo__img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: var(--radius-md);
}
.brand-name {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--white); letter-spacing: -.02em;
}
.brand-tagline {
  font-size: .72rem; color: var(--orange); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; margin-top: 2px;
}

.panel-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700; color: var(--white);
  line-height: 1.18; letter-spacing: -.03em; margin-bottom: 1.25rem;
}
.panel-headline span { color: var(--orange); }

.panel-sub {
  font-size: .95rem; color: rgba(255,255,255,.55);
  line-height: 1.65; max-width: 340px; font-weight: 300;
}

.modules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.5rem; }
.mod-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7);
  animation: fadeUp .7s ease both;
}
.mod-pill .pip { width: 6px; height: 6px; border-radius: 50%; }
.mod-pill:nth-child(1) { animation-delay:.1s }
.mod-pill:nth-child(2) { animation-delay:.2s }
.mod-pill:nth-child(3) { animation-delay:.3s }
.mod-pill:nth-child(4) { animation-delay:.4s }

.login-form-side {
  display: flex; align-items: center; justify-content: center;
  background: var(--white); padding: 3rem 2.5rem; position: relative;
}
.login-form-side::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--violet), var(--orange), var(--green));
}

.form-wrap { width: 100%; max-width: 400px; animation: fadeUp .6s ease both; }

.form-eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--violet); margin-bottom: .6rem;
}
.form-title {
  font-family: var(--font-display); font-size: 1.75rem;
  font-weight: 700; color: var(--gray-700);
  letter-spacing: -.025em; margin-bottom: .4rem;
}
.form-subtitle {
  font-size: .88rem; color: var(--gray-400);
  margin-bottom: 2.2rem; font-weight: 300;
}
.form-footer {
  margin-top: 1.8rem; text-align: center;
  font-size: .8rem; color: var(--gray-400);
}
.form-footer strong { color: var(--violet); font-weight: 600; }

.btn-submit {
  width: 100%; padding: 13px;
  font-family: var(--font-display); font-size: .95rem;
  font-weight: 600; color: var(--white);
  background: var(--violet); border: none;
  border-radius: var(--radius-md); cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
}
.btn-submit:hover  { background: var(--violet-mid); box-shadow: var(--shadow-lg); }
.btn-submit:active { transform: scale(.98); }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)}  }
@keyframes spin   { to { transform: rotate(378deg); } }

/* ══════════════════════════════════════
   PAGE DASHBOARD
══════════════════════════════════════ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 800px;
}

.dash-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: all .2s;
}
.dash-card:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.dash-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.dash-card__body { flex: 1; }

.dash-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 2px;
}

.dash-card__sub {
  font-size: .8rem;
  color: var(--gray-400);
}

.dash-card__arrow {
  font-size: 1.1rem;
  color: var(--gray-200);
  transition: color .2s, transform .2s;
}
.dash-card:hover .dash-card__arrow {
  color: var(--violet);
  transform: translateX(4px);
}

/* ── Hint sous un champ ── */
.field-hint {
  font-size: .78rem;
  color: var(--gray-400);
  margin-top: 5px;
  display: block;
  line-height: 1.5;
}

/* ══════════════════════════════════════
   RECHERCHE AJAX
══════════════════════════════════════ */
.search-loading {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--gray-400);
  font-size: .9rem;
}
.search-loading--error { color: var(--color-error); }

/* ══════════════════════════════════════
   MODAL DE CONFIRMATION
══════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,23,48,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.is-open {
  opacity: 1; pointer-events: auto;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 420px;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  margin: var(--space-md);
  transform: translateY(20px);
  transition: transform .25s ease;
  text-align: center;
}
.modal-backdrop.is-open .modal {
  transform: translateY(0);
}

.modal__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  display: block;
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: var(--space-sm);
}

.modal__body {
  font-size: .92rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.modal__name {
  font-weight: 700;
  color: var(--gray-900);
}

.modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

/* ── Bloc famille (toggle) ── */
#bloc-famille {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}