/* Charte graphique Les Artisans d'Azure */
@import url('https://fonts.googleapis.com/css2?family=Trirong:wght@700&family=Figtree:wght@400;600&display=swap');

/* Largeur commune des blocs (nav + cartes). Occupe presque tout l'ecran, plafonne
   sur les grands moniteurs. */
:root { --app-width: min(94vw, 76rem); }

body {
  background-color: #1c1e23; /* gris tres fonce, presque noir */
  font-family: 'Figtree', sans-serif;
  color: #0E0E1D;
  padding: 1.25rem;
}

/* Le carre principal de la page Soumission (etait limite a 42rem par Tailwind). */
.max-w-2xl { max-width: var(--app-width); }

/* Bandeau logo : le logo complet (clair) seul sur le fond fonce, au-dessus de la nav. */
.app-brand {
  max-width: var(--app-width);
  margin: 0.25rem auto 0.9rem;
  display: flex;
  justify-content: center;
}
.app-brand img { height: 3.4rem; width: auto; }
@media print { .app-brand { display: none !important; } }

/* Barre de navigation partagee : claire, sous le bandeau logo. */
.app-nav {
  max-width: var(--app-width);
  margin: 0 auto 1.25rem;
  background: #FFFFFF;
  color: #0E0E1D;
  border: 1px solid #E3DFD6;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.12);
}
.app-nav .nav-logo { height: 2.3rem; width: auto; }
.app-nav .nav-links { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; }
.app-nav .nav-links a {
  color: #6b7280;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
}
.app-nav .nav-links a:hover { color: #0E0E1D; background: rgba(14, 14, 29, 0.05); }
.app-nav .nav-links a.active { color: #fff; background: #C58E50; }
/* Sous-menu de la nav (ex. "Service Client" -> Bon matin / Suivi de production).
   Le chevron ouvre/ferme au clic (utile au toucher) ; le survol l'ouvre aussi
   sur desktop, en plus. Le lien principal navigue normalement. */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-row { display: flex; align-items: center; }
.nav-dropdown-caret {
  background: none; border: none; cursor: pointer; color: #6b7280;
  font-size: 0.65rem; padding: 0.4rem 0.6rem 0.4rem 0.1rem; line-height: 1;
}
.nav-dropdown-caret:hover { color: #0E0E1D; }
.nav-dropdown-menu {
  /* top:100% (pas de margin) : le menu touche la rangee du titre, sans trou
     mort ou la souris perd le survol en descendant vers les liens. L'espace
     visuel vient du padding-top, qui reste DANS la zone survolee. */
  display: none; position: absolute; top: 100%; left: 0; padding-top: 0.6rem;
  background: #FFFFFF; border: 1px solid #E3DFD6; border-radius: 8px;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.18); min-width: 190px; z-index: 30;
}
.nav-dropdown-menu > * { margin: 0 0.35rem 0.35rem; }
.nav-dropdown-menu a {
  display: block; padding: 0.5rem 0.7rem; font-size: 0.74rem; border-radius: 6px;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }

.app-nav .nav-user { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; color: #9ca3af; }
.app-nav .nav-user .nav-name { color: #0E0E1D; font-weight: 600; }
.app-nav .nav-user .nav-role {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: #F0EEE9; color: #6b7280; padding: 0.1rem 0.4rem; border-radius: 4px;
}
.app-nav .nav-user a { color: #89251A; text-decoration: none; font-weight: 600; }
.app-nav .nav-user a:hover { text-decoration: underline; }
@media print { .app-nav { display: none !important; } }

/* Cartes de contenu generiques (pages historique / profil) */
.page-card {
  max-width: var(--app-width);
  margin: 0 auto;
  background: #FCFBF8; /* blanc casse, plus doux que le blanc pur */
  border-top: 6px solid #C58E50;
  border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.12);
  padding: 1.75rem 2rem;
}

h1, h2, h3 {
  font-family: 'Trirong', serif;
  color: #0E0E1D;
}

.max-w-2xl {
  background-color: #FCFBF8;
  border-top: 6px solid #C58E50;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.12);
}

/* Boutons de langue */
.lang-btn {
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  border: 1px solid #C58E50;
  transition: all 0.2s;
}
.lang-btn.active {
  background-color: #C58E50;
  color: white;
}

/* Remappage des couleurs Tailwind sur la charte */
.bg-blue-600 { background-color: #0E0E1D !important; }
.bg-orange-500 { background-color: #C58E50 !important; }
.bg-green-600 { background-color: #0E0E1D !important; }
.bg-slate-600 { background-color: #363940 !important; }
.bg-red-500 { background-color: #89251A !important; }

input:focus, select:focus, textarea:focus {
  border-color: #C58E50 !important;
  box-shadow: 0 0 0 2px rgba(197, 142, 80, 0.2) !important;
}

button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  transition: all 0.2s;
}
button:active {
  transform: translateY(0px);
}

/* Etat "en cours" d'un bouton */
.btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bandeau sombre du resume */
.quote-summary-box {
  margin-top: 3rem;
  border: 2px solid #0f172a;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.summary-header-band {
  background-color: #0f172a;
  color: white;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary-header-band h2 {
  font-family: 'Trirong', serif;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: 1px;
  color: white;
}
.header-totals {
  text-align: right;
}
.total-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #94a3b8;
  display: block;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4px;
}
.total-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.summary-content {
  padding: 1rem 1.5rem;
}

@media print {
  @page { margin: 1cm; }
  body { background: white !important; padding: 0 !important; }
  .no-print, button, select, #status, .lang-container { display: none !important; }
  .max-w-2xl { box-shadow: none !important; border: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .quote-summary-box { border: 1px solid #0f172a !important; margin-top: 1rem !important; }
  .summary-header-band { background-color: #0f172a !important; -webkit-print-color-adjust: exact; }
}

/* Telephones et petites tablettes : on resserre et on empile. */
@media (max-width: 640px) {
  body { padding: 0.6rem; }
  .app-nav { flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem 0.75rem; }
  .app-nav .nav-links { order: 3; flex-basis: 100%; }
  .app-nav .nav-user { font-size: 0.66rem; gap: 0.4rem; }
  .page-card { padding: 1.1rem 1rem; }
  .max-w-2xl { padding: 1.25rem; }
  .summary-header-band { padding: 1rem; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .summary-content { padding: 0.75rem 1rem; }
  /* Les grilles a deux colonnes s'empilent sur telephone. */
  .grid-cols-2 { grid-template-columns: 1fr; }
}