/* practiceu design-v2.css - design v2 build 2026-08-27 */
/* PracticeU Front Office — Design v2 overlay
   -------------------------------------------------------------------------
   Purpose: bring the components that live in each page's inline <style> onto
   the same geometry as css/front-styles.css (radii, borders, hover, hit
   targets, badge/pill anatomy, empty states) WITHOUT touching those pages'
   markup or their colours.

   Colours: unchanged. Every rule below reuses the existing custom properties
   (--primary / --secondary / --tertiary / --fourth / --border / --dark /
   --gray / --success / --accent / --danger) fed by js/branding.js. The only
   literal colours here are the neutral hexes the app already shipped.

   Specificity: each rule is prefixed with `body` so it outranks the bare
   class selectors declared in the page-level <style> blocks, which the
   browser parses after this file. Remove the <link> to this file to revert
   any page to its previous look.

   Load order: AFTER css/front-styles.css and css/branding.css.
   ------------------------------------------------------------------------- */

/* ===========================================================
   0. Geometry tokens
   Mirrors the block in css/front-styles.css so this file also works on
   pages that do not load it (product-detail.php). No colour is declared
   here — colours stay with front-styles.css and js/branding.js.
   =========================================================== */

:root {
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;

  --control-h: 48px;
  --control-h-sm: 44px;

  --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ===========================================================
   1. Shared primitives that several pages redeclare locally
   =========================================================== */

/* Buttons redeclared in my-bookings / my-products / my-profile / offers */
body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-danger {
  border-radius: var(--radius-full);
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color 0.16s var(--ease),
    border-color 0.16s var(--ease),
    color 0.16s var(--ease),
    filter 0.16s var(--ease);
}

body .btn-sm {
  min-height: 38px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

body .btn:hover,
body .btn-primary:hover,
body .btn-secondary:hover,
body .btn-danger:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.93);
}

body .btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Text inputs redeclared in login / register / my-profile */
body .form-input,
body .form-group input,
body .form-group select,
body .form-group textarea {
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  color: var(--dark);
  background: var(--white);
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

body .form-input:focus,
body .form-group input:focus,
body .form-group select:focus,
body .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

body .form-group label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 6px;
}

/* Status badges — my-bookings / my-products */
body .badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Empty states — declared in six different pages */
body .empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: none;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

body .empty-state i {
  color: var(--gray-light);
  opacity: 1;
  font-size: 30px;
  margin-bottom: var(--space-3);
}

body .empty-state h3,
body .empty-state h2 {
  color: var(--dark);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

body .empty-state p {
  color: var(--gray);
  font-size: var(--text-sm);
  max-width: 46ch;
  margin: 0 auto;
}

/* Loading */
body .spinner,
body .loading-spinner {
  border-color: var(--border);
  border-top-color: var(--primary);
  border-width: 2px;
}

/* ===========================================================
   2. Account pages — my-bookings / my-products / my-profile
   =========================================================== */

/* One width for the three account pages. Each still declares
   .profile-container in its own <style>; this is the single place that
   governs them, so they cannot drift apart again. */
body .profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* Flat header instead of the 135deg gradient */
body .profile-header {
  background-image: none;
  background-color: var(--tertiary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

body .profile-avatar {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  font-size: 26px;
  font-weight: 600;
  flex-shrink: 0;
}

body .profile-info h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body .profile-info p {
  font-size: var(--text-sm);
  opacity: 0.86;
}

body .profile-tabs {
  border-bottom: 1px solid var(--border);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

body .tab-link {
  padding: 0 0 var(--space-3) 0;
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray);
}

body .tab-link:hover {
  color: var(--dark);
}

body .tab-link.active {
  color: var(--dark);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

body .filter-btn,
body .bookings-filters .filter-btn,
body .products-filters .filter-btn {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray);
  background: var(--white);
}

body .filter-btn:hover {
  border-color: var(--gray-light);
  color: var(--dark);
  background: var(--white);
}

body .filter-btn.active {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--on-brand);
  font-weight: 600;
}

body .booking-card,
body .card-item,
body .settings-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color 0.16s var(--ease);
}

body .booking-card:hover,
body .card-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .settings-card {
  padding: var(--space-6);
}

body .settings-card h2 {
  font-size: var(--text-xl);
  color: var(--dark);
  margin-bottom: var(--space-5);
}

body .booking-date {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--dark);
  min-width: 72px;
  padding: var(--space-3);
}

body .booking-month {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

body .booking-day {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark);
}

body .booking-details h3,
body .card-details h3 {
  font-size: var(--text-xl);
  color: var(--dark);
}

body .booking-meta,
body .card-meta {
  font-size: var(--text-sm);
  color: var(--gray);
  gap: var(--space-3);
}

body .booking-meta i,
body .card-meta i {
  color: var(--gray-light);
}

body .card-remaining {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body .card-icon {
  border-radius: var(--radius);
  background: var(--light);
  color: var(--tertiary);
}

/* my-products */
body .product-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

body .product-body {
  padding: var(--space-5);
}

body .product-cover {
  border-radius: 0;
  background: var(--light);
}

body .lesson-item {
  border-radius: var(--radius-sm);
  border: none;
  min-height: var(--control-h);
  padding: var(--space-3);
  transition: background-color 0.16s var(--ease);
}

body .lesson-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--secondary);
}

body .lesson-number {
  color: var(--gray);
  font-weight: 600;
}

body .lesson-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}

body .lesson-duration {
  font-size: var(--text-xs);
  color: var(--gray);
}

body .access-info {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--secondary);
}

body .access-info-label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

