/* Utilitaires communs à toutes les pages, en complément de ceux de Bootstrap (text-center, d-flex,
   mt-1...). Ils remplacent les attributs style="..." : la CSP (style-src 'self', sans
   'unsafe-inline') interdit les styles en ligne. Valeur calculée au rendu (couleur d'une figure,
   largeur d'une barre) : css() de modules/styles-calcules.js.
   Nom = propriété abrégée + valeur : fs-078 = font-size .78rem, w-70px = width 70px.
   !important comme les utilitaires de Bootstrap : l'emporte sur les règles des composants, comme
   le faisait l'attribut style. */

/* Taille du texte */
.fs-060 { font-size: .6rem !important; }
.fs-068 { font-size: .68rem !important; }
.fs-070 { font-size: .7rem !important; }
.fs-072 { font-size: .72rem !important; }
.fs-075 { font-size: .75rem !important; }
.fs-078 { font-size: .78rem !important; }
.fs-080 { font-size: .8rem !important; }
.fs-085 { font-size: .85rem !important; }
.fs-11rem { font-size: 1.1rem !important; }
.fs-13px { font-size: 13px !important; }
.fs-08em { font-size: .8em !important; }

/* Interligne, espacement des lettres */
.lh-155 { line-height: 1.55 !important; }
.ls-06 { letter-spacing: .06em !important; }

/* Couleurs (gris de la palette sombre de l'éditeur) */
.text-gris-400 { color: #9ca3af !important; }
.text-gris-500 { color: #6b7280 !important; }
.text-vert-400 { color: #4ade80 !important; }
.text-ambre-400 { color: #fbbf24 !important; }

/* Largeurs, hauteurs */
.w-28px { width: 28px !important; }
.w-40pct { width: 40% !important; }
.w-36px { width: 36px !important; }
.w-44px { width: 44px !important; }
.w-52px { width: 52px !important; }
.w-56px { width: 56px !important; }
.w-60px { width: 60px !important; }
.w-70px { width: 70px !important; }
.w-80px { width: 80px !important; }
.w-90px { width: 90px !important; }
.w-100px { width: 100px !important; }
.w-110px { width: 110px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-160px { width: 160px !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-16px { min-width: 16px !important; }
.min-w-34px { min-width: 34px !important; }
.min-w-90px { min-width: 90px !important; }
.min-w-120px { min-width: 120px !important; }
.min-w-130px { min-width: 130px !important; }
.min-w-300px { min-width: 300px !important; }
.min-w-7rem { min-width: 7rem !important; }
.max-w-72px { max-width: 72px !important; }
.max-w-150px { max-width: 150px !important; }
.max-w-200px { max-width: 200px !important; }
.max-w-260px { max-width: 260px !important; }
.max-w-280px { max-width: 280px !important; }
.max-w-320px { max-width: 320px !important; }
.max-w-520px { max-width: 520px !important; }
.max-w-8em { max-width: 8em !important; }
.h-4px { height: 4px !important; }
.h-8px { height: 8px !important; }
.min-h-220px { min-height: 220px !important; }
.max-h-140px { max-height: 140px !important; }
.max-h-180px { max-height: 180px !important; }
.max-h-200px { max-height: 200px !important; }
.max-h-220px { max-height: 220px !important; }

/* Marges intérieures et extérieures, écarts */
.p-14px { padding: 14px !important; }
.px-10px { padding-inline: 10px !important; }
.py-2px { padding-block: 2px !important; }
.py-12px { padding-block: 12px !important; }
.mt-12px { margin-top: 12px !important; }
.mt-20px { margin-top: 20px !important; }
.mb-12px { margin-bottom: 12px !important; }
.gap-6px { gap: 6px !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.gap-14px { gap: 14px !important; }

/* Divers */
.flex-1 { flex: 1 !important; }
.cursor-pointer { cursor: pointer !important; }
.ws-pre-wrap { white-space: pre-wrap !important; }
.vide-icone { font-size: 2rem; opacity: .4; }   /* icône d'un état vide (« Aucun plan ») */
.hors-ecran { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* champ piège à robots */

/* Bandeau « nouvelle version » (modules/version.js) : en haut au centre, au-dessus des modales et toasts */
.bandeau-version { position: fixed; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 1100;
  display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 2rem); }

/* Environnement de développement (APP_ENV=dev, data-env posé par serveHtml() de index.php) :
   léger trait jaune fluo en haut de chaque page, au-dessus de tout et sans gêner les clics. */
html[data-env="dev"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #e6ff00;
  z-index: 2147483647;
  pointer-events: none;
}