/* ================================================================
   MOTRO FRANCE — app.css
   Couche applicative : connexion, admin, finder.
   Chargee EN DERNIER sur ces trois pages (apres leurs styles
   propres), jamais sur les pages vitrine.

   ────────────────────────────────────────────────────────────────
   DIAGNOSTIC

   Les surfaces internes partageaient la marque (noir, jaune, Inter)
   mais pas le langage :

   - QUATRE noirs de fond differents : #0a0a0a (admin), #0d0d0d
     (finder), #111 (carte connexion), rgba(17,19,24) (CRM).
   - Quatre echelles de rayons (8/9/10/11/16/24) sans logique.
   - Un topbar admin PRESQUE en verre — rgba(10,10,10,.92), sticky —
     mais sans backdrop-filter : une vitre sans le flou.
   - Le Finder en -apple-system quand tout le reste est en Inter.
   - Aucun anneau de focus unifie : la navigation clavier etait
     invisible sur la moitie des controles.

   ────────────────────────────────────────────────────────────────
   DOCTRINE APPLIQUEE (apple-design, §12 et §16)

   - Familiarite : ce qui se ressemble doit se comporter pareil.
     Un seul fond, une seule matiere, un seul anneau de focus.
   - Materiaux : le chrome (topbars) devient une couche translucide
     au-dessus du contenu qui defile dessous — flou + saturation +
     un lisere clair en haut, la lumiere qui accroche l'arete.
   - Profondeur : une echelle d'elevation, chaque palier combinant
     ombre de contact nette + ombre de diffusion douce.
   - Craft : rien d'aleatoire — chaque rayon, chaque duree vient
     d'une echelle nommee.
   ================================================================ */

:root {
    /* ── LA RAMPE NEUTRE — un seul noir, decline ─────────────── */
    --app-bg:        #0A0A0C;
    --app-surface-1: #131316;                  /* carte, section        */
    --app-surface-2: #1A1A1F;                  /* champ, survol         */
    --app-line:      rgba(255,255,255,0.08);   /* bordure de repos      */
    --app-line-hi:   rgba(255,255,255,0.16);   /* bordure de survol     */
    --app-edge:      rgba(255,255,255,0.06);   /* lisere haut (lumiere) */

    --app-text:      #F5F5F7;
    --app-text-2:    #A6A6AE;
    --app-text-3:    #71717A;

    /* ── RAYONS — trois paliers, pas six ─────────────────────── */
    --app-r-s: 10px;    /* controles : champs, boutons, pills     */
    --app-r-m: 14px;    /* cartes internes                        */
    --app-r-l: 18px;    /* sections, panneaux                     */

    /* ── ELEVATION SOMBRE — contact net + diffusion douce ────── */
    --app-elev-1: 0 1px 2px rgba(0,0,0,0.40),
                  0 4px 16px rgba(0,0,0,0.24);
    --app-elev-2: 0 2px 4px rgba(0,0,0,0.44),
                  0 12px 32px rgba(0,0,0,0.32);
    --app-elev-3: 0 4px 8px rgba(0,0,0,0.48),
                  0 28px 64px rgba(0,0,0,0.44);

    /* ── LA MATIERE — le verre du chrome ─────────────────────── */
    --app-glass:      rgba(12, 12, 15, 0.72);
    --app-glass-blur: blur(20px) saturate(180%);

    /* ── FOCUS — un seul anneau, partout ─────────────────────── */
    --app-ring: 0 0 0 3px rgba(255, 204, 0, 0.28);
    --app-ring-border: rgba(255, 204, 0, 0.65);
}


/* ================================================================
   1. AMBIANCE
   ================================================================
   Le fond n'est plus un aplat : une lueur radiale tres discrete
   tombe du haut — la scene est eclairee, pas peinte. Assez subtile
   pour ne jamais concurrencer le contenu.
   ================================================================ */

body.body--admin,
body:has(.auth-card) {
    background:
        radial-gradient(1100px 520px at 50% -180px,
                        rgba(255, 204, 0, 0.055), transparent 62%),
        radial-gradient(900px 700px at 85% 110%,
                        rgba(255, 255, 255, 0.025), transparent 55%),
        var(--app-bg);
    background-attachment: fixed;
    color: var(--app-text);
}

