/* ==========================================================================
   English in Action — front-office styles
   Stage identity: night-plum house, red curtain, gold spotlight, warm cream.
   ========================================================================== */

@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/fraunces-latin-wght-normal-cHejlgP.woff2") format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/fraunces-latin-wght-italic-E1uys8D.woff2") format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal-ZHdaFJ8.woff2") format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette — same identity, "premium" finish: deeper night, champagne gold,
       wine curtain, warm coral, ivory cream. */
    --night: #140a1f;
    --plum: #25123a;
    --plum-soft: #3a1d57;
    --curtain: #a62239;
    --curtain-dark: #5c0e21;
    --gold: #e6ae48;
    --gold-light: #f8dea0;
    --gold-deep: #b07a22;
    --gold-soft: #f8e7c0;
    --coral: #e2582f;
    --coral-light: #f27b51;
    --coral-dark: #bd4120;
    --cream: #fbf7f0;
    --sand: #f3ebdf;
    --ink: #1c1423;
    --muted: #625a6a;
    --line: #e8dfd1;
    --white: #ffffff;
    --success: #1f7a4d;
    --error: #b42318;

    /* Finishes */
    --gradient-gold: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 48%, var(--gold-deep) 100%);
    --gradient-gold-line: linear-gradient(90deg, var(--gold-deep), var(--gold-light) 50%, var(--gold));
    --gradient-coral: linear-gradient(135deg, var(--coral-light) 0%, var(--coral) 45%, var(--coral-dark) 100%);
    --hairline-gold: rgb(230 174 72 / 0.28);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius-s: 10px;
    --radius-m: 18px;
    --radius-l: 28px;
    --shadow-s: 0 2px 6px rgb(31 26 36 / 0.06);
    --shadow-m: 0 18px 40px -18px rgb(31 26 36 / 0.25);
    --shadow-glow: 0 24px 70px -24px rgb(230 174 72 / 0.5);

    --container: 1180px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --section-space: clamp(4rem, 9vw, 7.5rem);
    --header-height: 72px;
}

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

[hidden] {
    display: none !important;
}

body.has-open-nav {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

p {
    margin: 0 0 1rem;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: var(--night);
    font-weight: 700;
    border-radius: var(--radius-s);
}

.skip-link:focus {
    top: 1rem;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* --- Buttons ------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 700 1rem/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.button .icon {
    transition: transform 0.2s ease;
}

.button:hover .icon--arrow-right {
    transform: translateX(3px);
}

.button--primary {
    background: var(--gradient-coral);
    color: var(--white);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.28),
        0 14px 30px -12px rgb(226 88 47 / 0.75);
}

.button--primary:hover {
    background: var(--gradient-coral);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.3),
        0 18px 38px -12px rgb(226 88 47 / 0.85);
}

.button--secondary {
    border-color: var(--plum);
    color: var(--plum);
}

.button--secondary:hover {
    background: var(--plum);
    color: var(--white);
}

.button--ghost {
    border-color: rgb(248 222 160 / 0.45);
    color: var(--white);
    background: rgb(255 255 255 / 0.03);
}

.button--ghost:hover {
    border-color: var(--gold-light);
    color: var(--gold-light);
    background: rgb(230 174 72 / 0.08);
}

.button--small {
    min-height: 42px;
    padding: 0.55rem 1.15rem;
    font-size: 0.9375rem;
}

.button--large {
    min-height: 56px;
    padding: 1rem 1.9rem;
    font-size: 1.0625rem;
}

.button--block {
    width: 100%;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    color: var(--white);
    border-bottom: 1px solid var(--hairline-gold);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would become the containing block of the fixed mobile menu and clip it. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(20 10 31 / 0.94), rgb(37 18 58 / 0.9));
    backdrop-filter: saturate(160%) blur(14px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--white);
    text-decoration: none;
}

/* Keep the single compact wordmark centered inside the header at every scroll
   position. Its transparent canvas may overflow the bar without resizing it. */
.site-header .brand {
    align-self: center;
    align-items: center;
    flex-shrink: 0;
    height: var(--header-height);
    padding-top: 0;
}

/* Desktop: the logo moves into the free left margin (up to 9rem), so banners
   shift their content by the same amount. */
:root {
    --logo-shift: 0px;
}

@media (min-width: 961px) {
    :root {
        --logo-shift: clamp(0px, (100vw - var(--container)) / 2 + var(--gutter) - 0.75rem, 9rem);
    }
}

.site-header .brand {
    position: relative;
    translate: calc(-1 * var(--logo-shift)) 0;
}

.brand__logo-compact {
    position: absolute;
    top: 50%;
    left: 0;
    width: auto;
    height: 88px;
    max-width: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.site-header:not(.site-header--compact) .brand:hover .brand__logo-compact {
    transform: translateY(-50%) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .brand__logo-compact {
        transition: none;
    }
}

@media (max-width: 560px) {
    .brand__logo-compact {
        height: 80px;
    }
}

/* Logged-in spaces ("Mon espace", classes, messages): the compact logo stays
   in the bar, no hanging logo over the banner. */
.site-header--compact .brand {
    align-self: center;
    align-items: center;
    height: auto;
    padding-top: 0;
    translate: none;
}

.site-header--compact .brand__logo-compact {
    position: static;
    transform: none;
}

.nav-toggle {
    display: none;
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.08);
    color: var(--white);
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    position: absolute;
    left: 13px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle__bar {
    top: 23px;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: '';
    left: 0;
}

.nav-toggle__bar::before {
    top: -7px;
}

.nav-toggle__bar::after {
    top: 7px;
}

.is-open .nav-toggle__bar {
    background: transparent;
}

.is-open .nav-toggle__bar::before {
    transform: translateY(7px) rotate(45deg);
}

.is-open .nav-toggle__bar::after {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-nav__list {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    position: relative;
    padding-block: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: rgb(255 255 255 / 0.85);
    transition: color 0.2s ease;
}

.site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.site-nav__list a:hover {
    color: var(--white);
}

.site-nav__list a:hover::after {
    transform: scaleX(1);
}

@media (max-width: 960px) {
    .nav-toggle {
        display: block;
    }

    .site-nav {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        padding: 2rem var(--gutter);
        background: var(--night);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .is-open .site-nav {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list a {
        display: block;
        padding: 1rem 0;
        font: 600 1.5rem/1.2 var(--font-display);
        border-bottom: 1px solid rgb(255 255 255 / 0.08);
    }

    .site-nav__list a::after {
        display: none;
    }
}

/* --- Sections & typography helpers --------------------------------------- */

.section {
    padding-block: var(--section-space);
}

.section--tight {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--cream {
    background: var(--cream);
}

.section--night {
    background:
        radial-gradient(60% 50% at 50% 0%, rgb(230 174 72 / 0.12) 0%, transparent 70%),
        radial-gradient(120% 80% at 50% 0%, var(--plum-soft) 0%, var(--night) 65%);
    color: var(--white);
}

.section--plum {
    background:
        radial-gradient(70% 60% at 85% 10%, rgb(230 174 72 / 0.1) 0%, transparent 70%),
        linear-gradient(160deg, var(--plum-soft) 0%, var(--plum) 45%, var(--night) 100%);
    color: var(--white);
}

.section__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__header--center {
    margin-inline: auto;
    text-align: center;
}

.section__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    margin-bottom: 1.25rem;
}

.section__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--curtain);
}

.section--night .section__title em,
.section--plum .section__title em {
    color: var(--gold);
}

.section__title--small {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.section__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--muted);
}

.section--night .section__lead,
.section--plum .section__lead {
    color: rgb(255 255 255 / 0.75);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--curtain);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.eyebrow--light {
    color: var(--gold-light);
}

.eyebrow--light::before {
    background: var(--gradient-gold-line);
}

.empty-state {
    text-align: center;
    color: rgb(255 255 255 / 0.75);
}

.empty-state a {
    color: var(--gold);
}

/* --- Hero: a lit stage ----------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 10vw, 7.5rem) clamp(5rem, 11vw, 8.5rem);
    background:
        radial-gradient(55% 65% at 72% 32%, rgb(230 174 72 / 0.24) 0%, transparent 62%),
        radial-gradient(45% 55% at 12% 85%, rgb(166 34 57 / 0.22) 0%, transparent 70%),
        linear-gradient(180deg, var(--night) 0%, var(--plum) 70%, #2d1545 100%);
    color: var(--white);
}

.hero__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(40px, 7vw, 110px);
    background: repeating-linear-gradient(90deg, var(--curtain-dark) 0 14px, var(--curtain) 14px 30px, var(--curtain-dark) 30px 40px);
    box-shadow: inset -20px 0 40px rgb(0 0 0 / 0.45);
    opacity: 0.9;
}

.hero__curtain--left {
    left: 0;
    border-bottom-right-radius: 60% 18%;
}

.hero__curtain--right {
    right: 0;
    transform: scaleX(-1);
    border-bottom-right-radius: 60% 18%;
}

.hero__spotlight {
    position: absolute;
    top: -20%;
    left: 50%;
    width: min(900px, 120vw);
    height: 140%;
    transform: translateX(-10%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgb(253 231 184 / 0.12) 175deg, rgb(253 231 184 / 0.18) 180deg, rgb(253 231 184 / 0.12) 185deg, transparent 200deg);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-inline: calc(var(--gutter) + clamp(30px, 6vw, 100px));
}

.hero__title {
    font-size: clamp(2.75rem, 7.5vw, 5.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* "English" | "in Action": the title only breaks between the two. */
.hero__line {
    display: inline-block;
    white-space: nowrap;
}

.hero__word {
    display: inline-block;
}

/* "in": a small gold italic link word, sitting on the baseline of "Action". */
.hero__word--in {
    margin-right: 0.12em;
    color: var(--gold-light);
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.hero__word--action {
    color: var(--gold);
}

/* Champagne-gold metallic text; each letter carries the gradient because the
   wave animation transforms letters individually. */
@supports (background-clip: text) {
    .hero__word--action .hero__letter {
        background: var(--gradient-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding-right: 0.02em;
    }
}

/* Wave: each letter rises in turn, like a stage "ola". */
/* Each letter makes a quick hop; 70ms apart, the wave crosses the title in
   ~1.5s, then rests until the next one (3.5s cycle). */
.hero__letter {
    display: inline-block;
    animation: hero-wave 3.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 70ms);
}

@keyframes hero-wave {
    0%, 16%, 100% { transform: translateY(0); }
    8% { transform: translateY(-0.14em); }
}

/* Phones: two lines, "English" then "in Action", filling the width. */
@media (max-width: 600px) {
    .hero__content {
        container-type: inline-size;
    }

    /* 20cqi: each line spans ~75–80% of the text column, whatever the phone. */
    .hero__title {
        font-size: 20cqi;
        line-height: 1;
    }

    .hero__line {
        display: block;
    }
}

.hero__tagline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 1.5rem 0;
    font: 500 clamp(1.15rem, 2.2vw, 1.5rem)/1.3 var(--font-display);
}

.hero__tagline span:nth-child(1) { color: var(--white); }
.hero__tagline span:nth-child(2) { color: var(--gold); }
.hero__tagline span:nth-child(3) { color: #ff8f6b; }
.hero__tagline span:nth-child(4) { color: var(--gold-soft); }

.hero__lead {
    max-width: 560px;
    color: rgb(255 255 255 / 0.8);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    color: rgb(255 255 255 / 0.75);
    font-size: 0.95rem;
    font-weight: 600;
}

.hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero__facts .icon {
    color: var(--gold);
}

.stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 440px;
    margin-inline: auto;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgb(253 231 184 / 0.35) 0%, rgb(243 179 61 / 0.12) 35%, transparent 65%);
}

.stage__floor {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(253 231 184 / 0.4) 0%, transparent 70%);
}

.stage__mask {
    position: absolute;
    inset: 30% 30% 34%;
    display: grid;
    place-items: center;
    color: var(--gold);
    filter: drop-shadow(0 10px 30px rgb(243 179 61 / 0.5));
}

.stage__mask .icon {
    width: 100%;
    height: 100%;
    stroke-width: 1.2;
}

