/* Intendanc'EI : styles propres à l'outil, chargés après le kit EEIF (public/static/charte).
   Couleurs, polices, espacements et rayons viennent des jetons de la charte (tokens.css) : les
   variables historiques de l'outil (--blue, --gray-200…) n'en sont plus que des alias. Seules les
   couleurs métier gardent leurs valeurs (section « Codes couleur métier ») : types de repas
   (cacheroute), catégories de commande et activités, que les équipes retrouvent sur la grille
   Excel et les étiquettes. Thème clair seul (charte), aucune règle sombre. */
:root {
  --navy: var(--bleu-eeif);
  --blue: var(--bleu-eeif); --blue-700: var(--bleu-profond); --blue-50: var(--bleu-doux); --blue-100: var(--bleu-doux);
  --green: var(--succes); --green-700: var(--succes); --green-50: var(--succes-doux); --green-100: var(--succes-doux);
  --red: var(--danger); --red-700: var(--danger); --red-50: var(--danger-doux); --red-100: var(--danger-doux);
  --amber: var(--orange-eeif); --amber-50: var(--orange-doux); --amber-100: var(--orange-doux); --amber-800: var(--orange-fonce);
  --violet: var(--bleu-eeif); --violet-50: var(--bleu-doux); --violet-100: var(--bleu-doux);
  --emerald-100: var(--succes-doux); --emerald-800: var(--succes); --indigo-100: var(--bleu-doux); --indigo-800: var(--bleu-profond);
  --gray-50: var(--fond); --gray-100: var(--surface-creuse); --gray-200: var(--trait); --gray-300: var(--trait-fort);
  --gray-400: var(--encre-douce); --gray-500: var(--encre-douce); --gray-600: var(--encre-douce);
  --gray-700: var(--encre); --gray-800: var(--encre); --gray-900: var(--encre);
  --bg: var(--fond); --fg: var(--encre);
  --radius: var(--rayon-md); --radius-lg: var(--rayon-lg);
  /* Charte : pas d'ombre sur une carte posée, l'ombre est pour ce qui flotte (menus, dialogues). */
  --shadow: none; --shadow-lg: var(--ombre-flottante);
  --font: var(--font-texte); --mono: var(--font-mono);
  --voile: rgb(28 31 42 / .5);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--text-corps); background: var(--fond); color: var(--encre); -webkit-font-smoothing: antialiased; }
main#contenu { flex: 1; width: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--bleu-eeif); }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-family: var(--font-titre); font-weight: 600; line-height: 1.25; color: var(--encre); }
h1 { font: var(--text-titre-page); color: var(--encre); } h2 { font: var(--text-titre-bloc); color: var(--bleu-eeif); } h3 { font-size: 1rem; }
@media (max-width: 600px) { h1 { font-size: 1.6rem; } }
p { margin: 0 0 .5rem; }
ul, ol { margin: 0; padding-left: 1.25rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Saisie en 16 px sur téléphone : iOS ne zoome pas sur le champ. */
@media (max-width: 640px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }

/* Layout */
.container { max-width: 80rem; margin: 0 auto; padding: var(--espace-6) max(var(--espace-4), env(safe-area-inset-right)) var(--espace-7) max(var(--espace-4), env(safe-area-inset-left)); }
.container-narrow { max-width: 48rem; margin: 0 auto; padding: var(--espace-6) var(--espace-4) var(--espace-7); }
.container-md { max-width: 64rem; margin: 0 auto; padding: var(--espace-6) var(--espace-4) var(--espace-7); }
.container-wide { max-width: none; margin: 0 auto; padding: var(--espace-6) var(--espace-4) var(--espace-7); }
.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.row-end { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Téléphone : pas d'espace perdu au-dessus du titre ni avant le pied de page. */
@media (max-width: 600px) { .container, .container-narrow, .container-md, .container-wide { padding-top: var(--espace-4); padding-bottom: var(--espace-4); } }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.muted { color: var(--encre-douce); } .small { font-size: .875rem; } .tiny { font-size: .8rem; } .bold { font-weight: 600; }
.text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint { font-size: .8rem; color: var(--encre-douce); margin: .25rem 0 0; }
.mono { font-family: var(--font-mono); }
.hidden-mobile { } .hidden-desktop { display: none; }
@media (max-width: 768px) { .hidden-mobile { display: none !important; } .hidden-desktop { display: initial; } }
.tabular { font-variant-numeric: tabular-nums; }

/* En-tête (x-ei.en-tete) : navigation de l'outil dans son emplacement. Au-delà de 1024 px, les
   liens en ligne ; en dessous, un bouton « Menu » qui ouvre un panneau sous la barre. */
.ei-header .ei-header__nav { flex-wrap: nowrap; align-items: center; min-width: 0; }
.ie-nav__liens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1) var(--espace-4); }
.ie-nav__liens a { color: var(--encre); font: var(--text-bouton); text-decoration: none; padding: var(--espace-1) 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ie-nav__liens a:hover, .ie-nav__liens a[aria-current=page] { border-bottom-color: var(--orange-eeif); color: var(--bleu-eeif); }
.ie-nav__bouton { display: none; align-items: center; gap: var(--espace-2); min-height: 44px; padding: 0 var(--espace-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); background: var(--surface); color: var(--bleu-eeif); font: var(--text-bouton); }
.ie-nav__bouton:hover, .ie-nav__bouton[aria-expanded=true] { background: var(--bleu-doux); }
@media (max-width: 1024px) {
  .ie-nav__bouton { display: inline-flex; }
  .ie-nav__liens { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; flex-direction: column; align-items: stretch; gap: 0; padding: var(--espace-2) max(var(--espace-4), env(safe-area-inset-right)) var(--espace-3) max(var(--espace-4), env(safe-area-inset-left)); background: var(--surface); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-flottante); }
  .ie-nav__liens.open { display: flex; }
  .ie-nav__liens a { min-height: 44px; padding: var(--espace-2) var(--espace-3); border-bottom: 0; border-left: 3px solid transparent; border-radius: 0 var(--rayon-md) var(--rayon-md) 0; justify-content: space-between; }
  .ie-nav__liens a[aria-current=page] { background: var(--bleu-doux); border-left-color: var(--orange-eeif); }
}
/* Administrateur dans le camp d'un intendant : bandeau d'accent sous l'en-tête (orange en soulignement,
   jamais en fond de texte). */
