/* ===== Keydey Brand Theme ===== */

/* Masquer la scrollbar de la sidebar principale */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Light mode */
html {
  /* Primary brand color: Keydey blue */
  --lumo-primary-color:              #1a73e8;
  --lumo-primary-color-50pct:        rgba(26, 115, 232, 0.5);
  --lumo-primary-color-10pct:        rgba(26, 115, 232, 0.1);
  --lumo-primary-text-color:         #1a73e8;
  --lumo-primary-contrast-color:     #ffffff;

  /* Accent (links, focus rings) */
  --lumo-link-color:                 #1a73e8;

  /* Drawer palette */
  --kd-drawer-bg:                    #0f2b4a;
  --kd-drawer-bg-accent:             #12365d;
  --kd-drawer-text:                  #e9f1fb;

  /* Menu latéral : survol et module ouvert (bloc « Menu latéral » plus bas).
     Le tiroir reste bleu nuit dans les deux thèmes : ces couleurs sont
     pensées pour lui, pas pour le fond de page. */
  --kd-nav-text:                     rgba(233, 241, 251, 0.80);  /* un cran sous le blanc, pour que le survol « s'allume » */
  --kd-nav-text-strong:              #ffffff;
  --kd-nav-chevron:                  rgba(233, 241, 251, 0.55);
  --kd-nav-hover-from:               rgba(30, 85, 160, 0.24);    /* bleu foncé, proche du tiroir */
  --kd-nav-hover-mid:                rgba(14, 130, 160, 0.36);   /* bleu pétrole */
  --kd-nav-hover-to:                 rgba(70, 215, 225, 0.24);   /* turquoise léger, en accent */
  --kd-nav-active-bg:                rgba(96, 165, 240, 0.16);   /* bleu plus clair, distinct du pétrole du survol */
  --kd-nav-accent:                   #3fd2dc;                    /* barre du module ouvert */
  --kd-nav-focus:                    rgba(63, 210, 220, 0.75);

  /* Survol d'une ligne de grille. Definie ici, consommee dans
     components/vaadin-grid.css : une variable traverse le shadow DOM. */
  --kd-row-hover:                    rgba(26, 115, 232, 0.10);

  /* Error / Success keep defaults */
}

/* Dark mode */
html[theme~="dark"] {
  --lumo-primary-color:              #4fc3f7;
  --lumo-primary-color-50pct:        rgba(79, 195, 247, 0.5);
  --lumo-primary-color-10pct:        rgba(79, 195, 247, 0.1);
  --lumo-primary-text-color:         #4fc3f7;
  --lumo-primary-contrast-color:     #0d1117;
  --lumo-link-color:                 #4fc3f7;

  /* Soften the dark background slightly */
  --lumo-base-color:                 #0f1117;
  --lumo-shade:                      #1c1f26;

  /* Drawer palette in dark mode */
  --kd-drawer-bg:                    #0d1f36;
  --kd-drawer-bg-accent:             #12304f;
  --kd-drawer-text:                  #dce8f7;

  /* Menu latéral : mêmes rôles qu'en clair, un peu plus marqués sur le tiroir plus sombre. */
  --kd-nav-text:                     rgba(220, 232, 247, 0.78);
  --kd-nav-text-strong:              #ffffff;
  --kd-nav-chevron:                  rgba(220, 232, 247, 0.50);
  --kd-nav-hover-from:               rgba(30, 85, 160, 0.26);
  --kd-nav-hover-mid:                rgba(14, 130, 160, 0.38);
  --kd-nav-hover-to:                 rgba(70, 215, 225, 0.26);
  --kd-nav-active-bg:                rgba(96, 165, 240, 0.18);
  --kd-nav-accent:                   #4fdbe4;
  --kd-nav-focus:                    rgba(79, 219, 228, 0.75);

  --kd-row-hover:                    rgba(255, 255, 255, 0.10);
}

/* ===== Navbar / AppLayout ===== */
vaadin-app-layout::part(navbar) {
  background: var(--lumo-base-color);
  border-bottom: 2px solid var(--lumo-primary-color);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
}

/* ===== Drawer — collapsible hover sidebar ===== */
vaadin-app-layout::part(drawer) {
  background: linear-gradient(180deg, var(--kd-drawer-bg) 0%, var(--kd-drawer-bg-accent) 100%);
  border-right: 1px solid var(--lumo-contrast-10pct);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.25s ease;
  z-index: 200;
}

/* Content area transitions with sidebar */
vaadin-app-layout::part(content) {
  transition: padding-left 0.25s ease;
}

@media (min-width: 800px) {
  vaadin-app-layout {
    --vaadin-app-layout-drawer-overlay: false;
    --vaadin-app-layout-drawer-width: 60px;
  }
}

/* ===== Devis grid — titre ===== */
vaadin-grid tr.title-row td {
  font-weight: 700;
  font-size: 0.92em;
  color: #1a3a5c;
}
vaadin-grid tr.title-row-gray td {
  background: #e8edf3 !important;
}
vaadin-grid tr.text-row td {
  background: #f5f5f5 !important;
  font-style: italic;
  color: #555;
}
vaadin-grid tr.pagebreak-row td {
  background: #fff3e0 !important;
  color: #e65100;
  font-size: 0.82em;
}

/* Pre-wrap for multiline descriptions in grid */
.grid-desc-cell {
  white-space: pre-wrap;
  line-height: 1.4;
  font-size: 0.88em;
  padding: 4px 0;
}

@media (max-width: 799px) {
  vaadin-app-layout {
    --vaadin-app-layout-drawer-overlay: true;
  }
}

/* ===== Logo image ===== */
vaadin-app-layout::part(navbar) img {
  display: block;
}