.bubble {
    position: absolute;
    padding: 0.6rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--white), var(--cream));
    color: var(--night);
    font: 700 clamp(0.95rem, 1.6vw, 1.15rem)/1 var(--font-display);
    box-shadow: var(--shadow-m);
    animation: float 6s ease-in-out infinite;
}

.bubble::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
}

.bubble--1 { top: 8%; left: 4%; }
.bubble--2 { top: 18%; right: 0; background: var(--gold); animation-delay: -1.5s; }
.bubble--3 { bottom: 30%; left: -2%; background: var(--coral); color: var(--white); animation-delay: -3s; }
.bubble--4 { bottom: 16%; right: 8%; animation-delay: -4.5s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 860px) {
    .hero__inner {
        /* minmax(0, …): the column never grows to fit a wide child (video, long word). */
        grid-template-columns: minmax(0, 1fr);
        padding-inline: var(--gutter);
    }

    .hero__stage {
        order: -1;
        max-width: 300px;
        width: 100%;
        margin-inline: auto;
    }

    /* The curtains only decorate wide screens: on phones they eat the width. */
    .hero__curtain {
        display: none;
    }
}

/* --- Method pillars -------------------------------------------------------- */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pillar {
    position: relative;
    padding: 2rem 1.75rem;
    border-radius: var(--radius-m);
    background: var(--white);
    box-shadow: var(--shadow-s);
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.pillar__number {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--gold);
    font: 700 0.9rem/1 var(--font-body);
    letter-spacing: 0.12em;
}

.pillar__title {
    margin-bottom: 0.75rem;
    font-size: 2rem;
    color: var(--plum);
}

.pillar__title small {
    display: block;
    margin-top: 0.35rem;
    color: var(--curtain);
    font: 700 0.8rem/1 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pillar p {
    margin: 0;
    color: var(--muted);
}

/* --- Benefits -------------------------------------------------------------- */

.benefits {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.benefits__intro {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit {
    padding: 1.75rem;
    border-radius: var(--radius-m);
    background: var(--cream);
}

.benefit__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: 16px;
    background: var(--plum);
    color: var(--gold);
}

.benefit:nth-child(3n + 2) .benefit__icon {
    background: var(--curtain);
    color: var(--white);
}

.benefit:nth-child(3n) .benefit__icon {
    background: var(--gold);
    color: var(--night);
}

.benefit__title {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.benefit p {
    margin: 0;
    color: var(--muted);
}

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

    .benefits__intro {
        position: static;
    }
}

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

/* --- Offers -------------------------------------------------------------- */

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-card {
    --accent: var(--gold);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem;
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
    border: 1px solid var(--hairline-gold);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.offer-card--1 { --accent: #ff8f6b; }
.offer-card--2 { --accent: var(--gold-soft); }

.offer-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 50px -28px rgb(230 174 72 / 0.45);
}

.offer-card__head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.offer-card__audience {
    margin-bottom: 0.5rem;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.offer-card__title {
    font-size: 1.65rem;
}

.offer-card__text {
    margin: 0;
    color: rgb(255 255 255 / 0.78);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.1);
    font-size: 0.85rem;
    font-weight: 600;
}

.offer-card__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
}

.offer-card__facts dt {
    color: rgb(255 255 255 / 0.55);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offer-card__facts dd {
    margin: 0.2rem 0 0;
    font-weight: 600;
}

/* Trial course (every offer), then one part per format with prices chosen
   for the offer: "À partir de 18,00 € le cours" and the pack sizes. */
.offer-card__pricing {
    display: grid;
    gap: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(255 255 255 / 0.15);
}

.offer-card__trial {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--gold-light);
    font-weight: 700;
}

.offer-formats {
    display: grid;
    gap: 0.75rem;
}

.offer-format {
    --format-accent: var(--gold);
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-m);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-left: 3px solid var(--format-accent);
    background: rgb(255 255 255 / 0.04);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.offer-format--individual {
    --format-accent: var(--coral-light);
}

.offer-card:hover .offer-format {
    background: rgb(255 255 255 / 0.07);
}

.offer-format__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offer-format__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--format-accent) 18%, transparent);
    color: var(--format-accent);
}

.offer-format__name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.offer-format__hint {
    margin: 0.1rem 0 0;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.85rem;
}

.offer-format__duration {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    color: rgb(255 255 255 / 0.8);
    font-size: 0.85rem;
    font-weight: 600;
}

.offer-format__duration svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

.offer-card__price {
    margin: 0;
    color: rgb(255 255 255 / 0.8);
}

.offer-card__price--on-request {
    color: rgb(255 255 255 / 0.65);
    font-style: italic;
}

.offer-card__price strong {
    color: var(--gold-light);
    font-size: 1.35rem;
}

.offer-format--individual .offer-card__price--on-request {
    color: rgb(255 255 255 / 0.65);
    font-style: italic;
}

.offer-card__price strong {
    color: #ffc3a8;
}

.offer-card__packs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
}

.offer-card__packs-label {
    margin-right: 0.15rem;
    color: rgb(255 255 255 / 0.55);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.offer-card__pack {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--format-accent) 45%, transparent);
    color: rgb(255 255 255 / 0.85);
    font-weight: 600;
}

.offer-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.offer-card__link:hover .icon {
    transform: translateX(4px);
}

.offer-card__link .icon {
    transition: transform 0.2s ease;
}

/* --- Video --------------------------------------------------------------- */

.video {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.video__frame {
    padding: 14px;
    border-radius: var(--radius-l);
    background: linear-gradient(135deg, var(--curtain), var(--curtain-dark));
    box-shadow: var(--shadow-m);
}

.video__screen {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-l) - 10px);
    background: radial-gradient(circle at 50% 40%, var(--plum-soft) 0%, var(--night) 70%);
    color: var(--white);
    text-align: center;
}

.video__play {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--night);
    box-shadow: var(--shadow-glow);
}

.video__play .icon {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    fill: currentColor;
}

.video__soon {
    margin: 0;
    padding-inline: 1rem;
    color: rgb(255 255 255 / 0.75);
    font-weight: 600;
}

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

/* --- Course timeline ------------------------------------------------------- */

/* Header and objectives side by side, then the steps: the whole plan fits in
   about one screen. */
.course-plan__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 1.5rem clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.course-plan__intro--single {
    grid-template-columns: minmax(0, 720px);
}

.course-plan__header .section__title {
    margin-bottom: 0.9rem;
}

.course-plan__lead {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 1.05rem;
}

/* Texts cut only once JS can unfold them (timeline_controller). */
.course-plan.is-clamped .course-plan__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.timeline {
    --timeline-columns: 5;
    display: grid;
    grid-template-columns: repeat(var(--timeline-columns), minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline__step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-radius: var(--radius-m);
    background: var(--cream);
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.timeline__step:hover {
    border-color: var(--hairline-gold);
    background: var(--white);
}

.timeline__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.timeline__number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--plum);
    color: var(--gold);
    font: 700 0.95rem/1 var(--font-display);
}

.timeline__duration {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgb(166 34 57 / 0.08);
    color: var(--curtain);
    font-size: 0.8rem;
    font-weight: 800;
}

.timeline__title {
    margin: 0;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.25;
}

.timeline__text {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.course-plan.is-clamped .timeline__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.timeline__toggle {
    display: block;
    margin: 1rem auto 0;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--plum);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.timeline__toggle:hover {
    border-color: var(--gold);
}

.timeline__toggle[hidden] {
    display: none;
}

@media (max-width: 1060px) {
    .timeline {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .course-plan__intro {
        grid-template-columns: 1fr;
    }
}

/* --- Testimonials -------------------------------------------------------- */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.testimonial figure {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 2rem;
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.03));
    border: 1px solid var(--hairline-gold);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.testimonial__mark {
    height: 2.5rem;
    color: var(--gold);
    font: 700 5rem/1 var(--font-display);
}

.testimonial__quote {
    flex: 1;
    margin: 0 0 1.5rem;
    font: 400 1.2rem/1.5 var(--font-display);
    font-style: italic;
}

.testimonial__quote p {
    margin: 0;
}

.testimonial__author strong {
    display: block;
}

.testimonial__author span {
    color: rgb(255 255 255 / 0.6);
    font-size: 0.9rem;
}

/* --- FAQ ----------------------------------------------------------------- */

.faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.faq__intro a {
    color: var(--curtain);
    font-weight: 700;
}

.faq__list {
    display: grid;
    gap: 0.75rem;
}

.faq__item {
    border-radius: var(--radius-m);
    background: var(--white);
    border: 1px solid var(--line);
    transition: box-shadow 0.2s ease;
}

.faq__item[open] {
    box-shadow: var(--shadow-m);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question .icon {
    color: var(--curtain);
    transition: transform 0.25s ease;
}

.faq__item[open] .faq__question .icon {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--muted);
}

.faq__answer p {
    margin: 0;
}

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

/* --- Final call to action ------------------------------------------------ */

.cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 10vw, 8rem);
    background:
        radial-gradient(80% 120% at 100% 100%, rgb(242 123 81 / 0.55) 0%, transparent 60%),
        linear-gradient(135deg, #3d0816 0%, var(--curtain-dark) 30%, var(--curtain) 70%, var(--coral) 100%);
    color: var(--white);
    text-align: center;
}

.cta__spotlight {
    position: absolute;
    inset: -40% 20% auto;
    height: 160%;
    background: radial-gradient(ellipse at top, rgb(248 222 160 / 0.38), transparent 60%);
}

.cta__inner {
    position: relative;
    max-width: 760px;
}

.cta__title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 700;
}

.cta__lead {
    margin-bottom: 2rem;
    color: rgb(255 255 255 / 0.88);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.cta .button--primary {
    background: var(--night);
    box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5);
}

.cta .button--primary:hover {
    background: var(--plum);
}

/* --- Contact & forms ----------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.contact__points {
    display: grid;
    gap: 0.75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.contact__points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact__points .icon {
    padding: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--plum);
}

.contact__card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radius-l);
    background: var(--cream);
}

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

.form {
    display: grid;
    gap: 1.25rem;
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Teacher application: one weekly availability per row (day, start time, remove). */
.availability-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
    margin-bottom: 1rem;
}

.availability-row__remove {
    margin-bottom: 0.25rem;
}

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

/* Start times: wide enough for "18:00" and the browser's clock button. */
input[type='time'] {
    min-width: 7.25rem;
    padding-inline: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A weekly availability stays on one row on a phone too: day, start time, remove. */
@media (max-width: 600px) {
    .availability-row {
        grid-template-columns: minmax(0, 1fr) 7.25rem auto;
        gap: 0.5rem;
    }
}

.field {
    display: grid;
    align-content: start; /* a taller neighbour in .form__grid must not stretch the input */
    gap: 0.4rem;
}

.field--wide {
    grid-column: 1 / -1;
}

.field label {
    font-weight: 700;
    font-size: 0.95rem;
}

/* Registration forms (family, student, teacher): a "*" after the label of a required field. */
.registration__form label.required::after,
.form__required-mark {
    color: var(--coral-dark);
    font-weight: 700;
}

.registration__form label.required::after {
    content: ' *';
}

/* Not on each option of a choice (Oui / Non, levels…): on its question only; a single checkbox (privacy policy) keeps it. */
.registration__form :is(input[type='radio'], input[type='checkbox']) + label.required::after {
    content: none;
}

.registration__form .field--checkbox > input[type='checkbox'] + label.required::after {
    content: ' *';
}

.form__required-note {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.field__optional {
    color: var(--muted);
    font-weight: 500;
}

.field input:not([type='checkbox']),
.field select,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
    resize: vertical;
}

.contact__frame {
    display: block;
}

/* Password input with its "eye" button (front/_password_toggle.html.twig). */
.password {
    position: relative;
}

.field .password input {
    padding-right: 3.25rem;
}

.password__toggle {
    position: absolute;
    inset: 0 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.password__toggle:hover,
.password__toggle:focus-visible {
    color: var(--plum);
}

.password__toggle:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: -4px;
}

.password__toggle .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.password__toggle[aria-pressed='false'] .icon--eye-off,
.password__toggle[aria-pressed='true'] .icon--eye {
    display: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--plum);
    box-shadow: 0 0 0 4px rgb(61 31 90 / 0.15);
}

.field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem;
}

.field--checkbox input {
    width: 22px;
    height: 22px;
    margin: 0.15rem 0 0;
    accent-color: var(--coral);
}

