/* ════════════════════════════════════════════════════════════════════
   Hors Cadre Studio — interface de réservation
   Règles de design : voir docs/DESIGN.md.
   1. JETONS   2. BASE   3. STRUCTURE (menu latéral)   4. COMPOSANTS
   5. FORMULAIRES   6. ÉTATS ET MESSAGES   7. TABLEAUX   8. PAGES D'ACCÈS
   9. ANIMATIONS (chargement)   10. UTILITAIRES
   Pour modifier l'apparence, commencer par les jetons (section 1) :
   aucune couleur, taille ou durée ne devrait être écrite en dur ailleurs.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS ─────────────────────────────────────────────────────── */
:root {
  /* Noir et blanc, prédominants */
  --c-black: #0c0c0c;        /* noir du logo */
  --c-ink: #1f2023;          /* texte principal, boutons (anthracite) */
  --c-steel: #5b5e63;        /* texte secondaire (contraste ≥ 6:1 sur blanc) */
  --c-rule: #d6d7da;         /* filets, bordures */
  --c-haze: #f3f3f4;         /* fond de page */
  --c-white: #ffffff;        /* surfaces */
  --c-brand-light: #cac8c6;  /* gris clair du logo */
  --c-brand-dark: #505050;   /* gris foncé du logo */

  /* Menu latéral (sombre, tirant vers le noir) */
  --c-side-bg: #0f1011;
  --c-side-bg-hover: rgba(255, 255, 255, .07);
  --c-side-text: #e9e9ea;
  --c-side-muted: #9c9ea3;
  --c-side-rule: rgba(255, 255, 255, .09);

  /* Accents d'usage (exceptions au noir et blanc, toujours avec libellé + symbole) */
  --c-ok: #1f6f3d;       --c-ok-bg: #e8f5ec;  --c-ok-rule: #9fcfb0;   /* succès, actif */
  --c-ko: #b3261e;       --c-ko-bg: #fdeceb;  --c-ko-rule: #e8a29d;   /* erreur, désactivé */
  --c-warn: #7a5a00;     --c-warn-bg: #fff6dc; --c-warn-rule: #e6cf8a; /* action requise */

  /* Typographie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-sm: .875rem; --fs-xs: .8125rem; --fs-base: 1rem;

  /* Formes et espaces */
  --radius: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --measure: 72ch;                 /* longueur de ligne des paragraphes */
  --content-max: 96rem;            /* largeur maximale de la zone de contenu */
  --side-w: 17rem;                 /* menu déplié */
  --side-w-collapsed: 4.75rem;     /* menu réduit : icônes seules */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s; --t-med: .25s;
}

/* ── 2. BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; } /* garde-fou : aucun élément ne doit créer de défilement horizontal */
body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.55; color: var(--c-ink); background: var(--c-haze); }
img, svg { max-width: 100%; }
a { color: var(--c-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 650; }
h3 { font-size: 1.0625rem; font-weight: 650; }
p { margin: 0 0 var(--space-3); max-width: var(--measure); }
code { font-family: var(--font-mono); }
.skip-link { position: absolute; left: -9999px; top: var(--space-2); background: var(--c-white); padding: var(--space-2) var(--space-3); z-index: 100; }
.skip-link:focus { left: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── 3. STRUCTURE : menu latéral + contenu ─────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--t-med) var(--ease); }
.shell.is-collapsed { grid-template-columns: var(--side-w-collapsed) minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--c-side-bg); color: var(--c-side-text); padding: var(--space-5) var(--space-3) var(--space-4);
}
.sidebar :focus-visible { outline-color: var(--c-white); }

.sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); min-height: 2.75rem; }
.sidebar__logo { display: block; line-height: 0; }
.sidebar__logo img { height: 2.4rem; width: auto; }
.sidebar__logo .brand-mark { display: none; width: 2.1rem; height: 2.1rem; color: var(--c-brand-light); }

/* Bouton réduire / déplier */
.sidebar__collapse {
  display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--c-side-rule); background: transparent; color: var(--c-side-muted); cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease);
}
.sidebar__collapse:hover { background: var(--c-side-bg-hover); color: var(--c-side-text); }
.sidebar__collapse svg { width: 1rem; height: 1rem; }

/* Compte : avatar + nom + société, cliquable vers « Mon profil » */
.account-card {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg); color: inherit; text-decoration: none; border: 1px solid var(--c-side-rule);
  transition: background-color var(--t-fast);
}
.account-card:hover { background: var(--c-side-bg-hover); }
.account-card .avatar-wrap { --avatar-ring: var(--c-side-bg); }
.account-card .avatar { box-shadow: none; }
.account-card__text { min-width: 0; display: grid; line-height: 1.25; }
.account-card__name { font-weight: 750; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card__org { font-style: italic; color: var(--c-side-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card[aria-current="page"] { border-color: var(--c-side-muted); }

/* Navigation */
.side-nav { display: grid; gap: .15rem; }
.side-nav__title { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-side-muted); padding: var(--space-3) var(--space-2) var(--space-1); white-space: nowrap; }
.side-link {
  position: relative; display: flex; align-items: center; gap: var(--space-3); padding: .45rem var(--space-2);
  border-radius: var(--radius-lg); color: var(--c-side-muted); text-decoration: none; font-weight: 550; white-space: nowrap;
  background: none; border: 0; font: inherit; font-weight: 550; cursor: pointer; width: 100%; text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.side-link::before { /* repère d'élément actif / survolé */
  content: ""; position: absolute; left: -.75rem; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--c-white); transform: translateY(-50%); transition: height var(--t-med) var(--ease);
}
.side-link:hover { background: var(--c-side-bg-hover); color: var(--c-side-text); }
.side-link:hover::before { height: 40%; }
.side-link[aria-current="page"] { color: var(--c-white); background: var(--c-side-bg-hover); }
.side-link[aria-current="page"]::before { height: 65%; }
.side-link__label { transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
.side-link:hover .side-link__label { transform: translateX(3px); }

/* Pastille ronde blanche avec icône noire devant chaque élément */
.icon-dot {
  display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-white); color: var(--c-black);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.icon-dot svg { width: 1.1rem; height: 1.1rem; }
.side-link:hover .icon-dot { transform: scale(1.08) rotate(-6deg); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }

.sidebar__footer { margin-top: auto; display: grid; gap: .15rem; padding-top: var(--space-3); border-top: 1px solid var(--c-side-rule); }

/* Menu réduit : icônes seules, libellés en info-bulle */
.shell.is-collapsed .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
.shell.is-collapsed .sidebar__brand { flex-direction: column; justify-content: center; padding: 0; }
.shell.is-collapsed .sidebar__logo img { display: none; }
.shell.is-collapsed .sidebar__logo .brand-mark { display: block; }
.shell.is-collapsed .sidebar__collapse { transform: rotate(180deg); }
.shell.is-collapsed .account-card { justify-content: center; border-color: transparent; padding: var(--space-2) 0; }
.shell.is-collapsed .account-card__text,
.shell.is-collapsed .side-nav__title { display: none; }
.shell.is-collapsed .side-link { justify-content: center; padding: .45rem 0; }
.shell.is-collapsed .side-link__label {
  position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--c-black); color: var(--c-white); padding: .3rem .6rem; border-radius: var(--radius); font-size: var(--fs-sm);
  opacity: 0; pointer-events: none; box-shadow: var(--shadow); z-index: 20;
}
.shell.is-collapsed .side-link:hover .side-link__label,
.shell.is-collapsed .side-link:focus-visible .side-link__label { opacity: 1; transform: translateY(-50%) translateX(0); }
.shell.is-collapsed .sidebar { overflow: visible; }

.sidebar__mobile-toggle { display: none; }

/* Zone de contenu */
.main { min-width: 0; }
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-7)) var(--space-7); }
.page-head { margin-bottom: var(--space-6); }
.page-head p { color: var(--c-steel); }

/* Mobile : le menu devient une barre en haut, liste dépliable */
@media (max-width: 56rem) {
  .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; overflow: visible; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .sidebar__brand { padding: 0; }
  .sidebar__logo img { height: 1.9rem; }
  .shell.is-collapsed .sidebar__logo img { display: block; }
  .shell.is-collapsed .sidebar__logo .brand-mark { display: none; }
  .sidebar__collapse { display: none; }
  .sidebar__mobile-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); background: none; color: var(--c-side-text);
    border: 1px solid var(--c-side-rule); border-radius: var(--radius-pill); padding: .35rem .8rem; font: inherit; cursor: pointer;
  }
  .sidebar__mobile-toggle svg { width: 1.1rem; height: 1.1rem; }
  .js .sidebar__panel { display: none; }
  .js .sidebar.is-open .sidebar__panel { display: grid; gap: var(--space-3); }
  .sidebar__panel { display: grid; gap: var(--space-3); }
  .shell.is-collapsed .account-card { justify-content: flex-start; border-color: var(--c-side-rule); padding: var(--space-3) var(--space-2); }
  .shell.is-collapsed .account-card__text { display: grid; }
  .shell.is-collapsed .side-link { justify-content: flex-start; padding: .45rem var(--space-2); }
  .shell.is-collapsed .side-link__label { position: static; opacity: 1; transform: none; background: none; color: inherit; padding: 0; box-shadow: none; font-size: inherit; }
  .side-link::before { left: -1rem; }
}
@media (min-width: 56.0625rem) { .sidebar__panel { display: contents; } }

/* ── 4. COMPOSANTS ─────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* Fiche : bloc principal large + bloc latéral étroit, pleine largeur */
.grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
@media (max-width: 64rem) { .grid--main-side { grid-template-columns: minmax(0, 1fr); } }
.span-all { grid-column: 1 / -1; }
.stack > * + * { margin-top: var(--space-5); }

