/* Fabrique : direction artistique du Veilleur de Bières (charte du site : écru, beige, marron, vert, orange, jaune ;
   Bree Serif pour les titres, Montserrat pour le texte ; filets marron, angles droits) par-dessus Pico, shell avec barre latérale.
   Pico garde la sémantique des formulaires ; ici : densité, couleurs, mise en page.
   Sélecteur plus spécifique que celui de Pico ([data-theme=light], :root:not([data-theme=dark])) pour que ses variables cèdent. */

html[data-theme="light"]:root {
  /* Charte du site (variables globales Elementor lv-*) */
  --lv-marron: #352819; --lv-vert: #213C31; --lv-orange: #DC7D26; --lv-jaune: #F8A91A; --lv-beige: #ECCC97; --lv-ecru: #FFFDF7;
  --font-title: "Bree Serif", Georgia, serif;

  /* Rôles */
  --bg: var(--lv-ecru);            /* cartes, champs */
  --page: #F7F0E2;                 /* fond de page, beige pâle */
  --surface-2: #F3E8D2;            /* en-têtes de tableaux, zones atténuées */
  --hover: #FAF3E6;
  --fg: var(--lv-marron); --muted: #EFE3CB; --muted-fg: #7A6650; --border: #E2D2B3; --rule: var(--lv-marron);
  --ring: var(--lv-orange);
  --primary: var(--lv-marron); --primary-fg: var(--lv-ecru); --accent: var(--lv-jaune);
  --ok: #2E6B3B; --ok-bg: #E3EEDB; --warn: #9A5310; --warn-bg: #FBE6CF; --info: var(--lv-vert); --info-bg: #DDE8E1;
  --danger: #A8331F; --danger-bg: #F7DED8;
  --sidebar-w: 15.5rem; --radius: 3px;

  --pico-font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pico-font-size: 14px; --pico-line-height: 1.5;
  --pico-spacing: .75rem; --pico-typography-spacing-vertical: .75rem; --pico-block-spacing-vertical: .75rem; --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: .45rem; --pico-form-element-spacing-horizontal: .7rem;
  --pico-border-radius: var(--radius); --pico-border-width: 1px; --pico-outline-width: 2px;
  --pico-background-color: var(--bg); --pico-color: var(--fg); --pico-muted-color: var(--muted-fg); --pico-muted-border-color: var(--border);
  --pico-h1-color: var(--fg); --pico-h2-color: var(--fg); --pico-h3-color: var(--fg);
  --pico-primary: var(--fg); --pico-primary-hover: var(--lv-vert); --pico-primary-underline: transparent; --pico-primary-hover-underline: currentColor;
  --pico-primary-background: var(--primary); --pico-primary-border: var(--primary); --pico-primary-inverse: var(--primary-fg);
  --pico-primary-hover-background: var(--lv-vert); --pico-primary-hover-border: var(--lv-vert); --pico-primary-focus: rgba(220, 125, 38, .25);
  --pico-secondary: var(--fg); --pico-secondary-background: var(--muted); --pico-secondary-border: var(--muted); --pico-secondary-inverse: var(--fg);
  --pico-secondary-hover: var(--fg); --pico-secondary-hover-background: #E7D6B5; --pico-secondary-hover-border: #E7D6B5; --pico-secondary-focus: rgba(220, 125, 38, .2);
  --pico-form-element-background-color: var(--bg); --pico-form-element-border-color: #D9C6A2; --pico-form-element-focus-color: rgba(220, 125, 38, .25);
  --pico-form-element-active-border-color: var(--lv-orange);
  --pico-card-background-color: var(--bg); --pico-card-sectioning-background-color: var(--surface-2); --pico-card-box-shadow: none;
  --pico-table-border-color: #EDE2CC; --pico-table-row-stripped-background-color: var(--hover);
  --pico-mark-background-color: var(--danger-bg); --pico-mark-color: var(--danger);
  --pico-transition: .12s ease-in-out;
}

body { background: var(--page); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; margin: 0; line-height: 1.1; }
h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1.05rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--lv-orange); }
/* Liens dans le texte courant : soulignés discrètement (orange) pour rester repérables */
.content p a:not([role="button"]), .content small a, article li a { text-decoration: underline; text-decoration-color: rgba(220, 125, 38, .55); text-underline-offset: 2px; }
small { color: var(--muted-fg); }
pre { font-size: .85em; background: var(--surface-2); }
code { background: var(--surface-2); color: var(--fg); }
::selection { background: var(--lv-jaune); color: var(--lv-marron); }

