/* =====================================================================
   Charte des outils internes — Le Pain Laurent L'Hénaff (26/10/2026)
   Référence : DESIGN.md et PRODUCT.md à la racine du dépôt.

   Ne s'applique qu'aux pages qui la demandent : la page pose `$charte = true;`
   avant d'inclure header.php, qui ajoute la classe `charte` à <body>. On passe
   ainsi les écrans un par un, sans changer d'un coup les soixante autres.

   La règle : sobre partout, la couleur réservée à ce qui demande un geste.
   Rouge = à traiter maintenant, et rien d'autre. Ambre = à surveiller. Ce qui
   est fait s'efface en gris. Le vert de la maison sert à valider.
   ===================================================================== */

/* Polices hébergées ici (licence SIL OFL 1.1, fichiers dans assets/fonts/) :
   aucun appel à un service tiers, comme sur le site public. */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

body.charte{
  --fond:#FFFFFF; --beige:#F6F2EA; --beige-clair:#FBF9F5; --filet:#E9E2D5; --contour:#CFC7B8;
  --encre:#26241F; --encre-douce:#57534B; --discret:#8A857A;
  --vert:#4A7015; --vert-survol:#3D5D11; --vert-teinte:#EAF3D9; --vert-logo:#8DC63F;
  --urgent:#B42318; --urgent-teinte:#FBEAE8; --attention:#8A6408; --attention-teinte:#F7F0DF;
  --arrondi:3px;
  --hachures:repeating-linear-gradient(135deg, transparent 0 4px, rgba(138,133,122,.35) 4px 6px);

  --bs-body-font-family:"Inter", system-ui, sans-serif;
  --bs-body-color:var(--encre); --bs-body-bg:var(--fond);
  --bs-border-color:var(--filet); --bs-secondary-color:var(--encre-douce);
  --bs-border-radius:var(--arrondi); --bs-border-radius-sm:var(--arrondi); --bs-border-radius-lg:var(--arrondi);
  --bs-link-color:var(--vert); --bs-link-color-rgb:74,112,21; --bs-link-hover-color:var(--vert-survol);

  background:var(--fond); color:var(--encre);
  font-family:"Inter", system-ui, sans-serif; font-size:16px; line-height:1.5;   /* 16 px depuis le 31/10/2026 (14 avant) : on se lit debout, à distance */
  -webkit-font-smoothing:antialiased;
}
/* Chiffres en chasse fixe là où on compare des nombres, pas dans le texte courant
   (en texte courant, la chasse fixe espace les tirets : « qa - claude »). */
body.charte td, body.charte th, body.charte input, body.charte .tnum, body.charte .badge{ font-variant-numeric:tabular-nums; }
body.charte :focus-visible{ outline:2px solid var(--vert); outline-offset:2px; }

