/* app/static/css/styles.css */

/* =========================
   Global UI — base styles (mobile-first)
   ========================= */

/* ---- Design tokens (base defaults; themes override these) ---- */
:root {
  /* spacing */
  --gap: 12px;
  --gap-lg: 16px;

  /* palette (fallbacks if no theme applied) */
  --fg: #0f172a; /* text */
  --muted: #475569; /* secondary text */
  --line: #cbd5e1; /* borders */
  --bg: #ffffff; /* surfaces/cards */
  --page-bg: #f7f7f8; /* page background */
  --violet: #998fcf;

  /* brand / actions */
  --primary: #111111;
  --primary-contrast: #ffffff;
  --accent: #d4af37; /* gold */

  /* states */
  --success-bg: #ecfdf5;
  --success-fg: #065f46;
  --success-border: #10b981;

  --danger: #b91c1c;
  --error-bg: #fef2f2;
  --error-fg: #991b1b;
  --error-border: #ef4444;

  /* a11y */
  --focus-outline: #94a3b8;

  /* hover/active neutral UI */
  --nav-hover-bg: rgba(0, 0, 0, 0.06);
  --nav-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  --nav-active-bg: rgba(0, 0, 0, 0.1);
}

/* Optional dark theme baseline (separate from Midnight) */
.theme-dark {
  --page-bg: #111827;
  --bg: #1f2937;
  --fg: #f9fafb;
  --muted: #9ca3af;
  --line: #374151;

  --primary: #d4af37;
  --primary-contrast: #111827;
  --accent: #0f766e;

  --success-bg: #064e3b;
  --success-fg: #d1fae5;
  --error-bg: #7f1d1d;
  --error-fg: #fee2e2;

  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  --nav-active-bg: rgba(255, 255, 255, 0.12);
}

/* =========================
   Reset & base
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--fg);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

/* =========================
   Legacy container utilities (outside 3-col layout)
   ========================= */