.campmode-bar { background: var(--orange-doux); color: var(--encre); border-bottom: 3px solid var(--orange-eeif); font: var(--text-corps-petit); }
.campmode-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: var(--espace-2); padding-bottom: var(--espace-2); }
.link-danger { background: none; border: 0; color: var(--danger); font-size: .875rem; font-weight: 600; padding: 0; }
.badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 .25rem; border-radius: var(--rayon-pilule); background: var(--danger); color: var(--sur-danger); font-size: 10px; font-weight: 700; line-height: 1; }

/* Cartes : surface blanche et trait fin, sans ombre (charte). */
.card { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-xl); padding: var(--espace-4); }
.card-lg { padding: var(--espace-6); }
@media (max-width: 600px) { .card-lg { padding: var(--espace-5) 18px; } }
.card-flat { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); padding: var(--espace-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--trait); background: var(--surface-creuse); border-radius: var(--rayon-xl) var(--rayon-xl) 0 0; }
.card-body { padding: 1rem 1.25rem; }
.card-nav { display: block; padding: 1.25rem; background: var(--surface); border-radius: var(--rayon-xl); border: 1px solid var(--trait); text-decoration: none; color: inherit; transition: border-color .15s; }
.card-nav:hover { border-color: var(--bleu-eeif); }
.card-nav .ei-icone { color: var(--bleu-eeif); margin-bottom: .5rem; }
.card-nav h3 { margin-bottom: .25rem; color: var(--bleu-eeif); }
.card-nav p { color: var(--encre-douce); font-size: .875rem; margin: 0; }
.stat { background: var(--surface-creuse); border-radius: var(--rayon-md); padding: 1rem; }
.stat.editing { background: var(--bleu-doux); }
.stat label, .stat .label { display: block; font-size: .875rem; font-weight: 600; color: var(--encre); margin-bottom: .25rem; }
.stat .value { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600; color: var(--encre); }
.stat .value-sm { font-size: 1rem; font-weight: 700; }
.stat input { width: 100%; font-size: 1.5rem; font-weight: 700; padding: .25rem .5rem; border: 2px solid var(--bleu-eeif); border-radius: var(--rayon-xs); background: var(--surface); }
.stat .sub { font-size: .8rem; color: var(--encre-douce); margin-top: .25rem; }
.stat.dim { opacity: .6; }
details.panel { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); }
details.panel > summary { padding: .55rem 1.25rem; min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: "+"; color: var(--encre-douce); font-size: 1.125rem; }
details.panel[open] > summary::after { content: "−"; }
details.panel > .panel-body { padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--trait); font-size: .92rem; color: var(--encre); }
/* Accordéon groupé (FAQ) : une seule carte, les questions séparées d'un trait, sans espace perdu entre elles. */
.ie-accordeon { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); overflow: hidden; }
.ie-accordeon > details.panel { border: 0; border-radius: 0; }
.ie-accordeon > details.panel + details.panel { border-top: 1px solid var(--trait); }

/* Boutons : l'apparence de .ei-btn (kit), déclinée pour les écrans denses (sm, xs). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 9px var(--espace-4); border-radius: var(--rayon-md); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--bleu-eeif); font: var(--text-bouton); text-decoration: none; white-space: nowrap; transition: background .15s; min-height: 40px; }
.btn:hover { background: var(--bleu-doux); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--bleu-eeif); border-color: var(--bleu-eeif); color: var(--sur-bleu); } .btn-primary:hover { background: var(--bleu-profond); }
.btn-success { background: var(--succes); border-color: var(--succes); color: var(--sur-bleu); } .btn-success:hover { background: var(--succes); filter: brightness(.9); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--sur-danger); } .btn-danger:hover { background: var(--danger); filter: brightness(.9); }
.btn-violet { background: var(--bleu-eeif); border-color: var(--bleu-eeif); color: var(--sur-bleu); }
.btn-white { background: var(--surface); border-color: var(--trait-fort); color: var(--bleu-eeif); }
.btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--bleu-doux); }
.btn-outline { background: var(--surface); border-color: var(--trait-fort); color: var(--bleu-eeif); } .btn-outline:hover { background: var(--bleu-doux); }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; min-height: 2rem; }
.btn-xs { padding: .2rem .55rem; font-size: .8rem; min-height: 1.75rem; }
.btn-block { width: 100%; }
.btn-soft-blue { background: var(--bleu-doux); border-color: var(--bleu-doux); color: var(--bleu-eeif); } .btn-soft-blue:hover { border-color: var(--bleu-eeif); }
.btn-soft-red { background: var(--danger-doux); border-color: var(--danger-doux); color: var(--danger); } .btn-soft-red:hover { border-color: var(--danger); }
.btn-soft-green { background: var(--succes-doux); border-color: var(--succes-doux); color: var(--succes); }
.btn-soft-amber { background: var(--orange-doux); border-color: var(--orange-eeif); color: var(--orange-fonce); }
.btn-soft-gray { background: var(--surface-creuse); border-color: var(--surface-creuse); color: var(--encre); }
.btn.active { background: var(--bleu-eeif); border-color: var(--bleu-eeif); color: var(--sur-bleu); }
.link { background: none; border: 0; padding: 0; color: var(--bleu-eeif); font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); }

/* Badges : forme .ei-badge (kit). Un statut porte toujours un mot, jamais la couleur seule. */
.badge { display: inline-flex; align-items: center; padding: 2px var(--espace-3); border-radius: var(--rayon-pilule); font: var(--text-etiquette); white-space: nowrap; }
.badge-blue, .badge-indigo, .badge-violet { background: var(--bleu-doux); color: var(--bleu-eeif); }
.badge-emerald, .badge-green, .badge-teal { background: var(--succes-doux); color: var(--succes); }
.badge-amber { background: var(--orange-doux); color: var(--orange-fonce); }
.badge-red { background: var(--danger-doux); color: var(--danger); }
.badge-gray { background: var(--surface-creuse); color: var(--encre-douce); }
.code { font: var(--text-code); font-weight: 600; padding: .1rem .35rem; border-radius: var(--rayon-xs); background: var(--surface-creuse); color: var(--encre); }