/* my-profile */
body .alert {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

body .help-text {
  font-size: var(--text-xs);
  color: var(--gray);
}

body .form-actions {
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

body .password-strength {
  border-radius: var(--radius-full);
  background: var(--border);
  height: 4px;
  overflow: hidden;
}

body .password-strength-bar {
  border-radius: var(--radius-full);
  height: 4px;
}

/* ===========================================================
   3. Library — content.php
   =========================================================== */

body .content-row {
  margin-bottom: var(--space-7);
}

body .content-row-header {
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

body .content-row-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--dark);
}

body .content-row-title i {
  color: var(--gray-light);
  font-size: 0.8em;
}

body .content-row-count {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Buttons only. The row nav also carries the "Voir tout" link, and the
   earlier `> *` selector was rounding that into a 44px circle too. */
body .content-row-nav button {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

body .content-row-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

body .filterByTag,
body .content-row-nav a {
  width: auto;
  height: auto;
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  line-height: 1.2;
  white-space: nowrap;
}

body .filterByTag:hover,
body .content-row-nav a:hover {
  color: var(--dark);
  border-bottom-color: var(--dark);
  background: none;
}

body .content-row-nav button:hover {
  background: var(--white);
  border-color: var(--dark);
  color: var(--dark);
  transform: none;
}

body .content-row-scroll {
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

body .video-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--white);
  transition: border-color 0.16s var(--ease);
}

body .video-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .video-card-image {
  border-radius: 0;
  background-color: var(--light);
}

body .video-card-content {
  padding: var(--space-4);
}

body .video-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}

body .video-card-meta {
  font-size: var(--text-xs);
  color: var(--gray);
  gap: var(--space-3);
}

body .video-card-meta i {
  color: var(--gray-light);
}

body .video-card-badge {
  top: var(--space-2);
  left: var(--space-2);
  border-radius: var(--radius-full);
  padding: 4px var(--space-2);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

body .video-card-duration {
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  background: rgba(46, 42, 37, 0.82);
  color: var(--on-brand);
}

/* Reveal-on-hover play mark, centred in the tile. The overlay fills the
   thumbnail and centres a disc; an earlier version of this rule gave the
   overlay a fixed 52px box, which dropped the `inset: 0` the page's own CSS
   relies on and left the mark pinned to the top-left corner, always on. */
body .video-card-play {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: rgba(46, 42, 37, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.16s var(--ease);
}

body .video-card:hover .video-card-play,
body .video-card:focus-within .video-card-play {
  opacity: 1;
}

body .video-card-play i {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  text-shadow: none;
  padding-left: 3px;
}

body .btn-icon {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
}

body .btn-icon:hover {
  border-color: var(--dark);
  color: var(--dark);
  transform: none;
}

body .btn-icon.active {
  border-color: var(--primary);
  color: var(--primary);
}

body .view-toggle-btn {
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  font-size: var(--text-sm);
  font-weight: 500;
}

body .view-toggle-btn.active {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--on-brand);
  font-weight: 600;
}

body .comment-item {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: none;
}

body .comment-form textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  line-height: 1.6;
}

body .comment-form textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

body .tag-badge {
  border-radius: var(--radius-full);
  padding: 3px var(--space-2);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ===========================================================
   4. Calendar — calendar.php
   =========================================================== */

body .week-navigation {
  gap: var(--space-4);
}

body .week-nav-btn {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body .week-nav-btn:hover {
  background: var(--white);
  border-color: var(--dark);
  color: var(--dark);
  transform: none;
}

body .current-week {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}

body .view-toggle {
  background: var(--secondary);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
}

body .view-toggle .view-toggle-btn {
  border: none;
  background: transparent;
  min-height: 38px;
}

body .view-toggle .view-toggle-btn.active {
  background: var(--white);
  color: var(--dark);
  border: none;
  box-shadow: var(--shadow-sm);
}

body .calendar-grid {
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body .calendar-header-cell {
  background: var(--white);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  padding: var(--space-3);
}

body .calendar-cell {
  background: var(--white);
  border: none;
  border-radius: 0;
  padding: var(--space-2);
}

body .calendar-cell.other-month {
  background: var(--secondary);
}

body .calendar-cell.today {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

body .calendar-date {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}

body .calendar-class-item,
body .list-class-item {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color 0.16s var(--ease);
}

body .calendar-class-item:hover,
body .list-class-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .calendar-class-item.already-booked,
body .list-class-item.already-booked {
  border-color: var(--primary);
  border-width: 1.5px;
}

body .calendar-class-item.past-class,
body .list-class-item.past-class {
  opacity: 0.55;
}

body .calendar-class-time,
body .list-class-time {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dark);
}

body .list-class-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
}

body .list-class-meta {
  font-size: var(--text-sm);
  color: var(--gray);
  gap: var(--space-3);
}

body .list-class-meta i {
  color: var(--gray-light);
}

body .list-date-header {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--dark);
  padding: var(--space-3) var(--space-4);
}

body .list-date-header .date-full {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

body .spots-badge,
body .spots-indicator,
body .event-type-badge,
body .list-type-pill,
body .past-badge,
body .booked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .legend-item {
  font-size: var(--text-xs);
  color: var(--gray);
  gap: 7px;
}

body .legend-dot,
body .header-type-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

body .event-type-legend {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-5);
}

/* ===========================================================
   5. Offers — offers.php
   =========================================================== */

/* The hero band. Was declared only inside offers.php's <style>, so any other
   page using the class - comparatif.php - got the markup and none of the
   look. Shared here so the two heroes cannot drift apart.
   js/utils.js paints the studio's banner over it and hides the h1/p. */
.offers-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 150px;
  text-align: center;
  color: var(--on-brand);
  margin-bottom: 60px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

body .offers-header h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--dark);
}

body .offers-header p {
  font-size: var(--text-lg);
  color: var(--gray);
}

body .offers-grid {
  gap: var(--space-5);
}

body .offer-block {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: none;
  padding: var(--space-6);
  transition: border-color 0.16s var(--ease);
}

body .offer-block::before {
  display: none;
}

body .offer-block:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .offer-block h2 {
  font-size: var(--text-2xl);
  color: var(--dark);
  letter-spacing: -0.01em;
}

body .offer-block p {
  color: var(--gray);
  font-size: 15px;
}

body .offer-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--light);
  color: var(--tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

body .offer-cta {
  min-height: var(--control-h);
  border-radius: var(--radius-full);
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 15px;
}

body .offer-cta:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.93);
}

body .offer-features li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--gray);
  font-size: 15px;
}

body .offer-features li i {
  color: var(--success);
}

body .info-card,
body .content-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color 0.16s var(--ease);
}

body .info-card:hover,
body .content-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .content-card-image {
  border-radius: 0;
  background: var(--light);
}

body .content-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--dark);
}

body .content-card-price {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark);
}

body .content-card-button {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-sm);
}

body .back-button {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  color: var(--gray);
  font-size: var(--text-sm);
  font-weight: 600;
}

body .back-button:hover {
  border-color: var(--dark);
  color: var(--dark);
  transform: none;
}

body .detail-header h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  color: var(--dark);
}

body .conditions h2 {
  font-size: var(--text-lg);
  color: var(--dark);
}

body .agree-checkbox {
  min-height: var(--control-h-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===========================================================
   6. Course player — product-detail.php
   =========================================================== */

body .breadcrumb {
  font-size: 13px;
  color: var(--gray);
  gap: var(--space-2);
}

body .breadcrumb a {
  color: var(--gray);
}

body .content-title {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--dark);
}

body .content-meta span {
  font-size: var(--text-sm);
  color: var(--gray);
}

body .media-container,
body .video-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--dark);
}

body .product-sidebar {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--white);
  overflow: hidden;
}

body .product-sidebar-header {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: var(--space-5);
}

body .product-sidebar-header h2 {
  font-size: var(--text-xl);
  color: var(--dark);
}

body .product-sidebar-header p {
  font-size: 13px;
  color: var(--gray);
}

body .product-items-list {
  padding: var(--space-2);
}

body .product-item {
  border-radius: var(--radius-sm);
  border: none;
  min-height: var(--control-h);
  padding: var(--space-3);
  gap: var(--space-3);
  transition: background-color 0.16s var(--ease);
}

body .product-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--secondary);
}

body .product-item.active {
  background: var(--light);
}

body .product-item.locked {
  opacity: 0.55;
}

body .product-item-number {
  color: var(--gray);
  font-weight: 600;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

body .product-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}