header,
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.container {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.col {
  flex: 1 1 0;
  min-width: 280px;
}

/* =========================
   Flash messages
   ========================= */
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid transparent;
}
.flash.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-fg);
}
.flash.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-fg);
}
.flash.info {
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-weight: 600;
  cursor: pointer;
  background: #fafafa;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.btn:hover {
  background: #f3f4f6;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}
.btn.primary:hover {
  filter: brightness(1.06);
}
.btn.accent {
  background: var(--accent);
  color: var(--primary-contrast);
  border-color: var(--accent);
}
.btn.accent:hover {
  filter: brightness(1.06);
}
.btn.danger {
  background: var(--danger);
  color: var(--primary-contrast);
  border-color: var(--danger);
}
.btn.link {
  background: transparent;
  border: none;
  color: var(--fg);
  text-decoration: underline;
  padding: 0;
}

/* =========================
   Forms (public)
   ========================= */
label {
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font: inherit;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

/* Validation helpers */
.is-valid {
  border-color: #22c55e !important;
}
.is-invalid {
  border-color: #ef4444 !important;
}
.invalid-feedback,
.error {
  color: #b00020;
  font-size: 0.9rem;
  margin-top: 4px;
}
form .field {
  margin-top: 12px;
}

/* =========================
   Tables
   ========================= */
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  text-align: left;
}
thead th {
  font-weight: 700;
  background: #fafafa;
}

/* =========================
   Utilities
   ========================= */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 4px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mt-6 {
  margin-top: 24px;
}
.text-right {
  text-align: right;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Font utilities */
.font-rye {
  font-family: var(--font-rye, "Rye", Georgia, serif);
}
.font-script {
  font-family: var(--font-script, "Qwitcher Grypen", cursive);
}
.font-display {
  font-family: var(--font-display, serif);
}
.font-brand {
  font-family: var(
    --font-brand,
    "UnifrakturMaguntia",
    "UnifrakturCook",
    "Old English Text MT",
    serif
  );
  text-transform: lowercase;
}
.text-violet {
  color: var(--violet);
}

/* =========================
   Headings / Titles (neutral — themed overrides in theme files)
   ========================= */
h1,
h2,
h3 {
  margin-top: 0;
  font-family: var(--font-display, serif);
}
h1,
h2 {
  color: var(--primary);
}
h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

/* Tagline (home) — Qwitcher Grypen */
.tagline {
  font-family: var(--font-script, "Qwitcher Grypen", cursive);
  font-size: clamp(1.1rem, 1.2rem + 0.6vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* =========================
   Header: hours widget
   ========================= */
.header-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.header-hours .hours-line {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0 16px;
  align-items: baseline;
  padding: 2px 0;
  border: 0;
}
.header-hours .hours-line > strong {
  font-weight: 500;
  white-space: nowrap;
}
.header-hours .hours-line > .time {
  justify-self: end;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.85rem;
}
.header-hours .hours-line.today {
  background: rgba(212, 175, 55, 0.15);
  border-radius: 4px;
  padding: 4px;
}
.header-hours .hours-line.today strong {
  font-weight: 600;
  color: var(--primary);
}

/* Desktop vs mobile display */
@media (max-width: 991px) {
  .hours-inline {
    display: none;
  }
}
@media (min-width: 992px) {
  .hours-dd {
    display: none;
  }
}

/* Mobile dropdown */
.hours-dd {
  position: relative;
}
.hours-dd > summary {
  list-style: none;
  cursor: pointer;
}
.hours-dd > summary::-webkit-details-marker {
  display: none;
}

.hours-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  user-select: none;
}
.hours-btn:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}
.hours-label {
  font-weight: 600;
}

.hours-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-height: 60vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
  z-index: 100;
}
.hours-dd[open] .hours-popover {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Topnav (desktop only)
   ========================= */
.topnav {
  display: none;
}

@media (min-width: 992px) {
  .topnav {
    display: block;
    margin-top: 8px;
    position: relative;
    z-index: 50;
  }

  .topnav-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 6px;
    margin: 0;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: visible; /* ⬅️ autorise le menu à dépasser */
  }
  .topnav-list > li {
    position: relative;
  }

  .topnav a,
  .topnav .topnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--fg);
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease,
      border-color 160ms ease;
    text-decoration: none;
  }
  .topnav a:hover,
  .topnav .topnav-btn:hover {
    background: var(--nav-hover-bg);
    box-shadow: var(--nav-hover-shadow);
    transform: translateY(-1px);
  }
  .topnav a:focus-visible,
  .topnav .topnav-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
    outline-offset: 2px;
    background: var(--nav-hover-bg);
  }

  /* details/summary reset + submenu */
  .topnav details {
    position: relative;
  }
  .topnav summary {
    list-style: none;
  }
  .topnav summary::-webkit-details-marker {
    display: none;
  }

  .topnav .menu {
    position: absolute;
    left: 0;
    top: 100%; /* ⬅️ collé au bouton, plus de "trou" */
    min-width: 220px;
    max-height: 60vh;
    overflow: auto;
    list-style: none;
    margin: 0; /* ⬅️ pas de marge qui recrée un gap */
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: transform 160ms ease, opacity 160ms ease;
    z-index: 9999; /* ⬅️ passe au-dessus de tout */
  }

  /* Ouvrir au survol et au focus clavier */
  .topnav details:hover > .menu,
  .topnav details:focus-within > .menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Si un details a [open] mais n’est ni hover ni focus → on masque (cohérent) */
  .topnav details[open]:not(:hover):not(:focus-within) > .menu {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* Z au-dessus quand actif */
  .topnav details:hover,
  .topnav details:focus-within {
    z-index: 10000;
  }

  /* Style des liens du sous-menu */
  .topnav .menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--fg) 78%, transparent);
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  }
  .topnav .menu a:hover {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    transform: translateX(1px);
  }
  .topnav .menu a:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
    outline-offset: 2px;
    background: var(--nav-hover-bg);
  }
}

/* Masquer la sidenav en desktop quand la topnav est là (inchangé) */
@media (min-width: 992px) {
  .sidenav {
    display: none;
  }
  .shell {
    grid-template-columns: 1fr var(--col-right);
    grid-template-areas:
      "header header"
      "content rightbar";
  }
}

/* =========================
   BRANDING / LOGO TEXT — glossy chrome
   ========================= */
