/* Hallmark · checked: 2026-10-29 · genre: modern-minimal (inferred)
 * floor: 0 FAIL · fixed: 6 (20, 27, 39a, 48, 26b, 3) · structural: 0 printed
 * built: the project · redesign: polish · v2.0.0 */
/*
 * Composants du design system officine, transposés des composants Vue
 * de refonte/front/src/shared/ui (classes Tailwind → règles CSS natives).
 */

/* --- UiPanneau ---------------------------------------------------------- */
.panneau {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-2xl); background: var(--color-cepi-gris-clair);
}
.panneau__entete {
  display: flex; min-height: 2.75rem; flex-shrink: 0; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem;
}
.panneau__titre { flex: 1; text-align: center; }
.panneau__corps { min-height: 0; flex: 1; padding: 0.5rem; }

/* --- UiBouton ----------------------------------------------------------- */
.bouton {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.375rem;
  border-radius: var(--radius-full); font-family: var(--font-poppins); font-weight: 500; text-align: center;
  min-height: 1.75rem; padding: 0.25rem 1rem; font-size: var(--text-sm); line-height: var(--text-sm--lh);
  background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur);
}
.bouton--grande { min-height: 2.75rem; padding: 0.5rem 2rem; font-size: var(--text-base); line-height: var(--text-base--lh); }
.bouton--secondaire {
  background: var(--color-cepi-blanc-pur); color: var(--color-cepi-bleu-cyan);
  box-shadow: inset 0 0 0 1px var(--color-cepi-bleu-cyan);
}
.bouton:not(:disabled):not([aria-disabled='true']):hover { filter: brightness(1.1); }
.bouton--secondaire:not(:disabled):not([aria-disabled='true']):hover { filter: none; background: var(--color-cepi-gris-clair); }
.bouton:disabled, .bouton[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; }
.bouton:not(:disabled):not([aria-disabled='true']):active { transform: translateY(1px); }

/* --- UiBoutonIcone ------------------------------------------------------ */
.bouton-icone {
  position: relative; display: inline-flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  align-items: center; justify-content: center; border-radius: var(--radius-full);
  font-size: var(--text-xl); background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur);
}
.bouton-icone .iconify { width: 1.5rem; height: 1.5rem; }
.bouton-icone:not(:disabled):not([aria-disabled='true']):hover { filter: brightness(1.1); }
.bouton-icone:disabled, .bouton-icone[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; }
.bouton-icone:not(:disabled):not([aria-disabled='true']):active { transform: translateY(1px); }
.bouton-icone--transparent { background: transparent; }

/* Infobulle (TooltipContent) : une seule, positionnée par js/ui/infobulle.js */
.infobulle {
  position: fixed; z-index: 60; pointer-events: none; max-width: 20rem;
  border-radius: var(--radius-md); background: var(--color-cepi-gris-fonce); color: var(--color-cepi-blanc-pur);
  padding: 0.25rem 0.5rem; font-size: var(--text-xs); line-height: var(--text-xs--lh); box-shadow: var(--shadow-md);
}

/* --- UiRaccourci (badge) ------------------------------------------------ */
.raccourci {
  pointer-events: none; position: absolute; z-index: 1; min-width: 1.25rem;
  border-radius: var(--radius-md); background: var(--color-cepi-gris-fonce); color: var(--color-cepi-blanc-pur);
  padding: 0 0.25rem; text-align: center; font-family: var(--font-mono); font-size: var(--text-2xs);
  line-height: var(--text-2xs--lh); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-cepi-blanc-pur);
  right: -0.375rem; bottom: -0.375rem;
}
.raccourci--bas-gauche { right: auto; left: -0.375rem; }
.raccourci--haut-droite { bottom: auto; top: -0.375rem; }
.raccourci--haut-gauche { bottom: auto; right: auto; top: -0.375rem; left: -0.375rem; }
/* Badge dans le flux (touches F1 à F12 des boutons de fin de vente) */
.raccourci--en-ligne { position: static; flex-shrink: 0; box-shadow: none; }

