/* =========================================================================
   AT OPS — DESIGN SYSTEM MOBILE · palette Clinical Care (cyan médical) v4.0.0
   ========================================================================= */

/* Polices hébergées sur le serveur (thème Clinical Care, v4.0.0). */
@font-face{ font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('public-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('public-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('lora-latin.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('roboto-mono-latin-400.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url('roboto-mono-latin-500.woff2') format('woff2'); }

:root {
  /* Palette Obsidienne & Slate */
  --bg-core: #0c1417;
  --bg-surface: #121c20;
  --bg-card: rgba(18, 28, 32, 0.94);
  --bg-card-hover: #172328;
  --bg-glass: rgba(12, 20, 23, 0.86);
  --bg-input: #0f181b;

  /* Bordures luminescentes */
  --border-subtle: rgba(147, 190, 204, 0.14);
  --border-glow: rgba(34, 211, 238, 0.32);
  --border-active: #22d3ee;

  /* Accents Néon & Télémétrie */
  --neon-cyan: #22d3ee;
  --cyan-rgb: 34, 211, 238;
  --bleu-rgb: 14, 116, 144;
  --neon-blue: #0e7490;
  --neon-emerald: #4ade80;
  --neon-amber: #fbbf24;
  --neon-rose: #f87171;
  --neon-purple: #c4b5fd;

  /* Textes */
  --text-main: #e6eff3;
  --text-muted: #a3b8bf;
  --text-dim: #8aa1a9;
  --text-cyan: #67e8f9;
  --text-emerald: #86efac;

  /* DEUX JETONS POUR CE QUE LES ÉCRANS ÉCRIVAIENT EN DUR.

     Soixante-dix lignes de vues portaient « #fff » pour un titre et
     « rgba(15,23,42,.6) » pour un panneau enfoncé. Tant qu'il n'y avait
     qu'un thème, cela ne coûtait rien ; le jour où l'on en ajoute un
     second, ces soixante-dix lignes restent sombres et le thème clair
     devient illisible par plaques. Elles passent donc par un jeton. */
  --text-strong: #ffffff;      /* les titres, le chiffre d'un compteur */
  --bg-inset: rgba(8, 15, 17, 0.6);   /* un panneau enfoncé dans une carte */
  --bg-subtle: rgba(255, 255, 255, 0.03);
  --grille-fond: rgba(255, 255, 255, 0.015);
  --halo-bleu: rgba(34, 211, 238, 0.10);
  --halo-vert: rgba(74, 222, 128, 0.07);
  /* Le message flottant se détache du fond : il reste sombre dans les deux
     thèmes, et son texte blanc va donc avec lui. C'est un jeton quand même —
     pour que ce soit un CHOIX lisible, et non un oubli. */
  --fond-toast: rgba(12, 20, 23, 0.96);

  /* Typographie & Espacement */
  --font-main: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Ombres & Lueurs (Glow) */
  --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.22);
  --glow-emerald: 0 0 18px rgba(74, 222, 128, 0.2);
  --glow-amber: 0 0 18px rgba(251, 191, 36, 0.2);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-dock: 0 -8px 32px 0 rgba(0, 0, 0, 0.5);

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* Hauteurs */
  --header-h: 64px;
  --dock-h: 70px;
  --sidebar-w: 260px;
}


/* =========================================================================
   LE THÈME CLAIR
   -------------------------------------------------------------------------
   L'application est née sombre, et c'est un bon choix pour un local
   technique ou une fin de journée. Ce n'en est pas un en plein soleil, sur
   un chantier, avec un écran de téléphone à 400 nits : le contraste
   s'effondre et l'on ne lit plus rien. D'où ce second thème, et un
   interrupteur pour passer de l'un à l'autre.

   IL NE REDÉFINIT QUE DES JETONS. Pas une seule règle de mise en page n'est
   reprise : la même feuille sert aux deux, et il n'y a donc aucun risque
   qu'un écran corrigé dans un thème reste faux dans l'autre. C'est la raison
   d'avoir d'abord tokenisé les soixante-dix couleurs écrites en dur.

   LES LUEURS DEVIENNENT DES OMBRES. Un halo lumineux sur fond clair ne se
   voit pas — il salit. Le relief vient donc d'ombres portées douces, comme
   dans la version bureau.
   ========================================================================= */
:root[data-theme="clair"] {
  --bg-core: #f8fbfc;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.98);
  --bg-card-hover: #f3f8fa;
  --bg-glass: rgba(255, 255, 255, 0.9);
  --bg-input: #ffffff;

  --border-subtle: #dce6ea;
  --border-glow: rgba(14, 116, 144, 0.28);
  --border-active: #0e7490;

  /* Les mêmes teintes, assombries pour tenir sur du blanc. Le cyan néon
     d'origine donnait 1,6 pour 1 sur fond clair : illisible. */
  --neon-cyan: #0e7490;
  --cyan-rgb: 14, 116, 144;
  --bleu-rgb: 11, 91, 113;
  --neon-blue: #0b5b71;
  --neon-emerald: #116932;
  --neon-amber: #8a5a06;
  --neon-rose: #b91c1c;
  --neon-purple: #6d3fd1;

  --text-main: #14262c;
  --text-muted: #3a4e56;
  --text-dim: #566a72;
  --text-cyan: #0b5b71;
  --text-emerald: #116932;
  --text-strong: #0a1a1f;

  --bg-inset: #eff5f7;
  --bg-subtle: rgba(15, 40, 50, 0.03);
  --grille-fond: rgba(15, 40, 50, 0.025);
  --halo-bleu: rgba(14, 116, 144, 0.06);
  --halo-vert: rgba(17, 105, 50, 0.05);
  --fond-toast: rgba(20, 38, 44, 0.96);

  --glow-cyan: 0 2px 10px rgba(15, 23, 42, 0.08);
  --glow-emerald: 0 2px 10px rgba(15, 23, 42, 0.08);
  --glow-amber: 0 2px 10px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 6px 18px -8px rgba(15, 23, 42, 0.18);
  --shadow-dock: 0 -6px 22px 0 rgba(15, 23, 42, 0.12);
}

/* Le thème clair est annoncé au navigateur : les ascenseurs, les champs de
   saisie natifs et les menus déroulants du système suivent, au lieu de
   rester sombres au milieu d'un écran blanc. */
:root[data-theme="clair"] { color-scheme: light; }
:root[data-theme="sombre"] { color-scheme: dark; }

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-core);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
}