/* Le Finder garde ses deux themes ; on n'unifie que le sombre. */
[data-theme="dark"] {
    --bg:          #0A0A0C;
    --surface:     #131316;
    --surface2:    #1A1A1F;
    --border:      rgba(255,255,255,0.09);
    --border-hi:   rgba(255,255,255,0.18);
    --text:        #F5F5F7;
    --text-dim:    #A6A6AE;
    --text-faint:  #55555C;
    --btn-bg:      #1A1A1F;
    --btn-hover:   #232329;
    --section-sep: rgba(255,255,255,0.07);
    --toggle-bg:   #1A1A1F;
    --input-bg:    #101013;
}

[data-theme="dark"] body {
    background:
        radial-gradient(1100px 520px at 50% -180px,
                        rgba(255, 204, 0, 0.05), transparent 62%),
        var(--app-bg);
    background-attachment: fixed;
}

/* Le Finder rejoint la famille typographique du site. */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ================================================================
   2. LE CHROME COMME MATIERE
   ================================================================
   Le topbar admin etait un aplat sombre a 92% d'opacite : une vitre
   sans le flou. On lui donne la matiere complete — le contenu
   defile DESSOUS et reste devinable a travers. Le lisere du bas
   n'est pas un trait de separation : c'est l'arete du materiau qui
   accroche la lumiere.
   ================================================================ */

.admin-topbar {
    background: var(--app-glass);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border-bottom: 1px solid var(--app-line);
    box-shadow: inset 0 1px 0 var(--app-edge);
}

/* La sidebar est une region structurelle : plus sombre que le
   contenu (le poids du materiau code la hierarchie), separee par
   une ligne fine, pas par un mur. */
.admin-sidebar {
    background: rgba(255, 255, 255, 0.015);
    border-right: 1px solid var(--app-line);
}

.admin-nav-item {
    border-radius: var(--app-r-s);
    transition: background-color var(--dur-menu, 200ms) ease,
                color var(--dur-menu, 200ms) ease,
                transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23,1,0.32,1));
}
.admin-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--app-text); }
.admin-nav-item:active { transform: scale(0.98); }

/* L'etat actif est une pastille de surface, pas juste une couleur :
   on EST quelque part. */
