/* ============================================================================
   DESIGN SYSTEM - inspiration macOS / iOS
   ----------------------------------------------------------------------------
   Fondations partagees par toutes les pages : jetons de design, typographie,
   surfaces translucides, controles de formulaire, boutons, animations.
   Aucune dependance externe : uniquement des fonctionnalites CSS stables et
   largement supportees, avec repli explicite lorsque necessaire.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. JETONS DE DESIGN
   --------------------------------------------------------------------------- */
:root {
    /* Palette claire */
    --color-canvas: #f5f5f7;
    --color-canvas-accent: #e8e8ed;
    --color-surface: rgba(255, 255, 255, 0.72);
    --color-surface-solid: #ffffff;
    --color-surface-sunken: rgba(0, 0, 0, 0.035);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.16);

    --color-text: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;

    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-accent-active: #006edb;
    --color-accent-soft: rgba(0, 113, 227, 0.1);

    --color-success: #34c759;
    --color-success-soft: rgba(52, 199, 89, 0.12);
    --color-warning: #ff9f0a;
    --color-warning-soft: rgba(255, 159, 10, 0.12);
    --color-danger: #ff3b30;
    --color-danger-soft: rgba(255, 59, 48, 0.12);

    /* Typographie : pile systeme native, sans telechargement de police */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2.25rem;

    /* Rythme vertical : echelle de 4 px */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 3.5rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 980px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);

    /* Courbes d'acceleration proches des transitions systeme Apple */
    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 420ms;

    --blur-glass: 22px;
    --layout-max: 62rem;

    /* Materiau translucide : reflet, arete et voile de surface. */
    --glass-highlight: rgba(255, 255, 255, 0.85);
    --glass-edge: rgba(255, 255, 255, 0.55);
    --glass-sheen: rgba(255, 255, 255, 0.42);
}

/* Palette sombre : appliquee selon la preference systeme, sans script. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-canvas: #000000;
        --color-canvas-accent: #1c1c1e;
        --color-surface: rgba(28, 28, 30, 0.72);
        --color-surface-solid: #1c1c1e;
        --color-surface-sunken: rgba(255, 255, 255, 0.05);
        --color-border: rgba(255, 255, 255, 0.1);
        --color-border-strong: rgba(255, 255, 255, 0.2);

        --color-text: #f5f5f7;
        --color-text-secondary: #a1a1a6;
        --color-text-tertiary: #8e8e93;

        --color-accent: #0a84ff;
        --color-accent-hover: #329bff;
        --color-accent-active: #0071e3;
        --color-accent-soft: rgba(10, 132, 255, 0.16);

        --color-success: #32d74b;
        --color-success-soft: rgba(50, 215, 75, 0.16);
        --color-warning: #ff9f0a;
        --color-warning-soft: rgba(255, 159, 10, 0.16);
        --color-danger: #ff453a;
        --color-danger-soft: rgba(255, 69, 58, 0.16);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

        /* En sombre, le reflet doit rester un souffle : trop clair, il donne
           un liseré blanc dur au lieu d'une arete. */
        --glass-highlight: rgba(255, 255, 255, 0.14);
        --glass-edge: rgba(255, 255, 255, 0.12);
        --glass-sheen: rgba(255, 255, 255, 0.06);
    }
}

/* ---------------------------------------------------------------------------
   2. REINITIALISATION
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

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

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

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHIE
   --------------------------------------------------------------------------- */
h1,
h2,
h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 {
    font-size: var(--text-2xl);
    letter-spacing: -0.035em;
}

h2 {
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
}

h3 { font-size: var(--text-md); }

/* Marque du produit : une seule graisse, une traque serree, aucun ornement. */
.wordmark {
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-text);
    white-space: nowrap;
}

.wordmark--large {
    font-size: var(--text-2xl);
    letter-spacing: -0.04em;
}

.wordmark--small {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-tertiary);
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-sm        { font-size: var(--text-sm); }
.text-xs        { font-size: var(--text-xs); }
.text-center    { text-align: center; }
.mono           { font-family: var(--font-mono); }

/* La politique de securite du site interdit les attributs "style" en ligne :
   tout ecart d'espacement ponctuel passe par une classe. */
.mt-4           { margin-top: var(--space-4); }
.mt-5           { margin-top: var(--space-5); }

/* ---------------------------------------------------------------------------
   4. SURFACES
   --------------------------------------------------------------------------- */