/* Formulaires : l'apparence de .ei-field, .ei-label, .ei-input du kit. */
.field { display: flex; flex-direction: column; gap: var(--espace-1); }
.field label, .label { font-size: .92rem; font-weight: 600; color: var(--encre); }
.field input, .field select, .field textarea, .input, .select, .textarea { width: 100%; max-width: 100%; min-width: 0; padding: 9px var(--espace-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); background: var(--surface); color: var(--encre); font-size: .95rem; }
.input-lg { padding: .625rem .75rem; font-size: 1rem; }
.field input:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field .errorlist { list-style: none; padding: 0; color: var(--danger); font-size: .875rem; font-weight: 600; }
.form-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-toggle { position: relative; display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: var(--rayon-md); border: 1px solid var(--trait); background: var(--surface-creuse); color: var(--encre); font-size: .875rem; font-weight: 600; }
.chip-toggle[aria-pressed=true], .chip-toggle:has(input:checked) { background: var(--bleu-eeif); border-color: var(--bleu-eeif); color: var(--sur-bleu); }
.chip-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-toggle:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.search { width: 100%; padding: .625rem 1rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); background: var(--surface); font-size: .95rem; }

/* Alertes : l'apparence de .ei-alerte ; l'avertissement reprend l'encadré .ei-note. */
.alert { border-radius: var(--rayon-md); padding: var(--espace-3) var(--espace-4); font: var(--text-corps-petit); border: 0; }
.alert-error { background: var(--danger-doux); color: var(--danger); font-weight: 600; }
.alert-info { background: var(--bleu-doux); color: var(--bleu-eeif); }
.alert-warn { background: var(--orange-doux); color: var(--encre); border-left: 4px solid var(--orange-eeif); border-radius: var(--rayon-sm); }
.alert-warn :is(h2, h3, strong, .bold) { color: var(--orange-fonce); }
.alert-success { background: var(--succes-doux); color: var(--succes); font-weight: 600; }
.alert-violet { background: var(--bleu-doux); color: var(--bleu-eeif); }

/* Tableaux : l'apparence de .ei-table (kit). */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; padding: var(--espace-2) var(--espace-3); color: var(--bleu-eeif); background: var(--surface-creuse); font-family: var(--font-titre); font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--trait); }
.table td { padding: var(--espace-2) var(--espace-3); border-bottom: 1px solid var(--trait); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--bleu-doux); }
.table .center { text-align: center; } .table .right { text-align: right; }
.table tr.warn td { background: var(--orange-doux); }
.list { list-style: none; padding: 0; margin: 0; }
.list > li { padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
.list > li:last-child { border-bottom: 0; }

/* Messages éphémères */
.toasts { position: fixed; top: 1rem; right: 1rem; left: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
@media (min-width: 640px) { .toasts { left: auto; width: 22rem; } }
.toast { pointer-events: auto; padding: .75rem 1rem; border-radius: var(--rayon-md); color: var(--sur-bleu); box-shadow: var(--ombre-flottante); font: var(--text-corps-petit); font-weight: 600; animation: toast-in .2s ease-out; }
.toast-success { background: var(--succes); } .toast-error { background: var(--danger); } .toast-info { background: var(--bleu-eeif); } .toast-warning { background: var(--orange-eeif); color: var(--sur-orange); }
.toast.exiting { opacity: 0; transform: translateY(-.5rem); transition: all .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.exiting { transition: none; } }

/* Fenêtres modales : l'apparence de .ei-dialog (kit). */
dialog.modal { border: 1px solid var(--trait); border-radius: var(--rayon-lg); padding: 0; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante); overflow: auto; }
dialog.modal-sm { width: min(28rem, calc(100vw - 2rem)); }
dialog.modal-lg { width: min(56rem, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: var(--voile); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--trait); }
.modal-title { font: var(--text-titre-bloc); color: var(--bleu-eeif); margin: 0; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-close { flex-shrink: 0; background: none; border: 0; color: var(--encre-douce); font-size: 1.5rem; line-height: 1; width: 44px; height: 44px; border-radius: var(--rayon-md); }
.modal-close:hover { background: var(--bleu-doux); color: var(--bleu-eeif); }
/* Confirmation d'une suppression : le dialogue du kit (ouverture en 280 ms, fermeture en 90 ms), plus étroit, sans
   bouton Fermer (Échap, le fond et « Annuler » ferment). Mouvement réduit : un fondu court, sans déplacement. */
.ie-confirmation { width: min(100% - 2 * var(--espace-4), 28rem); }
.ie-confirmation .ei-dialog__corps { gap: var(--espace-3); }
.ie-confirmation .ei-dialog__corps > :first-child { margin-right: 0; }
.ie-confirmation p { margin: 0; }
.ie-confirmation__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-3); margin-top: var(--espace-2); }
:root.ei-mouvement-reduit .ie-confirmation, :root.ei-mouvement-reduit .ie-confirmation::backdrop { transition-duration: 120ms; }
@media (max-width: 640px) { dialog.modal { width: 100vw; max-width: none; max-height: 100vh; margin: 0; border-radius: 0; height: 100vh; } dialog.modal-sm { height: auto; margin: auto; width: calc(100vw - 2rem); border-radius: var(--rayon-lg); } }

/* Écran de connexion : section.ei-connexion du kit, logo de l'outil (64 px : avec le bouton Passeport EI et le
   compte de camp ouvert, l'écran tient sans défiler dès 1280 × 720). */
.ie-logo { width: 64px; height: 64px; object-fit: contain; }
/* Choix exclusif en puces (branche à la première configuration) : sans le cadre par défaut d'un fieldset. */
.ie-choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.ie-choix > legend { padding: 0; margin-bottom: .35rem; }
/* Connexion : le compte de camp, replié sous le bouton Passeport EI (lien d'action du kit, sans triangle). */
.ie-compte-camp > summary { list-style: none; }
.ie-compte-camp > summary::-webkit-details-marker { display: none; }
.ie-compte-camp[open] > form { margin-top: var(--espace-3); }

