/* Styles shared by the five pages (index, login, reinitialiser, dashboard,
   estimateur). Linked before each page's own <style>, so a page rule of the
   same specificity always wins over the ones here: that is how a page adapts
   a shared component (login's full-width buttons reset on .modal-fermer, for
   instance) without touching this file. */

:root {
  --bg: #faf9f7; --card: #fff; --line: #e2ddd5; --ink: #1c1a17;
  --muted: #6b6459; --accent: #8a5a2b; --err: #c0341d; --ok: #2f6b45;
}

/* !important because this file loads before every page's own rules: without
   it, any page rule of equal specificity setting display (a flex row, a
   block label…) would come later and bring hidden elements back. */
.hidden { display: none !important; }

/* --- Header ---
   Sticky rather than fixed: it keeps its own place at the top of the flow,
   so no page has to reserve its height with a padding-top that goes stale
   as soon as the header wraps (phones, a long email address). min-height is
   the home page's height, where the menu links make the row taller: the
   other pages, without that menu, get the same header. */
header.topbar {
  position: sticky; top: 0; z-index: 2000; flex-shrink: 0; min-height: 65px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 14px 20px; display: flex; align-items: center; gap: 16px;
}
header.topbar .marque {
  font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
header.topbar .marque .logo { height: 24px; width: auto; flex-shrink: 0; }
header.topbar .droite { margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--muted); }
/* Phone widths: the brand keeps its line and the rest wraps below it,
   instead of pushing the page wider than the screen. */
@media (max-width: 640px) {
  header.topbar { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px; min-height: 0; }
  header.topbar .marque { white-space: nowrap; }
  header.topbar .droite { gap: 12px; font-size: 13px; flex-wrap: wrap; }
}

a.lien { color: var(--accent); cursor: pointer; text-decoration: none; }

.alerte {
  background: #fdf3f1; border: 1px solid var(--err); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 18px; color: var(--err);
}

/* --- Buttons ---
   Only the variants. The base button rule stays in each page: the app pages
   (dashboard, estimateur) and the form pages (login, reinitialiser) size it
   differently, and the home page has none at all. */
button.ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--line); padding: 7px 14px; font-size: 13px;
}
button.danger { background: var(--err); }

/* Show/hide toggle sitting inside a password field (.champ-mdp). */
button.oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: auto; margin: 0; padding: 6px; background: transparent;
  color: var(--muted); border: 0; border-radius: 4px; line-height: 0;
}
button.oeil:hover { filter: none; color: var(--ink); }

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(28,26,23,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 20px;
}
/* Specificity over .hidden alone — the modal must never stay visible
   regardless of which rule happens to come first. */
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--card); border-radius: 10px; padding: 28px;
  width: 100%; max-width: 440px; position: relative;
}
.modal-fermer {
  position: absolute; top: 10px; right: 10px; background: transparent;
  border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 8px;
}
.modal-fermer:hover { color: var(--ink); }
.modal-box h2 { font-size: 18px; margin: 0 0 16px; }
.modal-box textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 15px; background: #fff; color: var(--ink);
  font-family: inherit; resize: vertical;
}
.modal-box .boutons { display: flex; gap: 10px; justify-content: flex-end; }
.modal-choix { display: flex; flex-direction: column; gap: 10px; }
.modal-choix button { width: 100%; text-align: left; }