/* --- UiTuile ------------------------------------------------------------ */
.tuile {
  position: relative; display: flex; width: 100%; min-height: 2.5rem; align-items: center; justify-content: center;
  border-radius: var(--radius-2xl); border: 2px solid transparent; background: var(--color-cepi-blanc-pur);
  padding: 0 0.5rem; text-align: center; font-size: var(--text-sm); line-height: 1.25; font-weight: 600;
  hyphens: auto; box-shadow: var(--shadow-sm); color: var(--color-cepi-bleu-cyan);
}
.tuile:not(:disabled):hover { background: var(--color-cepi-gris-clair); }
.tuile:disabled { opacity: 0.6; cursor: not-allowed; }
.tuile:not(:disabled):active { transform: translateY(1px); }
.tuile--alerte { border-color: var(--color-cepi-rouge); color: var(--color-texte-rouge); }
.tuile--succes { border-color: var(--color-cepi-vert); color: var(--color-texte-vert); }
.tuile__pastille {
  position: absolute; top: -0.5rem; right: 0.75rem; border-radius: var(--radius-md); padding: 0 0.375rem;
  font-size: var(--text-xs); line-height: 1.25rem; font-weight: 600; color: var(--color-cepi-blanc-pur);
  background: var(--color-cepi-bleu-cyan);
}
.tuile--alerte .tuile__pastille { background: var(--color-texte-rouge); }
.tuile--succes .tuile__pastille { background: var(--color-texte-vert); }

/* --- UiTableau ---------------------------------------------------------- */
.tableau { overflow-y: auto; border-radius: var(--radius-2xl); background: var(--color-cepi-blanc-pur); box-shadow: var(--shadow-sm); }
.tableau table { width: 100%; font-size: var(--text-sm); line-height: var(--text-sm--lh); }
.tableau thead { position: sticky; top: 0; z-index: 1; }
.tableau th {
  height: 3rem; border-left: 2px solid var(--color-cepi-blanc); padding: 0 1rem; white-space: nowrap; text-align: center;
}
.tableau th:first-child { border-left: 0; }
.tableau tbody { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.tableau tbody tr { height: 2.5rem; }
.tableau tbody tr:nth-child(even) { background: var(--fond-vert); }
.tableau td { padding: 0 1rem; white-space: nowrap; text-align: center; }
.tableau .gauche { text-align: left; }
.tableau .droite { text-align: right; }
.tableau .principale { width: 100%; }
.tableau__vide td { font-weight: 400; font-style: italic; color: var(--color-texte-gris); text-align: center; }
.tableau__vide:nth-child(even) { background: transparent !important; }

/* --- UiModal : css/fenetres.css (une forme par intention) --------------- */

/* --- UiToast ------------------------------------------------------------ */
.toasts { position: fixed; top: 0; right: 0; z-index: 70; display: flex; width: 24rem; max-width: 100%; flex-direction: column; gap: 0.5rem; padding: 1rem; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 0.5rem; border-radius: var(--radius-2xl);
  background: var(--color-cepi-blanc-pur);
  padding: 0.75rem 0.5rem 0.75rem 1rem; box-shadow: var(--shadow-lg);
  transition: translate 300ms ease-out, opacity 300ms ease-out;
}
@starting-style { .toast { opacity: 0; translate: 100% 0; } }
.toast--sortie { opacity: 0; translate: 100% 0; transition-timing-function: ease-in; }
.toast__texte { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.125rem; }
.toast__titre { font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.toast--alerte .toast__titre { color: var(--color-texte-rouge); }
.toast--succes .toast__titre { color: var(--color-texte-vert); }
.toast__description { font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); }
.toast__fermer { display: inline-flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-cepi-gris-fonce); }
.toast__fermer:hover { background: var(--color-cepi-gris-clair); }