/* Chargement */
.spinner { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; border-bottom-color: var(--bleu-eeif); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
/* Pendant une action ; jamais pendant un rafraîchissement de fond du temps réel (.rt-fond, posé par app.js), ni quand
   un bouton du kit montre déjà qu'il travaille (un bouton atténué perdrait son contraste). */
.htmx-request:not(.rt-fond):not(.ei-btn):not(:has(.ei-btn[aria-busy="true"])) { opacity: .8; }
/* Bouton à états du kit sur les boutons de l'outil (x-ie.bouton, dépôt d'un fichier) : leur apparence, les états du
   kit (mouvement.css) ; réussi sur fond succès, en erreur sur fond danger. */
.btn.ei-btn { transition: transform var(--duree-vif) var(--ressort-vif), background-color var(--duree-couleur) ease-out, color var(--duree-couleur) ease-out, border-color var(--duree-couleur) ease-out; }
.btn.ei-btn[data-etat="succes"] { background: var(--succes); border-color: var(--succes); color: var(--sur-bleu); }
.btn.ei-btn[data-etat="erreur"] { background: var(--danger); border-color: var(--danger); color: var(--sur-danger); }

/* Grille des menus */
.planning-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .planning-layout { grid-template-columns: 18rem minmax(0, 1fr); } }
.sidebar { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); padding: .75rem; max-height: calc(100vh - 8rem); overflow: auto; position: sticky; top: 1rem; }
.menu-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: var(--rayon-md); cursor: grab; border: 2px solid transparent; font-size: .85rem; }
.menu-item:hover { background: var(--fond); }
.menu-item.selected { border-color: var(--bleu-eeif); background: var(--bleu-doux); }
.menu-item.dragging { opacity: .5; }
.grid-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); }
table.planning { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .85rem; }
.planning th, .planning td { border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); vertical-align: top; }
.planning th { background: var(--surface-creuse); color: var(--bleu-eeif); font-family: var(--font-titre); padding: .5rem; text-align: center; font-weight: 600; position: sticky; top: 0; z-index: 2; }
.planning th.day { min-width: 11rem; }
.planning th.today { background: var(--bleu-doux); color: var(--bleu-eeif); box-shadow: inset 0 -3px 0 var(--orange-eeif); }
.planning td.rowhead { background: var(--surface-creuse); font-weight: 600; padding: .5rem; white-space: nowrap; position: sticky; left: 0; z-index: 1; min-width: 6rem; }
.planning .activite { background: var(--surface); padding: .25rem; }
.planning .activite select { width: 100%; font-size: .8rem; padding: .25rem; border-radius: var(--rayon-xs); border: 1px solid var(--trait-fort); background: var(--surface); }
.slot { min-height: 4.25rem; padding: .35rem; position: relative; transition: background .1s; }
.slot.drop-target { background: var(--bleu-doux); outline: 2px dashed var(--bleu-eeif); outline-offset: -2px; }
.slot.disabled { background: repeating-linear-gradient(45deg, var(--surface-creuse), var(--surface-creuse) 6px, var(--surface) 6px, var(--surface) 12px); }
.slot .empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 3.5rem; color: var(--encre-douce); font-size: .8rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-sm); background: transparent; width: 100%; cursor: pointer; }
.slot .empty:hover { background: var(--bleu-doux); color: var(--bleu-eeif); }
.slot.selectable .empty { border-color: var(--bleu-eeif); color: var(--bleu-eeif); }
.menu-cell { border-radius: var(--rayon-sm); padding: .35rem .5rem; position: relative; font-size: .85rem; }
.menu-cell .name { font-weight: 600; line-height: 1.2; }
.menu-cell .sub { font-size: .75rem; opacity: .85; margin-top: .15rem; }
.menu-cell .x { position: absolute; top: .15rem; right: .25rem; border: 0; background: rgb(255 255 255 / .75); border-radius: 50%; width: 1.25rem; height: 1.25rem; line-height: 1; font-size: .875rem; display: none; }
.menu-cell:hover .x, .menu-cell:focus-within .x { display: inline-flex; align-items: center; justify-content: center; }
.course-line { display: flex; align-items: center; gap: .35rem; font-size: .75rem; padding: .1rem 0; }
.course-line .lbl { color: var(--encre-douce); width: 3rem; flex-shrink: 0; }
.course-line .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-line button { border: 0; background: none; color: var(--encre-douce); padding: 0 .2rem; }
.slot .extras { margin-top: .25rem; font-size: .75rem; color: var(--bleu-eeif); }
.period-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.period-tabs a, .period-tabs button { display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .8rem; border-radius: var(--rayon-pilule); border: 1px solid var(--trait-fort); background: var(--surface); font: var(--text-bouton); font-size: .85rem; text-decoration: none; color: var(--encre); }
.period-tabs [aria-current=true], .period-tabs .active { background: var(--bleu-eeif); color: var(--sur-bleu); border-color: var(--bleu-eeif); }
.mobile-day { border-radius: var(--rayon-lg); background: var(--surface); border: 1px solid var(--trait); }
.mobile-day .head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
.mobile-slot { padding: .75rem 1rem; border-bottom: 1px solid var(--trait); }
.mobile-slot .title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); font-weight: 600; margin-bottom: .35rem; }
.sheet { position: fixed; inset: auto 0 0 0; background: var(--surface); border-radius: var(--rayon-xl) var(--rayon-xl) 0 0; box-shadow: var(--ombre-flottante); max-height: 85vh; overflow: auto; z-index: 900; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); }
.sheet-backdrop { position: fixed; inset: 0; background: var(--voile); z-index: 899; }

/* Commandes */
.section-cat { border-radius: var(--rayon-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--trait); }
.section-cat > .head { padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-bottom: 1px solid var(--trait); }
.detail-rows { background: var(--fond); font-size: .8rem; }
.pain-table td, .pain-table th { text-align: center; }

