/* ===========================================================================
   strukt — portail client BTP / terrassement
   Design tokens : mode sombre (défaut) + mode clair
   =========================================================================== */

/* ----------------------------------------------------------------------------
   THÈME SOMBRE — surfaces chaudes superposées (principe Ramp en sombre)
   ---------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  --bg:        #09090A;   /* fond appli, le plus profond */
  --bg-2:      #100F0C;   /* léger relief derrière les cartes / champs */
  --surface:   #161512;   /* carte */
  --surface-2: #1D1B16;   /* hover / surfaces imbriquées */
  --elevated:  #221F19;   /* popovers / cartes flottantes */
  --accent:    #C4973A;
  --accent-2:  #DCB45C;   /* lueur haute du dégradé doré */
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --accent-ink: #120D02;  /* texte sur fond doré */
  --text:      #F3EEE2;
  --text-2:    #9A9082;   /* secondaire — gris chaud lisible */
  --text-3:    #635B4F;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.13);
  --hairline:  rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.4), 0 24px 56px -16px rgba(0,0,0,0.7);
  --ring-hi:   inset 0 1px 0 rgba(255,255,255,0.045);
  --grid-line: rgba(255,255,255,0.05);
  --field:     #0F0E0B;
  --positive:  #74B57F;
  --positive-soft: color-mix(in srgb, var(--positive) 14%, transparent);
  --negative:  #CD8473;
  --warning:   #E0892E;   /* ambre — alertes / à valider, lisible sur sombre */
  --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent);
  --logo-invert: 0;
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   THÈME CLAIR — off-white chaud + cartes quasi-blanches (Ramp / Mercury)
   ---------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg:        #F4F1E9;
  --bg-2:      #ECE8DD;
  --surface:   #FFFFFF;   /* carte — ressort en blanc franc */
  --surface-2: #F4F1E8;
  --elevated:  #FFFFFF;
  --accent:    #7A5E10;
  --accent-2:  #9A7818;
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ink: #FCF8EC;
  --text:      #19140C;
  --text-2:    #6E6557;
  --text-3:    #9E9482;
  --border:    rgba(35,28,12,0.10);
  --border-2:  rgba(35,28,12,0.16);
  --hairline:  rgba(35,28,12,0.06);
  --shadow-sm: 0 1px 2px rgba(60,48,20,0.06);
  --shadow:    0 1px 2px rgba(60,48,20,0.07), 0 10px 26px -10px rgba(60,48,20,0.16);
  --shadow-lg: 0 2px 6px rgba(60,48,20,0.08), 0 24px 52px -16px rgba(60,48,20,0.22);
  --ring-hi:   inset 0 1px 0 rgba(255,255,255,0.7);
  --grid-line: rgba(35,28,12,0.07);
  --field:     #FFFFFF;
  --positive:  #3E7A4A;
  --positive-soft: color-mix(in srgb, var(--positive) 12%, transparent);
  --negative:  #A65442;
  --warning:   #B5701C;   /* ambre — alertes / à valider, lisible sur clair */
  --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent);
  --logo-invert: 0;
  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   ÉCHELLES réglables — densité · rayon · relief · mouvement (Tweaks)
   Sélecteurs préfixés :root pour passer AVANT les défauts (spécificité).
   ---------------------------------------------------------------------------- */
:root { --row-h: 52px; --pad: 22px; --gap: 20px; --stat-pad: 24px; }
:root[data-density="compact"]  { --row-h: 44px; --pad: 16px; --gap: 14px; --stat-pad: 18px; }
:root[data-density="regular"]  { --row-h: 52px; --pad: 22px; --gap: 20px; --stat-pad: 24px; }
:root[data-density="comfy"]    { --row-h: 60px; --pad: 28px; --gap: 26px; --stat-pad: 32px; }