/* BRAND — Unifraktur (lowercase) + chrome effect */
.brand {
  font-family: var(--font-brand, "UnifrakturMaguntia", serif);
  text-transform: lowercase;

  /* sizing */
  font-size: clamp(4rem, 8vw + 1rem, 7rem);
  font-weight: 400; /* Unifraktur = Regular only, plus net */
  letter-spacing: 1px;
  line-height: 1.2;

  /* layout */
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;

  /* chrome/silver text (clipped gradient) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* dégradé “métal” + léger éclat diagonal (sans blend screen) */
  background-image: linear-gradient(
      180deg,
      #d8d8d8 0%,
      #1e1e1e 22%,
      #ffffff 36%,
      #6b6b6b 52%,
      #f2f2f2 72%,
      #9c9c9c 100%
    ),
    linear-gradient(
      22deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 18%,
      rgba(255, 255, 255, 0) 32%
    );
  background-blend-mode: normal, normal;
  background-size: 100% 200%;
  background-position: 0 34%;

  /* relief discret (évite l’effet “tout blanc”) */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 0.15px rgba(255, 255, 255, 0.2);

  /* rendu */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.theme-dark .brand {
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.35);
}
.brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, #998fcf, transparent);
  border-radius: 4px;
  transition: width 250ms ease;
}
.brand:hover::after {
  width: 100%;
}
a.brand,
a.brand:hover,
a.brand:focus,
a.brand:active {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Fallback si le clip de fond n’est pas supporté */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand {
    color: #d4d4d4;
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: none;
  }
}
@media (max-width: 480px) {
  .brand {
    font-size: clamp(2.4rem, 8.2vw + 0.4rem, 3.6rem);
    letter-spacing: 0.6px;
  }
}
@media (max-width: 380px) {
  .brand {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =========================
   SIDENAV — structure & states (kept for mobile drawer)
   ========================= */
.sidenav-list,
.sidenav-list .subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidenav-list li {
  margin: 2px 0;
}
.sidenav-list .subnav li {
  margin: 1px 0 1px 12px;
}

.sidenav-list a,
.sidenav-list .subnav a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 10px;
  padding: 6px 10px;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  will-change: background-color, box-shadow, transform;
}
.sidenav-list a:hover,
.sidenav-list .subnav a:hover {
  background-color: var(--nav-hover-bg);
  box-shadow: var(--nav-hover-shadow);
  transform: translateY(-1px);
}
.sidenav-list a:focus-visible,
.sidenav-list .subnav a:focus-visible {
  background-color: var(--nav-hover-bg);
  box-shadow: var(--nav-hover-shadow);
  outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  outline-offset: 2px;
}
.sidenav-list a.active {
  background-color: var(--nav-active-bg);
  font-weight: 600;
  text-decoration: underline;
}

/* — lighter, hierarchical subnav look */
.sidenav-list > li > a {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 10px;
}
.sidenav-list > li {
  padding-block: 2px;
}
.sidenav-list > li + li {
  margin-top: 6px;
}

.sidenav-list .subnav {
  margin: 6px 0 4px 0;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.sidenav-list .subnav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--muted) 88%, var(--fg) 12%);
  opacity: 0.92;
  padding: 6px 10px 6px 8px;
  border-radius: 8px;
}
.sidenav-list .subnav a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 60%, transparent);
  transform: translateY(-1px);
}
.sidenav-list .subnav a:hover {
  background-color: color-mix(in srgb, var(--nav-hover-bg) 80%, transparent);
  box-shadow: none;
  transform: translateY(-1px);
}
.sidenav-list .subnav a.active {
  background-color: color-mix(in srgb, var(--nav-active-bg) 80%, transparent);
  font-weight: 600;
  text-decoration: underline;
}
.sidenav-list > li:has(.subnav a.active) > a {
  background-color: color-mix(in srgb, var(--nav-active-bg) 50%, transparent);
  text-decoration: underline;
}
.theme-dark .sidenav-list .subnav a {
  color: color-mix(in srgb, var(--muted) 85%, #ffffff 10%);
  opacity: 0.95;
}

@media (max-width: 991px) {
  .sidenav-list > li > a {
    padding: 10px 12px;
  }
  .sidenav-list .subnav a {
    padding: 8px 12px 8px 10px;
  }
  .sidenav-list .subnav {
    border-left-color: color-mix(in srgb, var(--line) 50%, transparent);
  }
}

/* SIDENAV — CSS-only accordion (for drawer) */
.sidenav-acc {
  margin: 4px 0;
}
.sidenav-acc > summary {
  list-style: none;
  cursor: pointer;
}
.sidenav-acc > summary::-webkit-details-marker {
  display: none;
}
.sidenav-acc > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.sidenav-acc > summary:hover,
.sidenav-acc > summary:focus-visible {
  background: var(--nav-hover-bg);
  box-shadow: var(--nav-hover-shadow);
  transform: translateY(-1px);
  outline: none;
}
.sidenav-acc > summary .chev {
  margin-left: auto;
  inline-size: 0.6em;
  block-size: 0.6em;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  opacity: 0.9;
  transition: transform 180ms ease;
}
.sidenav-acc[open] > summary .chev {
  transform: rotate(225deg);
}
.sidenav-acc > .subnav {
  margin: 6px 0 4px 0;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  max-height: 600px;
  overflow: clip;
  transition: max-height 260ms cubic-bezier(0.33, 0, 0.2, 1);
}
.sidenav-acc:not([open]) > .subnav {
  max-height: 0;
}
.sidenav-acc > .subnav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--muted) 88%, var(--fg) 12%);
  opacity: 0.92;
  padding: 6px 10px 6px 8px;
  border-radius: 8px;
}
.theme-dark .sidenav-acc > .subnav a {
  color: color-mix(in srgb, var(--muted) 85%, #ffffff 10%);
  opacity: 0.95;
}
.sidenav-acc > .subnav a::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-block;
  background: color-mix(in srgb, currentColor 60%, transparent);
  transform: translateY(-1px);
}
.sidenav-acc > .subnav a:hover {
  background-color: color-mix(in srgb, var(--nav-hover-bg) 80%, transparent);
  box-shadow: none;
  transform: translateY(-1px);
}
.sidenav-acc > .subnav a.active {
  background-color: color-mix(in srgb, var(--nav-active-bg) 80%, transparent);
  font-weight: 600;
  text-decoration: underline;
}
.sidenav-acc:has(.subnav a.active) > summary {
  background: color-mix(in srgb, var(--nav-active-bg) 50%, transparent);
  text-decoration: underline;
}
@media (max-width: 991px) {
  .sidenav-acc > summary {
    padding: 10px 12px;
  }
  .sidenav-acc > .subnav a {
    padding: 8px 12px 8px 10px;
  }
  .sidenav-acc > .subnav {
    border-left-color: color-mix(in srgb, var(--line) 50%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidenav-acc > .subnav {
    transition: none;
  }
  .sidenav-acc > summary .chev {
    transition: none;
  }
}

/* =========================
   Hygiène & Prestations — pills, subcards, callouts
   ========================= */
.section-nav {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 0;
  margin: 4px 0 12px;
}
.content .section-nav {
  position: sticky;
  top: 8px;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  background: var(--bg);
  contain: content;
}
.section-nav a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  white-space: nowrap;
  text-decoration: none;
}
.section-nav a:hover {
  border-color: var(--primary);
}

/* Anchor offset under header */
:where(h2, h3, [id], .subcard) {
  scroll-margin-top: 72px;
}

/* Cards grid */
.subgrid {
  display: grid;
  gap: 16px;
}
@media (max-width: 767px) {
  .subgrid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) {
  .subgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.subcard {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.subcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 25%, transparent)
  );
}
.subcard h3 {
  margin: 6px 0 8px;
  font-size: 1.05rem;
}
.subcard small {
  color: var(--muted);
  font-weight: 400;
}
.subcard ul {
  margin: 0;
  padding-left: 18px;
}
.subcard li {
  margin: 6px 0;
}