/* Surtitre du site : petites capitales espacées (libellés, sections, en-têtes de tableaux) */
.nav-section, .stat span, thead th, thead td { font-family: var(--pico-font-family); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }

/* ── Shell : barre latérale (vert sapin) + contenu ── */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--lv-vert); color: var(--lv-ecru); overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid rgba(255, 253, 247, .14); }
.brand .logo {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--lv-jaune); color: var(--lv-marron); font-size: 1.05rem;
}
.brand img { flex: none; max-height: 2.8rem; max-width: 3.4rem; object-fit: contain; transition: transform .35s; }
.brand:hover img { transform: rotate(-7deg) scale(1.06); }   /* clin d'œil au logo du site */
.brand strong { font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; line-height: 1.15; color: var(--lv-ecru); }
.sidebar nav { display: block; padding: .5rem .6rem 1rem; flex: 1; }
.nav-section { margin: 1rem .55rem .35rem; font-size: .64rem; color: rgba(236, 204, 151, .75); }
.sidebar nav a, .sidebar-foot a, .sidebar-foot button {
  display: flex; align-items: center; gap: .65rem; width: 100%; margin: 1px 0; padding: .42rem .6rem; border-radius: var(--radius);
  color: rgba(255, 253, 247, .84); font-size: .86rem; font-weight: 500; text-decoration: none; background: none; border: 0; text-align: left;
}
.sidebar nav a:hover, .sidebar-foot a:hover, .sidebar-foot button:hover { background: rgba(255, 253, 247, .08); color: var(--lv-ecru); text-decoration: none; }
.sidebar nav a[aria-current="page"] { background: rgba(248, 169, 26, .16); color: var(--lv-ecru); font-weight: 600; box-shadow: inset 3px 0 0 var(--lv-jaune); }
.sidebar [class^="icon-"] { font-size: 1rem; width: 1rem; color: rgba(236, 204, 151, .8); }
.sidebar a[aria-current="page"] [class^="icon-"] { color: var(--lv-jaune); }
.count {
  margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--lv-jaune); color: var(--lv-marron);
}
.sidebar-foot { padding: .5rem .6rem; border-top: 1px solid rgba(255, 253, 247, .14); }
.sidebar-foot form { margin: 0; }
.sidebar :focus-visible { outline-color: var(--lv-jaune); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; min-height: 3.6rem;
  padding: .6rem 1.5rem; background: rgba(255, 253, 247, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
}
.topbar h1::before { content: "✦"; margin-right: .5rem; font-size: .8em; color: var(--lv-orange); vertical-align: .08em; }
.content { padding: 1.4rem 1.5rem 3rem; max-width: 90rem; width: 100%; }
.menu-btn { display: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: .3rem; border-radius: var(--radius); }
#nav-toggle { display: none; }
/* Voile derrière le menu mobile ; .app > pour passer devant le display de Pico sur label */
.app > .backdrop { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(53, 40, 25, .4); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(18rem, 85vw); transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 2rem rgba(0, 0, 0, .2); }
  #nav-toggle:checked ~ .sidebar { transform: none; }
  .app > #nav-toggle:checked ~ .backdrop { display: block; }
  .menu-btn { display: block; }
  .content { padding: 1rem; }
  .topbar { padding: .5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .brand img { transition: none; } }

/* Page de connexion : carte écru sur fond vert */
body:has(.auth) { background: var(--lv-vert); }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth article { width: min(24rem, 100%); padding: 1.5rem; border-color: transparent; }
.auth h1 { margin-bottom: 1.2rem; font-size: 1.7rem; }
.auth h1::before { content: "✦ "; color: var(--lv-orange); font-size: .75em; }

/* ── Cartes ── */
article { margin: 0 0 1rem; padding: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; }
article > header {
  margin: -1rem -1rem 1rem; padding: .65rem 1rem; font-family: var(--font-title); font-weight: 400; font-size: 1.05rem;
  background: var(--bg); border-bottom: 1px solid var(--border); border-radius: 4px 4px 0 0;
}
article > header small, article > header strong { font-family: var(--pico-font-family); }
article > :last-child { margin-bottom: 0; }
.grid { gap: 1rem; }

/* Chiffres clés */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { margin: 0; padding: .9rem 1rem; }
.stat span { display: block; font-size: .64rem; color: var(--muted-fg); }
.stat strong { display: block; margin-top: .3rem; font-family: var(--font-title); font-size: 1.75rem; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.stat small { display: block; margin-top: .2rem; }
.stat.danger strong { color: var(--danger); }
.stat.ok strong { color: var(--ok); }

/* Graphiques */
.chart-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.chart-grid > article { margin: 0; grid-column: span 3; }
.chart-grid > .w-third { grid-column: span 2; }
.chart-grid > .w-two_thirds { grid-column: span 4; }
.chart-grid > .w-full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .chart-grid > .w-third, .chart-grid > .w-two_thirds { grid-column: span 3; } }
@media (max-width: 900px) { .chart-grid > article { grid-column: 1 / -1 !important; } }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem .75rem; font-weight: 400; }
.chart-head > span:first-child { flex: 1 1 14rem; min-width: 0; }   /* carte étroite : les boutons passent sous le titre */
.chart-head strong { font-family: var(--font-title); font-weight: 400; font-size: 1.1rem; }
.chart-head small { font-weight: 400; }
.chart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; white-space: nowrap; }
.chart-actions [role="button"] { padding: .2rem .6rem; font-size: .7rem; margin: 0; }
.chart-card details { margin-top: .75rem; }
.hero { margin: .5rem 0 .25rem; font-family: var(--font-title); font-size: 2.7rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.delta { margin: 0; font-weight: 600; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.delta small { font-weight: 400; }
.chart-actions form { display: inline; }
.chart-actions button { padding: .2rem .55rem; font-size: .7rem; margin: 0; }
.chart-builder { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.chart-builder > article { position: sticky; top: 4.4rem; }
@media (max-width: 900px) { .chart-builder { grid-template-columns: 1fr; } .chart-builder > article { position: static; } }

/* Tuiles de raccourcis (Paramètres) */
a.tile { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); text-decoration: none; }
a.tile:hover { border-color: var(--lv-marron); text-decoration: none; }
a.tile i { font-size: 1.2rem; color: var(--lv-orange); margin-top: .1rem; }
a.tile strong { display: block; font-family: var(--font-title); font-weight: 400; font-size: 1rem; }
a.tile small { display: block; font-size: .78rem; }

/* ── Tableaux denses ── (un tableau nu prend l'aspect carte ; dans .table-wrap ou une carte, c'est le conteneur qui encadre) */
table { margin-bottom: 1rem; font-size: .86rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-wrap table, article table { border: 0; border-radius: 0; }
article table { margin: 0 -1rem 1rem; width: calc(100% + 2rem); }
tbody tr:last-child td { border-bottom: 0; }
th, td { padding: .5rem .75rem; vertical-align: middle; }
thead th, thead td { font-size: .64rem; color: var(--fg); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:hover { background: var(--hover); }
tfoot td, tfoot th { font-weight: 700; background: var(--hover); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); margin-bottom: 1rem; }
.table-wrap table { margin: 0; }
.table-wrap tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; }

/* ── Badges de statut (étiquettes à angles droits, comme l'étiquette prix du site) ── */
.badge, mark {
  display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .45rem; border-radius: 2px;
  font-size: .72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--muted); color: var(--fg);
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.danger, mark { background: var(--danger-bg); color: var(--danger); }
/* Message seul dans un paragraphe (erreur, confirmation) : bandeau */
p:has(> mark:only-child) > mark {
  display: flex; width: 100%; padding: .6rem .9rem; border-radius: var(--radius); border: 1px solid #EDBFB4;
  font-size: .86rem; font-weight: 500; white-space: normal;
}

/* ── Boutons (marron plein, capitales espacées, angles droits), formulaires ── */
button, [role="button"], input[type="submit"] {
  font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .55rem 1rem; border-radius: 2px;
}
[role="group"] { width: auto; display: inline-flex; margin-bottom: 1rem; }
[role="group"] > * { border-radius: 0; }
label { font-size: .84rem; font-weight: 500; }
input:not([type="checkbox"], [type="radio"]), select, textarea { font-size: .86rem; border-radius: 2px; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--lv-marron); border-color: var(--lv-marron); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
form[role="search"] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
form[role="search"] > * { flex: 0 0 auto; width: auto; border-radius: 2px !important; }   /* Pico arrondit en pilule le 1er et le dernier élément */
form[role="search"] input[type="search"] { flex: 1 1 16rem; margin: 0; border-radius: 2px; }
form[role="search"] label { margin: 0; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
form[role="search"] button { margin: 0; border-radius: 2px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.toolbar > * { margin: 0; }
.toolbar .spacer { flex: 1; }
details summary { font-size: .86rem; }

/* Onglets (sous-navigation d'une page) */
.content > nav, .tabs {
  display: inline-flex; max-width: 100%; overflow-x: auto; margin-bottom: 1rem; padding: .2rem; border-radius: var(--radius); background: var(--muted);
}
.content > nav ul, .tabs ul { display: flex; gap: .15rem; margin: 0 !important; padding: 0; }
.content > nav li, .tabs li { padding: 0 !important; margin: 0; list-style: none; }
.content > nav a, .tabs a {
  display: block; margin: 0 !important; padding: .32rem .85rem; border-radius: 2px; font-size: .84rem; font-weight: 500; color: var(--muted-fg); text-decoration: none; white-space: nowrap;
}
.content > nav a[aria-current="page"], .tabs a[aria-current="page"] { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(53, 40, 25, .12); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Grille de prix : en-tête et première colonne figés, saisie compacte */
.price-grid { max-height: 70vh; overflow: auto; }
.price-grid table { border-collapse: separate; overflow: visible; } /* overflow:hidden casserait le sticky */
.price-grid thead th { position: sticky; top: 0; z-index: 2; }
.price-grid th:first-child, .price-grid td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 14rem; }
.price-grid thead th:first-child { z-index: 3; background: var(--surface-2); }
.price-grid td { padding: .25rem .4rem; }
.price-grid input { margin: 0; padding: .3rem .45rem; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.price-grid input:placeholder-shown { background: var(--hover); }
.price-grid tr[hidden] { display: none; }
.sticky-actions { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: .75rem; padding: .6rem 0; background: var(--page); border-top: 1px solid var(--rule); }
.sticky-actions > * { margin: 0; }

/* Planning des réservations : une colonne par jour, la période réservée en barre */
.planning { max-height: 60vh; overflow: auto; }
.planning table { table-layout: fixed; min-width: 64rem; overflow: visible; }
.planning th, .planning td { padding: .25rem .2rem; text-align: center; font-size: .75rem; border-left: 1px solid #F1E7D4; }
.planning thead th { position: sticky; top: 0; z-index: 2; line-height: 1.1; letter-spacing: .04em; }
.planning tbody th { position: sticky; left: 0; z-index: 1; width: 13rem; text-align: left; background: var(--bg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning thead th:first-child { left: 0; z-index: 3; width: 13rem; }
.planning .we { background: var(--hover); }
.planning thead .today { background: var(--lv-jaune); color: var(--lv-marron); }
.planning td.free a { display: block; height: 1.4rem; border-radius: 2px; }
.planning td.free a:hover { background: var(--muted); box-shadow: inset 0 0 0 1px var(--lv-marron); }
.planning td.bk a { display: block; padding: .15rem .4rem; border-radius: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; text-decoration: none; }
.planning td.booked a { background: var(--info-bg); color: var(--info); }
.planning td.out a { background: var(--warn-bg); color: var(--warn); }
.planning td.returned a { background: var(--muted); color: var(--muted-fg); }

@media (max-width: 900px) { .content table { display: block; overflow-x: auto; } }

@media print {
  .sidebar, .topbar, .menu-btn { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .content { padding: 0; }
}

/* Saisie dans une cellule de tableau (plan de production, statuts) */
td .cell-input { width: 7rem; margin: 0; padding: .2rem .45rem; height: auto; font-size: .85rem; text-align: right; }
td select.cell-input { width: auto; text-align: left; padding-right: 2rem; }

/* Planification : vue Gantt */
.gantt { overflow-x: auto; }
.gantt h3 { margin: 1.2rem 0 .3rem; font-size: .9rem; }
.gantt-row { display: grid; grid-template-columns: minmax(14rem, 22%) 1fr; min-width: 52rem; align-items: center; border-bottom: 1px solid var(--border); }
@media (max-width: 600px) { .gantt-row { grid-template-columns: 8rem 1fr; min-width: 40rem; } }
.gantt-label { padding: .25rem .5rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 1.9rem;
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / var(--weeks, 12) - 1px), var(--border) 0 calc(100% / var(--weeks, 12))); }
.gantt-head .gantt-track { height: 1.4rem; background: none; }
.gantt-head span { position: absolute; top: .2rem; padding-left: .25rem; font-size: .66rem; color: var(--muted-fg); }
.gantt-bar { position: absolute; top: .35rem; height: 1.2rem; padding: 0 .35rem; border-radius: 3px; font-size: .7rem; line-height: 1.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; background: var(--muted); color: var(--fg); border: 1px solid var(--border); z-index: 2; }
.gantt, .gantt-legend { --g-ok: #1FA35C; --g-warn: #F08A00; --g-danger: #E5342A; --g-info: #2A7FD4; --g-todo: #8A4FD8; }
.gantt-bar.ok, .gantt-dot.ok, .gantt-legend .ok { --g: var(--g-ok); }
.gantt-bar.warn, .gantt-dot.warn, .gantt-legend .warn { --g: var(--g-warn); }
.gantt-bar.danger, .gantt-dot.danger, .gantt-legend .danger { --g: var(--g-danger); }
.gantt-bar.info, .gantt-legend .info { --g: var(--g-info); }
.gantt-bar.todo, .gantt-legend .todo { --g: var(--g-todo); }
.gantt-bar[class*=" "] { background: var(--g); border-color: var(--g); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.gantt-bar[data-brew] { cursor: grab; user-select: none; touch-action: none; }
.gantt-bar[data-brew]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.gantt-bar.dragging { cursor: grabbing; opacity: .85; outline: 2px solid var(--fg); z-index: 3; }
.gantt-dot { background: var(--g); border-color: #fff !important; box-shadow: 0 0 0 1px var(--g); }
.gantt-dot { position: absolute; top: .55rem; width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%; border: 2px solid; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 1; }
.gantt-group > summary, .gantt-group[open] > summary { list-style: none; cursor: pointer; padding: 0; margin: 0; line-height: normal; }
.gantt-group > summary::-webkit-details-marker { display: none; }
.gantt-group > summary::after { display: none; }
.gantt-group > summary .gantt-label::before { content: '▸ '; color: var(--muted-fg); }
.gantt-group[open] > summary .gantt-label::before { content: '▾ '; }
.gantt-group > .gantt-row .gantt-label { padding-left: 1.6rem; }
.gantt-group { margin: 0; padding: 0; border: 0; }
.gantt-group[open] { background: var(--surface-2, transparent); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; }
.gantt-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.gantt-legend .gantt-bar { position: static; display: inline-block; width: 1.6rem; height: .8rem; padding: 0; }

/* Planification sur téléphone : onglets en barre fixe en bas d'écran, façon appli (.content > pour passer devant le style des onglets) */
.content > .bottom-bar { display: none; }
@media (max-width: 600px) {
  .tabs-desktop { display: none; }
  .content > .bottom-bar {
    display: flex; position: fixed; z-index: 10; inset: auto 0 0 0; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border-radius: 0; overflow: visible;
    background: var(--lv-vert); box-shadow: 0 -1px 6px rgba(0, 0, 0, .15);
  }
  .content > .bottom-bar a, .content > .bottom-bar a[aria-current="page"] {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 0 .4rem; border-radius: 0;
    background: none; box-shadow: none; font-size: .68rem; font-weight: 500; color: rgba(255, 253, 247, .7); white-space: nowrap;
  }
  .content > .bottom-bar i { font-size: 1.3rem; line-height: 1; }
  .content > .bottom-bar a[aria-current="page"] { color: var(--lv-jaune); font-weight: 700; }
  .content:has(> .bottom-bar) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* Tableaux sur téléphone : une fiche par ligne, 1re colonne en titre, les autres en cases « intitulé / valeur » (data-label posé par views.js) */
@media (max-width: 600px) {
  .content .table-wrap { overflow: visible; border: 0; background: none; }
  .content .table-wrap table, .content .table-wrap tbody { display: block; overflow: visible; background: none; }
  .content .table-wrap thead { display: none; }
  .content .table-wrap tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .35rem .75rem; margin-bottom: .6rem; padding: .6rem .75rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  }
  .content .table-wrap td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  .content .table-wrap td:first-child { grid-column: 1 / -1; font-weight: 600; font-size: .92rem; }
  .content .table-wrap td:not(:first-child)[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: flex; align-items: flex-end; min-height: 2.6em; margin-bottom: .1rem; /* 2 lignes réservées : valeurs alignées d'une case à l'autre */
    font-size: .62rem; line-height: 1.3; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg);
  }
  .content .table-wrap td:empty { display: none; }
  .content .table-wrap .cell-input { width: 100%; }
  .content .table-wrap .badge, .content .table-wrap .num { white-space: normal; }
}