/* ===== Menu latéral (vaadin-side-nav-item) =====
   Ce que le thème peut styler d'ici : les parts content (la ligne : lien +
   chevron), link, toggle-button et children de l'item, et ses attributs
   current, expanded et has-children. vaadin-side-nav-item 24.4 n'a ni part
   « item » ni attribut « active » : les anciennes règles écrites sur eux ne
   s'appliquaient à rien, et le survol ne montrait rien.

   Deux couches indépendantes sur la ligne :
   - le survol : un voile en dégradé (::before) qui apparaît en glissant
     légèrement vers la droite, pendant que le texte et l'icône s'éclairent
     et avancent de 3 px ;
   - le module ouvert (current, ou kd-ouvert posé par MainLayout sur une fiche) :
     un fond plus clair et une barre turquoise (::after), qui restent sans la souris.
   Le voile passe sous le lien et le chevron (z-index -1 dans la ligne, isolée)
   et glisse par background-position, pas par translate : il ne déborde jamais.
   La ligne n'a donc pas besoin d'overflow hidden, qui rognerait l'anneau de
   focus du clavier. */

vaadin-side-nav-item {
  --kd-nav-duree: 220ms;
  --kd-nav-sortie: 160ms;
  --kd-nav-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kd-nav-decalage: 3px;
  /* Bleu foncé, puis bleu pétrole, puis le turquoise sur le dernier cinquième :
     un accent, pas la couleur dominante. */
  --kd-nav-voile: linear-gradient(90deg,
      var(--kd-nav-hover-from) 0%,
      var(--kd-nav-hover-mid) 45%,
      var(--kd-nav-hover-to) 80%,
      var(--kd-nav-hover-to) 100%);
  --vaadin-focus-ring-color: var(--kd-nav-focus);
  /* Retrait des sous-éléments : 20 px au lieu de 24 (voir « place des libellés »). */
  --vaadin-side-nav-child-indent: 20px;
}

/* MainLayout donne au menu width:100% et un padding de 0.5em : en content-box,
   il débordait de 16 px à droite du tiroir, et une ligne éclairée y serait
   coupée net contre le bord. En border-box, la marge est la même des deux côtés.
   Le menu devient aussi un conteneur : sa largeur dit si le tiroir est le rail
   replié (60 px) ou le tiroir ouvert (240 px), sans toucher au JS du rail. */
vaadin-side-nav {
  box-sizing: border-box;
  container: kd-nav / inline-size;
}

/* Pas de marge entre les lignes : le pas reste de 40 px, comme en production.
   Une marge ferait descendre le menu (2 px par ligne : « Attestations » passe
   sous la zone du bas à 800 px de haut, sans barre de défilement visible), et
   ouvrirait entre deux sous-éléments un interstice où le survol remonte au groupe. */
vaadin-side-nav-item::part(content) {
  position: relative;
  isolation: isolate;
  border-radius: 8px;
}

/* Place des libellés : les 16 px rendus au bord droit sont repris dans la ligne,
   pour que les libellés gardent la place qu'ils avaient. Le lien perd sa marge
   droite (le libellé garde la sienne, 8 px, la même qu'entre la pastille et
   l'icône à gauche), le chevron revient à la taille de son glyphe (1em, 24 px
   au lieu de 30), la ligne d'un groupe passe de 8 à 4 px de marge droite, et les
   sous-éléments sont en retrait de 20 px au lieu de 24. */
vaadin-side-nav-item[has-children]::part(content) {
  padding-inline-end: var(--lumo-space-xs);
}

/* ----- Couleurs au repos ----- */
vaadin-side-nav-item::part(link) {
  padding-inline-end: 0;
  color: var(--kd-nav-text);
  border-radius: 8px;
  transition: color var(--kd-nav-sortie) ease-out, transform var(--kd-nav-sortie) ease-out;
}

vaadin-side-nav::part(label) {
  color: var(--kd-drawer-text);
}

/* L'icône suit la couleur du lien. Celles dont la couleur est fixée en Java
   (Icon.setColor pose fill en ligne : Paramètres, Administration, Super Admin)
   la gardent, et s'éclairent par le filtre au survol. */
vaadin-side-nav-item > [slot="prefix"] {
  color: inherit;
  transition: filter var(--kd-nav-sortie) ease-out;
}

/* Le chevron des groupes : Lumo le peint en contrast-60pct, presque noir sur le bleu nuit. */
vaadin-side-nav-item::part(toggle-button) {
  width: 1em;
  color: var(--kd-nav-chevron);
}

/* ----- Survol ----- */
vaadin-side-nav-item::part(content)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--kd-nav-voile);
  background-repeat: no-repeat;
  background-size: 120% 100%;
  background-position: 100% 0;
  opacity: 0;
  /* Sortie : un fondu sur place, plus bref que l'entrée. Le dégradé ne revient
     à son point de départ qu'une fois éteint : il ne repart pas vers la gauche. */
  transition: opacity var(--kd-nav-sortie) ease-out, background-position 0s linear var(--kd-nav-sortie);
}

/* Seulement avec un vrai pointeur : sur tablette, un tap ne laisse pas de survol collé. */
@media (hover: hover) {
  vaadin-side-nav-item::part(content):hover::before {
    opacity: 1;
    background-position: 0 0;
    transition: opacity var(--kd-nav-duree) var(--kd-nav-courbe),
                background-position var(--kd-nav-duree) var(--kd-nav-courbe);
  }

  /* :hover remonte d'un sous-élément à son groupe : sans le :not(:has()),
     survoler « Devis » éclairerait aussi « Commercial ». */
  vaadin-side-nav-item:hover:not(:has(vaadin-side-nav-item:hover))::part(link) {
    color: var(--kd-nav-text-strong);
    transform: translateX(var(--kd-nav-decalage));
    transition: color var(--kd-nav-duree) var(--kd-nav-courbe),
                transform var(--kd-nav-duree) var(--kd-nav-courbe);
  }

  vaadin-side-nav-item:hover:not(:has(vaadin-side-nav-item:hover)) > [slot="prefix"] {
    filter: brightness(1.15);
    transition: filter var(--kd-nav-duree) var(--kd-nav-courbe);
  }

  vaadin-side-nav-item:hover:not(:has(vaadin-side-nav-item:hover))::part(toggle-button) {
    color: var(--kd-nav-text-strong);
  }
}

