/* ==========================================================================
   Aide à la rédaction (§11).
   Aucune couleur écrite ici : uniquement des variables de tokens.css.
   ========================================================================== */

/* --- Le bandeau posé sous un champ de saisie -------------------------------
   Volontairement discret : l'assistance est une commodité, pas l'action
   principale du formulaire. Un bouton plein la mettrait au même rang que
   « Enregistrer », et l'on finirait par cliquer dessus par réflexe. */

.assistance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 2);
  margin-top: calc(var(--pas) * 2);
}

.assistance__mention {
  flex: 1 1 12rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--texte-tenu);
}

/* --- La comparaison avant / proposition ------------------------------------
   Le §11 impose que « le texte d'origine reste affiché à côté ». Deux volets
   côte à côte dès qu'il y a la place, l'un au-dessus de l'autre sur un
   téléphone — et dans cet ordre : l'original d'abord. Sur 375 px, ce qui est
   lu en premier doit être ce que la personne a écrit, pas la proposition. */

.comparaison {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--pas) * 3);
}

@media (min-width: 768px) {
  .comparaison { grid-template-columns: 1fr 1fr; }
}

.comparaison__volet {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 4);
  background: var(--carte-douce);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
}

/* Le volet de la proposition se distingue du sien, sans se donner l'air d'être
   la bonne réponse : une bordure appuyée, pas un aplat de couleur. */
.comparaison__volet--proposition { border-color: var(--primaire); }

.comparaison__titre {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* --- Le périmètre du §11, dans les réglages --------------------------------
   Deux listes côte à côte, distinguées par une arête et non par un fond : ce
   qui est interdit doit se repérer d'un coup d'œil sans que la carte prenne
   l'air d'une alerte — il n'y a rien d'anormal à lire cette liste. */

.perimetre { border-left: 3px solid var(--bordure); }
.perimetre--autorise { border-left-color: var(--succes); }
.perimetre--interdit { border-left-color: var(--danger); }

/* `pre-wrap` : les sauts de ligne d'une appréciation ou d'un e-mail sont
   signifiants. Les aplatir donnerait à comparer deux textes dont l'un n'est
   pas celui qui sera enregistré. */
.comparaison__texte {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--texte);
}