/* Assistant : bouton flottant et panneau (ombre permise, ils flottent), sans dégradé (charte). */
.assistant-fab { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 800; display: flex; align-items: center; gap: .4rem; min-height: 48px; padding: .6rem 1rem; border-radius: var(--rayon-pilule); border: 1px solid var(--bleu-eeif); background: var(--bleu-eeif); color: var(--sur-bleu); box-shadow: var(--ombre-flottante); font: var(--text-bouton); cursor: pointer; }
.assistant-fab:hover { background: var(--bleu-profond); }
.assistant-fab-label { font-size: .9rem; }
.assistant-backdrop { position: fixed; inset: 0; z-index: 801; background: var(--voile); }
.assistant-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 802; width: min(26rem, calc(100vw - 2rem)); height: min(38rem, calc(100vh - 3rem)); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); box-shadow: var(--ombre-flottante); display: flex; flex-direction: column; overflow: hidden; animation: assistant-in .2s ease-out; }
@keyframes assistant-in { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assistant-panel { animation: none; } }
.assistant-panel .head { background: var(--bleu-eeif); color: var(--sur-bleu); padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-shrink: 0; }
.assistant-panel .head :is(h2, h3, strong) { color: var(--sur-bleu); }
.assistant-icon-btn { width: 44px; height: 44px; border: 0; border-radius: var(--rayon-md); background: transparent; color: var(--sur-bleu); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.assistant-icon-btn:hover { background: rgb(255 255 255 / .15); }
.assistant-icon-btn:disabled { opacity: .4; }
.assistant-messages { flex: 1; overflow: auto; padding: .75rem; display: flex; flex-direction: column; gap: .75rem; font-size: .92rem; background: var(--fond); }
.assistant-empty { text-align: center; padding: 1rem .25rem; display: flex; flex-direction: column; gap: 1rem; }
.assistant-suggestion { display: block; width: 100%; min-height: 44px; text-align: left; padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-lg); font-size: .92rem; color: var(--encre); cursor: pointer; }
.assistant-suggestion:hover { border-color: var(--bleu-eeif); background: var(--bleu-doux); }
.msg-wrap { display: flex; flex-direction: column; gap: .35rem; }
.msg { max-width: 90%; padding: .55rem .8rem; border-radius: var(--rayon-lg); word-break: break-word; }
.msg-user { align-self: flex-end; background: var(--bleu-eeif); color: var(--sur-bleu); border-bottom-right-radius: var(--rayon-xs); white-space: pre-wrap; }
.msg-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--trait); border-bottom-left-radius: var(--rayon-xs); max-width: 94%; }
.msg-assistant.msg-error { border-color: var(--orange-eeif); background: var(--orange-doux); color: var(--encre); }
.msg-body p { margin: 0; } .msg-body > * + * { margin-top: .25rem; } .msg-bullet { display: flex; gap: .4rem; padding-left: .25rem; } .msg-bullet::before { content: "•"; color: var(--bleu-eeif); } .msg-gap { height: .25rem; }
.msg-status { color: var(--encre-douce); font-size: .8rem; display: flex; align-items: center; gap: .4rem; }
.msg-status .spinner { width: .75rem; height: .75rem; border: 2px solid var(--bleu-eeif); border-top-color: transparent; animation: spin .8s linear infinite; }
.proposal { border: 1px solid var(--bleu-eeif); background: var(--bleu-doux); border-radius: var(--rayon-lg); padding: 0 0 .75rem; font-size: .85rem; overflow: hidden; }
.proposal > * { margin: .5rem .75rem 0; }
.proposal-head { margin: 0; padding: .5rem .75rem; background: var(--surface-creuse); display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--bleu-eeif); }
.proposal-state { color: var(--succes); }
.proposal-list, .proposal-warn { list-style: none; padding: 0; }
.proposal-list li + li { margin-top: .25rem; } .proposal-warn li { font-size: .75rem; color: var(--orange-fonce); }
.text-violet { color: var(--bleu-eeif); }
.assistant-form { display: flex; gap: .5rem; padding: .6rem .6rem max(.6rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); flex-shrink: 0; align-items: flex-end; }
.assistant-form textarea { flex: 1; resize: none; min-height: 2.75rem; max-height: 7rem; padding: .6rem .75rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-lg); background: var(--surface); font: inherit; font-size: .92rem; field-sizing: content; }
.assistant-form .btn { height: 2.75rem; width: 2.75rem; padding: 0; border-radius: var(--rayon-lg); }
@media (max-width: 640px) { .assistant-panel { right: 0; left: 0; bottom: 0; width: 100vw; height: 88vh; border-radius: var(--rayon-xl) var(--rayon-xl) 0 0; } .assistant-fab-label { display: none; } .assistant-fab { padding: .85rem; } }
@media (min-width: 641px) { .assistant-backdrop { display: none; } }

/* Divers */
.legend-swatch { width: 1rem; height: 1rem; border-radius: var(--rayon-xs); border: 1px solid; flex-shrink: 0; margin-top: .15rem; }
.check-item { display: flex; align-items: flex-start; gap: .5rem; font-size: .92rem; }
.check-item::before { content: ""; width: .875rem; height: .875rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-xs); margin-top: .3rem; flex-shrink: 0; background: var(--surface); }
.dropzone { border: 2px dashed var(--trait-fort); background: var(--surface-creuse); border-radius: var(--rayon-md); padding: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.combobox { position: relative; }
.combobox-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-md); box-shadow: var(--ombre-flottante); max-height: 16rem; overflow: auto; margin: .25rem 0 0; padding: .25rem 0; list-style: none; }
.combobox-list li { padding: .45rem .75rem; min-height: 40px; cursor: pointer; font-size: .92rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.combobox-list li[aria-selected=true], .combobox-list li:hover { background: var(--bleu-doux); }
.combobox-list li.create { color: var(--bleu-eeif); font-weight: 600; border-top: 1px solid var(--trait); }
.today-marker { background: var(--orange-eeif); color: var(--sur-orange); border-radius: var(--rayon-pilule); padding: .05rem .4rem; font-size: .7rem; font-weight: 700; }
.step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bleu-eeif); color: var(--sur-bleu); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-weight: 600; flex-shrink: 0; }
.print-only { display: none; }

