/* UPEJ28 - site stylesheet. Reference: docs/charte.md
   1. Fonts  2. Tokens  3. Bootstrap retint  4. Colour roles  5. Base
   6. Header  7. Tab bar & menu  8. Components  9. Pages  10. Footer */

/* 1. Fonts ------------------------------------------------------------ */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ------------------------------------------------------------
   Base = the 5 bubbles of the logo. ink = darker shade for text (>= 6:1 on white).
   soft = pale tint for backgrounds. on = icon colour on the solid base. */
:root,
[data-bs-theme="light"] {
  --violet: #768EB2;    --violet-ink: #486084;    --violet-soft: #E6EAF2;    --violet-on: #FFFFFF;
  --framboise: #C6498D; --framboise-ink: #A63071; --framboise-soft: #F9E4EF; --framboise-on: #FFFFFF;
  --turquoise: #7ED2DA; --turquoise-ink: #1D686F; --turquoise-soft: #E2F5F7; --turquoise-on: #1F2A40;
  --anis: #BCE169;      --anis-ink: #4D6712;      --anis-soft: #EFF8DC;      --anis-on: #1F2A40;
  --orange: #F9A727;    --orange-ink: #875200;    --orange-soft: #FEEFD6;    --orange-on: #1F2A40;
  --danger: #C0352B;    --danger-ink: #A42A21;    --danger-soft: #FCE8E6;
  --gris: #E8E8E7;

  --text: #2E3A55;
  --text-strong: #1F2A40;
  --muted: #5F6B85;
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #F0F2F8;
  --border: #E3E6EE;
  --shadow: 0 6px 20px rgba(46, 58, 85, .08);
  --shadow-hover: 0 10px 28px rgba(46, 58, 85, .14);
  --header-bg: rgba(255, 255, 255, .86);
  --bubbles-opacity: 1;

  --radius-sm: .75rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --tabbar-h: 68px;
}

[data-bs-theme="dark"] {
  --violet-ink: #AFC0DA;    --violet-soft: #262E42;
  --framboise-ink: #EE9CC8; --framboise-soft: #3A2333;
  --turquoise-ink: #8FDDE4; --turquoise-soft: #1D3438;
  --anis-ink: #C7E87F;      --anis-soft: #2A3420;
  --orange-ink: #FBBF5A;    --orange-soft: #3A2E1A;
  --danger-ink: #F59A92;    --danger-soft: #3D2120;

  --text: #E3E7F1;
  --text-strong: #F5F7FC;
  --muted: #A7AFC4;
  --bg: #12141C;
  --surface: #1B1F2C;
  --surface-2: #232838;
  --border: #2F3549;
  --shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, .5);
  --header-bg: rgba(27, 31, 44, .86);
  --bubbles-opacity: .85;
}

/* Accent of the site (setting site.accent, html[data-accent]): buttons, fields, choices. Not the colours of the
   rubrics, nor the red of a removal. primary = solid button (its text, --primary-on, >= 4.5:1). */
:root, html[data-accent="framboise"] {
  --accent: var(--framboise); --accent-ink: var(--framboise-ink); --accent-soft: var(--framboise-soft);
  --primary: #B83C80; --primary-hover: #A63071; --primary-on: #FFFFFF; --primary-rgb: 184, 60, 128;
}
html[data-accent="violet"] {
  --accent: var(--violet); --accent-ink: var(--violet-ink); --accent-soft: var(--violet-soft);
  --primary: #58709A; --primary-hover: #486084; --primary-on: #FFFFFF; --primary-rgb: 88, 112, 154;
}
html[data-accent="turquoise"] {
  --accent: var(--turquoise); --accent-ink: var(--turquoise-ink); --accent-soft: var(--turquoise-soft);
  --primary: #7ED2DA; --primary-hover: #6BC3CB; --primary-on: #1F2A40; --primary-rgb: 126, 210, 218;
}
html[data-accent="anis"] {
  --accent: var(--anis); --accent-ink: var(--anis-ink); --accent-soft: var(--anis-soft);
  --primary: #BCE169; --primary-hover: #A9D152; --primary-on: #1F2A40; --primary-rgb: 188, 225, 105;
}
html[data-accent="orange"] {
  --accent: var(--orange); --accent-ink: var(--orange-ink); --accent-soft: var(--orange-soft);
  --primary: #F9A727; --primary-hover: #E8961A; --primary-on: #1F2A40; --primary-rgb: 249, 167, 39;
}
:root { --focus: rgba(var(--primary-rgb), .45); }

/* 3. Bootstrap retint ---------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--muted);
  --bs-heading-color: var(--text-strong);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-link-color: var(--turquoise-ink);
  --bs-link-color-rgb: 29, 104, 111;
  --bs-link-hover-color: var(--violet-ink);
  --bs-link-hover-color-rgb: 72, 96, 132;
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-focus-ring-color: var(--focus);
  --bs-tertiary-bg: var(--surface-2);
  --bs-body-bg-rgb: 246, 247, 251;
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 143, 221, 228;
  --bs-link-hover-color-rgb: 175, 192, 218;
  --bs-body-bg-rgb: 18, 20, 28;
}

.btn {
  --bs-btn-font-weight: 800;
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--focus);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.btn-lg { --bs-btn-border-radius: 999px; min-height: 52px; --bs-btn-font-size: 1.05rem; }
.btn-sm { min-height: 36px; }
.btn-primary {
  --bs-btn-color: var(--primary-on);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-on);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--primary-on);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--primary-on);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .28);
}
.btn-soft {
  --bs-btn-color: var(--accent-ink);
  --bs-btn-bg: var(--accent-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-soft) 80%, var(--accent));
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent-soft) 70%, var(--accent));
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-disabled-bg: var(--accent-soft);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: .4;
}
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger-ink);
  --bs-btn-hover-border-color: var(--danger-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-ink);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-bg: var(--danger-ink);
  --bs-btn-active-border-color: var(--danger-ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--border);
}

.form-control,
.form-select {
  min-height: 48px;
  border-radius: var(--radius-sm);
  border-width: 2px;
  background-color: var(--surface);
  font-size: 1rem; /* >= 16px: no zoom on iOS */
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem var(--focus);
}
.form-label { font-weight: 700; color: var(--text-strong); }
.form-label .req { color: var(--accent-ink); }
.form-check-input { width: 1.25em; height: 1.25em; border-width: 2px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem var(--focus); border-color: var(--accent); }

.alert {
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
}
.alert-success { --bs-alert-bg: var(--anis-soft); --bs-alert-color: var(--anis-ink); }
.alert-info    { --bs-alert-bg: var(--turquoise-soft); --bs-alert-color: var(--turquoise-ink); }
.alert-warning { --bs-alert-bg: var(--orange-soft); --bs-alert-color: var(--orange-ink); }
.alert-danger  { --bs-alert-bg: var(--danger-soft); --bs-alert-color: var(--danger-ink); }

.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); }

/* 4. Colour roles ---------------------------------------------------------
   Any element with a *-<colour> class gets --c, --c-ink, --c-soft, --c-on. */
.section-violet, .bubble-violet, .tile-violet, .nav-violet, .tab-violet, .card-accent-violet, .badge-soft-violet, .swatch-violet, .swatch-soft-violet {
  --c: var(--violet); --c-ink: var(--violet-ink); --c-soft: var(--violet-soft); --c-on: var(--violet-on);
}
.section-framboise, .bubble-framboise, .tile-framboise, .nav-framboise, .tab-framboise, .card-accent-framboise, .badge-soft-framboise, .swatch-framboise, .swatch-soft-framboise {
  --c: var(--framboise); --c-ink: var(--framboise-ink); --c-soft: var(--framboise-soft); --c-on: var(--framboise-on);
}
.section-turquoise, .bubble-turquoise, .tile-turquoise, .nav-turquoise, .tab-turquoise, .card-accent-turquoise, .badge-soft-turquoise, .swatch-turquoise, .swatch-soft-turquoise {
  --c: var(--turquoise); --c-ink: var(--turquoise-ink); --c-soft: var(--turquoise-soft); --c-on: var(--turquoise-on);
}
.section-anis, .bubble-anis, .tile-anis, .nav-anis, .tab-anis, .card-accent-anis, .badge-soft-anis, .swatch-anis, .swatch-soft-anis {
  --c: var(--anis); --c-ink: var(--anis-ink); --c-soft: var(--anis-soft); --c-on: var(--anis-on);
}
.section-orange, .bubble-orange, .tile-orange, .nav-orange, .tab-orange, .card-accent-orange, .badge-soft-orange, .swatch-orange, .swatch-soft-orange {
  --c: var(--orange); --c-ink: var(--orange-ink); --c-soft: var(--orange-soft); --c-on: var(--orange-on);
}
.ink-violet { color: var(--violet-ink); }
.ink-framboise { color: var(--framboise-ink); }
.ink-turquoise { color: var(--turquoise-ink); }
.ink-anis { color: var(--anis-ink); }
.ink-orange { color: var(--orange-ink); }
.text-muted-strong { color: var(--muted); }

/* 5. Base ------------------------------------------------------------------ */
html, body { overflow-x: clip; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { body { padding-bottom: 0; } }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 900; letter-spacing: -.01em; }
.container { --bs-gutter-x: 2rem; } /* 16px side gutter */
.container-narrow { max-width: 960px; }
.lead { color: var(--muted); font-weight: 500; }
a, button, .btn { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
code { color: var(--framboise-ink); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--surface); color: var(--text-strong);
  padding: .75rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.skip-link:focus { top: 1rem; }

/* Background decoration: big crisp bubbles in the pale tints of the logo colours (no blur) */
.bg-bubbles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-bubbles span { position: absolute; border-radius: 50%; opacity: var(--bubbles-opacity); }
.bg-bubbles span:nth-child(1) { width: clamp(260px, 42vw, 520px); aspect-ratio: 1; background: var(--turquoise-soft); top: -12%; right: -18%; }
.bg-bubbles span:nth-child(2) { width: clamp(180px, 28vw, 360px); aspect-ratio: 1; background: var(--orange-soft); bottom: -8%; left: -12%; }
.bg-bubbles span:nth-child(3) { width: clamp(100px, 14vw, 180px); aspect-ratio: 1; background: var(--framboise-soft); bottom: 22%; right: -5%; }
.bg-bubbles span:nth-child(4) { width: clamp(64px, 9vw, 120px); aspect-ratio: 1; background: var(--anis-soft); top: 34%; left: -4%; }
.bg-bubbles span:nth-child(n+5) { display: none; }
/* Large screens: bubbles spread over the whole page, some behind the content column too */
@media (min-width: 992px) {
  .bg-bubbles span:nth-child(1) { width: 460px; top: -170px; right: 12%; }
  .bg-bubbles span:nth-child(2) { width: 340px; bottom: -120px; left: 4%; }
  .bg-bubbles span:nth-child(3) { width: 170px; bottom: 16%; right: 6%; }
  .bg-bubbles span:nth-child(4) { width: 110px; top: 26%; left: 9%; }
  .bg-bubbles span:nth-child(5) { display: block; width: 240px; aspect-ratio: 1; background: var(--violet-soft); top: 46%; left: 34%; }
  .bg-bubbles span:nth-child(6) { display: block; width: 90px; aspect-ratio: 1; background: var(--turquoise-soft); bottom: 8%; right: 34%; }
}

.site-main { flex: 1 0 auto; padding: 1.25rem 0 2rem; }
@media (min-width: 992px) { .site-main { padding: 2rem 0 3rem; } }

/* 6. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.site-header-inner { display: flex; align-items: center; gap: .5rem; min-height: 64px; }
.site-logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-logo img { height: 32px; width: auto; }
.site-nav { margin-left: auto; gap: .25rem; }
.site-nav-link {
  padding: .5rem .9rem; border-radius: 999px;
  color: var(--text); font-weight: 800; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-nav-link:hover { background: var(--c-soft); color: var(--c-ink); }
.site-nav-link.active { background: var(--c); color: var(--c-on); }
.btn-round {
  margin-left: auto;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.45rem;
  background: var(--violet-soft); color: var(--violet-ink); text-decoration: none;
  transition: transform .15s, background-color .15s;
}
.btn-round:hover { transform: scale(1.06); color: var(--violet-ink); }
.btn-round.active { background: var(--violet); color: var(--violet-on); }
@media (min-width: 992px) { .btn-round { margin-left: .5rem; } }

/* 7. Tab bar & menu ------------------------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 24px rgba(46, 58, 85, .12);
}
.tabbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 0; border: 0; background: none;
  color: var(--muted); text-decoration: none;
  font-size: .72rem; font-weight: 800; line-height: 1.1;
}
.tabbar-icon {
  width: 46px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; transition: background-color .2s, color .2s, transform .2s;
}
.tabbar-item:hover .tabbar-icon { background: var(--c-soft); color: var(--c-ink); }
.tabbar-item.active { color: var(--c-ink); }
.tabbar-item.active .tabbar-icon { background: var(--c); color: var(--c-on); transform: translateY(-2px); }

.menu-sheet.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 24px 24px 0 0; }
.menu-sheet .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.menu-tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .75rem .25rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; text-align: center;
  font-size: .85rem; font-weight: 800;
}
.menu-tile:hover, .menu-tile.active { background: var(--surface-2); color: var(--text-strong); }

/* 8. Components ------------------------------------------------------------ */
/* Bubble: solid colour pastille with a soft halo, like the logo */
.bubble {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.15rem;
  background: var(--c); color: var(--c-on);
  box-shadow: 0 0 0 5px var(--c-soft);
}
.bubble-lg { width: 52px; height: 52px; font-size: 1.5rem; box-shadow: 0 0 0 6px var(--c-soft); }
.bubble-xl { width: 84px; height: 84px; font-size: 2.3rem; box-shadow: 0 0 0 10px var(--c-soft); }
/* Inverted: light inside, its ring of the colour (two tiles of one colour side by side, told apart) */
.bubble.bubble-inv { background: var(--c-soft); color: var(--c-ink); box-shadow: 0 0 0 5px var(--c); }
.bubble-lg.bubble-inv { box-shadow: 0 0 0 6px var(--c); }

.section-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.25rem; margin: 2rem 0 1rem;
  /* Reached from a summary: not hidden under the header */
  scroll-margin-top: 84px;
}
/* Marker: a cluster of three bubbles, like the tree of the logo */
.section-title::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 18px;
  background:
    radial-gradient(circle at 5.5px 10.5px, var(--framboise) 5px, transparent 5.6px),
    radial-gradient(circle at 13px 4px, var(--turquoise) 3.6px, transparent 4.2px),
    radial-gradient(circle at 15.5px 14.5px, var(--anis) 2.6px, transparent 3.2px);
}

.page-head { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.25rem; }
.page-title { margin: 0; font-size: 1.75rem; }
/* What a card page shows, above the name of the person (page_kicker) */
.page-kicker { margin: 0 0 .1rem; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.card-bubble {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.card-bubble[class*="card-accent-"] { background: linear-gradient(135deg, var(--c-soft) 0%, var(--surface) 60%); }

.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
/* Tiles filling the whole width whatever their number (the sales open in Mes commandes): 2 a line on a phone, 3 at most */
.tile-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.tile-row > .tile { flex: 1 1 calc((100% - .75rem) / 2); min-width: 0; }
@media (min-width: 768px) { .tile-row { gap: 1rem; } .tile-row > .tile { flex-basis: calc((100% - 2rem) / 3); } }
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem;
  min-height: 132px; padding: 1.1rem .75rem; text-align: center;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 2px solid transparent; color: var(--text-strong); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--c-soft); color: var(--c-ink); }
