/* ==========================================================================
   GA Settings — écran Paramètres de Garde Alternée (étape 23d, #836)

   Composant propre à l'application, sur les conventions de la bibliothèque
   (BEM, tokens seuls, sans imbrication ni :has()). Référence :
   projet/design/Comptes et notifications.dc.html (#parametres : Bureau
   réglages communs, Bureau mon compte, Téléphone paramètres).

   Structure BEM :
   - .settings                 → L'écran (à la place du planning, voir app.css)
     - .settings__bar          → Téléphone : « ‹ Planning » ou « ‹ Paramètres » · titre
     - .settings__nav          → Bureau : navigation de 280 px en deux groupes ;
                                 téléphone : la liste (carte du compte, lignes
                                 avec valeur et chevron, Se déconnecter, version)
     - .settings__list--current → Groupe de la page affichée (fond bg, bureau)
     - .settings__page         → Réglages communs (formulaire) ou Mon compte
     - .settings__foot         → Annuler · Enregistrer pour les deux
   - .set-card                 → Carte surface de 16 px de rayon
     - .set-card--current      → Téléphone : la seule carte affichée
   - .swatch                   → Pastille de couleur (radio) ; .swatch-other :
                                 « Autre… », sélecteur de couleur du système
   - .set-row, .set-vac        → Ligne « Vacances scolaires » et aperçu des dates
   - .set-form                 → Formulaire ouvert dans une carte (e-mail, mot de passe)

   Accessibilité :
   - Pastilles : vrais <input type="radio"> nommés (« Bleu ardoise ») ; face
     dessinée par le frère de l'input, sans :has().
   - Les cibles font 44 px ; le focus est visible sur la face.
   ========================================================================== */

.settings {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  background-color: var(--color-bg);
}

.settings[hidden] { display: none; }

.settings__bar { display: none; }

/* --------------------------------------------------------------------------
   NAVIGATION (bureau)
   -------------------------------------------------------------------------- */
.settings__nav {
  position: sticky;
  top: 68px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
  height: calc(100dvh - 68px);
  padding: 24px 16px;
  overflow-y: auto;
  border-right: var(--border-hair) solid var(--color-border);
  background-color: var(--color-surface);
}

.settings__title {
  margin: 0;
  padding: 0 10px 14px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  line-height: 1.1;
}

.settings__title:focus,
.settings__page-title:focus,
.set-card__title:focus { outline: none; }

.settings__me,
.settings__logout,
.settings__version,
.settings__item-value,
.settings__chev { display: none; }

.settings__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 14px 10px 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* L'intitulé passe sur deux lignes (maquette) pour laisser sa place au prénom */
.settings__group > span:first-child { flex: 1 1 0; min-width: min-content; }

/* Prénom vraiment trop long pour la colonne : coupé (…) en dernier recours */
.settings__group-sub {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  text-align: left;
  cursor: pointer;
}

.settings__item:hover { background-color: var(--color-surface-hover); }

/* Groupe de la page affichée : toutes ses entrées sur fond bg (maquette) */
.settings__list--current .settings__item { background-color: var(--color-bg); }

.settings__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -2px;
}

.settings__item-text { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   PAGES
   -------------------------------------------------------------------------- */
.settings__page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 20px 32px 0;
}

.settings__page[hidden] { display: none; }

.settings__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.settings__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.settings__page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.1;
}

.settings__page-sub {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.settings__last {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: right;
}

.settings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.settings__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Formulaire déplié dans une carte : ses voisines ne s'étirent pas sur toute sa hauteur */
.settings__grid--form { align-items: start; }

.settings__error { text-align: right; }

/* Collé en bas : avec cinq cartes, la page défile sur un écran de 820 px */
.settings__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 12px 0 20px;
  background-color: var(--color-bg);
}

.settings__foot .btn { min-height: var(--control-height); padding: 0 20px; }

.settings__links { display: flex; gap: 20px; margin: 0; padding-bottom: 24px; }