/* Les vues mobiles qui conservent un tableau large doivent laisser toutes
   les colonnes et actions accessibles, sans élargir la page entière. */
.table-wrap,
.tableau-defilant {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-wrap:focus-visible,
.tableau-defilant:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Les cartes et listes restent dans la largeur de l'écran. Le contenu long
   défile dans son axe au lieu de masquer les commandes placées à la fin. */
.ht-card,
.carte,
.kpi-card,
.task-item,
.notif-item-card,
.liste-simple,
.mission-actions-row,
.view-header-actions {
  min-width: 0;
  max-width: 100%;
}

.mission-actions-row,
.view-header-actions,
.task-item > :last-child {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table,
.tableau-defilant > table {
  width: max-content;
  min-width: 100%;
}

.table-wrap th:last-child,
.table-wrap td:last-child,
.tableau-defilant th:last-child,
.tableau-defilant td:last-child {
  white-space: nowrap;
}

.table-wrap::-webkit-scrollbar,
.tableau-defilant::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.table-wrap::-webkit-scrollbar-track,
.tableau-defilant::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.table-wrap::-webkit-scrollbar-thumb,
.tableau-defilant::-webkit-scrollbar-thumb {
  background: var(--text-dim);
  border: 3px solid var(--bg-inset);
  border-radius: var(--radius-pill);
}

@media (max-width: 720px) {
  .table-wrap:has(> table.en-fiches),
  .tableau-defilant:has(> table.en-fiches) {
    overflow-x: visible;
    scrollbar-gutter: auto;
  }

  .table-wrap > table.en-fiches,
  .tableau-defilant > table.en-fiches {
    width: 100%;
    min-width: 0;
  }
}

/* Grille de fond High-Tech */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 15%, var(--halo-bleu) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, var(--halo-vert) 0%, transparent 40%),
    linear-gradient(var(--grille-fond) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-fond) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#app-root {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Typographie & Découpe sécurisée des titres */
h1, h2, h3, h4, h5, h6, .view-title {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

h1, .view-title {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.25;
}

h2 {
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}

h3 {
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 700;
  color: var(--text-strong);
}

/* En-têtes de vues standardisés & réactifs */
.view-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .view-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.view-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.view-header-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-cyan);
  letter-spacing: 1px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 639px) {
  .view-header-actions {
    width: 100%;
  }
  .view-header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* -------------------------------------------------------------------------
   HEADER TOP BAR (COCKPIT HEADER)
   ------------------------------------------------------------------------- */
#topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  /* 5.2.6 — La marge de la barre d'état s'AJOUTE aux 52 px : avec
     border-box, elle les mangeait et écrasait les boutons. */
  height: calc(52px + env(safe-area-inset-top, 0px));
  min-height: calc(52px + env(safe-area-inset-top, 0px));
  max-height: calc(52px + env(safe-area-inset-top, 0px));
  background: rgba(8, 12, 20, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 100;
  overflow: hidden;
  box-sizing: border-box;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
}

.brand-logo-img {
  height: 28px;
  width: auto;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 0 8px rgba(var(--cyan-rgb), 0.4));
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fff 40%, var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.brand-badge {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neon-cyan);
  background: rgba(var(--cyan-rgb), 0.12);
  border: 1px solid rgba(var(--cyan-rgb), 0.3);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  display: inline-block;
  vertical-align: middle;
}