/* Menus : bibliothèque et fiche */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--encre-douce); padding: 0 0 1rem; flex-wrap: wrap; }
.breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb a:hover { color: var(--bleu-eeif); text-decoration: underline; }
.chip-toggle.chip-dark[aria-pressed=true] { background: var(--encre); border-color: var(--encre); }
.chip-toggle.chip-indigo, .chip-toggle.chip-violet { background: var(--bleu-doux); color: var(--bleu-eeif); border-color: var(--bleu-doux); }
.chip-toggle.chip-indigo[aria-pressed=true], .chip-toggle.chip-violet[aria-pressed=true] { background: var(--bleu-eeif); border-color: var(--bleu-eeif); color: var(--sur-bleu); }
.chip-toggle.chip-emerald { background: var(--succes-doux); color: var(--succes); border-color: var(--succes-doux); } .chip-toggle.chip-emerald[aria-pressed=true] { background: var(--succes); border-color: var(--succes); color: var(--sur-bleu); }
.chip-toggle.chip-amber { background: var(--orange-doux); color: var(--orange-fonce); border-color: var(--orange-doux); } .chip-toggle.chip-amber[aria-pressed=true] { background: var(--orange-eeif); border-color: var(--orange-eeif); color: var(--sur-orange); }
.menu-card { display: block; background: var(--surface); border-radius: var(--rayon-xl); padding: 1.25rem; border: 1px solid var(--trait); color: inherit; text-decoration: none; transition: border-color .15s; }
.menu-card:hover { border-color: var(--bleu-eeif); }
.menu-card h3 { margin: 0; font-size: 1.1rem; color: var(--bleu-eeif); }
.menu-card.card-mine { background: var(--succes-doux); border-color: var(--succes-doux); } .menu-card.card-mine:hover { border-color: var(--succes); }
.menu-card.card-shared { background: var(--bleu-doux); border-color: var(--bleu-doux); } .menu-card.card-shared:hover { border-color: var(--bleu-eeif); }
.menu-card.card-pending { background: var(--orange-doux); border-color: var(--orange-eeif); } .menu-card.card-pending:hover { border-color: var(--orange-fonce); }
.menu-card.card-cdc:hover { border-color: var(--orange-eeif); }
.menu-card-ings { border-top: 1px solid var(--trait); padding-top: .75rem; margin-top: .75rem; }
.menu-card-lines { list-style: none; padding: 0; margin: 0; font-size: .92rem; color: var(--encre-douce); }
.menu-card-lines li { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; padding: .1rem 0; }
.ing-row { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--trait); }
.ing-row:last-child { border-bottom: 0; } .ing-row:hover { background: var(--fond); }
@media (min-width: 1024px) { .ing-row { flex-direction: row; align-items: flex-start; justify-content: space-between; } .ing-edit { flex-shrink: 0; max-width: 34rem; } }
.select-xs { padding: .25rem .4rem; font-size: .8rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-xs); background: var(--surface); }
.input-qty { width: 5rem; padding: .25rem .5rem; font-size: .92rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-xs); background: var(--surface); }
.input-pr { width: 3.5rem; padding: .25rem .3rem; font-size: .92rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-xs); background: var(--surface); }
.branch-box { border: 1px solid var(--trait); border-radius: var(--rayon-lg); padding: .75rem; background: var(--surface); }
.text-amber { color: var(--orange-texte); } .text-blue { color: var(--bleu-eeif); } .text-danger { color: var(--danger); }
.preview-box { padding: .5rem; border: 1px solid var(--trait); border-radius: var(--rayon-md); background: var(--surface); text-align: center; font-size: .92rem; font-weight: 600; min-height: 2.4rem; }
.preview-box.preview-amber { background: var(--orange-doux); border-color: var(--orange-eeif); color: var(--orange-fonce); }
.help { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--trait); color: var(--encre-douce); font-size: .7rem; cursor: help; margin-left: .25rem; }
.link.muted { color: var(--encre-douce); }

/* Grille des menus : cellules de sous-parties, goûters, infobulle, sélection */
.planning th.rowhead-th { min-width: 7rem; }
.planning th.svc { color: var(--bleu-eeif); font-size: .75rem; padding: .15rem; font-weight: 600; }
.planning td.cc { padding: .15rem .25rem; font-size: .75rem; text-align: center; }
.planning td.cc.disabled, .planning td.cc.dashcell { color: var(--trait-fort); } .planning td.cc.disabled { background: var(--surface-creuse); }
.planning td.rowhead.sub { padding: .15rem .5rem .15rem 1.5rem; font-size: .75rem; font-weight: 600; color: var(--encre-douce); background: var(--surface); }
.planning tr.row-main td { border-top: 2px solid var(--trait-fort); }
.cc-wrap { position: relative; }
.cc-btn { width: 100%; text-align: left; border: 1px solid transparent; border-radius: var(--rayon-xs); padding: .2rem .35rem; font-size: .75rem; line-height: 1.25; background: var(--surface); display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; overflow-wrap: anywhere; cursor: pointer; }
.cc-btn:disabled { cursor: default; }
.cc-btn.dashed { background: var(--fond); border: 1px dashed var(--trait); color: var(--encre-douce); } .cc-btn.dashed:hover:not(:disabled) { border-color: var(--bleu-eeif); color: var(--bleu-eeif); }
.cc-btn.has:hover { border-color: var(--trait); } .cc-btn.overridden { background: var(--orange-doux); border-color: var(--orange-eeif); }
.cc-btn.inclus { background: var(--surface-creuse); color: var(--encre-douce); } .cc-btn.gouter { background: var(--ie-gouter-fond); border-color: var(--ie-gouter-trait); color: var(--ie-gouter-texte); }
.cc-btn small { opacity: .75; font-size: .7rem; }
.cc-restore { position: absolute; top: -.3rem; right: -.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 0; background: var(--orange-eeif); color: var(--sur-orange); font-size: .7rem; line-height: 1; display: none; cursor: pointer; }
.cc-restore:hover { background: var(--danger); color: var(--sur-danger); }
.cc-wrap:hover .cc-restore, .cc-wrap:focus-within .cc-restore { display: inline-flex; align-items: center; justify-content: center; }
.decongeler { font-weight: 700; color: var(--danger); }
.menu-cell .name-btn { background: none; border: 0; padding: 0; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.menu-cell .name { overflow-wrap: anywhere; }
.replace-btn { display: none; width: 100%; margin-top: .35rem; border: 0; border-radius: var(--rayon-xs); background: var(--bleu-eeif); color: var(--sur-bleu); font-size: .75rem; padding: .25rem; cursor: pointer; }
.slot.selectable .replace-btn { display: block; }
.slot.selectable { outline: 1px dashed var(--bleu-eeif); outline-offset: -2px; }
#tip { position: fixed; z-index: 1000; width: 18rem; background: var(--encre); color: var(--surface); font-size: .8rem; border-radius: var(--rayon-md); padding: .75rem; box-shadow: var(--ombre-flottante); pointer-events: none; }
.tip-sub { color: var(--trait); margin-bottom: .35rem; }
.tip-course { color: var(--trait); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .35rem; }
#tip ul { list-style: none; padding: 0; margin: 0; } #tip li { display: flex; justify-content: space-between; gap: .5rem; }
.muted-light { color: var(--trait); white-space: nowrap; }
.selection-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bleu-eeif); color: var(--sur-bleu); padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); z-index: 850; display: flex; justify-content: space-between; align-items: center; gap: .75rem; box-shadow: var(--ombre-flottante); }
.toast-dark { background: var(--encre); display: flex; gap: .75rem; align-items: center; }
/* Échec d'une action : le message propose « Réessayer » (blanc souligné sur le rouge d'erreur, 5,9:1). */
.toast-action { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.toast-action button { background: none; border: 0; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; font-size: .875rem; min-height: 44px; white-space: nowrap; }
/* L'élément source d'une action en échec le montre (créneau, bouton) jusqu'à la tentative suivante. */
.ie-erreur { box-shadow: 0 0 0 2px var(--danger); }
.slot.ie-erreur { box-shadow: inset 0 0 0 2px var(--danger); }
.undo-btn { background: none; border: 0; color: var(--orange-doux); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: .875rem; min-height: 44px; }
.mobile-act { padding: .75rem 1rem; background: var(--fond); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: .25rem; }
.mobile-day .head.sticky { position: sticky; top: 0; background: var(--surface); z-index: 5; }
.mslot { border: 2px dashed var(--trait); border-radius: var(--rayon-md); min-height: 3rem; padding: .35rem; }
.mslot .empty { border: 0; color: var(--bleu-eeif); font-weight: 600; font-size: .92rem; min-height: 44px; }
.slot.selectable.mslot { border-color: var(--bleu-eeif); background: var(--bleu-doux); }
.mslot .menu-cell .x { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.mslot .menu-cell { padding-right: 3rem; }
.svc-box { border: 1px solid var(--trait); background: var(--surface-creuse); border-radius: var(--rayon-lg); padding: .5rem; margin-top: .5rem; }
.dash-box { padding: .6rem; border-radius: var(--rayon-md); background: var(--surface-creuse); text-align: center; color: var(--encre-douce); }
.course-line.overridden { background: var(--orange-doux); border-radius: var(--rayon-xs); padding: .15rem .35rem; }
.period-tabs a { white-space: nowrap; }
.dates-panel > summary { list-style: none; display: inline-flex; cursor: pointer; } .dates-panel > summary::-webkit-details-marker { display: none; }
.planning-layout .sidebar { align-self: start; }
@media (max-width: 1023px) { .planning-layout .sidebar { position: static; max-height: 24rem; } }

/* Commandes */
.btn.disabled { opacity: .5; pointer-events: none; }
.details-inline > summary { list-style: none; cursor: pointer; display: inline; } .details-inline > summary::-webkit-details-marker { display: none; }
.section-cat > .head.cat-cacher, .section-cat > .head.cat-drive, .section-cat > .head.cat-pain, .section-cat > .head.cat-promocash { border-bottom: 2px solid; }

/* Administration */
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .25rem; border-bottom: 2px solid transparent; color: var(--encre-douce); font: var(--text-bouton); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--encre); }
.tabs a[aria-selected=true] { color: var(--bleu-eeif); border-color: var(--orange-eeif); }
/* Avancement : <progress> natif. Sa valeur est un attribut, que le morph met à jour ; aucun style en ligne, puisque
   le morph garde l'attribut style (il porte les transform posés par le kit de mouvement). */