/* ----- Module ouvert ----- */
/* current : posé par le composant, seulement quand l'URL est exactement le chemin
   de l'entrée. kd-ouvert : posé par MainLayout (marquerModuleOuvert) sur l'entrée
   dont relève la page, fiches comprises : sur « devis/42 », aucune entrée n'est
   current, « Devis » est kd-ouvert. Les deux s'affichent de la même façon.
   Un groupe replié qui contient la vue ouverte la signale à sa place : sur le
   rail, tous les groupes sont repliés, et la vue ouverte serait introuvable. */
vaadin-side-nav-item:is([current], [kd-ouvert])::part(content),
vaadin-side-nav-item[has-children]:not([expanded]):has(vaadin-side-nav-item:is([current], [kd-ouvert]))::part(content) {
  background-color: var(--kd-nav-active-bg);
}

vaadin-side-nav-item:is([current], [kd-ouvert])::part(content)::after,
vaadin-side-nav-item[has-children]:not([expanded]):has(vaadin-side-nav-item:is([current], [kd-ouvert]))::part(content)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--kd-nav-accent);
  pointer-events: none;
}

/* Un groupe ouvert qui contient la vue garde son libellé en blanc : le chemin se lit. */
vaadin-side-nav-item:is([current], [kd-ouvert])::part(link),
vaadin-side-nav-item[has-children]:has(vaadin-side-nav-item:is([current], [kd-ouvert]))::part(link) {
  color: var(--kd-nav-text-strong);
  font-weight: 600;
}

/* ----- Clavier : l'anneau turquoise (--vaadin-focus-ring-color) et le même voile ----- */
vaadin-side-nav-item::part(link):focus-visible {
  color: var(--kd-nav-text-strong);
  background-image: var(--kd-nav-voile);
}

vaadin-side-nav-item::part(toggle-button):focus-visible {
  color: var(--kd-nav-text-strong);
}

/* ----- Rail replié (60 px) ----- */
/* Le chevron n'a pas la place à côté de l'icône. Il s'efface à l'œil et sort du
   flux (l'icône reste centrée au survol), et il ne prend pas la souris : un clic
   sur la ligne ouvre le groupe, et passe par l'accordéon de MainLayout, que le
   clic sur le chevron court-circuite.
   Il n'est pas retiré pour autant (pas de display: none) : il reste dans l'ordre
   de tabulation et pour les lecteurs d'écran, et réapparaît quand le clavier
   l'atteint. Le rail ne s'ouvre qu'à l'entrée de la souris (MainLayout,
   mouseenter), et l'en-tête d'un groupe n'a pas de chemin, donc pas de lien
   tabulable : au clavier, ce bouton est le seul moyen d'ouvrir Commercial,
   Terrain, Équipe… et d'atteindre leurs modules. */
@container kd-nav (max-width: 120px) {
  /* Sans libellé, le retrait des sous-éléments ne dit rien : il pousserait leur
     icône hors de la ligne quand un groupe s'ouvre sur le rail (au clavier, ou
     quand la vue ouverte déplie son groupe). */
  vaadin-side-nav-item {
    --kd-nav-decalage: 0px;
    --vaadin-side-nav-child-indent: 0px;
  }

  vaadin-side-nav-item::part(toggle-button) {
    position: absolute;
    inset-inline-end: 0;
    opacity: 0;
    pointer-events: none;
  }

  vaadin-side-nav-item::part(toggle-button):focus-visible {
    opacity: 1;
  }

  vaadin-side-nav-item[has-children]::part(content) {
    padding-inline-end: 0;
  }
}

/* ----- Mouvement réduit : le voile apparaît en fondu, sans glisser ni décaler ----- */
@media (prefers-reduced-motion: reduce) {
  vaadin-side-nav-item {
    --kd-nav-decalage: 0px;
  }

  vaadin-side-nav-item::part(content)::before {
    background-position: 0 0;
  }
}

