/* ============================================================
   L'Atelier l'Agathe Blanche — application de stock et de traçabilité
   Même direction artistique que latelierlagatheblanche.fr :
   ivoire / lin / sauge / argile, Fraunces (titres) + Assistant (texte), boutons en pilule.
   ============================================================ */

@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Assistant"; font-weight: 400; font-display: swap; src: url("../fonts/assistant-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Assistant"; font-weight: 500; font-display: swap; src: url("../fonts/assistant-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Assistant"; font-weight: 600; font-display: swap; src: url("../fonts/assistant-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Assistant"; font-weight: 700; font-display: swap; src: url("../fonts/assistant-latin-700-normal.woff2") format("woff2"); }

:root {
  --ivoire: #f6f2ea; --ivoire-2: #efe8db; --lin: #e7dfcd; --sauge: #7c8a6e; --sauge-fonce: #5c6a4f; --sauge-pale: #e4e9dc;
  --argile: #b97b56; --argile-fonce: #9a6142; --argile-pale: #f3e4d9; --encre: #2c2a24; --encre-douce: #4a473d; --blanc: #fffdf8;
  --danger: #a4452f; --danger-pale: #f6e0d9; --ocre: #b8893a; --ocre-pale: #f5ead0;
  --trait: rgba(44, 42, 36, .09); --trait-fort: rgba(44, 42, 36, .18);
  --ombre: 0 18px 30px -18px rgba(44, 42, 36, .28); --ombre-douce: 0 6px 18px -10px rgba(44, 42, 36, .22);
  --font-display: "Fraunces", Georgia, serif; --font-script: "Playfair Display", serif; --font-body: "Assistant", "Helvetica Neue", sans-serif;
  --rayon: 22px; --rayon-s: 14px; --haut-barre: 64px; --haut-onglets: calc(68px + env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivoire); color: var(--encre); font: 400 17px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0 0 .35em; line-height: 1.15; }
h1 { font-size: clamp(28px, 6vw, 40px); } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 .8em; }
.cache { display: none !important; }
.doux { color: var(--encre-douce); opacity: .8; }
.petit { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { display: inline-block; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sauge-fonce); font-weight: 600; margin-bottom: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico-16 { width: 16px; height: 16px; } .ico-20 { width: 20px; height: 20px; } .ico-24 { width: 24px; height: 24px; } .ico-28 { width: 28px; height: 28px; } .ico-32 { width: 32px; height: 32px; } .ico-44 { width: 44px; height: 44px; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }

/* ---------- Boutons (pilule, comme le site) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; background: var(--encre); color: var(--blanc); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .12s; user-select: none; }
.btn:hover { background: var(--sauge-fonce); } .btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-primaire { background: var(--sauge-fonce); } .btn-primaire:hover { background: var(--encre); }
.btn-contour { background: transparent; border-color: var(--encre); color: var(--encre); } .btn-contour:hover { background: var(--encre); color: var(--blanc); }
.btn-doux { background: var(--lin); color: var(--encre); } .btn-doux:hover { background: var(--ivoire-2); }
.btn-danger { background: var(--danger); } .btn-danger:hover { background: #82331f; }
.btn-plein { width: 100%; } .btn-s { min-height: 38px; padding: 0 18px; font-size: 12.5px; }
.btn-rond { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--blanc); color: var(--encre); border-color: var(--trait); box-shadow: var(--ombre-douce); }
.btn-rond:hover { background: var(--lin); }
.lien { background: none; border: 0; padding: 0; color: var(--argile-fonce); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formulaires ---------- */
.champ { display: block; margin-bottom: 18px; }
.champ > span, .champ > label { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--encre-douce); margin-bottom: 7px; }
.champ small { display: block; color: var(--encre-douce); opacity: .75; margin-top: 6px; font-size: 13.5px; }
.entree { width: 100%; min-height: 52px; padding: 12px 18px; background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.entree:focus { border-color: var(--sauge-fonce); box-shadow: 0 0 0 4px rgba(124, 138, 110, .22); }
textarea.entree { min-height: 96px; resize: vertical; line-height: 1.5; }
select.entree { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a24' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.ligne-champs { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .deux-col { grid-template-columns: 1fr; } }
.erreur-champ { color: var(--danger); font-size: 14px; margin: -8px 0 14px; }
.msg { padding: 14px 18px; border-radius: var(--rayon-s); font-size: 15.5px; margin-bottom: 16px; }
.msg-erreur { background: var(--danger-pale); color: #7a2d1c; } .msg-info { background: var(--sauge-pale); color: var(--sauge-fonce); } .msg-attention { background: var(--ocre-pale); color: #6d4f14; }

/* ---------- Cartes & listes ---------- */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px; margin-bottom: 16px; box-shadow: var(--ombre-douce); }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.carte-sans { padding: 0; overflow: hidden; }
.liste { list-style: none; margin: 0; padding: 0; }
.rang { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--trait); text-decoration: none; color: inherit; cursor: pointer; background: transparent; width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; transition: background .15s; }
.rang:last-child { border-bottom: 0; } .rang:hover, .rang:active { background: var(--ivoire); }
.rang-corps { flex: 1; min-width: 0; } .rang-titre { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rang-sous { font-size: 14.5px; color: var(--encre-douce); opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.rang-fin { text-align: right; font-weight: 600; white-space: nowrap; } .rang-chevron { color: var(--trait-fort); }
.pastille { width: 42px; height: 42px; border-radius: 14px; background: var(--sauge-pale); color: var(--sauge-fonce); display: grid; place-items: center; flex: none; }
.pastille-argile { background: var(--argile-pale); color: var(--argile-fonce); } .pastille-lin { background: var(--lin); color: var(--encre-douce); }
.vide { text-align: center; padding: 44px 24px; color: var(--encre-douce); }
.vide .ico { width: 44px; height: 44px; color: var(--sauge); margin-bottom: 10px; }
.grille-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 700px) { .grille-stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; }
.stat b { display: block; font: 500 34px/1.1 var(--font-display); } .stat span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); font-weight: 700; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; } .dl dt { color: var(--encre-douce); font-size: 14px; } .dl dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Badges & alertes de péremption ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; background: var(--lin); color: var(--encre-douce); white-space: nowrap; }
.badge-ok { background: var(--sauge-pale); color: var(--sauge-fonce); } .badge-j90 { background: var(--sauge-pale); color: var(--sauge-fonce); }
.badge-j30 { background: var(--ocre-pale); color: #6d4f14; } .badge-j7 { background: var(--argile-pale); color: var(--argile-fonce); }
.badge-perime { background: var(--danger); color: var(--blanc); } .badge-rappel { background: var(--danger); color: #fff; } .badge-cure { background: var(--ocre-pale); color: #6d4f14; }
.triangle { color: var(--danger); display: inline-flex; } .triangle.j7 { color: var(--argile); } .triangle.j30 { color: var(--ocre); } .triangle.j90 { color: var(--sauge); }
.triangle .ico { width: 1.15em; height: 1.15em; }
.attente-sync { color: var(--ocre); font-size: 13px; font-weight: 700; }

/* ---------- Mise en page de l'application ---------- */
.app { min-height: 100dvh; display: block; }
.barre { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: calc(var(--haut-barre) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; background: rgba(246, 242, 234, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
.barre-titre { flex: 1; font: 500 20px var(--font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre .btn-rond { position: relative; }
.pastille-nb { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--argile); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.logo { font: italic 400 22px var(--font-script); text-decoration: none; letter-spacing: .01em; } .logo span { color: var(--argile); }
.contenu { padding: 22px 18px calc(var(--haut-onglets) + 28px); max-width: 760px; margin: 0 auto; animation: apparition .28s ease both; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bandeau-hors-ligne { background: var(--ocre-pale); color: #6d4f14; text-align: center; font-size: 14px; font-weight: 600; padding: 7px 12px; }

.onglets-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: stretch; height: var(--haut-onglets); padding: 6px 6px env(safe-area-inset-bottom); background: rgba(255, 253, 248, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--trait); }
.onglet-bas { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--encre-douce); opacity: .7; border-radius: 14px; position: relative; }
.onglet-bas .ico { width: 24px; height: 24px; } .onglet-bas.actif { color: var(--sauge-fonce); opacity: 1; }
.onglet-bas.actif::before { content: ""; position: absolute; top: -7px; width: 28px; height: 3px; border-radius: 3px; background: var(--argile); }
.onglet-centre { flex: 0 0 74px; }
.onglet-centre span.bulle { display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: var(--sauge-fonce); color: var(--blanc); box-shadow: 0 12px 22px -8px rgba(92, 106, 79, .7); border: 4px solid var(--ivoire); }
.onglet-centre.actif::before { display: none; } .onglet-centre { opacity: 1; }

.menu-lateral { display: none; }
.menu-lien-btn { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; }
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 264px 1fr; }
  .onglets-bas, .barre .logo, .cacher-bureau { display: none; }
  .menu-lateral { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 28px 18px; background: var(--ivoire-2); border-right: 1px solid var(--trait); }
  .menu-lateral .logo { font-size: 24px; padding: 0 12px 26px; display: block; }
  .menu-lien { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 4px; border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--encre-douce); font-size: 15.5px; }
  .menu-lien:hover { background: var(--lin); } .menu-lien.actif { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-douce); }
  .menu-lien.actif .ico { color: var(--argile); }
  .menu-bas { margin-top: auto; } .menu-nom { padding: 12px 14px; font-size: 14px; color: var(--encre-douce); }
  .contenu { padding: 34px 40px 60px; max-width: 920px; }
  .barre { padding-left: 40px; }
}

/* ---------- Fenêtres (feuilles) ---------- */
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(44, 42, 36, .45); display: flex; align-items: flex-end; justify-content: center; animation: fondu .2s ease both; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.feuille { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--ivoire); border-radius: 28px 28px 0 0; padding: 12px 22px calc(26px + env(safe-area-inset-bottom)); animation: monte .3s cubic-bezier(.2, .9, .3, 1) both; overscroll-behavior: contain; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.feuille::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); margin: 0 auto 16px; }
.feuille-plein { max-width: 760px; height: 96dvh; }
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: 28px; max-height: 88dvh; } .feuille-plein { height: 88dvh; } }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .actions .btn { flex: 1; }
.toast-zone { position: fixed; left: 0; right: 0; bottom: calc(var(--haut-onglets) + 14px); z-index: 99; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
@media (min-width: 900px) { .toast-zone { bottom: 24px; } }
.toast { background: var(--encre); color: var(--blanc); padding: 13px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: var(--ombre); animation: monte .25s ease both; max-width: 100%; }
.toast-erreur { background: var(--danger); }

/* ---------- Recherche, segments, chips ---------- */
.recherche { position: relative; margin-bottom: 16px; } .recherche .ico { position: absolute; left: 16px; top: 15px; color: var(--encre-douce); opacity: .6; } .recherche .entree { padding-left: 46px; }
.segments { display: flex; background: var(--lin); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.segment { flex: 1; border: 0; background: transparent; min-height: 40px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--encre-douce); cursor: pointer; transition: background .2s; }
.segment.actif { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-douce); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--trait-fort); background: var(--blanc); border-radius: 999px; min-height: 38px; padding: 0 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.chip.actif { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.suggestions { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-s); margin-top: -8px; margin-bottom: 16px; overflow: hidden; box-shadow: var(--ombre-douce); max-height: 280px; overflow-y: auto; }
.suggestion { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--trait); background: transparent; text-align: left; cursor: pointer; } .suggestion:last-child { border-bottom: 0; } .suggestion:hover { background: var(--ivoire); }

