/* =========================================================================
   MMEC — Design system
   Charte graphique officielle Ma Mie Est Chaude, version 1.0 (juillet 2026).
   Couleurs et typographies exactes. Aucun gras, aucun italique : la
   hiérarchie se construit uniquement par la taille, la couleur, les cartouches.
   ========================================================================= */

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/Lora.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette officielle — codes exacts, ne jamais approximer */
  --brun-fournil: #7B4A21;   /* couleur principale : titres, barres, aplats */
  --brun-croute:  #5F3711;   /* renfort du brun */
  --dore-levain:  #F3BF4C;   /* accent : filets, liserés, soulignés */
  --caramel:      #C88850;   /* intermédiaire, pictogrammes */
  --caramel-clair:#E3B584;   /* lignes alternées, dégradés */
  --creme-mie:    #FBF6E3;   /* fond de tous les supports */
  --blanc-chignon:#F2F2F2;   /* textes sur fonds bruns */
  --rose-sourire: #E26666;   /* très limité : alertes, interdits */
  --gris-texte:   #4A4A4A;   /* texte courant sur fond crème */

  --rayon: 12px;
  --filet: 2px;
  --ombre-douce: 0 1px 3px rgba(95, 55, 17, 0.10);
  --ombre-carte: 0 2px 10px rgba(95, 55, 17, 0.08);
  --ombre-portee: 0 10px 28px rgba(95, 55, 17, 0.14);
  --allure: 0.16s ease;          /* LA durée des micro-transitions, partout la même */

  --sidebar-largeur: 236px;

  /* ---------- Noms courts ----------
     Plusieurs écrans écrits au fil de l'eau appellent la palette par des
     noms raccourcis. Sans ces alias, « var(--creme) » ne vaut rien : la
     couleur tombe à transparent et l'en-tête d'un tableau laisse voir les
     chiffres au travers. On les fait pointer sur la palette officielle
     plutôt que de les traquer un par un dans le code. */
  --creme:        var(--creme-mie);
  --beige-fonce:  var(--caramel-clair);
  --brun:         var(--brun-fournil);
  --gris-fonce:   var(--gris-texte);
}

/* Réinitialisation légère */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gris-texte);
  background: var(--creme-mie);
  -webkit-font-smoothing: antialiased;
}

/* Règle absolue : jamais de gras, jamais d'italique */
h1, h2, h3, h4, h5, h6,
b, strong { font-weight: 400; }
i, em { font-style: normal; }

h1, h2, h3, h4 {
  font-family: "Lora", Georgia, serif;
  color: var(--brun-fournil);
  margin: 0;
  line-height: 1.2;
}

a { color: var(--brun-fournil); text-decoration: none; }

/* Titre de page : Lora 26pt brun, souligné d'un trait doré court */
.titre-page {
  font-family: "Lora", Georgia, serif;
  font-size: 26px;
  color: var(--brun-fournil);
}
.titre-page::after {
  content: "";
  display: block;
  width: 64px;
  height: var(--filet);
  background: var(--dore-levain);
  margin-top: 8px;
}

/* Cartouche : fond blanc, filet doré vertical à gauche, coins arrondis */
.cartouche {
  background: #ffffff;
  border-radius: var(--rayon);
  border-left: 4px solid var(--dore-levain);
  box-shadow: var(--ombre-carte);
  padding: 18px 20px;
}

/* Cartouche brun : fond brun fournil, texte crème */
.cartouche-brun {
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  border-radius: var(--rayon);
  padding: 18px 20px;
}
.cartouche-brun h1,
.cartouche-brun h2,
.cartouche-brun h3 { color: var(--blanc-chignon); }