.panel { background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); }
.panel > :last-child { margin-bottom: 0; }
.panel--danger { border-color: var(--c-ko-rule); }
.panel--danger h2 { color: var(--c-ko); }
a.panel { text-decoration: none; transition: border-color var(--t-fast), transform var(--t-med) var(--ease); }
a.panel:hover { border-color: var(--c-ink); transform: translateY(-2px); }

/* Motif « hors cadre » : repères de coupe aux angles, écho au logo */
.framed { position: relative; }
.framed::before, .framed::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border-color: var(--c-black); border-style: solid; }
.framed::before { top: -7px; left: -7px; border-width: 2px 0 0 2px; }
.framed::after { bottom: -7px; right: -7px; border-width: 0 2px 2px 0; }

.figure { display: flex; flex-direction: column; gap: var(--space-1); }
.figure strong { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

dl.details { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
dl.details dt { color: var(--c-steel); }
dl.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { dl.details { grid-template-columns: 1fr; gap: 0; } dl.details dd { margin-bottom: var(--space-2); } }

/* Avatar rond (photo, image de société ou icône par défaut) ; la taille se règle sur le conteneur. */
.avatar-wrap { --avatar-size: 2.75rem; --avatar-ring: var(--c-white); position: relative; display: inline-grid; flex-shrink: 0; width: var(--avatar-size); height: var(--avatar-size); }
.avatar-wrap--sm { --avatar-size: 2.25rem; }
.avatar-wrap--lg { --avatar-size: 6rem; }
.avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--c-white); color: var(--c-black); box-shadow: 0 0 0 1px var(--c-rule); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 55%; height: 55%; }
.avatar-wrap--xs { --avatar-size: 1.5rem; }
/* Petit rond de la société, à cheval sur le bord, en bas à droite (centré sur le cercle à 45°) */
.avatar--badge { position: absolute; right: -8%; bottom: -8%; width: 45%; height: 45%; box-shadow: 0 0 0 2px var(--avatar-ring); }
.avatar--badge svg { width: 60%; height: 60%; }

/* Image de profil : aperçu + bouton ; le cadrage se fait dans une fenêtre (dialog) */
.image-editor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.image-editor__controls { display: grid; gap: var(--space-3); }
/* Champ de fichier masqué (le bouton visible est son libellé). Sélecteur renforcé : la règle générale
   des champs (width: 100%) ne doit pas l'élargir, sinon la page déborde en largeur. */
.image-editor .field { position: relative; }
input[type="file"].image-editor__file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.image-editor__pick { width: max-content; }
.image-editor__pick svg { width: 1.1rem; height: 1.1rem; }
.image-editor .field:focus-within .image-editor__pick { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.js .no-js-only { display: none; }
/* Pays : champ de recherche + liste */
.js .country-select__search.js-only { display: block !important; }
.country-select__search { margin-bottom: var(--space-1); }
.js .country-select select { min-height: 9rem; }

.crop-dialog { width: min(28rem, calc(100vw - 2rem)); border: 0; border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); color: var(--c-ink); }
.crop-dialog::backdrop { background: rgba(12, 12, 12, .6); backdrop-filter: blur(2px); }
.crop-dialog[open] { animation: hc-pop var(--t-med) var(--ease); }
/* Zone carrée ; le rond fait 80 % de la largeur ; tout ce qui dépasse est grisé */
.crop-dialog__viewport { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--c-haze); touch-action: none; cursor: grab; margin-bottom: var(--space-4); user-select: none; }
.crop-dialog__viewport.is-dragging { cursor: grabbing; }
.crop-dialog__viewport img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.crop-dialog__mask { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%; box-shadow: 0 0 0 100vmax rgba(40, 40, 40, .62); outline: 2px solid rgba(255, 255, 255, .9); pointer-events: none; }
.crop-dialog input[type="range"] { width: 100%; accent-color: var(--c-ink); }
.crop-dialog__actions { justify-content: flex-end; margin-top: var(--space-4); }
@keyframes hc-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: var(--radius);
  background: var(--c-ink); color: var(--c-white); border: 2px solid var(--c-ink);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } /* une icône dans un bouton garde toujours une petite taille */
.btn:hover { background: #3a3c40; border-color: #3a3c40; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-haze); color: var(--c-ink); }
.btn--danger { background: var(--c-ko); border-color: var(--c-ko); color: var(--c-white); }
.btn--danger:hover { background: #8f1e18; border-color: #8f1e18; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.linkish { background: none; border: 0; padding: var(--space-2); color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* En-tête de page avec action principale (« + Ajouter ») à droite */
.page-head--action { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: start; }
.page-head--action > .btn-add { grid-column: 2; grid-row: 1 / span 3; }
.page-head--action > :not(.btn-add) { grid-column: 1; }
@media (max-width: 40rem) { .page-head--action { grid-template-columns: 1fr; } .page-head--action > .btn-add { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-3); } }
.btn-add svg { width: 1.1rem; height: 1.1rem; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.panel-head h2 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
/* Avatar modifiable (photo déjà définie) : crayon au survol, petit menu */
.avatar-edit { position: relative; }
.avatar-edit > summary { list-style: none; cursor: pointer; position: relative; display: block; border-radius: 50%; }
.avatar-edit > summary::-webkit-details-marker { display: none; }
.avatar-edit__pencil {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: rgba(12, 12, 12, .45); color: var(--c-white); opacity: 0; transition: opacity var(--t-fast);
}
.avatar-edit__pencil svg { width: 1.6rem; height: 1.6rem; }
.avatar-edit > summary:hover .avatar-edit__pencil, .avatar-edit > summary:focus-visible .avatar-edit__pencil, .avatar-edit[open] .avatar-edit__pencil { opacity: 1; }
@media (hover: none) { .avatar-edit__pencil { opacity: .85; inset: auto -.2rem -.2rem auto; width: 2rem; height: 2rem; background: var(--c-black); } .avatar-edit__pencil svg { width: 1rem; height: 1rem; } }
.avatar-edit__menu {
  position: absolute; left: 0; top: calc(100% + .5rem); z-index: 30; min-width: 14rem; display: grid;
  background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); padding: var(--space-1);
}
.avatar-edit__menu form { margin: 0; }
.avatar-edit__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: .55rem .7rem; border: 0; background: none; font: inherit; font-size: var(--fs-sm); text-align: left; color: var(--c-ink); cursor: pointer; border-radius: 4px; }
.avatar-edit__item:hover { background: var(--c-haze); }
.avatar-edit__item svg { width: 1rem; height: 1rem; }
.avatar-edit__item--danger { color: var(--c-ko); }
.image-editor--compact { display: block; }

/* Bloc « lecture d'abord, modification ensuite » */
.editable:not(.is-editing) .editable__form { display: none; }
.editable.is-editing .editable__view, .editable.is-editing .editable__open, .editable.is-editing .badge--todo { display: none; }
/* Bloc incomplet : reflet de « verre liquide » qui tourne lentement autour du bloc */
@property --glass-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.editable { position: relative; }
.editable__glass {
  position: absolute; inset: -3px; padding: 3px; border-radius: calc(var(--radius-lg) + 3px); pointer-events: none;
  background: conic-gradient(from var(--glass-angle),
    rgba(31, 32, 35, .05) 0deg, rgba(31, 32, 35, .75) 35deg, rgba(255, 255, 255, .95) 70deg, rgba(154, 120, 30, .55) 120deg,
    rgba(31, 32, 35, .08) 180deg, rgba(200, 200, 206, .6) 250deg, rgba(255, 255, 255, .9) 300deg, rgba(31, 32, 35, .05) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hc-glass 16s linear infinite;
  display: none;
}
.editable.has-todo .editable__glass, .editable.just-completed .editable__glass { display: block; }
/* Bloc qui vient d'être complété : même reflet, en vert, plus rapide, 3 à 4 tours puis il s'estompe */
.editable.just-completed .editable__glass {
  background: conic-gradient(from var(--glass-angle),
    rgba(31, 111, 61, .05) 0deg, rgba(31, 111, 61, .85) 40deg, rgba(255, 255, 255, .95) 80deg, rgba(134, 219, 163, .9) 130deg,
    rgba(31, 111, 61, .1) 200deg, rgba(134, 219, 163, .7) 280deg, rgba(31, 111, 61, .05) 360deg);
  animation: hc-glass 1s linear 3.5, hc-glass-fade .9s ease-out 3.1s forwards;
}
.editable.just-completed { box-shadow: 0 12px 32px rgba(31, 111, 61, .14); transition: box-shadow 1.2s ease 3.5s; }
@keyframes hc-glass-fade { to { opacity: 0; } }
.editable.has-todo:not(.is-editing) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(250, 249, 246, 1) 55%, rgba(246, 244, 238, 1) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 32px rgba(31, 32, 35, .08), 0 2px 8px rgba(154, 120, 30, .08);
  animation: hc-glass-glow 3.5s ease-in-out infinite alternate;
}
.editable.is-editing .editable__glass { display: none; }
@keyframes hc-glass { to { --glass-angle: 360deg; } }
@keyframes hc-glass-glow { to { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 40px rgba(31, 32, 35, .12), 0 4px 16px rgba(154, 120, 30, .14); } }
.editable__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.editable__cancel { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }
.editable.is-editing { box-shadow: 0 0 0 2px var(--c-ink), var(--shadow); }
.btn--small { min-height: 2.25rem; padding: .3rem .8rem; font-size: var(--fs-sm); }
.badge--todo { background: var(--c-warn-bg); color: var(--c-warn); --corner: var(--c-warn); }