.field--checkbox label {
    font-weight: 500;
}

.field--checkbox .field__errors {
    grid-column: 1 / -1;
}

.field__help {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.field--error input:not([type='checkbox']),
.field--error select,
.field--error textarea {
    border-color: var(--error);
}

.field__errors {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--error);
    font-size: 0.9rem;
    font-weight: 600;
}

.alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-s);
    font-weight: 600;
}

.alert--success {
    background: #e3f4ea;
    color: var(--success);
}

.alert--error {
    background: #fdecea;
    color: var(--error);
}

.alert--info {
    display: block;
    background: var(--gold-soft);
    color: var(--plum);
    font-weight: 500;
}

/* --- Inner pages ----------------------------------------------------------- */

.page-hero {
    padding-block: clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(50% 80% at 80% 0%, rgb(243 179 61 / 0.2) 0%, transparent 60%),
        linear-gradient(180deg, var(--night) 0%, var(--plum) 100%);
    color: var(--white);
}

.page-hero__title {
    max-width: 820px;
    margin-bottom: 0.6rem;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
}

/* Compact banner (login, registration, legal pages, personal spaces): the
   content of the page matters more than its title. */
.page-hero--compact {
    padding-block: clamp(1.1rem, 2.5vw, 1.75rem);
}

.page-hero--compact .page-hero__title {
    margin-bottom: 0.15rem;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.15;
}

.page-hero--compact .page-hero__lead {
    font-size: 0.95rem;
}

.page-hero--compact .eyebrow {
    margin-bottom: 0.35rem;
}

/* The header logo hangs over every banner: its content starts beside it. */
.page-hero > .container {
    --logo-width: 128px;
    padding-left: max(var(--gutter), calc(var(--logo-width) + 2rem - var(--logo-shift)));
    min-height: 64px;
}

/* Phones: multi-line banners use the full width below the logo; the one-line
   banners of the personal spaces stay beside it. */
@media (max-width: 560px) {
    .page-hero > .container {
        min-height: 0;
        padding-top: 1.75rem;
        padding-left: var(--gutter);
    }

    .page-hero .page-hero__lead {
        font-size: 1rem;
    }

    .page-hero > .container.space-hero__inner {
        --logo-width: 96px;
        min-height: 40px;
        padding-top: 0;
        padding-left: calc(var(--logo-width) + 0.75rem);
    }
}

.page-hero__lead {
    max-width: 680px;
    margin: 0;
    color: rgb(255 255 255 / 0.8);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.9rem;
}

.breadcrumb a {
    color: rgb(255 255 255 / 0.85);
}

/* Offer page: the prices of the offer, one card per course price. */
/* Offer page, "Tarifs": the trial course, then one part per format (collective,
   individual), each with its course prices and their packs. */
.offer-pricing__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    gap: 1.5rem 2.5rem;
    align-items: end;
}

.offer-pricing__lead {
    max-width: 640px;
    margin: 0.5rem 0 0;
    color: var(--muted);
}

.offer-pricing__formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.offer-pricing__format {
    align-content: start;
    gap: 1.1rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--format-accent);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: 0 18px 40px -32px rgb(37 18 58 / 0.45);
}

.offer-pricing__format .offer-format__hint,
.offer-pricing__format .offer-format__duration {
    color: var(--muted);
}

.offer-pricing__format .offer-format__name {
    font-size: 1.2rem;
}

.offer-pricing__format.offer-format--group {
    --format-accent: var(--gold-deep);
}

.offer-pricing__format.offer-format--individual {
    --format-accent: var(--coral);
}

.offer-pricing__on-request {
    margin: 0;
    color: var(--muted);
}

.offer-prices {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-price {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--cream);
}

.offer-price p {
    margin: 0;
}

.offer-price--trial {
    padding: 1.25rem 1.5rem;
    border-color: var(--gold);
    border-radius: var(--radius-l);
    background: var(--gold-soft);
}

.offer-price__kind {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.offer-price--trial .offer-price__kind .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--gold-deep);
}

.offer-price__ages {
    color: var(--muted);
    font-size: 0.9rem;
}

.offer-price__unit strong {
    color: var(--coral-dark);
    font-size: 1.6rem;
}

.offer-format--individual .offer-price__unit strong {
    color: var(--coral);
}

.offer-price__packs {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.offer-price__packs tr + tr {
    border-top: 1px dashed var(--line);
}

.offer-price__packs th,
.offer-price__packs td {
    padding: 0.55rem 0;
    text-align: left;
    vertical-align: baseline;
}

.offer-price__packs th {
    font-weight: 600;
}

.offer-price__packs .offer-price__validity {
    padding-inline: 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.offer-price__packs .offer-price__total {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.offer-pricing__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 1.75rem;
}

.offer-prices__note {
    flex: 1 1 24rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .offer-pricing__intro {
        grid-template-columns: 1fr;
    }
}

.offer-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.prose {
    font-size: 1.125rem;
}

.offer-detail__aside {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    display: grid;
    gap: 0.75rem;
    padding: 2rem;
    border-radius: var(--radius-l);
    background: var(--cream);
}

.facts {
    display: grid;
    gap: 1rem;
    margin: 0 0 1rem;
}

.facts dt {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.facts dd {
    margin: 0.15rem 0 0;
    font-weight: 600;
}

.link-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.link-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-m);
    background: var(--white);
    text-decoration: none;
    border: 1px solid var(--line);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
}

.link-card span {
    grid-column: 1;
    color: var(--muted);
}

.link-card .icon {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--curtain);
}

@media (max-width: 860px) {
    .offer-detail {
        grid-template-columns: 1fr;
    }

    .offer-detail__aside {
        position: static;
    }
}

/* --- Registration -------------------------------------------------------- */

.registration {
    max-width: 860px;
}

.registration__form {
    gap: 2rem;
}

.step {
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: var(--shadow-s);
}

.step__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    margin-bottom: 1.5rem;
    font: 600 1.5rem/1.2 var(--font-display);
}

.step__number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--plum);
    color: var(--gold);
    font-size: 1.05rem;
}

.step__hint {
    color: var(--muted);
}

/* Registration: other times, when no slot of the list suits. */
.other-availabilities__advice {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--gold);
    border-radius: 0.4rem;
    background: var(--gold-soft);
    color: var(--ink);
    font-size: 0.9rem;
}

.other-availabilities__box summary {
    color: var(--coral-dark);
    font-weight: 600;
    cursor: pointer;
}

.other-availabilities__rows {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

/* Day (the rest of the row), start time (fixed: "18:00" never wraps), remove. */
.other-availabilities__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.25rem 1.75rem;
    gap: 0.4rem;
    align-items: center;
}

.other-availabilities__row select,
.other-availabilities__row input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding-block: 0;
    padding-inline: 0.75rem;
}

.other-availabilities__remove {
    width: 1.75rem;
    padding: 0;
    height: 2.75rem;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.slot {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 0.75rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.slot input {
    grid-row: span 2;
    width: 22px;
    height: 22px;
    accent-color: var(--coral);
}

.slot span {
    color: var(--muted);
    font-size: 0.95rem;
}

.slot:has(input:checked) {
    border-color: var(--coral);
    background: #fff4ef;
}

.registration__success {
    padding: clamp(2rem, 5vw, 3rem);
    border-radius: var(--radius-l);
    background: var(--cream);
    text-align: center;
}

.registration__success-icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--success);
    color: var(--white);
}