/* ===== Grids ===== */
vaadin-grid::part(header-cell) {
  background: var(--lumo-primary-color) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-bottom: 3px solid rgba(0,0,0,0.25) !important;
  font-size: 0.83em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Colonne triée : Lumo écrit l'intitulé du trieur actif, et ses flèches, en
   couleur primaire — celle du fond des en-têtes ci-dessus. L'intitulé
   disparaissait : « N° » dans la liste des factures, triée par numéro à
   l'ouverture. Blanc, comme les autres intitulés. */
vaadin-grid-sorter[direction] {
  color: #ffffff;
}
vaadin-grid-sorter[direction]::part(indicators) {
  color: #ffffff;
}

vaadin-grid::part(odd-row-body) {
  background: var(--lumo-base-color);
}

vaadin-grid::part(even-row-body) {
  background: var(--lumo-contrast-5pct);
}

/* Pages du PDF client dans les lignes du devis (PagesDuPdf.java). Le texte des pastilles
   (content) et les lignes visées viennent de la feuille #kd-pages-du-pdf ; sans elle, rien.
   Le trait est une image de fond de toutes les cellules de la ligne : une future règle de
   fond de rangée doit poser background-color, jamais la forme courte « background », qui
   l'effacerait. (title-row-gray, en !important, est inactive aujourd'hui : si on la répare,
   elle cachera le trait des titres gris ; la pastille, elle, restera.) */
vaadin-grid.kd-pages {
  --kd-page-debut: #1a73e8;
  --kd-page-saut: #2e7d32;
  --kd-page-coupe: #ef6c00;
  --kd-page-alerte: #c62828;
}
vaadin-grid.kd-pages[kd-pages-etat="ancien"] {
  --kd-page-debut: #a8c7f0;
  --kd-page-saut: #a5d6a7;
  --kd-page-coupe: #f6d39a;
  --kd-page-alerte: #ef9a9a;
}
/* Le trait part du bord de la cellule, bordure du haut comprise : sinon l'image de fond se
   répète dans cette bordure de 1 px, et le trait du bas (« mémo → p. N ») se voit aussi, fin,
   en haut de la ligne (vu au banc navigateur). Sans effet sur les autres fonds : la ligne
   choisie de Lumo est une image répétée, qui couvre déjà la bordure. */
vaadin-grid.kd-pages::part(cell) {
  background-origin: border-box;
}
vaadin-grid.kd-pages .kd-type::before,
vaadin-grid.kd-pages .kd-type::after {
  position: absolute;
  left: 12px;
  z-index: 1;
  pointer-events: none;
  padding: 0 5px;
  white-space: nowrap;
  font: 600 10px/13px var(--lumo-font-family);
  color: #fff;
}
vaadin-grid.kd-pages .kd-type::before {
  top: 3px;
  border-radius: 0 0 4px 4px;
}
vaadin-grid.kd-pages .kd-type::after {
  bottom: 3px;
  border-radius: 4px 4px 0 0;
}
/* Le fond orange des lignes « Saut de page », prévu par le thème (pagebreak-row) mais jamais
   affiché : Vaadin pose les classes de ligne sur les cellules, pas sur la rangée que visaient
   ces règles. La partie kd-saut est posée sur chaque cellule d'un saut (PagesDuPdf.partie).
   Après odd-row-body / even-row-body, de même spécificité : l'ordre décide. */
vaadin-grid::part(kd-saut) {
  background-color: #fff3e0;
}
/* En sombre, le texte de Lumo est presque blanc : sur #fff3e0 il ne se lisait plus (contraste
   d'environ 1:1). Un orange translucide sur le fond sombre (PagesDuPdfTest.fondDesSautsLisible).
   [theme~="dark"] sans « html » : le bouton de MainLayout pose l'attribut sur l'élément de
   l'UI, comme le fait Lumo pour ses propres couleurs sombres. */
[theme~="dark"] vaadin-grid::part(kd-saut) {
  background-color: rgba(239, 108, 0, 0.22);
}
/* Le bouton « PDF : 5 pages ▾ » : un libellé sur une ligne, coupé d'une ellipse. */
.kd-pages-bouton::part(label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Buttons ===== */
vaadin-button[theme~="primary"] {
  background: var(--lumo-primary-color);
  color: var(--lumo-primary-contrast-color);
}

/* ===== Calendar : barre latérale ===== */
.kd-cal-sidebar {
  border-right: 1px solid var(--lumo-contrast-10pct);
}
.kd-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-top: 4px;
}
.kd-mini-cal-head {
  text-align: center;
  font-size: 0.68em;
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
  padding: 2px 0;
}
.kd-mini-cal-day {
  text-align: center;
  font-size: 0.72em;
  padding: 4px 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--lumo-body-text-color);
}
.kd-mini-cal-day:hover { background: var(--lumo-contrast-10pct); }
.kd-mini-cal-day.other-month { color: var(--lumo-disabled-text-color); }
.kd-mini-cal-day.today { font-weight: 700; color: var(--lumo-primary-color); }
.kd-mini-cal-day.selected { background: var(--lumo-primary-color); color: var(--lumo-primary-contrast-color); }

@media (max-width: 900px) {
  .kd-cal-body { flex-direction: column; }
  .kd-cal-sidebar {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    padding-bottom: 8px;
  }
}

/* ===== Calendar ===== */
.kd-cal-wrapper {
  display: flex;
  flex-direction: column;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  flex: 1;
  gap: 1px;
  background: var(--lumo-contrast-10pct);
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 8px;
  overflow: hidden;
}
.cal-day-header {
  background: var(--lumo-primary-color-10pct);
  text-align: center;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 0.82em;
  color: var(--lumo-primary-text-color);
}
.cal-day {
  background: var(--lumo-base-color);
  min-height: 80px;
  padding: 4px;
  cursor: pointer;
  transition: background 0.1s;
  overflow: hidden;
}
.cal-day:hover { background: var(--lumo-contrast-5pct); }
.cal-day.other-month { opacity: 0.35; }
.cal-day.holiday { background: var(--lumo-contrast-5pct); }
.cal-day.today { background: var(--lumo-primary-color-10pct); }
.cal-day-number {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--lumo-secondary-text-color);
  margin-bottom: 3px;
  text-align: left;
}
.cal-day.today .cal-day-number { color: var(--lumo-primary-color); }
.cal-appt {
  font-size: 0.72em;
  border-radius: 3px;
  padding: 2px 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #fff;
}
.cal-week-col {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--lumo-contrast-10pct);
  min-height: 400px;
}
.cal-week-header {
  text-align: center;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 0.82em;
  border-bottom: 1px solid var(--lumo-contrast-10pct);
  background: var(--lumo-contrast-5pct);
}
.cal-week-header.today { background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-color); }
.cal-week-appt {
  border-radius: 4px;
  padding: 4px 6px;
  margin: 4px;
  font-size: 0.78em;
  cursor: pointer;
  color: #fff;
}