.tile-label { font-weight: 800; line-height: 1.2; }
/* Notification of a tile: something to do in the section (adhésions à valider...) */
.tile { position: relative; }
.tile-notify { position: absolute; top: .55rem; right: .55rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .85rem; font-weight: 900; line-height: 1.6rem; text-align: center; box-shadow: 0 0 0 3px var(--surface); }
/* Dashboard: square tiles (as many 150 px+ tiles per row as fit on large screens), with a short line of information */
.tile-square .tile { aspect-ratio: 1; min-height: 0; min-width: 0; gap: .6rem; padding: .75rem; }
.tile-grid.tile-square { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .tile-grid.tile-square { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.tile-square .tile-label, .tile-square .tile-info { max-width: 100%; overflow-wrap: anywhere; }
.tile-info { font-size: .8rem; font-weight: 600; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A tile that submits a form (log out) looks like the others */
.tile-form { display: contents; }
button.tile { width: 100%; font: inherit; cursor: pointer; }

.badge[class*="badge-soft-"] {
  background: var(--c-soft); color: var(--c-ink);
  border-radius: 999px; font-weight: 800; font-size: .8rem; padding: .45em .8em;
}
/* A badge that only says a fact (how an order was paid): grey */
.badge-soft-neutral { --c-soft: var(--surface-2); --c-ink: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
/* A badge of a fact that is not a state (how an order is handed over): only a frame, in the ink of the text */
.badge-soft-outline { --c-soft: transparent; --c-ink: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); }

.empty-state {
  text-align: center; background: var(--surface); border-radius: var(--radius-lg);
  padding: 2.5rem 1.25rem; box-shadow: var(--shadow);
}
.empty-state .bubble { margin-bottom: 1.25rem; }
.empty-state p { color: var(--muted); max-width: 38ch; margin: 0 auto 1.5rem; }

/* List made of cards (mobile-friendly alternative to tables) */
.mail-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.mail-item {
  display: grid; gap: .25rem; padding: .9rem 1rem;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; border: 2px solid transparent;
}
.mail-item:hover { border-color: var(--violet-soft); color: var(--text); }
.mail-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mail-item-date { margin-left: auto; font-size: .8rem; color: var(--muted); }
.mail-item-subject { font-weight: 800; color: var(--text-strong); }
.mail-item-meta { font-size: .85rem; color: var(--muted); word-break: break-all; }
.mail-item-error { font-size: .8rem; color: var(--danger-ink); }
/* An email waiting, with its button to remove it from the queue, at the bottom of its card */
.mail-item-box { position: relative; }
.mail-item-box .mail-item { padding-bottom: 3.4rem; }
.mail-item-cancel { position: absolute; left: 1rem; bottom: .9rem; }

/* Account list: avatar, name, email, badges */
.user-item {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; border: 2px solid transparent;
}
.user-item:hover { border-color: var(--turquoise-soft); color: var(--text); }
.user-item .avatar { flex: none; }
.user-item-body { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.user-item-name { font-weight: 800; color: var(--text-strong); }
.user-item-meta { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-item-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
/* Facts (item_facts()): on several lines rather than cut, each one whole */
.user-item-meta.is-facts { white-space: normal; overflow: visible; }
.user-item-meta.is-facts > span:not([aria-hidden]) { overflow-wrap: anywhere; }
.user-item-chevron { flex: none; color: var(--muted); }
/* Buttons of an item (a device: Essai, Retirer): on its right; on a phone under it, on the right, the text keeping the width */
.user-item:has(> .user-item-actions) { flex-wrap: wrap; }
.user-item-actions { display: flex; gap: .5rem; margin-left: auto; flex: none; }
@media (max-width: 575.98px) { .user-item-actions { flex-basis: 100%; justify-content: flex-end; } }

/* Search field with its button */
.search-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.search-input { position: relative; flex: 1; min-width: 0; }
.search-input .form-control { width: 100%; padding-right: 2.75rem; }
.search-input input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.search-clear:hover { background: var(--surface-2); color: var(--text-strong); }
.search-input .form-control:placeholder-shown + .search-clear { display: none; }

/* Page title with an action on the right */
.page-head { flex-wrap: wrap; }
.page-head > .btn { margin-left: auto; }

/* Label / value list */
.info-list { display: grid; gap: .1rem; margin: 0; }
.info-list dt { font-size: .8rem; font-weight: 700; color: var(--muted); margin-top: .5rem; }
.info-list dt:first-child { margin-top: 0; }
.charte-buttons dt { margin-top: .9rem; font-size: 1rem; }
.info-list dd { margin: 0; overflow-wrap: anywhere; }
.rights-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

/* Stacked full-width action buttons */
.action-stack { display: grid; gap: .6rem; }
@media (min-width: 768px) { .action-stack { grid-template-columns: repeat(2, 1fr); } }
/* A single action takes the whole width (also an odd last one) */
.action-stack > :only-child, .action-stack > :last-child:nth-child(odd) { grid-column: 1 / -1; }



/* Meters, legend and run cards (email service) */
.meter + .meter { margin-top: .9rem; }
.meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 .5rem; margin-bottom: .35rem; }
.meter-label { font-weight: 800; color: var(--text-strong); }
.meter-value { font-size: .9rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: .75rem 0; font-size: .9rem; }
.legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--bs-progress-bar-bg); }
.runs-title { font-size: .95rem; font-weight: 900; margin: 1.25rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.runs { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.runs-item { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .92rem; }
.runs-icon { font-size: 1.1rem; display: inline-flex; }
.runs-label { font-weight: 700; color: var(--text-strong); }
.runs-when { text-align: right; color: var(--muted); font-weight: 700; }
.runs-when small { display: block; font-weight: 600; font-size: .78rem; }
/* A list of figures under the bars of a card: apart, a line above */
.runs-split { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); }

/* Progress bars: widths through classes (no style attribute under the CSP) */
.progress-soft { --bs-progress-height: .75rem; --bs-progress-bg: var(--surface-2); --bs-progress-border-radius: 999px; }
.progress-stacked.progress-soft { height: .9rem; border-radius: 999px; background: var(--surface-2); }
.bar-violet { --bs-progress-bar-bg: var(--violet); }
.bar-framboise { --bs-progress-bar-bg: var(--framboise); }
.bar-turquoise { --bs-progress-bar-bg: var(--turquoise); }
.bar-anis { --bs-progress-bar-bg: var(--anis); }
.bar-orange { --bs-progress-bar-bg: var(--orange); }
/* The quotas: the free part, and the reserve kept for the high priority (striped) */
.bar-empty { --bs-progress-bar-bg: transparent; }
.legend-dot.bar-empty { box-shadow: inset 0 0 0 2px var(--border); }
.bar-reserve { --bs-progress-bar-bg: repeating-linear-gradient(135deg, var(--anis) 0 4px, color-mix(in srgb, var(--anis) 45%, transparent) 4px 8px); }
.progress-stacked .bar-reserve, .progress-stacked .bar-empty { background: var(--bs-progress-bar-bg); }
/* A stacked bar with its figures (quotas): a touch unfolds them under it */
.progress-stacked.progress-figures { cursor: pointer; }
.quota-bar { position: relative; }
.quota-mark { position: absolute; top: -.25rem; bottom: -.25rem; left: 0; border-right: 2px dashed var(--text-strong); pointer-events: none; }
.legend.bar-tip { margin: .4rem 0 0; font-size: .85rem; }
.legend-common { margin: .75rem .25rem 0; font-size: .85rem; color: var(--muted); }
/* A badge in the full colour of its bar (the priorities of the emails) */
.badge.badge-solid { background: var(--c); color: var(--c-on); }
/* A part of a bar waiting for a new try: hatched in its colour (the legend shows it in framboise) */
.bar-muted { --bs-progress-bar-bg: var(--framboise); }
.progress-stacked .bar-retry, .legend-dot.bar-retry { background: repeating-linear-gradient(135deg, var(--bs-progress-bar-bg) 0 3px, color-mix(in srgb, var(--bs-progress-bar-bg) 30%, transparent) 3px 6px); }
/* A line of figures that unfolds its detail (the retries) */
.runs-toggle { cursor: pointer; }
.runs-chevron { font-size: .75rem; color: var(--muted); }
.runs-item > .runs-detail { grid-column: 2 / -1; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--muted); }
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }

/* Account screens --------------------------------------------------------- */
.auth-card {
  max-width: 460px; margin: .5rem auto 0;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.75rem 1.25rem;
}
@media (min-width: 576px) { .auth-card { padding: 2rem 2rem; } }
.auth-head { display: grid; justify-items: center; text-align: center; gap: .6rem; margin-bottom: 1.5rem; }
.auth-head .page-title { font-size: 1.6rem; }
.auth-note { font-size: .85rem; color: var(--muted); margin: 1.25rem 0 0; }
.auth-links { text-align: center; margin: 1rem 0 0; font-weight: 700; }
.auth-switch { text-align: center; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); font-weight: 600; }

/* Two-choice switch (password / link) */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1.25rem; background: var(--surface-2); border-radius: 999px; }
/* Three choices (the tabs of a project in the administration) */
.segmented-3 { grid-template-columns: repeat(3, 1fr); }
.segmented-3 .segmented-item { font-size: .85rem; padding: 0 .25rem; text-align: center; white-space: nowrap; }
.segmented-4 { grid-template-columns: repeat(4, 1fr); }
.segmented-4 .segmented-item { font-size: .8rem; padding: 0 .2rem; text-align: center; white-space: nowrap; }
@media (max-width: 576px) { .segmented-4 .segmented-item .bi { display: none; } }
/* Its count: a grey pill on a tab not chosen (the tabs lie on the grey of the bar), in the accent on the chosen one */
.segmented-count { padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, var(--surface-2)); color: var(--text); font-size: .75rem; font-weight: 800; line-height: 1.4; }
.segmented-item.active .segmented-count { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 420px) { .segmented-3 .segmented-item .bi { display: none; } }
.segmented-item {
  display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  border-radius: 999px; color: var(--muted); font-weight: 800; text-decoration: none; font-size: .95rem;
}
.segmented-item:hover { color: var(--text-strong); }
.segmented-item.active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(46, 58, 85, .12); }

/* Password with show/hide button */
.password-field { position: relative; }
.password-field .form-control { padding-right: 3.25rem; }
.password-toggle {
  position: absolute; top: 2px; right: 2px; bottom: 2px; width: 44px;
  border: 0; background: none; color: var(--muted); font-size: 1.2rem; border-radius: var(--radius-sm);
}
.password-toggle:hover { color: var(--text-strong); }
.form-control.is-invalid ~ .password-toggle { right: 2rem; }
/* An amount (field(..., ['money' => true])): its euro sign inside the field, on the right, as the unit of what is typed */
.money-field { position: relative; }
.money-field .form-control { padding-right: 2.4rem; }
.money-field .form-control.is-invalid { padding-right: 4.4rem; background-position: right 2.2rem center; }
.money-field-sign { position: absolute; top: 50%; right: .95rem; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
/* A locked field (its padlock in the place of the eye): greyed until unlocked */
.password-field .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
.btn.is-busy { opacity: .7; pointer-events: none; }

/* Avatar: photo or initials */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--violet); color: var(--violet-on);
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
}
.avatar-md { width: 48px; height: 48px; font-size: 1.05rem; box-shadow: 0 0 0 4px var(--violet-soft); }
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; box-shadow: 0 0 0 7px var(--violet-soft); }
.avatar-xl { width: 112px; height: 112px; font-size: 2.2rem; box-shadow: 0 0 0 9px var(--violet-soft); }
img.avatar { background: var(--surface-2); }
.btn-round.has-avatar { padding: 0; background: none; box-shadow: 0 0 0 3px var(--violet-soft); }
.btn-round.has-avatar .avatar { width: 44px; height: 44px; font-size: .95rem; }
.btn-round.has-avatar.active { box-shadow: 0 0 0 3px var(--violet); }
.min-w-0 { min-width: 0; }

