/* Metropolus — feuille de style unique et centralisée (sans build, vanilla).
 *
 * CHARTE VISUELLE (Module 0, transversale). Toute couleur, police, rayon vit ICI,
 * en variables CSS. Ne JAMAIS coder une couleur en dur dans un composant.
 * Voir CHARTE.md à la racine du projet pour les rôles stricts.
 */

/* ===== Police : Manrope, auto-hébergée (déposer les .woff2 dans assets/fonts/) ===== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}

:root {
  /* --- Palette de marque : rôles STRICTS (charte §3). Un rôle = une couleur. --- */
  --sauge-profond: #55705E;  /* identité : en-tête, marque. Ne porte JAMAIS une action. */
  --sauge-moyen:   #93A899;  /* secondaire : contours, icônes discrètes, bouton tertiaire. */
  --sauge-clair:   #EDF1EE;  /* fonds neutres, badge « confirmée », surfaces douces. */
  --argile:        #A96248;  /* ACTION principale (bouton primaire, texte blanc). */
  --sable:         #E8C7B3;  /* action secondaire + fonds chauds. */
  --encre:         #1B1B24;  /* texte. */
  --sauge-fonce:   #3B5044;  /* texte sur fond sauge clair. */
  --brun-fonce:    #713823;  /* texte sur fond chaud clair (#F5EAE5). */
  --brun-sable:    #6B2F14;  /* texte sur sable. */
  --gris:          #6B6B76;  /* texte secondaire. */
  --chaud-clair:   #F5EAE5;  /* fond « en attente ». */
  --noeud-clair:   #D3DFD7;  /* nœuds du symbole sur fond sauge. */
  --blanc:         #FFFFFF;

  /* --- Rôles applicatifs (les composants n'utilisent QUE ceux-ci). ---
     Fond de page et fond de carte : NON définis par la charte → choix signalé
     (blanc + contour sauge fin), cohérent avec « surfaces plates ». */
  --page-bg:       var(--blanc);
  --surface:       var(--blanc);
  --surface-douce: var(--sauge-clair);
  --bord:          var(--sauge-moyen);
  --texte:         var(--encre);
  --texte-doux:    var(--gris);

  --identite:        var(--sauge-profond);
  --identite-texte:  var(--blanc);

  --action:          var(--argile);
  --action-texte:    var(--blanc);
  --action2-bg:      var(--sable);
  --action2-texte:   var(--brun-sable);
  --action3-bord:    var(--sauge-moyen);
  --action3-texte:   var(--sauge-fonce);

  --lien:  var(--argile);
  --focus: var(--argile);

  /* États système — NON définis par la charte (flash/validation) → dérivés du
     système chaud/sauge pour respecter les interdits (pas de vert vif, pas de bleu). */
  --succes-bg: var(--sauge-clair);  --succes-texte: var(--sauge-fonce);  --succes-bord: var(--sauge-profond);
  --info-bg:   var(--sauge-clair);  --info-texte:   var(--sauge-fonce);  --info-bord:   var(--sauge-moyen);
  --erreur-bg: var(--chaud-clair);  --erreur-texte: var(--brun-fonce);   --erreur-bord: var(--brun-fonce);

  /* Badges d'état de commande (charte §6). */
  --badge-neutre-bg:  var(--sauge-clair);  --badge-neutre-texte:  var(--sauge-fonce);
  --badge-cours-bg:   var(--sauge-profond);--badge-cours-texte:   var(--blanc);
  --badge-attente-bg: var(--chaud-clair);  --badge-attente-texte: var(--brun-fonce);

  /* Formes : surfaces plates, contours fins, rayons contrôlés (charte §9). */
  --rayon-controle: 8px;
  --rayon-carte:    14px;
  --bord-fin:       0.5px;

  --police: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--police);
  font-weight: 400;
  background: var(--page-bg);
  color: var(--texte);
  line-height: 1.5;
}
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== En-tête / navigation : surface d'IDENTITÉ (sauge profond). ===== */
.entete {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem 1.2rem;
  background: var(--identite);
  color: var(--identite-texte);
}
.marque {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; letter-spacing: -.4px; font-size: 1.15rem;
  color: var(--identite-texte);
}
.marque:hover { text-decoration: none; }
.marque .symbole { width: 1.5rem; height: 1.2rem; display: block; }
.nav { display: flex; gap: 1rem; }
.nav a { color: rgba(255,255,255,.85); }
.nav a:hover { color: var(--identite-texte); }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.utilisateur { color: rgba(255,255,255,.8); font-size: .9rem; }
.lien-langue {
  font-size: .8rem; border: var(--bord-fin) solid rgba(255,255,255,.6);
  padding: .1rem .4rem; border-radius: 4px; color: var(--identite-texte);
}
/* Actions dans l'en-tête sauge : variante à contour blanc pour rester lisibles
   (le tertiaire standard, sauge sur sauge, serait illisible — accessibilité §5). */
.entete .bouton-discret { border-color: rgba(255,255,255,.55); color: var(--identite-texte); }
.entete .bouton-discret:hover { background: rgba(255,255,255,.12); }
.entete-droite > a { color: rgba(255,255,255,.85); }

