/* Charte « Bleu bouillie » : un seul accent, le bleu de la bouillie bordelaise.
   (Les variables --ambre* gardent leur nom historique mais portent désormais l'accent bleu.) */
/* Charte Douelle : palette terre (feuillage, vigne, terroir, sauge, lumière, confiance).
   (Les variables --ambre* gardent leur nom historique ; elles portent l'accent « vigne », la terre cuite.) */
:root {
  --fond: #f4ede2;
  --carte: #fffaf3;
  --texte: #2b211b;
  --doux: #7a6a5e;
  --ligne: #e8dccb;
  --ambre: #b4573a;
  --ambre-fonce: #8f4129;
  --ambre-pale: #f6e4da;
  --vert: #4f7a4a;
  --vert-pale: #e6eee1;
  --rouge: #b43a2f;
  --rouge-pale: #f8e3df;
  --bleu: #33608f;
  --nav: #1f3a2e;
  --terroir: #c9a46c;
  --sauge: #6f8a6a;
  --surface: #faf4ea;
  --survol: #f7efe3;
  --champ: #fffdf9;
  --pastille: #efe5d6;
  --piste: #ebe0cf;
  --ligne-ambre: #ecc6b4;
  --barre: rgba(244, 237, 226, .86);
  --voile: rgba(31, 24, 18, .42);
  --rayon: 16px;
  --ombre: 0 1px 2px rgba(60, 35, 20, .05), 0 8px 24px rgba(60, 35, 20, .07);
  --police: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --titre: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; }
body {
  font: 14.5px/1.5 var(--police); -webkit-font-smoothing: antialiased;
  background: var(--fond); color: var(--texte); display: flex;
}
h1, h2, h3 { font-family: var(--police); font-weight: 600; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font: italic 400 38px/1.05 var(--titre); letter-spacing: -.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
a { color: var(--ambre-fonce); }

/* Navigation : barre d'icônes */
#nav {
  width: 84px; flex: none; background: var(--nav); color: #b9bcc3; display: flex; flex-direction: column; align-items: center;
  position: sticky; top: 0; height: 100vh; padding: 16px 0 12px;
}
.marque { width: 42px; height: 42px; border-radius: 13px; background: var(--ambre); color: #fff; display: grid; place-items: center; margin-bottom: 14px; flex: none; transition: transform .2s; }
.marque:hover { transform: rotate(-6deg) scale(1.05); }
.marque svg { width: 24px; height: 24px; }
#nav nav { padding: 0 8px; flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; scrollbar-width: none; }
#nav nav a {
  width: 64px; display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 8px 2px 7px; border-radius: 13px; color: #a9adb5;
  text-decoration: none; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; text-align: center; line-height: 1.15;
}
#nav nav a i { font-style: normal; display: grid; place-items: center; height: 24px; }
#nav nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#nav nav a.actif { background: rgba(255, 255, 255, .1); color: #fff; }
#nav nav a.actif i { color: var(--terroir); }

main { flex: 1; padding: 26px 32px 60px; min-width: 0; }
.entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.entete h1 { margin: 0; flex: 1; }
.sous-titre { color: var(--doux); margin: -12px 0 18px; }

/* Cartes et grilles */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; margin-bottom: 18px; }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); }
.kpi .val { font: 600 24px Georgia, serif; margin-top: 2px; }
.kpi .lib { font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.kpi .det { font-size: 12px; color: var(--doux); }
.kpi.pos .val { color: var(--vert); }
.kpi.neg .val { color: var(--rouge); }

/* Onglets */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); margin-bottom: 18px; flex-wrap: wrap; }
.onglets button {
  border: 0; background: none; padding: 9px 14px; font: inherit; color: var(--doux); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets button.actif { color: var(--texte); border-bottom-color: var(--ambre); font-weight: 600; }

/* Boutons et champs */
button, .bouton {
  font: inherit; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); padding: 7px 13px;
  border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .bouton:hover { border-color: var(--ambre); }
button.principal, .bouton.principal { background: var(--ambre); border-color: var(--ambre); color: #fff; font-weight: 600; }
button.principal:hover { background: var(--ambre-fonce); }
button.danger { color: var(--rouge); }
button.petit { padding: 3px 8px; font-size: 12px; }
button.lien { border: 0; background: none; padding: 2px 4px; color: var(--ambre-fonce); }
input, select, textarea {
  font: inherit; border: 1px solid var(--ligne); border-radius: 7px; padding: 7px 9px; background: var(--champ); color: var(--texte); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ambre-pale); border-color: var(--ambre); }
input[type=checkbox] { width: auto; }
textarea { min-height: 70px; resize: vertical; }
label.champ { display: block; }
label.champ > span { display: block; font-size: 12px; color: var(--doux); margin-bottom: 3px; }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.formulaire .plein { grid-column: 1 / -1; }
.case { display: flex; gap: 8px; align-items: center; }
.barre-outils { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barre-outils input, .barre-outils select, .entete select { width: auto; }
.espace { flex: 1; }

/* Tableaux */
.tableau-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); font-weight: 600; background: var(--surface); position: sticky; top: 0; }
tr:hover td { background: var(--survol); }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; background: var(--surface); }
td.actions { white-space: nowrap; text-align: right; }
.vide { color: var(--doux); padding: 16px; text-align: center; }