/* My account: menu + sub-pages */
.account { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
  .account { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .account-side { position: sticky; top: 84px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
}
.account-main { min-width: 0; }
.account-side-head { display: flex; align-items: center; gap: .85rem; padding: .25rem .25rem 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); }
.account-side-name { margin: 0; font-weight: 900; color: var(--text-strong); }
.account-side-email { margin: 0; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-nav { display: grid; gap: .25rem; }
.account-nav form { margin: 0; }
.account-link {
  display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 52px; padding: .5rem .75rem;
  border: 0; border-radius: var(--radius-sm); background: none; text-align: left;
  color: var(--text-strong); font-weight: 800; text-decoration: none;
}
.account-main .account-nav { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; }
.account-link:hover { background: var(--surface-2); color: var(--text-strong); }
.account-link.active { background: var(--violet-soft); color: var(--violet-ink); }
.account-link-icon { width: 1.75rem; display: inline-flex; justify-content: center; font-size: 1.25rem; }
.account-link-label { flex: 1; }
.account-link-chevron { color: var(--muted); }
.account-link.is-soon { color: var(--muted); cursor: default; }
.account-link.is-soon:hover { background: none; }
.account-link.is-danger { color: var(--danger-ink); }
.ink-danger { color: var(--danger-ink); }
.back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-bottom: .25rem; font-weight: 800; text-decoration: none; }
/* A form editing a record: someone else on it, the last change (partial edit-lock, js/edit-lock.js) */
.edit-mark { display: flex; align-items: center; gap: .35rem; margin: .1rem 0 1rem; font-size: .85rem; color: var(--muted); }
.edit-readonly form { opacity: .75; }
/* Search of the site (/recherche): results by group, a few words of each, the words searched in bold */
.search-list { display: grid; gap: .6rem; }
.search-item { display: flex; align-items: flex-start; gap: .9rem; padding: .8rem 1rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; border: 2px solid transparent; }
.search-item:hover { border-color: var(--turquoise-soft); color: var(--text); }
.search-item .bubble { flex: none; }
.search-item-body { display: grid; gap: .15rem; min-width: 0; }
.search-item-title { font-weight: 800; color: var(--text-strong); }
.search-item-meta { font-size: .85rem; color: var(--muted); }
.search-item-text { font-size: .92rem; overflow-wrap: anywhere; }
.search-item strong { color: var(--text-strong); background: var(--anis-soft); border-radius: .2rem; }
/* Statistics (admin/stats): the plot stretched to its box (lines of a fixed width), the axes in HTML */
.stats-chart { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 12rem auto; gap: .35rem .5rem; }
.stats-plot { display: block; width: 100%; height: 100%; overflow: visible; }
.stats-y { display: flex; flex-direction: column; justify-content: space-between; margin: -.5em 0; text-align: right; }
.stats-x { grid-column: 2; display: flex; justify-content: space-between; margin: 0 -1.2rem; }
.stats-y, .stats-x { font-size: .75rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stats-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stats-hit { fill: transparent; }
.stats-hit:hover { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.stats-s-public { stroke: var(--turquoise-ink); color: var(--turquoise-ink); }
.stats-s-connected { stroke: var(--framboise-ink); color: var(--framboise-ink); }
.stats-s-security { stroke: var(--orange-ink); color: var(--orange-ink); }
.stats-s-visits { stroke: var(--turquoise-ink); color: var(--turquoise-ink); }
.stats-s-views { stroke: var(--orange-ink); color: var(--orange-ink); }
.legend-line { display: inline-block; width: 1.1rem; height: 3px; border-radius: 2px; }
.legend-line.stats-s-public { background: var(--turquoise-ink); }
.legend-line.stats-s-connected { background: var(--framboise-ink); }
.legend-line.stats-s-security { background: var(--orange-ink); }
.legend-line.stats-s-visits { background: var(--turquoise-ink); }
.legend-line.stats-s-views { background: var(--orange-ink); }
.legend-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.legend-toggle[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.stats-off { display: none; }
.stats-mark { position: absolute; pointer-events: none; }
.stats-cursor { width: 1px; background: var(--muted); opacity: .45; }
.stats-dot { width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--surface); }
.stats-tip { top: 0; z-index: 2; width: max-content; min-width: 10rem; max-width: min(18rem, 80vw); margin-left: .7rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); box-shadow: var(--shadow); font-size: .85rem; line-height: 1.3; }
.stats-tip.is-left { margin-left: -.7rem; transform: translateX(-100%); }
.stats-tip-day { margin-bottom: .3rem; white-space: nowrap; font-weight: 800; color: var(--text-strong); }
.stats-tip-line { display: flex; align-items: center; gap: .4rem; }
.stats-tip-value { margin-left: auto; padding-left: .8rem; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stats-tip-swatch { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.stats-tip-name { color: var(--text); white-space: nowrap; }
.stats-tip-note { margin-top: .35rem; padding-top: .3rem; border-top: 1px solid var(--border); color: var(--muted); }
.stats-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted; text-underline-offset: .2em; cursor: pointer; }
.stats-page-link { margin-left: .3rem; color: var(--muted); font-size: .85em; }
div.stats-detail { margin-top: .75rem; }
.stats-detail + .meter { margin-top: .9rem; }
.stats-table summary { font-weight: 800; color: var(--muted); cursor: pointer; }
/* Back on a page: the link to the page just left, lit up for a moment (forms.js) */
/* A note of the lock of a record at the bottom of the screen (assets/js/edit-lock.js): seen wherever the page is */
.edit-toast {
  position: fixed; z-index: 1080; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: calc(100% - 2rem); max-width: 32rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg, var(--shadow));
  border-left: 4px solid var(--anis); font-weight: 600;
}
.edit-toast p { flex: 1 1 12rem; }
.edit-toast .btn-close { flex: 0 0 auto; }
.nav-return { animation: nav-return 2.5s ease-out; }
@keyframes nav-return {
  0%, 40% { box-shadow: 0 0 0 3px var(--orange); background-color: var(--orange-soft); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .nav-return { animation: none; outline: 3px solid var(--orange); } }
.profile-card { display: flex; align-items: center; gap: 1.25rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.profile-card .page-title { font-size: 1.4rem; margin-bottom: .15rem; }
.danger-card { border: 2px solid var(--danger-soft); }

/* Switch presented as a tappable card */
.switch-card { display: flex; gap: .75rem; align-items: flex-start; padding: .25rem 0; }
.switch-card .form-check-input { flex: 0 0 auto; margin: .1rem 0 0; width: 2.75em; height: 1.5em; float: none; }
.switch-card .form-check-label { font-weight: 700; color: var(--text-strong); }

/* Profile photo */
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.photo-actions { display: grid; gap: .5rem; flex: 1 1 200px; }
@media (max-width: 575.98px) {
  .photo-row { flex-direction: column; }
  .photo-actions { width: 100%; flex-basis: auto; }
}
.photo-actions .btn { width: 100%; }

/* Multiple choice: check boxes in columns (2 on phones, more when there is room) */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .25rem 1rem; }
.check-grid .form-check { min-height: 44px; display: flex; align-items: center; gap: .6rem; padding-left: 0; margin: 0; }
.check-grid .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
.check-grid .form-check-label { font-weight: 600; color: var(--text-strong); }
.check-inline { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.check-stack { grid-template-columns: 1fr; }
/* List filters: a label and a drop-down list, sent on change */
/* List filters, under the search field: side by side (they wrap when too long) */
.filter-row { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
.filter-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; flex: 1 1 10rem; min-width: 0; }
.filter-bar .form-select { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) { .filter-bar { flex-basis: 100%; } } /* phone: one filter a line */
/* A switch among the filters: on their line on a computer, alone on the right on a phone */
.filter-switch { flex: 0 0 auto; align-items: center; align-self: center; margin-bottom: .75rem; }
@media (max-width: 575.98px) { .filter-switch { margin-left: auto; } }
/* Icon in front of a search field or a filter: same width everywhere, so the fields line up */
.filter-icon { flex: 0 0 1.5rem; margin: 0; text-align: center; font-size: 1.15rem; color: var(--muted); }
fieldset legend.form-label { font-size: 1rem; }

/* Dashboard and administration */
.dashboard-head { display: flex; align-items: center; gap: 1.25rem; margin: .5rem 0 .5rem; }
.dashboard-head .page-title { margin-bottom: .1rem; }
.admin-page { max-width: 960px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; display: grid; gap: .15rem; border-top: 5px solid var(--c); }
.stat-violet { --c: var(--violet); } .stat-framboise { --c: var(--framboise); } .stat-turquoise { --c: var(--turquoise); } .stat-anis { --c: var(--anis); } .stat-orange { --c: var(--orange); }
.stat-value { font-size: 1.9rem; font-weight: 900; color: var(--text-strong); line-height: 1.1; }
.stat-label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.tile.is-soon { opacity: .6; box-shadow: none; }
.tile.is-soon:hover { transform: none; }
.settings-section { font-size: 1.05rem; font-weight: 900; color: var(--text-strong); margin: 1.75rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); }
.settings-section:first-of-type { margin-top: .25rem; }
.setting { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; margin-bottom: .75rem; border-left: 5px solid transparent; }
.setting.is-custom { border-left-color: var(--orange); }
.setting-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; font-size: .85rem; color: var(--muted); }
/* Settings inside the card of their section (Configuration): flat lines, the changed ones marked in orange on the left */
.card-bubble > .setting { background: none; box-shadow: none; border-radius: 0; margin: 0; padding: .75rem 0 .75rem .75rem; }
.card-bubble > .setting:first-child { padding-top: 0; }
.card-bubble > .setting:last-child { padding-bottom: 0; }
.card-bubble > .setting + .setting { border-top: 1px solid var(--border); }
.btn-link-inline { border: 0; background: none; padding: 0; color: var(--accent-ink); font-weight: 800; text-decoration: underline; }
.impersonation-bar {
  position: sticky; top: 0; z-index: 1040; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  padding: .5rem 1rem; background: var(--framboise); color: #fff; font-weight: 700; text-align: center;
}
.impersonation-bar form { margin: 0; }
.impersonation-bar.is-maintenance { background: var(--orange); color: var(--orange-on); }

/* Legal notice */
.legal { display: grid; gap: .25rem; }
.legal section { scroll-margin-top: 84px; }
.legal h3 { margin-top: 1.25rem; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .35rem; }
.legal-meta { text-align: center; font-size: .85rem; color: var(--muted); margin: .75rem 0 0; }

/* Number field with - / + buttons (native spinners hidden) */
.stepper { display: flex; align-items: stretch; gap: .5rem; max-width: 280px; }
/* A colour in hexadecimal: its code, and a dot of it beside (forms.js) */
.color-field { display: flex; align-items: center; gap: .6rem; max-width: 220px; }
.color-dot { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.color-dot.is-empty { background-image: linear-gradient(135deg, transparent 46%, var(--danger) 46%, var(--danger) 54%, transparent 54%); }
.stepper .form-control { flex: 1 1 auto; min-width: 4rem; text-align: center; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.stepper .form-control::-webkit-outer-spin-button,
.stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn {
  flex: 0 0 48px; min-height: 48px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-ink); font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; user-select: none;
}
.stepper-btn:hover { background: color-mix(in srgb, var(--accent-soft) 75%, var(--accent)); }
.stepper-btn:disabled { opacity: .4; }

/* "Unsaved changes" dialog */
.modal-content { border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-hover); }
.leave-modal .modal-body { padding: 2rem 1.5rem 1.5rem; text-align: center; }
.leave-modal .bubble { margin-bottom: 1.25rem; }
.leave-modal p { color: var(--muted); margin-bottom: 1.5rem; }
.md-link-form .invalid-feedback { color: var(--bs-form-invalid-color); margin: -.5rem 0 1rem; }
/* Image of the text (news-editor.js): its preview, its size and place as pressed buttons */
.md-img-preview { display: block; max-width: 100%; max-height: 9rem; margin: -.5rem auto 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.md-choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.md-choices [aria-pressed="true"] { background: var(--primary); color: var(--primary-on); }
/* Icon of a button: a list with a search (news-editor.js) */
.md-icons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .25rem; max-height: 12.5rem; overflow-y: auto; margin-top: .5rem; padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.md-icon { height: 44px; border: 0; border-radius: .6rem; background: transparent; color: var(--text); font-size: 1.25rem; }
.md-icon:hover { background: var(--surface); }
.md-icon[aria-pressed="true"] { background: var(--primary); color: var(--primary-on); }
.md-icon-none { grid-column: span 2; font-size: .85rem; font-weight: 800; }
.md-icons-empty { grid-column: 1 / -1; margin: .5rem; color: var(--muted); }

/* Date and time pickers (assets/js/datepicker.js): a text field, a bubble button, a panel under the field */
.dp { position: relative; }
.dp > .form-control { padding-right: 3.25rem; }
.dp > .form-control.is-invalid { padding-right: 5rem; background-position: right 3.1rem center; }
.dp-toggle {
  position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--accent-soft); color: var(--accent-ink); transition: filter .15s;
}
.dp-time .dp-toggle { background: var(--turquoise-soft); color: var(--turquoise-ink); }
.dp-toggle:hover { filter: brightness(.96); }
.dp-toggle[aria-expanded="true"] { background: var(--primary); color: var(--primary-on); }
.dp-pop {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 1050;
  width: 20.5rem; max-width: calc(100vw - 2rem); padding: .85rem;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-hover); border: 1px solid var(--border);
}
.dp-time .dp-pop { width: 11rem; }
.dp-pop-end { left: auto; right: 0; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .5rem; }
.dp-titles { display: flex; gap: .15rem; }
.dp-nav, .dp-title { border: 0; background: var(--surface-2); color: var(--text-strong); }
.dp-nav { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dp-title { background: transparent; border-radius: .6rem; padding: .35rem .55rem; font-weight: 900; font-size: 1.05rem; }
.dp-title::first-letter { text-transform: uppercase; }
.dp-title:hover, .dp-title.active { background: var(--surface-2); }
.dp-title.active { color: var(--accent-ink); }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.dp-wd { font-size: .75rem; font-weight: 800; color: var(--muted); padding: .2rem 0; }
.dp-day, .dp-cell, .tp-cell { border: 0; background: transparent; color: var(--text); font-weight: 700; }
.dp-day { height: 38px; border-radius: 50%; }
.dp-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.dp-years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.dp-cell { height: 44px; border-radius: .75rem; background: var(--surface-2); }
.dp-day:hover:not(:disabled), .dp-cell:hover:not(:disabled), .tp-cell:hover { background: var(--accent-soft); color: var(--accent-ink); }
.dp-day.is-today, .dp-cell.is-today { box-shadow: inset 0 0 0 2px var(--orange); }
.dp-day.is-selected, .dp-cell.is-selected, .tp-cell.is-selected { background: var(--primary); color: var(--primary-on); font-weight: 900; }
.dp-cell.is-cursor:not(.is-selected) { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); }
.dp-day:disabled, .dp-cell:disabled { opacity: .3; }
.dp-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.dp-link { border: 0; background: transparent; font-weight: 800; color: var(--accent-ink); padding: .35rem .25rem; min-height: 40px; }
.dp-link-muted { color: var(--muted); margin-left: auto; }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tp-col { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; position: relative; padding-right: .15rem; }
.tp-cell { height: 38px; border-radius: .6rem; font-variant-numeric: tabular-nums; }
.tp-wrap { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tp-arrow { border: 0; background: var(--surface-2); color: var(--text-strong); border-radius: .6rem; height: 32px; display: flex; align-items: center; justify-content: center; }
.tp-arrow:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tp-head { text-align: center; font-size: .75rem; font-weight: 800; color: var(--muted); margin-bottom: .3rem; }
.dp-years, .tp-col { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* 9. Pages ------------------------------------------------------------------ */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  background: linear-gradient(160deg, var(--turquoise-soft) 0%, var(--surface) 45%, var(--anis-soft) 100%);
  border-radius: var(--radius-lg); padding: 1.75rem 1.25rem; box-shadow: var(--shadow);
}
.hero-logo { width: 170px; height: auto; }
.hero-kicker { margin: 0 0 .35rem; color: var(--framboise-ink); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.hero-title { font-size: 1.65rem; line-height: 1.15; margin-bottom: .75rem; }
.hero-lead { color: var(--muted); font-weight: 600; margin-bottom: 1.25rem; }
.hero-actions { display: grid; gap: .6rem; }
@media (min-width: 576px) { .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; } }
@media (min-width: 768px) {
  .hero { flex-direction: row; text-align: left; padding: 2.5rem; gap: 2rem; }
  .hero-logo { width: 220px; }
  .hero-title { font-size: 2.2rem; }
  .hero-actions { justify-content: flex-start; }
}

.error-page .error-code {
  margin: 0; font-size: 3.5rem; font-weight: 1000; line-height: 1;
  background: linear-gradient(90deg, var(--violet), var(--turquoise), var(--anis), var(--orange), var(--framboise));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-detail {
  text-align: left; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: .75rem; font-size: .8rem;
  max-width: 60ch; margin: 0 auto 1.5rem;
}

/* Design showcase */
.swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .swatch-grid { grid-template-columns: repeat(5, 1fr); } }
.swatch { background: var(--surface); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); }
.swatch-chip { height: 64px; border-radius: var(--radius-sm); background: var(--c); }
.swatch-soft { margin-top: .4rem; padding: .5rem; border-radius: var(--radius-sm); background: var(--c-soft); font-weight: 800; font-size: .85rem; }
.swatch-name { margin: .5rem 0 0; font-weight: 900; }
.swatch-meta { margin: 0; font-size: .8rem; color: var(--muted); }

/* The school: facts, chart of the pupils, photos; the team (faces drawn instead of photos: school_face) */
.face { overflow: visible; }
.face-turquoise { fill: var(--turquoise); }
.face-anis { fill: var(--anis); }
.face-orange { fill: var(--orange); }
.face-framboise { fill: var(--framboise); }
.face-violet { fill: var(--violet); }
.face-ink { fill: #1F2A40; }
.face-shine { fill: #fff; }
.face-line { fill: none; stroke: #1F2A40; stroke-width: 3; stroke-linecap: round; }
.face-cheek { fill: var(--framboise); opacity: .3; }
svg.avatar { background: transparent; }
.school-role { font-size: .85rem; color: var(--muted); font-weight: 700; margin-top: -.35rem; }
.school-group-subtitle { margin-top: -.6rem; }
.school-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .school-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.school-facts .card-bubble { margin: 0; }
.school-fact-label { margin: 0; font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.school-fact-value { margin: .1rem 0 0; font-size: 1.1rem; font-weight: 900; color: var(--text-strong); }
.school-hours { font-size: 1rem; }
.school-fact-note { margin: .25rem 0 0; font-size: .85rem; color: var(--muted); }
.school-levels { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; }
/* Too wide for a phone: it scrolls, starting from the latest years (direction rtl on the box only) */
.school-hour { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; font-size: 1rem; }
.school-address { margin: .15rem 0 .6rem; font-weight: 700; color: var(--text-strong); }
.school-contact-line { margin: .2rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.school-contact-line .bi { color: var(--framboise-ink); }
.school-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
@media (min-width: 768px) { .school-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.school-links .tile { min-height: 116px; }
@media (max-width: 575.98px) { .school-links .tile-label { font-size: .85rem; } }
/* Chart of the pupils (school_chart): bars in HTML, the number above, the year below, a bubble on hovering a bar */
.school-chart { display: flex; align-items: stretch; gap: 3px; margin-top: .5rem; }
.chart-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; outline: 0; cursor: default; }
.chart-area { width: 100%; height: 190px; display: flex; align-items: flex-end; justify-content: center; padding-top: 1.6rem; }
.chart-bar { position: relative; width: 70%; max-width: 48px; min-height: 3px; background: var(--turquoise); border-radius: 4px 4px 0 0; transition: filter .15s; }
.chart-bar-now { background: var(--framboise); }
.chart-col:hover .chart-bar, .chart-col:focus .chart-bar { filter: brightness(.9); }
.chart-value { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: .75rem; font-weight: 800; color: var(--text-strong); white-space: nowrap; }
.chart-label { margin-top: .35rem; font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.chart-tip { position: absolute; bottom: calc(100% - 1rem); left: 50%; transform: translateX(-50%); z-index: 2; padding: .3rem .6rem; border-radius: var(--radius-sm); background: var(--text-strong); color: var(--surface); font-size: .8rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; }
.chart-col:first-child .chart-tip { left: 0; transform: none; }
.chart-col:last-child .chart-tip { left: auto; right: 0; transform: none; }
.chart-col:hover .chart-tip, .chart-col:focus .chart-tip { opacity: 1; }
/* Narrow screens: the number and the year written upwards */
@media (max-width: 767.98px) {
  .school-chart { gap: 2px; }
  .chart-area { height: 160px; padding-top: 2rem; }
  .chart-bar { width: 80%; }
  .chart-value, .chart-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; }
  .chart-value { left: auto; right: 0; width: 100%; display: flex; align-items: center; padding: 0 0 3px; }
}
.chart-h-0 { height: 0%; } .chart-h-2 { height: 2%; } .chart-h-4 { height: 4%; } .chart-h-6 { height: 6%; } .chart-h-8 { height: 8%; } .chart-h-10 { height: 10%; } .chart-h-12 { height: 12%; } .chart-h-14 { height: 14%; } .chart-h-16 { height: 16%; } .chart-h-18 { height: 18%; } .chart-h-20 { height: 20%; } .chart-h-22 { height: 22%; } .chart-h-24 { height: 24%; } .chart-h-26 { height: 26%; } .chart-h-28 { height: 28%; } .chart-h-30 { height: 30%; } .chart-h-32 { height: 32%; } .chart-h-34 { height: 34%; } .chart-h-36 { height: 36%; } .chart-h-38 { height: 38%; } .chart-h-40 { height: 40%; } .chart-h-42 { height: 42%; } .chart-h-44 { height: 44%; } .chart-h-46 { height: 46%; } .chart-h-48 { height: 48%; } .chart-h-50 { height: 50%; } .chart-h-52 { height: 52%; } .chart-h-54 { height: 54%; } .chart-h-56 { height: 56%; } .chart-h-58 { height: 58%; } .chart-h-60 { height: 60%; } .chart-h-62 { height: 62%; } .chart-h-64 { height: 64%; } .chart-h-66 { height: 66%; } .chart-h-68 { height: 68%; } .chart-h-70 { height: 70%; } .chart-h-72 { height: 72%; } .chart-h-74 { height: 74%; } .chart-h-76 { height: 76%; } .chart-h-78 { height: 78%; } .chart-h-80 { height: 80%; } .chart-h-82 { height: 82%; } .chart-h-84 { height: 84%; } .chart-h-86 { height: 86%; } .chart-h-88 { height: 88%; } .chart-h-90 { height: 90%; } .chart-h-92 { height: 92%; } .chart-h-94 { height: 94%; } .chart-h-96 { height: 96%; } .chart-h-98 { height: 98%; } .chart-h-100 { height: 100%; } 
.school-history-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-bottom: 1rem; }
.school-history-facts p { display: flex; align-items: center; gap: .75rem; margin: 0; line-height: 1.25; }
.school-history-facts small { color: var(--muted); font-weight: 600; }
/* Photos: a mosaic of the first three (the first one big), opened full size in a carousel in a modal */
.school-gallery { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.school-gallery-item { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; cursor: zoom-in; }
.school-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.school-gallery-item:hover img, .school-gallery-item:focus-visible img { transform: scale(1.03); }
.school-gallery-1 .school-gallery-item, .school-gallery-3 .school-gallery-item:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .school-gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .school-gallery-3 .school-gallery-item:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  /* Its height: the two small ones beside it (16/9), whatever the shape of its photo */
  .school-gallery-3 .school-gallery-item:first-child img { position: absolute; inset: 0; }
}
.school-gallery-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(31, 42, 64, .55); color: #fff; font-weight: 800; font-size: 1.1rem; }
.school-gallery-modal .modal-content { background: #111; overflow: hidden; justify-content: center; }
/* The photos side by side in a track moved by school-gallery.js (the finger drags it: touch-action pan-y) */
.gallery-viewport { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.gallery-viewport.is-dragging { cursor: grabbing; }
.gallery-track { display: flex; width: 100%; will-change: transform; }
.gallery-slide { position: relative; flex: 0 0 100%; margin: 0; height: min(85vh, 75vw); display: flex; align-items: center; justify-content: center; }
.gallery-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.gallery-slide figcaption { position: absolute; left: 8%; right: 8%; bottom: .75rem; padding: .3rem .7rem; border-radius: var(--radius-sm); background: rgba(31, 42, 64, .55); color: #fff; font-weight: 700; font-size: .9rem; text-align: center; }
.gallery-count { position: absolute; top: .9rem; left: 1rem; z-index: 3; margin: 0; padding: .1rem .55rem; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .45); color: #fff; font-size: .85rem; font-weight: 700; }
@media (hover: none) { .gallery-viewport .carousel-control-prev, .gallery-viewport .carousel-control-next { display: none; } }
.school-gallery-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; }
.school-fact-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.rpe-history.school-docs-history { margin-top: .25rem; }
.school-docs-title { margin-bottom: .6rem; }
.school-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.school-doc-list a { display: inline-flex; gap: .5rem; align-items: baseline; font-weight: 700; text-decoration: none; }
.school-doc-list a:hover { text-decoration: underline; }
.school-doc-list .bi { color: var(--framboise-ink); }
.rpe-card-link { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rpe-card-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-hover); }.school-docs { margin-bottom: .75rem; }
.school-class-number { background: var(--framboise-soft); color: var(--framboise-ink); font-weight: 900; }
/* Title of a list with its tools: the tools go under the title when they do not fit */
.school-admin-group, .list-head-section { margin: 1.5rem 0 .75rem; flex-wrap: wrap; row-gap: .5rem; }
.school-photo-thumb { flex-basis: 96px; height: 54px; }
.school-photo-thumb img { width: 96px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }
.school-stats-add { display: flex; gap: .5rem; }
.school-stats-add .form-select { flex: 1 1 auto; min-width: 0; }
.school-stats-row { display: grid; grid-template-columns: 3rem minmax(0, 13rem) auto; justify-content: start; gap: .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.school-stats-row:last-of-type { border-bottom: 0; }
.school-stats-row > p { grid-column: 2 / 4; }
.school-stats-year { font-weight: 800; white-space: nowrap; }
.school-levels-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.school-level { display: flex; align-items: center; gap: .75rem; }
.school-level .form-check { flex: 0 0 4.5rem; margin: 0; }
/* The stepper takes the rest of the line of its level (in a flex row it would shrink to nothing) */
.school-level .stepper { flex: 1 1 auto; max-width: 13rem; }
/* The arrows of an item of a list: glued (.btn-join) */
.school-admin-tools { display: flex; align-items: center; flex-shrink: 0; }
/* The tools of a team (Équipe et classes): modify, up, down, then the add button taking the rest of the width */
/* Buttons glued in one pill (the tools of a team, of a choice of a poll): 1px apart, rounded at both ends only */
.team-tools, .btn-join { display: flex; }
.team-tools { margin-bottom: .75rem; }
:is(.team-tools, .btn-join) form { margin: 0; display: flex; }
:is(.team-tools, .btn-join) .btn { border-radius: 0; white-space: nowrap; }
:is(.team-tools, .btn-join) > :not(:first-child) .btn, :is(.team-tools, .btn-join) > .btn:not(:first-child) { margin-left: 1px; }
:is(.team-tools, .btn-join) > :first-child, :is(.team-tools, .btn-join) > :first-child .btn { border-radius: 999px 0 0 999px; }
:is(.team-tools, .btn-join) > :last-child, :is(.team-tools, .btn-join) > :last-child .btn { border-radius: 0 999px 999px 0; }
.school-doc-item { align-items: center; }
.school-doc-item .user-item-body { text-decoration: none; color: inherit; }
.school-shown { margin-top: -.5rem; }
.school-docs .news-docs { padding: .75rem 1rem; }
/* Parents' representatives: public page (photo, name, levels of their children, member of the association) */
.rpe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .rpe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rpe-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
  padding: 1.25rem .75rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}
.rpe-card .avatar { box-shadow: 0 0 0 6px var(--turquoise-soft); margin-bottom: .35rem; }
.rpe-name { font-weight: 900; color: var(--text-strong); line-height: 1.2; overflow-wrap: anywhere; }
.rpe-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
/* The trombinoscope: business cards, the photo on the left, the rest on the right; two a line at most, one on a phone */
.trombi-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .trombi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trombi-card { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.1rem 1.25rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.trombi-card .avatar { flex: 0 0 auto; margin: 7px; box-shadow: 0 0 0 7px var(--turquoise-soft); }
.trombi-card.is-council .avatar { box-shadow: 0 0 0 7px var(--framboise-soft); }
.trombi-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.trombi-name { font-weight: 900; color: var(--text-strong); line-height: 1.2; overflow-wrap: anywhere; }
.trombi-line { font-size: .875rem; font-weight: 700; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.trombi-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.trombi-link { color: var(--turquoise-ink); text-decoration: none; }
.trombi-link:hover { color: var(--turquoise-ink); text-decoration: underline; }
.rpe-photo-row { display: flex; align-items: center; gap: 1.25rem; }
.rpe-photo-preview .avatar { box-shadow: 0 0 0 6px var(--turquoise-soft); object-fit: cover; }
.rpe-photo-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) { .rpe-photo-row { flex-direction: column; align-items: flex-start; } }
.rpe-history { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); text-align: center; }
.rpe-history a { color: var(--muted); }
.rpe-history-icon { margin-right: .35rem; }
.rpe-history-now { opacity: .55; font-weight: 700; }
@media (max-width: 575.98px) { .rpe-card .avatar-xl { width: 88px; height: 88px; font-size: 1.8rem; } }

/* The association: logos of the partners (square white tiles, the logo whole), its registration (label / value) */
.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 576px) { .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .partner-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.partner-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: .5rem; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); border: 2px solid transparent; color: var(--text-strong); font-weight: 800; text-align: center; text-decoration: none; }
a.partner-tile:hover { border-color: var(--framboise-soft); transform: translateY(-2px); }
.partner-tile img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-thumb { flex: 0 0 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); color: var(--muted); }
.partner-thumb img { max-width: 44px; max-height: 44px; object-fit: contain; }
.partner-tile .partner-tree, .partner-thumb .partner-tree { width: 60%; height: auto; opacity: .55; }
/* Logo of a partner in its card (as the photo of a representative, but square) */
.partner-logo-preview { flex: 0 0 96px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); }
.partner-logo-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-logo-preview .partner-tree { width: 60%; height: auto; opacity: .55; }
/* Trombinoscope of the CA (as the V0): round photo, name, post in a pill, representative of parents below */
.leader-grid .avatar { box-shadow: 0 0 0 6px var(--framboise-soft); object-fit: cover; }
.leader-rpe { font-size: .85rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.association-registry dl { display: grid; gap: .5rem; margin-bottom: 1rem; }
.association-registry dl > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .75rem; }
.association-registry dt { font-weight: 700; color: var(--muted); }
.association-registry dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .association-registry dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* Agenda (agenda/month): a month week by week; each week: its days (a grid of 7 buttons) under its bars (a grid of
   7 columns: a row for the numbers, AGENDA_LANES lanes, a row for "+N"). The colour of a group: --ag / --ag-ink
   (/agenda/couleurs.css). Wednesday, Saturday and Sunday lighter (no school), as on the V0. */
.ag { --ag-num: 1.7rem; --ag-lane: 1.45rem; }
.ag-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ag-month-title { margin: 0; font-size: 1.35rem; min-width: 10rem; text-align: center; flex: 1 1 auto; }
.ag-today-link { order: 4; margin-left: auto; }
.ag-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.ag-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 700; }
.ag-chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.ag-dot { flex: 0 0 auto; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ag, var(--muted)); }
.ag-dot-lg { width: 2.25rem; height: 2.25rem; }
.ag-viewport { position: relative; overflow: hidden; touch-action: pan-y; transition: height .25s ease; }
.ag-viewport.is-dragging { user-select: none; -webkit-user-select: none; }
/* The month in the middle is the one shown (also without script) */
.ag-track { display: flex; align-items: flex-start; width: 100%; transform: translate3d(-100%, 0, 0); will-change: transform; }
.ag-month { flex: 0 0 100%; min-width: 0; }
.ag-grid { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.ag-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--orange-soft); color: var(--orange-ink);
  font-weight: 800; font-size: .8rem; text-align: center; padding: .35rem 0; }