.card {
    background-color: var(--color-surface-solid); /* repli sans transparence */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

/* --- Verre liquide -------------------------------------------------------
   Trois couches superposees produisent la profondeur : le flou sature ce qui
   se trouve derriere, un degres de remplissage tres leger donne le corps du
   materiau, et un liseré clair en haut simule le reflet speculaire d'une
   arete biseautee.

   Le tout n'est applique que si le navigateur sait flouter : sans cette
   garde, il ne resterait qu'un fond translucide illisible. */
.glass {
    background-color: var(--color-surface-solid);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        position: relative;
        background-image: linear-gradient(
            160deg,
            var(--glass-sheen) 0%,
            transparent 42%
        );
        background-color: var(--color-surface);
        -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(200%);
        backdrop-filter: blur(var(--blur-glass)) saturate(200%);
        border-color: var(--glass-edge);
        box-shadow:
            var(--shadow-md),
            inset 0 1px 0 var(--glass-highlight);
    }
}

.card--tight { padding: var(--space-5); }

.card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.divider {
    height: 1px;
    background-color: var(--color-border);
    border: 0;
    margin: var(--space-5) 0;
}

/* ---------------------------------------------------------------------------
   5. CONTROLES DE FORMULAIRE
   --------------------------------------------------------------------------- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    line-height: 1.45;
}

.field__label-note {
    font-weight: 400;
    color: var(--color-text-tertiary);
}

.input--area {
    resize: vertical;
    min-height: 6rem;
    line-height: 1.5;
}

.input--mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
}

.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.input::placeholder { color: var(--color-text-tertiary); }

.input:hover:not(:disabled) { border-color: var(--color-border-strong); }

.input:focus {
    outline: none;
    background-color: var(--color-surface-solid);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px var(--color-danger-soft);
}

/* ---------------------------------------------------------------------------
   6. BOUTONS
   --------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    /* Seules des proprietes composees sont animees : le rendu reste a 60 FPS
       car ni la mise en page ni la peinture ne sont recalculees. */
    transition:
        transform var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.button:active:not(:disabled) { transform: scale(0.97); }

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.button--primary {
    color: #ffffff;
    background-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.button--primary:hover:not(:disabled) { background-color: var(--color-accent-hover); }
.button--primary:active:not(:disabled) { background-color: var(--color-accent-active); }

.button--secondary {
    color: var(--color-text);
    background-color: var(--color-surface-sunken);
    border-color: var(--color-border);
}

.button--secondary:hover:not(:disabled) { border-color: var(--color-border-strong); }

.button--quiet {
    color: var(--color-accent);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.button--quiet:hover:not(:disabled) { background-color: var(--color-accent-soft); }

.button--block { width: 100%; }

/* Lien textuel : meme rendu qu'un <a>, que le noeud soit un lien ou un bouton. */
.link {
    color: var(--color-accent);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.link:hover { text-decoration: underline; }

.link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.button--hero {
    padding: var(--space-4) var(--space-7);
    font-size: var(--text-md);
    font-weight: 600;
    min-height: 3.5rem;
}

/* ---------------------------------------------------------------------------
   7. INDICATEURS D'ETAT
   --------------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.pill__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.pill--success { color: var(--color-success); background-color: var(--color-success-soft); }
.pill--warning { color: var(--color-warning); background-color: var(--color-warning-soft); }
.pill--danger  { color: var(--color-danger);  background-color: var(--color-danger-soft); }
.pill--accent  { color: var(--color-accent);  background-color: var(--color-accent-soft); }

/* Pulsation discrete : signale une activite en cours sans capter l'attention. */
.pill--live .pill__dot { animation: pulse 1.8s var(--ease-in-out) infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Rouet facon iOS : douze traits en rotation discrete. */
.spinner {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   8. ANIMATIONS D'ENTREE
   --------------------------------------------------------------------------- */
@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animate-rise {
    animation: rise var(--duration-slow) var(--ease-out) both;
}

.animate-rise--delay-1 { animation-delay: 60ms; }
.animate-rise--delay-2 { animation-delay: 120ms; }

/* Respect de la preference systeme : aucune animation superflue. */
@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;
    }
}

/* ---------------------------------------------------------------------------
   9. NOTIFICATIONS (toast)
   --------------------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    top: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-solid);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    pointer-events: auto;
    animation: toast-in var(--duration-base) var(--ease-out) both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toast {
        background-color: var(--color-surface);
        -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%);
        backdrop-filter: blur(var(--blur-glass)) saturate(180%);
    }
}

.toast--leaving { animation: toast-out var(--duration-base) var(--ease-in-out) both; }

.toast__icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.toast--success .toast__icon { background-color: var(--color-success); }
.toast--error   .toast__icon { background-color: var(--color-danger); }
.toast--info    .toast__icon { background-color: var(--color-accent); }

.toast__message { flex: 1; min-width: 0; overflow-wrap: anywhere; }

@keyframes toast-in {
    from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.96); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); }
}

/* ---------------------------------------------------------------------------
   10. UTILITAIRES
   --------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* Masque visuellement sans retirer du flux d'accessibilite. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.row     { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.row--wrap    { flex-wrap: wrap; }
.grow    { flex: 1; min-width: 0; }