.brand-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Bascule Bureau */
.desktop-switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--border-subtle);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.desktop-switch-pill:hover {
  background: rgba(var(--cyan-rgb), 0.2);
  border-color: var(--neon-cyan);
  color: var(--text-strong);
}

/* Bouton Cloche Notifications Mobile */
.cloche-wrapper-mobile {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* L'INTERRUPTEUR DE THÈME.

   Même gabarit que la cloche, à côté de laquelle il vit : deux boutons de
   la même barre qui n'auraient pas la même taille se liraient comme une
   erreur de mise en page. */
.btn-theme-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  line-height: 1;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-main);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-theme-mobile:hover, .btn-theme-mobile:active {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.cloche-btn-mobile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(30, 41, 59, 0.95);
  border: 1.5px solid rgba(var(--cyan-rgb), 0.5);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--cyan-rgb), 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

.cloche-btn-mobile:hover, .cloche-btn-mobile:active {
  background: rgba(var(--cyan-rgb), 0.25);
  border-color: var(--neon-cyan);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(var(--cyan-rgb), 0.4);
}

.cloche-btn-mobile.has-unread {
  border-color: #ef4444;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
  animation: clocheShake 4s ease infinite;
}

@keyframes clocheShake {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-12deg); }
  94% { transform: rotate(12deg); }
  96% { transform: rotate(-8deg); }
  98% { transform: rotate(8deg); }
}

.cloche-icon {
  font-size: 19px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.cloche-badge-pill {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  border-radius: 12px;
  padding: 1px 6px;
  min-width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.5);
  line-height: 1;
}

