/* ============================================================
   FRAMEWORK — Couche 1 (générique, zéro identité de marque)
   Reset · Box model · Layout · Grid · Spacing · Typographie
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    line-height: 1.5;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ── Flexbox Layout ───────────────────────────────────────── */

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-2        { flex: 2; }
.flex-auto     { flex: auto; }
.flex-none     { flex: none; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }
.justify-end      { justify-content: flex-end; }
.justify-start    { justify-content: flex-start; }
.self-center   { align-self: center; }
.self-end      { align-self: flex-end; }
.self-start    { align-self: flex-start; }
.self-stretch  { align-self: stretch; }
.order-first   { order: -1; }
.order-last    { order: 1; }

/* ── Grid Layout ──────────────────────────────────────────── */

.grid          { display: grid; }

/* ── 12-column Row / Col system (Vuetify-like) ────────────── */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -8px;
}

.row > [class*="col"] {
    padding-inline: 8px;
    margin-bottom: 16px;
}

/* Gutter sizes */
.row.gutter-0         { margin-inline: 0; }
.row.gutter-0 > [class*="col"] { padding-inline: 0; margin-bottom: 0; }
.row.gutter-sm        { margin-inline: -4px; }
.row.gutter-sm > [class*="col"] { padding-inline: 4px; margin-bottom: 8px; }
.row.gutter-lg        { margin-inline: -12px; }
.row.gutter-lg > [class*="col"] { padding-inline: 12px; margin-bottom: 24px; }
.row.gutter-xl        { margin-inline: -16px; }
.row.gutter-xl > [class*="col"] { padding-inline: 16px; margin-bottom: 32px; }

/* No bottom margin on row items */
.row.no-mb > [class*="col"] { margin-bottom: 0; }

/* Auto-width col */
.col      { flex: 1 1 0%; min-width: 0; }
.col-auto { flex: 0 0 auto; width: auto; }

