/* ================================================================
   Charte « tonneau », palette « Fusion » (novembre 2026) : la forme propre à Douelle.
   - Les douelles : chaque bloc replié est une planche de chêne blond ; ouverte, elle montre sa face teintée par le vin.
   - Les rubriques d'une page sont des barriques debout ; l'étagère porte les gestes du jour ; les registres sont sur papier ; un tampon confirme chaque geste.
   - Une couleur par rôle : bleu de Prusse métallisé pour le menu, bleu de Prusse pour agir aussi (un ton plus clair que le menu), vert réservé à « c'est fait, c'est bon » et aux pictogrammes, lie-de-vin pour ce qui est ouvert ou actif,
     (charte V3) garance pour l'erreur, lie-de-vin pour l'encre du tampon et la cire, ocre safran pour ce qui demande l'attention, basalte pour le métal, prune pour le texte.
   Le mode sombre est l'atelier en noyer. Chargée après style.css : couleurs et habillage, aucun calcul ne change.
   Textures de bois : illustrations/bois/ ; barrique : illustrations/barrique/ (générées pour Douelle).
   ================================================================ */
:root, :root[data-theme="clair"] {
  --creme: #F2EEDF; --fer: #303C3B; --encre: #403541;
  --foret: #122B3F; --vert-action: #24557A; --vert-herbier: #5F7F96; --celadon: #B9C9D4;   /* noms hérités : ce sont désormais des bleus de Prusse */
  --lie: #702C40; --garance: #A34F43; --ocre: #C39A48;
  --ambre-marque: #B5561F; --ambre-marque-fonce: #8F3F16;
  --contrepoint: var(--lie); --contrepoint-pale: #F1DFE3;
  --vert-profond: var(--foret); --terre-cuite: var(--vert-action); --terre-cuite-fonce: #18364D; --bois: #E0C9A6;
  --fond: var(--creme); --carte: #FAF8F0; --papier: #FAF8F0; --surface: #E8E6D3; --survol: #ECE8D6; --champ: #FFFEFA;
  --texte: var(--encre); --doux: #675D6B; --ligne: #DCD7C3; --ligne-forte: #8E8A78;
  --accent: var(--vert-action); --accent-texte: var(--foret); --accent-pale: #DCE5EC; --sur-accent: #FFFFFF; --ligne-ambre: var(--celadon);
  --action: var(--vert-action); --sur-action: #FFFFFF; --action-survol: #18364D;
  --prusse: #18364D; --nav: var(--prusse); --nav-texte: #F2EEDF; --nav-doux: #B9C7D2; --nav-actif: rgba(255, 255, 255, .1); --nav-repere: var(--ocre);
  --avertissement: #403541; --avertissement-pale: #EAD9AE;
  --focus: var(--vert-action); --barre: rgba(242, 238, 223, .92); --pastille: #E6E1CE; --piste: #E2DDC9;
  --bois-face: url(illustrations/bois/chene.jpg); --bois-debout: url(illustrations/bois/chene-debout.jpg); --bois-tablette: url(illustrations/bois/noyer.jpg);
  --bois-voile: rgba(250, 246, 232, .5); --bois-texte: var(--encre); --bois-bouts: rgba(120, 90, 60, .3); --tablette-filtre: brightness(1.4) saturate(.6);
  --cercle-haut: #66726F; --cercle-bas: #303C3B; --rivet: #9AA5A2; --teinte: 112, 44, 64; --encre-tampon: var(--lie);
  --voile: rgba(16, 26, 36, .5); --c-douane: var(--prusse); --c-equipe: #5F7F96;
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --registre: "Courier Prime", "Courier New", ui-monospace, monospace;
}
/* l'atelier en noyer (mode sombre) : le bois est sombre, le métal du menu et des plaques reste bleu de Prusse */
:root[data-theme="cave"] {
  --fond: #241811; --carte: #31221A; --papier: #31221A; --surface: #3A291E; --survol: #402D20; --champ: #1F150F;
  --texte: #EFE8DC; --doux: #C2AE95; --ligne: #4A3627; --ligne-forte: #8A6F55;
  --accent: #9DBFD9; --accent-texte: #B5D0E4; --accent-pale: #1F3242; --sur-accent: #0F2233; --terre-cuite-fonce: #B5D0E4;
  --contrepoint: #E3A9B6; --contrepoint-pale: #42222B; --action: #9DBFD9; --sur-action: #0F2233; --action-survol: #B5D0E4;
  --nav: #1B3D57; --nav-texte: #F2EEDF; --nav-doux: #B9C7D2; --nav-actif: #31221A; --nav-repere: #D6B36A;
  --focus: #9DBFD9; --barre: rgba(36, 24, 17, .92); --ligne-ambre: #5A3526; --pastille: #402D20; --piste: #402D20; --avertissement: #F2C064; --avertissement-pale: #33270F; --encre-tampon: #E3A9B6; --tablette-filtre: none;
  --bois-face: url(illustrations/bois/noyer.jpg); --bois-voile: rgba(255, 240, 220, .06); --bois-texte: #F3EADC; --bois-bouts: rgba(0, 0, 0, .45);
  --cercle-haut: #5A5048; --cercle-bas: #14100D; --rivet: #7D746C; --c-douane: #B9CCDB; --c-equipe: #A9BFD0;
}

:root[data-theme="cave"] button.principal:hover { background: #A6C9B1; border-color: #A6C9B1; }

/* ---------- titres ---------- */
h1, .entete h1, .titre-section, #modale h2:first-child, .carte h2, .tuile-titre > span, .plus-gestes strong, .salut, .ga-texte strong, .titre-carte, .carte.tuile-accueil > h2:first-child, .page-titres h1 {
  font-family: var(--titre) !important; font-weight: 700; letter-spacing: -.02em; }