/* Notif Item Card - Anti-squash & Haute lisibilité */
.notif-item-card {
  display: block !important;
  flex-shrink: 0 !important;
  min-height: 72px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.notif-item-card:hover, .notif-item-card:active {
  transform: translateY(-1px);
  border-color: rgba(var(--cyan-rgb), 0.5) !important;
}

@media (max-width: 768px) {
  /* 5.2.6 — LA BARRE PASSAIT SOUS L'HEURE ET LA BATTERIE.
     Sur Android 15+, l'APK s'affiche bord à bord : la page commence sous
     la barre d'état, qui le signale par env(safe-area-inset-top). Cette
     règle remettait la marge haute à 0 : les boutons se retrouvaient sous
     les icônes du système. La marge est gardée, la hauteur l'ajoute. */
  #topbar {
    padding: env(safe-area-inset-top, 0px) 8px 0 !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }
  .brand-sub {
    display: none !important;
  }
  .brand-title {
    font-size: 13.5px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .brand-logo-img {
    height: 26px !important;
  }
  .topbar-actions {
    gap: 6px !important;
  }
  #sync-text-indicator {
    display: none !important;
  }
  .sync-pill {
    padding: 6px !important;
    min-width: 28px !important;
    height: 28px !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  .user-name-text {
    display: none !important;
  }
  .user-profile-pill {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .desktop-switch-text {
    display: none !important;
  }
  .desktop-switch-pill {
    padding: 5px 8px !important;
    font-size: 13px !important;
  }
}

/* Télémétrie Sync Pill */
.sync-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sync-pill:hover {
  border-color: var(--border-glow);
  box-shadow: var(--glow-cyan);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--neon-emerald);
  box-shadow: 0 0 10px var(--neon-emerald);
}

.sync-dot.pulse {
  animation: radarPulse 1.8s infinite;
}

.sync-dot.warning {
  background-color: var(--neon-amber);
  box-shadow: 0 0 10px var(--neon-amber);
}

.sync-dot.danger {
  background-color: var(--neon-rose);
  box-shadow: 0 0 10px var(--neon-rose);
}

@keyframes radarPulse {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.user-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
}

.user-profile-pill:hover {
  border-color: var(--neon-cyan);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.user-name-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   CORPS PRINCIPAL & CONTAINER
   ------------------------------------------------------------------------- */
#main-layout {
  display: flex;
  flex: 1;
  width: 100%;
}

#view {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 14px 14px calc(var(--dock-h) + 32px + env(safe-area-inset-bottom, 0px));
  min-width: 0;
}

@media (min-width: 900px) {
  #view {
    padding: 24px 32px 60px;
  }
}

/* -------------------------------------------------------------------------
   DOCK FLOTTANT MOBILE (GLASSMORPHISM HAUTE TECHNOLOGIE)
   ------------------------------------------------------------------------- */
#mobile-dock {
  position: fixed;
  /* 5.2.6 — au-dessus de la barre de gestes Android (bord à bord). */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  height: 64px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  box-shadow: var(--shadow-dock), 0 0 24px rgba(0, 0, 0, 0.4);
  z-index: 99;
}

@media (min-width: 900px) {
  #mobile-dock {
    display: none;
  }
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-dim);
  padding: 6px 4px;
  border-radius: var(--radius-lg);
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* LE SIXIÈME ONGLET SORTAIT DE L'ÉCRAN, ET « flex:1 » NE SUFFISAIT PAS.

     Un élément flex a par défaut min-width:auto : il refuse de descendre
     sous la largeur de son contenu, quoi qu'on lui demande. Les six onglets
     réclamaient 385 px alors que la barre en offre 364 sur un écran de
     390 px, 334 sur un 360 et 294 sur un 320 — le Hub, donc les paramètres,
     se retrouvait hors de portée du doigt. Mesuré sur les trois largeurs.

     min-width:0 lève ce plancher et laisse enfin les onglets se partager la
     place réellement disponible. */
  flex: 1 1 0;
  min-width: 0;
  user-select: none;
}

.dock-item-icon {
  font-size: 22px;
  margin-bottom: 2px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.dock-item-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
  /* Le libellé ne pousse plus : il se coupe proprement s'il le faut.
     Un « Chantiers » tronqué vaut mieux qu'un onglet inaccessible. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sous 380 px, on resserre plutôt que de laisser tronquer : à cette largeur
   les six libellés tiennent encore, mais seulement de justesse. */
@media (max-width: 380px) {
  .dock-item { padding: 6px 2px; }
  .dock-item-label { font-size: 10px; letter-spacing: 0; }
  .dock-item-icon { font-size: 20px; }
}

@media (max-width: 340px) {
  .dock-item-label { font-size: 9px; }
  .dock-item-icon { font-size: 18px; }
}

.dock-item.active {
  color: #fff;
  background: rgba(var(--cyan-rgb), 0.12);
  border: 1px solid rgba(var(--cyan-rgb), 0.25);
  box-shadow: 0 0 15px rgba(var(--cyan-rgb), 0.2);
}

.dock-item.active .dock-item-icon {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 0 8px var(--neon-cyan));
}

.dock-item.active .dock-item-label {
  color: var(--neon-cyan);
}

