/* ===========================================================================
   Cogenix Kids — espace parents
   Sobre, dense, lisible. C'est un outil, pas une vitrine.
   =========================================================================== */

body.parents { min-height: 100dvh; display: flex; flex-direction: column; }

.p-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem var(--gutter);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  position: sticky; top: 0; z-index: 30;
}
.p-header .brand { margin-right: auto; }

.p-main { flex: 1; width: min(100% - var(--gutter) * 2, 1080px); margin: 2rem auto; }

/* --- Authentification -------------------------------------------------------- */

.auth-card {
  max-width: 440px; margin: 3rem auto;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--sh-md);
}
.auth-card h1 { font-size: var(--step-2); }
.auth-card p.sub { color: var(--ink-soft); margin-bottom: 1.6rem; }

.tabs { display: flex; gap: .4rem; margin-bottom: 1.5rem; background: var(--surface-2); padding: .3rem; border-radius: var(--r-pill); }
.tabs button {
  flex: 1; min-height: 42px; border: 0; border-radius: var(--r-pill);
  background: transparent; font-weight: 800; cursor: pointer; color: var(--ink-soft);
}
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); font-size: var(--step-0);
}
.field input:focus, .field select:focus { border-color: var(--sky); outline: none; }
.field .hint { font-size: .78rem; color: var(--ink-mute); margin-top: .3rem; }

.checkline { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step--1); color: var(--ink-soft); }
.checkline input { width: 22px; height: 22px; flex: none; margin-top: .15rem; accent-color: var(--sun); }

.notice {
  padding: .85rem 1.1rem; border-radius: var(--r-md);
  font-size: var(--step--1); font-weight: 600; margin-bottom: 1rem;
}
.notice--error { background: color-mix(in srgb, var(--berry) 14%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--berry) 40%, transparent); }
.notice--ok    { background: color-mix(in srgb, var(--mint) 14%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); }
.notice[hidden] { display: none; }

/* --- Cartes enfants ---------------------------------------------------------- */

.kid-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.kid-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: 1rem;
}
.kid-card__top { display: flex; align-items: center; gap: .9rem; }
.kid-card__avatar {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); font-size: 1.9rem; background: var(--surface-2);
}
.kid-card__name { font-weight: 900; font-size: var(--step-1); line-height: 1.15; }
.kid-card__meta { font-size: var(--step--1); color: var(--ink-mute); }

.bar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--mint), var(--sunshine)); transition: width var(--t-med) var(--ease-out); }
.bar--over .bar__fill { background: linear-gradient(90deg, var(--sun), var(--berry)); }

.kid-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

.mini-btn {
  min-height: 40px; padding: 0 .9rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); font-weight: 700; font-size: var(--step--1);
}
.mini-btn:hover { border-color: var(--sky); }
.mini-btn--danger:hover { border-color: var(--berry); color: var(--berry); }
.mini-btn--go { background: linear-gradient(135deg, var(--sun), var(--sunshine)); color: #3A1D00; border: 0; font-weight: 800; }

/* --- Alertes ------------------------------------------------------------------ */

.alert {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.2rem; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--surface);
  margin-bottom: .7rem;
}
.alert[data-level="critique"] { border-left: 5px solid #E03E3E; background: color-mix(in srgb, #E03E3E 8%, var(--surface)); }
.alert[data-level="eleve"]    { border-left: 5px solid var(--sun); background: color-mix(in srgb, var(--sun) 9%, var(--surface)); }
.alert[data-level="moyen"]    { border-left: 5px solid var(--sunshine); }
.alert[data-level="info"]     { border-left: 5px solid var(--border); }
.alert__when { font-size: .74rem; color: var(--ink-mute); font-weight: 700; }

/* --- Transcription ------------------------------------------------------------ */

.turn { padding: 1rem 0; border-bottom: 1px solid var(--border-soft); }
.turn:last-child { border-bottom: 0; }
.turn__q { font-weight: 800; margin-bottom: .5rem; }
.turn__a { color: var(--ink-soft); }
.turn__meta {
  margin-top: .5rem; font-size: .72rem; color: var(--ink-mute);
  font-family: var(--font-mono); display: flex; flex-wrap: wrap; gap: .6rem;
}

/* --- Fenêtres modales --------------------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(20, 14, 40, .5); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal__card {
  background: var(--surface); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  width: min(100%, 560px); box-shadow: var(--sh-lg);
  max-height: 88dvh; overflow-y: auto;
}
.modal__card--wide { width: min(100%, 800px); }
.modal__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.modal__head h2 { margin: 0; font-size: var(--step-2); margin-right: auto; }
.modal__close {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font-size: 1.2rem;
}

.avatar-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.avatar-picker button {
  width: 52px; height: 52px; border-radius: var(--r-md); cursor: pointer;
  border: 2px solid var(--border); background: var(--surface); font-size: 1.5rem;
}
.avatar-picker button[aria-pressed="true"] { border-color: var(--sun); background: var(--surface-2); }

/* --- Divers -------------------------------------------------------------------- */

.section-title {
  display: flex; align-items: center; gap: .8rem;
  margin: 2.5rem 0 1rem; font-size: var(--step-2);
}
.section-title .count {
  font-size: var(--step--1); font-weight: 800; padding: .2rem .7rem;
  border-radius: var(--r-pill); background: var(--sun); color: #3A1D00;
}
.empty {
  text-align: center; padding: 3rem 1.5rem; color: var(--ink-mute);
  border: 2px dashed var(--border); border-radius: var(--r-lg);
}
.danger-zone {
  margin-top: 3rem; padding: 1.5rem; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--berry) 35%, transparent);
  background: color-mix(in srgb, var(--berry) 6%, var(--surface));
}
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.spread { justify-content: space-between; }