/* FullHouse — kit d'interface.
Le langage visuel de shadcn/ui (style « new-york », palette zinc) porté en CSS pur, sans
build : jetons, puis composants `.ui-*`. Chargé avant app.css sur toutes les pages de
l'application. Mobile d'abord (390 px), pas de mode sombre.
Lis ce fichier en entier avant de dessiner un écran, et n'utilise que ces composants
pour tout écran neuf ou refait. Référence vivante : /admin/kit. */
@font-face {
font-family: "Bricolage Grotesque";
src: url("/static/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
font-weight: 200 800;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bricolage Grotesque";
src: url("/static/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
font-weight: 200 800;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ====================================================================== jetons */
:root {
/* Neutres zinc de shadcn. Le fond de page est « muted/40 », comme le tableau de bord
de shadcn : les cartes blanches s'en détachent par un filet et une ombre discrète. */
--background: #FAFAFA;
--foreground: #09090B;
--card: #FFFFFF;
--card-foreground: #09090B;
--popover: #FFFFFF;
--popover-foreground: #09090B;
--primary: #12372A; /* le vert bouteille */
--primary-hover: #0B271D;
--primary-foreground: #FAFAFA;
--secondary: #F4F4F5;
--secondary-foreground: #18181B;
--muted: #F4F4F5;
--muted-foreground: #71717A;
--accent: #E9B824; /* la moutarde : réservée aux repères (badge d'état, aujourd'hui) */
--accent-soft: #FCF4D9;
--accent-foreground: #09090B;
--destructive: #DC2626;
--destructive-hover: #B91C1C;
--destructive-soft: #FEF2F2;
--destructive-foreground: #FAFAFA;
--success-soft: #E3F0E9;
--border: #E4E4E7;
--input: #E4E4E7;
--ring: #12372A;
--radius: 0.5rem;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
--font-heading: "Bricolage Grotesque", var(--font-sans);
--ui-gutter: 16px;
--ui-control: 2.5rem; /* hauteur d'un bouton ou d'un champ (40 px : le pouce) */
--ui-control-sm: 2.25rem;
--ui-control-lg: 2.75rem;
}
/* ====================================================================== socle */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--foreground); letter-spacing: -0.02em; }
h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 600; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
::placeholder { color: var(--muted-foreground); opacity: 1; }
::selection { background: var(--accent-soft); }
/* ====================================================================== mise en page */
.ui-page { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--ui-gutter); }
.ui-page-narrow { max-width: 40rem; }
.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
.ui-stack > * { margin: 0; min-width: 0; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ui-row > * { margin: 0; min-width: 0; }
.ui-row-between { justify-content: space-between; }
.ui-row-end { justify-content: flex-end; }
.ui-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ui-grid-2 > * { min-width: 0; margin: 0; }
.ui-muted { color: var(--muted-foreground); }
.ui-small { font-size: 0.875rem; }
.ui-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 760px) {
.ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
/* ====================================================================== carte */
/* Dans une grille ou une colonne, un composant ne force jamais la page à s'élargir. */
.ui-card, .ui-card-content, .ui-table-wrap, .ui-tabs, .ui-alert, .ui-empty, .ui-field, .ui-list { min-width: 0; }
.ui-card {
display: flex; flex-direction: column;
background: var(--card); color: var(--card-foreground);
border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.ui-card-header { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem 1.25rem 0; }
.ui-card-title { margin: 0; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.ui-card-description { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-card-content { padding: 1.25rem; }
.ui-card-header + .ui-card-content { padding-top: 1rem; }
.ui-card-content > :first-child { margin-top: 0; }
.ui-card-content > :last-child { margin-bottom: 0; }
.ui-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding: 0 1.25rem 1.25rem; }
.ui-card-footer > * { margin: 0; }
.ui-card-header-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ui-card-header-row > div { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
@media (min-width: 760px) {
.ui-card-header { padding: 1.5rem 1.5rem 0; }
.ui-card-content { padding: 1.5rem; }
.ui-card-header + .ui-card-content { padding-top: 1.25rem; }
.ui-card-footer { padding: 0 1.5rem 1.5rem; }
}
/* ====================================================================== bouton */
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: var(--ui-control); padding: 0.5rem 1rem;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
color: var(--primary-foreground); background: var(--primary);
border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ui-btn svg { width: 1rem; height: 1rem; flex: none; pointer-events: none; }
.ui-btn:hover { background: var(--primary-hover); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.ui-btn-primary { color: var(--primary-foreground); background: var(--primary); }
.ui-btn-secondary { color: var(--secondary-foreground); background: var(--secondary); }
.ui-btn-secondary:hover { background: #E4E4E7; }
.ui-btn-outline { color: var(--foreground); background: var(--card); border-color: var(--input); }
.ui-btn-outline:hover { background: var(--muted); }
.ui-btn-ghost { color: var(--foreground); background: transparent; box-shadow: none; }
.ui-btn-ghost:hover { background: var(--muted); }
.ui-btn-destructive { color: var(--destructive-foreground); background: var(--destructive); }
.ui-btn-destructive:hover { background: var(--destructive-hover); }
.ui-btn-link { color: var(--primary); background: transparent; box-shadow: none; padding-inline: 0.25rem; text-decoration: underline; text-underline-offset: 4px; }
.ui-btn-link:hover { background: transparent; }
.ui-btn-sm { min-height: var(--ui-control-sm); padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-md); }
.ui-btn-lg { min-height: var(--ui-control-lg); padding: 0.625rem 1.5rem; font-size: 0.9375rem; border-radius: var(--radius-md); }
.ui-btn-icon { width: var(--ui-control); padding: 0; }
.ui-btn-icon.ui-btn-sm { width: var(--ui-control-sm); }
.ui-btn-block { display: flex; width: 100%; }
.ui-btn-accent { color: var(--accent-foreground); background: var(--accent); }
.ui-btn-accent:hover { background: #D9A91A; }
/* ====================================================================== champs */
.ui-label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--foreground); }
.ui-label[data-disabled], .ui-field:has(:disabled) > .ui-label { opacity: 0.7; }
.ui-field { display: flex; flex-direction: column; gap: 0.5rem; }
.ui-field > * { margin: 0; }
.ui-input, .ui-textarea, .ui-select {
display: block; width: 100%;
font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--foreground);
background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ui-input, .ui-select { min-height: var(--ui-control); padding: 0.375rem 0.75rem; }
.ui-textarea { min-height: 5rem; padding: 0.5rem 0.75rem; resize: vertical; }
.ui-input:hover, .ui-textarea:hover, .ui-select:hover { border-color: #A1A1AA; }
.ui-input:focus-visible, .ui-textarea:focus-visible, .ui-select:focus-visible {
outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring);
}
.ui-input:disabled, .ui-textarea:disabled, .ui-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--muted); }
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .ui-select[aria-invalid="true"] { border-color: var(--destructive); }
.ui-input[aria-invalid="true"]:focus-visible, .ui-textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--destructive); }
.ui-input[type="file"] { padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-input[type="file"]::file-selector-button {
margin-right: 0.75rem; padding: 0.125rem 0.5rem; font: inherit; font-weight: 500; color: var(--foreground);
background: transparent; border: 0; cursor: pointer;
}
.ui-select {
appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.75rem center;
}
.ui-help { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-error { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--destructive); }
input[type="checkbox"].ui-checkbox, input[type="radio"].ui-radio {
width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--primary); cursor: pointer;
}
.ui-check { display: flex; align-items: center; gap: 0.625rem; min-height: var(--ui-control); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
@media (min-width: 760px) {
.ui-input, .ui-textarea, .ui-select { font-size: 0.875rem; }
}
/* ====================================================================== interrupteur */
input[type="checkbox"].ui-switch {
appearance: none; -webkit-appearance: none;
position: relative; display: inline-block; flex: none; width: 2.75rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0;
background: var(--input); border: 2px solid transparent; border-radius: 999px; cursor: pointer;
transition: background-color 0.15s ease;
}
input[type="checkbox"].ui-switch::before {
content: ""; position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem;
background: var(--card); border-radius: 50%; box-shadow: var(--shadow-md);
transition: transform 0.15s ease;
}
input[type="checkbox"].ui-switch:checked { background: var(--primary); }
input[type="checkbox"].ui-switch:checked::before { transform: translateX(1.25rem); }
input[type="checkbox"].ui-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
input[type="checkbox"].ui-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.ui-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--ui-control); cursor: pointer; }
.ui-switch-row > span { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.875rem; font-weight: 500; }
.ui-switch-row > span small { font-size: 0.8125rem; font-weight: 400; color: var(--muted-foreground); }
/* ====================================================================== badge */
.ui-badge {
display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem;
font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
color: var(--primary-foreground); background: var(--primary);
border: 1px solid transparent; border-radius: var(--radius-md);
}
.ui-badge-secondary { color: var(--secondary-foreground); background: var(--secondary); }
.ui-badge-outline { color: var(--foreground); background: transparent; border-color: var(--border); }
.ui-badge-destructive { color: var(--destructive-foreground); background: var(--destructive); }
.ui-badge-accent { color: var(--accent-foreground); background: var(--accent); }
.ui-badge-accent-soft { color: var(--accent-foreground); background: var(--accent-soft); border-color: var(--accent); }
.ui-badge-success { color: #14532D; background: var(--success-soft); border-color: #9CC7AF; }
.ui-badge-dot::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
/* ====================================================================== onglets */
.ui-tabs { display: flex; gap: 0.25rem; margin: 0; padding: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs > * { margin: 0; }
.ui-tab {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none;
min-height: var(--ui-control); margin-bottom: -1px; padding: 0.5rem 0.75rem;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
color: var(--muted-foreground); background: none; border: 0; border-bottom: 2px solid transparent;
text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-tab svg { width: 1rem; height: 1rem; flex: none; }
.ui-tab input[type="radio"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; opacity: 0; pointer-events: none; }
.ui-tab:hover { color: var(--foreground); }
.ui-tab[aria-current="page"], .ui-tab[aria-selected="true"], .ui-tab:has(input:checked) { color: var(--foreground); border-bottom-color: var(--primary); }
.ui-tab:focus-visible, .ui-tab:has(input:focus-visible) { outline: none; box-shadow: inset 0 0 0 2px var(--ring); border-radius: var(--radius-sm); }
.ui-tab:disabled, .ui-tab[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.ui-tabs-segmented {
display: inline-flex; gap: 0; padding: 0.25rem; border: 0; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground);
}
.ui-tabs-segmented .ui-tab { flex: 1 1 auto; min-height: 2rem; margin: 0; padding: 0.25rem 0.75rem; border: 0; border-radius: var(--radius-md); }
.ui-tabs-segmented .ui-tab[aria-current="page"], .ui-tabs-segmented .ui-tab[aria-selected="true"], .ui-tabs-segmented .ui-tab:has(input:checked) {
color: var(--foreground); background: var(--card); box-shadow: var(--shadow-sm);
}
.ui-tabs-segmented.ui-tabs-block { display: flex; }
.ui-tabs-segmented .ui-tab:focus-visible, .ui-tabs-segmented .ui-tab:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--ring); border-radius: var(--radius-md); }
.ui-tab-panel[hidden] { display: none; }
/* ====================================================================== séparateur */
.ui-separator { height: 1px; width: 100%; margin: 0; border: 0; background: var(--border); }
.ui-separator-vertical { width: 1px; height: auto; align-self: stretch; }
.ui-separator-text { display: flex; align-items: center; gap: 0.75rem; height: auto; background: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.ui-separator-text::before, .ui-separator-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* ====================================================================== alerte */
.ui-alert {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem;
margin: 0; padding: 0.875rem 1rem; font-size: 0.875rem; line-height: 1.45;
color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ui-alert > * { margin: 0; }
.ui-alert:has(> .ui-alert-icon) { grid-template-columns: 1rem minmax(0, 1fr); column-gap: 0.75rem; }
.ui-alert-icon { grid-row: 1 / span 2; width: 1rem; height: 1rem; margin-top: 0.125rem; }
.ui-alert-title { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.ui-alert-description { color: var(--muted-foreground); }
.ui-alert-destructive { color: var(--destructive); border-color: rgba(220, 38, 38, 0.5); background: var(--destructive-soft); }
.ui-alert-destructive .ui-alert-description { color: var(--destructive); }
.ui-alert-success { background: var(--success-soft); border-color: #9CC7AF; color: #14532D; }
.ui-alert-success .ui-alert-description { color: #14532D; }
.ui-alert-accent { background: var(--accent-soft); border-color: var(--accent); }
/* ====================================================================== tableau */
.ui-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; caption-side: bottom; }
.ui-table caption { padding: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-table th, .ui-table td { padding: 0.625rem 0.75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.ui-table thead th { height: 2.5rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-table tbody tr:hover { background: rgba(244, 244, 245, 0.6); }
.ui-table tbody tr[aria-selected="true"] { background: var(--muted); }
.ui-table td { font-variant-numeric: tabular-nums; }
.ui-table .ui-table-num { text-align: right; white-space: nowrap; }
.ui-table tfoot td { font-weight: 500; background: rgba(244, 244, 245, 0.6); border-top: 1px solid var(--border); }
/* ====================================================================== squelette */
.ui-skeleton { display: block; min-height: 1rem; border-radius: var(--radius-md); background: #E4E4E7; }
.ui-skeleton-text { height: 0.875rem; width: 100%; }
.ui-skeleton-title { height: 1.25rem; width: 60%; }
.ui-skeleton-circle { border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
.ui-skeleton { animation: ui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes ui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
}
/* ====================================================================== info-bulle */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 30;
transform: translate(-50%, 4px); padding: 0.375rem 0.75rem; max-width: 16rem; width: max-content;
font-size: 0.75rem; font-weight: 500; line-height: 1.3; text-align: center; white-space: normal;
color: var(--primary-foreground); background: var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ui-tooltip { cursor: default; }
/* ====================================================================== état vide */
.ui-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
padding: 2.5rem 1.5rem; text-align: center;
background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-xl);
}
.ui-empty > * { margin: 0; }
.ui-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.25rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground); }
.ui-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.ui-empty-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.ui-empty-description { max-width: 28rem; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
/* ====================================================================== panneau latéral / feuille
Ouvrir
Sans JavaScript : le voile est le ::before du summary (cliquer dessus referme le ),
et `.ui-sheet-close` est un bouton qui, avec ui.js, retire l'attribut open ; sans ui.js, il
reste un bouton visible et le summary (voile) ferme. Bureau : panneau à droite ; mobile :
feuille qui monte du bas. */
.ui-sheet, .ui-dialog { display: inline-block; }
.ui-sheet > summary, .ui-dialog > summary { list-style: none; }
.ui-sheet > summary::-webkit-details-marker, .ui-dialog > summary::-webkit-details-marker { display: none; }
.ui-sheet[open] > summary::before, details.ui-dialog[open] > summary::before {
content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(9, 9, 11, 0.6); cursor: default;
}
.ui-sheet-panel, .ui-dialog-panel {
position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
padding: 1.25rem; color: var(--foreground); background: var(--card); box-shadow: var(--shadow-lg);
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ui-sheet-panel { left: 0; right: 0; bottom: 0; max-height: min(88vh, 88dvh); padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.ui-sheet-panel::before { content: ""; align-self: center; flex: none; width: 2.5rem; height: 0.25rem; margin: -0.5rem 0 0; border-radius: 999px; background: var(--border); }
.ui-sheet-header, .ui-dialog-header { display: flex; flex-direction: column; gap: 0.375rem; padding-right: 2.5rem; }
.ui-sheet-title, .ui-dialog-title { margin: 0; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.ui-sheet-description, .ui-dialog-description { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.ui-sheet-content, .ui-dialog-content { display: flex; flex-direction: column; gap: 1rem; }
.ui-sheet-content > *, .ui-dialog-content > * { margin: 0; }
.ui-sheet-footer, .ui-dialog-footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; margin-top: auto; }
.ui-sheet-footer > *, .ui-dialog-footer > * { margin: 0; }
.ui-sheet-close, .ui-dialog-close { cursor: pointer; }
/* La croix en haut à droite : un bouton `.ui-sheet-close.ui-sheet-x` (ou `.ui-dialog-x`). */
.ui-sheet-x, .ui-dialog-x {
position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
font: inherit; color: var(--muted-foreground); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.ui-sheet-x::before, .ui-dialog-x::before { content: "×"; font-size: 1.5rem; line-height: 1; }
.ui-sheet-x:hover, .ui-dialog-x:hover { color: var(--foreground); background: var(--muted); }
.ui-sheet-x:focus-visible, .ui-dialog-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
@media (min-width: 760px) {
.ui-sheet-panel { top: 0; left: auto; right: 0; bottom: 0; width: 100%; max-width: 26rem; max-height: none; padding: 1.5rem; border-top: 0; border-left: 1px solid var(--border); border-radius: 0; }
.ui-sheet-panel::before { display: none; }
.ui-sheet-footer, .ui-dialog-footer { flex-direction: row; justify-content: flex-end; }
.ui-sheet-panel .ui-sheet-footer { margin-top: auto; }
}
@media (prefers-reduced-motion: no-preference) {
.ui-sheet[open] > .ui-sheet-panel { animation: ui-sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
.ui-sheet[open] > summary::before, details.ui-dialog[open] > summary::before, dialog.ui-dialog[open]::backdrop { animation: ui-fade 0.18s ease; }
details.ui-dialog[open] > .ui-dialog-panel, dialog.ui-dialog[open] { animation: ui-dialog-in 0.18s ease; }
@keyframes ui-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-dialog-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (min-width: 760px) {
.ui-sheet[open] > .ui-sheet-panel { animation-name: ui-sheet-left; }
@keyframes ui-sheet-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
}
/* ====================================================================== dialogue
Même rendu sur