.ag-week { position: relative; min-height: calc(var(--ag-num) + (var(--ag-lane) * 4) + .25rem); border-top: 1px solid var(--border); }
.ag-days, .ag-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-days { position: absolute; inset: 0; }
.ag-day { position: relative; border: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 0; text-align: right; cursor: pointer; }
.ag-day:first-child { border-left: 0; }
.ag-day:hover { background: var(--surface-2); }
.ag-off { background: var(--anis-soft); }
.ag-out .ag-num { opacity: .4; }
.ag-num { position: absolute; top: .2rem; right: .3rem; min-width: 1.5rem; padding: 0 .3rem; border-radius: .5rem; font-size: .75rem; font-weight: 800; color: var(--muted); text-align: center; }
.ag-today .ag-num { background: var(--framboise); color: #fff; }
.ag-bars { position: relative; z-index: 1; grid-template-rows: var(--ag-num) repeat(4, var(--ag-lane)); pointer-events: none; }
.ag-bar, .ag-more { pointer-events: auto; align-self: center; height: calc(var(--ag-lane) - .2rem); margin: 0 .15rem; padding: 0 .4rem; border: 0;
  border-radius: .45rem; font-size: .72rem; font-weight: 800; line-height: calc(var(--ag-lane) - .2rem); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bar { background: var(--ag); color: var(--ag-ink); }
.ag-bar:hover, .ag-bar:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--focus); }
/* An event that goes on before or after the week: no rounded end there */
.ag-bar.ag-from { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ag-bar.ag-to { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ag-tentative { background: repeating-linear-gradient(45deg, var(--ag), var(--ag) 6px, color-mix(in srgb, var(--ag) 70%, #fff) 6px, color-mix(in srgb, var(--ag) 70%, #fff) 12px); }
.ag-more { background: transparent; color: var(--muted); text-align: center; }
.ag-more:hover { color: var(--text-strong); text-decoration: underline; }
.ag-c1 { grid-column-start: 1; } .ag-c2 { grid-column-start: 2; } .ag-c3 { grid-column-start: 3; } .ag-c4 { grid-column-start: 4; }
.ag-c5 { grid-column-start: 5; } .ag-c6 { grid-column-start: 6; } .ag-c7 { grid-column-start: 7; }
.ag-s1 { grid-column-end: span 1; } .ag-s2 { grid-column-end: span 2; } .ag-s3 { grid-column-end: span 3; } .ag-s4 { grid-column-end: span 4; }
.ag-s5 { grid-column-end: span 5; } .ag-s6 { grid-column-end: span 6; } .ag-s7 { grid-column-end: span 7; }
.ag-l1 { grid-row: 2; } .ag-l2 { grid-row: 3; } .ag-l3 { grid-row: 4; } .ag-l4 { grid-row: 5; }
/* The list of the month (and of a day, in the window) */
.ag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ag-item { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.ag-item .ag-dot { margin-top: .3rem; }
.ag-item p { margin: 0; }
.ag-when { font-size: .85rem; font-weight: 700; color: var(--muted); }
.ag-title { font-weight: 900; color: var(--text-strong); }
.ag-group { font-size: .8rem; color: var(--muted); }
.ag-desc { margin-top: .35rem; font-size: .95rem; }
.ag-desc p:last-child { margin-bottom: 0; }
.modal .ag-item { box-shadow: none; padding: 0; }
@media (max-width: 575.98px) {
  .ag { --ag-num: 1.5rem; --ag-lane: 1.15rem; }
  .ag-bar, .ag-more { font-size: .6rem; padding: 0 .2rem; margin: 0 .05rem; border-radius: .3rem; }
  .ag-num { font-size: .68rem; right: .1rem; padding: 0 .15rem; min-width: 1.2rem; }
  .ag-month-title { font-size: 1.15rem; min-width: 0; }
}

/* News: cards of the lists, the article, its text (news_render) */
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-grid > .lazy-placeholder, .news-grid > .empty-state { grid-column: 1 / -1; }
.news-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--text); }
.news-card-cover {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--anis-soft), var(--surface-2));
}
.news-card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.news-card-cover .news-card-tree { width: auto; height: 72%; object-fit: contain; opacity: .9; }
.news-card-play {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(31, 42, 64, .6); color: #fff; font-size: 1.6rem;
}
/* "Image entière": the whole image in the frame, on the tint of the card (a flyer) */
.news-card-cover-whole { padding: .6rem; }
.news-card-cover-whole img { min-height: 0; object-fit: contain; object-position: center; border-radius: .4rem; }
.news-card-body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.15rem 1.2rem; }
.news-card-date { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 800; color: var(--anis-ink); }
.news-card-date::first-letter { text-transform: uppercase; }
.news-card-title { font-size: 1.1rem; font-weight: 900; line-height: 1.25; color: var(--text-strong); }
.news-card-text { color: var(--muted); font-size: .95rem; }

.news-article-head { margin-bottom: 1rem; }
.news-article-head .page-kicker::first-letter { text-transform: uppercase; }
.news-cover { margin-bottom: 1.25rem; }
.news-figure { margin: 0 0 1.25rem; text-align: center; }
.news-figure figcaption { margin-top: .4rem; font-size: .85rem; color: var(--muted); }
/* Sizes and places of an image of the text ({image petite gauche}): on a phone always centred; from 576 px a small or
   medium one beside the text */
/* mini: a logo (a partner...) */
/* A row of logos (images all mini on lines that follow each other): small, side by side, centred */
.news-row.news-row-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 1.5rem; }
.news-row.news-row-logos .news-figure-xs { width: 8rem; margin: 0; }
.news-figure-xs { max-width: 8rem; margin-left: auto; margin-right: auto; }
.news-figure-s { max-width: 14rem; margin-left: auto; margin-right: auto; }
.news-figure-m { max-width: 24rem; margin-left: auto; margin-right: auto; }
@media (min-width: 576px) {
  /* Two images on the same side: one under the other, not side by side */
  .news-figure-left { float: left; clear: left; margin: .3rem 1.25rem 1rem 0; }
  .news-figure-right { float: right; clear: right; margin: .3rem 0 1rem 1.25rem; }
  .news-figure-xs.news-figure-left, .news-figure-xs.news-figure-right { width: 22%; }
  .news-figure-s.news-figure-left, .news-figure-s.news-figure-right { width: 40%; }
  .news-figure-m.news-figure-left, .news-figure-m.news-figure-right { width: 50%; }
}
.news-body { display: flow-root; }
.news-body .news-heading, .news-body .news-button, .news-body .news-more, .news-body .news-video { clear: both; }
.news-zoom { display: block; cursor: zoom-in; }
/* Images on lines that follow each other: side by side, in a row (2 to 4 columns, a long row goes on below) */
.news-row { display: grid; gap: .6rem; align-items: start; clear: both; margin: 0 0 1.25rem; }
.news-row-2 { grid-template-columns: repeat(2, 1fr); }
.news-row-3 { grid-template-columns: repeat(3, 1fr); }
.news-row-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .news-row-4 { grid-template-columns: repeat(4, 1fr); } }
.news-row .news-figure { margin: 0; }
.news-row .news-media { border-radius: var(--radius-sm); }
.news-row figcaption { font-size: .8rem; }
/* An image full size (js/zoom.js) */
.zoom-modal .modal-content { background: transparent; border: 0; box-shadow: none; align-items: center; }
.zoom-img { max-width: 100%; max-height: 85vh; border-radius: var(--radius); cursor: zoom-out; }
.zoom-caption { margin: .6rem 0 0; color: #fff; text-align: center; }
.zoom-close { align-self: flex-end; margin-bottom: .5rem; filter: invert(1); opacity: .9; }
.news-media {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface-2);
}
.news-cover .news-media { max-height: 75vh; width: auto; }
video.news-media { width: 100%; }
.news-body { font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.news-body p, .news-body ul, .news-body ol { margin-bottom: 1rem; }
.news-body li { margin-bottom: .25rem; }
.news-heading { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.news-button { text-align: center; margin: 1.25rem 0; }
.news-button .btn { white-space: normal; }
.news-more { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-bottom: .6rem; }
.news-more summary { padding: .85rem 1rem; font-weight: 800; cursor: pointer; min-height: 48px; }
.news-more[open] summary { border-bottom: 1px solid var(--border); }
.news-more-body { padding: 1rem 1rem .25rem; }
.news-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.news-docs a {
  display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem 1rem;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-weight: 800; text-decoration: none;
}
.news-docs a > span { flex: 1 1 auto; min-width: 0; }
.news-docs .bi { font-size: 1.3rem; color: var(--framboise-ink); }
.news-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 2rem; }
@media (min-width: 576px) { .news-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-pager-link {
  display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); text-decoration: none;
}
.news-pager-next { text-align: right; grid-column: -2; }
.news-pager-dir { font-size: .8rem; font-weight: 800; color: var(--anis-ink); }
.news-pager-title { font-weight: 800; color: var(--text-strong); }

/* News editor: tabs write / preview, toolbar, files */
.md-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.md-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem; padding: .35rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.md-tabs { display: flex; gap: .25rem; }
.md-tab { border: 0; background: transparent; border-radius: .6rem; padding: .45rem .8rem; min-height: 40px; font-weight: 800; color: var(--muted); }
.md-tab.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow); }
.md-toolbar { display: flex; flex-wrap: wrap; gap: .1rem; }
.md-tool { border: 0; background: transparent; border-radius: .6rem; width: 40px; height: 40px; font-size: 1.15rem; color: var(--text); }
.md-tool:hover:not(:disabled) { background: var(--surface); }
.md-tool:disabled { opacity: .35; }
.md-editor .md-input { border: 0; border-radius: 0; min-height: 18rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; line-height: 1.5; }
.md-editor .md-input:focus { box-shadow: none; }
.md-editor:focus-within { border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--focus); }
.md-preview { padding: 1rem; min-height: 18rem; }
/* Hébergement: the room taken, in words above its gauge */
.hosting-figure { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; font-size: 1.1rem; }
/* A video of a gallery: its first image and a play button in the mosaic, its player in the modal */
.school-gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gallery-play { position: absolute; inset: 0; margin: auto; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(198, 73, 141, .92); color: #fff; font-size: 1.6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
/* A YouTube video of a gallery: its image, then its player, in 16/9 */
.gallery-slide .gallery-youtube, .gallery-slide .video-frame { position: relative; display: block; width: min(100%, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; margin: auto; overflow: hidden; border-radius: 12px; background: #000; }
.gallery-slide .gallery-youtube img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide video { width: min(100%, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; max-height: 80vh; object-fit: contain; display: block; margin: auto; background: #000; border-radius: 12px; }
/* A YouTube video of a text (news_video, js/video.js): its image, then its player */
.news-video .video-embed { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; }
.news-video .video-embed img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.news-video .video-embed:hover img, .news-video .video-embed:focus-visible img { opacity: 1; }
.video-play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center; background: rgba(198, 73, 141, .92); color: #fff; font-size: 2rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .2s; }
.news-video .video-embed:hover .video-play { transform: scale(1.08); }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #000; }
.video-source { color: var(--muted); }
.md-help summary { cursor: pointer; font-weight: 700; }
.md-help ul { margin: .5rem 0 0; padding-left: 1.2rem; }
/* Cover of a news item in its editor: a preview of the cover chosen, with "Recadrer" */
.news-cover-box { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; border: 2px dashed var(--border); border-radius: var(--radius); text-align: center; }
.news-cover-box:not(.is-empty) { border-style: solid; }
.news-cover-box.is-dropping { border-color: var(--anis); background: var(--anis-soft); }
.news-cover-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 16rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.news-cover-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.news-cover-box .news-files { width: 100%; text-align: left; }
.news-cover-box .news-files:empty { display: none; }
/* Cropping tool (js/cropper.js): the whole image, a frame dragged by its handles, the rest darkened */
.crop-formats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
/* Turning the image: at the end of the line of the formats */
.crop-turn { display: flex; gap: .35rem; margin-left: auto; }
/* A confidential piece of the accounting, for those who may not see it: its words greyed, no link (its badge after them) */
.compta-private { color: var(--muted); }
.compta-pieces .compta-private { white-space: nowrap; }
.news-file-private { display: inline-flex; padding: .2rem .5rem; }
.crop-formats [aria-pressed="true"] { background: var(--primary); color: var(--primary-on); }
.crop-note { font-weight: 800; color: var(--muted); margin-bottom: .5rem; }
/* A profile photo: a round frame (what the avatar will show) */
.crop-round .crop-frame, .crop-round .crop-shade { border-radius: 50%; }
.crop-round .crop-frame { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.crop-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px; touch-action: none; user-select: none; }
.crop-box { position: relative; overflow: hidden; }
/* Checkerboard: the transparent areas of an image (a logo) seen as such */
.crop-box img { background: repeating-conic-gradient(#E3E6EE 0% 25%, #FFFFFF 0% 50%) 0 0 / 20px 20px; }
.crop-stage img { display: block; max-width: 100%; max-height: 60vh; }
.crop-shade { position: absolute; box-shadow: 0 0 0 9999px rgba(15, 20, 35, .55); pointer-events: none; }
.crop-frame { position: absolute; margin: 12px 0 0 12px; cursor: move; outline: 2px solid #fff; }
.crop-frame:focus-visible { outline: 3px solid var(--orange); }
.crop-handle { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.crop-nw { left: 0; top: 0; cursor: nwse-resize; } .crop-n { left: 50%; top: 0; cursor: ns-resize; } .crop-ne { left: 100%; top: 0; cursor: nesw-resize; }
.crop-e { left: 100%; top: 50%; cursor: ew-resize; } .crop-se { left: 100%; top: 100%; cursor: nwse-resize; } .crop-s { left: 50%; top: 100%; cursor: ns-resize; }
.crop-sw { left: 0; top: 100%; cursor: nesw-resize; } .crop-w { left: 0; top: 50%; cursor: ew-resize; }
.crop-fixed .crop-n, .crop-fixed .crop-e, .crop-fixed .crop-s, .crop-fixed .crop-w { display: none; }
.news-files { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
/* Under the buttons of adding (at the top of their box): the errors, then the list */
.news-file-add ~ .news-files:not(:empty), .news-file-add ~ .news-file-errors { margin-top: 1rem; }
.news-file { display: flex; gap: .75rem; align-items: flex-start; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.news-file-thumb { flex: 0 0 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.news-file-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.news-file-thumb.is-whole img { object-fit: contain; background: #fff; border: 1px solid var(--border); }
.news-file-body { flex: 1 1 auto; min-width: 0; display: grid; gap: .35rem; }
.news-file-meta { font-size: .85rem; color: var(--muted); }
.news-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.news-file-name { font-weight: 800; overflow-wrap: anywhere; }
.news-file-sending .progress { margin-top: .35rem; }
.news-file-add { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.file-chosen { margin: 0; font-weight: 800; color: var(--anis-ink); overflow-wrap: anywhere; }
.file-chosen::before { content: "✓ "; }
.news-file-add input:focus-visible + .btn { outline: 0; box-shadow: 0 0 0 .2rem var(--focus); }
/* Add files or a link (a dialog): side by side, the width of the box */
.news-add-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; width: 100%; }
/* One button shown only (no camera on a computer): the whole width */
.news-add-row > :only-child, .news-add-row > :first-child:has(+ [hidden]) { grid-column: 1 / -1; }
@media (min-width: 576px) { .news-add-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The signature of a form (signature_html): its IP address and its digest under it, one per line, in the same type;
   the digest breaks anywhere on a phone */
.sig-details { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.sig-details > span { display: block; }
.sig-digest { word-break: break-all; }
/* The menu of a button that adds several kinds of things (a gallery: files, camera, YouTube) */
.add-menu .dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--accent-soft); --bs-dropdown-link-hover-color: var(--accent-ink);
  --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-link-active-color: var(--accent-ink);
  padding: .35rem; border-color: var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover);
}
.add-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; min-height: 44px; border-radius: .6rem; font-weight: 700; cursor: pointer; }
.add-menu .dropdown-item .bi { color: var(--accent-ink); font-size: 1.1rem; }
/* A long menu (the documents of a shop): its groups titled, scrolled inside the screen */
.add-menu .dropdown-header { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .5rem .75rem .25rem; }
.add-menu .dropdown-menu { max-height: min(75vh, 40rem); overflow-y: auto; }
.news-file-add input:focus-visible + .news-add-row label, .news-file-add input:focus-visible + label,
.news-file-add input:focus-visible + input + .news-add-row label { outline: 0; box-shadow: 0 0 0 .2rem var(--focus); }
.news-file-unused { margin-left: .25rem; }
[data-news-files].is-dropping { box-shadow: 0 0 0 3px var(--anis), var(--shadow); background: var(--anis-soft); }
[data-drop-file].is-dropping { box-shadow: 0 0 0 3px var(--anis), var(--shadow); background: var(--anis-soft); border-radius: var(--radius); }
[data-file-box].is-dropping { box-shadow: 0 0 0 3px var(--anis), var(--shadow); background: var(--anis-soft); }
.news-file-saved { color: var(--anis-ink); font-weight: 800; margin-left: .35rem; }
.news-file-errors { margin-bottom: 0; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; }
.news-file-errors p { margin: 0; }
.news-files:empty { display: none; }
/* 10. Footer ------------------------------------------------------------------ */
.site-footer { padding: 1rem 0; text-align: center; color: var(--muted); font-size: .9rem; }
.site-footer p { margin: 0 0 .35rem; }
.site-footer-name { font-weight: 800; color: var(--text); }
.site-footer-links { display: flex; justify-content: center; gap: 1.25rem; }
.site-footer-links a { color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer-meta { font-size: .8rem; }
.site-footer-version { display: inline-flex; align-items: center; min-height: 44px; }

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

/* Association: mandates, public bureau page, simple histories */
.mandate-item { flex-wrap: wrap; }
/* The name keeps room (12rem): when the buttons do not fit beside it, they go to the next line */
.mandate-item .user-item-body { flex: 1 1 12rem; }
.mandate-item-link { position: relative; }
/* The post and its date in full, on two lines if need be (no "…") */
.mandate-item .user-item-meta { white-space: normal; }
.mandate-name { color: var(--text-strong); text-decoration: none; }
.mandate-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.mandate-item-link .mandate-actions, .mandate-item-link .user-item-badges a { position: relative; z-index: 1; }
/* On a phone the buttons take their own line: the arrow stays beside the name */
@media (max-width: 575.98px) { .mandate-item-link .mandate-actions { order: 1; } }
.mandate-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
@media (max-width: 575.98px) { .mandate-actions { width: 100%; justify-content: flex-end; } }
.mandate-actions form { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.user-item-note { font-size: .85rem; color: var(--text); margin-top: .2rem; }
.person-tile { cursor: default; }
.person-tile:hover { transform: none; box-shadow: var(--shadow); border-color: transparent; color: inherit; }
.person-role { font-size: .85rem; color: var(--muted); font-weight: 700; }
.people-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.people-list li { background: var(--surface); border-radius: 999px; padding: .5rem 1rem; box-shadow: var(--shadow); font-weight: 700; }
.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.chip-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
/* Group title inside a results list (Bureau, Conseil d'administration) */
/* History of a person ("fil de bulles", partials/history): a bubble per school year on a vertical thread,
   coloured like the highest post of the year; each post in a small card with a coloured dot */
.hist-violet { --c: var(--violet); --c-soft: var(--violet-soft); --c-ink: var(--violet-ink); }
.hist-framboise { --c: var(--framboise); --c-soft: var(--framboise-soft); --c-ink: var(--framboise-ink); }
.hist-turquoise { --c: var(--turquoise); --c-soft: var(--turquoise-soft); --c-ink: var(--turquoise-ink); }
.hist-anis { --c: var(--anis); --c-soft: var(--anis-soft); --c-ink: var(--anis-ink); }
.hist-orange { --c: var(--orange); --c-soft: var(--orange-soft); --c-ink: var(--orange-ink); }
.hist-gris { --c: var(--border); --c-soft: var(--surface-2); --c-ink: var(--muted); }
.history-fil { position: relative; list-style: none; margin: 0; padding: 0 0 0 2rem; }
.history-fil::before { content: ""; position: absolute; left: .6rem; top: .6rem; bottom: .6rem; width: 3px; border-radius: 3px; background: var(--border); }
.history-year { position: relative; margin-bottom: 1rem; }
.history-year:last-child { margin-bottom: 0; }
.history-dot { position: absolute; left: -1.95rem; top: .15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--c-soft); }
.history-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 900; color: var(--text-strong); margin-bottom: .35rem; }
.history-head a { color: inherit; }
.history-head .history-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 800; padding: .05rem .55rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.history-head a.history-chip:hover { color: var(--text-strong); border-color: var(--muted); }
.history-post { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; background: var(--surface-2); border-radius: var(--radius-sm); padding: .45rem .75rem; margin-bottom: .35rem; }
.history-post:last-child { margin-bottom: 0; }
.history-pip { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); flex: none; align-self: center; }
.history-name { font-weight: 800; color: var(--c-ink); }
a.history-name { text-decoration: none; }
a.history-name:hover { text-decoration: underline; }
.history-dates { color: var(--muted); font-size: .9rem; }
.history-list li { background: var(--surface); border-radius: var(--radius-sm); padding: .65rem 1rem; box-shadow: var(--shadow); }

/* Address search (assets/js/address.js) */
.address-combo { position: relative; }
.address-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: .35rem; max-height: 320px; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); border: 2px solid var(--border);
}
.address-list [role="option"] { display: grid; padding: .6rem .75rem; border-radius: .5rem; cursor: pointer; min-height: 44px; }
.address-list [role="option"]:hover, .address-list [aria-selected="true"] { background: var(--anis-soft); }
.address-main { font-weight: 800; color: var(--text-strong); }
.address-sub { font-size: .85rem; color: var(--muted); }
.address-empty { padding: .6rem .75rem; color: var(--muted); font-size: .9rem; }
/* Postal code / city: the suggestions take the width of both fields */
.address-fields .row { position: relative; }
.address-fields .row .address-combo { position: static; }
.address-fields .row .address-list { top: 100%; }
/* Candidacies and declaration of the leaders */
.decl-line { font-size: .9rem; overflow-wrap: anywhere; }
.elect-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.elect-row .elect-date { flex: 1 1 160px; }
.elect-row .btn { flex: 1 1 200px; }
.elect-row .form-check { flex-basis: 100%; }
@media (min-width: 768px) { .tools-stack { grid-template-columns: repeat(3, 1fr); } }
/* "Trouver une date": the calendar of the slots offered (a column per day, a line per half hour, hour lines; past
   days greyed; a slot = a turquoise block, dragged to move it), the list of every slot, the plain fields without
   script; the answer of a slot (the two-choice switch, a radio button in each half); the answers of each slot */
.avail-cal-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.avail-cal-title { flex: 1; margin: 0; text-align: center; font-weight: 800; color: var(--text-strong); }
.avail-cal-grid { --avail-row: 18px; display: grid; grid-template-columns: 2.6rem repeat(var(--avail-days, 7), minmax(0, 1fr)); column-gap: 2px; user-select: none; }
.avail-cal-head { text-align: center; font-size: .75rem; color: var(--muted); padding-bottom: .3rem; line-height: 1.2; }
.avail-cal-head b { display: block; font-size: 1rem; color: var(--text-strong); }
.avail-cal-head.is-today b { color: var(--turquoise-ink); }
.avail-cal-head.is-past, .avail-cal-head.is-past b { color: var(--muted); }
.avail-cal-hours { position: relative; height: calc(var(--avail-rows) * var(--avail-row)); }
.avail-cal-hours span { position: absolute; right: .3rem; transform: translateY(-50%); font-size: .7rem; color: var(--muted); }
.avail-cal-hours span:first-child { transform: none; }
.avail-cal-col {
  position: relative; height: calc(var(--avail-rows) * var(--avail-row)); cursor: pointer; border-radius: 6px; background-color: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px calc(var(--avail-row) * 2));
}
.avail-cal-col.is-weekend { background-color: var(--anis-soft); }
.avail-cal-head.is-weekend b { color: var(--anis-ink); }
.avail-cal-col.is-past { cursor: not-allowed; background-color: color-mix(in srgb, var(--muted) 28%, var(--surface)); }
.avail-cal-slot {
  position: absolute; left: 2px; right: 2px; display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; overflow: hidden;
  padding: 2px 3px; border-radius: 6px; background: var(--turquoise-soft); color: var(--turquoise-ink); border-left: 3px solid var(--turquoise); font-size: .7rem; font-weight: 800; line-height: 1.15;
  cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(46, 58, 85, .2);
}
.avail-cal-slot.is-dragging { cursor: grabbing; opacity: .85; z-index: 2; box-shadow: 0 6px 16px rgba(46, 58, 85, .3); }
.avail-cal-slot-time { min-width: 0; overflow-wrap: anywhere; }
.avail-cal-slot-x { flex: none; border: 0; padding: 0 2px; background: none; color: inherit; font-size: .7rem; line-height: 1; cursor: pointer; }
.avail-cal-note { margin: .6rem 0 .3rem; font-size: .9rem; font-weight: 700; color: var(--text-strong); }
.avail-cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.avail-cal-item { display: flex; align-items: center; gap: .5rem; }
.avail-cal-go { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: .3rem 0; color: var(--text); font-weight: 600; }
.avail-cal-item.is-shown .avail-cal-go { color: var(--turquoise-ink); font-weight: 800; }
.avail-slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin-bottom: .75rem; }
/* "À qui demander" (partials/audience-fields): the people chosen, the people found */
.people-chosen:not(:empty) { margin-bottom: .75rem; }
.people-chosen .user-item, .people-results .user-item { padding: .5rem .75rem; }
button.user-item { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.avail-list { list-style: none; margin: 0 0 .75rem; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.avail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .25rem .75rem; padding: .45rem .75rem; border-bottom: 1px solid var(--border); }
.avail-list.no-me .avail-row { grid-template-columns: minmax(0, 1fr) auto; }
.avail-row:last-child { border-bottom: 0; }
.avail-row.is-best { box-shadow: inset 4px 0 0 var(--orange); background: color-mix(in srgb, var(--orange-soft) 55%, var(--surface)); }
.avail-row.is-chosen { box-shadow: inset 5px 0 0 var(--anis-ink); background: var(--anis-soft); }
.avail-kept-badge { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: var(--anis-ink); color: var(--surface); font-size: .72rem; font-weight: 800; vertical-align: .1em; }
.avail-row-when { min-width: 0; line-height: 1.2; }
.avail-row-when b { display: block; color: var(--text-strong); }
.avail-row-when > span { font-size: .85rem; color: var(--muted); }
.avail-row-count { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; min-width: 4.5rem; min-height: 44px; padding: 0 .3rem; border: 0; border-radius: 10px; background: none; font-weight: 800; font-size: 1.05rem; color: var(--anis-ink); }
button.avail-row-count { cursor: pointer; }
button.avail-row-count:hover { background: var(--surface-2); }
.avail-row-chevron { font-size: .75rem; color: var(--muted); transition: transform .15s; }
.avail-row-count[aria-expanded="true"] .avail-row-chevron { transform: rotate(180deg); }
.avail-row-who { grid-column: 1 / -1; padding-bottom: .3rem; }
.avail-plus { font-size: .75rem; color: var(--orange-ink); }
.avail-names { font-size: .9rem; margin: .25rem 0 0; }
.avail-names.is-no { color: var(--muted); }
.avail-names.is-maybe { color: var(--orange-ink); }
/* "Trouver une date", the table of the answers: a column per slot (day, hours; its count of available, the best
   ones in orange, the slot kept in violet), a line per person (its name stays at the left when the table scrolls
   sideways on a phone); the line of the person asked, with a box to tick per slot */
.avail-grid-wrap { overflow-x: auto; margin-bottom: .75rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.avail-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .85rem; }
.avail-grid th, .avail-grid td { padding: .4rem .3rem; text-align: center; border-bottom: 1px solid var(--border); }
.avail-grid tbody tr:last-child th, .avail-grid tbody tr:last-child td { border-bottom: 0; }
.avail-grid th[scope="row"], .avail-grid-who { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding-left: .75rem; border-right: 1px solid var(--border); }
/* The name: whole when there is room, cut on a phone (whole again when touched) */
.avail-grid-person { display: flex; align-items: center; gap: .4rem; max-width: 16rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-strong); text-align: left; }
button.avail-grid-person { cursor: pointer; }
.avail-grid-person > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .avail-grid-person { max-width: 8.5rem; } }
.avail-grid-person.is-full { max-width: none; }
.avail-grid-person.is-full > span { white-space: normal; overflow: visible; }
.avail-grid-person .avatar { flex: none; width: 28px; height: 28px; font-size: .7rem; box-shadow: none; }
.avail-grid-slot { min-width: 3.4rem; line-height: 1.15; font-weight: 600; color: var(--muted); }
.avail-grid-slot span { display: block; }
.avail-grid-day { font-size: 1.1rem; font-weight: 800; color: var(--text-strong); }
.avail-grid-time { margin-top: .2rem; font-size: .75rem; color: var(--text); }
.avail-grid-count th { font-weight: 800; color: var(--text-strong); }
.avail-grid-count td { font-weight: 800; font-size: 1rem; color: var(--anis-ink); }
.avail-grid .is-best { background: var(--orange-soft); }
.avail-grid-count .is-best { color: var(--orange-ink); }
/* The slot kept: its head and its count in green, its whole column framed down to the last line */
.avail-grid .is-chosen, .avail-grid .is-chosen-col { box-shadow: inset 3px 0 0 var(--anis-ink), inset -3px 0 0 var(--anis-ink); }
.avail-grid th.is-chosen { background: var(--anis); box-shadow: inset 3px 0 0 var(--anis-ink), inset -3px 0 0 var(--anis-ink), inset 0 3px 0 var(--anis-ink); }
.avail-grid th.is-chosen, .avail-grid th.is-chosen .avail-grid-day, .avail-grid th.is-chosen .avail-grid-time { color: var(--anis-on); }
.avail-grid th.is-chosen .avail-grid-kept { display: inline-block; margin-top: .3rem; padding: .05rem .4rem; border-radius: 999px; background: var(--anis-ink); color: var(--surface); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.avail-grid-count td.is-chosen { background: var(--anis); color: var(--anis-on); }
.avail-grid td.is-chosen-col:not(.is-yes):not(.is-maybe) { background: color-mix(in srgb, var(--anis-soft) 60%, var(--surface)); }
.avail-grid tbody tr:last-child td.is-chosen-col { box-shadow: inset 3px 0 0 var(--anis-ink), inset -3px 0 0 var(--anis-ink), inset 0 -3px 0 var(--anis-ink); }
.avail-grid td.is-yes { background: var(--anis-soft); color: var(--anis-ink); font-weight: 800; }
.avail-grid td.is-maybe { background: var(--orange-soft); color: var(--orange-ink); font-weight: 800; }
.avail-grid td.is-no { color: var(--framboise-ink); }
.avail-grid td.is-none { color: var(--muted); }
.avail-grid tr.is-me th, .avail-grid tr.is-me td { background: var(--turquoise-soft); }
.avail-grid-mine .form-select { min-width: 6.5rem; }
.avail-grid-cell {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 800;
}
.avail-grid-cell.is-none { border-style: dashed; }
.avail-grid-cell.is-yes { background: var(--anis-soft); border-color: var(--anis); color: var(--anis-ink); }
.avail-grid-cell.is-maybe { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); }
.avail-grid-cell.is-no { background: var(--framboise-soft); border-color: var(--framboise); color: var(--framboise-ink); }
.avail-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--muted); }
/* An answer saved at once (dates, polls): saving, saved, not saved */
.save-status { min-height: 1.4rem; margin: .4rem 0 0; font-size: .9rem; font-weight: 700; color: var(--muted); }
.save-status:empty { min-height: 0; margin: 0; }
.save-status.is-ok { color: var(--anis-ink); }
.save-status.is-error { color: var(--framboise-ink); }
/* The card of a meeting in "Mon adhésion": a block per subject (candidacy, proxy), each its text then its buttons */
.meeting-block { margin-top: 1.1rem; }
.meeting-block p { margin-bottom: .6rem; }
/* The reminder by hand, under the link to share (partials/share-section) */
.share-remind { margin-top: .6rem; }
.share-remind .btn { margin-bottom: .5rem; }
.share-who summary, .share-count { margin: 0; font-size: .9rem; font-weight: 700; color: var(--text-strong); }
.share-who summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: .2em; }
.share-who summary::-webkit-details-marker { display: none; }
.mailing-who { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; overflow-wrap: anywhere; }
.mailing-who li { margin-bottom: .2rem; }
.avail-key { display: inline-flex; justify-content: center; min-width: 1.8rem; padding: 0 .2rem; border-radius: 6px; font-weight: 800; }
.avail-key.is-yes { background: var(--anis-soft); color: var(--anis-ink); }
.avail-key.is-maybe { background: var(--orange-soft); color: var(--orange-ink); }
.avail-key.is-no { color: var(--framboise-ink); }
/* "Trouver une date": the link to share, its button and a word on who answers */
.share-link { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: 1rem; }
/* Administration, the media: a grid of cards, the thumbnail (whole, on the tint of the cards) opening the file */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.media-item { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.media-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--anis-soft), var(--surface-2)); border-bottom: 1px solid var(--border); }
.media-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-icon { font-size: 2.6rem; color: var(--muted); }
.media-body { padding: .55rem .7rem .7rem; min-width: 0; }
.media-label { margin: 0; font-weight: 800; font-size: .88rem; color: var(--text-strong); overflow-wrap: anywhere; }
.media-meta { margin: .15rem 0 .35rem; font-size: .78rem; color: var(--muted); }
.media-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-size: .78rem; }
.media-where { min-width: 0; overflow-wrap: anywhere; }
/* Polls: the card as in a WhatsApp chat: each choice with its mark (a round for one answer, a box for several), its
   label, its count and its bar (all of one colour, as in WhatsApp), the faces of its voters unfolding their names */
