/* Buddies Népal — compléments de l'application à style.css (repris des maquettes) : messages, formulaires, listes. */

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-s); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.skip:focus { left: 12px; }

.page { padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(48px, 7vw, 80px); display: grid; gap: 18px; align-content: start; }
.prose { max-width: 780px; }
.h3 { font-size: 1.15rem; }
.small { font-size: .88rem; }
.center { text-align: center; }
.right { text-align: right; }
.pre { white-space: pre-line; }
.inline { display: inline; margin: 0; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stackform { display: grid; gap: 10px; }

/* Messages après une action */
/* Photo de profil (page profil) : le champ fichier est caché derrière le bouton */
.photoform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; }
.photoform form { margin: 0; }
.photoform__pick { position: relative; overflow: hidden; cursor: pointer; }
.photoform__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.photoform__pick:focus-within { outline: 2px solid var(--site); outline-offset: 2px; }
.anyopt { background: var(--site-soft); }
.anyopt input { accent-color: var(--site); }
.anyopt b { color: var(--site-ink); }
.trekgroup { display: block; margin: 10px 0 6px; font-weight: 700; }
.flashes { display: grid; gap: 8px; margin: 16px auto; }
.flash { margin: 0; padding: 12px 16px; border-radius: var(--radius-s); background: var(--ok-soft); color: var(--ok); font-weight: 600; box-shadow: inset 0 0 0 1.5px currentColor; }
.flash--error { background: #FDE8EB; color: var(--red-deep); }
.flash--info { background: var(--site-soft); color: var(--site-ink); }
.ferr { margin: 0; color: var(--red-deep); font-size: .88rem; font-weight: 600; }
.field--error .input { border-color: var(--red); }
.warnbox { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--radius-s); background: var(--warn-soft); color: var(--warn); font-size: .95rem; }
.warnbox .icon { flex: none; margin-top: 3px; }
.warnbox a { color: inherit; font-weight: 700; }
.warnbox[hidden] { display: none; }

/* Boutons-liens (déconnexion, retirer…) */
.linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkbtn:hover { color: var(--link-hover); }
.linkbtn--danger { color: var(--red-deep); }

/* Cases à cocher (langues) : mêmes pastilles que les choix radio */
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--site); flex: none; }
.opts--check label::before { content: ""; display: inline-block; width: 0; transition: width .12s; }
.opts--check input:checked + label::before { content: "✓ "; width: auto; }

/* Liste de mes départs et disponibilités */
.triplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.triplist li > a, .triplist__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: var(--radius-s); color: inherit; text-decoration: none; }
.triplist li > a:hover { background: var(--paper); }
.triplist img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.triplist b { display: block; font-family: var(--font-head); }
.triplist .pills { justify-content: flex-end; align-items: center; }

/* Filtres de la recherche */
.filters-form { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); align-items: end; }
.filters-form .check { align-self: end; min-height: 46px; align-items: center; width: max-content; max-width: 100%; }
.filters-form .check input { margin-top: 0; }