/* ---- Barre du haut : blanche, un filet, le logo du site public ---- */
/* La barre reste à 14 px quand le texte passe à 16 : douze entrées plus le nom de l'utilisateur ne tiennent pas en 1 440 px, encore moins sur un 13 pouces. */
body.charte .prod-navbar{ background:var(--fond); box-shadow:none; border-bottom:1px solid var(--filet); padding-top:4px; padding-bottom:4px; font-size:14px; }
body.charte .prod-navbar .navbar-brand{ color:var(--encre); display:flex; align-items:center; gap:12px; padding:0; }
/* Le logo tel qu'il est sur le site : sur un disque blanc, couleurs d'origine. */
body.charte .charte-logo{ width:44px; height:44px; border-radius:999px; background:#fff; display:block; flex:none; }
body.charte .charte-app{ font-size:15px; font-weight:600; color:var(--encre); padding-left:12px; border-left:1px solid var(--filet); }
body.charte .prod-navbar .nav-link{ color:var(--encre-douce); background:none; border-radius:0; margin:0;
  padding:.85rem .6rem !important; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; }
body.charte .prod-navbar .nav-link:hover{ color:var(--encre); background:none; }
body.charte .prod-navbar .nav-link.active{ color:var(--encre); background:none; font-weight:600; border-bottom-color:var(--encre); }
body.charte .prod-navbar .navbar-toggler{ border-color:var(--contour); }
body.charte .prod-navbar .navbar-toggler-icon{ filter:invert(1) brightness(.3); }
body.charte .prod-navbar .bi{ display:none; }   /* le menu se lit, il ne se devine pas */
body.charte .dropdown-menu{ border:1px solid var(--filet); border-radius:var(--arrondi); box-shadow:0 4px 16px rgba(38,36,31,.08); }
body.charte .dropdown-item{ color:var(--encre); }
body.charte .dropdown-item:active{ background:var(--vert-teinte); color:var(--encre); }

/* Icônes posées devant un mot : décoratives, retirées. Une icône seule (bouton
   « + », flèches) n'a pas de marge et reste. */
body.charte .bi.me-1, body.charte .bi.me-2, body.charte .bi.me-3{ display:none; }

/* ---- Titres et texte ---- */
body.charte h1, body.charte h2, body.charte h3, body.charte h4, body.charte h5,
body.charte .h1, body.charte .h2, body.charte .h3, body.charte .h4, body.charte .h5{
  color:var(--encre); font-weight:600; letter-spacing:-.01em; }
body.charte h1, body.charte .h1, body.charte h2, body.charte .h2{ font-size:22px; }
body.charte h3, body.charte .h3{ font-size:18px; }
body.charte h4, body.charte .h4, body.charte h5, body.charte .h5{ font-size:15px; }
body.charte .page-header{ border-bottom:1px solid var(--filet); }
body.charte .text-muted, body.charte .text-secondary{ color:var(--encre-douce) !important; }
body.charte .text-primary, body.charte .text-info, body.charte .text-success{ color:var(--encre) !important; }
body.charte .text-warning{ color:var(--attention) !important; }
body.charte .text-danger{ color:var(--urgent) !important; }

/* ---- États : un signe et un mot, jamais la couleur seule ---- */
body.charte .etat{ display:inline-flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap; color:var(--encre-douce); }
body.charte .etat::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
body.charte .etat-urgent{ color:var(--urgent); }
body.charte .etat-attention{ color:var(--attention); }
body.charte .etat-fait{ color:var(--discret); font-weight:500; }
body.charte .etat-fait::before{ background:none; border:1.5px solid currentColor; width:7px; height:7px; }
body.charte .non-saisi{ background:var(--hachures); color:var(--encre-douce); }
body.charte .fait{ color:var(--discret); }   /* une ligne terminée s'efface, sans badge */

/* Compteur d'onglet ou de titre : un nombre, pas une pastille */
body.charte .compte{ font-weight:600; color:var(--encre-douce); margin-left:4px; }
body.charte .compte-attention{ color:var(--attention); }

/* Badges hérités : ramenés à un mot. La couleur ne reste qu'au danger et à l'alerte.
   ⚠️ Un badge coloré EN LIGNE (style="background:…") porte la couleur d'une boutique : il n'est
   pas touché. Les couleurs des boutiques restent partout (Laurent, 26/10/2026). */
body.charte .badge[style*="background"]{ color:#fff; }
body.charte .badge:not([style*="background"]){ background:transparent !important; color:var(--encre-douce) !important; padding:0; border-radius:0;
  font-weight:500; font-size:12.5px; letter-spacing:0; text-transform:none; }
body.charte .badge.bg-danger:not([style*="background"]), body.charte .badge.text-bg-danger:not([style*="background"]){ color:var(--urgent) !important; font-weight:600; }
body.charte .badge.bg-warning:not([style*="background"]), body.charte .badge.text-bg-warning:not([style*="background"]){ color:var(--attention) !important; font-weight:600; }

/* ---- Boutons : un vert plein pour valider, le reste en contour neutre ---- */
body.charte .btn{ border-radius:var(--arrondi); font-weight:600; box-shadow:none; }
body.charte .btn:active{ transform:translateY(1px); }
body.charte .btn-success, body.charte .btn-primary, body.charte .btn-prod{
  --bs-btn-bg:var(--vert); --bs-btn-border-color:var(--vert); --bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--vert-survol); --bs-btn-hover-border-color:var(--vert-survol); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--vert-survol); --bs-btn-active-border-color:var(--vert-survol);
  --bs-btn-disabled-bg:var(--vert); --bs-btn-disabled-border-color:var(--vert);
  background:var(--vert); border-color:var(--vert); color:#fff; }
body.charte .btn-success:hover, body.charte .btn-primary:hover, body.charte .btn-prod:hover{ background:var(--vert-survol); border-color:var(--vert-survol); color:#fff; }
body.charte .btn-outline-secondary, body.charte .btn-outline-primary, body.charte .btn-outline-success,
body.charte .btn-outline-prod, body.charte .btn-outline-warning, body.charte .btn-outline-info, body.charte .btn-outline-dark,
body.charte .btn-secondary, body.charte .btn-warning, body.charte .btn-info, body.charte .btn-light, body.charte .btn-neutre{
  --bs-btn-bg:var(--fond); --bs-btn-color:var(--encre); --bs-btn-border-color:var(--contour);
  --bs-btn-hover-bg:var(--beige); --bs-btn-hover-color:var(--encre); --bs-btn-hover-border-color:var(--contour);
  --bs-btn-active-bg:var(--beige); --bs-btn-active-color:var(--encre); --bs-btn-active-border-color:var(--contour);
  background:var(--fond); color:var(--encre); border-color:var(--contour); }
body.charte .btn-outline-secondary:hover, body.charte .btn-outline-primary:hover, body.charte .btn-outline-success:hover,
body.charte .btn-outline-prod:hover, body.charte .btn-secondary:hover, body.charte .btn-warning:hover, body.charte .btn-neutre:hover{
  background:var(--beige); color:var(--encre); border-color:var(--contour); }
body.charte .btn-danger, body.charte .btn-outline-danger{
  --bs-btn-bg:var(--fond); --bs-btn-color:var(--urgent); --bs-btn-border-color:#E7B9B3;
  --bs-btn-hover-bg:var(--urgent-teinte); --bs-btn-hover-color:var(--urgent); --bs-btn-hover-border-color:#E7B9B3;
  background:var(--fond); color:var(--urgent); border-color:#E7B9B3; }
body.charte .btn-check:checked + .btn, body.charte .btn.active{ background:var(--encre); border-color:var(--encre); color:#fff; }

/* ---- Cartes, onglets, alertes : sans ombre ni couleur de décor ---- */
body.charte .card{ border:1px solid var(--filet); border-radius:var(--arrondi); box-shadow:none; }
body.charte .card-header{ background:var(--beige) !important; color:var(--encre); border-bottom:1px solid var(--filet); }
body.charte .card-header.bg-white{ background:var(--fond) !important; }
body.charte .shadow, body.charte .shadow-sm{ box-shadow:none !important; }
body.charte .nav-tabs{ border-bottom:1px solid var(--filet); }
body.charte .nav-tabs .nav-link{ color:var(--encre-douce); border:0; border-bottom:2px solid transparent; border-radius:0;
  font-weight:500; padding:.55rem .9rem; margin-bottom:-1px; }
body.charte .nav-tabs .nav-link:hover{ color:var(--encre); border-bottom-color:var(--filet); }
body.charte .nav-tabs .nav-link.active{ color:var(--encre); font-weight:600; background:none; border-bottom-color:var(--encre); }
body.charte .alert{ border-radius:var(--arrondi); }
body.charte .alert-warning{ background:var(--attention-teinte); border-color:#E8D9B5; color:var(--encre); }
body.charte .alert-info, body.charte .alert-secondary, body.charte .alert-light, body.charte .alert-primary{ background:var(--beige); border-color:var(--filet); color:var(--encre); }
body.charte .alert-success{ background:var(--vert-teinte); border-color:#D3E6B4; color:var(--encre); }
body.charte .alert-danger{ background:var(--urgent-teinte); border-color:#F0C6C0; color:var(--encre); }
/* Blocs colorés hérités (en-têtes de carte vert, bleu, gris foncé…) : la couleur de décor
   disparaît. Le texte blanc qu'ils portaient repasse en encre, sinon il tomberait blanc sur
   beige. Les barres de progression et les boutons gardent leur couleur. */
body.charte :is(.bg-primary, .bg-success, .bg-info, .bg-secondary, .bg-dark, .bg-prod):not(.badge):not(.btn):not(.progress-bar){
  background-color:var(--beige) !important; color:var(--encre) !important; }
body.charte .bg-danger:not(.badge):not(.btn):not(.progress-bar){ background-color:var(--urgent-teinte) !important; color:var(--encre) !important; }
body.charte .bg-warning:not(.badge):not(.btn):not(.progress-bar){ background-color:var(--attention-teinte) !important; color:var(--encre) !important; }
body.charte :is(.bg-primary, .bg-success, .bg-info, .bg-secondary, .bg-dark, .bg-danger, .bg-warning, .bg-prod, .card-header):not(.badge):not(.btn):not(.progress-bar) :is(.text-white, .text-white-50),
body.charte :is(.bg-primary, .bg-success, .bg-info, .bg-secondary, .bg-dark, .bg-danger, .bg-warning, .bg-prod, .card-header).text-white:not(.badge):not(.btn):not(.progress-bar){
  color:var(--encre) !important; }
body.charte .bg-light{ background-color:var(--beige-clair) !important; }
body.charte .border-primary, body.charte .border-success, body.charte .border-info, body.charte .border-secondary{ border-color:var(--filet) !important; }

body.charte .bandeau{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  margin:8px; padding:8px 12px; border:1px solid var(--filet); border-radius:var(--arrondi); background:var(--beige-clair); }
body.charte .bandeau-ferme{ background:var(--vert-teinte); border-color:#D3E6B4; }

/* ---- Tableaux : en-têtes beiges, filets fins, chiffres alignés ---- */
body.charte .table{ --bs-table-bg:transparent; --bs-table-border-color:var(--filet); --bs-table-hover-bg:var(--beige-clair); color:var(--encre); }
body.charte .table > thead th, body.charte .table thead.table-light th{
  background:var(--beige); color:var(--encre-douce); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; }
body.charte .table .table-light td, body.charte tr.table-light > td{ background:var(--fond); }
body.charte .groupe-cat{ color:var(--encre-douce) !important; font-size:12px; font-weight:600; padding-top:14px !important; }
body.charte .border-start{ border-left-color:var(--filet) !important; }

/* ---- Champs ---- */
body.charte .form-control, body.charte .form-select{ border-color:var(--contour); border-radius:var(--arrondi); color:var(--encre); }
body.charte .form-control:focus, body.charte .form-select:focus{ border-color:var(--vert); box-shadow:0 0 0 2px rgba(74,112,21,.25); }
body.charte .form-label{ color:var(--encre-douce); font-weight:500; }

/* Codes (EGP, chemins) : la couleur rose par défaut de Bootstrap n'est pas un état. */
body.charte code{ color:var(--encre-douce); background:var(--beige-clair); padding:0 3px; border-radius:2px; font-size:.86em; }

/* Bandeau des cookies : il vient de includes/security.php, copié à l'identique dans les
   apps et stylé en ligne — on le recolore ici plutôt que de toucher la copie commune. */
body.charte #cookie-banner{ background:var(--fond) !important; color:var(--encre) !important; box-shadow:none !important;
  border-top:1px solid var(--filet); font-family:"Inter", system-ui, sans-serif !important; }
body.charte #cookie-banner a{ color:var(--vert) !important; }
body.charte #cookie-banner button{ background:var(--fond) !important; color:var(--encre) !important;
  border:1px solid var(--contour) !important; border-radius:var(--arrondi) !important; font-weight:600; }

/* ---- Pied de page ---- */
body.charte footer, body.charte .footer{ background:var(--fond); border-top:1px solid var(--filet); color:var(--encre-douce); }

/* ---- Vue boutique : lisible à un mètre ---- */
body.charte .vue-boutique{ font-size:15px; }
body.charte .vue-boutique .entete-boutique h2{ font-size:24px; display:flex; align-items:center; gap:10px; }
body.charte .pastille-boutique{ width:12px; height:12px; border-radius:50%; flex:none; }   /* repère de la boutique, pas un état */
body.charte .vue-boutique .grille-journee td, body.charte .vue-boutique .grille-journee th{ padding-top:6px; padding-bottom:6px; }
/* Une case qu'on remplit se voit comme une case : sans les anciens aplats de couleur, c'est
   le cadre qui dit « ici on tape ». */
body.charte .vue-boutique .grille-journee input.form-control{ font-size:16px; font-weight:500; color:var(--encre);
  border:1px solid var(--filet) !important; background:var(--fond) !important; border-radius:var(--arrondi); }
body.charte .vue-boutique .grille-journee input.form-control:hover{ border-color:var(--contour) !important; }
body.charte .vue-boutique .grille-journee input.form-control:focus{ border-color:var(--vert) !important; }
body.charte .vue-boutique .grille-journee input.form-control:disabled{ background:var(--beige-clair) !important; border-style:dashed !important; }
body.charte .vue-boutique .grille-journee input.input-ecart{ border-style:dashed !important; }   /* l'écart pilote « Reçu », il n'est pas enregistré */
body.charte .vue-boutique .grille-journee .col-fin input.form-control{ font-weight:700; font-size:17px; }
body.charte .vue-boutique .grille-journee .groupe{ border-left:1px solid var(--contour) !important; }
body.charte .vue-boutique .veille{ font-size:12.5px; color:var(--attention); font-weight:600; margin-left:6px; white-space:nowrap; }
body.charte .vue-boutique .recu-fige{ display:block; font-size:12px; color:var(--encre-douce); }
body.charte .vue-boutique .clients-sans-pain{ font-size:1.5em; width:110px; text-align:center; }

/* ---- Couleurs des boutiques (31/10/2026) ----
   Quatre couleurs RÉSERVÉES, relevées dans le classeur « RESTE DE PAIN DU JOUR » : #34A853 La Jarne, #EA1010
   Rompsay, #4A86E8 La Couarde, #F1C232 Châtelaillon. Elles ne servent à rien d'autre (voir DESIGN.md). Le blanc
   ne se lit pas sur le jaune de Châtelaillon : partout où cette couleur est posée en fond, le texte passe en encre. */
body.charte [style*="background:#f1c232" i], body.charte [style*="background: #f1c232" i]{ color:var(--encre) !important; }