.poll-hint { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.poll-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.poll-choice { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
label.poll-choice, button.poll-choice { cursor: pointer; }
button.poll-choice { border-radius: .5rem; }
button.poll-choice:hover .poll-mark { border-color: var(--anis-ink); }
.poll-card[aria-busy="true"] .poll-options { opacity: .6; }
.poll-error { margin: 0 0 .6rem; font-weight: 700; color: var(--framboise-ink); }
.poll-input { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; cursor: pointer; accent-color: var(--anis-ink); }
.poll-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 2px solid var(--border); font-size: .8rem; color: #fff; }
.poll-mark-radio { border-radius: 50%; }
.poll-mark-checkbox { border-radius: .3rem; }
.poll-mark.is-checked { background: var(--anis-ink); border-color: var(--anis-ink); }
.poll-label { flex: 1; min-width: 0; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; white-space: pre-line; }
.poll-count { flex: none; font-weight: 800; color: var(--text-strong); }
.poll-option .progress { --bs-progress-height: .5rem; margin-top: .15rem; }
.poll-who { margin-top: .4rem; }
.poll-who summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; border-radius: 999px; list-style: none; }
.poll-who summary:hover .avatar { box-shadow: 0 0 0 2px var(--anis); }
.poll-who summary::-webkit-details-marker { display: none; }
.poll-faces { display: inline-flex; padding-left: 6px; }
.poll-faces .avatar { width: 24px; height: 24px; margin-left: -6px; font-size: .6rem; box-shadow: 0 0 0 2px var(--surface); }
.poll-faces .poll-faces-more { background: var(--surface-2); color: var(--text); letter-spacing: 0; }
.user-item-badges .poll-faces { align-self: center; }
.poll-names { margin: .35rem 0 0; font-size: .85rem; }
.poll-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.poll-actions .btn-primary { flex: 1; }
.poll-done { margin: .6rem 0 0; font-weight: 700; color: var(--anis-ink); }
/* A choice: its text, stretchable in height, then its glued buttons under it on the left */
.poll-edit-row { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.poll-edit-tools { margin-top: .4rem; }
.poll-edit-text { resize: vertical; min-height: calc(2lh + .75rem); }

/* "Envoyer un email": how many people an email goes to (assets/js/mailings.js) */
.mailing-count { display: flex; gap: .5rem; align-items: baseline; font-weight: 700; color: var(--text-strong); }

/* ---------------------------------------------------------------- Projects (/projets, app/lib/projects.php) */
.project-grid { display: grid; gap: 1.25rem; }
.project-card {
  display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 28px; background: var(--surface);
  box-shadow: var(--shadow); color: var(--text); text-decoration: none; border: 2px solid transparent;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--turquoise-soft); color: var(--text); }
@media (min-width: 768px) { .project-card { grid-template-columns: 45% 1fr; } }
.project-card-media { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--turquoise-soft), var(--violet-soft)); }
@media (min-width: 768px) { .project-card-media { aspect-ratio: auto; min-height: 240px; } }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card-placeholder { display: grid; place-items: center; height: 100%; font-size: 3rem; color: var(--turquoise-ink); }
.project-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.25rem 1.4rem 1.4rem; }
.project-card-title { font-size: 1.5rem; font-weight: 900; line-height: 1.15; color: var(--text-strong); }
.project-card-tagline { font-weight: 600; color: var(--muted); }
.project-card-meta { font-size: .9rem; color: var(--muted); }
.project-card-more { margin-top: auto; padding-top: .5rem; font-weight: 800; color: var(--accent-ink); }
.project-card:hover .project-card-more .bi { transform: translateX(3px); }
.project-card-more .bi { display: inline-block; transition: transform .15s; }

