/* 6-reglages.css — ce qu'on règle et ce qu'on écrit : la matrice des modules, la vision, l'édition en
 * place, la connexion, les propositions, les jalons.
 *
 * ── L'ORDRE COMPTE ─────────────────────────────────────────────────────────────────
 * Ce fichier est une TRANCHE de l'ancien app.css, découpé en neuf morceaux contigus. Le
 * chiffre en tête du nom est son rang de cascade, et ce n'est pas de la décoration : lus
 * dans l'ordre, les neuf fichiers valent exactement l'ancien, à l'octet près. Les intervertir
 * change ce qui l'emporte — et une cascade inversée ne se voit pas, elle se constate trois
 * jours plus tard sur un écran précis.
 *
 * Deux raisons de ne PAS regrouper par thème en réordonnant : les paires
 * `@media`/`@container` se redoublent (chacune doit rester APRÈS la @media qu'elle double),
 * et `container-type` définit l'unité de mesure de tout ce qu'il contient. Le découpage
 * contigu rend ces deux pièges impossibles au lieu de demander qu'on y pense.
 *
 * `tests/test_feuilles_css.py` vérifie que les quatre points de chargement listent bien ces
 * neuf fichiers, dans ce rang.
 */

/* — réglages : la matrice d'un produit —
 *
 * Ces styles avaient disparu : je les avais écrits juste avant le bloc de navigation, et
 * une réécriture de ce bloc les a emportés avec lui. L'écran s'affichait alors en liste à
 * puces brute — rien n'était cassé au sens technique, ce qui est précisément ce qui rend ce
 * genre de perte difficile à voir dans un diff.
 *
 * Un interrupteur, pas une case à cocher : à cette taille la cible est franche et l'état se
 * lit de loin. C'est l'écran qu'on ouvre debout, pour changer d'avis en dix secondes. */

lane-settings h3 {
  font: var(--w-fort) var(--t2)/var(--lh-titre) var(--font-body);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--mist);
  margin: var(--s5) 0 var(--s3);
}

lane-settings h3:first-child { margin-top: 0; }

lane-settings em {
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  opacity: .65;
}

.switches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.switches li {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.switches div { flex: 1; min-width: 0; }

.switches b {
  display: block;
  font: var(--w-fort) var(--t4)/var(--lh-ui) var(--font-body);
  /* Le libellé et son explication se touchaient, faute d'espacement : « Design systemjetons,
   * composants… ». Deux blocs, pas deux morceaux de phrase. */
  margin-bottom: var(--s0);
}

.switches small {
  display: block;
  color: var(--mist);
  font-size: var(--t2);
  line-height: var(--lh-ui);
}

/* L'interrupteur. Le pouce se déplace, l'état se lit de loin.
 *
 * Sa géométrie est EXACTE et se tient en trois nombres : hauteur (--tap-min = 32), moins le
 * rembourrage (2 × 3) et la bordure (2 × 1), donne 24 — la pastille. La course vaut la
 * largeur intérieure (54 − 8 = 46) moins la pastille, soit 22. Changer l'un des trois sans
 * les deux autres laisse la pastille flotter dans son rail ou dépasser au bout : rien ne
 * casse, l'interrupteur a juste l'air mal fini. */
.sw {
  flex: 0 0 auto;
  width: 54px;
  height: var(--tap-min);
  min-height: var(--tap-min);
  /* charte-libre: la densité déformerait le rail. Ce rembourrage n'est pas un espacement,
     c'est un terme du calcul ci-dessus — en `--s0`, « Aérée » le porterait à 3 px sans
     toucher à la pastille, qui déborderait. Un jeton juste au mauvais endroit. */
  padding: 3px;
  display: flex;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease;
}

.sw span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mist);
  transition: transform .18s ease, background .18s ease;
}

.sw.on { background: var(--accent-bg); border-color: var(--accent); }
.sw.on span { background: var(--accent); transform: translateX(22px); }


/* — la vision —
 * Un bloc de texte, pas une carte d'action : elle ne se coche pas, elle s'écrit et se relit.
 * Sa taille et son cadre la distinguent des jalons qui la suivent — un but n'est pas une
 * tâche, et les mettre au même format les confondrait. */
.vision {
  display: block;
  width: 100%;
  min-height: 0;          /* annule button{min-height:var(--tap)} = 44px */
  /* Serré en haut et en bas : la vision tient en deux lignes, un encart haut la ferait
   * flotter au milieu de son propre cadre. Le blanc qui restait après ce réglage ne venait
   * pas d'ici mais du gabarit — `white-space: pre-wrap` préservait le saut de ligne et
   * l'indentation du code source (voir lane-pillar.js). */
  padding: var(--s3) var(--s4);
  text-align: left;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  font: var(--w-moyen) var(--t5)/var(--lh-corps) var(--font-body);
  white-space: pre-wrap;
}

.vision i { color: var(--accent-ink); font-style: normal; opacity: .85; }

/* — édition en place —
 * Une modale du navigateur arrache l'attention hors de la page, impose son propre style et
 * se ferme au moindre geste de côté. Le champ prend donc la place exacte de ce qu'il
 * remplace : on voit ce qu'on modifie, dans son contexte. */

.editing { display: grid; gap: var(--s2); }