/* Lecture seule compacte : libellé discret au-dessus de la valeur */
.readonly-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.readonly-list__row { min-width: 0; }
.readonly-list dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-steel); font-weight: 600; margin-bottom: .1rem; }
.readonly-list dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.readonly-list__row.is-missing { padding: .35rem .6rem; margin: -.35rem -.6rem; border-radius: 4px;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(122, 90, 0, .07) 7px 8px); }
.readonly-list__row.is-missing dd { font-weight: 400; }
.todo-link { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--c-steel); text-decoration: none; font-size: var(--fs-sm); }
.todo-link__empty { font-style: italic; }
.todo-link__add { display: inline-flex; align-items: center; gap: .25rem; color: var(--c-warn); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.todo-link__add svg { width: .85rem; height: .85rem; }
.todo-link:hover .todo-link__add { color: var(--c-ink); }

/* Choix sous forme de cartes (ex. catégorie d'un compte) */
.choice-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.choice-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); cursor: pointer; font-weight: 600; background: var(--c-white); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.choice-card:hover { border-color: var(--c-ink); }
.choice-card:has(input:checked) { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
.choice-card input { accent-color: var(--c-ink); }
.choice-card__icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--c-ink); color: var(--c-white); }
.choice-card__icon svg { width: 1rem; height: 1rem; }
.form-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.form-note svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.stack-tight { display: grid; gap: var(--space-4); }

/* Étapes d'un parcours (ex. activation de la double authentification) */
.steps { list-style: none; counter-reset: step; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); padding: 0; color: var(--c-steel); font-size: .9375rem; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--space-2); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--c-steel); font-weight: 700; font-size: var(--fs-xs); }
.steps li[aria-current="step"] { color: var(--c-ink); font-weight: 650; }
.steps li[aria-current="step"]::before { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }

.qr { background: var(--c-white); padding: var(--space-3); border: 1px solid var(--c-rule); width: max-content; }
.codes { font-family: var(--font-mono); display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-1) var(--space-5); padding: var(--space-4); background: var(--c-haze); border-radius: var(--radius); }
.pager { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; margin-top: var(--space-4); }

/* En-tête de fiche d'une personne : chaque information a son propre style */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); }
.profile-head__avatar { position: relative; flex-shrink: 0; }
.profile-head__role-icon {  /* icône de catégorie en haut à gauche de la photo */
  position: absolute; left: -4%; top: -4%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-black); color: var(--c-white); box-shadow: 0 0 0 3px var(--c-haze);
}
.profile-head__role-icon svg { width: 1rem; height: 1rem; }
.profile-head__body { min-width: 0; }
.profile-head h1 { margin-bottom: var(--space-3); }
.profile-head__eyebrow { margin: 0 0 var(--space-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-steel); font-weight: 650; }
.profile-head__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fact { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fact svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Catégorie : pastille foncée, la plus visible */
.fact--role { background: var(--c-ink); color: var(--c-white); padding: .3rem .75rem .3rem .6rem; border-radius: 3px; font-weight: 650; }
.fact__sub { font-weight: 400; opacity: .8; }
/* Société : pastille claire avec son image */
.fact--company { background: var(--c-white); border: 1px solid var(--c-rule); padding: .2rem .75rem .2rem .3rem; border-radius: 3px; font-weight: 600; font-style: italic; --corner: var(--c-ink); }
.fact--company a { color: inherit; }
/* Contact : texte simple avec icône */
.fact--contact { color: var(--c-steel); }
.fact--contact a { color: var(--c-steel); }
.fact--contact a:hover { color: var(--c-ink); }

/* Bandeau discret « Complétez votre profil » (en haut du contenu) */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  max-width: var(--content-max); margin: var(--space-4) auto 0; padding: var(--space-2) var(--space-4);
  background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius); --corner: var(--c-warn); --corner-size: 12px;
  font-size: var(--fs-sm); color: var(--c-steel); box-shadow: var(--shadow);
  margin-left: clamp(var(--space-4), 3vw, var(--space-7)); margin-right: clamp(var(--space-4), 3vw, var(--space-7));
}
.nudge__text { margin: 0; flex: 1 1 16rem; }
.nudge__action { font-weight: 650; color: var(--c-ink); white-space: nowrap; }
.nudge__close { margin: 0; }
.nudge__close .linkish { padding: var(--space-1) var(--space-2); text-decoration: none; color: var(--c-steel); }
.nudge__progress { display: inline-block; width: 4.5rem; height: .35rem; border-radius: 1px; background: var(--c-haze); overflow: hidden; flex-shrink: 0; }
.nudge__bar { display: block; height: 100%; background: var(--c-ink); border-radius: inherit; }
.nudge__bar--0 { width: 3%; } .nudge__bar--10 { width: 10%; } .nudge__bar--20 { width: 20%; } .nudge__bar--30 { width: 30%; }
.nudge__bar--40 { width: 40%; } .nudge__bar--50 { width: 50%; } .nudge__bar--60 { width: 60%; } .nudge__bar--70 { width: 70%; }
.nudge__bar--80 { width: 80%; } .nudge__bar--90 { width: 90%; } .nudge__bar--100 { width: 100%; }

/* Message d'accueil personnalisé sur « Mon profil » */
.welcome { background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6); box-shadow: var(--shadow); }
.welcome__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.welcome__percent { font-size: var(--fs-sm); font-weight: 650; color: var(--c-steel); }
.welcome .nudge__progress { width: 100%; max-width: 24rem; margin: 0 0 var(--space-3); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.checklist li::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: var(--space-2); border: 1.5px solid var(--c-steel); border-radius: 2px; vertical-align: -.05rem; }
.checklist li.is-done { color: var(--c-ok); }
.checklist li.is-done::before { background: var(--c-ok); border-color: var(--c-ok); box-shadow: inset 0 0 0 2px var(--c-white); }
.checklist a { font-weight: 600; }

/* ── 5. FORMULAIRES ────────────────────────────────────────────────── */
.form { display: grid; gap: var(--space-4); max-width: 34rem; }
.field { display: grid; gap: var(--space-1); }
.field label, .field legend { font-weight: 600; }
.field .hint { color: var(--c-steel); font-size: var(--fs-sm); }
.field .req { color: var(--c-steel); font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; font: inherit; color: var(--c-ink); background: var(--c-white);
  border: 1px solid #8a8d92; border-radius: var(--radius); padding: .6rem .7rem; min-height: 2.75rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 1px; border-color: var(--c-ink); }
[aria-invalid="true"] { border: 2px solid var(--c-ko); background: var(--c-ko-bg); }
.error { font-size: .9rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin: 0; color: var(--c-ko); }
.error::before { content: "✕"; font-weight: 700; }
.error a { color: var(--c-ko); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--c-ink); }
.row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.filters { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin-bottom: var(--space-5); }

/* Règles du mot de passe, vérifiées pendant la saisie (public/js/app.js) */
.pw-rules { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--fs-sm); color: var(--c-steel); display: grid; gap: .1rem; }
.pw-rules li::before { content: "–"; display: inline-block; width: 1.3em; }
.pw-rules li.is-ok { color: var(--c-ok); }
.pw-rules li.is-ok::before { content: "✓"; font-weight: 700; }
.pw-rules li.is-ko { color: var(--c-ko); }
.pw-rules li.is-ko::before { content: "✕"; font-weight: 700; }
.pw-match { font-size: var(--fs-sm); font-weight: 600; margin: var(--space-1) 0 0; }
.pw-match.is-ok { color: var(--c-ok); }
.pw-match.is-ko { color: var(--c-ko); }

/* Coins opposés (haut-gauche, bas-droite) : repère d'état ou d'accent, à la place d'une bordure d'un seul côté.
   Couleur : --corner ; taille : --corner-size. Règle de design : jamais une seule bordure sur un cadre. */
.badge, .fact--company, .nudge, .notice, .error-summary, .confirm-dialog, .mail-split__item[aria-current] { position: relative; }
:is(.badge, .fact--company, .nudge, .notice, .error-summary, .confirm-dialog, .mail-split__item[aria-current])::before,
:is(.badge, .fact--company, .nudge, .notice, .error-summary, .confirm-dialog, .mail-split__item[aria-current])::after {
  content: ""; position: absolute; width: var(--corner-size, 6px); height: var(--corner-size, 6px);
  border: 0 solid var(--corner, var(--c-ink)); pointer-events: none;
}
:is(.badge, .fact--company, .nudge, .notice, .error-summary, .confirm-dialog, .mail-split__item[aria-current])::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: inherit; }
:is(.badge, .fact--company, .nudge, .notice, .error-summary, .confirm-dialog, .mail-split__item[aria-current])::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: inherit; }
.confirm-dialog::before, .confirm-dialog::after { border-width: 0; }
.confirm-dialog::before { top: 10px; left: 10px; border-top-width: 3px; border-left-width: 3px; }
.confirm-dialog::after { bottom: 10px; right: 10px; border-bottom-width: 3px; border-right-width: 3px; }

/* ── 6. ÉTATS ET MESSAGES : libellé + symbole, jamais la couleur seule ─ */
.notice { --corner: var(--c-ink); --corner-size: 14px; border: 1px solid var(--c-rule); background: var(--c-white); padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-5); }
.notice strong { display: block; }
.notice--success { background: var(--c-ok-bg); border-color: var(--c-ok-rule); --corner: var(--c-ok); }
.notice--success strong::before { content: "✓ "; color: var(--c-ok); }
.notice--error { background: var(--c-ko-bg); border-color: var(--c-ko-rule); --corner: var(--c-ko); }
.notice--error strong::before { content: "✕ "; color: var(--c-ko); }
.notice--warning { background: var(--c-warn-bg); border-color: var(--c-warn-rule); --corner: var(--c-warn); }
.notice--warning strong::before { content: "! "; color: var(--c-warn); }
.error-summary { --corner: var(--c-ko); --corner-size: 14px; border: 1px solid var(--c-ko-rule); background: var(--c-ko-bg); padding: var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-5); }
.error-summary strong::before { content: "✕ "; color: var(--c-ko); }
.error-summary ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.error-summary a { color: inherit; font-weight: 600; }

