/* SalesOn — la charte du site (SalesOn/app/globals.css, tailwind.config.ts) appliquée au portail.
   Chargée après portal.css et app.css : elle redéfinit les jetons et habille les composants.
   Règles reprises du site : navy profond, fonds porcelaine, cartes plates à filet d'un pixel ;
   le relief clay seulement pour ce qui se touche (boutons, champs) et ce qui s'illustre (icônes
   clay) ; l'orange est un accent — le bouton principal, un soulignement — jamais un contour. */

@font-face { font-family:"IBM Plex Mono"; src:url("/assets/fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root {
  --abyss:#030810; --navy-deep:#050d18; --marble:#143b63; --marble-500:#1e5a94; --marble-100:#d6e2ee;
  --paper:#f8f8f6; --porcelain:#f2f4f5; --mist:#e9edf0;
  --ink:#0f1b29; --slate:#42526c; --ash:#57626f; --cloud:#c7d1db;
  --orange-700:#9e5000; --orange-600:#d96e00; --orange-100:#ffe4c4;
  --clay-ease:cubic-bezier(.22,1,.36,1);
  --hairline:rgba(15,27,41,.09);
  --font-display:"Geist","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Jetons du portail, remappés sur la palette du site. */
  --navy:var(--navy-deep); --navy-hover:rgba(255,255,255,.06); --navy-line:rgba(255,255,255,.08); --navy-text:var(--cloud); --navy-muted:#8b98a7;
  --bg:var(--porcelain); --surface:#fff; --surface-2:var(--porcelain); --line:var(--hairline); --line-strong:rgba(15,27,41,.16);
  --text:var(--ink); --text-2:var(--slate); --muted:var(--ash); --faint:#7a8593;
  --orange:#ff8a00; --orange-hover:#ee7a00; --orange-ink:var(--orange-700); --orange-soft:#fff3e4; --orange-tint:#fff8f0;
  /* Le bouton principal : la pilule douce de la matière (soft.css), en orange léger ; l'encre reste lisible (13:1). */
  --orange-soft-btn:#ffdcb8; --orange-soft-btn-hover:#ffd2a4;
  --accent:var(--orange); --accent-ink:var(--orange-700); --accent-soft:var(--orange-100);
  --green:#2f8f6b; --green-ink:#23704f; --green-soft:#e3f1ea; --green-tint:#f1f7f4;
  --blue:var(--marble-500); --blue-deep:var(--marble); --blue-light:#7fa5c9; --blue-ink:var(--marble); --blue-soft:#e6eef6; --blue-tint:#f3f6fa;
  --purple:var(--marble-500); --purple-soft:#e6eef6;
  --red:#b4452f; --red-soft:#f7e7e3; --amber-ink:var(--orange-700); --amber-soft:#fff3e4;
  --radius:20px; --radius-sm:12px; --shadow:0 1px 2px rgba(15,27,41,.04);
}

body, body.portal-app { background:var(--porcelain); color:var(--ink); }
::selection { background:#ffb35f; color:var(--navy-deep); }

/* ——— Typographie : Geist pour les titres, serrée comme sur le site ——— */
.portal-app h1, .portal-app h2, .portal-app h3, .auth-page h1 { font-family:var(--font-display); color:var(--ink); }
.page-head h1, .detail-title h1, .campaign-title { font-size:32px; line-height:1.12; font-weight:800; letter-spacing:-.035em; }
.page-head p { color:var(--slate); font-size:15.5px; }
.section-head h2 { font-size:21px; font-weight:800; letter-spacing:-.03em; }
.card-head h2, .card-title, .table-head h2, .brief-section h2, .brief-card h2, .help-card h2, .status-card h2 { font-weight:700; letter-spacing:-.02em; }
.eyebrow { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }

/* ——— Focus : l'outline du site au clavier ; aucun contour orange sur les champs ——— */
.portal-app :focus-visible, :focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

/* ——— Navigation : le navy du site, l'entrée active éclairée, sans cadre ——— */
.app-sidebar { background:var(--navy-deep); }
.app-nav { gap:2px; padding-top:30px; }
.app-nav .nav-item { gap:12px; min-height:46px; padding:0 12px 0 8px; border:0; border-radius:12px; color:var(--cloud); font-weight:500; transition:background-color .2s var(--clay-ease), color .2s var(--clay-ease); }
.app-nav .nav-item .clay { width:30px; height:30px; object-fit:contain; opacity:.78; transition:opacity .2s var(--clay-ease), transform .3s var(--clay-ease); }
.app-nav .nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.app-nav .nav-item:hover .clay { opacity:1; }
.app-nav .nav-item.active, .app-nav .nav-item.active:hover { background:rgba(255,255,255,.09); border:0; color:#fff; font-weight:600; }
.app-nav .nav-item.active .clay { opacity:1; transform:scale(1.06); }
.app-user { border-top-color:rgba(255,255,255,.07); }
.avatar { background:var(--orange-100); color:var(--orange-700); }

.app-nav .nav-item.active { box-shadow:none; }

/* ——— Barre du haut : blanche, filet fin, commandes en pilule ——— */
.app-header { background:rgba(255,255,255,.92); border-bottom:1px solid var(--hairline); backdrop-filter:saturate(1.2) blur(10px); }
.header-select, .workspace-picker>summary.header-select, .account-chip { border:0; border-radius:999px; background:var(--soft, #eceff4); color:var(--ink); box-shadow:var(--soft-raise-sm); transition:box-shadow .2s var(--clay-ease), transform .2s var(--clay-ease); }
.workspace-picker>summary.header-select:hover, .workspace-picker[open]>summary.header-select, .account-menu[open] .account-chip, .account-chip:hover { background:var(--soft, #eceff4); box-shadow:var(--soft-raise); }
.workspace-picker[open]>summary.header-select, .account-menu[open] .account-chip { box-shadow:var(--soft-sink-sm); }
.account-popover, .portal-app .workspace-picker-popover, .header-menu-popover { border:0; border-radius:16px; box-shadow:inset 0 0 0 1px var(--hairline), 0 24px 48px -24px rgba(15,27,41,.35); }

/* ——— Surfaces : cartes plates, un filet, le rayon du site ——— */
.card, .table-card, .settings-panel { border:1px solid var(--hairline); border-radius:20px; box-shadow:0 1px 2px rgba(15,27,41,.04); }
.card-pad { padding:22px 24px; }
.empty-state { color:var(--slate); }
.empty-state strong { font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; color:var(--ink); }

/* ——— Boutons : la pilule clay du site ——— */
.btn, .button { border-radius:999px; font-weight:600; transition:transform .2s var(--clay-ease), box-shadow .2s var(--clay-ease), background-color .2s var(--clay-ease), filter .2s var(--clay-ease); }
.btn:active:not(:disabled), .button:active:not(:disabled) { transform:translateY(1px) scale(.985); }
.btn-primary, .button.primary, .button-primary { border:0; color:var(--ink); background-color:var(--orange-soft-btn); }
.btn-primary:hover, .button.primary:hover, .button-primary:hover { color:var(--ink); background-color:var(--orange-soft-btn-hover); transform:translateY(-1px); }
.btn-primary:active:not(:disabled) { background-color:var(--orange-soft-btn-hover); }
.btn-secondary { border:0; background:#fff; color:var(--ink); box-shadow:0 12px 24px -18px rgba(15,27,41,.45), inset 0 -6px 12px -10px rgba(15,27,41,.18), inset 0 0 0 1px rgba(15,27,41,.12); }
.btn-secondary:hover { background:#fff; color:var(--ink); transform:translateY(-1px); box-shadow:0 18px 30px -18px rgba(15,27,41,.5), inset 0 -6px 12px -10px rgba(15,27,41,.18), inset 0 0 0 1px rgba(15,27,41,.22); }
.btn-ghost { border-radius:999px; color:var(--slate); }
.btn-ghost:hover { background:rgba(15,27,41,.05); color:var(--ink); }
.btn-danger { color:var(--red); }
.btn-danger:hover { background:var(--red-soft); color:var(--red); }
.btn:disabled:hover, .btn[aria-busy]:hover { transform:none; }

/* ——— Champs : la matière creusée du site ; le focus éclaire, il ne cerne pas d'orange ——— */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]), body select, body textarea,
.brief-form textarea, .form-field select, .form-field input[type=email], .form-field input[type=text], .form-field input[type=password], .form-field textarea, .search-field input, .select-field select {
  border:0; border-radius:12px; background-color:#eef2f6; color:var(--ink);
  box-shadow:inset 0 3px 6px -2px rgba(15,27,41,.16), inset 0 -1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(15,27,41,.06);
  transition:box-shadow .22s var(--clay-ease), background-color .22s var(--clay-ease);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):hover, body select:hover, body textarea:hover {
  box-shadow:inset 0 3px 6px -2px rgba(15,27,41,.16), inset 0 -1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(15,27,41,.14);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):focus, body select:focus, body textarea:focus {
  outline:2px solid transparent; outline-offset:2px; background-color:#fff;
  box-shadow:inset 0 2px 5px -2px rgba(15,27,41,.12), inset 0 0 0 1.5px var(--marble), 0 0 0 4px rgba(20,59,99,.12);
}
body input[aria-invalid=true] { box-shadow:inset 0 3px 6px -2px rgba(15,27,41,.16), inset 0 0 0 1.5px var(--red); }
body input[readonly] { background-color:var(--mist); color:var(--slate); }
body input::placeholder, body textarea::placeholder { color:#6b7684; }
.portal-app label, .brief-form .field label, .form-field label { color:var(--ink); }
input[type=checkbox], input[type=radio] { accent-color:var(--orange-600); }

/* Fichier à importer : une dalle claire, le bouton en pilule. */
body input[type=file] { width:100%; padding:14px; border:1px dashed rgba(15,27,41,.22); border-radius:16px; background:var(--paper); color:var(--slate); font-size:13.5px; cursor:pointer; }
body input[type=file]:hover { border-color:rgba(15,27,41,.38); }
body input[type=file]::file-selector-button { margin-right:14px; padding:9px 16px; border:0; border-radius:999px; background:#fff; color:var(--ink); font:600 13px/1.2 "Inter",sans-serif; cursor:pointer; box-shadow:0 8px 18px -14px rgba(15,27,41,.5), inset 0 0 0 1px rgba(15,27,41,.14); }

/* ——— Onglets et liens : le soulignement orange du site ——— */
.tabs a { color:var(--slate); font-weight:500; }
.tabs a[aria-current], .tabs a[aria-current]:hover { color:var(--ink); border-color:var(--orange); font-weight:600; }
.link-accent { color:var(--orange-700); }
.link-arrow { color:var(--slate); }

/* ——— Pastilles de statut : douces, en pilule ——— */
.pill { height:26px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:600; }
.pill.sm { height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; }
.pill-draft, .pill-finished, .pill-muted { background:var(--mist); color:var(--slate); }
.pill-preparing, .pill-info { background:var(--marble-100); color:var(--marble); }
.pill-running, .pill-success { background:var(--green-soft); color:var(--green-ink); }
.pill-paused, .pill-warning, .pill-accent { background:var(--orange-soft); color:var(--orange-700); }
.status-badge { border-radius:999px; background:var(--mist); color:var(--slate); }

/* ——— Icônes : rendus clay, sans socle coloré (le rendu porte déjà son volume) ——— */
.tile { background:none!important; border-radius:0; }
.tile .clay, img.clay.tile { width:100%; height:100%; object-fit:contain; }
img.clay.tile { width:52px; height:52px; }
img.clay.tile.sm { width:44px; height:44px; }
img.clay.tile.xs { width:30px; height:30px; }
img.clay.tile.lg { width:64px; height:64px; }
.kpi { border:1px solid var(--hairline); border-radius:20px; }
.kpi img.clay.tile { width:48px; height:48px; }
.kpi .kpi-value { font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; color:var(--ink); }
.kpi-nav { border:0; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hairline), 0 10px 20px -14px rgba(15,27,41,.5); }

.strip { border:1px solid var(--hairline); border-radius:20px; }
.strip.is-highlight::before { display:none; }
.activity-list img.feed-clay, .row-list img.feed-clay { width:28px; height:28px; object-fit:contain; margin-top:-3px; }

/* État général du tableau de bord : une carte plate, l'icône clay à gauche. */
.status-card, .status-card.is-attention, .status-card.is-scheduled { background:#fff; border:1px solid var(--hairline); border-radius:20px; box-shadow:0 1px 2px rgba(15,27,41,.04); }
img.clay.status-icon { width:52px; height:52px; border-radius:0; background:none; object-fit:contain; flex-shrink:0; }
.status-card.is-scheduled { background:linear-gradient(160deg, #fff 0%, var(--blue-tint) 100%); }

/* Encadré d'aide : porcelaine claire, icône clay. */
.callout { background:var(--paper); border:1px solid var(--hairline); border-radius:20px; color:var(--ink); }
.callout .callout-clay { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.notice { border-radius:14px; }

/* ——— Stepper : des pastilles numérotées, l'étape en cours soulignée, sans cadre orange ——— */
.stepper { gap:4px 22px; margin:0 0 24px; padding:0 2px; }
.stepper li { padding:6px 0; border:0; border-radius:0; background:none; color:var(--ash); font-weight:500; box-shadow:none; }
.stepper li::before { width:26px; height:26px; background:var(--mist); color:var(--slate); font-family:var(--font-mono); font-size:12px; font-weight:500; }
.stepper li.is-current { border:0; color:var(--ink); font-weight:650; box-shadow:inset 0 -2px 0 var(--orange); }
.stepper li.is-current::before { background:var(--navy-deep); color:#fff; box-shadow:inset 0 1.5px 0 -.5px rgba(255,255,255,.25), inset 0 0 0 1.5px rgba(255,138,0,.55); }
.stepper li.is-done::before { background:var(--green-soft); color:var(--green-ink); }
.stepper a { text-decoration:none; }
.stepper a:hover { color:var(--ink); text-decoration:none; }

/* ——— Choix de l'offre : la carte du site, qui se décolle de 2 px au survol ——— */
.offer-card { border:0; border-radius:20px; box-shadow:0 1px 2px rgba(15,27,41,.04), inset 0 0 0 1px rgba(15,27,41,.08); transition:transform .3s var(--clay-ease), box-shadow .3s var(--clay-ease); }
button.offer-card:hover, button.offer-card:focus-visible { border:0; transform:translateY(-2px); box-shadow:0 1px 2px rgba(15,27,41,.05), 0 18px 34px -24px rgba(15,27,41,.35), inset 0 0 0 1px rgba(15,27,41,.16); }
.offer-card-body strong { font-family:var(--font-display); font-size:21px; font-weight:800; letter-spacing:-.03em; }
.offer-card-go { color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:5px; }

/* ——— Note de cadrage et sections du stepper ——— */
.brief-row { border:1px solid var(--hairline); border-radius:16px; background:var(--paper); }
.brief-row-line { background:none; border:0; }
.brief-section-head h2 { font-size:18px; }

/* ——— Tableaux ——— */
.portal-app table th { color:var(--ash); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; }

/* ——— Débordements relevés à la revue (1440 et 390 px) ——— */
@media (max-width:1600px) { .table-scroll { overflow-x:auto; } .table-card { overflow:hidden; } }
.visually-hidden { position:absolute!important; left:0; top:0; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:640px) {
  .section-head, .card-head { flex-wrap:wrap; }
  .link-arrow { white-space:normal; }
  .page-head h1, .detail-title h1, .campaign-title { font-size:27px; }
  .page-head-actions { flex-wrap:wrap; max-width:100%; }
  .breadcrumb { overflow:hidden; }
  .breadcrumb > span:not(.sep):not([aria-current]) { white-space:nowrap; }
  .breadcrumb span[aria-current] { min-width:0; }
  .breadcrumb a:focus-visible { outline-offset:-2px; }
  .workspace-picker + .breadcrumb > span:first-child:not([aria-current]), .workspace-picker + .breadcrumb > span:first-child:not([aria-current]) + .sep { display:none; }
}

/* ——— CRM : un second volet latéral, à côté de la navigation principale ——— */
.crm-nav { position:fixed; inset:0 auto 0 200px; z-index:25; width:188px; display:flex; flex-direction:column; gap:2px; padding:26px 10px 16px; background:var(--paper); border-right:1px solid var(--hairline); overflow-y:auto; }
.crm-nav-title { margin:0 0 10px 10px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
.crm-nav-item { display:flex; align-items:center; gap:10px; min-height:42px; padding:0 10px; border-radius:12px; color:var(--slate); font-size:14px; font-weight:500; text-decoration:none; transition:background-color .2s var(--clay-ease), color .2s var(--clay-ease); }
.crm-nav-item .clay { width:24px; height:24px; object-fit:contain; opacity:.85; }
.crm-nav-item:hover { background:rgba(15,27,41,.05); color:var(--ink); }
.crm-nav-item.active, .crm-nav-item.active:hover { background:#fff; color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--hairline), 0 6px 14px -12px rgba(15,27,41,.4); }
.app-main.has-crm-nav { margin-left:388px; }
@media (max-width:1100px) { .crm-nav { width:168px; padding:22px 8px 14px; } .app-main.has-crm-nav { margin-left:368px; } }
@media (max-width:860px) {
  .crm-nav { position:static; inset:auto; width:100%; flex-direction:row; flex-wrap:wrap; gap:4px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--hairline); }
  .crm-nav-title { display:none; }
  .crm-nav-item { min-height:36px; padding:0 10px; font-size:13px; }
  .crm-nav-item .clay { width:20px; height:20px; }
  .app-main.has-crm-nav { margin-left:0; }
}