/*
 * Filet de sécurité visuel, chargé AVANT le CSS Tailwind compilé
 * (static/css/output.css). Tant que ce dernier n'a pas été généré (voir
 * README.md — CLI Tailwind standalone), le site reste présentable.
 *
 * Tout est enfermé dans `@layer fallback`, déclaré ici en premier : en CSS,
 * un style SANS layer l'emporte toujours sur un style placé dans un layer,
 * quelles que soient sa spécificité et sa position. Sans cette précaution,
 * ce fichier écraserait définitivement les composants Tailwind et le rendu
 * premium ne s'appliquerait jamais. En le plaçant dans le tout premier
 * layer déclaré, il devient au contraire le moins prioritaire.
 */

@layer fallback {
  :root {
    --color-base: #0a0a0b;
    --color-surface: #131315;
    --color-text: #f2f1ef;
    --color-muted: #9a988f;
    --color-gold: #c9a66b;
    --color-line: #26262a;
    --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }

  /* Utilitaires basculés en JS (lightbox, badges) : ils doivent fonctionner
     même avant la compilation de Tailwind.
     `.flex` est déclaré AVANT `.hidden` pour qu'un élément portant les deux
     reste masqué, sans recourir à `!important` : celui-ci écraserait aussi
     les variantes responsive (`sm:block`), et masquerait par exemple le nom
     du site en permanence. */
  .flex { display: flex; }
  .hidden { display: none; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  body {
    margin: 0;
    background: var(--color-base);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; }

  .container-page {
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
  }

  .site-footer {
    margin-top: 6rem;
    padding: 3rem 0;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 0.875rem;
  }

  .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .btn-primary { background: var(--color-gold); color: var(--color-base); }
  .btn-secondary { border-color: #606062; color: var(--color-text); background: transparent; }
  .btn-ghost { color: var(--color-muted); background: transparent; padding: 0.5rem 0.75rem; }

  .card {
    border-radius: 2px;
    background: var(--color-surface);
    overflow: hidden;
  }

  .form-field {
    width: 100%;
    border: 1px solid #606062;
    border-radius: 2px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    /* 16px : en dessous, Safari iOS zoome à la prise de focus. */
    font-size: 16px;
  }

  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
  }
}