/* ---------- Fabrication : lignes d'ingrédients ---------- */
.ingredient { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-s); padding: 14px 16px; margin-bottom: 10px; }
.ingredient-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ingredient .par-unite { margin-top: 8px; font-size: 14px; color: var(--sauge-fonce); font-weight: 600; }
.retirer { border: 0; background: var(--lin); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; }
.pas-etapes { display: flex; gap: 6px; margin-bottom: 20px; } .pas { flex: 1; height: 5px; border-radius: 3px; background: var(--lin); } .pas.fait { background: var(--sauge); }
.resume-fab { background: var(--sauge-pale); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 18px; color: var(--sauge-fonce); font-weight: 600; }

/* ---------- QR ---------- */
.qr-boite { display: grid; place-items: center; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px; margin-bottom: 14px; }
.qr-boite svg { width: min(100%, 240px); height: auto; display: block; }
.qr-legende { margin-top: 10px; font: 500 18px var(--font-display); letter-spacing: .02em; }

/* ---------- Scanner de documents ---------- */
.scan-zone { position: relative; background: #1d1c18; border-radius: var(--rayon); overflow: hidden; touch-action: none; }
.scan-zone canvas { display: block; width: 100%; height: auto; }
.scan-poignee { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--blanc); background: rgba(185, 123, 86, .55); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); touch-action: none; }
.vignettes { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0; } .vignette { flex: none; width: 64px; height: 88px; border-radius: 8px; overflow: hidden; border: 2px solid var(--lin); background: #fff; } .vignette img { width: 100%; height: 100%; object-fit: cover; }
.camera { position: relative; background: #000; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3/4; max-height: 60dvh; margin: 0 auto 14px; }
.camera video { width: 100%; height: 100%; object-fit: cover; }
.viseur { position: absolute; inset: 14% 14%; border: 3px solid rgba(255, 253, 248, .9); border-radius: 22px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }

/* ---------- Connexion ---------- */
.accueil-ecran { min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; background: linear-gradient(180deg, var(--ivoire-2) 0%, var(--ivoire) 100%); }
.connexion { width: 100%; max-width: 440px; animation: apparition .4s ease both; }
.connexion .logo { display: block; text-align: center; font-size: 30px; margin-bottom: 8px; }
.connexion .accroche { text-align: center; color: var(--encre-douce); margin-bottom: 28px; }
.connexion .carte { padding: 30px 26px; border-radius: 26px; box-shadow: 0 40px 70px -30px rgba(44, 42, 36, .35); }
.code-saisie { letter-spacing: .5em; text-align: center; font: 600 28px var(--font-display); padding-left: 1.2em; }
.rgpd { text-align: center; font-size: 13px; color: var(--encre-douce); opacity: .7; margin-top: 18px; }

/* ---------- Chargement ---------- */
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lin); border-top-color: var(--sauge-fonce); animation: tourne .8s linear infinite; margin: 40px auto; }
@keyframes tourne { to { transform: rotate(360deg); } }
.squelette { background: linear-gradient(90deg, var(--lin) 25%, var(--ivoire-2) 50%, var(--lin) 75%); background-size: 200% 100%; animation: briller 1.4s infinite; border-radius: var(--rayon); height: 78px; margin-bottom: 12px; }
@keyframes briller { to { background-position: -200% 0; } }

