/* PIKA_INLINE_STYLE_CLEANUP_V1 (lot 2) -- extrait tel quel du <style> inline de
   index.html (coquille : sidebar, ecran d'accueil app-landing, navigation), pour
   la resorption CSP style-src. Contenu inchange (extraction programmatique, pas de
   retype manuel -- fichier trop volumineux pour un risque de transcription). */
  /* PIKA_DESIGN_TOKENS_V3 lot 3c -- la coquille (index.html) est une page autonome : elle ne
     charge PAS style.css, donc son :root porte ses propres jetons. Lots 1-2 avaient laissé
     cette île de côté. Ici : SEULEMENT les neutres d'encre/filet alignés en dur sur le
     vocabulaire canonique de style.css -- encre #2C2C2C -> #16262A, filet #EDE6D6 -> #E4E0D6,
     muté #5F6B6E -> #566468, badge #F1ECDD -> sable-soft #F3EAD9. Écarts sub-perceptibles.
     --ns-navy/-deep/-gold étaient déjà canoniques. --ns-cream (#FBF8F2) était mort -> retiré.
     PIKA_PAPER_BG_V1 (décision "fond", 2026-09-08) : le fond bleu-gris froid #F0F2F7 de la
     coquille (et de tout l'admin) bascule vers le papier chaud canonique #F3F1EC (= var(--paper)
     de style.css). Page autonome -> valeur en dur, alignée sur le canonique comme les --ns-*. */
  :root {
    --ns-navy: #1C4650;
    --ns-navy-deep: #123842;
    --ns-gold: #CDA36B;
    --ns-cream-panel: #FFFFFF;
    --ns-border: #E4E0D6;
    --ns-text: #16262A;
    --ns-text-muted: #566468;
    --ns-badge-bg: #F3EAD9;
  }

  * { box-sizing: border-box; }

  /* UNIFORMISATION_IFRAMES_V1 */
  body {
    /* BODY_BG_BLUEGRAY_V1 puis PIKA_PAPER_BG_V1 -- l'objectif "page uniforme, un seul fond"
       (retour utilisateur : "tout doit être bleu") est conservé, mais on unifie désormais sur
       le papier chaud canonique #F3F1EC (= var(--paper) de style.css), pas le bleu-gris froid
       #F0F2F7. Même valeur que .app-main / th dans style.css + admin-accents.css. */
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #F3F1EC;
    color: var(--ns-text);
    display: flex;
    height: 100vh; height: 100dvh; /* PIKA_MOBILE_DVH_FIX_V1 */
    overflow: hidden;
  }

  .app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-right: 1px solid var(--ns-border);
    display: flex;
    flex-direction: column;
    padding: 26px 0 18px;
    height: 100vh; height: 100dvh; /* PIKA_MOBILE_DVH_FIX_V1 */
    overflow: hidden;
  }

  .app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px 22px;
    border-bottom: 1px solid var(--ns-border);
    margin-bottom: 18px;
  }
  /* ICONS_SUBMENU_TITLE_V1 */
  .app-nav__icon--sub { margin-right: 8px; opacity: .85; font-size: .95em; }
  .app-main-title__icon { margin-right: 10px; }
  .app-sidebar__brand-badge {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--ns-navy);
    color: var(--ns-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.15rem;
  }
  .app-sidebar__brand-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--ns-navy);
  }
  .app-sidebar__brand-sub {
    font-size: 0.62rem;
    letter-spacing: .12em;
    color: var(--ns-text-muted);
    text-transform: uppercase;
  }

  .app-sidebar__label {
    font-size: 0.68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-text-muted);
    padding: 0 22px 10px;
  }

  .app-nav { flex: 1; overflow-y: auto; padding: 0 10px; }

  .app-nav__item { margin-bottom: 2px; }
  /* AGENT_SIDEBAR_HIDDEN_RULE_V1 : cette page (la coquille avec la sidebar) ne charge
     jamais css/style.css -- elle a ses propres <style> internes. La regle
     .hidden{display:none!important} n'existait donc que dans style.css
     (utilisee par saisie.html), jamais ici : le JS de filtrage de la
     sidebar par agent (AGENT_SIDEBAR_PERMISSIONS_V1) ajoutait bien la
     classe 'hidden' aux boutons non autorises, mais aucune regle CSS de
     CETTE page ne la prenait en compte -- les elements restaient donc
     visibles malgre la classe presente dans le DOM. */
  .hidden { display: none !important; }

  .app-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ns-text);
    padding: 10px 12px;
    border-radius: 9px;
    transition: background .12s ease, color .12s ease;
  }
  .app-nav__link:hover { background: #F5F1E6; }
  .app-nav__link.is-active {
    background: var(--ns-navy);
    color: #fff;
  }
  .app-nav__link.is-active .app-nav__chevron { color: #fff; }

  .app-nav__icon { width: 18px; text-align: center; font-size: 1rem; }
  .app-nav__chevron {
    margin-left: auto;
    font-size: .75rem;
    color: var(--ns-text-muted);
    transition: transform .15s ease;
  }
  .app-nav__link.is-open .app-nav__chevron { transform: rotate(90deg); }

  .app-nav__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
    padding-left: 14px;
    border-left: 2px solid var(--ns-border);
    margin: 2px 0 2px 24px;
  }
  .app-nav__submenu.is-open { max-height: 600px; }

  .app-nav__sublink {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--ns-text-muted);
    padding: 7px 10px;
    border-radius: 7px;
    margin: 1px 0;
  }
  .app-nav__sublink:hover { background: #F5F1E6; color: var(--ns-text); }
  .app-nav__sublink.is-active {
    background: var(--ns-badge-bg);
    color: var(--ns-navy);
    font-weight: 600;
  }

  .app-sidebar__foot {
    border-top: 1px solid var(--ns-border);
    padding: 14px 22px 0;
    margin-top: 10px;
  }
  .app-sidebar__foot-name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: .95rem; color: var(--ns-navy); }
  .app-sidebar__foot-role { font-size: .72rem; color: var(--ns-text-muted); margin-bottom: 10px; }

  .app-main {
    flex: 1;
    min-width: 0;
    height: 100vh; height: 100dvh; /* PIKA_MOBILE_DVH_FIX_V1 */
    display: flex;
    flex-direction: column;
    padding: 26px 32px 22px;
    overflow: hidden;
  }
  .app-main__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--ns-navy);
    margin: 0 0 4px;
    flex-shrink: 0;
  }
  .app-main__subtitle {
    color: var(--ns-text-muted);
    margin: 0 0 16px;
    font-size: .9rem;
    flex-shrink: 0;
  }

  .app-main__placeholder {
    background: var(--ns-cream-panel);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    padding: 48px;
    text-align: center;
    color: var(--ns-text-muted);
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  .app-main__placeholder strong { display: block; color: var(--ns-navy); font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: 6px; }

  /* BRANCHEMENT_MODULES_SIMPLES_V1 */
  .app-main__embed {
    padding: 0;
    border: none;
    background: transparent;
    flex: 1;
    min-height: 0;
    display: flex;
  }
  /* IFRAME_FLATTEN_V1 -- l'iframe qui charge le Tableau de bord avait sa
     propre bordure + fond creme (heritage de la maquette de navigation),
     ce qui creait un effet de "page dans la page" signale par l'utilisateur.
     Neutralise ici pour une integration en pleine page, sans cadre visible. */
  .app-main__iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  /* SIDEBAR_NAVY_V1 : menu lateral en bleu marine plein (au lieu du fond clair
     d'origine), dans l'esprit de la maquette. Reutilise les variables
     deja definies (--ns-navy, --ns-gold...) -- aucune couleur inventee.
     Regles ajoutees en fin de <style> : elles gagnent naturellement sur
     les regles precedentes de meme selecteur (un seul bloc <style> dans
     ce fichier, pas besoin de !important). */
  .app-sidebar {
    background: var(--ns-navy);
    border-right: 1px solid rgba(255,255,255,.08);
  }
  .app-sidebar__brand { border-bottom-color: rgba(255,255,255,.1); }
  .app-sidebar__brand-badge { border: 1px solid rgba(205,163,107,.5); }
  .app-sidebar__brand-name { color: #fff; }
  .app-sidebar__brand-sub { color: rgba(255,255,255,.55); }
  .app-sidebar__label { color: rgba(255,255,255,.4); }
  .app-nav__link { color: rgba(255,255,255,.8); }
  .app-nav__link:hover { background: rgba(255,255,255,.06); }
  .app-nav__link.is-active {
    background: rgba(255,255,255,.08);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--ns-gold);
  }
  .app-nav__chevron { color: rgba(255,255,255,.4); }
  .app-nav__submenu {
    border-left: none;
    background: rgba(0,0,0,.18);
    border-radius: 10px;
    padding: 6px 8px;
  }
  .app-nav__sublink { color: rgba(255,255,255,.62); }
  .app-nav__sublink:hover { background: rgba(255,255,255,.08); color: #fff; }
  .app-nav__sublink.is-active {
    background: rgba(205,163,107,.16);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--ns-gold);
  }
  .app-sidebar__foot { border-top-color: rgba(255,255,255,.1); }
  .app-sidebar__foot-name { color: #fff; }
  /* PIKA_NAV_ACTIVE_HIGHLIGHT_V1 : le module actif doit se distinguer clairement
     du fond du menu (le fond translucide precedent etait trop proche du vert
     marine du sidebar). Fond dore plein + texte fonce, tres contraste. */
  .app-nav__link.is-active,
  .app-nav__link.is-active:hover {
    background: var(--ns-gold) !important;
    color: var(--ns-navy-deep) !important;
    box-shadow: none !important;
  }
  .app-nav__link.is-active .app-nav__chevron,
  .app-nav__link.is-active .app-nav__icon { color: var(--ns-navy-deep) !important; }
  .app-nav__sublink.is-active,
  .app-nav__sublink.is-active:hover {
    background: var(--ns-gold) !important;
    color: var(--ns-navy-deep) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .app-sidebar__foot-role { color: rgba(255,255,255,.5); }

  /* SIDEBAR_MOBILE_V1 : bouton hamburger + panneau glissant pour la sidebar sur mobile.
     Aucun effet au-dessus de 900px (comportement bureau intact). */
  .app-sidebar-toggle { display: none; }
  .app-sidebar-overlay { display: none; }
  @media (max-width: 900px) {
    .app-sidebar-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 40;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 8px;
      background: var(--ns-navy);
      color: #fff;
      font-size: 1.25rem;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }
    .app-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 35;
      height: 100vh; height: 100dvh; /* PIKA_MOBILE_DVH_FIX_V1 */
      transform: translateX(-100%);
      transition: transform .25s ease;
      box-shadow: 4px 0 24px rgba(0,0,0,.3);
    }
    body.app-sidebar-open .app-sidebar { transform: translateX(0); }
    body.app-sidebar-open .app-sidebar-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 30;
    }
    .app-main { padding-top: 68px; width: 100%; }
  }