body .product-item-meta {
  font-size: var(--text-xs);
  color: var(--gray);
}

body .progress-bar,
body .progress-bar-container {
  border-radius: var(--radius-full);
  background: var(--border);
  height: 6px;
  overflow: hidden;
}

body .progress-bar-fill {
  border-radius: var(--radius-full);
  background: var(--primary);
  height: 6px;
}

body .progress-bar-label {
  font-size: var(--text-xs);
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body .btn-action,
body .btn-finish {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border);
}

body .btn-action:hover,
body .btn-finish:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.96);
}

body .btn-action.active {
  border-color: var(--primary);
  color: var(--primary);
}

body .bundle-lesson-card,
body .suggested-video-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.16s var(--ease);
}

body .bundle-lesson-card:hover,
body .suggested-video-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

body .bundle-lesson-card-image,
body .suggested-video-thumb {
  border-radius: 0;
  background: var(--light);
}

body .bundle-sidebar-link {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

body .bundle-sidebar-link:hover {
  background: var(--secondary);
  transform: none;
}

body .bundle-sidebar-link.active {
  background: var(--light);
  font-weight: 600;
}

/* Quiz */
body .qcm-container {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: var(--space-6);
}

body .qcm-question-text {
  font-size: var(--text-xl);
  color: var(--dark);
  line-height: 1.3;
}

body .qcm-answer-option {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  transition:
    border-color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

body .qcm-answer-option:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gray-light);
}

body .qcm-answer-option.selected {
  border-color: var(--primary);
  border-width: 1.5px;
}

body .qcm-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

body .qcm-progress-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

body .qcm-review-item {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: var(--space-4);
}

body .qcm-score-circle {
  border-radius: var(--radius-full);
}

body .spotify-widget {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
}

body .spotify-toggle-btn {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}

body .mobile-sidebar-toggle {
  min-height: var(--control-h-sm);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4);
}

/* ===========================================================
   7. Auth — login / register / reset / set-password
   =========================================================== */

body .auth-container {
  background: var(--app-bg);
}

body .auth-box {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
}

body .auth-logo img {
  max-width: 220px;
  margin: 0 auto var(--space-5);
  display: block;
}

body .auth-header h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: var(--space-2);
}

body .auth-header p {
  font-size: 15px;
  color: var(--gray);
}

body .auth-divider {
  color: var(--gray);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body .social-btn {
  min-height: var(--control-h);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--dark);
  font-size: 15px;
  font-weight: 600;
  gap: var(--space-2);
}

body .social-btn:hover {
  border-color: var(--dark);
  background: var(--white);
  transform: none;
  box-shadow: none;
}

body .form-checkbox label,
body .form-checkbox {
  font-size: var(--text-sm);
  color: var(--gray);
}

body .form-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

body .forgot-link,
body .auth-footer a,
body .back-home {
  font-size: var(--text-sm);
  font-weight: 600;
}

body .back-home {
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===========================================================
   8. Mobile
   =========================================================== */

@media (max-width: 768px) {
  body .profile-header {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  body .profile-tabs {
    gap: var(--space-4);
    overflow-x: auto;
  }

  body .auth-box {
    padding: var(--space-5);
    border: none;
    box-shadow: none;
  }

  body .offer-block,
  body .qcm-container {
    padding: var(--space-5);
  }

  /* Never below the touch-target floor on a phone */
  body .filter-btn,
  body .view-toggle-btn,
  body .tab-link,
  body .btn-action,
  body .btn-finish,
  body .content-card-button,
  body .back-button {
    min-height: var(--control-h-sm);
  }
}

/* ===========================================================
   9. Theme toggle
   Injected by js/theme.js — no page markup declares it.
   =========================================================== */

.theme-toggle {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-3);
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.theme-toggle:hover {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--on-brand);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Pages with no pre-header to sit in */
.theme-toggle--floating {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 1500;
  margin-right: 0;
  background: var(--white);
  border-color: var(--border);
  color: var(--dark);
  box-shadow: var(--shadow-lg);
}

/* ===========================================================
   10. Alternate theme touch-ups
   The tokens carry almost everything. These are the few surfaces a page's
   own <style> paints with a hardcoded value rather than a token, so they
   would otherwise stay on the studio's neutrals.
   =========================================================== */

:root[data-theme="dark"] body .video-card-image,
:root[data-theme="dark"] body .course-image,
:root[data-theme="dark"] body .class-image,
:root[data-theme="dark"] body .product-cover,
:root[data-theme="dark"] body .content-card-image,
:root[data-theme="dark"] body .bundle-lesson-card-image,
:root[data-theme="dark"] body .suggested-video-thumb {
  background-color: var(--gray-dark);
}

:root[data-theme="dark"] body .section-alt,
:root[data-theme="dark"] body .filters-section,
:root[data-theme="dark"] body .booking-summary,
:root[data-theme="dark"] body .access-info {
  background: var(--light);
}

:root[data-theme="dark"] body .splash-container {
  background: var(--app-bg);
}

/* ===========================================================
   11. Display type on the page-local components
   Same rule as the tail of front-styles.css, reaching the headings and
   figures declared inside each page's own <style>.
   =========================================================== */

body .profile-info h1,
body .settings-card h2,
body .offers-header h1,
body .offer-block h2,
body .detail-header h2,
body .content-title,
body .content-row-title,
body .booking-details h3,
body .card-details h3,
body .empty-state h3,
body .empty-state h2,
body .auth-header h1,
body .product-sidebar-header h2,
body .qcm-question-text,
body .list-class-name,
body .content-card-title,
body .video-card-title,
body .product-item-title,
body .lesson-title {
  font-family: var(--brand-font-secondary);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
}

/* Small titles inside dense lists stay in the UI sans: a serif at 15px in a
   row of metadata reads as an accident, not a choice. */
body .video-card-title,
body .product-item-title,
body .lesson-title,
body .content-card-title {
  font-family: var(--brand-font-primary);
  font-weight: 600;
  letter-spacing: 0;
}

body .booking-day,
body .booking-month,
body .card-remaining,
body .calendar-date,
body .list-class-time,
body .calendar-class-time,
body .content-card-price {
  font-family: var(--brand-font-secondary);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
}

/* ===========================================================
   12. Planning — the "Réserver" screen, rebuilt to the mockup
   Own namespace (.pl-*) so none of calendar.php's legacy rules apply.
   =========================================================== */

.pl {
  padding: var(--space-7) 0 var(--space-8);
}

.pl-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.pl-hidden {
  display: none !important;
}

/* --- header ------------------------------------------------ */

.pl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
}

.pl-head-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pl-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

.pl-title {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-4xl);
  font-weight: var(--display-weight);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin: 0;
}

.pl-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.pl-seg {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--light);
  border-radius: var(--radius-full);
  padding: 4px;
}