/* ---------- Page publique (QR) ---------- */
.page-publique { background: var(--ivoire); }
.pub-entete { text-align: center; padding: 26px 18px 6px; } .pub-entete .logo { font-size: 24px; }
.pub-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 30px; }
.pub-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 26px; padding: 28px 24px; box-shadow: var(--ombre); }
.pub-carte h1 { font-size: 34px; } .pub-carte h2 { font-size: 17px; margin: 22px 0 6px; color: var(--sauge-fonce); font-family: var(--font-body); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pub-liste { margin: 14px 0 0; } .pub-liste > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--trait); } .pub-liste dt { color: var(--encre-douce); } .pub-liste dd { margin: 0; font-weight: 700; text-align: right; }
.pub-alerte { background: var(--danger); color: #fff; border-radius: var(--rayon-s); padding: 16px 18px; margin-bottom: 14px; }
.pub-pied { text-align: center; padding: 6px 18px 40px; color: var(--encre-douce); opacity: .7; font-size: 14px; }
.onglets { display: flex; background: var(--lin); border-radius: 999px; padding: 4px; margin: 14px 0 6px; }
.onglet { flex: 1; border: 0; background: transparent; min-height: 42px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--encre-douce); cursor: pointer; } .onglet.actif { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-douce); }
.trace-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); } .trace-ligne strong { display: block; } .trace-ligne .doux { font-size: 14px; } .trace-qte { font-weight: 700; white-space: nowrap; }
.page-publique .btn-primaire { margin-top: 20px; width: 100%; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .onglets-bas, .menu-lateral, .barre, .toast-zone { display: none !important; } body { background: #fff; } }
.pied-lien { text-align: center; margin: 18px 0 0; }
.cadre-liste { border: 1px solid var(--trait); border-radius: var(--rayon-s); overflow: hidden; }
.stat-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.stat-ligne .grand { font: 500 34px/1.1 var(--font-display); } .stat-ligne .droite { text-align: right; font-weight: 600; }
.barre-progres { width: 100%; height: 10px; border: 0; border-radius: 6px; overflow: hidden; background: var(--lin); appearance: none; -webkit-appearance: none; display: block; }
.barre-progres::-webkit-progress-bar { background: var(--lin); border-radius: 6px; } .barre-progres::-webkit-progress-value { background: var(--sauge); border-radius: 6px; } .barre-progres::-moz-progress-bar { background: var(--sauge); border-radius: 6px; }
.actions-rapides { margin-bottom: 18px; } .actions-rapides .carte { margin-bottom: 0; }
.actions-tete { display: flex; justify-content: space-between; align-items: center; }
.collant { position: sticky; bottom: calc(var(--haut-onglets) + 8px); z-index: 20; padding: 10px 0; background: linear-gradient(180deg, transparent, var(--ivoire) 40%); }
@media (min-width: 900px) { .collant { bottom: 0; } }
.succes { text-align: center; padding: 10px 0 4px; } .succes .rond { width: 64px; height: 64px; border-radius: 50%; background: var(--sauge-pale); color: var(--sauge-fonce); display: grid; place-items: center; margin: 0 auto 14px; } .succes .rond .ico { width: 32px; height: 32px; }
.titre-section { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; } .titre-section .num { width: 28px; height: 28px; border-radius: 50%; background: var(--encre); color: var(--blanc); display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; } .titre-section h2 { margin: 0; }
.plus-options { margin: 6px 0 18px; } .plus-options summary { cursor: pointer; font-weight: 700; color: var(--argile-fonce); padding: 10px 0; list-style: none; } .plus-options summary::-webkit-details-marker { display: none; }
.plus-options summary::after { content: " +"; } .plus-options[open] summary::after { content: " −"; }
.rang-choisi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; }
.rang.desactive { opacity: .45; pointer-events: none; }
.mini { width: 42px; height: 42px; object-fit: cover; border-radius: 14px; }
.pastille:has(.mini) { padding: 0; overflow: hidden; background: none; }
.photo-produit { border-radius: var(--rayon-s); overflow: hidden; background: var(--ivoire-2); aspect-ratio: 4/3; display: grid; place-items: center; } .photo-produit img { width: 100%; height: 100%; object-fit: cover; }
.photo-vide { display: grid; place-items: center; gap: 6px; color: var(--encre-douce); opacity: .6; }
.barre .logo, .menu-lateral .logo { white-space: nowrap; font-size: 19px; }
.menu-lateral .logo { font-size: 21px; }
.btn { text-align: center; line-height: 1.2; padding: 10px 22px; }
.actions .btn { flex: 1 1 150px; }
.espace-h { margin-top: 18px; }

/* ---------- Étoiles ---------- */
.etoiles { display: inline-flex; align-items: center; gap: 2px; color: var(--ocre); vertical-align: middle; }
.etoile { width: 18px; height: 18px; } .etoile.grande { width: 38px; height: 38px; }
.etoiles-nb { margin-left: 6px; font-size: 14px; font-weight: 700; color: var(--encre-douce); }
.etoiles-saisie { gap: 6px; margin: 4px 0 14px; } .etoile-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; color: var(--ocre); border-radius: 10px; } .etoile-btn:active { transform: scale(.9); }

/* ---------- Menu hamburger (mobile) ---------- */
.tiroir-voile { position: fixed; inset: 0; z-index: 70; background: rgba(44, 42, 36, .45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.tiroir-voile.ouvert { opacity: 1; pointer-events: auto; }
.tiroir { position: absolute; left: 0; top: 0; bottom: 0; width: min(86vw, 340px); background: var(--ivoire); transform: translateX(-102%); transition: transform .3s cubic-bezier(.2, .9, .3, 1); display: flex; flex-direction: column; padding: calc(22px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 0 28px 28px 0; box-shadow: var(--ombre); overscroll-behavior: contain; }
.tiroir-voile.ouvert .tiroir { transform: none; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 18px; }
.menu-groupe { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--sauge-fonce); padding: 20px 14px 8px; }
.tiroir .menu-lien, .menu-lateral .menu-lien { display: flex; align-items: center; gap: 14px; padding: 13px 14px; margin-bottom: 3px; border-radius: 16px; text-decoration: none; font-weight: 600; color: var(--encre-douce); font-size: 16.5px; }
.tiroir .menu-lien:active { background: var(--lin); } .tiroir .menu-lien.actif { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-douce); } .tiroir .menu-lien.actif .ico { color: var(--argile); }
.tiroir .menu-lien .ico { width: 22px; height: 22px; }
.tiroir-pied { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); }
.menu-lateral { overflow-y: auto; }
.barre .btn-rond { width: 42px; min-height: 42px; flex: none; } .barre { gap: 10px; }
@media (min-width: 900px) { .tiroir-voile, #bt-menu { display: none !important; } }

/* ---------- Formules & DIP ---------- */
.ligne-formule { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); } .ligne-formule:last-child { border-bottom: 0; }
.ligne-formule .qte { font-weight: 700; white-space: nowrap; text-align: right; } .ligne-formule small { display: block; color: var(--encre-douce); opacity: .8; font-weight: 400; }
.note-carte { border-left: 4px solid var(--lin); padding: 4px 0 4px 14px; margin-bottom: 16px; } .note-carte.client { border-color: var(--argile); } .note-carte p { margin: 4px 0 0; }
.dip-section { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; margin-bottom: 14px; }
.dip-section h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .dip-section .aide { color: var(--encre-douce); opacity: .85; font-size: 15px; margin-bottom: 14px; }
.progres-dip { display: flex; align-items: center; gap: 12px; } .progres-dip .barre-progres { flex: 1; } .progres-dip b { min-width: 44px; text-align: right; }
.segments-s .segment { min-height: 36px; font-size: 13px; }
.statut-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--lin); flex: none; } .statut-pastille.complet { background: var(--sauge); } .statut-pastille.en_cours { background: var(--ocre); }
.avec-retours { white-space: pre-line; }

/* =====================================================================
   Respiration — style épuré : de l'air entre chaque bloc, jamais d'éléments collés.
   Échelle d'espacement : 8 · 16 · 24 · 32 · 48.
   ===================================================================== */
:root { --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; }

.contenu { padding-top: 32px; }
@media (min-width: 900px) { .contenu { padding: 56px 56px 80px; max-width: 960px; } }

/* titres : plus d'air autour */
h1 { margin-bottom: var(--e2); }
.contenu > h1 + .doux, .contenu > .eyebrow + h1 { margin-bottom: var(--e3); }
.contenu > h2, .contenu > .titre-section { margin: var(--e5) 0 var(--e2); }
.contenu > h1 + h2 { margin-top: var(--e4); }
.eyebrow { margin-bottom: var(--e1); }

/* groupes d'actions : séparés de ce qui précède ET de ce qui suit */
.actions { margin: var(--e3) 0; gap: 14px; }
.carte > .actions:last-child, .dip-section .actions:last-child, .feuille .actions:last-child { margin-bottom: 0; }
.actions-tete { margin-bottom: var(--e2); }
.actions + .actions { margin-top: calc(-1 * var(--e1)); }          /* deux rangées d'actions voisines restent proches l'une de l'autre */

/* contrôles de navigation / filtres */
.segments { margin: var(--e3) 0; }
.chips { margin: var(--e3) 0; gap: 10px; padding-bottom: 6px; }
.recherche { margin: var(--e3) 0; }
.chip { min-height: 42px; padding: 0 20px; }
.segment { min-height: 44px; }