/* Pastilles */
.pastille { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--pastille); color: var(--doux); }
.pastille.vert { background: var(--vert-pale); color: var(--vert); }
.pastille.rouge { background: var(--rouge-pale); color: var(--rouge); }
.pastille.ambre { background: var(--ambre-pale); color: var(--ambre-fonce); }
.pastille.bleu { background: #e4eef5; color: var(--bleu); }
.alerte { background: var(--ambre-pale); border: 1px solid var(--ligne-ambre); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.alerte.rouge { background: var(--rouge-pale); border-color: #eec2bd; }
.alerte.vert { background: var(--vert-pale); border-color: #c4dfc9; }
.note { font-size: 12px; color: var(--doux); }

/* Zone de dépôt */
.depot {
  border: 2px dashed #dcc8a6; border-radius: 12px; padding: 26px; text-align: center; background: var(--ambre-pale);
  cursor: pointer; transition: .15s;
}
.depot.survol { background: #f6e2bf; border-color: var(--ambre); }
.depot strong { display: block; font-size: 16px; margin-bottom: 4px; }

/* Modale */
#modale-fond { position: fixed; inset: 0; background: var(--voile); display: grid; place-items: center; z-index: 50; padding: 20px; }
#modale-fond[hidden] { display: none; }
#modale {
  background: var(--carte); border-radius: 14px; width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
#modale.large { width: min(1280px, 100%); }
.modale-pied { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; position: sticky; bottom: -22px; background: var(--carte); padding: 12px 0; border-top: 1px solid var(--ligne); }
.validation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; }
.validation iframe { width: 100%; height: 72vh; border: 1px solid var(--ligne); border-radius: 8px; background: #f2f2f2; }
.lignes-facture input, .lignes-facture select { padding: 4px 6px; font-size: 13px; }
.lignes-facture td { padding: 3px 4px; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--nav); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: var(--ombre); }
#toast.erreur { background: var(--rouge); }

/* Graphiques */
.barres { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.barres .mois { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barres .paire { display: flex; gap: 2px; align-items: flex-end; height: calc(100% - 18px); width: 100%; justify-content: center; }
.barres .b { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; }
.barres .b.r { background: var(--ambre); }
.barres .b.d { background: #cfc3b0; }
.barres .m { font-size: 10px; color: var(--doux); }
.legende { display: flex; gap: 14px; font-size: 12px; color: var(--doux); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.jauge { height: 8px; background: var(--piste); border-radius: 6px; overflow: hidden; }
.jauge > div { height: 100%; background: var(--ambre); }

.contenants { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.contenant { border: 1px solid var(--ligne); border-radius: 10px; padding: 10px; background: var(--carte); }
.contenant strong { font-size: 15px; }
.contenant.hs { opacity: .55; }
.liste-cases { max-height: 220px; overflow: auto; border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 10px; columns: 2; }
.liste-cases label { display: block; break-inside: avoid; padding: 2px 0; }

#impression { display: none; }
@media print {
  body > *:not(#impression) { display: none !important; }
  #impression { display: block !important; font-size: 11px; color: #000; }
  #impression table { font-size: 10px; }
  #impression th { position: static; }
  #impression h1 { font-size: 18px; }
  #impression section { page-break-inside: avoid; margin-bottom: 14px; }
}
@media (max-width: 900px) {
  body { flex-direction: column; }
  #nav { width: 100%; height: auto; position: static; }
  #nav nav { display: flex; flex-wrap: wrap; }
  .pied-nav { display: none; }
  main { padding: 18px 16px; }
  .g2, .g3, .validation, .formulaire { grid-template-columns: 1fr; }
}

/* ---------- Prise en main ---------- */
#colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#colonne main { flex: 1; }
#barre {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 10px; align-items: center; padding: 12px 32px;
  background: var(--barre); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne);
}
.rond-bouton { width: 38px; height: 38px; justify-content: center; border-radius: 50%; font-size: 18px; padding: 0; flex: none; }
#zone-recherche { flex: 1; position: relative; max-width: 640px; }
#recherche { padding: 10px 14px 10px 38px; border-radius: 22px; font-size: 15px; background: var(--champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a7064' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 14px center; }
#resultats {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(40, 25, 5, .18); max-height: 70vh; overflow: auto; padding: 6px; z-index: 40;
}
.resultat { display: flex; gap: 12px; width: 100%; border: 0; border-radius: 8px; padding: 9px 10px; text-align: left; align-items: flex-start; background: none; }
.resultat.actif, .resultat:hover { background: var(--ambre-pale); }
.resultat strong { display: block; font-weight: 600; }
.resultat small { display: block; color: var(--doux); font-size: 12px; margin-top: 1px; }
.res-icone { width: 26px; text-align: center; font-size: 17px; flex: none; }
#bouton-nouveau, #bouton-aide { padding: 9px 16px; border-radius: 22px; white-space: nowrap; }

.groupe-nav { width: 28px; height: 1px; background: rgba(255, 255, 255, .1); margin: 8px 0; font-size: 0; flex: none; }
#nav nav a i { font-size: 16px; }

.titre-section { font-size: 19px; margin: 6px 0 12px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tuile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; min-height: 118px; border-radius: 14px;
  background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre); text-align: left; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tuile:hover { border-color: var(--ambre); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(160, 100, 24, .16); }
.tuile-icone { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.tuile-titre { font-weight: 600; font-size: 15px; }
.tuile-detail { font-size: 12.5px; color: var(--doux); line-height: 1.35; }
#modale .tuiles { margin: 6px 0 0; }

.demarrage { border-color: var(--ligne-ambre); background: linear-gradient(180deg, var(--ambre-pale), var(--carte)); }
.etape { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ligne); }
.etape > div { flex: 1; }
.rond { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dcc8a6; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.rond.plein { background: var(--ambre); border-color: var(--ambre); color: #fff; }
ol.etapes { padding-left: 20px; margin: 0 0 14px; }
ol.etapes li { margin-bottom: 6px; }

.gl { border-bottom: 1.5px dotted var(--ambre); cursor: help; }
#infobulle {
  position: fixed; z-index: 80; max-width: 290px; background: var(--nav); color: #fff; font-size: 13px; line-height: 1.45;
  padding: 9px 12px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: none; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
.plus-details { justify-content: flex-start; padding: 6px 0; font-weight: 600; }
.bloc-avance { border-top: 1px dashed var(--ligne); padding-top: 12px; }
.bloc-avance > .formulaire { display: grid; }

@media (max-width: 900px) {
  #barre { padding: 10px 16px; flex-wrap: wrap; }
  #zone-recherche { order: 3; flex-basis: 100%; max-width: none; }
}

/* ---------- Plan de cave ---------- */
.pc-cadre { padding: 8px; }
#pc-svg { width: 100%; height: auto; display: block; border-radius: 8px; user-select: none; touch-action: none; }
#pc-svg .cliquable { cursor: pointer; }
#pc-svg .cliquable:hover { filter: drop-shadow(0 3px 6px rgba(120, 70, 10, .35)); }
#pc-svg.en-edition .deplacable { cursor: grab; }
#pc-svg.en-edition .deplacable:active { cursor: grabbing; }
.pc-code { font: 700 13px -apple-system, sans-serif; fill: #2b2620; pointer-events: none; }
.pc-nom { font: 600 11.5px -apple-system, sans-serif; fill: #4a4036; pointer-events: none; }
.pc-vol { font: 11px -apple-system, sans-serif; fill: #7a7064; pointer-events: none; }
.pc-zone-nom { font: italic 400 17px var(--titre); fill: var(--doux); pointer-events: none; }
.pc-poignee { fill: #c8892b; cursor: nwse-resize; }
.pc-action { cursor: pointer; }
.pc-action circle { fill: #fff; stroke: #dcc8a6; }
.pc-action text { font: 12px -apple-system, sans-serif; fill: #7a7064; pointer-events: none; }
.pc-action:hover circle { stroke: #c8892b; }
.saisies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.saisie { flex-direction: column; gap: 4px; padding: 12px 8px; border-radius: 12px; font-weight: 600; font-size: 13px; text-align: center; justify-content: center; min-height: 78px; }
.saisie span { font-size: 22px; }
.saisie:hover { background: var(--ambre-pale); }

/* ---------- Équipe ---------- */
.grille-heures input { width: 58px; padding: 4px 6px; text-align: right; }
.grille-heures input.enregistre { border-color: var(--vert); background: var(--vert-pale); }
.grille-heures th { white-space: nowrap; }
.doc-rh { font: 12.5px/1.5 Georgia, serif; color: #000; max-width: 720px; margin: 0 auto; }
.doc-rh h1 { text-align: center; font-size: 18px; letter-spacing: .06em; margin-bottom: 2px; }
.doc-rh h3 { font-size: 13px; margin: 14px 0 4px; }
.doc-rh p { margin: 4px 0; }
.doc-rh .centre { text-align: center; }
.doc-rh .signatures { width: 100%; margin-top: 30px; } .doc-rh .signatures td { width: 50%; height: 90px; vertical-align: top; border: 0; }
.doc-rh .tableau-doc { width: 100%; border-collapse: collapse; margin: 10px 0; } .doc-rh .tableau-doc td, .doc-rh .tableau-doc th { border: 1px solid #999; padding: 4px 8px; }


/* ---------- Mode sombre « cave » ---------- */
:root[data-theme="cave"] {
  --fond: #121712; --carte: #1a201b; --surface: #1e251f; --survol: #222a23; --champ: #151a16;
  --texte: #efe7da; --doux: #a3998b; --ligne: #2a332c; --ambre: #db7f5c; --ambre-fonce: #eda283; --ambre-pale: #3a241b;
  --vert: #8fb98a; --vert-pale: #1c2a1d; --rouge: #ff8a76; --rouge-pale: #371d18; --bleu: #7fa7d6; --nav: #0c110d;
  --pastille: #263028; --piste: #263028; --ligne-ambre: #5a3526; --barre: rgba(18, 23, 18, .86); --voile: rgba(0, 0, 0, .6);
  --ombre: 0 0 0 1px rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

:root[data-theme="cave"] .alerte, :root:not([data-theme="clair"]) .alerte { color: var(--texte); }

/* ---------- Le domaine vivant : bandeau illustré ---------- */
.hero { position: relative; border-radius: 18px; overflow: hidden; height: clamp(320px, 33vw, 470px); margin-bottom: 30px; box-shadow: 0 14px 40px rgba(40, 25, 10, .18); isolation: isolate; }
.hero-ciel { position: absolute; inset: 0; --ciel-papier: #efe8da; --ciel-encre: #2a241d; background: linear-gradient(#6f93c4, #c9d8e6 58%, #efe8da 58%); }
.hero-ciel > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ciel-brume { pointer-events: none; opacity: 0; transition: opacity 1.2s; background: linear-gradient(to top, rgba(225, 228, 232, .95) 0%, rgba(225, 228, 232, .75) 38%, rgba(225, 228, 232, 0) 70%); }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 17, 12, .5) 0%, rgba(22, 17, 12, .2) 38%, rgba(22, 17, 12, 0) 60%), linear-gradient(0deg, rgba(22, 17, 12, .22), rgba(22, 17, 12, 0) 30%); }
.hero-contenu { position: absolute; left: 4.2%; top: 10%; max-width: 46%; color: #fbf6ec; }
.hero-surtitre { text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600; opacity: .82; }
.hero-titre { font: 400 clamp(30px, 4.3vw, 54px)/1.04 "Iowan Old Style", "Palatino", Georgia, serif; margin: .28em 0 .22em; letter-spacing: -.012em; }
.hero-meteo { font-size: 13.5px; opacity: .88; letter-spacing: .01em; }
.hero-filet { width: 54px; height: 1px; background: #d8a650; margin: 20px 0 13px; }
.hero-conseil { display: flex; gap: 14px; align-items: baseline; font: italic 400 clamp(14px, 1.35vw, 17px)/1.5 "Iowan Old Style", Georgia, serif; }
.hero-conseil[data-lien] .hero-conseil-texte { cursor: pointer; border-bottom: 1px solid rgba(216, 166, 80, .55); }
.hero-conseil-texte.fondu { animation: fondu .5s ease both; }
.hero-suivant { background: none; border: 1px solid rgba(251, 246, 236, .38); color: #fbf6ec; border-radius: 20px; font: 600 11px -apple-system, sans-serif; padding: 3px 10px; white-space: nowrap; flex: none; }
.hero-suivant:hover { border-color: #d8a650; color: #f3cf8a; }
.hero-chiffres { position: absolute; left: 4.2%; bottom: 8%; display: flex; background: rgba(251, 247, 239, .93); backdrop-filter: blur(6px); border-radius: 12px; box-shadow: 0 8px 26px rgba(30, 20, 8, .22); overflow: hidden; }
.hero-chiffres a { display: flex; flex-direction: column; padding: 12px 22px; text-decoration: none; color: #2b2620; transition: background .15s; }
.hero-chiffres a + a { border-left: 1px solid rgba(60, 40, 20, .1); }
.hero-chiffres a:hover { background: rgba(216, 166, 80, .14); }
.hero-chiffres strong { font: 500 23px/1.1 "Iowan Old Style", Georgia, serif; }
.hero-chiffres span { font-size: 11px; color: #7a7064; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
@keyframes fondu { from { opacity: 0; } }

.ico { width: 19px; height: 19px; vertical-align: -4px; flex: none; }
#nav nav a i .ico { width: 21px; height: 21px; stroke-width: 1.6; }
.tuile-icone { display: inline-flex; color: var(--ambre-fonce); transition: transform .2s ease; }
.tuile-icone .ico { width: 28px; height: 28px; stroke-width: 1.3; }
.tuile:hover .tuile-icone { transform: translateY(-2px); }
.res-icone .ico { width: 18px; height: 18px; color: var(--ambre-fonce); }

.saison .frise { position: relative; height: 14px; border-radius: 13px; background: var(--piste); margin: 34px 6px 6px; }
.saison .phase { position: absolute; top: 0; bottom: 0; opacity: .9; }
.saison .phases { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; }
.saison .evt { position: absolute; top: -16px; width: 9px; height: 9px; margin-left: -4.5px; background: var(--ambre); transform: rotate(45deg); cursor: help; transition: transform .15s; }
.saison .evt-vendange { background: #8e2b3a; border-radius: 50%; transform: none; }
.saison .evt-douane { background: var(--texte); transform: none; border-radius: 1px; }
.saison .evt:hover { transform: rotate(45deg) scale(1.5); }
.saison .evt-vendange:hover, .saison .evt-douane:hover { transform: scale(1.5); }
.saison .evt.passe { opacity: .35; }
.phase-actuelle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.phase-actuelle i { width: 10px; height: 10px; border-radius: 50%; }
.a-venir-item { font-size: 13px; margin-right: 22px; color: var(--doux); }
.a-venir-item b { color: var(--ambre-fonce); font-weight: 600; margin-right: 4px; }
.saison .aujourdhui { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--texte); border-radius: 2px; box-shadow: 0 0 0 3px var(--carte); }
.saison .aujourdhui span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--texte); }
.saison .mois-frise { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 11px; color: var(--doux); text-align: center; margin: 10px 6px 12px; }
.saison .a-venir { display: flex; flex-wrap: wrap; gap: 6px; }

/* Un peu d'élan partout */
#contenu > * { animation: apparition .28s ease-out both; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } }

.kpi { transition: transform .15s, box-shadow .15s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 35, 10, .12); }
#nav nav a { transition: background .15s, color .15s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 900px) { .hero { height: 460px; } .hero-contenu { max-width: 90%; } .hero-chiffres { left: 3%; right: 3%; } .hero-chiffres a { flex: 1; padding: 10px 12px; } }

/* ================================================================ Charte « Bleu bouillie » : composants */
.carte { border-radius: 20px; padding: 20px 22px; border-color: var(--ligne); }
.carte h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); font-weight: 600; }
.carte h3 { font-size: 15px; }
.entete h1 { font-size: 40px; }
.titre-section { font: italic 400 30px/1.1 var(--titre); letter-spacing: -.015em; margin: 8px 0 14px; }
.kpi { border-radius: 18px; padding: 16px 18px; }
.kpi .val { font: italic 400 32px/1.1 var(--titre); letter-spacing: -.02em; margin-top: 4px; }
.kpi .lib { font-size: 11.5px; letter-spacing: .07em; font-weight: 600; }
.kpi:hover { box-shadow: 0 10px 26px rgba(20, 22, 26, .1); }

button, .bouton { border-radius: 11px; padding: 8px 14px; font-weight: 500; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
button.principal, .bouton.principal { border-radius: 99px; padding: 9px 18px; box-shadow: 0 4px 14px rgba(180, 87, 58, .28); }
button.principal:hover, .bouton.principal:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(180, 87, 58, .32); }
button.petit { border-radius: 9px; padding: 4px 10px; }
input, select, textarea { border-radius: 11px; padding: 9px 11px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--ambre-pale); outline-offset: 0; border-color: var(--ambre); }

.onglets { border-bottom: 0; gap: 4px; background: var(--pastille); padding: 4px; border-radius: 13px; display: inline-flex; }
.onglets button { border: 0; border-radius: 10px; padding: 7px 14px; margin: 0; color: var(--doux); font-weight: 500; }
.onglets button.actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 3px rgba(20, 22, 26, .12); font-weight: 600; }
:root[data-theme="cave"] .onglets button.actif { box-shadow: none; }
th { background: transparent; font-size: 11px; letter-spacing: .07em; }
th, td { padding: 9px 10px; }
tfoot td { background: transparent; }
.pastille { padding: 2px 9px; font-weight: 600; }
.pastille.bleu { background: var(--ambre-pale); color: var(--ambre-fonce); }
.alerte { border-radius: 13px; padding: 12px 14px; }
.depot { border-color: var(--ligne-ambre); border-radius: 20px; }
.depot.survol { background: var(--ambre-pale); border-color: var(--ambre); }
#modale { border-radius: 22px; padding: 26px 28px; }
#modale h2:first-child { font: italic 400 30px/1.1 var(--titre); letter-spacing: -.015em; text-transform: none; color: var(--texte); }
#toast { border-radius: 99px; padding: 11px 20px; font-weight: 500; }
.barres .b { border-radius: 4px 4px 1px 1px; }
.barres .b.d { background: #dccfbd; }
:root[data-theme="cave"] .barres .b.d { background: #3a4047; }
.jauge { height: 7px; }

/* barre du haut */
#barre { padding: 14px 32px; border-bottom: 0; }
#recherche { border-radius: 99px; padding: 11px 16px 11px 40px; border-color: var(--ligne); box-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 6px 18px rgba(20, 22, 26, .05); background-position: 15px center; }
#bouton-nouveau { padding: 11px 20px; }
#bouton-aide { border-radius: 99px; background: var(--carte); }
.rond-bouton { background: var(--carte); }
.resultat.actif, .resultat:hover { background: var(--ambre-pale); }
#resultats { border-radius: 18px; box-shadow: 0 18px 50px rgba(20, 22, 26, .18); }

/* tuiles « Que veux-tu faire ? » */
.tuile { border-radius: 20px; padding: 18px; min-height: 124px; }
.tuile:hover { border-color: var(--ligne-ambre); box-shadow: 0 12px 30px rgba(60, 35, 20, .12); }
.tuile-icone { width: 44px; height: 44px; border-radius: 13px; background: var(--ambre-pale); color: var(--ambre); display: grid; place-items: center; margin-bottom: 8px; }
.tuile-icone .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.tuile-titre { font-size: 15.5px; }
.demarrage { background: linear-gradient(180deg, var(--ambre-pale), var(--carte) 70%); }
.rond { border-color: var(--ligne-ambre); }

/* bandeau d'accueil */
.hero { border-radius: 24px; box-shadow: 0 18px 50px rgba(15, 20, 30, .16); }
.hero-voile { background: linear-gradient(90deg, rgba(10, 12, 16, .58) 0%, rgba(10, 12, 16, .18) 42%, rgba(10, 12, 16, 0) 62%), linear-gradient(0deg, rgba(10, 12, 16, .25), rgba(10, 12, 16, 0) 32%); }
.hero-contenu { color: #fff; }
.hero-surtitre { font-weight: 600; letter-spacing: .16em; }
.hero-titre { font: italic 400 clamp(38px, 4.8vw, 62px)/1 var(--titre); letter-spacing: -.025em; margin: .22em 0 .2em; }
.hero-filet { background: rgba(255, 255, 255, .55); width: 40px; }
.hero-conseil { font: 400 clamp(14px, 1.25vw, 16px)/1.5 var(--police); }
.hero-conseil[data-lien] .hero-conseil-texte { border-bottom-color: rgba(255, 255, 255, .5); }
.hero-suivant { border-color: rgba(255, 255, 255, .35); color: #fff; font-family: var(--police); }
.hero-suivant:hover { border-color: #fff; color: #fff; }
.hero-chiffres { background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; box-shadow: none; }
.hero-chiffres a { color: #fff; }
.hero-chiffres a + a { border-left-color: rgba(255, 255, 255, .2); }
.hero-chiffres a:hover { background: rgba(255, 255, 255, .12); }
.hero-chiffres strong { font: italic 400 28px/1.05 var(--titre); }
.hero-chiffres span { color: rgba(255, 255, 255, .78); }
.hero-signature { position: absolute; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; padding: 8px 14px; border-radius: 99px;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .25); }
.hero-signature b { font-weight: 600; }

.saison .evt { background: var(--ambre); }
.a-venir-item b { color: var(--ambre); }

/* écrans étroits : la barre d'icônes passe en haut */
@media (max-width: 900px) {
  #nav { width: 100%; height: auto; position: static; flex-direction: row; padding: 8px 10px; }
  .marque { margin: 0 8px 0 0; }
  #nav nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .groupe-nav { display: none; }
}

/* ---------- accueil en cartes ---------- */
.hero { margin-bottom: 16px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.bento-carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 22px; padding: 20px 22px; box-shadow: var(--ombre); min-width: 0;
  animation: monte .6s cubic-bezier(.2, .7, .2, 1) both; transition: transform .2s, box-shadow .2s; }
.bento-carte:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 22, 26, .1); }
.bento-carte:nth-child(2) { animation-delay: .06s; } .bento-carte:nth-child(3) { animation-delay: .12s; }
.bento-carte:nth-child(4) { animation-delay: .18s; } .bento-carte:nth-child(5) { animation-delay: .24s; }
@keyframes monte { from { opacity: 0; transform: translateY(16px); } }
.bento-carte h2 { font: 600 12px var(--police); text-transform: uppercase; letter-spacing: .09em; color: var(--doux); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.bento-carte h2 .ico { width: 16px; height: 16px; }
.bento-carte h2 .plus { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--ambre); text-decoration: none; }
.bento .chiffre { font: italic 400 30px/1.05 var(--titre); letter-spacing: -.02em; color: var(--texte); }
.b-jour { grid-column: span 5; } .b-drm { grid-column: span 4; } .b-meteo { grid-column: span 3; }
.b-cave { grid-column: span 7; } .b-ventes { grid-column: span 5; }

/* Aujourd'hui */
.jour-tete { margin-bottom: 10px; }
.jour-tete strong { display: block; font: italic 400 34px/1.05 var(--titre); letter-spacing: -.02em; }
.jour-tete span { color: var(--doux); font-size: 13.5px; }
.jour-liste { margin: 0 -10px 6px; }
.jour-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 12px; color: var(--texte); text-decoration: none; cursor: pointer; font-size: 14px; line-height: 1.4; transition: background .15s; }
.jour-item:hover { background: var(--survol); }
.jour-item > span:not(.jour-puce):not(.jour-case) { flex: 1; }
.jour-item em { font-style: normal; font-size: 12px; color: var(--doux); white-space: nowrap; padding-top: 2px; }
.jour-item em.retard { color: var(--rouge); font-weight: 600; }
.jour-puce { width: 22px; height: 22px; border-radius: 7px; background: var(--ambre-pale); color: var(--ambre); display: grid; place-items: center; flex: none; }
.jour-puce .ico { width: 14px; height: 14px; stroke-width: 2; }
.jour-item input { position: absolute; opacity: 0; pointer-events: none; }
.jour-case { width: 22px; height: 22px; border-radius: 7px; border: 1.6px solid #b8bcc4; flex: none; display: grid; place-items: center; transition: all .25s cubic-bezier(.2, .7, .2, 1); }
.jour-item.faite .jour-case, .jour-item input:checked + .jour-case { background: var(--ambre); border-color: var(--ambre); transform: scale(1.12); }
.jour-item.faite .jour-case::after, .jour-item input:checked + .jour-case::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.jour-item.faite > span:last-of-type { text-decoration: line-through; color: var(--doux); }

/* DRM */
.b-drm { background: var(--nav); border-color: transparent; color: #f4ede2; box-shadow: 0 14px 34px rgba(31, 58, 46, .3); }
.b-drm h2 { color: var(--terroir) !important; }
.b-drm h2 { color: rgba(255, 255, 255, .78); }
.b-drm.calme { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); border-color: var(--ligne); }
.b-drm.calme h2 { color: var(--doux); }
.drm-compte { font: italic 400 64px/1 var(--titre); letter-spacing: -.03em; margin: 2px 0 4px; }
.b-drm.calme .drm-compte { font-size: 44px; }
.drm-sous { font-size: 14px; opacity: .88; margin-bottom: 16px; }
.drm-pret { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.drm-pret span { font-size: 12px; background: rgba(255, 255, 255, .17); border-radius: 99px; padding: 4px 11px; }
.drm-bouton { display: flex; justify-content: center; align-items: center; gap: 8px; border-radius: 13px; padding: 12px; font-weight: 600; font-size: 14px; text-decoration: none; color: inherit; background: rgba(255, 255, 255, .17); transition: background .15s; }
.drm-bouton:hover { background: rgba(255, 255, 255, .27); }
.b-drm.calme .drm-bouton { background: var(--ambre-pale); color: var(--ambre-fonce); }
.drm-bouton .ico { width: 16px; height: 16px; }

/* Météo */
.meteo-grand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.meteo-grand .chiffre { font-size: 52px; }
.meteo-grand span:last-child { color: var(--doux); font-size: 13px; }
.jours { display: flex; gap: 6px; align-items: flex-end; height: 70px; margin-top: 14px; }
.jours div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--doux); text-transform: capitalize; }
.jours b { width: 100%; border-radius: 5px; background: var(--ambre-pale); display: block; transform-origin: bottom; animation: pousse .8s .4s cubic-bezier(.2, .7, .2, 1) both; }
.jours b.pluie { background: var(--ambre); }
@keyframes pousse { from { transform: scaleY(0); } }
.meteo-conseil { font-size: 12.5px; color: var(--doux); margin-top: 10px; }

/* Cave */
.cuves { display: flex; gap: 12px; align-items: flex-end; }
.cuve { flex: 1; min-width: 0; text-align: center; text-decoration: none; color: var(--texte); }
.cuve .corps { height: 124px; border-radius: 14px 14px 9px 9px; background: var(--surface); border: 1px solid var(--ligne); position: relative; overflow: hidden; transition: transform .2s; }
.cuve:hover .corps { transform: translateY(-3px); }
.cuve .vin { position: absolute; left: 0; right: 0; bottom: 0; animation: remplit 1.4s calc(.35s + var(--i) * .07s) cubic-bezier(.2, .7, .2, 1) both; }
.cuve .vin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255, 255, 255, .35); }
@keyframes remplit { from { height: 0; } }
.cuve .nom { font-weight: 600; font-size: 13px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuve .det { font-size: 11.5px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cave-pied { display: flex; gap: 28px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.cave-pied a { font-size: 12.5px; color: var(--doux); text-decoration: none; }
.cave-pied a:hover .chiffre { color: var(--ambre); }
.cave-pied .chiffre { display: block; font-size: 28px; transition: color .15s; }

/* Ventes */
.ventes-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ventes-tete .chiffre { font-size: 40px; }
.ventes-tete span:last-child { color: var(--doux); font-size: 13px; }
.courbe { width: 100%; height: 120px; display: block; overflow: visible; }
.courbe .ligne { fill: none; stroke: var(--ambre); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: trace 1.8s .5s ease forwards; }
.courbe .aire { fill: var(--ambre-pale); opacity: 0; animation: apparait .8s 1.5s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { to { opacity: 1; } }
.ventes-vide p { color: var(--doux); font-size: 13.5px; margin: 6px 0 14px; max-width: 320px; }

@media (max-width: 1150px) { .b-jour, .b-drm, .b-cave, .b-ventes { grid-column: span 6; } .b-meteo { grid-column: span 6; } }
@media (max-width: 800px) { .bento > * { grid-column: span 12 !important; } }
@media (prefers-reduced-motion: reduce) { .courbe .ligne { stroke-dashoffset: 0; } .courbe .aire { opacity: 1; } }
:root[data-theme="cave"] .jour-case { border-color: #4a5058; }

/* ================================================================ Univers en couleurs (moins austère) */
:root { --fond: #f4f2ed;
  --c-accueil: #b4573a; --c-factures: #2f7f74; --c-vigne: #4f8a45; --c-chai: #8e2a3c; --c-stock: #b8862f; --c-ventes: #c8603a;
  --c-deplacements: #5f6f7f; --c-douane: #33608f; --c-compta: #6d5aa8; --c-equipe: #b24a6e; --c-tiers: #2f7f74; --c-reglages: #6b6e75; --c-aide: #6b6e75; }
:root[data-theme="cave"] { --c-vigne: #5cc070; --c-chai: #e0607e; --c-stock: #e6a93a; --c-ventes: #ff8458; --c-deplacements: #8c9bb5; --c-compta: #9d85ff; --c-equipe: #f0699c; --c-factures: #2cc4b5; --c-tiers: #2cc4b5; --c-accueil: #db7f5c; --c-douane: #7fa7d6; }

[data-famille="accueil"], [data-page="accueil"] { --f: var(--c-accueil); }
[data-famille="factures"], [data-page="factures"] { --f: var(--c-factures); }
[data-famille="vigne"], [data-page="vigne"] { --f: var(--c-vigne); }
[data-famille="chai"], [data-page="chai"] { --f: var(--c-chai); }
[data-famille="stock"], [data-page="stock"] { --f: var(--c-stock); }
[data-famille="ventes"], [data-page="ventes"], [data-page="caisse"] { --f: var(--c-ventes); }
[data-famille="deplacements"], [data-page="deplacements"] { --f: var(--c-deplacements); }
[data-famille="douane"], [data-page="douane"] { --f: var(--c-douane); }
[data-famille="compta"], [data-page="compta"] { --f: var(--c-compta); }
[data-famille="equipe"], [data-page="equipe"] { --f: var(--c-equipe); }
[data-page="tiers"] { --f: var(--c-tiers); } [data-page="reglages"] { --f: var(--c-reglages); } [data-page="aide"] { --f: var(--c-aide); }

/* menu : chaque icône s'allume dans la couleur de son univers */
#nav nav a:hover i, #nav nav a.actif i { color: color-mix(in srgb, var(--f) 70%, #fff); }
#nav nav a.actif { background: color-mix(in srgb, var(--f) 22%, transparent); }
#nav nav a i { transition: transform .2s cubic-bezier(.2, .7, .2, 1.4); }
#nav nav a:hover i { transform: translateY(-2px) scale(1.08); }

/* tuiles : pastille colorée par univers, petit rebond au survol */
.tuile[data-famille] .tuile-icone { background: color-mix(in srgb, var(--f) 13%, transparent); color: var(--f); }
.tuile[data-famille]:hover { border-color: color-mix(in srgb, var(--f) 40%, transparent); box-shadow: 0 14px 32px color-mix(in srgb, var(--f) 18%, transparent); }
.tuile:hover .tuile-icone { transform: translateY(-3px) rotate(-6deg); }
.tuile-icone { transition: transform .3s cubic-bezier(.2, .7, .2, 1.6); }

/* cartes de l'accueil : l'icône du titre prend la couleur de l'univers */
.bento-carte[data-famille] h2 .ico { color: var(--f); }
.bento-carte[data-famille] h2 .plus { color: var(--f); }
.b-cave .cave-pied a:hover .chiffre { color: var(--f); }

/* chaque page : une lueur de sa couleur en haut, et le titre souligné d'un trait coloré */
#contenu { background: radial-gradient(900px 340px at 88% -120px, color-mix(in srgb, var(--f, #b4573a) 13%, transparent), transparent 72%) no-repeat; }
#contenu[data-page="accueil"] { background: none; }
.entete h1 { position: relative; }
.entete h1::after { content: ""; position: absolute; left: 2px; bottom: -6px; width: 34px; height: 3px; border-radius: 3px; background: var(--f, var(--ambre)); }

/* en tête de chaque page : la grande icône illustrée de son univers, posée de biais */
#contenu:not([data-page="accueil"]) > .entete:first-child { position: relative; padding-left: 92px; min-height: 76px; }
#contenu:not([data-page="accueil"]) > .entete:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 76px; height: 76px; margin-top: -40px; pointer-events: none;
  background: center / contain no-repeat; transform: rotate(-6deg);
  animation: pose .6s cubic-bezier(.2, .7, .2, 1.4) both; }
@keyframes pose { from { opacity: 0; transform: rotate(-18deg) scale(.7); } }
#contenu[data-page="factures"] > .entete:first-child::before { background-image: url(icones/document.png); }
#contenu[data-page="vigne"] > .entete:first-child::before { background-image: url(icones/feuille.png); }
#contenu[data-page="chai"] > .entete:first-child::before { background-image: url(icones/barrique.png); }
#contenu[data-page="stock"] > .entete:first-child::before { background-image: url(icones/caisse.png); }
#contenu[data-page="ventes"] > .entete:first-child::before { background-image: url(icones/commande.png); }
#contenu[data-page="caisse"] > .entete:first-child::before { background-image: url(icones/tiroir-caisse.png); }
#contenu[data-page="deplacements"] > .entete:first-child::before { background-image: url(icones/utilitaire.png); }
#contenu[data-page="douane"] > .entete:first-child::before { background-image: url(icones/tampon.png); }
#contenu[data-page="compta"] > .entete:first-child::before { background-image: url(icones/pieces.png); }
#contenu[data-page="equipe"] > .entete:first-child::before { background-image: url(icones/vendangeur.png); }
#contenu[data-page="tiers"] > .entete:first-child::before { background-image: url(icones/carnet.png); }
#contenu[data-page="reglages"] > .entete:first-child::before { background-image: url(icones/reglages.png); }
#contenu[data-page="aide"] > .entete:first-child::before { background-image: url(icones/aide.png); }

/* la petite récompense quand on coche une tâche */
.jour-case { position: relative; }
.jour-item.faite .jour-case::before { content: ""; position: absolute; inset: -2px; border-radius: 9px; border: 2px solid var(--ambre); animation: onde .6s ease-out forwards; }
@keyframes onde { to { inset: -12px; border-radius: 16px; opacity: 0; } }
.jour-item.faite { animation: glisse .6s .15s ease both; }
@keyframes glisse { to { opacity: .55; } }

/* icônes : l'aplat léger prend la couleur du trait */
.ico .t { fill: currentColor; fill-opacity: .62; stroke: none; }   /* hachures à la plume */
#nav nav a .ico .t { mask: none; fill-opacity: .16; }   /* trop petites pour des hachures : aplat léger */
#nav nav a.actif .ico .t, #nav nav a:hover .ico .t { fill-opacity: .3; }

/* ================================================================ Icônes illustrées */
.illu { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
#nav nav a i { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; transition: transform .2s cubic-bezier(.2, .7, .2, 1.5), background .2s, box-shadow .2s; }
#nav nav a i .illu { width: 27px; height: 27px; }
#nav nav a { padding: 6px 2px 5px; gap: 2px; }
.groupe-nav { margin: 5px 0; }
#nav nav a { color: #b9bcc3; }
#nav nav a:hover i { background: #fff; transform: translateY(-2px) rotate(-4deg); }
#nav nav a.actif { background: rgba(255, 255, 255, .1); }
#nav nav a.actif i { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--f) 75%, #fff), 0 6px 16px rgba(0, 0, 0, .35); }
.tuile-icone { width: 58px; height: 58px; background: none !important; border-radius: 0; margin-bottom: 4px; }
.tuile-icone .illu { width: 56px; height: 56px; }
.tuile:hover .tuile-icone { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
.bento-carte h2 .illu { width: 24px; height: 24px; margin: -4px 0; }
:root[data-theme="cave"] #nav nav a i { background: rgba(255, 255, 255, .88); }

/* ================================================================ Bandeau : marque + scène illustrée */
.marque { background: #f4ede2; }
.marque .logo-app { width: 32px; height: 32px; }
.hero-voile { background: linear-gradient(90deg, rgba(22, 30, 22, .5) 0%, rgba(22, 30, 22, .16) 40%, rgba(22, 30, 22, 0) 60%); }
.hero-contenu { top: 8%; }
.hero-marque { display: inline-flex; align-items: center; gap: 11px; padding: 7px 16px 7px 7px; border-radius: 16px; margin-bottom: 16px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.hero-logo { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #3a944d; --logo-nervure: #fff; box-shadow: 0 4px 12px rgba(10, 20, 40, .2); }
.hero-logo .logo-app { width: 30px; height: 30px; }
.hero-marque strong { display: block; font: italic 400 25px/1 var(--titre); letter-spacing: -.01em; }
.hero-marque em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.hero-titre { font-size: clamp(34px, 4.2vw, 54px); }

/* ================================================================ Douelle : marque dans le bandeau */
.hero-logo { background: #f4ede2; }
.hero-logo .logo-app { width: 32px; height: 32px; }
.hero-marque strong { font: 400 22px/1 var(--titre); letter-spacing: .16em; text-transform: uppercase; }
.hero-marque em { letter-spacing: .24em; font-size: 10px; margin-top: 4px; }
.hero-signature { font: italic 400 19px/1 var(--titre); letter-spacing: 0; padding: 9px 16px; }
.hero-surtitre { letter-spacing: .22em; }
/* le cerclage : double filet pour séparer les grandes parties */
.titre-section { position: relative; padding-top: 18px; }
.titre-section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 1.2px solid var(--nav); border-bottom: 1.2px solid var(--nav); opacity: .55; }
:root[data-theme="cave"] .titre-section::before { border-color: var(--doux); }

/* ================================================================ Logo Douelle (piste C) et mot-signe en Fraunces */
.marque { background: #f6f0e6; }
.marque .logo-app { width: 25px; height: 28px; }
.hero-logo { background: #fffaf3; }
.hero-logo .logo-app { width: 25px; height: 28px; }
.hero-marque strong { font: 700 22px/1 Fraunces, var(--titre); letter-spacing: .03em; text-transform: uppercase; font-variation-settings: "opsz" 72; }
.hero-marque em { letter-spacing: .34em; }
.hero-signature { font: italic 400 17px/1 Fraunces, var(--titre); }

/* ================================================================ Bandeau Douelle : les douelles qui s'assemblent */
.hero { --hero-encre: #1f3a2e; --hero-doux: #5f6b5f; box-shadow: 0 14px 40px rgba(60, 40, 20, .12); border: 1px solid rgba(60, 40, 20, .08); }
.hero.hero-nuit { --hero-encre: #f3ece1; --hero-doux: #c9c2b4; }
.hero-voile { display: none; }
.ciel-fond { position: absolute; inset: 0; transition: background 1.2s; }
.ciel-nuages { position: absolute; inset: 0; pointer-events: none; }
.ciel-nuage { position: absolute; height: auto; fill: #9aa69a; opacity: 0; transition: opacity 1.5s; animation: derive var(--d, 160s) linear infinite alternate; }
.hero-nuit .ciel-nuage { fill: #8fa598; }
@keyframes derive { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }
.ciel-illustration { position: absolute; top: auto; left: auto; right: 1.5%; bottom: 3%; width: 86%; height: 62%; object-fit: contain; object-position: right bottom;
  animation: assemble 2.2s cubic-bezier(.3, .7, .2, 1) .15s both; }
.hero-nuit .ciel-illustration { filter: brightness(.88) saturate(.9); }
@keyframes assemble { from { clip-path: inset(0 100% 0 0); opacity: .3; transform: translateX(-2%); } 60% { opacity: 1; } to { clip-path: inset(0 0 0 0); transform: none; } }
.ciel-brume { background: linear-gradient(to top, rgba(246, 240, 230, .92), rgba(246, 240, 230, .6) 40%, rgba(246, 240, 230, 0) 75%); }
.hero-nuit .ciel-brume { background: linear-gradient(to top, rgba(40, 56, 48, .9), rgba(40, 56, 48, 0) 70%); }
.ciel-eclair { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ciel-eclair.flash { animation: eclair .7s ease-out; }
@keyframes eclair { 0% { opacity: .55; } 12% { opacity: .05; } 22% { opacity: .4; } 100% { opacity: 0; } }
/* le texte du bandeau passe à l'encre feuillage le jour, à la crème la nuit */
.hero-contenu { color: var(--hero-encre); text-shadow: none; max-width: 46%; top: 7%; }
.hero-surtitre { color: var(--hero-doux); opacity: 1; }
.hero-meteo { color: var(--hero-doux); opacity: 1; }
.hero-filet { background: var(--terroir); }
.hero-conseil[data-lien] .hero-conseil-texte { border-bottom-color: color-mix(in srgb, var(--hero-encre) 35%, transparent); }
.hero-suivant { border-color: color-mix(in srgb, var(--hero-encre) 30%, transparent); color: var(--hero-encre); }
.hero-suivant:hover { border-color: var(--hero-encre); color: var(--hero-encre); }
.hero-marque { background: rgba(255, 252, 246, .7); border-color: rgba(60, 40, 20, .1); color: var(--hero-encre); }
.hero-nuit .hero-marque { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
.hero-signature { color: var(--hero-encre); background: rgba(255, 252, 246, .6); border-color: rgba(60, 40, 20, .1); }
.hero-nuit .hero-signature { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
.hero-signature { left: auto; right: 22px; bottom: auto; top: 20px; }
@media (max-width: 900px) { .ciel-illustration { width: 100%; opacity: .35; } .hero-contenu { max-width: 90%; } }
@media (prefers-reduced-motion: reduce) { .ciel-illustration, .ciel-nuage { animation: none; } }

/* ================================================================ Charte Douelle (version 2) : grammaire courbe · parallèle · décalage · circulation */
/* Typographie : Fraunces pour la marque et l'éditorial (titres, chiffres), Instrument Sans pour tout le fonctionnel */
:root { --titre: "Fraunces", "Instrument Serif", Georgia, serif; }
h1, .entete h1 { font: 600 34px/1.08 var(--titre); letter-spacing: -.015em; font-variation-settings: "opsz" 96; }
.titre-section, #modale h2:first-child { font: 600 26px/1.15 var(--titre); letter-spacing: -.01em; font-style: normal; }
.hero-titre { font: 600 clamp(34px, 3.8vw, 50px)/1.02 var(--titre); letter-spacing: -.02em; font-style: normal; }
.kpi .val, .bento .chiffre, .jour-tete strong, .drm-compte, .cave-pied .chiffre, .hero-chiffres strong { font-family: var(--titre); font-style: normal; font-weight: 600; letter-spacing: -.02em; }
.drm-compte { font-size: 54px; }

/* Couleurs : la palette du logo devient la palette primaire ; les univers en sont des nuances, pas un arc-en-ciel */
:root { --ardoise: #5b7a87;
  --c-accueil: #b4573a; --c-factures: #a8823f; --c-vigne: #5f7d55; --c-chai: #a2493a; --c-stock: #b88a3c; --c-ventes: #b4573a;
  --c-deplacements: #5b7a87; --c-douane: #1f3a2e; --c-compta: #5b7a87; --c-equipe: #6f8a6a; --c-tiers: #a8823f; --c-reglages: #7a6a5e; --c-aide: #7a6a5e; }
:root[data-theme="cave"] { --c-accueil: #db7f5c; --c-factures: #d1ab66; --c-vigne: #93b088; --c-chai: #d97a63; --c-stock: #d9ad5d; --c-ventes: #db7f5c; --c-deplacements: #8fadb9; --c-douane: #b9cfc1; --c-compta: #8fadb9; --c-equipe: #a6bf9f; --c-tiers: #d1ab66; }


/* Plus l'écran est fonctionnel, plus la marque se fait discrète : plus de lueur colorée ni d'icône penchée en tête de page */
#contenu { background: none !important; }
#contenu:not([data-page="accueil"]) > .entete:first-child { padding-left: 62px; min-height: 52px; }
#contenu:not([data-page="accueil"]) > .entete:first-child::before { width: 48px; height: 48px; margin-top: -26px; transform: none; animation: glisse-entree .5s cubic-bezier(.25, .8, .25, 1) both; }
.entete h1::after { width: 26px; height: 2px; bottom: -7px; }

/* Matière presque subliminale : un grain de papier très fin sur le fond */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Mouvement : glisser, suivre, se propager — jamais rebondir, tourner ni surgir */
@keyframes glisse-entree { from { opacity: 0; transform: translateX(-10px); } }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
.bento-carte { animation-timing-function: cubic-bezier(.25, .8, .25, 1); }
#nav nav a i { transition: transform .25s cubic-bezier(.25, .8, .25, 1), background .2s, box-shadow .2s; }
#nav nav a:hover i { transform: translateX(2px); }
.tuile-icone { transition: transform .3s cubic-bezier(.25, .8, .25, 1); }
.tuile:hover .tuile-icone { transform: translateX(4px); }
.marque:hover { transform: none; }
.jour-item.faite .jour-case, .jour-item input:checked + .jour-case { transform: none; }
.jour-item.faite .jour-case::before { animation: onde .7s cubic-bezier(.25, .8, .25, 1) forwards; }
.ciel-nuage { fill: #8c9a8c; }
.hero-nuit .ciel-nuage { fill: #9cb0a4; }

/* « Tout suit » : l'action, puis ses conséquences qui se propagent le long de trois douelles */
#suite { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; gap: 14px; align-items: flex-start; max-width: min(420px, calc(100vw - 32px));
  background: #fffaf3; color: var(--texte); border: 1px solid var(--ligne); border-radius: 18px; padding: 14px 18px 14px 14px;
  box-shadow: 0 18px 44px rgba(40, 30, 20, .18); opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.25, .8, .25, 1); }
#suite.visible { opacity: 1; transform: none; pointer-events: auto; }
#suite strong { display: block; font: 600 16px/1.3 var(--titre); color: var(--nav); margin-bottom: 4px; }
#suite span { display: block; font-size: 13.5px; color: var(--doux); padding-left: 14px; position: relative; opacity: 0; transform: translateX(-8px); }
#suite span::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; border-radius: 2px; background: var(--terroir); }
#suite.visible span { animation: suit .45s cubic-bezier(.25, .8, .25, 1) forwards; animation-delay: calc(.35s + var(--i) * .32s); }
@keyframes suit { to { opacity: 1; transform: none; } }
#suite span + span { margin-top: 3px; }
.suite-fermer { flex: none; margin: -6px -10px 0 4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--doux); font-size: 13px; cursor: pointer; }
.suite-fermer:hover { background: var(--ligne); color: var(--texte); }
@media (max-width: 600px) { #suite { right: 16px; bottom: 16px; } }
.suite-douelles { width: 22px; height: 46px; flex: none; margin-top: 2px; }
.suite-douelles path { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.suite-douelles path:nth-child(1) { stroke: var(--nav); } .suite-douelles path:nth-child(2) { stroke: var(--terroir); } .suite-douelles path:nth-child(3) { stroke: var(--ambre); }
#suite.visible .suite-douelles path { animation: trace-douelle .6s cubic-bezier(.25, .8, .25, 1) forwards; }
#suite.visible .suite-douelles path:nth-child(2) { animation-delay: .12s; } #suite.visible .suite-douelles path:nth-child(3) { animation-delay: .24s; }
@keyframes trace-douelle { to { stroke-dashoffset: 0; } }
:root[data-theme="cave"] #suite { background: var(--carte); }

@media (prefers-reduced-motion: reduce) { #suite span { opacity: 1; transform: none; } .suite-douelles path { stroke-dashoffset: 0; } }
[data-capture] #suite span { opacity: 1; transform: none; } [data-capture] .suite-douelles path { stroke-dashoffset: 0; }

/* captures d'écran (?capture=1) : tout est déjà en place */
[data-capture] *, [data-capture] *::before { animation: none !important; transition: none !important; }

/* Aperçu d'une facture ou d'un devis, par-dessus l'éditeur */
.apercu-facture { position: fixed; inset: 0; z-index: 2000; background: rgba(31, 26, 22, .55); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; animation: voile-apercu .25s ease-out }
.apercu-facture > div { width: min(820px, 100%); display: flex; justify-content: flex-end }
.apercu-facture iframe { width: min(820px, 100%); flex: 1; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .3) }
@keyframes voile-apercu { from { opacity: 0 } }

/* Matériel et assurances : leurs univers */
:root { --c-materiel: #8a6a3a; --c-assurances: #5b7a87; }
:root[data-theme="cave"] { --c-materiel: #d1ab66; --c-assurances: #8fadb9; }

[data-page="materiel"] { --f: var(--c-materiel); } [data-page="assurances"] { --f: var(--c-assurances); }
#contenu[data-page="materiel"] > .entete:first-child::before { background-image: url(icones/tracteur.png); }
#contenu[data-page="assurances"] > .entete:first-child::before { background-image: url(icones/assurance.png); }

/* Plan des parcelles */
.plan-outils { flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
.puces-lieux { display: flex; gap: 6px; flex-wrap: wrap }
.puces-lieux .actif { background: var(--c-vigne); color: #fff; border-color: transparent }
.plan-vigne { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start }
@media (max-width: 980px) { .plan-vigne { grid-template-columns: 1fr } }
.plan-carte { padding: 12px }
.plan-svg { width: 100%; height: min(68vh, 620px); display: block; background: color-mix(in srgb, var(--c-vigne) 5%, transparent); border-radius: 12px }
.parcelle { fill: #e9e0cf; stroke: #2b211b; stroke-linejoin: round; cursor: pointer; transition: fill .35s ease, opacity .2s }
.parcelle:hover { opacity: .8 }
.parcelle.p-fait { fill: #6f8a6a } .parcelle.p-en-cours { fill: #c9a46c } .parcelle.p-a-faire { fill: #efe7d8 }
.parcelle.choisie { stroke: #b4573a }
.num-parcelle { fill: #2b211b; text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-family: 'Instrument Sans', sans-serif; opacity: .8 }
.lieu-dit { fill: #1f3a2e; text-anchor: middle; font-family: 'Fraunces', Georgia, serif; font-weight: 600; cursor: pointer }
.lieu-dit:hover { fill: #b4573a }
.plan-legende { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px }
.plan-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(43, 33, 27, .35) }
.plan-legende i.p-fait { background: #6f8a6a } .plan-legende i.p-en-cours { background: #c9a46c } .plan-legende i.p-a-faire { background: #efe7d8 }
.plan-panneau h2 { margin-bottom: 2px }
.plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px }
.plan-actions button { flex: 1 1 calc(50% - 6px) }
.plan-histo { list-style: none; padding: 0; margin: 6px 0 10px; max-height: 340px; overflow: auto }
.plan-histo li { padding: 8px 4px; border-bottom: 1px solid var(--ligne); cursor: pointer; border-radius: 6px }
.plan-histo li:hover { background: color-mix(in srgb, var(--c-vigne) 8%, transparent) }
.plan-histo .date { display: inline-block; min-width: 82px; color: var(--doux); font-variant-numeric: tabular-nums }
[data-page="parcellaire"] { --f: var(--c-vigne); }
#contenu[data-page="parcellaire"] > .entete:first-child::before { background-image: url(icones/parcellaire.png); }

/* Calendrier, foncier : leurs univers */
:root { --c-calendrier: #b4573a; --c-foncier: #6f8a6a; }
:root[data-theme="cave"] { --c-calendrier: #db7f5c; --c-foncier: #a6bf9f; }

[data-page="calendrier"] { --f: var(--c-calendrier); } [data-page="foncier"] { --f: var(--c-foncier); }
#contenu[data-page="calendrier"] > .entete:first-child::before { background-image: url(icones/calendrier.png); }
#contenu[data-page="foncier"] > .entete:first-child::before { background-image: url(icones/foncier.png); }

/* Agenda */
.agenda-mois { margin-bottom: 14px }
.agenda { list-style: none; padding: 0; margin: 0 }
.agenda li { display: grid; grid-template-columns: 92px 120px 1fr auto 200px; gap: 12px; align-items: center; padding: 9px 4px 9px 12px; border-bottom: 1px solid var(--ligne); border-left: 4px solid var(--d); border-radius: 4px; margin-bottom: 4px }
.agenda li.fait { opacity: .5 } .agenda li.fait .quoi strong { text-decoration: line-through }
.agenda li.retard { background: color-mix(in srgb, #b4573a 8%, transparent) }
.agenda .jour { font-variant-numeric: tabular-nums; color: var(--doux) }
.agenda .pastille-domaine { font-size: 12px; color: var(--d); font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.agenda .combien { font-variant-numeric: tabular-nums; text-align: right }
.agenda .action { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap }
@media (max-width: 760px) { .agenda li { grid-template-columns: 70px 1fr; } .agenda .pastille-domaine, .agenda .combien { display: none } }

/* Trésorerie prévisionnelle */
.tr-graphe { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 240px; align-items: end; margin: 10px 0 6px }
.tr-mois { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; border-radius: 6px }
.tr-mois:hover { background: color-mix(in srgb, var(--c-compta) 7%, transparent) }
.tr-barres { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; padding-bottom: 4px }
.tr-barres > div { width: 38%; border-radius: 3px 3px 0 0; min-height: 1px }
.tr-barres .b-in { background: #6f8a6a } .tr-barres .b-out { background: #c9a46c }
.tr-solde { text-align: center; font-size: 12px; font-weight: 600; color: var(--c-vigne); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap }
.tr-solde.neg { color: #b4573a }
.tr-mois .m { text-align: center; font-size: 12px; color: var(--doux) }
.expedition summary { cursor: pointer; color: var(--doux); font-size: 14px }

/* ---------- menu : familles (Vigne & cave, Vendre, Gestion, Administratif) ---------- */
#nav .groupe-nav {
  width: 64px; height: auto; background: none; font-size: 8.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38); text-align: center; line-height: 1.2; margin: 12px 0 3px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
#nav .groupe-nav:empty { padding-top: 0; margin-top: 10px; }
@media (max-width: 900px) {
  #nav .groupe-nav { display: block; flex-basis: 100%; width: auto; text-align: left; margin: 8px 0 2px; padding: 6px 0 0 4px; }
  #nav .groupe-nav:empty { padding: 0; margin: 6px 0 2px; }
}


/* ================================================================================================================
   Refonte d'octobre 2026 : charte validée par Yann (crème, vert profond, terre cuite ; titres Playfair Display).
   Ce bloc vient en dernier et l'emporte sur les chartes précédentes. Les anciennes variables (--ambre, --rouge, --vert…)
   sont redirigées vers les jetons nommés ci-dessous.
   Lisibilité visée : texte 16 px, annotations 14 px au moins, cibles de 44 × 44 px, contraste 4,5:1 (3:1 pour les
   grands textes et les contours de contrôle), focus clavier visible, chiffres tabulaires.
   ================================================================================================================ */
:root, :root[data-theme="clair"] {
  /* palette de marque */
  --creme: #F6F1E7; --vert-profond: #163A2F; --terre-cuite: #B9512D; --terre-cuite-fonce: #9A3F20; --bois: #C9A46C;
  /* surfaces et texte */
  --fond: var(--creme); --carte: #FFFCF6; --surface: #EFE7D8; --survol: #F1E9DA; --champ: #FFFEFB;
  --texte: #1E2A24; --doux: #5B5A4F; --ligne: #E3D8C6; --ligne-forte: #8C7F6A;
  /* accent (action principale) et action secondaire verte */
  --accent: var(--terre-cuite); --accent-texte: #9A3F20; --accent-pale: #F5E1D6; --sur-accent: #FFFFFF;
  --action: var(--vert-profond); --sur-action: #FFFFFF; --action-survol: #0E2A21;
  /* menu */
  --nav: var(--vert-profond); --nav-texte: #F3ECDF; --nav-doux: #C3CFC4; --nav-actif: rgba(255, 255, 255, .12); --nav-repere: #E8C27A;
  /* sens : erreur, avertissement, confirmation, information (toujours avec un libellé ou un symbole) */
  --erreur: #A3242A; --erreur-pale: #F8E1DF; --avertissement: #7A4A00; --avertissement-pale: #FBEBCB;
  --confirmation: #2A5F38; --confirmation-pale: #E2EFDF; --info: #2B5670; --info-pale: #E2ECF1;
  --focus: var(--vert-profond);
  /* anciennes variables, redirigées */
  --ambre: var(--accent); --ambre-fonce: var(--accent-texte); --ambre-pale: var(--accent-pale); --ligne-ambre: #E7BFA9;
  --rouge: var(--erreur); --rouge-pale: var(--erreur-pale); --vert: var(--confirmation); --vert-pale: var(--confirmation-pale); --bleu: var(--info);
  --pastille: #ECE3D2; --piste: #E6DCCB; --terroir: var(--bois);
  --barre: rgba(246, 241, 231, .92); --voile: rgba(22, 30, 25, .5);
  --ombre: 0 1px 2px rgba(60, 40, 20, .05), 0 6px 18px rgba(60, 40, 20, .06);
  --ombre-haute: 0 14px 34px rgba(60, 40, 20, .12);
  --rayon: 16px;
  --police: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --titre: "Playfair Display", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
/* Mode sombre : même hiérarchie, ombres remplacées par des contours, accent éclairci, texte sur accent foncé. */
:root[data-theme="cave"] {
  --fond: #101A15; --carte: #17241D; --surface: #1E2D25; --survol: #22332A; --champ: #13201A;
  --texte: #EFE8DB; --doux: #B5AE9F; --ligne: #2B3B32; --ligne-forte: #6E8075;
  --accent: #E07A52; --accent-texte: #EE9672; --accent-pale: #3A2419; --sur-accent: #1A120D;
  --action: #2E6A52; --sur-action: #FFFFFF; --action-survol: #378062;
  --nav: #0B140F; --nav-texte: #EFE8DB; --nav-doux: #B9C4BA; --nav-actif: rgba(255, 255, 255, .09); --nav-repere: #E8C27A;
  --erreur: #FF9C8F; --erreur-pale: #3A1D1A; --avertissement: #F2C064; --avertissement-pale: #33270F;
  --confirmation: #93D19C; --confirmation-pale: #18301F; --info: #97C2DE; --info-pale: #172A35;
  --focus: #F2C46B; --ligne-ambre: #5A3526; --pastille: #24352C; --piste: #24352C;
  --barre: rgba(16, 26, 21, .92); --voile: rgba(0, 0, 0, .6);
  --ombre: 0 0 0 1px rgba(255, 255, 255, .04); --ombre-haute: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}


/* ---------- lecture : 16 px, annotations 14 px, chiffres alignés ---------- */
body { font: 16px/1.55 var(--police); background-color: var(--fond); color: var(--texte); background-image: none; }
.note, small, .tuile-detail, .kpi .det, .legende, .barres .m, .cuve .det, .jours div, .meteo-conseil, .resultat small, label.champ > span, .agenda .pastille-domaine { font-size: 14px; }
.kpi .lib, .bento-carte h2, .carte h2 { font-size: 14px; letter-spacing: .04em; }
th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--doux); font-weight: 600; }
td.n, th.n, .chiffre, .kpi .val, input, .montant, .indicateurs, .regard-quand, .geste-quand, .geste-detail { font-variant-numeric: tabular-nums; }
.pastille { font-size: 14px; font-weight: 600; padding: 2px 10px; display: inline-flex; align-items: center; gap: 5px; line-height: 1.5; }
.pastille .ico { width: 15px; height: 15px; vertical-align: 0; }
.pastille.vert { background: var(--confirmation-pale); color: var(--confirmation); }
.pastille.rouge { background: var(--erreur-pale); color: var(--erreur); }
.pastille.ambre { background: var(--avertissement-pale); color: var(--avertissement); }
.pastille.bleu { background: var(--info-pale); color: var(--info); }
.alerte { background: var(--avertissement-pale); border: 1px solid color-mix(in srgb, var(--avertissement) 30%, transparent); color: var(--texte); }
.alerte.rouge { background: var(--erreur-pale); border-color: color-mix(in srgb, var(--erreur) 35%, transparent); }
.alerte.vert { background: var(--confirmation-pale); border-color: color-mix(in srgb, var(--confirmation) 35%, transparent); }
.alerte .ico { width: 18px; height: 18px; vertical-align: -3px; }
.alerte.rouge::before { content: "À corriger · "; font-weight: 700; color: var(--erreur); }
a { color: var(--accent-texte); }
h1, .entete h1, .titre-section, #modale h2:first-child { font-family: var(--titre); font-weight: 600; font-style: normal; letter-spacing: -.01em; font-variation-settings: normal; }
h1, .entete h1 { font-size: 38px; line-height: 1.1; }
.titre-section { font-size: 28px; padding-top: 0; }
.titre-section::before { display: none; }
.entete h1::after { background: var(--accent); }
.sous-titre, .sous-titre-modale { color: var(--doux); font-size: 16px; }
.sous-titre-modale { margin: -6px 0 16px; }
.pour-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico .t { mask: none; fill: currentColor; fill-opacity: .2; stroke: none; }

/* ---------- contrôles : 44 px, focus visible, contours lisibles ---------- */
button, .bouton { min-height: 44px; padding: 8px 16px; border-radius: 12px; border-color: var(--ligne-forte); background: var(--carte); color: var(--texte); font-weight: 500; }
button:hover, .bouton:hover { border-color: var(--accent); }
button.petit { min-height: 44px; padding: 6px 12px; font-size: 15px; }
button.lien { min-height: 44px; border: 0; background: none; color: var(--accent-texte); padding: 6px 4px; font-weight: 600; }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); box-shadow: none; border-radius: 12px; font-weight: 600; }
button.principal:hover, .bouton.principal:hover { background: var(--terre-cuite-fonce); border-color: var(--terre-cuite-fonce); transform: none; box-shadow: none; }
:root[data-theme="cave"] button.principal:hover { background: #EE9672; border-color: #EE9672; }
button.danger { color: var(--erreur); }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { min-height: 44px; font-size: 16px; border-color: var(--ligne-forte); background: var(--champ); color: var(--texte); border-radius: 10px; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 22px; height: 22px; accent-color: var(--vert-profond); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.onglets { background: var(--surface); }
.onglets button { min-height: 44px; color: var(--doux); font-size: 15px; }
.onglets button.actif { background: var(--carte); color: var(--texte); }
.case { min-height: 44px; }
.aller-contenu { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--carte); color: var(--texte); padding: 10px 16px; border-radius: 10px; border: 2px solid var(--focus); }
.aller-contenu:focus { top: 12px; }

/* ---------- menu latéral : marque, espaces, accès permanents ---------- */
body { display: flex; flex-direction: row; }
#nav {
  width: 256px; flex: none; background: var(--nav); color: var(--nav-texte); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: stretch; padding: 22px 14px 14px; z-index: 40;
}
#nav .marque { width: auto; height: auto; background: none; border-radius: 0; display: flex; align-items: center; gap: 12px; padding: 4px 10px 20px; margin: 0; color: var(--nav-texte); text-decoration: none; }
#nav .marque:hover { transform: none; }
.marque-logo { width: 44px; height: 48px; border-radius: 12px; background: var(--creme); display: grid; place-items: center; flex: none; }
.marque-logo .logo-app { width: 26px; height: 30px; }
.marque-nom strong { display: block; font: 600 25px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.marque-nom em { display: block; font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-doux); margin-top: 6px; }
#nav nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
#nav a[data-page], .espace-titre, #deconnexion {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 0;
  background: none; color: var(--nav-texte); text-decoration: none; font: 500 16px/1.25 var(--police); text-align: left; letter-spacing: 0; flex-direction: row;
}
#nav a[data-page]:hover, .espace-titre:hover, #deconnexion:hover { background: rgba(255, 255, 255, .07); color: var(--nav-texte); border: 0; }
#nav a[data-page].actif { background: var(--nav-actif); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
#nav :focus-visible { outline-color: var(--nav-repere); }
.nav-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--creme); display: grid; place-items: center; flex: none; transition: none; }
.nav-icone .illu { width: 28px; height: 28px; }
.nav-icone .ico { width: 22px; height: 22px; color: var(--vert-profond); }
#nav nav a i { display: none; }
.espace-nav { margin-top: 2px; }
.espace-titre { font-weight: 600; }
.espace-titre .chevron { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--nav-doux); border-bottom: 2px solid var(--nav-doux); transform: rotate(-45deg); transition: transform .15s; }
.espace-nav.ouvert .chevron { transform: rotate(45deg); }
.espace-nav.courant > .espace-titre { color: var(--nav-repere); }
.espace-modules { display: none; padding: 2px 0 6px 18px; border-left: 1px solid rgba(255, 255, 255, .14); margin-left: 27px; }
.espace-nav.ouvert .espace-modules { display: block; }
.espace-modules a[data-page] { min-height: 44px; font-size: 15px; padding: 4px 8px; gap: 10px; }
.espace-modules .nav-icone { width: 30px; height: 30px; border-radius: 8px; }
.espace-modules .nav-icone .illu { width: 24px; height: 24px; }
.pied-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
#deconnexion { min-height: 44px; }
#deconnexion i { width: 36px; text-align: center; font-style: normal; }
#voile-menu { display: none; }
#bouton-menu { display: none; }

/* ---------- barre du haut : recherche, Enregistrer, thème, aide ---------- */
#colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#barre { position: sticky; top: 0; z-index: 30; display: flex; gap: 10px; align-items: center; padding: 14px 36px; background: var(--barre); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
#zone-recherche { flex: 1; max-width: 680px; }
#recherche { min-height: 48px; border-radius: 12px; padding: 10px 14px 10px 42px; font-size: 16px; background-color: var(--champ); box-shadow: none; border-color: var(--ligne-forte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235B5A4F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5l4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; }
.bouton-barre, #bouton-aide { min-height: 48px; border-radius: 12px; padding: 8px 14px; gap: 8px; white-space: nowrap; background: var(--carte); }
.bouton-barre .ico { width: 20px; height: 20px; }
#bouton-nouveau { min-height: 48px; padding: 10px 22px; border-radius: 12px; font-size: 16px; gap: 8px; margin-left: auto; white-space: nowrap; }
#bouton-nouveau span[aria-hidden] { font-size: 20px; line-height: 1; }
#bouton-retour { padding: 8px 12px; }
main { padding: 28px 36px 64px; }
#contenu:focus { outline: none; }

/* ---------- accueil ---------- */
.accueil-tete { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin: 0 0 22px; }
.surtitre { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.salut { font: 600 clamp(40px, 4.4vw, 56px)/1.04 var(--titre); margin: 6px 0 8px; letter-spacing: -.015em; }
.salut::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 12px; }
.accroche { margin: 0; font-size: 18px; color: var(--doux); }
.accueil-illustration { width: 150px; height: 150px; object-fit: contain; flex: none; }
.titre-ligne { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.titre-ligne .titre-section { margin: 4px 0 14px; }
.titre-ligne .lien .ico, .lien-fleche .ico { width: 18px; height: 18px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.grands-acces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.grand-acces { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; gap: 6px 10px; padding: 16px 18px 18px; min-height: 0; text-align: left;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre); color: var(--texte); }
.grand-acces:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); }
.ga-objet { grid-column: 1 / -1; justify-self: center; display: block; height: 104px; }
.ga-objet .bois { width: 104px; height: 104px; object-fit: contain; display: block; }
.ga-texte strong { display: block; font: 600 20px/1.2 var(--titre); }
.ga-texte small { display: block; color: var(--doux); font-size: 14px; line-height: 1.4; margin-top: 4px; }
.ga-fleche { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne-forte); display: grid; place-items: center; color: var(--texte); }
.ga-fleche .ico { width: 20px; height: 20px; }
.grand-acces:hover .ga-fleche { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.accueil-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
.accueil-grille > .carte { margin: 0; border-radius: 18px; padding: 22px 24px; }
.regarder, .gestes { grid-column: span 7; }
.au-domaine, .en-bref { grid-column: span 5; }
.titre-carte { font: 600 24px/1.2 var(--titre) !important; color: var(--texte) !important; text-transform: none !important; letter-spacing: -.005em !important; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.titre-carte .illu { width: 32px; height: 32px; }
.regards { list-style: none; margin: 0; padding: 0; }
.regard { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ligne); }
.regard:first-child { border-top: 0; }
.regard-num { font: 500 32px/1 var(--titre); color: var(--accent-texte); font-variant-numeric: lining-nums; border-right: 1px solid var(--ligne); padding: 4px 0; }
.regard-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.regard-corps strong { font-size: 17px; font-weight: 600; }
.regard-quand { color: var(--doux); font-size: 14px; }
button.lien.regard-modifier { font-size: inherit; padding: 4px 2px; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
.regard-type { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--doux); }
.regard-type .ico { width: 16px; height: 16px; }
.regard-anomalie .regard-type { color: var(--erreur); }
.regard-retard .regard-type, .regard-valider .regard-type { color: var(--avertissement); }
.regard-echeance .regard-type, .regard-tache .regard-type, .regard-conseil .regard-type { color: var(--info); }
.action-verte { background: var(--action); border-color: var(--action); color: var(--sur-action); font-weight: 600; white-space: nowrap; gap: 8px; }
.action-verte:hover { background: var(--action-survol); border-color: var(--action-survol); }
.action-verte .ico { width: 18px; height: 18px; }
.regards-suite { margin: 8px 0 0; }
.regarder #nvt { margin-top: 6px; }
.rien { display: flex; gap: 14px; align-items: center; padding: 10px 0; }
.rien .illu { width: 48px; height: 48px; flex: none; }
.rien p { margin: 2px 0 0; color: var(--doux); }
.meteo-chiffres { display: flex; gap: 18px; align-items: center; }
.meteo-temp { font: 500 64px/1 var(--titre); }
.meteo-temp small { font-size: 26px; vertical-align: top; margin-left: 2px; }
.meteo-chiffres > div { display: flex; flex-direction: column; gap: 3px; }
.meteo-chiffres span { color: var(--doux); font-size: 15px; }
.meteo-source { color: var(--doux); font-size: 14px; margin: 12px 0 4px; }
.meteo-etat { display: flex; gap: 14px; align-items: flex-start; }
.meteo-etat .illu { width: 44px; height: 44px; flex: none; }
.meteo-etat p { margin: 4px 0; }
.meteo-etat p .ico { width: 18px; height: 18px; vertical-align: -3px; }
.fil { list-style: none; margin: 0; padding: 0; }
.geste { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 6px; min-height: 44px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 15px; color: var(--texte); }
.geste:hover { background: var(--survol); }
.puce { width: 10px; height: 10px; border-radius: 50%; background: var(--f, var(--doux)); flex: none; align-self: center; }
.geste[data-famille="vigne"] { --f: #3F7A4E; } .geste[data-famille="chai"] { --f: var(--terre-cuite); } .geste[data-famille="factures"] { --f: #B98A3E; }
.geste-quand { color: var(--doux); min-width: 92px; }
.geste-quoi { font-weight: 600; }
.geste-objet::before, .geste-detail::before { content: "· "; color: var(--doux); }
.geste-detail { color: var(--doux); }
.indicateurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin: 4px 0 8px; }
.indicateurs > div { border-top: 1px solid var(--ligne); padding-top: 10px; }
.indicateurs dt { font-size: 14px; font-weight: 600; color: var(--doux); }
.indicateurs dd { margin: 0; font-size: 16px; }
.indicateurs .chiffre { font: 600 30px/1.15 var(--titre); color: var(--texte); }
.indicateurs .perimetre { font-size: 14px; color: var(--doux); margin-top: 2px; }
.accueil-grille + .demarrage { margin-top: 18px; }

/* ---------- tous les modules ---------- */
.modules-espace .titre-espace { font: 600 24px/1.2 var(--titre); color: var(--texte); text-transform: none; letter-spacing: 0; display: flex; gap: 10px; align-items: center; }
.titre-espace .illu { width: 34px; height: 34px; }
.modules-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.module { display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: 64px; border: 1px solid var(--ligne); border-radius: 14px; color: var(--texte); text-decoration: none; background: var(--carte); }
.module:hover { border-color: var(--accent); background: var(--survol); }
.module .illu { width: 40px; height: 40px; flex: none; }
.module strong { display: block; font-size: 16px; }
.module small { display: block; color: var(--doux); font-size: 14px; }

/* ---------- déclarations : calculée, anomalies, préparée, déposée ---------- */
.etat-ligne { margin: 4px 0 10px; }
.etats-declaration { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.etats-declaration li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); }
.etats-declaration .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.etats-declaration strong { display: block; font-size: 15px; }
.etats-declaration small { display: block; color: var(--doux); }
.etat-fait .ico { color: var(--confirmation); }
.etat-bloque { background: var(--erreur-pale) !important; } .etat-bloque .ico { color: var(--erreur); }
.etat-afaire .ico { color: var(--doux); }

/* ---------- tableau de bord détaillé : les dépenses sont hachurées (pas seulement plus claires) ---------- */
.barres .b.d, .legende .leg-d { background: repeating-linear-gradient(135deg, var(--ligne-forte) 0 2px, transparent 2px 5px); border: 1px solid var(--ligne-forte); }
.barres .b.r, .legende .leg-r { background: var(--accent); }
.legende i { width: 14px; height: 14px; }

/* ---------- divers : cartes, tuiles, modale, toast ---------- */
.carte, .kpi, .bento-carte { background: var(--carte); border-color: var(--ligne); box-shadow: var(--ombre); }
.kpi .val { font-family: var(--titre); font-weight: 600; font-style: normal; }
.bento .chiffre, .drm-compte, .cave-pied .chiffre, .jour-tete strong { font-family: var(--titre); }
.tuile { min-height: 120px; }
.tuile-titre { font-size: 16px; }
#modale { background: var(--carte); color: var(--texte); }
#toast { background: var(--vert-profond); color: #fff; font-size: 15px; }
#toast.erreur { background: var(--erreur); color: #fff; }
:root[data-theme="cave"] #toast.erreur { color: #1A120D; }
#suite { background: var(--carte); }
.depot { background: var(--accent-pale); border-color: var(--ligne-forte); }
tr:hover td { background: var(--survol); }
#nav ~ #colonne #contenu:not([data-page="accueil"]) > .entete:first-child::before { filter: none; }

/* ---------- écrans moyens ---------- */
@media (max-width: 1240px) {
  .grands-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-objet { grid-column: auto; grid-row: span 2; align-self: center; height: 80px; }
  .grand-acces { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; }
  .ga-objet .bois { width: 80px; height: 80px; }
}
@media (max-width: 1100px) {
  .regarder, .gestes, .au-domaine, .en-bref { grid-column: 1 / -1; }
  .etats-declaration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- téléphone et écran étroit : menu en panneau derrière « Menu » ---------- */
@media (max-width: 960px) {
  body { flex-direction: row; }
  #nav { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: min(320px, 86vw); transform: translateX(-105%); transition: transform .2s ease; flex-direction: column; padding: 18px 12px 12px; }
  #nav nav { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; }
  body.menu-ouvert #nav { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  body.menu-ouvert #voile-menu { display: block; position: fixed; inset: 0; background: var(--voile); z-index: 35; }
  .pied-nav { display: flex; }
  #bouton-menu { display: inline-flex; }
  #barre { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  #zone-recherche { order: 10; flex-basis: 100%; max-width: none; }
  main { padding: 18px 16px 48px; }
}
@media (max-width: 640px) {
  #bouton-retour[style*="hidden"] { display: none; }
  #bouton-retour span:last-child, #bouton-theme span, #bouton-signaler span { display: none; }
  #bouton-retour, #bouton-theme, #bouton-signaler { min-width: 48px; justify-content: center; padding: 8px; }
  #bouton-nouveau { padding: 10px 16px; }
  #bouton-aide { display: none; } /* l'Aide reste en bas du menu : la barre tient sur une ligne */
  #bouton-retour { order: 9; } /* « Retour » passe à côté de la recherche, en seconde ligne */
  #bouton-retour:not([style*="hidden"]) ~ #zone-recherche { flex-basis: calc(100% - 56px); }
  #bouton-nouveau { margin-left: auto; }
  .accueil-tete { gap: 12px; }
  .accueil-illustration { width: 84px; height: 84px; }
  .salut { font-size: 36px; }
  .grands-acces { grid-template-columns: 1fr; gap: 10px; }
  .grand-acces { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 12px 14px; }
  .ga-objet, .ga-objet .bois { width: 64px; height: 64px; }
  .ga-texte strong { font-size: 18px; }
  .accueil-grille > .carte { padding: 18px 16px; }
  .regard { grid-template-columns: 40px minmax(0, 1fr); }
  .regard .action-verte { grid-column: 2; justify-self: start; }
  .regard-num { font-size: 24px; }
  .indicateurs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .indicateurs .chiffre { font-size: 24px; }
  .meteo-temp { font-size: 52px; }
  h1, .entete h1 { font-size: 30px; }
  .titre-section { font-size: 24px; }
  .etats-declaration { grid-template-columns: 1fr; }
  .geste-quand { min-width: 0; }
  .grille > * { min-width: 0; }
  .barres { gap: 2px; }
  .barres .mois { min-width: 0; }
  .barres .m { font-size: 14px; }
  .barres .mois:nth-child(even) .m { visibility: hidden; }
  .legende { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { #nav { transition: none; } }
/* pages sans grande icône d'univers : le titre reprend sa place à gauche */
#contenu[data-page="modules"] > .entete:first-child, #contenu[data-page="tableau"] > .entete:first-child { padding-left: 0; min-height: 0; }
code { overflow-wrap: anywhere; } /* adresses longues (réglages) : coupées plutôt que de déborder sur téléphone */
/* tableau de bord détaillé : ses trois cartes (DRM, cave, ventes) tiennent sur une rangée */
@media (min-width: 801px) {
  #contenu[data-page="tableau"] .bento .bento-carte:nth-child(1) { grid-column: span 4 !important; }
  #contenu[data-page="tableau"] .bento .bento-carte:nth-child(2) { grid-column: span 5 !important; }
  #contenu[data-page="tableau"] .bento .bento-carte:nth-child(3) { grid-column: span 3 !important; }
}

/* ================================================================================================================
   Interface vivante (octobre 2026) : l'encart vivant de l'accueil, tous les gestes en objets sculptés, des pages moins
   austères. Mêmes règles de lecture que la refonte : texte 16 px, cibles de 44 px, contraste 4,5:1, focus visible,
   aucun mouvement sous « réduire les animations ».
   ================================================================================================================ */
:root, :root[data-theme="clair"] {
  --papier: linear-gradient(180deg, var(--carte), color-mix(in srgb, var(--carte) 93%, var(--bois)));
  --ombre-objet: drop-shadow(0 10px 12px rgba(60, 40, 20, .16));
}
:root[data-theme="cave"] { --papier: linear-gradient(180deg, color-mix(in srgb, var(--carte) 94%, #fff), var(--carte)); --ombre-objet: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }


/* ---------- l'encart vivant : un ciel réel (ciel.js), les douelles qui flottent devant, le salut ---------- */
.encart { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; min-height: clamp(250px, 21vw, 300px); margin: 0 0 28px;
  border: 1px solid var(--ligne); box-shadow: var(--ombre-haute); background: #6f8fb8;
  --encart-encre: #122B3F; --encart-doux: #2A3A48; --encart-voile: rgba(255, 252, 246, .72); --encart-bord: rgba(18, 43, 63, .16); }
.encart.encart-sombre { --encart-encre: #F6F1E7; --encart-doux: #ECE6DA; --encart-voile: rgba(10, 18, 14, .38); --encart-bord: rgba(246, 241, 231, .24); }
.encart-ciel { position: absolute; inset: 0; z-index: -1; }
.encart-ciel > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.encart-ciel > .ciel-toile { image-rendering: auto; }
/* le portail de douelles est posé sur le bord bas de l'encart ; le ciel passe derrière et à travers */
.encart .ciel-illustration { inset: auto 3% 0 auto; width: 56%; height: 90%; opacity: 1; animation: none; clip-path: none; }
.ciel-illustration > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: right bottom; }
.encart .ciel-brume { opacity: 0; transition: opacity 1.5s; }
.encart-ciel > .ciel-voile { transition: background .9s; }
.encart .ciel-eclair { opacity: 0; background: radial-gradient(ellipse 70% 90% at var(--x, 60%) var(--y, 20%), rgba(236, 240, 255, .9), rgba(220, 228, 255, .35) 45%, rgba(220, 228, 255, 0) 80%); }
/* un éclair : une seule montée douce, puis un long fondu (jamais de clignotement) */
.encart .ciel-eclair.flash { animation: eclair-doux 1.1s ease-out; }
@keyframes eclair-doux { 0% { opacity: 0; } 8% { opacity: .32; } 100% { opacity: 0; } }
.encart-texte { position: relative; max-width: 50%; padding: 30px 36px 28px; color: var(--encart-encre); }
.encart .surtitre, .encart .accroche { color: var(--encart-doux); }
.encart .salut { color: var(--encart-encre); }
.encart.encart-sombre .salut, .encart.encart-sombre .surtitre, .encart.encart-sombre .accroche { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.encart-meteo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; margin: 18px 0 0; padding: 8px 16px; border-radius: 999px;
  background: var(--encart-voile); border: 1px solid var(--encart-bord); color: var(--encart-encre); text-decoration: none; font-size: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s, transform .25s cubic-bezier(.25, .8, .25, 1), background .9s; }
.encart-meteo strong.chiffre { font: 700 20px/1 var(--police); }
.encart-meteo > span:not(.pour-lecteur) { padding-left: 12px; border-left: 1px solid var(--encart-bord); }
.encart-meteo .ico { width: 18px; height: 18px; }
.encart-meteo .illu { width: 28px; height: 28px; flex: none; }
a.encart-meteo:hover { border-color: var(--encart-encre); transform: translateX(2px); }
.encart-meteo.indisponible > span, .encart-meteo.attente > span { padding-left: 0; border-left: 0; }
.meteo-ciel { display: block; font: 600 18px/1.2 var(--titre); color: var(--texte); }

/* ---------- tous les gestes ---------- */
.plus-gestes-ligne { margin: -8px 0 24px; }
.plus-gestes { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px 10px 26px; text-align: left;
  border: 1px solid var(--ligne); border-radius: 18px; background: var(--papier); box-shadow: var(--ombre); color: var(--texte); }
.plus-gestes:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); }
.plus-gestes-objets { display: flex; flex: none; }
.plus-gestes-objets .bois { width: 48px; height: 48px; margin-left: -12px; filter: var(--ombre-objet); transition: transform .3s cubic-bezier(.25, .8, .25, 1); }
.plus-gestes:hover .plus-gestes-objets .bois:nth-child(1) { transform: translateX(-4px); }
.plus-gestes:hover .plus-gestes-objets .bois:nth-child(3) { transform: translateX(4px); }
.plus-gestes-texte { flex: 1; min-width: 0; }
.plus-gestes-texte strong { display: block; font: 600 20px/1.2 var(--titre); }
.plus-gestes-texte small { display: block; color: var(--doux); font-size: 14px; margin-top: 2px; }
.plus-gestes .chevron { flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; }
.plus-gestes[aria-expanded="true"] .chevron { transform: rotate(225deg) translate(-3px, -3px); }
.plus-gestes[aria-expanded="true"] { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.panneau-gestes { margin: -18px 0 28px; padding: 14px 22px 22px; border: 1px solid var(--ligne); border-top: 0; border-radius: 0 0 22px 22px; background: var(--papier); box-shadow: var(--ombre); }
.panneau-gestes[hidden] { display: none; }
.gestes-espace h3 { margin: 14px 0 8px; font: 600 14px/1.3 var(--police); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); display: flex; align-items: center; gap: 10px; }
.gestes-espace h3::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.panneau-gestes:not([hidden]) { columns: 4 240px; column-gap: 26px; }
.gestes-espace { break-inside: avoid; padding-bottom: 6px; }
.gestes-grille { display: flex; flex-direction: column; gap: 2px; }
.geste-bois { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 8px; text-align: left; border: 1px solid transparent; border-radius: 16px;
  background: color-mix(in srgb, var(--carte) 70%, transparent); color: var(--texte); transition: border-color .2s, box-shadow .2s, transform .25s cubic-bezier(.25, .8, .25, 1), background .2s; }
.geste-bois:hover { border-color: var(--accent); background: var(--carte); box-shadow: var(--ombre-haute); transform: translateY(-2px); }
.geste-bois .bois { width: 52px; height: 52px; flex: none; filter: var(--ombre-objet); transition: transform .3s cubic-bezier(.25, .8, .25, 1); }
.geste-bois:hover .bois { transform: translateY(-3px); }
.geste-bois strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.geste-bois small { display: block; color: var(--doux); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.panneau-gestes.deplie .geste-bois { animation: monte .42s cubic-bezier(.25, .8, .25, 1) both; animation-delay: calc(var(--i) * 14ms); }

/* ---------- en-tête des pages : objet sculpté, titre, une ligne, actions ---------- */
#colonne #contenu > .entete.page-tete { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px 24px; min-height: 0; margin: 0 0 22px; padding: 16px 26px 16px 18px; border: 1px solid var(--ligne); border-radius: 24px; box-shadow: var(--ombre);
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--bois) 20%, transparent), transparent 60%), var(--papier); }
#colonne #contenu > .entete.page-tete::before { content: none; display: none; }
/* le fil du bois, très léger, côté droit */
#colonne #contenu > .entete.page-tete::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(96deg, transparent 0 9px, color-mix(in srgb, var(--bois) 9%, transparent) 9px 10px, transparent 10px 23px, color-mix(in srgb, var(--bois) 6%, transparent) 23px 24px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 65%); mask-image: linear-gradient(to left, #000, transparent 65%); }
.page-objet { display: block; width: 112px; height: 112px; }
.page-objet .bois { width: 112px; height: 112px; object-fit: contain; display: block; filter: var(--ombre-objet); }
.page-titres { min-width: 0; }
.page-titres h1 { margin: 0; }
.page-ligne { margin: 12px 0 0; color: var(--doux); font-size: 16px; line-height: 1.45; max-width: 64ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.page-actions .choix-annee, .page-actions select { width: auto; }
#contenu.arrivee > .page-tete .page-objet { animation: objet-pose .6s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes objet-pose { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* ---------- des cartes plus chaleureuses ---------- */
.carte, .kpi { background: var(--papier); }
.carte { border-radius: 20px; }
.kpi { position: relative; overflow: hidden; border-radius: 18px; transition: transform .25s cubic-bezier(.25, .8, .25, 1), box-shadow .25s; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: color-mix(in srgb, var(--bois) 70%, transparent); }
.kpi.neg::before { background: var(--erreur); }
.kpi.pos::before { background: var(--confirmation); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.module, .grand-acces { transition: transform .25s cubic-bezier(.25, .8, .25, 1), box-shadow .25s, border-color .2s, background .2s; }
.module:hover, .grand-acces:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.grand-acces { background: var(--papier); }
.ga-objet .bois { filter: var(--ombre-objet); transition: transform .35s cubic-bezier(.25, .8, .25, 1); }
.grand-acces:hover .ga-objet .bois { transform: translateY(-4px); }
.onglets { border-radius: 14px; }
.onglets button.actif { box-shadow: var(--ombre); }

/* ---------- arrivée sur une page : les blocs glissent en place, l'un après l'autre ---------- */
#contenu.arrivee > * { animation: monte .45s cubic-bezier(.25, .8, .25, 1) both; }
#contenu.arrivee > :nth-child(2) { animation-delay: .05s; }
#contenu.arrivee > :nth-child(3) { animation-delay: .1s; }
#contenu.arrivee > :nth-child(4) { animation-delay: .15s; }
#contenu.arrivee > :nth-child(5) { animation-delay: .2s; }
#contenu.arrivee > :nth-child(n+6) { animation-delay: .25s; }
#contenu.pose > * { animation: none; }   /* la page est posée : un onglet ou un enregistrement la redessine sans rejouer l'arrivée */

/* ---------- états vides : l'objet de la page, en grand ---------- */
.vide-illustre { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 22px; color: var(--doux); font-size: 16px; text-align: center; }
.vide-objet .bois { width: 88px; height: 88px; display: block; filter: var(--ombre-objet); opacity: .95; }
.vide-texte { max-width: 56ch; }

/* ---------- fenêtres (modales) : papier, coins doux, arrivée glissée ---------- */
#modale { background: var(--papier); border: 1px solid var(--ligne); border-radius: 24px; box-shadow: 0 24px 60px rgba(20, 15, 10, .28); }
#modale-fond:not([hidden]) #modale { animation: modale-entree .3s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes modale-entree { from { opacity: 0; transform: translateY(12px) scale(.985); } }
#modale > h2:first-child::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 10px; }

/* ---------- écrans moyens et étroits ---------- */
@media (max-width: 1100px) {
  .encart-texte { max-width: 60%; }
  .encart .ciel-illustration { width: 60%; height: 66%; }
  #colonne #contenu > .entete.page-tete { grid-template-columns: auto minmax(0, 1fr); }
  .page-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .encart { min-height: 0; border-radius: 22px; margin-bottom: 22px; }
  .encart-texte { max-width: none; padding: 20px 18px 204px; }
  .encart .ciel-illustration { inset: auto 2% 0 auto; width: 96%; height: 132px; object-position: center; }
  .encart-meteo { margin-top: 14px; }
  .plus-gestes { padding: 10px 14px 10px 22px; gap: 12px; }
  .plus-gestes-objets .bois { width: 40px; height: 40px; }
  .plus-gestes-texte strong { font-size: 18px; }
  .panneau-gestes { padding: 8px 12px 16px; }
  .geste-bois .bois { width: 48px; height: 48px; }
  #colonne #contenu > .entete.page-tete { gap: 6px 14px; padding: 14px 14px 14px 10px; border-radius: 20px; }
  #colonne #contenu > .entete.page-tete { align-items: start; }
  .page-objet, .page-objet .bois { width: 64px; height: 64px; }
  .page-titres h1 { font-size: 28px; }
  .page-ligne { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .encart-meteo, .geste-bois, .geste-bois .bois, .kpi, .module, .grand-acces, .ga-objet .bois, .plus-gestes-objets .bois, .plus-gestes .chevron { transition: none; }
  .geste-bois:hover, .geste-bois:hover .bois, .kpi:hover, .module:hover, .grand-acces:hover, .grand-acces:hover .ga-objet .bois, a.encart-meteo:hover { transform: none; }
}

/* Choix « d'où vient l'écart ? » (volume mesuré, inventaire) */
.pc-causes { display: grid; gap: 10px; margin: 12px 0 4px; }
.pc-cause { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; white-space: normal; }
.pc-cause span { font-weight: 400; font-size: 13px; opacity: .8; }
.pc-cause[disabled] { opacity: .5; cursor: not-allowed; }

/* Journée de vendange détaillée (Vigne › Vendanges) */
.vd h3 { margin: 18px 0 6px; font-size: 1rem; }
.vd-parcelles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 340px; overflow: auto; padding: 2px; }
.vd-lieu { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; }
.vd-lieu-nom { font-weight: 600; margin-bottom: 4px; }
.vd-parcelle { padding: 3px 0; border-radius: 6px; }
.vd-parcelle.choisie { background: var(--surface); }
.vd-parcelle > label { display: flex; gap: 6px; align-items: baseline; }
.vd-cepages { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 24px; font-size: .9em; }
.vd-cuve { border: 1px dashed var(--ligne); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.vd-liste { margin: 4px 0 8px; padding-left: 18px; }
.vd-controles { margin: 6px 0; padding-left: 18px; }
.vd-controles li { margin: 3px 0; }

/* Logo sculpté (bois et céramique) : image détourée, sans tuile derrière */
img.logo-app { object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(20, 22, 26, .18)); }
.marque-logo { background: var(--creme, #f4ede2); width: 54px; height: 58px; border-radius: 14px; }   /* tuile crème : la douelle verte reste lisible sur le menu vert */
.marque-logo .logo-app, .marque .logo-app { width: 44px; height: 48px; }
.hero-logo { background: transparent !important; box-shadow: none; width: 48px; height: 52px; }
.hero-logo .logo-app { width: 46px; height: 50px; }

/* ---------- E-étiquettes (Ventes) ---------- */
.ee-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.ee-tete h2 { margin-top: 0; }
.ee-etapes { margin: 12px 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.ee-compteur { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 140px; padding: 16px; border-radius: 12px; background: var(--fond-doux, rgba(0,0,0,.03)); }
.ee-compteur .chiffre { font: 500 44px/1 var(--titre); color: var(--accent-texte); }
.ee-compteur span:last-child { color: var(--doux); font-size: 14px; }
@media (max-width: 720px) { .ee-tete { grid-template-columns: 1fr; } }
/* E-étiquette en 4 étapes et page du QR (sur le modèle de Raisin) */
.ee-progression { height: 5px; border-radius: 3px; background: var(--ligne); margin: -4px 0 18px; overflow: hidden; }
.ee-progression i { display: block; height: 100%; background: var(--vert); transition: width .3s; }
.ee-titre { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--ligne); padding-bottom: 12px; margin-bottom: 16px; }
.ee-titre h2 { margin: 2px 0 6px; font: 600 26px/1.15 var(--titre); }
.ee-surtitre { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vert); }
.ee-etape { font: 600 22px/1 var(--titre); color: var(--doux); white-space: nowrap; }
.ee-verrou { padding: 9px 12px; border: 1px solid var(--ligne); border-radius: 8px; background: rgba(0,0,0,.03); margin-top: 4px; }
.ee-depots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ee-depot { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px; border: 2px dashed var(--ligne); border-radius: 12px; background: transparent; cursor: pointer; }
.ee-depot:hover { border-color: var(--vert); }
.ee-depot img, .ee-vignette { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: grid; place-items: center; font-size: 30px; background: rgba(0,0,0,.05); flex: none; }
.ee-depot strong, .ee-depot small { display: block; }
.ee-energie { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ee-energie > div { padding: 10px 12px; border-radius: 10px; background: var(--vert-pale); }
.ee-energie span, .ee-energie small { display: block; font-size: 12px; color: var(--doux); }
.ee-energie strong { font-size: 18px; }
.ee-energie .note { grid-column: 1 / -1; margin: 0; }
.ee-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px 22px; }
.ee-categorie .puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ee-categorie .puce .non-bio { color: var(--rouge, #b3261e); font-weight: 600; font-size: 11px; margin-left: 3px; }
.ee-categorie .puce.actif .non-bio { color: inherit; }
button.puce { flex: 0 1 auto; max-width: 100%; width: auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--carte);
  font-size: 13px; line-height: 1.3; white-space: normal; text-align: left; box-shadow: none; }
button.puce.actif { background: var(--vert); border-color: transparent; color: #fff; }
.ee-radios label { margin-right: 14px; }
.ee-apercu { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(0,0,0,.02); }
.ee-apercu h3 { margin-top: 0; }
.ee-apercu p { margin: 4px 0; }
.ee-colonnes { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 26px; }
.ee-qr { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; margin: 8px 0 12px; background: #fff; }
.ee-qr img { width: 100%; aspect-ratio: 1; display: block; }
.ee-qr p { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.ee-qr input[type=color] { width: 34px; height: 24px; padding: 0; border: none; vertical-align: middle; }
.ee-qr.vide { aspect-ratio: 1; display: grid; place-items: center; text-align: center; color: var(--doux); border-style: dashed; background: transparent; }
.ee-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.ee-etiquette { width: 100%; border: 1px solid var(--ligne); border-radius: 10px; }
.ee-recap { border: 1px solid var(--ligne); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
.ee-recap header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: rgba(0,0,0,.03); }
.ee-recap h3 { margin: 0; font: 600 20px/1.2 var(--titre); }
.ee-gauche h3 { font: 600 20px/1.2 var(--titre); margin: 6px 0 8px; }
.ee-lignes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; padding: 16px 18px; }
.ee-lignes span { display: block; font-size: 13px; color: var(--doux); }
.ee-lignes strong { font-weight: 500; }
@media (max-width: 820px) { .ee-colonnes { grid-template-columns: 1fr; } }

/* Tuiles repliables (Réglages) : un sommaire pour aller droit à une carte, chaque carte se replie sur son titre */
.sommaire-tuiles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; }
.carte.repliable > h2:first-child { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; }
.carte.repliable > h2:first-child::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux);
  transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px; }
.carte.repliee > h2:first-child::after { transform: rotate(-45deg); }
.carte.repliee > h2:first-child { margin: 0; }
.carte.repliable > h2:first-child { justify-content: flex-start; }
.carte.repliable > h2:first-child::after { margin-left: auto; }
.tuile-picto { width: 40px; height: 40px; object-fit: contain; flex: none; }
.tuile-titre { display: flex; flex-direction: column; gap: 2px; }
.tuile-titre small { font-size: 13px; font-weight: 400; line-height: 1.35; text-transform: none; letter-spacing: 0; color: var(--doux); }
.carte:not(.repliee) .tuile-titre small { display: none; }
.carte.repliee > :not(h2:first-child) { display: none !important; }
.carte.repliee { padding-top: 14px; padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .carte.repliable > h2:first-child::after { transition: none; } }

/* ---------- Tout sous la main : l'en-tête et les chiffres prennent moins de hauteur, le travail commence plus haut ---------- */
#colonne #contenu > .entete.page-tete { gap: 4px 20px; margin-bottom: 14px; padding: 8px 22px 8px 12px; border-radius: 20px; }
.page-objet, .page-objet .bois { width: 76px; height: 76px; }
.page-titres h1 { font-size: 32px; }
.page-ligne { margin-top: 6px; font-size: 15px; line-height: 1.4; }
.kpis { gap: 12px; margin-bottom: 14px; }
.kpi { padding: 10px 16px; }
.kpi .val { font-size: 26px; margin-top: 2px; }
.onglets { margin-bottom: 14px; }
/* Une longue description de lot ou de client ne pousse plus la ligne sur dix lignes : trois lignes, le reste au survol. */
td .note.coupee { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-width: 46ch; }
/* Boutons d'une ligne de tableau rangés sous « ⋯ » quand le tableau déborde (core.js, replierActions). */
td.actions { position: relative; }
.actions-plus { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 170px;
  padding: 6px; background: var(--papier); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre-haute, 0 12px 30px rgba(0,0,0,.18)); }
.actions-plus[hidden] { display: none; }
.actions-plus > button, .actions-plus > a { text-align: left; justify-content: flex-start; white-space: nowrap; }
.bouton-plus { min-width: 34px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 760px) { .page-objet, .page-objet .bois { width: 56px; height: 56px; } .page-titres h1 { font-size: 26px; } }
/* Le nom d'un lot ouvre sa fiche (les gestes du chai) : il se lit comme le nom, se souligne au survol. */
button.lien-lot { min-height: 0; font-weight: inherit; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); text-underline-offset: 3px; }
button.lien-lot:hover, button.lien-lot:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
/* L'en-tête passe en ligne souple : avec beaucoup de boutons (Équipe), la phrase garde sa largeur et les boutons passent dessous. */
#colonne #contenu > .entete.page-tete { display: flex; flex-wrap: wrap; align-items: center; }
.page-objet { flex: none; }
.page-titres { flex: 1 1 340px; }
.page-actions { flex: 0 1 auto; margin-left: auto; }
/* Dans l'aide, le nom d'un bouton entre guillemets est un lien vers le geste. */
button.lien.lien-aide { display: inline; min-height: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-texte, var(--accent)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Bulletin d'analyse à glisser au-dessus des lots : une bande, pas un grand cadre. */
.depot.depot-analyse { padding: 12px 18px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: center; }
.depot.depot-analyse strong { display: inline; margin: 0; font-size: 15px; }

/* Accueil en tuiles dépliables : l'encart, puis un bloc par sujet, replié sur son titre et une ligne qui le résume. */
.carte.tuile-accueil { margin: 0 0 14px; border-radius: 18px; padding: 20px 24px; }
.carte.tuile-accueil.repliee { padding-top: 14px; padding-bottom: 14px; }
.carte.tuile-accueil > h2:first-child { font: 600 21px/1.2 var(--titre); margin: 0 0 14px; }
.carte.tuile-accueil .grands-acces { margin-top: 4px; }
.encart + .carte.tuile-accueil { margin-top: 18px; }
@media (max-width: 700px) { .carte.tuile-accueil { padding: 16px; } }

/* ---------- menu de gauche : collé au bord, du haut jusqu'en bas de l'écran (sticky s'arrêtait parfois avant, selon le navigateur) ---------- */
@media (min-width: 961px) {
  #nav { position: fixed; left: 0; top: 0; bottom: 0; height: auto; }
  #colonne { margin-left: 256px; }
}

/* ---------- rubriques d'une page : des tuiles (anciens onglets) ----------
   Toutes les rubriques restent visibles en haut ; la tuile choisie s'ouvre en dessous, la toucher à nouveau la referme. */
.onglets.tuiles-onglets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; background: none; padding: 0; border: 0; border-radius: 0; margin: 0 0 18px; }
.onglets.tuiles-onglets button.tuile-onglet {
  display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: 10px 14px; text-align: left; border-radius: 16px;
  background: var(--carte); border: 1px solid var(--ligne); box-shadow: none; color: var(--texte); font: 500 15px/1.25 var(--police);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.onglets.tuiles-onglets button.tuile-onglet:hover { border-color: var(--accent, var(--ambre)); transform: translateY(-1px); }
.onglets.tuiles-onglets button.tuile-onglet.actif { border: 2px solid var(--accent, var(--ambre)); padding: 9px 13px; box-shadow: var(--ombre); font-weight: 600; background: var(--carte); color: var(--texte); }
.tuile-onglet img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.tuile-onglet span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tuile-onglet small { font-weight: 400; font-size: 13px; color: var(--doux); line-height: 1.3; }
.tuile-onglet::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(-45deg); }
.tuile-onglet.actif::after { transform: rotate(45deg) translate(-2px, -2px); }
.rubrique-repliee { display: none !important; }
@media (max-width: 640px) {
  .onglets.tuiles-onglets { grid-template-columns: 1fr 1fr; gap: 8px; }
  .onglets.tuiles-onglets button.tuile-onglet { min-height: 56px; padding: 8px 10px; gap: 8px; font-size: 14px; }
  .tuile-onglet img { width: 26px; height: 26px; }
  .tuile-onglet small { display: none; }
  .tuile-onglet::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .onglets.tuiles-onglets button.tuile-onglet { transition: none; } }

/* ---------- tournées : ordre proposé, villes traversées ---------- */
.ordre-tournee { margin: 10px 0 12px; padding-left: 22px; }
.ordre-tournee li { margin: 6px 0; }
.sur-la-route { list-style: none; padding: 0; margin: 8px 0 0; }
.sur-la-route li { padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; margin-bottom: 8px; background: var(--carte); line-height: 1.6; }
.trajet-salon { margin: 6px 0 10px; }

/* Échéances en retard : bandeau qui pulse en haut de chaque page, menu Calendrier et logo qui clignotent. */
#bandeau-retards { margin: 14px 28px 0; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--erreur, #b43a2f);
  background: var(--erreur-pale, #f8e3df); color: var(--texte); animation: retard-pulse 2.4s ease-in-out infinite; }
#bandeau-retards[hidden] { display: none; }
#bandeau-retards .retards-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#bandeau-retards .retards-tete a { margin-left: auto; }
.retards-signal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--erreur, #b43a2f);
  color: #fff; font-weight: 800; animation: retard-clignote 1.2s steps(2, jump-none) infinite; }
#bandeau-retards ul { list-style: none; margin: 8px 0 0; padding: 0; }
#bandeau-retards li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--erreur, #b43a2f) 18%, transparent); }
#nav [data-retards]:not([data-retards=""]) { position: relative; }
#nav .espace-nav.ouvert .espace-titre[data-retards]::after { display: none; }
#nav [data-retards]:not([data-retards=""])::after { content: attr(data-retards); position: absolute; right: 12px; top: 50%; translate: 0 -50%;
  min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; padding: 0 6px; background: var(--erreur, #b43a2f);
  color: #fff; font: 700 12px/1 var(--texte-police, inherit); animation: retard-clignote 1.2s steps(2, jump-none) infinite; }
body.en-retard .marque-logo { animation: retard-lueur 2.4s ease-in-out infinite; border-radius: 14px; }
@keyframes retard-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--erreur, #b43a2f) 22%, transparent); } }
@keyframes retard-clignote { 50% { opacity: .35; } }
@keyframes retard-lueur { 50% { box-shadow: 0 0 0 4px #e0574a, 0 0 22px 6px #e0574a; } }
@media (max-width: 960px) { #bandeau-retards { margin: 10px 12px 0; } }
#nav .espace-titre[data-retards]:not([data-retards=""])::after { right: 40px; }

/* Calendrier : une seule porte « Ajouter », qui demande quoi. */
.gros-ajout { font-size: 16px; padding: 12px 20px; }
.agenda-mois h2 { display: flex; align-items: center; gap: 12px; }
.agenda-mois .ajout-mois { margin-left: auto; font-size: 13px; }
.choix-ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 14px 0; }
.choix-ajout-tuile { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ligne);
  background: var(--carte, #fffaf2); cursor: pointer; }
.choix-ajout-tuile:hover, .choix-ajout-tuile:focus-visible { border-color: var(--accent, #b5462e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #b5462e) 18%, transparent); }
.choix-ajout-tuile .illu { width: 46px; height: 46px; flex: none; }
.choix-ajout-tuile span { display: flex; flex-direction: column; gap: 2px; }
.choix-ajout-tuile small { color: var(--doux); font-size: 13px; line-height: 1.3; }

/* ---------- Catalogue e-phy (ANSES) : recherche d'un produit de traitement dans la fiche et l'intervention ---------- */
.formulaire .case[hidden], .formulaire .champ[hidden] { display: none; }
.ephy { border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface); padding: 10px 12px; display: grid; gap: 8px; }
.ephy.occupe { opacity: .6; pointer-events: none; }
.ephy-vide p { margin: 4px 0 8px; }
.ephy-vide .barre-outils { margin-bottom: 4px; }
.ephy-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.ephy-resultats:empty { display: none; }
.ephy-resultats button { width: 100%; text-align: left; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 7px 10px; }
.ephy-resultats button .note { flex-basis: 100%; }
.ephy-resultats button:hover, .ephy-resultats button:focus-visible { background: var(--survol); }
.ephy-choix { border-left: 3px solid var(--vert); padding: 4px 0 4px 10px; display: grid; gap: 6px; }
.ephy-choix .ephy-usage { margin-top: 2px; }
.ephy-alertes .alerte { margin: 0; }
/* Lignes produit d'un passage (cuivre + soufre dans la même cuve) */
.lignes-produits { display: grid; gap: 12px; margin-bottom: 8px; }
.ligne-produit { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.ligne-produit legend { font-weight: 600; padding: 0 6px; }
.ligne-produit .ligne-retirer { min-height: 0; padding: 0 4px; margin-left: 6px; font-weight: 400; font-size: 13px; }
.produit-passage + .produit-passage { border-top: 1px dotted var(--ligne); margin-top: 3px; padding-top: 3px; }
.ephy-source button.lien { font-size: inherit; padding: 0 2px; text-decoration: underline; min-height: 0; }
.lignes-facture .lot-ligne { margin-top: 4px; font-size: .85em; padding: 4px 8px; }
/* « ＋ Ajouter une appellation… » tapée sur place, sous la liste */
.ajout-liste:not([hidden]) { display: flex; gap: 6px; margin-top: 6px }
.ajout-liste input { flex: 1; min-width: 0 }
.libelle-vers { display: block; font-size: 14px; color: var(--doux); margin-bottom: 3px }

/* ---------- Prospection (prospection.js) ---------- */
[data-page="prospection"] { --f: var(--c-ventes); }
.filtres-pro { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filtres-pro input[type=search] { flex: 1 1 220px; }
.colonnes-pro { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.colonne-pro { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px; min-width: 0; }
.colonne-pro h3 { margin: 0 0 10px; font-size: 14px; }
.carte-pro { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; margin-bottom: 8px; padding: 10px 12px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; color: var(--texte); cursor: pointer; }
.carte-pro:hover { background: var(--survol); }
.carte-pro.retard { border-left: 4px solid var(--rouge); }
.fiche-pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.fiche-pro p { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .fiche-pro { grid-template-columns: 1fr; } }
.historique-pro { list-style: none; padding: 0; margin: 0; max-height: 340px; overflow: auto; }
.historique-pro li { padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.choix-types { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.entonnoir-pro { display: grid; gap: 8px; }
.ligne-entonnoir { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; }
.ligne-entonnoir strong { text-align: right; }
.barre-pro { background: var(--piste); border-radius: 6px; height: 14px; overflow: hidden; }
.barre-pro > span { display: block; height: 100%; background: var(--f, var(--ambre)); border-radius: 6px; }

/* Prospection › Préparer un passage */
.passage-plan { position: relative; height: 240px; overflow: hidden; border-radius: 10px; background: #ece6dc; margin: 8px 0 12px; }
.passage-plan img { position: absolute; width: 256px; height: 256px; }
.passage-plan .pro-carte-source { position: absolute; bottom: 4px; right: 6px; font-size: 11px; background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: 4px; }
.pa-point { position: absolute; transform: translate(-50%, -50%); min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #c9bfb4; color: #fff; font: 600 11px/20px var(--police-texte, sans-serif); text-align: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pa-point.choisi { background: #b4572e; z-index: 2; }
.passage-liste { list-style: none; padding: 0; margin: 0; max-height: 46vh; overflow: auto; }
.passage-liste li { border-bottom: 1px solid var(--bord, #e5ddd3); padding: 8px 2px; }
.passage-liste label.case { display: flex; gap: 10px; align-items: flex-start; }
.pa-num { flex: 0 0 22px; height: 22px; border-radius: 11px; background: #efe8de; text-align: center; font-size: 12px; line-height: 22px; }
.pa-pourquoi { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; align-items: center; }
.passage-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 14px 0; }
.passage-actions button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; min-height: 86px; white-space: normal; }

/* Plusieurs choix dans un formulaire (ex. style des clients en prospection) */
.cases-choix { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0; }
.cases-choix .case { margin: 0; }