/* Badge compteur sur dock */
/* L'ATTRIBUT « hidden » NE CACHAIT RIEN, ET LA PASTILLE AFFICHAIT « 0 ».

   majCompteurSupport() pose bien « el.hidden = true » quand aucun ticket
   n'est ouvert. Mais « hidden » n'est qu'une règle display:none de la
   feuille par défaut du navigateur : la déclaration display:flex ci-dessous,
   écrite par nous, l'emporte sur elle. La pastille rouge restait donc
   affichée en permanence, avec un « 0 » dedans — une alerte qui n'en est
   pas une, sur l'onglet Support, à longueur de journée.

   Cette règle rend à « hidden » le sens qu'il doit avoir. Elle est posée
   AVANT le bloc pour rester lisible ; c'est la spécificité — [hidden]
   ajoute un sélecteur d'attribut — et non l'ordre, qui la fait gagner. */
.dock-badge[hidden] { display: none !important; }

.dock-badge {
  position: absolute;
  top: 4px;
  right: 14px;
  background: var(--neon-rose);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px var(--neon-rose);
}

#sidebar-support-badge {
  position: static;
  margin-left: auto;
  min-width: 20px;
}

/* -------------------------------------------------------------------------
   SIDEBAR DESKTOP
   ------------------------------------------------------------------------- */
#desktop-sidebar {
  display: none;
  width: var(--sidebar-w);
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-subtle);
  padding: 20px 14px;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - var(--header-h));
}

@media (min-width: 900px) {
  #desktop-sidebar {
    display: flex;
  }
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 0 12px 6px;
  font-family: var(--font-mono);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.sidebar-link:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-subtle);
}

.sidebar-link.active {
  color: #fff;
  background: rgba(var(--cyan-rgb), 0.12);
  border-color: rgba(var(--cyan-rgb), 0.35);
  box-shadow: 0 0 16px rgba(var(--cyan-rgb), 0.15);
}

.sidebar-link.active .sidebar-icon {
  filter: drop-shadow(0 0 8px var(--neon-cyan));
  color: var(--neon-cyan);
}

.sidebar-icon {
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

/* -------------------------------------------------------------------------
   COMPOSANTS HIGH-TECH (CARTES, GLASSMORPHISM, BADGES)
   ------------------------------------------------------------------------- */
.ht-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ht-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.ht-card.glow-cyan {
  border-color: rgba(var(--cyan-rgb), 0.4);
  box-shadow: var(--shadow-card), var(--glow-cyan);
}

.ht-card.glow-emerald {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: var(--shadow-card), var(--glow-emerald);
}

.ht-card.glow-amber {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: var(--shadow-card), var(--glow-amber);
}

/* Ligne supérieure lumineuse sur carte */
.ht-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), 0.5), transparent);
}

/* Grilles */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* 5.2.6 — min(…, 100%) : dans une fenêtre de 280 px, une colonne de 300 px
   minimum dépassait du cadre (champs Porteur, Statut, Téléphone, Date…). */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }

/* KPI Cards */
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.kpi-icon {
  font-size: 20px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: var(--font-mono);
  color: var(--text-main);
}

.kpi-value.cyan { color: var(--neon-cyan); }
.kpi-value.emerald { color: var(--neon-emerald); }
.kpi-value.amber { color: var(--neon-amber); }
.kpi-value.rose { color: var(--neon-rose); }

.kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Badges High-Tech */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.badge-cyan { background: rgba(var(--cyan-rgb), 0.15); color: var(--text-cyan); border: 1px solid rgba(var(--cyan-rgb), 0.35); }
.badge-emerald { background: rgba(16, 185, 129, 0.15); color: var(--neon-emerald); border: 1px solid rgba(16, 185, 129, 0.35); }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--neon-amber); border: 1px solid rgba(245, 158, 11, 0.35); }
.badge-rose { background: rgba(244, 63, 94, 0.15); color: var(--neon-rose); border: 1px solid rgba(244, 63, 94, 0.35); }
.badge-purple { background: rgba(168, 85, 247, 0.15); color: var(--neon-purple); border: 1px solid rgba(168, 85, 247, 0.35); }
.badge-gray { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid rgba(148, 163, 184, 0.2); }