/* cartes, listes, rangées */
.carte { padding: 28px; margin-bottom: var(--e3); border-radius: 26px; }
.carte-sans { padding: 0; }
.rang { padding: 20px 24px; gap: 16px; }
.grille-stats { gap: var(--e2); margin-bottom: var(--e4); }
.stat { padding: 22px; }
.deux-col { gap: var(--e2); }
.msg { margin-bottom: var(--e3); padding: 16px 20px; }
.champ { margin-bottom: 24px; }
.ingredient { padding: 18px 20px; margin-bottom: 14px; }
.dip-section { padding: 24px; margin-bottom: var(--e3); }
.note-carte { margin-bottom: var(--e3); }
.vide { padding: 64px 24px; }
.btn { min-height: 52px; padding-left: 28px; padding-right: 28px; }
.btn-s { min-height: 42px; }
.suggestions { margin-top: 8px; margin-bottom: var(--e3); }
.titre-section { margin: var(--e5) 0 var(--e3); }

/* listes qui suivent directement un contrôle : un vrai espace, pas un contact */
.chips + .carte, .segments + .carte, .recherche + .carte, .actions + .carte, .chips + .msg, .actions + .msg { margin-top: 0; }
.actions + h2, .carte + h2, .carte-sans + h2, .grille-stats + h2 { margin-top: var(--e5); }

/* mobile : même esprit, en un peu plus compact */
@media (max-width: 600px) {
  .contenu { padding: 24px 20px calc(var(--haut-onglets) + 32px); }
  .carte { padding: 22px; }
  .rang { padding: 18px 20px; }
  .actions .btn { flex: 1 1 100%; }
  .stat { padding: 18px; }
}

/* =====================================================================
   Détails de précision (bureau) : un seul alignement pour tout.
   Colonne gauche 280 px ; logo centré verticalement dans une zone de la hauteur exacte de la barre du haut ;
   le texte du logo et l'icône des menus partagent le même bord gauche ; la barre du haut et le contenu partagent les mêmes marges.
   ===================================================================== */
@media (min-width: 900px) {
  .app { grid-template-columns: 280px 1fr; }
  .menu-lateral { padding: 0 18px 28px; }
  .menu-lateral .logo { display: flex; align-items: center; height: calc(var(--haut-barre) + 24px); padding: 0 14px; margin-bottom: 12px; font-size: 21px; white-space: nowrap; }
  .menu-lateral .menu-groupe { padding-top: 28px; }
  /* la barre du haut ne répète plus le titre de la page (déjà affiché en grand) : épurée, sans filet */
  .barre { height: calc(var(--haut-barre) + 24px); border-bottom: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: flex-end;
    padding-left: max(56px, calc((100% - 960px) / 2 + 56px)); padding-right: max(56px, calc((100% - 960px) / 2 + 56px)); }
  .barre-titre { display: none; }
  .contenu { padding-top: 24px; }
}
/* le menu du bas / hamburger : mêmes arrondis et marges qu'ailleurs */
.tiroir .logo { font-size: 21px; white-space: nowrap; }
.tiroir-tete { padding: 0 14px 18px; }

/* corrections de précision */
.menu-lateral > * { flex-shrink: 0; }                                   /* rien ne s'écrase quand le menu est plus haut que l'écran */
@media (min-width: 900px) {
  .menu-lateral .logo { display: block; height: calc(var(--haut-barre) + 24px); line-height: calc(var(--haut-barre) + 24px); padding: 0 14px; }
}
.barre .logo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(15px, 4.6vw, 19px); }

/* titre de barre : discret en haut de page, il n'apparaît qu'au défilement (comme sur iOS) */
.barre { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.barre.defile { border-bottom-color: var(--trait); }
.barre-titre { opacity: 0; transition: opacity .25s ease; }
.barre.defile .barre-titre { opacity: 1; }

/* ---------- Documents : lignes, zone de dépôt ---------- */
.rang-doc { padding: 0; gap: 0; cursor: default; }
.rang-doc-ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 16px 8px 16px 20px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 0; }
.rang-doc-ouvrir:hover { background: var(--ivoire); }
.rang-doc .retirer { margin-right: 10px; text-decoration: none; color: inherit; flex: none; }
.rang-doc .retirer:last-child { margin-right: 16px; }
.depot { margin-top: var(--e3); display: grid; place-items: center; gap: 6px; text-align: center; padding: 36px 20px; border: 2px dashed var(--trait-fort); border-radius: var(--rayon); background: var(--ivoire); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.depot:hover, .depot:focus-visible { border-color: var(--sauge); background: var(--sauge-pale); outline: none; }
.depot.survol { border-color: var(--argile); background: var(--argile-pale); transform: scale(1.01); }
.depot.occupe { pointer-events: none; opacity: .75; }
.depot-ico { color: var(--sauge-fonce); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blanc); box-shadow: var(--ombre-douce); margin-bottom: 8px; }
.depot-titre { font: 500 18px var(--font-display); }
.depot-actions { margin-top: var(--e2); }
@media (hover: none) { .depot-aide { display: none; } .depot { padding: 26px 16px; } }