.registration__success-icon .icon {
    width: 34px;
    height: 34px;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    background: linear-gradient(180deg, var(--night), #0d0615);
    border-top: 1px solid var(--hairline-gold);
    color: rgb(255 255 255 / 0.75);
}

.site-footer__legal {
    padding-block: 1.5rem;
    font-size: 0.875rem;
}

.site-footer__legal p {
    margin: 0;
}

/* --- Reveal on scroll ---------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* --- Narrow single-form pages (password…) --------------------------------- */

.narrow {
    max-width: 560px;
}

/* --- Phase 4: content-driven sections, legal pages ------------------------ */

.video__screen {
    position: relative;
    overflow: hidden;
}

.video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.video__play {
    position: relative;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.video__play:hover {
    transform: scale(1.06);
}

.video__notice {
    position: relative;
    margin: 0;
    padding-inline: 1rem;
    color: rgb(255 255 255 / 0.7);
    font-size: 0.85rem;
}

.video__player {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.tag-list--dark .tag {
    background: var(--sand);
    color: var(--plum);
}

.objectives {
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius-m);
    border: 1px solid var(--hairline-gold);
    background: var(--cream);
}

.objectives__title {
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.objectives ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.objectives li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.objectives li .icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    color: var(--gold-deep);
}

.faq__category {
    margin: 1.25rem 0 0.25rem;
    color: var(--curtain);
    font: 800 0.8rem/1.2 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.faq__category:first-child {
    margin-top: 0;
}

.faq__answer {
    white-space: normal;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.testimonial__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-footer__legal-links {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal-links a {
    text-decoration: none;
}

.site-footer__legal-links a:hover {
    color: var(--gold);
}

.legal {
    max-width: 820px;
}

.legal h2 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.5rem;
}

.legal ul {
    padding-left: 1.25rem;
}

.legal li {
    margin-bottom: 0.4rem;
}

.legal a,
.field--checkbox label a {
    color: var(--curtain);
}

/* --- Hero presentation video ------------------------------------------------ */
/* The frame follows the video's own ratio (--video-ratio, e.g. 9 / 16), so the
   picture fills it without black bars. Vertical videos become a tall column at
   the top of the hero; landscape ones get a wider column. */

.hero__inner--video-portrait,
.hero__inner--video-landscape {
    align-items: start;
}

.hero__inner--video-landscape {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

/* With a video the hero gets a wider container; a vertical video's column
   takes the video's own width (set by its height), the text the rest. */
.hero__inner--video-portrait,
.hero__inner--video-landscape {
    max-width: calc(var(--container) + 140px);
}

.hero__inner--video-portrait {
    grid-template-columns: minmax(0, 1fr) auto;
}

.hero__stage--video {
    align-self: start;
    width: 100%;
}

.stage--video {
    display: flex;
    justify-content: center;
    aspect-ratio: auto;
    max-width: none;
    padding: 2.25rem 0.75rem;
    border-radius: 0;
    background: radial-gradient(55% 65% at 50% 50%, rgb(253 231 184 / 0.28) 0%, transparent 70%);
}

.hero-video {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: var(--radius-l);
    background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold-deep) 18%, var(--curtain) 55%, var(--curtain-dark) 100%);
    box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.65), var(--shadow-glow);
}

.hero__stage--landscape .hero-video {
    width: 100%;
}

/* Tall but never taller than the screen. */
.hero__stage--portrait .hero-video {
    height: min(82vh, 780px);
}

.hero-video .video__screen {
    aspect-ratio: var(--video-ratio, 16 / 9);
    border-radius: calc(var(--radius-l) - 8px);
}

.hero__stage--portrait .hero-video .video__screen {
    height: 100%;
    width: auto;
}

.video__poster--frame {
    opacity: 0.85;
}

.stage--video .bubble {
    z-index: 2;
}

.stage--video .bubble--1 { top: 0.5rem; left: 4%; }
.stage--video .bubble--2 { top: 3.5rem; right: 0; }
.stage--video .bubble--3 { bottom: 4rem; left: 0; }
.stage--video .bubble--4 { bottom: 0.5rem; right: 6%; }

@media (max-width: 860px) {
    .hero__inner--video-landscape,
    .hero__inner--video-portrait {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__stage--video {
        order: 0;
        max-width: none;
    }

    /* On phones a vertical video is sized by the width (centred), its height
       following its own ratio, instead of a fixed height forcing the width. */
    .stage--video {
        padding-inline: 0;
    }

    .hero__stage--portrait .hero-video {
        width: 100%;
        height: auto;
    }

    .hero__stage--portrait .hero-video .video__screen {
        width: 100%;
        height: auto;
    }
}

/* --- Cookie banner ------------------------------------------------------------ */
/* Bottom of the screen until the visitor accepts the cookies the site needs. */

.cookie-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    pointer-events: none;
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    max-width: 960px;
    margin-inline: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-m);
    background: var(--night);
    color: rgb(255 255 255 / 0.85);
    box-shadow: 0 20px 50px -15px rgb(0 0 0 / 0.6);
    font-size: 0.875rem;
    line-height: 1.5;
    pointer-events: auto;
}

.cookie-banner__title {
    margin: 0 0 0.25rem;
    color: var(--gold);
    font-size: 1rem;
}

.cookie-banner__text p {
    margin: 0;
}

.cookie-banner__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-banner__more {
    color: rgb(255 255 255 / 0.75);
    font-size: 0.8125rem;
}

@media (max-width: 640px) {
    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* --- Login & personal spaces ---------------------------------------------- */

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav__login {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav__login:hover {
    color: var(--gold-light);
}

@media (max-width: 960px) {
    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .site-nav__actions .button {
        justify-content: center;
    }

    .site-nav__login {
        padding: 0.9rem 1rem;
        border: 1px solid rgb(248 222 160 / 0.45);
        border-radius: 999px;
        text-align: center;
    }
}

.login-help {
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Logged-in spaces: a slim banner (back link, title, one line of text) with
   its actions on the right; no room kept for the hanging logo. */
.page-hero.space-hero {
    padding-block: clamp(0.85rem, 2vw, 1.25rem);
}

.page-hero.space-hero > .container.space-hero__inner {
    min-height: 0;
    padding-top: 0;
    padding-left: var(--gutter);
}

.space-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
}

.space-hero .page-hero__title {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.space-hero .page-hero__lead {
    margin-top: 0.15rem;
    font-size: 0.92rem;
}

.space-hero .space-back {
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
}

.space-body {
    padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 600px) {
    .space-hero .page-hero__lead {
        display: none;
    }

    /* Title on one line, actions below it, side by side. */
    .space-hero__inner > div:first-child {
        flex: 1 1 100%;
    }

    .space-hero .space-hero__actions {
        flex: 1 1 100%;
        gap: 0.5rem;
    }

    .space-hero .space-hero__actions .button {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.space-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--gold-light);
    font-weight: 600;
    text-decoration: none;
}

.space-back:hover {
    text-decoration: underline;
}

.space-card {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--white);
    box-shadow: var(--shadow-s);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.space-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.space-no-course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.space-balance {
    margin-top: 0;
}

.space-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.space-card__title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.space-card__subtitle {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.05rem;
}

.space-section-title {
    margin: 2.5rem 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.space-muted {
    margin: 0;
    color: var(--muted);
}

/* Between the groups of a student (up to three). */
.space-separator {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.space-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0.75rem;
    margin: 0;
}

.space-facts div {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-s);
    background: var(--sand);
}

.space-facts dt {
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.space-facts dd {
    margin: 0;
    font-weight: 600;
}

/* Phones: group and session side by side, the teacher below on the whole width. */
@media (max-width: 600px) {
    .space-facts {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .space-facts div {
        padding: 0.6rem 0.75rem;
    }

    .space-facts div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .space-facts dd {
        font-size: 0.95rem;
    }
}

.space-courses {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.1rem;
}

.space-purchases {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.space-purchases li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.space-purchases__link {
    font-weight: 600;
}

.space-teacher {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.space-teacher__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* The teacher's card: name (and photo), then "Écrire" on its own line. */
.space-teacher-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.space-fact-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--plum);
    border-radius: 999px;
    color: var(--plum);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.space-fact-action:hover,
.space-fact-action:focus-visible {
    background: var(--plum);
    color: var(--white);
}

.space-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.space-access {
    margin-top: 1.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--line);
}

.space-access__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
}

.space-access__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.space-access__form .field {
    flex: 1 1 260px;
    margin: 0;
}

.space-access__details {
    margin-top: 1rem;
}

.space-access__details > summary {
    width: fit-content;
    color: var(--plum);
    font-weight: 600;
    cursor: pointer;
}

.button--ghost-dark {
    border-color: var(--plum);
    color: var(--plum);
    background: transparent;
}

.button--ghost-dark:hover {
    background: var(--plum);
    color: var(--white);
}

.space-link-danger {
    padding: 0;
    border: 0;
    background: none;
    color: var(--error);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.space-link-danger:hover {
    text-decoration: underline;
}

.space-danger {
    margin-top: 2rem;
    border-color: color-mix(in srgb, var(--error) 35%, transparent);
}

.space-course-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.space-course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-s);
    background: var(--white);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.space-course:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
}

.space-course__title {
    font: 600 1.15rem/1.3 var(--font-display);
}

.space-course__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.space-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--plum);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
}

.space-badge--gold {
    background: var(--gold-soft);
    color: var(--gold-deep);
}

/* Course HTML written in CKEditor or generated by the AI: comfortable to
   read (line length, spacing), titles marked, tables framed. */
.rich-text {
    overflow-wrap: break-word;
    font-size: 1.05rem;
    line-height: 1.75;
}

.rich-text p,
.rich-text ul,
.rich-text ol,
.rich-text blockquote {
    max-width: 72ch;
}

.rich-text p { margin: 0 0 1rem; }
.rich-text h2 {
    margin: 2.25rem 0 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--gold-soft);
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    line-height: 1.25;
}
.rich-text h3 { margin: 1.75rem 0 0.6rem; color: var(--plum); font-size: 1.2rem; line-height: 1.3; }
.rich-text h4 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
.rich-text > :first-child { margin-top: 0; }
.rich-text ul,
.rich-text ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.rich-text li + li { margin-top: 0.35rem; }
.rich-text li::marker { color: var(--gold-deep); }
.rich-text blockquote { margin: 1.25rem 0; padding: 0.85rem 1.25rem; border-left: 4px solid var(--gold); background: var(--sand); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.rich-text mark { padding: 0 0.2em; border-radius: 3px; background: var(--gold-soft); }
.rich-text hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }
.rich-text figure { margin: 1.25rem 0; }
.rich-text [id] { scroll-margin-top: calc(var(--header-height) + 1.25rem); }

/* Tables: in a frame that scrolls sideways on a phone (CourseReading). */
.rich-table {
    max-width: 100%;
    margin: 1.25rem 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background:
        linear-gradient(90deg, var(--white) 30%, transparent) left / 2rem 100% no-repeat local,
        linear-gradient(270deg, var(--white) 30%, transparent) right / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgb(37 18 58 / 0.18), transparent) left / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgb(37 18 58 / 0.18), transparent) right / 0.75rem 100% no-repeat scroll;
}

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

.rich-text table {
    width: 100%;
    min-width: 32rem;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rich-text th,
.rich-text td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}

.rich-text th + th,
.rich-text td + td {
    border-left: 1px solid var(--line);
}

.rich-text th {
    background: var(--plum);
    color: var(--white);
    font-weight: 700;
}

.rich-text tr:nth-child(even) td {
    background: var(--cream);
}

.rich-text tr:last-child td {
    border-bottom: 0;
}

/* Course page: the outline beside the course on large screens. */
.course-page {
    display: grid;
    gap: 1.25rem;
}

.course-page__main {
    min-width: 0;
}

.course-section {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.course-section__title {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
}

.course-toc__box {
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.course-toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: var(--plum);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.course-toc__title::-webkit-details-marker {
    display: none;
}

.course-toc__title::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.course-toc__box[open] .course-toc__title::after {
    transform: rotate(-135deg);
}

.course-toc nav {
    padding: 0 0.5rem 0.75rem;
}

.course-toc__list,
.course-toc__list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-toc__list a {
    display: block;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.course-toc__list ol a {
    padding-left: 1.2rem;
    color: var(--muted);
    font-weight: 500;
}

.course-toc__list .course-toc__item--3 a {
    padding-left: 2rem;
    font-size: 0.85rem;
}

.course-toc__list a:hover,
.course-toc__list a:focus-visible {
    background: var(--cream);
    color: var(--ink);
}

.course-toc__list a[aria-current='true'] {
    border-left-color: var(--gold);
    background: var(--gold-soft);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .course-page {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 2rem;
        align-items: start;
    }

    .course-toc {
        position: sticky;
        top: calc(var(--header-height) + 1rem);
        order: 2;
        max-height: calc(100vh - var(--header-height) - 2rem);
        overflow-y: auto;
    }

    /* Always open on large screens: the title is a plain heading. */
    .course-toc__title {
        cursor: default;
    }

    .course-toc__title::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .rich-text {
        font-size: 1rem;
    }

    .rich-text table {
        font-size: 0.88rem;
    }

    .rich-text th,
    .rich-text td {
        padding: 0.5rem 0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-toc__title::after {
        transition: none;
    }
}

/* --- Registration: who is registering ------------------------------------ */

.who__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.75rem;
}

.who__choice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.who__choice:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgb(230 174 72 / 0.25);
}

.who__choice input {
    margin-top: 0.25rem;
    accent-color: var(--coral);
}

.who__choice strong {
    display: block;
    margin-bottom: 0.2rem;
}

.who__hint {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
}

/* --- Family space: formula of "Acheter des cours" (trial course or packs) - */

/* Radios keep their native size: .field input styles text inputs. */
.formula input[type='radio'] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    flex: none;
    accent-color: var(--coral);
}

.formula__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.formula__choice {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formula__choice:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgb(230 174 72 / 0.25);
}

.formula__choice strong {
    font-weight: 700;
}

.formula__choice-hint {
    margin-left: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.formula > .field + .field,
.formula > .field + .form__grid {
    margin-top: 1.25rem;
}

.field__label {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
}

.formula__options {
    display: grid;
    gap: 0.5rem;
}

.formula__option {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}

.formula__single {
    margin: 0;
}

/* Packs: the format (collective or individual), then the packs of that format. */
.formula__formats ~ .formula__packs,
.formula__single + .formula__packs {
    margin-top: 1.25rem;
}

/* The packs of a course type as cards: one choice, or none. */
.formula__packs {
    display: grid;
    gap: 1.25rem;
}

.pack-options {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.pack-options legend {
    margin-bottom: 0.5rem;
    padding: 0;
}

.pack-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pack-option:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgb(230 174 72 / 0.25);
}

.pack-option input[type='radio'] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    flex: none;
    accent-color: var(--coral);
}

.pack-option__main {
    display: grid;
    flex: 1;
    gap: 0.1rem;
    min-width: 0;
}

.pack-option__title {
    font-weight: 700;
}

.pack-option__meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.pack-option__price {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.pack-options__kind {
    display: grid;
    gap: 0.5rem;
}

.pack-options__kind + .pack-options__kind {
    margin-top: 0.75rem;
}

.formula__format-hint {
    margin: 1rem 0 0;
}

.formula [data-format][hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .pack-option {
        transition: none;
    }
}

.formula__total {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 1.1rem;
}

/* Promo code of the packs: the field and "Appliquer" side by side, then the outcome. */
.promo-code {
    margin-top: 1.5rem;
}

.promo-code__row {
    display: flex;
    gap: 0.5rem;
}

.promo-code__row input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
}

.promo-code__message {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.promo-code__message:empty {
    display: none;
}

.promo-code__message--valid {
    color: var(--success);
}

.promo-code__message--invalid {
    color: var(--error);
}

/* VAT and payment note under the total: small print, one idea per line. */
.formula__note {
    display: grid;
    gap: 0.2rem;
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.formula__secure::before {
    content: '🔒';
    margin-right: 0.35rem;
    font-size: 0.8em;
}

@media (prefers-reduced-motion: reduce) {
    .formula__choice {
        transition: none;
    }
}

/* --- Choice pills (expanded checkboxes / radios of server-side forms) ------ */

.field--choices > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
}

.field.field--choices > div > input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.field--choices > div > label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.field--choices > div > label:hover {
    border-color: var(--gold);
}

.field--choices > div > input:checked + label {
    border-color: var(--plum);
    background: var(--plum);
    color: var(--white);
}

.field--choices > div > input:focus-visible + label {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.field input[type='file'] {
    padding: 0.6rem;
    background: var(--cream);
}

/* Fields stacked directly in a step (server-side forms). */
.step > .field + .field {
    margin-top: 1.5rem;
}

/* --- Home: teacher recruitment band --------------------------------------- */

.join-us__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: var(--shadow-s);
}

.join-us__inner > div {
    flex: 1 1 420px;
}

.join-us__title {
    margin: 0.25rem 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.join-us__lead {
    margin: 0;
    color: var(--muted);
}

/* Header links never wrap; between tablet and large screens the menu tightens. */
.site-nav__list a,
.site-nav__login,
.site-nav__actions .button {
    white-space: nowrap;
}

@media (min-width: 961px) and (max-width: 1200px) {
    .site-nav {
        gap: 1rem;
    }

    .site-nav__list {
        gap: 0.9rem;
    }

    .site-nav__list a,
    .site-nav__login {
        font-size: 0.85rem;
    }

    .site-nav__actions {
        gap: 0.75rem;
    }

    .site-nav__actions .button--small {
        padding-inline: 0.9rem;
        font-size: 0.85rem;
    }
}

/* --- Home: online courses note ------------------------------------------- */

.online-note {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--hairline-gold);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-m);
    background: var(--white);
    box-shadow: var(--shadow-s);
}

.online-note__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--plum);
    color: var(--gold-light);
}

