/* =========================================================
   Ushirika — habillage des pages publiques (Gestion et Marché)
   Identité Ubora : bleu nuit (zones sombres), vert malachite (action), cuivre (repère), police Ubuntu.
   Mise en page d'un site institutionnel congolais : bandeau d'information, en-tête blanc aux liens
   en capitales, bouton d'appel en bloc plein, titres de section centrés à deux graisses,
   bandes pleine largeur alternées, angles francs, bouton « haut de page ».
   Chargé après les styles de chaque page. Même fichier dans server/public et marche/public.
   ========================================================= */
:root {
  --nuit-950: #071631;
  --nuit-900: #0a1f3f;
  --nuit-800: #12305c;
  --malachite-800: #146b40;
  --malachite-700: #1b7f4e;
  --malachite-600: #2fa36b;
  --malachite-100: #cdebd6;
  --malachite-50: #eaf6ec;
  --cuivre-700: #8f4b1f;
  --cuivre-600: #ad5b27; /* cuivre Ubora, à peine foncé : texte blanc lisible (4,9:1) */
  --cuivre-300: #e6a877;
  --gris-bande: #eef2f0;
  /* Jetons des pages */
  --brand: var(--malachite-700);
  --brand-700: var(--nuit-900);
  --brand-50: var(--malachite-50);
  --brand-100: var(--malachite-100);
  --accent: var(--cuivre-600);
  --accent-strong: var(--cuivre-700);
  --accent-50: #f8ece3;
  --bg: #ffffff;
  --surface: #ffffff;
  --line: #d9e3de;
  --line-strong: #bccbc4;
  --text: #0b1a33;
  --text-2: #4a5a66;
  --text-3: #5d6b74;
  --info: #12305c;
  --ombre: 0 1px 2px rgba(11, 26, 51, .05), 0 14px 34px -16px rgba(11, 26, 51, .22);
  --font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
body { background: #fff; color: var(--text); font-family: var(--font); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--malachite-800); text-underline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.01em; color: var(--nuit-900); }
h1 { font-weight: 700; }
::selection { background: var(--cuivre-300); color: var(--nuit-950); }
:focus-visible { outline: 3px solid var(--cuivre-600) !important; outline-offset: 3px; }

/* ---------- Bandeau d'information (au-dessus de l'en-tête) ---------- */
.bande-info { background: var(--nuit-900); color: #dfe8f2; font-size: .82rem; }
.bande-info .wrap, .bande-info > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.bande-info b { color: #fff; font-weight: 500; }
.bande-info .bande-droite { display: flex; gap: 14px; align-items: center; }
.bande-info a { color: #fff; text-decoration: none; }
.bande-info a:hover { color: var(--cuivre-300); }
@media (max-width: 560px) { .bande-info .bande-droite { display: none; } }

/* ---------- Boutons : angles francs, capitales ---------- */
.btn { border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn.primary, .btn.principal { background: var(--malachite-700); border-color: var(--malachite-700); color: #fff; }
.btn.primary:hover, .btn.principal:hover { background: var(--malachite-800); border-color: var(--malachite-800); }
.btn.accent { background: var(--cuivre-600); border-color: var(--cuivre-600); color: #fff; }
.btn.accent:hover { background: var(--cuivre-700); border-color: var(--cuivre-700); }
.btn:not(.primary):not(.principal):not(.accent) { border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; } }

/* ---------- Cartes : nettes, ombre douce au survol ---------- */
.carte, .card, .produit, .coop-carte, .entree, .espace, .profil, .opp, .raccourci, .choix, details {
  border: 1px solid var(--line); border-radius: 4px; box-shadow: none; background: #fff;
}
a.carte:hover, .produit:hover, .coop-carte:hover, .espace:hover, .raccourci:hover, .choix:hover, .profil:hover {
  border-color: var(--malachite-100); box-shadow: var(--ombre);
}
.produit img, .coop-carte img, .carte img { border-radius: 0; }

/* ---------- En-tête blanc, liens en capitales, appel en bloc cuivre ---------- */
.top, header.barre { background: #fff; color: var(--nuit-900); border-bottom: 0; box-shadow: 0 2px 14px rgba(11, 26, 51, .1); }
.top .logo, header.barre .logo { color: var(--nuit-900); font-weight: 700; letter-spacing: .01em; }
header.barre .logo small { color: var(--malachite-700); opacity: 1; font-weight: 500; }
/* Gestion : menus */
.top .menu > li > a, .top .menu > li > button, .top nav a { color: var(--nuit-900); text-transform: uppercase; font-weight: 700; font-size: .84rem; letter-spacing: .02em; border-radius: 0; white-space: nowrap; }
.top .menu > li > a:hover, .top .menu > li > button:hover, .top .menu > li.ouvert > button { background: transparent; color: var(--malachite-700); }
.top .menu a.cta, .top .cta-btn { background: var(--cuivre-600) !important; color: #fff !important; border-radius: 0 !important; padding-left: 18px !important; padding-right: 18px !important; align-self: stretch; display: inline-flex; align-items: center; }
.top .menu a.cta:hover, .top .cta-btn:hover { background: var(--cuivre-700) !important; }
.top .menu a[href="/inscription"] { border-color: var(--line-strong) !important; border-radius: 0; }
.top .deroulant { border: 1px solid var(--line); border-top: 3px solid var(--malachite-700); border-radius: 0; box-shadow: var(--ombre); }
.top .burger { color: var(--nuit-900); border-color: var(--line-strong); border-radius: 3px; }
@media (max-width: 960px) { .top .menu { background: #fff; border-bottom: 3px solid var(--malachite-700); box-shadow: var(--ombre); } }
/* Marché : boutons de l'en-tête et menu */
header.barre .btn-barre { color: var(--nuit-900); border-color: var(--line-strong); border-radius: 3px; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; }
header.barre .btn-barre:hover { background: var(--malachite-50); }
header.barre .nav-haut a { color: var(--nuit-900); text-transform: uppercase; font-weight: 700; font-size: .84rem; letter-spacing: .02em; border-radius: 0; opacity: 1; white-space: nowrap; }
header.barre .nav-haut a:hover { background: transparent; color: var(--malachite-700); }
header.barre .nav-haut a[aria-current="page"] { background: transparent; color: var(--malachite-700); box-shadow: inset 0 -3px 0 var(--malachite-700); }
header.barre .nav-haut a[href="/connexion#vendre"] { background: var(--cuivre-600); color: #fff; box-shadow: none; }
header.barre .nav-haut a[href="/connexion#vendre"]:hover, header.barre .nav-haut a[href="/connexion#vendre"][aria-current="page"] { background: var(--cuivre-700); color: #fff; }
header.barre .menu-haut a { color: var(--nuit-900); }
header.barre .menu-haut a:hover { background: var(--malachite-50); }
header.barre .menu-haut a.connexion-lien { border-color: var(--line-strong); border-radius: 3px; }
header.barre .menu-haut a.inscription-lien { color: #fff; background: var(--cuivre-600); border-radius: 3px; }
.menu-marche { background: #fff; border-top: 1px solid var(--line); border-bottom: 3px solid var(--malachite-700); }
.menu-marche .entree-menu { background: var(--gris-bande); color: var(--nuit-900); border: 1px solid var(--line); border-radius: 3px; }
.menu-marche .entree-menu:hover { background: var(--malachite-50); }
.menu-marche .entree-menu span { color: var(--text-2); opacity: 1; }
/* Barre du bas (téléphone) */
.nav-marche a[aria-current="page"] { color: var(--malachite-700) !important; }
.nav-marche a[aria-current="page"] svg { background: var(--malachite-50) !important; }

/* ---------- Bandeau d'ouverture : bleu nuit, voile sur la photo, grand titre blanc ---------- */
.hero { background: var(--nuit-900); position: relative; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, var(--malachite-600) 0 60%, var(--cuivre-600) 60% 100%); pointer-events: none; }
.hero h1 { color: #fff; letter-spacing: -.015em; text-shadow: 0 2px 18px rgba(7, 22, 49, .45); }
.hero p { color: #e3ebf3; }
.sur-titre { background: transparent; padding: 0; border-radius: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--cuivre-300); letter-spacing: .14em; font-size: .78rem; text-transform: uppercase; font-weight: 700; }
.sur-titre::before { content: ""; width: 26px; height: 2px; background: currentColor; }
/* Sur les bandeaux sombres, l'appel principal est cuivre, en bloc */
.hero .btn.primary, .hero .btn.principal { background: var(--cuivre-600); border-color: var(--cuivre-600); color: #fff; }
.hero .btn.primary:hover, .hero .btn.principal:hover { background: var(--cuivre-700); border-color: var(--cuivre-700); }
.hero .btn:not(.primary):not(.principal):not(.accent) { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.hero .btn:not(.primary):not(.principal):not(.accent):hover { background: rgba(255, 255, 255, .1); }

/* ---------- Sections : titres centrés en capitales, deux graisses ---------- */
main.wrap > section { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(8px, 2vw, 16px); }
main.wrap > section > h2 { font-size: clamp(1.45rem, 3vw, 2rem); color: var(--nuit-900); text-transform: uppercase; text-align: center; letter-spacing: .02em; font-weight: 700; margin-bottom: .5em; }
main.wrap > section > h2 .leger { font-weight: 400; color: var(--text-3); }
main.wrap > section > h2::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; background: linear-gradient(90deg, var(--malachite-700) 0 50%, var(--cuivre-600) 50% 100%); }
main.wrap > section > h2 + .sous, main.wrap > section > h2 + p { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }
.sous, .lead-section { font-size: 1.05rem; color: var(--text-2); }
/* Une section sur deux sur une bande grise pleine largeur */
main.wrap > section:nth-of-type(even) { background: var(--gris-bande); box-shadow: 0 0 0 100vmax var(--gris-bande); clip-path: inset(0 -100vmax); padding-bottom: clamp(32px, 5vw, 56px); }
main.wrap > section:nth-of-type(even) .carte, main.wrap > section:nth-of-type(even) .produit, main.wrap > section:nth-of-type(even) .coop-carte { background: #fff; }

/* ---------- Pied de page bleu nuit ---------- */
footer { background: var(--nuit-900); color: #c6d3e1; border-top: 5px solid var(--malachite-700); }
footer a { color: #fff; }
footer a:hover { color: var(--cuivre-300); }
footer h2, footer h3, footer b, footer strong { color: #fff; }

/* ---------- Pages de connexion et d'inscription : panneau bleu nuit, zone blanche ---------- */
.page > .marque { background: var(--nuit-900); position: relative; overflow: hidden; }
.page > .marque::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 163, 107, .3), transparent 65%); pointer-events: none; }
.page > .marque::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--malachite-600) 0 60%, var(--cuivre-600) 60% 100%); }
.page > .marque > * { position: relative; z-index: 1; }
.page > .marque h1, .page > .marque h2 { color: #fff; }
.page > .zone { background: #fff; }

/* ---------- Marché : détails de la vitrine ---------- */
.choix-entree, .prix-jour, .onglets, .comment, .confiance-bande { background: #fff; }
.comment { border-top: 1px solid var(--line); }
.pastilles button { border-color: var(--line-strong); border-radius: 3px; }
.pastilles button[aria-pressed="true"] { background: var(--nuit-900); border-color: var(--nuit-900); color: #fff; }
.onglets button { text-transform: uppercase; font-size: .86rem; letter-spacing: .03em; }
.onglets button[aria-selected="true"] { color: var(--nuit-900); box-shadow: inset 0 -3px 0 var(--malachite-700); }
.input, .select, .textarea, input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], select, textarea { border-radius: 3px; }

/* Marché : la navigation commune remplace le bouton « Mon suivi » propre à la page (ordinateur) */
@media (min-width: 861px) { header.barre a.btn-barre[href="/#suivi"] { display: none; } }
/* Espace acheteurs : bandeau bleu nuit comme les autres pages */
body > header:not(.barre):not(.top):not(.hero) { background: var(--nuit-900); }

/* ---------- Bouton « haut de page » ---------- */
.haut-de-page { position: fixed; right: 16px; bottom: 20px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--cuivre-600); color: #fff; box-shadow: 0 6px 18px rgba(11, 26, 51, .28); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.haut-de-page.visible { opacity: 1; pointer-events: auto; }
.haut-de-page:hover { background: var(--cuivre-700); }
.haut-de-page svg { width: 22px; height: 22px; }
@media (max-width: 860px) { body:has(.nav-marche) .haut-de-page { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .haut-de-page { transition: none; } }
@media print { .bande-info, .haut-de-page { display: none !important; } }
.leaflet-control-attribution a { color: #12305c !important; }
/* Titres posés sur un en-tête bleu nuit (espace acheteurs, pages simples) : en blanc */
body > header:not(.barre):not(.top) h1, body > header:not(.barre):not(.top) h2, body > header:not(.barre):not(.top) h3 { color: #fff; }
.citation h1, .citation h2, .citation h3 { color: #fff; }
.bandeau h1, .bandeau h2, .bandeau h3 { color: #fff; }
/* Liens légaux du pied de page */
footer .liens-legaux { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; }
footer .liens-legaux a { color: #fff; }