.txt-edit, .goal-edit, .bl-edit, .say-edit, .prop-edit {
  width: 100%;
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  font: var(--w-normal) var(--t5)/var(--lh-corps) var(--font-body);
  /* iOS agrandit la page quand un champ fait moins de 16 px. Le zoom étant désactivé, la
   * page resterait agrandie sans moyen d'y revenir. */
  font-size: var(--t-saisie);
  resize: vertical;
  -webkit-appearance: none;
}

.txt-edit:focus, .goal-edit:focus, .bl-edit:focus,
.say-edit:focus, .prop-edit:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* `.name-edit` n'a plus de forme à lui. Elle en avait une ici, écrite pour Réglages : le
 * champ y partageait sa ligne avec un libellé, d'où `flex: 0 1 40%` et un `text-align: right`
 * qui alignait la valeur sur la colonne de droite, comme les autres réglages.
 *
 * Ce contexte n'existe plus — le nom de marque a rejoint Produit, en `label.champ`. La règle,
 * elle, visait `.name-edit` SANS parent : elle a donc continué de s'appliquer au champ
 * déménagé, et de l'aligner à droite dans un écran où plus rien ne justifiait cet alignement.
 * Une surcharge `.ds .name-edit` la corrigeait tant que le champ vivait dans la liste ; sorti
 * de la liste, il n'avait plus que la règle orpheline.
 *
 * Le champ prend maintenant `.champ input` (1-socle), la forme commune à toute saisie. C'est
 * ce qu'annonçait le déplacement : une forme existante, pas une variante de plus.
 */

.edit-actions { display: flex; gap: var(--s2); }
.edit-actions button { flex: 1; margin: 0; }


/* Une photo occupe toute la tuile, recadrée au centre : un visage rétréci dans un coin ne
 * se reconnaît pas, et c'est précisément ce qu'on lui demande. */
.logo-art.photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--panel2); }
.logo-art.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* — connexion —
 * Une page, un bouton, rien à lire. Tout ce qu'on ajouterait ici serait un obstacle de plus
 * entre quelqu'un et son propre outil. */
.login {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--s5);
  text-align: center;
}

/* Les liens légaux sous le bouton de connexion. Discrets mais lisibles : les cacher
 * reviendrait à ne pas les avoir, et ils existent pour être lus AVANT de se connecter. */
.legal-liens { margin-top: var(--s5); font-size: var(--t3); color: var(--mist); }
.legal-liens a { color: var(--mist); }
.legal-liens a:hover { color: var(--text); }

/* Le lien vers la vitrine publique, sous le bouton de connexion. Il porte l'accent et non
 * `--mist` : contrairement aux liens légaux, celui-là est fait pour être suivi — c'est le
 * seul chemin qu'un inconnu a pour voir le produit avant de confier son compte Google.
 * Un `<a>` sans règle prendrait le bleu du navigateur, qui n'est la couleur d'aucune charte
 * et que le contrôle du design system compte comme une couleur hors tokens. */
.login-demo { margin-top: var(--s4); font-size: var(--t4); }
.login-demo a { color: var(--accent-ink, var(--accent)); }

.login .tile { width: 76px; height: 76px; border-radius: var(--radius-lg); }
.login .tile img { width: 46px; height: 46px; }
.login .tile i { font-size: var(--t8); color: var(--accent); }
.login h1 { font-size: var(--t8); letter-spacing: -.03em; }
.login p { margin: 0; color: var(--mist); }



/* — les propositions d'une relecture —
 *
 * Une carte par proposition, et l'avant AU-DESSUS de l'après : c'est l'ordre dans lequel on
 * lit un changement. Les deux boutons ont le même poids visuel — écarter est une décision
 * aussi légitime qu'appliquer, et un « Appliquer » plein face à un « Écarter » fantôme
 * pousse à appuyer sans lire. */
.props { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }

.prop {
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s2);
}

.prop p { margin: 0; }
.prop-quoi { font-size: var(--t4); }

/* L'ancien texte, barré et sourd : on doit voir CE QU'ON PERD sans avoir à le relire. */
.prop-avant {
  color: var(--mist);
  font-size: var(--t3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Le texte proposé est un BOUTON : on l'ouvre pour le retoucher avant d'appliquer. Il doit
 * se lire comme du texte — sans fond ni bordure, aligné à gauche, sur toute la largeur. */
.prop-apres {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  font-size: var(--t4);
  white-space: pre-wrap;
  cursor: pointer;
}


.prop-acts { display: flex; gap: var(--s2); justify-content: flex-end; }

/* — jalons —
 * Un seul jalon compte : le premier non atteint. Les autres n'ont pas commencé, et les
 * dessiner du même poids obligeait à relire la liste chaque matin pour retrouver par où
 * reprendre. D'où deux formes distinctes — une carte pleine, puis des lignes sourdes.
 * Le sélecteur « à faire / en cours / fait » a disparu avec ça : l'ordre disait déjà où on
 * en était, et deux mécanismes pour la même information finissent par se contredire. */

.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.goal-now {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--lv, var(--accent));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Le titre est un BOUTON : on l'ouvre pour le corriger, là où il est écrit. Il doit donc
 * se lire comme du texte et pas comme une commande — sans fond, sans bordure, aligné à
 * gauche, et à la ligne comme une phrase. */
.goal-titre {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.goal-now .goal-titre { font: var(--w-gras) var(--t6)/var(--lh-titre) var(--font-head); }

/* Le champ d'édition prend toute la largeur de la carte, y compris là où le titre
 * partageait sa ligne avec le numéro et les flèches. */
.goal-edition { grid-column: 1 / -1; flex: 1; min-width: 0; }