/*
 * Foidora Marché — habillage aux couleurs de la plateforme.
 * Injectée par MarcheController à la place des scripts de test (les pages resources/marche/*.html
 * restent celles de la livraison). Tous les sélecteurs commencent par « html » : ils l'emportent ainsi
 * sur les styles de la page et sur ceux que foidora_marche_commun.js ajoute ensuite (<style id="fm-css">).
 *
 *   html.fm-integre : page affichée dans le cadre de l'application (logo et « Retour » masqués) ;
 *   html.fm-sombre  : thème sombre de la plateforme.
 */

/* ── Palette ──────────────────────────────────────────────────── */
html:root {
  --fm-bg: #F6F7F9; --fm-card: #FFFFFF; --fm-ink: #1B2336; --fm-muted: #667085; --fm-line: #EAECF0; --fm-soft: #F6F7F9;
  --fm-blue: #004E92; --fm-blue-bg: #E6EEF6; --fm-green: #039855; --fm-green-bg: #ECFDF3; --fm-red: #D92D20; --fm-red-bg: #FEF3F2;
  --fm-amber: #B54708; --fm-amber-bg: #FFFAEB; --fm-dark: #1B2336; --fm-accent: #F79009; --fm-r: 12px;
  --fm-sh: 0 1px 2px rgba(16, 24, 40, .05);
  --fm-input: #D0D5DD; --fm-focus: rgba(0, 78, 146, .14);
}
html.fm-sombre:root {
  --fm-bg: #1b1e24; --fm-card: #22252c; --fm-ink: #e6e9f0; --fm-muted: #a8b0bf; --fm-line: #2f3440; --fm-soft: #2a2e37;
  --fm-blue: #8cc6ff; --fm-blue-bg: rgba(140, 198, 255, .12); --fm-green: #6fd39a; --fm-green-bg: rgba(52, 211, 153, .13);
  --fm-red: #f97066; --fm-red-bg: rgba(240, 68, 56, .12); --fm-amber: #fbd36a; --fm-amber-bg: rgba(251, 191, 36, .12);
  --fm-dark: #e6e9f0; --fm-accent: #fdb022; --fm-sh: none; --fm-input: #3a404d; --fm-focus: rgba(140, 198, 255, .2);
  color-scheme: dark;
}