/* Fixed-width columns (12-column grid) */
.col-1   { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2   { flex: 0 0 16.667%; max-width: 16.667%; }
.col-3   { flex: 0 0 25%;     max-width: 25%; }
.col-4   { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5   { flex: 0 0 41.667%; max-width: 41.667%; }
.col-6   { flex: 0 0 50%;     max-width: 50%; }
.col-7   { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8   { flex: 0 0 66.667%; max-width: 66.667%; }
.col-9   { flex: 0 0 75%;     max-width: 75%; }
.col-10  { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11  { flex: 0 0 91.667%; max-width: 91.667%; }
.col-12  { flex: 0 0 100%;    max-width: 100%; }

/* Offset */
.offset-1  { margin-left: 8.333%; }
.offset-2  { margin-left: 16.667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.333%; }
.offset-6  { margin-left: 50%; }

/* Grid template shorthand */
.grid-cols-1   { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5   { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6   { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7   { grid-template-columns: repeat(7, 1fr); }
.grid-cols-12  { grid-template-columns: repeat(12, 1fr); }

/* ── Spacing (4px base scale) ─────────────────────────────── */

.gap-0    { gap: 0; }
.gap-1    { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2    { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3    { gap: 12px; }
.gap-3\.5 { gap: 14px; }
.gap-4    { gap: 16px; }
.gap-5    { gap: 20px; }
.gap-6    { gap: 24px; }
.gap-7    { gap: 28px; }
.gap-8    { gap: 32px; }
.gap-10   { gap: 40px; }
.gap-12   { gap: 48px; }

.gap-x-2  { column-gap: 8px; }
.gap-x-3  { column-gap: 12px; }
.gap-x-4  { column-gap: 16px; }
.gap-x-6  { column-gap: 24px; }
.gap-x-8  { column-gap: 32px; }
.gap-y-2  { row-gap: 8px; }
.gap-y-3  { row-gap: 12px; }
.gap-y-4  { row-gap: 16px; }
.gap-y-6  { row-gap: 24px; }
.gap-y-8  { row-gap: 32px; }

.p-0      { padding: 0; }
.p-1      { padding: 4px; }
.p-2      { padding: 8px; }
.p-3      { padding: 12px; }
.p-4      { padding: 16px; }
.p-5      { padding: 20px; }
.p-6      { padding: 24px; }
.p-8      { padding: 32px; }
.p-10     { padding: 40px; }
.p-12     { padding: 48px; }

.px-0     { padding-inline: 0; }
.px-1     { padding-inline: 4px; }
.px-2     { padding-inline: 8px; }
.px-3     { padding-inline: 12px; }
.px-4     { padding-inline: 16px; }
.px-5     { padding-inline: 20px; }
.px-6     { padding-inline: 24px; }
.px-8     { padding-inline: 32px; }

.py-0     { padding-block: 0; }
.py-1     { padding-block: 4px; }
.py-2     { padding-block: 8px; }
.py-3     { padding-block: 12px; }
.py-4     { padding-block: 16px; }
.py-5     { padding-block: 20px; }
.py-6     { padding-block: 24px; }
.py-8     { padding-block: 32px; }

.pt-0     { padding-top: 0; }
.pt-1     { padding-top: 4px; }
.pt-2     { padding-top: 8px; }
.pt-3     { padding-top: 12px; }
.pt-4     { padding-top: 16px; }
.pt-5     { padding-top: 20px; }
.pt-6     { padding-top: 24px; }
.pb-0     { padding-bottom: 0; }
.pb-1     { padding-bottom: 4px; }
.pb-2     { padding-bottom: 8px; }
.pb-3     { padding-bottom: 12px; }
.pb-4     { padding-bottom: 16px; }
.pb-6     { padding-bottom: 24px; }
.pl-0     { padding-left: 0; }
.pl-2     { padding-left: 8px; }
.pl-3     { padding-left: 12px; }
.pl-4     { padding-left: 16px; }
.pr-2     { padding-right: 8px; }
.pr-3     { padding-right: 12px; }
.pr-4     { padding-right: 16px; }

.m-auto   { margin: auto; }
.m-0      { margin: 0; }
.mx-auto  { margin-inline: auto; }
.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }
.mt-0     { margin-top: 0; }
.mt-1     { margin-top: 4px; }
.mt-2     { margin-top: 8px; }
.mt-3     { margin-top: 12px; }
.mt-4     { margin-top: 16px; }
.mt-5     { margin-top: 20px; }
.mt-6     { margin-top: 24px; }
.mt-8     { margin-top: 32px; }
.mt-10    { margin-top: 40px; }
.mb-0     { margin-bottom: 0; }
.mb-1     { margin-bottom: 4px; }
.mb-2     { margin-bottom: 8px; }
.mb-3     { margin-bottom: 12px; }
.mb-4     { margin-bottom: 16px; }
.mb-5     { margin-bottom: 20px; }
.mb-6     { margin-bottom: 24px; }
.mb-8     { margin-bottom: 32px; }
.mb-10    { margin-bottom: 40px; }
.ml-0     { margin-left: 0; }
.ml-1     { margin-left: 4px; }
.ml-2     { margin-left: 8px; }
.ml-3     { margin-left: 12px; }
.ml-4     { margin-left: 16px; }
.mr-0     { margin-right: 0; }
.mr-1     { margin-right: 4px; }
.mr-2     { margin-right: 8px; }
.mr-3     { margin-right: 12px; }
.mr-4     { margin-right: 16px; }

/* ── Typography ───────────────────────────────────────────── */

.text-2xs  { font-size: 0.65rem; }  /* ~10px */
.text-xs   { font-size: 0.75rem; }  /* 12px */
.text-sm   { font-size: 0.875rem; } /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg   { font-size: 1.125rem; } /* 18px */
.text-xl   { font-size: 1.25rem; }  /* 20px */
.text-2xl  { font-size: 1.5rem; }   /* 24px */
.text-3xl  { font-size: 1.875rem; } /* 30px */
.text-4xl  { font-size: 2.25rem; }  /* 36px */
.text-5xl  { font-size: 3rem; }     /* 48px */

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 1.75; }

.tracking-tighter { letter-spacing: -0.02em; }
.tracking-tight   { letter-spacing: -0.01em; }
.tracking-normal  { letter-spacing: 0; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }

.font-mono { font-family: var(--font-mono, 'Courier New', monospace); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.italic    { font-style: italic; }

/* ── Sizing ───────────────────────────────────────────────── */

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.h-full    { height: 100%; }
.h-auto    { height: auto; }
.min-h-0   { min-height: 0; }
.min-h-screen { min-height: 100vh; }

.w-4   { width: 16px; }
.w-5   { width: 20px; }
.w-6   { width: 24px; }
.w-8   { width: 32px; }
.w-10  { width: 40px; }
.w-12  { width: 48px; }
.h-4   { height: 16px; }
.h-5   { height: 20px; }
.h-6   { height: 24px; }
.h-8   { height: 32px; }
.h-10  { height: 40px; }
.h-12  { height: 48px; }
.size-4  { width: 16px; height: 16px; }
.size-5  { width: 20px; height: 20px; }
.size-6  { width: 24px; height: 24px; }
.size-8  { width: 32px; height: 32px; }
.size-10 { width: 40px; height: 40px; }
.size-12 { width: 48px; height: 48px; }

.max-w-xs  { max-width: 20rem; }   /* 320px */
.max-w-sm  { max-width: 24rem; }   /* 384px */
.max-w-md  { max-width: 28rem; }   /* 448px */
.max-w-lg  { max-width: 32rem; }   /* 512px */
.max-w-xl  { max-width: 36rem; }   /* 576px */
.max-w-2xl { max-width: 42rem; }   /* 672px */
.max-w-3xl { max-width: 48rem; }   /* 768px */
.max-w-4xl { max-width: 56rem; }   /* 896px */
.max-w-5xl { max-width: 64rem; }   /* 1024px */
.max-w-6xl { max-width: 72rem; }   /* 1152px */
.max-w-7xl { max-width: 80rem; }   /* 1280px */
.max-w-full { max-width: 100%; }

.min-w-0   { min-width: 0; }
.w-fit     { width: fit-content; }
.h-fit     { height: fit-content; }
.shrink-0  { flex-shrink: 0; }
.grow-0    { flex-grow: 0; }
.grow      { flex-grow: 1; }

.col-span-full { grid-column: 1 / -1; }
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.row-span-2    { grid-row: span 2; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre    { white-space: pre; }
.resize-y  { resize: vertical; }

/* ── Position ─────────────────────────────────────────────── */

.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; top: 0; }
.inset-0   { inset: 0; }
.top-0     { top: 0; }
.right-0   { right: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }

/* ── Display ──────────────────────────────────────────────── */

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.contents     { display: contents; }

/* ── Overflow ─────────────────────────────────────────────── */

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* Hides scrollbar while preserving scroll ability */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ── Z-index scale ────────────────────────────────────────── */

.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-100  { z-index: 100; }

/* ── Visibility / Interaction ─────────────────────────────── */

.pointer-events-none { pointer-events: none; }
.cursor-pointer      { cursor: pointer; }
.cursor-default      { cursor: default; }
.cursor-not-allowed  { cursor: not-allowed; }
.select-none         { user-select: none; }
.select-text         { user-select: text; }
.opacity-0           { opacity: 0; }
.opacity-30          { opacity: 0.3; }
.opacity-40          { opacity: 0.4; }
.opacity-50          { opacity: 0.5; }
.opacity-60          { opacity: 0.6; }
.opacity-70          { opacity: 0.7; }
.opacity-80          { opacity: 0.8; }
.opacity-85          { opacity: 0.85; }
.opacity-90          { opacity: 0.9; }
.opacity-100         { opacity: 1; }

/* ── Borders ──────────────────────────────────────────────── */

.border      { border: 1px solid; }
.border-0    { border: 0; }
.border-t    { border-top: 1px solid; }
.border-b    { border-bottom: 1px solid; }
.border-l    { border-left: 1px solid; }
.border-r    { border-right: 1px solid; }
.rounded-none { border-radius: 0; }
.rounded-sm  { border-radius: var(--radius-sm, 6px); }
.rounded     { border-radius: var(--radius-md, 8px); }
.rounded-lg  { border-radius: var(--radius-lg, 12px); }
.rounded-xl  { border-radius: var(--radius-xl, 16px); }
.rounded-2xl { border-radius: var(--radius-2xl, 20px); }
.rounded-full { border-radius: 9999px; }

/* ── Object fit ───────────────────────────────────────────── */

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Transitions ──────────────────────────────────────────── */

.transition      { transition: all 0.2s ease; }
.transition-slow { transition: all 0.35s ease; }
.duration-300    { transition-duration: 0.3s; }
.duration-500    { transition-duration: 0.5s; }

/* ── Responsive (mobile-first: sm ≤ 768, md ≥ 769, lg ≥ 1200) ─ */

@media (max-width: 768px) {
    .sm\:hidden       { display: none; }
    .sm\:flex         { display: flex; }
    .sm\:block        { display: block; }
    .sm\:flex-col     { flex-direction: column; }
    .sm\:flex-wrap    { flex-wrap: wrap; }
    .sm\:items-center { align-items: center; }
    .sm\:items-stretch { align-items: stretch; }
    .sm\:text-center  { text-align: center; }
    .sm\:w-full       { width: 100%; }
    .sm\:p-2          { padding: 8px; }
    .sm\:p-3          { padding: 12px; }
    .sm\:p-4          { padding: 16px; }
    .sm\:px-2         { padding-inline: 8px; }
    .sm\:px-3         { padding-inline: 12px; }
    .sm\:px-4         { padding-inline: 16px; }
    .sm\:py-3         { padding-block: 12px; }
    .sm\:gap-2        { gap: 8px; }
    .sm\:gap-3        { gap: 12px; }
    .sm\:gap-4        { gap: 16px; }
    .sm\:text-xs      { font-size: 0.75rem; }
    .sm\:text-sm      { font-size: 0.875rem; }
    .sm\:text-base    { font-size: 1rem; }

    /* Responsive columns: all become full-width on mobile */
    .sm\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .sm\:col-6  { flex: 0 0 50%; max-width: 50%; }

    .sm\:grid-cols-1 { grid-template-columns: 1fr; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
    .md\:flex     { display: flex; }
    .md\:block    { display: block; }
    .md\:grid     { display: grid; }
    .md\:hidden   { display: none; }
    .md\:flex-row { flex-direction: row; }
    .md\:col-3    { flex: 0 0 25%; max-width: 25%; }
    .md\:col-4    { flex: 0 0 33.333%; max-width: 33.333%; }
    .md\:col-6    { flex: 0 0 50%; max-width: 50%; }
    .md\:col-8    { flex: 0 0 66.667%; max-width: 66.667%; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
    .lg\:flex     { display: flex; }
    .lg\:hidden   { display: none; }
    .lg\:col-2    { flex: 0 0 16.667%; max-width: 16.667%; }
    .lg\:col-3    { flex: 0 0 25%; max-width: 25%; }
    .lg\:col-4    { flex: 0 0 33.333%; max-width: 33.333%; }
    .lg\:col-6    { flex: 0 0 50%; max-width: 50%; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── Animations ───────────────────────────────────────────── */

@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.animate-spin     { animation: spin 1s linear infinite; }
.animate-pulse    { animation: pulse 2s ease-in-out infinite; }
.animate-fade-in  { animation: fade-in 0.3s ease; }
.animate-slide-up { animation: slide-up 0.3s ease; }

/* ── Ripple effect (generic) ──────────────────────────────── */

.ripple {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.ripple-animation {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Accessibility ────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

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