/* Boutons */
.btn {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: var(--rayon);
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--allure), color var(--allure),
    box-shadow var(--allure), transform var(--allure), border-color var(--allure);
}
/* la pression se SENT : le bouton s'enfonce d'un cheveu sous le doigt */
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.995); }
.btn-principal {
  background: var(--brun-fournil);
  color: var(--blanc-chignon);
  box-shadow: var(--ombre-douce);
}
.btn-principal:hover { background: var(--brun-croute); box-shadow: var(--ombre-carte); }
.btn-principal:disabled {
  background: var(--caramel-clair);
  color: #ffffff;
  cursor: not-allowed;
}
.btn-doux {
  background: var(--creme-mie);
  color: var(--brun-fournil);
  border: 1px solid var(--caramel-clair);
}
.btn-doux:hover { background: #fff; border-color: var(--dore-levain); box-shadow: var(--ombre-douce); }

/* Le clavier aussi mérite un bel outil : un anneau doré net, jamais le
   bleu système qui jure avec la palette. */
:is(.btn, .photo-btn, .onglet, .champ, .nav__item, .cli-nature):focus-visible {
  outline: 2px solid var(--dore-levain);
  outline-offset: 2px;
}

/* Champs de formulaire */
label { display: block; font-size: 12px; color: var(--brun-croute); margin-bottom: 5px; }
.champ {
  width: 100%;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  color: var(--gris-texte);
  background: #fff;
  border: 1px solid var(--caramel-clair);
  border-radius: 7px;
  padding: 9px 11px;
}
.champ { transition: border-color var(--allure), box-shadow var(--allure); }
.champ:hover { border-color: var(--caramel); }
.champ:focus { outline: none; border-color: var(--dore-levain); box-shadow: 0 0 0 3px rgba(243,191,76,0.25); }

/* Étiquette allergène / pastille */
.pastille {
  display: inline-block;
  font-size: 11px;
  color: var(--brun-croute);
  background: var(--creme-mie);
  border: 1px solid var(--caramel-clair);
  border-radius: 999px;
  padding: 1px 8px;
  margin: 2px 3px 0 0;
}

/* Scrollbars discrètes */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--caramel-clair); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }


/* =========================================================================
   LA COUCHE DE FLUIDITÉ (31/08/2026, veille de présentation)
   -------------------------------------------------------------------------
   Ce que l'œil retient d'un outil professionnel n'est pas un effet : c'est
   la COHÉRENCE des petits mouvements. Une seule durée (--allure), une seule
   famille d'ombres, et chaque élément cliquable qui répond de la même
   manière — survol qui éclaire, pression qui s'enfonce, écran qui se pose
   au lieu d'apparaître. Tout est sous « écran seulement » : l'impression
   des ordres du jour et des feuilles de production ne bouge pas d'un poil.
   ========================================================================= */
@media screen {
  /* — chaque écran se POSE : un souffle, pas un claquement — */
  .vue:not([hidden]) { animation: vue-entre 0.22s ease both; }
  @keyframes vue-entre {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
  }

  /* — le menu — (la pastille d'icône elle-même vit dans app.css, qui charge
     après ce fichier : à spécificité égale, c'est la dernière règle qui gagne) */
  .nav__item { transition: background var(--allure), border-color var(--allure); }

  /* — onglets et pastilles répondent comme les boutons — */
  .onglet, .photo-btn, .cli-nature, .ec-etab-pastille, .brf-lien {
    transition: background var(--allure), color var(--allure),
      border-color var(--allure), box-shadow var(--allure), transform var(--allure);
  }
  .onglet:active, .photo-btn:active, .cli-nature:active { transform: translateY(1px); }
  .photo-btn:hover { background: #fff; box-shadow: var(--ombre-douce); }

  /* — les cartes cliquables se soulèvent d'un souffle — */
  .cli-carte, .cahier-carte, .dash-bloc--cliquable, .cmd-carte {
    transition: box-shadow var(--allure), transform var(--allure), border-color var(--allure);
  }
  .cli-carte:hover, .cahier-carte:hover, .cmd-carte:hover {
    box-shadow: var(--ombre-portee);
    transform: translateY(-1px);
  }

  /* — les lignes de tableau s'éclairent sous le curseur — */
  .prod-table tbody tr { transition: background var(--allure); }
  .prod-table tbody tr:hover { background: rgba(243, 191, 76, 0.07); }

  /* — la carte de connexion : la première image de demain — */
  .pave-joy__carte, #codes-dir .pave-joy__carte {
    box-shadow: var(--ombre-portee);
    animation: vue-entre 0.3s ease both;
  }
  .verrou__logo { filter: drop-shadow(0 2px 6px rgba(95, 55, 17, 0.18)); }

  /* — les grands voiles (documents, compte rendu) se posent aussi — */
  .odj-fond, .crp-carte { animation: vue-entre 0.24s ease both; }
}

/* Celui qui a demandé moins de mouvement l'obtient : tout s'arrête net. */
@media (prefers-reduced-motion: reduce) {
  .vue:not([hidden]), .pave-joy__carte, #codes-dir .pave-joy__carte,
  .odj-fond, .crp-carte { animation: none; }
  .btn, .onglet, .photo-btn, .cli-nature, .cli-carte, .cahier-carte,
  .cmd-carte, .nav__item, .nav__ico, .champ { transition: none; }
}