:root { --r-card: 16px; --r-control: 11px; --r-field: 10px; --r-pill: 999px; }
:root[data-radius="soft"]     { --r-card: 20px; --r-control: 13px; --r-field: 12px; --r-pill: 999px; }
:root[data-radius="standard"] { --r-card: 16px; --r-control: 11px; --r-field: 10px; --r-pill: 999px; }
:root[data-radius="sharp"]    { --r-card: 10px; --r-control: 8px;  --r-field: 7px;  --r-pill: 8px; }

:root { --card-shadow: var(--shadow-sm); --card-border: var(--border); }
:root[data-elev="flat"]     { --card-shadow: none;          --card-border: var(--border); }
:root[data-elev="raised"]   { --card-shadow: var(--shadow-sm); --card-border: var(--border); }
:root[data-elev="floating"] { --card-shadow: var(--shadow);  --card-border: var(--hairline); }

:root { --dur-fast: 110ms; --dur: 170ms; --lift: -2px; --ease: cubic-bezier(.2,.7,.2,1); }
:root[data-motion="subtle"]     { --dur-fast: 100ms; --dur: 150ms; --lift: -1px; --ease: cubic-bezier(.2,.7,.2,1); }
:root[data-motion="expressive"] { --dur-fast: 130ms; --dur: 240ms; --lift: -3px; --ease: cubic-bezier(.34,1.32,.5,1); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--ui-font, "Geist"), "Geist", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

/* titres — tracking serré, look compact moderne (Geist) */
h1, h2, h3 { letter-spacing: -0.022em; }

.mono { font-family: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  font-feature-settings: "tnum"; letter-spacing: -0.01em; }

/* big key figures */
.figure {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 600;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-3) 55%, transparent); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; letter-spacing: inherit; }
input  { font-family: inherit; letter-spacing: inherit; }
a { color: inherit; }

/* anneau de focus net (navigation clavier) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* root mount fills viewport */
#root { height: 100%; }

/* ----------------------------------------------------------------------------
   PRIMITIVE : carte (relief/rayon/mouvement pilotés par les Tweaks)
   ---------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-int { cursor: pointer; }
.card-int:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(var(--lift)); }

/* utilitaire d'élévation au survol (lignes, vignettes) */
.lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        background-color var(--dur-fast) var(--ease); }
.lift:hover { transform: translateY(var(--lift)); }

/* bouton-icône (topbar, toggles) — feedback instantané au survol */
.icon-btn {
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-2) !important; }
.icon-btn:active { transform: translateY(0.5px); }

/* theme transition */
body, .themed { transition: background-color .3s var(--ease, ease), color .22s var(--ease, ease), border-color .22s var(--ease, ease); }

/* ===========================================================================
   Parité design (handoff Claude Design) : navigation & onglets profil
   =========================================================================== */
