/* ══════════════════════════════════════════════════════
   FRAMES — Composants par phase
   app-components.css · Phase 3 — Studio
   ══════════════════════════════════════════════════════ */

/* ─── Variables complémentaires ─────────────────────── */
/* Complète styles.css (--accent, --profit, --loss, --ink, etc.)           */
:root {
  --orange:      #F59332;  /* chrono, boutons warm, accent chaud principal */
  --orange-dark: #B8600A;  /* texte warning foncé, hover orange            */
  --orange-warn: #D4800A;  /* badges warning légers (.is-warn)             */
  --ink-dark:    #1a2e45;  /* titres très sombres, texte sur fond clair    */
  --red-soft:    #E07878;  /* catégorie révisions, dépassement léger       */
}

/* ─── Base typographique ─────────────────────────────── */
/* DM Sans hérité sur tous les éléments — évite 89 déclarations font-family */
body, button, input, select, textarea {
  font-family: 'DM Sans', sans-serif;
}

/* ─── Anti-zoom iOS — font-size 16px minimum ─────────── */
/* Safari/iOS zoome automatiquement si font-size < 16px sur un champ actif */

input, select, textarea {
  font-size: 16px !important;
}

/* ─── Utility : glass card ───────────────────────────── */

.glass-card {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(30,50,80,.06);
}

/* ─── Stats ──────────────────────────────────────────── */

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 16px 8px;
}

.stats-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

.stats-row-3 .stat-card {
  padding: 12px 10px;
}

.stats-row-3 .stat-value {
  font-size: 1rem;
}

.stat-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(20,40,60,.9);
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ─── Liste projets ──────────────────────────────────── */

.projet-list {
  padding: 8px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.client-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.client-group-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 4px;
  margin: 0;
}

.projet-card {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 14px 16px 36px; /* padding-bottom laisse place au bouton menu */
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(30,50,80,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.projet-card:active {
  transform: scale(.98);
  box-shadow: 0 1px 4px rgba(30,50,80,.04);
}

.projet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.projet-name {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(20,40,60,.9);
  line-height: 1.3;
}

.projet-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  color: rgba(30,50,70,.4);
  flex-wrap: wrap;
}

.projet-prix {
  margin-left: auto;
  font-weight: 600;
  color: rgba(20,40,60,.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Statut pills ───────────────────────────────────── */

.statut-pill {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.statut-brouillon {
  background: rgba(213,112,10,0.12);
  color: var(--orange-dark);
}

.statut-encours {
  background: rgba(213,112,10,.12);
  color: var(--orange-dark);
}

.statut-livre {
  background: rgba(46,125,82,.13);
  color: var(--profit);
}

.statut-archive {
  background: rgba(30,50,70,.05);
  color: rgba(30,50,70,.3);
}

/* ─── Studio : empty state ───────────────────────────── */

.studio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px 120px;
  text-align: center;
  gap: 0;
}

.studio-empty .empty-icon {
  opacity: .18;
  color: rgba(20,40,60,1);
  margin-bottom: 18px;
}

.studio-empty .empty-title {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(30,50,70,.5);
  margin: 0 0 8px;
}

.studio-empty .empty-sub {
  font-size: .8rem;
  color: rgba(30,50,70,.32);
  line-height: 1.6;
  margin: 0 0 28px;
}

/* ─── Bouton action principale ───────────────────────── */

.btn-action {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--btn-radius-action, 14px);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(213,112,10,.35);
  transition: opacity .15s ease, transform .15s ease;
  text-align: center;
  letter-spacing: .01em;
}

.btn-action:active {
  opacity: .88;
  transform: scale(.98);
}

/* ─── Bottom sheet ───────────────────────────────────── */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,25,40,.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 190;
  opacity: 0;
  transition: opacity .28s ease;
}

.sheet-overlay.is-visible { opacity: 1; }

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: min(100%, 430px);
  background: rgba(238,244,250,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 -8px 40px rgba(30,50,80,.12);
  z-index: 200;
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  max-height: 92dvh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(30,50,70,.18);
  border-radius: 2px;
  margin: 10px auto 0;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 0;
}

.sheet-title {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(20,40,60,.9);
  margin: 0;
}

/* ─── Form dans le sheet ─────────────────────────────── */
/* Les <input>, <select>, <label> héritent des styles globaux de styles.css */

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sheet-submit {
  margin-top: 4px;
  margin-bottom: 20px;
}

/* ─── Module Projet — sélecteur + sous-onglets ───────── */

.projet-module {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
}

.projet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px 120px;
  text-align: center;
  gap: 0;
}

.projet-empty .empty-icon {
  opacity: .18;
  color: rgba(20,40,60,1);
  margin-bottom: 18px;
}

.projet-empty .empty-title {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(30,50,70,.5);
  margin: 0 0 8px;
}

.projet-empty .empty-sub {
  font-size: .8rem;
  color: rgba(30,50,70,.32);
  line-height: 1.6;
  margin: 0 0 28px;
}

/* Carrousel de chips — sélecteur projet */
.projet-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 16px;
  margin: 0 -16px;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.projet-chips-scroll::-webkit-scrollbar {
  display: none;
}

.projet-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 99px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.projet-chip.is-active {
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border-color: rgba(213,112,10,0.3);
  box-shadow: 0 4px 16px rgba(213,112,10,0.35);
}

.chip-nom {
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,40,60,0.85);
  white-space: nowrap;
}

.chip-client {
  font-size: 10px;
  color: rgba(30,50,70,0.45);
  white-space: nowrap;
}

.projet-chip.is-active .chip-nom,
.projet-chip.is-active .chip-client {
  color: #fff;
}

.projet-subtabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.2);
  margin-top: 10px;
}

.projet-subtab {
  position: relative;
  min-height: 32px;
  background: transparent;
  color: rgba(30,50,70,.3);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .2s ease;
}

.projet-subtab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border-radius: 99px;
  transition: width .2s ease;
}

.projet-subtab.is-active {
  color: rgba(20,40,60,.85);
}

.projet-subtab.is-active::after {
  width: 100%;
}

/* ─── Sous-vue Offre ─────────────────────────────────── */

.offre-view {
  padding: 12px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offre-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offre-section-title {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.offre-infos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.offre-infos-text { min-width: 0; }

.offre-nom {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(20,40,60,.9);
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}

.offre-meta {
  font-size: .74rem;
  color: rgba(30,50,70,.4);
  margin: 0;
  line-height: 1.5;
}

/* ── Checklist — ajout inline (offre) ───────────────── */

.checklist-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(30,50,70,.07);
}

.checklist-add-input {
  flex: 1;
  /* hérite des styles input globaux */
}

.checklist-add-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border: none;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(213,112,10,.3);
  transition: opacity .15s, transform .15s;
}
.checklist-add-btn:active { opacity: .82; transform: scale(.9); }

.checklist-delete {
  font-size: 15px;
  color: rgba(192,48,48,.35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color .12s;
}
.checklist-delete:active { color: rgba(192,48,48,.85); }

/* Message si profil materiel vide */
.materiel-empty-hint {
  font-size: .8rem;
  color: rgba(30,50,70,.4);
  line-height: 1.7;
  padding: 4px 0 6px;
}

.btn-link-profil {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Profil — section matériel ───────────────────────── */

.materiel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.materiel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30,50,70,.06);
}
.materiel-item:last-child { border-bottom: none; }

.materiel-label {
  font-size: .85rem;
  color: rgba(20,40,60,.82);
  flex: 1;
  min-width: 0;
}

.materiel-item-empty {
  font-size: .78rem;
  color: rgba(30,50,70,.3);
  padding: 6px 0 4px;
}

.materiel-delete {
  font-size: 16px;
  color: rgba(192,48,48,.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.materiel-delete:active { color: rgba(192,48,48,.85); }

.materiel-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.materiel-add-input { flex: 1; }

/* ── Btn lien discret (Modifier dans offre) ──────────── */

.btn-link-edit {
  background: none;
  border: none;
  padding: 3px 0 0;
  font-size: .72rem;
  font-weight: 500;
  color: rgba(30,50,70,.35);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30,50,70,.2);
  letter-spacing: .01em;
}
.btn-link-edit:active { color: rgba(213,112,10,.8); }

/* Card taux implicite */
.taux-impl {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(30,50,70,.06);
  border: 1px solid rgba(30,50,70,.1);
  min-width: 78px;
  flex-shrink: 0;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}

.taux-impl-val {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(30,50,70,.45);
  line-height: 1.2;
}

.taux-impl-label {
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(30,50,70,.32);
  margin: 3px 0 0;
}

.taux-impl.is-profit { background: rgba(46,125,82,.1); border-color: rgba(46,125,82,.25); }
.taux-impl.is-profit .taux-impl-val { color: var(--profit); }

.taux-impl.is-warning { background: rgba(213,112,10,.1); border-color: rgba(213,112,10,.25); }
.taux-impl.is-warning .taux-impl-val { color: var(--orange-dark); }

.taux-impl.is-loss { background: rgba(192,48,48,.08); border-color: rgba(192,48,48,.2); }
.taux-impl.is-loss .taux-impl-val { color: var(--loss); }

/* ─── Quotas ─────────────────────────────────────────── */

.quota-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(30,50,70,.06);
}

.quota-cat-row:last-of-type {
  border-bottom: 0;
}

.quota-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.quota-cat-label {
  font-size: .82rem;
  font-weight: 500;
  color: rgba(20,40,60,.8);
  flex: 1;
}

.quota-cat-row input[type="number"] {
  width: 62px;
  min-height: 38px;
  padding: 0 6px;
  text-align: center;
  flex-shrink: 0;
}

.quota-cat-row select {
  width: 68px;
  min-height: 38px;
  padding: 0 4px;
  font-size: .76rem;
  flex-shrink: 0;
}

.quota-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
  border-top: 1px solid rgba(30,50,70,.08);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(30,50,70,.5);
}

.quota-total-bar strong {
  color: rgba(20,40,60,.85);
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

/* ─── Checklist ──────────────────────────────────────── */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.checklist-item {
  border-bottom: 1px solid rgba(30,50,70,.06);
}

.checklist-item:last-child {
  border-bottom: 0;
}

.checklist-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  color: rgba(20,40,60,.8);
  font-size: .84rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.checklist input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.checklist-item.is-checked .checklist-label {
  color: rgba(30,50,70,.3);
  text-decoration: line-through;
}

/* ─── Module Temps — chronomètre ────────────────────── */

.temps-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 120px;
  overflow-x: hidden;
  max-width: 100%;
  transition: background 0.5s ease;
}

.chrono-card {
  padding: 20px 16px;
  text-align: center;
  margin: 0 16px;
  overflow: hidden;
}

.chrono-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30,50,70,0.4);
  margin: 0 0 8px;
  transition: color 0.2s ease;
}

.chrono-display {
  font-size: clamp(2.4rem, 10vw, 3rem);
  font-weight: 200;
  color: rgba(20,40,60,0.9);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 0 0 8px;
  text-align: center;
  width: 100%;
  display: block;
}

.chrono-sub {
  font-size: 11px;
  color: rgba(30,50,70,0.3);
  margin: 0;
  min-height: 16px;
}

/* ─── Barres de progression quotas (Temps) ───────────── */

.quota-bars {
  padding: 12px 16px 0;
}

