/* =============================================================================
 * utilitaires.css — petites règles de présentation constantes, sorties des vues
 *
 * Complète `largeurs.css` (§ 5 de la NORME, contrôle `style-vue-figé`). Ce qui
 * vit ici n'a pas de sens métier : une taille d'icône, la hauteur d'une zone de
 * saisie, un curseur. Ce qui EN A un (la couleur d'une légende d'arbitrage, le
 * trait d'un récapitulatif) vit dans la feuille de son module.
 *
 * ⚠️ AUCUNE VALEUR N'A ÉTÉ ARRONDIE NI UNIFIÉE. Cinq tailles d'icône voisines
 * coexistent (2 / 2,5 / 2,6 / 3 / 3,2 rem) parce qu'elles coexistaient déjà dans
 * les vues. Les aligner changerait le rendu — c'est une décision de design, pas
 * un effet de bord d'un déplacement de style. D'où des noms qui portent la
 * valeur : ils rendent l'écart visible au lieu de le masquer.
 *
 * ⚠️ POURQUOI CE FICHIER EST LIÉ DANS TOUS LES LAYOUTS, ET PAS IMPORTÉ DEPUIS
 * `agridigital-modern.css` : trois layouts (`login`, `webview`, `empty`) ne
 * chargent PAS ce dernier. Or `layout/webview` est posé par une dizaine de
 * contrôleurs en mode mobile, sur des vues qui utilisent bien ces classes. Un
 * style en ligne s'applique toujours ; une classe, seulement si sa feuille est
 * là. Passer l'un dans l'autre sans vérifier le layout, c'est perdre la règle
 * en silence sur les écrans mobiles.
 * ========================================================================== */

/* --- icônes d'état vide et d'en-tête --------------------------------------- */
.icone-20 { font-size: 2rem; }
.icone-25 { font-size: 2.5rem; }
.icone-26 { font-size: 2.6rem; }
.icone-30 { font-size: 3rem; }
.icone-32 { font-size: 3.2rem; }

/* --- zones de saisie longues ----------------------------------------------- */
/* ⚠️ SELECTEUR VOLONTAIREMENT LOURD, ET C'EST UNE CORRECTION MESUREE. `agridigital-modern.css`
   pose `.form-control:not(.form-control-sm):not(.form-control-lg) { min-height: 40px }`, soit
   une specificite de (0,3,0). Ecrit `.ta-100 { min-height: 100px }` (0,1,0), la regle PERD et
   la zone de saisie retombe a 40 px — mesure : 40px au lieu de 100px sur la fiche client.
   Le style en ligne, lui, gagnait toujours. On reprend donc la meme forme, plus le nom de la
   balise : (0,3,1) l'emporte sans avoir a sortir un `!important`. */
textarea.ta-100:not(.form-control-sm):not(.form-control-lg) { min-height: 100px; }
textarea.ta-150:not(.form-control-sm):not(.form-control-lg) { min-height: 150px; }
textarea.ta-350:not(.form-control-sm):not(.form-control-lg) { min-height: 350px; }
textarea.ta-650:not(.form-control-sm):not(.form-control-lg) { min-height: 650px; }

/* --- bornes de largeur sur les champs et les colonnes ---------------------- */
.mw-0     { min-width: 0; }
.mw-110   { max-width: 110px; }
.mw-180   { min-width: 180px; }
.mw-220   { max-width: 220px; }
.mw-280   { max-width: 280px; }
.mw-300   { max-width: 300px; }
.mw-340   { max-width: 340px; }
.mw-52ch  { max-width: 52ch; }
.mw-18rem { min-width: 18rem; }
.w-8rem   { width: 8rem; }

/* --- divers ----------------------------------------------------------------- */
.progress-fine     { height: 6px; }
.avatar-ligne      { height: 24px; width: auto; }
.pastille-104      { width: 104px; height: 104px; }
.spin-3rem         { width: 3rem; height: 3rem; }
.ls-05             { letter-spacing: .05em; }
.sous-titre-serre  { margin-top: -4px; }
.nowrap-table      { white-space: nowrap; }
.cliquable         { cursor: pointer; }
.poignee           { cursor: grab; }
.liste-defilante   { max-height: 200px; overflow-y: auto; }
.modal-sans-debord { overflow: hidden; }
.graph-plein       { height: auto; width: 100%; }