.pl-seg .pl-seg-btn {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray);
  font-family: var(--brand-font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.pl-seg .pl-seg-btn.active {
  background: var(--white);
  color: var(--dark);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.pl-weeknav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pl-nav {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.pl-nav:hover {
  border-color: var(--dark);
  color: var(--dark);
}

.pl-week {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  min-width: 168px;
  text-align: center;
}

/* --- filters ----------------------------------------------- */

.pl-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  font-family: var(--brand-font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.16s var(--ease),
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.pl-chip:hover {
  border-color: var(--gray-light);
  color: var(--dark);
}

.pl-chip.is-on {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--on-brand);
  font-weight: 600;
}

.pl-chip-field select,
.pl-chip-field input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  max-width: 170px;
}

.pl-chip-field select:focus,
.pl-chip-field input:focus {
  outline: none;
  box-shadow: none;
}

.pl-chip-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.pl-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  margin: 0 6px;
}

.pl-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  min-height: var(--control-h-sm);
  font-size: var(--text-sm);
  color: var(--gray);
  cursor: pointer;
  white-space: nowrap;
}

.pl-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pl-track {
  width: 34px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--border);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 0.16s var(--ease);
}

.pl-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--white);
  transition: transform 0.16s var(--ease);
}

.pl-switch input:checked + .pl-track {
  background: var(--dark);
}

.pl-switch input:checked + .pl-track .pl-knob {
  transform: translateX(14px);
}

.pl-switch input:focus-visible + .pl-track {
  box-shadow: var(--ring);
}

/* --- week grid --------------------------------------------- */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-6);
}

.pl-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.pl-dayhead {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.pl-dayname {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

.pl-daynum {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  line-height: 1.05;
  color: var(--dark);
}

.pl-col.is-today .pl-dayhead {
  border-bottom-color: var(--primary);
  border-bottom-width: 2px;
}

.pl-col.is-today .pl-daynum {
  color: var(--primary);
}

/* --- one class --------------------------------------------- */

.pl-slot {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.16s var(--ease);
}

.pl-slot:hover {
  border-color: var(--gray-light);
}

/* The studio's event-type colours survive as the left edge. */
.pl-slot.type-class {
  border-left-color: #f7b17f;
}
.pl-slot.type-program {
  border-left-color: #3b82f6;
}
.pl-slot.type-training {
  border-left-color: #f7b17e;
}
.pl-slot.type-workshop {
  border-left-color: #005959;
}

.pl-slot.is-mine {
  border-color: var(--primary);
  border-width: 1.5px;
}

.pl-slot.is-past {
  opacity: 0.5;
  cursor: default;
}

.pl-slot-time {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dark);
}

.pl-slot-dur {
  font-weight: 500;
  color: var(--gray);
}

.pl-slot-name {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-lg);
  font-weight: var(--display-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark);
  overflow-wrap: anywhere;
}

.pl-slot-meta {
  font-size: var(--text-xs);
  color: var(--gray);
  line-height: 1.35;
}

.pl-slot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
}

.pl-slot-status.is-available {
  color: var(--success);
}
.pl-slot-status.is-low {
  color: var(--accent-dark);
}
.pl-slot-status.is-full {
  color: var(--danger);
}
.pl-slot-status.is-booked {
  color: var(--primary);
}
.pl-slot-status.is-past {
  color: var(--gray-light);
}

.pl-slot-action {
  color: var(--tertiary);
}

.pl-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--gray-light);
}

/* --- legend ------------------------------------------------ */

.pl-legend {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray);
}

.pl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pl-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pl-dot.is-available {
  background: var(--success);
}
.pl-dot.is-low {
  background: var(--accent-dark);
}
.pl-dot.is-full {
  background: var(--danger);
}
.pl-dot.is-booked {
  background: var(--primary);
}

.pl-legend-note {
  margin-left: auto;
  color: var(--gray-light);
}

.pl-legend-note:empty {
  display: none;
}

/* --- responsive -------------------------------------------- */

@media (max-width: 1180px) {
  .pl-wrap {
    padding: 0 var(--space-5);
  }

  .pl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pl-wrap {
    padding: 0 var(--space-4);
  }

  .pl-title {
    font-size: var(--text-3xl);
  }

  .pl-head-right,
  .pl-weeknav {
    width: 100%;
  }

  .pl-week {
    flex-grow: 1;
  }

  .pl-switch {
    margin-left: 0;
    white-space: normal;
  }

  .pl-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .pl-empty {
    display: none;
  }

  .pl-col:has(.pl-empty) .pl-dayhead {
    opacity: 0.45;
  }
}

/* ===========================================================
   13. Home — the hero and member sections
   index.php was a splash screen plus a full-viewport slider. It is now the
   hero from the canvas: offer on the left, visual plus the "prochain cours"
   card on the right, then the member rows. Every section stays hidden until
   its data arrives, so a guest or an empty studio never sees a stub.
   =========================================================== */

.hm-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.hm-hidden {
  display: none !important;
}

.hm-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

.hm-rule {
  border: 0;
  height: 1px;
  /*background: var(--border);*/
  margin: 0;
}

/* --- hero --------------------------------------------------- */

.hm-hero {
  padding: var(--space-8) 0;
}

.hm-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: center;
}

.hm-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hm-hero-title {
  font-family: var(--brand-font-secondary);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--dark);
  max-width: 12ch;
  margin: 0;
}

.hm-hero-lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--gray);
  max-width: 46ch;
}

.hm-hero-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    filter 0.16s var(--ease),
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.hm-btn-primary {
  background: var(--tertiary);
  color: var(--on-brand);
}

.hm-btn-primary:hover {
  filter: brightness(0.93);
  color: var(--on-brand);
}

.hm-btn-ghost {
  background: transparent;
  color: var(--dark);
  border-color: var(--border);
}

.hm-btn-ghost:hover {
  border-color: var(--dark);
  color: var(--dark);
}

.hm-stats {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  /*border-top: 1px solid var(--border);*/
}

.hm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-stat-num {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--display-weight);
  line-height: 1.05;
  color: var(--dark);
}

.hm-hero-visual {
  position: relative;
}

.hm-hero-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  background: var(--light);
}

/* The floating next-class card overlaps the visual, as drawn. */
.hm-next {
  position: absolute;
  left: -40px;
  bottom: 44px;
  width: 320px;
  max-width: calc(100% - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hm-next-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hm-next-title {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  line-height: 1.1;
  color: var(--dark);
}

.hm-next-meta {
  font-size: var(--text-sm);
  color: var(--gray);
}

.hm-next-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--success);
}

.hm-next-status {
  font-size: 13px;
  font-weight: 600;
}

.hm-next-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--gray);
  text-decoration: none;
}

/* --- sections ----------------------------------------------- */

.hm-sec {
  padding: var(--space-8) 0 0;
}

.hm-sec:last-of-type {
  padding-bottom: var(--space-8);
}

.hm-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.hm-sec-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-sec-title h2 {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
}

.hm-sec-link {
  font-size: var(--text-sm);
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: flex-end;
}

.hm-sec-link:hover {
  color: var(--dark);
  border-bottom-color: var(--dark);
}

/* --- reprendre ---------------------------------------------- */