.admin-nav-item.actif,
.admin-nav-item[aria-current] {
    background: rgba(255, 204, 0, 0.12);
    color: var(--c-jaune, #FFCC00);
}


/* ================================================================
   3. LES SURFACES
   ================================================================
   Une carte n'est pas une bordure : c'est une matiere posee sur le
   fond. Surface legerement plus claire, lisere de lumiere en haut,
   elevation de contact. Le survol ELEVE (ombre) au lieu de juste
   changer la bordure.
   ================================================================ */

.admin-section {
    background: var(--app-surface-1);
    border: 1px solid var(--app-line);
    border-radius: var(--app-r-l);
    box-shadow: inset 0 1px 0 var(--app-edge), var(--app-elev-1);
}

.dashboard-carte {
    background: var(--app-surface-1);
    border: 1px solid var(--app-line);
    border-radius: var(--app-r-m);
    box-shadow: inset 0 1px 0 var(--app-edge);
}
@media (hover: hover) and (pointer: fine) {
    .dashboard-carte--actif:hover {
        background: var(--app-surface-2);
        border-color: var(--app-line-hi);
        box-shadow: inset 0 1px 0 var(--app-edge), var(--app-elev-2);
    }
}

/* La carte de connexion : le seul objet de sa page — elle merite
   l'elevation maximale et le meme lisere de lumiere. */
.auth-card {
    background: var(--app-surface-1);
    border: 1px solid var(--app-line);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
                var(--app-elev-3),
                0 0 0 1px rgba(255,204,0,0.03);
}

/* Les sections du Finder. */
.section {
    border-radius: var(--app-r-l);
}


/* ================================================================
   3bis. LA CONNEXION — le seul objet de sa page devient un materiau
   ================================================================
   La carte etait un aplat #111 pose sur du noir : correcte, mais
   muette. Elle devient une plaque de verre — translucide, floutee,
   arete lumineuse — posee sur une scene eclairee. C'est la porte
   d'entree des espaces Motro : elle doit donner le ton des surfaces
   qu'elle protege.
   ================================================================ */

body:has(.auth-card) {
    background:
        radial-gradient(900px 480px at 50% -120px,
                        rgba(255, 204, 0, 0.10), transparent 60%),
        radial-gradient(700px 520px at 12% 108%,
                        rgba(255, 255, 255, 0.045), transparent 55%),
        var(--app-bg);
    background-attachment: fixed;
}

.auth-card {
    background: rgba(19, 19, 23, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* La hierarchie rejoint l'echelle du site : le titre porte la piece. */
.auth-titre {
    font-size: clamp(1.75rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.auth-sous-titre {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--app-text-2);
}

.auth-input {
    background: var(--app-surface-2);
    border-radius: var(--app-r-s);
    transition: border-color var(--dur-menu, 200ms) ease,
                box-shadow var(--dur-menu, 200ms) ease;
}

@media (prefers-reduced-transparency: reduce) {
    .auth-card {
        background: #131316;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


/* ================================================================
   4. CHAMPS ET FOCUS
   ================================================================
   L'anneau de focus est LE geste d'accessibilite de cette passe :
   un seul anneau jaune, partout, au clavier comme au clic dans un
   champ. Avant : un simple changement de bordure, invisible en
   peripherie de l'ecran.
   ================================================================ */

.form-champ input,
.form-champ select,
.form-champ--large textarea {
    background: var(--app-surface-2);
    border: 1px solid var(--app-line);
    border-radius: var(--app-r-s);
    transition: border-color var(--dur-menu, 200ms) ease,
                box-shadow var(--dur-menu, 200ms) ease,
                background-color var(--dur-menu, 200ms) ease;
}

.form-champ input:focus,
.form-champ select:focus,
.form-champ--large textarea:focus,
.auth-input:focus,
.search-box input:focus {
    outline: none;
    border-color: var(--app-ring-border);
    box-shadow: var(--app-ring);
}

/* Focus clavier sur TOUT element interactif de ces pages. */
:focus-visible {
    outline: 2px solid var(--c-jaune, #FFCC00);
    outline-offset: 2px;
    border-radius: var(--app-r-s);
}

/* Un champ en erreur garde son anneau — rouge : la validation se
   lit en ligne, pas seulement a la soumission. */
.form-champ input.erreur,
.form-champ select.erreur {
    border-color: rgba(255, 59, 48, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.22);
}


/* ================================================================
   5. TABLES ET PASTILLES
   ================================================================ */

table.admin-table tbody tr {
    transition: background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
    table.admin-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
    }
}

.statut-pill { border-radius: 999px; }

.liste-badge {
    border-radius: 999px;
    background: rgba(255, 204, 0, 0.12);
}


/* ================================================================
   6. BOUTONS
   ================================================================
   Le retour de pression (scale 0.97, 140ms) : la preuve instantanee
   que l'interface a entendu. motion.css couvre les classes du site
   vitrine ; on couvre ici celles des surfaces internes.
   ================================================================ */

#btnAjouter,
.admin-btn,
.btn-grid button,
.theme-toggle,
.btn-icon {
    transition: transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
                background-color var(--dur-menu, 200ms) ease,
                border-color var(--dur-menu, 200ms) ease,
                box-shadow var(--dur-menu, 200ms) ease;
}

#btnAjouter:active,
.admin-btn:active,
.btn-grid button:active,
.theme-toggle:active,
.btn-icon:active {
    transform: scale(0.97);
}

#btnAjouter:disabled:active,
.btn-grid button:disabled:active {
    transform: none;
}


/* ================================================================
   7. DETAILS DE RENDU
   ================================================================ */

/* Scrollbars fines — la barre systeme grise casse une surface
   sombre. */
body.body--admin ::-webkit-scrollbar,
body:has(.auth-card) ::-webkit-scrollbar,
[data-theme] ::-webkit-scrollbar { width: 9px; height: 9px; }

body.body--admin ::-webkit-scrollbar-thumb,
body:has(.auth-card) ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
body.body--admin ::-webkit-scrollbar-track,
[data-theme] ::-webkit-scrollbar-track { background: transparent; }

/* La selection porte la marque. */
body.body--admin ::selection,
body:has(.auth-card) ::selection,
[data-theme="dark"] ::selection {
    background: rgba(255, 204, 0, 0.32);
    color: #111;
}

/* Rendu Inter soigne, comme sur le vitrine. */
body.body--admin,
body:has(.auth-card) {
    font-optical-sizing: auto;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


/* ================================================================
   8. REPLIS
   ================================================================
   Transparence reduite : on solidifie au lieu de flouter.
   Mouvement reduit : les compressions de pression disparaissent.
   ================================================================ */

@media (prefers-reduced-transparency: reduce) {
    .admin-topbar {
        background: #0C0C0F;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav-item:active,
    #btnAjouter:active,
    .admin-btn:active,
    .btn-grid button:active,
    .theme-toggle:active,
    .btn-icon:active {
        transform: none;
    }
}