/* anchor highlight + keyboard focus */
.subcard:target,
.subcard:focus-within {
  box-shadow: none !important;
}

/* Focus clavier cohérent partout (sans glow) */
:where(.subcard, .team-card, .container, .contact-item, .callout):focus-within,
:where(.subcard, .team-card, .container, .contact-item, .callout):has(:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@supports selector(.subcard:has(:focus-visible)) {
  .subcard:focus-within {
    box-shadow: none;
  }
  .subcard:has(:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  }
}

/* callouts */
.callout {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.callout strong {
  color: var(--primary);
}
.callout.note {
  border-left-color: var(--accent);
}
.callout.warn {
  border-left-color: #eab308;
}
.callout.info {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
  border-left-color: var(--primary);
  padding: 12px 16px;
}

/* Mobile: details cards + larger anchor offset */
@media (max-width: 680px) {
  details.subcard > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    margin: 0 0 6px;
  }
  details.subcard > summary::-webkit-details-marker {
    display: none;
  }
  :where(h2, h3, [id], .subcard) {
    scroll-margin-top: 96px;
  }
}

/* =========================
   Team grid & cards
   ========================= */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.team-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  cursor: pointer;
  outline: none;
}
.team-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
@media (min-width: 992px) {
  .team-grid {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* avatars */
.team-card img {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: 0 auto 12px;
  border: 2px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.team-card img.adjust-crop {
  object-position: 50% 30%;
}

/* wrapper variant */
.team-card .avatar {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  border: 2px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.team-card .avatar img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 125%;
  height: 125%;
  transform: translate(-50%, -50%) scale(0.79);
  transform-origin: center;
  object-fit: cover;
  object-position: 50% 36%;
  border: 0;
  border-radius: 0;
  backface-visibility: hidden;
  will-change: transform;
}

/* text */
.team-card .name {
  margin: 0 0 4px;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.team-card .role {
  margin: 0 0 10px;
  text-align: center;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.team-card .bio {
  color: var(--fg);
  opacity: 0.95;
}
.team-card .bio p {
  margin: 0 0 10px;
}
.team-card .bio ul {
  margin: 6px 0 10px 18px;
}
.team-card .bio li {
  margin: 4px 0;
}
.team-card .bio .credit {
  color: var(--muted);
  font-size: 0.95rem;
}

/* responsive tweaks */
@media (max-width: 480px) {
  .team-card img,
  .team-card .avatar {
    width: 200px;
    height: 200px;
  }
  .team-card {
    padding: 14px;
  }
}
@media (min-width: 1280px) {
  .team-grid {
    gap: 20px;
  }
  .team-card {
    padding: 18px;
  }
}

/* collapsible */
.team-card:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}
.team-card .bio {
  --lines: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  overflow: hidden;
  position: relative;
  transition: max-height 320ms cubic-bezier(0.33, 0, 0.2, 1);
}
.team-card:not(.is-open) .bio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5em;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    var(--bg) 85%
  );
}
.team-card.is-open .bio {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.team-card::after {
  content: "▼";
  font-size: 0.8rem;
  color: var(--muted);
  position: absolute;
  right: 12px;
  top: 12px;
  transition: transform 180ms ease;
}
.team-card.is-open::after {
  transform: rotate(-180deg);
}
@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: border-color 140ms ease;
  }
  .team-card .bio {
    transition: none;
  }
  .team-card::after {
    transition: none;
  }
}

/* =========================
   Contact page — compact readable form
   ========================= */
.page-contact__header,
.page-contact__form {
  max-width: 720px;
  margin-inline: auto;
}
.page-contact__header {
  margin-bottom: 8px;
}
.page-contact__form .actions {
  text-align: right;
}

/* fields grid */
.form-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
  }
  .form-grid .field--full {
    grid-column: 1 / -1;
  }
}