/* Where it stands: a pill of its colour */
.project-state { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 800; }
.project-state-orange { background: var(--orange-soft); color: var(--orange-ink); }
.project-state-anis { background: var(--anis-soft); color: var(--anis-ink); }
.project-state-violet { background: var(--violet-soft); color: var(--violet-ink); }

/* The head of a project: its cover across the page, its title on it */
.project-hero {
  position: relative; overflow: hidden; border-radius: 28px; margin: .5rem 0 1rem; min-height: 220px; display: flex; align-items: flex-end;
  background: radial-gradient(circle at 15% 20%, var(--turquoise) 0 60px, transparent 61px), radial-gradient(circle at 85% 30%, var(--anis) 0 40px, transparent 41px),
    radial-gradient(circle at 70% 85%, var(--framboise) 0 30px, transparent 31px), linear-gradient(135deg, var(--violet-ink), var(--turquoise-ink));
}
.project-hero.has-cover { aspect-ratio: 16 / 9; max-height: 460px; width: 100%; }
@media (min-width: 768px) { .project-hero.has-cover { aspect-ratio: 21 / 9; } }
.project-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-hero.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 26, 44, .82) 0%, rgba(20, 26, 44, .35) 45%, transparent 75%); }
.project-hero-text { position: relative; z-index: 1; padding: 1.5rem 1.4rem; color: #fff; }
@media (min-width: 768px) { .project-hero-text { padding: 2rem 2.25rem; } }
.project-hero-kicker { margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.project-hero-title { margin: 0; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; line-height: 1.05; color: #fff; }
.project-hero-tagline { margin: .5rem 0 0; font-size: 1.15rem; font-weight: 600; max-width: 40rem; }
.project-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.project-fact { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: .85rem; font-weight: 700; color: var(--text-strong); }

/* Its summary beside the text on a wide screen, above it on a phone */
.project-layout.has-toc { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .project-layout.has-toc { grid-template-columns: 220px 1fr; align-items: start; } }
.project-toc { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
@media (min-width: 992px) { .project-toc { position: sticky; top: 90px; } }
.project-toc-title { margin: 0 0 .5rem; font-weight: 900; color: var(--text-strong); }
.project-toc ol { margin: 0; padding-left: 1.2rem; }
.project-toc li { margin: .3rem 0; }
.project-toc a { color: var(--text); text-decoration: none; font-weight: 600; }
.project-toc a:hover { color: var(--accent-ink); text-decoration: underline; }
.project-main { min-width: 0; }
.project-body .news-heading { scroll-margin-top: 84px; font-size: 1.35rem; margin-top: 2rem; padding-bottom: .35rem; border-bottom: 3px solid var(--turquoise-soft); }
.project-body .news-heading:first-child { margin-top: 0; }

/* Its lists of documents: a card each */
.project-docs { display: grid; gap: 1rem; }
@media (min-width: 768px) { .project-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project-doc-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.1rem .6rem; }
.project-doc-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 900; color: var(--turquoise-ink); }
.project-doc-list { list-style: none; margin: 0; padding: 0; }
.project-doc-list a { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; padding: .5rem .4rem; border-radius: 12px; color: var(--text); text-decoration: none; }
.project-doc-list a:hover { background: var(--surface-2); }
.project-doc-icon { grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--turquoise-soft); color: var(--turquoise-ink); }
.project-doc-thumb { grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.project-doc-name { font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.project-doc-meta { font-size: .82rem; color: var(--muted); }


/* Double authentication (account/mfa): the QR code on white (read by the phones in dark mode too), the key to type,
   the recovery codes in two columns; printed alone */
.mfa-qr { width: 220px; max-width: 100%; margin: 0 auto .75rem; padding: 8px; background: #fff; border-radius: 12px; }
.mfa-qr:empty { display: none; }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-key code { font-size: 1.05rem; letter-spacing: .08em; color: var(--text-strong); overflow-wrap: anywhere; }
.mfa-codes { columns: 2; column-gap: 2rem; padding-left: 1.5rem; }
.mfa-codes li { padding: .2rem 0; }
.mfa-codes code { font-size: 1.05rem; letter-spacing: .06em; color: var(--text-strong); }
@media print {
  .site-header, .tabbar, .site-footer, .impersonation-bar, .action-stack, .back-link { display: none !important; }
  .card-bubble { box-shadow: none; border: 1px solid #999; }
}
.mfa-icon { margin-left: .3rem; }
.user-item-meta > .mfa-icon:first-child { margin: 0 .3rem 0 0; }
.account-side-email > .mfa-icon:first-child { margin: 0 .3rem 0 0; }
.mfa-apps { list-style: none; padding: 0; margin: 0 0 .75rem; }
.mfa-apps li { padding: .2rem 0; }
/* The button to install the site under those of the alerts (Mon profil › Notifications): the gap of an action-stack */
/* The topics followed (Mon profil › Notifications): each one, its label, then on the devices and the email; one under
   the other on a phone, side by side from a tablet */
.notify-group { font-size: 1rem; font-weight: 800; color: var(--text-strong); margin: 0 0 .75rem; }
.notify-topic + .notify-topic { border-top: 1px solid var(--border); margin-top: .9rem; padding-top: .9rem; }
.notify-topic-label { font-weight: 700; margin: 0 0 .5rem; }
.notify-topic-choices { display: grid; gap: .6rem; align-items: center; }
.notify-topic-choices > .mb-3 { margin-bottom: 0 !important; }
@media (min-width: 576px) { .notify-topic-choices { grid-template-columns: 1fr 1fr; } }

/* The shops (/boutiques, app/lib/shop.php). The accent of a shop is that of the site for its pages (html[data-accent]):
   its buttons, its banner without image. Its backdrop: an image fixed behind the page, under a light veil. */
.shop-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.shop-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.shop-backdrop::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 84%, transparent); }
.shop-hero {
  position: relative; overflow: hidden; border-radius: 28px; margin: .5rem 0 1rem; min-height: 200px; display: flex; align-items: flex-end;
  background: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .35) 0 54px, transparent 55px), radial-gradient(circle at 88% 28%, rgba(255, 255, 255, .25) 0 36px, transparent 37px),
    radial-gradient(circle at 72% 88%, rgba(255, 255, 255, .2) 0 26px, transparent 27px), linear-gradient(135deg, var(--accent), var(--accent-ink));
}
.shop-hero.has-cover { aspect-ratio: 21 / 9; max-height: 420px; width: 100%; }
.shop-hero.is-small { min-height: 0; aspect-ratio: auto; height: 110px; }
.shop-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 26, 44, .7) 0%, rgba(20, 26, 44, .2) 50%, transparent 80%); }
.shop-hero-text { position: relative; z-index: 1; padding: 1.4rem 1.4rem 1.25rem; color: #fff; }
@media (min-width: 768px) { .shop-hero-text { padding: 2rem 2.25rem 1.75rem; } }
.shop-hero.is-small .shop-hero-text { padding: .9rem 1.25rem; }
.shop-hero-kicker { margin: 0 0 .3rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.shop-hero-title { margin: 0; font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; line-height: 1.05; color: #fff; }
.shop-hero.is-small .shop-hero-title { font-size: 1.25rem; }
.shop-hero-tagline { margin: .5rem 0 0; font-size: 1.1rem; font-weight: 600; max-width: 40rem; }
.shop-intro { margin-bottom: 1.5rem; }

/* The catalogue: 2 products a row on a phone, 3 from a tablet */
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.shop-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; }
.shop-card .shop-qty { cursor: auto; }
/* In the basket: a frame of the accent */
.shop-card.has-qty { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.shop-card-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.shop-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.shop-card-nophoto { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.5rem; color: var(--accent-ink); background: var(--accent-soft); }
.shop-card-more { position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(20, 26, 44, .65); color: #fff; }
.shop-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .7rem .75rem .75rem; }
.shop-card-name { margin: 0 0 .15rem; font-size: 1rem; font-weight: 900; line-height: 1.2; }
.shop-card-name button { padding: 0; border: 0; background: none; color: var(--text-strong); font: inherit; text-align: left; }
.shop-card-name button:hover { color: var(--accent-ink); text-decoration: underline; }
.shop-card-meta { margin: 0 0 .3rem; font-size: .82rem; color: var(--muted); }
.shop-card-foot { margin-top: auto; display: grid; gap: .5rem; }
.shop-card-price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-weight: 900; font-size: 1.1rem; color: var(--text-strong); }
.shop-qty { display: flex; align-items: stretch; gap: .3rem; }
.shop-qty .form-control { flex: 1 1 auto; min-width: 0; padding: .3rem .2rem; text-align: center; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.shop-qty .form-control::-webkit-outer-spin-button, .shop-qty .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-qty.has-qty .form-control { background: var(--accent-soft); border-color: var(--accent); }
.shop-qty-btn {
  flex: 0 0 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; user-select: none;
}
.shop-qty-btn:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }

/* The basket: at the bottom of the screen, above the tab bar of a phone */
.shop-bar {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem); z-index: 20; display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0 0; padding: .6rem .6rem .6rem 1.2rem; border-radius: 999px; background: var(--primary); color: var(--primary-on);
  box-shadow: 0 8px 24px rgba(20, 26, 44, .28), 0 2px 6px rgba(20, 26, 44, .18);
}
@media (min-width: 992px) { .shop-bar { bottom: 1rem; } }
.shop-bar-sum { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.shop-bar-count { font-size: .85rem; font-weight: 700; opacity: .9; }
.shop-bar-total { font-size: 1.2rem; font-weight: 900; }
.shop-bar-btn { flex: 0 0 auto; background: var(--primary-on); color: var(--primary); font-weight: 900; border: 0; }
.shop-bar-btn:hover, .shop-bar-btn:focus-visible { background: var(--primary-on); color: var(--primary); filter: brightness(.94); }
.shop-bar.is-empty .shop-bar-btn { opacity: .7; }

/* The detail of a product (a window) */
.shop-detail-title { font-size: 1.35rem; font-weight: 900; margin: 0 0 .75rem; }
/* Its photos side by side: swiped (scroll-snap), its arrows on a computer, "2/3" */
.shop-gallery { position: relative; margin-bottom: 1rem; }
.shop-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); background: #fff; }
.shop-gallery-track::-webkit-scrollbar { display: none; }
.shop-gallery-track img { flex: 0 0 100%; width: 100%; aspect-ratio: 1; max-height: 60vh; object-fit: contain; scroll-snap-align: center; }
.shop-gallery-nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 0; border-radius: 50%; display: none; place-items: center;
  background: rgba(255, 255, 255, .92); color: #1F2A40; box-shadow: var(--shadow); font-size: 1.2rem;
}
.shop-gallery-nav.is-prev { left: .5rem; } .shop-gallery-nav.is-next { right: .5rem; }
.shop-gallery-nav:disabled { opacity: .35; }
@media (hover: hover) and (pointer: fine) { .shop-gallery-nav { display: grid; } }
.shop-gallery-count { position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(20, 26, 44, .65); color: #fff; }
.shop-ingredients-of { font-weight: 900; text-decoration: underline; text-underline-offset: .15em; }
.shop-detail-price { font-size: 1.3rem; font-weight: 900; margin: 0 0 .5rem; }
.shop-detail-sub { font-size: 1rem; font-weight: 900; margin: 1rem 0 .35rem; }
.shop-detail-ingredients { font-size: .9rem; margin-bottom: .25rem; }

/* The lines of an order: the product, its quantity, its amount */
.shop-lines { display: grid; }
.shop-lines-row { display: grid; grid-template-columns: minmax(0, 1fr) 1.9rem 3.6rem 4.9rem; column-gap: .4rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); }
@media (min-width: 576px) { .shop-lines-row { grid-template-columns: minmax(0, 1fr) 3.5rem 5rem 5.75rem; column-gap: .75rem; } }
.shop-lines-head { padding-top: 0; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.shop-lines-head > :not(:first-child), .shop-line-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-line-product { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.shop-line-name { min-width: 0; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.shop-line-name small { display: flex; flex-wrap: wrap; gap: 0 .55rem; margin-top: .1rem; font-weight: 600; color: var(--muted); }
.shop-lines-total { border-bottom: 0; padding-top: .7rem; font-size: 1.05rem; font-weight: 900; color: var(--text-strong); }
.shop-lines-total strong { font-size: 1.1rem; }
/* A phone: no photo (the name and its facts take the width) */
@media (max-width: 575.98px) { .shop-line-product .shop-item-thumb { display: none; } }

/* The marks of the supplier under the catalogue, then the rights of its pictures */
.shop-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem .5rem; margin: 2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .shop-badges { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.shop-badge { margin: 0; display: grid; justify-items: center; align-content: start; gap: .3rem; text-align: center; }
.shop-badge img { width: 56px; height: 56px; object-fit: contain; }
.shop-badge figcaption { font-size: .68rem; line-height: 1.2; color: var(--muted); }
.shop-badge.is-strong figcaption { font-weight: 800; color: var(--text); text-transform: uppercase; }
.shop-credit { margin: 0 0 1rem; text-align: center; font-size: .75rem; color: var(--muted); }

/* The shops on sale (/boutiques, when there are several) */
.shop-list { display: grid; gap: 1rem; }
@media (min-width: 768px) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-list-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; color: var(--text); text-decoration: none; border-top: 6px solid var(--c); }
.shop-list-card:hover { box-shadow: var(--shadow-hover); color: var(--text); }
.shop-list-card img, .shop-list-nocover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shop-list-nocover { display: grid; place-items: center; font-size: 3rem; background: var(--c-soft); color: var(--c-ink); }
.shop-list-body { display: grid; gap: .25rem; padding: 1rem 1.2rem 1.2rem; }
.shop-list-title { font-size: 1.25rem; font-weight: 900; color: var(--text-strong); }
.shop-list-tagline { color: var(--muted); }
.shop-list-when { font-size: .85rem; font-weight: 700; color: var(--c-ink); }

/* The shops, administration: the products of a campaign (thumb, price and section), the paper order (a number per
   product) */
.shop-item-thumb { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
/* The products of a campaign: by section (as the teams of the school); a product: its photo, its reference and its name, its
   facts, its price in large, its menu (prices, section, out of the sale). The window to add some: a list to tick */
.shop-sale-row { padding: .5rem .5rem .5rem .75rem; gap: .5rem; }
.shop-sale-main { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; }
.shop-sale-main:hover .user-item-name { color: var(--accent-ink); text-decoration: underline; }
.shop-sale-facts { font-size: .82rem; color: var(--muted); }
.shop-sale-facts .bi { color: var(--accent-ink); }
.shop-sale-price { margin-left: auto; font-size: 1.15rem; font-weight: 900; color: var(--text-strong); white-space: nowrap; }
.shop-pick { display: grid; gap: .4rem; }
.shop-pick-row { display: grid; grid-template-columns: auto 48px 1fr; align-items: center; gap: .75rem; padding: .5rem .6rem; margin: 0; border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.shop-pick-row:has(input:checked) { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.shop-pick-name { display: grid; min-width: 0; line-height: 1.25; }
.shop-pick-name small { color: var(--muted); }
.shop-pick-name .bi { color: var(--accent-ink); }
.shop-item-nothumb { display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
/* What a product says of itself, with its icons (as on the paper form) */
.shop-card-meta .bi, .shop-line-name .bi { color: var(--accent-ink); }
.shop-card-price small { font-size: .75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.shop-detail-facts { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.shop-detail-facts li { display: flex; align-items: baseline; gap: .5rem; }
.shop-detail-facts .bi { color: var(--accent-ink); }
.shop-detail-facts span { color: var(--muted); }
/* The figures of a sale: six, three a line on a computer */
@media (min-width: 768px) { .shop-stats { grid-template-columns: repeat(3, 1fr); } .shop-stats.is-4 { grid-template-columns: repeat(4, 1fr); } }
.shop-stats .stat-value { font-size: 1.45rem; white-space: nowrap; }
/* The preparation of an order: its steps in a line joined by a rail, those done in green, the one now in the accent */
.order-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 .5rem; }
.order-step { position: relative; display: grid; justify-items: center; text-align: center; }
.order-step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 4px; background: var(--border); z-index: 0; }
.order-step:first-child::before { display: none; }
.order-step.is-done::before, .order-step.is-now::before { background: var(--anis); }
.order-step .dropdown { display: grid; justify-items: center; }
.order-step-btn { display: grid; justify-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.order-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; box-shadow: inset 0 0 0 2px var(--border); }
.order-step.is-done .order-step-dot { background: var(--anis-soft); color: var(--anis-ink); box-shadow: inset 0 0 0 2px var(--anis); }
.order-step.is-now .order-step-dot { background: var(--primary); color: var(--primary-on); box-shadow: 0 0 0 4px var(--accent-soft); }
.order-step-btn:hover .order-step-dot, .order-step-btn:focus-visible .order-step-dot { box-shadow: inset 0 0 0 2px var(--accent); }
.order-step-label { margin-top: .3rem; font-size: .8rem; font-weight: 700; line-height: 1.15; color: var(--muted); }
.order-step.is-now .order-step-label, .order-step.is-done .order-step-label { color: var(--text-strong); }
.order-way-icon { color: var(--accent-ink); margin-right: .25rem; }
.order-progress-how { margin: .25rem 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
/* The orders shown moved at once to a stage: the stage, the button beside it */
.shop-stages-row { display: flex; gap: .5rem; }
.shop-stages-row .form-select { flex: 1 1 auto; min-width: 0; }
.shop-stages-row .btn { flex: 0 0 auto; }

/* A guest invited to create an account, on the page of its order: the bubble beside the words */
.shop-invite { display: flex !important; gap: 1rem; align-items: flex-start; }

/* The orders of a sale: its person and its amount, its facts each kept whole (a line breaks between them), its email */
.shop-order-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.shop-order-amount { flex: 0 0 auto; white-space: nowrap; font-size: 1.05rem; font-weight: 900; color: var(--text-strong); }
.shop-order-facts { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .85rem; color: var(--muted); }
.shop-order-facts > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-order-email { display: flex; align-items: baseline; gap: .35rem; min-width: 0; font-size: .85rem; color: var(--muted); }
.shop-order-email > span:not(.visually-hidden) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-order-row .user-item-badges .bi { margin-right: .15rem; }
/* A paper order typed in, as the paper form: reference and name, price, quantity, total of the line; the totals */
.shop-paper-section { margin: .75rem 0 .25rem; padding: .3rem .6rem; border-radius: .5rem; background: var(--accent-soft); font-weight: 900; font-size: .85rem; text-transform: uppercase; }
/* A product: on a phone its name and facts on a line, then the quantity and its total; on a computer its photo first */
.shop-paper-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem; align-items: center; gap: .3rem .5rem; padding: .45rem .2rem; border-bottom: 1px solid var(--border); }
.shop-paper-row > .shop-paper-name { grid-column: 1 / -1; }
.shop-paper-thumb { display: none; }
.shop-paper-row .stepper { max-width: none; }
.shop-paper-row .stepper-btn { flex-basis: 40px; min-height: 40px; }
@media (min-width: 768px) {
  .shop-paper-row { grid-template-columns: 48px minmax(0, 1fr) 10rem 5.2rem; column-gap: .75rem; }
  .shop-paper-row > .shop-paper-name { grid-column: auto; }
  .shop-paper-thumb { display: grid; }
}
.shop-paper-row.has-qty { background: var(--accent-soft); }
.shop-paper-name { margin: 0; line-height: 1.25; min-width: 0; }
.shop-paper-name strong { font-weight: 800; color: var(--text-strong); }
.shop-paper-name small { display: flex; flex-wrap: wrap; gap: 0 .55rem; margin-top: .1rem; color: var(--muted); }
.shop-paper-name .bi { color: var(--accent-ink); }
.shop-paper-sum { text-align: right; white-space: nowrap; font-size: .9rem; }
.shop-paper-qty { text-align: center; font-weight: 800; padding: .3rem; }
/* The totals, under their columns: on a phone the boxes under the field of the quantities (in its middle), the amount
   under the amounts; on a computer each in its column */
.shop-paper-total { border-bottom: 0; font-weight: 900; font-size: 1.05rem; }
.shop-paper-total > .shop-paper-name { grid-column: 1; grid-row: 1; justify-self: start; }
.shop-paper-qty-total { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; }
.shop-paper-total > .shop-paper-sum { grid-column: 2; grid-row: 1; }
@media (min-width: 768px) {
  .shop-paper-total > .shop-paper-name { grid-column: 1 / 3; }
  .shop-paper-qty-total { grid-column: 3; }
  .shop-paper-total > .shop-paper-sum { grid-column: 4; }
}
/* Without photos (the meals of a party): the name, the quantity, the total */
@media (min-width: 768px) {
  .shop-paper.is-plain .shop-paper-row { grid-template-columns: minmax(0, 1fr) 10rem 5.2rem; }
  .shop-paper.is-plain .shop-paper-total > .shop-paper-name { grid-column: 1; }
  .shop-paper.is-plain .shop-paper-qty-total { grid-column: 2; }
  .shop-paper.is-plain .shop-paper-total > .shop-paper-sum { grid-column: 3; }
}
.shop-lines.is-plain .shop-lines-row { grid-template-columns: minmax(0, 1fr) 1.9rem 4.9rem; }
@media (min-width: 576px) { .shop-lines.is-plain .shop-lines-row { grid-template-columns: minmax(0, 1fr) 3.5rem 5.75rem; } }

/* A party: its menus in cards (name and price, what it holds, a number per choice), the help offered (a box, what it
   asks once checked: the cake, the hours) */
.fete-menus { display: grid; gap: .75rem; }
@media (min-width: 768px) { .fete-menus { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.fete-menu-card { margin: 0; }
.fete-menu-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.fete-menu-name { margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--text-strong); }
.fete-menu-price { font-size: 1.15rem; font-weight: 900; color: var(--accent-ink); white-space: nowrap; }
.fete-menu-words { margin: .2rem 0 .5rem; color: var(--muted); font-size: .9rem; }
.fete-choice { padding: .5rem 0; border-top: 1px solid var(--border); }
.fete-choice-name { display: block; margin: 0 0 .3rem; font-weight: 800; }
.fete-help + .fete-help { margin-top: .25rem; }
.fete-help-more { margin: 0 0 .75rem 3.1rem; }
.fete-hours { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 22rem; }
/* The menus of the bureau: a list (each opened on its form, its buttons glued under it); a part a row (name, quantity, unit, by choice) */
.fete-part-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.fete-part-choice { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; color: var(--muted); }
@media (min-width: 768px) { .fete-part-row { grid-template-columns: minmax(0, 1fr) 5rem 7rem 8.5rem; } .fete-part-choice { grid-column: auto; } }
.fete-menu-item { margin-bottom: .5rem; }
.fete-menu-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
/* The cakes to confirm: the button on the right */
.fete-volunteer { align-items: center; }
.fete-volunteer form { margin: 0; flex: none; }

/* The order to the supplier: a product, its boxes, those given (a number), those charged; the totals */
.shop-free-row { display: grid; grid-template-columns: minmax(0, 1fr) 3rem 3rem; align-items: center; gap: .3rem .5rem; padding: .45rem .2rem; border-bottom: 1px solid var(--border); }
.shop-free-row > .shop-paper-name { grid-column: 1 / -1; }
.shop-free-row > .stepper, .shop-free-row > .shop-paper-qty { grid-column: 1; grid-row: 2; }
.shop-free-head { font-size: .75rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.shop-free-head > :first-child { grid-column: 1; }
.shop-free-head > :nth-child(3) { display: none; }
.shop-free-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The boxes given left to put: in orange while some are left, in green once all are put */
.shop-free-left { font-weight: 800; }
.shop-free-left.is-todo { color: var(--orange-ink); }
.shop-free-left.is-done { color: var(--anis-ink); }
/* Boxes given on a product: its field in green (given, not charged) */
.shop-free-row.has-free .form-control { background: var(--anis-soft); border-color: var(--anis); color: var(--anis-ink); }
.shop-free-total { border-bottom: 0; font-weight: 900; }
.shop-free-total > :nth-child(3) { display: none; }
@media (min-width: 768px) {
  .shop-free-row { grid-template-columns: minmax(0, 1fr) 4rem 10rem 5rem; column-gap: .75rem; }
  .shop-free-row > .shop-paper-name { grid-column: auto; }
  .shop-free-row > .stepper, .shop-free-row > .shop-paper-qty { grid-column: auto; grid-row: auto; }
  .shop-free-head > :nth-child(3) { display: block; text-align: center; }
  .shop-free-head > :not(:first-child), .shop-free-total > :not(:first-child) { text-align: right; }
  .shop-free-total { grid-template-columns: minmax(0, 1fr) 4rem 10rem 5rem; }
  .shop-free-total > :nth-child(3) { display: block; text-align: center; }
}
/* The boxes of the association: at 0 €, no amounts */
.shop-paper-margin { font-weight: 700; color: var(--anis-ink); }
.shop-paper-margin.is-short { color: var(--danger); }
.shop-paper.is-asso [data-sum], .shop-paper.is-asso [data-total] { visibility: hidden; }
/* Rows added and removed (the ways of handing over of a sale): its fields, its bin */
.shop-repeat-row { padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--border); }
.shop-repeat-row .mb-3 { margin-bottom: .6rem !important; }
@media (min-width: 768px) { .shop-repeat-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0 .75rem; } .shop-repeat-tools { grid-column: 1 / -1; } }

/* The accounting (app/views/admin/compta): the three kinds of lines, the lines of the journal (their amount on the right),
   the months, the synthesis */
.compta-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 768px) { .compta-actions { grid-template-columns: repeat(4, 1fr); } }
.compta-action { display: flex; align-items: center; justify-content: center; gap: .35rem; padding-left: .25rem; padding-right: .25rem; white-space: nowrap; font-size: .95rem; }
.compta-action.is-anis .bi { color: var(--anis-ink); } .compta-action.is-framboise .bi { color: var(--framboise-ink); } .compta-action.is-turquoise .bi { color: var(--turquoise-ink); } .compta-action.is-violet .bi { color: var(--violet-ink); }
@media (max-width: 420px) { .compta-action { font-size: .85rem; } }
.compta-month { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; font-size: 1.05rem; font-weight: 900; color: var(--text-strong); margin: 1.25rem 0 .5rem; }
.compta-month-end { font-size: .85rem; font-weight: 700; color: var(--muted); }
/* "Par année": the five last years, the older ones behind a summary */
.compta-years-more { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.compta-years-more summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--accent-ink); }
/* The label of the statement still empty (a line on the bank): the field shown in orange, saved all the same */
.compta-bank-label .form-control:placeholder-shown { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--surface)); }
/* The lines filtered: what they add up to */
.compta-filter-sum { margin: -.25rem 0 .75rem; font-size: .9rem; color: var(--muted); }
.compta-filter-sum strong { color: var(--text-strong); white-space: nowrap; }
.compta-line .user-item-body { color: inherit; text-decoration: none; }
.compta-amount { flex: none; display: grid; justify-items: end; gap: .1rem; text-align: right; }
.compta-sum { font-weight: 900; white-space: nowrap; }
.compta-account { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.compta-pieces { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem .5rem; font-size: .8rem; font-weight: 700; }
.compta-pieces a { white-space: nowrap; }
.compta-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.compta-facts dt { font-weight: 700; color: var(--muted); }
.compta-facts dd { margin: 0; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.compta-notes { white-space: pre-line; }
/* The type of a line: its coloured dot (the colours of the agenda), then its name */
.compta-type { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--text); }
.compta-facts .ag-dot { display: inline-block; vertical-align: baseline; }
/* A type in the list of the types: the icon of its kind, its dot astride its bottom right */
.compta-type-bubble { position: relative; flex: none; }
.compta-type-pin { position: absolute; right: -.2rem; bottom: -.2rem; width: .95rem; height: .95rem; box-shadow: 0 0 0 2px var(--surface); }
/* Its precisions under the object of a line: one line, cut */
.compta-details { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- Rows dragged to their place (assets/js/drag-sort.js) */
/* Its handle (a finger on it does not scroll the page), the row following the pointer above its list, the room it will
   take in it */
.drag-grip { flex: none; display: inline-flex; align-items: center; align-self: stretch; padding: 0 .15rem; color: var(--muted); cursor: grab; touch-action: none; font-size: 1.15rem; }
.drag-grip:hover { color: var(--accent-ink); }
.user-item > .drag-grip { margin: -.4rem -.35rem -.4rem -.5rem; }
.is-sorting { position: fixed; z-index: 1080; margin: 0; box-shadow: var(--shadow-hover); background: var(--surface); opacity: .95; pointer-events: none; }
body.is-row-sorting, body.is-row-sorting * { cursor: grabbing !important; user-select: none; }
.drag-place { list-style: none; border: 2px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); }

/* ---------------------------------------------------------------- Organisation (lists of tasks) */
/* A task: its round to tick on the left, struck through once done */
.org-task { align-items: flex-start; }
/* Back on the list at a task (added, changed, taken…): seen below the bar of the site, lit up for a moment */
.org-task { scroll-margin-top: 96px; }
.org-task:target { animation: nav-return 2.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .org-task:target { animation: none; outline: 3px solid var(--orange); } }
.org-task-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: -.4rem 0 -.4rem -.4rem;
  padding: 0; border: 0; background: none; border-radius: 50%; font-size: 1.5rem; color: var(--muted); }
button.org-task-check:hover, button.org-task-check:focus-visible { color: var(--accent-ink); background: var(--accent-soft); }
.org-task.is-done .org-task-check { color: var(--anis-ink); }
.org-task.is-done .user-item-name { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.org-task-details { display: block; font-size: .9rem; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
/* A long description: its first lines, then "Voir tout" (a <details>) unfolding the rest, "Réduire" after it folding it */
.org-task-more summary, .org-more-less { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem 0; padding: 0; border: 0; background: none; font-size: .85rem; font-weight: 700; color: var(--accent-ink); cursor: pointer; list-style: none; }
.org-task-more summary::-webkit-details-marker { display: none; }
.org-task-more[open] summary { display: none; }
/* Who does it: a pill per person (their small photo, their name), mine in the colour of the site; greyed once done */
.org-task-who { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .15rem; }
.org-who { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; padding: .1rem .6rem .1rem .15rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.org-who .avatar { width: 22px; height: 22px; font-size: .6rem; box-shadow: none; }
.org-who > .bi { margin-left: .3rem; color: var(--accent-ink); }
.org-who.is-me { background: var(--accent-soft); color: var(--accent-ink); }
.org-task.is-done .org-who { background: none; color: var(--muted); padding-left: 0; }
.org-task.is-done .org-who .avatar { opacity: .6; }
/* A person to tick for a task: their photo instead of the photo of a product */
.org-pick-row { grid-template-columns: auto auto 1fr; }
/* A task dragged (assets/js/drag-sort.js): its handle on the left */
.org-task .drag-grip { align-self: flex-start; height: 2rem; margin: -.1rem 0 0 -.5rem; }
.org-drop-empty { margin: 0; padding: .9rem 1rem; color: var(--muted); }
/* A list in the list of lists: its gauge of the tasks done, under its facts */
.org-item-gauge { display: block; margin: .35rem 0 .1rem; max-width: 22rem; }
.org-item-gauge .progress-soft { --bs-progress-height: .5rem; }