.online-note__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

.online-note p {
    margin: 0 0 0.6rem;
}

.online-note__list {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

@media (max-width: 560px) {
    .online-note {
        flex-direction: column;
    }
}

/* --- Course resources (files, images, videos) ----------------------------- */

.resources__block {
    margin-bottom: 2rem;
}

.resources__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    font-size: 1.2rem;
}

.resources__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    font: 700 0.8rem/1 var(--font-body, inherit);
}

.resources__videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1rem;
}

.resource-video {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--white);
    box-shadow: var(--shadow-s);
}

.resource-video .video__screen {
    border-radius: 0;
}

.resource-video figcaption {
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.resources__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resource-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-s);
    background: var(--sand);
    box-shadow: var(--shadow-s);
}

.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.resource-image:hover img {
    transform: scale(1.05);
}

.resource-image__caption {
    position: absolute;
    inset: auto 0 0;
    padding: 1.5rem 0.75rem 0.5rem;
    background: linear-gradient(transparent, rgb(20 10 31 / 0.75));
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightbox {
    width: min(96vw, 1100px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgb(20 10 31 / 0.88);
}

.lightbox__figure {
    margin: 0;
    text-align: center;
}

.lightbox__figure img {
    max-width: 100%;
    max-height: 84vh;
    margin-inline: auto;
    border-radius: var(--radius-s);
}

.lightbox__figure figcaption {
    margin-top: 0.6rem;
    color: var(--white);
    font-weight: 600;
}

.lightbox__nav,
.lightbox__close {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.15);
    color: var(--white);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__nav:hover,
.lightbox__close:hover {
    background: rgb(255 255 255 / 0.3);
}

.lightbox__nav--prev { top: 45%; left: 0.5rem; }
.lightbox__nav--next { top: 45%; right: 0.5rem; }
.lightbox__close { top: -0.5rem; right: -0.5rem; }

.resources__files {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resource-file {
    --file-color: var(--plum);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.resource-file--pdf { --file-color: #c62828; }
.resource-file--doc { --file-color: #1e5bb8; }
.resource-file--slides { --file-color: #d35400; }
.resource-file--sheet { --file-color: #1e7b4b; }
.resource-file--audio { --file-color: #7b3fb5; }

.resource-file__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--file-color);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.resource-file__body {
    display: grid;
    flex: 1 1 220px;
    gap: 0.15rem;
    min-width: 0;
}

.resource-file__name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.resource-file__meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.resource-file__audio {
    width: 100%;
    max-width: 360px;
    margin-top: 0.4rem;
}

/* --- Language switch (header) --------------------------------------------- */

.language-switch {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid rgb(248 222 160 / 0.35);
    border-radius: 999px;
}

.language-switch a {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: rgb(255 255 255 / 0.8);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.language-switch a:hover {
    color: var(--gold-light);
}

.language-switch a[aria-current='true'] {
    background: var(--gold);
    color: var(--night);
}

@media (max-width: 960px) {
    .language-switch {
        align-self: center;
    }

    .language-switch a {
        padding: 0.45rem 1rem;
        font-size: 0.95rem;
    }
}

/* --- Video class (front/classroom/room.html.twig) ------------------------- */

.classroom-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 1rem;
}

/* When the video room opens: next to the button, below it on a phone. */
.classroom-join__opening {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    border-radius: var(--radius-s);
    background: var(--sand);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.3;
}

.classroom-join__opening .icon {
    flex: none;
    color: var(--gold-deep);
}

.classroom-join__opening > span {
    display: grid;
}

.classroom-join__opening strong {
    font-weight: 700;
}

.classroom-join__opening small {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .classroom-join > .button,
    .classroom-join__opening {
        width: 100%;
    }

    .classroom-join > .button {
        justify-content: center;
    }
}

.classroom__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-weight: 700;
}

.classroom__status--open {
    color: var(--success);
}

.classroom__devices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}

.classroom__devices legend {
    float: left;
    margin-right: 0.5rem;
}

.classroom__devices label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.classroom__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.classroom__stage {
    position: relative;
    display: grid;
    gap: 1rem;
}

/* The class is over (its end time): a red banner and a red frame around the videos, until the room closes. */
.classroom__over {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--error);
    color: var(--white);
    font-weight: 700;
    text-align: center;
}

/* Above the videos: recording (left), time left (right). */
.classroom__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.classroom__top:not(:has(> :not([hidden]))) {
    display: none;
}

/* Lobby (teacher): the length of a trial class; in the room, the same choice at the top. */
.classroom__trial {
    max-width: 22rem;
    margin-top: 0.75rem;
}

.classroom__length select {
    min-height: 0;
    width: auto;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

.classroom__timer {
    margin: 0 0 0 auto;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.classroom__timer-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.classroom__timer.is-ending {
    background: var(--error);
}

/* On top of the board while it is open: a band across the panel. */
.classroom__board .classroom__timer {
    flex: none;
    margin: 0;
    border-radius: 0;
    text-align: center;
}

.classroom__recording {
    justify-self: start;
    margin: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgb(180 35 24 / 0.1);
    color: var(--error);
    font-weight: 700;
    font-size: 0.9rem;
}

.classroom__grid {
    display: grid;
    /* auto-fit: with few participants, the videos share the whole width. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0.75rem;
}

.classroom__tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-s);
    background: var(--plum);
    outline: 3px solid transparent;
    transition: outline-color 0.2s ease;
}

.classroom__tile.is-teacher {
    order: -1;
}

.classroom__tile--screen {
    order: -2;
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 50vh;
    background: var(--ink);
}

.classroom__tile.is-speaking {
    outline-color: var(--gold);
}

/* Enlarged video ("Agrandir" or double click): the whole width, above the others. */
.classroom__tile.is-pinned {
    order: -3;
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-height: 75vh;
    aspect-ratio: 16 / 9;
}

.classroom__tile.is-pinned .classroom__video video {
    object-fit: contain;
}

.classroom__enlarge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(28 20 35 / 0.7);
    color: var(--white);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Teacher: mutes a student's microphone, next to "enlarge". */
/* Teacher: bottom right of a student's video, 🔇 mutes their microphone; once
   muted, the red 🔇 in the same place opens it again. */
.classroom__mute-one {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(28 20 35 / 0.7);
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.classroom__tile:hover .classroom__mute-one,
.classroom__mute-one:focus-visible {
    opacity: 1;
}

.classroom__tile.is-muted .classroom__mute-one {
    display: none;
}

@media (hover: none) {
    .classroom__mute-one {
        opacity: 1;
    }
}

/* Teacher: "⋯" of a student's video (add a note), after "enlarge". */
.classroom__more {
    position: absolute;
    top: 0.5rem;
    left: 3rem;
    z-index: 2;
}

.classroom__more-toggle {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(28 20 35 / 0.7);
    color: var(--white);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.classroom__more-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 12rem;
    padding: 0.35rem;
    border-radius: 0.75rem;
    background: var(--cream);
    box-shadow: 0 0.75rem 2rem rgb(20 10 31 / 0.35);
}

.classroom__more-menu button {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.classroom__more-menu button:hover,
.classroom__more-menu button:focus-visible {
    background: var(--gold-soft);
}

/* The note window, above the videos (also in full screen). */
.classroom__note-dialog {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 0;
    border-radius: 1rem;
    background: var(--cream);
    color: var(--ink);
}

.classroom__note-dialog::backdrop {
    background: rgb(20 10 31 / 0.6);
}

.classroom__note-dialog h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.classroom__note-hint {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.classroom__note-dialog textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    font: inherit;
    resize: vertical;
}

.classroom__note-error {
    margin: 0.5rem 0 0;
    color: var(--error);
    font-size: 0.85rem;
}

.classroom__note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.classroom__tile:hover .classroom__enlarge,
.classroom__enlarge:focus-visible,
.classroom__enlarge[aria-pressed='true'] {
    opacity: 1;
}

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

/* Touch screens have no hover: always show the button. */
@media (hover: none) {
    .classroom__enlarge {
        opacity: 1;
    }
}

/* Whole room on the screen (Fullscreen API, or covering the window on iPhone). */
.classroom__stage.is-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 1rem;
    overflow: hidden;
    background: var(--ink);
}

.classroom__stage.is-fullscreen .classroom__top {
    align-self: stretch;
}

.classroom__stage.is-fullscreen .classroom__top .classroom__timer {
    background: rgb(255 255 255 / 0.12);
}

.classroom__stage.is-fullscreen .classroom__top .classroom__timer.is-ending {
    background: var(--error);
}

.classroom__stage.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.classroom__stage.is-fullscreen .classroom__main {
    flex: 1;
    min-height: 0;
}

.classroom__stage.is-fullscreen .classroom__room {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.classroom__stage.is-fullscreen .classroom__chat,
.classroom__stage.is-fullscreen .classroom__board {
    min-height: 0;
    max-height: none;
}

.classroom__stage.is-fullscreen.has-board .classroom__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22vw), 1fr));
}

.classroom__stage.is-fullscreen .classroom__grid {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* Three videos per row at most: they use the height of the screen. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30vw), 1fr));
    /* Rows as tall as the videos (16/9): never squeezed into overlapping. */
    grid-auto-rows: max-content;
    /* safe: a video taller than the space starts at the top, its buttons stay reachable. */
    align-content: safe center;
}

.classroom__stage.is-fullscreen.has-chat .classroom__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22vw), 1fr));
}

/* An enlarged video in full screen: the others become a strip of thumbnails. */
.classroom__stage.is-fullscreen .classroom__grid:has(.is-pinned) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-content: start;
}

.classroom__stage.is-fullscreen .classroom__tile.is-pinned {
    width: auto;
    max-width: 100%;
    height: calc(100dvh - 19rem);
    max-height: none;
}

.classroom__stage.is-fullscreen .classroom__recording {
    flex: none;
    background: rgb(255 255 255 / 0.12);
    color: #ffb4ab;
}

.classroom__video,
.classroom__video video {
    width: 100%;
    height: 100%;
}

.classroom__video video {
    display: block;
    object-fit: cover;
}

.classroom__tile--screen .classroom__video video {
    object-fit: contain;
}

.classroom__tile.is-local .classroom__video video {
    transform: scaleX(-1); /* mirror, like in a mirror */
}

.classroom__initial {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    color: var(--gold-light);
    font-size: 3rem;
    font-weight: 700;
}

.classroom__tile.is-video-off:not(.classroom__tile--screen) .classroom__initial {
    display: grid;
}

.classroom__tile.is-video-off:not(.classroom__tile--screen) .classroom__video {
    visibility: hidden;
}

.classroom__name {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(28 20 35 / 0.7);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Microphone off: a red badge at the bottom right of the video. */
.classroom__mic-off {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--error);
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1;
}

.classroom__tile.is-muted .classroom__mic-off {
    display: grid;
}

/* The dialogue played by the students: the line being said, at the top of the room. */
.classroom__line {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    border-radius: 0.9rem;
    background: var(--ink);
    color: var(--white);
}

.classroom__line-meta {
    margin: 0;
    color: rgb(255 255 255 / 0.75);
    font-size: 0.85rem;
    font-weight: 600;
}

.classroom__line-text {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
}