/* -------------------------------------------------------------------------
   BOUTONS HIGH-TECH
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
  user-select: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #0e7490, #0b5b71);
  color: #fff;
  border-color: rgba(var(--cyan-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--bleu-rgb), 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0b5b71, #0a4a5c);
  box-shadow: 0 6px 20px rgba(var(--cyan-rgb), 0.45);
}

.btn-success {
  background: linear-gradient(135deg, #15803d, #116932);
  color: #fff;
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.btn-success:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.btn-warning {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-color: rgba(245, 158, 11, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  border-color: rgba(244, 63, 94, 0.4);
}

.btn-glass {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(10px);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

.btn-glass:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: var(--border-glow);
}

.btn-action-round {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Boutons d'action géants terrain */
.btn-giant {
  width: 100%;
  min-height: 52px;
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: var(--radius-lg);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  padding: 12px 14px;
  word-break: break-word;
}

/* -------------------------------------------------------------------------
   CHAMPS DE SAISIE & FORMULAIRES HIGH-TECH
   ------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 5.2.6 — .form-control : classe du module Support, sans style sur
   téléphone (champs bruts du navigateur, libellés collés). */
.form-input, .form-select, .form-textarea, .form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.15);
  background: rgba(15, 23, 42, 1);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
}

/* Segmented Control / Onglets internes */
.segmented-control {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}

.segmented-control::-webkit-scrollbar {
  display: none;
}

.segmented-btn {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-align: center;
}

.segmented-btn.active {
  background: rgba(var(--cyan-rgb), 0.15);
  color: var(--text-strong);
  border: 1px solid rgba(var(--cyan-rgb), 0.35);
  box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.2);
}

/* -------------------------------------------------------------------------
   HERO MISSION EN DIRECT (COCKPIT CHANTIER)
   ------------------------------------------------------------------------- */
.hero-mission {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(var(--cyan-rgb), 0.35);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-card), 0 0 25px rgba(var(--cyan-rgb), 0.15);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.hero-mission::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-emerald));
}

.mission-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 5.2.6 — à 360 px, le chronomètre sortait de la carte. */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.mission-chrono {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-emerald);
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.mission-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.mission-client {
  font-size: 14px;
  color: var(--neon-cyan);
  font-weight: 600;
  margin-bottom: 12px;
}

.mission-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   LISTE DE TÂCHES INTERACTIVE
   ------------------------------------------------------------------------- */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.task-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(30, 41, 59, 0.6);
}

.task-item.completed {
  opacity: 0.55;
  background: rgba(15, 23, 42, 0.3);
}

.task-checkbox {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--neon-cyan);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s;
}

.task-item.completed .task-checkbox {
  background: var(--neon-emerald);
  border-color: var(--neon-emerald);
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.task-item.completed .task-title {
  text-decoration: line-through;
  color: var(--text-dim);
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   SIGNATURE CANVAS & GALERIE PHOTOS TERRAIN
   ------------------------------------------------------------------------- */
.signature-box {
  border: 2px dashed rgba(var(--cyan-rgb), 0.4);
  border-radius: var(--radius-lg);
  background: rgba(11, 15, 25, 0.8);
  position: relative;
  overflow: hidden;
  margin: 12px 0;
}

.signature-canvas {
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  position: relative;
}

.photo-thumb-wrap {
  position: relative;
}

.photo-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.9);
  color: #fff;
  border: none;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   MODALES HIGH-TECH
   ------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 5.2.6 — la croix de fermeture restait sous la barre d'état. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  animation: modalFadeIn 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid rgba(var(--cyan-rgb), 0.35);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: min(90vh, calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), var(--glow-cyan);
  padding: 24px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  /* 5.2.6 — la croix faisait 18 × 26 px, et un titre long l'écrasait. */
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------------------
   TOASTS HIGH-TECH
   ------------------------------------------------------------------------- */
#toast-container {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--fond-toast);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: toastSlideIn 0.25s ease;
  max-width: 360px;
}

