.reglages-tete { margin-top: var(--e4); }

/* L'origine des valeurs, dite et non supposée. Sans cette ligne, une panne de Notion
 * laisserait croire que l'écran montre la valeur effective alors qu'il montre la
 * dernière connue — le mensonge exact que cet écran doit éviter. */
.reglages-source {
  font-size: var(--t-micro);
  color: var(--encre-pale);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reglages-panne {
  padding: 12px 14px;
  background: var(--refus-fond);
  border-left: 3px solid var(--refus-trait);
  color: var(--refus-encre);
  font-size: var(--t-petit);
  line-height: 1.5;
}

.reglages-groupe { margin-top: var(--e7); }

.reglages-groupe-tete {
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--trait-moyen);
}

.reglages-groupe-sous {
  margin-top: 6px;
  font-size: var(--t-petit);
  color: var(--encre-douce);
  line-height: 1.55;
  max-width: 68ch;
}

/* Une ligne par réglage. Empilé sur mobile, en deux colonnes au-delà : l'explication
 * à gauche, le geste à droite. Le geste ne passe jamais AVANT l'explication dans
 * l'ordre du document — un interrupteur qu'on atteint avant d'avoir lu ce qu'il
 * déclenche est un interrupteur qu'on actionne sans savoir. */
.reglage {
  display: grid;
  gap: var(--e3);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--trait);
}

.reglage-libelle {
  font-size: var(--t-texte);
  font-weight: 600;
  color: var(--encre);
}

.reglage-explication {
  margin-top: 4px;
  font-size: var(--t-petit);
  color: var(--encre-douce);
  line-height: 1.55;
  max-width: 62ch;
}

/* Ce que le réglage NE fait pas. En italique et non en alerte : c'est une précision,
 * pas un problème — mais elle doit se lire au moment de décider. */
.reglage-avertissement {
  margin-top: 6px;
  font-size: var(--t-micro);
  color: var(--encre-pale);
  font-style: italic;
  line-height: 1.5;
  max-width: 62ch;
}

.reglage-illisible {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--refus-fond);
  color: var(--refus-encre);
  font-size: var(--t-micro);
  line-height: 1.5;
}

.reglage-agir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* « actif » / « éteint », écrit. Un interrupteur dont l'état ne se lit qu'à la
 * couleur du bouton se lit à l'envers une fois sur deux. */
.reglage-etat {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-pale);
  padding: 4px 9px;
  background: var(--f-neutre-pale);
}

.reglage-etat-actif {
  background: var(--f-vert-pale);
  color: var(--f-vert-texte);
}

.reglage-forme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.champ-reglage {
  padding: 9px 10px;
  border: 1px solid var(--trait-moyen);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-petit);
  /* Assez large pour « 3,7,15 » sans occuper la ligne : un champ pleine largeur
   * repousserait le bouton en dessous et ferait croire à deux gestes. */
  width: 9ch;
}

.champ-nombre { width: 7ch; }

/* `input[type=time]` ignore la largeur en `ch` sur certains navigateurs et rend un
 * champ deux fois trop large. Fixé en `em`, où il se comporte. */
input[type="time"].champ-reglage { width: 8em; }

.reglage-unite {
  font-size: var(--t-micro);
  color: var(--encre-pale);
}

/* Les sept jours et les deux choix : des `fieldset` sans bordure. La bordure par
 * défaut du navigateur dessinerait un cadre que rien d'autre sur cet écran n'a. */
.jours, .choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  margin: 0;
}

.choix { gap: 14px; }

/* La légende porte le nom du réglage pour les lecteurs d'écran : sept cases nommées
 * « lun » à « dim » ne disent pas de quoi elles règlent les jours. Masquée à l'œil,
 * qui a le libellé juste à gauche — et masquée sans `display:none`, qui la
 * retirerait aussi de l'arbre d'accessibilité. */
.jours-legende {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jour-case, .choix-case {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* La cible tactile fait la hauteur d'un doigt : ces cases se cochent sur un
   * téléphone, entre deux cours. */
  min-height: 2.5rem;
  padding: 0 6px;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  cursor: pointer;
}

.choix-case {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-petit);
}

.reglage-defaut {
  font-size: var(--t-micro);
  color: var(--encre-pale);
  line-height: 1.5;
}

.reglage-origine { font-style: italic; }

/* La confirmation d'un interrupteur qui écrit vers l'extérieur. En accent, dépliée
 * sur place : Chris doit lire ce qui partira et vers qui AVANT de le déclencher d'un
 * tap. Elle n'apparaît que dans le sens de l'allumage. */
.reglage-confirme {
  flex-basis: 100%;
  padding: 12px 14px;
  background: var(--surface-choisie);
  border-left: 3px solid var(--accent);
}

.reglage-confirme-texte {
  font-size: var(--t-petit);
  color: var(--encre);
  line-height: 1.55;
  max-width: 62ch;
}

.reglage-confirme-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.reglages-ailleurs {
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: 1px solid var(--trait-moyen);
}

.reglages-ailleurs .reglages-groupe-sous { margin-top: var(--e3); }

/* Deux colonnes seulement quand il y a de la place. En dessous, l'explication et le
 * geste s'empilent — l'inverse serait un champ de 4 ch à côté d'un paragraphe. */
@media (min-width: 720px) {
  .reglage {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--e5);
  }

  .reglage-agir { justify-content: flex-end; }
  .reglage-defaut { flex-basis: 100%; text-align: right; }
  .reglage-confirme-boutons { justify-content: flex-end; }
}

/* --- Réglages -------------------------------------------------------- */

.tete-reglages { margin-bottom: var(--e6); }

.reglage-dire { color: var(--encre-douce); font-size: 0.88rem; }

.reglage-forme-jours { display: flex; flex-wrap: wrap; gap: 0.4rem; }