/* ArtisanManager — thème de l'application (chargé après app.css, qu'il redéfinit).
   Palette « matériaux » : ardoise (l'encre, la barre de navigation), chaux (le fond), terre cuite (l'action),
   laiton (l'accent sur fond sombre), sauge (ce qui est réussi). Titres en Young Serif, texte en Schibsted Grotesk.
   Contrastes vérifiés : terre cuite #B4462F sous texte blanc 5,4:1 ; texte secondaire #4A524C 8,1:1 sur blanc. */

@font-face { font-family: "Young Serif"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/static/fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); }
:root {
  --am-encre: #17201C;
  --am-encre-2: #26312C;
  --am-chaux: #F6F2EA;
  --am-chaux-2: #EEE7DB;
  --am-terre: #B4462F;
  --am-terre-2: #983A26;
  --am-terre-vif: #E0724F;
  --am-terre-pale: #F7E4DC;
  --am-laiton: #C9A24D;
  --am-sauge: #5E7D69;

  --am-marine: var(--am-encre);
  --am-marine-2: var(--am-encre-2);
  --am-sarcelle: var(--am-terre);
  --am-sarcelle-2: var(--am-terre-2);
  --am-sarcelle-pale: var(--am-terre-pale);
  --am-orange: var(--am-laiton);

  --mur: #EFE9DE;
  --mur-2: #E6DFD2;
  --email: var(--am-chaux);
  --carton: #FFFFFF;
  --carton-2: #FAF7F1;
  --alu: #DDD5C6;
  --alu-clair: #EEE8DD;
  --alu-sombre: #A39A8A;
  --filet: #E6DED0;
  --filet-fort: #D1C7B5;

  --encre: #1E2622;
  --encre-2: #4A524C;
  --encre-3: #636A63;

  --f-demande: #EFD08A;
  --f-visite: #E9B690;
  --f-devis: #C8D5CD;
  --f-facture: #B9D2BD;
  --f-avoir: #EBC4B9;
  --f-client: #E3DDD1;
  --f-mail: #D8D1E4;

  --ruban: var(--am-encre);
  --ruban-actif: var(--am-terre);
  --ruban-clair: var(--am-terre-pale);

  --r: 12px;
  --r-sm: 9px;
  --r-xs: 6px;
  --ombre-fiche: 0 1px 2px rgba(23, 32, 28, .05), 0 6px 18px -10px rgba(23, 32, 28, .18);
  --ombre-tiree: 0 2px 4px rgba(23, 32, 28, .06), 0 18px 36px -16px rgba(23, 32, 28, .30);
  --ombre-ruban: none;
  --ombre-lg: 0 28px 64px -24px rgba(23, 32, 28, .38);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titre: "Young Serif", Georgia, "Times New Roman", serif;
  --etroit: 100%;
  --mi-etroit: 100%;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { scrollbar-color: #C9BFAE transparent; }
body { font-synthesis: none; font-feature-settings: "ss01" on, "cv11" on; }
h1, h2, h3, .card-head h2 { font-family: var(--titre); font-weight: 600; letter-spacing: -.012em; font-stretch: normal; font-variation-settings: "opsz" 48; }
h1 { font-size: 1.75rem; }
::selection { background: var(--am-terre-pale); }

/* ─── Coquille ─────────────────────────────────────────────── */
body.app { background: var(--am-chaux); }
.topbar { background: var(--am-encre); box-shadow: none; }
.board { background: transparent; border: 0; box-shadow: none; }
.board::before, .board::after { display: none; }
.board-cap { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-logo { width: 28px; height: 28px; flex: none; }
/* Le nom s’écrit d’un seul mot, comme sur la page d’accueil : « Artisan » puis « Manager » (DESIGN.md). */
.brand-mark, .topbar .brand-mark { font-family: var(--titre); font-weight: 650; font-size: 1.125rem; letter-spacing: -.01em; text-transform: none; background: none; box-shadow: none; padding: 0; height: auto; color: var(--am-encre); font-stretch: normal; }
.brand-name, .topbar .brand-name { font-family: var(--titre); font-style: normal; font-weight: 400; font-size: 1.125rem; letter-spacing: -.01em; color: var(--am-terre); font-stretch: normal; margin-left: -9px; }
.topbar .brand-mark { color: #fff; }
.topbar .brand-name { color: var(--am-laiton); }
.brand-lg .brand-mark, .brand-lg .brand-name { font-size: 1.5rem; height: auto; padding: 0; }
.brand-lg .brand-logo { width: 36px; height: 36px; }

@media (min-width: 900px) {
  .rail { background: var(--am-encre); border: 0; box-shadow: none; }
  .rail::before, .rail::after { display: none; }
  .rail .plaque, .rail .brand { background: none; border: 0; box-shadow: none; }
  .plaque-texte { color: #fff; }
  .plaque-nom { font-family: var(--titre); font-weight: 600; color: #fff; }
  .plaque-app { color: var(--am-laiton); font-family: var(--font); letter-spacing: .08em; }
  .rail .nav-link { color: rgba(246, 242, 234, .74); background: none; border-radius: 10px; box-shadow: none; font-family: var(--font); font-weight: 550; font-stretch: normal; letter-spacing: 0; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
  .rail .nav-link:hover { color: #fff; background: rgba(246, 242, 234, .08); transform: translateX(2px); }
  .rail .nav-link.active { color: #fff; background: rgba(224, 114, 79, .16); box-shadow: inset 3px 0 0 var(--am-terre-vif); }
  .rail .nav-link .ico { color: inherit; }
  .rail-foot, .rail-foot .who { color: rgba(246, 242, 234, .7); }
  .rail-foot .linklike { color: rgba(246, 242, 234, .86); }
  /* Lien vers la console de la plateforme (administrateurs seulement). */
  .rail-admin { display: block; margin: 0 0 12px; padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(201, 162, 77, .45); color: var(--am-laiton); font-weight: 600; text-decoration: none; }
  .rail-admin:hover, .rail-admin.active { color: #fff; border-color: var(--am-laiton); background: rgba(201, 162, 77, .12); }
}

.main { padding-top: 22px; }
.page-head h1 { font-size: 1.75rem; }
@media (min-width: 900px) { .page-head h1 { font-size: 2.125rem; } }
.page-head .sub { color: var(--encre-2); }

/* Libellés en casse normale (les étiquettes en capitales étaient la marque de l'ancien design). */
.nav-link, .tabs .tab, .tab { text-transform: none; letter-spacing: 0; font-stretch: normal; }
.rail .nav-link { font-size: .98rem; }
.tabs .tab { font-weight: 600; border-radius: 999px; }

/* ─── Surfaces ─────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre-fiche); }
.card-head h2 { font-size: 1.125rem; }
.kpi { background: #fff; border: 1px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre-fiche); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre-tiree); }
.kpi-value { font-family: var(--titre); font-weight: 600; }
.table-wrap { border-radius: 14px; }
.table th { font-family: var(--font); font-weight: 600; letter-spacing: .02em; font-stretch: normal; }
.flash { border-radius: 12px; }
.alert { border-radius: 12px; }

/* ─── Boutons et champs ────────────────────────────────────── */
.btn { border-radius: 11px; font-weight: 600; font-stretch: normal; letter-spacing: 0; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--am-terre); color: #fff; box-shadow: 0 1px 2px rgba(152, 58, 38, .35); }
.btn-primary:hover { background: var(--am-terre-2); box-shadow: 0 6px 16px -6px rgba(152, 58, 38, .55); }
.btn-secondary { background: #fff; border-color: var(--filet-fort); color: var(--am-encre); }
.btn-secondary:hover { border-color: var(--am-terre); color: var(--am-terre-2); }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--am-terre); box-shadow: 0 0 0 3px rgba(180, 70, 47, .18); }
:focus-visible { outline-color: var(--am-terre); }
a { color: var(--am-terre-2); }

/* ─── Onglets du téléphone ─────────────────────────────────── */
.tabbar { background: rgba(255, 255, 255, .96); border-top: 1px solid var(--filet); box-shadow: 0 -8px 24px -18px rgba(23, 32, 28, .35); }
.tabbar a { color: var(--encre-3); font-stretch: normal; }
.tabbar a.active { color: var(--am-terre); }
.tabbar a.active > span:not(.aimant):not(.sr-only) { background: none; color: var(--am-terre); font-weight: 650; }

/* ─── Pages publiques (connexion, inscription, devis client) ─ */
body.public { background: var(--am-chaux); }
body.auth { background: radial-gradient(120% 80% at 10% 0%, #fff 0%, var(--am-chaux) 55%, var(--am-chaux-2) 100%); }
.auth-card { border-radius: 20px; border: 1px solid var(--filet); box-shadow: var(--ombre-lg); background: #fff; }
/* En-tête de la carte (connexion, inscription, mot de passe) : fond ardoise, comme la barre du haut. Sélecteur aussi précis
   que celui de app.css (.auth-card .auth-tete, fond blanc), sinon « Artisan », écrit en blanc, disparaissait. */
.auth-card .auth-tete { background: var(--am-encre); border-bottom: 0; border-radius: 20px 20px 0 0; }
.auth-tete .brand-mark { color: #fff; }
.auth-tete .brand-name { color: var(--am-laiton); }
.auth-liens a { color: var(--am-terre-2); }

/* ─── Bandeaux (abonnement, mise en route) ─────────────────── */
.bandeau { border-radius: 12px; }

/* ─── Mouvement : jamais pour qui l'a désactivé ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}