/* REGINE : menu (fragments/sidebar.html, frontend/src/menu/Menu.tsx). Classe menu-horizontal posée sur avant l'affichage (fragments/head.html). */
#menu-nav [hidden] { display: none !important; } /* l'attribut hidden doit l'emporter sur les classes flex des entrées */
.menu-groupe-titre { cursor: pointer; user-select: none; display: flex; align-items: center; gap: .5rem; }
.menu-groupe-titre:hover { color: #fff; }
.menu-groupe-titre:focus-visible, .menu-bouton:focus-visible { outline: 2px solid #00C8FF; outline-offset: 2px; border-radius: .375rem; }
/* Arbre de l'écran « Menu et boutons » d'un plan : retrait par profondeur */
.arbre-1 { padding-left: 1.5rem; }
.arbre-2 { padding-left: 3rem; }
.arbre-3 { padding-left: 4.5rem; }
.arbre-4 { padding-left: 6rem; }
.arbre-5 { padding-left: 7.5rem; }
/* Retrait d'une entrée ou d'un sous-menu : niveau (module) + profondeur (sous-menus), 4 au plus */
.menu-retrait-1 { margin-left: .75rem; }
.menu-retrait-2 { margin-left: 1.5rem; }
.menu-retrait-3 { margin-left: 2.25rem; }
.menu-retrait-4 { margin-left: 3rem; }
.menu-chevron { margin-left: auto; font-size: 9px; opacity: .6; transition: transform .15s; }
.menu-groupe-titre[aria-expanded="false"] .menu-chevron { transform: rotate(-90deg); }
.menu-bouton { color: rgba(255, 255, 255, .6); padding: .125rem .375rem; border-radius: .375rem; }
.menu-bouton:hover { color: #fff; background: rgba(255, 255, 255, .1); }
/* Menu horizontal : barre fixe en haut, un menu déroulant par groupe */
html.menu-horizontal #menu { right: 0; bottom: auto; width: auto; min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
html.menu-horizontal #menu .menu-pied, html.menu-horizontal #menu .menu-logo p { display: none; }
/* Logo réduit en tête de barre, devise masquée */
html.menu-horizontal #menu .menu-logo { padding: .375rem 0 .375rem .75rem; border: 0; }
html.menu-horizontal #menu .menu-logo a { padding: .25rem .5rem; }
html.menu-horizontal #menu .menu-logo img { width: auto; height: 2.75rem; }
html.menu-horizontal #menu .menu-outils, html.menu-horizontal #menu .menu-sortie { border: 0; order: 2; }
html.menu-horizontal #menu-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; overflow: visible; padding: .375rem .75rem; }
html.menu-horizontal #menu-nav > * + * { margin-top: 0; }
html.menu-horizontal #menu-nav > a { padding: .375rem .625rem; }
html.menu-horizontal .menu-groupe { position: relative; }
html.menu-horizontal .menu-groupe > .menu-groupe-titre { margin: 0; padding: .5rem .625rem; border-radius: .5rem; font-size: .75rem; color: rgba(255, 255, 255, .8); }
html.menu-horizontal .menu-groupe.ouvert > .menu-groupe-titre { background: rgba(255, 255, 255, .1); color: #fff; }
html.menu-horizontal .menu-groupe > .menu-groupe-titre .menu-chevron { transform: none; }
html.menu-horizontal .menu-corps { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 16rem; max-height: 75vh;
overflow-y: auto; padding: .5rem; background: #1A365D; border-radius: .5rem; box-shadow: 0 12px 28px rgba(15, 23, 42, .35); }
html.menu-horizontal .menu-groupe.ouvert > .menu-corps { display: block; }
html.menu-horizontal .menu-corps > * + * { margin-top: .125rem; }
html.menu-horizontal .menu-sortie button span { display: none; }
html.menu-horizontal .ml-64 { margin-left: 0; padding-top: var(--menu-h, 0px); }
html.menu-horizontal header.sticky { top: var(--menu-h, 0px); }
/* Menu vertical : largeur réglable par la poignée (frontend/src/menu/Menu.tsx) ; --menu-l posée avant l'affichage (fragments/head.html), bornée ici */
html { --menu-lb: clamp(12.5rem, var(--menu-l, 16rem), 30rem); }
html:not(.menu-horizontal) #menu { width: var(--menu-lb); }
html:not(.menu-horizontal) .ml-64 { margin-left: var(--menu-lb); }
#menu-poignee { position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; touch-action: none; }
#menu-poignee:hover, #menu-poignee:active, #menu-poignee:focus-visible { background: #00C8FF; outline: 0; }
html.menu-horizontal #menu-poignee { display: none; }
/* Petit écran (smartphone, Fold plié, tablette en portrait) : menu en tiroir ouvert par le bouton de l'en-tête (#menu-ouvrir),
fermé par le voile, Échap, un glissement vers la gauche ou le choix d'une entrée (frontend/src/menu/Menu.tsx) ; le mode horizontal y est ignoré */
.menu-burger { display: none; }
#menu-voile { position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
@media (max-width: 1023.98px) {
#menu { width: min(20rem, 85vw) !important; z-index: 40; transform: translateX(-100%); visibility: hidden;
transition: transform .22s ease, visibility .22s; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
/* visible dès l'ouverture (sans attendre la transition) : l'entrée active y reçoit le focus */
html.menu-ouvert #menu { transform: none; visibility: visible; box-shadow: 12px 0 32px rgba(15, 23, 42, .3); transition: transform .22s ease; }
html.menu-ouvert #menu-voile { opacity: 1; visibility: visible; }
html.menu-ouvert body { overflow: hidden; }
#menu-poignee, #menu-orientation, #menu .menu-pied { display: none; }
body:has(#menu) .menu-burger { display: inline-flex; }
.ml-64 { margin-left: 0 !important; padding-bottom: env(safe-area-inset-bottom); }
body .menu-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px 0 -8px -10px;
flex-shrink: 0; border-radius: .5rem; color: #1A365D; font-size: 1.125rem; }
.menu-burger:hover, .menu-burger:focus-visible { background: #f1f5f9; outline: 0; }
/* En-tête compact, sous l'encoche en mode application */
#entete { padding: max(.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); gap: .5rem; }
#entete > div { margin-left: 0; }
#entete > div:nth-child(2) { display: none; } /* date et nom : l'initiale reste dans « Mon compte » */
#entete a, #entete form button, #theme-bascule { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
#entete #fil-ariane a { min-width: 0; min-height: 0; display: inline; }
/* Contenu : marges réduites, rangées de titres et de boutons qui passent à la ligne, tableaux défilants */
main > .px-8 { padding: 1rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left)); }
main > .px-8 .justify-between { flex-wrap: wrap; row-gap: .75rem; }
main :where(div, section, form):has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
main h1.text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (max-width: 639.98px) {
main > .px-8 :is(.grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-12) { grid-template-columns: minmax(0, 1fr); }
main > .px-8 :is(.grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-12) > [class*="col-span-"] { grid-column: 1 / -1; }
main > .px-8 .btn { justify-content: center; }
}
/* Écran tactile : cibles de 44 px, champs à 16 px (sans quoi iOS agrandit la page à la saisie) */
@media (pointer: coarse) {
#menu-nav a, #menu-nav .menu-groupe-titre { min-height: 44px; }
.btn { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]), select, textarea, .champ { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { #menu, #menu-voile { transition: none; } }