/* ════════════════════════════════════════════════════════════════════════
   LE FOURNIL — identité visuelle du portail Le Pain du Jour.

   Le portail portait jusqu'ici le costume d'Odoo : violet, gris, cartes
   pastel. Propre, mais c'était le back-office de n'importe qui. Cette
   feuille lui donne les couleurs de son métier : la croûte, la braise, la
   mie, la farine. Chargée en dernier, elle redéfinit les variables du thème
   précédent — toutes les pages suivent sans être réécrites.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─ La matière ─────────────────────────────────────────────────────── */
  --four:      #241A14;   /* intérieur du four éteint — texte et blocs forts */
  --four-doux: #3B2D23;
  --croute:    #B5623A;   /* croûte cuite : terre, pas orange vif           */
  --braise:    #E0972F;   /* la braise — accents et chiffres qui montent    */
  --braise-pale:#F5D9A8;
  --mie:       #FDFBF7;   /* blanc chaud : le fond des pages                */
  --farine:    #F2EBE1;   /* surfaces posées sur la mie                     */
  --farine-2:  #E5DACB;   /* filets, séparateurs                            */
  --feuille:   #2D5F4C;   /* bissap, menthe : ce qui va bien                */
  --feuille-pale:#DCEBE3;
  --brique:    #A8342A;   /* ce qui ne va pas                               */
  --brique-pale:#F7E3E0;

  /* ─ Reprise des variables du thème précédent : tout suit ───────────── */
  --odoo-purple: var(--four);
  --odoo-purple-dark: #12100E;
  --odoo-teal: var(--croute);
  --odoo-text: #3A2E26;
  --odoo-text-strong: var(--four);
  --odoo-text-muted: #8A7A6C;
  --odoo-line: var(--farine-2);
  --odoo-active: var(--farine);

  --kpi-blue:  #F6F1E8;
  --kpi-cream: #FBF4E9;
  --kpi-sand:  #F7EFE3;
  --kpi-mist:  #F0F4F0;

  --ch-blue: #E3B778;
  --ch-blue-line: var(--croute);
  --ch-pink: #E2A79A;
  --ch-teal: #A9C7B7;
  --ch-orange: var(--braise-pale);

  --color-brand: var(--croute);
  --color-brand-hover: #96502F;

  /* Statuts du stock, alignés sur la même matière */
  --stk-ok: var(--feuille);      --stk-ok-bg: var(--feuille-pale);
  --stk-low: #9A6212;            --stk-low-bg: #FAEEDA;
  --stk-out: var(--brique);      --stk-out-bg: var(--brique-pale);
  --stk-track: var(--farine);
  --stk-line: var(--farine-2);
  --stk-ok-fill:  linear-gradient(90deg, #7FAE97, var(--feuille));
  --stk-low-fill: linear-gradient(90deg, var(--braise-pale), var(--braise));
  --stk-out-fill: linear-gradient(90deg, #D9A29B, var(--brique));
}

body { background: var(--mie); color: var(--odoo-text); }
.main { background: var(--mie); }

/* ─── Barre supérieure : le four ─────────────────────────────────────── */
.appbar { background: var(--four) !important; height: 50px; }
.appbar__user-avatar { background: var(--croute); border-radius: 50%; }
.appbar__app {
  font-weight: 500; letter-spacing: .4px;
  color: var(--braise-pale) !important;
}
.appbar__title { letter-spacing: -.2px; }

/* ─── Barre latérale ─────────────────────────────────────────────────── */
.rail { background: var(--mie); border-right: 1px solid var(--farine-2); }
.rail__section {
  color: var(--odoo-text-muted); font-size: 10px; letter-spacing: 1px;
}
.rail__link { border-radius: 7px; }
.rail__link:hover { background: var(--farine); }
.rail__link.active { background: var(--farine) !important; font-weight: 600; }
.rail__link.active::before { background: var(--croute); }
.rail__link.active .rail__link-icon { color: var(--croute); }

/* ─── Titres ─────────────────────────────────────────────────────────── */
.page-title {
  font-weight: 300; letter-spacing: -.8px; color: var(--four);
  font-size: 30px;
}
.page-subtitle { color: var(--odoo-text-muted); }
.panel__title {
  color: var(--four) !important; font-weight: 600 !important;
  font-size: 15px !important; letter-spacing: -.1px;
}
.panel__header { border-bottom: 1px solid var(--farine-2); }

/* ════════════════════════════════════════════════════════════════════════
   LE BLOC DU JOUR — la seule question qui compte : comment va la journée ?
   ════════════════════════════════════════════════════════════════════════ */
.jour {
  background: var(--four);
  border-radius: 16px;
  padding: 26px 30px 22px;
  margin-bottom: 18px;
  color: var(--mie);
  position: relative;
  overflow: hidden;
}
/* lueur de braise, discrète, en haut à droite */
.jour::after {
  content: ""; position: absolute; top: -140px; right: -90px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,151,47,.20), transparent 68%);
  pointer-events: none;
}
.jour__haut {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; position: relative; z-index: 1;
}
.jour__quand {
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--braise); font-weight: 600;
}
.jour__montant {
  font-size: clamp(40px, 7vw, 62px); font-weight: 200; line-height: 1;
  letter-spacing: -2.5px; margin-top: 8px;
  font-variant-numeric: tabular-nums; color: var(--mie);
}
.jour__montant .u {
  font-size: 20px; font-weight: 400; letter-spacing: 0;
  color: var(--braise-pale); margin-left: 8px;
}
.jour__compare {
  margin-top: 10px; font-size: 13px; color: #C9B9AB;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jour__delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-weight: 600; font-size: 12.5px;
}
.jour__delta[data-s="up"]   { background: rgba(122,181,150,.18); color: #96D6B4; }
.jour__delta[data-s="down"] { background: rgba(200,90,80,.18);  color: #E9A79F; }
.jour__delta[data-s="flat"] { background: rgba(255,255,255,.10); color: #C9B9AB; }

.jour__cotes { display: flex; gap: 30px; }
.jour__cote-lab {
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: #9C8B7D; font-weight: 600;
}
.jour__cote-val {
  font-size: 25px; font-weight: 300; margin-top: 3px;
  font-variant-numeric: tabular-nums; color: var(--mie);
}
.jour__cote-sub { font-size: 11.5px; color: #9C8B7D; margin-top: 1px; }

/* ─── LA SIGNATURE : la journée heure par heure ──────────────────────── */
/* Une boulangerie est structurée par l'heure : fournée, rush, fermeture.
   Cette bande montre où en est la journée — ce qui est fait, ce qui reste. */
.rythme { margin-top: 22px; position: relative; z-index: 1; }
.rythme__barres {
  display: flex; align-items: flex-end; gap: 3px; height: 62px;
}
.rythme__h {
  flex: 1; position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; min-width: 0;
}
.rythme__bar {
  width: 100%; border-radius: 3px 3px 0 0; height: 0;
  background: linear-gradient(180deg, var(--braise), var(--croute));
  transition: height .8s cubic-bezier(.22,.61,.36,1);
}
/* heures pas encore arrivées : le futur reste ouvert */
.rythme__h[data-etat="futur"] .rythme__bar {
  background: rgba(255,255,255,.07);
  min-height: 3px;
}
.rythme__h[data-etat="maintenant"] .rythme__bar {
  background: linear-gradient(180deg, #FFD27A, var(--braise));
  box-shadow: 0 0 14px rgba(224,151,47,.55);
}
.rythme__h[data-etat="maintenant"]::after {
  content: ""; position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%;
  background: var(--braise);
  animation: rythmePulse 2.2s ease-in-out infinite;
}
@keyframes rythmePulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%      { opacity: .35; transform: translateX(-50%) scale(1.5); }
}
.rythme__axe {
  display: flex; gap: 3px; margin-top: 11px;
  font-size: 9.5px; color: #8A7768; letter-spacing: .3px;
}
.rythme__axe span { flex: 1; text-align: center; min-width: 0; }
.rythme__axe span[data-fort] { color: var(--braise); font-weight: 700; }
.rythme__legende {
  margin-top: 10px; font-size: 11.5px; color: #9C8B7D;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ─── Les repères : hier, la semaine, le mois ────────────────────────── */
.reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.repere {
  background: var(--mie); border: 1px solid var(--farine-2);
  border-radius: 12px; padding: 14px 16px;
  transition: border-color .2s ease, transform .2s cubic-bezier(.22,.61,.36,1);
}
.repere:hover { border-color: var(--croute); transform: translateY(-2px); }
.repere__lab {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--odoo-text-muted); font-weight: 700;
}
.repere__val {
  font-size: 21px; font-weight: 300; color: var(--four); margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.repere__sub { font-size: 11.5px; color: var(--odoo-text-muted); margin-top: 2px; }

/* ─── Cartes et panneaux hérités : on adoucit ────────────────────────── */
.kpi-card, .stk-tile { border-radius: 12px; }
.story-banner {
  background: var(--kpi-cream); border-left: 3px solid var(--braise) !important;
  border-radius: 12px;
}
.btn-primary {
  background: var(--croute) !important; border-color: var(--croute) !important;
  border-radius: 8px;
}
.btn-primary:hover { background: #96502F !important; }
.btn-ghost { border-radius: 8px; border-color: var(--farine-2); }
.btn-ghost:hover { background: var(--farine); }
.stk-btn--go { background: var(--croute); }
.ranked-item__avatar { background: var(--croute); }
table.gn thead th { border-bottom-color: var(--four) !important; }
.progress-bar__fill { background: var(--croute); }
.footer { border-top-color: var(--farine-2); }

/* ─── Adaptation aux petits écrans : la directrice consulte au téléphone ─ */
@media (max-width: 720px) {
  .jour { padding: 20px 18px 18px; border-radius: 14px; }
  .jour__haut { gap: 16px; }
  .jour__cotes { gap: 22px; width: 100%; }
  .jour__montant { letter-spacing: -1.5px; }
  .rythme__barres { height: 48px; }
  .rythme__axe span:nth-child(even) { visibility: hidden; }
  .page-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rythme__bar { transition: none; }
  .rythme__h[data-etat="maintenant"]::after { animation: none; }
  .repere:hover { transform: none; }
}