/* ---- éléments de navigation sidebar (état actif déterministe en CSS) ---- */
.nav-item {
  position: relative; width: 100%; border: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; height: 42px; border-radius: 10px;
  background: transparent; color: var(--text-2);
  transition: color .15s ease, background-color .18s ease, transform .12s ease;
}
.nav-item:not(.collapsed) { padding: 0 12px; justify-content: flex-start; }
.nav-item.collapsed { padding: 0; justify-content: center; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item[data-active="true"] { background: var(--accent-soft); color: var(--accent); }
.nav-item__bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 99px; background: var(--accent); opacity: 0;
  transition: opacity .25s ease, height .25s ease;
}
.nav-item.collapsed .nav-item__bar { left: 6px; }
.nav-item[data-active="true"] .nav-item__bar { opacity: 1; }
.nav-item__label { font-size: 14px; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; }
.nav-item[data-active="true"] .nav-item__label { font-weight: 600; }
.nav-badge {
  font-size: 11.5px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); transition: background-color .18s, color .18s;
}
.nav-item[data-active="true"] .nav-badge { background: var(--accent); color: #0A0A0A; }
.nav-dot {
  position: absolute; top: 7px; right: 14px; width: 7px; height: 7px; border-radius: 99px;
  background: var(--accent); border: 2px solid var(--bg);
}

/* ---- onglets du profil (même logique déterministe) ---- */
.pf-tab {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 14px;
  border-radius: 10px; border: none; text-align: left; font-size: 14px; font-weight: 500;
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: color .15s ease, background-color .18s ease;
}
.pf-tab:hover { background: var(--surface-2); color: var(--text); }
.pf-tab[data-active="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ---- layout responsive du profil à onglets (design Claude Design) ---- */
.pf-layout { grid-template-columns: 204px 1fr; }
@media (max-width: 860px) {
  /* nav onglets : passe en barre horizontale scrollable au-dessus du contenu */
  .pf-layout { grid-template-columns: 1fr !important; }
  .pf-tabs {
    position: static !important; flex-direction: row !important;
    overflow-x: auto; gap: 6px !important; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tab { white-space: nowrap; flex-shrink: 0; }
  .pf-grid2 { grid-template-columns: 1fr !important; }
  .pf-meta { flex-wrap: wrap; }
  .pf-meta > div { min-width: 50% !important; border-left: none !important; }
}
@media (max-width: 520px) {
  .pf-meta > div { min-width: 100% !important; }
  .pf-notif { grid-template-columns: 1fr 56px 56px !important; gap: 10px !important; }
}


/* ===========================================================================
   Couche d'animations (design + plus d'animations) — performante & sobre
   =========================================================================== */
@keyframes slideIn   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes sRise     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sFade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes sPop      { 0% { opacity: 0; transform: scale(.94); } 60% { transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sScaleX   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sShimmer  { from { background-position: -180% 0; } to { background-position: 180% 0; } }
@keyframes sGlow     { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }

/* utilitaires d'entrée (à poser sur n'importe quel élément) */
.s-rise  { animation: sRise .42s cubic-bezier(.16,1,.3,1) both; }
.s-fade  { animation: sFade .4s ease both; }
.s-pop   { animation: sPop .4s cubic-bezier(.34,1.56,.64,1) both; }

/* transition de PAGE : posée sur le conteneur de contenu, rejouée à chaque
   changement de page (key). Donne une vraie sensation de navigation fluide. */
.page-enter { animation: sRise .4s cubic-bezier(.16,1,.3,1) both; }

/* squelette de chargement animé */
.s-skeleton {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: sShimmer 1.4s ease-in-out infinite; border-radius: 8px;
}

/* ---- micro-interactions GLOBALES (n'affectent pas les styles inline) ---- */
button:not(:disabled) { transition: transform .12s ease, opacity .15s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
input, textarea, select { transition: border-color .15s ease, background-color .15s ease, box-shadow .2s ease; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
a { transition: color .15s ease, opacity .15s ease; }

/* lift au survol (classe utilitaire, complète .strukt-lift existante) */
.s-lift { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; will-change: transform; }
.s-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* accessibilité : on coupe tout si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   Module Appels d'offres — fiche AO redesign (handoff Claude Design)
   Animations d'entrée en TRANSFORM SEUL : le contenu reste toujours visible
   même si l'onglet passe en arrière-plan (pas de blocage à opacity:0).
   =========================================================================== */
@keyframes aoUp   { from { transform: translateY(10px); } to { transform: translateY(0); } }
@keyframes aoFade { from { transform: translateY(-4px); } to { transform: translateY(0); } }
@keyframes aoPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ao-up   { animation: aoUp .5s cubic-bezier(.16,1,.3,1) both; will-change: transform; }
.ao-fade { animation: aoFade .28s ease both; }
.ao-pulse { animation: aoPulse 2s ease-out infinite; }

/* onglets de la fiche AO : soulignement animé sous l'onglet actif */
.ao-tab { position: relative; transition: color .15s ease; }
.ao-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.16,1,.3,1); }
.ao-tab[data-active="true"]::after { transform: scaleX(1); }

/* lignes cliquables (check-list, pièces du dossier) */
.ck-item, .ao-detail-row { transition: background .13s ease; }

@media (max-width: 860px) {
  .wiz-grid2 { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ao-up, .ao-fade, .ao-pulse { animation: none !important; }
  .ao-tab::after { transition: none; }
}