.progress { flex: 1; min-width: 0; height: .5rem; appearance: none; border: 0; background: var(--trait); border-radius: var(--rayon-pilule); overflow: hidden; }
.progress::-webkit-progress-bar { background: var(--trait); border-radius: var(--rayon-pilule); }
.progress::-webkit-progress-value { background: var(--bleu-eeif); border-radius: var(--rayon-pilule); }
.progress::-moz-progress-bar { background: var(--bleu-eeif); border-radius: var(--rayon-pilule); }
/* Commande 2 : cadre plein et titre vert une fois ses dates posées (des classes, pour la même raison). */
.ie-commande2 { background: rgba(255,255,255,.5); border: 1px dashed var(--gray-300); }
.ie-commande2--posee { border-style: solid; border-color: var(--succes); }
.ie-commande2__titre { color: var(--gray-500); }
.ie-commande2--posee .ie-commande2__titre { color: var(--succes); }
.type-choice { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); cursor: pointer; background: var(--surface); }
.type-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-choice:has(input:checked) { border-color: var(--bleu-eeif); background: var(--bleu-doux); box-shadow: 0 0 0 1px var(--bleu-eeif); }
.type-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.camp-new-form:has(input[name=type_camp][value=hors_ete]:checked) [data-ete-only] { display: none; }
.camp-new-form:has(input[name=type_camp][value=ete]:checked) [data-hors-only] { display: none; }
.prop-warn { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; padding: .1rem .4rem; border-radius: var(--rayon-pilule); background: var(--orange-doux); color: var(--orange-fonce); font-size: .7rem; font-weight: 600; }
.thumb { width: 3.5rem; height: 3.5rem; border-radius: var(--rayon-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.thumb-img { background: var(--succes-doux); border: 1px solid var(--trait); color: var(--succes); }
.thumb-doc { background: var(--danger-doux); border: 1px solid var(--trait); color: var(--danger); }
.preview-img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; object-fit: contain; }
#produits-filters:has(#tab-input[value=proposals]) [data-lib-only], #produits-filters:has(#tab-input[value=library]) [data-prop-only] { display: none; }

/* Frigo anim : formulaire d'ajout en grille, une colonne sur téléphone (produit, quantité, commentaire). */
.ie-frigo-ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; align-items: end; }
.ie-frigo-ajout > .ie-frigo-produit { grid-column: span 2; }
@media (max-width: 600px) { .ie-frigo-ajout { grid-template-columns: 1fr; } .ie-frigo-ajout > .ie-frigo-produit { grid-column: auto; } }

/* Règles de mise en page (charte, « les six règles ») : une ligne par bouton, puce et en-tête de
   colonne ; un libellé trop long se raccourcit, il ne passe jamais à la ligne. */