/* ===== Dark mode toggle button ===== */
.theme-toggle {
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--lumo-secondary-text-color);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.theme-toggle:hover {
  background: var(--lumo-contrast-10pct);
}

/* ===== Calcul Thermique — grille de tuiles ===== */
.calc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  width: 100%;
}

.calc-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px;
  border: 1.5px solid var(--lumo-contrast-10pct);
  border-radius: 12px;
  background: var(--lumo-base-color);
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
  user-select: none;
}

.calc-tile:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.calc-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-tile-title {
  font-weight: 700;
  font-size: 1em;
  color: var(--lumo-body-text-color);
  line-height: 1.2;
}

.calc-tile-desc {
  font-size: 0.82em;
  color: var(--lumo-secondary-text-color);
  margin: 0;
  line-height: 1.4;
}

/* ===== Mobile / Responsive ===================================================
   Breakpoints:
     ≥ 800px  → sidebar hover mode (desktop)
     < 800px  → sidebar overlay mode (tablet/phone)
     < 560px  → compact phone layout
   ========================================================================== */

/* Drawer toggle (hamburger) — visible only on mobile */
.kd-drawer-toggle {
  display: none !important;
}
@media (max-width: 799px) {
  .kd-drawer-toggle {
    display: flex !important;
  }
}

/* Utility: hide on mobile */
@media (max-width: 559px) {
  .kd-hide-phone { display: none !important; }
}

/* Utility: hide on desktop */
@media (min-width: 800px) {
  .kd-hide-desktop { display: none !important; }
}

/* ── Navbar compact on phone ── */
@media (max-width: 559px) {
  vaadin-app-layout::part(navbar) {
    padding: 0 6px;
    min-height: 48px;
  }
  vaadin-app-layout::part(navbar) img {
    height: 24px !important;
  }
}

/* ── Grids: horizontal scroll container ── */
.kd-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── KPI / stat bars: wrap and center on phone ── */
@media (max-width: 559px) {
  .kd-kpi-bar {
    justify-content: center !important;
  }
  .kd-kpi-card {
    min-width: 120px !important;
    padding: 8px 12px !important;
  }
}

/* ── Vaadin Form layouts: force 1 column on phone ── */
@media (max-width: 499px) {
  vaadin-form-layout {
    --vaadin-form-layout-column-spacing: 0;
  }
}

/* ── Dialog sizing: full-width on phone ── */
@media (max-width: 559px) {
  vaadin-dialog-overlay::part(overlay) {
    min-width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px;
  }
}

/* ── Calendar grid: scroll on phone ── */
@media (max-width: 799px) {
  .cal-grid {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    min-width: 630px;
  }
  .kd-cal-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Planning grid: always scrollable ── */
.kd-planning-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── Calc tile grid: single column on phone ── */
@media (max-width: 499px) {
  .calc-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* ── View padding: reduce on phone ── */
@media (max-width: 559px) {
  .kd-view {
    padding: 10px 8px !important;
  }
}

/* ── Toolbar: wrap buttons on phone ── */
.kd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

/* ── Tables / grids inside views: min-width so columns don't crush ── */
@media (max-width: 799px) {
  vaadin-grid {
    min-width: 0;
  }
}

/* ===== Airy & Readable — breathing room across the app ===== */

/* Grid rows: taller so content isn't cramped */
vaadin-grid::part(row) {
  min-height: 46px;
}

/* Grid cells: a touch more horizontal padding */
vaadin-grid-cell-content {
  padding: 4px 12px;
}

/* View content default padding (desktop) */
@media (min-width: 800px) {
  .kd-view {
    padding: 24px 28px;
  }
}

/* Dialog overlays: more internal breathing room */
vaadin-dialog-overlay::part(content) {
  padding: 24px 28px;
}

/* Vaadin form layout: more vertical spacing between rows */
vaadin-form-layout {
  --vaadin-form-layout-row-spacing: 1.3em;
}

/* Text fields / comboboxes: slightly taller */
vaadin-text-field,
vaadin-combo-box,
vaadin-select,
vaadin-number-field,
vaadin-date-picker,
vaadin-time-picker {
  --lumo-text-field-size: 2.4em;
}

/* Section dividers inside dialogs / cards */
.kd-section-title {
  font-weight: 700;
  font-size: 1em;
  color: var(--lumo-primary-text-color);
  padding-bottom: 6px;
  margin: 4px 0 10px;
  border-bottom: 2px solid var(--lumo-primary-color-10pct);
  width: 100%;
}

/* Badge readability: slightly more padding */
[theme~="badge"] {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
}

/* Toolbar: always some vertical breathing */
.kd-toolbar {
  padding: 8px 0 4px;
  gap: 10px;
}

/* Tab sheets: content area padding */
vaadin-tabsheet::part(tab-content) {
  padding: 16px 4px;
}

/* Notification: slightly larger text */
vaadin-notification-card {
  font-size: 0.92em;
}

/* Les messages restent au-dessus de tout (15/10/2026). Le conteneur des
   notifications est à 1000, les infobulles à 1100 ; un dialogue qui s'ouvre
   pendant qu'une infobulle est affichée — celle, même vide, d'une cellule de
   grille survolée juste avant — se place au-dessus d'elle (1101), donc
   au-dessus des notifications : un refus (« l'heure de fin doit être après
   l'heure de début ») s'affichait DERRIÈRE le formulaire « Ajouter une
   absence ». Le conteneur ne fait pas partie de la pile des fenêtres de
   Vaadin : le monter ne les fait pas monter à leur tour. */
vaadin-notification-container {
  z-index: 100000;
}

/* H2/H3 inside view content */
.kd-view h2, .kd-view h3 {
  margin-top: 0;
  color: var(--lumo-primary-text-color);
}

/* ===== Dashboard cockpit ===== */
.kd-dashboard-cockpit,
.kd-dashboard-chart-grid,
.kd-dashboard-queue-grid,
.kd-dashboard-shortcuts {
  display: grid;
  gap: 12px;
  width: 100%;
}

.kd-dashboard-cockpit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kd-dashboard-chart-grid {
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) minmax(260px, 1fr);
}

.kd-dashboard-queue-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kd-dashboard-shortcuts {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.kd-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
}

.kd-dashboard-cockpit-card,
.kd-dashboard-info-card,
.kd-dashboard-queue-card {
  background: var(--lumo-base-color);
  border: 1.5px solid var(--lumo-contrast-10pct);
  border-radius: 10px;
  box-sizing: border-box;
}

.kd-dashboard-cockpit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 116px;
  padding: 16px;
  border-left: 5px solid var(--lumo-primary-color);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}