.classroom__line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.classroom__line-stop {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

/* The student whose line it is: their text stands out. */
.classroom__line.is-mine {
    border-color: var(--gold);
    background: var(--gold-soft);
    color: var(--ink);
    box-shadow: 0 0 0 4px rgb(230 174 72 / 0.35);
}

.classroom__line.is-mine .classroom__line-meta {
    color: var(--ink);
}

.classroom__line.is-mine .classroom__line-text {
    font-size: 1.45rem;
}

/* The whole dialogue in place of the board. */
.classroom__board-lines {
    gap: 0.4rem;
}

.classroom__board-list.classroom__board-lines > li {
    display: block;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: 0.4rem;
    background: var(--cream);
    font-size: 0.9rem;
    line-height: 1.4;
}

.classroom__board-list.classroom__board-lines > li.is-said {
    color: var(--muted);
}

.classroom__board-list.classroom__board-lines > li.is-mine {
    border-left-color: var(--gold);
}

.classroom__board-list.classroom__board-lines > li.is-current {
    background: var(--gold-soft);
    color: var(--ink);
    font-weight: 600;
}

/* "Nombre max. de mots dans le texte": a short number. */
.classroom__words-field input {
    max-width: 8rem;
}

/* A section of the content or an exercise of the course in the board (sanitised HTML). */
.classroom__board-html {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.classroom__board-html > :first-child {
    margin-top: 0;
}

.classroom__board-html > :last-child {
    margin-bottom: 0;
}

/* Teacher: "Effacer" and "Afficher" under the text of the board. */
.classroom__board-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Teacher: "Générer un dialogue", "Générer un texte". */
.classroom__board-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* The text generated by the AI, in place of the board: its title and the ✕. */
.classroom__board-reading-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Teacher: "Enregistré dans le cours…" in place of the button (red: not saved). */
.classroom__board-saved {
    margin: 0;
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
}

.classroom__board-saved.is-error {
    color: var(--error);
}

/* A YouTube video of the course in the board: 16/9, the player once started. */
.classroom__board-video .video__screen {
    border-radius: 8px;
}

.classroom__board-video .video__play {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

/* The images of the course in the board: one at a time, with the arrows below. */
.classroom__carousel {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.classroom__carousel-image {
    width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    background: var(--cream);
    object-fit: contain;
}

.classroom__carousel-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    text-align: center;
}

.classroom__carousel-nav {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/* A group of images as thumbnails: a click shows that one, one at a time. */
.classroom__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classroom__thumb {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    cursor: pointer;
}

.classroom__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.classroom__thumb:hover,
.classroom__thumb:focus-visible {
    border-color: var(--gold-deep);
}

/* "Afficher le texte", below the board. */
.classroom__board-content > .classroom__board-link {
    margin: 0.75rem 1rem 0;
}

/* Teacher: the text written by the AI, editable before it is shown. */
.classroom__text-generated {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.classroom__text-result {
    width: 100%;
    min-height: 12rem;
    resize: vertical;
    line-height: 1.5;
}

.classroom__dialogue-window {
    width: min(40rem, calc(100vw - 2rem));
}

.classroom__dialogue-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.classroom__dialogue-field {
    display: grid;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.classroom__dialogue-field--wide {
    grid-column: 1 / -1;
}

.classroom__dialogue-fields textarea {
    resize: vertical;
    font-family: inherit;
}

.classroom__dialogue-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.classroom__dialogue-preview {
    max-height: 40vh;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--white);
    font-size: 0.9rem;
}

.classroom__dialogue-preview-title {
    margin: 0 0 0.5rem -1.25rem;
    font-weight: 700;
}

.classroom__dialogue-preview li + li {
    margin-top: 0.35rem;
}

/* Teacher: the red 🔇 of a student opens their microphone again. */
button.classroom__mic-off {
    z-index: 2;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

button.classroom__mic-off:hover,
button.classroom__mic-off:focus-visible {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.85);
}

/* ✋ at the top right of a student's video while their hand is up (10 s); the teacher's goes down with a click. */
.classroom__hand {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.85);
    font-size: 1.4rem;
    line-height: 1;
    animation: classroom-hand 1s ease-in-out infinite alternate;
}

button.classroom__hand {
    cursor: pointer;
}

.classroom__tile.has-hand .classroom__hand {
    display: grid;
}

@keyframes classroom-hand {
    to {
        transform: rotate(-12deg) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .classroom__hand {
        animation: none;
    }
}

/* Sound blocked by the browser: 🔇 on the others' videos (the badge of a
   muted microphone), next to it. */
.classroom__sound {
    position: absolute;
    right: 2.75rem;
    bottom: 0.5rem;
    z-index: 2;
    display: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--error);
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.classroom__stage.is-audio-blocked .classroom__sound {
    display: grid;
}

.classroom__tile:not(.is-muted):not(:has(.classroom__mute-one)) .classroom__sound {
    right: 0.5rem;
}

/* Short notice above the videos (microphones muted, hand lowered…). */
/* A short message ("Note enregistrée…", micros coupés…): floating above the
   videos, so that it never moves nor resizes them. */
.classroom__notice {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 20;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgb(20 10 31 / 0.25);
    transform: translateX(-50%);
}

.classroom__notice[hidden] {
    display: none;
}

.classroom__chat-locked {
    margin: 0 1rem 0.25rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    background: var(--gold-soft);
    font-size: 0.85rem;
}

.classroom__chat-locked[hidden] {
    display: none;
}

.classroom__chat-head .classroom__board-link {
    margin-left: auto;
}

.classroom__chat-head .classroom__board-link[aria-pressed='true'] {
    background: var(--plum);
    color: var(--white);
}

/* Videos, with the chat on their right once opened. */
.classroom__main {
    display: grid;
    gap: 0.75rem;
}

.classroom__stage.has-chat .classroom__main {
    grid-template-columns: minmax(0, 1fr) min(340px, 38%);
}

/* The teacher's board on the left of the videos. */
.classroom__stage.has-board .classroom__main {
    grid-template-columns: min(300px, 32%) minmax(0, 1fr);
}

.classroom__stage.has-board.has-chat .classroom__main {
    grid-template-columns: min(280px, 24%) minmax(0, 1fr) min(320px, 28%);
}

.classroom__board {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.classroom__board[hidden] {
    display: none;
}

.classroom__board-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 0.75rem;
}

.classroom__board-section {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.classroom__board-section:last-child {
    border-bottom: 0;
}

.classroom__board-section .classroom__chat-hint {
    padding: 0;
}

.classroom__board-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.classroom__count {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.4rem;
    text-align: center;
}

.classroom__board-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classroom__board-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.9rem;
}

/* Teacher: the course of the class, to be chosen before using the board. */
.classroom__board-section.is-required {
    background: var(--gold-soft);
}

.classroom__board-required {
    margin: 0;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.classroom__board-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.classroom__board-role {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--plum);
    color: var(--white);
    font-size: 0.8rem;
}

.classroom__board-roles .classroom__board-input {
    flex: 1 1 8rem;
}




.classroom__board-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
}

/* The lists of the board (course, sections, exercises, texts, videos, images…)
   take the width of the board, not of their longest title: no horizontal
   scroll; a long title is cut with "…". */
select.classroom__board-input {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classroom__board,
.classroom__board-section,
.classroom__board-section > div {
    min-width: 0;
}

.classroom__board-section {
    grid-template-columns: minmax(0, 1fr);
}

.classroom__board-body {
    overflow-x: hidden;
}

/* "Au tableau": the teacher's free text, shown with its line breaks. */
.classroom__board-text {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.classroom__board-text[hidden] {
    display: none;
}

/* Teacher: the free text written in a textarea. */
.classroom__board-edit {
    display: grid;
    gap: 0.35rem;
}

.classroom__board-label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.classroom__board-textarea {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.45;
}

.classroom__board-save {
    justify-self: end;
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--coral);
    color: var(--white);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.classroom__board-save:hover,
.classroom__board-save:focus-visible {
    background: var(--coral-dark);
}

.classroom__board-link {
    justify-self: start;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--plum);
    border-radius: 999px;
    background: transparent;
    color: var(--plum);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* "Enseignant" above the teacher's name (role-play roles stay in the board). */
.classroom__role {
    position: absolute;
    left: 0.5rem;
    bottom: 2.3rem;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classroom__role[hidden] {
    display: none;
}

/* On the teacher's video: who leads the class (not a role-play role). */
.classroom__role--teacher {
    background: var(--plum);
    color: var(--gold-light);
}

.classroom__room {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
}

.classroom__chat {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.classroom__chat[hidden] {
    display: none;
}

.classroom__chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.classroom__chat-title {
    margin: 0;
    font-size: 1rem;
}

.classroom__chat-close {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    cursor: pointer;
}

.classroom__chat-hint {
    margin: 0;
    padding: 0.5rem 1rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.classroom__chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 1rem 1rem;
    overflow-y: auto;
    list-style: none;
}

.classroom__chat-message {
    align-self: flex-start;
    max-width: 85%;
    padding: 0.45rem 0.75rem;
    border-radius: 12px 12px 12px 4px;
    background: var(--cream);
    font-size: 0.9rem;
}

.classroom__chat-message.is-own {
    align-self: flex-end;
    border-radius: 12px 12px 4px;
    background: var(--plum);
    color: var(--white);
}

.classroom__chat-message strong {
    font-size: 0.8rem;
}

.classroom__chat-message.is-teacher strong {
    color: var(--coral-dark);
}

.classroom__chat-message time {
    color: var(--muted);
    font-size: 0.75rem;
}

.classroom__chat-message.is-own time {
    color: var(--gold-light);
}

.classroom__chat-message p {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.classroom__chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--line);
}

.classroom__chat-form input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font: inherit;
}

.classroom__chat-form input:focus {
    outline: none;
    border-color: var(--plum);
}

.classroom__chat-send {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--coral);
    color: var(--white);
    cursor: pointer;
}

.classroom__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--coral);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

.classroom__badge[hidden] {
    display: none;
}

/* Phones and narrow screens: the chat goes below the videos. */
@media (max-width: 800px) {
    .classroom__stage.has-chat .classroom__main,
    .classroom__stage.has-board .classroom__main,
    .classroom__stage.has-board.has-chat .classroom__main {
        grid-template-columns: 1fr;
    }

    /* Videos first, then the board. */
    .classroom__board {
        order: 1;
        min-height: 0;
        max-height: 50vh;
    }

    .classroom__chat {
        order: 2;
    }

    .classroom__chat {
        min-height: 300px;
        max-height: 50vh;
    }
}

/* Camera / microphone / speaker choice ("Réglages"), just above the toolbar:
   a compact bar in the toolbar's colours, one line when it fits. */
.classroom__devices-panel {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.9rem;
    max-width: 100%;
    padding: 0.4rem 0.8rem;
    border-radius: 1.25rem;
    background: var(--plum);
    color: var(--white);
}

.classroom__devices-panel[hidden] {
    display: none;
}

.classroom__devices-panel .field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.classroom__devices-panel .field select {
    width: auto;
    max-width: 13rem;
    min-height: 32px;
    padding: 0.2rem 1.6rem 0.2rem 0.6rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999px;
    background-color: rgb(255 255 255 / 0.1);
    color: var(--white);
    font-size: 0.85rem;
    text-overflow: ellipsis;
}

.classroom__devices-panel .field select option {
    color: var(--ink);
}

.classroom__devices-panel .field span {
    color: var(--gold-light);
    font-weight: 700;
    font-size: 0.8rem;
}

/* Phones: one device per line, the list taking the rest of the width. */
@media (max-width: 600px) {
    .classroom__devices-panel {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .classroom__devices-panel .field span {
        flex: 0 0 5.5rem;
    }

    .classroom__devices-panel .field select {
        flex: 1;
        max-width: none;
    }
}

.classroom__stage.is-fullscreen .classroom__devices-panel,
.classroom__control[aria-expanded='true'] {
    background: var(--gold);
    color: var(--ink);
}

.classroom__controls {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem;
    /* Rounded, not a pill: a narrow window wraps the buttons on two lines. */
    border-radius: 1.5rem;
    background: var(--plum);
    box-shadow: 0 10px 30px rgb(37 18 58 / 0.25);
}

.classroom__control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 44px;
    min-height: 42px;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 999px;
    background: var(--plum-soft);
    color: var(--white);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* Full screen and settings: the icon alone. */
.classroom__control--icon {
    padding-inline: 0.6rem;
    font-size: 1.1rem;
}

.classroom__control[aria-pressed='false'] {
    background: var(--white);
    color: var(--plum);
}

.classroom__control[data-classroom-target='microphone'][aria-pressed='false'],
.classroom__control[data-classroom-target='camera'][aria-pressed='false'] {
    background: var(--error);
    color: var(--white);
}

.classroom__control[data-classroom-target='screen'][aria-pressed='true'],
.classroom__control[data-classroom-target='hand'][aria-pressed='true'] {
    background: var(--gold);
    color: var(--ink);
}

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

.classroom__control--leave {
    background: var(--coral);
}

/* "Couper": pulses while the microphones are being muted, then flashes green
   with a tick (done) or shakes in red (failed). */
.classroom__control.is-working {
    pointer-events: none;
    animation: classroom-pulse 0.8s ease-in-out infinite;
}

.classroom__control.is-done {
    animation: classroom-done 1.5s ease-out;
}

.classroom__control.is-done::after {
    content: '✓';
    position: absolute;
    top: -0.45rem;
    right: -0.3rem;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--success);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 800;
    animation: classroom-pop 0.35s ease-out;
}

.classroom__control.is-failed {
    animation: classroom-shake 0.4s ease-in-out;
    box-shadow: 0 0 0 2px var(--error);
}

@keyframes classroom-pulse {
    50% { opacity: 0.55; transform: scale(0.94); }
}

@keyframes classroom-done {
    0% { box-shadow: 0 0 0 0 rgb(31 122 77 / 0.7); background: var(--success); }
    70% { box-shadow: 0 0 0 12px rgb(31 122 77 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(31 122 77 / 0); }
}

@keyframes classroom-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes classroom-shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .classroom__control.is-working,
    .classroom__control.is-done,
    .classroom__control.is-done::after,
    .classroom__control.is-failed {
        animation: none;
    }

    .classroom__control.is-working {
        opacity: 0.6;
    }
}

/* Phones: a flat bar fixed at the bottom of the screen, icons only (labels
   kept for screen readers); the state shows in the icon's colour. */
@media (max-width: 600px) {
    .classroom__stage {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
    }

    .classroom__controls,
    .classroom__stage.is-fullscreen .classroom__controls {
        position: fixed;
        inset: auto 0 0;
        z-index: 1001;
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 0;
        padding: 0.2rem 0.25rem calc(0.2rem + env(safe-area-inset-bottom));
        overflow-x: auto;
        border-radius: 0;
        box-shadow: 0 -6px 20px rgb(0 0 0 / 0.25);
    }

    .classroom__control,
    .classroom__control[aria-pressed],
    .classroom__control[aria-expanded='true'],
    .classroom__control--leave {
        flex: 1 0 auto;
        min-width: 42px;
        min-height: 50px;
        padding: 0.25rem;
        border-radius: 0;
        background: transparent;
        color: var(--white);
        font-size: 1.15rem;
    }

    .classroom__control[data-classroom-target='microphone'][aria-pressed='false'],
    .classroom__control[data-classroom-target='camera'][aria-pressed='false'],
    .classroom__control--leave {
        color: #ff8a7a;
    }

    .classroom__control[data-classroom-target='screen'][aria-pressed='true'],
    .classroom__control[data-classroom-target='hand'][aria-pressed='true'],
    .classroom__control[aria-expanded='true'] {
        color: var(--gold);
        box-shadow: inset 0 3px 0 var(--gold);
    }

    .classroom__control .icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    .classroom__control span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .classroom__control .classroom__badge {
        top: 0.2rem;
        right: 0.1rem;
    }

    /* Inside the button: the scrolling bar would cut it off. */
    .classroom__control.is-done::after {
        top: 0.15rem;
        right: 0.15rem;
    }
}

/* --- "Mon espace": account menu, tab bar, homework ---------------------- */

/* Header (desktop): the menu of the space in place of the site's. */
.account-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.account-nav__list {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    color: rgb(255 255 255 / 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.account-nav__link:hover,
.account-nav__link:focus-visible {
    background: rgb(255 255 255 / 0.08);
    color: var(--white);
}

.account-nav__link[aria-current='page'] {
    background: rgb(255 255 255 / 0.12);
    color: var(--gold-light);
}

.account-nav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--coral);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

/* Round button with the initials and its panel. */
.account-menu {
    position: relative;
    flex: none;
}

.account-menu__toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: var(--plum-soft);
    color: var(--gold-light);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.account-menu__toggle[aria-expanded='true'],
.account-menu__toggle:hover {
    background: var(--gold);
    color: var(--ink);
}

.account-menu__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 60;
    width: min(290px, calc(100vw - 2rem));
    padding: 0.75rem;
    border-radius: var(--radius-s);
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 18px 40px rgb(20 10 31 / 0.3);
}

.account-menu__panel[hidden] {
    display: none;
}

.account-menu__who {
    display: grid;
    margin: 0 0 0.5rem;
    padding: 0.25rem 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
    line-height: 1.3;
}

.account-menu__who span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.85rem;
    text-overflow: ellipsis;
}

.account-menu__links {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-menu__links a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem;
    border-radius: 8px;
    color: var(--ink);
    font-size: 0.95rem;
    text-decoration: none;
}

.account-menu__links a:hover,
.account-menu__links a:focus-visible {
    background: var(--cream);
}

.account-menu__languages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.5rem;
}

.account-menu__languages .icon {
    margin-right: 0.35rem;
}

.account-menu__languages a {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.account-menu__languages a[aria-current='true'] {
    background: var(--gold-soft);
}

.account-menu__logout {
    margin-top: 0.25rem;
    color: var(--error) !important;
}

.account-menu__legal {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.5rem 0.1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
}

.account-menu__legal a {
    color: var(--muted);
}

/* Phones and tablets: a tab bar fixed at the bottom; the header keeps the
   logo and the account button. */
.account-tabbar {
    display: none;
}

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

    .site-header--compact .site-header__inner {
        justify-content: space-between;
    }

    .account-tabbar {
        position: fixed;
        inset: auto 0 0;
        z-index: 40;
        display: flex;
        justify-content: space-around;
        padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--hairline-gold);
        background: var(--night);
        box-shadow: 0 -8px 24px rgb(20 10 31 / 0.25);
    }

    body:has(.account-tabbar) {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    .account-tabbar__link {
        flex: 1;
        display: grid;
        justify-items: center;
        gap: 0.15rem;
        min-height: 52px;
        padding: 0.35rem 0.25rem 0.2rem;
        color: rgb(255 255 255 / 0.7);
        font-size: 0.7rem;
        font-weight: 600;
        text-decoration: none;
    }

    .account-tabbar__link[aria-current='page'] {
        color: var(--gold-light);
        box-shadow: inset 0 3px 0 var(--gold);
    }

    .account-tabbar__icon {
        position: relative;
    }

    .account-tabbar__icon .icon {
        width: 1.45rem;
        height: 1.45rem;
    }

    .account-tabbar__icon .account-nav__badge {
        position: absolute;
        top: -0.35rem;
        right: -0.7rem;
    }
}

/* Homework cards. */
.homework-list {
    display: grid;
    gap: 0.75rem;
}

.homework {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.homework--next {
    border-color: var(--gold);
    border-left: 5px solid var(--gold);
    box-shadow: var(--shadow-s);
}

.homework--done {
    opacity: 0.8;
}

.homework--done .homework__title {
    text-decoration: line-through;
    text-decoration-color: var(--gold-deep);
}

.homework__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.homework__title {
    margin: 0;
    font-size: 1.1rem;
}

.homework__due {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--gold-deep);
    font-size: 0.85rem;
    font-weight: 700;
}

.homework__instructions {
    margin: 0;
}

/* YouTube videos of a homework (the course videos' player). */
.homework__videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.homework__videos figcaption strong {
    display: block;
}

.homework__video-description {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.homework__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.homework__course {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.homework__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.homework__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--sand);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.homework__status--done {
    background: rgb(31 122 77 / 0.12);
    color: var(--success);
}

.homework__undo {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.homework-section + .homework-section {
    margin-top: 2rem;
}

.homework-section__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.homework-past {
    margin-top: 1.25rem;
}

.homework-past > summary {
    margin-bottom: 0.75rem;
    color: var(--plum);
    font-weight: 700;
    cursor: pointer;
}

/* Student's home. */
.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

/* Nothing to do for the next session: a single short line. */
.dashboard-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-s);
    background: rgb(31 122 77 / 0.08);
}

.dashboard-empty__text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--success);
    font-size: 0.95rem;
    font-weight: 600;
}

