/* ==========================================================================
   Un-chef.fr — finition « esprit Kairos », version bleu marine (couleur du logo)
   Chargé après les styles d'origine : il ne change que l'apparence.
   ========================================================================== */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --font-ui: "Jakarta", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Jakarta", "Segoe UI", system-ui, sans-serif;
  --k-logo: #002F6C;
  --k-glass: rgba(255, 255, 255, .06);
  --k-line: rgba(255, 255, 255, .10);
  --k-gold: #DCB523;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 34px -14px rgba(0, 0, 0, .45);
  --k-shadow-lg: 0 2px 6px rgba(0, 0, 0, .16), 0 30px 60px -22px rgba(0, 0, 0, .6);
}

/* Fond : le bleu du logo, avec un léger dégradé */
/* Fond : le dégradé est sur un calque à part, immobile. (Un fond « fixed » obligeait le navigateur
   à repeindre toute la page à chaque pixel de défilement : c'est ce qui faisait ramer.) */
html, body { background: #002F6C !important; }
body { font-family: var(--font-ui) !important; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font-ui); }

/* Reflets bleu clair et or, fine trame de points (comme Kairos) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 520px at 0% -10%, rgba(90, 150, 235, .22), transparent 60%),
    radial-gradient(900px 600px at 100% -5%, rgba(220, 181, 35, .10), transparent 60%),
    radial-gradient(700px 500px at 60% 115%, rgba(90, 150, 235, .12), transparent 60%),
    linear-gradient(180deg, #03397F 0%, #002F6C 42%, #00265A 100%);
  transform: translateZ(0); /* calque à part, jamais repeint au défilement */
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .6;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 45%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%);
  transform: translateZ(0);
}
.app { position: relative; z-index: 1; }

/* Titres */
.brand-title, .module-title, .page-head-left h1, h1, h2 { font-family: var(--font-display) !important; letter-spacing: -0.02em; }
.brand-title, .module-title, .page-head-left h1 { font-weight: 800 !important; }

/* Barre du haut en verre dépoli */
.topbar-wrap {
  background: rgba(1, 36, 86, .97) !important; /* presque opaque, sans flou : défilement fluide */
  border-bottom: 1px solid var(--k-line) !important;
  box-shadow: 0 8px 26px -18px rgba(0, 0, 0, .6);
}

/* Cartes des modules : verre bleuté, ombre douce, léger soulèvement */
.module-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)) !important;
  border: 1px solid var(--k-line) !important;
  box-shadow: var(--k-shadow) !important;
  border-radius: 22px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-lg) !important; border-color: rgba(220, 181, 35, .5) !important; }
.module-card-featured { border-color: rgba(220, 181, 35, .55) !important; box-shadow: 0 0 0 3px rgba(220, 181, 35, .10), var(--k-shadow) !important; }

/* Boutons et champs : coins arrondis, repère doré au focus */
.btn, .ghost-btn, .add-btn { border-radius: 12px !important; }
.input, .select, .textarea, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="search"], select, textarea { border-radius: 12px; }
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(220, 181, 35, .7) !important; box-shadow: 0 0 0 4px rgba(220, 181, 35, .16) !important;
}
.topbar input[type="search"], .topbar input[type="text"] {
  min-height: 42px; padding: 0 14px; border-radius: 14px !important;
  background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16) !important; color: #fff !important; font-size: 15px;
}
.topbar input::placeholder { color: rgba(255, 255, 255, .55); }

/* Fenêtres et notifications */
.overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.toast { border-radius: 14px !important; box-shadow: var(--k-shadow-lg) !important; }

/* Page de connexion */
.box { border-radius: 26px !important; box-shadow: var(--k-shadow-lg) !important; backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); }

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
::selection { background: rgba(220, 181, 35, .35); }

/* ==========================================================================
   Téléphone : tableau de bord en grille de 3 cartes carrées, barre du haut compacte
   ========================================================================== */