.salut { font-weight: 700; }
.salut::after { background: var(--accent); height: 4px; width: 56px; }
.carte.repliable > h2:first-child, .carte.tuile-accueil > h2:first-child { text-transform: none; letter-spacing: -.01em; font-size: 18px; }

/* ---------- contrepoint lie-de-vin : ce qui est actif, choisi, à toucher ---------- */
a, button.lien, .lien-fleche { color: var(--contrepoint); }
input[type=checkbox], input[type=radio] { accent-color: var(--contrepoint); }
.chiffre { color: var(--contrepoint); }
.entete h1::after { background: var(--contrepoint); }

/* ---------- menu de gauche : bleu de Prusse métallisé, repères ocre safran ---------- */
#nav { background: var(--nav); color: var(--nav-texte); box-shadow: inset -6px 0 0 var(--nav-repere); padding-right: 20px; }
#nav a[data-page], .espace-titre, #deconnexion { color: var(--nav-texte); }
#nav a[data-page]:hover, .espace-titre:hover, #deconnexion:hover { background: color-mix(in srgb, var(--nav-texte) 7%, transparent); color: var(--nav-texte); }
#nav a[data-page].actif, #nav a[data-page].actif:hover { background: var(--nav-actif); color: var(--nav-texte); box-shadow: inset 4px 0 0 var(--nav-repere); }
.espace-nav.courant > .espace-titre { color: var(--nav-repere); }
#nav .marque, .marque-nom strong { color: var(--nav-texte); }
.marque-nom em { color: var(--nav-doux); }
.marque-logo { background: var(--carte); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
#nav nav { scrollbar-color: color-mix(in srgb, var(--nav-texte) 25%, transparent) transparent; }
.espace-titre .chevron { border-color: var(--nav-doux); }
#toast { background: var(--fer); }

/* ---------- les douelles : un bloc replié est une planche de chêne ---------- */
.carte.repliable.repliee {
  border: 0; border-radius: 3px; color: var(--bois-texte);
  background:
    linear-gradient(90deg, var(--bois-bouts) 0, transparent 18px, transparent calc(100% - 18px), var(--bois-bouts) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, transparent 4px, transparent calc(100% - 5px), rgba(0, 0, 0, .18) 100%),
    linear-gradient(var(--bois-voile), var(--bois-voile)),
    var(--bois-face) center / cover;
  box-shadow: 0 3px 6px -3px rgba(40, 20, 5, .5);
  padding-left: 30px; padding-right: 30px;
}
.carte.repliable.repliee:nth-of-type(3n+1) { background-position: 0 0, 0 0, 0 0, 30% 20%; }
.carte.repliable.repliee:nth-of-type(3n+2) { background-position: 0 0, 0 0, 0 0, 70% 80%; }
.carte.repliable.repliee > h2:first-child, .carte.repliable.repliee .tuile-titre small { color: var(--bois-texte); text-shadow: 0 1px 0 rgba(255, 245, 225, .35); }
:root[data-theme="cave"] .carte.repliable.repliee > h2:first-child, :root[data-theme="cave"] .carte.repliable.repliee .tuile-titre small { text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.carte.repliable.repliee .tuile-titre small { opacity: .85; }
.carte.repliable.repliee > h2:first-child::after { border-color: currentColor; }
.carte.repliable.repliee:hover { filter: brightness(1.05); }
.carte.repliable.repliee + .carte.repliable { margin-top: -8px; }   /* empilées comme au chantier */
/* ouverte : la face intérieure, teintée par le vin */
.carte.repliable { position: relative; }
.carte.repliable:not(.repliee) { border-radius: 4px; border: 1px solid var(--ligne); padding-top: 0; }
.carte.repliable:not(.repliee) > h2:first-child {
  margin: 0 -18px 18px; padding: 14px 18px; border-radius: 3px 3px 0 0; color: #F3E7D3;
  background: linear-gradient(rgba(var(--teinte), .8), rgba(var(--teinte), .9)), var(--bois-face) center / cover; }
.carte.repliable:not(.repliee) > h2:first-child .tuile-titre span { color: #F3E7D3; }
.carte.repliable:not(.repliee) > h2:first-child::after { border-color: #F3E7D3; }
.carte.tuile-accueil:not(.repliee) > h2:first-child { margin: 0 -24px 18px; padding: 14px 24px; }
@media (max-width: 700px) {
  .carte.repliable:not(.repliee) > h2:first-child, .carte.tuile-accueil:not(.repliee) > h2:first-child { margin: 0 -16px 14px; padding: 12px 16px; }
  .carte.repliable.repliee { padding-left: 22px; padding-right: 22px; }
}
/* cercles de fer, rivetés, au début et à la fin de chaque pile de douelles */
.carte.repliable:not(.carte.repliable + .carte.repliable) { margin-top: 28px; }
.carte.repliable:not(:has(+ .carte.repliable)) { margin-bottom: 32px; }
.carte.repliable:not(.carte.repliable + .carte.repliable)::before,
.carte.repliable:not(:has(+ .carte.repliable))::after {
  content: ""; position: absolute; left: -6px; right: -6px; height: 10px; border-radius: 2px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 14px 50%, var(--rivet) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 14px) 50%, var(--rivet) 0 2px, transparent 2.5px),
    linear-gradient(180deg, var(--cercle-haut), var(--cercle-bas));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.carte.repliable:not(.carte.repliable + .carte.repliable)::before { top: -18px; }
.carte.repliable:not(:has(+ .carte.repliable))::after { bottom: -20px; }

/* ---------- rubriques : des barriques debout, dessinées d'après une vraie pièce (bouge, cercles en basalte) ; les deux cercles du ventre sont retirés pour y écrire le nom ---------- */
:root { --bq-l: 118px; --bq-h: calc(var(--bq-l) * 1.526);
  --galva: linear-gradient(90deg, var(--cercle-bas) 0, var(--cercle-haut) 22%, var(--cercle-bas) 46%, var(--cercle-haut) 66%, var(--cercle-bas) 100%); }
.onglets.tuiles-onglets {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 14px 4px 14px; margin: 0 0 18px; scrollbar-width: thin; grid-template-columns: none; }
.onglets.tuiles-onglets button.tuile-onglet, .onglets.tuiles-onglets button.tuile-onglet.actif {
  position: relative; flex: 0 0 calc(var(--bq-l) + 14px); max-width: none; min-height: 0; margin: 0; padding: 0 0 46px; height: calc(var(--bq-h) + 46px); border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; text-align: center;
  color: var(--encre); font: 600 13.5px/1.15 var(--police); clip-path: none; box-shadow: none;
  background: radial-gradient(ellipse 46% 9px at 50% calc(var(--bq-h) - 2px), rgba(30, 15, 5, .38), transparent) no-repeat;
  transition: transform .2s cubic-bezier(.25, .8, .25, 1); }
/* le fût : chêne, joints des douelles et volume, découpés à la forme */
.onglets.tuiles-onglets button.tuile-onglet::before, .onglets.tuiles-onglets button.tuile-onglet::after {
  content: ""; display: block; position: absolute; top: 0; left: 50%; width: var(--bq-l); height: var(--bq-h); margin-left: calc(var(--bq-l) / -2);
  border: 0; transform: none; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; pointer-events: none; }
.onglets.tuiles-onglets button.tuile-onglet::before { --m: url(illustrations/barrique/forme.svg);
  background: url(illustrations/barrique/relief.svg) center / 100% 100% no-repeat,
    linear-gradient(var(--bois-voile), var(--bois-voile)),
    var(--bois-debout) center / cover; }
.onglets.tuiles-onglets button.tuile-onglet:nth-child(2n)::before { background-position: center, center, 40% 70%; }
.onglets.tuiles-onglets button.tuile-onglet:nth-child(3n)::before { background-position: center, center, 80% 20%; }
/* les cercles en basalte, par-dessus */
.onglets.tuiles-onglets button.tuile-onglet::after { --m: url(illustrations/barrique/cercles.svg);
  background: url(illustrations/barrique/reflets.svg) center / 100% 100% no-repeat, var(--galva); }
.onglets.tuiles-onglets button.tuile-onglet:hover { transform: translateY(-4px); border: 0; }
.onglets.tuiles-onglets button.tuile-onglet.actif { transform: translateY(-8px); color: #F6EAD6; font-weight: 700; }
.onglets.tuiles-onglets button.tuile-onglet.actif::before {
  background: url(illustrations/barrique/relief.svg) center / 100% 100% no-repeat,
    linear-gradient(rgba(var(--teinte), .8), rgba(var(--teinte), .88)),
    var(--bois-debout) center / cover; }
.tuile-onglet img { position: relative; z-index: 1; width: 36px; height: 36px; margin: calc(var(--bq-h) * .262) 0 3px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.tuile-onglet span { position: relative; z-index: 1; align-items: center; width: calc(var(--bq-l) - 16px); text-wrap: balance; }
.tuile-onglet small { position: absolute; top: calc(var(--bq-h) * .715 - 44px + 8px); left: 50%; width: calc(var(--bq-l) + 10px); transform: translateX(-50%); font-size: 12px; line-height: 1.25; font-weight: 400; color: var(--doux); opacity: 1; }
.onglets.tuiles-onglets button.tuile-onglet:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  :root { --bq-l: 84px; }
  .onglets.tuiles-onglets button.tuile-onglet, .onglets.tuiles-onglets button.tuile-onglet.actif { font-size: 11px; height: calc(var(--bq-h) + 6px); padding-bottom: 6px; }
  .tuile-onglet img { width: 28px; height: 28px; margin: calc(var(--bq-h) * .27) 0 2px; }
  .tuile-onglet small { display: none; }
}

/* ---------- l'étagère : une tablette fine en noyer, montants effilés ---------- */
.grands-acces { position: relative; column-gap: 0; row-gap: 30px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; padding: 0 30px; }
.grands-acces::before, .grands-acces::after {
  content: ""; position: absolute; top: -6px; bottom: 6px; width: 18px; background: var(--bois-tablette) center / cover; z-index: 0; filter: var(--tablette-filtre);
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .5); }
.grands-acces::before { left: 6px; clip-path: polygon(35% 0, 100% 4%, 100% 100%, 0 100%); }
.grands-acces::after { right: 6px; clip-path: polygon(0 4%, 65% 0, 100% 100%, 0 100%); }
.grand-acces {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  background: none !important; border: 0; box-shadow: none !important; border-radius: 0; padding: 0 8px 4px; transform: none !important; }
.grand-acces::before {
  content: ""; position: absolute; left: 0; right: 0; top: 102px; height: 9px; z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 3px), var(--bois-tablette) center / cover; filter: var(--tablette-filtre);
  box-shadow: 0 9px 10px -7px rgba(0, 0, 0, .55); }
.ga-objet { height: 104px; position: relative; z-index: 1; display: flex; align-items: flex-end; }
.ga-objet .bois { width: 96px; height: 96px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .28)); transition: transform .25s cubic-bezier(.25, .8, .25, 1); }
.grand-acces:hover .ga-objet .bois { transform: translateY(-6px); }
.ga-texte { position: relative; z-index: 1; margin-top: 18px; display: grid; justify-items: center; gap: 4px; }
.ga-texte strong { display: block; font: 700 16px/1.2 var(--titre) !important; color: var(--texte); letter-spacing: -.01em; }
.grand-acces:hover .ga-texte strong { color: var(--contrepoint); }
.ga-texte small { font-size: 13.5px; max-width: 24ch; margin: 0; }
.ga-fleche { display: none; }
.grand-acces:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 1200px) { .grand-acces { grid-template-columns: none; grid-template-rows: none; } .ga-objet, .ga-objet .bois { width: auto; } .ga-objet .bois { width: 88px; height: 88px; } }
@media (max-width: 700px) {
  .grands-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; padding: 0 22px; }
  .grand-acces { padding: 0 4px; }
  .grand-acces::before { top: 76px; }
  .ga-objet { height: 78px; } .ga-objet .bois { width: 70px !important; height: 70px !important; }
  .ga-texte small { display: none; }
}