/* --- UiInput / UiSelect / UiInputDate / UiInputNumber ------------------ */
.champ { display: flex; flex-direction: column; min-width: 0; }
.champ__ligne { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.champ__icone { flex-shrink: 0; color: var(--color-cepi-bleu-cyan); display: inline-flex; }
.champ__icone .iconify { width: 1.5rem; height: 1.5rem; }
.champ__libelle { flex-shrink: 0; }
.champ__boite {
  position: relative; display: flex; align-items: center; height: 1.75rem; min-width: 0; flex: 1;
  border-radius: var(--radius-full); font-size: var(--text-sm); background: var(--color-cepi-blanc-pur);
  box-shadow: inset 0 0 0 1px var(--color-cepi-gris);
}
.champ__boite:focus-within { outline: 2px solid var(--couleur-focus); }
.champ--pastille .champ__boite { box-shadow: inset 0 0 0 1px var(--color-cepi-gris), var(--shadow-sm); }
.champ--erreur .champ__boite { box-shadow: inset 0 0 0 2px var(--color-cepi-rouge); }
.champ--lecture-seule:not(.champ--desactive) .champ__boite { background: var(--color-cepi-gris-pale); }
.champ--desactive { opacity: 0.6; }
.champ__libelle-interne {
  display: flex; flex-shrink: 0; align-items: center; align-self: stretch; padding: 0 1rem;
  font-family: var(--font-poppins); font-weight: 500;
}
.champ--pastille .champ__libelle-interne { border-radius: var(--radius-full) 0 0 var(--radius-full); background: var(--color-texte-vert); color: var(--color-cepi-blanc-pur); }
.champ--onglet .champ__libelle-interne { border-right: 1px solid var(--color-cepi-gris); color: var(--color-cepi-bleu-cyan); }
.champ__controle {
  height: 100%; min-width: 0; flex: 1; padding: 0 0.75rem; border-radius: inherit;
  font-weight: 600; color: var(--color-cepi-bleu-cyan); background: transparent;
}
.champ__controle::placeholder { font-weight: 400; font-style: italic; color: var(--color-texte-gris); }
.champ__controle:disabled { cursor: not-allowed; }
select.champ__controle { appearance: none; cursor: default; padding-right: 1.5rem; }
.champ__suffixe { display: flex; flex-shrink: 0; align-items: center; padding-right: 0.5rem; color: var(--color-cepi-gris-fonce); pointer-events: none; }
.champ__suffixe .iconify { width: 0.875rem; height: 0.875rem; }
.champ__fleche { position: absolute; right: 0.5rem; pointer-events: none; color: var(--color-cepi-gris-fonce); }
.champ__fleche .iconify { width: 0.75rem; height: 0.75rem; }
.champ__aide, .champ__erreur { padding: 0.125rem 0 0 0.5rem; }

/* En grille : icône, libellé et champ prennent les colonnes du parent (subgrid). */
.champ--grille { display: grid; grid-template-columns: subgrid; align-items: center; }
.champ--grille .champ__ligne { display: contents; }
.champ--grille .champ__libelle { justify-self: end; text-align: right; }
.champ--grille .champ__boite { grid-column: -2 / -1; }
.champ--grille.champ--pastille .champ__boite.avec-libelle,
.champ--grille.champ--onglet .champ__boite.avec-libelle { grid-column: -3 / -1; display: grid; grid-template-columns: subgrid; column-gap: 0; }
.champ--grille .champ__aide, .champ--grille .champ__erreur { grid-column: -2 / -1; }

/* --- UiInputRecherche --------------------------------------------------- */
.recherche { display: flex; flex-direction: column; }
.recherche__boite {
  display: inline-flex; width: 100%; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.75rem 0 1rem;
  border-radius: var(--radius-full); background: var(--color-cepi-blanc-pur); box-shadow: var(--shadow-sm);
}
.recherche__boite:focus-within { outline: 2px solid var(--couleur-focus); }
.recherche--grande .recherche__boite { height: 3rem; padding: 0 1.25rem 0 1.5rem; }
.recherche__champ { height: 100%; min-width: 0; flex: 1; font-size: var(--text-sm); color: var(--color-cepi-bleu-cyan); }
.recherche--grande .recherche__champ { font-size: var(--text-lg); }
.recherche__champ::placeholder { font-weight: 400; font-style: italic; color: var(--color-texte-gris); }
.recherche__effacer { display: flex; flex-shrink: 0; border-radius: var(--radius-full); color: var(--color-texte-gris); }
.recherche__effacer:focus-visible { outline: 2px solid var(--couleur-focus); }
.recherche__effacer .iconify { width: 1rem; height: 1rem; }
.recherche--grande .recherche__effacer .iconify { width: 1.5rem; height: 1.5rem; }
.recherche__loupe { color: var(--color-cepi-gris-souris); width: 1.25rem; height: 1.25rem; }
.recherche--grande .recherche__loupe { width: 1.75rem; height: 1.75rem; }

/* --- Listes déroulantes : ResultatsRecherche, UiDropdown, suggestions --- */
.liste-flottante {
  position: absolute; z-index: 50; overflow-y: auto; border-radius: var(--radius-2xl); background: var(--color-cepi-blanc-pur);
  padding: 0.375rem; font-size: var(--text-sm); box-shadow: var(--shadow-lg);
}
.liste-flottante__groupe { padding: 0.25rem 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-gris-fonce); }
.liste-flottante__element {
  display: flex; min-height: 2.25rem; cursor: pointer; align-items: center; gap: 0.5rem; border-radius: var(--radius-xl);
  padding: 0.25rem 0.75rem; font-weight: 600; color: var(--color-cepi-bleu-cyan); user-select: none;
}
.liste-flottante__element[aria-selected='true'], .liste-flottante__element:hover { background: var(--color-cepi-gris-clair); }
.liste-flottante__element[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; }
.liste-flottante__vide { padding: 0.25rem 0.75rem; font-weight: 400; font-style: italic; color: var(--color-texte-gris); }
.liste-flottante__secondaire { margin-left: 0.75rem; font-weight: 400; color: var(--color-cepi-gris-fonce); }