html body { font-family: "Rubik", "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; background: var(--fm-bg); color: var(--fm-ink); }
html h2, html h3 { color: var(--fm-ink); font-weight: 700; }

/* ── Barre du haut : claire, comme l'en-tête de la plateforme ─── */
html .fm-top { background: var(--fm-card); color: var(--fm-ink); border-bottom: 1px solid var(--fm-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
html .fm-top .in { gap: 14px; padding: 10px 18px; }
html .fm-logo { color: var(--fm-blue); font-weight: 800; letter-spacing: .5px; }
html .fm-logo small { color: var(--fm-muted); opacity: 1; font-weight: 500; letter-spacing: 0; }
html .fm-tabs { gap: 4px; padding: 4px; border-radius: 12px; background: var(--fm-soft); border: 1px solid var(--fm-line); }
html .fm-tabs button { color: var(--fm-muted); border: 0; border-radius: 9px; padding: 7px 12px; font-weight: 600; }
html .fm-tabs button:hover { background: transparent; color: var(--fm-ink); }
html .fm-tabs button.on { background: var(--fm-card); color: var(--fm-blue); font-weight: 700; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
html .fm-tabs .pastille { font-weight: 700; }
/* Boutons prévus pour un fond sombre (couleurs écrites en ligne par les pages) */
html .fm-top .fm-btn,
html .fm-top #deco { background: var(--fm-card) !important; color: var(--fm-ink) !important; border-color: var(--fm-input) !important; }
html .fm-top .fm-btn:hover { background: var(--fm-soft) !important; }
html .fm-top #qui .fm-small, html .fm-top #compte .fm-small { color: var(--fm-muted) !important; }

/* ── Intégré dans l'application ───────────────────────────────── */
html.fm-integre .fm-logo,
html.fm-integre #retour,
html.fm-integre .fm-badge-test { display: none !important; }
html.fm-integre .fm-top .in,
html.fm-integre .chantier-bar .in,
html.fm-integre .fm-wrap { max-width: none; }
html.fm-integre .fm-top .compte, html.fm-integre .fm-top #qui { margin-left: auto; }
html.fm-integre body { background: var(--fm-bg); }

/* ── Cartes, boutons, champs ──────────────────────────────────── */
html .fm-card { border-radius: 14px; border-color: var(--fm-line); box-shadow: var(--fm-sh); background: var(--fm-card); }
html .fm-btn { border-radius: 10px; border-color: var(--fm-input); background: var(--fm-card); color: var(--fm-ink); font-weight: 600; transition: background-color .15s ease, border-color .15s ease; }
html .fm-btn:hover { background: var(--fm-soft); border-color: var(--fm-input); }
html .fm-btn.pri { background: #004E92; border-color: #004E92; color: #fff; }
html .fm-btn.pri:hover { background: #003a6e; border-color: #003a6e; filter: none; }
html .fm-btn.ok { background: #039855; border-color: #039855; color: #fff; }
html .fm-btn.warn { background: #F79009; border-color: #F79009; color: #1B2336; }
html .fm-btn.dan { color: var(--fm-red); border-color: color-mix(in srgb, var(--fm-red) 35%, transparent); background: var(--fm-card); }
html .fm-btn.dan:hover { background: var(--fm-red-bg); }
html .fm-btn.ghost { background: transparent; border-color: transparent; }
html .fm-btn.sm { border-radius: 9px; }
html .fm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fm-focus); }
html label.fm-l { color: var(--fm-ink); font-weight: 600; }
html .fm-in, html select.fm-in, html textarea.fm-in { border-color: var(--fm-input); border-radius: 10px; background: var(--fm-card); color: var(--fm-ink); }
html .fm-in:focus { outline: none; border-color: var(--fm-blue); box-shadow: 0 0 0 3px var(--fm-focus); }
html .fm-chip { border-radius: 99px; font-weight: 600; }
html .fm-note { border-radius: 12px; }
html .fm-kpi { border-radius: 14px; background: var(--fm-card); border-color: var(--fm-line); }
html .fm-t th { text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
html .fm-modal { border-radius: 16px; background: var(--fm-card); color: var(--fm-ink); }
html .fm-modal .hd { border-radius: 16px 16px 0 0; }
html .fm-modal .ft { border-radius: 0 0 16px 16px; }
html .fm-modal-bg { background: rgba(16, 24, 40, .5); backdrop-filter: blur(2px); }
html .fm-toast { border-radius: 12px; }

/* Catalogue : barre du chantier et fiches articles */
html .chantier-bar { background: var(--fm-card); border-bottom-color: var(--fm-line); }
html .art { border-radius: 14px; border-color: var(--fm-line); background: var(--fm-card); }
html .art:hover { box-shadow: 0 12px 28px -14px rgba(16, 24, 40, .3); }
html .art .prix { color: var(--fm-ink); }
html .barre-sel { background: var(--fm-card); border-color: var(--fm-line); border-top-color: var(--fm-blue); border-radius: 12px; }
html .cat-li { border-radius: 9px; }

/* ── Mode sombre : surfaces écrites en blanc dans les pages ───── */
html.fm-sombre .art .img, html.fm-sombre .fm-map { background: #2a2e37; }
html.fm-sombre .fm-t td { border-bottom-color: var(--fm-line); }
html.fm-sombre .fm-steps span { background: var(--fm-card); border-color: var(--fm-line); color: var(--fm-muted); }
html.fm-sombre .tab-prix tr.sel td { background: rgba(140, 198, 255, .08); }
html.fm-sombre .best td { background: rgba(52, 211, 153, .08); }
html.fm-sombre .tab-prix .qte.a-saisir, html.fm-sombre #d-q.a-saisir { background: rgba(253, 176, 34, .08); }
html.fm-sombre .fm-in.champ-err { background: rgba(240, 68, 56, .08); }
html.fm-sombre .fm-note { border-color: var(--fm-line); color: var(--fm-ink); }
html.fm-sombre .fm-chip.ok, html.fm-sombre .fm-chip.warn, html.fm-sombre .fm-chip.err, html.fm-sombre .fm-chip.info { border-color: transparent; }
html.fm-sombre .fm-btn.warn { color: #1B2336; }
html.fm-sombre .fm-btn.pri { background: #2e7bd1; border-color: #2e7bd1; }
html.fm-sombre .fm-btn.pri:hover { background: #2569b5; border-color: #2569b5; }
html.fm-sombre .fm-toast { background: #2a2e37; color: #e6e9f0; }
html.fm-sombre .fm-toast.ok { background: #027A48; color: #fff; }
html.fm-sombre .fm-toast.err { background: #B42318; color: #fff; }
html.fm-sombre img { opacity: .95; }

/* ── Logo et onglets (posés par foidora_marche_habillage.js) ─────── */
html .fm-logo { display: flex; align-items: center; gap: 10px; }
html .fm-logo-img { height: 30px; width: auto; display: block; }
html .fm-logo-sombre { display: none; }
html.fm-sombre .fm-logo-clair { display: none; }
html.fm-sombre .fm-logo-sombre { display: block; }
html .fm-logo-txt { padding-left: 10px; border-left: 1px solid var(--fm-line); color: var(--fm-muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
html .fm-tabs button { display: inline-flex; align-items: center; gap: 7px; }
/* Page autonome (espace fournisseur) : logo et compte sur la première ligne, onglets en dessous */
html:not(.fm-integre) .fm-top .in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; row-gap: 10px; }
html:not(.fm-integre) .fm-top .fm-logo { grid-column: 1; grid-row: 1; }
html:not(.fm-integre) .fm-top #qui, html:not(.fm-integre) .fm-top .compte { grid-column: 3; grid-row: 1; }
html:not(.fm-integre) .fm-top .fm-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
html:not(.fm-integre) .fm-top .fm-tabs button { white-space: nowrap; }
html .fm-tabs button i.ph-bold { font-size: 1.05em; }

/* ── Dans l'application : le compte et la déconnexion sont ceux de la plateforme ── */
html.fm-integre #compte .fm-small, html.fm-integre #compte #deco,
html.fm-integre #qui .fm-small, html.fm-integre #qui #deco { display: none !important; }

/* ── Espace fournisseur : écran de connexion comme celui de la plateforme ──
   Carte en deux volets : à gauche le panneau bleu (candidature), à droite la connexion. */
html body:has(#main > .login) { min-height: 100vh; background: linear-gradient(160deg, #eef3fa 0%, #f6f7f9 55%, #f7f3ec 100%); }
html.fm-sombre body:has(#main > .login) { background: var(--fm-bg); }
html body:has(#main > .login) .fm-top { display: none; }
html #main > .login {
  max-width: 1120px; margin: clamp(24px, 7vh, 72px) auto; padding: 0;
  grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 24px; overflow: hidden; background: var(--fm-card);
  box-shadow: 0 30px 70px -30px rgba(16, 24, 40, .35);
}
html #main > .login > .fm-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 48px 52px; }
html #main > .login > .fm-card h2 { font-size: 28px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 6px; }
/* Volet de gauche : présentation et candidature */
html #main > .login > .fm-card:nth-child(2) {
  order: -1; display: flex; flex-direction: column; justify-content: center;
  color: #fff; position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, #1f5fae 0%, #0b4a8f 45%, #023466 100%);
}
html #main > .login > .fm-card:nth-child(2)::before {
  content: 'FOIDORA'; position: absolute; top: 40px; left: 52px;
  font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #fff;
}
html #main > .login > .fm-card:nth-child(2)::after {
  content: 'Espace fournisseur'; position: absolute; top: 40px; right: 52px;
  padding: 5px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; color: #fff;
}
html #main > .login > .fm-card:nth-child(2) h2 { color: #fff; font-size: 34px; line-height: 1.15; margin-top: 56px; }
html #main > .login > .fm-card:nth-child(2) p,
html #main > .login > .fm-card:nth-child(2) ol { color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.6; }
html #main > .login > .fm-card:nth-child(2) ol { padding-left: 20px !important; margin: 14px 0 26px !important; }
html #main > .login > .fm-card:nth-child(2) ol li { margin-bottom: 6px; }
html #main > .login > .fm-card:nth-child(2) .fm-btn.warn { border-radius: 12px; padding: 14px; font-size: 15px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
/* Volet de droite : connexion */
html #main > .login > .fm-card:first-child { display: flex; flex-direction: column; justify-content: center; }
html #main > .login > .fm-card:first-child > p { font-size: 15px; margin-bottom: 22px; }
html #main > .login > .fm-card:first-child .fm-in { padding: 12px 14px; font-size: 15px; }
html #main > .login > .fm-card:first-child .fm-btn.pri { border-radius: 12px; padding: 14px; font-size: 15px; margin-top: 8px; box-shadow: 0 10px 24px -12px rgba(0, 78, 146, .6); }
@media (max-width: 820px) {
  html #main > .login { margin: 16px; grid-template-columns: 1fr; }
  html #main > .login > .fm-card { padding: 32px 24px; }
  html #main > .login > .fm-card:nth-child(2)::before { top: 24px; left: 24px; }
  html #main > .login > .fm-card:nth-child(2)::after { top: 24px; right: 24px; }
  html #main > .login > .fm-card:nth-child(2) h2 { font-size: 26px; margin-top: 44px; }
}

/* Impression : toujours en clair */
@media print {
  html.fm-sombre:root { --fm-bg: #fff; --fm-card: #fff; --fm-ink: #1B2336; --fm-muted: #667085; --fm-line: #EAECF0; --fm-soft: #F6F7F9; color-scheme: light; }
}