Site personnel courcellematthi.eu

2026-08-05 22:40:03 +02:00
commit df12d21165
39 changed files with 4503 additions and 0 deletions
@@ -0,0 +1,67 @@
+/* ==========================================================================
+   utilities.css — Classes utilitaires
+   --------------------------------------------------------------------------
+   Dernière couche de la cascade : ces classes doivent pouvoir surcharger
+   un composant sans recourir à !important.
+   Volontairement peu nombreuses — une bibliothèque utilitaire complète
+   n'aurait pas de sens sans outil de purge.
+   ========================================================================== */
+
+@layer utilities {
+
+  /* ======================================================================
+     MASQUAGE VISUEL ACCESSIBLE
+     Retire l'élément de l'affichage tout en le laissant lisible par les
+     lecteurs d'écran. À utiliser pour les libellés, les intitulés de
+     sections de navigation, les annonces de contexte.
+
+     Ne PAS utiliser display:none ni visibility:hidden pour cet usage :
+     ces propriétés retirent aussi l'élément de l'arbre d'accessibilité.
+     ====================================================================== */
+
+  .visually-hidden {
+    position: absolute !important;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ======================================================================
+     RÉGION D'ANNONCE (live region)
+     Conteneur des messages dynamiques destinés aux lecteurs d'écran
+     (confirmation de copie d'adresse, par exemple).
+     ====================================================================== */
+
+  .sr-status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  /* ======================================================================
+     FLUX D'IMPRESSION
+     ====================================================================== */
+
+  /* Élément affiché uniquement à l'écran */
+  .screen-only { }
+
+  /* Élément affiché uniquement à l'impression (révélé par print.css) */
+  .print-only { display: none; }
+
+  /* ======================================================================
+     DIVERS
+     ====================================================================== */
+
+  /* Empêche la coupure d'un groupe de mots (« Bac 3 », « Office 365 ») */
+  .nowrap { white-space: nowrap; }
+
+  /* Retire la marge basse résiduelle du dernier enfant d'un bloc */
+  .flow-end { margin-block-end: 0 !important; }
+}