/* ===== Contenu ===== */
.contenu { max-width: 1000px; margin: 1.5rem auto; padding: 0 1.2rem; }
.pied { text-align: center; color: var(--texte-doux); padding: 2rem; font-size: .9rem; }
h1, h2, h3 { color: var(--texte); font-weight: 500; }

/* ===== Cartes / sections ===== */
.carte {
  background: var(--surface); border: var(--bord-fin) solid var(--bord);
  border-radius: var(--rayon-carte); padding: 1.2rem; margin-bottom: 1.2rem;
}
.section-titre {
  margin: 0 0 .8rem; font-size: .95rem; font-weight: 500;
  letter-spacing: 0; color: var(--texte-doux);
}

/* ===== Formulaires ===== */
.champ { margin-bottom: 1rem; }
.champ label { display: block; margin-bottom: .3rem; font-size: .9rem; color: var(--texte-doux); }
.champ .aide { display: block; font-size: .8rem; color: var(--texte-doux); margin-top: .2rem; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; background: var(--surface);
  border: var(--bord-fin) solid var(--bord); border-radius: var(--rayon-controle);
  color: var(--texte); font-size: .95rem; font-family: var(--police);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: none; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .grille-2 { grid-template-columns: 1fr; } }

/* ===== Boutons : hiérarchie d'action à 3 niveaux, jamais plus (charte §4). ===== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border: var(--bord-fin) solid transparent;
  border-radius: var(--rayon-controle); font-family: var(--police); font-weight: 500;
  font-size: .95rem; cursor: pointer; text-align: center;
  background: var(--action); color: var(--action-texte);  /* primaire = argile */
}
.bouton:hover { background: #96543D; text-decoration: none; }        /* argile assombri */
/* Secondaire = sable, texte brun. Explore / continue. */
.bouton-2 { background: var(--action2-bg); color: var(--action2-texte); border-color: transparent; }
.bouton-2:hover { background: #dcb59c; }
/* Tertiaire = contour sauge, texte sauge foncé. Retrait / refus (JAMAIS rouge). */
.bouton-3, .bouton-discret {
  background: transparent; border: var(--bord-fin) solid var(--action3-bord); color: var(--action3-texte);
}
.bouton-3:hover, .bouton-discret:hover { background: var(--surface-douce); }
/* CTA essentiel = primaire mis en avant par la TAILLE (pas d'ombre : surfaces plates §9). */
.bouton-cle { font-size: 1.02rem; padding: .8rem 1.2rem; }
.actions { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; }

/* ===== Messages flash (états système, hors charte — signalé). ===== */
.flash { padding: .7rem 1rem; border-radius: var(--rayon-controle); margin-bottom: 1rem; font-size: .92rem; }
.flash-succes { background: var(--succes-bg); border: var(--bord-fin) solid var(--succes-bord); color: var(--succes-texte); }
.flash-erreur { background: var(--erreur-bg); border: var(--bord-fin) solid var(--erreur-bord); color: var(--erreur-texte); }
.flash-info   { background: var(--info-bg);   border: var(--bord-fin) solid var(--info-bord);   color: var(--info-texte); }

/* ===== Tableaux ===== */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { padding: .6rem .7rem; text-align: left; border-bottom: var(--bord-fin) solid var(--bord); font-size: .9rem; }
table.liste th { color: var(--texte-doux); font-weight: 500; }
.barre-outils { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 500; border: var(--bord-fin) solid transparent; }
/* Badges d'état de commande (charte §6) */
.badge-neutre, .badge-confirmee, .badge-ok { background: var(--badge-neutre-bg); color: var(--badge-neutre-texte); }
.badge-cours,  .badge-en-route { background: var(--badge-cours-bg); color: var(--badge-cours-texte); }
.badge-attente { background: var(--badge-attente-bg); color: var(--badge-attente-texte); }
/* Badges de contexte discrets (fenêtre de livraison, taxabilité) = sauge clair */
.badge-contexte { background: var(--surface-douce); color: var(--sauge-fonce); }
/* Actif / inactif (statut générique) */
.badge-actif { background: var(--sauge-clair); color: var(--sauge-fonce); }
.badge-inactif { background: transparent; color: var(--texte-doux); border-color: var(--bord); }

/* ===== Notation : étoile outline + valeur numérique (jamais 5 étoiles pleines). ===== */
.note-affichee { display: inline-flex; align-items: center; gap: .25rem; color: var(--sauge-fonce); font-weight: 500; }
.note-affichee .note-etoile svg { width: 1rem; height: 1rem; }
.note-affichee .note-sur, .note-affichee .note-nb { color: var(--texte-doux); font-weight: 400; }

/* ===== Alerte (rentabilité, etc.) — ton chaud d'attention, pas d'action. ===== */
.alerte { background: var(--chaud-clair); border: var(--bord-fin) solid var(--brun-fonce); color: var(--brun-fonce); padding: .7rem 1rem; border-radius: var(--rayon-controle); font-size: .9rem; margin-top: .5rem; }

/* ===== Icônes : jeu au trait (outline), jamais pleines ni colorées (charte §9). ===== */
.ico, .icone { display: inline-flex; }
.ico svg, .icone svg, svg.icone {
  width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* En-tête vitrine : liens panier / localisation */
.lien-panier, .lien-geo { color: rgba(255,255,255,.85); font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.lien-panier:hover, .lien-geo:hover { color: var(--identite-texte); }
.pastille { background: var(--action); color: var(--action-texte); border-radius: 999px; padding: 0 .4rem; font-size: .75rem; font-weight: 500; }

/* ===== Hero accueil ===== */
.hero { text-align: center; padding: 2rem 1.2rem; }
.hero h1 { margin: 0 0 .5rem; }
.hero .actions { justify-content: center; }

/* ===== Grille de produits ===== */
.grille-produits { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 1.5rem; }
.carte-produit {
  background: var(--surface); border: var(--bord-fin) solid var(--bord);
  border-radius: var(--rayon-carte); overflow: hidden; display: flex; flex-direction: column;
}
.cp-image { display: block; aspect-ratio: 1/1; background: var(--surface-douce); overflow: hidden; }
.cp-image img { width: 100%; height: 100%; object-fit: cover; }
.cp-image-vide { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sauge-moyen); }
.cp-image-vide svg { width: 2.4rem; height: 2.4rem; }
.cp-corps { padding: .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.cp-nom { font-weight: 500; color: var(--texte); }
.cp-boutique { font-size: .82rem; color: var(--texte-doux); }  /* nom boutique d'origine : toujours visible (§9) */
.cp-prix { font-size: 1.1rem; font-weight: 500; margin: .2rem 0 .4rem; }
.cp-corps form { margin-top: auto; }

/* ===== Fiche produit ===== */
.fiche-produit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .fiche-produit { grid-template-columns: 1fr; } }
.fp-image img { width: 100%; border-radius: var(--rayon-carte); object-fit: cover; }
.fp-prix { font-size: 1.6rem; font-weight: 500; margin: 1rem 0; }
.fp-boutique { color: var(--texte-doux); }

/* ===== Barre d'onglets mobile (PWA, style application) ===== */
.barre-onglets { display: none; }
@media (max-width: 900px) {
  body.vitrine .entete .nav,
  body.role-marchand .entete .nav { display: none; }
  .entete { position: sticky; top: 0; z-index: 40; }
  body.role-operateur .nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }

  .barre-onglets {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: var(--bord-fin) solid var(--bord);
    padding-bottom: var(--safe-bottom);
  }
  .barre-onglets a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .45rem 0 .5rem; color: var(--texte-doux); font-size: .68rem; text-decoration: none;
  }
  .barre-onglets a .ico svg { width: 1.4rem; height: 1.4rem; }
  .barre-onglets a.actif { color: var(--action); }
  body.vitrine, body.role-marchand { padding-bottom: 4.4rem; }

  .actions { flex-direction: column; align-items: stretch; }
  .actions .bouton, .actions .bouton-2, .actions .bouton-3, .actions .bouton-discret,
  .actions form, .actions form .bouton { width: 100%; text-align: center; }
  .bouton-cle { width: 100%; }
}
@media (max-width: 640px) {
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=number], input[type=search], select, textarea { font-size: 16px; } /* anti-zoom iOS */
}