.hm-resume-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.hm-resume {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.hm-resume-thumb {
  width: 128px;
  height: 84px;
  border-radius: var(--radius-sm);
  background-color: var(--light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* No cover on the item and none on its lesson: keep the calm placeholder
   rather than a broken image frame. */
.hm-resume-thumb.is-empty {
  background-image: none;
}

/* The thumbnail is an <img> so it can fall back when a stored URL 404s. The
   span keeps its own background as the placeholder underneath, which is what
   shows through once a failed image removes itself. */
.hm-resume-thumb {
  overflow: hidden;
  display: block;
}

.hm-resume-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The card became a link once the progress API started returning lessonId,
   so it needs the anchor reset the other card types already carry. */
body a.hm-resume {
  text-decoration: none;
  color: inherit;
}

.hm-resume-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex-grow: 1;
}

.hm-resume-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}

.hm-resume-meta {
  font-size: 13px;
  color: var(--gray);
}

.hm-bar {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
  display: block;
}

.hm-bar-fill {
  display: block;
  height: 3px;
  background: var(--primary);
}

/* --- cette semaine ------------------------------------------ */

.hm-week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.hm-class {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.16s var(--ease);
}

.hm-class:hover {
  border-color: var(--primary);
}

/* The date plate. booky_classes has no cover column and every category
   cover is empty, so there is no photograph to put here - this band used to
   be a flat 148px of --light, which read as an image that failed to load.
   It states the date instead, which is what a planning is scanned for. */
.hm-class-media {
  position: relative;
  height: 148px;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hm-class-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--band-ink);
}

.hm-class-dow,
.hm-class-month {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.hm-class-daynum {
  font-family: var(--brand-font-secondary);
  font-weight: var(--display-weight);
  font-size: 54px;
  line-height: 1;
  margin: 6px 0 4px;
}

.hm-class-time {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--band-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The plate is the only part of the card that moves on hover, so the whole
   tile still reads as one target. */
.hm-class:hover .hm-class-time {
  background: var(--band-chip);
}

.hm-class-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.hm-class-title {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  line-height: 1.15;
  color: var(--dark);
}

.hm-class-meta {
  font-size: var(--text-sm);
  color: var(--gray);
}

.hm-class-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

.hm-status.is-available {
  color: var(--success);
}
.hm-status.is-low {
  color: var(--accent-dark);
}
.hm-status.is-full {
  color: var(--danger);
}
.hm-status.is-booked {
  color: var(--primary);
}

.hm-action {
  color: var(--tertiary);
}

/* --- replays rail ------------------------------------------- */

.hm-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.hm-video {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

.hm-video .hm-video-media {
  margin-bottom: 6px;
}

.hm-video-media {
  height: 176px;
  border-radius: var(--radius-lg);
  background: var(--light) center / cover no-repeat;
  position: relative;
  display: block;
}

.hm-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--dark);
  color: var(--app-bg);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-full);
}

.hm-video-media {
  position: relative;
}

.hm-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 42, 37, 0.32);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.16s var(--ease);
}

.hm-video:hover .hm-video-play,
.hm-video:focus-visible .hm-video-play {
  opacity: 1;
}

.hm-video-play span {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hm-video-dur {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: rgba(35, 32, 28, 0.82);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0;
}

.hm-video-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}

.hm-video-meta {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.35;
}

.hm-video-more {
  width: 128px;
  height: 176px;
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--gray);
  text-decoration: none;
}

.hm-video-more:hover {
  border-color: var(--dark);
  color: var(--dark);
}

/* --- programmes --------------------------------------------- */

.hm-prog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.hm-prog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--light);
  text-decoration: none;
  transition: filter 0.16s var(--ease);
}

.hm-prog:hover {
  filter: brightness(0.98);
}

.hm-prog.is-dark {
  background: var(--tertiary);
}

.hm-prog.is-dark .hm-eyebrow,
.hm-prog.is-dark .hm-prog-text,
.hm-prog.is-dark .hm-prog-link {
  color: rgba(255, 255, 255, 0.72);
}

.hm-prog.is-dark .hm-prog-title {
  color: var(--on-brand);
}

.hm-prog-title {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  line-height: 1.12;
  color: var(--dark);
}

.hm-prog-text {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.55;
}

.hm-prog-link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tertiary);
}

/* --- responsive --------------------------------------------- */

@media (max-width: 1180px) {
  .hm-wrap {
    padding: 0 var(--space-5);
  }

  .hm-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-resume-grid,
  .hm-prog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .hm-hero {
    padding: var(--space-7) 0;
  }

  .hm-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hm-hero-title {
    max-width: none;
  }

  .hm-hero-img {
    height: 300px;
  }

  .hm-next {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: var(--space-4);
    box-shadow: none;
  }

  .hm-wrap {
    padding: 0 var(--space-4);
  }

  .hm-week-grid,
  .hm-resume-grid,
  .hm-prog-grid {
    grid-template-columns: 1fr;
  }

  .hm-video {
    width: 260px;
  }
}

/* ===========================================================
   14. Mon compte — bookings and cards
   my-bookings.php had a gradient header, a card list and a separate
   "Mes cartes" block underneath. It is now the account layout from the
   canvas: identity plus figure tiles, tabs, filter chips with counts,
   and a two-column body.
   =========================================================== */

.ac {
  padding: var(--space-7) 0 var(--space-8);
}

.ac-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

.ac-tile {
  min-width: 190px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ac-tile.is-dark {
  background: var(--tertiary);
  border-color: var(--tertiary);
}

.ac-tile.is-dark .ac-eyebrow,
.ac-tile.is-dark .ac-tile-sub {
  color: rgba(255, 255, 255, 0.72);
}

.ac-tile.is-dark .ac-tile-num {
  color: var(--on-brand);
}

.ac-tile-num {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-3xl);
  font-weight: var(--display-weight);
  line-height: 1.1;
  color: var(--dark);
}

.ac-tile-num em {
  font-family: var(--brand-font-primary);
  font-style: normal;
  font-size: 17px;
  color: var(--gray);
}

.ac-tile.is-dark .ac-tile-num em {
  color: rgba(255, 255, 255, 0.72);
}

.ac-tile-sub {
  font-size: var(--text-xs);
  color: var(--gray);
}


/* --- filters ------------------------------------------------- */

.ac-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  font-family: var(--brand-font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.16s var(--ease),
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.ac-chip:hover {
  border-color: var(--gray-light);
  color: var(--dark);
}

.ac-chip.is-on {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--on-brand);
  font-weight: 600;
}

.ac-count {
  opacity: 0.75;
}

/* --- columns ------------------------------------------------- */

.ac-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-6);
  align-items: start;
}

.ac-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ac-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- a booking ----------------------------------------------- */

.ac-booking {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 0.16s var(--ease);
}

.ac-booking:hover {
  border-color: var(--gray-light);
}

.ac-booking.is-off {
  opacity: 0.55;
}

.ac-date {
  width: 66px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-right: var(--space-5);
  border-right: 1px solid var(--border);
}

.ac-date-num {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  line-height: 1;
  color: var(--dark);
}

.ac-date-mon {
  font-size: var(--text-xs);
  color: var(--gray);
}

