/* ============================================================================
   LES SERMENTS DE SABLE — L'HABILLAGE DES PAGES D'ENTRÉE
   Fichier : assets/css/interface.css
   ============================================================================

   CE QUE CE FICHIER REMPLACE, ET POURQUOI

   `index.php`, `login.php` et `join_game.php` chargeaient Tailwind depuis un
   CDN, à chaque affichage :

       <script src="https://cdn.tailwindcss.com"></script>

   Trois conséquences, et la première s'est produite :

     1. ERR_NAME_NOT_RESOLVED chez le développeur — un bloqueur DNS sur le
        réseau local, et la page d'accueil s'affiche en HTML nu. Elle le fera
        chez tout joueur muni d'un bloqueur de publicités, derrière un DNS
        d'entreprise, ou le jour d'une panne du CDN.
     2. C'est le CDN de DÉMONSTRATION de Tailwind : il compile la feuille dans
        le navigateur à chaque chargement, et l'avertit lui-même en console.
     3. C'était la seule dépendance du dépôt qui « dépend du jour ». Les
        dépendances PHP sont figées par composer.lock, le schéma par les
        migrations, le rendu de la carte est précalculé en base. Ces trois
        pages faisaient exception.

   ============================================================================
   POURQUOI DES CLASSES UTILITAIRES ET NON DU CSS SÉMANTIQUE

   Parce que le HTML des trois pages n'est pas touché. Une réécriture en
   classes sémantiques (`.carte-connexion`, `.bouton-principal`) serait plus
   élégante, mais elle demanderait de modifier trois fichiers de vues en même
   temps qu'on change leur habillage — deux causes de régression mêlées, sans
   moyen de savoir laquelle a cassé quoi.

   Ce fichier implémente donc EXACTEMENT les 110 classes que ces trois pages
   utilisent, avec les valeurs réelles de Tailwind. Le diff des pages se limite
   à une ligne chacune : le <script> devient un <link>.

   ⚠️ CE N'EST PAS TAILWIND. Une classe non listée ici n'existe pas. Si tu
   ajoutes `mt-8` ou `text-emerald-400` dans une de ces pages, il ne se passera
   rien — silencieusement. Ajoute la règle ici, ou passe en CSS sémantique le
   jour où ces pages seront retravaillées pour de bon.
   ============================================================================ */


/* ---- 1. Remise à zéro ------------------------------------------------------
   Tailwind embarque « preflight », qui normalise le navigateur avant toute
   classe. Sans lui, `border` ne dessinerait rien (largeur 0 par défaut n'est
   PAS le défaut du navigateur), les titres garderaient leurs marges, et les
   liens resteraient bleus soulignés — exactement ce qu'on voyait sur la page
   nue. On reprend le strict nécessaire. */
*, *::before, *::after {
    box-sizing: border-box;
    border: 0 solid #334155;   /* largeur 0 : c'est `.border` qui la donne */
}

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

body {
    margin: 0;
    min-height: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button { background: none; cursor: pointer; }
img, svg, video, canvas { display: block; max-width: 100%; }


/* ---- 2. La palette ---------------------------------------------------------
   Les valeurs sont celles de Tailwind, reprises telles quelles : les pages ont
   été dessinées avec, et les nommer ici rend la palette modifiable en un seul
   endroit le jour où le jeu aura son identité propre. */
:root {
    --slate-950: #020617;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;

    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --orange-500: #f97316;

    --red-900: #7f1d1d;
    --red-700: #b91c1c;
    --red-200: #fecaca;
}


/* ---- 3. Disposition -------------------------------------------------------- */
.block        { display: block; }
.hidden       { display: none; }
.flex         { display: flex; }
.grid         { display: grid; }
.flex-col     { flex-direction: column; }
.flex-grow    { flex-grow: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-4        { gap: 1rem; }
.gap-6        { gap: 1.5rem; }
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.min-h-screen { min-height: 100vh; }
.mx-auto      { margin-left: auto; margin-right: auto; }
.w-full       { width: 100%; }
.w-12         { width: 3rem; }
.h-10         { height: 2.5rem; }
.max-w-md     { max-width: 28rem; }
.max-w-2xl    { max-width: 42rem; }
.max-w-3xl    { max-width: 48rem; }

/* `space-x-*` et `space-y-*` : marge entre frères, pas autour du groupe. */
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }


/* ---- 4. Marges et espacements ---------------------------------------------- */
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-8  { padding: 2rem; }
.px-4 { padding-left: 1rem;  padding-right: 1rem; }
.px-8 { padding-left: 2rem;  padding-right: 2rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-10{ padding-top: 2.5rem;  padding-bottom: 2.5rem; }
.py-16{ padding-top: 4rem;    padding-bottom: 4rem; }
.pb-4 { padding-bottom: 1rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }


/* ---- 5. Typographie -------------------------------------------------------- */
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }
.font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
                              "Liberation Mono", monospace; }

.uppercase        { text-transform: uppercase; }
.underline        { text-decoration: underline; }
.text-center      { text-align: center; }
.leading-relaxed  { line-height: 1.625; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.cursor-pointer   { cursor: pointer; }


/* ---- 6. Couleurs de texte -------------------------------------------------- */
.text-slate-100 { color: var(--slate-100); }
.text-slate-200 { color: var(--slate-200); }
.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-950 { color: var(--slate-950); }
.text-amber-400 { color: var(--amber-400); }
.text-amber-500 { color: var(--amber-500); }
.text-red-200   { color: var(--red-200); }
.text-transparent { color: transparent; }


/* ---- 7. Fonds --------------------------------------------------------------
   Les suffixes `/80` et `/50` de Tailwind sont des opacités : on les rend en
   rgba, la variable CSS ne pouvant pas être découpée en composantes. */
.bg-slate-800    { background-color: var(--slate-800); }
.bg-slate-900    { background-color: var(--slate-900); }
.bg-slate-950    { background-color: var(--slate-950); }
.bg-slate-950\/80{ background-color: rgba(2, 6, 23, 0.8); }
.bg-red-900\/50  { background-color: rgba(127, 29, 29, 0.5); }
.bg-amber-600    { background-color: var(--amber-600); }
.bg-transparent  { background-color: transparent; }
.backdrop-blur   { backdrop-filter: blur(8px); }


/* ---- 8. Bordures ----------------------------------------------------------- */
.border    { border-width: 1px; }
.border-0  { border-width: 0; }
.border-b  { border-bottom-width: 1px; }
.border-t  { border-top-width: 1px; }
.border-slate-700 { border-color: var(--slate-700); }
.border-slate-800 { border-color: var(--slate-800); }
.border-red-700   { border-color: var(--red-700); }
.border-amber-600\/60 { border-color: rgba(217, 119, 6, 0.6); }

.rounded    { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

.accent-amber-500 { accent-color: var(--amber-500); }


/* ---- 9. Le titre en dégradé ------------------------------------------------
   `bg-gradient-to-r from-… via-… to-…` combiné à `bg-clip-text` et
   `text-transparent` : le texte laisse voir le dégradé posé derrière lui.
   Les trois classes de couleur n'ont de sens qu'ensemble — d'où cette règle
   unique plutôt que trois séparées, qui donneraient un dégradé par variable
   impossible à composer en CSS pur. */
.bg-gradient-to-r.from-amber-400.via-amber-600.to-orange-500 {
    background-image: linear-gradient(to right,
        var(--amber-400) 0%, var(--amber-600) 50%, var(--orange-500) 100%);
}
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}


/* ---- 10. Transitions et états ---------------------------------------------- */
.transition {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:bg-amber-500:hover   { background-color: var(--amber-500); }
.hover\:text-white:hover     { color: #fff; }
.hover\:text-slate-200:hover { color: var(--slate-200); }
.hover\:text-amber-400:hover { color: var(--amber-400); }
.hover\:underline:hover      { text-decoration: underline; }

.focus\:outline-none:focus       { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-amber-500:focus   { border-color: var(--amber-500); }


/* ---- 11. Les deux seuls points de rupture utilisés -------------------------- */
@media (min-width: 640px) {
    .sm\:text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
    .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}