.btn, .chip-toggle, .table th { white-space: nowrap; }
/* Période « Du / Au » : les deux dates côte à côte, téléphone compris. */
.ie-periode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ie-periode input[type=date] { min-width: 0; padding-inline: .5rem; }
/* Titre d'une carte sous le titre de la page (exports) : niveau h2, taille d'un h3. */
.ie-carte-titre { margin: 0; font: 600 1rem/1.3 var(--font-titre); color: var(--encre); }
/* Texte saisi coupé à trois lignes, « Lire plus » l'ouvre (app.js) : les actions ne bougent pas. */
.ie-extrait { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ie-extrait.ouvert { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.ie-lire-plus { display: inline-flex; align-items: center; min-height: 44px; }
/* Chiffres d'un camp (aperçu admin) : grille régulière, deux colonnes sur téléphone. */
.ie-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
@media (max-width: 600px) { .ie-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
/* Actions d'un en-tête ou d'une carte : toujours sur une ligne, à la même place. */
.ie-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }

/* Un groupe libellé + champ dans une ligne ne dépasse jamais la ligne : une liste déroulante aux
   longues options (noms de camps) rétrécit au lieu de faire défiler la page. */
.row > .row, .row > .field, .row > .select, .row > select { min-width: 0; max-width: 100%; }

/* Téléphone : cibles tactiles d'au moins 44 px (charte), boutons et champs compris. */
@media (max-width: 600px) {
  .btn, .btn-sm, .btn-xs, .chip-toggle, .period-tabs a, .period-tabs button, .select, .input, .search, .select-xs, .input-qty, .input-pr, .type-choice, .link-danger, button.link { min-height: 44px; }
  .btn-xs, .btn-sm { padding-inline: .75rem; }
  .field input, .field select, .field textarea { min-height: 44px; }
  nav[aria-label="Fil d'Ariane"] a { display: inline-flex; align-items: center; min-height: 44px; }
  .tabs { gap: 1rem; }
  summary.link { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- Codes couleur métier (hors charte, voulus) ----------
   Types de repas (cacheroute : lacté, viande, parvé…), catégories de commande et activités : le code
   que les équipes connaissent déjà (grille Excel, étiquettes des bacs). Toujours accompagnés d'un
   mot ou d'un code (L1, V2, « Cacher »…), jamais la couleur seule. */
:root {
  --ie-gouter-fond: #fdf2f8; --ie-gouter-trait: #fbcfe8; --ie-gouter-texte: #831843;
}
.mt-L { background: #bfdbfe; color: #1e3a8a; } .mt-V { background: #fecaca; color: #7f1d1d; } .mt-P { background: #bbf7d0; color: #14532d; }
.mt-SHAB_SOIR { background: #e9d5ff; color: #581c87; } .mt-SHAB_MIDI { background: #f5d0fe; color: #701a75; } .mt-EXT { background: #fed7aa; color: #7c2d12; }
.mt-PD { background: #e0f2fe; color: #075985; } .mt-GOUTER { background: #fbcfe8; color: #831843; } .mt-5EME { background: #e5e7eb; color: #111827; }
.mt-PAIN { background: #fef3c7; color: #78350f; } .mt-PRECAMP { background: #99f6e4; color: #134e4a; }
.cat-cacher { background: #FFC7CE; color: #9C0006; border-color: #E8A0A8; } .cat-promocash { background: var(--fond); color: var(--encre); border-color: var(--trait); }
.cat-drive { background: #E2EFD9; color: #375623; border-color: #C5D9B8; } .cat-pain { background: #FEF2CB; color: #7F6000; border-color: #E8D9A8; }
.cat-decongeler { background: var(--bleu-doux); color: var(--bleu-eeif); } .cat-boulangerie { background: #FEF2CB; color: #7F6000; }
.section-cat.cat-cacher { border-color: #E8A0A8; } .section-cat.cat-drive { border-color: #C5D9B8; } .section-cat.cat-pain { border-color: #E8D9A8; } .section-cat.cat-promocash { border-color: var(--trait); }
.chip { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: var(--rayon-pilule); padding: .05rem .5rem; font-size: .75rem; font-weight: 600; }
.act-green { background: #dcfce7; color: #166534; } .act-red { background: #fee2e2; color: #991b1b; } .act-gray { background: var(--surface-creuse); color: var(--encre); }
.act-orange { background: #ffedd5; color: #9a3412; } .act-purple { background: #f3e8ff; color: #6b21a8; } .act-yellow { background: #fef9c3; color: #854d0e; }
.act-blue { background: #dbeafe; color: #1e40af; } .act-pink { background: #fce7f3; color: #9d174d; } .act-teal { background: #ccfbf1; color: #115e59; }
.act-amber { background: #fef3c7; color: #92400e; } .act-indigo { background: #e0e7ff; color: #3730a3; } .act-cyan { background: #cffafe; color: #155e75; }
.act-fuchsia { background: #fae8ff; color: #86198f; } .act-stone { background: #f5f5f4; color: #44403c; }
.sub-c1 { background: rgb(219 234 254 / .5); color: #1e3a8a; } .sub-c2 { background: rgb(209 250 229 / .5); color: #064e3b; }
/* Légende des catégories de commande (accueil) et repères des journées spéciales. */
.ie-legende--cacher { background: #ef4444; border-color: #dc2626; }
.ie-legende--promocash { background: var(--surface-creuse); border-color: var(--trait-fort); }
.ie-legende--drive { background: #22c55e; border-color: #16a34a; }
.ie-legende--boulangerie { background: #facc15; border-color: #eab308; }
.ie-legende--decongeler { background: #3b82f6; border-color: #2563eb; }
/* Cartes à liseré (accueil : starter pack) : l'orange souligne, le bleu structure. */
.ie-carte--accent { border-left: 4px solid var(--orange-eeif); }
.ie-carte--bleu { border-left: 4px solid var(--bleu-eeif); }
/* En-tête sur téléphone et tablette : « Menu » à droite, contre le compte ; sous 480 px, l'icône seule
   (le mot reste lu par les lecteurs d'écran), pour que la barre tienne sur une ligne. */
@media (max-width: 1024px) { .ei-header .ei-header__nav { margin-left: auto; margin-right: var(--espace-2); } }
@media (max-width: 480px) {
  .ie-nav__bouton { width: 44px; padding: 0; justify-content: center; }
  .ie-nav__bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Connecté par Passeport EI, le sélecteur d'outils s'ajoute : espaces resserrés, la barre tient sur une ligne dès 360 px. */
  .ei-header { column-gap: var(--espace-2); }
  .ei-header .ei-header__nav { margin-right: 0; }
}
/* Menu du compte : les camps d'une personne intendante de plusieurs camps (code · nom, tronqué). */
.ie-camp-choix { max-width: 16rem; }
.ie-camp-choix[aria-current] { font-weight: 600; color: var(--bleu-eeif); }
/* Jour de la grille sur téléphone : pleine largeur, sans cadre. */
.mobile-day { border: 0; }