@charset "UTF-8";
@layer oss.reset, oss.enhancer, oss.properties, oss.animations, oss.elements, oss.utilities, oss.override;
@layer oss.reset {
	:root {
		font-size: 10px;
	}

	*:where(:not(iframe, canvas, dialog, img, svg, video):not(svg *, symbol *)) {
		all: unset;
		display: revert;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	a,
	button {
		cursor: revert;
	}

	body {
		font-family: sans-serif;
		min-height: 100dvh;
	}

	img {
		display: block;
		font-style: italic;
		max-width: 100%;
	}

	menu,
	ol,
	ul{
		list-style: none;
	}

	table {
		border-collapse: collapse;
	}

	textarea {
		white-space: revert;
	}

	meter {
		-webkit-appearance: revert;
		appearance: revert;
	}

	::placeholder {
		color: unset;
	}

	:where([hidden]) {
		display: none;
	}

	:where([contenteditable]) {
		-moz-user-modify: read-write;
		-webkit-user-modify: read-write;
		-webkit-line-break: after-white-space;
		overflow-wrap: break-word;
	}

	:where([draggable="true"]) {
		-webkit-user-drag: element;
	}

	iframe {
		border: none;
	}
}
@layer oss.enhancer {

	body {
		background-color: var(--color-background);
		color: var(--color-content);
	}

	html {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	h1,h2,h3,h4,h5,h6,
	li,
	p {
		hyphens: none;
		overflow-wrap: break-word;
	}

	svg {
		fill: currentColor;
	}

}
@layer oss.properties {

	/* */
	:root {
		/* Accent (fonctionnel) */
		--color-accent: var(--color-base-info,#0EA5E9);
		--color-accent-contrast: var(--color-base-white);
		--color-accent-background: color-mix(in srgb, var(--color-accent) 10%, var(--color-background) 90%);
		--color-accent-border: color-mix(in srgb, var(--color-accent) 30%, var(--color-background) 70%);
		--color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, black 15%);
	}

	:root {
		/* Base palette */
		--color-base-black: #18181b;
		--color-base-white: #FFFFFF;
		/* */
	}

	:root {
		/* Brand colors (overridable) */
		--color-brand-primary: var(--color-base-info);
		--color-brand-secondary: var(--color-base-black);
	}
	
	:root {
		/* Light & Dark definitions */
		--color-background__light: var(--color-base-white);
		--color-background__dark: var(--color-base-black);
		--color-content__light: var(--color-base-black);
		--color-content__dark: var(--color-base-white);
	}

	:root {
		/* Active tokens - Light mode (default) */
		color-scheme: light dark;
		--color-background: var(--color-background__light);
		--color-content: var(--color-content__light);
	}


	:root {
		/* Dynamic variants (recalculate on mode change) */
		--color-border: color-mix(in srgb, var(--color-content) 15%, var(--color-background) 85%);
		--color-border-muted: color-mix(in srgb, var(--color-content) 8%, var(--color-background) 92%);
		--color-border-strong: color-mix(in srgb, var(--color-content) 30%, var(--color-background) 70%);
		--color-content-disabled: color-mix(in srgb, var(--color-content) 25%, var(--color-background) 75%);
		--color-content-muted: color-mix(in srgb, var(--color-content) 70%, var(--color-background) 30%);
		--color-content-subtle: color-mix(in srgb, var(--color-content) 40%, var(--color-background) 60%);
		--color-surface: color-mix(in srgb, var(--color-content) 4%, var(--color-background) 96%);
		--color-surface-overlay: color-mix(in srgb, var(--color-content) 12%, var(--color-background) 88%);
		--color-surface-raised: color-mix(in srgb, var(--color-content) 8%, var(--color-background) 92%);
	}


	@media (prefers-color-scheme: dark) {
		:root {
			--color-background: var(--color-background__dark);
			--color-content: var(--color-content__dark);
		}
	}

	[data-theme="dark"] {
		color-scheme: dark;
		--color-background: var(--color-background__dark);
		--color-content: var(--color-content__dark);
	}

	[data-theme="light"] {
		color-scheme: light;
		--color-background: var(--color-background__light);
		--color-content: var(--color-content__light);
	}

	/* layout */
	:root {
		/* Layout constraints */
		--layout-max-width: 96rem;
		--layout-padding-inline: var(--space);

		--layout-padding-inline-safe: max(
			var(--layout-padding-inline),
			env(safe-area-inset-right),
			env(safe-area-inset-left)
		);

		--layout-padding-block-safe: max(
			var(--space),
			env(safe-area-inset-top),
			env(safe-area-inset-bottom)
		);
	}

	/* radius */
	:root {
		--radius-base: 0.8rem;
	}

	:root {
		--radius-none: 0;
		--radius-xs: calc(var(--radius-base) / 4);
		--radius-s: calc(var(--radius-base) / 2); 
		--radius: var(--radius-base);
		--radius-l: calc(var(--radius-base) * 1.5);
		--radius-xl: calc(var(--radius-base) * 2);
		--radius-full: 9999px;
	}

	/* ratios */
	:root {
		/* Classic */
		--ratio-landscape: 4 / 3;
		--ratio-portrait: 3 / 4;
		--ratio-square: 1 / 1;

		/* Golden ratio */
		--ratio-golden: 1.6180 / 1;
		--ratio-golden-portrait: 1 / 1.6180;

		/* Screen formats */
		--ratio-ultrawide: 18 / 5;
		--ratio-ultrawide-portrait: 5 / 18;
		--ratio-widescreen: 16 / 9;
		--ratio-widescreen-portrait: 9 / 16;

		/* Paper formats (ISO A) */
		--ratio-iso-a-landscape: 1.414 / 1;
		--ratio-iso-a-portrait: 1 / 1.414;
	}

	/* spacing */
	:root {
		--space-base: 1.6rem;
	}

	:root {
		--space-xxs: calc(var(--space-base) / 4);
		--space-xs:  calc(var(--space-base) / 2);
		--space-s:   calc(var(--space-base) * 0.75);
		--space:     var(--space-base);
		--space-l:   calc(var(--space-base) * 1.5);
		--space-xl:  calc(var(--space-base) * 2);
		--space-xxl: calc(var(--space-base) * 4);
	}

	/* text */
	:root {
		--text-xxxs: clamp(0.65536rem, -0.060894cqi + 0.679718rem, 0.601773rem);
		--text-xxs:  clamp(0.8192rem, -0.019359cqi + 0.826944rem, 0.802164rem);
		--text-xs:   clamp(1.024rem, 0.05146cqi + 1.003416rem, 1.069285rem);
		--text-s:    clamp(1.28rem, 0.165178cqi + 1.213929rem, 1.425356rem);
		--text:      clamp(1.6rem, 0.340909cqi + 1.463636rem, 1.9rem);
		--text-l:    clamp(2rem, 0.605341cqi + 1.757864rem, 2.5327rem);
		--text-xl:   clamp(2.5rem, 0.995556cqi + 2.101778rem, 3.376089rem);
		--text-xxl:  clamp(3.125rem, 1.562871cqi + 2.499851rem, 4.500327rem);
		--text-xxxl: clamp(3.90625rem, 2.378052cqi + 2.955029rem, 5.998936rem);
	}

	:root {
		--text-form: 1.6rem;
	}

	@supports not (font-size: 1cqi) {
		:root {
			--text-xxxs: 0.601773rem;
			--text-xxs:  0.802164rem;
			--text-xs:   1.069285rem;
			--text-s:    1.425356rem;
			--text:      1.9rem;
			--text-l:    2.5327rem;
			--text-xl:   3.376089rem;
			--text-xxl:  4.500327rem;
			--text-xxxl: 5.998936rem;
		}
	}
}
@layer oss.animations {

	:root {
		--animation-duration-instant: 100ms;
		--animation-duration-fast: 200ms;
		--animation-duration-normal: 300ms;
		--animation-duration-slow: 500ms;

		--animation-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
		--animation-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
		--animation-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
	}


	@keyframes blink {
		0%, 100% {
			opacity: 1
		}
		50% {
			opacity: 0;
		}
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes fade-out {
		from { opacity: 1; }
		to { opacity: 0; }
	}
	
	@keyframes slide-in-up {
		from {
			opacity: 0;
			transform: translateY(2rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes slide-in-down {
		from {
			opacity: 0;
			transform: translateY(-2rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes slide-in-left {
		from {
			opacity: 0;
			transform: translateX(-2rem);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes slide-in-right {
		from {
			opacity: 0;
			transform: translateX(2rem);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes pulse {
		0%, 100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.8;
			transform: scale(0.95);
		}
	}
	
	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
	
	/* ========================================
		 Keyframes - Optional
		 ======================================== */
	
	@keyframes bounce {
		0%, 100% {
			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
			transform: translateY(0);
		}
		50% {
			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
			transform: translateY(-25%);
		}
	}
	
	@keyframes shake {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-1rem); }
		20%, 40%, 60%, 80% { transform: translateX(1rem); }
	}
	
	@keyframes scale-in {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	@keyframes scale-out {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0;
			transform: scale(0.9);
		}
	}
	
	@keyframes skeleton {
		0% {
			background-position: -200% 0;
		}
		100% {
			background-position: 200% 0;
		}
	}
	

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
	}
}
@layer oss.elements {

	.œButton {
		--œButton-background-color: var(--color-content);
		--œButton-border-color: transparent;
		--œButton-border-radius: var(--radius);
		--œButton-border-width: 0.1rem;
		--œButton-color: var(--color-background);
		--œButton-column-gap: 0.5ch;
		--œButton-font-size: var(--text);
		--œButton-font-weight: 500;
		--œButton-padding-block: 1ch;
		--œButton-padding-inline: 2ch;
	}

	.œButton {
		align-items: center;
		background-color: var(--œButton-background-color);
		border: var(--œButton-border-width) solid var(--œButton-border-color);
		border-radius: var(--œButton-border-radius);
		color: var(--œButton-color);
		column-gap: var(--œButton-column-gap);
		cursor: pointer;
		display: inline-grid;
		fill: currentColor;
		font-size: var(--œButton-font-size);
		font-weight: var(--œButton-font-weight);
		grid-auto-flow: column;
		justify-items: center;
		padding-block: var(--œButton-padding-block);
		padding-inline: var(--œButton-padding-inline);
		transition: 
			background-color var(--animation-duration-fast) var(--animation-easing-standard),
			border-color var(--animation-duration-fast) var(--animation-easing-standard),
			color var(--animation-duration-fast) var(--animation-easing-standard),
			transform var(--animation-duration-fast) var(--animation-easing-standard);
		user-select: none;
	}

	.œButton:hover {
		--œButton-background-color: color-mix(in srgb, var(--color-content) 90%, var(--color-background) 10%);
	}

	.œButton:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.œButton:active {
		transform: scale(0.98);
	}

	.œButton:disabled,
	.œButton[disabled],
	.œButton[aria-disabled="true"] {
		--œButton-background-color: var(--color-surface);
		--œButton-color: var(--color-content-disabled);
		cursor: not-allowed;
		pointer-events: none;
	}

	/* */
	/* Définir le nombre de colonnes selon le contenu */
	.œButton:has(.__leading):has(.__trailing) {
		grid-template-columns: auto 1fr auto;
	}

	.œButton:has(.__leading):not(:has(.__trailing)) {
		grid-template-columns: auto 1fr;
	}

	.œButton:has(.__trailing):not(:has(.__leading)) {
		grid-template-columns: 1fr auto;
	}

	/* Placement fixe - la grille s'adapte mais les positions restent cohérentes */
	@scope (.œButton) {
		.__leading {
			grid-column: 1;
		}

		.__label {
			grid-column: 2;
		}

		.__trailing {
			grid-column: 3;
		}
	}

	/* A vérifier / retravailler */

	.œButton.--primary {
		--œButton-background-color: var(--color-accent);
		--œButton-color: var(--color-accent-contrast);
	}
	
	.œButton.--primary:hover {
		--œButton-background-color: color-mix(in srgb, var(--color-accent) 85%, black 15%);
	}

	.œButton.--secondary {
		--œButton-background-color: transparent;
		--œButton-border-color: var(--color-border);
		--œButton-color: var(--color-content);
	}
	
	.œButton.--secondary:hover {
		--œButton-background-color: var(--color-surface);
		--œButton-border-color: var(--color-border-strong);
	}

	/* A vérifier / retravailler */
	.œButton[data-role="destructive"] {
		--œButton-background-color: var(--color-status-error);
		--œButton-color: var(--color-background);
	}
	
	.œButton[data-role="destructive"]:hover {
		--œButton-background-color: color-mix(in srgb, var(--color-status-error) 85%, black 15%);
	}

	/* Destructive + Secondary variant */
	.œButton.--secondary[data-role="destructive"] {
		--œButton-background-color: transparent;
		--œButton-border-color: var(--color-status-error);
		--œButton-color: var(--color-status-error);
	}
	
	.œButton.--secondary[data-role="destructive"]:hover {
		--œButton-background-color: color-mix(in srgb, var(--color-status-error) 10%, transparent 90%);
		--œButton-border-color: color-mix(in srgb, var(--color-status-error) 85%, black 15%);
	}
}
@layer oss.elements {

	/* ========================================
	 œBreadcrumb - Base
	 ======================================== */
	.œBreadcrumb {
	--œBreadcrumb-color: var(--color-content-muted);
	--œBreadcrumb-color-active: var(--color-content);
	--œBreadcrumb-color-hover: var(--color-content);
	--œBreadcrumb-font-size: var(--text-s);
	--œBreadcrumb-gap: var(--space-xs);
	--œBreadcrumb-separator: "/";
	--œBreadcrumb-separator-gap: var(--space-xs);

	container-type: inline-size;
	}

	@scope (.œBreadcrumb) {

		/* ======================================
			 Structure
			 ====================================== */
		ol {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: var(--œBreadcrumb-gap);
			list-style: none;
		}

		li {
			align-items: center;
			display: flex;
		}

		/* Séparateur */
		li + li::before {
			color: var(--œBreadcrumb-color);
			content: var(--œBreadcrumb-separator);
			padding-inline: var(--œBreadcrumb-separator-gap);
		}

		/* Links & current */
		a,
		[aria-current="page"] {
			align-items: center;
			color: var(--œBreadcrumb-color);
			display: inline-flex;
			font-size: var(--œBreadcrumb-font-size);
			gap: var(--space-xxs);
		}

		a {
			text-decoration: underline;
			text-underline-offset: 0.2em;
			transition: color var(--animation-duration-fast) var(--animation-easing-standard);
		}

		a:hover {
			color: var(--œBreadcrumb-color-hover);
		}

		a:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		[aria-current="page"] {
			color: var(--œBreadcrumb-color-active);
			font-weight: 500;
			pointer-events: none;
			text-decoration: none;
		}

		/* Icon */
		.__icon {
			fill: currentColor;
			flex-shrink: 0;
			height: 1em;
			width: 1em;
		}

		/* Label masqué si icône présente - petit container */
		@container (max-width: 30rem) {
			li:has(.__icon) .__label {
				clip: rect(0, 0, 0, 0);
				height: 1px;
				overflow: hidden;
				position: absolute;
				white-space: nowrap;
				width: 1px;
			}
		}
	}

	/* ========================================
	 œBreadcrumb - Variants
	 ======================================== */

	/* Pills */
	.œBreadcrumb.--pills {
	--œBreadcrumb-separator: "";
	}

	@scope (.œBreadcrumb.--pills) {
	li + li::before {
		display: none;
	}

	a,
	[aria-current="page"] {
		background-color: var(--color-surface);
		border: 0.1rem solid var(--color-border);
		border-radius: var(--radius-full);
		padding-block: var(--space-xxs);
		padding-inline: var(--space-s);
	}

	a:hover {
		background-color: var(--color-surface-raised);
		border-color: var(--color-border-strong);
	}

	[aria-current="page"] {
		background-color: var(--color-surface-raised);
		border-color: var(--color-border-strong);
	}
	}

	/* Arrows */
	.œBreadcrumb.--arrows {
	--œBreadcrumb-separator: "›";
	}

	@scope (.œBreadcrumb.--arrows) {
		li + li::before {
			font-size: var(--text);
		}
	}

	/* Minimal - affiche uniquement parent + current */
	.œBreadcrumb.--minimal {
	--œBreadcrumb-separator: "‹";
	}

	@scope (.œBreadcrumb.--minimal) {
	/* Masquer tout sauf les 2 derniers items */
		li:not(:nth-last-child(-n+2)) {
			display: none;
		}

		/* Inverser le séparateur (on remonte) */
		li + li::before {
			order: -1;
		}
	}
}
@layer oss.elements {

  /* ========================================
     œForm
     ======================================== */
  .œForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  /* ========================================
     œFieldset
     ======================================== */
  .œFieldset {
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--space);
    padding: var(--space);
  }

  @scope (.œFieldset) {
    legend {
      color: var(--color-content);
      font-size: var(--text-s);
      font-weight: 600;
      padding-inline: var(--space-xs);
    }

    .__error {
      color: var(--color-status-error);
      font-size: var(--text-s);
    }
  }

  /* Fieldset inline (radios/checkboxes horizontaux) */
  .œFieldset.--inline {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* ========================================
     œField
     ======================================== */
  .œField {
    --œField-gap: var(--space);
    --œField-gap-horizontal: var(--space-l);

    display: flex;
    flex-direction: column;
    gap: var(--œField-gap);
  }

  @scope (.œField) {
    label {
      color: var(--color-content);
      font-size: var(--text-s);
      font-weight: 500;
    }

    /* Required asterisk */
    :is(input, textarea, select):required ~ label::after,
    label:has(+ :is(input, textarea, select):required)::after {
      color: var(--œInput-color-required, var(--color-status-error));
      content: " *";
    }

    .__help {
      color: var(--color-content-muted);
      font-size: var(--text-xs);
    }

    .__error {
      color: var(--color-status-error);
      font-size: var(--text-xs);
    }

    /* Control wrapper (input + icons) */
    .__control {
      align-items: center;
      display: grid;
      gap: var(--space-xs);
      grid-template-columns: 1fr;
    }

    /* Leading seul */
    .__control:has(.__leading):not(:has(.__trailing)) {
      grid-template-columns: auto 1fr;
    }

    /* Trailing seul */
    .__control:has(.__trailing):not(:has(.__leading)) {
      grid-template-columns: 1fr auto;
    }

    /* Les deux */
    .__control:has(.__leading):has(.__trailing) {
      grid-template-columns: auto 1fr auto;
    }

    .__leading {
      grid-column: 1;
    }

    .__control :is(input, textarea, select) {
      grid-column: 2;
    }

    .__trailing {
      grid-column: 3;
    }

    .__icon {
      fill: var(--color-content-muted);
      flex-shrink: 0;
      height: 1.6rem;
      transition: fill var(--animation-duration-fast) var(--animation-easing-standard);
      width: 1.6rem;
    }

    .__icon:is(button) {
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-xxs);
    }

    .__icon:is(button):hover {
      fill: var(--color-content);
    }

    .__icon:is(button):focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
  }

  /* Field horizontal (label à gauche, help/error dessous) */
  .œField.--horizontal {
    display: grid;
    gap: var(--œField-gap-horizontal) var(--œField-gap);
    grid-template-columns: minmax(12rem, 1fr) 2fr;
  }

  @scope (.œField.--horizontal) {
    label {
      align-self: center;
      grid-column: 1;
      grid-row: 1;
    }

    :is(.__control, input:not(.__control *), textarea, select) {
      grid-column: 2;
      grid-row: 1;
    }

    :is(.__help, .__error) {
      grid-column: 2;
      grid-row: 2;
    }
  }

  /* Field fluid (responsive vertical → horizontal) */
  .œField.--fluid {
    container-type: inline-size;
  }

  @container (min-width: 40rem) {
    .œField.--fluid {
      display: grid;
      gap: var(--œField-gap-horizontal) var(--œField-gap);
      grid-template-columns: minmax(12rem, 1fr) 2fr;
    }

    .œField.--fluid label {
      align-self: center;
      grid-column: 1;
      grid-row: 1;
    }

    .œField.--fluid :is(.__control, input:not(.__control *), textarea, select) {
      grid-column: 2;
      grid-row: 1;
    }

    .œField.--fluid :is(.__help, .__error) {
      grid-column: 2;
      grid-row: 2;
    }
  }

  /* Field inline (checkbox/radio) */
  .œField.--inline {
    align-items: center;
    flex-direction: row;
    gap: var(--space-xs);
  }

  @scope (.œField.--inline) {
    label {
      order: 2;
    }

    :is(input[type="checkbox"], input[type="radio"]) {
      order: 1;
    }
  }

  /* ========================================
     œInput / œTextarea / œSelect - Base
     ======================================== */
  :is(.œInput, .œTextarea, .œSelect) {
    --œInput-background-color: var(--color-background);
    --œInput-border-color: var(--color-border);
    --œInput-border-radius: var(--radius);
    --œInput-border-width: 0.1rem;
    --œInput-color: var(--color-content);
    --œInput-color-required: var(--color-status-error);
    --œInput-color-success: var(--color-status-success);
    --œInput-color-warning: var(--color-status-warning);
    --œInput-padding-block: var(--space-s);
    --œInput-padding-inline: var(--space-s);

    background-color: var(--œInput-background-color);
    border: var(--œInput-border-width) solid var(--œInput-border-color);
    border-radius: var(--œInput-border-radius);
    color: var(--œInput-color);
    font-family: inherit;
    font-size: var(--text-form);
    padding-block: var(--œInput-padding-block);
    padding-inline: var(--œInput-padding-inline);
    transition: 
      border-color var(--animation-duration-fast) var(--animation-easing-standard),
      outline-color var(--animation-duration-fast) var(--animation-easing-standard);
    width: 100%;
  }

  /* Focus */
  :is(.œInput, .œTextarea, .œSelect):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
  }

  /* Disabled */
  :is(.œInput, .œTextarea, .œSelect):disabled {
    background-color: var(--color-surface);
    color: var(--color-content-disabled);
    cursor: not-allowed;
  }

  /* Read-only */
  :is(.œInput, .œTextarea, .œSelect):read-only {
    background-color: var(--color-surface);
    cursor: default;
  }

  /* Invalid - modern (user a interagi) */
  :is(.œInput, .œTextarea, .œSelect):user-invalid {
    border-color: var(--œInput-color-required);
  }

  /* Invalid - fallback navigateurs anciens */
  :is(.œInput, .œTextarea, .œSelect):not(:placeholder-shown):invalid {
    border-color: var(--œInput-color-required);
  }

  /* Invalid + focus = warning (moins agressif) */
  :is(.œInput, .œTextarea, .œSelect):focus:invalid {
    outline-color: var(--œInput-color-warning);
  }

  /* Valid (succès) */
  :is(.œInput, .œTextarea, .œSelect):user-valid {
    border-color: var(--œInput-color-success);
  }

  /* Aria-invalid (JS validation override) */
  :is(.œInput, .œTextarea, .œSelect)[aria-invalid="true"] {
    border-color: var(--œInput-color-required);
  }

  :is(.œInput, .œTextarea, .œSelect)[aria-invalid="true"]:focus-visible {
    outline-color: var(--œInput-color-required);
  }

  /* ========================================
     œTextarea - Spécifique
     ======================================== */
  .œTextarea {
    min-height: 12rem;
    resize: vertical;
  }

  /* ========================================
     œCheckbox / œRadio
     ======================================== */
  :is(.œCheckbox, .œRadio) {
    accent-color: var(--color-accent);
    cursor: pointer;
    height: 1.6rem;
    width: 1.6rem;
  }

  :is(.œCheckbox, .œRadio):disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :is(.œCheckbox, .œRadio):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}
@layer oss.elements {

	/* ========================================
		 œScroller - Base
		 ======================================== */
	.œScroller {
		--œScroller-gap: var(--space);
		--œScroller-padding-inline: var(--space);

		column-gap: var(--œScroller-gap);
		display: grid;
		grid-auto-columns: max-content;
		grid-auto-flow: column;
		isolation: isolate;
		max-width: 100vw;
		overflow-x: scroll;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		padding-inline: var(--œScroller-padding-inline);
		position: relative;
		scrollbar-width: none;
	}

	.œScroller::-webkit-scrollbar {
		display: none;
	}

	.œScroller > * {
		isolation: isolate;
	}

	/* ========================================
		 Scroll Snap - data-snap
		 ======================================== */
	
	/* None (default) - pas de snap */
	.œScroller[data-snap="none"] {
		scroll-snap-type: none;
	}

	/* Start - snap au début de chaque item */
	.œScroller[data-snap="start"] {
		scroll-snap-type: x mandatory;
	}

	.œScroller[data-snap="start"] > * {
		scroll-snap-align: start;
	}

	/* Center - snap au centre */
	.œScroller[data-snap="center"] {
		scroll-snap-type: x mandatory;
	}

	.œScroller[data-snap="center"] > * {
		scroll-snap-align: center;
	}

	/* End - snap à la fin */
	.œScroller[data-snap="end"] {
		scroll-snap-type: x mandatory;
	}

	.œScroller[data-snap="end"] > * {
		scroll-snap-align: end;
	}

	/* ========================================
		 Alignement - data-align="start"
		 ======================================== */
	
	/* Mobile - padding safe-area */
	/*@container (max-width: 64rem) {*/
	@media (min-width: 64rem) {
		.œScroller[data-align="start"] {
			padding-inline: max(
				var(--œScroller-padding-inline),
				env(safe-area-inset-left),
				env(safe-area-inset-right)
			);
		}
	}

	/* Desktop - alignement avec siblings contraints */
	/*@container (min-width: 64rem) {*/
	@media (min-width: 64rem) {
		.œScroller[data-align="start"] > * {
			transform: translateX(
				calc(
					(max(64rem, 100vw) / 2) - (var(--layout-max-width) / 2) - var(--layout-padding-inline-safe)
				)
			);
		}
	}

	/* ========================================
		 Variants - Optionnels (supprimables)
		 ======================================== */

	/* Cards - grands gaps, padding généreux */
	.œScroller.--cards {
		--œScroller-gap: var(--space-xl);
		--œScroller-padding-inline: var(--space-xl);
	}

	/* Compact - petits gaps */
	.œScroller.--compact {
		--œScroller-gap: var(--space-xs);
		--œScroller-padding-inline: var(--space-s);
	}

	/* Pills - items arrondis, compacts */
	.œScroller.--pills {
		--œScroller-gap: var(--space-s);
		--œScroller-padding-inline: var(--space-m);
	}

	.œScroller.--pills > * {
		background-color: var(--color-surface);
		border-radius: var(--radius-full);
		padding-block: var(--space-xs);
		padding-inline: var(--space-s);
	}
}
@layer oss.elements {
	.œSfDirectory {
		--œSfDirectory-gap-column: var(--space-s);
		--œSfDirectory-gap-group: var(--space-l);
		--œSfDirectory-gap-item: var(--space-xs);
		--œSfDirectory-font-size-title: var(--text-s);
		--œSfDirectory-font-size-item: var(--text-s);
		--œSfDirectory-font-weight-title: 600;
	}

	.œSfDirectory {
		display: grid;
		gap: var(--œSfDirectory-gap-column);
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}

	.œSfDirectory .__column {
		display: flex;
		flex-direction: column;
		gap: var(--œSfDirectory-gap-group);
	}

	.œSfDirectory details > summary {
		align-items: center;
		border-block-end: 0.1rem solid var(--color-border);
		color: var(--color-content);
		cursor: pointer;
		display: flex;
		font-size: var(--œSfDirectory-font-size-title);
		font-weight: var(--œSfDirectory-font-weight-title);
		justify-content: space-between;
		list-style: none;
		padding-block: var(--space-s);
		user-select: none;
	}

	.œSfDirectory details > summary {
		align-items: center;
		border-block-end: 0.1rem solid var(--color-border);
		color: var(--color-content);
		cursor: pointer;
		display: flex;
		font-size: var(--œSfDirectory-font-size-title);
		font-weight: var(--œSfDirectory-font-weight-title);
		justify-content: space-between;
		list-style: none;
		padding-block: var(--space-s);
		user-select: none;
	}

	.œSfDirectory details > summary::-webkit-details-marker {
		display: none;
	}

	.œSfDirectory details > summary:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.œSfDirectory details .__toggle {
		fill: currentColor;
		flex-shrink: 0;
		transition: transform var(--animation-duration-fast) var(--animation-easing-standard);
	}

	.œSfDirectory details[open] > summary .__toggle {
		transform: rotate(180deg);
	}

	.œSfDirectory details > ul {
		display: flex;
		flex-direction: column;
		gap: var(--œSfDirectory-gap-item);
		padding-block: var(--space-s);
	}

	.œSfDirectory details > ul a {
		color: var(--color-content-muted);
		font-size: var(--œSfDirectory-font-size-item);
		text-decoration: none;
		transition: color var(--animation-duration-fast) var(--animation-easing-standard);
	}

	.œSfDirectory details > ul a:hover {
		color: var(--color-content);
	}

	.œSfDirectory details > ul a:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.œSfDirectory details > ul a:not([href]),
	.œSfDirectory details > ul a[href=""] {
		color: var(--color-content-disabled);
	}

	@media (orientation: portrait) {
		.œSfDirectory {
			grid-template-columns: 1fr;
		}
	}

	@media (min-width: 76.8rem) {
		.œSfDirectory {
			--œSfDirectory-gap-column: var(--space-xl);
		}
		.œSfDirectory details > summary {
			border-block-end: none;
			cursor: default;
			padding-block-start: 0;
			pointer-events: none;
		}

		.œSfDirectory .__toggle {
			display: none;
		}
	}

}
@layer oss.utilities {
}