/* inputs comfort */
.form .field label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
}
.form .input,
.form .textarea,
.form select {
  min-height: 42px;
}
.form .textarea {
  min-height: 140px;
}

/* Anchor link highlight (e.g., “Yann”) */
.link-highlight {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
  border-radius: 4px;
  padding: 2px 4px;
}
.link-highlight:hover,
.link-highlight:focus {
  color: var(--fg);
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* =========================
   Mobile hamburger sidenav (CSS-only)
   ========================= */
@media (min-width: 992px) {
  details.mnav {
    display: none;
  }
}
@media (max-width: 991px) {
  :root {
    --drawer-dur: 420ms;
    --drawer-ease: cubic-bezier(0.33, 0, 0.2, 1);
    --header-height: 64px; /* adjust if your header is taller/shorter */
  }

  /* Hide the left column grid sidenav; we use the drawer instead */
  .sidenav {
    display: none !important;
  }

  details.mnav {
    display: block;
    z-index: 999; /* above layout frame */
  }

  .mnav > summary {
    list-style: none;
    cursor: pointer;
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 1000; /* above overlay */
    border: 0;
    outline: none;
  }
  .mnav > summary::-webkit-details-marker {
    display: none;
  }

  .mnav-fab {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    backdrop-filter: blur(6px);
  }
  .mnav-bars {
    position: relative;
    width: 22px;
    height: 14px;
    display: block;
  }
  .mnav-bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--fg);
    transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
  }
  .mnav-bars i:nth-child(1) {
    top: 0;
  }
  .mnav-bars i:nth-child(2) {
    top: 6px;
  }
  .mnav-bars i:nth-child(3) {
    top: 12px;
  }

  /* X animation */
  .mnav[open] .mnav-bars i:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
  }
  .mnav[open] .mnav-bars i:nth-child(2) {
    opacity: 0;
  }
  .mnav[open] .mnav-bars i:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }

  /* Dim background when open */
  .mnav[open] > summary {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
  }
  .mnav[open] > summary .mnav-fab {
    position: absolute;
    left: 16px;
    top: 16px;
  }

  /* Drawer panel */
  .mnav-panel {
    position: fixed;
    z-index: 1001;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: min(86vw, 320px);
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 38px rgba(0, 0, 0, 0.45);
    transform: translateX(-104%);
    opacity: 0.01;
    transition: transform var(--drawer-dur) var(--drawer-ease), opacity var(--drawer-dur) ease-out;
    will-change: transform, opacity;
    display: block;
  }
  .mnav-inner {
    height: 100%;
    overflow: auto;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .mnav[open] .mnav-panel {
    transform: translateX(0);
    opacity: 1;
    animation: drawerIn var(--drawer-dur) var(--drawer-ease) both;
  }
  @keyframes drawerIn {
    from {
      transform: translateX(-104%);
      opacity: 0.01;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Prevent body scroll when drawer open */
  body:has(.mnav[open]) {
    overflow: hidden;
  }

  /* Large tap targets */
  .mnav-panel .sidenav-list a {
    padding: 10px 12px;
  }
  .mnav-panel :where(h1, h2, h3, [id]) {
    scroll-margin-top: 72px;
  }

  @media (prefers-reduced-motion: reduce) {
    .mnav-bars i,
    .mnav-panel {
      transition: none;
    }
    .mnav[open] .mnav-panel {
      animation: none;
    }
  }
}

/* =========================
   Footer (mobile-first)
   ========================= */
.site-footer {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}

.site-footer .footer-inner {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.site-footer .footer-brand .footer-logo {
  font-family: var(--font-accent, "Tangerine", cursive);
  font-size: clamp(1.8rem, 4.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ececec 14%,
    #777 36%,
    #f0f0f0 58%,
    #fff 82%,
    #c9c9c9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.site-footer .footer-tag {
  margin: 4px 0 8px;
  color: var(--muted);
}
.site-footer .footer-address,
.site-footer .footer-contact {
  margin: 0 0 6px;
}

.site-footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links li + li {
  margin-top: 6px;
}
.site-footer .footer-links a {
  text-decoration: none;
  color: color-mix(in srgb, var(--fg) 92%, transparent);
}
.site-footer .footer-links a:hover {
  text-decoration: underline;
}

.site-footer .footer-meta {
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Desktop layout */
@media (min-width: 992px) {
  .site-footer .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: start;
    gap: 20px;
    padding: 18px 16px;
  }
}

/* ===== AERATION (desktop) ===== */
@media (min-width: 992px) {
  /* Titres de page & sommaire */
  .page-header {
    margin-bottom: 28px;
  }
  .section-nav {
    margin: 16px 0 32px;
  }

  /* Sections principales : utilitaires upscalés */
  .mt-4 {
    margin-top: 24px;
  } /* était 16px */
  .mt-6 {
    margin-top: 56px;
  } /* était 24px -> vrai souffle entre sections */

  /* Cartes et grilles internes */
  .subgrid {
    gap: 24px;
  } /* était 16px */
  .subcard {
    padding: 16px 18px;
  } /* était 12px */

  /* Un peu plus de marge sous les sous-titres de bloc */
  .subcard h3 {
    margin: 8px 0 10px;
  }
}

/* Option “grand souffle” sur très grands écrans */
@media (min-width: 1280px) {
  .mt-6 {
    margin-top: 64px;
  }
  .section-nav {
    margin-bottom: 36px;
  }
  .subgrid {
    gap: 28px;
  }
  .subcard {
    padding: 18px 20px;
  }
}

/* ===== Hygiène — version minimaliste ===== */

/* Intro group: un cadre fin pour 4 paragraphes */
.hyg-intro {
  border: 1px solid var(--line);
  border-radius: 0px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  margin: 12px 0 16px;
}
.hyg-intro p {
  margin: 0;
}
.hyg-intro p + p {
  margin-top: 8px;
}
@media (min-width: 992px) {
  .hyg-intro {
    padding: 16px 18px;
    margin-bottom: 20px;
  }
  .hyg-intro p + p {
    margin-top: 10px;
  }
}

/* Séparateur fin avant les notes/suivi */
hr.note-sep {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  margin: 10px 0 8px;
  opacity: 0.9;
}

/* Texte de note/suivi sans encadré */
.note-line,
.followup-line {
  margin: 6px 0 0;
  color: var(--muted);
}
.note-line strong,
.followup-line strong {
  color: var(--fg);
}

/* ===== Hygiène — séparateurs & respiration comme Prestations ===== */

/* Gaps entre sections (mobile / desktop) */
:root {
  --section-gap-sm: 28px;
  --section-gap-lg: 56px;
}

.section-spaced {
  margin-top: var(--section-gap-sm);
}
@media (min-width: 992px) {
  .section-spaced {
    margin-top: var(--section-gap-lg);
  }
}

/* Trait dégradé au-dessus du H2 (reprise du look .subcard::before) */
.section-split {
  position: relative;
  padding-top: 12px; /* laisse la place au trait */
}
.section-split::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 25%, transparent)
  );
  opacity: 0.95;
}

/* Meilleur ancrage quand on clique un lien (#id) */
.section-split:where([id]) {
  scroll-margin-top: 80px;
}
@media (max-width: 680px) {
  .section-split:where([id]) {
    scroll-margin-top: 96px;
  }
}

.u-underline-white {
  text-decoration-line: underline;
  text-decoration-color: #fff; /* important car le texte est transparent dans les titres chromés */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

/* Centre les headers marqués partout sur le site */
.page-header--center {
  text-align: center;
}

.flash-region {
  display: grid;
  gap: 8px;
}

.flash {
  position: relative;
  --flash-duration: 5000ms; /* changeable */
  --flash-exit: 320ms;
  opacity: 1;
  transform: translateY(0);
  max-height: 240px;
  overflow: hidden;
  transition: opacity var(--flash-exit) ease, transform var(--flash-exit) ease,
    max-height var(--flash-exit) ease, margin var(--flash-exit) ease, padding var(--flash-exit) ease,
    border-color var(--flash-exit) ease;
}

.flash.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-block: 0;
  padding-block: 0;
  border-color: transparent;
}

.flash .flash-close {
  position: absolute;
  top: 6px;
  right: 6px;
  inline-size: 28px;
  block-size: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.flash .flash-close:hover {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .flash {
    transition: none;
  }
  .flash.is-leaving {
    opacity: 0;
    max-height: 0;
  }
}

/* Durée par défaut */
:root {
  --flash-duration: 5000ms;
}

/* Conteneur d’annonces */
.flash-region {
  margin: 8px 0 12px;
}

/* Boîte flash générique */
.flash {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  color: var(--fg);
  overflow: hidden;
  max-height: 500px;
  transition: opacity 260ms ease, filter 260ms ease, max-height 320ms ease;
}

/* États (adapter les variables côté public/admin) */
.flash.success {
  background: var(--success-bg);
  color: var(--success-fg);
  border-color: var(--success-border);
}
.flash.error {
  background: var(--error-bg);
  color: var(--error-fg);
  border-color: var(--error-border);
}

/* Fermeture */
.flash.is-leaving {
  opacity: 0;
  filter: blur(1px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0;
}

/* Bouton fermer */
.flash .flash-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.flash .flash-close:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Sidebar Events (compact, aéré, clair) */
.sidebar-events {
  margin-top: var(--gap-lg);
}

.ev-mini-title {
  font-family: var(--font-display, serif); /* Bodoni Moda */
  font-variant-caps: small-caps;
  text-align: center;
  letter-spacing: 0.5px;
  margin: 0 0 6px 0;
  font-size: 1.3rem;
  opacity: 0.85;
}

.ev-section-title {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ev-item {
  padding: 8px 0 10px;
  position: relative;
}

/* Séparateur entre items (sauf le premier) */
.ev-item + .ev-item {
  margin-top: 10px;
  padding-top: 12px;
}
.ev-item + .ev-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background-color: var(--line);
  opacity: 1;
  border-radius: 2px;
}

/* Blocs contenus */
.ev-dates {
  font-weight: 600;
  line-height: 1.3;
}
.ev-loc {
  margin-top: 4px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.ev-desc {
  margin-top: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* État vide */
.ev-empty {
  margin: 4px 0 0;
  font-size: 0.95rem;
}

/* Sidebar Events: mobile-only collapsible preview */
@media (max-width: 768px) {
  .sidebar-events {
    position: relative;
    /* Animation du slide */
    overflow: hidden;
    transition: max-height 260ms ease, opacity 200ms ease;
  }

  /* --- État replié = par défaut sur mobile (pas besoin de classe) --- */
  /* On utilise :not(.is-open) pour un collapse par défaut (pas de FOUC) */

  /* Masquer tous les titres de section... */
  .sidebar-events:not(.is-open) .ev-section-title {
    display: none;
  }
  /* ...mais afficher le titre "En cours" */
  .sidebar-events:not(.is-open) .ev-section-title[data-section="now"] {
    display: block;
    margin-top: 0.25rem;
  }

  /* Cacher toutes les listes... */
  .sidebar-events:not(.is-open) .ev-list {
    display: none;
  }
  /* ...sauf la liste juste après le titre "En cours" */
  .sidebar-events:not(.is-open) .ev-section-title[data-section="now"] + .ev-list {
    display: block;
  }

  /* Ne montrer que le 1er évènement de "En cours" */
  .sidebar-events:not(.is-open)
    .ev-section-title[data-section="now"]
    + .ev-list
    .ev-item:not(:first-child) {
    display: none;
  }

  /* Clamp de la description (aperçu 3 lignes) */
  .sidebar-events:not(.is-open) .ev-desc {
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
  }

  /* Fade subtil en bas du preview (optionnel) */
  .sidebar-events:not(.is-open)
    .ev-section-title[data-section="now"]
    + .ev-list
    .ev-item:first-child
    .ev-desc::after {
    content: "";
    display: block;
    height: 18px;
    margin-top: -18px;
    background: linear-gradient(180deg, transparent, var(--bg));
  }

  /* Chevron dans le mini-titre */
  .sidebar-events .ev-mini-title {
    position: relative;
    padding-right: 28px;
    cursor: pointer;
  }
  .sidebar-events .ev-mini-title::after {
    content: "▾";
    position: absolute;
    right: 6px;
    top: 0.15em;
    opacity: 0.8;
    transition: transform 180ms ease;
  }
  .sidebar-events.is-open .ev-mini-title::after {
    transform: rotate(180deg);
  }

  /* État ouvert : tout est visible et déclampé */
  .sidebar-events.is-open .ev-section-title,
  .sidebar-events.is-open .ev-list {
    display: block;
  }
  .sidebar-events.is-open .ev-desc {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
}

/* styles.css – bouton retour haut */
#backToTop {
  position: fixed;
  right: 14px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); /* sombre + transparence */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18); /* léger contour */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
    /* ombre portée douce */ inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* relief léger en haut */ inset 0 -1px 0 rgba(0, 0, 0, 0.25); /* relief léger en bas */
  backdrop-filter: blur(2px); /* verre dépoli discret (optionnel) */
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, background 140ms ease, box-shadow 140ms ease;
  z-index: 1000;
}

#backToTop.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#backToTop:hover {
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

#backToTop:active {
  transform: translateY(1px);
}

#backToTop svg {
  display: block;
  pointer-events: none; /* la cible reste le bouton */
}

/* Aligner la meta en 2 colonnes (gauche/droite) */
.site-footer .footer-meta {
  display: flex; /* ajout */
  justify-content: space-between; /* ajout */
  align-items: center; /* ajout */
  flex-wrap: wrap; /* ajout */
  gap: 8px; /* ajout */
}

.site-footer .footer-meta a {
  color: var(--violet);
  text-decoration: none;
}
.site-footer .footer-meta a:hover {
  text-decoration: underline;
}

/* Colonnes */
.site-footer .footer-meta .meta-left {
  flex: 1 1 auto;
}
.site-footer .footer-meta .meta-right {
  flex: 1 1 auto;
  text-align: right;
}

/* Mobile : tout centré et empilé */
@media (max-width: 768px) {
  .site-footer .footer-meta {
    flex-direction: column;
    text-align: center;
  }
  .site-footer .footer-meta .meta-right {
    text-align: center;
  }
}