.liste-suggestions { border-radius: var(--radius-sm); border: 1px solid var(--color-cepi-gris); padding: 0.25rem; font-size: var(--text-xs); box-shadow: var(--shadow-md); }
.liste-suggestions .liste-flottante__element { min-height: 0; border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; }

/* --- UiCheckbox --------------------------------------------------------- */
.case { display: flex; align-items: center; gap: 0.375rem; }
.case__controle {
  appearance: none; display: inline-grid; place-content: center; width: 0.875rem; height: 0.875rem; flex-shrink: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--color-cepi-bleu-cyan); background: var(--color-cepi-blanc-pur); cursor: pointer;
}
.case__controle:checked { background: var(--color-cepi-bleu-cyan); }
.case__controle:checked::after {
  content: ''; width: 0.75rem; height: 0.75rem; background: var(--color-cepi-blanc-pur);
  -webkit-mask: var(--svg-coche) center / 100% no-repeat; mask: var(--svg-coche) center / 100% no-repeat;
}
.case__controle:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.case__controle:disabled { cursor: not-allowed; }
.case--gauche .case__libelle { order: -1; }
.case--desactive { opacity: 0.6; }

/* --- UiSwitch ----------------------------------------------------------- */
.interrupteur { display: flex; align-items: center; gap: 0.375rem; }
.interrupteur__controle {
  appearance: none; display: inline-flex; width: 2.25rem; height: 1.25rem; flex-shrink: 0; align-items: center;
  border-radius: var(--radius-full); background: var(--color-cepi-gris); padding: 0.125rem; cursor: pointer; transition: background-color 150ms;
}
.interrupteur__controle::before {
  content: ''; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--color-cepi-blanc-pur);
  box-shadow: var(--shadow-sm); transition: transform 150ms;
}
.interrupteur__controle:checked { background: var(--color-cepi-bleu-cyan); }
.interrupteur__controle:checked::before { transform: translateX(1rem); }
.interrupteur__controle:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.interrupteur--gauche .interrupteur__libelle { order: -1; }
.interrupteur--desactive { opacity: 0.6; }

/* Coche partagée (material-symbols--check) */
:root {
  --svg-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z'/%3E%3C/svg%3E");
}

/* Mouvement réduit : la notification apparaît sans glisser, les pressions ne bougent pas. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast--sortie { translate: none; transition-property: opacity; }
  @starting-style { .toast { translate: none; } }
  .bouton:active, .bouton-icone:active, .tuile:active { transform: none; }
}