@ktortu/aaa 0.1.0-beta.0

package/card/card-tokens.css

@@ -0,0 +1,49 @@
+/* Design tokens de la carte (directive ktCard) — contrat public de theming.
+
+   Même architecture que --btn-* / --field-* / --dialog-* : tout DÉRIVE du socle --kt-*.
+   Surcharger un --kt-* (ex. --kt-surface) rebrande la carte avec le reste de la lib ;
+   surcharger un --card-* ici (ou sur un conteneur de spécificité ≥) ne touche que la carte.
+   Bascules NON déclarées (cf. plus bas) => effets inertes par défaut.
+
+   Chargé APRÈS foundation.css (qui pose les --kt-*). */
+@layer kt-aaa.tokens {
+  :root {
+    /* ============ Surface ============ */
+    --card-bg: var(--kt-surface, #ffffff);
+    --card-fg: var(--kt-on-surface, #1f1f1f);
+
+    /* Fond de la variante `filled` : surface légèrement teintée (DÉRIVÉ, suit chaque thème). */
+    --card-filled-bg: color-mix(in oklab, var(--kt-on-surface, #1f1f1f) 5%, var(--kt-surface, #fff));
+
+    /* ============ Bordure ============ */
+    --card-border-color: var(--kt-outline, #c4c7c5);
+    --card-border-width: 1px;
+
+    /* ============ Forme & rythme ============ */
+    --card-radius: var(--kt-control-radius, 8px);
+    --card-padding: 1rem;
+    --card-gap: 0.75rem;
+
+    /* ============ Élévation (variante `elevated`) ============ */
+    --card-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 8%);
+
+    /* ============ Voile d'état (carte interactive) — opacités discrètes ============ */
+    --card-state-hover-opacity: 0.04;
+    --card-state-pressed-opacity: 0.08;
+
+    /* ============ Anneau de focus (relayé sur toute la carte) ============ */
+    --card-focus-ring-color: var(--kt-focus-ring-color, #0842a0);
+    --card-focus-ring-width: var(--kt-focus-ring-width, 2px);
+    --card-focus-ring-offset: 2px;
+
+    /* ============ Bascules NON déclarées exprès (défauts entre parenthèses) ============
+     Même principe que --btn-* : non définies => effet neutre ; un thème (ou un conteneur) les
+     pose pour activer l'effet, sans qu'aucune carte n'ait à les redéclarer.
+       --card-shadow-hover   (= --card-shadow) : élévation au survol d'une carte interactive.
+       --card-transition     (none)            : anime ombre/translation (carte inerte sinon).
+       --card-transform       (none)           : transform au repos.
+       --card-transform-hover (= --card-transform) : transform au survol (ex. translateY(-2px)).
+       --card-fill-image      (none)           : dégradé/motif empilé SOUS le voile d'état.
+       --card-backdrop-filter (none)           : flou de la surface (thèmes verre). */
+  }
+}

package/card/card.css

@@ -0,0 +1,200 @@
+@layer kt-aaa.components {
+  /* Styles de la directive Card ([ktCard] + marqueurs structurels).
+   Global : enregistré comme button.css / dialog.css (la directive se pose sur n'importe quel
+   élément, hors de toute vue de composant). Tokens (--card-*) dans card-tokens.css (chargé avant).
+
+   La règle de base ne consomme que 3 variables résolues (--card-surface / --card-line /
+   --card-elevation) ; chaque bloc [data-variant] les pose — même technique que ktButton. */
+
+  [ktCard] {
+    /* Colonne flex : titre / média / contenu / actions s'empilent ; une carte « texte nu » sans
+     marqueur fonctionne aussi (chaque enfant devient un item). gap = rythme vertical. */
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-gap, 0.75rem);
+    box-sizing: border-box;
+    /* Ancre le lien étiré ([ktCardLink]::after) et tout enfant positionné. */
+    position: relative;
+
+    padding: var(--card-padding, 1rem);
+    color: var(--card-fg);
+
+    /* Défauts résolus = elevated. Surchargés par les blocs [data-variant]. */
+    --card-surface: var(--card-bg);
+    --card-line: transparent;
+    --card-elevation: var(--card-shadow);
+
+    /* Voile d'état via pseudo-élément ::before pour préserver background-image. */
+    background-color: var(--card-surface);
+    background-image: var(--card-fill-image, none);
+
+    border: var(--card-border-width, 1px) solid var(--card-line);
+    border-radius: var(--card-radius, 8px);
+    box-shadow: var(--card-elevation);
+    backdrop-filter: var(--card-backdrop-filter, none);
+
+    /* Mouvement : bascules => inerte par défaut (cf. card-tokens.css). */
+    transition: var(--card-transition, none);
+    transform: var(--card-transform, none);
+  }
+
+  /* ============ VARIANTES (apparence) ============ */
+  [ktCard][data-variant='elevated'] {
+    --card-surface: var(--card-bg);
+    --card-line: transparent;
+    --card-elevation: var(--card-shadow);
+  }
+  [ktCard][data-variant='outlined'] {
+    --card-surface: var(--card-bg);
+    --card-line: var(--card-border-color);
+    --card-elevation: none;
+  }
+  [ktCard][data-variant='filled'] {
+    --card-surface: var(--card-filled-bg);
+    --card-line: transparent;
+    --card-elevation: none;
+  }
+
+  /* ============ MÉDIA PLEINE LARGEUR ([ktCardMedia]) ============
+   Full-bleed : on annule le padding de la carte. Quand un média est présent, la carte clippe au
+   rayon (`overflow: hidden`) pour arrondir les coins du média — uniquement dans ce cas, afin de
+   ne pas rogner inutilement ombres/contenus des cartes sans média. */
+  [ktCard]:has([ktCardMedia]) {
+    overflow: hidden;
+  }
+  [ktCardMedia] {
+    display: block;
+    margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) 0;
+    overflow: hidden;
+  }
+  /* Un média qui n'est pas le premier enfant (ex. après le contenu) ne déborde pas vers le haut. */
+  [ktCardMedia]:not(:first-child) {
+    margin-block-start: 0;
+  }
+  [ktCardMedia] :where(img, video, picture, svg, canvas) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    object-fit: cover;
+  }
+
+  /* ============ EN-TÊTE ([ktCardHeader]) ============ */
+  [ktCardHeader] {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  /* Le titre dans un header prend l'espace libre (repousse une éventuelle action à droite). */
+  [ktCardHeader] :where(h1, h2, h3, h4, h5, h6) {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  /* ============ CONTENU ([ktCardContent]) ============ */
+  [ktCardContent] {
+    display: block;
+  }
+
+  /* ============ ACTIONS ([ktCardActions]) ============
+   Épinglées en pied : margin-block-start auto les pousse en bas quand la carte a une hauteur
+   imposée (grille de cartes à hauteur égale). */
+  [ktCardActions] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-block-start: auto;
+  }
+
+  /* ============ INTERACTIF (affordance — PAS un rôle) ============ */
+  [ktCard][data-interactive] {
+    cursor: pointer;
+  }
+
+  /* Voile d'état indépendant via pseudo-élément pour préserver background-image */
+  [ktCard][data-interactive]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--card-overlay, transparent);
+    pointer-events: none;
+    transition: background-color var(--card-transition, 0.15s ease);
+    z-index: 0;
+  }
+
+  /* Voile + élévation au survol/maintien (hors disabled). */
+  [ktCard][data-interactive]:hover:not([data-disabled]) {
+    --card-overlay: color-mix(in oklab, var(--card-fg) calc(var(--card-state-hover-opacity, 0.04) * 100%), transparent);
+    box-shadow: var(--card-shadow-hover, var(--card-elevation));
+    transform: var(--card-transform-hover, var(--card-transform, none));
+  }
+  [ktCard][data-interactive]:active:not([data-disabled]) {
+    --card-overlay: color-mix(
+      in oklab,
+      var(--card-fg) calc(var(--card-state-pressed-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  /* ============ LIEN ÉTIRÉ ([ktCardLink]) ============
+   Le pseudo-élément couvre toute la carte : la surface entière devient cliquable sans imbriquer
+   de contrôles. radius hérité pour une zone de clic épousant les coins. */
+  [ktCardLink]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  /* Le lien étiré ne porte pas son propre anneau : il est relayé sur la carte (cf. plus bas). */
+  [ktCardLink]:focus-visible {
+    outline: none;
+  }
+  /* Actions/contrôles SECONDAIRES : repassent au-dessus du lien étiré pour rester cliquables.
+   Scopé aux cartes qui ONT un lien étiré (`:has`) — une carte sans lien ne touche pas au
+   positionnement de ses enfants. :where(...) = spécificité nulle (surcharge sans lutte). */
+  [ktCard]:has([ktCardLink]) :where(a, button, input, select, textarea, label, [tabindex]):not([ktCardLink]) {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Anneau de focus relayé sur TOUTE la carte quand le lien primaire est focalisé au clavier
+   (cas [ktCardLink] descendant OU [ktCard] lui-même posé sur un <a>/<button>). */
+  [ktCard]:has([ktCardLink]:focus-visible),
+  [ktCard][ktCardLink]:focus-visible {
+    outline: var(--card-focus-ring-width, 2px) solid var(--card-focus-ring-color, #0842a0);
+    outline-offset: var(--card-focus-ring-offset, 2px);
+  }
+
+  /* ============ ÉTAT INERTE ([data-disabled]) ============ */
+  [ktCard][data-disabled] {
+    cursor: not-allowed;
+    /* Désature la surface entière (contenu arbitraire : opacity plutôt qu'un color-mix par token). */
+    opacity: 0.55;
+    box-shadow: none;
+    transform: none;
+  }
+  /* Neutralise le lien étiré d'une carte désactivée (le consommateur désactive aussi le contrôle). */
+  [ktCard][data-disabled] [ktCardLink]::after {
+    pointer-events: none;
+  }
+
+  /* ============ Mouvement réduit (WCAG 2.3.3) ============ */
+  @media (prefers-reduced-motion: reduce) {
+    [ktCard][data-interactive] {
+      transition: none;
+    }
+    [ktCard][data-interactive]:hover:not([data-disabled]) {
+      transform: none;
+    }
+  }
+
+  /* ============ Contraste élevé Windows / forced-colors ============ */
+  @media (forced-colors: active) {
+    [ktCard] {
+      /* L'ombre et le voile disparaissent : on garantit une frontière visible. */
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/cdk/styles/foundation.css

@@ -0,0 +1,83 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Socle de design partagé — contrat racine du design system.
+   Source unique dont DÉRIVENT les tokens des composants (--field-*, --btn-*).
+   Surchargez un seul --kt-* (ex. --kt-primary) pour rebrander champs ET boutons d'un coup.
+
+   Chargé en PREMIER dans angular.json > styles (avant tokens.css / button-tokens.css). */
+@layer kt-aaa.base {
+  :root {
+    /* Palette des contrôles natifs (scrollbars, pickers date/time…). Seule déclaration non-token
+     du socle : un thème sombre DOIT redéclarer `color-scheme: dark` pour que le popup scrollable
+     du select et les pickers natifs suivent. */
+    color-scheme: light;
+
+    /* ============ Couleurs sémantiques (seeds) ============ */
+    --kt-primary: #0842a0; /* bleu profond (7.5:1 contre blanc) */
+    --kt-danger: #8c1d18; /* rouge carmin (7.1:1 contre blanc) */
+    --kt-neutral: #2e3133;
+
+    /* ============ Surfaces & texte ============ */
+    --kt-surface: #ffffff;
+    --kt-on-surface: #1f1f1f; /* texte principal */
+    --kt-muted: #474747; /* texte secondaire / hint / icônes (7.6:1 contre blanc) */
+    --kt-outline: #c4c7c5; /* bordure au repos */
+    --kt-outline-strong: #5f6368; /* bordure hover */
+
+    /* ============ Géométrie de contrôle partagée (md) ============ */
+    --kt-control-height: 44px; /* field-box ET bouton md — cible tactile AAA */
+    --kt-control-radius: 8px;
+    --kt-control-font: 1rem;
+
+    /* Police : token de BASCULE --kt-font (NON déclaré ici exprès, même principe que --btn-radius).
+     Non défini => la page garde la police héritée (défaut navigateur). Un thème le déclare pour
+     imposer sa stack (ex. Segoe UI pour Fluent). Consommé par l'app hôte (body), pas par la lib
+     (les contrôles sont en `font: inherit`). */
+
+    /* Sélection de texte : bascules --kt-selection-bg / --kt-selection-fg (NON déclarées).
+     Défauts = mots-clés système Highlight/HighlightText (sélection navigateur). Consommées
+     par l'app hôte (::selection dans styles.css). */
+
+    /* ============ Anneau de focus ============ */
+    /* Couleur + épaisseur partagées ; l'offset et l'opacité restent propres à chaque composant. */
+    --kt-focus-ring-color: var(--kt-primary);
+    --kt-focus-ring-width: 2px;
+
+    /* ============ Gouttières de défilement (scrollbars) ============ */
+    /* Propriétés standard `scrollbar-width` / `scrollbar-color` — toutes deux HÉRITÉES : posées
+     ici sur :root (= <html>), elles cascadent vers la page ET toute zone scrollable de la lib
+     (listbox du select, contenu du dialog) sans règle d'application dédiée par composant.
+     Thumb et track DÉRIVÉS du socle (mélange on-surface ↔ surface) : la gouttière suit donc
+     automatiquement chaque thème — clair comme sombre — tant qu'il ne redéclare rien.
+     Bascules --kt-scrollbar-color (« thumb track ») / --kt-scrollbar-width : un thème impose sa
+     gouttière signature en les surchargeant (ex. néon Synthwave, gris chunky Windows 98).
+     NB : propriétés standard (pas les pseudo ::-webkit-scrollbar) — elles respectent
+     color-scheme et s'alignent sur le socle CSS moderne déjà utilisé (anchor, popover, oklch). */
+    --kt-scrollbar-thumb: color-mix(in srgb, var(--kt-on-surface) 30%, var(--kt-surface));
+    --kt-scrollbar-track: color-mix(in srgb, var(--kt-on-surface) 7%, var(--kt-surface));
+    scrollbar-width: var(--kt-scrollbar-width, thin);
+    scrollbar-color: var(--kt-scrollbar-color, var(--kt-scrollbar-thumb) var(--kt-scrollbar-track));
+
+    /* ============ Bottom-sheet PARTAGÉ (Select + Dialog) ============ */
+    /* La feuille modale glissant du bas est un concept de premier rang, mutualisé entre le popup
+     mobile du Select et le mode `sheet` du Dialog. Un thème thématise « la feuille » une fois ;
+     les deux composants suivent. (Le Dialog dérive aussi --dialog-radius/--dialog-scrim d'ici.) */
+    --kt-sheet-radius: 16px; /* rayon des coins HAUTS de la feuille */
+    --kt-sheet-shadow: 0 -4px 16px rgb(0 0 0 / 12%);
+    --kt-sheet-scrim: rgb(0 0 0 / 40%); /* voile du fond */
+    --kt-sheet-anim-duration: 120ms; /* glissement + fondu du scrim (entrée) */
+    --kt-sheet-exit-duration: 90ms; /* glissement + fondu du scrim (sortie) */
+    --kt-sheet-grab-color: var(--kt-outline, #c4c7c5); /* poignée de préhension */
+    --kt-sheet-max-block-size: 85svh; /* svh : tient compte du clavier virtuel / barres mobiles */
+  }
+
+  /* Entrée PARTAGÉE de la feuille : glissement du bas. Pendant « animation » des tokens --kt-sheet-*
+   ci-dessus — une seule keyframe, jouée par le mode `sheet` du Dialog (conteneur CDK) ET le popup
+   compact du Select (Popover `:popover-open`). Une keyframe est globale et indépendante du moteur :
+   fiable dans les deux contextes, contrairement à @starting-style + translate. */
+  @keyframes kt-sheet-in {
+    from {
+      translate: 0 100%;
+    }
+  }
+}

package/cdk/styles/tabs.css

@@ -0,0 +1,276 @@
+/* ==========================================================================
+   Design tokens & Styles génériques pour les Tabs (@angular/aria)
+   ========================================================================== */
+@layer kt-aaa.tokens {
+  :root {
+    /* ============ TOKENS DES TABS ============ */
+    /* Dérivés du socle global foundation.css (--kt-*) */
+
+    --tab-height: var(--kt-control-height, 44px);
+    --tab-text-color: var(--kt-muted);
+    --tab-text-hover: var(--kt-on-surface);
+
+    /* L'état actif prend la couleur primaire du thème par défaut */
+    --tab-active-color: var(--kt-primary);
+
+    /* Indicateur visuel (ligne du bas) */
+    --tab-indicator-width: 3px;
+    --tab-indicator-color: var(--tab-active-color);
+
+    /* Focus Ring AAA */
+    --tab-focus-ring-color: var(--kt-focus-ring-color);
+    --tab-focus-ring-width: var(--kt-focus-ring-width, 2px);
+
+    /* Bordures */
+    --tab-list-border-width: 2px;
+    --tab-list-border-color: var(--kt-outline);
+
+    /* ============ DÉBORDEMENT / DÉFILEMENT ============ */
+    /* La liste scrolle sur son propre axe quand elle déborde (jamais la page → WCAG 1.4.10).
+     `visible` pour désactiver. */
+    --tab-list-overflow: auto;
+    /* Affordance : ombres de défilement (Lea Verou) visibles seulement s'il reste du contenu
+     hors-champ, estompées aux extrémités. `--tab-scroll-shadow-spread: 0` les coupe. */
+    --tab-list-bg: var(--kt-surface);
+    --tab-scroll-shadow-size: 2rem; /* largeur du "cache" couleur de surface */
+    --tab-scroll-shadow-spread: 0.85rem; /* taille de l'ombre */
+    /* Dérivée du socle : ombre sombre en thème clair, claire en thème sombre. */
+    --tab-scroll-shadow-color: color-mix(in srgb, var(--kt-on-surface, #1f1f1f) 18%, transparent);
+    /* Marge laissée autour de l'onglet amené dans la vue (focus clavier / directive ktTabScroll). */
+    --tab-scroll-margin: 1rem;
+    --tab-scroll-snap: none; /* `x proximity` pour activer l'accroche */
+    --tab-scrollbar-width: thin;
+    /* Géométrie et fond (pour les thèmes extrêmes comme Win98) */
+    --tab-bg: transparent;
+    --tab-bg-hover: color-mix(in srgb, var(--tab-text-hover) 5%, transparent);
+    --tab-bg-active: transparent;
+    --tab-shadow: none;
+    --tab-shadow-hover: none;
+    --tab-shadow-active: none;
+    --tab-border: none;
+    --tab-border-active: none;
+    --tab-margin: 0;
+    --tab-padding-y: 0;
+    --tab-z-index-active: 1;
+    --tab-transform: none;
+    --tab-transform-hover: none;
+    --tab-transform-active: none;
+    --tab-radius: 0;
+    --tab-backdrop-filter: none;
+    --tab-transition: background-color 0.2s, color 0.2s, transform 0.1s, box-shadow 0.1s, backdrop-filter 0.2s;
+  }
+}
+
+@layer kt-aaa.components {
+  /* ==========================================================================
+   STYLES GLOBAUX (Ciblage des attributs ARIA natifs)
+   ========================================================================== */
+
+  /* 1. Le conteneur principal */
+  [ngTabs] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 2. La liste des onglets */
+  [ngTabList] {
+    display: flex;
+    list-style: none;
+    border-bottom: var(--tab-list-border-width) solid var(--tab-list-border-color);
+    padding: 0;
+    margin: 0;
+    align-items: flex-end; /* Pour permettre aux onglets de tailles différentes (ex: actif plus grand) de s'aligner en bas */
+    position: relative; /* Établit le contexte de positionnement pour offsetTop/offsetLeft des enfants */
+
+    /* Débordement : la LISTE scrolle sur l'axe en ligne — jamais la page (corrige WCAG 1.4.10).
+     Le focus clavier d'@angular/aria amène l'onglet actif dans la vue ; la directive ktTabScroll
+     couvre l'onglet actif hors-champ au montage / en sélection programmatique. */
+    overflow-x: var(--tab-list-overflow, auto);
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: var(--tab-scrollbar-width, thin);
+    scroll-snap-type: var(--tab-scroll-snap, none);
+
+    /* Ombres de défilement (Lea Verou) : couche "cache" (couleur surface, attachement local) +
+     couche "ombre" (attachement scroll). L'ombre n'apparaît que s'il reste du contenu de ce côté
+     et s'estompe à l'extrémité → pas de "ghosting" permanent du 1er/dernier onglet. */
+    background:
+      linear-gradient(to right, var(--tab-list-bg, var(--kt-surface, #fff)) 30%, transparent) 0 0 /
+        var(--tab-scroll-shadow-size, 2rem) 100% no-repeat local,
+      linear-gradient(to left, var(--tab-list-bg, var(--kt-surface, #fff)) 30%, transparent) 100% 0 /
+        var(--tab-scroll-shadow-size, 2rem) 100% no-repeat local,
+      radial-gradient(farthest-side at 0 50%, var(--tab-scroll-shadow-color, rgb(0 0 0 / 16%)), transparent) 0 0 /
+        var(--tab-scroll-shadow-spread, 0.85rem) 100% no-repeat scroll,
+      radial-gradient(farthest-side at 100% 50%, var(--tab-scroll-shadow-color, rgb(0 0 0 / 16%)), transparent) 100% 0 /
+        var(--tab-scroll-shadow-spread, 0.85rem) 100% no-repeat scroll;
+  }
+
+  /* 3. Un onglet individuel */
+  [ngTab] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: none; /* ne pas rétrécir : les onglets gardent leur taille et débordent → scroll */
+    scroll-snap-align: start;
+    scroll-margin-inline: var(--tab-scroll-margin, 1rem); /* gap quand on l'amène dans la vue */
+    padding: var(--tab-padding-y) 1.5rem;
+    margin: var(--tab-margin);
+    height: var(--tab-height);
+    font-weight: 600;
+    color: var(--tab-text-color);
+    background-color: var(--tab-bg);
+    box-shadow: var(--tab-shadow);
+    border: var(--tab-border);
+    border-radius: var(--tab-radius);
+    transform: var(--tab-transform);
+    backdrop-filter: var(--tab-backdrop-filter);
+    -webkit-backdrop-filter: var(--tab-backdrop-filter);
+    cursor: pointer;
+    position: relative;
+    transition: var(--tab-transition);
+    user-select: none;
+  }
+
+  [ngTab]:hover:not([disabled]):not([aria-disabled='true']) {
+    color: var(--tab-text-hover);
+    background-color: var(--tab-bg-hover);
+    box-shadow: var(--tab-shadow-hover);
+    transform: var(--tab-transform-hover);
+  }
+
+  /* 4. Onglet Actif / Sélectionné */
+  [ngTab][aria-selected='true'] {
+    color: var(--tab-active-color);
+    background-color: var(--tab-bg-active);
+    box-shadow: var(--tab-shadow-active);
+    border: var(--tab-border-active);
+    transform: var(--tab-transform-active);
+    z-index: var(--tab-z-index-active);
+  }
+
+  /* Indicateur du bas pour l'onglet actif */
+  [ngTab][aria-selected='true']::after {
+    content: '';
+    position: absolute;
+    bottom: calc(var(--tab-list-border-width) * -1); /* Superpose la bordure de la liste */
+    left: 0;
+    right: 0;
+    height: var(--tab-indicator-width);
+    background-color: var(--tab-indicator-color);
+    border-radius: var(--tab-indicator-width) var(--tab-indicator-width) 0 0;
+  }
+
+  /* 5. Focus AAA (Immanquable au clavier) */
+  [ngTab]:focus-visible {
+    outline: var(--tab-focus-ring-width) solid var(--tab-focus-ring-color);
+    outline-offset: calc(var(--tab-focus-ring-width) * -1);
+    background-color: color-mix(in srgb, var(--tab-focus-ring-color) 10%, transparent);
+    border-radius: 4px 4px 0 0;
+  }
+
+  /* 6. État désactivé */
+  [ngTab][disabled],
+  [ngTab][aria-disabled='true'] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    color: var(--tab-text-color);
+  }
+
+  /* 7. Panneaux de contenu (Tab Panels) */
+  [ngTabPanel] {
+    padding: var(--tab-panel-padding, 1.5rem 0);
+    background-color: var(--tab-panel-bg, transparent);
+    backdrop-filter: var(--tab-panel-backdrop-filter, none);
+    -webkit-backdrop-filter: var(--tab-panel-backdrop-filter, none);
+    border: var(--tab-panel-border, none);
+    border-radius: var(--tab-panel-radius, 0);
+    box-shadow: var(--tab-panel-shadow, none);
+    animation: tabFadeIn 0.3s ease-in-out;
+    margin-top: var(--tab-panel-margin-top, 0);
+  }
+
+  [ngTabPanel][inert] {
+    display: none;
+  }
+
+  [ngTabPanel]:focus-visible {
+    outline: var(--tab-focus-ring-width) solid var(--tab-focus-ring-color);
+    outline-offset: -2px; /* Intérieur pour ne pas déborder de la carte en verre */
+    border-radius: var(--tab-panel-radius, 4px);
+  }
+
+  /* Animation fluide respectant les préférences système */
+  @keyframes tabFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [ngTabPanel] {
+      animation: none;
+    }
+    [ngTabList] {
+      scroll-behavior: auto; /* pas de défilement animé lors de l'amenée dans la vue */
+    }
+  }
+
+  /* ==========================================================================
+   ORIENTATION VERTICALE
+   ========================================================================== */
+
+  [ngTabs]:has([ngTabList][aria-orientation='vertical']),
+  [ngTabs]:has([ngTabList][orientation='vertical']) {
+    flex-direction: row;
+  }
+
+  [ngTabList][aria-orientation='vertical'],
+  [ngTabList][orientation='vertical'] {
+    flex-direction: column;
+    border-bottom: none;
+    border-right: var(--tab-list-border-width) solid var(--tab-list-border-color);
+    align-items: stretch;
+
+    /* Débordement vertical (la hauteur est contrainte par le conteneur hôte) + ombres haut/bas. */
+    overflow-x: hidden;
+    overflow-y: var(--tab-list-overflow, auto);
+    background:
+      linear-gradient(to bottom, var(--tab-list-bg, var(--kt-surface, #fff)) 30%, transparent) 0 0 / 100%
+        var(--tab-scroll-shadow-size, 2rem) no-repeat local,
+      linear-gradient(to top, var(--tab-list-bg, var(--kt-surface, #fff)) 30%, transparent) 0 100% / 100%
+        var(--tab-scroll-shadow-size, 2rem) no-repeat local,
+      radial-gradient(farthest-side at 50% 0, var(--tab-scroll-shadow-color, rgb(0 0 0 / 16%)), transparent) 0 0 / 100%
+        var(--tab-scroll-shadow-spread, 0.85rem) no-repeat scroll,
+      radial-gradient(farthest-side at 50% 100%, var(--tab-scroll-shadow-color, rgb(0 0 0 / 16%)), transparent) 0 100% /
+        100% var(--tab-scroll-shadow-spread, 0.85rem) no-repeat scroll;
+  }
+
+  [ngTabList][aria-orientation='vertical'] [ngTab],
+  [ngTabList][orientation='vertical'] [ngTab] {
+    justify-content: flex-start;
+    scroll-margin-block: var(--tab-scroll-margin, 1rem);
+  }
+
+  /* On déplace l'indicateur sur le bord droit pour l'orientation verticale */
+  [ngTabList][aria-orientation='vertical'] [ngTab][aria-selected='true']::after,
+  [ngTabList][orientation='vertical'] [ngTab][aria-selected='true']::after {
+    bottom: 0;
+    left: auto;
+    right: calc(var(--tab-list-border-width) * -1); /* Superpose la bordure droite */
+    width: var(--tab-indicator-width);
+    height: auto;
+    top: 0;
+    border-radius: var(--tab-indicator-width) 0 0 var(--tab-indicator-width);
+  }
+
+  [ngTabs]:has([ngTabList][aria-orientation='vertical']) [ngTabPanel],
+  [ngTabs]:has([ngTabList][orientation='vertical']) [ngTabPanel] {
+    flex-grow: 1;
+    padding: 0 1.5rem;
+  }
+}