.kd-dashboard-cockpit-card:hover {
  box-shadow: 0 6px 20px rgba(15, 43, 74, 0.12);
  transform: translateY(-1px);
}

.kd-dashboard-cockpit-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.kd-dashboard-cockpit-content {
  min-width: 0;
}

.kd-dashboard-cockpit-title,
.kd-dashboard-info-title,
.kd-dashboard-queue-title {
  display: block;
  font-weight: 700;
  color: var(--lumo-body-text-color);
}

.kd-dashboard-cockpit-title {
  font-size: 0.9em;
}

.kd-dashboard-cockpit-value {
  display: block;
  font-size: 2em;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 4px;
}

.kd-dashboard-cockpit-sub {
  display: block;
  color: var(--lumo-secondary-text-color);
  font-size: 0.82em;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kd-dashboard-info-card,
.kd-dashboard-queue-card {
  padding: 14px 16px;
}

.kd-dashboard-info-title,
.kd-dashboard-queue-title {
  font-size: 0.92em;
  margin-bottom: 10px;
}

.kd-dashboard-stat-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--lumo-contrast-10pct);
  font-size: 0.86em;
}

.kd-dashboard-stat-line:first-of-type {
  border-top: 0;
}

.kd-dashboard-stat-line span:last-child {
  font-weight: 800;
  white-space: nowrap;
}

.kd-dashboard-shortcut {
  justify-content: flex-start;
  min-height: 42px;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 8px;
  background: var(--lumo-base-color);
}

.kd-dashboard-shortcut:hover {
  background: var(--lumo-primary-color-10pct);
}

.kd-dashboard-queue-card {
  border-top: 4px solid var(--lumo-primary-color);
  min-height: 180px;
}

.kd-dashboard-queue-row {
  display: grid;
  grid-template-columns: 86px minmax(100px, 0.9fr) minmax(0, 1.6fr);
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--lumo-contrast-10pct);
  cursor: pointer;
}

.kd-dashboard-queue-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kd-dashboard-empty,
.kd-dashboard-more {
  display: block;
  color: var(--lumo-secondary-text-color);
  font-size: 0.86em;
  padding-top: 12px;
}

@media (max-width: 1100px) {
  .kd-dashboard-cockpit,
  .kd-dashboard-chart-grid,
  .kd-dashboard-queue-grid {
    grid-template-columns: 1fr 1fr;
  }
  .kd-kpi-row {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .kd-dashboard-cockpit,
  .kd-dashboard-chart-grid,
  .kd-dashboard-queue-grid,
  .kd-dashboard-shortcuts {
    grid-template-columns: 1fr;
  }
  .kd-kpi-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .kd-dashboard-queue-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .kd-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}

/* ===== Compta productivity ===== */
.kd-compta-fast-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--lumo-contrast-10pct);
  border-radius: 8px;
  background: var(--lumo-base-color);
  box-sizing: border-box;
}

.kd-compta-fast-row {
  flex-wrap: wrap;
  gap: 8px;
}

.kd-compta-fast-panel vaadin-text-field,
.kd-compta-fast-panel vaadin-number-field,
.kd-compta-fast-panel vaadin-date-picker,
.kd-compta-fast-panel vaadin-combo-box,
.kd-compta-fast-panel vaadin-select {
  --lumo-text-field-size: 2.25em;
}

/* ── Articles particuliers dans la liste Stock ─────────────────────────────
   Deux cas, deux nuances d'orange, parce qu'ils se comportent autrement que
   les autres et que rien ne le disait dans la liste.

   Article systeme (DZ, MO, E) : Keydy va les chercher par leur code exact
   pour tarifer les deplacements, les heures et l'electricite. Ils ne sont pas
   supprimables — on ne le decouvrait qu'en ouvrant la fiche et en cherchant
   un bouton absent.

   Forfait (FF, FFT) : aucune quantite en rayon. Sa ligne a zero ressemblait a
   une rupture de stock alors qu'il n'y a rien a reapprovisionner. */
vaadin-grid tr.article-systeme td {
  background: #fff3e0 !important;
  color: #e65100;
}
vaadin-grid tr.article-forfait td {
  background: #fffaf3 !important;
  font-style: italic;
  color: #8d6e46;
}

/* ── Historique 360° : les sections, les cases, les sous-cases ─────────────
   Le titre de section etait un texte bleu discret sous un filet. A cote des
   grilles, qui portent un bandeau plein dans la couleur de la marque, il ne
   se voyait pas : sur une page qui empile sept sections, on ne savait plus ou
   l'une finit et ou la suivante commence. Le bandeau reprend exactement
   l'habillage des en-tetes de grille — c'est le meme repere, au meme endroit. */
.kd-section { margin-bottom: 4px; }

