real-world-css-libraries 1.0.2 → 1.0.4

package/libs/knacss-v8.2.0.css

@@ -0,0 +1,1141 @@
+/* https://github.com/alsacreations/KNACSS/blob/master/assets/css/natives.css */
+/* ============================
+ * KNACSS Natives
+ * Styles natifs pour éléments HTML
+ * Consignes : à placer dans un layer au-dessus de `reset`
+ * Mise à jour : 2026-06-09
+ * ============================ */
+
+/* ---------------------
+ * Variables globales de formulaires
+ * --------------------- */
+
+/*
+ * Ces variables pilotent l'ensemble des contrôles de formulaire (input, textarea, select, button)
+ * Elles peuvent être surchargées individuellement sur chacun des éléments.
+*/
+:root {
+  /* Couleur de fond des champs */
+  --form-background: light-dark(var(--color-gray-50), var(--color-gray-800));
+
+  /* Couleur du texte des champs */
+  --on-form: light-dark(var(--color-gray-900), var(--color-gray-100));
+
+  /* Couleur d'accent principale des champs */
+  --form-accent-color: var(--primary, AccentColor);
+
+  /* Espacement interne (padding) */
+  --form-spacing: var(--spacing-12) var(--spacing-16);
+
+  /* Épaisseur de bordure (par défaut 1px) */
+  --form-border-width: 1px;
+
+  /* Couleur de bordure */
+  --form-border-color: var(--color-gray-400);
+
+  /* Arrondi des bordures (border-radius) */
+  --form-border-radius: var(--radius-4);
+
+  /* Couleur de bordure spécifique pour radio/checkbox */
+  --checkables-border-color: var(--color-gray-400);
+
+  /* Taille des radio/checkbox */
+  --checkable-size: 1.25em;
+
+  /* Chevron pour fond clair (trait sombre %23222222) (le %23 remplace le #) */
+  --chevron-lightmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+  /* Chevron pour fond sombre (trait clair %23FFFFFF) (le %23 remplace le #) */
+  --chevron-darkmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+}
+
+/* ---------------------
+ * Button et liens-boutons
+ * --------------------- */
+
+button,
+a:where(.btn),
+input:where([type="button"], [type="reset"], [type="submit"]) {
+  --button-background-color: var(--form-background, Field);
+  --button-background-color-hover: oklch(
+    from var(--button-background-color) calc(l * 0.9) c h
+  );
+  --button-background-color-active: oklch(
+    from var(--button-background-color) calc(l * 0.8) c h
+  );
+  --button-border-color: var(--form-border-color, ButtonBorder);
+  --button-border-color-hover: var(--button-border-color);
+  --button-border-color-active: var(--button-border-color);
+  --button-border-radius: var(--form-border-radius, 0);
+  --button-border-width: var(--form-border-width, 1px);
+  --button-text-color: var(--on-form, ButtonText);
+  --button-text-color-hover: var(--button-text-color);
+  --button-text-color-active: var(--button-text-color);
+  --button-font-weight: var(--font-weight-regular, 400);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: var(--form-spacing, 12px 16px);
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--button-border-radius);
+  background-color: var(--button-background-color);
+  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
+  color: var(--button-text-color);
+  font: inherit;
+  font-weight: var(--button-font-weight);
+  line-height: 1;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+
+  /* Base button */
+  &:hover,
+  &:focus-visible {
+    background-color: var(--button-background-color-hover);
+    box-shadow: inset 0 0 0 var(--button-border-width)
+      var(--button-border-color-hover);
+    color: var(--button-text-color-hover);
+  }
+
+  &:active {
+    background-color: var(--button-background-color-active);
+    box-shadow: inset 0 0 0 var(--button-border-width)
+      var(--button-border-color-active);
+    color: var(--button-text-color-active);
+  }
+
+  /* Primary button */
+  &.btn-primary {
+    --button-background-color: var(--form-accent-color, AccentColor);
+    --button-border-color: transparent;
+    --button-text-color: var(--on-primary, #ffffff);
+  }
+
+  /* Secondary button */
+  &.btn-secondary {
+    --button-background-color: var(--color-gray-200, GrayText);
+    --button-border-color: transparent;
+    --button-text-color: var(--form-accent-color, AccentColor);
+  }
+
+  /* Reset button */
+  &.btn-reset {
+    --button-background-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: currentcolor;
+  }
+}
+
+/* --------------------
+ * Details (disclosure)
+ * -------------------- */
+
+details {
+  --details-padding: var(--form-spacing, 12px 16px);
+  --details-border-color: var(--form-border-color, ButtonBorder);
+  --details-border-color-hover: var(--details-border-color);
+  --details-border-width: var(--form-border-width, 1px);
+  --details-border-radius: var(--form-border-radius, 0);
+  --details-background-color: var(--layer-1, Canvas);
+  --details-content-border-radius: 0;
+  --details-title-color: var(--on-form, FieldText);
+  --details-title-color-hover: var(--details-title-color);
+
+  border: var(--details-border-width) solid var(--details-border-color);
+  border-radius: var(--details-border-radius);
+  background-color: var(--details-background-color);
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    border-color: var(--details-border-color-hover);
+
+    & summary {
+      color: var(--details-title-color-hover);
+    }
+  }
+
+  /* Summary (titre cliquable) */
+  & summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--details-padding);
+    transition: background-color;
+    transition-duration: var(--transition-duration, 0.25s);
+    border-radius: var(--details-border-radius);
+    color: var(--details-title-color, currentcolor);
+    font-weight: var(--font-weight-semibold, 600);
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+
+    /* Suppression du triangle par défaut */
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    /* Icône personnalisée */
+    &::after {
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      transition: rotate var(--transition-duration, 0.25s);
+      background-image: var(--chevron-lightmode);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      rotate: 0deg;
+    }
+  }
+
+  /* État ouvert */
+  &[open] summary::after {
+    rotate: 180deg;
+  }
+
+  /* Support des modes sombres pour l'icône */
+  [data-theme="dark"] & {
+    & summary::after {
+      background-image: var(--chevron-darkmode);
+    }
+  }
+
+  /* Contenu du details */
+  &::details-content {
+    padding: var(--form-spacing, 12px 16px);
+    padding-top: 0;
+    border-top: none;
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+/* Support moderne pour les transitions fluides */
+@supports (interpolate-size: allow-keywords) {
+  details::details-content {
+    /* État de fin de transition */
+    display: none;
+    height: 0;
+    transition: var(--transition-duration, 0.25s) allow-discrete;
+    transition-property: opacity, height, display;
+    interpolate-size: allow-keywords;
+  }
+
+  details[open]::details-content {
+    display: grid;
+    height: auto;
+
+    @starting-style {
+      height: 0;
+    }
+  }
+}
+
+/* Accessibilité améliorée */
+@media (prefers-reduced-motion: reduce) {
+  details {
+    & summary::after {
+      transition: none;
+    }
+
+    &::details-content {
+      transition: none;
+    }
+  }
+}
+
+/* --------------------
+ * Dialog (modale)
+ * -------------------- */
+
+dialog {
+  --dialog-background-color: var(--surface, Field);
+  --dialog-text-color: var(--on-surface, CanvasText);
+  --dialog-border-color: var(--form-border-color, ButtonBorder);
+  --dialog-border-radius: var(--form-border-radius, 0);
+  --dialog-border-width: var(--form-border-width, 1px);
+  --dialog-backdrop-color: oklch(0% 0 0 / 50%);
+  --dialog-padding: var(--spacing-24, 1.5rem);
+  --dialog-header-padding: var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);
+  --dialog-footer-padding: var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);
+  --dialog-max-width: 32rem;
+  --dialog-max-height: calc(100vh - var(--spacing-32, 2rem));
+
+  max-width: var(--dialog-max-width);
+  padding: 0;
+  overflow: visible;
+  border: none;
+  background-color: transparent;
+  color: var(--dialog-text-color);
+
+  /* État fermé par défaut */
+  &:not([open]) {
+    display: none;
+  }
+
+  /* Backdrop (arrière-plan) */
+  &::backdrop {
+    background-color: var(--dialog-backdrop-color);
+    backdrop-filter: blur(3px);
+  }
+
+  /* Animation d'ouverture */
+  &[open] {
+    animation: dialog-show var(--transition-duration, 0.25s) ease-out;
+  }
+
+  /* Variante petite modale */
+  &.dialog-sm {
+    --dialog-max-width: 24rem;
+  }
+
+  /* Variante grande modale */
+  &.dialog-lg {
+    --dialog-max-width: 48rem;
+  }
+
+  /* Variante pleine largeur */
+  &.dialog-fullwidth {
+    --dialog-max-width: calc(100vw - var(--spacing-32, 2rem));
+  }
+}
+
+/* Contenu principal de la modale */
+.dialog-content {
+  display: grid;
+  border: var(--dialog-border-width) solid var(--dialog-border-color);
+  border-radius: var(--dialog-border-radius);
+  background-color: var(--dialog-background-color);
+}
+
+/* En-tête de la modale */
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dialog-header-padding);
+  border-bottom: 1px solid var(--dialog-border-color);
+  border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
+  background-color: var(--layer-1, Canvas);
+  gap: var(--spacing-16, 1rem);
+}
+
+.dialog-title {
+  margin: 0;
+  color: var(--dialog-text-color);
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+/* Bouton de fermeture */
+.dialog-close {
+  display: inline-grid;
+  box-sizing: content-box;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 2px;
+  transition: background-color var(--transition-duration, 0.25s);
+  border-radius: var(--radius-full, 9999px);
+  font-size: 2rem;
+  place-content: center;
+  place-self: center;
+  aspect-ratio: 1;
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    background-color: var(--layer-2, GrayText);
+  }
+}
+
+/* Corps de la modale */
+.dialog-body {
+  padding: var(--dialog-padding);
+  overflow-y: auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Pied de la modale */
+.dialog-footer {
+  padding: var(--dialog-footer-padding);
+  border-top: 1px solid var(--dialog-border-color);
+  border-radius: 0 0 var(--dialog-border-radius) var(--dialog-border-radius);
+  background-color: var(--layer-1, Canvas);
+}
+
+/* Animations */
+@keyframes dialog-show {
+  from {
+    scale: 0.95;
+    opacity: 0%;
+  }
+
+  to {
+    scale: 1;
+    opacity: 100%;
+  }
+}
+
+/* Accessibilité */
+@media (prefers-reduced-motion: reduce) {
+  dialog {
+    animation: none;
+
+    &::backdrop {
+      animation: none;
+    }
+  }
+}
+
+/* Responsive */
+@media (width < 48rem) {
+  dialog {
+    --dialog-max-width: calc(100vw - var(--spacing-16, 1rem));
+    --dialog-max-height: calc(100vh - var(--spacing-16, 1rem));
+  }
+
+  .dialog-header,
+  .dialog-footer {
+    padding: var(--spacing-16, 1rem);
+  }
+
+  .dialog-body {
+    padding: var(--spacing-16, 1rem);
+  }
+}
+
+/* --------------------
+ * Hr (séparateur)
+ * -------------------- */
+
+hr {
+  /* Couleur et épaisseur par défaut alignées sur les contrôles de formulaire */
+  --hr-border-color: var(--form-border-color, ButtonBorder);
+  --hr-border-width: var(--form-border-width, 1px);
+
+  margin-block: var(--spacing-16, 1rem);
+  border: 0;
+  border-top: var(--hr-border-width) solid var(--hr-border-color);
+
+  /* Variante couleur primaire */
+  &.hr-primary {
+    --hr-border-color: var(--form-accent-color, AccentColor);
+  }
+
+  /* Variante épaisseur moyenne (x2) */
+  &.hr-medium {
+    --hr-border-width: calc(var(--form-border-width, 1px) * 2);
+  }
+
+  /* Variante trait en vague */
+  &.hr-wavy {
+    /* Harmonisation avec les variables ci-dessus */
+    --hr-wave-length: 16px; /* longueur d'une vague */
+    --hr-wave-height: 8px; /* hauteur totale du motif */
+
+    height: var(--hr-wave-height);
+    margin-block: var(--spacing-16, 1rem);
+    border: 0;
+
+    /* La couleur vient de --hr-border-color, modifiable via .hr-primary */
+    background-color: var(--hr-border-color, currentcolor);
+
+    /* Masque SVG répétable pour obtenir un trait ondulé, coloré via background-color */
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0,4 C4,0 12,8 16,4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
+      left center / var(--hr-wave-length) 100% repeat-x;
+  }
+}
+
+/* --------------------
+ * Table
+ * -------------------- */
+
+table {
+  --table-border-color: var(--form-border-color, ButtonBorder);
+  --table-border-width: var(--form-border-width, 1px);
+  --table-layout: fixed;
+  --table-border-collapse: collapse;
+  --table-border-spacing: 0;
+  --table-zebra: 0%;
+  --table-caption-color: GrayText;
+
+  width: 100%;
+  table-layout: var(--table-layout, fixed);
+  border-spacing: var(--table-border-spacing, 0);
+  border-collapse: var(--table-border-collapse, collapse);
+  color: var(--on-surface, CanvasText);
+
+  /* Légende */
+  & caption {
+    margin-block: var(--spacing-8, 0.5rem);
+    color: var(--table-caption-color);
+    text-align: left;
+  }
+
+  /* Cellules */
+  & th,
+  & td {
+    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
+    border: var(--table-border-width) solid var(--table-border-color);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  /* En-têtes */
+  & thead th {
+    background-color: var(--layer-1, Canvas);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  /* Pied de tableau */
+  & tfoot th,
+  & tfoot td {
+    background-color: var(--layer-1, Canvas);
+    font-weight: var(--font-weight-medium, 500);
+  }
+
+  /* Zébrage (conditionné par --table-zebra */
+  & tbody tr:nth-child(odd) {
+    background-color: oklch(
+      from var(--color-black, #000000) l c h / var(--table-zebra, 0%)
+    );
+  }
+}
+
+/* Wrapper responsive pour permettre le scroll horizontal sur petits écrans */
+.table-responsive {
+  --table-min-width: 30rem; /* largeur minimale par défaut pour un tableau lisible */
+
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable both-edges;
+
+  & > table {
+    min-width: var(--table-min-width, 30rem);
+  }
+}
+
+/* Tableau arrondi */
+.table-rounded {
+  --table-border-color: var(--form-border-color, ButtonBorder);
+  --table-border-width: var(--form-border-width, 1px);
+  --table-border-radius: var(--form-border-radius, 0.5rem);
+
+  padding: var(--spacing-8, 0.5rem);
+  border: var(--table-border-width) solid var(--table-border-color);
+  border-radius: var(--table-border-radius);
+
+  & :is(th, td) {
+    border: none;
+    background-color: transparent;
+  }
+
+  & thead :is(th, td),
+  & tr:not(:last-child) :is(th, td) {
+    border-bottom: var(--table-border-width) solid var(--table-border-color);
+  }
+
+  & tbody tr:nth-child(odd) {
+    background-color: transparent;
+  }
+}
+
+/* --------------------
+ * Formulaires
+ * (input, textarea, select, checkbox, radio, switch, range)
+ * -------------------- */
+
+/* Input
+ * -------------------- */
+
+input:not(
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  [type="checkbox"],
+  [type="radio"],
+  [type="range"]
+) {
+  --input-background-color: var(--form-background, Field);
+  --input-border-color: var(--form-border-color, ButtonBorder);
+  --input-border-color-hover: var(--form-border-color);
+  --input-border-radius: var(--form-border-radius, 0);
+  --input-border-width: var(--form-border-width, 1px);
+  --input-text-color: var(--on-form, ButtonText);
+  --input-placeholder-color: GrayText;
+
+  display: block;
+  width: 100%;
+  padding: var(--input-spacing, 12px 16px);
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
+  color: var(--input-text-color);
+  font: inherit;
+  line-height: 1.5;
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--input-border-width)
+      var(--input-border-color-hover);
+  }
+
+  /* État invalide après interaction utilisateur */
+  &:user-invalid {
+    --input-border-color: var(--error);
+    --input-border-width: 2px;
+  }
+
+  /* Placeholder */
+  &::placeholder {
+    opacity: 100%;
+    color: var(--input-placeholder-color);
+  }
+}
+
+/* Champ de recherche */
+:where(input[type="search"]) {
+  appearance: textfield;
+
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    appearance: none;
+  }
+}
+
+/* Champs numériques */
+:where(input[type="number"]) {
+  appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+}
+
+/* Champ de date et heure */
+:where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
+  cursor: pointer;
+
+  /* Styles pour WebKit */
+  &::-webkit-calendar-picker-indicator {
+    transition: opacity var(--transition-duration, 0.25s);
+    opacity: 60%;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      opacity: 100%;
+    }
+  }
+}
+
+/* Champ de fichier */
+:where(input[type="file"]) {
+  padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
+  cursor: pointer;
+
+  &::file-selector-button {
+    margin-right: var(--spacing-12, 0.75rem);
+    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
+    transition: background-color var(--transition-duration, 0.25s);
+    border: 0;
+    border-radius: var(--input-border-radius);
+    background-color: var(--form-accent-color, AccentColor);
+    color: var(--on-primary, #ffffff);
+    font: inherit;
+    cursor: pointer;
+
+    /* État survol */
+    &:hover,
+    &:focus-visible {
+      background-color: oklch(
+        from var(--form-accent-color, AccentColor) calc(l * 0.9) c h
+      );
+    }
+  }
+
+  /* Support WebKit */
+  &::-webkit-file-upload-button {
+    margin-right: var(--spacing-12, 0.75rem);
+    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
+    transition: background-color var(--transition-duration, 0.25s);
+    border: 0;
+    border-radius: var(--input-border-radius);
+    background-color: var(--form-accent-color, AccentColor);
+    color: var(--on-primary, #ffffff);
+    font: inherit;
+    cursor: pointer;
+
+    /* État survol */
+    &:hover,
+    &:focus-visible {
+      background-color: oklch(
+        from var(--form-accent-color, AccentColor) calc(l * 0.9) c h
+      );
+    }
+  }
+}
+
+/* Select
+ * -------------------- */
+
+select {
+  --select-background-color: var(--form-background, Field);
+  --select-border-color: var(--form-border-color, ButtonBorder);
+  --select-border-color-hover: var(--select-border-color);
+  --select-border-radius: var(--form-border-radius, 0);
+  --select-border-width: var(--form-border-width, 1px);
+  --select-text-color: var(--on-form, FieldText);
+  --select-optgroup-color: GrayText;
+
+  display: block;
+  width: 100%;
+  padding: var(--form-spacing, 12px 16px);
+  padding-right: calc(var(--spacing-32, 2rem) + var(--spacing-12, 0.75rem));
+  transition-property: background-color, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--select-border-radius);
+  background-color: var(--select-background-color);
+  background-image: var(--chevron-lightmode);
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-16, 1rem) center;
+  background-size: 1rem;
+  box-shadow: inset 0 0 0 var(--select-border-width) var(--select-border-color);
+  color: var(--select-text-color);
+  font: inherit;
+  line-height: 1.5;
+  cursor: pointer;
+  appearance: none;
+  user-select: none;
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--select-border-width)
+      var(--select-border-color-hover);
+  }
+
+  /* Support des modes sombres pour les flèches */
+  [data-theme="dark"] & {
+    background-image: var(--chevron-darkmode);
+  }
+
+  /* Sélection multiple */
+  &[multiple] {
+    padding-right: var(--spacing-16, 1rem);
+    background-image: none;
+    cursor: default;
+  }
+}
+
+/* Optgroups */
+:where(optgroup) {
+  color: var(--select-optgroup-color);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+/* Textarea
+ * -------------------- */
+
+textarea {
+  --textarea-background-color: var(--form-background, Field);
+  --textarea-border-color: var(--form-border-color, ButtonBorder);
+  --textarea-border-color-hover: var(--textarea-border-color);
+  --textarea-border-radius: var(--form-border-radius, 0);
+  --textarea-border-width: var(--form-border-width, 1px);
+  --textarea-text-color: var(--on-form, ButtonText);
+  --textarea-counter-color: GrayText;
+
+  display: block;
+  width: 100%;
+  min-height: 5lh;
+  padding: var(--form-spacing, 12px 16px);
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--textarea-border-radius);
+  background-color: var(--textarea-background-color);
+  box-shadow: inset 0 0 0 var(--textarea-border-width)
+    var(--textarea-border-color);
+  color: var(--textarea-text-color);
+  font: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  field-sizing: content;
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--textarea-border-width)
+      var(--textarea-border-color-hover);
+  }
+
+  /* État invalide après interaction utilisateur */
+  &:user-invalid {
+    --textarea-border-color: var(--error);
+    --textarea-border-width: 2px;
+  }
+
+  /* Placeholder */
+  &::placeholder {
+    opacity: 100%;
+    color: var(--on-surface);
+  }
+}
+
+/* Compteur de caractères */
+.character-counter {
+  min-width: max-content;
+  margin-left: auto;
+  color: var(--textarea-counter-color);
+  font-size: var(--text-14, 0.875rem);
+  font-weight: var(--font-weight-medium, 500);
+  text-align: right;
+
+  /* États du compteur selon le pourcentage restant */
+  &.warning {
+    color: var(--warning, #f97316);
+  }
+
+  &.danger {
+    color: var(--error, #ef4444);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+}
+
+/* Adaptations responsive */
+@media (width < 48rem) {
+  .form-group-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .character-counter {
+    margin-left: 0;
+    text-align: left;
+  }
+}
+
+/* Checkbox
+ * -------------------- */
+
+[type="checkbox"]:not([role="switch"]) {
+  --checkbox-background-color: var(--form-background, Field);
+  --checkbox-checked-color: var(--form-accent-color, AccentColor);
+  --checkbox-border-color: var(--checkables-border-color, ButtonBorder);
+  --checkbox-border-color-hover: var(--checkbox-border-color);
+  --checkbox-border-radius: var(--form-border-radius, 0);
+  --checkbox-border-width: var(--form-border-width, 1px);
+
+  display: inline-grid;
+  position: relative;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkable-size, 1.25rem);
+  height: var(--checkable-size, 1.25rem);
+  margin: 0;
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--checkbox-border-radius);
+  background-color: var(--checkbox-background-color);
+  box-shadow: inset 0 0 0 var(--checkbox-border-width)
+    var(--checkbox-border-color);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+
+  /* États */
+  &:is(:checked, :indeterminate) {
+    background-color: var(--checkbox-checked-color);
+    box-shadow: inset 0 0 0 var(--checkbox-border-width) transparent;
+  }
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--checkbox-border-width)
+      var(--checkbox-border-color-hover);
+  }
+
+  /* État coché */
+  &:checked::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: var(--on-primary, #ffffff);
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
+      center no-repeat;
+  }
+
+  &:indeterminate::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: currentcolor;
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
+      center no-repeat;
+  }
+}
+
+/* Radio
+ * -------------------- */
+
+[type="radio"] {
+  --radio-background-color: var(--form-background, Field);
+  --radio-border-color: var(--checkables-border-color, ButtonBorder);
+  --radio-border-color-hover: var(--radio-border-color);
+  --radio-border-radius: var(--radius-full, 9999px);
+  --radio-border-width: var(--form-border-width, 1px);
+  --radio-checked-color: var(--form-accent-color, AccentColor);
+  --radio-checked-border-color: var(--color-white, #ffffff);
+
+  display: inline-grid;
+  width: var(--checkable-size, 1.25em);
+  height: var(--checkable-size, 1.25em);
+  margin: 0;
+  padding: 0;
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: 0;
+  border-radius: var(--radio-border-radius);
+  background-color: var(--radio-background-color);
+  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-border-color);
+  cursor: pointer;
+  appearance: none;
+  place-content: center;
+
+  &::before {
+    content: "";
+    width: calc(var(--checkable-size, 1.25em) / 1);
+    height: calc(var(--checkable-size, 1.25em) / 1);
+    transition-property: scale;
+    transition-duration: var(--transition-duration, 0.25s);
+    border: 2px solid var(--radio-checked-border-color);
+    border-radius: var(--radius-full, 9999px);
+    background-color: var(--radio-checked-color);
+    scale: 0;
+  }
+
+  /* État survol */
+  &:hover,
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--radio-border-width)
+      var(--radio-border-color-hover);
+  }
+
+  /* État coché */
+  &:checked {
+    &::before {
+      scale: 0.9;
+    }
+  }
+}
+
+/* Switch
+ * -------------------- */
+
+[role="switch"] {
+  --switch-width: 2.5rem;
+  --switch-height: 1.5rem;
+  --switch-track-color: var(--form-background, ButtonFace);
+  --switch-track-color-checked: var(--form-accent-color, AccentColor);
+  --switch-thumb-color: ButtonBorder;
+  --switch-border-radius: var(--radius-full, 9999px);
+  --switch-border-color: var(--checkables-border-color, ButtonBorder);
+  --switch-border-width: 1px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  margin: 0;
+  padding: 0;
+  transition-property: background;
+  transition-duration: var(--transition-duration, 0.25s);
+  border: var(--switch-border-color) solid var(--switch-border-width);
+  border-radius: var(--switch-border-radius);
+  background-color: var(--switch-track-color);
+  cursor: pointer;
+  appearance: none;
+
+  &::before {
+    content: "";
+    transition-property: flex-grow;
+    transition-duration: var(--transition-duration, 0.25s);
+  }
+
+  /* Indicateur du switch */
+  &::after {
+    content: "";
+    flex-shrink: 0;
+    width: var(--switch-height);
+    height: var(--switch-height);
+    transition-property: background, scale;
+    transition-duration: var(--transition-duration, 0.25s);
+    border-radius: var(--switch-border-radius);
+    background-color: ButtonBorder;
+    scale: 0.6;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path fill="currentcolor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 0%;
+  }
+
+  /* État coché */
+  &:checked::before {
+    flex-grow: 1;
+  }
+
+  /* État coché (variante) */
+  &[data-variant="check"]:checked {
+    border-color: var(--switch-track-color-checked);
+    background-color: var(--switch-track-color-checked);
+
+    &::before {
+      flex-grow: 1;
+    }
+
+    &::after {
+      scale: 0.8;
+      background-color: var(--on-primary, #ffffff);
+      background-size: 70%;
+    }
+  }
+}
+
+/* Range
+ * -------------------- */
+
+.range {
+  position: relative;
+  padding-bottom: 2rem; /* Espace pour la valeur affichée */
+}
+
+[type="range"] {
+  --range-thumb-size: 22px;
+  --range-color: var(--form-accent-color, AccentColor);
+  --range-track-color: oklch(
+    from var(--form-border-color, ButtonBorder) calc(l * 1.5) c h
+  );
+  --range-track-height: 6px;
+
+  width: 100%;
+  height: var(--range-thumb-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--range-color);
+  appearance: none;
+  cursor: pointer;
+}
+
+[type="range"]:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: 2px;
+}
+
+/* WebKit */
+[type="range"]::-webkit-slider-runnable-track {
+  height: var(--range-track-height);
+  border-radius: var(--range-track-height);
+  background: var(--range-track-color);
+}
+
+[type="range"]::-webkit-slider-thumb {
+  box-sizing: border-box;
+  width: var(--range-thumb-size);
+  height: var(--range-thumb-size);
+  margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) * 0.5);
+  border: 4px solid var(--color-white, #ffffff);
+  border-radius: 50%;
+  background-color: currentcolor;
+  appearance: none;
+}
+
+/* Firefox */
+[type="range"]::-moz-range-track {
+  height: var(--range-track-height);
+  border-radius: var(--range-track-height);
+  background: var(--range-track-color);
+}
+
+[type="range"]::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--range-thumb-size);
+  height: var(--range-thumb-size);
+  border: 4px solid var(--color-white, #ffffff);
+  border-radius: 50%;
+  background: currentcolor;
+  cursor: pointer;
+}
+
+[type="range"]::-moz-range-progress {
+  height: var(--range-track-height);
+  border-radius: var(--range-track-height);
+  background: currentcolor;
+}
+
+.range-value {
+  position: absolute;
+  left: 0;
+  padding: 4px 8px;
+  border-radius: var(--form-border-radius, 4px);
+  background-color: var(--form-background, ButtonFace);
+  font-size: var(--text-14, 0.875rem);
+  translate: 0 1.4rem;
+}
+
+@supports (position-anchor: --i) {
+  [data-range-output="anchor"] input::-webkit-slider-thumb {
+    anchor-name: --thumb;
+  }
+
+  [data-range-output="anchor"] input::-moz-range-thumb {
+    anchor-name: --thumb;
+  }
+
+  [data-range-output="anchor"] .range-value {
+    position-anchor: --thumb;
+    position-area: bottom span-all;
+    inset: anchor(top);
+  }
+}