/* ============================================================
   Atelier — Utilities

   Sous-ensemble minimal de classes utilitaires nécessaires aux
   composants JSX pour le layout (flex, grid, positionnement) et l'état
   (hover, opacity). Remplace l'usage de Tailwind. Tout le reste passe
   par les tokens et les classes a-*.
   ============================================================ */

/* Display */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Flex helpers */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }

/* Responsive : >= 768px → row (alternative à md:flex-row Tailwind) */
@media (min-width: 768px) {
    .md-flex-row { flex-direction: row; }
}
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; min-width: 0; min-height: 0; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid */
.grid-fit-1fr { grid-template-columns: max-content 1fr; }

/* Alignement */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }
.self-start     { align-self: flex-start; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Gap (échelle 4px) */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-x-3 { column-gap: 12px; }
.gap-y-1 { row-gap: 6px; }

/* Largeur / hauteur */
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.h-auto        { height: auto; }
.min-h-0       { min-height: 0; }
.min-w-0       { min-width: 0; }
.min-h-screen  { min-height: 100vh; }
.max-w-full    { max-width: 100%; }
.max-w-2xl     { max-width: 42rem; }

/* Texte */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.top-4    { top: 16px; }
.right-0  { right: 0; }
.right-4  { right: 16px; }

/* Z-index — réutilise les tokens. Conservé `z-50` car des tests e2e ciblent ce sélecteur. */
.z-40 { z-index: var(--z-modal); }
.z-50 { z-index: var(--z-popover); }

/* Curseurs */
.cursor-pointer    { cursor: pointer; }
.cursor-text       { cursor: text; }
.cursor-default    { cursor: default; }
.cursor-zoom-out   { cursor: zoom-out; }

/* Opacité / transitions */
.opacity-0           { opacity: 0; }
.transition-opacity  { transition: opacity var(--dur-fast) var(--ease); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* Object-fit (images) */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }

/* Typographie utilitaires (mappées sur les tokens). */
.text-2xs    { font-size: var(--fs-2xs); }
.text-xs     { font-size: var(--fs-xs); }
.text-sm     { font-size: var(--fs-sm); }
.text-base   { font-size: var(--fs-base); }
.text-md     { font-size: var(--fs-md); }
.text-lg     { font-size: var(--fs-lg); }
.text-xl     { font-size: var(--fs-xl); }
.text-2xl    { font-size: var(--fs-2xl); }

.font-light    { font-weight: var(--weight-regular); }
.font-normal   { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.font-mono     { font-family: var(--font-mono); }

/* Padding / Margin (tokens 4px). N'inclut que les valeurs réellement utilisées. */
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-6  { padding: var(--space-6); }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-2); }
.ml-2 { margin-left: var(--space-2); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }

/* Hover utilitaires (remplace les variantes hover: de Tailwind) */
.hover-bg-soft   { transition: background-color var(--dur-fast) var(--ease); }
.hover-bg-soft:hover    { background: var(--surface-hover); }
.hover-bg-strong:hover  { background: var(--surface-press); }
.hover-opacity          { transition: opacity var(--dur-fast) var(--ease); }
.hover-opacity:hover    { opacity: 0.8; }

/* Reset button defaults pour les <button> stylés par a-menu-item (le design
   system les déclare en <div> dans les démos statiques, mais on a besoin des
   sémantiques <button> dans React). */
button.a-menu-item {
    border: 0;
    background: transparent;
    width: auto;
    text-align: left;
    font: inherit;
    color: var(--ink-2);
}
button.a-menu-item:hover { background: var(--surface-hover); color: var(--ink); }

/* Group : container + élément révélé au hover (remplace group/peer Tailwind). */
.a-group-show {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.a-group:hover .a-group-show,
.a-group:focus-within .a-group-show {
    opacity: 1;
}