h2.kd-band {
  margin: 0;
  padding: 6px 12px;
  background: var(--lumo-primary-color);
  color: #ffffff;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-radius: 5px 5px 0 0;
  border-bottom: 3px solid rgba(0, 0, 0, 0.25);
}

/* Le contenu prolonge le bandeau : sans cette bordure, la section flotte et
   le bandeau semble poser sur rien. */
.kd-section > *:not(.kd-band) {
  border: 1px solid var(--lumo-contrast-10pct);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  padding: 8px 10px;
  box-sizing: border-box;
}

/* Une case de site : dense, cliquable, et le liseré dit d'un coup d'œil si
   l'adresse est encore en service. */
.kd-site-card {
  border: 1px solid var(--lumo-contrast-10pct);
  border-left: 3px solid #0f2b4a;
  border-radius: 5px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--lumo-base-color);
}
.kd-site-card:hover {
  background: var(--lumo-primary-color-10pct);
  border-left-color: var(--lumo-primary-color);
}
/* Grisee et repoussee en fin de liste, jamais cachee : un site absent passe
   pour inexistant, et se recree en double sous un nom voisin. */
.kd-site-dormant { opacity: 0.55; border-left-color: var(--lumo-contrast-30pct); }
/* Ce qui n'est rattache a aucune adresse : en pointilles, pour qu'on voie
   tout de suite que ce n'en est pas une. */
.kd-site-orphan { border: 1px dashed var(--lumo-contrast-30pct); border-left-width: 1px; }

.kd-subcard {
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 5px;
  overflow: hidden;
}
.kd-subcard-head {
  background: var(--lumo-contrast-5pct);
  padding: 5px 10px;
  border-bottom: 1px solid var(--lumo-contrast-10pct);
}

/* Le survol d'une ligne de grille ne se traite pas ici.

   Les lignes et les cellules d'une vaadin-grid vivent dans le shadow DOM.
   Une feuille de style de document ne les atteint ni avec « tr td », ni avec
   ::part(row) suivi d'un descendant : les cellules opaques recouvrent le fond
   de la ligne, et vaadin-grid-cell-content n'est pas un descendant du <tr>.

   La regle est dans components/vaadin-grid.css, que Vaadin injecte a
   l'interieur du composant. Elle y consomme --kd-row-hover, definie plus
   haut dans les deux themes. */

/* Ligne du marché soulignée (mise en forme, comme au devis).
   text-decoration ne se transmet pas du champ au texte saisi : on vise
   l'input, qui est dans le DOM léger du vaadin-text-field. */
vaadin-text-field.kd-souligne > input {
    text-decoration: underline;
}

/* ── Zone de rédaction des lignes (ZoneLignes.java) ─────────────────────
   Devis, facture et lignes du marché : quand on fait défiler les lignes, la barre
   de saisie reste en haut, l'en-tête des colonnes juste en dessous, et seules les
   lignes défilent.

   La zone prend AU MOINS la hauteur visible de l'écran : la page (100vh, ou 100dvh
   quand le navigateur le connaît : la barre d'adresse d'une tablette ne la fausse
   plus) moins la barre de l'application, que vaadin-app-layout publie dans
   --vaadin-app-layout-navbar-offset-top / -bottom. La grille y prend la place qui
   reste et défile seule : son en-tête reste visible, et vaadin-grid ne fabrique plus
   que les lignes affichées.

   Plancher (Dylan, 06/10/2026) : la grille montre toujours au moins 8 lignes. Sur un
   vrai portable (1366×768, Chrome ne laisse que 633 à 657 px à la page ; 1920×1080 à
   150 % : 1280×600), la zone tenait dans l'écran en écrasant la grille à 2 ou 3
   lignes. Si la fenêtre est trop basse, la zone DÉPASSE maintenant l'écran et la page
   (ou l'onglet) défile : barre, en-tête et 8 lignes à l'écran une fois la zone en
   place, les totaux en dessous, qui viennent avec la page. Sur un grand écran, rien ne
   change : la zone fait la hauteur visible, totaux compris. D'où height auto et
   min-height (plus une hauteur fixe) : la zone fait la hauteur de l'écran, ou celle de
   son contenu si elle est plus grande.

   --kd-zone-lignes-dessus : ce qui reste collé en haut de l'écran au-dessus de la
   zone une fois en place (la barre du titre de la facture, FactureEditView). Retiré
   de sa hauteur, et donné à scroll-margin-top : c'est sous cette barre que
   scrollIntoView (ZoneLignes.montrer, MoletteZoneLignes) amène la zone. 0 ailleurs
   (devis) : rien n'y change.

   flex-shrink 0 : la vue de la facture a la hauteur de l'écran (setSizeFull) et son
   contenu la dépasse ; dans cette colonne flex, la zone était écrasée (480 px au lieu
   de 876, mesuré en 1900×1000). Au devis, rien ne l'écrase : rien n'y change. */
