/* Shared surface and text tokens. Screens can use these in light and dark
       mode without adding another literal-color override to the runtime sheet. */
    :root {
      --cf-canvas: #F5F6F8;
      --cf-surface: #FFFFFF;
      --cf-text: #111827;
      --cf-muted: #6B7280;
      --cf-border: #E5E7EB;
      --cf-accent: #006a85;
      --cf-accent-contrast: #FFFFFF;
    }
    body { background-color: var(--cf-canvas); }

    /* Images are never draggable as files (logo, menu icons, arrows, thumbnails…).
       Keeps clicks working — only the native ghost-drag is disabled. */
    img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; }
    /* Safari performance fixes */
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      .safari-backdrop {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
    }

    /* Fallback for Safari versions that struggle with backdrop-filter */
    @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {

      .liquid-glass,
      .liquid-glass-card,
      .liquid-glass-btn,
      .card-gradient {
        background-color: rgba(30, 30, 50, 0.95) !important;
      }
    }

    /* Prevent text size adjustment on orientation change */
    html {
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* Improve scrolling performance */
    * {
      -webkit-overflow-scrolling: touch;
    }

    /* Prevent tap highlight on mobile */
    * {
      -webkit-tap-highlight-color: transparent;
    }

    /* Hide scrollbars on tab bars (scrollbar-hide is not in Tailwind core) */
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* ── Recipient / Cc entry boxes: no browser autofill panel ──────────────
       Safari ignores autocomplete="off" and decides on its own heuristics
       (field name/id, placeholder, nearby label text) that a "Destinataires" /
       "Cc" box is a username field — it then opens its saved-passwords +
       contacts popup over our own address-book typeahead. A browser can only
       autofill a real form control, so those entry boxes are rendered as a
       single-line contenteditable (cfEmailEntryField in 02_utils.js) instead
       of an <input>. This is the styling for it. */
    .cf-entry-field {
      display: block;
      white-space: nowrap;
      overflow-x: auto;
      outline: none;
      -webkit-user-modify: read-write-plaintext-only;
    }
    .cf-entry-field::-webkit-scrollbar { display: none; }
    .cf-entry-field:empty::before {
      content: attr(data-cf-placeholder);
      color: #9CA3AF;
      pointer-events: none;
    }
    /* Belt-and-braces for the remaining real <input>s that opt out: kill the
       contacts / credentials button Safari injects inside the field. */
    input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
    input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
      visibility: hidden;
      display: none !important;
      pointer-events: none;
      height: 0;
      width: 0;
      margin: 0;
    }

    /* Actor profile overlay: full-screen on mobile, offset by sidebar width
       on desktop so the left nav stays visible/clickable behind it. */
    .actor-fiche-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 50;
      overflow-y: auto;
    }
    @media (min-width: 768px) {
      .actor-fiche-overlay { left: var(--cf-sidebar-w, 216px); }
    }

    /* Sidebar "Mes outils" tiles. The button box is the SQUARE (41px) so the
       grid can start on the rail's shared left edge and finish on the fold
       chevron; the caption under it is 65px and deliberately overhangs. A
       background on the button therefore paints a narrow capsule with the text
       poking out either side — so hover and selection live on the square and
       the caption instead, never on the box. */
    /* The caption's resting colour lives HERE, not inline: an inline color
       beats a stylesheet rule, so the hover and selected states below could
       never repaint it. */
    /* Settings nav rows (Figma UI-DC 362:14588). display:flex lives here rather
       than inline because filterSettingsNav() clears the inline display property
       to un-hide a row after a search — an inline flex would not come back. */
    /* ── Collapsed 72px rail (spec board menu$ 7894:775) ─────────────────
       Hover LIFTS the pastille with a teal shadow and pressing sinks it and
       cuts the shadow — "C'est la disparition de l'ombre qui fait
       l'enfoncement". The label rides a tooltip 10px to the right that waits
       400ms before appearing, so running the pointer down the rail doesn't
       flash six of them; the delay is on the transition, not a JS timer, so
       there is nothing to leak or cancel. */
    .cf-rail-btn > span:first-of-type,
    .cf-rail-btn > span { transition: transform .12s ease, box-shadow .12s ease; }
    .cf-rail-btn:hover > span:not(.cf-rail-tip):not(.msg-notif-count) { transform: scale(1.06); box-shadow: 0 4px 10px rgba(0, 118, 146, .32); }
    .cf-rail-btn:active > span:not(.cf-rail-tip):not(.msg-notif-count) { transform: scale(.94); box-shadow: none; transition-duration: .08s; }
    /* Le panneau 56×44 de la rangée sélectionnée. Il était émis conditionnellement
       par renderSidebar() ; il est maintenant TOUJOURS dans le DOM et c'est cette
       règle qui le montre, parce que la barre ne connaît plus la page courante
       (voir « data-nav-view » dans 09a_ui_core.js). Mêmes valeurs qu'avant.
       Le point « du neuf » de Découverte suit la même bascule : il disait
       simplement « et tu n'y es pas », donc il s'efface sur la page courante. */
    .cf-rail-active { display: none; position: absolute; left: 8px; top: 0; width: 56px; height: 44px; border-radius: 12px; background: #e3f0f3; }
    .cf-rail-btn[aria-current="page"] > .cf-rail-active { display: block; }
    .cf-rail-btn[aria-current="page"] > .cf-rail-dot { display: none; }
    /* Nav du bas sur téléphone — même raison : la teinte active était en inline. */
    .cf-mnav { color: #9CA3AF; }
    .cf-mnav[aria-current="page"] { color: #006a85; }
    .cf-rail-tip {
      position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
      display: flex; align-items: center; gap: 8px; white-space: nowrap;
      background: #12110f; color: #fff; font-size: 11px; line-height: 1;
      padding: 7px 9px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
      opacity: 0; pointer-events: none; z-index: 60; transition: opacity .12s ease; transition-delay: 0s;
    }
    .cf-rail-btn:hover .cf-rail-tip { opacity: 1; transition-delay: .4s; }
    .cf-rail-kbd { color: #9a968e; font-size: 10px; }
    /* The messages panel opens on hover and must survive the pointer crossing
       the gap to reach it, so the 10px bridge is padding on the panel itself
       rather than a margin. */
    .cf-rail-flyout {
      position: absolute; left: 100%; bottom: 0; margin-left: 10px;
      background: #fff; border: 1px solid #e6e8ea; border-radius: 12px;
      box-shadow: 0 8px 28px rgba(23,23,28,.16);
      opacity: 0; visibility: hidden; transform: translateX(-4px);
      transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
      z-index: 60;
    }
    /* The tools panel opens level with its tile; the messages one is bottom-anchored. */
    .cf-rail-flyout--top { top: 0; bottom: auto; }
    .cf-rail-flywrap:hover .cf-rail-flyout,
    .cf-rail-flyout:hover {
      opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s;
    }
    .cf-rail-flywrap:hover .cf-rail-btn .cf-rail-tip { opacity: 0; transition-delay: 0s; }
    .cf-fold-btn:hover { background: #f3f4f6 !important; }

    .set-nav-item { display: flex; align-items: center; gap: 10px; }

    .cf-tool-tile > span:last-child { color: #222d31; }
    /* Hover LIFTS the pastille — it must not dim it. brightness() drags a pastel
       toward grey, which read as the tile going dead rather than becoming
       clickable. Scale + a soft shadow leave the hue alone. */
    .cf-tool-tile > span:first-child { transition: transform .12s ease, box-shadow .12s ease; }
    .cf-tool-tile:hover > span:first-child { transform: scale(1.05); box-shadow: 0 2px 6px rgba(23,23,28,.10); }
    .cf-tool-tile:hover > span:last-child { color: #006a85; }
    .cf-tool-tile[aria-current="page"] > span:first-child { outline: 2px solid #006a85; outline-offset: 2px; }
    .cf-tool-tile[aria-current="page"] > span:last-child { color: #006a85; font-weight: 500; }