/* ——— Direction artistique · Mesure Chantier (inspiré maquette ROOFPRO) ——— */

:root {
  --app-accent: #f58220;
  --app-accent-hover: #ff9533;
  --app-accent-text: #0a0a0a;
  --app-accent-soft: rgba(245, 130, 32, 0.16);
  --app-accent-ring: rgba(245, 130, 32, 0.45);
  --app-bg: #0a0c10;
  --app-surface: #12151c;
  --app-surface-2: #181c26;
  --app-surface-3: #1f2430;
  --app-surface-active: #252b38;
  --app-radius: 14px;
  --app-radius-sm: 10px;
  --app-radius-lg: 18px;
  --app-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --app-shadow-fab: 0 6px 20px rgba(245, 130, 32, 0.45);
  --app-tabbar-h: 72px;

  --accent: var(--app-accent);
  --accent-clair: var(--app-accent);
  --accent-doux: var(--app-accent-soft);
  --accent-filet: var(--app-accent-ring);
  --fond: var(--app-bg);
  --surface: var(--app-surface);
  --surface-eleve: var(--app-surface-2);
  --surface-rehausse: var(--app-surface-3);
  --carte-trace: #f58220;
  --carte-trace-fonce: #d96a0a;
}

.app-frame--da .app-topbar {
  background: linear-gradient(180deg, var(--app-surface) 0%, rgba(18, 21, 28, 0.92) 100%);
  border-bottom-color: var(--app-border-subtle);
  backdrop-filter: blur(12px);
}

.app-frame--da .app-topbar__tag {
  color: var(--app-accent);
  font-weight: 500;
}

.accueil {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.accueil-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.accueil-header__salut {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--app-text-muted);
}

.accueil-header__nom {
  margin: 0;
  font-size: clamp(1.35rem, 4.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--app-text);
}

.accueil-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 2px solid var(--app-border);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--app-surface-3), var(--app-surface-2));
  color: var(--app-accent);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.accueil-projet,
.accueil-projet-vide {
  padding: var(--space-4);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border-subtle);
  box-shadow: var(--app-shadow-card);
}

.accueil-projet-vide {
  text-align: center;
  color: var(--app-text-muted);
}

.accueil-projet-vide p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.accueil-projet__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-accent);
}

.accueil-projet__adresse {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  color: var(--app-text);
}

.accueil-projet__meta {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--app-text-muted);
}

.accueil-projet__progression {
  height: 4px;
  border-radius: 999px;
  background: var(--app-surface-3);
  overflow: hidden;
}

.accueil-projet__barre {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent), #ffb347);
  transition: width 0.5s var(--app-ease);
}

.accueil-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 52px;
  padding: var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-accent-text);
  background: linear-gradient(135deg, var(--app-accent) 0%, #ff9533 100%);
  border: none;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-fab);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s var(--app-ease), filter 0.15s var(--app-ease);
}

.accueil-cta:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

.accueil-raccourcis {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.accueil-raccourcis__titre {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.accueil-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  color: var(--app-text);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border-subtle);
  border-radius: var(--app-radius);
  cursor: pointer;
  transition: background 0.2s var(--app-ease), border-color 0.2s var(--app-ease);
}

.accueil-lien::after {
  content: '›';
  font-size: 1.25rem;
  color: var(--app-text-faint);
}

.accueil-lien:hover,
.accueil-lien:focus-visible {
  background: var(--app-surface-3);
  border-color: var(--app-border);
}

.app-tabbar--da {
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: end;
  gap: 0;
  padding-top: 8px;
  background: linear-gradient(0deg, var(--app-surface) 70%, transparent);
  border-top-color: var(--app-border-subtle);
  backdrop-filter: blur(16px);
}

.app-tabbar--da .app-tab {
  font-size: 0.6875rem;
  padding-bottom: 4px;
}

.app-tabbar--da .app-tab--active {
  color: var(--app-accent);
}

.app-tabbar--da .app-tab--fab {
  position: relative;
  top: -18px;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
  color: var(--app-accent-text);
  background: linear-gradient(145deg, var(--app-accent), #ff9533);
  box-shadow: var(--app-shadow-fab);
}

.app-tabbar--da .app-tab--fab.app-tab--active {
  color: var(--app-accent-text);
  background: linear-gradient(145deg, var(--app-accent-hover), #ffb347);
}

.app-tab__fab-icon {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
}

.app-frame--da .produit-carte--actif {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  box-shadow: 0 0 0 1px var(--app-accent-ring);
}

.app-frame--da .produit-carte--actif .produit-carte__icone {
  background: var(--app-accent);
  color: var(--app-accent-text);
}

.app-frame--da .bouton-action,
.app-frame--da .reglages__btn:not(.reglages__btn--secondaire):not(.reglages__btn--lien) {
  color: var(--app-accent-text);
  background: linear-gradient(135deg, var(--app-accent), #ff9533);
  font-weight: 600;
}

.app-frame--da .bouton-action:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--app-accent-hover), #ffb347);
}

.app-frame--da .releve-hero {
  border-radius: var(--app-radius-lg);
  border-color: var(--app-border-subtle);
  background: linear-gradient(160deg, var(--app-surface-2), var(--app-surface));
  box-shadow: var(--app-shadow-card);
}

.app-frame--da .instrument__badge,
.app-frame--da .releve-entete__chip {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

.app-frame--da .releve-entete__devis {
  color: var(--app-accent);
  border-color: var(--app-accent-ring);
}

.app-frame--da .financier__onglet--actif,
.app-frame--da .financier__produit--actif {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}

.app-frame--da .financier__produit--actif .financier__produit-prix {
  color: var(--app-accent);
}

.app-frame--da #section-carte {
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  border: 1px solid var(--app-border-subtle);
  box-shadow: var(--app-shadow-card);
}

.app-frame--da .reglages-materiaux__accordeon[open] > .reglages-materiaux__accordeon-titre {
  color: var(--app-accent);
}

.portail-acces .bouton-action {
  background: linear-gradient(135deg, var(--app-accent), #ff9533);
  color: var(--app-accent-text);
  font-weight: 600;
  border-radius: var(--app-radius);
}

.app-frame--da .calibrage__piste-inner {
  background: linear-gradient(90deg, var(--app-accent), #ffb347);
}

.app-frame--da .calibrage__etape--actif {
  color: var(--app-accent);
}

.app-frame--da .jobber-app__btn--primaire,
.app-frame--da .jobber-app__btn--jobber {
  background: linear-gradient(135deg, var(--app-accent), #ff9533);
  color: var(--app-accent-text);
}