.toast.success { border-color: var(--neon-emerald); box-shadow: var(--glow-emerald); }
.toast.error { border-color: var(--neon-rose); }
.toast.warning { border-color: var(--neon-amber); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================================
   LES QUELQUES ENDROITS OÙ LA FEUILLE ÉCRIT ENCORE EN DUR

   Le reste du fichier passe par les jetons, et le thème clair n'a donc rien
   à en reprendre. Ces règles-ci écrivent une couleur explicite : ce sont des
   restes de l'époque où il n'y avait qu'un thème, et il faut les rattraper
   une par une. Les rattraper ICI plutôt qu'en les modifiant à leur place est
   volontaire : la version sombre reste lisible telle quelle, et l'on voit
   d'un coup d'œil ce qui n'est pas encore tokenisé.
   ========================================================================= */
:root[data-theme="clair"] .cloche-btn-mobile{
  background:#ffffff; border-color:rgba(14,116,144,.45);
  box-shadow:0 2px 8px rgba(15,23,42,.1);
}
:root[data-theme="clair"] .sync-pill,
:root[data-theme="clair"] .desktop-switch-pill,
:root[data-theme="clair"] .user-profile-pill{
  background:#ffffff; border-color:var(--border-subtle);
  color:var(--text-main); box-shadow:0 1px 4px rgba(15,23,42,.08);
}
:root[data-theme="clair"] #topbar{
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--border-subtle);
  box-shadow:0 1px 10px rgba(15,23,42,.06);
}
/* LE NOM DE L'APPLICATION ÉTAIT ÉCRIT EN BLANC SUR BLANC.

   .brand-title peint son texte avec un dégradé qui part de #fff et va vers
   le cyan, posé par background-clip:text. Sur l'entête sombre, c'est ce qui
   lui donne son éclat. Sur l'entête claire, les 40 % de blanc du début
   tombent sur du blanc : « AT O » disparaissait purement et simplement, et
   il ne restait que « PS » puis la pastille PRO. Le nom du produit,
   illisible sur la moitié des téléphones.

   On annule donc le dégradé et l'on rend au texte une couleur pleine. Il
   faut les deux déclarations : -webkit-text-fill-color l'emporte sur color
   partout où il est posé, et le laisser à « transparent » suffirait à
   garder le texte invisible. */
:root[data-theme="clair"] .brand-title{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--text-strong);
  color:var(--text-strong);
}
:root[data-theme="clair"] #mobile-dock{
  background:rgba(255,255,255,.95); border-top:1px solid var(--border-subtle);
}
:root[data-theme="clair"] .ht-card{
  background:#ffffff; border-color:var(--border-subtle);
  box-shadow:var(--shadow-card);
}
/* Les lueurs colorées des cartes : sur fond blanc, un halo ne se voit pas,
   il salit. On garde la couleur sur la BORDURE, qui la porte très bien. */
:root[data-theme="clair"] .glow-cyan{ box-shadow:var(--shadow-card); border-color:rgba(3,105,161,.35); }
:root[data-theme="clair"] .glow-emerald{ box-shadow:var(--shadow-card); border-color:rgba(4,120,87,.35); }
:root[data-theme="clair"] .glow-amber{ box-shadow:var(--shadow-card); border-color:rgba(180,83,9,.35); }
:root[data-theme="clair"] .glow-rose{ box-shadow:var(--shadow-card); border-color:rgba(190,18,60,.35); }
:root[data-theme="clair"] .form-input,
:root[data-theme="clair"] .form-select,
:root[data-theme="clair"] .form-textarea,
:root[data-theme="clair"] .form-control{
  background:#ffffff; border-color:var(--border-subtle); color:var(--text-main);
}
:root[data-theme="clair"] .btn-glass{
  background:#f3f8fa; border-color:var(--border-subtle); color:var(--text-main);
}
:root[data-theme="clair"] .modal-content{
  background:#ffffff; border-color:var(--border-subtle); box-shadow:0 20px 50px -20px rgba(15,23,42,.35);
}
:root[data-theme="clair"] .modal-overlay{ background:rgba(15,23,42,.45); }
:root[data-theme="clair"] .segmented-control{ background:#eef4f6; }
:root[data-theme="clair"] .segmented-btn{ color:var(--text-muted); }
:root[data-theme="clair"] .segmented-btn.active{
  background:#ffffff; color:var(--text-main); box-shadow:0 1px 3px rgba(15,23,42,.14);
}
:root[data-theme="clair"] .task-item,
:root[data-theme="clair"] .kpi-card{
  background:#ffffff; border-color:var(--border-subtle);
}
:root[data-theme="clair"] #desktop-sidebar{
  background:#ffffff; border-right:1px solid var(--border-subtle);
}
:root[data-theme="clair"] .sidebar-link{ color:var(--text-muted); }
:root[data-theme="clair"] .sidebar-link:hover,
:root[data-theme="clair"] .sidebar-link.active{
  background:#e2f2f6; color:var(--neon-blue);
}