/* PIKA_PALETTE_STEP3_V1_START */
  .app-sidebar {
    background: #1C4650;
  }
  /* PIKA_PALETTE_STEP3_V1_END */
  /* PIKA_NAV_ADMIN_SAISIE_ACCENT_V1 -- couleurs distinctes pour Administration et Nouvelle saisie. */
  .app-nav__link[data-rubrique="tableau-de-bord"]:not(.is-active) { box-shadow: inset 3px 0 0 #5FA8B2; }
  .app-nav__link[data-rubrique="tableau-de-bord"]:not(.is-active) .app-nav__icon { color: #5FA8B2; }
  .app-nav__link[data-rubrique="nouvelle-saisie"]:not(.is-active) { box-shadow: inset 3px 0 0 #CDA36B; }
  .app-nav__link[data-rubrique="nouvelle-saisie"]:not(.is-active) .app-nav__icon { color: #CDA36B; }
  /* PIKA_NAV_GROUPS_V1 -- regroupement visuel des sous-menus (Administration / Nouvelle saisie) */
  .app-nav__group-label {
    margin: 14px 0 4px 14px;
    padding: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    user-select: none;
  }
  /* PIKA_NAV_GROUP_LABEL_GOLD_V1 -- mise en evidence des libellés de section (Vue
     d'ensemble, Clients, Operations...) avec la couleur or deja utilisee ailleurs dans
     la charte (--ns-gold, badge HM, indicateurs actifs), plutot qu'une nouvelle couleur. */
  .app-nav__group-label {
    color: var(--ns-gold, #CDA36B);
    opacity: 0.85;
  }
  .app-nav__group-label--first {
    margin-top: 6px;
  }
  /* PIKA_MAIN_CARD_TOPBORDER_V5 -- bordure superieure bleu marine, ancrage visuel unique de la zone
     de contenu (juste sous le titre/sous-titre de chaque page). Vit ici, dans le <style>
     reellement charge par index.html -- voir commentaire plus haut dans ce fichier :
     index.html ne charge jamais css/style.css, ou vivaient les tentatives precedentes
     (totalement inertes de ce fait, jamais appliquees nulle part). */
  #app-main-content {
    border-top: 4px solid #1C4650 !important;
    padding-top: 18px !important;
    position: relative; /* PIKA_NAV_LOADING_V1 -- ancre le voile ::before/::after */
  }
  /* PIKA_NAV_LOADING_V1 (roadmap #21 lot 21-C) -- voile + spinner sur la zone de contenu
     pendant la (re)creation d'une iframe (1er acces a un module, saisie<->admin, 1er
     paint...), retire au 'load' de la nouvelle iframe (app-nav.js). Les bascules
     module/vue/onglet en postMessage (lot 2b) sont instantanees et ne l'affichent pas.
     CSS autonome : index.html ne charge jamais css/style.css (donc pas .uil-busy). */
  #app-main-content.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #F3F1EC; /* PIKA_PAPER_BG_V1 -- voile = fond de page (était #F0F2F7) */
    opacity: 0.66;
  }
  #app-main-content.is-loading::after {
    content: "";
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(30, 58, 95, 0.25);
    border-top-color: #1C4650;
    border-radius: 50%;
    animation: pika-nav-spin 0.8s linear infinite;
  }
  @keyframes pika-nav-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    #app-main-content.is-loading::after {
      animation: none;
      border-top-color: rgba(30, 58, 95, 0.25);
    }
  }
  /* PIKA_HEADER_AGENT_DATE_V1 -- deplacement du bloc "nom agent / role" (auparavant fige en
     bas de la barre laterale) vers l'en-tete de la zone de contenu, a droite du titre,
     avec ajout de la date du jour a cote. */
  .app-main__headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 4px;
  }
  .app-main__titleblock { min-width: 0; }
  .app-main__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding-top: 2px;
  }
  .app-main__meta-agent {
    text-align: right;
    line-height: 1.3;
  }
  .app-main__meta-agent .app-sidebar__foot-name { margin: 0; }
  .app-main__meta-agent .app-sidebar__foot-role { margin: 0; }
  .app-main__meta-date {
    font-size: .82rem;
    color: var(--ns-text-muted);
    border-left: 1px solid rgba(0,0,0,.12);
    padding-left: 16px;
    white-space: nowrap;
  }
  @media (max-width: 640px) {
    .app-main__headrow { flex-direction: column; }
    .app-main__meta { align-self: flex-start; }
    .app-main__meta-agent { text-align: left; }
    .app-main__meta-date { border-left: none; padding-left: 0; }
  }
  /* PIKA_HEADER_AGENT_DATE_STYLE_V2 -- mise en forme "pastille" du nom d'agent et de la date dans
     l'en-tete (remplace le simple texte, qui heritait du style sombre de la sidebar
     et devenait illisible sur fond clair). */
  .app-main__meta-agent {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
    text-align: left;
  }
  .app-main__meta-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1C4650; /* PIKA_CSS_TABLE_DEBLUE_V1 (ajout de perimetre, hors "bordures") : pastille des initiales agent alignee sur le vert du shell de nav, au lieu du bleu #2563EB */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .app-main__meta-agent-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .app-main__meta-agent .app-sidebar__foot-name {
    color: #1a2233 !important;
    font-size: .88rem;
    font-weight: 700;
    margin: 0;
  }
  .app-main__meta-agent .app-sidebar__foot-role {
    color: #6b8fb5 !important;
    font-size: .74rem;
    margin: 0;
  }
  .app-main__meta-date-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eef4fb;
    color: #244b73;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .app-main__meta-date-icon { font-size: .95rem; line-height: 1; }

  /* PIKA_FOCUS_VISIBLE_SHELL_V1 (chantier 24 QW3) -- la coquille de navigation n'avait
     aucun style de focus : le parcours clavier de la sidebar (fond navy) et du bouton
     hamburger reposait sur l'anneau par defaut du navigateur, peu visible sur fond sombre.
     Anneau dore coherent avec le .btn:focus-visible de style.css (meme logique : anneau 2px).
     Offset negatif : l'anneau reste dans la pastille arrondie et n'est pas rogne par
     l'overflow de .app-nav. Contraste dore/navy ~3,97:1 (>= 3:1, WCAG 2.2 SC 1.4.11). */
  .app-nav__link:focus-visible,
  .app-nav__sublink:focus-visible,
  .app-sidebar-toggle:focus-visible {
    outline: 2px solid var(--ns-gold);
    outline-offset: -2px;
  }

  /* PIKA_LANDING_PROFIL_V1 -- écran de choix de profil (Administration / Agent) affiché à
     l'ouverture quand aucune session n'est active (voir js/app-landing.js). Overlay plein
     écran au-dessus de la coquille ; retiré via .hidden dès qu'un profil est résolu.
     Reprend les tokens --ns-navy / --ns-gold (palette Bleu Pétrole & Sable). */
  #app-landing {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: #F3F1EC; /* PIKA_PAPER_BG_V1 -- était #F0F2F7 froid */
    overflow-y: auto;
  }
  #app-landing .app-landing__card {
    width: 100%;
    max-width: 1060px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 26px;
    padding: 0;
    box-shadow: 0 28px 70px rgba(18, 56, 66, .14);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
  }
  #app-landing .app-landing__col { padding: 46px 48px 40px; }
  #app-landing .app-landing__col--aside {
    background: #F4F6FA;
    border-left: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #app-landing .app-landing__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 4px;
  }
  #app-landing .app-landing__badge {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 16px;
    background: var(--ns-navy);
    border: 1px solid rgba(205, 163, 107, .55);
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #app-landing .app-landing__brand-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.95rem;
    color: var(--ns-navy-deep);
    line-height: 1.1;
  }
  #app-landing .app-landing__brand-sub {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ns-text-muted);
    margin-top: 3px;
  }
  #app-landing .app-landing__title {
    margin: 12px 0 28px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.06rem;
    color: var(--ns-text-muted);
  }
  #app-landing .app-landing__choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #app-landing .app-landing__btn {
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    font: inherit;
    color: var(--ns-text);
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 22px 22px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  #app-landing .app-landing__btn:hover {
    border-color: #3A7480;
    box-shadow: 0 10px 26px rgba(18, 56, 66, .12);
    transform: translateY(-2px);
  }
  #app-landing .app-landing__btn:focus-visible {
    outline: 2px solid var(--ns-gold);
    outline-offset: 2px;
  }
  #app-landing .app-landing__btn--admin { border-color: rgba(28, 70, 80, .35); }
  #app-landing .app-landing__ico {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
  }
  #app-landing .app-landing__btn--admin .app-landing__ico { background: var(--ns-navy); color: #fff; }
  #app-landing .app-landing__btn--agent .app-landing__ico { background: #F3EAD9; color: #B98A4A; }
  #app-landing .app-landing__btn-body { display: flex; flex-direction: column; gap: 7px; }
  #app-landing .app-landing__btn-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ns-navy-deep);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  #app-landing .app-landing__btn-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF2F7;
    color: #3A7480;
  }
  #app-landing .app-landing__btn--admin .app-landing__btn-tag { background: var(--ns-navy); color: #fff; }
  #app-landing .app-landing__btn-desc {
    font-size: .9rem;
    color: var(--ns-text-muted);
    line-height: 1.45;
  }

  /* Panneau d'infos (date / heure / météo / accueil) -- PIKA_LANDING_INFOS_V1 */
  #app-landing .app-landing__aside-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #app-landing .app-landing__info {
    background: #fff;
    border: 1px solid #E6EBF1;
    border-radius: 16px;
    padding: 18px 20px;
  }
  #app-landing .app-landing__info-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ns-text-muted);
    margin-bottom: 8px;
  }
  #app-landing .app-landing__info-value {
    font-weight: 700;
    color: var(--ns-navy-deep);
    font-size: 1.45rem;
    line-height: 1.22;
  }
  #app-landing #app-landing-time { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
  #app-landing .app-landing__weather { display: flex; align-items: center; gap: 14px; }
  #app-landing .app-landing__weather-emoji { font-size: 2.5rem; line-height: 1; }
  #app-landing .app-landing__weather-temp {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 2.05rem;
    color: var(--ns-navy-deep);
  }
  #app-landing .app-landing__weather-cond { font-size: .92rem; color: var(--ns-text-muted); }
  #app-landing .app-landing__greeting {
    margin-top: auto;
    background: #fff;
    border: 1px solid #E6EBF1;
    color: var(--ns-navy-deep);
    border-radius: 16px;
    padding: 16px 18px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }

  @media (max-width: 900px) {
    #app-landing .app-landing__card { grid-template-columns: 1fr; max-width: 560px; }
    #app-landing .app-landing__col--aside { border-left: none; border-top: 1px solid #E2E8F0; }
  }
  @media (max-width: 560px) {
    #app-landing .app-landing__col { padding: 30px 22px 24px; }
    #app-landing .app-landing__brand-name { font-size: 1.65rem; }
    #app-landing .app-landing__weather-temp { font-size: 1.7rem; }
    #app-landing .app-landing__weather-emoji { font-size: 2.1rem; }
    #app-landing .app-landing__info-value { font-size: 1.25rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    #app-landing .app-landing__btn { transition: none; }
    #app-landing .app-landing__btn:hover { transform: none; }
  }
  @media print {
    #app-landing { display: none !important; }
  }