/* =============================================================================
   LW MENU — FEUILLE DE COMPOSANTS
   -----------------------------------------------------------------------------
   Le contrat de jetons vit dans app/assets/tailwind/application.css et ne se
   rouvre pas (AD-24). Cette feuille-ci porte les regles du produit, et elle ne
   contient AUCUNE valeur en dur : une hexadecimale, une ombre, une bordure, un
   rayon ou une duree ecrits ici seraient un bug au meme titre qu'une requete
   N+1 (UX-DR2). Tout passe par un jeton, nomme par son role.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Texte de substitution des champs — UX-DR111, interdit dur.
   -----------------------------------------------------------------------------
   Le couple `texte-4` sur `surface-creuse` vaut 4,28:1 en regime sombre et
   4,40:1 en clair : sous AA dans les deux. Et il n'est PAS exempte — WCAG 1.4.3
   n'exempte que les composants INACTIFS, or un texte de substitution vit dans un
   champ ACTIF. C'est `texte-3` qu'on pose (6,91:1 / 6,25:1 sur creuse).

   Sans cette regle, le navigateur applique son propre gris et le contrat n'est
   tenu par rien : « Karine, dans le bus, a une main, lisait "Votre nom" et
   "0694 00 00 00" sous AA ».
   -------------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder {
  color: var(--color-texte-3);
  opacity: 1; /* Firefox eclaircit le texte de substitution par defaut, ce qui
                 abaisserait un rapport de contraste deja mesure. */
}

/* -----------------------------------------------------------------------------
   Largeur de la colonne de contenu — UX-DR113.
   -----------------------------------------------------------------------------
   « A partir de 768 px, la colonne de contenu SE CENTRE ET SE BORNE ; elle ne
   s'etale pas. Aucune barre laterale, aucun tableau, aucune vue bureau. »

   ⚠️ Le contrat de jetons ne porte AUCUNE largeur de colonne de contenu — il
   n'a que `--spacing-largeur-colonne-quantite` et `-reserve`, qui sont des
   colonnes de tableau de quantites. Et le contrat NE SE ROUVRE PAS ici
   (AD-24) : une garde de la story 1.1 verifie que la feuille versee est
   identique a la source. La valeur vit donc dans cette feuille de composants.

   La valeur n'est pas inventee : c'est le point de rupture nomme du dossier
   (« 480 - 767 px »), donc la borne du palier au-dela duquel la colonne cesse
   de grandir. Candidate a entrer au contrat en v1.2.
   -------------------------------------------------------------------------- */
:root {
  --largeur-lecture: 480px;
}

/* ⚠️ Nommee `colonne-lecture` et NON `max-w-lecture` : une classe qui imite la
   forme d'un utilitaire Tailwind laisserait croire qu'elle vient du contrat de
   jetons. Elle n'en vient pas — elle vit ici, et c'est visible. */
.colonne-lecture {
  max-width: var(--largeur-lecture);
}

/* -----------------------------------------------------------------------------
   Deux mesures prescrites par DESIGN.md, que le contrat de jetons ne nomme pas.
   -----------------------------------------------------------------------------
   UX-DR2 : « une hexadecimale, une ombre, UNE BORDURE, un rayon ou une duree
   dans un partial ERB est un bug au meme titre qu'une requete N+1. »

   Ces deux valeurs viennent de DESIGN.md § Composants :
     - « Libelle ... marge basse 6 px » et « Aide sous le champ ... marge haute
       6 px ». L'echelle d'espacement du contrat va de 2 px a 4 px puis 8 px :
       AUCUN jeton ne vaut 6. La mesure est donc nommee ici.
     - « bord bas 3 px {colors.accent-actif} qui lui donne son relief physique ».
       La couleur est un jeton ; l'epaisseur n'en a pas.

   Elles vivent dans cette feuille de composants et non dans le contrat, parce
   que le contrat NE SE ROUVRE PAS (AD-24) — une garde de la story 1.1 verifie
   que la feuille versee est identique a la source. Candidates a y entrer en v1.2.
   -------------------------------------------------------------------------- */
:root {
  --marge-libelle: 6px;
  --epaisseur-relief-bouton: 3px;
}

.mb-libelle { margin-bottom: var(--marge-libelle); }
.mt-libelle { margin-top: var(--marge-libelle); }

.border-b-accent {
  border-bottom: var(--epaisseur-relief-bouton) solid var(--color-accent-actif);
}