/* Écrans d'authentification (layout/login, qui ne charge pas le reste du cœur). */
/* ⚠️ `!important` CONSERVÉ TEL QUEL : il était dans la vue, et il y neutralise le
   positionnement de Bootstrap sur le bouton. Le retirer déplacerait l'œil. */
.oeil-mdp { top: 28px !important; }
.code-2fa { letter-spacing: 8px; font-size: 22px; font-weight: bold; }

/* Détail d'un contrat dans l'extranet : le gain affiché au producteur.
   Ce partiel n'a pas de feuille propre — il est inclus par plusieurs vues. */
.gain-positif { color: blue; font-weight: bold; }
.gain-neutre  { color: #666; font-weight: normal; }
.gain-nul     { color: red; font-weight: bold; }

/* Calage d'un bouton d'action d'une ligne de liste sur ses voisins. 1 px, et c'est la valeur qui
   etait dans la vue : l'arrondir a 0 ou 2 deplacerait le bouton. */
.mt-1px { margin-top: 1px; }

/* Bloc masque POUR DE BON, pas une bascule. Le `!important` etait dans la vue et il compte : la
   balise porte aussi `d-flex`, elle-meme `!important` chez Bootstrap. Sans lui, le bloc
   reapparaitrait. Ce n'est donc pas un etat initial qu'un script leve — c'est une rubrique
   desactivee. */
.masque-dur { display: none !important; }

/* --- pages d'erreur -------------------------------------------------------------------------- */
/* ⚠️ CES TROIS REGLES VIVENT ICI, ET PAS DANS UNE FEUILLE `erreur.css`, POUR UNE RAISON PRECISE :
   `utilitaires.css` est la seule feuille liee par TOUTES les mises en page (cf. le commentaire de
   `layout/login.phtml`). Or les deux pages d'erreur n'ont pas la meme : le 500 a sa mise en page
   autonome `layout/erreur`, le 404 garde `layout/layout`. Une feuille dediee, liee par la seule
   mise en page d'erreur, laisserait donc le 404 sans style — c'est-a-dire la page la plus
   fréquente des deux. */

/* Centrage de la carte dans la mise en page autonome du 500. `min-height: 100vh` et non `100%` :
   cette mise en page n'a ni entete ni pied, il n'y a rien d'autre pour donner une hauteur. */
.page-erreur   { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.erreur-carte  { width: 100%; max-width: 40rem; }

/* La reference d'incident : c'est un code que l'utilisateur va LIRE AU TELEPHONE ou recopier dans un
   courriel. D'ou la police a chasse fixe — un `0` ne doit pas se confondre avec un `O` — l'espacement
   des lettres, et `user-select: all`, qui selectionne les 12 caracteres d'un seul clic au lieu d'un
   double-clic qui n'en prendrait qu'une partie. */
.erreur-reference {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .12em;
    padding: .5rem 1rem;
    border: 1px dashed var(--ag-border, #e6eaef);
    border-radius: var(--ag-radius-sm, 10px);
    background: var(--ag-bg, #f6f8fa);
    color: var(--ag-text, #1a2937);
    user-select: all;
}
/* Mode sombre Velzon : les jetons `--ag-*` sont definis en clair dans `:root`, ils ne suivent donc
   pas la bascule. Sans cette regle, le cadre de la reference reste un rectangle clair sur fond
   sombre. */
[data-bs-theme="dark"] .erreur-reference {
    border-color: var(--vz-border-color, #32383e);
    background: var(--vz-tertiary-bg, #262b30);
    color: var(--vz-body-color, #ced4da);
}

/* ------------------------------------------------------------------------------------------
   Bloc « Sociétés » d'une fiche tiers, en LECTURE SEULE.

   Le rattachement se LIT par tout le monde et ne se MODIFIE que par un administrateur : plutôt
   que d'éteindre le bloc — ce qui affichait « Chargement impossible. » et se lisait comme une
   panne — on le grise. La sécurité est côté serveur (`TiersSocieteController::saveAction`) ;
   ceci n'est que la lisibilité.
   ------------------------------------------------------------------------------------------ */
.tsoc-lecture-seule {
    opacity: .65;
}
.tsoc-lecture-seule .form-check-label {
    cursor: default;
}