/* ---------- Aperçu des documents ---------- */
.feuille-apercu { max-width: 1100px; height: 94dvh; padding: 0; display: flex; flex-direction: column; background: var(--blanc); overflow: hidden; }
.feuille-apercu::before { display: none; }
.ap-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--trait); flex: none; }
.ap-titre { min-width: 0; display: grid; gap: 2px; } .ap-titre strong { font: 500 19px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ap-zoom { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--encre-douce); } .ap-zoom .btn-rond { width: 40px; min-height: 40px; font-size: 20px; line-height: 1; }
.ap-corps { flex: 1; overflow: auto; background: var(--ivoire-2); padding: 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ap-corps > .spinner { margin: 80px auto; }
.ap-pdf { display: grid; justify-items: center; gap: 16px; } .ap-canvas { background: #fff; box-shadow: var(--ombre); border-radius: 4px; max-width: none; }
.ap-img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; border-radius: 12px; box-shadow: var(--ombre); background: #fff; }
.ap-page { max-width: 820px; margin: 0 auto; background: #fff; padding: 48px 56px; border-radius: 6px; box-shadow: var(--ombre); font-size: 16px; line-height: 1.6; }
.ap-page p { margin: 0 0 .7em; } .ap-page .ap-vide { min-height: .8em; margin: 0; } .ap-page h2, .ap-page h3, .ap-page h4, .ap-page h5 { margin: 1.2em 0 .5em; } .ap-page .ap-puce::before { content: "•"; margin-right: 10px; color: var(--argile); }
.ap-table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; } .ap-table td { border: 1px solid var(--trait-fort); padding: 7px 10px; vertical-align: top; }
.ap-grille td { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; background: #fff; } .ap-grille tr:first-child td { font-weight: 700; background: var(--lin); position: sticky; top: -20px; }
.ap-tableur { overflow: auto; } .ap-feuilles { margin-top: 0; }
.ap-texte { margin: 0 auto; max-width: 820px; background: #fff; padding: 28px; border-radius: 6px; box-shadow: var(--ombre); white-space: pre-wrap; word-break: break-word; font: 14px/1.6 ui-monospace, Menlo, monospace; }
@media (max-width: 700px) { .feuille-apercu { height: 96dvh; border-radius: 28px 28px 0 0; } .ap-corps { padding: 12px; } .ap-page { padding: 26px 20px; } .ap-tete { padding: 16px 14px 14px 20px; } }

/* ---------- Fenêtre des notifications ---------- */
.popover-voile { position: fixed; inset: 0; z-index: 85; background: transparent; }
.popover { position: fixed; z-index: 86; width: 420px; max-width: calc(100vw - 32px); max-height: min(680px, calc(100dvh - 120px)); display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); border-radius: 26px; box-shadow: 0 40px 80px -24px rgba(44, 42, 36, .38), 0 2px 8px rgba(44, 42, 36, .06); overflow: hidden; transform-origin: top right; animation: pop-ouvre .2s cubic-bezier(.2, .9, .3, 1) both; }
.popover.sortie { animation: pop-ferme .14s ease both; }
@keyframes pop-ouvre { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop-ferme { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
.notifs-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; flex: none; }
.notifs-tete h2 { margin: 0; font-size: 22px; }
.notifs-actions { display: flex; align-items: center; gap: 14px; } .notifs-actions .lien { font-size: 14px; }
.notifs-x { width: 38px; min-height: 38px; box-shadow: none; background: var(--ivoire); }
@media (min-width: 900px) { .popover .notifs-x { display: none; } }
.notifs-liste { overflow-y: auto; padding: 0 12px 12px; overscroll-behavior: contain; }
.notif { display: flex; align-items: flex-start; gap: 14px; padding: 14px 12px; border-radius: 18px; text-decoration: none; color: inherit; position: relative; transition: background .15s; }
.notif:hover, .notif:active { background: var(--ivoire); } .notif.non-lue { background: var(--argile-pale); } .notif.non-lue:hover { background: #f0dccd; }
.notif-corps { display: grid; gap: 2px; min-width: 0; flex: 1; } .notif-titre { font-weight: 700; } .notif-texte { font-size: 15px; color: var(--encre-douce); line-height: 1.4; } .notif-temps { font-size: 13px; color: var(--encre-douce); opacity: .65; margin-top: 2px; }
.notif-point { width: 10px; height: 10px; border-radius: 50%; background: var(--argile); flex: none; margin-top: 8px; }
.notifs-vide { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 36px 32px 44px; color: var(--sauge); } .notifs-vide h3 { color: var(--encre); margin: 8px 0 0; } .notifs-vide p { color: var(--encre-douce); margin: 0; }
.feuille-notifs { padding: 0; max-height: 86dvh; display: flex; flex-direction: column; } .feuille-notifs .notifs-feuille { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.feuille-notifs .notifs-tete { padding-top: 6px; } .feuille-notifs .notifs-liste { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.pastille-nb { top: -3px; right: -3px; }

/* Boutons ronds : toujours des CERCLES (corrige la règle .btn plus haut qui leur donnait un padding horizontal) */
.btn.btn-rond { padding: 0; width: 44px; height: 44px; min-height: 44px; flex: none; border-radius: 50%; }
.barre .btn.btn-rond { width: 42px; height: 42px; min-height: 42px; }
.notifs-x.btn-rond { width: 38px; height: 38px; min-height: 38px; }
.ap-zoom .btn.btn-rond, .ap-actions .btn.btn-rond { width: 40px; height: 40px; min-height: 40px; }
.btn.btn-rond .ico { margin: 0; }
/* zone de dépôt : sur ordinateur, la zone suffit (glisser ou cliquer) ; sur tactile, boutons explicites */
@media (hover: hover) and (pointer: fine) { .depot-actions [data-bouton-choisir] { display: none; } .depot-actions:empty, .depot-actions:not(:has(button:not([data-bouton-choisir]))) { display: none; } }

/* aperçu : en-tête — une rangée sur ordinateur ; sur téléphone, titre + fermer, puis les outils (le titre n'est plus tronqué) */
.ap-tete { flex-wrap: wrap; row-gap: 12px; } .ap-titre { flex: 1 1 0; } .ap-fermer { order: 3; }
@media (max-width: 700px) { .ap-titre { order: 1; flex: 1 1 calc(100% - 64px); } .ap-fermer { order: 2; } .ap-actions { order: 3; flex: 1 0 100%; justify-content: flex-end; } .ap-titre strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
.ap-corps { box-sizing: border-box; }

/* =====================================================================
   Typographie épurée : textes courts, lignes équilibrées, jamais de mot orphelin sur la dernière ligne.
   ===================================================================== */
h1, h2, h3, .vide p, .vide h3, .depot-titre, .notifs-vide p, .carte > p:only-child { text-wrap: balance; }
p, .doux, .rang-sous, .notif-texte, small { text-wrap: pretty; }
.contenu > p { max-width: 52ch; }
.vide p { max-width: 34ch; margin-left: auto; margin-right: auto; }
.vide h3 { margin-bottom: 4px; }

/* =====================================================================
   En-tête de module — géométrie FIXE : titre → boutons → texte d'aide.
   Les boutons sont toujours à la même hauteur quand on passe d'un module à l'autre.
   ===================================================================== */
.page-tete { margin: 0 0 var(--e4); }
.page-tete .page-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 var(--e3); }
.page-tete .page-intro { margin: 0; max-width: 52ch; }
.page-tete > :last-child { margin-bottom: 0; }
.page-tete + * { margin-top: 0; }
@media (max-width: 600px) { .page-tete .page-actions .btn { flex: 1 1 100%; } }

.rang-pct { min-width: 56px; text-align: right; }   /* les barres de progression se terminent toutes au même endroit */

/* petits textes (légendes, descriptions courtes) : lignes équilibrées, jamais un mot ou une unité seul(e) à la ligne */
.rang-sous, .notif-texte, small, .msg, .doux, p { text-wrap: balance; }
.avec-retours, .ap-page p, .ap-texte { text-wrap: wrap; }
.rang-sous, .notif-texte, .notif-titre { display: block; }   /* l'équilibrage des lignes ne s'applique qu'aux blocs */
.rang-corps { min-width: 0; text-wrap: balance; }

/* listes bord à bord : la règle mobile des cartes (padding 22 px) ne doit jamais s'appliquer aux listes à séparateurs */
.carte.carte-sans { padding: 0; }

/* =====================================================================
   Barre du haut au défilement : AUCUN trait. Elle prend un fond ivoire légèrement flouté et le contenu
   s'estompe en fondu sous elle, au lieu d'être coupé net par un filet.
   ===================================================================== */
.barre, .barre.defile { border-bottom: 0 !important; }
.barre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .25s ease, backdrop-filter .25s ease; }
.barre::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(to bottom, rgba(246, 242, 234, .92), rgba(246, 242, 234, 0)); }
.barre.defile { background: rgba(246, 242, 234, .92); -webkit-backdrop-filter: saturate(1.15) blur(14px); backdrop-filter: saturate(1.15) blur(14px); }
.barre.defile::after { opacity: 1; }
/* barre du bas (mobile) : même principe, pas de filet — une ombre diffuse */
.onglets-bas { border-top: 0 !important; box-shadow: 0 -14px 32px -18px rgba(44, 42, 36, .22); }

/* =====================================================================
   Fenêtre des notifications : chaque notification est une carte à part, avec de l'AIR entre elles (jamais collées),
   et la liste s'estompe en douceur aux bords au lieu d'être coupée net sous l'en-tête.
   ===================================================================== */
.notifs-liste { display: flex; flex-direction: column; gap: 10px; padding: 6px 14px 20px; }
.notif { margin: 0; padding: 16px 16px; border-radius: 20px; }
.notif.non-lue .pastille { background: var(--blanc); }
.notifs-liste { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); }
.notifs-tete { padding-bottom: 10px; }

/* =====================================================================
   Barre du haut — AUCUNE ARÊTE possible : pas de flou, pas de saturation, pas de transparence partielle.
   Au défilement elle devient exactement de la couleur de la page (ivoire), et le contenu s'estompe en fondu de la MÊME couleur :
   il n'y a donc aucune différence de teinte à l'endroit où elle se termine, même en grossissant.
   ===================================================================== */
.barre, .barre.defile { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; transition: none !important; }
.barre { background: transparent; }
.barre.defile { background: #f6f2ea; }
.barre::after { background: linear-gradient(to bottom, #f6f2ea, rgba(246, 242, 234, 0)); height: 28px; transition: none; opacity: 0; }
.barre.defile::after { opacity: 1; }

/* bandeau « nouvelle version disponible » */
.bandeau-maj { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: var(--sauge-pale); color: var(--sauge-fonce); text-align: center; font-size: 15px; font-weight: 600; padding: 10px 16px; }
.bandeau-maj .lien { color: var(--sauge-fonce); }

/* =====================================================================
   BARRE DU HAUT (même principe que CultiOS) : fixe, pleine largeur, fond plein, un filet constant en dessous.
   Gauche : titre du module + sous-titre. Droite : champ de recherche en pilule + cloche (badge).
   Elle est alignée sur les marges du contenu ; rien ne la fait apparaître ni disparaître.
   ===================================================================== */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px;
  padding: 0 max(56px, calc((100% - 960px) / 2 + 56px)); background: var(--ivoire); border-bottom: 1px solid var(--trait-fort); }
.entete-gauche { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.entete-titres { min-width: 0; }
.entete-titre { font: 500 24px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-sous { font-size: 15px; line-height: 1.35; color: var(--encre-douce); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-droite { display: flex; align-items: center; gap: 14px; flex: none; }
.entete .btn.btn-rond { width: 46px; height: 46px; min-height: 46px; background: var(--blanc); box-shadow: none; border: 1px solid var(--trait-fort); position: relative; }
.entete .btn.btn-rond:hover { background: var(--lin); }
.entete .logo { display: none; font-size: clamp(15px, 4.6vw, 19px); white-space: nowrap; }

/* champ de recherche en pilule + résultats */
.recherche-barre { position: relative; width: min(340px, 28vw); min-width: 220px; }
.recherche-barre input { width: 100%; height: 46px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--blanc); padding: 0 50px 0 48px; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.recherche-barre input::-webkit-search-cancel-button { display: none; }
.recherche-barre input:focus { border-color: var(--sauge-fonce); box-shadow: 0 0 0 4px rgba(124, 138, 110, .22); }
.recherche-ico { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--encre-douce); opacity: .65; pointer-events: none; display: grid; }
.touche { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font-body); color: var(--encre-douce); border: 1px solid var(--trait-fort); border-radius: 7px; padding: 1px 8px; background: var(--ivoire); pointer-events: none; }
.recherche-barre input:focus ~ .touche, .recherche-barre input:not(:placeholder-shown) ~ .touche { display: none; }
.resultats-barre { position: absolute; top: calc(100% + 12px); right: 0; width: min(440px, 90vw); max-height: min(520px, 70dvh); overflow-y: auto; background: var(--blanc); border: 1px solid var(--trait); border-radius: 24px; padding: 8px;
  box-shadow: 0 40px 80px -24px rgba(44, 42, 36, .38), 0 2px 8px rgba(44, 42, 36, .06); animation: pop-ouvre .18s cubic-bezier(.2, .9, .3, 1) both; z-index: 40; }
.resultat { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: inherit; }
.resultat:hover, .resultat.actif { background: var(--ivoire); }
.resultat .pastille { width: 38px; height: 38px; border-radius: 12px; flex: none; }
.resultat-corps { min-width: 0; display: grid; } .resultat-titre { font-weight: 600; } .resultat-sous { font-size: 14px; color: var(--encre-douce); opacity: .85; }
.resultats-vide { padding: 22px 16px; text-align: center; color: var(--encre-douce); }
.resultats-barre .groupe { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--sauge-fonce); padding: 10px 14px 4px; }

/* ordinateur : champ de recherche visible, loupe et menu cachés */
@media (min-width: 900px) { #bt-recherche, #bt-menu, .cache-pc { display: none !important; } }
/* mobile / tablette : loupe à la place du champ, titre plus compact */
@media (max-width: 899px) {
  .entete { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; gap: 10px; }
  .recherche-barre, .entete-sous { display: none; }
  .entete-titre { font-size: 20px; }
  .entete-droite { gap: 10px; } .entete-gauche { gap: 10px; }
  .entete .btn.btn-rond { width: 44px; height: 44px; min-height: 44px; }
  .entete .logo { display: block; }
  .cache-mobile { display: none !important; }
}

/* =====================================================================
   TOUT L'ESPACE (comme CultiOS) : plus de colonne étroite centrée. Le contenu occupe la largeur disponible ;
   les cartes se rangent en colonnes sur grand écran ; les formulaires gardent une largeur de lecture confortable.
   ===================================================================== */
.contenu { max-width: none; margin: 0; }
.entete { padding-left: 40px; padding-right: 40px; }
@media (min-width: 900px) {
  .contenu { padding: 32px 40px 72px; }
  .entete { padding-left: 40px; padding-right: 40px; }
  /* cartes EMPILÉES en colonnes (jamais alignées sur des lignes communes) : chaque carte vient juste sous la précédente, sans trou */
  #vue:not(.vue-etroite) { display: block; }
  #vue:not(.vue-etroite) > * { margin: 0 0 24px !important; }
  /* groupes de cartes : colonnes construites par core/colonnes.js (aucune colonne CSS) */
  #vue:not(.vue-etroite) > .groupe-colonnes { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 24px; align-items: start; }
  .groupe-colonnes > .colonne { display: grid; gap: 24px; align-content: start; min-width: 0; }
  .groupe-colonnes > .colonne > * { margin: 0 !important; }
  #vue:not(.vue-etroite) > h2 { margin: 12px 0 14px !important; }
  #vue:not(.vue-etroite) > .page-tete { margin-bottom: 20px !important; }
  #vue.vue-etroite { max-width: 880px; }
  .grille-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  /* listes de fiches : chaque ligne devient une carte, rangées en grille */
  .carte-sans.liste-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  .liste-grille > .rang { background: var(--blanc); border: 1px solid var(--trait); border-radius: 22px; box-shadow: var(--ombre-douce); border-bottom: 1px solid var(--trait); }
  .liste-grille > .rang:hover { background: var(--ivoire); }
  /* accueil sur deux colonnes */
  .colonnes-accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 32px; align-items: start; }
  .colonnes-accueil .pile { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .colonnes-accueil .pile > h2 { margin: 12px 0 -4px; }
  .colonnes-accueil .pile > .carte { margin: 0; }
}
.depot { margin-bottom: 24px; }
.contenu > .pied-lien, #vue > .pied-lien { max-width: none; text-align: center; margin-top: 8px; }

/* DIP : résumé pleine largeur (progression à gauche, référence CPNP à droite), puis les sections en colonnes sans trou */
.resume-dip { display: grid; grid-template-columns: 1fr; gap: 20px 40px; align-items: end; }
@media (min-width: 900px) {
  .resume-dip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.resume-dip .resume-progres p { margin: 10px 0 0; }
.resume-dip .resume-cpnp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.resume-dip .resume-cpnp .champ { margin: 0; }
@media (max-width: 599px) { .resume-dip .resume-cpnp { grid-template-columns: 1fr; } }
/* zone de dépôt plus compacte : icône à gauche, texte à droite */
.depot { grid-auto-flow: column; justify-content: center; align-items: center; text-align: left; gap: 4px 18px; padding: 20px 22px; grid-template-columns: auto 1fr; margin-top: 18px; }
.depot .depot-ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
.depot .depot-titre { font-size: 17px; align-self: end; } .depot .depot-aide { align-self: start; }
@media (hover: none) { .depot { padding: 18px; } }
.dip-section { padding: 24px; }
.dip-section .depot { margin-bottom: 20px; }
/* résumé du DIP : pleine largeur (priorité sur la règle des cartes en colonnes) */
/* zone de dépôt : tout aligné à gauche, icône centrée verticalement */
.depot { justify-items: start; align-items: center; place-content: center start; }
.depot .depot-titre, .depot .depot-aide { text-align: left; justify-self: start; }
.lien-titre { color: inherit; text-decoration: none; }

/* ---- Boutique : messages, liste de conformité, filtres défilants ---- */
.msg-bulle { max-width: 82%; padding: 14px 18px; border-radius: 20px; background: var(--ivoire-2); margin: 0 0 var(--e2); }
.msg-bulle p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bulle-atelier { margin-left: auto; background: var(--encre); color: var(--blanc); }
.msg-bulle-atelier .doux { color: var(--blanc); }
.fil { margin: 0 0 var(--e2); }
.case-ligne { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: 15px; cursor: pointer; }
.case-ligne:last-child { border-bottom: 0; }
.case-ligne input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--sauge-fonce); flex: none; }
.segments-defile { overflow-x: auto; scrollbar-width: none; }
.segments-defile::-webkit-scrollbar { display: none; }
.segments-defile .segment { white-space: nowrap; }
a.stat { text-decoration: none; color: inherit; }
button.rang { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- Fiche produit : page du site ---- */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
.ligne-stock { display: flex; align-items: flex-end; gap: var(--e2); margin: var(--e2) 0 var(--e1); }
.ligne-stock .champ { flex: 1; margin: 0; }
textarea.entree.haut { min-height: 220px; }
.champ small b { font-weight: 700; color: var(--encre); }

/* ---- Site internet : paramètres (livraison au poids) ---- */
.tranche { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--e2); align-items: end; margin-bottom: var(--e1); }
.tranche .champ { margin: 0; }
.tranche .btn-rond { margin-bottom: 2px; }
.champ-court { max-width: 260px; }
.simu { margin-top: var(--e4); padding: var(--e3); background: var(--ivoire); border-radius: var(--rayon-s); }
.simu .champ-court { display: inline-block; margin-right: var(--e2); vertical-align: top; }
.simu-res { margin: var(--e2) 0 0; font-weight: 600; }
.alerte-poids { color: var(--danger); font-weight: 600; }
@media (max-width: 640px) { .tranche { grid-template-columns: 1fr 1fr auto; } .simu .champ-court { display: block; margin-right: 0; } }

/* ---- Galerie de photos d'un produit (application) ---- */
.galerie-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e2); margin-bottom: var(--e2); }
.vignette { margin: 0; position: relative; background: var(--ivoire-2); border-radius: var(--rayon-s); overflow: hidden; }
.vignette img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.vignette figcaption { position: absolute; left: 8px; top: 8px; background: var(--blanc); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.vignette-actions { position: absolute; inset: auto 8px 8px 8px; display: flex; justify-content: space-between; gap: 8px; }
.galerie-app .photo-vide { grid-column: 1 / -1; }

/* ---- Préparation par scan ---- */
.ligne-ean { display: flex; gap: var(--e1); align-items: stretch; }
.ligne-ean .entree { flex: 1; }
.scan-etat { margin: var(--e2) 0; padding: 14px 18px; border-radius: var(--rayon-s); background: var(--ivoire-2); font-weight: 600; text-align: center; }
.scan-etat.scan-ok { background: var(--sauge-pale, #e3ead9); color: var(--sauge-fonce); }
.scan-etat.scan-ko { background: var(--danger-pale); color: var(--danger); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.puce { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--ocre-pale); color: var(--ocre); font-size: 12.5px; font-weight: 600; }
.puce.puce-ok { background: #e3ead9; color: var(--sauge-fonce); }
.rang-prepa { align-items: flex-start; }
.prepa-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ---- Pas de rebond de défilement : ni sur ordinateur (trackpad, souris) ni dans l'application installée. Bloque aussi
   le « tirer pour actualiser » et le balayage horizontal qui revient à la page précédente. Les fenêtres gardent leur propre défilement. ---- */
html, body { overscroll-behavior: none; }
.feuille, .voile, .notifs, .notifs-liste, .resultats-barre, .segments-defile, .camera { overscroll-behavior: contain; }

/* ---- Préparation : choisir la cuvée dans la liste (jamais saisir un numéro inventé) ---- */
.choix-lot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.puce-choix { border: 1px solid var(--trait-fort); background: var(--blanc); border-radius: 999px; padding: 10px 18px; font: 600 14px var(--font-body); color: var(--encre); cursor: pointer; min-height: 44px; }
.puce-choix:hover, .puce-choix:active { background: var(--sauge-fonce); border-color: var(--sauge-fonce); color: var(--blanc); }

#vue > p.intro-large { max-width: none; }

/* Pincement tactile : pas de zoom de la page (le défilement reste libre) */
html { touch-action: pan-x pan-y; }

/* une colonne : cartes empilées, avec l'espace habituel entre elles */
.groupe-colonnes { display: block; }
.groupe-colonnes > .colonne { display: grid; gap: 24px; margin-bottom: 24px; }
.groupe-colonnes > .colonne > * { margin: 0 !important; }
.groupe-colonnes > .colonne:last-child { margin-bottom: 0; }
@media (min-width: 900px) { #vue:not(.vue-etroite) > .groupe-colonnes > .colonne { margin-bottom: 0; } }

/* Bascule Matières / Lots : compacte, à droite du bouton d'action */
.page-actions { align-items: center; }
.page-actions .segments-compact { flex: 0 0 auto; margin: 0 0 0 auto; }
.segments-compact .segment { flex: none; padding: 0 26px; min-height: 40px; }
@media (max-width: 600px) { .page-actions .segments-compact { flex: 1 1 100%; margin: 0; } .segments-compact .segment { flex: 1; } }

/* Filtres discrets : texte seul, l'actif est repéré par une fine pastille claire (onglets du site, filtres des commandes et des produits) */
.segments.segments-fins { background: transparent; padding: 0; gap: 4px; margin: 0 0 var(--e3); border-radius: 0; }
.segments-fins .segment { flex: none; min-height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--encre-douce); background: transparent; box-shadow: none; }
@media (hover: hover) { .segments-fins .segment:hover { color: var(--encre); background: var(--lin); } }
.segments-fins .segment.actif { color: var(--encre); background: var(--lin); box-shadow: none; }

/* Filtre déroulant discret (comme dans les listes de CultiOS) */
.filtres { margin: 0 0 var(--e3); }
select.entree.select-filtre { width: auto; min-width: 190px; min-height: 40px; padding: 0 40px 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }

/* Barre d'outils : onglets à gauche, filtre et action à droite, sur une même ligne */
.barre-site { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 var(--e3); }
.barre-site .segments { margin: 0; }
.barre-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.barre-outils .btn-barre { min-height: 40px; padding: 0 20px; font-size: 13px; }
@media (max-width: 600px) { .barre-outils { width: 100%; margin-left: 0; } .barre-outils .select-filtre { flex: 1; } }

/* « Ouvrir le site » : dans l'en-tête, à gauche de la recherche, uniquement dans Site internet */
.btn-entete { min-height: 44px; padding: 0 20px; font-size: 13px; }
@media (max-width: 900px) { .btn-entete { width: 44px; padding: 0; } .btn-entete .lib { display: none; } }

/* Même ligne = mêmes dimensions : les éléments d'une même rangée ont exactement la même hauteur */
.btn-entete { min-height: 46px; height: 46px; }                                              /* = barre de recherche et cloche */
.barre-outils .select-filtre, .barre-outils .btn-barre { min-height: 34px; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }   /* = onglets à gauche */
.barre-outils .select-filtre { min-width: 0; width: auto; padding-left: 16px; padding-right: 36px; background-position: right 12px center; }
.barre-outils .btn-barre { padding: 0 18px; letter-spacing: .05em; }
.page-actions .segments-compact .segment { min-height: 44px; }                              /* segments (4+44+4) = bouton (52) */
.barre-outils select.entree.select-filtre { min-height: 34px; height: 34px; padding: 0 36px 0 16px; font-size: 13.5px; }

/* Menu de gauche (ordinateur) : compact, pour tenir sans défiler */
@media (min-width: 900px) {
  .menu-lateral { padding: 0 16px 14px; }
  .menu-lateral .logo { height: 76px; margin-bottom: 4px; }
  .menu-lateral .menu-groupe { padding: 16px 14px 6px; font-size: 11.5px; }
  .menu-lateral .menu-lien { padding: 8px 14px; margin-bottom: 2px; gap: 12px; font-size: 15px; border-radius: 12px; }
  .menu-lateral .menu-lien .ico { width: 20px; height: 20px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .menu-lateral .logo { height: 64px; }
  .menu-lateral .menu-groupe { padding-top: 10px; }
  .menu-lateral .menu-lien { padding: 6px 14px; }
}

/* Le filtre occupe toujours la même place (tout à droite) et la même largeur d'un sous-onglet à l'autre */
.barre-outils select.entree.select-filtre { width: 190px; flex: none; }
@media (max-width: 600px) { .barre-outils select.entree.select-filtre { width: auto; flex: 1; } }

/* ===== Une seule taille de pilule partout (ordinateur) : boutons d'en-tête, onglets, filtres, puces ===== */
@media (min-width: 900px) {
  .page-actions .btn, .actions-tete .btn { min-height: 34px; height: 34px; padding: 0 18px; font-size: 13.5px; letter-spacing: .05em; }
  .page-actions .btn svg, .actions-tete .btn svg, .barre-outils .btn svg { width: 16px; height: 16px; }
  .chips { gap: 6px; margin: 0 0 var(--e3); }
  .chip { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
  .segments:not(.segments-fins) { padding: 3px; }
  .segments:not(.segments-fins) .segment { min-height: 34px; font-size: 13.5px; padding: 0 18px; }
}

/* Filtre isolé sur une ligne de barre : toujours à droite, même taille partout */
.barre-site > select.entree.select-filtre { margin-left: auto; width: 190px; flex: none; min-height: 34px; height: 34px; padding: 0 36px 0 16px; font-size: 13.5px; }
.barre-site > .btn-barre { min-height: 34px; height: 34px; padding: 0 18px; font-size: 13.5px; letter-spacing: .05em; }
.barre-site > .btn-barre svg { width: 16px; height: 16px; }

/* Interrupteur isolé sur une ligne de barre : à droite, même taille que le reste */
.barre-site > .chip-barre { margin-left: auto; min-height: 34px; height: 34px; padding: 0 16px; font-size: 13.5px; }

/* Menu de gauche : « Accueil » respire sous le logo */
@media (min-width: 900px) {
  .menu-lateral .logo { margin-bottom: 22px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .menu-lateral .logo { height: 60px; margin-bottom: 14px; }
}

/* Signature discrète */
.credit { text-align: center; font-size: 11.5px; letter-spacing: .08em; color: var(--encre-douce); opacity: .6; padding: 6px 0 2px; }

/* Téléphone : chaque contrôle d'une barre occupe toute la largeur, alignés au même niveau (comme les colonnes sur ordinateur) */
@media (max-width: 899px) {
  .barre-site { flex-direction: column; align-items: stretch; gap: 12px; }
  .barre-site > .btn-barre, .barre-site > select.entree.select-filtre, .barre-site > .chip-barre,
  .barre-outils { width: 100%; margin-left: 0; }
  .barre-outils { flex-direction: row; gap: 10px; flex-wrap: nowrap; }
  .barre-outils > .btn-barre, .barre-outils > select.entree.select-filtre { flex: 1 1 0; width: auto; min-width: 0; }
  .barre-site > .btn-barre, .barre-site > select.entree.select-filtre, .barre-site > .chip-barre,
  .barre-outils > .btn-barre, .barre-outils > select.entree.select-filtre { min-height: 44px; height: 44px; font-size: 14px; justify-content: center; }
  .barre-site > .chip-barre { display: flex; align-items: center; justify-content: center; }
  .barre-site .segments-fins { width: 100%; }
}
@media (max-width: 899px) {
  .barre-site .btn-barre, .barre-outils .btn-barre { white-space: nowrap; letter-spacing: .03em; font-size: 13px; padding: 0 12px; gap: 8px; }
  .segments-fins .segment { min-height: 40px; }
}

/* Mobile : le logo de l'en-tête tient toujours en entier entre le menu et la loupe (taille proportionnelle à la largeur de l'écran) */
@media (max-width: 899px) {
  .entete .logo { font-size: clamp(11px, 3.55vw, 19px); overflow: visible; text-overflow: clip; letter-spacing: 0; flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 430px) {
  .entete .logo { font-size: 17px; line-height: 1.12; white-space: normal; }
  .entete .logo span { display: block; }      /* « L'Atelier » au-dessus de « l'Agathe Blanche » : lisible sur tous les téléphones */
}

/* Téléphone : barres alignées au même bord que le contenu, rien ne déborde */
@media (max-width: 899px) {
  .barre-outils { flex-direction: column; gap: 10px; }
  .barre-outils > .btn-barre, .barre-outils > select.entree.select-filtre { flex: none; width: 100%; }
  .segments-egaux { display: flex; background: var(--lin); padding: 3px; border-radius: 999px; }
  .segments-egaux .segment { flex: 1; justify-content: center; text-align: center; }
  .segments-egaux .segment.actif { background: var(--blanc); box-shadow: var(--ombre-douce); }
  .barre-site .segments-fins:not(.segments-egaux) { margin-left: -14px; }          /* le texte du 1er onglet s'aligne sur le bord du contenu */
}
@media (max-width: 430px) { .entete-titre { font-size: 18px; } }

@media (max-width: 430px) { .entete-titre { font-size: 16.5px; } }

/* Titres courts sur téléphone */
.entete-titre .t-court { display: none; }
@media (max-width: 899px) { .titre-court-tous .t-long { display: none; } .titre-court-tous .t-court { display: inline; } }
@media (max-width: 380px) { .titre-court-etroit .t-long { display: none; } .titre-court-etroit .t-court { display: inline; } }

/* Barre du bas (téléphone) : l'accueil garde sa barre d'origine ; les autres pages ont la barre des modules, à plat */
body:not(.sur-accueil) .onglets-accueil { display: none; }

/* Sous-onglets du module en bas de l'écran (téléphone). Sans sous-onglets : barre des modules. Accueil : barre d'origine. */
.onglets-sous { display: none; }
body.a-sous-onglets .onglets-sous { display: flex; }
body.a-sous-onglets .onglets-accueil { display: none; }
.onglets-sous .onglet-bas { min-width: 0; font-size: 11px; letter-spacing: 0; }
.onglets-sous .onglet-bas .ico { width: 22px; height: 22px; }
@media (max-width: 899px) { body.a-sous-onglets .barre-site > .segments { display: none; } body.a-sous-onglets .barre-site { gap: 0; } }
@media (min-width: 900px) { .onglets-sous { display: none !important; } }

/* Bouton à maintenir appuyé : une jauge se remplit pendant la durée demandée */
.btn-maintien { position: relative; overflow: hidden; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.btn-maintien .maintien-jauge { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(0, 0, 0, .28); transition-property: width; transition-timing-function: linear; }
.btn-maintien.maintenu .maintien-jauge { width: 100%; }
.btn-maintien .maintien-texte { position: relative; }

/* Menu hamburger (téléphone) : compact comme celui de l'ordinateur, tout tient sur un écran sans défiler */
@media (max-width: 899px) {
  .tiroir { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .tiroir-tete { padding: 0 8px 8px; }
  .tiroir .menu-groupe { padding: 12px 14px 4px; font-size: 11.5px; }
  .tiroir .menu-lien { padding: 8px 14px; margin-bottom: 2px; font-size: 15.5px; gap: 12px; border-radius: 12px; }
  .tiroir .menu-lien .ico { width: 20px; height: 20px; }
  .tiroir-pied { padding-top: 8px; }
  .tiroir-pied .menu-nom { padding: 6px 14px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .tiroir .menu-lien { padding: 6px 14px; }
  .tiroir .menu-groupe { padding-top: 8px; }
}

/* Menu hamburger ouvert : la page derrière et le menu lui-même ne bougent plus */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; overscroll-behavior: none; }
.tiroir-voile, .tiroir { touch-action: none; overscroll-behavior: none; }
.pub-alerte-note { background: #8a3a2a; font-weight: 500; }
.pub-info { margin-bottom: 14px; }

/* ---------- Installer l'application (écran de connexion, téléphone et tablette) ---------- */
.pwa-zone { margin-top: 18px; }
.pwa-zone .pwa-bouton { gap: 10px; }
.pwa-aide { margin-top: 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px 18px 12px; box-shadow: var(--ombre-douce); text-align: left; }
.pwa-titre { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.pwa-etapes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pwa-etapes li { display: grid; grid-template-columns: 26px 24px 1fr; gap: 10px; align-items: center; background: var(--ivoire); border-radius: var(--rayon-s); padding: 10px 12px; font-size: 15.5px; line-height: 1.35; }
.pwa-etapes .n { width: 26px; height: 26px; border-radius: 50%; background: var(--sauge); color: var(--blanc); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.pwa-etapes .i { color: var(--sauge-fonce); display: grid; place-items: center; }
.pwa-note { font-size: 13.5px; color: var(--encre-douce); opacity: .8; margin: 0 0 8px; }

/* ---------- Réglages d'expédition (Boxtal) ---------- */
.trois-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.table-transp { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 28px; align-items: center; max-width: 460px; }
.table-transp b { font-size: 13px; text-align: center; color: var(--encre-douce); }
.table-transp .case-ligne { justify-content: center; margin: 0; }

/* Déstockage (marché) : calculette locale, jamais enregistrée */
.marche-tot { display: flex; gap: 12px; justify-content: space-between; align-items: flex-end; }
.marche-tot > div { display: flex; flex-direction: column; gap: 2px; } .marche-tot b { font: 500 34px/1.1 var(--font-display); }
.marche-recap { display: flex; gap: 12px; margin: 6px 0 16px; } .marche-recap > div { flex: 1; background: var(--lin); border-radius: var(--rayon); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.marche-recap span { font-size: .85rem; color: var(--encre-douce); } .marche-recap b { font: 500 32px/1.1 var(--font-display); }
.qte-ctrl { display: flex; align-items: center; gap: 8px; margin: 0 8px; } .qte-ctrl b { min-width: 1.6em; text-align: center; }
.rang-btn { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }