/* =============================================================================
   Le fond commun : la grille et son estompe.

   Ce motif habille le héros du site vitrine et les écrans d'authentification.
   Il a d'abord existé en deux exemplaires — une définition dans `input.css`
   pour le site, une copie dans `app-v2.css` pour la connexion — parce que les
   deux familles de pages ne chargent pas la même feuille : le site a
   `site.css`, l'application a `tailwind.css` + `app.css` + `app-v2.css`.

   Deux copies d'un même motif ne restent pas longtemps identiques. Ce fichier
   est donc la seule définition, et les deux familles le chargent.

   Il est écrit à la main dans `public/css`, à côté de `app-v2.css` : le build
   du site n'efface que les pages qu'il produit lui-même, et n'y touchera pas.

   Les couleurs sont en dur plutôt qu'en `theme()` — un fichier hors du
   pipeline Tailwind n'a pas accès aux fonctions de Tailwind. `#e2e8f0` est
   `slate-200`, `#1e293b` est `slate-800`.
   ========================================================================== */

/* La grille de fond, très discrète : elle rappelle la trame d'une salle de
   classe sans jamais concurrencer le contenu. */
.bg-grid {
    background-image:
        linear-gradient(to right,  rgb(226 232 240 / 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(226 232 240 / 0.6) 1px, transparent 1px);
    background-size: 56px 56px;
}

html.dark .bg-grid {
    background-image:
        linear-gradient(to right,  rgb(30 41 59 / 0.7) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(30 41 59 / 0.7) 1px, transparent 1px);
}

/* Estompe les bords d'un motif de fond pour qu'il ne se coupe pas net. */
.mask-fade {
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* -----------------------------------------------------------------------------
   Les écrans d'authentification

   Sur le site, la grille et le halo sont deux `<div>` décoratifs posés dans le
   héros. Ces pages-là n'ont pas de conteneur où les mettre, et leur en ajouter
   un pour du décor serait du balisage pour rien : les deux couches passent donc
   par des pseudo-éléments.

   `position: fixed` — elles ne défilent pas avec le formulaire.
   `z-index: -1`     — l'ordre de peinture de CSS place un descendant à z-index
                       négatif au-dessus du fond de son élément et sous le
                       contenu en flux. C'est exactement ce qu'il faut.
   -------------------------------------------------------------------------- */

/* Le blanc du site, et non le gris bleuté de l'espace de travail. Mesuré : le
   motif était rigoureusement identique sur les deux familles de pages, et
   pourtant presque invisible ici — un trait `slate-200` à 42 % d'opacité
   effective disparaît sur un fond déjà bleuté. */
body.cm-fond-site { background-color: #ffffff !important; }
html.dark body.cm-fond-site { background-color: #020617 !important; }

body.cm-fond-site::before,
body.cm-fond-site::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* La grille, reprise de `.bg-grid` et de `.mask-fade` ci-dessus. Elle est
   recopiée ici et non composée, un pseudo-élément ne pouvant pas porter de
   classe ; c'est la seule duplication qui subsiste, et elle est dans le même
   fichier, sous les yeux. */
body.cm-fond-site::before {
    background-image:
        linear-gradient(to right,  rgb(226 232 240 / 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(226 232 240 / 0.6) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

html.dark body.cm-fond-site::before {
    background-image:
        linear-gradient(to right,  rgb(30 41 59 / 0.7) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(30 41 59 / 0.7) 1px, transparent 1px);
}

/* Le halo lilas du héros. */
body.cm-fond-site::after {
    background: radial-gradient(54rem 34rem at 50% -6rem,
        rgb(199 210 254 / 0.50) 0%, rgb(221 214 254 / 0.40) 45%, transparent 70%);
}

html.dark body.cm-fond-site::after {
    background: radial-gradient(54rem 34rem at 50% -6rem,
        rgb(49 46 129 / 0.40) 0%, rgb(76 29 149 / 0.30) 45%, transparent 70%);
}