/* ===== Pilotage — barres horizontales (rendu serveur, plates) ===== */
.ligne-barre { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.barre-label { width: 38%; font-size: .85rem; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre { flex: 1; height: .8rem; background: var(--surface-douce); border-radius: 999px; overflow: hidden; }
.barre-remplissage { display: block; height: 100%; background: var(--sauge-profond); }
.barre-valeur { width: 20%; text-align: right; font-size: .85rem; }

/* ===== Suivi de livraison — jalons ===== */
.suivi-jalons { list-style: none; padding: 0; margin: .5rem 0 0; }
.suivi-jalons .jalon { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; color: var(--texte-doux); }
.jalon-icone { width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: var(--bord-fin) solid var(--bord); font-size: .8rem; }
.jalon-fait { color: var(--texte); }
.jalon-fait .jalon-icone { background: var(--sauge-profond); border-color: var(--sauge-profond); color: var(--blanc); }
.jalon-en_cours { color: var(--texte); }
.jalon-en_cours .jalon-icone { border-color: var(--action); color: var(--action); }
.jalon-annulee .jalon-icone { border-color: var(--erreur-texte); color: var(--erreur-texte); }

/* ===== Pages d'authentification ===== */
.page-auth { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.2rem; background: var(--surface-douce); }
.carte-auth { background: var(--surface); border: var(--bord-fin) solid var(--bord); border-radius: var(--rayon-carte); padding: 2rem; width: 100%; max-width: 380px; }
.marque-auth { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -.4px; color: var(--identite); }
.marque-auth .symbole { width: 1.6rem; height: 1.3rem; }
.titre-auth { text-align: center; margin: 0 0 1.4rem; font-size: 1rem; color: var(--texte-doux); font-weight: 400; }
.carte-auth .bouton { width: 100%; }
.liens-auth { margin-top: 1rem; text-align: center; font-size: .88rem; }