.kd-zone-lignes {
  /* Bloc conteneur du point neutre (PointNeutre, position absolute) : sans lui, il se
     plaçait par rapport à la page et la rendait défilable — à la facture sur portable,
     la mise en place de la zone faisait passer la barre de saisie sous la barre de
     l’application (relecture du 07/10/2026). */
  position: relative;
  display: flex;
  flex-direction: column;
  /* Comme vaadin-vertical-layout, où ces éléments étaient : chacun garde sa largeur
     (la grille, la barre et les totaux demandent 100 %, le bandeau et les boutons
     gardent la leur). */
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: calc(100vh - var(--vaadin-app-layout-navbar-offset-top, 0px) - var(--vaadin-app-layout-navbar-offset-bottom, 0px) - var(--kd-zone-lignes-dessus, 0px));
  min-height: calc(100dvh - var(--vaadin-app-layout-navbar-offset-top, 0px) - var(--vaadin-app-layout-navbar-offset-bottom, 0px) - var(--kd-zone-lignes-dessus, 0px));
  scroll-margin-top: var(--kd-zone-lignes-dessus, 0px);
  flex-shrink: 0;
}
/* Lignes du marché (ChantierDetailView) : la zone d'un lot est dans un onglet
   (vaadin-tabsheet) et, à plusieurs lots, dans un sous-onglet par lot. Ce sont ces
   onglets qui défilent, pas la page : la zone prend au moins 100 % de la hauteur de sa
   section, elle-même à 100 % de l'onglet. À la hauteur de l'écran, elle dépassait
   l'onglet, et son « Total marché lot » restait sous le bord (1 113 px pour une
   fenêtre de 1 000, mesuré en 1900×1000). Plus de 480 px imposés : le même plancher
   de 8 lignes qu'ailleurs ; sur un portable, la zone dépasse le sous-onglet, qui
   défile (relecture du 06/10/2026 : avec 480 px, la barre de saisie restait sous la
   barre des lots et 3 à 4 lignes seulement étaient visibles).
   Ses éléments étaient dans une <section> (un bloc), où chacun prenait toute la
   largeur : align-items stretch la leur garde. */
.kd-zone-lignes.kd-zone-lignes-onglet {
  min-height: 100%;
  align-items: stretch;
}
/* Barre de saisie, bandeau, totaux : leur hauteur naturelle, jamais écrasés. */
.kd-zone-lignes > * {
  flex: none;
}
/* La grille : toute la place qui reste. flex-basis 0 : la hauteur par défaut de
   vaadin-grid (400 px) ne compte plus. Jamais moins que le plancher : l'en-tête,
   8 rangées, l'ascenseur horizontal (présent dès que les colonnes dépassent la
   largeur, 15 px) et les bordures de la grille (1 px en haut, 1 px en bas). Mesuré
   dans Chrome au thème keydey (vraies vues, vrais composants Vaadin 24.4) : les
   rangées sont espacées de 56 px (55,4 px de haut ; devis, facture et lignes du
   marché : des champs de saisie dans les cellules) ; l'en-tête 56 px, et 92 px aux
   lignes du marché, qui en ont deux rangées (groupes, puis colonnes). Avec 55 px et
   sans les bordures, le corps faisait 438 px pour 448 : 7 lignes entières et une
   coupée (relecture du 06/10/2026, tour 3). Grille de 521 px, 557 au marché. */
.kd-zone-lignes > .kd-zone-lignes-grille {
  --kd-zone-lignes-rangee: 56px;
  --kd-zone-lignes-entete: 56px;
  --kd-zone-lignes-ascenseur: 15px;
  --kd-zone-lignes-bordures: 2px;
  flex: 1 1 0;
  min-height: calc(var(--kd-zone-lignes-entete) + 8 * var(--kd-zone-lignes-rangee) + var(--kd-zone-lignes-ascenseur) + var(--kd-zone-lignes-bordures));
}
.kd-zone-lignes > .kd-zone-lignes-grille.lignes-marche-grid {
  --kd-zone-lignes-entete: 92px;
}

/* ── Rapport CertIBEau : glisser-déposer des photos ────────────────────────
   Le connecteur de Vaadin (dndConnector) pose « v-drag-over-target » sur la
   zone survolée pendant qu'on glisse, et « v-dragged » sur la vignette qu'on
   glisse. Sans ces règles, rien ne montrerait où la photo va tomber. La zone
   de fin (après la dernière carte) met la photo en dernier ; l'interstice
   entre deux cartes ne reçoit rien. */
.certibeau-carte.v-drag-over-target {
  outline: 2px dashed var(--lumo-primary-color);
  outline-offset: 2px;
}
.certibeau-fin.v-drag-over-target {
  background: var(--lumo-primary-color-10pct);
  outline: 2px dashed var(--lumo-primary-color-50pct);
  border-radius: 8px;
}
.certibeau-carte img.v-dragged {
  opacity: 0.4;
}
/* La carte vers laquelle on vient d'être amené (résumé des points en attente,
   contrôle avant PDF) : signalée deux secondes et demie. */
.certibeau-carte.certibeau-carte-montree {
  outline: 3px solid var(--lumo-primary-color);
  outline-offset: 3px;
}

/* Rapport CertIBEau, questionnaire Assainissement : la question ou la ligne
   de la fiche vers laquelle on vient d'être amené (contrôle avant PDF,
   « Reprendre »), signalée deux secondes et demie. */
.cb-q-montree {
  outline: 3px solid var(--lumo-primary-color);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Une branche du logigramme à la fois, avec des contrôles lisibles sur toute la largeur. */
.certibeau-questionnaire, .cb-q-preparation, .cb-q-rubrique {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.cb-q-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lumo-contrast-20pct);
}
.cb-q-navigation-etape {
  flex: 1 1 10rem;
  white-space: normal;
  height: auto;
  min-height: 44px;
}
.cb-q-complements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 16px;
}
.cb-q-preparation > vaadin-details { margin-top: 16px; width: 100%; }
.cb-q-question {
  padding: 20px !important;
  gap: 16px !important;
  font-size: var(--lumo-font-size-l);
}
.cb-q-question > .cb-q-branches { gap: 12px !important; }
.cb-q-branches > vaadin-button { min-height: 44px; min-width: 90px; }
.cb-q-historique { display: flex; flex-direction: column; gap: 8px; }
.cb-q-historique > div { border-left: 3px solid var(--lumo-primary-color-50pct); padding-left: 12px; }
@media (max-width: 600px) {
  .cb-q-question { padding: 12px !important; }
  .cb-q-ligne > span { min-width: 0 !important; flex-basis: 100% !important; }
}