.dashboard-empty .dashboard-more {
    margin: 0;
}

/* Latest courses: rows like the course list, smaller. */
.dashboard-courses {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-course {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--cream);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dashboard-course:hover,
.dashboard-course:focus-visible {
    border-color: var(--gold);
    background: var(--white);
}

.dashboard-course__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-deep);
}

.dashboard-course__main {
    display: grid;
    flex: 1;
    gap: 0.1rem;
    min-width: 0;
}

.dashboard-course__title {
    overflow: hidden;
    font: 600 1rem/1.3 var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-course__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.dashboard-course__meta .space-badge {
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
}

.dashboard-course__go {
    flex: none;
    color: var(--muted);
}

.dashboard-more {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.dashboard-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dashboard-next {
    margin-bottom: 1.75rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 0 1.5rem;
    align-items: start;
}

/* Family home: homework of each child. */
.family-homework__list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.family-homework__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-s);
    background: var(--sand);
}

.family-homework__title {
    flex: 1 1 auto;
    font-weight: 600;
}

.family-homework__list .homework__status {
    background: var(--white);
}

/* Family home: one card per child, a summary first, the details below. */
.family-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.family-switch__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-s);
}

.family-switch__item:hover,
.family-switch__item:focus-visible {
    border-color: var(--gold);
}

.family-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: var(--plum);
    color: var(--gold-light);
    font-family: var(--font-display, inherit);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.family-avatar--small {
    width: 2rem;
    height: 2rem;
    border-width: 1.5px;
    font-size: 0.75rem;
}

.family-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.5rem 1rem;
}

.family-card__identity .space-card__title {
    margin-bottom: 0.15rem;
}

.family-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.family-chip {
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--cream);
    font-size: 0.85rem;
    font-weight: 600;
}

.family-chip--gold {
    border-color: transparent;
    background: var(--gold-soft);
    color: var(--gold-deep);
}

.family-chip--waiting {
    border-color: transparent;
    background: var(--plum);
    color: var(--white);
}

.family-chip--muted {
    color: var(--muted);
    font-weight: 500;
}

.family-card .space-no-course {
    margin: 1.25rem 0 0;
}

.family-section {
    margin-top: 1.5rem;
}

.family-section__title {
    margin: 0 0 0.6rem;
    font-family: var(--font-display, inherit);
    font-size: 1.05rem;
    font-weight: 700;
}

.family-section__help {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.family-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-s);
    background: var(--sand);
}

.family-group + .family-group {
    margin-top: 0.5rem;
}

.family-group__name,
.family-group__when {
    margin: 0;
}

.family-group__name {
    font-weight: 700;
}

.family-group__when {
    color: var(--muted);
    font-size: 0.95rem;
}

.family-group__teacher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    font-weight: 600;
}

.family-group__photo {
    width: 36px;
    height: 36px;
}

.family-group__join {
    grid-column: 1 / -1;
}

.family-group__join:empty {
    display: none;
}

.family-group__join .space-muted {
    font-size: 0.9rem;
}

.family-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.family-slot {
    padding: 0.3rem 0.8rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Mon espace: the holder may register as a student too. */
/* The holder may follow classes too: a discreet one-line invitation. */
.family-myself {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-s);
    background: var(--cream);
    font-size: 0.92rem;
}

.family-myself__icon {
    font-size: 1rem;
}

.family-myself__text {
    flex: 1 1 14rem;
    margin: 0;
    color: var(--ink);
}

.family-myself__more {
    color: var(--muted);
}

.family-myself__link {
    color: var(--plum);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.family-myself__link:hover,
.family-myself__link:focus-visible {
    text-decoration: underline;
}

.family-slot--wish {
    border-style: dashed;
}

.family-slot--group {
    border: 1px solid var(--gold);
    background: var(--gold-soft);
    color: var(--plum);
}

.family-card__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 0 1.5rem;
    align-items: start;
}