/* Étiquettes d'état : rectangulaires, petit liseré vertical à gauche, texte en petites capitales */
.badge {
  display: inline-flex; align-items: center; gap: .35em; white-space: nowrap;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 2px; background: var(--c-haze); color: var(--c-ink); --corner: var(--c-ink);
}
.badge--solid { background: var(--c-ink); color: var(--c-white); }
.badge--dashed { --corner: var(--c-steel); color: var(--c-steel); }
.badge--on { background: var(--c-ok-bg); color: var(--c-ok); --corner: var(--c-ok); }
.badge--off { background: var(--c-ko-bg); color: var(--c-ko); --corner: var(--c-ko); }

/* Interrupteur Actif / Désactivé : un bouton de formulaire, fonctionne sans JavaScript */
.switch-form { display: inline; margin: 0; }
.switch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0; background: none; border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ko); cursor: pointer; white-space: nowrap; }
.switch__track { position: relative; flex-shrink: 0; width: 2.6rem; height: 1.45rem; border-radius: var(--radius-pill); background: var(--c-ko); transition: background-color var(--t-fast); }
.switch__track::after { content: "✕"; position: absolute; top: .2rem; left: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--c-white); color: var(--c-ko); font-size: .65rem; line-height: 1.05rem; text-align: center; transition: transform var(--t-fast) var(--ease); }
.switch[aria-checked="true"] { color: var(--c-ok); }
.switch[aria-checked="true"] .switch__track { background: var(--c-ok); }
.switch[aria-checked="true"] .switch__track::after { content: "✓"; color: var(--c-ok); transform: translateX(1.15rem); }
.switch:hover .switch__track { box-shadow: 0 0 0 3px var(--c-rule); }

/* ── 7. TABLEAUX ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel .table-wrap { box-shadow: none; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; }
th, td { text-align: left; padding: .65rem var(--space-4); border-bottom: 1px solid var(--c-rule); vertical-align: middle; overflow-wrap: break-word; }
thead th { font-size: var(--fs-xs); color: var(--c-steel); font-weight: 600; background: var(--c-haze); }
tbody tr { transition: background-color var(--t-fast); }
tbody tr:hover { background: #fafafa; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }
/* Poubelle d'une ligne : discrète, apparaît au survol de la ligne (toujours visible sur écran tactile) */
.cell-actions { width: 3rem; text-align: right; }
.row-delete { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); color: var(--c-steel); opacity: 0; transition: opacity var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.row-delete svg { width: 1.1rem; height: 1.1rem; }
tr:hover .row-delete, .row-delete:focus-visible { opacity: 1; }
.row-delete:hover { background: var(--c-ko-bg); color: var(--c-ko); }
@media (hover: none) { .row-delete { opacity: .7; } }

/* Fenêtre de confirmation (suppression) */
.confirm-dialog { --corner: var(--c-ko); --corner-size: 18px; width: min(26rem, calc(100vw - 2rem)); border: 0; border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); color: var(--c-ink); }
.confirm-dialog::backdrop { background: rgba(12, 12, 12, .55); backdrop-filter: blur(2px); }
.confirm-dialog[open] { animation: hc-pop var(--t-med) var(--ease); }
.confirm-dialog form { display: grid; gap: var(--space-3); }
.confirm-dialog h2 { margin: 0; font-size: 1.125rem; }
.confirm-dialog__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--c-ko-bg); color: var(--c-ko); }
.confirm-dialog__icon svg { width: 1.3rem; height: 1.3rem; }
.confirm-dialog__actions { justify-content: flex-end; }

/* En-têtes triables */
.sort-link { display: inline-flex; align-items: center; gap: .25rem; color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link svg { width: .95rem; height: .95rem; opacity: .45; transition: opacity var(--t-fast); }
.sort-link:hover { color: var(--c-ink); }
.sort-link:hover svg, .sort-link.is-active svg { opacity: 1; }
.sort-link.is-active { color: var(--c-ink); }
/* Rôle : petite icône devant le libellé */
.role-tag { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.role-tag__icon { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c-haze); border: 1px solid var(--c-rule); }
.role-tag__icon svg { width: .8rem; height: .8rem; }
.changes { margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--c-steel); }
.cell-with-avatar { display: flex; align-items: center; gap: var(--space-3); }
.cell-with-avatar { text-decoration: none; }
.cell-with-avatar:is(a):hover span:last-child, a.cell-with-avatar:hover { text-decoration: underline; }
.cell-avatar { width: 3.25rem; padding-right: 0; }

/* ── 8. PAGES D'ACCÈS (connexion, inscription…) ────────────────────── */
.auth { position: relative; z-index: 1; display: grid; place-items: center; padding: var(--space-6) var(--space-4) var(--space-5); }
.auth__stack { width: 100%; max-width: 30rem; display: grid; justify-items: center; }
/* Typographie du logo au-dessus du cadre */
.auth__wordmark { margin: 0 0 3.25rem; line-height: 0; max-width: none; }
.auth__wordmark img { height: 3.4rem; width: auto; opacity: .95; }