/* =========================================================================
   SAISIE SIMPLIFIEE — L'ESSENTIEL D'ABORD
   Chaque creation montre 4 a 6 champs. Le reste attend dans un bloc replie :
   on enregistre sans le lire, on l'ouvre quand on en a besoin.
   ========================================================================= */
.bloc-details {
  margin: 14px 0 4px;
  border: 1px solid var(--bordure, #cbd5e1);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.bloc-details > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 13.5px;
  list-style: none;
}
.bloc-details > summary::-webkit-details-marker { display: none; }
.bloc-details > summary::before { content: '▸ '; }
.bloc-details[open] > summary::before { content: '▾ '; }
.bloc-details > summary:focus-visible { outline: 2px solid var(--neon-cyan, #06b6d4); outline-offset: 2px; }
.bloc-details > *:not(summary) { padding: 0 12px; }
.bloc-details > *:last-child { padding-bottom: 12px; }

.choix-rapides { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.choix-rapides button {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bordure, #cbd5e1);
  background: var(--surface, #fff);
  cursor: pointer;
}
.choix-rapides button:hover { border-color: var(--neon-cyan); }

.pied-formulaire {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  /* Sur telephone, le bouton d'enregistrement reste sous le pouce. */
  .pied-formulaire {
    position: sticky;
    bottom: 0;
    background: var(--surface, #fff);
    padding: 10px 0;
    border-top: 1px solid var(--bordure, #e2e8f0);
    z-index: 2;
  }
  .pied-formulaire button { flex: 1 1 140px; }
}

/* ---- Saisie facile : champs obligatoires, brouillon repris, texte libre ---- */
.avis-obligatoire {
  background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .4); color: var(--neon-rose);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: .92rem;
}
.avis-obligatoire ul { margin: 6px 0 0 18px; padding: 0; }
.avis-obligatoire .sous-titre { color: var(--neon-rose); margin-top: 6px; }
.champ-invalide input, .champ-invalide select, .champ-invalide textarea {
  border-color: var(--neon-rose) !important; background: rgba(248, 113, 113, .08);
}
.champ-invalide > label { color: var(--neon-rose); }
.avis-brouillon {
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); color: var(--neon-amber);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: .92rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bloc-saisie-libre {
  background: rgba(var(--cyan-rgb), .08); border: 1px solid rgba(var(--cyan-rgb), .3); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px;
}
.bloc-saisie-libre > label { font-weight: 700; color: var(--text-cyan); display: block; margin-bottom: 6px; }
:root[data-theme="clair"] .avis-obligatoire { background: #fdecec; border-color: #f5c2c2; }
:root[data-theme="clair"] .champ-invalide input, :root[data-theme="clair"] .champ-invalide select, :root[data-theme="clair"] .champ-invalide textarea { background: #fdecec; }
:root[data-theme="clair"] .avis-brouillon { background: #fbf1d9; border-color: #ecd29a; }
.bloc-saisie-libre textarea { width: 100%; resize: vertical; }

/* =========================================================================
   5.2.7 — CIBLES TACTILES
   -------------------------------------------------------------------------
   L'audit mobile a mesuré des cibles de 18 à 28 px de haut (Android
   recommande 48 dp, 40 px est le minimum retenu ici). Pour les éléments
   dont la taille compte dans la mise en page (barre du haut, case de
   tâche, liens « ‹ Retour », « Voir tout ›»), on agrandit la ZONE de
   toucher par un pseudo-élément invisible : rien ne bouge à l'écran.
   ========================================================================= */
.brand-wrap, .desktop-switch-pill, .sync-pill, .user-profile-pill {
  position: relative;
}
.brand-wrap::after, .desktop-switch-pill::after, .sync-pill::after, .user-profile-pill::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.task-checkbox {
  position: relative;
}
.task-checkbox::after {
  content: '';
  position: absolute;
  inset: -9px;
}
.zone-toucher {
  position: relative;
}
.zone-toucher::after {
  content: '';
  position: absolute;
  inset: -11px -6px;
}
input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}