/* ---------- le registre : une feuille de cahier (lignes céladon, marge garance, trous de classeur) ---------- */
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * .tableau-wrap,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * .tableau-wrap,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap,
.registre-papier {
  --feuille: #FAF8F0; --ligne-bleue: #B9C9D4; --marge-rouge: #C98D84;
  color: var(--encre); border-radius: 2px; position: relative; padding: 26px 0 10px;
  background-color: var(--feuille);
  background-image:
    radial-gradient(circle at 22px 50%, var(--fond) 0 7px, rgba(0, 0, 0, .18) 7.5px, transparent 8.5px),
    linear-gradient(90deg, transparent 54px, var(--marge-rouge) 54px 55.5px, transparent 55.5px 58px, var(--marge-rouge) 58px 59.5px, transparent 59.5px);
  background-size: 44px 120px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 22px -16px rgba(0, 0, 0, .5); }
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * table,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * table,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * table,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * table,
.registre-papier table { font-family: var(--registre); font-size: 14.5px; color: #403541; }
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * :is(td, th),
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * :is(td, th),
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * :is(td, th),
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * :is(td, th),
.registre-papier :is(td, th) { border-bottom: 1px solid #B9C9D4; background: transparent !important; color: #403541; }
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * th,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * th,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * th,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * th,
.registre-papier th { color: #702C40 !important; font-weight: 700; border-bottom: 2px solid #B9C9D4; }
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * :is(td, th):first-child,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * :is(td, th):first-child,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * :is(td, th):first-child,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * :is(td, th):first-child,
.registre-papier :is(td, th):first-child { padding-left: 72px; }
.tuiles-onglets ~ * .tableau-wrap tr:hover td { background: rgba(184, 198, 177, .25) !important; }

/* ---------- le tampon : le tampon de bois descend, appuie, se relève, et laisse une vraie empreinte d'encre ---------- */
#suite { background: var(--carte); border: 1px solid var(--ligne-forte); border-radius: 6px; align-items: center; overflow: visible; }
.suite-tampon-zone { position: relative; flex: none; width: 150px; height: 84px; display: grid; place-items: center; }
.suite-tampon {
  display: grid; justify-items: center; gap: 1px; padding: 6px 10px 5px; color: var(--encre-tampon);
  border: 3px solid currentColor; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--carte), inset 0 0 0 3.5px currentColor;
  transform: rotate(-7deg); opacity: .88; filter: url(#encre-tampon); mix-blend-mode: multiply; }
:root[data-theme="cave"] .suite-tampon { mix-blend-mode: screen; }
.suite-tampon em { font: 700 9px/1 var(--registre); letter-spacing: .3em; text-transform: uppercase; font-style: normal; }
.suite-tampon b { font: 700 17px/1.05 var(--registre); letter-spacing: .08em; }
.suite-tampon small { font: 700 11px/1.1 var(--registre); letter-spacing: .02em; white-space: nowrap; }
.suite-tampon-objet { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -78px 0 0 -46px; object-fit: contain; z-index: 2; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
#suite.visible .suite-tampon-objet { animation: tampon-descend 1.15s cubic-bezier(.45, 0, .2, 1) both; }
#suite.visible .suite-tampon { animation: tampon-empreinte 1.15s linear both; }
@keyframes tampon-descend {
  0% { opacity: 0; transform: translateY(-46px) scale(1.15) rotate(-4deg); }
  15% { opacity: 1; }
  38% { opacity: 1; transform: translateY(10px) scale(.92) rotate(-6deg); }   /* il appuie */
  52% { opacity: 1; transform: translateY(8px) scale(.94) rotate(-6deg); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.1) rotate(-2deg); } }
@keyframes tampon-empreinte {
  0%, 37% { opacity: 0; transform: rotate(-7deg) scale(1.03); }
  40% { opacity: .95; transform: rotate(-7deg) scale(1.01); }
  100% { opacity: .88; transform: rotate(-7deg) scale(1); } }
#suite strong { font: 700 16px/1.3 var(--titre); color: var(--texte); }
#suite span { font-family: var(--registre); font-size: 13.5px; color: var(--texte); }
#suite span::before { background: var(--encre-tampon); }
#suite.visible span { animation-delay: calc(1s + var(--i) * .28s); }
@media (prefers-reduced-motion: reduce) { #suite.visible .suite-tampon, #suite.visible .suite-tampon-objet { animation: none; } .suite-tampon-objet { display: none; } .onglets.tuiles-onglets button.tuile-onglet { transition: none; } }
[data-capture] #suite .suite-tampon, [data-capture] #suite .suite-tampon-objet { animation: none; }
[data-capture] .suite-tampon-objet { display: none; }

/* ---------- trombones : là où un papier est attaché (la note après un geste, les feuilles de registre, la facture à déposer) ---------- */
:root { --trombone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 66'%3E%3Cpath d='M9 22V47a4 4 0 0 0 8 0V10a6.5 6.5 0 0 0-13 0V51a8.5 8.5 0 0 0 17 0V18' fill='none' stroke='%235E646B' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M9 22V47a4 4 0 0 0 8 0V10a6.5 6.5 0 0 0-13 0V51a8.5 8.5 0 0 0 17 0V18' fill='none' stroke='%23C9CED3' stroke-width='1' stroke-linecap='round' transform='translate(-.6 -.6)'/%3E%3C/svg%3E"); }
#suite::before, .depot::before,
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap::before,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * .tableau-wrap::before,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * .tableau-wrap::before,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap::before,
.registre-papier::before {
  content: ""; position: absolute; width: 20px; height: 52px; background: var(--trombone) center / contain no-repeat; pointer-events: none; z-index: 3;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .25)); }
#suite::before { top: -22px; left: 26px; transform: rotate(-6deg); }
.depot { position: relative; }
.depot::before { top: -20px; right: 34px; transform: rotate(8deg); }
.tuiles-onglets ~ * .tableau-wrap::before, .registre-papier::before { top: -8px; left: 84px; transform: rotate(-4deg); }

/* ================================================================ Objets de cave : un objet par rôle, seulement là où il dit quelque chose de vrai.
   Tableaux, champs et boutons restent sobres. */

/* chiffres clés : écrits au fer sur un fond de barrique (planches debout, jable sombre, cercle de fer) */
.indicateurs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 16px; }
.indicateurs > div { position: relative; border: 0; padding: 40px 6px 0; display: grid; justify-items: center; align-content: start; text-align: center; gap: 2px; min-height: 196px; isolation: isolate; }
.indicateurs > div::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 148px; height: 148px; margin-left: -74px; border-radius: 50%; z-index: -1;
  background:
    radial-gradient(circle, transparent 58%, rgba(60, 35, 15, .38) 72%, rgba(40, 22, 8, .6) 100%),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(60, 35, 15, .38) 27px 28px),
    linear-gradient(rgba(255, 248, 235, .1), rgba(255, 248, 235, .1)),
    var(--bois-debout) center / cover;
  border: 6px solid var(--fer); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.indicateurs dt { font: 600 12.5px/1.2 var(--police); color: #3B2414; max-width: 110px; }
.indicateurs dd { color: #3B2414; font-size: 14px; }
.indicateurs .chiffre { font: 700 27px/1.1 var(--titre); color: #3B2414 !important; text-shadow: 0 0 1px rgba(59, 36, 20, .5); }
.indicateurs .perimetre { color: var(--doux) !important; font-size: 13px; margin-top: 62px; max-width: 22ch; }

/* pastilles et alertes : à la craie, sur une ardoise (dans les tableaux, elles restent sobres) */
.pastille {
  background: #303C3B; color: #F2F0EA; border-radius: 3px; font: 600 17px/1.15 "Caveat", "Bradley Hand", cursive; padding: 1px 10px 2px; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .25); text-shadow: 0 0 1px rgba(242, 240, 234, .45); }
.pastille.vert { background: #303C3B; color: #BFE3B4; }
.pastille.rouge { background: #303C3B; color: #F5A79B; }
.pastille.ambre { background: #303C3B; color: #F3D58A; }
.pastille.bleu { background: #303C3B; color: #A9D0EE; }
:is(td, th) .pastille { font: 600 13px/1.5 var(--police); padding: 2px 10px; text-shadow: none; box-shadow: none; border-radius: 20px; background: var(--pastille); color: var(--doux); }
:is(td, th) .pastille.vert { background: var(--confirmation-pale); color: var(--confirmation); }
:is(td, th) .pastille.rouge { background: var(--erreur-pale); color: var(--erreur); }
:is(td, th) .pastille.ambre { background: var(--avertissement-pale); color: var(--avertissement); }
:is(td, th) .pastille.bleu { background: var(--info-pale); color: var(--info); }
#nav [data-retards]:not([data-retards=""])::after { background: var(--erreur) !important; color: #FFFFFF !important; font: 700 12px/1 var(--police) !important; border-radius: 3px !important; }

/* fenêtres de saisie : une caisse de vin en bois, clouée, le titre pyrogravé */
#modale {
  border: 18px solid transparent; border-radius: 6px;
  background:
    linear-gradient(var(--carte), var(--carte)) padding-box,
    radial-gradient(circle at 7px 7px, #6B6F74 0 2.5px, transparent 3px) border-box,
    radial-gradient(circle at calc(100% - 7px) 7px, #6B6F74 0 2.5px, transparent 3px) border-box,
    radial-gradient(circle at 7px calc(100% - 7px), #6B6F74 0 2.5px, transparent 3px) border-box,
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #6B6F74 0 2.5px, transparent 3px) border-box,
    linear-gradient(rgba(255, 248, 235, .08), rgba(255, 248, 235, .08)) border-box,
    url(illustrations/bois/chene.jpg) border-box center / cover;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .12); }
#modale h2:first-child { font: 700 28px/1.1 var(--titre) !important; color: #4A2A14; text-shadow: 0 0 1px rgba(74, 42, 20, .55), 0 1px 0 rgba(255, 255, 255, .3); letter-spacing: -.01em; }
:root[data-theme="cave"] #modale h2:first-child { color: #E8B887; text-shadow: none; }
.modale-pied { background: var(--carte); }

/* jauges de remplissage : le tube de niveau d'une cuve */
.jauge { height: 14px; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(220, 228, 232, .45) 45%, rgba(255, 255, 255, .7)); border: 1.5px solid #8B9296; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); overflow: hidden; position: relative; }
.jauge > div { background: linear-gradient(180deg, #96485C, #702C40 60%, #55202F); border-radius: 0 3px 3px 0; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .35); }
.jauge::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .6); pointer-events: none; }


/* ---------- bouton principal : une plaque gravée bleu de Prusse, vissée ---------- */
button.principal, .bouton.principal {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 45%, rgba(0, 0, 0, .16)), var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #000);
  border-radius: 5px; letter-spacing: .02em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 0 rgba(0, 0, 0, .28), 0 6px 10px -5px rgba(0, 0, 0, .4); }
button.principal:hover, .bouton.principal:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 45%, rgba(0, 0, 0, .16)), var(--terre-cuite-fonce); border-color: var(--terre-cuite-fonce); }
button.principal:active, .bouton.principal:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 0 rgba(0, 0, 0, .28); }
#bouton-nouveau { position: relative; padding-left: 30px; padding-right: 30px; font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
#bouton-nouveau::before, #bouton-nouveau::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(0, 0, 0, .45) 70%); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .4); }
#bouton-nouveau::before { left: 10px; } #bouton-nouveau::after { right: 10px; }

/* ---------- alertes : pastille ocre pleine, texte prune (l'ocre seul ne se lit pas sur le fond) ---------- */
.alerte { background: var(--avertissement-pale); border: 1px solid var(--ocre, #C39A48); border-left: 6px solid var(--ocre, #C39A48); color: var(--texte); }
:is(td, th) .pastille.ambre { background: var(--ocre, #C39A48); color: #403541; }
:root[data-theme="cave"] :is(td, th) .pastille.ambre { background: var(--avertissement-pale); color: var(--avertissement); }
.tuile-titre small, .carte.repliable .tuile-titre small { font-family: var(--police); font-weight: 400; letter-spacing: 0; }

/* ---------- le menu : une grande plaque gravée, vissée aux quatre coins ---------- */
#nav {
  --plaque: var(--nav);
  background:
    radial-gradient(circle at 11px 11px, rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 13px) 11px, rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    radial-gradient(circle at 11px calc(100% - 11px), rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 11px), rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 14%, transparent 82%, rgba(0, 0, 0, .25)),
    linear-gradient(100deg, color-mix(in srgb, var(--plaque) 78%, #9FC0D8), var(--plaque) 34%, color-mix(in srgb, var(--plaque) 82%, #000) 58%, color-mix(in srgb, var(--plaque) 80%, #9FC0D8) 82%, var(--plaque));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 2.5px rgba(255, 255, 255, .16), inset -5px 0 0 -1px rgba(0, 0, 0, .25), 5px 0 12px -5px rgba(0, 0, 0, .45);
  padding-right: 14px; }
#nav a[data-page], .espace-titre, #deconnexion, #nav .marque, .marque-nom strong { text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); }
#nav a[data-page].actif, #nav a[data-page].actif:hover { background: rgba(0, 0, 0, .22); box-shadow: inset 4px 0 0 var(--nav-repere), inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .1); }

/* ---------- chiffres d'une page : des plaques gravées, du même métal que le menu ---------- */
.kpi {
  position: relative; border: 0; border-radius: 5px; padding-left: 30px; padding-right: 30px; color: #F4F0E2;
  background:
    radial-gradient(circle at 13px 50%, rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 13px) 50%, rgba(255, 255, 255, .65) 0 1px, rgba(0, 0, 0, .5) 1.5px 3.5px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 40%, rgba(0, 0, 0, .2)),
    linear-gradient(100deg, color-mix(in srgb, var(--nav) 78%, #9FC0D8), var(--nav) 40%, color-mix(in srgb, var(--nav) 84%, #000) 68%, color-mix(in srgb, var(--nav) 82%, #9FC0D8));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2.5px rgba(255, 255, 255, .18), 0 2px 0 rgba(0, 0, 0, .28), 0 8px 12px -6px rgba(0, 0, 0, .4); }
.kpi::before, .kpi::after { display: none; }
.kpi, .kpi * { color: #F4F0E2 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); }
.kpi small, .kpi .perimetre { opacity: .85; }

/* ---------- tuiles qui mènent quelque part : des douelles ---------- */
a.module, button.plus-gestes {
  border: 0; border-radius: 3px; color: var(--bois-texte);
  background:
    linear-gradient(90deg, var(--bois-bouts) 0, transparent 18px, transparent calc(100% - 18px), var(--bois-bouts) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, transparent 4px, transparent calc(100% - 5px), rgba(0, 0, 0, .18) 100%),
    linear-gradient(var(--bois-voile), var(--bois-voile)),
    var(--bois-face) center / cover;
  box-shadow: 0 3px 6px -3px rgba(40, 20, 5, .5); }
a.module:nth-child(3n+1) { background-position: 0 0, 0 0, 0 0, 30% 20%; }
a.module:nth-child(3n+2) { background-position: 0 0, 0 0, 0 0, 70% 80%; }
a.module:hover, button.plus-gestes:hover { filter: brightness(1.05); border: 0; }
a.module *, button.plus-gestes * { color: var(--bois-texte) !important; }

/* ---------- typographie : les empattements pour les grands titres seulement ; les petits titres restent sans empattement, plus lisibles ---------- */
h1, .entete h1, .page-titres h1, .salut, .titre-section, .carte h2, .titre-carte, #modale h2:first-child { font-weight: 600 !important; letter-spacing: -.01em; }
.carte.repliable > h2:first-child, .carte.tuile-accueil > h2:first-child, .tuile-titre > span, .ga-texte strong, .plus-gestes strong, #suite strong {
  font-family: var(--police) !important; font-weight: 600 !important; letter-spacing: 0; }
.carte.repliable > h2:first-child, .carte.tuile-accueil > h2:first-child { font-size: 17px; }

/* ---------- la bonde : une case oui/non. Enfoncée et teintée lie-de-vin quand c'est oui ---------- */
.case > input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px; height: 26px; min-height: 0; margin: 0; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(rgba(255, 248, 235, .08), rgba(255, 248, 235, .08)), var(--bois-face) center / cover;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .4); transition: box-shadow .18s; }
.case > input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .35) 0 1.6px, transparent 2.4px), radial-gradient(circle at 38% 30%, #fff 0, #EFE6D6 30%, #B9AA90 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5); transition: left .18s cubic-bezier(.25, .8, .25, 1); }
.case > input[type=checkbox]:checked { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 26px rgba(var(--teinte), .78); }
.case > input[type=checkbox]:checked::after { left: 22px; }
.case > input[type=checkbox]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.case > input[type=checkbox]:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .case > input[type=checkbox], .case > input[type=checkbox]::after { transition: none; } }

/* ---------- l'étiquette : la fiche d'un vin, présentée comme sa bouteille ---------- */
.etiquette-vin {
  width: max-content; max-width: 100%; min-width: 240px; margin: 4px auto 18px; padding: 18px 26px 16px; text-align: center; display: grid; gap: 5px;
  background: #FAF8F0; color: #2A2330; border-radius: 2px; outline: 1px solid var(--lie, #702C40); outline-offset: -7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 18px -10px rgba(0, 0, 0, .5); }
.etiquette-vin em { font: 700 10px/1 var(--registre); letter-spacing: .28em; text-transform: uppercase; font-style: normal; color: var(--lie, #702C40); }
.etiquette-vin h2, #modale .etiquette-vin h2 { font: 600 30px/1.05 var(--titre) !important; color: #2A2330; margin: 2px 0 0; text-shadow: none; letter-spacing: -.01em; }
.etiquette-vin hr { width: 40px; border: 0; border-top: 1.5px solid var(--lie, #702C40); margin: 4px auto; }
.etiquette-vin span { font: 400 13px/1.35 var(--registre); }

/* ---------- le cachet de cire : ce qui ne se modifie plus (déclaration déposée) ---------- */
.etats-declaration li.etat-fait:last-child { position: relative; padding-right: 76px; }
.etats-declaration li.etat-fait:last-child::after {
  content: "D"; position: absolute; right: 12px; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center;
  font: 700 22px/1 var(--titre); color: rgba(0, 0, 0, .4); text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
  border-radius: 47% 53% 50% 50% / 52% 48% 54% 46%; transform: rotate(-8deg);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .4), transparent 38%), radial-gradient(circle, transparent 52%, rgba(0, 0, 0, .28) 54%, transparent 62%), var(--garance, #A34F43);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .35), 0 4px 6px -2px rgba(0, 0, 0, .5); }

/* ---------- entrées du menu : pas de pastille arrondie ni de barre d'accent. La page ouverte est une douelle posée sur la plaque ;
   chaque pictogramme tient dans une tête de bonde ronde. ---------- */
#nav a[data-page], .espace-titre, #deconnexion { border-radius: 2px; }
#nav a[data-page]:hover, .espace-titre:hover, #deconnexion:hover { background: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22), inset 0 1px 0 rgba(0, 0, 0, .3); }
#nav a[data-page].actif, #nav a[data-page].actif:hover {
  color: var(--bois-texte); text-shadow: 0 1px 0 rgba(255, 245, 225, .4); font-weight: 600; border-radius: 2px;
  background:
    linear-gradient(90deg, var(--bois-bouts) 0, transparent 14px, transparent calc(100% - 14px), var(--bois-bouts) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .25) 0, transparent 3px, transparent calc(100% - 4px), rgba(0, 0, 0, .2) 100%),
    linear-gradient(var(--bois-voile), var(--bois-voile)),
    var(--bois-face) center / cover;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25); }
.nav-icone, .espace-modules .nav-icone {
  border-radius: 50%; background: radial-gradient(circle at 38% 30%, #FFFFFF 0, #F2EEDF 45%, #D3C9B0 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14), inset 0 -2px 3px rgba(0, 0, 0, .12); }
#nav a[data-page].actif .nav-icone { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .14); }

/* ---------- plus de vert hors pictogrammes : le vert ne dit plus que « c'est fait, c'est bon » ---------- */
.lieu-dit { fill: var(--foret); }
.ee-progression i, button.puce.actif { background: var(--accent); }
button.puce.actif { color: var(--sur-accent); }
.ee-surtitre { color: var(--accent-texte); }
.ee-depot:hover { border-color: var(--accent); }
.ee-energie > div { background: var(--accent-pale); }


/* ================================================================
   Charte V3 (10 novembre 2026) · fondations. « La couleur métier ne ment jamais. »
   Navigation = Prusse ; action = bleu d'action ; sélection = lie-de-vin ; réussite = vert ; attention = ocre ; erreur = garance.
   Garance n'est plus l'encre de « c'est fait » : le tampon et le cachet passent en lie-de-vin (cire/encre = étape officielle).
   Le logo, les objets en bois et les pictogrammes V3 viendront avec leurs fichiers.
   ================================================================ */
:root, :root[data-theme="clair"] {
  --color-prusse: #18364D; --color-action: #24557A; --color-lie: #702C40; --color-chene: #C9A46C; --color-velin: #F2EEDF; --color-ivoire: #FAF8F0;
  --color-noyer: #241811; --color-basalte: #303C3B; --laiton: #B08A56;
  --status-success: var(--confirmation); --status-warning: var(--ocre); --status-error: var(--erreur);
  --space-unit: 4px; --touch-target-min: 44px; --object-elevation: 1; --document-elevation: 0;
  --erreur: #A34F43; --erreur-pale: #F5E2DE; --rouge: var(--erreur); --rouge-pale: var(--erreur-pale);
  --ardoise: #E8E6D3; }
:root[data-theme="cave"] { --laiton: #C9A46C; --ardoise: #3A291E; --erreur: #F0A497; --erreur-pale: #3A1D1A; --rouge: var(--erreur); --rouge-pale: var(--erreur-pale); }


/* ardoise : un état temporaire, écrit en clair (plus de craie Caveat : hors système fonctionnel) */
.pastille, .pastille.vert, .pastille.rouge, .pastille.ambre, .pastille.bleu {
  background: var(--ardoise); color: var(--texte); border-radius: 3px; font: 600 13px/1.4 var(--police); padding: 2px 9px; letter-spacing: 0;
  text-shadow: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 12%, transparent); }
.pastille.vert { color: var(--confirmation); }
.pastille.rouge { background: var(--erreur-pale); color: var(--erreur); }
.pastille.ambre { background: var(--ocre); color: #403541; }
.pastille.bleu { background: var(--accent-pale); color: var(--accent-texte); }
:root[data-theme="cave"] .pastille.ambre { background: var(--avertissement-pale); color: var(--avertissement); }

/* registre : la feuille reste, le tableau reste un vrai tableau (Instrument Sans, chiffres tabulaires) ;
   Courier Prime seulement pour les en-têtes et la première colonne (dates, pièces, numéros) */
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap table,
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * .tableau-wrap table,
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * .tableau-wrap table,
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap table,
.registre-papier table { font-family: var(--police) !important; font-size: 14px; font-variant-numeric: tabular-nums; }
.tuiles-onglets[data-cle="chai"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap :is(th, td:first-child),
.tuiles-onglets[data-cle="vigne"]:has(.actif[data-onglet="interventions"]) ~ * .tableau-wrap :is(th, td:first-child),
.tuiles-onglets[data-cle="douane"]:has(.actif[data-onglet="drm"]) ~ * .tableau-wrap :is(th, td:first-child),
.tuiles-onglets[data-cle="equipe"]:has(.actif[data-onglet="registre"]) ~ * .tableau-wrap :is(th, td:first-child),
.registre-papier :is(th, td:first-child) { font-family: var(--registre) !important; }

/* douelle repliée : quatre clous de laiton ; ouverte : un liseré de laiton dans la face teintée */
.carte.repliable.repliee {
  background:
    radial-gradient(circle at 10px 9px, var(--laiton) 0 1.6px, rgba(0, 0, 0, .35) 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 10px) 9px, var(--laiton) 0 1.6px, rgba(0, 0, 0, .35) 2.2px, transparent 2.8px),
    radial-gradient(circle at 10px calc(100% - 9px), var(--laiton) 0 1.6px, rgba(0, 0, 0, .35) 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 9px), var(--laiton) 0 1.6px, rgba(0, 0, 0, .35) 2.2px, transparent 2.8px),
    linear-gradient(90deg, var(--bois-bouts) 0, transparent 18px, transparent calc(100% - 18px), var(--bois-bouts) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, transparent 4px, transparent calc(100% - 5px), rgba(0, 0, 0, .18) 100%),
    linear-gradient(var(--bois-voile), var(--bois-voile)),
    var(--bois-face) center / cover; }
.carte.repliable.repliee:nth-of-type(3n+1) { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 30% 20%; }
.carte.repliable.repliee:nth-of-type(3n+2) { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 70% 80%; }
.carte.repliable:not(.repliee) > h2:first-child { box-shadow: inset 0 0 0 5px rgba(var(--teinte), 0), inset 0 0 0 6px color-mix(in srgb, var(--laiton) 75%, transparent); }

/* boutons : principal (plaque), secondaire (net, bordé Prusse), tertiaire (lien lie-de-vin souligné) ; état occupé */
button.lien { color: var(--contrepoint); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button[aria-busy="true"], .bouton[aria-busy="true"] { cursor: progress; opacity: .75; }
button.principal[aria-busy="true"]::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: occupe .8s linear infinite; }
@keyframes occupe { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.principal[aria-busy="true"]::after { animation: none; } }

/* « Tout suit » : chaque conséquence dit son état réel. Vert = fait ; ocre = reste à faire ailleurs (jamais « tout est fait » si une déclaration reste à déposer). */
#suite span { padding-left: 18px; }
#suite span::before { width: 9px; height: 9px; top: .45em; border-radius: 50%; background: var(--confirmation) !important; }
#suite span.suite-attente::before { background: var(--ocre) !important; }
#suite span.suite-attente em { font-style: normal; font-family: var(--police); font-size: 12px; font-weight: 600; color: var(--texte); background: color-mix(in srgb, var(--ocre) 35%, transparent); border-radius: 3px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
#suite span { font-family: var(--police); font-size: 14px; }

/* Pictogrammes V3 sans contour : sur la barre lie-de-vin d'une douelle ouverte, un liseré ivoire les détache. */
.tuile-picto { filter: drop-shadow(0 0 1px #FAF8F0) drop-shadow(0 0 1px #FAF8F0) drop-shadow(0 0 .5px #FAF8F0); }

/* Logo Rupture (charte V3) : la douelle Prusse a besoin d'une plaque ivoire, y compris en thème sombre. */
.marque-logo, .hero-logo { background: #FAF8F0 !important; }

/* Alerte de lessivage : le pictogramme météo-alerte à la place de l'icône au trait. */
.pastille .illu.pastille-picto { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }

/* Relier le téléphone (boîte aux lettres) : la proposition de l'accueil et la fenêtre au grand QR code (accueil.js, relierTelephone). */
.bandeau-telephone { display: flex; gap: 18px; align-items: center; background: var(--carte); border: 1.5px solid var(--action); border-left-width: 6px;
  border-radius: 16px; padding: 14px 20px; margin-bottom: 16px; box-shadow: var(--ombre); }
.bandeau-telephone > img, .bandeau-telephone > .objet-bois { flex: none; width: 84px; height: auto; }
.bandeau-telephone strong { font: 600 21px/1.2 var(--titre); }
.bandeau-telephone p { margin: 4px 0 10px; }
.bandeau-telephone-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.relier-tel { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.relier-tel img { width: 220px; height: 220px; border-radius: 14px; background: #fff; padding: 8px; border: 1px solid var(--ligne); }
.relier-tel ol { list-style: none; padding: 0; margin: 0; flex: 1 1 280px; display: grid; gap: 12px; }
.relier-tel li { display: flex; gap: 12px; align-items: flex-start; }
.relier-tel li b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--prusse); color: #fff; display: grid; place-items: center; }
.relier-attente { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--action); border-right-color: transparent;
  vertical-align: -1px; animation: relier-tourne 1s linear infinite; }
@keyframes relier-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .relier-attente { animation: none; } }
@media (max-width: 640px) { .bandeau-telephone { flex-direction: column; align-items: flex-start; } }