.family-courses {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.family-courses li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
}

.family-courses a {
    font-weight: 600;
}

.family-access {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
}

.family-access__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.family-access__summary::-webkit-details-marker {
    display: none;
}

.family-access__summary::before {
    content: "▸";
    color: var(--gold-deep);
    transition: transform 0.15s ease;
}

.family-access[open] > .family-access__summary::before {
    transform: rotate(90deg);
}

.family-access__summary .family-section__title {
    margin: 0;
}

.family-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.family-section__link {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Edit a student's file. */
.edit-student__slots {
    margin-top: 0.75rem;
}

.edit-student__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 700px) {
    .family-card__head {
        grid-template-columns: auto 1fr;
    }

    .family-card__actions {
        grid-column: 1 / -1;
    }

    .family-group {
        grid-template-columns: 1fr;
    }

    .family-group__teacher {
        justify-content: flex-start;
    }
}

/* --- In class: the room takes the whole window --------------------------- */
/* Once in the room (html.is-in-class): no banner, full width, the board
   stuck on the left and the chat on the right, each scrolling on its own,
   the videos in between; the toolbar fixed at the bottom of the screen. */
.is-in-class .space-hero {
    display: none;
}

.is-in-class .space-body {
    padding: 0;
}

.is-in-class .space-body > .container {
    max-width: none;
    padding: 0;
}

.is-in-class .classroom__stage:not(.is-fullscreen) {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--classroom-top, var(--header-height)));
    padding: 0.75rem;
}

.is-in-class .classroom__stage > :not(.classroom__main, .classroom__controls) {
    flex: none;
}

.is-in-class .classroom__main {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.is-in-class .classroom__room {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* The videos fit the space left (classroom#fitGrid, flagged by --classroom-fit):
   no scrolling, alone or with others, settings open or not. */
.is-in-class .classroom__grid,
.classroom__stage.is-fullscreen .classroom__grid {
    --classroom-fit: 1;
}

.is-in-class .classroom__grid {
    flex: 1;
    min-height: 0;
    overflow: auto;
    grid-auto-rows: max-content;
    align-content: safe center;
}

/* An enlarged video: as tall as the room allows (its 16/9 width follows),
   the others as a strip of thumbnails below it. */
.is-in-class .classroom__stage:not(.is-fullscreen) .classroom__grid:has(.is-pinned) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-content: start;
}

.is-in-class .classroom__stage:not(.is-fullscreen) .classroom__tile.is-pinned {
    width: auto;
    max-width: 100%;
    height: calc(100dvh - var(--classroom-top, var(--header-height)) - 15rem);
    min-height: 12rem;
    max-height: none;
}

.is-in-class .classroom__board,
.is-in-class .classroom__chat {
    min-height: 0;
    max-height: none;
}

.is-in-class .classroom__stage.has-board .classroom__main {
    grid-template-columns: 300px minmax(0, 1fr);
}

.is-in-class .classroom__stage.has-chat .classroom__main {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.is-in-class .classroom__stage.has-board.has-chat .classroom__main {
    grid-template-columns: 290px minmax(0, 1fr) 330px;
}

/* Board on the left, videos, chat on the right, whatever the order they open in. */
.is-in-class .classroom__board { order: 1; }
.is-in-class .classroom__room { order: 2; }
.is-in-class .classroom__chat { order: 3; }

/* A screen shared (html.is-screen-shared): the header keeps only the logo,
   smaller, and "Arrêter le partage" on the right for the one sharing; the
   screen takes the height left, the videos as a strip of thumbnails below. */
.is-in-class.is-screen-shared {
    --header-height: 52px;
}

.is-in-class.is-screen-shared .site-header__inner > :not(.brand) {
    display: none;
}

.is-in-class.is-screen-shared .site-header .brand__logo-compact {
    height: 48px;
}

.classroom__stop-screen {
    position: fixed;
    top: calc((var(--header-height) - 2.5rem) / 2);
    right: var(--gutter);
    z-index: 51; /* above the site header */
    min-height: 2.5rem;
}

.classroom__stop-screen[hidden] {
    display: none;
}

.classroom__stage.is-fullscreen .classroom__stop-screen {
    display: none;
}

.is-in-class.is-screen-shared .classroom__grid,
.classroom__stage.is-fullscreen .classroom__grid:has(.classroom__tile--screen) {
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: stretch;
    justify-content: center;
}

.is-in-class.is-screen-shared .classroom__tile--screen,
.classroom__stage.is-fullscreen .classroom__tile--screen {
    min-height: min(50vh, 20rem);
}

/* "Agrandir le tableau": the icon of the other state is hidden. */
.classroom__board-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.classroom__board-size .icon {
    width: 1rem;
    height: 1rem;
}

.classroom__board-size[aria-pressed='false'] .icon--minimize,
.classroom__board-size[aria-pressed='true'] .icon--maximize {
    display: none;
}

/* Large screens: the board widened by the teacher or a student, the videos beside it. */
@media (min-width: 961px) {
    .classroom__stage.has-board.is-board-wide .classroom__main,
    .is-in-class .classroom__stage.has-board.is-board-wide .classroom__main {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .classroom__stage.has-board.has-chat.is-board-wide .classroom__main,
    .is-in-class .classroom__stage.has-board.has-chat.is-board-wide .classroom__main {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 300px;
    }

    .classroom__stage.is-board-wide .classroom__board-text,
    .classroom__stage.is-board-wide .classroom__board-lines > li {
        font-size: 1.1rem;
    }
}

/* Small screens: the board is below the videos, nothing to widen. */
@media (max-width: 960px) {
    .classroom__board-size {
        display: none;
    }
}

/* Desktop: the toolbar is the last row of the room, which fills the window
   height: always at the bottom of the screen, and the columns (videos,
   board, chat) end above it, so it never covers them, wrapped on two lines
   or in full screen. */
@media (min-width: 961px) {
    .is-in-class .classroom__controls,
    .classroom__stage.is-fullscreen .classroom__controls {
        position: static;
        flex: none;
        align-self: center;
        max-width: 100%;
    }
}

/* Narrow windows: one column, the videos first, the panels below them. */
@media (max-width: 960px) {
    .is-in-class .classroom__stage:not(.is-fullscreen) {
        height: auto;
        min-height: calc(100dvh - var(--classroom-top, var(--header-height)));
    }

    .is-in-class .classroom__stage.has-board .classroom__main,
    .is-in-class .classroom__stage.has-chat .classroom__main,
    .is-in-class .classroom__stage.has-board.has-chat .classroom__main {
        grid-template-columns: 1fr;
    }

    .is-in-class .classroom__room { order: 0; overflow: visible; }

    /* Videos only: the room fills the window, without scrolling. */
    .is-in-class .classroom__stage:not(.is-fullscreen, .has-board, .has-chat) {
        height: calc(100dvh - var(--classroom-top, var(--header-height)));
    }

    /* With a panel open below the videos, the page scrolls: the videos keep their size. */
    .is-in-class .classroom__stage:is(.has-board, .has-chat) .classroom__grid {
        --classroom-fit: 0;
        flex: none;
    }

    .is-in-class .classroom__board,
    .is-in-class .classroom__chat {
        max-height: 60vh;
    }
}

@media (max-width: 600px) {
    .is-in-class .classroom__stage:not(.is-fullscreen) {
        padding: 0.5rem 0.5rem calc(4rem + env(safe-area-inset-bottom));
    }
}

/* --- Meetings: in Mon espace, and the message in the meeting lobby -------- */

.space-meetings {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.space-meeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.space-meeting.is-open {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgb(230 174 72 / 0.25);
}

.space-meeting__title {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.space-meeting p {
    margin: 0;
}

.meeting__message {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--gold);
    border-radius: 0.4rem;
    background: var(--cream);
}

/* --- Mon espace: next classes, cancellable until 24 hours before --------- */

.space-classes {
    margin: 1.5rem 0;
}

.space-classes__hint {
    margin: -0.5rem 0 0.75rem;
}

.space-classes__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.space-class {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
}

.space-class__when {
    flex: 1 1 16rem;
}

.space-class form {
    margin: 0;
}

.space-class.is-cancelled .space-class__when {
    color: var(--muted);
    text-decoration: line-through;
}

.space-class__late {
    font-size: 0.85rem;
}

/* Confirmation window before cancelling a class. */
.space-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 0;
    border-radius: 1rem;
    background: var(--cream);
    color: var(--ink);
}

.space-dialog::backdrop {
    background: rgb(20 10 31 / 0.6);
}

.space-dialog__title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.space-dialog__text {
    margin: 0;
}

.space-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.space-badge--muted {
    background: var(--sand, #efe8dc);
    color: var(--muted);
}

/* --- Family home: personal login of a child --------------------------------- */

.family-access__summary {
    align-items: center;
}

.family-access__icon {
    font-size: 1.05rem;
}

.family-access__status {
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--sand);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.family-access__status.is-active {
    background: rgb(46 125 50 / 0.12);
    color: #2e7d32;
}

.access-panel {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--cream);
}

.access-panel p {
    margin: 0;
}

.access-panel__lead {
    color: var(--muted);
}

.access-panel__login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.access-panel__label {
    font-weight: 700;
    font-size: 0.9rem;
}

.access-panel__value {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--white);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
}

.access-panel__password > summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.access-panel__password > summary::-webkit-details-marker {
    display: none;
}

.access-panel__password[open] > summary {
    margin-bottom: 0.75rem;
}

.access-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.access-panel__footer form {
    margin: 0;
}

/* Fields side by side, the button on their line (help text below, so it never
   shifts the button); one under the other on a phone. */
.access-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.6rem 0.75rem;
}

.access-form--create {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.access-form .field {
    margin: 0;
}

.access-form__submit {
    min-height: 50px;
    white-space: nowrap;
}

.access-form__help {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 640px) {
    .access-form,
    .access-form--create {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-form__submit {
        width: 100%;
    }
}

/* The next class's own action (cancel, restore) in "Ma prochaine séance". */
.space-classes--next {
    margin: 0.75rem 0 0;
}


/* --- Class review in Mon espace: absences, reports ------------------------- */

.absence-notice {
    align-items: flex-start;
    font-weight: 500;
}

.absence-notice__text {
    flex: 1;
    margin: 0;
}

.absence-notice form {
    margin: 0;
}

.absence-notice__close {
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.class-reports {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.class-report__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    cursor: pointer;
}

.class-report__date {
    font-weight: 700;
}

.class-report__text {
    margin: 0.75rem 0 0;
    white-space: pre-line;
}

/* --- Rating of a class by the student ------------------------------------- */

.feedback-form {
    display: grid;
    gap: 1.25rem;
    max-width: 640px;
}

.feedback-question {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.feedback-question__label {
    padding: 0;
    font-weight: 700;
}

/* The stars come 5 first: shown right to left, a star and those before it light up. */
.feedback-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}

.feedback-stars label {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.feedback-stars input:checked ~ label,
.feedback-stars label:hover,
.feedback-stars label:hover ~ label {
    color: var(--gold);
}

.feedback-stars label:hover {
    transform: scale(1.1);
}

.feedback-stars input:focus-visible + label {
    outline: 2px solid var(--plum);
    outline-offset: 2px;
    border-radius: 4px;
}

.feedback-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-answer {
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

input:checked + .feedback-answer {
    border-color: var(--gold-deep);
    background: var(--gold-soft);
    color: var(--plum);
}

input:focus-visible + .feedback-answer {
    outline: 2px solid var(--plum);
    outline-offset: 2px;
}

.feedback-comment {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    font: inherit;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.family-group__reports {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.class-report__summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform 0.2s;
}

.class-report[open] .class-report__summary::after {
    transform: rotate(180deg);
}

/* --- "Je ne suis pas un robot" (ALTCHA) ----------------------------------------- */

.captcha {
    margin-block: 1rem 0.5rem;
}

.captcha altcha-widget {
    --altcha-max-width: 320px;
    --altcha-color-base: #fff;
    --altcha-color-text: var(--ink);
    --altcha-border-radius: var(--radius-s);
    display: block;
}