/* Marcotullio — feuille unique. Teintes chaudes, bordeaux de la maison. */
:root {
  --bordeaux: #7b2d32; --bordeaux-fonce: #5e2125; --bordeaux-pale: #f6eceb;
  --encre: #1d2327; --gris: #626d73; --gris-clair: #98a2a8; --trait: #e6e1d8; --trait-fort: #d6cfc3;
  --fond: #f7f5f1; --blanc: #fff; --menu: #211b1c;
  --vert: #2e6b3e; --vert-pale: #e7f2ea; --ambre: #9a5b12; --ambre-pale: #fdf1df; --rouge: #b42318; --rouge-pale: #fdecea;
  --rayon: 12px; --ombre: 0 1px 2px rgba(29, 35, 39, .05), 0 4px 16px rgba(29, 35, 39, .04);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
h1 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { background: #f0ece6; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
[hidden] { display: none !important; }

/* Boutons */
button { font: inherit; cursor: pointer; }
.principal { background: var(--bordeaux); color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 600; transition: background .15s; }
.principal:hover { background: var(--bordeaux-fonce); }
.principal:disabled { opacity: .55; cursor: progress; }
.principal.large { width: 100%; padding: 12px; }
.secondaire { background: var(--blanc); color: var(--encre); border: 1px solid var(--trait-fort); border-radius: 9px; padding: 8px 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.secondaire:hover { border-color: var(--gris-clair); }
.lien-discret { background: none; border: 0; color: #c9bdbd; padding: 0; font-size: 13px; }
.lien-discret:hover { color: #fff; }
.icone-bouton { background: none; border: 0; color: var(--gris); padding: 6px; display: inline-flex; }

/* Connexion */
.connexion { min-height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion-visuel { background: linear-gradient(160deg, var(--bordeaux) 0%, var(--menu) 100%); color: #fff; padding: 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.marque-grande { font-family: Georgia, "Times New Roman", serif; font-size: 44px; letter-spacing: .01em; }
.connexion-visuel p { max-width: 420px; opacity: .8; font-size: 17px; }
.connexion-form { align-self: center; justify-self: center; width: min(380px, 88vw); display: flex; flex-direction: column; gap: 16px; }
.connexion-form h1 { margin-bottom: 8px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
input, textarea, select { font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 9px; padding: 10px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(123, 45, 50, .12); }
.champ-mdp { position: relative; display: flex; }
.champ-mdp input { flex: 1; padding-right: 40px; }
.champ-mdp .icone-bouton { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.erreur { color: var(--rouge); margin: 0; font-size: 14px; min-height: 1em; }
.erreur:empty { display: none; }
.discret { color: var(--gris); font-size: 13px; }

/* Coquille */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100%; }
.menu { background: var(--menu); color: #efe7e6; display: flex; flex-direction: column; padding: 22px 14px; position: sticky; top: 0; height: 100vh; }
.marque { font-family: Georgia, "Times New Roman", serif; font-size: 22px; padding: 0 10px 22px; display: flex; flex-direction: column; }
.marque span { font-family: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a8999a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin-top: 2px; }
nav { display: flex; flex-direction: column; gap: 2px; }
nav a { display: flex; align-items: center; gap: 10px; color: #cdc1c1; text-decoration: none; padding: 9px 10px; border-radius: 8px; font-weight: 500; }
nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
nav a.actif { background: rgba(255, 255, 255, .1); color: #fff; }
.menu-pied { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 8px; }
.utilisateur { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bordeaux); display: grid; place-items: center; font-weight: 700; font-size: 13px; text-transform: uppercase; }
.contenu { padding: 36px 44px 64px; max-width: 1240px; width: 100%; }
.entete-vue { margin-bottom: 22px; }
.entete-vue p { color: var(--gris); margin: 0; }
.carte-blanche { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }

/* Composeur */
.composeur { padding: 6px; }
.composeur textarea { width: 100%; border: 0; resize: vertical; min-height: 110px; font-size: 16px; padding: 14px 14px 8px; box-shadow: none; }
.barre-outils { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-top: 1px solid var(--trait); }
.outils { display: flex; gap: 6px; }
.outil { flex-direction: row; display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; color: var(--gris); padding: 7px 11px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.outil:hover { background: var(--fond); color: var(--encre); }
.outil.enregistre { color: var(--rouge); background: var(--rouge-pale); }
.outil.enregistre svg { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.composeur .erreur { padding: 0 14px 10px; }
.fichiers { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.fichier { display: inline-flex; align-items: center; gap: 6px; background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 13px; }
.fichier button { background: none; border: 0; color: var(--gris); padding: 0 4px; font-size: 16px; line-height: 1; }
.exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 2px 26px; }
.exemples > span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-clair); margin-right: 4px; }
.puce-exemple { background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.puce-exemple:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

/* Attente */
.attente { padding: 22px 26px; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.etapes li { display: flex; align-items: center; gap: 10px; color: var(--gris-clair); font-weight: 500; }
.etapes li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--trait-fort); }
.etapes li.encours { color: var(--encre); }
.etapes li.encours::before { border-color: var(--bordeaux); border-top-color: transparent; animation: tour 0.9s linear infinite; }
.etapes li.fait { color: var(--vert); }
.etapes li.fait::before { background: var(--vert); border-color: var(--vert); }
@keyframes tour { to { transform: rotate(360deg); } }

/* Resultat */
.synthese { padding: 22px 24px; margin-bottom: 18px; }
.synthese-haut { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.synthese .meta { color: var(--gris); font-size: 13px; margin-top: 4px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.puce { background: var(--bordeaux-pale); color: var(--bordeaux); border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 500; }
.alerte { display: flex; gap: 10px; background: var(--ambre-pale); color: #6d420c; border-radius: 9px; padding: 10px 12px; margin-top: 12px; font-size: 13.5px; }
.alerte svg { color: var(--ambre); margin-top: 1px; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 0; overflow-x: auto; }
.onglet { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--gris); font-weight: 600; white-space: nowrap; }
.onglet.actif { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.panneau { padding: 18px 22px 8px; }
.panneau > p { color: var(--gris); margin: 0 0 12px; }
.produit { display: grid; grid-template-columns: 112px 1fr 150px; gap: 16px; padding: 14px 0; border-top: 1px solid var(--trait); }
.produit:first-of-type { border-top: 0; }
.role { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; padding-top: 3px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.nom { font-weight: 600; }
.desc { color: var(--gris); font-size: 13.5px; white-space: pre-line; margin-top: 2px; }
.pourquoi { font-size: 13px; color: #4e5a60; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--trait-fort); }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.badge { font-size: 11.5px; font-weight: 600; border-radius: 5px; padding: 1px 7px; }
.badge.ok { background: var(--vert-pale); color: var(--vert); }
.badge.verif { background: var(--ambre-pale); color: var(--ambre); }
.badge.allergene { background: #f1eef9; color: #5b4a99; }
.badge.ancien { background: #eeeeee; color: #666; }
.chiffres { text-align: right; }
.prix { font-weight: 700; font-size: 15px; }
.prix.formule { font-weight: 500; font-size: 13px; color: var(--gris); }
.qte { font-size: 13px; color: var(--gris); margin-top: 2px; }
.bloc { padding: 18px 22px; margin-top: 18px; }
.bloc h2 { margin-bottom: 6px; }
.bloc ul { margin: 6px 0 0; padding-left: 20px; }

/* Historique */
.ligne-historique { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--trait); cursor: pointer; }
.ligne-historique:first-child { border-top: 0; }
.ligne-historique:hover { background: #fbfaf8; }
.ligne-historique .quand { color: var(--gris); font-size: 13px; white-space: nowrap; }
.vide { padding: 28px; color: var(--gris); text-align: center; }

/* Notification */
.notification { position: fixed; bottom: 22px; right: 22px; background: var(--encre); color: #fff; padding: 11px 16px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 14px; z-index: 50; }

@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion-visuel { padding: 36px; min-height: 180px; }
  .app { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 14px; gap: 12px; }
  .marque { padding: 0; font-size: 18px; } .marque span { display: none; }
  nav { flex-direction: row; } nav a { padding: 7px; font-size: 0; gap: 0; } nav a svg { width: 20px; height: 20px; }
  .menu-pied { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; align-items: center; } .utilisateur span:last-child { display: none; }
  .contenu { padding: 22px 16px 48px; }
  .produit { grid-template-columns: 1fr; gap: 4px; } .chiffres { text-align: left; }
}

/* Carte produits */
.barre-carte { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 14px; align-items: center; }
.barre-carte select { padding: 8px 10px; font-size: 14px; }
.recherche-carte { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait-fort); border-radius: 9px; padding: 0 10px; background: var(--blanc); }
.recherche-carte input { border: 0; box-shadow: none; flex: 1; padding: 9px 0; }
.recherche-carte svg { color: var(--gris-clair); }
.actions-carte { display: flex; gap: 8px; margin-left: auto; }
.actions-carte a { text-decoration: none; }
.table-carte { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-carte th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 600; padding: 11px 10px; border-bottom: 1px solid var(--trait); background: #fbfaf8; position: sticky; top: 0; }
.table-carte td { padding: 10px; border-bottom: 1px solid #f0ece6; vertical-align: top; }
.table-carte tbody tr { cursor: pointer; }
.table-carte tbody tr:hover { background: #fbf8f4; }
.table-carte tr.masque { opacity: .55; }
.table-carte .code { margin: 0; font-size: 13px; }
.col-case { width: 34px; }
.droite { text-align: right; white-space: nowrap; }
.sous { color: var(--gris); font-size: 12.5px; }
.pastille { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pastille.ok { background: var(--vert-pale); color: var(--vert); }
.pastille.verif { background: var(--ambre-pale); color: var(--ambre); }
.pastille.non { background: var(--rouge-pale); color: var(--rouge); }
.pastille.neutre { background: #f0eeea; color: var(--gris); }
.badge.client { background: #e8eefc; color: #2f4fa6; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: var(--gris); font-size: 14px; }
.pagination .pages { display: flex; gap: 10px; align-items: center; }
.pagination button:disabled { opacity: .4; cursor: default; }
.barre-selection { position: fixed; left: 50%; bottom: 22px; transform: translateX(calc(-50% + 124px)); background: var(--encre); color: #fff; border-radius: 12px; padding: 10px 12px 10px 18px; display: flex; gap: 14px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: 30; }
.lien { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; font-size: 14px; opacity: .85; }
.lien-clair { background: none; border: 0; color: #f3c6c9; font-weight: 600; text-decoration: underline; margin-left: 8px; padding: 0; }
.voile { position: fixed; inset: 0; background: rgba(29, 35, 39, .28); z-index: 40; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--blanc); z-index: 41; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0, 0, 0, .12); }
.tiroir-entete { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 14px; border-bottom: 1px solid var(--trait); }
.tiroir-entete h2 { font-size: 19px; margin-top: 2px; }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 6px 22px 22px; }
.tiroir-corps section { padding: 16px 0; border-bottom: 1px solid var(--trait); }
.tiroir-corps h3 { font-size: 15px; margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tiroir-corps h4 { font-size: 13px; color: var(--gris); margin: 14px 0 6px; font-weight: 600; }
.tiroir-corps label { margin-top: 12px; }
.tiroir-pied { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--trait); }
.tiroir-pied > span { margin-right: auto; }
.ftbe dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; }
.ftbe dt { color: var(--gris); }
.ftbe dd { margin: 0; }
.ligne-champ { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ligne-champ > span:first-child { width: 110px; font-weight: 500; font-size: 14px; }
.ligne-champ select { margin-left: auto; }
.segment { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 8px; overflow: hidden; margin-left: auto; }
.segment button { background: var(--blanc); border: 0; border-left: 1px solid var(--trait-fort); padding: 5px 11px; font-size: 13px; color: var(--gris); }
.segment button:first-child { border-left: 0; }
.segment button.actif { background: var(--bordeaux); color: #fff; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--gris); }
.choix button.actif { background: var(--bordeaux-pale); border-color: var(--bordeaux); color: var(--bordeaux); font-weight: 600; }
.grille-allergenes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.allergene-champ { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin: 0 !important; padding: 6px 6px 6px 10px; border-radius: 8px; border: 1px solid var(--trait); color: var(--encre); font-weight: 500; }
.allergene-champ select { padding: 4px 6px; font-size: 13px; }
.allergene-champ.contient, .allergene-champ.traces { border-color: #e6c7c4; background: var(--rouge-pale); }
.allergene-champ.absent, .allergene-champ.annonce_absent { border-color: #c9e0cf; background: var(--vert-pale); }
.origine { font-size: 11.5px; font-weight: 600; border-radius: 5px; padding: 1px 7px; background: #f0eeea; color: var(--gris); }
.origine.client { background: #e8eefc; color: #2f4fa6; }
.case { flex-direction: row; align-items: center; gap: 8px; color: var(--encre); font-weight: 500; margin-top: 16px !important; }
.historique-fiche, .journal { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.journal li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.historique-fiche li { padding: 4px 0; color: var(--gris); }
@media (max-width: 900px) {
  .barre-selection { transform: translateX(-50%); }
  .table-carte th:nth-child(4), .table-carte td:nth-child(4), .table-carte th:nth-child(7), .table-carte td:nth-child(7) { display: none; }
}
a.secondaire { text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .contenu { min-width: 0; }
  .synthese-haut { flex-direction: column; }
  .barre-outils { flex-wrap: wrap; gap: 8px; }
  .barre-outils .principal { flex: 1; }
  .puce-exemple { text-align: left; }
  .lien-discret { font-size: 0; } .lien-discret::after { content: "⎋"; font-size: 18px; }
  .table-carte { display: block; overflow-x: auto; }
  .grille-allergenes { grid-template-columns: 1fr; }
}
.etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.etiquettes span { font-size: 11px; background: #f3efe8; color: #6b5e4e; border-radius: 4px; padding: 0 6px; }