.ac-booking-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}

.ac-booking-body h3 {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  line-height: 1.1;
  color: var(--dark);
  margin: 0;
}

.ac-booking-meta {
  font-size: var(--text-sm);
  color: var(--gray);
}

.ac-booking-status {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.ac-booking-status.is-confirmed {
  color: var(--success);
}
.ac-booking-status.is-pending {
  color: var(--accent-dark);
}
.ac-booking-status.is-cancelled {
  color: var(--danger);
}
.ac-booking-status.is-past {
  color: var(--gray-light);
}

.ac-booking-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* --- side panels --------------------------------------------- */

.ac-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ac-panel.is-sunk {
  background: var(--light);
  border-color: transparent;
}

.ac-panel h2 {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  color: var(--dark);
  margin: 0;
}

.ac-panel p {
  font-size: var(--text-sm);
  color: var(--gray);
}

.ac-cardrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.ac-cardrow:first-of-type {
  border-top: none;
  padding-top: 0;
}

.ac-cardrow.is-off {
  opacity: 0.5;
}

.ac-cardrow-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}

.ac-cardrow-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}

.ac-cardrow-meta {
  font-size: var(--text-xs);
  color: var(--gray);
}

.ac-cardrow-num {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--dark);
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}

.ac-cardrow-num em {
  font-family: var(--brand-font-primary);
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--gray);
}

/* --- buttons, empty, loading --------------------------------- */

.ac-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  font-family: var(--brand-font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.ac-btn:hover {
  background: var(--dark);
  color: var(--app-bg);
}

.ac-btn.is-quiet {
  border-color: var(--border);
  color: var(--gray);
}

.ac-btn.is-quiet:hover {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.ac-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ac-empty.is-inline {
  padding: var(--space-5);
  border-radius: var(--radius);
}

.ac-empty h3 {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  color: var(--dark);
  margin: 0;
}

.ac-empty p {
  font-size: var(--text-sm);
  color: var(--gray);
  max-width: 44ch;
}

.ac-empty .ac-btn {
  align-self: center;
  margin-top: var(--space-2);
}

.ac-loading {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray);
}

/* --- responsive ---------------------------------------------- */

@media (max-width: 1180px) {

  .ac-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .ac-tile {
    flex-grow: 1;
  }

  .ac-booking {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .ac-booking-actions {
    width: 100%;
  }

  .ac-btn {
    flex-grow: 1;
  }
}

/* ===========================================================
   15. Bibliothèque — content.php chrome
   The gradient page band and the two dropdown filter boxes are replaced by
   the library hero, a category tab row and a chip filter bar. #pageHeader
   is deliberately kept so loadDynamicBanner() still drives the artwork.
   =========================================================== */

.lib-hero {
  position: relative;
  min-height: 340px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  border-bottom: none;
  background-color: var(--tertiary);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Once the banner has loaded, the hero takes the image's own proportions and
   shows it whole. `contain` alone would letterbox it; matching the ratio
   means contain and cover coincide, so nothing is cropped and no bands
   appear. --banner-ratio and .has-banner are set by loadDynamicBanner() in
   js/utils.js after measuring the file, so a banner that fails to load keeps
   the 340px fallback above rather than collapsing the section. */
.lib-hero.has-banner {
  aspect-ratio: var(--banner-ratio);
  min-height: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

/* loadDynamicBanner() hides the h1 and the eyebrow when a banner is set, so
   this block is empty - but its padding would still be min-content height
   and push the hero past the ratio on a narrow screen, reintroducing the
   bands the ratio exists to avoid. */
.lib-hero.has-banner .lib-hero-inner {
  display: none;
}

/* No scrim. The banner is finished artwork with its own typography - which
   is why loadDynamicBanner() hides the h1 and the eyebrow when one is set -
   so darkening it only muddies someone else's design. */
.lib-hero .page-header-overlay {
  display: none;
}

.lib-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lib-hero-inner h1 {
  font-family: var(--brand-font-secondary);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  max-width: 20ch;
}

.lib-hero-inner p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
}

.lib-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* --- body --------------------------------------------------- */

.lib {
  padding: 0 0 var(--space-8);
}

.lib-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.lib-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  margin-top: var(--space-6);
}

.lib-tabs:empty {
  display: none;
}

.lib-tab {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid transparent;
  min-height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.lib-tab:hover {
  color: var(--dark);
}

.lib-tab.is-on {
  color: var(--dark);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

.lib-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
}

.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray);
  font-size: var(--text-sm);
}

.lib-chip-field input,
.lib-chip-field select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--dark);
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin: 0;
  min-height: 0;
  max-width: 180px;
}

.lib-chip-field input::placeholder {
  color: var(--gray);
}

.lib-chip-field input:focus,
.lib-chip-field select:focus {
  outline: none;
  box-shadow: none;
}

.lib-chip-field:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.lib-views {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--light);
  border-radius: var(--radius-full);
  padding: 4px;
}