@media (max-width: 840px) {
  .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .module-card {
    aspect-ratio: 1 / 1; min-height: 0 !important; height: auto !important;
    padding: 8px 6px !important; gap: 6px !important; border-radius: 18px !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  }
  .module-card-icon { width: 40px !important; height: 40px !important; font-size: 19px !important; border-radius: 12px !important; margin: 0 !important; }
  .module-card h2 { font-size: .74rem !important; line-height: 1.2 !important; margin: 0 !important; word-break: break-word; hyphens: auto; }
  .module-card p { display: none !important; }
  .module-card-badge { top: 5px !important; right: 5px !important; font-size: .5rem !important; padding: 1px 5px !important; letter-spacing: .04em !important; }

  /* Barre du haut : recherche sur toute la largeur, boutons côte à côte */
  .top-actions { display: flex !important; flex-wrap: wrap; gap: 6px !important; width: 100%; }
  .top-actions .app-search-wrap { flex: 1 1 100%; }
  .top-actions .btn { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 0 6px !important; font-size: .78rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ==========================================================================
   Connexion : même composition que Kairos (carte centrée, logo, nom espacé)
   ========================================================================== */
body.login-page { min-height: 100dvh !important; display: grid !important; place-items: center !important; padding: 24px 18px !important; margin: 0; }
body.login-page .box {
  width: min(400px, 100%) !important; margin: 0 auto !important; text-align: center; padding: 34px 28px 30px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 28px !important;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7) !important;
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
}
.login-logo { display: block; margin: 0 auto 16px; width: 84px; height: 84px; border-radius: 24px;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(220, 181, 35, .35); }
body.login-page .box h1 { margin: 0 !important; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase; color: #fff !important; }
body.login-page .box .subtitle { margin: 6px 0 26px !important; color: rgba(255, 255, 255, .65) !important; font-size: .95rem !important; }
body.login-page .box label { display: block; text-align: left; font-size: .72rem !important; letter-spacing: .1em; color: rgba(255, 255, 255, .6) !important; }
body.login-page .box input { width: 100%; min-height: 50px; border-radius: 14px !important; background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important; color: #fff !important; font-size: 1rem !important; padding: 0 16px !important; }
body.login-page .box input:focus { outline: none; border-color: rgba(220, 181, 35, .8) !important; box-shadow: 0 0 0 4px rgba(220, 181, 35, .18) !important; }
body.login-page .box button[type="submit"] { width: 100%; min-height: 52px; margin-top: 18px; border: 0; border-radius: 14px !important; font-size: 1.02rem !important; font-weight: 800 !important;
  background: linear-gradient(135deg, #F0D060, #DCB523) !important; color: #0A1C47 !important; box-shadow: 0 14px 30px -14px rgba(220, 181, 35, .9) !important; cursor: pointer; }

/* ==========================================================================
   Boutons : le texte ne sort jamais du bouton (il passe à la ligne si besoin)
   ========================================================================== */
.btn, .ghost-btn, .gold-btn, .plain-btn, .add-btn, .danger-btn {
  white-space: normal !important; overflow-wrap: anywhere; line-height: 1.2 !important; height: auto !important; text-align: center;
}

/* ==========================================================================
   Téléphone : en-tête compact façon Kairos, boutons deux par ligne, tailles justes
   ========================================================================== */
@media (max-width: 840px) {
  .topbar { gap: 10px !important; padding-top: calc(8px + env(safe-area-inset-top)) !important; padding-bottom: 10px !important; }
  .brand-title { font-size: 1.35rem !important; }
  .topbar img, .brand img, .brand-logo { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  .top-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100%; }
  .top-actions .app-search-wrap { flex: 1 1 100% !important; }
  .top-actions .btn { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; min-height: 40px !important; padding: 8px 10px !important;
    font-size: .8rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .module-title, .page-head-left h1, h1 { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .save-meta, .save-stamp, .stamp-pill, [class*="last-save"], [class*="stamp"] { font-size: .8rem !important; }
  .btn, .ghost-btn, .gold-btn, .plain-btn, .add-btn { font-size: .88rem !important; padding: 9px 14px !important; min-height: 40px; border-radius: 12px !important; }
  .filters-row .btn, .filter-btn, .chip, .pill { font-size: .84rem !important; padding: 7px 12px !important; }
}
@media (max-width: 840px) {
  .meta-pill { font-size: .8rem !important; padding: 7px 12px !important; border-radius: 12px !important; }
}

/* Connexion : « Rester connecté » */
body.login-page .box label.remember { display: flex !important; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .9rem !important; letter-spacing: 0 !important;
  text-transform: none; color: rgba(255, 255, 255, .8) !important; cursor: pointer; text-align: left; }
body.login-page .box label.remember input { width: 20px !important; min-height: 20px !important; height: 20px; margin: 0; padding: 0 !important; accent-color: #DCB523; flex: none; }

/* Écrans tactiles : pas de soulèvement « au survol » (il s'active au toucher et déplace la carte
   sous le doigt : un toucher pouvait tomber à côté, ou cocher une case par erreur). */
@media (hover: none) {
  .demand-card:hover, .module-card:hover, .partner-card:hover, .choice-card:hover, .archive-card:hover { transform: none !important; }
  .demand-card, .module-card { transition: border-color .15s ease, box-shadow .15s ease !important; }
}
.demand-card, .archive-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* --- Défilement fluide -----------------------------------------------------------------------
   La zone qui défile (main.main) a un fond transparent : sur les écrans de définition standard
   (Chromebook…), Chrome redessinait alors toutes les cartes à chaque pixel de défilement.
   On lui demande de confier le défilement à la carte graphique. Et aucun flou en temps réel. */
main.main { will-change: scroll-position; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.topbar-wrap { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.demand-card { will-change: auto; }