.quota-bars-title {
  font-size: 9px;
  font-weight: 700;
  color: rgba(30,50,70,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}

.quota-bars-empty {
  font-size: 11px;
  color: rgba(30,50,70,0.3);
  margin: 0;
  padding-bottom: 4px;
}

.quota-row {
  margin-bottom: 10px;
}

.quota-row-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.quota-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* .quota-cat-label déjà défini (partagé Offre) */

.quota-time {
  font-size: 11px;
  color: rgba(30,50,70,0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quota-time.is-over {
  color: var(--red-soft);
  font-weight: 600;
}

.quota-track {
  height: 5px;
  background: rgba(30,50,70,0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}

.quota-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
  max-width: 100%;
}

.quota-fill.is-over {
  background: var(--red-soft) !important;
}

/* Chips catégories chrono */
.cat-chips-scroll {
  margin-top: 12px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  width: 100%;
  scrollbar-width: none;
  padding: 4px 16px 8px;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.cat-chips-scroll::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,40,60,0.7);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.cat-chip.is-active {
  color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.chip-label {
  display: block;
}

.chip-pct {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1;
}

.chip-pct.is-over {
  color: var(--red-soft);
  opacity: 1;
  font-weight: 700;
}

/* Boutons chrono */
.chrono-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 0 16px;
}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px 16px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  color: rgba(30,50,70,0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .15s ease;
}

.btn-secondary:active { opacity: .8; }

/* Stats mini */
.chrono-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 0 16px;
}

.stat-mini {
  padding: 10px 8px;
  text-align: center;
}

.stat-mini-label {
  font-size: 8px;
  font-weight: 700;
  color: rgba(30,50,70,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 3px;
}

.stat-mini-val {
  font-size: 15px;
  font-weight: 600;
  color: rgba(20,40,60,0.85);
  font-variant-numeric: tabular-nums;
  margin: 0;
  transition: color .2s ease;
}

.stat-mini-val.is-good { color: #5AAE82; }
.stat-mini-val.is-warn { color: #E09050; }
.stat-mini-val.is-bad  { color: var(--red-soft); }

/* Sessions historique */
.sessions-section {
  padding: 4px 16px 0;
}

.sessions-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sessions-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(30,50,70,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.btn-text-danger {
  font-size: 11px;
  font-weight: 600;
  color: var(--loss);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}

.session-row:last-child { border-bottom: 0; }

.session-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.session-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.session-cat {
  font-size: 12px;
  font-weight: 500;
  color: rgba(20,40,60,0.85);
}

.session-date {
  font-size: 10px;
  color: rgba(30,50,70,0.35);
}

.session-duree {
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,40,60,0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.session-delete {
  font-size: 16px;
  line-height: 1;
  color: rgba(192,48,48,0.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.session-delete:active { color: rgba(192,48,48,0.8); }

/* ─── Module Profil ──────────────────────────────────── */

.profil-view {
  padding: 16px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profil-section {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profil-section-title {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px;
}

.profil-section-hint {
  font-size: .78rem;
  color: rgba(30,50,70,.35);
  margin: -6px 0 0;
  line-height: 1.5;
}

/* Ligne simple label + valeur dans profil */
.profil-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
}
.profil-row:last-child { border-bottom: none; }

.profil-row-label {
  font-size: .82rem;
  color: rgba(20,40,60,.7);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.profil-row-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  color: rgba(20,40,60,.40);
  flex-shrink: 0;
}

.profil-row-value input[type="number"] {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(20,40,60,0.12);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .84rem;
  color: rgba(20,40,60,.85);
}

/* Tarification — inputs et unités alignés */
.profil-tarif-input {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  font-size: 16px !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(20,40,60,0.12);
  border-radius: 6px;
  color: rgba(20,40,60,.85);
}
.profil-tarif-unit {
  width: 44px !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  color: rgba(0,0,0,0.4) !important;
  text-align: left;
}

/* profil-tarif-row neutralisé — liste verticale simple */
.profil-tarif-row {
  display: contents;
}

/* Aperçu taux calculés */
.taux-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
}

.taux-preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.taux-preview-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}

.taux-preview-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(20,40,60,.8);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1;
}

.taux-preview-value.is-cible {
  color: var(--profit);
}

.taux-preview-sep {
  width: 1px;
  height: 34px;
  background: rgba(30,50,70,.12);
  margin: 0 10px;
}

/* Bouton destructif */
.btn-destructive {
  width: 100%;
  padding: 13px 20px;
  background: rgba(192,48,48,.07);
  border: 1px solid rgba(192,48,48,.2);
  border-radius: var(--btn-radius-destructive, 8px);
  color: var(--loss);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  text-align: center;
  letter-spacing: .01em;
}

.btn-destructive:active {
  opacity: .8;
  transform: scale(.98);
}

/* ══════════════════════════════════════════════════════
   SOUS-VUE FRAIS — Phase 7
   ══════════════════════════════════════════════════════ */

.frais-view {
  padding: 12px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card totale */
.frais-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
}

.frais-total-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.frais-total-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(20,40,60,.85);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1;
}

/* Liste */
.frais-list {
  display: flex;
  flex-direction: column;
}

.frais-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(30,50,70,.06);
}

.frais-row:last-child { border-bottom: none; }

.frais-info {
  flex: 1;
  min-width: 0;
}

.frais-label {
  font-size: .85rem;
  font-weight: 500;
  color: rgba(20,40,60,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frais-date {
  font-size: .72rem;
  color: rgba(30,50,70,.35);
  margin-top: 2px;
}

.frais-montant {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(20,40,60,.75);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.frais-delete {
  font-size: 16px;
  line-height: 1;
  color: rgba(192,48,48,.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.frais-delete:active { color: rgba(192,48,48,.8); }

.frais-empty {
  text-align: center;
  padding: 28px 16px;
  color: rgba(30,50,70,.28);
  font-size: .78rem;
}

/* ══════════════════════════════════════════════════════
   SOUS-VUE BILAN — Phase 7
   ══════════════════════════════════════════════════════ */

.bilan-view {
  padding: 12px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bilan-section {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bilan-section-title {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px;
}

.bilan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bilan-row-label {
  font-size: .82rem;
  color: rgba(30,50,70,.55);
  flex: 1;
}

.bilan-row-value {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(20,40,60,.82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bilan-row-value.is-profit  { color: var(--profit); }
.bilan-row-value.is-warn    { color: #E09050; }
.bilan-row-value.is-loss    { color: var(--loss); }
.bilan-row-value.is-neutral { color: rgba(20,40,60,.45); }

.bilan-divider {
  height: 1px;
  background: rgba(30,50,70,.08);
}

.bilan-row.is-total .bilan-row-label {
  font-weight: 600;
  color: rgba(20,40,60,.75);
}
.bilan-row.is-total .bilan-row-value {
  font-size: .94rem;
}

/* Barre de performance */
.bilan-bar-wrap {
  background: rgba(30,50,70,.07);
  border-radius: 6px;
  height: 5px;
  overflow: hidden;
  margin-top: 4px;
}

.bilan-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .5s cubic-bezier(.25,.8,.25,1);
}
.bilan-bar-fill.is-profit  { background: linear-gradient(90deg,#3A9E68,var(--profit)); }
.bilan-bar-fill.is-warn    { background: linear-gradient(90deg,#E8A860,var(--orange-warn)); }
.bilan-bar-fill.is-loss    { background: linear-gradient(90deg,#D85050,var(--loss)); }
.bilan-bar-fill.is-neutral { background: rgba(30,50,70,.22); }

/* Card verdict */
.bilan-verdict {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

/* Bouton Clôturer */
#btnCloturerProjet {
  display: block;
  margin: 0 16px 16px;
  width: calc(100% - 32px);
}

.bilan-verdict-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
}

.bilan-verdict-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 4px 0 2px;
}

.bilan-verdict-icon.is-profit  { background: rgba(46,125,82,.12);  color: var(--profit); }
.bilan-verdict-icon.is-warn    { background: rgba(224,144,80,.14); color: var(--orange-warn); }
.bilan-verdict-icon.is-loss    { background: rgba(192,48,48,.1);   color: var(--loss); }
.bilan-verdict-icon.is-neutral { background: rgba(30,50,70,.07);   color: rgba(30,50,70,.4); }

.bilan-verdict-text {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.bilan-verdict-text.is-profit  { color: var(--profit); }
.bilan-verdict-text.is-warn    { color: var(--orange-warn); }
.bilan-verdict-text.is-loss    { color: var(--loss); }
.bilan-verdict-text.is-neutral { color: rgba(20,40,60,.5); }

/* Scores plaisir/stress */
.bilan-score-stars {
  display: flex;
  gap: 2px;
}

.bilan-score-star {
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  color: rgba(30,50,70,0.18);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color .1s;
}

.bilan-score-star.is-active {
  color: var(--orange);
}

/* Conseil clôture */
.bilan-conseil {
  border-left: 3px solid rgba(58,122,191,0.35);
}
.bilan-conseil-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(20,40,60,0.72);
  margin: 0;
}

/* Badge projet terminé */
.bilan-termine-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  background: rgba(46,125,82,.1);
  border: 1px solid rgba(46,125,82,.22);
  border-radius: 14px;
  color: var(--profit);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 16px;
}

/* ════════════════════════════════════════════════════════
   UTILITAIRES
   ════════════════════════════════════════════════════════ */

.is-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   STUDIO — carte projet (div cliquable + bouton menu)
   ════════════════════════════════════════════════════════ */

.projet-card:focus-visible {
  outline: 2px solid rgba(245,147,50,.7);
  outline-offset: 2px;
}

/* Statut pill — couleurs via inline styles depuis STATUTS */

/* Bouton menu "···" sur la carte */
.projet-menu-btn {
  position: absolute;
  bottom: 6px;
  right: 4px;
  width: 32px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(30,50,70,0.35);
  font-size: .9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s;
}
.projet-menu-btn:active { color: rgba(30,50,70,0.70); }

/* Menu contextuel projet */
.projet-context-menu {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(20,40,60,0.18);
  overflow: hidden;
  min-width: 180px;
}
.ctx-item {
  display: block;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(30,50,70,0.06);
  font-size: .9rem;
  font-weight: 500;
  color: rgba(20,40,60,0.85);
  cursor: pointer;
  transition: background .12s;
}
.ctx-item:last-child { border-bottom: none; }
.ctx-item:active     { background: rgba(30,50,70,0.06); }
.ctx-item--warn      { color: var(--orange-warn); }
.ctx-item--danger    { color: var(--loss); }

/* ════════════════════════════════════════════════════════
   OFFRE — Photos commandées
   ════════════════════════════════════════════════════════ */

.photos-cmd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.photos-cmd-label {
  font-size: .78rem;
  color: rgba(30,50,70,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.photos-cmd-input {
  width: 72px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(30,50,70,0.12);
  background: rgba(255,255,255,0.5);
  font-size: .85rem;
  text-align: center;
  color: rgba(20,40,60,0.85);
}

/* ════════════════════════════════════════════════════════
   BILAN — Photos livrées
   ════════════════════════════════════════════════════════ */

.bilan-photos-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bilan-photos-input {
  width: 68px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(30,50,70,0.12);
  background: rgba(255,255,255,0.5);
  font-size: .85rem;
  text-align: center;
  color: rgba(20,40,60,0.85);
}
.bilan-photos-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
}
.bilan-photos-badge.is-warn    { background: rgba(224,144,80,.14); color: var(--orange-warn); }
.bilan-photos-badge.is-neutral { background: rgba(30,50,70,.07);   color: rgba(30,50,70,.5); }

.bilan-delta-row {
  padding-top: 0;
  margin-top: -4px;
}
.bilan-delta {
  font-size: .80rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(30,50,70,.06);
  color: rgba(30,50,70,.5);
}
.bilan-delta.is-warn    { background: rgba(224,144,80,.13); color: var(--orange-warn); }
.bilan-delta.is-neutral { background: rgba(30,50,70,.07);   color: rgba(30,50,70,.45); }

/* ════════════════════════════════════════════════════════
   PROFIL — toggle simple / avancé
   ════════════════════════════════════════════════════════ */

.profil-mode-toggle {
  display: flex;
  background: rgba(30,50,70,0.07);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 16px;
}
.profil-mode-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(30,50,70,0.45);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.profil-mode-btn.is-active {
  background: rgba(255,255,255,0.85);
  color: rgba(20,40,60,0.9);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(20,40,60,0.1);
}

/* ════════════════════════════════════════════════════════
   MENU SHEET — actions projet (bottom sheet contextuel)
   ════════════════════════════════════════════════════════ */

.menu-sheet-actions {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 0;
  gap: 4px;
}
.menu-sheet-item {
  display: block;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(20,40,60,0.85);
  cursor: pointer;
  transition: opacity .12s;
}
.menu-sheet-item:active              { opacity: .75; }
.menu-sheet-item--warn               { color: var(--orange-dark); }
.menu-sheet-item--danger             { color: var(--loss); }

/* ════════════════════════════════════════════════════════
   PRÉPARER — Prix conseillé
   ════════════════════════════════════════════════════════ */

.prix-conseil-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prix-suggestion {
  background: rgba(46,125,82,.07);
  border: 1px solid rgba(46,125,82,.2);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.suggestion-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--profit);
  margin: 0;
  letter-spacing: .01em;
}

.suggestion-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(20,40,60,.9);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.2;
}

.suggestion-detail {
  font-size: .72rem;
  color: rgba(30,50,70,.45);
  margin: 0;
  line-height: 1.5;
}

.btn-suggestion-apply {
  margin-top: 4px;
  padding: 8px 14px;
  background: rgba(46,125,82,.1);
  border: 1px solid rgba(46,125,82,.3);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--profit);
  cursor: pointer;
  align-self: flex-start;
  transition: background .12s;
}
.btn-suggestion-apply:active { background: rgba(46,125,82,.18); }

.prix-calcul {
  background: rgba(58,122,191,.07);
  border: 1px solid rgba(58,122,191,.2);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calcul-label {
  font-size: .72rem;
  color: #3A7ABF;
  margin: 0;
  font-weight: 500;
}

.calcul-val {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(20,40,60,.88);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ════════════════════════════════════════════════════════
   PRÉPARER — Feuille de route / Shots
   ════════════════════════════════════════════════════════ */

.feuille-route {
  /* hérite .offre-section + .glass-card */
}

.shots-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 8px 0 4px;
}

.shot-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(30,50,70,.06);
}
.shot-row:last-child { border-bottom: none; }

.shot-check {
  width: 17px;
  min-height: 17px;
  height: 17px;
  border-radius: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

.shot-label {
  flex: 1;
  font-size: .83rem;
  color: rgba(20,40,60,.82);
  line-height: 1.4;
  min-width: 0;
  transition: color .15s, text-decoration .15s;
}
.shot-label.is-done {
  color: rgba(30,50,70,.3);
  text-decoration: line-through;
}

.shot-delete {
  font-size: 15px;
  line-height: 1;
  color: rgba(192,48,48,.35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 3px;
  flex-shrink: 0;
  transition: color .12s;
}
.shot-delete:active { color: rgba(192,48,48,.8); }

.shot-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(30,50,70,.07);
}

.btn-shot-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(213,112,10,.3);
  transition: opacity .15s, transform .15s;
}
.btn-shot-add:active { opacity: .82; transform: scale(.9); }

/* ════════════════════════════════════════════════════════
   STUDIO — Hero card (projet en cours)
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   STUDIO — Redesign fond blanc + hiérarchie forte
   ════════════════════════════════════════════════════════ */

/* Fond blanc uniquement sur Studio */
body.studio-active main,
body.studio-active #viewContainer {
  background: #fff;
}

.studio-view {
  background: #fff;
  min-height: 100%;
  padding-bottom: 80px;
}

/* ── Métriques ── */
.studio-metrics {
  padding: 16px 16px 0;
}

.studio-taux-wrap {
  text-align: center;
  padding: 8px 0 16px;
}

.studio-taux-num {
  font-size: 48px;
  font-weight: 200;
  letter-spacing: -3px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

.studio-taux-sub {
  font-size: 11px;
  color: rgba(20,40,60,0.35);
  margin-top: 5px;
  letter-spacing: .02em;
}

.studio-taux-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.studio-taux-bar-bg {
  flex: 1;
  height: 3px;
  background: rgba(20,40,60,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.studio-taux-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--profit), #5AAE82);
  transition: width 0.6s ease;
}

.studio-taux-bar-lbl {
  font-size: 9px;
  color: rgba(20,40,60,0.3);
  white-space: nowrap;
}

.studio-ca-row {
  display: flex;
  margin-bottom: 16px;
}

.studio-ca-cell {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}

.studio-ca-cell + .studio-ca-cell {
  border-left: 0.5px solid rgba(20,40,60,0.08);
}

.studio-ca-lbl {
  font-size: 9px;
  color: rgba(20,40,60,0.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 3px;
}

.studio-ca-val {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-dark);
}

.studio-ca-sub {
  font-size: 9px;
  color: rgba(20,40,60,0.3);
  margin-top: 2px;
}

.studio-divider {
  height: 0.5px;
  background: rgba(20,40,60,0.07);
  margin: 0 16px;
}

/* ── Action card navy ── */
.studio-action-card {
  margin: 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-dark);
}

/* Variante verte — offre acceptée */
.studio-action-ready {
  background: linear-gradient(135deg, #1a3328 0%, #22503a 100%);
}
.studio-action-ready .sac-eyebrow {
  color: rgba(90,174,130,0.85);
}

.sac-body { padding: 16px; }

.sac-eyebrow {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}

.sac-name {
  font-size: 20px;
  color: #fff;
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 4px;
}

.sac-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}

.sac-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sac-chip {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}

.sac-chip strong {
  color: #fff;
  font-weight: 500;
}

.sac-btn {
  width: 100%;
  padding: 12px;
  background: var(--orange);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sac-btn:active { opacity: .85; }

/* ── Next card ── */
.studio-next-card {
  margin: 16px;
  border-radius: 12px;
  background: rgba(20,40,60,0.03);
  border: 0.5px solid rgba(20,40,60,0.1);
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.studio-next-card:active { opacity: .8; }

.snc-label {
  font-size: 9px;
  color: rgba(20,40,60,0.35);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}

.snc-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-dark);
  margin-bottom: 2px;
}

.snc-sub {
  font-size: 11px;
  color: rgba(20,40,60,0.45);
}

.snc-date {
  font-size: 11px;
  color: #3A7ABF;
  margin-top: 6px;
  font-weight: 500;
}

/* ── État vide / premier projet ── */
.studio-empty-action {
  margin: 16px;
  padding: 20px;
  text-align: center;
}

.sea-text {
  font-size: 13px;
  color: rgba(20,40,60,0.4);
  line-height: 1.6;
  margin-bottom: 16px;
}

.studio-empty-first {
  padding: 0 16px 16px;
}

/* ── Liste en attente ── */
.studio-waiting { padding: 0 16px; }

.sw-title {
  font-size: 9px;
  color: rgba(20,40,60,0.3);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 8px 0 6px;
}

.sw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.sw-item:last-child { border-bottom: none; }
.sw-item:active { opacity: .7; }

.sw-delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: #C03030;
  border: none;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.sw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sw-info {
  flex: 1;
  min-width: 0;
}

.sw-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-sub {
  font-size: 10px;
  color: rgba(20,40,60,0.4);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-right {
  text-align: right;
  flex-shrink: 0;
  padding-bottom: 22px;
}

.sw-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}

.sw-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 2px;
  display: inline-block;
}

/* ── Items terminés ── */
.sw-item-termine {
  opacity: 0.7;
}
.sw-badge-termine {
  background: rgba(20,40,60,0.06);
  color: rgba(20,40,60,0.4);
}

/* ── Accordéon Terminés ── */
.studio-termines {
  padding: 0 16px;
  margin-top: 8px;
}
.studio-termines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  border-top: 0.5px solid rgba(20,40,60,0.08);
  -webkit-tap-highlight-color: transparent;
}
.studio-termines-label {
  font-size: 11px;
  color: rgba(20,40,60,0.4);
  font-weight: 500;
}
.studio-termines-chevron {
  font-size: 13px;
  color: rgba(20,40,60,0.3);
  transition: transform 0.2s;
  display: inline-block;
}
.studio-termines-chevron.open {
  transform: rotate(90deg);
}
.studio-termines-list {
  padding-bottom: 8px;
}

/* ── Bottom sheet taux ── */
.taux-sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.07);
  font-size: .9rem;
  color: rgba(20,40,60,.75);
}

.taux-sheet-row strong {
  font-weight: 700;
  color: var(--ink-dark);
}

.taux-sheet-hint {
  font-size: .8rem;
  color: rgba(20,40,60,.4);
  margin-top: 12px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   BILAN — Clôture animée (3 phases : countdown → reveal → deploy)
   ════════════════════════════════════════════════════════ */

/* ── Overlay sombre ── */
.cloture-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #0a1220;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.32,.72,0,1);
}
.cloture-overlay.is-visible {
  transform: translateY(0);
}

/* ── Phase 1 : compte à rebours ── */
.phase-countdown {
  text-align: center;
}
.countdown-ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
}
.countdown-num {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: 200;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
}

/* ── Phase 2 : révélation du taux ── */
.phase-reveal {
  display: none;
  text-align: center;
  width: 100%;
  padding: 0 32px;
}
.reveal-num {
  font-size: 4rem;
  font-weight: 200;
  color: #fff;
  line-height: 1;
  transition: color 0.5s ease;
  font-variant-numeric: tabular-nums;
}
.reveal-unit {
  font-size: 1.1rem;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
}
.reveal-verdict {
  font-size: .88rem;
  font-weight: 500;
  margin-top: 18px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.reveal-verdict.visible {
  opacity: 1;
}

/* ── Phase 3 : bilan déployé ── */
.phase-deploy {
  display: none;
  width: 100%;
  padding: 0 20px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.deploy-taux {
  text-align: center;
  margin-bottom: 18px;
}
.deploy-taux-num {
  font-size: 2.2rem;
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.deploy-taux-label {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 4px;
}
.deploy-card {
  background: rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.deploy-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.deploy-card-label {
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.deploy-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  padding: 3px 0;
}
.deploy-val {
  color: rgba(255,255,255,.9);
  font-weight: 500;
}
.deploy-val.green  { color: #5AAE82; }
.deploy-val.orange { color: var(--orange); }
.deploy-val.red    { color: var(--red-soft); }

/* ── Bouton retour ── */
.deploy-conseil {
  margin: 10px 0 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: .84rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.deploy-conseil.visible {
  opacity: 1;
}

.btn-retour-studio {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-retour-studio.visible {
  opacity: 1;
}

/* ── Confetti ── */
.confetti-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.confetto {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  opacity: 0;
}
@keyframes confetto-fall-0 {
  0%   { opacity: 1; top: -10px; transform: rotate(0deg)   translateX(0);    }
  100% { opacity: 0; top: 110%;  transform: rotate(360deg) translateX(20px);  }
}
@keyframes confetto-fall-1 {
  0%   { opacity: 1; top: -10px; transform: rotate(0deg)    translateX(0);    }
  100% { opacity: 0; top: 110%;  transform: rotate(-270deg) translateX(-30px);}
}
@keyframes confetto-fall-2 {
  0%   { opacity: 1; top: -10px; transform: rotate(0deg)   translateX(0);    }
  100% { opacity: 0; top: 110%;  transform: rotate(180deg) translateX(10px);  }
}

/* ════════════════════════════════════════════════════════
   UTILITAIRE — bouton texte discret
   ════════════════════════════════════════════════════════ */

.btn-text-muted {
  display: block;
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(30,50,70,.4);
  cursor: pointer;
  text-align: center;
  transition: color .12s;
}
.btn-text-muted:active { color: rgba(30,50,70,.7); }

/* ════════════════════════════════════════════════════════
   AUTOCOMPLÉTION CLIENT — dropdown
   ════════════════════════════════════════════════════════ */

.client-dropdown {
  background: rgba(245,248,252,.97);
  border: 1px solid rgba(30,50,70,.12);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20,40,60,.12);
  overflow: hidden;
  margin-top: 4px;
  z-index: 200;
}

.client-dropdown[hidden] { display: none; }

.client-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(30,50,70,.06);
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.client-dropdown-item:last-child { border-bottom: none; }
.client-dropdown-item:active { background: rgba(213,112,10,.07); }

.dropdown-nom {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(20,40,60,.88);
}

.dropdown-ent {
  font-size: .74rem;
  color: rgba(30,50,70,.4);
}

/* ════════════════════════════════════════════════════════
   MODULE CONTACTS
   ════════════════════════════════════════════════════════ */

.contacts-view {
  padding: 8px 0 88px;
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}

.contact-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.contact-card-main { flex: 1; min-width: 0; }

.contact-nom {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(20,40,60,.9);
  margin: 0;
  overflow-wrap: anywhere;
}

.contact-entreprise {
  font-size: .76rem;
  color: rgba(30,50,70,.5);
  margin: 2px 0 0;
}

.contact-menu-btn {
  font-size: 1rem;
  color: rgba(30,50,70,.3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  letter-spacing: .05em;
  flex-shrink: 0;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .12s;
  align-self: flex-start;
}

.contact-link--tel {
  color: var(--profit);
  background: rgba(46,125,82,.08);
}
.contact-link--tel:active { background: rgba(46,125,82,.16); }

.contact-link--email {
  color: #3A7ABF;
  background: rgba(58,122,191,.08);
}
.contact-link--email:active { background: rgba(58,122,191,.16); }

.contact-note {
  font-size: .76rem;
  color: rgba(30,50,70,.45);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

.contact-projets-count {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(30,50,70,.3);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ════════════════════════════════════════════════════════
   ÉTATS VIDES — illustration + titre
   ════════════════════════════════════════════════════════ */

.empty-state-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 32px 40px;
  text-align: center;
}

.empty-state-icon {
  display: block;
  opacity: .9;
}

.empty-state-title {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(30,50,70,.4);
  margin: 0;
  max-width: 240px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   OFFRE — champ dateShooting inline
   ════════════════════════════════════════════════════════ */

.offre-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  flex-wrap: wrap;
}

.offre-date-label {
  font-size: .76rem;
  color: rgba(30,50,70,.5);
  font-weight: 500;
  white-space: nowrap;
}

.offre-date-input {
  font-size: .8rem;
  color: rgba(20,40,60,.8);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(30,50,70,.15);
  border-radius: 8px;
  padding: 5px 8px;
  flex: 1;
  min-width: 130px;
}

/* ════════════════════════════════════════════════════════
   ACCORDÉONS — Préparer & Profil
   ════════════════════════════════════════════════════════ */

.accordion {
  /* hérite du style glass-card — pas de padding supplémentaire */
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(30,50,70,.06);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}

.accordion-header:active {
  background: rgba(30,50,70,.04);
}

/* quand le body est ouvert, retire la border-bottom */
.accordion-header[aria-expanded="true"] {
  border-bottom-color: rgba(30,50,70,.08);
}

.accordion-title {
  font-size: .86rem;
  font-weight: 600;
  color: rgba(20,40,60,.82);
  flex: 1;
}

.accordion-badge {
  font-size: .72rem;
  color: rgba(30,50,70,.35);
  font-weight: 600;
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
}

.accordion-chevron {
  flex-shrink: 0;
  color: rgba(30,50,70,.3);
  transition: transform .25s ease;
  display: flex;
  align-items: center;
}

.accordion-chevron.is-open {
  transform: rotate(90deg);
}

.accordion-body {
  padding: 12px 16px 16px;
  overflow: hidden;
  /* animation d'ouverture via max-height */
  max-height: 2000px;
  transition: max-height .28s ease, padding .28s ease, opacity .2s ease;
  opacity: 1;
}

.accordion-body.is-closed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   MODULE FICHE OFFRE — Phase 2
   ════════════════════════════════════════════════════════ */

.fo-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 0;
  overflow-y: auto;
}

.fo-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  width: 100%;
}

.fo-section input,
.fo-section select,
.fo-section textarea,
.fo-section input[type="date"],
.fo-section input[type="number"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

.fo-section-title {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px;
}

.fo-section-hint {
  font-size: .78rem;
  color: rgba(30,50,70,.4);
  margin: -4px 0 0;
}

/* ── Quota row avec picker ── */
.fo-quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(30,50,70,.06);
}
.fo-quota-row:last-of-type { border-bottom: none; }

.fo-quota-label {
  font-size: .88rem;
  color: rgba(30,50,70,.75);
  font-weight: 500;
}

.time-picker-btn {
  min-width: 64px;
  padding: 6px 12px;
  background: rgba(245,165,80,.12);
  border: 1.5px solid rgba(245,165,80,.3);
  border-radius: 20px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(20,40,60,.8);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
}
.time-picker-btn:active { background: rgba(245,165,80,.22); }
.time-picker-btn.is-locked {
  opacity: .5;
  cursor: not-allowed;
}
.time-picker-btn.has-value {
  background: rgba(46,125,82,0.08);
  border-color: rgba(46,125,82,0.3);
  color: var(--profit);
}

.fo-quota-total {
  font-size: .8rem;
  color: rgba(30,50,70,.5);
  text-align: right;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(30,50,70,.08);
}
.fo-quota-total strong { color: rgba(20,40,60,.8); }

/* ── Picker roue bottom sheet ── */
.time-picker-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0;
  height: 220px;
  overflow: hidden;
  padding: 0 20px 0;
}

.time-picker-highlight {
  position: absolute;
  left: 20px; right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  background: rgba(245,165,80,.13);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.time-picker-col {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Padding so first/last items can center */
  padding: 88px 0;
}
.time-picker-col::-webkit-scrollbar { display: none; }

.time-picker-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(30,50,70,.35);
  transition: color .15s, font-weight .15s;
  cursor: pointer;
}
/* Mise en évidence de l'item centré — JS scroll snap */

/* Picker simple — une seule colonne */
.simple-picker-col {
  max-width: 200px;
}

.fo-section-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Radio groups */

.fo-radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.fo-radio-group--row {
  flex-direction: row;
}

.fo-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 500;
  color: rgba(20,40,60,.8);
  cursor: pointer;
  padding: 6px 12px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(30,50,70,.12);
  border-radius: 20px;
  transition: background .15s, border-color .15s;
}

.fo-radio input[type="radio"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.fo-radio:has(input:checked) {
  background: rgba(213,112,10,.1);
  border-color: rgba(213,112,10,.35);
}

/* Prix conseillé — double vue */

.fo-prix-conseil {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 12px;
  overflow: hidden;
}

.fo-prix-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
}

.fo-prix-item-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fo-prix-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(30,50,70,.5);
}

.fo-prix-val {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(20,40,60,.85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fo-prix-val.is-neutral { color: rgba(30,50,70,.3); }

.fo-prix-detail {
  font-size: .72rem;
  color: rgba(30,50,70,.38);
  line-height: 1.4;
}

.fo-prix-sep {
  height: 1px;
  background: rgba(30,50,70,.08);
  margin: 0;
}

/* Taux implicite dans offre */

.fo-taux-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.fo-taux {
  font-size: .86rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(30,50,70,.06);
  border: 1px solid rgba(30,50,70,.1);
  color: rgba(30,50,70,.45);
  transition: background .2s, border-color .2s, color .2s;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fo-taux.is-profit { background: rgba(46,125,82,.1); border-color: rgba(46,125,82,.25); color: var(--profit); }
.fo-taux.is-warning { background: rgba(213,112,10,.1); border-color: rgba(213,112,10,.25); color: var(--orange-dark); }
.fo-taux.is-loss { background: rgba(192,48,48,.08); border-color: rgba(192,48,48,.2); color: var(--loss); }

.fo-taux-label {
  font-size: .72rem;
  color: rgba(30,50,70,.38);
}

/* Frais total */

.fo-frais-total {
  font-size: .84rem;
  color: rgba(30,50,70,.65);
  text-align: right;
  padding-top: 4px;
  border-top: 1px solid rgba(30,50,70,.08);
}

.fo-frais-total strong {
  color: rgba(20,40,60,.9);
}

/* Perdiem hint */

.fo-perdiem-hint {
  font-size: .78rem;
  color: rgba(30,50,70,.5);
  background: rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
  line-height: 1.5;
}

.fo-perdiem-hint strong {
  color: rgba(20,40,60,.8);
}

/* Jours de shooting */
.fo-jours-row {
  border-bottom: 1px solid rgba(30,50,70,.06);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.fo-jours-input {
  width: 56px;
  text-align: center;
  padding: 6px 8px;
  font-size: .9rem;
  border: 1.5px solid rgba(30,50,70,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  font-variant-numeric: tabular-nums;
}

.fo-jours-hint {
  font-size: .75rem;
  color: rgba(30,50,70,.4);
  margin: -4px 0 6px;
  font-style: italic;
}

/* Toggle perdiem */
.fo-perdiem-toggle {
  margin-top: 8px;
  border-top: 1px dashed rgba(30,50,70,.1);
  padding-top: 6px;
}

.fo-perdiem-toggle-btn {
  font-size: .78rem;
  padding: 6px 0;
  color: rgba(30,50,70,.38);
  text-align: left;
}
.fo-perdiem-toggle-btn:active { color: rgba(30,50,70,.65); }

/* Acompte hint */

.fo-acompte-hint {
  font-size: .82rem;
  color: rgba(30,50,70,.5);
  text-align: right;
  margin: -4px 0 0;
  min-height: 1.2em;
}

/* ── Type de projet — pills scrollables ── */

.fo-type-projet-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 8px;
  margin: 0 -2px;
}
.fo-type-projet-scroll::-webkit-scrollbar { display: none; }

.fo-projet-pill {
  flex-shrink: 0;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 0.5px solid rgba(20,40,60,.15);
  color: rgba(20,40,60,.6);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.fo-projet-pill.is-on {
  background: #1a2e45;
  color: #fff;
  border-color: #1a2e45;
}

/* ── Quotas de temps — grille 3×2 ── */

.fo-quotas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.fo-quota-chip {
  background: rgba(255,255,255,.65);
  border: 0.5px solid rgba(20,40,60,.12);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.fo-quota-chip.has-value {
  background: rgba(46,125,82,.08);
  border-color: rgba(46,125,82,.3);
}
.fo-quota-chip.is-auto {
  cursor: default;
  opacity: .85;
}
.fo-quota-chip.is-auto.has-value {
  background: rgba(58,122,191,.08);
  border-color: rgba(58,122,191,.28);
}
.fo-quota-chip.is-auto.has-value .fo-quota-cat  { color: #3A7ABF; }
.fo-quota-chip.is-auto.has-value .fo-quota-val  { color: #3A7ABF; }

/* Shooting : orange sans valeur → vert avec valeur */
.fo-quota-chip[data-quota-cat="shooting"] {
  background: rgba(232,64,12,0.06);
  border-color: rgba(232,64,12,0.25);
}
.fo-quota-chip[data-quota-cat="shooting"] .fo-quota-val { color: #D4700A; }
.fo-quota-chip[data-quota-cat="shooting"] .fo-quota-cat { color: rgba(212,112,10,.75); }
.fo-quota-chip[data-quota-cat="shooting"].has-value {
  background: rgba(46,125,82,0.08);
  border-color: rgba(46,125,82,0.30);
}
.fo-quota-chip[data-quota-cat="shooting"].has-value .fo-quota-val { color: #2E7D52; }
.fo-quota-chip[data-quota-cat="shooting"].has-value .fo-quota-cat { color: rgba(46,125,82,.75); }

.fo-quota-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fo-quota-cat {
  font-size: 11px;
  font-weight: 500;
  color: rgba(20,40,60,.7);
}
.fo-quota-chip.has-value .fo-quota-cat { color: #2E7D52; }

.fo-quota-taux {
  font-size: 8px;
  color: rgba(20,40,60,.35);
  background: rgba(20,40,60,.05);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.fo-quota-chip.has-value .fo-quota-taux {
  color: rgba(46,125,82,.7);
  background: rgba(46,125,82,.1);
}

.fo-quota-val {
  font-size: 14px;
  font-weight: 500;
  color: rgba(20,40,60,.5);
}
.fo-quota-chip.has-value .fo-quota-val { color: #2E7D52; }

/* ── Frais estimés ── */

.fo-frais-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(20,40,60,.06);
}
.fo-frais-row:last-child { border-bottom: none; }

.fo-frais-label {
  font-size: 13px;
  color: rgba(20,40,60,.7);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fo-frais-taux {
  font-size: 10px;
  color: rgba(20,40,60,.35);
  background: rgba(20,40,60,.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.fo-frais-input {
  width: 80px;
  text-align: right;
  background: rgba(255,255,255,.65);
  border: 0.5px solid rgba(20,40,60,.12);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 16px;
  color: #1a2e45;
}
.fo-frais-input.has-value {
  background: rgba(46,125,82,.06);
  border-color: rgba(46,125,82,.25);
  color: #2E7D52;
}

.fo-frais-toggle {
  font-size: 12px;
  color: var(--orange-dark, #D4700A);
  padding: 6px 0 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Toggles frais extra (modèle / location / assistant) */
.fo-frais-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 2px;
}
.fo-frais-toggle-pill {
  font-size: .76rem;
  font-weight: 600;
  color: rgba(30,50,70,.55);
  background: rgba(30,50,70,.06);
  border: 1px dashed rgba(30,50,70,.20);
  border-radius: 99px;
  padding: 4px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.fo-frais-toggle-pill:active {
  background: rgba(30,50,70,.10);
}
.fo-frais-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 0.5px solid rgba(20,40,60,.06);
}
.fo-frais-extra-row.is-hidden {
  display: none;
}
.fo-frais-label-input {
  flex: 1;
  width: auto;
  min-width: 0;
  background: rgba(255,255,255,.55);
  border: 0.5px solid rgba(20,40,60,.12);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 16px;
  color: #1a2e45;
}
.fo-frais-label-input::placeholder {
  color: rgba(30,50,70,.35);
}
/* Override : empêche la règle .fo-section input[type="number"] {width:100%!important}
   (spécificité 0,2,1) d'écraser le layout flex des rows frais (label + montant côte à côte).
   Ajout de .fo-section dans le sélecteur → spécificité (0,3,0) qui l'emporte. */
.fo-section .fo-frais-extra-row .fo-frais-label-input {
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.fo-section .fo-frais-extra-row .fo-frais-input {
  width: 80px !important;
  max-width: 80px !important;
  flex-shrink: 0 !important;
}

/* ── Stepper jours de shooting ── */

.fo-jours-stepper-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.fo-jours-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(30,50,70,.12);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}
.fo-jours-btn {
  width: 48px;
  height: 44px;
  font-size: 20px;
  background: rgba(255,255,255,.45);
  border: none;
  cursor: pointer;
  color: var(--ink, #1a2e45);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.fo-jours-btn:active:not(:disabled) { background: rgba(30,50,70,.08); }
.fo-jours-btn:disabled { opacity: 0.25; cursor: default; }
.fo-jours-val {
  min-width: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #2E7D52;
  border-left: 1px solid rgba(30,50,70,.1);
  border-right: 1px solid rgba(30,50,70,.1);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Simulateur — prix similaires ── */

.fo-sim-similaires {
  font-size: 11px;
  color: rgba(20,40,60,.5);
  padding: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 0.5px solid rgba(20,40,60,.07);
  margin-top: 6px;
}
.fo-sim-similaires strong {
  color: #1a2e45;
  font-size: 13px;
  font-weight: 600;
}

.fo-sim-no-data {
  font-size: 11px;
  color: rgba(20,40,60,.35);
  font-style: italic;
  padding: 8px 0 0;
  border-top: 0.5px solid rgba(20,40,60,.07);
  margin-top: 6px;
}

/* ── Pricing V2 — éléments génériques ── */

.fo-section-sub {
  font-size: .78rem;
  color: rgba(30,50,70,.4);
  margin: -6px 0 0;
}

.fo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}

.fo-label {
  font-size: .88rem;
  color: rgba(30,50,70,.75);
  font-weight: 500;
  flex: 1;
}

.fo-label-taux {
  font-size: .74rem;
  font-weight: 400;
  color: rgba(30,50,70,.45);
  margin-left: 4px;
}

/* ── Pills — type de shooting ── */

.fo-type-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fo-type-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(30,50,70,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: center;
}

.fo-type-pill.is-on {
  background: rgba(46,125,82,.08);
  border-color: rgba(46,125,82,.30);
}

.fo-type-pill-name {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(20,40,60,.8);
}

.fo-type-pill.is-on .fo-type-pill-name {
  color: #2E7D52;
}

.fo-type-pill-price {
  font-size: .72rem;
  color: rgba(30,50,70,.45);
  font-weight: 500;
}

.fo-type-pill.is-on .fo-type-pill-price {
  color: rgba(46,125,82,.70);
}

/* ── Pills — droits d'utilisation ── */

.fo-droits-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fo-droits-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(30,50,70,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: center;
}

.fo-droits-pill.is-on {
  background: rgba(46,125,82,0.08);
  border-color: rgba(46,125,82,0.30);
}

.fo-droits-name {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(20,40,60,.8);
}

.fo-droits-pill.is-on .fo-droits-name {
  color: #2E7D52;
}

.fo-droits-pct {
  font-size: .76rem;
  color: rgba(30,50,70,.5);
  font-weight: 500;
}

.fo-droits-pill.is-on .fo-droits-pct {
  color: rgba(46,125,82,0.70);
}

/* ── Simulateur de prix ── */

.fo-simulateur {
  background: rgba(20,40,60,.03);
  border-color: rgba(30,50,70,.08) !important;
}

.fo-sim-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: .86rem;
  color: rgba(30,50,70,.65);
  padding: 4px 0;
  border-bottom: 1px solid rgba(30,50,70,.05);
}

.fo-sim-row:last-of-type { border-bottom: none; }

.fo-sim-row span:last-child {
  font-weight: 600;
  color: rgba(20,40,60,.8);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fo-sim-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: .96rem;
  font-weight: 700;
  color: rgba(20,40,60,.9);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1.5px solid rgba(30,50,70,.1);
}

.fo-sim-total span:last-child {
  color: var(--orange-dark, #B8600A);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

/* Date envoi badge */

.fo-envoi-date {
  display: block;
  font-size: .78rem;
  color: rgba(58,122,191,.8);
  text-align: center;
  margin-bottom: 4px;
}

.fo-timestamps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 10px;
  font-size: 10px;
  color: rgba(20,40,60,0.4);
}

/* Bandeau verrouillé — offreacceptee */

.fo-locked-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(46,125,82,.15), rgba(90,174,130,.12));
  border: 1px solid rgba(46,125,82,.3);
  border-radius: 12px;
  color: #1e5c38;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.fo-locked-banner svg {
  flex-shrink: 0;
  color: var(--profit);
}

/* Champs désactivés en mode verrouillé */

.fo-view input:disabled,
.fo-view select:disabled,
.fo-view textarea:disabled {
  opacity: .55;
  background: rgba(30,50,70,.04) !important;
  cursor: not-allowed;
  -webkit-text-fill-color: rgba(20,40,60,.6);
}

/* ════════════════════════════════════════════════════════
   PHASE 3 — Terrain / Brief
   ════════════════════════════════════════════════════════ */

/* Contact avec liens cliquables */

.contact-icon-row {
  display: flex;
  gap: 8px;
  padding: 4px 0 8px;
  justify-content: flex-end;
}

.contact-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(30,50,70,.75);
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.contact-icon-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.contact-icon-btn:active {
  background: rgba(255,255,255,.8);
  transform: scale(.93);
}

/* Accordéon offre — récap read-only */

.offre-recap-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.offre-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(30,50,70,.06);
}

.offre-recap-row:last-child {
  border-bottom: none;
}

.offre-recap-row dt {
  font-size: .82rem;
  color: rgba(30,50,70,.5);
  font-weight: 500;
}

.offre-recap-row dd {
  font-size: .86rem;
  font-weight: 600;
  color: rgba(20,40,60,.85);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.brief-modifier-offre-btn {
  font-size: 12px;
  color: rgba(20,40,60,0.4);
  background: none;
  border: none;
  padding: 8px 0 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.brief-modifier-offre-btn:active {
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════
   PHASE 5 — Frais : comparaison estimé / réel
   ════════════════════════════════════════════════════════ */

.frais-cmp {
  padding: 0;
  overflow: hidden;
}

.frais-cmp-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(30,50,70,.08);
}

.frais-cmp-col {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(30,50,70,.38);
  text-transform: uppercase;
  letter-spacing: .07em;
  width: 72px;
  text-align: right;
}

.frais-cmp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(30,50,70,.05);
}

.frais-cmp-row:last-of-type {
  border-bottom: none;
}

.frais-cmp-cat {
  font-size: .82rem;
  color: rgba(30,50,70,.6);
}

.frais-cmp-est,
.frais-cmp-reel {
  font-size: .84rem;
  font-weight: 500;
  color: rgba(20,40,60,.7);
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.frais-cmp-reel.is-over {
  color: var(--orange-dark);
  font-weight: 600;
}

.frais-cmp-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  padding: 10px 14px;
  background: rgba(30,50,70,.04);
  border-top: 1px solid rgba(30,50,70,.08);
  font-size: .86rem;
  font-weight: 700;
  color: rgba(20,40,60,.85);
}

.frais-cmp-total > span:nth-child(2),
.frais-cmp-total > span:nth-child(3) {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.frais-cmp-total .is-over {
  color: var(--orange-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.frais-cmp-total .is-under {
  color: var(--profit);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.frais-cmp-total small {
  font-size: .7rem;
  font-weight: 600;
  opacity: .85;
}

/* ════════════════════════════════════════════════════════
   PHASE 4 — Chrono
   ════════════════════════════════════════════════════════ */

/* Ring SVG */

.chrono-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Grille catégories 2×3 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px;
}

.cat-grid-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 8px;
  background: rgba(255,255,255,.35);
  border: 1.5px solid rgba(30,50,70,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}

.cat-grid-cell.is-active {
  box-shadow: 0 2px 10px rgba(30,50,70,.1);
}

.cat-grid-cell:active {
  opacity: .8;
}

.cat-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.cat-grid-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(20,40,60,.8);
  line-height: 1.2;
}

.cat-grid-eff {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(20,40,60,.65);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cat-grid-pct {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(20,40,60,.38);
}
.cat-grid-pct.is-over {
  color: var(--red-soft);
}

.cat-grid-bar-wrap {
  height: 3px;
  background: rgba(30,50,70,.1);
  border-radius: 2px;
  overflow: hidden;
}

.cat-grid-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
  min-width: 0;
}

/* FAB Chrono flottant — Brief uniquement, au-dessus de la tab bar */
.fab-chrono {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
  right: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  background: rgba(20,40,60,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(20,40,60,.25);
  cursor: pointer;
  z-index: 150;
  transition: transform .15s ease, opacity .15s ease;
  letter-spacing: .01em;
}

.fab-chrono:active {
  transform: scale(.95);
  opacity: .85;
}

/* Bouton "Corriger une erreur" — discret, usage exceptionnel */

.fo-corriger-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.fo-corriger-btn {
  background: none;
  border: none;
  color: rgba(30,50,70,.35);
  font-size: .76rem;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .15s;
}

.fo-corriger-btn:active {
  color: rgba(180,50,30,.7);
}

/* ─── Frais km déplacement ───────────────────────────── */

.fo-km-row {
  margin-bottom: 4px;
}

.fo-km-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fo-km-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fo-km-input {
  flex: 1;
}

.fo-km-unit {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(30,50,70,.6);
  white-space: nowrap;
}

.fo-km-result {
  font-size: .82rem;
  color: rgba(30,50,70,.5);
  margin: 2px 0 12px;
}

.fo-km-result strong {
  color: rgba(20,40,60,.85);
}

/* ─── Type pills — bottom sheet nouveau projet ───────── */

.nf-type-label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(30,50,70,.5);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 8px;
}

.nf-type-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.nf-type-pills::-webkit-scrollbar { display: none; }

.nf-type-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid rgba(30,50,80,.12);
  background: rgba(255,255,255,0.5);
  font-size: .85rem;
  font-weight: 500;
  color: rgba(20,40,60,.75);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.nf-type-pill.is-active {
  background: linear-gradient(135deg, var(--orange), var(--accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(213,112,10,.35);
}

/* ─── Brief — sous-vue terrain ───────────────────────── */

.brief-client-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Lignes label / valeur dans l'accordéon Infos client */
.brief-client-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--sep, rgba(20,40,60,.07));
  gap: 12px;
  cursor: text;
}
.brief-client-row:last-of-type { border-bottom: none; }
.brief-client-label {
  font-size: 11px;
  color: rgba(30,50,70,.45);
  min-width: 90px;
  flex-shrink: 0;
}
.brief-client-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1a2e45);
  text-align: right;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  width: auto !important;
  max-width: none !important;
}

.brief-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .03em;
  box-shadow: 0 4px 12px rgba(213,112,10,.3);
}

.brief-client-meta {
  flex: 1;
  min-width: 0;
}

.brief-client-name {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(20,40,60,.9);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-project-label {
  font-size: .78rem;
  color: rgba(30,50,70,.45);
  margin: 0;
}

/* Temps estimés — ligne lecture seule */

.brief-lock-badge {
  font-size: .72rem;
  opacity: .65;
}

.brief-lock-hint {
  font-size: .78rem;
  color: rgba(30,50,70,.45);
  margin: 0 0 10px;
  font-style: italic;
}

.brief-temps-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(30,50,80,.05);
}

.brief-temps-row:last-of-type {
  border-bottom: none;
}

.brief-temps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brief-temps-label {
  flex: 1;
  font-size: .87rem;
  color: rgba(20,40,60,.8);
}

.brief-temps-val {
  font-size: .87rem;
  font-weight: 500;
  color: rgba(20,40,60,.9);
}

.brief-temps-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(30,50,80,.1);
  margin-top: 4px;
  font-size: .87rem;
  color: rgba(20,40,60,.7);
}

.brief-temps-total strong {
  color: rgba(20,40,60,.9);
}

.brief-empty {
  font-size: .83rem;
  color: rgba(30,50,70,.4);
  font-style: italic;
  margin: 4px 0;
}

/* ─── Bug 3 : date input overflow ─── */
.fo-section input[type="date"],
input[type="date"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.fo-section label:has(input[type="date"]) {
  display: block;
  width: 100%;
  overflow: hidden;
}
#foDateShooting {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Bug 5 : Notes terrain pleine largeur ─── */
#frNotes {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Bug 6 : Relation client pills ─── */
.relation-pills {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.relation-pill {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid rgba(30,50,84,.18);
  background: rgba(255,255,255,.45);
  color: rgba(20,40,60,.7);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.relation-pill.is-active {
  background: linear-gradient(135deg,var(--orange),var(--accent));
  border-color: transparent;
  color: #fff;
}

/* ─── Bug 7 : Mode facturation pills compactes ─── */
.facturation-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-top: 4px;
}
.facturation-pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
  border: 1.5px solid rgba(30,50,84,.18);
  background: rgba(255,255,255,.45);
  color: rgba(20,40,60,.7);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.facturation-pill.is-active {
  background: linear-gradient(135deg,var(--orange),var(--accent));
  border-color: transparent;
  color: #fff;
}

/* ════════════════════════════════════════════════════════
   MODULE INSIGHT — Phase 7a
   ════════════════════════════════════════════════════════ */

.insight-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.insight-content {
  flex: 1;
  padding: 12px 14px 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Sous-onglets ── */
.insight-subtabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.4);
  border-bottom: 0.5px solid rgba(20,40,60,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.insight-subtab {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: rgba(20,40,60,0.4);
  cursor: pointer;
}
.insight-subtab.is-active {
  background: rgba(245,147,50,0.15);
  color: var(--accent);
  font-weight: 500;
}

/* ── État vide ── */
.insight-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  gap: 16px;
  text-align: center;
}
.insight-empty-text {
  font-size: 14px;
  color: rgba(20,40,60,0.45);
  line-height: 1.5;
}

/* ── Bientôt disponible ── */
.insight-soon {
  padding: 60px 32px;
  text-align: center;
  font-size: 14px;
  color: rgba(20,40,60,0.35);
}

/* ── Section générique ── */
.insight-section {
  border-radius: 14px;
  padding: 14px;
}
.insight-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(20,40,60,0.4);
  margin: 0 0 10px;
}
.insight-sanssuite { padding: 14px; }
.insight-sanssuite summary { margin: 0; }

/* ── Alerte ── */
.insight-alert {
  background: rgba(184,96,10,0.08);
  border: 1px solid rgba(184,96,10,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color: rgba(20,40,60,0.7);
  line-height: 1.4;
  margin-bottom: 10px;
}

/* ── Métriques 2×2 ── */
.insight-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.insight-metric { display: flex; flex-direction: column; gap: 2px; }
.insight-metric-label {
  font-size: 11px;
  color: rgba(20,40,60,0.45);
}
.insight-metric-value {
  font-size: 20px;
  font-weight: 600;
  color: rgba(20,40,60,0.9);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ── Pareto ── */
.pareto-bar {
  display: flex;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 10px;
}
.pareto-segment { height: 100%; }
.pareto-legend  { display: flex; flex-direction: column; gap: 5px; }
.pareto-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(20,40,60,0.7);
}
.pareto-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pareto-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pareto-ca  { font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Scatter ── */
.scatter-wrap {
  position: relative;
  padding: 0 0 20px 26px;
}
.scatter-y-label {
  position: absolute;
  left: 0;
  top: 50%;
  font-size: 9px;
  color: rgba(20,40,60,0.35);
  transform: rotate(-90deg) translate(50%, -50%);
  transform-origin: left center;
  white-space: nowrap;
}
.scatter-area {
  position: relative;
  width: 100%;
  height: 160px;
  border-left: 1px solid rgba(30,50,70,0.15);
  border-bottom: 1px solid rgba(30,50,70,0.15);
}
.scatter-quadrant {
  position: absolute;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.35;
  pointer-events: none;
}
.scatter-quadrant.top-left  { top: 4px;    left: 4px;  }
.scatter-quadrant.bot-right { bottom: 4px; right: 4px; }
.scatter-x-label {
  font-size: 9px;
  color: rgba(20,40,60,0.35);
  text-align: center;
  margin-top: 4px;
}

/* ── Sous-estimation ── */
.sousest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sousest-label {
  font-size: 11px;
  color: rgba(20,40,60,0.65);
  width: 72px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sousest-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(30,50,70,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.sousest-bar-fill { height: 100%; border-radius: 3px; }
.sousest-val {
  font-size: 11px;
  font-weight: 600;
  color: rgba(20,40,60,0.7);
  font-variant-numeric: tabular-nums;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}
.sousest-total {
  font-size: 11px;
  color: rgba(20,40,60,0.5);
  margin-top: 8px;
  text-align: right;
}

/* ── Évolution mensuelle ── */
.evol-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 84px;
}
.evol-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.evol-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
/* Barres empilées : profit (haut) + charges (bas) */
.evol-bars-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.evol-label {
  font-size: 8px;
  color: rgba(20,40,60,0.4);
  text-align: center;
}
.insight-trend {
  font-size: 11px;
  font-weight: 500;
  margin-top: 6px;
  text-align: right;
}

/* ── Score clients ── */
.score-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
}
.score-client-row:last-child { border-bottom: none; }
.score-client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(42,74,114,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #2A4A72;
  flex-shrink: 0;
}
.score-client-info { flex: 1; min-width: 0; }
.score-client-nom {
  font-size: 13px;
  font-weight: 500;
  color: rgba(20,40,60,0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.score-client-taux {
  font-size: 11px;
  color: rgba(20,40,60,0.45);
  margin: 0;
}
.score-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.score-badge.ideal       { background: rgba(46,125,82,0.12);  color: var(--profit); }
.score-badge.correct     { background: rgba(42,74,114,0.1);   color: #2A4A72; }
.score-badge.revaloriser { background: rgba(184,96,10,0.1);   color: var(--orange-dark); }
.score-badge.neutre      { background: rgba(30,50,70,0.07);   color: rgba(20,40,60,0.45); }

/* ── Par type ── */
.type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
  font-size: 12px;
  gap: 8px;
}
.type-row:last-child { border-bottom: none; }
.type-row-left  { color: rgba(20,40,60,0.65); }
.type-row-right { font-weight: 500; color: rgba(20,40,60,0.85); font-variant-numeric: tabular-nums; }

/* ── Projets terminés ── */
.insight-proj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
  cursor: pointer;
  gap: 8px;
}
.insight-proj-row:last-child { border-bottom: none; }
.insight-proj-row:active { opacity: .7; }
.insight-proj-nom {
  font-size: 13px;
  font-weight: 500;
  color: rgba(20,40,60,0.85);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insight-proj-client {
  font-size: 11px;
  color: rgba(20,40,60,0.45);
  margin: 0;
}
.insight-proj-nums {
  text-align: right;
  font-size: 11px;
  color: rgba(20,40,60,0.55);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.insight-proj-nums p { margin: 0; }

/* ── Sans suite ── */
.sanssuite-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  font-size: 11px;
  color: rgba(20,40,60,0.6);
  line-height: 1.5;
}

/* ── Export bouton ── */
.insight-export-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.insight-export-btn:active { opacity: .75; }

/* ── Bilan sheet ── */
.bilan-sheet-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bilan-sheet-tag {
  font-size: 11px;
  font-weight: 500;
  background: rgba(42,74,114,0.1);
  color: #2A4A72;
  padding: 2px 8px;
  border-radius: 10px;
}
.bilan-sheet-client {
  font-size: 12px;
  color: rgba(20,40,60,0.65);
}
.bilan-sheet-date {
  font-size: 11px;
  color: rgba(20,40,60,0.4);
  margin-left: auto;
}
.bilan-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bilan-sheet-stat { display: flex; flex-direction: column; gap: 2px; }
.bilan-sheet-stat-val {
  font-size: 18px;
  font-weight: 600;
  color: rgba(20,40,60,0.9);
  font-variant-numeric: tabular-nums;
}
.bilan-sheet-stat-lbl {
  font-size: 11px;
  color: rgba(20,40,60,0.4);
}

/* ── Toast ── */
.frames-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(20,40,60,0.88);
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.frames-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════
   MODULE INSIGHT — Phase 7b (Finances)
   ════════════════════════════════════════════════════════ */

/* ── Barre de progression objectif annuel ── */
.finances-progress-wrap { margin-top: 10px; }
.finances-progress-bar-bg {
  height: 6px;
  background: rgba(20,40,60,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0;
}
.finances-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.finances-progress-label {
  font-size: 10px;
  color: rgba(20,40,60,0.45);
}

/* ── Liste charges fixes ── */
.finances-charges-list {
  display: flex;
  flex-direction: column;
}
.finances-charge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
  font-size: 12px;
  will-change: transform;
  overflow: hidden;
}
.finances-charge-row:last-child { border-bottom: none; }
.finances-charge-name {
  flex: 1;
  color: rgba(20,40,60,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finances-charge-freq {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(20,40,60,0.06);
  color: rgba(20,40,60,0.4);
  margin: 0 8px;
  flex-shrink: 0;
}
.finances-charge-val {
  font-weight: 500;
  color: var(--ink-dark);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.finances-empty-hint {
  font-size: 11px;
  color: rgba(20,40,60,0.35);
  font-style: italic;
  padding: 4px 0 8px;
}

/* ── Lignes résultat ── */
.finances-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 0.5px solid rgba(20,40,60,0.06);
}
.finances-result-row:last-child { border-bottom: none; }
.finances-result-label { color: rgba(20,40,60,0.6); }
.finances-result-val {
  font-weight: 500;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}
.finances-result-val.green { color: var(--profit); }
.finances-result-val.red   { color: var(--loss); }
.finances-result-total {
  border-top: 1px solid rgba(20,40,60,0.13) !important;
  border-bottom: none !important;
  padding-top: 10px !important;
}

/* ── Badge TVA ── */
.finances-tva-badge {
  background: rgba(58,122,191,0.08);
  border: 0.5px solid rgba(58,122,191,0.25);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color: #3A7ABF;
  margin-top: 10px;
  line-height: 1.5;
}

/* ── Disclaimer ── */
.finances-disclaimer {
  font-size: 9px;
  color: rgba(20,40,60,0.3);
  text-align: center;
  line-height: 1.5;
  padding: 0 8px;
}

/* ── Bouton ajouter charge ── */
.finances-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  padding: 8px 0 0;
  cursor: pointer;
  background: none;
  border: none;
}
.finances-add-btn:active { opacity: .7; }

/* ── Toggle TVA (Profil) ── */
.profil-toggle-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(30,50,84,0.18);
  background: rgba(255,255,255,0.45);
  color: rgba(20,40,60,0.5);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.profil-toggle-btn.is-on {
  background: linear-gradient(135deg,var(--orange),var(--accent));
  border-color: transparent;
  color: #fff;
}

/* ════════════════════════════════════════════════════════
   CHRONO REDESIGN — Phase 8
   ════════════════════════════════════════════════════════ */

/* ── Conteneur principal ── */
.chrono-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 0 32px;
  min-height: 100%;
  border-radius: 18px;
  position: relative;
  /* Fond clair repos — statique, pas de transition (Safari) */
  background: linear-gradient(160deg, #C9D6E3 0%, #B8CADB 40%, #A8BDD0 100%);
}

/* Overlay navy — fondu via opacity (compatible Safari iOS) */

/* Label dépassement sous le quota */
.chrono-delta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--loss);
  margin-top: 3px;
  transition: opacity 0.3s ease;
}


/* ── Sélecteur projet (scroll horizontal) ── */
.chrono-proj-scroll {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chrono-proj-scroll::-webkit-scrollbar { display: none; }

.chrono-proj-card {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  max-width: 120px;
}
.chrono-proj-card.is-active {
  background: rgba(245,147,50,0.18);
  border-color: var(--orange);
}
.chrono-proj-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,40,60,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chrono-proj-sub {
  font-size: 10px;
  color: rgba(20,40,60,0.45);
  margin-top: 2px;
  white-space: nowrap;
}
.chrono-proj-empty {
  font-size: 12px;
  color: rgba(20,40,60,0.4);
  padding: 8px 0;
}
/* ── Card numérique ── */
.chrono-card-num {
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 14px;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.chrono-card-num.is-over {
  background: rgba(192,48,48,0.06);
  border-color: rgba(192,48,48,0.25);
}
.chrono-time {
  font-size: 54px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -3px;
  line-height: 1;
  transition: color 0.3s ease;
}

.chrono-progress-wrap {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chrono-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(30,50,70,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.chrono-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}
.chrono-progress-over-track {
  width: 100%;
  height: 3px;
  background: rgba(192,48,48,0.12);
  border-radius: 99px;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.chrono-progress-over-fill {
  height: 100%;
  background: #C03030;
  border-radius: 99px;
  opacity: 0.7;
  transition: width 0.5s ease;
}
.chrono-cat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);                /* overridé par inline style JS */
  margin-top: 4px;
}
.chrono-quota-label {
  font-size: 10px;
  color: rgba(20,40,60,0.45);
}
/* ── Grille catégories 2×3 ── */
.chrono-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: calc(100% - 32px);
  margin: 16px 16px 0;
}
.chrono-cat-chip {
  border-radius: 12px;
  padding: 7px 7px 6px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chrono-cat-chip.is-active {
  background: rgba(46,125,82,0.10);
  border-color: rgba(46,125,82,0.40);
}
.chrono-cat-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}
.chrono-cat-chip-name {
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,40,60,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chrono-cat-chip-pct {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(20,40,60,0.45);
  flex-shrink: 0;
}
.chrono-cat-chip-time {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(20,40,60,0.85);
}
.chrono-cat-chip-bar-bg {
  height: 3px;
  background: rgba(20,40,60,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.chrono-cat-chip-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Boutons principaux ── */
.chrono-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 16px 8px;
  width: calc(100% - 32px);
}
.chrono-btn-main {
  flex: 1;
  border-radius: 14px;
  background: linear-gradient(135deg,var(--orange),var(--accent));
  border: none;
  cursor: pointer;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(212,112,10,0.35);
  transition: transform .1s, box-shadow .1s, background .2s, color .2s, border-color .2s;
}
.chrono-btn-main.is-running {
  background: rgba(192,48,48,0.15);
  border: 1.5px solid rgba(192,48,48,0.4);
  color: var(--loss);
  box-shadow: none;
}
.chrono-btn-main:active {
  transform: scale(0.97);
}
.chrono-btn-secondary {
  font-size: 12px;
  font-weight: 500;
  color: rgba(20,40,60,0.6);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.chrono-btn-secondary:active {
  background: rgba(255,255,255,0.14);
  color: rgba(20,40,60,0.85);
}
/* ── Séparateur ── */
.chrono-divider {
  width: calc(100% - 32px);
  height: 1px;
  background: rgba(20,40,60,0.1);
  margin: 16px 16px 12px;
  flex-shrink: 0;
}
/* ── Historique sessions ── */
.chrono-sessions {
  width: 100%;
  padding: 0 16px;
}
.chrono-session-day {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(20,40,60,0.35);
  text-transform: uppercase;
  margin: 12px 0 4px;
}
.chrono-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 0.5px solid rgba(20,40,60,0.08);
  transition: opacity 0.2s;
}
.chrono-session-cat {
  font-size: 12px;
  color: rgba(20,40,60,0.7);
  flex: 1;
}
.chrono-session-dur {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: rgba(20,40,60,0.85);
  font-weight: 600;
}
.chrono-session-time {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(20,40,60,0.35);
  min-width: 38px;
  text-align: right;
}
.chrono-session-empty {
  font-size: 12px;
  color: rgba(20,40,60,0.3);
  text-align: center;
  padding: 24px 0;
}
/* ── Bouton × suppression session ── */
.chrono-session-delete {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(192,48,48,0.12);
  border: none;
  color: var(--loss);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

/* ════════════════════════════════════════════════════
   PROSPECTION V1.1
   ════════════════════════════════════════════════════ */

.prosp-view {
  background: #fff;
  min-height: 100%;
  padding-bottom: 80px;
}

/* ── Hero glass ── */
.prosp-hero {
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  margin: 12px 16px 0;
  padding: 16px 0 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.prosp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 0;
}
.prosp-stat { text-align: center; padding: 4px 0; }
.prosp-stat + .prosp-stat { border-left: 0.5px solid rgba(30,50,70,0.1); }
.prosp-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: rgba(20,40,60,0.9);
  line-height: 1;
}
.prosp-stat-accent {
  background: linear-gradient(135deg, #F59332, #D4700A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.prosp-stat-win { color: #5AAE82; }
.prosp-stat-label {
  font-size: 10px;
  color: rgba(30,50,70,0.4);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Pipeline global ── */
.prosp-pipeline {
  display: flex;
  align-items: center;
  padding: 0 2px;
}
.pp-step { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
}
.pp-dot.done   { background: var(--orange); border-color: var(--orange); }
.pp-dot.active { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.pp-lbl { font-size: 7px; color: rgba(255,255,255,0.25); margin-top: 4px; white-space: nowrap; }
.pp-lbl.done   { color: rgba(255,255,255,0.5); }
.pp-lbl.active { color: #fff; }
.pp-line { flex: 1; height: 1px; background: rgba(255,255,255,0.15); margin-top: -4px; }
.pp-line.done { background: var(--orange); }

/* ── Filtres ── */
.prosp-filters {
  display: flex;
  gap: 5px;
  padding: 9px 13px 7px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
}
.prosp-filters::-webkit-scrollbar { display: none; }
.prosp-pill {
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  border: 0.5px solid rgba(20,40,60,0.15);
  color: rgba(20,40,60,0.5);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
}
.prosp-pill.is-on { background: var(--ink-dark); color: #fff; border-color: var(--ink-dark); }

/* ── Groupes ── */
.prosp-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prosp-group-hd {
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,40,60,0.35);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 6px 0 0;
}

/* ── Cards ── */
.prosp-list { padding: 14px 12px 0; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.prosp-card {
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid rgba(20,40,60,0.08);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prosp-card.urgent { border-color: rgba(184,96,10,0.3); background: #fffaf5; }
.prosp-card.hot    { border-color: rgba(245,147,50,0.25); }
.prosp-card-top { padding: 10px 12px 8px; display: flex; align-items: center; gap: 9px; }
.prosp-card-avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.prosp-card-info { flex: 1; min-width: 0; }
.prosp-card-name { font-size: 13px; font-weight: 500; color: var(--ink-dark); }
.prosp-card-sub  { font-size: 10px; color: rgba(20,40,60,0.4); margin-top: 1px; }
.prosp-card-right { text-align: right; flex-shrink: 0; }
.prosp-card-alert  { font-size: 9px; font-weight: 600; color: var(--orange-dark); }
.prosp-card-status          { font-size: 9px; color: rgba(20,40,60,0.4); }
.prosp-card-status.is-relance { color: var(--orange-dark); font-weight: 600; }
.prosp-card-date   { font-size: 9px; color: rgba(20,40,60,0.3); margin-top: 2px; }

/* ── Keystones ── */
.prosp-keystones { display: flex; align-items: center; padding: 0 14px 10px; }
.ks-step { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ks-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(20,40,60,0.15);
  background: #fff;
}
.ks-dot.done   { background: var(--ink-dark); border-color: var(--ink-dark); }
.ks-dot.active { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,147,50,0.15); }
.ks-dot.win    { background: var(--profit); border-color: var(--profit); box-shadow: 0 0 0 3px rgba(46,125,82,0.15); }
.ks-lbl { font-size: 7px; color: rgba(20,40,60,0.3); margin-top: 4px; text-align: center; white-space: nowrap; }
.ks-lbl.done   { color: rgba(20,40,60,0.5); }
.ks-lbl.active { color: var(--orange); font-weight: 600; }
.ks-lbl.win    { color: var(--profit); font-weight: 600; }
.ks-line { flex: 1; height: 1.5px; background: rgba(20,40,60,0.1); margin-top: -5px; }
.ks-line.done { background: var(--ink-dark); }
.ks-line.half { background: linear-gradient(90deg, var(--ink-dark) 50%, rgba(20,40,60,0.1) 50%); }

/* ── Empty ── */
.prosp-empty { padding: 32px 16px; text-align: center; }
.prosp-empty-icon { font-size: 32px; margin-bottom: 8px; }
.prosp-empty-txt { font-size: 13px; color: rgba(20,40,60,0.4); line-height: 1.5; }

/* ── Galerie victoires ── */
.prosp-wins { padding: 4px 12px 16px; }
.prosp-wins-hd { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 0.5px solid rgba(20,40,60,0.07); }
.prosp-wins-title { font-size: 9px; color: rgba(20,40,60,0.3); text-transform: uppercase; letter-spacing: .1em; }
.prosp-wins-count { font-size: 9px; font-weight: 600; color: var(--profit); background: rgba(46,125,82,0.1); padding: 1px 7px; border-radius: 20px; }
.prosp-wins-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.prosp-wins-scroll::-webkit-scrollbar { display: none; }
.prosp-win-card {
  flex-shrink: 0;
  width: 68px;
  background: rgba(46,125,82,0.06);
  border: 0.5px solid rgba(46,125,82,0.2);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
}
.prosp-win-av { width: 30px; height: 30px; border-radius: 8px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; }
.prosp-win-name { font-size: 9px; font-weight: 500; color: var(--profit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prosp-win-check { font-size: 8px; color: rgba(46,125,82,0.6); margin-top: 1px; }

/* ── Sans suite + Froid ── */
.prosp-wins-count--ss   { background: rgba(20,40,60,.07); color: rgba(20,40,60,.45); }
.prosp-wins-count--froid { background: rgba(59,130,246,.1); color: rgba(59,130,246,.8); }
.prosp-ss-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 0.5px solid rgba(20,40,60,.05); }
.prosp-ss-row:last-child { border-bottom: none; }
.prosp-ss-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.prosp-ss-raison { font-size: 11px; color: rgba(20,40,60,.38); margin-top: 1px; }
.prosp-card-status.is-recontacter { color: #E8400C; font-weight: 600; background: rgba(232,64,12,.08); padding: 2px 7px; border-radius: 8px; }
.prosp-froid { margin: 4px 12px 16px; }
.prosp-froid-hd { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 0.5px solid rgba(20,40,60,.07); list-style: none; cursor: pointer; }
.prosp-froid-hd::-webkit-details-marker { display: none; }
.prosp-froid .prosp-ss-row { padding-left: 0; }
.prosp-froid-delay { font-size: 11px; color: rgba(59,130,246,.7); white-space: nowrap; }
.ss-raisons, .ss-recontact-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-raison-pill {
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid rgba(20,40,60,.12);
  background: rgba(255,255,255,.5);
  font-size: .8rem; color: rgba(20,40,60,.6);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ss-raison-pill.is-on {
  background: rgba(30,50,84,.08);
  border-color: rgba(30,50,84,.3);
  color: rgba(20,40,60,.9); font-weight: 500;
}

/* ── Boutons sheet ── */
.prosp-btn-primary {
  flex: 1; padding: 12px;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  border: none; border-radius: 12px;
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.prosp-btn-secondary {
  flex: 1; padding: 12px;
  background: rgba(20,40,60,0.06);
  border: none; border-radius: 12px;
  color: var(--ink-dark); font-size: 14px; cursor: pointer;
}
.prosp-btn-danger {
  width: 100%; padding: 10px;
  background: none; border: none;
  color: rgba(20,40,60,0.3); font-size: 13px; cursor: pointer; margin-top: 4px;
}
.prosp-sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 20px 0; }

/* ── Canal pills ── */
.prosp-canal-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.prosp-canal-pill {
  font-size: 11px; padding: 5px 10px; border-radius: 20px;
  border: 0.5px solid rgba(20,40,60,0.15);
  color: rgba(20,40,60,0.5); background: rgba(255,255,255,0.7); cursor: pointer;
}
.prosp-canal-pill.is-on { background: var(--ink-dark); color: #fff; border-color: var(--ink-dark); }

/* ── Sheet fiche ── */
.prosp-sheet-header { display: flex; align-items: center; gap: 12px; padding: 4px 20px 14px; }
.prosp-sheet-avatar {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.prosp-sheet-name { font-size: 18px; font-weight: 500; color: var(--ink-dark); font-family: Georgia, serif; font-style: italic; }
.prosp-sheet-canal { font-size: 11px; color: rgba(20,40,60,0.4); margin-top: 2px; }
.prosp-keystones-lg { padding-left: 20px; padding-right: 20px; }
.prosp-keystones-lg .ks-dot { width: 12px; height: 12px; }
.prosp-sheet-section { margin-top: 14px; padding: 12px 20px 0; border-top: 0.5px solid rgba(20,40,60,0.07); }
.prosp-sheet-lbl { font-size: 9px; color: rgba(20,40,60,0.35); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.prosp-sheet-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.prosp-sheet-key { color: rgba(20,40,60,0.5); }
.prosp-sheet-val { color: var(--ink-dark); font-weight: 500; }
.prosp-sheet-val.alert { color: var(--orange-dark); }
.prosp-sheet-text { font-size: 13px; color: rgba(20,40,60,0.7); line-height: 1.5; background: rgba(20,40,60,0.03); border-radius: 8px; padding: 8px 10px; }
.prosp-sheet-textarea {
  width: 100%; background: rgba(20,40,60,0.03);
  border: 0.5px solid rgba(20,40,60,0.1); border-radius: 8px;
  padding: 8px 10px; font-size: 16px; color: rgba(20,40,60,0.85);
  resize: none; font-family: system-ui, sans-serif;
  box-sizing: border-box;
}

/* ── Animation victoire ── */
.prosp-win-overlay {
  position: fixed; inset: 0;
  background: rgba(20,40,60,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; animation: fadeIn 0.2s ease;
}
.prosp-win-modal {
  background: #fff; border-radius: 20px; padding: 32px;
  text-align: center; animation: scaleIn 0.3s ease;
}
.prosp-win-icon { font-size: 48px; color: var(--profit); margin-bottom: 12px; }
.prosp-win-title { font-size: 20px; font-weight: 500; color: var(--ink-dark); font-family: Georgia, serif; font-style: italic; }
.prosp-win-sub { font-size: 13px; color: rgba(20,40,60,0.4); margin-top: 4px; }
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ════════════════════════════════════════════════════════
   INSIGHT FINANCES — Refonte blocs
   ════════════════════════════════════════════════════════ */

/* ── Hero 3 colonnes ── */
.if-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 4px 0 8px;
}
.if-metric { display: flex; flex-direction: column; align-items: center; text-align: center; }
.if-metric-label {
  font-size: 9px; color: rgba(20,40,60,0.4);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px;
}
.if-metric-value { font-size: 16px; font-weight: 600; color: var(--ink-dark); line-height: 1.2; }

/* ── Pills période / groupe ── */
.if-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.if-pill {
  font-size: 11px; padding: 4px 11px; border-radius: 20px;
  border: 0.5px solid rgba(20,40,60,0.15);
  color: rgba(20,40,60,0.5); background: rgba(255,255,255,0.7); cursor: pointer;
}
.if-pill.is-active { background: var(--ink-dark); color: #fff; border-color: var(--ink-dark); }

/* ── Breakdown revenus ── */
.if-breakdown-row {
  display: flex; align-items: center;
  padding: 7px 0; border-bottom: 0.5px solid rgba(20,40,60,0.05);
}
.if-breakdown-row:last-child { border-bottom: none; }
.if-bd-label {
  flex: 1; font-size: 12px; color: rgba(20,40,60,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}
.if-bd-bar-wrap {
  width: 56px; height: 4px; background: rgba(20,40,60,0.08);
  border-radius: 2px; margin: 0 8px; flex-shrink: 0;
}
.if-bd-bar { height: 4px; border-radius: 2px; background: #2A4A72; }
.if-bd-val { font-size: 12px; font-weight: 500; color: var(--ink-dark); text-align: right; min-width: 70px; }
.if-total-row {
  display: flex; justify-content: space-between;
  padding: 8px 0 0; border-top: 0.5px solid rgba(20,40,60,0.1);
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-dark);
}
.if-empty { font-size: 12px; color: rgba(20,40,60,0.3); text-align: center; padding: 14px 0; font-style: italic; }

/* ── Affichage PDF ── */
.fo-affichage-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.fo-affichage-label {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.fo-affichage-pills {
  display: flex;
  gap: 8px;
}
.fo-affichage-pill {
  flex: 1;
  padding: 8px;
  text-align: center;
  border-radius: 10px;
  border: 1.5px solid rgba(30,50,70,.1);
  background: rgba(255,255,255,.45);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(20,40,60,.6);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fo-affichage-pill.is-on {
  background: rgba(30,50,84,.07);
  border-color: rgba(30,50,84,.25);
  color: rgba(20,40,60,.85);
}
.fo-affichage-pill.is-disabled {
  opacity: .35;
  cursor: default;
}
.fo-affichage-hint {
  font-size: .75rem;
  color: rgba(30,50,70,.4);
  font-style: italic;
}

/* ── Rabais ── */
.fo-rabais-add-btn {
  font-size: .78rem;
  color: rgba(30,50,70,.4);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fo-rabais-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 4px;
}
.fo-rabais-type-pills {
  display: flex;
  gap: 4px;
}
.fo-rabais-pill {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(30,50,70,.12);
  background: rgba(255,255,255,.5);
  font-size: .8rem;
  font-weight: 600;
  color: rgba(20,40,60,.5);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fo-rabais-pill.is-on {
  background: rgba(30,50,84,.08);
  border-color: rgba(30,50,84,.3);
  color: rgba(20,40,60,.85);
}
.fo-rabais-input {
  width: 90px !important;
  text-align: right;
  font-size: 16px !important;
  padding: 6px 8px !important;
  border-radius: 8px;
  border: 1px solid rgba(20,40,60,.12);
  background: rgba(255,255,255,.6);
}
.fo-sim-row--rabais span { color: #E8400C !important; }
.fo-rabais-raison {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 16px;
  border: 1px solid rgba(20,40,60,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  color: var(--ink);
}
.fo-rabais-raison::placeholder { color: rgba(30,50,70,.35); }
.fo-rabais-item {
  border-top: 1px solid rgba(20,40,60,.06);
  padding-top: 4px;
  margin-top: 4px;
}
.fo-rabais-item:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.fo-rabais-del {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(30,50,70,.4);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Pills Médias (fiche offre) ── */
.fo-medias-pills {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.fo-medias-pill {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: rgba(255,255,255,.45);
  border: 1.5px solid rgba(30,50,70,.1);
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(20,40,60,.7);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.fo-medias-pill.is-on {
  background: rgba(46,125,82,.08);
  border-color: rgba(46,125,82,.30);
  color: #2E7D52;
}

/* ── Accordéons charges ── */
.if-acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 10px 0; margin: 0;
  border-top: 0.5px solid rgba(20,40,60,0.08);
}
.if-acc-btn:first-of-type { border-top: none; }
.if-acc-label { font-size: 13px; font-weight: 500; color: var(--ink-dark); }
.if-acc-total { font-size: 11px; color: rgba(20,40,60,0.4); margin-left: 6px; }
.if-acc-chevron { transition: transform 0.2s; color: rgba(20,40,60,0.3); flex-shrink: 0; }
.if-acc-btn.is-open .if-acc-chevron { transform: rotate(180deg); }
.if-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.if-acc-body.is-open { max-height: 800px; }

.profil-hint { font-size: 11px; color: rgba(20,40,60,0.35); margin: 4px 0 0; font-style: italic; }

/* ════════════════════════════════════════════════════════
   PROFIL — Logo upload (Section Mon identité)
   ════════════════════════════════════════════════════════ */

.profil-logo-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 10px;
}
.profil-logo-preview {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(20,40,60,.12);
  background: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.profil-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1.5px dashed rgba(20,40,60,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(20,40,60,.35);
  text-align: center;
  flex-shrink: 0;
  line-height: 1.3;
}
.profil-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profil-logo-upload-btn {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--orange, #F59332);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.profil-logo-remove-btn {
  font-size: .78rem;
  color: rgba(220,70,30,.75);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.profil-logo-warning {
  font-size: .78rem;
  color: #E8400C;
  margin: -6px 0 4px;
}

/* ── Profil : sous-texte dans profil-row-label ────── */
.profil-row-sub {
  font-size: .72rem;
  color: rgba(20,40,60,.35);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}

/* ════════════════════════════════════════════════════════
   PROFIL — Mes documents (palette couleurs)
   ════════════════════════════════════════════════════════ */

.profil-docs-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}
.profil-docs-label {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.profil-color-palette {
  display: flex;
  flex-wrap: nowrap;  /* C5: 7 swatches sur une ligne */
  gap: 7px;
}
.profil-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.profil-color-swatch:active {
  transform: scale(.9);
}
.profil-color-swatch.is-selected {
  border-color: rgba(20,40,60,.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
.profil-color-custom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profil-color-custom-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(20,40,60,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.profil-color-custom input {
  width: 110px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  font-size: .84rem !important;
  font-family: monospace !important;
  flex-shrink: 0;
}
.profil-color-preview {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(20,40,60,.12);
  flex-shrink: 0;
}
/* Textarea dans label profil — héritage du display:grid de label */
.profil-view textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────
   BRIEF — bouton PDF
───────────────────────────────────────────────── */
.brief-pdf-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  border: 1.5px solid rgba(20,40,60,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.brief-pdf-btn:active {
  background: rgba(255,255,255,.7);
  transform: scale(.98);
}

/* ─────────────────────────────────────────────────
   PDF OVERLAY
───────────────────────────────────────────────── */
/* ── Overlay (fond sombre + barre fixe en haut) ── */
#pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 56px; /* espace pour la barre */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  animation: pdfOverlayIn .2s ease;
}
@keyframes pdfOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Barre de commandes — positionnée en haut, fixe dans l'overlay */
.pdf-overlay-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: rgba(15,20,28,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* class dans le JS : pdf-overlay-num (corrigé) */
.pdf-overlay-num,
.pdf-overlay-number {
  flex: 1;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pdf-overlay-btns {
  display: flex;
  gap: 8px;
}
.pdf-btn-print,
.pdf-btn-close {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.pdf-btn-print {
  background: #2563eb;
  color: #fff;
}
.pdf-btn-print svg { stroke: #fff; }
.pdf-btn-close {
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .92rem;
  padding: 8px 12px;
}
.pdf-btn-print:active,
.pdf-btn-close:active {
  opacity: .75;
  transform: scale(.97);
}

/* Document A4 — rendu fidèle sur écran */
.pdf-document {
  width: 210mm;
  max-width: 210mm;
  min-height: 297mm;
  padding: 18mm 18mm 20mm;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  font-family: 'DM Sans','Helvetica Neue',Arial,sans-serif;
  font-size: 10pt;
  color: #111;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Sur iPhone : réduire pour tenir dans l'écran */
@media (max-width: 600px) {
  #pdf-overlay { padding-top: 52px; }
  .pdf-document {
    width: 95vw;
    padding: 8mm 7mm 12mm;
    font-size: 8pt;
  }
}

/* ─────────────────────────────────────────────────
   @MEDIA PRINT
───────────────────────────────────────────────── */
@media print {
  /* P5 — supprime URL/date Safari, contrôle total au CSS */
  @page { margin: 0; size: A4; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body > *:not(#pdf-overlay) { display: none !important; }

  #pdf-overlay {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
    animation: none !important;
  }

  .pdf-overlay-bar { display: none !important; }

  .pdf-document {
    width: 210mm !important;
    min-height: 297mm !important;
    padding: 15mm 18mm 20mm !important;
    box-shadow: none !important;
    font-size: 10pt !important;
  }
}

/* ══════════════════════════════════════════════════════
   ONBOARDING — wizard premier lancement
   ══════════════════════════════════════════════════════ */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f3f5f4;
  overflow: hidden;
  transition: opacity .35s ease;
}
.ob-overlay.ob-exit { opacity: 0; }

.ob-slide {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 20px) 24px calc(env(safe-area-inset-bottom, 20px) + 8px);
  box-sizing: border-box;
  animation: ob-in .3s ease;
}
@keyframes ob-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Welcome ── */
.ob-slide--welcome {
  background: linear-gradient(160deg, #F59332 0%, #D4700A 100%);
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: calc(env(safe-area-inset-top, 20px) + 48px) 32px calc(env(safe-area-inset-bottom, 20px) + 32px);
}
.ob-welcome-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ob-logo-mark {
  width: 72px;
  height: 72px;
  border: 2.5px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 38px;
  color: #fff;
  line-height: 1;
}
.ob-logo-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.ob-welcome-tagline {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
.ob-btn-welcome {
  background: #fff;
  color: #D4700A;
  border: none;
  border-radius: 14px;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.ob-btn-welcome:active { opacity: .82; }

/* ── Story slides ── */
.ob-slide--story {
  background: #FDF8F3;
  padding-top: calc(env(safe-area-inset-top, 20px) + 12px);
}
.ob-story-nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.ob-skip-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #A89080;
  cursor: pointer;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.ob-story-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 4px;
}
.ob-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ob-dot {
  height: 4px;
  width: 24px;
  border-radius: 2px;
  background: rgba(30,50,70,.12);
  transition: background .3s, width .3s;
}
.ob-dot--active { background: #F59332; width: 40px; }
.ob-dot--done   { background: rgba(245,147,50,.4); }

.ob-story-icon  { font-size: 40px; margin-bottom: 10px; }
.ob-story-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a2e45;
  margin: 0 0 8px;
  letter-spacing: -.5px;
}
.ob-story-body {
  font-size: 15px;
  color: #7A6050;
  line-height: 1.55;
  margin: 0 0 16px;
}

/* ── Mock UI ── */
.ob-mock-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 16px;
}

/* Conteneurs mock v2 */
.ob-mock-sim-v2,
.ob-mock-chrono-v2,
.ob-mock-insight-v2 {
  flex: 1;
  background: rgba(20,40,60,.03);
  border: 0.5px solid rgba(20,40,60,.08);
  border-radius: 16px;
  padding: 16px;
}
.ob-mock-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(30,50,70,.35);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.ob-mock-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ob-mock-chip {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  background: rgba(20,40,60,.06);
  color: rgba(30,50,70,.45);
}
.ob-mock-chip.is-on {
  background: var(--orange, #F59332);
  color: #fff;
}
.ob-mock-jours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.ob-mock-jours-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(30,50,70,.5);
}
.ob-mock-jours-val { font-weight: 700; color: #1a2e45; }
.ob-mock-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(20,40,60,.08);
  font-size: 13px;
  color: rgba(30,50,70,.5);
}
.ob-mock-price-hi {
  font-size: 20px;
  font-weight: 800;
  color: var(--orange, #F59332);
  letter-spacing: -.5px;
}
/* Chrono mock */
.ob-mock-timer {
  font-size: 38px;
  font-weight: 700;
  color: #1a2e45;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
  text-align: center;
  margin-bottom: 2px;
}
.ob-mock-timer-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--orange, #F59332);
  text-align: center;
  text-transform: uppercase;
}
.ob-mock-timer-info {
  font-size: 11px;
  color: rgba(30,50,70,.4);
  text-align: center;
  margin-bottom: 12px;
}
.ob-mock-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 12px;
}
.ob-mock-cat {
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 11px;
  background: rgba(20,40,60,.05);
  color: rgba(30,50,70,.45);
}
.ob-mock-cat.is-on {
  background: rgba(245,147,50,.14);
  color: #D4700A;
  font-weight: 600;
}
.ob-mock-stop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 0.5px solid rgba(20,40,60,.08);
  font-size: 12px;
  color: rgba(30,50,70,.4);
}
.ob-mock-stop {
  background: var(--orange, #F59332);
  color: #fff;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
/* Insight mock */
.ob-mock-insight-block { margin-bottom: 2px; }
.ob-mock-insight-ok {
  font-size: 11px;
  color: #2E7D52;
  margin-top: 3px;
}
.ob-mock-insight-val {
  font-size: 14px;
  font-weight: 600;
  color: #1a2e45;
  margin-top: 3px;
}
.ob-mock-insight-footer {
  font-size: 11px;
  color: rgba(30,50,70,.35);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(20,40,60,.07);
}
.ob-mock-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.75);
  border: 0.5px solid rgba(20,40,60,.09);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(12px);
}
.ob-mock-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ob-mock-info  { flex: 1; min-width: 0; }
.ob-mock-name  { font-size: 14px; font-weight: 600; color: #1a2e45; }
.ob-mock-sub   { font-size: 12px; color: rgba(30,50,70,.45); margin-top: 2px; }
.ob-mock-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 8px;
  white-space: nowrap;
}
.ob-mock-sim {
  background: rgba(255,255,255,.75);
  border: 0.5px solid rgba(20,40,60,.09);
  border-radius: 16px;
  padding: 8px 16px;
  backdrop-filter: blur(12px);
}
.ob-mock-sim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #1a2e45;
  border-bottom: 0.5px solid rgba(20,40,60,.06);
}
.ob-mock-sim-row:last-child { border-bottom: none; }
.ob-mock-sim-total { font-weight: 700; font-size: 15px; color: #2E7D52; }
.ob-mock-terrain {
  background: rgba(255,255,255,.75);
  border: 0.5px solid rgba(20,40,60,.09);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  backdrop-filter: blur(12px);
  margin-bottom: 12px;
}
.ob-mock-chrono {
  font-size: 32px;
  font-weight: 700;
  color: #1a2e45;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.ob-mock-terrain-sub { font-size: 13px; color: rgba(30,50,70,.45); margin-top: 6px; }
.ob-mock-cloture {
  background: linear-gradient(135deg, rgba(46,125,82,.1), rgba(46,125,82,.04));
  border: 0.5px solid rgba(46,125,82,.2);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
}
.ob-mock-cloture-amt   { font-size: 32px; font-weight: 800; color: #2E7D52; letter-spacing: -1px; }
.ob-mock-cloture-label { font-size: 14px; color: rgba(30,50,70,.55); margin-top: 6px; }

/* ── Tag pill (remplace icône emoji) ── */
.ob-story-tag-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #C08040;
  background: #F5EDE4;
  border: 1px solid #D4A070;
  border-radius: 20px;
  padding: 3px 11px;
  margin-bottom: 10px;
}

/* ── Conteneur warm partagé ── */
.ob-mock-warm {
  flex: 1;
  background: #FDF8F3;
  border: 0.5px solid rgba(245,147,50,0.2);
  border-radius: 16px;
  padding: 14px 14px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ob-mock-section-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #C08040;
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}

/* ── Tags badges ── */
.ob-tag {
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
.ob-tag--orange { background: #F59332; color: #fff; }
.ob-tag--red    { background: #FCEBEB; color: #A32D2D; }
.ob-tag--green  { background: #EAF3DE; color: #3B6D11; }

/* ── Slide 1 Prospection ── */
.ob-mock-p-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
.ob-mock-p-name { font-size: 12px; font-weight: 600; color: #1a2e45; }
.ob-mock-p-sub  { font-size: 10px; color: #A89080; margin-top: 1px; }
.ob-mock-pipeline-row {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}
.ob-kp {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(20,40,60,.12); flex-shrink: 0;
}
.ob-kp--done { background: rgba(245,147,50,.45); }
.ob-kp--on   { background: #F59332; }
.ob-kl { flex: 1; height: 1.5px; background: rgba(20,40,60,.1); }
.ob-kl--done { background: rgba(245,147,50,.4); }
.ob-mock-alert-warm {
  margin-top: auto;
  padding: 8px 10px;
  background: #FEF0E0;
  border: 0.5px solid rgba(245,147,50,.3);
  border-radius: 10px;
  font-size: 10.5px;
  color: #854F0B;
  line-height: 1.4;
}

/* ── Slide 2 Offre ── */
.ob-mock-suggest {
  background: #FEF0E0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ob-mock-suggest-lbl {
  font-size: 9px; font-weight: 700; color: #C08040;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.ob-mock-suggest-val { font-size: 11px; color: #7A6050; }
.ob-hi { color: #F59332; font-weight: 700; }
.ob-mock-sim-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7A6050;
  padding: 4px 0;
  border-bottom: 0.5px solid rgba(245,147,50,.12);
}
.ob-mock-sim-line--total {
  border-bottom: none;
  border-top: 0.5px solid rgba(245,147,50,.2);
  font-weight: 700;
  font-size: 12px;
  color: #1a2e45;
  padding-top: 6px;
  margin-top: 2px;
}
.ob-mock-pdf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.5px solid rgba(245,147,50,.15);
}
.ob-mock-pdf-icon { font-size: 18px; }
.ob-mock-pdf-name { font-size: 11px; font-weight: 600; color: #1a2e45; }

/* ── Slide 3 Terrain ── */
.ob-mock-timer-n {
  font-size: 34px;
  font-weight: 700;
  color: #1a2e45;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 2px;
}
.ob-mock-timer-sub {
  font-size: 11px;
  color: #A89080;
  margin-bottom: 6px;
}
.ob-mock-prog-bar {
  height: 4px;
  background: rgba(245,147,50,.15);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0 10px;
}
.ob-mock-prog-fill {
  height: 100%;
  background: #F59332;
  border-radius: 2px;
}
.ob-mock-stop-btn {
  display: inline-block;
  background: #F59332;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 10px;
}
.ob-mock-sep {
  height: 0.5px;
  background: rgba(245,147,50,.18);
  margin: 6px 0;
}
.ob-mock-session-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7A6050;
  padding: 2px 0;
}
.ob-mock-session-row--active { color: #F59332; font-weight: 600; }

/* ── Slide 4 Insight ── */
.ob-mock-stat-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ob-mock-stat {
  flex: 1;
  background: #FEF0E0;
  border-radius: 10px;
  padding: 9px 10px;
}
.ob-mock-stat-val { font-size: 15px; font-weight: 800; color: #F59332; letter-spacing: -.4px; }
.ob-mock-stat-val--green { color: #3B6D11; }
.ob-mock-stat-lbl { font-size: 9px; color: #A89080; margin-top: 3px; line-height: 1.3; }
.ob-mock-bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.ob-mock-bar-lbl  { font-size: 10px; color: #7A6050; width: 50px; flex-shrink: 0; }
.ob-mock-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(245,147,50,.12);
  border-radius: 3px;
  overflow: hidden;
}
.ob-mock-bar-fill { height: 100%; background: #F59332; border-radius: 3px; }
.ob-mock-bar-fill--dim { background: rgba(245,147,50,.38); }
.ob-mock-bar-val { font-size: 10px; color: #7A6050; width: 54px; text-align: right; flex-shrink: 0; }
.ob-mock-chart-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin-top: 10px;
}
.ob-mock-chart-bar {
  flex: 1;
  background: rgba(245,147,50,.18);
  border-radius: 2px 2px 0 0;
  display: block;
}
.ob-mock-chart-bar--hi { background: #F59332; }
.ob-mock-chart-note {
  font-size: 9.5px;
  color: #A89080;
  text-align: right;
  margin-top: 4px;
}

/* ── Setup slide ── */
.ob-slide--setup {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  padding-top: calc(env(safe-area-inset-top, 20px) + 32px);
}
.ob-setup-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a2e45;
  margin: 0 0 28px;
  letter-spacing: -.5px;
  line-height: 1.3;
}
.ob-setup-group   { margin-bottom: 24px; }
.ob-setup-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: rgba(30,50,70,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 12px;
}
.ob-tarifs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob-tarifs-grid .ob-setup-label { margin-bottom: 0; }
.ob-tarifs-grid .ob-setup-input {
  text-align: right;
  font-weight: 600;
  color: #D4700A;
}
/* Legacy — gardé pour migration */
.ob-setup-header   { text-align: center; margin-bottom: 28px; padding-top: 24px; }
.ob-setup-emoji    { font-size: 44px; margin-bottom: 12px; }
.ob-setup-sub      { font-size: 15px; color: rgba(30,50,70,.5); margin: 0; line-height: 1.5; }

.ob-setup-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(30,50,70,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}
.ob-setup-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(20,40,60,.12);
  background: rgba(255,255,255,.9);
  font-size: 16px;
  color: #1a2e45;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.ob-setup-input:focus { outline: none; border-color: #F59332; box-shadow: 0 0 0 3px rgba(245,147,50,.12); }

.ob-setup-tarifs {
  background: rgba(255,255,255,.7);
  border: 0.5px solid rgba(20,40,60,.09);
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
}
.ob-setup-tarif-section {
  font-size: 11px; font-weight: 600;
  color: rgba(30,50,70,.35);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 12px 16px 6px;
}
.ob-setup-tarif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 15px;
  color: #1a2e45;
  border-top: 0.5px solid rgba(20,40,60,.06);
}
.ob-tarif-wrap { display: flex; align-items: center; gap: 6px; }
.ob-tarif-input {
  width: 72px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(20,40,60,.12);
  background: rgba(255,255,255,.9);
  font-size: 15px;
  font-weight: 600;
  color: #D4700A;
  text-align: right;
  -webkit-appearance: none;
}
.ob-tarif-input:focus { outline: none; border-color: #F59332; }
.ob-tarif-unit { font-size: 12px; color: rgba(30,50,70,.4); width: 36px; }

/* ── Boutons ── */
.ob-btn-primary {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: var(--orange, #F59332);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -.2px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.ob-btn-primary:active { opacity: .85; }
.ob-btn-story { margin-top: auto; }
.ob-btn-ghost {
  width: 100%;
  padding: 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Bouton tuto dans Moi ── */
.profil-tuto-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed rgba(46,125,82,.3);
  border-radius: 14px;
  background: transparent;
  color: rgba(46,125,82,.7);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.profil-tuto-btn:active {
  background: rgba(46,125,82,.06);
  color: #2E7D52;
}

/* ── Badge DÉMO sur la carte Studio ── */
.sw-demo-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #B8600A;
  background: rgba(213,112,10,.12);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* ── Banners démo (Studio + Insights) ── */
.studio-demo-banner,
.insight-demo-banner {
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  background: rgba(245,147,50,.08);
  border: 0.5px solid rgba(245,147,50,.3);
  color: #B8600A;
  text-align: center;
}
.insight-demo-banner {
  margin: 12px 0 8px;
}

/* ── Bandeau démo dans la fiche offre ── */
.fo-demo-banner {
  background: rgba(184,96,10,.07);
  border: 0.5px solid rgba(184,96,10,.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: #B8600A;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── Guided Tour Tooltip ── */
.tour-tooltip {
  position: fixed;
  bottom: 90px;
  left: 16px;
  right: 16px;
  background: #1A2E45;
  border-radius: 14px;
  padding: 16px;
  z-index: 8888;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: tourSlideUp 0.3s ease;
}
@keyframes tourSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-tooltip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.tour-tooltip-body {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 14px;
  line-height: 1.5;
}
.tour-tooltip-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tour-btn-cta {
  flex: 1;
  background: var(--orange, #F59332);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tour-btn-skip {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 8px;
}

/* ══════════════════════════════════════════════════════
   INDICATEUR DE SYNC — topbar
   ══════════════════════════════════════════════════════ */

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  cursor: default;
}
.sync-cloud {
  font-size: 13px;
  color: rgba(30,50,70,.35);
  line-height: 1;
}
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8A9AB0;
  flex-shrink: 0;
  transition: background 0.4s ease;
}

/* ══════════════════════════════════════════════════════
   TOGGLE LOCAL / CLOUD — onglet Moi
   ══════════════════════════════════════════════════════ */

.storage-mode-section {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--sep);
}

.storage-mode-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.storage-mode-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.storage-pill {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(30,50,70,.1);
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.storage-pill.is-on {
  border-color: var(--orange);
  background: rgba(245,147,50,.08);
}

.storage-pill-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.storage-pill.is-on .storage-pill-title {
  color: var(--orange);
}

.storage-pill-sub {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}

.storage-mode-hint {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  min-height: 16px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   BOUTON SE DÉCONNECTER — onglet Moi
   ══════════════════════════════════════════════════════ */

.compte-sync-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3, rgba(30,50,70,.45));
  padding: 6px 0 14px;
}
.compte-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
}

.btn-signout {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(30,50,84,0.18);
  background: transparent;
  color: var(--color-text, #1E3254);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.btn-signout:active {
  background: rgba(30,50,84,0.06);
}

/* ══════════════════════════════════════════════════════
   ÉCRAN DE CONNEXION — Supabase magic link
   ══════════════════════════════════════════════════════ */

#login-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.login-screen {
  min-height: 100vh;
  background: linear-gradient(160deg, #F59332 0%, #D4700A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 320px;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.login-logo-mark {
  width: 72px;
  height: 72px;
  border: 2.5px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'STIXTwoMath-Regular', 'STIX Two Math', serif;
  font-style: italic;
  font-size: 36px;
  color: #fff;
}

.login-logo-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}

.login-tagline {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.login-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  background: rgba(255,255,255,0.95);
  color: #111;
  outline: none;
  box-sizing: border-box;
}

.login-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  text-align: center;
  min-height: 20px;
  margin: 0;
}

.login-screen-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin: 0 0 4px;
}

.login-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.login-link-sep {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  user-select: none;
}

/* Formulaire changement de mot de passe dans Moi */
.change-password-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--sep, rgba(20,40,60,.1));
}

.change-password-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}