/* Avatars photo (compte commun) */
.av { overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me { display: inline-flex; border-radius: 50%; }
.me:focus-visible { outline: 2px solid var(--site); outline-offset: 2px; }

/* En-tête de profil sans photo de couverture (mon espace, profil d'un trekkeur) */
.phead--person { padding-left: 0; padding-right: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.phead--person > .av--lg { margin-top: 0; width: 96px; height: 96px; font-size: 2.2rem; }
.pagehead .phead--person { padding-top: 0; }
.pagehead .phead--person > .av--lg { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }

/* Formulaire de profil */
.profile--form { grid-template-columns: minmax(0, 1fr) 320px; }

/* États vides */
.empty { text-align: center; display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 5vw, 48px) 24px; }
.empty h1, .empty h2 { margin: 0; }
.empty .btn { margin-top: 8px; }

/* Pied de page */
.footer__about { max-width: 52ch; color: inherit; opacity: .85; }
.footer__links a { color: inherit; }

@media (max-width: 900px) {
  .profile--form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hide-s { display: none !important; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .triplist li > a, .triplist__row { grid-template-columns: 52px minmax(0, 1fr); }
  .triplist img { width: 52px; height: 40px; }
  .triplist .pills { grid-column: 2; justify-content: flex-start; }
  .phead--person > .av--lg { width: 72px; height: 72px; font-size: 1.7rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flash--error { background: #3A1A20; color: var(--red-deep); }
}
:root[data-theme="dark"] .flash--error { background: #3A1A20; color: var(--red-deep); }

/* Les blocs masqués le restent même quand une règle leur donne display: grid/flex */
[hidden] { display: none !important; }
[data-narrow] { max-width: 320px; }

/* Navigation mobile : le menu du haut disparaît sous 960 px (style.css), une rangée défilante le remplace */
.mnav { display: none; border-top: 1px solid var(--line); }
.mnav__in { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.mnav__in::-webkit-scrollbar { display: none; }
.mnav a { flex: none; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.mnav a[aria-current="page"] { background: var(--site-soft); color: var(--site-ink); }
@media (max-width: 960px) { .mnav { display: block; } }
/* « Publier » reste accessible sur téléphone, en bouton icône (style.css le masquait) */
@media (max-width: 720px) { .topbar .btn--primary { display: inline-flex; padding: 8px 10px; } }

/* Guillemets des demandes : insécables en français, anglais à l'anglaise */
.request q { quotes: "«\00A0" "\00A0»"; }
html[lang="en"] .request q { quotes: "“" "”"; }

/* Messagerie : boîte de réception, fil, panneau de contexte (maquette messages.html) */
.inbox { height: calc(100vh - 64px - 120px); min-height: 520px; }
.inbox--list { grid-template-columns: 320px minmax(0, 1fr); }
.thread-box--empty { justify-content: center; }
.thread-box--empty .icon { width: 36px; height: 36px; color: var(--site); }
.convempty { padding: 4px 10px; }
.conv__last { display: block; }
.convlist { overflow-x: hidden; }
.thead__back { display: none; font-size: 1.3rem; text-decoration: none; color: var(--ink-2); padding: 0 4px; }
.thead__txt { min-width: 0; flex: 1; }
.thead .pill { flex: none; }
.msg__body { overflow-wrap: anywhere; }
.sys { flex-wrap: wrap; justify-content: center; }
.sys .linkbtn { font-size: .8rem; font-weight: 700; }
.compose { align-items: flex-end; }
.compose textarea.input { border-radius: 18px; resize: none; min-height: 44px; max-height: 180px; line-height: 1.4; overflow-y: hidden; }
.compose--ro { margin: 0; align-items: center; color: var(--ink-2); font-size: .9rem; background: var(--paper); }
.ctxperson { display: grid; justify-items: center; text-align: center; gap: 8px; }
.ctxperson p { margin: 0; }
.ctxperson .av--lg { width: 96px; height: 96px; font-size: 2.2rem; }
.setting { padding: 16px; gap: 8px; }
.setting .check { font-size: .92rem; }
.js .setting [data-autosubmit-hide] { display: none; }
.iconbtn[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--site); }

@media (max-width: 720px) {
  .inbox { height: auto; min-height: 0; }
  .inbox--list { grid-template-columns: 1fr; }
  .inbox--list .conv-box { display: flex; }
  .inbox--list .thread-box--empty { display: none; }
  .inbox--thread .msgs { min-height: 55vh; max-height: 65vh; }
  .thead__back { display: inline-block; }
  .inbox--thread .ctx-box { display: flex; }
}
/* Tablette : style.css masque le panneau de contexte ; on le garde sous le fil (réglages, membres, blocage) */
@media (max-width: 1100px) {
  .inbox--thread { height: auto; }
  .inbox--thread .msgs { max-height: 65vh; min-height: 45vh; }
  .inbox--thread .ctx-box { display: flex; grid-column: 1 / -1; }
  .inbox--thread .ctx { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
}
/* Petits téléphones : place pour Publier, Messages, avatar et langues → logo raccourci à « Buddies » */
@media (max-width: 400px) {
  .topbar .brand em { display: none; }
  .top-acts { gap: 6px; }
}

/* Guide (Guides Népal) : photo de sa fiche + lien */
/* Bloc « Des guides pour ce trek » (page d'un groupe qui cherche un guide) */
.gsug__list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.gsug__item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gsug__who { flex: 1 1 200px; min-width: 0; }
.gsug__who .pill { margin-top: 6px; }
.guidebox { display: flex; gap: 14px; align-items: center; }
.guidebox .card__label { margin: 0 0 2px; }
.guidebox .av { width: 64px; height: 64px; }
.guideopt { background: var(--guides-soft); }
.guideopt input { accent-color: var(--guides); }
.guideopt b { color: var(--guides); }
.inline-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* Signalement, modération */
.msg__report { color: var(--ink-3); }
.msg--mine .msg__report { display: none; }
.msg__body--removed { font-style: italic; color: var(--ink-3); }
.admtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.admtabs a { padding: 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink-2); font-weight: 600; }
.admtabs a[aria-current] { background: var(--site-soft); color: var(--site-ink); }
.admcard { display: grid; gap: 8px; }
.admcard p { margin: 0; }
.admacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admform { display: inline-flex; gap: 6px; align-items: center; }
.input--small { padding: 6px 10px; font-size: .88rem; width: 200px; }
.admthread { display: grid; gap: 10px; }
.admmsg { padding: 10px; border-radius: var(--radius-s); background: var(--paper); }
.admmsg--flag { box-shadow: inset 0 0 0 1.5px var(--warn); }
.admmsg p { margin: 0; }
.admperms { margin: 0; padding: 0; border: 0; gap: 8px; }
.admperms > legend { margin-bottom: 4px; padding: 0; }
.admtable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admtable th, .admtable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .admtable { display: block; overflow-x: auto; } }

/* Une colonne sur tablette/téléphone sans élargissement par un contenu (style.css met « 1fr », qui suit le contenu le plus large) */
@media (max-width: 960px) { .profile { grid-template-columns: minmax(0, 1fr); } }
.request__acts { flex-wrap: wrap; }
.request__acts .btn { white-space: normal; text-align: center; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }

/* Précision de la date d'un départ : trois choix compacts */
.modes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.modes--3 label { padding: 12px 14px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-size: .92rem; }
.modes--3 label b { display: block; }
.modes--3 label span span { color: var(--ink-2); font-size: .85rem; }
.modes--3 input:checked + label { background: var(--site-soft); box-shadow: inset 0 0 0 1.5px var(--site); }
.modes--3 input:focus-visible + label { outline: 2px solid var(--site); outline-offset: 2px; }
@media (max-width: 640px) { .modes--3 { grid-template-columns: minmax(0, 1fr); } }

/* Commentaires publics d'une fiche départ */
.comments h2 { display: flex; align-items: center; gap: 8px; }
.cmtthread { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.cmt { display: flex; gap: 12px; align-items: flex-start; }
.cmt--reply { margin-left: 44px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.cmt__main { min-width: 0; flex: 1; }
.cmt__meta { margin: 0 0 2px; font-size: .88rem; color: var(--ink-3); }
.cmt__meta b { color: var(--ink); }
.cmt__meta .pill { font-size: .72rem; }
.cmt__body { overflow-wrap: anywhere; }
.cmt__body--removed { font-style: italic; color: var(--ink-3); margin: 0; }
.cmt__acts { margin: 4px 0 0; font-size: .85rem; }
.cmt__act { color: var(--ink-2); }
.cmt__act--muted { color: var(--ink-3); }
.cmt__replybox { margin-left: 44px; }
.cmt__replybox summary { cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--link); list-style: none; }
.cmt__replybox summary::-webkit-details-marker { display: none; }
.cmt__replybox[open] summary { margin-bottom: 8px; }
.cmtform--new { padding-top: 14px; border-top: 1px solid var(--line); }
.cmt__login { margin: 14px 0 0; }
@media (max-width: 640px) { .cmt--reply, .cmt__replybox { margin-left: 16px; } }

/* Page Départs : barre « Trek · Quand » de l'accueil + filtres en pastilles (maquette retenue le 2026-10-21) */
.tsearch { margin-top: 18px; }
.tsearch__bar { margin: 0 0 12px; max-width: 760px; }
.tsearch__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fsel { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 38px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #F4F6F8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-size: .9rem; font-weight: 600; cursor: pointer; flex: none; }
.fsel:hover { background: rgba(255, 255, 255, .18); }
.fsel .icon { width: 16px; height: 16px; flex: none; }
.fsel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0 16px 0 0; cursor: pointer; max-width: 15ch; text-overflow: ellipsis; }
.fsel select option { color: #121A26; }
.fsel:has(select):not(:has(.nsel))::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.fsel input { position: absolute; opacity: 0; pointer-events: none; }
.fsel:focus-within { outline: 2px solid var(--hero-accent); outline-offset: 2px; }
.fsel.is-on { background: var(--site-soft); color: var(--site-ink); box-shadow: none; }
.fsel--women.is-on { background: var(--women-soft); color: var(--women); }
.tsearch__reset { color: var(--hero-accent); font-size: .88rem; margin-left: 4px; }
@media (max-width: 720px) {
  .tsearch__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .tsearch__chips::-webkit-scrollbar { display: none; }
}

/* Listes déroulantes aux couleurs du site (assets/js/app.js, niceSelects) — ordinateur seulement */
.nsel { position: relative; display: inline-flex; min-width: 0; }
.nsel--input, .quicksearch .nsel { display: flex; width: 100%; }
.nsel__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.nsel__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0 22px 0 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; position: relative; }
.nsel__btn::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid currentColor;
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; transition: transform .15s; }
.nsel.is-open .nsel__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.nsel__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsel__btn.input { padding: 11px 34px 11px 12px; color: var(--ink); }
.nsel__btn.input::after { right: 14px; }
.nsel__btn.input:focus-visible { border-color: var(--site); outline: none; box-shadow: 0 0 0 3px var(--site-soft); }
.quicksearch .nsel__btn { padding: 10px 26px 10px 6px; color: #121A26; }
.quicksearch .nsel__btn:focus-visible, .fsel .nsel__btn:focus-visible { outline: none; }
/* Focus clavier visible : sur la case de la barre (Trek, Quand) et sur la pastille entière */
.quicksearch label:has(.nsel__btn:focus-visible) { border-radius: 999px; outline: 2px solid var(--site); outline-offset: -2px; }
.fsel .nsel__btn { padding-right: 18px; max-width: 18ch; }
.fsel .nsel__btn::after { right: 0; }
/* Position fixe calée par le script (pas rognée par les blocs qui masquent ce qui dépasse) ; sous la barre du haut */
.nsel__list { position: fixed; z-index: 45; min-width: 220px; max-width: min(340px, 90vw); max-height: 320px;
  overflow: auto; padding: 6px; background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: var(--hover-shadow); outline: none;
  font-size: .95rem; font-weight: 400; text-align: left; overscroll-behavior: contain; }
.nsel__search { position: sticky; top: -6px; z-index: 1; display: block; width: 100%; margin: -6px 0 6px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; box-shadow: 0 -6px 0 var(--surface); }
.nsel__search:focus { outline: none; border-color: var(--site); }
.nsel__empty { padding: 9px 12px; color: var(--ink-3); }
.nsel__opt[hidden] { display: none; }
.nsel__opt { position: relative; padding: 9px 34px 9px 12px; border-radius: 9px; cursor: pointer; line-height: 1.35; }
.nsel__opt.is-active { background: var(--paper); }
.nsel__opt.is-selected { color: var(--site-ink); font-weight: 700; }
.nsel__opt.is-selected::after { content: ""; position: absolute; right: 14px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid var(--site); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nsel__opt--all { color: var(--ink-2); }
.nsel__group { padding: 10px 12px 4px; font: 700 .7rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nsel__group:first-child { padding-top: 4px; }

.nsel__opt.is-disabled { color: var(--ink-3); cursor: default; }
.nsel__btn:disabled { cursor: default; opacity: .6; }

/* Champs de date d'un autre mode : masqués seulement si le JavaScript est là (sans lui, tout reste visible) */
.js [data-date-mode][data-off] { display: none; }

/* Nationalité : petit drapeau (image, rendu identique partout) + nom du pays */
.nat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.flag { width: 18px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16, 35, 63, .12); object-fit: cover; flex: none; }

/* ===================== Back-office : cadre repris de Guides Népal (2026-10-28) =====================
   Menu latéral bleu nuit groupé, barre du haut ; templates/admin-shell.php + assets/js/admin.js */
.adm { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.adm__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #10233F; color: #C9D4E3; display: flex; flex-direction: column; padding: 14px 10px; gap: 6px; }
.adm__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 800; line-height: 1.15; }
.adm__brand small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8FA3BE; }
.adm__nav { display: grid; gap: 2px; flex: 1; align-content: start; }
.adm__group { margin-top: 10px; }
.adm__group > summary { list-style: none; cursor: pointer; padding: 6px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FA3BE; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; }
.adm__group > summary::-webkit-details-marker { display: none; }
.adm__group > summary::after { content: "▾"; font-size: .8rem; transition: transform .15s; }
.adm__group:not([open]) > summary::after { transform: rotate(-90deg); }
.adm__group > summary:hover { color: #fff; }
.adm__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; color: #C9D4E3; text-decoration: none; font-weight: 600; font-size: .92rem; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.adm__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm__link[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }
.adm__link[aria-current="page"] .ico { color: #6CC6CE; }   /* sarcelle de Buddies (Guides : rose) */
.adm__link:focus-visible, .adm__group > summary:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.adm__link .ico { flex: none; color: #8FA3BE; }
.adm__link span:first-of-type { flex: 1; }
.adm__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: var(--on-red, #fff); font-size: .75rem; font-weight: 800; text-align: center; }
.adm__sidefoot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 8px; display: grid; gap: 2px; }
.adm__sidefoot form { margin: 0; }
.adm__main { min-width: 0; display: flex; flex-direction: column; }
.adm__top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 3vw, 32px); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.adm__title { margin: 0; font-size: 1.25rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm__topright { display: flex; align-items: center; gap: 14px; }
.adm__me { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.adm__burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.adm__burger[hidden] { display: none; }
.adm__content { flex: 1; }
.adm__content .wrap { width: auto; max-width: 1280px; margin: 0; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.adm__content .page { padding-top: 22px; }
.adm__flashes { padding: 16px clamp(16px, 3vw, 32px) 0; }
@media (min-width: 900px) { .adm__burger { display: none; } }
@media (max-width: 899px) {
  .adm { grid-template-columns: 1fr; }
  .adm__side { position: static; height: auto; }                       /* sans JavaScript : menu au-dessus */
  .adm-js .adm__side { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); height: auto; z-index: 60; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
  .adm-nav-open .adm__side { transform: none; visibility: visible; transition-delay: 0s; }   /* fermé : hors du parcours clavier */
  .adm-nav-open .adm__main::before { content: ""; position: fixed; inset: 0; background: rgba(8, 14, 24, .5); z-index: 50; }
  .adm__mename { display: none; }
}
@media (prefers-reduced-motion: reduce) { .adm-js .adm__side { transition: none; } }

/* Âge souhaité libre (0.6.0) : deux petits champs min – max */
.agepick { border: 0; padding: 0; margin: 0; min-width: 0; }
.agepick > .muted { margin: 0 0 6px; }
.agepick__in { display: flex; align-items: flex-end; gap: 10px; }
.agepick__in label { display: grid; gap: 4px; width: 120px; font-size: .85rem; color: var(--ink-2); }
.agepick__in > span { padding-bottom: 10px; color: var(--ink-3); }

/* « Une idée, un bug ? » (0.7.0) — comme le constructeur de trek : bouton flottant + fenêtre (<dialog>) */
.fb-open { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 10px 16px; background: var(--night); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 6px 18px rgba(16, 35, 63, .3); }
.fb-open:hover { background: var(--site); color: var(--on-site, #fff); }
.fb-open:focus-visible { outline: 2px solid var(--site); outline-offset: 3px; }
/* Téléphone : rond, libellé gardé pour les lecteurs d'écran (comme .sr-only) */
@media (max-width: 700px) { .fb-open__lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .fb-open { width: 48px; height: 48px; padding: 0; justify-content: center; font-size: 1.2rem; } }
.footer { padding-bottom: 72px; }   /* le bouton flottant ne cache pas les derniers liens du pied de page */
@media print { .fb-open { display: none; } }
dialog.fb { padding: 0; border: 0; border-radius: var(--radius); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(16, 35, 63, .35); }
dialog.fb::backdrop { background: rgba(16, 35, 63, .45); }
.fb__in { position: relative; padding: 22px; display: grid; gap: 4px; }   /* marges dans un bloc : un clic dans la marge ne ferme pas la fenêtre */
.fb h2, .fb h1 { margin: 0 0 4px; padding-right: 36px; }
.fb__form, .fb__done { display: grid; gap: 12px; }
.fb__form[hidden], .fb__done[hidden] { display: none; }
.fb__sub { margin: 0; color: var(--ink-2); font-size: .9rem; }
.fb__x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink-2); cursor: pointer; }
.fb__x:hover { background: var(--line); }
.fb__types { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fb__types legend { font-weight: 700; font-size: .9rem; margin-bottom: 6px; padding: 0; }
.fb__types label { cursor: pointer; }
.fb__types input { position: absolute; opacity: 0; pointer-events: none; }
.fb__types span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.fb__types input:checked + span { background: var(--site); border-color: var(--site); color: var(--on-site, #fff); }
.fb__types input:focus-visible + span { outline: 2px solid var(--site); outline-offset: 2px; }
.fb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb__privacy { margin: 0; font-size: .78rem; color: var(--ink-3); }
.fb__err { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--red-deep, #8A0D22); font-size: .88rem; }
.fb__err[hidden] { display: none; }
.fb__acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fb__acts .btn[disabled] { opacity: .6; cursor: wait; }
.fb__ok { margin: 0; font-weight: 800; font-size: 1.1rem; color: var(--ok); }
.fb__done p { margin: 0; }
.fb--page { max-width: 560px; }

/* ===================== Back-office 0.8.0 : recherche, tableau de bord, listes, statistiques ===================== */
.adm__search { position: relative; display: flex; align-items: center; margin: 0; }
.adm__search .ico { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.adm__search .input { padding-left: 36px; width: min(260px, 40vw); min-height: 38px; }
@media (max-width: 640px) { .adm__search .input { width: 130px; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
a.kpi:hover { box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(16, 35, 63, .12); }
.kpi__ico { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--mist); color: var(--ink); }
.kpi__n { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.kpi__label { font-size: .85rem; color: var(--ink-2); }
.kpi--todo { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.kpi--todo .kpi__n { color: var(--red); }
.dash__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 520px) { .dash__cols { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }
.admfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; }
.admfilters .input { min-height: 38px; width: auto; }
.admtable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admtable th, .admtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admtable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.admtable td.num, .admtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.admtable-wrap { overflow-x: auto; }
.trouble { margin: 4px 0 0; padding: 0; list-style: none; color: var(--red-deep, #8A0D22); font-size: .82rem; }
.statbar { width: 60px; height: 8px; vertical-align: middle; margin-right: 6px; accent-color: var(--site); }   /* <progress> : la CSP interdit style="" */
.statbar--wide { width: 160px; }
.admitem { margin: 0 0 10px; }
.cronlog { white-space: pre-wrap; font-size: .82rem; color: var(--ink-2); margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-3); font-size: .85rem; }
.kv dd { margin: 0; }