/* Formulaire en « verre liquide » : verre dépoli, reflets sur les bords, coins arrondis */
.auth__card {
  /* Jetons adaptés au fond sombre (texte clair sur verre) */
  --c-ink: #f4f4f5; --c-steel: #c3c5c9; --c-rule: rgba(255, 255, 255, .22);
  --c-ok: #86dba3; --c-ko: #ff9c93; --c-warn: #f2cd7a;
  position: relative; width: 100%; color: var(--c-ink);
  padding: 3.75rem var(--space-6) var(--space-6); border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .11) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 80px rgba(0, 0, 0, .5);
  transition: opacity var(--t-med), transform .5s var(--ease);
}
/* Reflet lumineux qui glisse lentement sur le verre */
.auth__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, .22), transparent 55%),
              radial-gradient(80% 50% at 100% 100%, rgba(255, 255, 255, .08), transparent 60%);
  animation: hc-glass-sheen 12s ease-in-out infinite alternate;
}
@keyframes hc-glass-sheen { from { opacity: .7; transform: translateY(0); } to { opacity: 1; transform: translateY(-4px); } }
.auth__card > * { position: relative; }
/* Le symbole seul, dans un rond blanc, à cheval sur le bord supérieur */
.auth__seal {
  position: absolute !important; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%;
  background: var(--c-white); color: var(--c-black);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .45);
}
.auth__seal .brand-mark { width: 52%; height: 52%; }
.auth__card h1 { text-align: center; }
.auth__card > p.muted { text-align: center; margin-left: auto; margin-right: auto; }
/* Champs et boutons lisibles sur le verre */
.auth__card input[type="text"], .auth__card input[type="email"], .auth__card input[type="password"], .auth__card input[type="tel"], .auth__card input[type="search"], .auth__card select {
  color: #1f2023; background: rgba(255, 255, 255, .94); border-color: transparent; border-radius: 10px;
}
.auth__card [aria-invalid="true"] { border: 2px solid var(--c-ko); background: #fff5f4; }
.auth__card .btn { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); border-radius: 10px; }
.auth__card .btn:hover { background: #e9e9ea; border-color: #e9e9ea; }
.auth__card .btn--ghost { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, .5); }
.auth__card .btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.auth__card .notice, .auth__card .error-summary { color: #1f2023; --c-ink: #1f2023; --c-ok: #1f6f3d; --c-ko: #b3261e; --c-warn: #7a5a00; }
.auth__card .notice a, .auth__card .error-summary a { color: #1f2023; }
.auth__card .check input { accent-color: var(--c-white); }
.auth__foot { margin-top: var(--space-5); font-size: .9375rem; text-align: center; }
@media (max-width: 30rem) { .auth__card { padding: 3.25rem var(--space-4) var(--space-5); border-radius: 22px; } .auth__wordmark img { height: 2.7rem; } }

/* Bas des pages d'accès : informations légales et liens */
.auth-legal { position: relative; z-index: 1; text-align: center; padding: var(--space-4) var(--space-4) var(--space-5); color: #a9abb0; font-size: var(--fs-xs); }
.auth-legal p { margin: 0 auto var(--space-1); max-width: none; }
.auth-legal__links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }
.auth-legal a { color: #e3e4e6; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.auth-legal a:hover { border-bottom-color: #fff; }
body.guest { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; }

/* Pages d'accès : fond texturé sombre + les 4 pièces du symbole aux coins de l'écran */
body.guest { background: var(--c-side-bg) url("../images/brand/background-texture.webp") center / cover fixed; }
/* Taille des pièces : un seul réglage (--mark-size). */
.corner-marks { --mark-size: clamp(1.5rem, 4.25vmin, 2.75rem); --mark-inset: clamp(.9rem, 3vmin, 1.75rem); position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.corner-marks__piece { position: absolute; width: var(--mark-size); height: var(--mark-size); fill: var(--c-brand-light); opacity: .9; transform-origin: 50% 50%; animation: hc-idle 7s ease-in-out infinite; }
.corner-marks__piece--tl { left: var(--mark-inset); top: var(--mark-inset); --out-x: -1; --out-y: -1; }
.corner-marks__piece--tr { right: var(--mark-inset); top: var(--mark-inset); --out-x: 1; --out-y: -1; animation-delay: -1.75s; }
.corner-marks__piece--bl { left: var(--mark-inset); bottom: var(--mark-inset); --out-x: -1; --out-y: 1; animation-delay: -3.5s; }
.corner-marks__piece--br { right: var(--mark-inset); bottom: var(--mark-inset); --out-x: 1; --out-y: 1; animation-delay: -5.25s; }
@keyframes hc-idle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Connexion envoyée : les pièces respirent, le formulaire s'efface */
body.is-entering .corner-marks__piece { animation: hc-breathe-corner .9s ease-in-out infinite alternate; }
body.is-entering .auth__card { opacity: 0; transform: scale(.96); }
@keyframes hc-breathe-corner {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(calc(var(--out-x) * -1.5vmin), calc(var(--out-y) * -1.5vmin)) scale(1.45); }
}

/* Arrivée dans le tableau de bord après connexion : les pièces s'écartent et dévoilent l'espace */
.login-reveal { position: fixed; inset: 0; z-index: 95; pointer-events: none; background: var(--c-side-bg) url("../images/brand/background-texture.webp") center / cover; animation: hc-reveal-bg 1.1s var(--ease) .15s forwards; }
.login-reveal .corner-marks { z-index: 96; }
.login-reveal .corner-marks__piece { animation: hc-reveal-piece 1.1s var(--ease) .15s forwards; }
@keyframes hc-reveal-bg { to { opacity: 0; visibility: hidden; } }
@keyframes hc-reveal-piece {
  0% { transform: scale(1.45); opacity: .9; }
  35% { transform: scale(2); opacity: 1; }
  100% { transform: translate(calc(var(--out-x) * 30vmin), calc(var(--out-y) * 30vmin)) scale(6); opacity: 0; }
}

/* ── 9. ANIMATIONS : symbole du logo qui tourne et respire ─────────── */
.brand-mark { display: block; }
.brand-mark__piece { transform-box: view-box; transform-origin: 110px 110px; }
.page-loader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(243, 243, 244, .72); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-med), visibility 0s linear var(--t-med);
}
.page-loader.is-visible { opacity: 1; visibility: visible; transition: opacity var(--t-med); }
.page-loader .brand-mark { width: 4.5rem; height: 4.5rem; color: var(--c-black); }
.page-loader.is-visible .brand-mark { animation: hc-spin 2.4s var(--ease) infinite; }
.page-loader.is-visible .brand-mark__piece { animation: hc-breathe 1.2s ease-in-out infinite alternate; }
.brand-mark__piece--tl { --dx: -9px; --dy: -9px; }
.brand-mark__piece--tr { --dx: 9px;  --dy: -9px; }
.brand-mark__piece--bl { --dx: -9px; --dy: 9px; }
.brand-mark__piece--br { --dx: 9px;  --dy: 9px; }
@keyframes hc-spin { 0% { transform: rotate(0); } 70%, 100% { transform: rotate(360deg); } }
@keyframes hc-breathe { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--dx), var(--dy)) scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 10. UTILITAIRES ───────────────────────────────────────────────── */
.muted { color: var(--c-steel); }
.small { font-size: var(--fs-sm); }
.mt-6 { margin-top: var(--space-6); }
@media print { .sidebar, .actions, .page-loader { display: none; } .shell { display: block; } body { background: #fff; } }

/* ── Crédits (lot 2) ───────────────────────────────────────────────── */
/* Nombre de demandes en attente dans le menu : petit rectangle, pas de pastille ronde. */
.side-link__count {
  margin-left: auto; min-width: 1.4rem; padding: .05rem .35rem; border-radius: 3px; text-align: center;
  background: var(--c-white); color: var(--c-black); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.shell.is-collapsed .side-link__count { position: absolute; top: 0; right: .35rem; margin: 0; font-size: .6875rem; }

/* Solde : gros chiffre, validité en dessous. */
.balance { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.balance__value { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.balance__unit { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-left: .35rem; color: var(--c-steel); }
.balance__validity { display: inline-flex; gap: .4rem; align-items: center; color: var(--c-steel); font-size: var(--fs-sm); }
.balance__validity svg { width: 1rem; height: 1rem; }
.balance--empty .balance__value { color: var(--c-steel); }

/* Mouvements : montant signé, lisible sans la couleur (signe + / −). */
td.amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
td.amount--in { color: var(--c-ok); }
td.amount--out { color: var(--c-ink); }

/* Zones repliables (formulaires secondaires d'une fiche). */
.disclosure { border-top: 1px solid var(--c-rule); padding-top: var(--space-3); margin-top: var(--space-4); }
.disclosure > summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.1rem; font-weight: 700; }
.disclosure[open] > summary::before { content: "−"; }
.disclosure > .form { margin-top: var(--space-3); }

.vat-breakdown { font-variant-numeric: tabular-nums; }
.inline-form { display: inline; }

/* Paramètres → aperçu des e-mails : liste à gauche, e-mail à droite. */
.mail-split { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-4); align-items: start; }
.mail-split__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mail-split__item {
  position: relative; display: grid; gap: .1rem; padding: var(--space-3); border-radius: var(--radius); text-decoration: none; color: var(--c-ink);
  border: 1px solid transparent; transition: background-color var(--t-fast), border-color var(--t-fast);
}
.mail-split__item:hover { background: var(--c-haze); }
.mail-split__item[aria-current="true"] { background: var(--c-haze); border-color: var(--c-rule); --corner: var(--c-ink); }
.mail-split__label { font-weight: 650; }
.mail-split__audience { font-size: var(--fs-xs); color: var(--c-steel); }
.mail-split__view { min-width: 0; border: 1px solid var(--c-rule); border-radius: var(--radius-lg); overflow: hidden; background: #f3f3f4; }
.mail-split__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--c-white); border-bottom: 1px solid var(--c-rule); }
.mail-split__head p { margin: 0; overflow-wrap: anywhere; }
.mail-split__frame { display: block; width: 100%; height: min(80vh, 52rem); border: 0; background: #f3f3f4; }
@media (max-width: 60rem) { .mail-split { grid-template-columns: 1fr; } .mail-split__frame { height: 70vh; } }

/* ── Barre du haut : récapitulatif des crédits et cloche, en « verre liquide » ── */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3);
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-7)) 0;
  pointer-events: none; /* la barre laisse passer les clics ; ses éléments les reçoivent */
}
.topbar > * { pointer-events: auto; }
.topbar ~ .page { padding-top: var(--space-4); }

/* Verre : translucide, flou de ce qui passe dessous, reflet en haut, liseré lumineux dégradé. */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(15, 16, 17, .05),
              0 10px 30px rgba(15, 16, 17, .10), 0 1px 3px rgba(15, 16, 17, .08);
}
.glass::before { /* reflet */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%);
}
.glass::after { /* liseré : clair en haut à gauche, plus sombre en bas à droite */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(160, 162, 166, .35) 45%, rgba(255, 255, 255, .6) 70%, rgba(31, 32, 35, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Récapitulatif des crédits (clients) */
.credit-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: .35rem 1rem .35rem .4rem;
  border-radius: var(--radius-pill); color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.credit-chip:hover { transform: translateY(-1px); color: var(--c-ink); }
.credit-chip__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-ink); color: var(--c-white); }
.credit-chip__icon svg { width: 1.05rem; height: 1.05rem; }
.credit-chip__value strong { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.credit-chip__sep { width: 1px; align-self: stretch; margin: .3rem .15rem; background: rgba(31, 32, 35, .15); }
.credit-chip__date { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-steel); font-variant-numeric: tabular-nums; }
.credit-chip__date svg { width: .95rem; height: .95rem; }
@media (max-width: 30rem) { .credit-chip__date { display: none; } .credit-chip__sep { display: none; } }

/* Cloche */
.bell { position: relative; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell__button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; color: var(--c-ink);
  transition: transform var(--t-med) var(--ease);
}
.bell__button svg { width: 1.25rem; height: 1.25rem; }
.bell__button:hover { transform: translateY(-1px); }
.bell__button:hover svg { animation: hc-bell-ring .6s ease-in-out; transform-origin: 50% 15%; }
.bell[open] .bell__button { transform: none; }
@keyframes hc-bell-ring { 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }
.bell__count {
  position: absolute; top: -.2rem; right: -.2rem; z-index: 1; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem;
  border-radius: 999px; background: #d92d20; color: #fff; font-size: .7rem; font-weight: 750; line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 2px 6px rgba(217, 45, 32, .35);
  transition: transform var(--t-med) var(--ease), opacity var(--t-med);
}
.bell__count.is-leaving { transform: scale(0); opacity: 0; }

/* Fenêtre qui part de la cloche */
.bell__panel {
  position: absolute; top: calc(100% + .65rem); right: 0; width: min(24rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem); overflow-y: auto; border-radius: 20px; padding: var(--space-3);
  background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .64));
  transform-origin: calc(100% - 1.375rem) -.65rem; animation: hc-bell-open .28s var(--ease);
}
@keyframes hc-bell-open { from { opacity: 0; transform: scale(.6) translateY(-6px); } to { opacity: 1; transform: none; } }
.bell__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-2); }
.bell__head h2 { margin: 0; font-size: 1rem; }
.bell__head .linkish { padding: 0; color: var(--c-steel); }
.bell__empty { margin: 0; padding: var(--space-4) var(--space-2); color: var(--c-steel); font-size: var(--fs-sm); }
.bell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bell__item { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: 12px; color: var(--c-ink); text-decoration: none; transition: background-color var(--t-fast); }
.bell__item:hover { background: rgba(31, 32, 35, .06); color: var(--c-ink); }
.bell__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(31, 32, 35, .07); }
.bell__icon svg { width: 1rem; height: 1rem; }
.bell__item.is-new .bell__icon { background: var(--c-ink); color: var(--c-white); }
.bell__text { display: grid; gap: .1rem; min-width: 0; }
.bell__title { font-weight: 650; font-size: var(--fs-sm); }
.bell__item.is-new .bell__title::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .4rem; border-radius: 50%; background: #d92d20; vertical-align: .1rem; }
.bell__body { font-size: var(--fs-sm); color: var(--c-steel); overflow-wrap: anywhere; }
.bell__time { font-size: var(--fs-xs); color: var(--c-steel); }

/* Tableau de bord : date d'échéance mise en avant */
.balance__date { color: var(--c-ink); font-weight: 700; }
.balance__validity { align-items: flex-start; }
.balance__validity svg { margin-top: .15rem; flex-shrink: 0; }
.balance__label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--c-ink); }
@media print { .topbar { display: none; } }