.lib-views .view-toggle-btn {
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lib-views .view-toggle-btn.active {
  background: var(--white);
  color: var(--dark);
  box-shadow: var(--shadow-sm);
}

.lib-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.lib-back:hover {
  color: var(--dark);
}

@media (max-width: 1180px) {
  .lib-wrap,
  .lib-hero-inner {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (max-width: 768px) {
  .lib-hero {
    min-height: 240px;
  }

  .lib-wrap,
  .lib-hero-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .lib-hero-inner {
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }

  .lib-views {
    margin-left: 0;
  }
}

/* ===========================================================
   16. Top bar — social marks and the theme switch
   The social icons were Font Awesome glyphs from a CDN; they are inline SVG
   now, so they render whether or not that stylesheet arrives.
   =========================================================== */

.pre-header .social-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pre-header .social-links a {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--band-ink);
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.pre-header .social-links a:hover {
  background: var(--band-ink);
  color: var(--band-chip);
}

.su-ico {
  display: block;
  flex-shrink: 0;
}

/* Footer marks sit on the --tertiary band, so they invert. */
.footer .social-links a {
  color: var(--on-brand);
  border: 1px solid color-mix(in oklab, var(--on-brand) 35%, transparent);
}

.footer .social-links a:hover {
  background: color-mix(in oklab, var(--on-brand) 16%, transparent);
  color: var(--on-brand);
  border-color: color-mix(in oklab, var(--on-brand) 55%, transparent);
}

/* The switch lives in the pre-header beside the login link. */
.pre-header .theme-toggle {
  width: 34px;
  height: 34px;
  margin-right: var(--space-3);
  color: var(--band-ink);
  border: none;
  background: var(--band-chip);
}

.pre-header .theme-toggle:hover {
  background: var(--band-ink);
  color: var(--band-chip);
}

.pre-header #authArea {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===========================================================
   17. Theme switch glyph
   The button ships both icons; CSS picks one, so the correct glyph is on
   screen at first paint without waiting for JS.
   =========================================================== */

.theme-toggle .su-ico {
  pointer-events: none;
}

/* Two-class selectors so these always outrank `.su-ico { display: block }`,
   whatever the source order ends up being. */
.theme-toggle .theme-ico-dark {
  display: block;
}

.theme-toggle .theme-ico-light {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-ico-dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-ico-light {
  display: block;
}


/* The pre-header lays its children out in a row; make sure the button and
   the auth link sit on the same line whichever column they land in. */
.pre-header .column:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.pre-header .column:last-child > div {
  float: none;
}

/* ===========================================================
   18. Header and footer — rebuilt to the canvas
   Utility bar, then a 78px nav carrying the brand, the menu and one primary
   action; a four-column footer closed by an attribution line.
   =========================================================== */

/* --- utility bar --------------------------------------------- */

.pre-header {
  min-height: 40px;
  padding: var(--space-1) 0;
  background-color: var(--fourth);
  border-bottom: 1px solid color-mix(in oklab, var(--band-ink) 10%, transparent);
}

.pre-header .row {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-7);
  gap: var(--space-4);
}

.pre-header .column:first-child {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.pre-header-note {
  font-size: 13px;
  color: var(--band-ink);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-header-hello {
  font-size: 13px;
  color: var(--band-ink);
  white-space: nowrap;
}

.pre-header-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--band-chip);
  color: var(--band-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- nav ------------------------------------------------------ */

.navbar .container {
  max-width: 1440px;
  padding: 0 var(--space-7);
  min-height: 78px;
  gap: var(--space-5);
}

.nav-brand h1 {
  font-family: var(--brand-font-secondary);
  font-size: 23px;
  font-weight: var(--display-weight);
  letter-spacing: 0;
  color: var(--dark);
  white-space: nowrap;
}

.nav-brand img {
  width: auto;
}

.nav-menu {
  gap: var(--space-5);
  flex-grow: 1;
  justify-content: center;
}

.navbar .nav-link {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray);
  padding-bottom: 4px !important;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.navbar .nav-link:hover {
  color: var(--dark);
}

.navbar .nav-link.active {
  color: var(--dark);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

/* front-styles draws the active marker as an ::after bar; the border above
   is the canvas version, so retire the pseudo-element. */
.navbar .nav-link.active::after {
  content: none;
}

.nav-caret {
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav-icon-btn {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  text-decoration: none;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.nav-icon-btn:hover {
  background: var(--light);
  color: var(--dark);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  background: var(--tertiary);
  color: var(--on-brand);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.16s var(--ease);
}

.nav-cta:hover {
  filter: brightness(0.93);
  color: var(--on-brand);
}

/* Dropdown items keep the menu's own scale, not the top-level one.
   
   display is restated because `.navbar .nav-link` above makes every nav link
   inline-flex, and that rule loads after front-styles.css where menu items
   are `display: flex`. Equal specificity, later file wins - so the items in
   every dropdown became inline-level and sat side by side on one line
   instead of stacking. */
.navbar .dropdown-menu .nav-link {
  display: flex;
  width: 100%;
}

.dropdown-menu .nav-link {
  border-bottom: none;
  color: var(--gray);
}

.dropdown-menu .nav-link:hover {
  color: var(--dark);
}

/* --- footer --------------------------------------------------- */

.footer {
  background: var(--light);
  color: var(--gray);
  border-top: 1px solid var(--border);
  padding: var(--space-8) 0 var(--space-5);
}

.footer .container {
  max-width: 1440px;
  padding: 0 var(--space-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
  text-align: left;
}

.footer-col {
  text-align: left;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col h3 {
  font-family: var(--brand-font-secondary);
  font-size: 21px;
  font-weight: var(--display-weight);
  color: var(--dark);
  margin: 0;
}

.footer-col h3 img,
.footer h3 img {
  width: auto;
  margin: 0;
}

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  margin: 0 0 var(--space-1);
}

.footer-col p {
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
  max-width: 36ch;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.footer-contact span:empty {
  display: none;
}

.footer-col ul li {
  margin-bottom: 0;
}

.footer-col ul li a {
  color: var(--gray);
  font-size: var(--text-sm);
  min-height: 32px;
}

.footer-col ul li a:hover {
  color: var(--dark);
}

.footer-col-brand .social-links {
  margin-top: var(--space-1);
}

.footer .social-links a {
  width: 34px;
  height: 34px;
  color: var(--gray);
  border: 1px solid var(--border);
  background: transparent;
}

.footer .social-links a:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--app-bg);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  text-align: left;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--gray);
}

.footer-poweredby {
  color: var(--gray-light);
}

/* --- responsive ----------------------------------------------- */

@media (max-width: 1240px) {
  .pre-header .row,
  .navbar .container,
  .footer .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .nav-menu {
    gap: var(--space-4);
  }

  .navbar .nav-link {
    font-size: var(--text-sm);
  }
}

@media (max-width: 1080px) {
  .nav-cta {
    display: none;
  }
}

@media (max-width: 768px) {
  .pre-header .row,
  .navbar .container,
  .footer .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .pre-header-note {
    display: none;
  }

  .pre-header-hello {
    display: none;
  }

  .navbar .container {
    min-height: 64px;
  }

  .nav-menu {
    justify-content: flex-start;
    flex-grow: 0;
  }

  .navbar .nav-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: none;
    padding: var(--space-2) 0 !important;
    min-height: var(--control-h-sm);
  }

  .nav-icon-btn {
    display: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   19. Account menu on the avatar
   "Mon compte" moved out of the main nav: the avatar in the utility bar is
   the trigger, and Déconnexion lives at the foot of the same menu.
   =========================================================== */

.acct {
  position: relative;
  display: inline-flex;
}

.acct-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 4px 0 0;
  border: none;
  background: transparent;
  color: var(--band-ink);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: opacity 0.16s var(--ease);
}

.acct-trigger:hover {
  opacity: 0.75;
}

.acct-trigger:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.acct-caret {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.16s var(--ease);
}

.acct.is-open .acct-caret {
  transform: rotate(180deg);
}

.acct-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease);
  z-index: 1200;
}

.acct.is-open .acct-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.acct-head {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  padding: var(--space-2) var(--space-3) 6px;
}

.acct-item {
  display: flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease);
}

.acct-item:hover {
  background: var(--light);
  color: var(--dark);
}

.acct-item.is-quiet {
  color: var(--gray);
}

.acct-item.is-quiet:hover {
  color: var(--danger);
  background: transparent;
}

.pre-header .theme-toggle {
  margin-right: var(--space-2);
}

@media (max-width: 768px) {
  .acct-menu {
    min-width: 200px;
  }
}

/* ===========================================================
   20. Planning — debug mode (/calendar?debug=1)
   Synthetic classes, marked so they can never be mistaken for real ones.
   =========================================================== */

.pl-slot.is-demo {
  border-style: dashed;
  border-left-style: solid;
}

.pl-demo-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* A full class is not actionable: stop the card inviting a click. */
.pl-slot.is-full {
  cursor: default;
}

.pl-slot.is-full:hover {
  border-color: var(--border);
}

/* Product meta reads left-aligned; the card centres its header block. */
/* my-products reuses the .product-header class name that front-styles.css
   defines for the pricing card, and that one is centred - so the lesson row
   inherited the centring. Anchor the whole info block left, and do it at a
   specificity that does not depend on stylesheet order. */
body .product-info,
body .product-info h3,
body .product-info .badge,
body .product-info .product-meta {
  text-align: left;
}

/* The tab row no longer carries icons, so let the labels set the rhythm. */
body .profile-tabs .tab-link {
  gap: 0;
}

/* ===========================================================
   21. Account summary — the two tiles and the agenda export
   Rendered by includes/account-header.php on my-bookings, my-products and
   my-profile; filled by js/account-header.js.
   =========================================================== */

.acct-summary {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.acct-summary:not(:has(> :not(.acct-hidden))) {
  display: none;
}

.acct-hidden {
  display: none !important;
}

.acct-summary .ac-tile {
  min-width: 200px;
}

.acct-export {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--gray);
  font-family: var(--brand-font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.acct-export:hover {
  border-color: var(--dark);
  color: var(--dark);
}

.acct-export:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

@media (max-width: 768px) {
  .acct-summary .ac-tile {
    flex-grow: 1;
  }

  .acct-export {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================================
   22. Player sidebar — "Dans ce programme"
   The lesson summary from the canvas: eyebrow, title, a progress line that
   reads as a summary rather than a statistic, then the items with one
   marker each for their state.
   =========================================================== */

body .product-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  color: var(--dark);
}

.ps-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

body .product-sidebar-header h2 {
  font-family: var(--brand-font-secondary);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  line-height: 1.2;
  text-align: left;
  color: var(--dark);
  margin: 0;
}

body .product-sidebar-header p {
  font-size: 13px;
  color: var(--gray);
  opacity: 1;
  margin: 0;
}

/* --- progress ------------------------------------------------ */

body .progress-bar-container {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body .progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

body .progress-bar-fill {
  height: 6px;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 0.24s var(--ease);
}

body .progress-bar-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: var(--gray);
}

/* --- one item ------------------------------------------------ */

body .product-item-number {
  width: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-light);
  line-height: 1;
}

body .product-item.finished .product-item-number {
  color: var(--success);
}

body .product-item.active .product-item-number {
  color: var(--primary);
}

body .product-item.finished .product-item-title {
  color: var(--gray);
}

body .product-item.locked {
  opacity: 0.55;
  cursor: default;
}

body .product-item-meta {
  font-size: var(--text-xs);
  color: var(--gray);
}

.ps-loading {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray);
}

/* --- access footer ------------------------------------------- */

.ps-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--light);
  font-size: 13px;
}

.ps-foot[hidden] {
  display: none;
}

.ps-foot-note {
  color: var(--gray);
}

.ps-foot.is-soon .ps-foot-note {
  color: var(--accent-dark);
  font-weight: 600;
}

.ps-foot-link {
  margin-left: auto;
  font-weight: 600;
  color: var(--tertiary);
  text-decoration: none;
  white-space: nowrap;
}

.ps-foot-link:hover {
  color: var(--dark);
}

/* ===========================================================
   23. Gaps found in the design pass
   Three classes the markup applies that had no rule at all, so they were
   doing nothing on screen.
   =========================================================== */

/* The divider above "Déconnexion" in the avatar menu. Without a rule it is
   an empty zero-height span, so the menu ran together. */
.acct-sep {
  display: block;
  height: 1px;
  background: var(--border);
  margin: 5px var(--space-3);
}

/* my-products marks lessons the member cannot open yet. Locked and unlocked
   rows were rendering identically. */
body .lesson-item.lesson-locked {
  opacity: 0.55;
  cursor: default;
}

body .lesson-item.lesson-locked:hover {
  background: transparent;
}

/* The label beside the "Masquer les cours complets" switch. */
.pl-switch-label {
  color: inherit;
  line-height: 1.3;
}

/* ── Locked item tiles ──────────────────────────────────────────────────────
   Paid content the visitor has not bought yet. items.php withholds the media
   URL from anyone without access, so these tiles have nothing to play — but
   they must still be shown, because seeing one is how it gets bought. The
   lock is permanent rather than hover-only: the state has to read at a
   glance, otherwise the tile looks like a video that failed to load. */
body .video-card.is-locked .video-card-play {
  opacity: 1;
  background: linear-gradient(180deg, rgba(46, 42, 37, 0.06) 0%, rgba(46, 42, 37, 0.46) 100%);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
}

body .video-card.is-locked .video-card-play i {
  width: 34px;
  height: 34px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tertiary);
  box-shadow: 0 2px 8px rgba(46, 42, 37, 0.22);
}

/* On hover the lock grows into the same centred disc the playable tiles use,
   so the affordance is "open this to buy it" and not a dead end. */
body .video-card.is-locked:hover .video-card-play,
body .video-card.is-locked:focus-within .video-card-play {
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(46, 42, 37, 0.32);
}

body .video-card.is-locked:hover .video-card-play i,
body .video-card.is-locked:focus-within .video-card-play i {
  width: 52px;
  height: 52px;
  font-size: 19px;
  background: var(--white);
}

/* ── Pre-header link hover ──────────────────────────────────────────────────
   front-styles.css carries `.pre-header .column:last-child a:hover { color:
   #007bff }` - a Bootstrap blue left over from the old shell, and the only
   blue anywhere near the palette. It outranks `.acct-item:hover` (three
   selectors against one), so every link in the account menu turned blue on
   rollover no matter what the component said. Matched here at equal
   specificity, and design-v2.css loads last, so the palette wins. */
body .pre-header .column:last-child a:hover {
  color: var(--tertiary);
}

body .pre-header .column:last-child a.acct-item:hover {
  color: var(--dark);
}

body .pre-header .column:last-child a.acct-item.is-quiet:hover {
  color: var(--danger);
}

/* ── Palette switch hidden ──────────────────────────────────────────────────
   The studio's branding is the only palette in use for now. js/theme.js is
   locked to it as well (LOCKED = true) - hiding the button alone would leave
   a stored "dark" choice still applying on every load. Remove both to bring
   the switch back. */
.theme-toggle {
  display: none !important;
}

/* ── Mobile: home planning and resume ───────────────────────────────────────
   Two blocks added recently and never checked below 640px. */
@media (max-width: 640px) {
  /* A 128px thumbnail beside the text leaves under 200px for a title and a
     progress bar on a 375px screen. Full-width above the copy instead. */
  .hm-resume {
    flex-direction: column;
    align-items: stretch;
  }

  .hm-resume-thumb {
    width: 100%;
    height: 150px;
  }

  /* The date plate is 148px of a card that is already the full width of the
     screen — too much of the viewport for a date. */
  .hm-class-media { height: 112px; }
  .hm-class-daynum { font-size: 42px; }
}

/* The hidden attribute is display:none from the UA stylesheet, and ANY
   display rule beats it. .nav-link sets its own, so a link hidden for the
   signed-out/signed-in split stayed visible. */
body .nav-link[hidden],
body [data-auth][hidden] {
  display: none !important;
}