.settings__link {
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   CARTES
   -------------------------------------------------------------------------- */
.set-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.settings__grid--3 .set-card { gap: 10px; padding: 20px; }

.set-card__title { margin: 0; }

.set-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.set-card__note {
  display: block;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.set-card__line { display: flex; align-items: center; gap: 12px; }

.set-card__big {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-card__dots { font-weight: var(--font-weight-normal); letter-spacing: 0.12em; }

.set-card__pending {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.set-card__pending strong { overflow-wrap: anywhere; }

.set-btn { flex: none; padding: 0 16px; font-size: 0.875rem; }

/* La case de la bibliothèque est inline-flex : dans une carte, son texte revient à la ligne */
.set-card .checkbox { display: flex; }
.set-card .checkbox > span:last-child { flex: 1; min-width: 0; }
.set-card .checkbox .checkbox__box { flex: none; }

.set-check-text { display: flex; flex-direction: column; gap: 2px; }

/* --------------------------------------------------------------------------
   PARENTS ET COULEURS
   -------------------------------------------------------------------------- */
.set-parent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.set-parent + .set-parent { margin-top: 4px; }

.set-parent__row { display: flex; align-items: center; gap: 10px; }

.set-parent__label { flex: none; width: 76px; font-size: 0.875rem; }

.set-parent__row .input { flex: 1; min-width: 0; height: var(--tap-min); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 80px;
}

/* --swatch : couleur de la pastille, posée en style par renderSwatches */
.swatch__face,
.swatch-other { --swatch: transparent; }

.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
}

.swatch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch__face {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--swatch);
  pointer-events: none;
}

/* Anneau surface puis encre autour de la couleur choisie (maquette) */
.swatch__input:checked + .swatch__face,
.swatch-other--on .swatch-other__dot {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4.5px var(--color-text);
}

.swatch__input:focus-visible + .swatch__face {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 6px;
}

.swatch-other {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--tap-min);
  margin-left: 4px;
  padding: 0 14px 0 10px;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.swatch-other--on { border: var(--border-strong) solid var(--color-text); }

.swatch-other__dot {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--swatch, transparent);
}

.swatch-other--on .swatch-other__dot { border: none; }

/* Le sélecteur du système couvre la pastille : toucher l'ouvre, le focus reste natif */
.swatch-other__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.swatch-other__input:focus-visible ~ .swatch-other__dot {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   PASSAGES, VACANCES, COMPTEUR
   -------------------------------------------------------------------------- */
.set-time__label { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; }

.set-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); }
.set-dot--p1 { background-color: var(--parent-1); }
.set-dot--p2 { background-color: var(--parent-2); }

.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: var(--border-hair) solid var(--color-border);
}

.set-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-md);
}

.set-vac {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.set-vac[hidden] { display: none; }

.set-vac__title { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }

.set-vac__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-vac__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hair) solid var(--color-border);
  font-size: 0.875rem;
}

.set-vac__dates { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.set-vac__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* --------------------------------------------------------------------------
   FORMULAIRE DANS UNE CARTE (e-mail, mot de passe)
   -------------------------------------------------------------------------- */
.set-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: var(--border-hair) solid var(--color-border);
}

.set-form[hidden] { display: none; }

.set-form .field { gap: 6px; }

.set-form__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* --------------------------------------------------------------------------
   TABLETTE PORTRAIT (700-1099 px) — en-tête de 124 px, une colonne de cartes
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .settings { grid-template-columns: 260px minmax(0, 1fr); }
  .settings__nav { top: 124px; height: calc(100dvh - 124px); }
  .settings__page { min-height: calc(100dvh - 124px); padding: 20px 24px 0; }
  .settings__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .settings__last { text-align: left; }
  .settings__grid,
  .settings__grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   TÉLÉPHONE (< 700 px) — la liste, puis une carte à la fois (maquette
   Téléphone paramètres) ; .settings--sub = une carte ouverte
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .settings { display: flex; flex-direction: column; align-items: stretch; min-height: 100dvh; }

  .settings__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 10px 6px;
    padding-top: calc(10px + env(safe-area-inset-top));
    border-bottom: var(--border-hair) solid var(--color-border);
    background-color: var(--color-surface);
  }

  .settings__back { gap: 6px; padding: 0 10px; font-size: var(--font-size-md); }

  .settings__bar-title {
    flex: 1;
    padding-right: 8px;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    text-align: right;
  }

  .settings__nav {
    position: static;
    gap: 16px;
    height: auto;
    padding: 14px 12px 24px;
    overflow: visible;
    border-right: none;
    background-color: transparent;
  }

  .settings__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .settings__me {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .settings__me-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--font-size-base); }

  .settings__me-mail {
    overflow: hidden;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings__group { justify-content: space-between; margin-bottom: -10px; padding: 0 6px; }

  .settings__group-sub { letter-spacing: 0; text-transform: none; }

  .settings__list { gap: 0; border-radius: var(--radius-lg); background-color: var(--color-surface); }

  .settings__list li + li .settings__item { border-top: var(--border-hair) solid var(--color-border); }

  .settings__item,
  .settings__list--current .settings__item {
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 0;
    background-color: transparent;
    font-size: var(--font-size-base);
  }

  .settings__item-value { display: inline; font-size: 0.875rem; color: var(--color-text-muted); }
  .settings__chev { display: block; flex: none; }

  .settings__logout {
    display: inline-flex;
    min-height: var(--control-height);
    border-color: var(--color-text);
  }

  .settings__version {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
  }

  .settings__page { min-height: 0; padding: 14px 12px 0; }

  /* Liste affichée : aucune page ; carte ouverte : plus de liste, rien que la carte */
  .settings__page,
  .settings--sub .settings__nav,
  .settings__head,
  .settings__links,
  .set-card { display: none; }

  .settings--sub .settings__page:not([hidden]) { display: flex; flex: 1; }
  .settings--sub .set-card--current { display: flex; padding: 16px; }

  .set-card__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .settings__foot {
    margin: auto -12px 0;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: var(--border-hair) solid var(--color-border);
    background-color: var(--color-surface);
  }

  .settings__foot > .btn--secondary,
  .settings[data-sub="specials"] .settings__foot { display: none; }
  .settings__foot > .btn--primary { flex: 1; min-height: var(--control-height-lg); }
  .settings__error { text-align: left; }

  .swatches { margin-left: 0; }
  .set-parent__label { width: 64px; }
}