/* ── Lot 3 : réservations ──────────────────────────────────────────── */
/* Sous-menu de « Paramètres » */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); padding: .3rem; background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; }
.tabs__item { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: var(--radius); color: var(--c-steel); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.tabs__item svg { width: 1rem; height: 1rem; }
.tabs__item:hover { color: var(--c-ink); background: var(--c-haze); }
.tabs__item[aria-current="page"] { background: var(--c-ink); color: var(--c-white); }

/* Horaires d'ouverture */
.hours-grid { display: grid; gap: var(--space-2); max-width: 30rem; }
.hours-row { display: grid; grid-template-columns: 9rem 1fr auto 1fr; gap: var(--space-2); align-items: center; }
.hours-row__day { font-weight: 600; }
.hours-row:has(input[type="checkbox"]:not(:checked)) input[type="time"] { opacity: .45; }
@media (max-width: 30rem) { .hours-row { grid-template-columns: 1fr 1fr auto 1fr; } }

.plain-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.inline-add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.inline-add .field { min-width: min(100%, 14rem); }
.holiday-list { list-style: none; margin: 0; padding: 0; columns: 2 16rem; font-size: var(--fs-sm); }
.holiday-list li { padding: .2rem 0; break-inside: avoid; }
.holiday-list .num { display: inline-block; width: 6.5rem; color: var(--c-steel); font-variant-numeric: tabular-nums; }

/* Choix de la date : bande des prochains jours */
.day-strip { list-style: none; margin: 0 0 var(--space-4); padding: 0 0 var(--space-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.25rem, 1fr); gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; }
.day-strip li { scroll-snap-align: start; }
.day-strip__day {
  position: relative; display: grid; justify-items: center; gap: .05rem; padding: var(--space-2) var(--space-1); border: 1px solid var(--c-rule); border-radius: var(--radius-lg);
  background: var(--c-white); color: var(--c-ink); text-decoration: none; text-align: center; transition: border-color var(--t-fast), transform var(--t-med) var(--ease);
}
.day-strip__day:hover { border-color: var(--c-ink); transform: translateY(-2px); color: var(--c-ink); }
.day-strip__name, .day-strip__month { font-size: var(--fs-xs); color: var(--c-steel); text-transform: capitalize; }
.day-strip__num { font-size: 1.4rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.day-strip__state { font-size: .72rem; font-weight: 650; margin-top: .2rem; }
.day-strip__day.is-free .day-strip__state { color: var(--c-ok); }
.day-strip__day.is-request { border-style: dashed; }
.day-strip__day.is-request .day-strip__state { color: var(--c-warn); }
.day-strip__day.is-closed { background: var(--c-haze); color: var(--c-steel); }
.day-strip__day.is-closed .day-strip__state { color: var(--c-steel); font-weight: 500; }
.day-strip__day[aria-current="date"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.day-strip__day[aria-current="date"] :is(.day-strip__name, .day-strip__month, .day-strip__state) { color: rgba(255, 255, 255, .8); }

/* Choix de l'heure : grille de boutons radio */
.slot-grid { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); }
.slot { position: relative; display: grid; gap: .05rem; padding: .55rem .7rem; border: 1px solid var(--c-rule); border-radius: var(--radius); cursor: pointer; background: var(--c-white); transition: border-color var(--t-fast), background-color var(--t-fast); }
.slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.slot:hover { border-color: var(--c-ink); }
.slot:has(input:focus-visible) { outline: 3px solid var(--c-ink); outline-offset: 1px; }
.slot:has(input:checked) { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.slot__time { font-weight: 750; font-variant-numeric: tabular-nums; }
.slot__end { font-size: var(--fs-xs); color: var(--c-steel); font-variant-numeric: tabular-nums; }
.slot:has(input:checked) .slot__end { color: rgba(255, 255, 255, .75); }
.slot--request { border-style: dashed; }
.slot__tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-warn); }
.slot:has(input:checked) .slot__tag { color: #ffd98a; }

/* Pages légales */
.auth__card--wide { width: min(46rem, calc(100vw - 2rem)); max-width: none; }
.legal-page { text-align: left; }
.legal-page h1 { font-size: 1.6rem; }
.legal-page h2 { font-size: 1.05rem; margin-top: var(--space-5); }
.sidebar__legal { margin: 0 0 var(--space-2); padding: 0 var(--space-2); font-size: .72rem; color: var(--c-side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__legal a { color: var(--c-side-muted); }
.shell.is-collapsed .sidebar__legal { display: none; }

/* ── Réserver : vue « calendrier » (une colonne par jour) ─────────── */
.week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.week-head h2 { margin: 0; }
.week-nav { display: flex; align-items: center; gap: var(--space-2); }
.week-nav__label { font-weight: 650; font-size: var(--fs-sm); min-width: 13rem; text-align: center; }
.cal-legend { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-xs); color: var(--c-steel); }
.cal-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.cal-swatch { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 3px; border: 1px solid var(--c-rule); }

.week-cal {
  --q: 11px;                      /* hauteur d'un quart d'heure */
  display: grid; grid-template-columns: 3.25rem repeat(7, minmax(5.5rem, 1fr)); overflow-x: auto;
  border: 1px solid var(--c-rule); border-radius: var(--radius-lg); background: var(--c-white); user-select: none;
}
.week-cal__times { border-right: 1px solid var(--c-rule); }
.week-cal__corner, .week-cal__head { height: 3.25rem; border-bottom: 1px solid var(--c-rule); }
.week-cal__hours { display: grid; grid-auto-rows: calc(var(--q) * 4); }
.week-cal__hours span { font-size: .68rem; color: var(--c-steel); text-align: right; padding-right: .4rem; transform: translateY(-.45rem); font-variant-numeric: tabular-nums; }
.week-cal__hours span:first-child { transform: none; }
.week-cal__day { min-width: 0; border-right: 1px solid var(--c-rule); }
.week-cal__day:last-child { border-right: 0; }
.week-cal__head { display: grid; justify-items: center; align-content: center; gap: 0; background: var(--c-white); position: sticky; top: 0; }
.week-cal__dow { font-size: var(--fs-xs); color: var(--c-steel); text-transform: capitalize; }
.week-cal__num { font-size: 1.15rem; font-weight: 750; line-height: 1.1; }
.week-cal__note { font-size: .62rem; color: var(--c-steel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .25rem; }
.week-cal__day.is-today .week-cal__num { background: var(--c-ink); color: var(--c-white); border-radius: 999px; padding: 0 .45rem; }
.week-cal__col { position: relative; display: grid; grid-auto-rows: var(--q); cursor: pointer; touch-action: pan-x; }

/* Zones */
.cal-cell { position: relative; border-top: 1px solid transparent; }
.cal-cell.is-hour { border-top-color: #eceef0; }
.cal-cell--open { background: var(--c-white); }
.cal-cell--open:hover { background: #f4f5f6; }
.cal-cell--request { background: #dcdde0; }
.cal-cell--request.is-hour { border-top-color: #cfd1d4; }
.cal-cell--booked { background: var(--c-black); border-top-color: var(--c-black) !important; cursor: not-allowed; }
.cal-cell--gap { background: repeating-linear-gradient(135deg, #3a3b3e 0 3px, #5b5d61 3px 6px); cursor: not-allowed; }
.cal-cell--closed { background: repeating-linear-gradient(135deg, #1f2023 0 4px, #2c2d30 4px 8px); cursor: not-allowed; }
.cal-cell--off { background: repeating-linear-gradient(135deg, #f1f2f3 0 4px, #e6e7e9 4px 8px); cursor: not-allowed; }
.cal-cell__label { position: absolute; top: .15rem; left: .35rem; right: .2rem; z-index: 1; font-size: .66rem; font-weight: 700; color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; }

/* Séance placée : bloc de 4 h en « verre », déplaçable */
.cal-block {
  position: absolute; left: 3px; right: 3px; z-index: 3; border-radius: 10px; padding: .35rem .45rem; cursor: grab; touch-action: none;
  display: grid; align-content: start; gap: .1rem; color: var(--c-ink); font-size: var(--fs-xs);
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 2px solid var(--c-ok); box-shadow: 0 8px 22px rgba(15, 16, 17, .22), inset 0 1px 0 #fff;
  transition: top .12s var(--ease), border-color var(--t-fast), box-shadow var(--t-fast);
}
.cal-block:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.cal-block.is-dragging { cursor: grabbing; transition: none; box-shadow: 0 14px 30px rgba(15, 16, 17, .3); }
.cal-block.is-request { border-color: var(--c-warn); border-style: dashed; }
.cal-block.is-invalid { border-color: var(--c-ko); background: linear-gradient(160deg, rgba(253, 236, 235, .95), rgba(253, 236, 235, .8)); }
.cal-block__time { font-weight: 750; font-size: .8rem; font-variant-numeric: tabular-nums; }
.cal-block__tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-warn); }
.cal-block.is-invalid .cal-block__tag { color: var(--c-ko); }
.cal-block__grip { position: absolute; left: 50%; bottom: .3rem; width: 1.5rem; height: 3px; margin-left: -.75rem; border-radius: 3px; background: rgba(31, 32, 35, .25); }
.week-cal__status { margin: var(--space-3) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.week-cal__status.is-ok { color: var(--c-ok); }
.week-cal__status.is-request { color: var(--c-warn); }
.week-cal__status.is-invalid { color: var(--c-ko); }
@media (max-width: 40rem) { .week-cal { --q: 10px; } }

/* ── Halo animé noir et blanc (étape en cours, demande de crédits) ── */
.halo, .step { position: relative; }
.halo::before, .step.is-current::before {
  content: ""; position: absolute; inset: -3px; padding: 3px; border-radius: calc(var(--radius-lg) + 3px); pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--glass-angle),
    rgba(31, 32, 35, .06) 0deg, rgba(12, 12, 12, .9) 45deg, rgba(255, 255, 255, 1) 90deg, rgba(150, 152, 156, .7) 140deg,
    rgba(31, 32, 35, .08) 200deg, rgba(210, 211, 214, .8) 260deg, rgba(255, 255, 255, .95) 310deg, rgba(31, 32, 35, .06) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hc-glass 7s linear infinite;
}
.step { transition: opacity var(--t-med), box-shadow var(--t-med); }
.step.is-current { box-shadow: 0 14px 36px rgba(15, 16, 17, .12), 0 2px 8px rgba(15, 16, 17, .06); animation: hc-halo-glow 2.8s ease-in-out infinite alternate; }
.step.is-done:not(.booking-recap) { opacity: .92; }
@keyframes hc-halo-glow { to { box-shadow: 0 18px 44px rgba(15, 16, 17, .18), 0 3px 10px rgba(15, 16, 17, .08); } }
.halo {
  background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(244, 245, 246, .92));
  box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(15, 16, 17, .10);
  animation: hc-halo-glow 3.2s ease-in-out infinite alternate;
}

/* ── Réserver : étapes à gauche, récapitulatif collant à droite (en bas sur téléphone) ── */
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: var(--space-5); align-items: start; }
.booking-recap { position: sticky; top: var(--space-4); }
@media (max-width: 64rem) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-recap { top: auto; bottom: var(--space-3); z-index: 20; }
  .booking-recap .booking-recap__list dt:not(:first-of-type), .booking-recap .booking-recap__list dd:not(:first-of-type), .booking-recap__terms { display: none; }
}

/* Verre sombre : attire l'œil sans quitter le noir et blanc */
.glass-dark {
  isolation: isolate; color: #f1f1f2; border-radius: 20px; padding: var(--space-5);
  background: linear-gradient(160deg, rgba(24, 25, 27, .9), rgba(12, 12, 12, .78));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 18px 44px rgba(12, 12, 12, .35);
}
.glass-dark::after { /* liseré lumineux */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .02) 65%, rgba(255, 255, 255, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass-dark h2 { color: #fff; font-size: 1.05rem; margin: 0 0 var(--space-3); }
.booking-recap.is-current::before { inset: -4px; padding: 4px; border-radius: 24px; }
.booking-recap__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem var(--space-3); margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.booking-recap__list dt { color: rgba(255, 255, 255, .6); }
.booking-recap__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.booking-recap__muted { color: rgba(255, 255, 255, .6); font-weight: 400; }
.booking-recap__request { margin: 0 0 var(--space-3); padding: .5rem .7rem; border-radius: 10px; border: 1px dashed rgba(255, 217, 138, .7); color: #ffd98a; font-size: var(--fs-xs); font-weight: 600; }
.booking-recap__warn { margin: 0 0 var(--space-2); color: #ffd98a; font-weight: 600; font-size: var(--fs-sm); }
.booking-recap__send { width: 100%; }
.booking-recap__cancel { display: block; margin-top: var(--space-2); text-align: center; color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); }
.booking-recap__cancel:hover { color: #fff; }
.booking-recap__terms { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.btn--light { background: #fff; color: var(--c-black); border-color: #fff; border-radius: 12px; }
.btn--light:hover { background: #e9e9ea; border-color: #e9e9ea; color: var(--c-black); }

/* Crédit insuffisant : message et bouton bien visibles */
.credit-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Demande de crédits : verre clair avec halo */
.credit-request h2 { display: flex; align-items: center; gap: var(--space-2); }
.credit-request__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-ink); color: var(--c-white); }
.credit-request__icon svg { width: 1.05rem; height: 1.05rem; }

/* Tableau de bord admin : une icône par bloc */
.figure { position: relative; }
.figure__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: var(--space-2); border-radius: 50%; background: var(--c-ink); color: var(--c-white); transition: transform var(--t-med) var(--ease); }
.figure__icon svg { width: 1.2rem; height: 1.2rem; }
a.figure:hover .figure__icon { transform: scale(1.08) rotate(-6deg); }

/* Barre du haut : rappel du profil à gauche, crédits et cloche à droite, sur une même ligne.
   Elle ne colle plus au défilement (elle masquait des boutons de la page). */
.topbar { position: relative; top: auto; align-items: center; }
.topbar__spacer { flex: 1 1 auto; }
.topbar .nudge {
  flex: 1 1 22rem; min-width: 0; margin: 0; min-height: 2.75rem; padding: .35rem .4rem .35rem var(--space-4);
  flex-wrap: nowrap; gap: var(--space-3); border-radius: 12px;
}
.topbar .nudge__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nudge__close { margin: 0 0 0 auto; display: flex; }
.nudge__close-btn {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 8px; cursor: pointer;
  background: var(--c-haze); color: var(--c-ink); border: 1px solid var(--c-rule); transition: background-color var(--t-fast), border-color var(--t-fast);
}
.nudge__close-btn svg { width: .95rem; height: .95rem; }
.nudge__close-btn:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
@media (max-width: 56rem) {
  .topbar { flex-wrap: wrap; }
  .topbar .nudge { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .topbar .nudge__text { white-space: normal; }
}

/* Réservations nommées (administration) */
.agenda-block {
  position: absolute; left: 3px; right: 3px; z-index: 2; display: grid; align-content: start; gap: .05rem; overflow: hidden;
  padding: .3rem .4rem; border-radius: 8px; font-size: .7rem; line-height: 1.25; text-decoration: none;
  background: var(--c-black); color: var(--c-white); box-shadow: 0 4px 12px rgba(12, 12, 12, .25);
}
a.agenda-block:hover { color: var(--c-white); box-shadow: 0 6px 18px rgba(12, 12, 12, .4); outline: 2px solid var(--c-white); outline-offset: -3px; }
span.agenda-block { pointer-events: none; }
.agenda-block__time { font-weight: 750; font-variant-numeric: tabular-nums; }
.agenda-block__who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-block__tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #ffd98a; }
.agenda-block--pending { background: #3a3b3e; border: 2px dashed #ffd98a; }
.agenda-block--internal { background: repeating-linear-gradient(135deg, #1f2023 0 5px, #2e2f33 5px 10px); }
[data-week-agenda] .week-cal__col { cursor: default; }

/* ── Médaillon d'icône à cheval sur le bord (tableaux de bord) ── */
.grid--seals { margin-top: 2.25rem; row-gap: calc(var(--space-5) + 1.75rem); }
.has-seal { position: relative; padding-top: 2.6rem; }
.figure.has-seal { align-items: center; text-align: center; }
.seal {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--c-white); color: var(--c-black); border: 1px solid var(--c-rule);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 8px 20px rgba(15, 16, 17, .16);
  transition: box-shadow var(--t-med) var(--ease);
}
.seal svg { width: 1.35rem; height: 1.35rem; }
a.has-seal:hover .seal { box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 12px 26px rgba(15, 16, 17, .24); }
/* Action à mener : l'icône se secoue toutes les 4 s environ */
.seal--alert svg { animation: hc-shake 4s ease-in-out infinite; transform-origin: 50% 20%; }
.seal--alert::after {
  content: ""; position: absolute; top: .1rem; right: .1rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: #d92d20; box-shadow: 0 0 0 2px #fff;
}
@keyframes hc-shake {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-2deg); }
}

/* Récapitulatif en barre : collé en bas de la fenêtre, sur toute la largeur du contenu (remplace la colonne de droite). */
.booking-layout { grid-template-columns: minmax(0, 1fr); }
.booking-recap {
  position: sticky; top: auto; bottom: var(--space-3); z-index: 30; margin-top: var(--space-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-5);
  padding: .85rem 1.1rem .85rem 1.3rem; border-radius: 18px;
}
.booking-recap__title { margin: 0 !important; font-size: .7rem !important; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6) !important; writing-mode: horizontal-tb; }
.booking-recap__list { display: flex; flex-wrap: wrap; gap: .35rem var(--space-5); margin: 0; }
.booking-recap__item { display: grid; gap: .05rem; min-width: 0; }
.booking-recap__item dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.booking-recap__item dd { margin: 0; font-weight: 650; font-size: var(--fs-sm); }
.booking-recap__item:first-child dd { font-size: .95rem; }
.booking-recap__actions { display: flex; align-items: center; gap: var(--space-3); }
.booking-recap__actions .booking-recap__send { width: auto; white-space: nowrap; padding-left: 1.4rem; padding-right: 1.4rem; }
.booking-recap__actions .booking-recap__cancel { margin: 0; }
.booking-recap__warn { margin: 0; }
.booking-recap__request { grid-column: 2 / -1; margin: 0; }
.booking-recap__terms { grid-column: 1 / -1; margin: 0; }
.booking-recap.is-current::before { border-radius: 22px; }
@media (max-width: 56rem) {
  .booking-recap { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); bottom: var(--space-2); }
  .booking-recap__title, .booking-recap__terms, .booking-recap__item:not(:first-child) { display: none; }
  .booking-recap__request { grid-column: 1; }
  .booking-recap__actions { justify-content: space-between; }
}

/* Après une réservation : crédits restants + suites possibles */
.booked-next { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; margin: 2.25rem 0 var(--space-6); }
.booked-next__credits { position: relative; text-align: center; padding-top: 2.4rem; }
.booked-next__label { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .65); }
.booked-next__value { margin: .1rem 0; font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.booked-next__hint { margin: 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); }
.booked-next__actions {
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--c-rule); border-radius: 20px; background: var(--c-white); box-shadow: var(--shadow);
}
.booked-next__lead { flex-basis: 100%; margin: 0 0 var(--space-1); font-weight: 650; }
.booked-next__again svg, .booked-next__actions .btn svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 40rem) { .booked-next { grid-template-columns: 1fr; } }

/* Barre récapitulative sur une seule ligne : 3 éléments avec icônes, détails dans l'infobulle « i ». */
.booking-recap { grid-template-columns: minmax(0, 1fr) auto; padding: .6rem .8rem .6rem 1.2rem; gap: var(--space-2) var(--space-4); }
.booking-recap__list { flex-wrap: nowrap; align-items: center; gap: var(--space-2) var(--space-5); min-width: 0; overflow: hidden; }
.booking-recap__item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.booking-recap__item dt { display: grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.booking-recap__item dt svg { width: 1rem; height: 1rem; }
.booking-recap__item dd { font-size: var(--fs-sm) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-recap__item:first-child { flex-shrink: 0; }
.booking-recap__item--request dt { background: rgba(255, 217, 138, .2); color: #ffd98a; }
.booking-recap__item--request dd { color: #ffd98a; }
.booking-recap__item--request[hidden] { display: none; }

/* Infobulle « i » : au survol, au clavier (focus) ou au toucher */
.info-tip { position: relative; display: inline-flex; }
.info-tip__button {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; cursor: help;
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); transition: background-color var(--t-fast);
}
.info-tip__button svg { width: 1.1rem; height: 1.1rem; }
.info-tip__button:hover, .info-tip__button:focus-visible, .info-tip.is-open .info-tip__button { background: rgba(255, 255, 255, .25); }
.info-tip__bubble {
  position: absolute; right: -.4rem; bottom: calc(100% + .8rem); z-index: 5; width: min(22rem, calc(100vw - 2rem));
  display: grid; gap: .45rem; padding: var(--space-3) var(--space-4); border-radius: 14px;
  background: rgba(20, 21, 23, .96); color: #f1f1f2; font-size: var(--fs-xs); line-height: 1.45; text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.info-tip__bubble::after { content: ""; position: absolute; right: 1.1rem; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.info-tip__line { display: block; padding-left: .9rem; position: relative; }
.info-tip__line::before { content: "–"; position: absolute; left: 0; color: rgba(255, 255, 255, .5); }
.info-tip:hover .info-tip__bubble, .info-tip:focus-within .info-tip__bubble, .info-tip.is-open .info-tip__bubble { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 56rem) {
  .booking-recap { grid-template-columns: minmax(0, 1fr); }
  .booking-recap__item:not(:first-child):not(.booking-recap__item--request) { display: none; }
}
.booking-recap__list .booking-recap__item { flex: 0 0 auto; }
.booking-recap__item dd { overflow: visible; }
@media (max-width: 72rem) { .booking-recap__item:nth-child(3) { display: none; } } /* place réduite : le crédit reste dans l'infobulle */

/* ── Réservations : date « page de calendrier », lignes cliquables, statut en grand ── */
.date-tile {
  display: grid; justify-items: center; align-content: center; flex-shrink: 0; width: 3.6rem; padding: .35rem 0 .4rem;
  border-radius: 12px; background: var(--c-white); border: 1px solid var(--c-rule); box-shadow: 0 2px 6px rgba(15, 16, 17, .06); line-height: 1.05;
  position: relative; overflow: hidden;
}
.date-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c-ink); }
.date-tile__dow, .date-tile__month { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-steel); font-weight: 650; }
.date-tile__num { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; margin: .05rem 0; }
.date-tile--sm { width: 3rem; padding: .25rem 0 .3rem; }
.date-tile--sm .date-tile__num { font-size: 1.25rem; }

.booking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.booking-list__item { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.booking-row {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border-radius: 14px; text-decoration: none; color: var(--c-ink);
  background: var(--c-white); border: 1px solid var(--c-rule); box-shadow: var(--shadow); transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.booking-row:hover { color: var(--c-ink); border-color: var(--c-ink); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 16, 17, .10); }
.booking-list:has(.booking-row__who) .booking-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.booking-row__main, .booking-row__who > span { display: grid; gap: .1rem; min-width: 0; }
.booking-row__time { font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.booking-row__meta { font-size: var(--fs-sm); color: var(--c-steel); overflow-wrap: anywhere; }
.booking-row__who { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; min-width: 0; }
.booking-row__status { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }
.booking-row__go { font-size: 1.5rem; color: var(--c-steel); line-height: 1; }
/* Demandes en attente : fond ambré pour attirer l'attention */
.booking-list__item.is-pending .booking-row { background: linear-gradient(135deg, #fff8e3, #fff2cf); border-color: var(--c-warn-rule); }
.booking-list__item.is-pending .date-tile::before { background: #b88a12; }
.booking-list__quick { flex-shrink: 0; margin: 0; }
@media (max-width: 48rem) {
  .booking-row, .booking-list:has(.booking-row__who) .booking-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .booking-row__who { grid-column: 2 / -1; }
  .booking-row__status { grid-column: 2 / -1; justify-content: flex-start; }
  .booking-row__go { display: none; }
  .booking-list__item { flex-wrap: wrap; }
}

.title-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.title-status h1 { margin: 0; }
.title-company { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.title-company:hover h1 { text-decoration: underline; text-underline-offset: .15em; }
.status-big { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .35rem; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-rule); font-weight: 750; font-size: 1.05rem; }
.status-big__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #fff; background: var(--c-steel); }
.status-big__icon svg { width: 1.3rem; height: 1.3rem; stroke-width: 2.4; }
.status-big--pending .status-big__icon { background: #b88a12; }
.status-big--pending { color: var(--c-warn); border-color: var(--c-warn-rule); background: #fff8e3; }
.status-big--confirmed .status-big__icon { background: var(--c-ok); }
.status-big--confirmed { color: var(--c-ok); border-color: var(--c-ok-rule); background: var(--c-ok-bg); }
.status-big--completed .status-big__icon { background: var(--c-ink); }
.status-big--declined .status-big__icon { background: var(--c-ko); }
.status-big--declined { color: var(--c-ko); border-color: var(--c-ko-rule); background: var(--c-ko-bg); }
.status-big--muted { color: var(--c-steel); }

.details--icons dt { display: flex; align-items: center; gap: .55rem; }
.details__icon { display: grid; place-items: center; flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-haze); color: var(--c-ink); }
.details__icon svg { width: .95rem; height: .95rem; }
.details--icons dd { align-self: center; }

/* Tableau de bord client : prochaines réservations */
.mini-bookings { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.mini-booking { display: flex; align-items: center; gap: var(--space-3); padding: .35rem; border-radius: 12px; color: var(--c-ink); text-decoration: none; transition: background-color var(--t-fast); }
.mini-booking:hover { background: var(--c-haze); color: var(--c-ink); }
.mini-booking.is-pending { background: #fff8e3; }
.mini-booking__text { display: grid; gap: .05rem; min-width: 0; }
.mini-booking__time { font-weight: 750; font-variant-numeric: tabular-nums; }
.mini-booking__meta { font-size: var(--fs-xs); color: var(--c-steel); }
.mini-bookings__more { margin: 0 0 var(--space-3); }
.mini-bookings__more > summary { cursor: pointer; font-weight: 650; font-size: var(--fs-sm); list-style: none; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--c-haze); }
.mini-bookings__more > summary::-webkit-details-marker { display: none; }
.mini-bookings__more > summary::after { content: "▾"; font-size: .8rem; transition: transform var(--t-fast); }
.mini-bookings__more[open] > summary::after { transform: rotate(180deg); }
.mini-bookings__more[open] > summary { margin-bottom: var(--space-2); }

/* Crédits et cloche : toujours visibles, flottant en haut à droite une fois la page défilée */
.topbar { min-height: calc(2.75rem + var(--space-4)); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; margin-left: auto; }
.topbar__actions.is-floating { position: fixed; top: .75rem; z-index: 45; animation: hc-float-in .25s var(--ease); }
.topbar__actions.is-floating .credit-chip, .topbar__actions.is-floating .bell__button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 30px rgba(15, 16, 17, .18), 0 1px 3px rgba(15, 16, 17, .1); }
@keyframes hc-float-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 56rem) { .topbar__actions { order: 2; } }

/* « Mes crédits » : solde mis en avant (même style que l'écran de confirmation) */
.big-balance { position: relative; text-align: center; padding: 2.6rem var(--space-5) var(--space-5); margin-top: 1.75rem; }
.big-balance .booked-next__value { font-size: 3.6rem; }
.big-balance__cta { margin-top: var(--space-4); }

/* Lien de retour : petite flèche vers la gauche */
.back-link { display: inline-flex; align-items: center; gap: .35rem; }
.back-link svg { width: 1em; height: 1em; flex-shrink: 0; transition: transform var(--t-med) var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }

/* Statut en grand : pas plus haut que le titre */
.status-big { padding: .2rem .75rem .2rem .2rem; font-size: .95rem; gap: .45rem; }
.status-big__icon { width: 1.75rem; height: 1.75rem; }
.status-big__icon svg { width: 1rem; height: 1rem; }

/* Infobulle « i » à côté d'un libellé de formulaire */
.field__label-row { display: flex; align-items: center; gap: .4rem; }
.info-tip--inline .info-tip__button { width: 1.35rem; height: 1.35rem; background: transparent; color: var(--c-steel); border-color: var(--c-rule); }
.info-tip--inline .info-tip__button svg { width: .95rem; height: .95rem; }
.info-tip--inline .info-tip__button:hover, .info-tip--inline .info-tip__button:focus-visible, .info-tip--inline.is-open .info-tip__button { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.info-tip--inline .info-tip__bubble { left: -.5rem; right: auto; bottom: calc(100% + .6rem); width: min(19rem, calc(100vw - 2rem)); font-weight: 400; }
.info-tip--inline .info-tip__bubble::after { left: .95rem; right: auto; }
.booking-row--static { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
.booking-row--static:hover { transform: none; border-color: var(--c-rule); box-shadow: var(--shadow); }

/* Technicien : séances sans technicien ; administration : volontaires */
.booking-list__item.is-volunteered .booking-row { background: var(--c-ok-bg); border-color: var(--c-ok-rule); }
.volunteers { margin-top: var(--space-4); padding: var(--space-3); border-radius: 12px; background: var(--c-ok-bg); border: 1px solid var(--c-ok-rule); }
.volunteers__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--c-ok); font-size: var(--fs-sm); }
.volunteers .plain-list { margin: 0; }
.booking-row__meta--ok { color: var(--c-ok); font-weight: 600; }
.booking-list__quick .btn { min-width: 9.5rem; }