/* ════════════════════════════════════════════════════════════════════════
   MJN UI — surcouche design partagée (toutes les apps)
   Chargée APRÈS le <style> propre à chaque application : elle ajoute les
   micro-interactions « ludiques » et le confort tactile mobile sans
   toucher à la logique ni aux couleurs de chaque app.

   Sections :
     1. Fondations (focus, sélection, défilement)
     2. Micro-interactions ludiques (boutons, cartes, FAB MJNLink)
     3. Zones sûres iOS (encoche) — PWA plein écran
     4. Mobile ≤ 640px : tactile, grilles, modales en « bottom sheet »
     5. Accessibilité (réduction des animations)

   ⚠ Les sélecteurs [style*="…"] ciblent les styles inline RENDUS par
   React (kebab-case, ex. "grid-template-columns: repeat(4"), pas le JSX.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --mjn-spring:cubic-bezier(.34,1.56,.64,1);   /* rebond joueur */
  --mjn-ease:cubic-bezier(.32,.72,.33,1);      /* glissement doux */
  --mjn-ring:rgba(99,102,241,.22);             /* halo de focus (ok clair & sombre) */
}

/* ── 1. FONDATIONS ──────────────────────────────────────────────────────── */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
::selection{background:rgba(99,102,241,.25)}
:focus-visible{outline:2px solid rgba(99,102,241,.55);outline-offset:2px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
nav{scrollbar-width:none}
nav::-webkit-scrollbar{display:none}

/* Halo doux sur les champs au focus (s'ajoute à la bordure de chaque app) */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--mjn-ring)}

/* ── 2. MICRO-INTERACTIONS LUDIQUES ─────────────────────────────────────── */
/* Boutons : pression « ressort » au toucher, léger éclat au survol */
button{transition:transform .16s var(--mjn-spring),filter .16s ease,box-shadow .16s ease,opacity .16s ease}
button:active:not(:disabled){transform:scale(.95)}
@media (hover:hover){
  button:not(:disabled):hover{filter:brightness(1.05)}
  .card,.kpi{transition:transform .18s var(--mjn-ease),box-shadow .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
}

/* Tuiles & liens « bouton » : pression tactile */
.app-tile:active,.app-card:active,#dash-back:active,
a[href="/dashboard"][title]:active{transform:scale(.95)}

/* FAB MJNLink : arrivée bondissante + survol gonflé + badge qui pulse */
#mjnlink-fab{
  transition:transform .2s var(--mjn-spring),box-shadow .2s ease;
  animation:mjnFabIn .55s var(--mjn-spring) .35s backwards;
}
@media (hover:hover){
  #mjnlink-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 28px rgba(13,148,136,.55)}
}
#mjnlink-fab:active{transform:scale(.92)}
#mjnlink-badge{animation:mjnPulse 2.2s ease-in-out infinite}

@keyframes mjnFabIn{from{opacity:0;transform:translateY(70px) scale(.6)}to{opacity:1;transform:none}}
@keyframes mjnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ── 3. ZONES SÛRES iOS (encoche / barre d'accueil) ─────────────────────── */
/* Le FAB et le bouton retour ne se glissent plus sous l'encoche/barre iOS */
#mjnlink-fab{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
#dash-back,a[href="/dashboard"][title]{top:calc(10px + env(safe-area-inset-top,0px))!important}
/* En PWA plein écran : la nav blanche s'étend sous la barre d'état */
@media (display-mode:standalone){
  nav{padding-top:env(safe-area-inset-top)!important}
}

/* ── 4. MOBILE ≤ 640px — confort tactile & centrage ─────────────────────── */
@media (max-width:640px){
  html,body,#root{overflow-x:hidden;max-width:100vw}

  /* Barres de défilement discrètes sur petit écran */
  ::-webkit-scrollbar{width:4px;height:4px}

  /* Bouton retour portail : pastille flottante en bas à gauche, symétrique
     du FAB MJNLink — il ne chevauche plus la barre de navigation */
  #dash-back{
    top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
    left:14px!important;border-radius:99px!important;padding:10px 14px!important;
    font-size:12px!important;box-shadow:0 6px 20px rgba(15,23,42,.35);
  }

  /* Cibles tactiles confortables ; 16px d'écriture = pas de zoom iOS */
  button{min-height:40px}
  input,select,textarea{font-size:16px!important;min-height:44px}
  nav button{min-height:46px;white-space:nowrap}

  /* Tableaux : défilement horizontal fluide plutôt que page écrasée */
  table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%;-webkit-overflow-scrolling:touch}

  /* Grilles de 3-4 colonnes → 2 colonnes lisibles */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr)!important}

  /* Carte de connexion : pleine largeur, centrée */
  .login-card{width:100%!important;max-width:420px;padding:34px 24px!important;margin:0 14px}

  /* ── Modales → « bottom sheet » ludique ─────────────────────────────────
     Cible les overlays plein écran centrés dont l'enfant unique est la
     carte de la modale (les aperçus d'image <img> sont exclus). */
  [style*="position: fixed"][style*="inset: 0px"][style*="align-items: center"]:has(> div:only-child){
    align-items:flex-end!important;padding:0!important;
  }
  [style*="position: fixed"][style*="inset: 0px"][style*="align-items: center"]:has(> div:only-child) > div{
    width:100%!important;max-width:100%!important;max-height:92dvh!important;
    border-radius:22px 22px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:mjnSheetUp .3s var(--mjn-ease) both;
  }
  /* Poignée de préhension en haut de la feuille */
  [style*="position: fixed"][style*="inset: 0px"][style*="align-items: center"]:has(> div:only-child) > div::before{
    content:'';display:block;width:42px;height:5px;border-radius:99px;
    background:rgba(127,127,127,.35);margin:10px auto 2px;
  }
}
@keyframes mjnSheetUp{from{transform:translateY(48px);opacity:.4}to{transform:none;opacity:1}}

/* ── 5. ACCESSIBILITÉ ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}