/* ============================================================
Tandemo — shared styles
Warm & playful, dyslexia-friendly.
Design notes:
- Lexend body font (high legibility); optional OpenDyslexic toggle.
- Large base size, generous line-height, no justified text.
- Short line lengths, soft contrast (dark slate on cream).
============================================================ */
/* OpenDyslexic — the font behind the "Aa" toggle. It MUST be loaded here or
the toggle silently falls back to Lexend (the family name alone does
nothing). Self-described via @fontsource on jsDelivr, same CDN approach as
the Lexend in each page. SIL OFL licensed. */
@font-face {
font-family: "OpenDyslexic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-400-normal.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-400-normal.woff") format("woff");
}
@font-face {
font-family: "OpenDyslexic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-700-normal.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-700-normal.woff") format("woff");
}
:root {
/* Brand palette — warm & playful */
--coral: #ff7a6b;
--coral-dark: #ef5d4d;
--teal: #2bb3a3;
--teal-dark: #1f9082;
--sun: #ffc247;
--sun-dark: #f2ab1f;
--grape: #8a6bff;
/* Surfaces & text (soft, not pure black/white) */
--cream: #fff8f0;
--cream-2: #fff1e3;
--card: #ffffff;
--ink: #3a3a4a;
--ink-soft: #5f5f70;
--line: #eede6;
/* Radii & shadow */
--r-sm: 12px;
--r-md: 18px;
--r-lg: 28px;
--shadow: 0 10px 30px rgba(58, 58, 74, 0.08);
--shadow-lg: 0 18px 48px rgba(58, 58, 74, 0.14);
/* Typography */
--font: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-base: 18px;
--lh: 1.7;
--maxread: 62ch;
}
/* Accessibility: dyslexia font toggle */
html[data-dysfont="on"] {
--font: "OpenDyslexic", "Lexend", sans-serif;
}
/* Accessibility: larger text toggle ("A+").
Goal: enlarge ONLY the reading content a child works with — lesson passages,
questions, answer choices and game clues. It deliberately leaves the site
chrome alone (titles, buttons, menus, back links). These reading texts are
sized in rem, so we bump each one explicitly here. */
html[data-bigtext="on"] .reading p { font-size: 1.6rem; }
html[data-bigtext="on"] .question { font-size: clamp(1.5rem, 4vw, 1.95rem); }
html[data-bigtext="on"] .opt { font-size: 1.4rem; }
html[data-bigtext="on"] .qec-clues li { font-size: 1.35rem; }
/* Texts shown after answering: the feedback explanation and the unlocked hint. */
html[data-bigtext="on"] .feedback p,
html[data-bigtext="on"] .hint-box p { font-size: 1.4rem; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
font-size: var(--fs-base);
line-height: var(--lh);
color: var(--ink);
background: var(--cream);
letter-spacing: 0.01em;
word-spacing: 0.03em;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: 0; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { max-width: var(--maxread); }
a { color: var(--teal-dark); }
img { max-width: 100%; }
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: .5em;
font-family: var(--font); font-size: 1rem; font-weight: 600;
padding: .85em 1.5em; border-radius: 999px; border: 0;
cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 8px 18px rgba(255,122,107,.35); }
.btn-primary:hover { background: var(--coral-dark); }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 8px 18px rgba(43,179,163,.32); }
.btn-teal:hover { background: var(--teal-dark); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn-ghost:hover { background: var(--cream-2); }
.btn-lg { font-size: 1.1rem; padding: 1em 1.8em; }
/* ---------- Top bar ---------- */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255,248,240,.85); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.brand .logo {
width: 38px; height: 38px; border-radius: 12px;
display: grid; place-items: center; font-size: 1.2rem;
background: linear-gradient(135deg, var(--sun), var(--coral)); box-shadow: var(--shadow);
}
/* When the brand logo is the Tandemo image, the SVG already carries its own
rounded gradient square — drop the placeholder gradient and let it fill. */
img.logo { background: none; object-fit: contain; border-radius: 11px; }
.spacer { flex: 1; }
/* Toolbar controls (lang + a11y) */
.tools { display: flex; align-items: center; gap: .5rem; }
.pill {
display: inline-flex; align-items: center; gap: .4em;
background: #fff; border: 1px solid var(--line); border-radius: 999px;
padding: .45em .8em; font-size: .9rem; font-weight: 600; color: var(--ink);
cursor: pointer; line-height: 1;
}
.pill:hover { background: var(--cream-2); }
.pill[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.lang-toggle { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-toggle button { border: 0; background: transparent; padding: .45em .85em; font-family: var(--font); font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink-soft); }
.lang-toggle button[aria-pressed="true"] { background: var(--coral); color: #fff; }
/* Region picker — globe dropdown (Canada / États-Unis). The FR/EN toggle only
shows in Canada. */
.region-picker { position: relative; }
.region-btn {
display: inline-flex; align-items: center; gap: .35em; background: #fff;
border: 1px solid var(--line); border-radius: 999px; padding: .4em .7em;
font-family: var(--font); font-weight: 700; font-size: .82rem; color: var(--ink);
cursor: pointer; line-height: 1;
}
.region-btn:hover { background: var(--cream-2); }
.region-btn .rb-globe { font-size: 1.05rem; }
.region-btn .rb-caret { font-size: .7rem; color: var(--ink-soft); }
.region-menu {
position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60; margin: 0;
padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-sm); box-shadow: var(--shadow-lg); min-width: 190px;
}
.region-menu[hidden] { display: none; }
.region-menu li { margin: 0; }
.region-menu button {
display: flex; align-items: center; gap: .6em; width: 100%; text-align: left;
background: transparent; border: 0; border-radius: 10px; padding: .55em .7em;
font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--ink); cursor: pointer;
}
.region-menu button:hover { background: var(--cream-2); }
.region-menu button[aria-selected="true"] { background: var(--cream-2); }
.region-menu .rm-flag { font-size: 1.15rem; }
html[data-region="us"] .lang-toggle { display: none; }
/* Region-specific content (Québec / Florida). Canada shown by default. */
[data-region-us] { display: none; }
html[data-region="us"] [data-region-ca] { display: none; }
html[data-region="us"] [data-region-us] { display: inline; }
html[data-region="us"] p[data-region-us], html[data-region="us"] div[data-region-us] { display: block; }
.region-note {
display: block; background: #fff; border: 1px solid var(--line);
border-left: 4px solid var(--teal); border-radius: var(--r-sm);
box-shadow: var(--shadow); padding: .7em 1em; font-weight: 600;
font-size: .95rem; color: var(--ink); margin: 0 0 1.4rem; max-width: 52ch;
}
html[data-region="us"] .region-note { border-left-color: var(--sun); }
/* ---------- Hero ---------- */
.hero { padding: clamp(1.2rem, 3vw, 2.2rem) 0 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.eyebrow { display: inline-block; background: var(--cream-2); color: var(--coral-dark); font-weight: 700; font-size: .85rem; padding: .4em 1em; border-radius: 999px; margin-bottom: 1rem; }
.hero h1 .hl { color: var(--coral); }
.hero p.lead { font-size: 1.2rem; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-art {
background: linear-gradient(150deg, var(--sun) 0%, var(--coral) 55%, var(--grape) 120%);
border-radius: var(--r-lg); aspect-ratio: 4/3; box-shadow: var(--shadow-lg);
display: grid; place-items: center; position: relative; overflow: hidden;
}
.hero-art .emoji { font-size: clamp(4rem, 12vw, 8rem); filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.hero-art .blob { position: absolute; border-radius: 50%; opacity: .35; }
.hero-art .blob.b1 { width: 160px; height: 160px; background: #fff; top: -40px; right: -30px; }
.hero-art .blob.b2 { width: 120px; height: 120px; background: var(--teal); bottom: -30px; left: -20px; opacity:.5; }
/* Hero holding a real photo instead of the emoji art */
.hero-art-photo { background: none; }
.hero-art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Sections ---------- */
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head { text-align: center; max-width: 50ch; margin: 0 auto 2.5rem; }
.section-head p { margin-inline: auto; color: var(--ink-soft); }
.center-cta { text-align: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
/* Feature / step cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 1.6rem; box-shadow: var(--shadow);
transition: transform .14s ease, box-shadow .14s ease;
}
.card-placeholder { background: transparent; border-style: dashed; box-shadow: none; }
.card .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.card-note { display: block; margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); opacity: .75; }
.tint-coral { background: #ffe7e2; }
.tint-teal { background: #d9f4f0; }
.tint-sun { background: #fff0cf; }
.tint-grape { background: #ebe5ff; }
/* Resource cards (ressources.html) — same shell as .card, with a link pinned
at the bottom so cards in a row line up regardless of description length. */
.res-card { display: flex; flex-direction: column; }
.res-card h3 { margin-bottom: .5rem; line-height: 1.3; }
.res-card p { flex: 1 1 auto; }
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.res-link {
display: inline-block; margin-top: 1.1rem; font-weight: 700;
color: var(--teal-dark); text-decoration: none;
}
.res-link:hover { text-decoration: underline; }
.res-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.res-host {
display: block; margin-top: .25rem; font-size: .8rem; font-weight: 600;
color: var(--ink-soft); text-decoration: none;
}
/* ---------- Audience / role strip ---------- */
.roles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.role-card { text-align: center; }
.role-card .ico { margin-inline: auto; }
/* ---------- Login ---------- */
.auth-shell { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 3rem 0; }
.role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
.role-pick {
background: #fff; border: 2px solid var(--line); border-radius: var(--r-md);
padding: 1.6rem 1.2rem; text-align: center; cursor: pointer; text-decoration: none; color: var(--ink);
box-shadow: var(--shadow); transition: transform .14s ease, border-color .14s ease;
position: relative;
}
.role-pick:hover { transform: translateY(-4px); border-color: var(--coral); }
.role-pick .ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; margin: 0 auto .9rem; }
.role-pick .soon { position: absolute; top: 12px; right: 12px; font-size: .7rem; font-weight: 700; background: var(--cream-2); color: var(--ink-soft); padding: .25em .6em; border-radius: 999px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 2.4rem; width: min(440px, 92vw); }
.auth-card .ico-lg { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; margin: 0 auto 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.field input {
width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
padding: .85em 1em; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--cream);
}
.field input:focus { outline: none; border-color: var(--teal); background: #fff; }
.muted { color: var(--ink-soft); font-size: .92rem; }
.center { text-align: center; }
/* ---------- App shell (dashboard) ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side {
background: #fff; border-right: 1px solid var(--line); padding: 1.4rem 1rem;
display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 0; height: 100vh;
}
.side .brand { padding: .3rem .5rem 1.2rem; }
.nav-link {
display: flex; align-items: center; gap: .7rem; padding: .75em 1em; border-radius: var(--r-sm);
text-decoration: none; color: var(--ink-soft); font-weight: 600; cursor: pointer;
}
.nav-link:hover { background: var(--cream-2); color: var(--ink); }
.nav-link.active { background: var(--coral); color: #fff; }
.nav-link .ni { font-size: 1.2rem; width: 1.4em; text-align: center; }
.side .grow { flex: 1; }
.main { padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 3rem; }
.appbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.appbar h1 { margin: 0; font-size: 1.6rem; }
/* Music on/off toggle in the rewards shop header */
.rw-music-btn { margin-left: auto; flex: none; }
.rw-music-btn .rw-music-ico { font-size: 1.05em; }
/* Student greeting / avatar */
.greet { display: flex; align-items: center; gap: 1rem; background: linear-gradient(120deg, var(--cream-2), #fff); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; margin-bottom: 1.8rem; box-shadow: var(--shadow); }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg, var(--sun), var(--coral)); flex: none; }
/* Avatar as an emoji-picker button */
.avatar.editable { position: relative; cursor: pointer; border: none; padding: 0; font-family: var(--font); transition: transform .12s ease; }
.avatar.editable::after { content: "✏️"; position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; font-size: .75rem; }
.avatar.editable:hover { transform: scale(1.06); }
.avatar.editable:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* Emoji picker modal */
.emoji-modal { position: fixed; inset: 0; z-index: 100; background: rgba(58, 58, 74, .45); display: grid; place-items: center; padding: 1rem; }
.emoji-modal[hidden] { display: none; }
.emoji-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.4rem 1.6rem 1.6rem; width: min(440px, 100%); }
.emoji-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.emoji-card-head h3 { margin: 0; font-size: 1.25rem; }
.emoji-close { background: var(--cream-2); border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--ink-soft); cursor: pointer; font-family: var(--font); flex: none; }
.emoji-close:hover { background: var(--line); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .5rem; max-height: 52vh; overflow-y: auto; }
.emoji-opt { aspect-ratio: 1; border: 2px solid var(--line); background: #fff; border-radius: 14px; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; transition: transform .1s ease, border-color .1s ease, background .1s ease; }
.emoji-opt:hover { transform: scale(1.12); border-color: var(--teal); }
.emoji-opt:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.emoji-opt[aria-pressed="true"] { border-color: var(--teal); background: var(--cream-2); }
.greet .who h2 { margin: 0; }
.greet .who p { margin: .2rem 0 0; color: var(--ink-soft); }
/* Stat chips */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); }
.stat .num { font-size: 1.8rem; font-weight: 700; }
.stat .lbl { color: var(--ink-soft); font-size: .9rem; }
/* Module grid */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.mod {
display: block; text-decoration: none; color: var(--ink); background: #fff;
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease;
}
.mod:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mod .top { padding: 1.3rem 1.3rem 1rem; display: flex; align-items: flex-start; gap: .9rem; }
.mod .top .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25em .7em; border-radius: 999px; }
.tag-read { background: #d9f4f0; color: var(--teal-dark); }
.tag-write { background: #ffe7e2; color: var(--coral-dark); }
.tag-level { background: var(--cream-2); color: var(--ink-soft); margin-left: .35rem; }
.mod h3 { margin: .3rem 0 .25rem; }
.mod .desc { color: var(--ink-soft); font-size: .95rem; margin: 0 1.3rem; }
.mod .foot { padding: 1rem 1.3rem 1.3rem; }
.bar { height: 10px; background: var(--cream-2); border-radius: 999px; overflow: hidden; margin: .8rem 0 .4rem; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--sun)); }
.mod .meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); }
/* ---------- Module detail ---------- */
.mod-hero { border-radius: var(--r-lg); padding: 2rem; color: #fff; box-shadow: var(--shadow-lg); margin-bottom: 2rem; }
.mod-hero .ico-lg { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 2.2rem; background: rgba(255,255,255,.25); margin-bottom: 1rem; }
.mod-hero h1 { color: #fff; }
.mod-hero p { color: rgba(255,255,255,.95); max-width: 60ch; }
.back-link { display: inline-flex; align-items: center; gap: .4em; color: var(--ink-soft); text-decoration: none; font-weight: 600; margin-bottom: 1rem; }
.back-link:hover { color: var(--ink); }
.lesson-list { display: flex; flex-direction: column; gap: .9rem; }
.lesson {
display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); cursor: pointer;
transition: transform .12s ease;
}
.lesson:hover { transform: translateX(4px); }
.lesson .state { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; flex: none; font-weight: 700; }
.state.done { background: var(--teal); color: #fff; }
.state.now { background: var(--sun); color: var(--ink); }
.state.lock { background: var(--cream-2); color: var(--ink-soft); }
.lesson .l-body { flex: 1; }
.lesson .l-body h3 { margin: 0; font-size: 1.05rem; }
.lesson .l-body p { margin: .1rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.lesson .l-go { color: var(--ink-soft); font-weight: 700; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; box-shadow: var(--shadow); margin-bottom: 1.6rem; }
/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 2.5rem 0; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.footer a { color: #fff; opacity: .85; text-decoration: none; }
.footer .brand { color: #fff; }
.footer .logo { box-shadow: none; }
/* ============================================================
Parent dashboard
Big, friendly, low-text. Designed to be readable at a glance.
============================================================ */
/* Child switcher (avatar tabs) */
.kids { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; }
.kid-tab {
display: flex; align-items: center; gap: .8rem; background: #fff; border: 2px solid var(--line);
border-radius: 999px; padding: .5rem .9rem .5rem .55rem; cursor: pointer; font-family: var(--font);
font-weight: 700; font-size: 1rem; color: var(--ink-soft);
transition: transform .12s ease, border-color .12s ease;
}
.kid-tab:hover { transform: translateY(-2px); }
.kid-tab .kid-face { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
font-size: 1.5rem; background: linear-gradient(135deg, var(--sun), var(--coral)); flex: none; }
.kid-tab .kid-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.kid-tab .kid-meta small { font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.kid-tab[aria-pressed="true"] { border-color: var(--coral); color: var(--ink); box-shadow: var(--shadow); }
.kid-tab[aria-pressed="true"] .kid-face { box-shadow: 0 0 0 4px rgba(255,122,107,.18); }
/* Hero summary banner with progress ring */
.parent-hero {
display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
background: linear-gradient(120deg, var(--cream-2), #fff);
border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.6rem 1.8rem; margin-bottom: 1.8rem; box-shadow: var(--shadow);
}
.parent-hero .who { flex: 1; min-width: 220px; }
.parent-hero .who h2 { margin: 0; }
.parent-hero .who p { margin: .3rem 0 0; color: var(--ink-soft); }
/* Progress ring (SVG donut) */
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-bg { stroke: var(--cream-2); }
.ring .ring-fg { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring .ring-num {
position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
font-weight: 700; line-height: 1.1;
}
.ring .ring-num b { font-size: 1.9rem; display: block; }
.ring .ring-num span { font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
/* Section headings inside dashboard */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 1rem; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: 1.35rem; }
.sec-head .sub { color: var(--ink-soft); font-size: .92rem; }
/* Parent module list (read-only progress cards) */
.pmods { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.pmod { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.pmod .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.pmod .pm-body { flex: 1; min-width: 0; }
.pmod .pm-body h3 { margin: .15rem 0 .1rem; font-size: 1.08rem; }
.pmod .pm-foot { margin-top: .6rem; }
.pmod .meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); margin-top: .35rem; }
.done-badge { display: inline-flex; align-items: center; gap: .35em; background: #e3f7f3; color: var(--teal-dark);
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .25em .7em; border-radius: 999px; }
/* Recent results list */
.results { display: flex; flex-direction: column; gap: .8rem; }
.result-row { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: .9rem 1.2rem; box-shadow: var(--shadow); }
.result-row .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.result-row .r-body { flex: 1; min-width: 0; }
.result-row .r-body h3 { margin: 0; font-size: 1rem; }
.result-row .r-body p { margin: .1rem 0 0; color: var(--ink-soft); font-size: .85rem; }
.result-row .r-score { text-align: right; flex: none; }
.result-row .stars { font-size: 1rem; letter-spacing: .05em; }
.result-row .pct { font-weight: 700; font-size: 1.1rem; }
.result-row .pct.ok { color: var(--teal-dark); }
.result-row .pct.mid { color: var(--sun-dark); }
/* Empty state */
.empty { text-align: center; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line);
border-radius: var(--r-md); padding: 2rem; }
/* ---------- i18n visibility ---------- */
[data-lang-en] { display: none; }
html[lang="en"] [data-lang-fr] { display: none; }
html[lang="en"] [data-lang-en] { display: inline; }
html[lang="en"] p[data-lang-en],
html[lang="en"] h2[data-lang-en],
html[lang="en"] div[data-lang-en] { display: block; }
/* ============================================================
Rewards: star badge, balance hero, emoji shop
============================================================ */
/* Star badge in the student greeting */
.star-badge { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: .1rem; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, #fff6dc, #ffe9b0); border: 2px solid var(--sun); border-radius: var(--r-md); padding: .55rem 1rem; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.star-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.star-badge:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.star-badge .sb-ico { font-size: 1.5rem; line-height: 1; }
.star-badge .sb-num { font-size: 1.5rem; font-weight: 700; color: var(--sun-dark); line-height: 1; }
.star-badge .sb-lbl { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
/* Rewards page hero */
.rewards-hero { display: flex; align-items: center; gap: 1.3rem; background: linear-gradient(120deg, #fff1c6, #ffe2ec); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.8rem; margin-bottom: 1.8rem; box-shadow: var(--shadow); }
.rewards-hero .rh-star { font-size: 3.2rem; flex: none; filter: drop-shadow(0 4px 8px rgba(242,171,31,.4)); animation: rh-bob 3s ease-in-out infinite; }
@keyframes rh-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.rewards-hero h1 { margin: 0; }
.rewards-hero p { margin: .35rem 0 0; color: var(--ink-soft); }
.rewards-hero strong { color: var(--sun-dark); font-size: 1.15em; }
.rw-intro { color: var(--ink-soft); max-width: var(--maxread); margin: -.6rem 0 1.6rem; }
/* Tier section */
.rw-tier { margin-bottom: 2.2rem; }
.rw-tier-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.rw-tier-title { margin: 0; font-size: 1.3rem; }
.rw-tier-cost { display: inline-flex; align-items: baseline; gap: .35em; background: var(--cream-2); color: var(--ink); font-weight: 700; font-size: .9rem; padding: .3em .8em; border-radius: 999px; }
.rw-tier-eff { color: var(--ink-soft); font-weight: 600; }
.rw-tier-desc { margin: 0 0 1rem; color: var(--ink-soft); font-size: .95rem; max-width: 60ch; }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
/* Premium emoji card */
.rw-card { background: #fff; border: 2px solid var(--line); border-radius: var(--r-md); padding: 1.1rem .9rem; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: .5rem; transition: transform .12s ease, box-shadow .12s ease; }
.rw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rw-card .rw-emoji { font-size: 3rem; line-height: 1; }
.rw-card .rw-name { font-weight: 600; font-size: .98rem; }
.rw-card .rw-price { font-weight: 700; color: var(--sun-dark); }
.rw-card .rw-owned-tag { font-size: .85rem; color: var(--teal-dark); font-weight: 700; }
/* Tier accents (left edge color) */
.rw-card.tier-cool { border-top: 4px solid var(--teal); }
.rw-card.tier-rare { border-top: 4px solid var(--sun); }
.rw-card.tier-epic { border-top: 4px solid var(--grape); }
.rw-card.tier-legend { border-top: 4px solid var(--coral); }
.rw-card.tier-myth { border-top: 4px solid #b76ef0; background: linear-gradient(180deg, #fdf8ff, #fff); }
/* Verrouillé (pas assez d'étoiles) : l'emoji reste en PLEINE couleur —
le verrou se lit par la bordure pointillée, le cadenas au coin et le
message « Pas assez d'étoiles », pas en délavant le pictogramme. */
.rw-card.locked { position: relative; border-style: dashed; background: #fcfaf6; }
.rw-card.locked::after { content: "🔒"; position: absolute; top: .45rem; right: .55rem; font-size: .8rem; }
.rw-card.locked .rw-name { color: var(--ink-soft); }
.rw-card.owned { background: var(--cream); }
.rw-card.equipped { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43,179,163,.18), var(--shadow); }
/* Buttons + state pills inside cards */
.rw-btn { font-family: var(--font); font-weight: 700; border: none; border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; font-size: .95rem; transition: transform .1s ease, filter .1s ease; margin-top: auto; }
.rw-btn:hover { transform: scale(1.04); filter: brightness(1.04); }
.rw-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.rw-btn.buy { background: linear-gradient(135deg, var(--sun), var(--sun-dark)); color: var(--ink); }
.rw-btn.equip { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; }
.rw-state { font-weight: 700; font-size: .9rem; margin-top: auto; }
.rw-state.muted { color: var(--ink-soft); font-weight: 600; }
/* Premium emojis stand out in the avatar picker */
.emoji-opt.premium { border-color: var(--sun); background: #fffaf0; position: relative; }
.emoji-opt.premium::after { content: "✦"; position: absolute; top: -6px; right: -6px; font-size: .7rem; color: var(--sun-dark); background: #fff; border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; box-shadow: var(--shadow); }
/* ---- Avatars vivants : Épique + Légendaire seulement ----
Ils flottent doucement et « clignent des yeux » (bref écrasement vertical
du pictogramme). Visible dans la boutique (cartes de ces deux sections)
et dans la bulle de l'élève quand un tel avatar est équipé. */
@keyframes avatar-epic-life {
0% { transform: translateY(0) rotate(0deg) scaleY(1); }
18% { transform: translateY(-4px) rotate(-5deg) scaleY(1); }
36% { transform: translateY(0) rotate(4deg) scaleY(1); }
48% { transform: translateY(-1px) rotate(0deg) scaleY(1); }
53% { transform: translateY(0) rotate(0deg) scaleY(.15); } /* clignement */
58% { transform: translateY(0) rotate(0deg) scaleY(1); }
78% { transform: translateY(-3px) rotate(0deg) scaleY(1); }
100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}
@keyframes avatar-legend-life {
0% { transform: translateY(0) rotate(0deg) scale(1) scaleY(1); filter: drop-shadow(0 0 0 rgba(242, 171, 31, 0)); }
22% { transform: translateY(-5px) rotate(-4deg) scale(1.06) scaleY(1); filter: drop-shadow(0 0 9px rgba(242, 171, 31, .7)); }
42% { transform: translateY(-1px) rotate(3deg) scale(1) scaleY(1); filter: drop-shadow(0 0 3px rgba(242, 171, 31, .35)); }
50% { transform: translateY(0) rotate(0deg) scale(1) scaleY(.15); filter: drop-shadow(0 0 2px rgba(242, 171, 31, .3)); } /* clignement */
56% { transform: translateY(0) rotate(0deg) scale(1) scaleY(1); filter: drop-shadow(0 0 4px rgba(242, 171, 31, .4)); }
76% { transform: translateY(-4px) rotate(4deg) scale(1.04) scaleY(1); filter: drop-shadow(0 0 8px rgba(242, 171, 31, .6)); }
100% { transform: translateY(0) rotate(0deg) scale(1) scaleY(1); filter: drop-shadow(0 0 0 rgba(242, 171, 31, 0)); }
}
.rw-card.tier-epic .rw-emoji,
.rw-card.tier-legend .rw-emoji { transform-origin: 50% 80%; }
.rw-card.tier-epic .rw-emoji { animation: avatar-epic-life 3.6s ease-in-out infinite; }
.rw-card.tier-legend .rw-emoji { animation: avatar-legend-life 3.2s ease-in-out infinite; }
/* La bulle de l'élève : seul le span du pictogramme bouge, pas le cercle */
.av-emo { display: inline-block; transform-origin: 50% 80%; }
.av-emo.live-epic { animation: avatar-epic-life 3.6s ease-in-out infinite; }
.av-emo.live-legend { animation: avatar-legend-life 3.2s ease-in-out infinite; }
/* ---- Signatures Légendaires : chaque emoji a SON détail unique ----
Ce qui justifie le prix : la couronne scintille avec des étincelles, le
robot bouge par à-coups mécaniques et flashe des yeux, l'alien lévite et
fait un double clignement, la soucoupe plane puis file (avec son rayon),
la planète a une étoile en orbite, la flamme vacille comme un vrai feu. */
/* 👑 Couronne : éclats de brillance + étincelles ✨ autour */
@keyframes legend-crown {
0%, 100% { transform: translateY(0) rotate(0deg); filter: brightness(1) drop-shadow(0 0 0 rgba(242, 171, 31, 0)); }
20% { transform: translateY(-2px) rotate(-4deg); filter: brightness(1.15) drop-shadow(0 0 8px rgba(242, 171, 31, .8)); }
35% { transform: translateY(-2px) rotate(0deg); filter: brightness(1.5) drop-shadow(0 0 12px rgba(255, 215, 90, .95)); }
50% { transform: translateY(0) rotate(3deg); filter: brightness(1.05) drop-shadow(0 0 4px rgba(242, 171, 31, .4)); }
70% { transform: translateY(-1px) rotate(0deg); filter: brightness(1.35) drop-shadow(0 0 9px rgba(255, 215, 90, .85)); }
}
@keyframes legend-sparkle {
0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.rw-card.tier-legend .rw-emoji.lg-crown, .av-emo.lg-crown { position: relative; animation: legend-crown 2.4s ease-in-out infinite; }
.lg-crown::before { content: "✨"; position: absolute; top: -.18em; left: -.32em; font-size: .42em; animation: legend-sparkle 1.8s ease-in-out infinite; pointer-events: none; }
.lg-crown::after { content: "✨"; position: absolute; top: .15em; right: -.38em; font-size: .34em; animation: legend-sparkle 1.8s ease-in-out infinite .9s; pointer-events: none; }
/* 🤖 Robot : à-coups mécaniques (la tête « clique ») + flash des yeux */
@keyframes legend-robot {
0%, 14% { transform: rotate(0deg) translateY(0); filter: brightness(1); }
16%, 30% { transform: rotate(-9deg) translateY(0); filter: brightness(1); }
32%, 46% { transform: rotate(9deg) translateY(0); filter: brightness(1); }
48%, 58% { transform: rotate(0deg) translateY(0); filter: brightness(1); }
61%, 65% { transform: rotate(0deg) translateY(-2px); filter: brightness(1.7) drop-shadow(0 0 7px rgba(110, 193, 228, .9)); }
68%, 100% { transform: rotate(0deg) translateY(0); filter: brightness(1); }
}
.rw-card.tier-legend .rw-emoji.lg-robot, .av-emo.lg-robot { animation: legend-robot 3.2s ease-in-out infinite; }
/* 👽 Alien : lévitation avec aura verte + double clignement */
@keyframes legend-alien {
0%, 100% { transform: translateY(0) scaleY(1); filter: drop-shadow(0 0 0 rgba(126, 217, 87, 0)); }
25% { transform: translateY(-6px) scaleY(1); filter: drop-shadow(0 0 10px rgba(126, 217, 87, .8)); }
45% { transform: translateY(-3px) scaleY(1); filter: drop-shadow(0 0 6px rgba(126, 217, 87, .5)); }
49% { transform: translateY(-3px) scaleY(.12); filter: drop-shadow(0 0 6px rgba(126, 217, 87, .5)); }
53% { transform: translateY(-3px) scaleY(1); filter: drop-shadow(0 0 6px rgba(126, 217, 87, .5)); }
57% { transform: translateY(-3px) scaleY(.12); filter: drop-shadow(0 0 6px rgba(126, 217, 87, .5)); }
61% { transform: translateY(-3px) scaleY(1); filter: drop-shadow(0 0 8px rgba(126, 217, 87, .6)); }
85% { transform: translateY(-5px) scaleY(1); filter: drop-shadow(0 0 5px rgba(126, 217, 87, .4)); }
}
.rw-card.tier-legend .rw-emoji.lg-alien, .av-emo.lg-alien { animation: legend-alien 3.6s ease-in-out infinite; }
/* 🛸 Soucoupe : plane en oscillant, file gauche-droite, rayon dessous */
@keyframes legend-ufo {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
15% { transform: translate(0, -3px) rotate(-6deg); }
30% { transform: translate(0, -1px) rotate(5deg); }
40% { transform: translate(0, -2px) rotate(0deg); }
46% { transform: translate(-7px, -4px) rotate(-10deg); }
54% { transform: translate(7px, -4px) rotate(10deg); }
62% { transform: translate(0, -2px) rotate(0deg); }
80% { transform: translate(0, -4px) rotate(0deg); }
}
@keyframes legend-beam {
0%, 100% { opacity: 0; }
40%, 60% { opacity: .8; }
}
.rw-card.tier-legend .rw-emoji.lg-ufo, .av-emo.lg-ufo { position: relative; animation: legend-ufo 4s ease-in-out infinite; }
.lg-ufo::after { content: ""; position: absolute; left: 50%; top: 72%; width: .55em; height: .5em; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(110, 193, 228, .6), transparent); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); animation: legend-beam 4s ease-in-out infinite; pointer-events: none; }
/* 🪐 Planète : balancement majestueux + petite étoile en orbite */
@keyframes legend-planet {
0%, 100% { transform: translateY(0) rotate(-8deg); }
50% { transform: translateY(-4px) rotate(8deg); }
}
@keyframes legend-orbit {
from { transform: rotate(0deg) translateX(.62em) rotate(0deg); }
to { transform: rotate(360deg) translateX(.62em) rotate(-360deg); }
}
.rw-card.tier-legend .rw-emoji.lg-planet, .av-emo.lg-planet { position: relative; animation: legend-planet 4.5s ease-in-out infinite; }
.lg-planet::after { content: "✦"; position: absolute; top: 50%; left: 50%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; font-size: .32em; line-height: 1; color: var(--sun-dark, #f2ab1f); animation: legend-orbit 3.2s linear infinite; pointer-events: none; }
/* 🔥 Flamme : vacille comme un vrai feu (tremblement rapide + lueur) */
@keyframes legend-fire {
0%, 100% { transform: scale(1, 1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 2px rgba(255, 122, 89, .4)); }
10% { transform: scale(.95, 1.08) rotate(-2deg); filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 122, 89, .8)); }
25% { transform: scale(1.05, .94) rotate(2deg); filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 122, 89, .5)); }
40% { transform: scale(.93, 1.1) rotate(-1deg); filter: brightness(1.4) drop-shadow(0 0 12px rgba(255, 170, 60, .9)); }
55% { transform: scale(1.02, .97) rotate(1deg); filter: brightness(1.1) drop-shadow(0 0 5px rgba(255, 122, 89, .6)); }
70% { transform: scale(.96, 1.06) rotate(-2deg); filter: brightness(1.25) drop-shadow(0 0 9px rgba(255, 122, 89, .85)); }
85% { transform: scale(1.04, .95) rotate(2deg); filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 122, 89, .5)); }
}
.rw-card.tier-legend .rw-emoji.lg-fire, .av-emo.lg-fire { animation: legend-fire 1.5s ease-in-out infinite; }
/* ---- Grands spectacles Mythiques : des personnages, encore plus vivants ----
Le double du prix Légendaire = un cran au-dessus : la princesse fait sa
révérence avec un cœur qui s'envole, la danseuse pirouette, l'héroïne
décolle, le prince s'incline dans un éclat royal, l'escrimeur fait sa
fente avec un éclair, l'astronaute flotte en apesanteur. */
/* Filet de sécurité : tout Mythique sans signature reçoit la vie générique */
.rw-card.tier-myth .rw-emoji { transform-origin: 50% 80%; animation: avatar-legend-life 3.2s ease-in-out infinite; }
.av-emo.live-myth { animation: avatar-legend-life 3.2s ease-in-out infinite; }
/* 👸 Princesse : révérence gracieuse, halo rosé, cœur 💖 qui s'envole */
@keyframes mt-princess {
0%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255, 150, 200, 0)); }
18% { transform: translateY(-3px) rotate(-3deg) scaleY(1); filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 150, 200, .6)); }
38% { transform: translateY(0) rotate(2deg) scaleY(1); filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 150, 200, .4)); }
52% { transform: translateY(2px) rotate(0deg) scaleY(.93); filter: brightness(1) drop-shadow(0 0 3px rgba(255, 150, 200, .35)); } /* révérence */
60% { transform: translateY(2px) rotate(0deg) scaleY(.93); filter: brightness(1) drop-shadow(0 0 3px rgba(255, 150, 200, .35)); }
72% { transform: translateY(-3px) rotate(0deg) scaleY(1); filter: brightness(1.25) drop-shadow(0 0 11px rgba(255, 180, 220, .85)); } /* se relève, rayonnante */
}
@keyframes mt-float-up {
0%, 55% { opacity: 0; transform: translateY(.15em) scale(.5); }
65% { opacity: 1; transform: translateY(-.25em) scale(1); }
100% { opacity: 0; transform: translateY(-1em) scale(.9); }
}
.rw-card.tier-myth .rw-emoji.mt-princess, .av-emo.mt-princess { position: relative; animation: mt-princess 3.4s ease-in-out infinite; }
.mt-princess::before { content: "💖"; position: absolute; bottom: .1em; left: -.35em; font-size: .34em; animation: mt-float-up 3.4s ease-in-out infinite; pointer-events: none; }
.mt-princess::after { content: "✨"; position: absolute; top: -.15em; right: -.35em; font-size: .38em; animation: legend-sparkle 1.7s ease-in-out infinite .5s; pointer-events: none; }
/* 💃 Danseuse étoile : pirouette complète + notes de musique 🎶 */
@keyframes mt-dancer {
0% { transform: rotate(360deg) translateY(0); }
8% { transform: rotate(352deg) translateY(-2px); } /* élan en arrière */
14% { transform: rotate(348deg) translateY(0); }
44% { transform: rotate(708deg) translateY(-3px); } /* PIROUETTE ! */
52% { transform: rotate(720deg) translateY(0); }
66% { transform: rotate(714deg) translateY(-2px); }
78% { transform: rotate(722deg) translateY(0); }
90% { transform: rotate(718deg) translateY(-1px); }
100% { transform: rotate(720deg) translateY(0); } /* 720° ≡ 360° : boucle fluide */
}
.rw-card.tier-myth .rw-emoji.mt-dancer, .av-emo.mt-dancer { position: relative; animation: mt-dancer 4s ease-in-out infinite; transform-origin: 50% 60%; }
.mt-dancer::after { content: "🎶"; position: absolute; top: .05em; right: -.42em; font-size: .36em; animation: mt-float-up 4s ease-in-out infinite .3s; pointer-events: none; }
/* 🦸♀️ Super-héroïne : décollage en vol stationnaire + aura de vitesse */
@keyframes mt-hero {
0%, 100% { transform: translateY(0) rotate(0deg) skewX(0deg); filter: drop-shadow(0 0 0 rgba(110, 193, 228, 0)); }
18% { transform: translateY(-8px) rotate(-3deg) skewX(-2deg); filter: drop-shadow(0 6px 5px rgba(58, 58, 74, .22)); }
34% { transform: translateY(-10px) rotate(2deg) skewX(2deg); filter: drop-shadow(0 0 11px rgba(110, 193, 228, .75)); }
52% { transform: translateY(-7px) rotate(-2deg) skewX(-1deg); filter: drop-shadow(0 5px 5px rgba(58, 58, 74, .2)); }
72% { transform: translateY(-9px) rotate(1deg) skewX(1deg); filter: drop-shadow(0 0 8px rgba(110, 193, 228, .6)); }
90% { transform: translateY(-3px) rotate(0deg) skewX(0deg); filter: drop-shadow(0 2px 3px rgba(58, 58, 74, .15)); }
}
@keyframes mt-wind {
0%, 100% { opacity: 0; transform: translate(-50%, 0) scaleY(.5); }
30%, 70% { opacity: .7; transform: translate(-50%, .15em) scaleY(1); }
}
.rw-card.tier-myth .rw-emoji.mt-hero, .av-emo.mt-hero { position: relative; animation: mt-hero 3.6s ease-in-out infinite; }
.mt-hero::after { content: ""; position: absolute; left: 50%; top: 80%; width: .42em; height: .3em; transform: translateX(-50%); background: repeating-linear-gradient(to right, rgba(110, 193, 228, .55) 0, rgba(110, 193, 228, .55) 2px, transparent 2px, transparent 5px); animation: mt-wind 3.6s ease-in-out infinite; pointer-events: none; }
/* 🤴 Prince : s'incline noblement, se redresse dans un éclat royal ✦ */
@keyframes mt-prince {
0%, 100% { transform: rotate(0deg) translateY(0); filter: brightness(1) drop-shadow(0 0 0 rgba(242, 171, 31, 0)); }
16% { transform: rotate(-2deg) translateY(-2px); filter: brightness(1.05) drop-shadow(0 0 3px rgba(242, 171, 31, .3)); }
34% { transform: rotate(11deg) translateY(1px); filter: brightness(1) drop-shadow(0 0 0 rgba(242, 171, 31, 0)); } /* révérence noble */
44% { transform: rotate(11deg) translateY(1px); filter: brightness(1) drop-shadow(0 0 0 rgba(242, 171, 31, 0)); }
58% { transform: rotate(-1deg) translateY(-3px); filter: brightness(1.45) drop-shadow(0 0 11px rgba(255, 215, 90, .9)); } /* éclat royal */
76% { transform: rotate(1deg) translateY(-1px); filter: brightness(1.1) drop-shadow(0 0 4px rgba(242, 171, 31, .4)); }
}
.rw-card.tier-myth .rw-emoji.mt-prince, .av-emo.mt-prince { position: relative; animation: mt-prince 3.8s ease-in-out infinite; transform-origin: 50% 85%; }
.mt-prince::after { content: "✦"; position: absolute; top: -.2em; left: 50%; margin-left: -.1em; font-size: .4em; color: var(--sun-dark, #f2ab1f); animation: legend-sparkle 3.8s ease-in-out infinite 2s; pointer-events: none; }
/* 🤺 Escrimeur : en garde, petits pas… FENTE ! avec éclair ⚡ */
@keyframes mt-fencer {
0%, 10% { transform: translateX(0) scaleX(1) rotate(0deg); }
14% { transform: translateX(-3px) scaleX(.96) rotate(-2deg); } /* recul */
20% { transform: translateX(8px) scaleX(1.08) rotate(2deg); } /* FENTE ! */
26% { transform: translateX(8px) scaleX(1.08) rotate(2deg); }
36% { transform: translateX(0) scaleX(1) rotate(0deg); }
52% { transform: translateX(-2px) scaleX(1) rotate(-2deg); } /* petits pas */
62% { transform: translateX(2px) scaleX(1) rotate(2deg); }
72% { transform: translateX(0) scaleX(1) rotate(0deg); }
100% { transform: translateX(0) scaleX(1) rotate(0deg); }
}
@keyframes mt-slash {
0%, 16%, 32%, 100% { opacity: 0; transform: translateX(0) scale(.5) rotate(0deg); }
20%, 26% { opacity: 1; transform: translateX(.3em) scale(1.05) rotate(12deg); }
}
.rw-card.tier-myth .rw-emoji.mt-fencer, .av-emo.mt-fencer { position: relative; animation: mt-fencer 3.4s ease-in-out infinite; }
.mt-fencer::after { content: "⚡"; position: absolute; top: .18em; right: -.45em; font-size: .4em; animation: mt-slash 3.4s ease-in-out infinite; pointer-events: none; }
/* 👨🚀 Astronaute : flotte en apesanteur, lente dérive tournoyante + étoiles */
@keyframes mt-astro {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(3px, -6px) rotate(9deg); }
50% { transform: translate(-2px, -9px) rotate(-7deg); }
75% { transform: translate(-4px, -4px) rotate(5deg); }
}
.rw-card.tier-myth .rw-emoji.mt-astro, .av-emo.mt-astro { position: relative; animation: mt-astro 6s ease-in-out infinite; }
.mt-astro::before { content: "✦"; position: absolute; top: -.1em; left: -.3em; font-size: .28em; color: var(--teal, #2bb3a3); animation: legend-sparkle 2.6s ease-in-out infinite; pointer-events: none; }
.mt-astro::after { content: "✦"; position: absolute; bottom: .05em; right: -.32em; font-size: .24em; color: var(--sun-dark, #f2ab1f); animation: legend-sparkle 2.6s ease-in-out infinite 1.3s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.rw-card .rw-emoji, .rw-card .rw-emoji::before, .rw-card .rw-emoji::after,
.av-emo, .av-emo::before, .av-emo::after { animation: none !important; }
}
/* Locked avatars: full color, with a star price badge — tap to buy them.
The dashed border + price tag say "locked"; no dimming of the emoji. */
.emoji-opt.locked { position: relative; border-style: dashed; overflow: visible; }
.emoji-price { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--sun-dark); background: #fff; border: 1px solid var(--sun); border-radius: 999px; padding: 2px 6px; box-shadow: var(--shadow); }
/* Reward toast */
.rw-flash { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%) translateY(140%); background: var(--ink); color: #fff; padding: .85rem 1.4rem; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 600; max-width: 90vw; text-align: center; opacity: 0; transition: transform .35s ease, opacity .35s ease; z-index: 60; pointer-events: none; }
.rw-flash.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-art, .hero-photo-col { order: -1; }
.cards, .roles, .role-picker, .stats { grid-template-columns: 1fr; }
.pmods { grid-template-columns: 1fr; }
.parent-hero { justify-content: center; text-align: center; }
.app { grid-template-columns: 1fr; }
/* Let the single grid column shrink to the viewport instead of being forced
wider by a child's min-content (otherwise the dashboard overflows the phone). */
.app > * { min-width: 0; }
/* Stack the sidebar as a full-width vertical menu on phones so the nav links
wrap properly and nothing gets cut off the right edge. */
.side { position: static; height: auto; width: 100%; flex-direction: column; flex-wrap: nowrap;
overflow-x: visible; border-right: 0; border-bottom: 1px solid var(--line); }
.side .brand, .side .grow { display: none; }
.side .nav-link { width: 100%; }
/* The "Objectif…" pill is too long to stay on one line on a phone — let it wrap.
Scoped to .progress-block so it beats the base .pb-goal { white-space:nowrap }. */
.progress-block .pb-goal { white-space: normal; }
/* Keep the site search reachable in the collapsed mobile sidebar: show the
.tools bar but only its loupe (the A+/Aa/lang controls stay hidden here). */
.side .tools { display: flex; padding: 0 .3rem !important; }
.side .tools > *:not(.bw-search-btn) { display: none; }
.star-badge { margin-left: 0; flex-direction: row; gap: .4rem; }
.star-badge .sb-lbl { display: none; }
.rewards-hero { flex-direction: column; text-align: center; }
.rw-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
/* Phones: trim the hero so the photo shows quickly and the text isn't oversized. */
@media (max-width: 600px) {
.hero { padding: 1rem 0 .6rem; }
/* Tighten the gap right below the hero buttons so it matches the space above
the hero. The #how heading exists only in English, so in French it leaves an
empty block — hide it on phones so it doesn't inflate the gap. */
#how { padding-top: .6rem; }
html[lang="fr"] #how > .wrap > .section-head { display: none; }
.hero-grid { gap: 1.2rem; }
.hero .hero-topline { font-size: .95rem; margin-bottom: 1rem; }
.hero h1 { font-size: 1.6rem; }
.hero p.lead { font-size: 1rem; }
.hero .region-note { font-size: .9rem; }
.hero-photo-caption { font-size: .9rem; }
/* Center the two hero buttons (Dépistage gratuit / Comment ça marche) on phones. */
.hero-cta { justify-content: center; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ============================================================
Interactive lesson player
============================================================ */
.lesson-body { background: var(--cream); }
.lesson-shell { min-height: 100vh; padding: 1.6rem 0 4rem; }
.lesson-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.lesson-top .back-link { margin: 0; }
.lesson-tools { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.lesson-card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 4vw, 2.4rem);
border-top: 6px solid var(--accent, var(--coral));
}
.lesson-card h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.lesson-card .lead { font-size: 1.15rem; color: var(--ink-soft); }
.lesson-ico {
width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center;
font-size: 2.6rem; margin-bottom: 1rem;
background: color-mix(in srgb, var(--accent) 16%, white);
}
.lesson-card.intro .btn { margin-top: 1rem; }
/* progress dots */
.dots { display: flex; gap: .5rem; margin-bottom: 1rem; }
.dot { width: 28px; height: 8px; border-radius: 999px; background: var(--cream-2); }
.dot.now { background: var(--sun); }
.dot.done { background: var(--accent, var(--teal)); }
.step-label { font-size: .9rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .6rem; }
/* reading passage */
.reading {
position: relative; background: var(--cream); border: 1px dashed var(--line);
border-radius: var(--r-md); padding: 1.2rem 1.3rem; margin-bottom: 1.4rem;
}
.reading p { margin: .2rem 0 0; font-size: 1.25rem; line-height: 1.9; max-width: none; }
.listen {
display: inline-flex; align-items: center; gap: .4em; float: right; margin: 0 0 .4rem .8rem;
background: var(--teal); color: #fff; border: 0; border-radius: 999px;
padding: .5em 1em; font-family: var(--font); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.listen:hover { background: var(--teal-dark); }
/* Pendant la lecture vocale : le bouton pulse (recliquer pour arrêter). */
.listen.listening { background: var(--teal-dark); animation: listenPulse 1.1s ease-in-out infinite; }
@keyframes listenPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
/* Standalone listen button for questions without a reading passage —
keeps read-aloud available on every step. */
.listen-row { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.listen-row .listen { float: none; margin: 0; }
/* reading-speed control (lesson topbar) */
.speed { display: inline-flex; align-items: center; gap: .15rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .35rem; }
.speed-lbl { font-size: .95rem; padding: 0 .15rem; }
.speed-step { border: 0; background: transparent; border-radius: 999px; padding: .3em .45em; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.speed-step:hover { background: var(--cream-2); }
.speed-step:disabled { opacity: .35; cursor: default; }
.speed-val { border: 0; background: var(--teal); color: #fff; border-radius: 999px; padding: .35em .6em; font-family: var(--font); font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; min-width: 3.2em; text-align: center; }
.speed-val:hover { background: var(--teal-dark); }
.question { font-size: clamp(1.25rem, 3.5vw, 1.6rem); margin: 0 0 1.1rem; }
/* options */
.opts { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; }
.opt {
display: flex; align-items: center; gap: .9rem; text-align: left; width: 100%;
background: #fff; border: 2px solid var(--line); border-radius: var(--r-md);
padding: 1em 1.1em; font-family: var(--font); font-size: 1.1rem; color: var(--ink); cursor: pointer;
transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.opt:hover { border-color: var(--accent, var(--coral)); transform: translateX(3px); }
.opt .opt-mark {
width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
background: var(--cream-2); font-weight: 700; color: var(--ink-soft);
}
.opt.sel { border-color: var(--accent, var(--coral)); background: var(--cream-2); }
.opt.sel .opt-mark { background: var(--accent, var(--coral)); color: #fff; }
.opt.ok { border-color: var(--teal); background: #e3f7f3; }
.opt.ok .opt-mark { background: var(--teal); color: #fff; }
.opt.no { border-color: var(--coral); background: #ffe9e5; }
.opt.no .opt-mark { background: var(--coral); color: #fff; }
/* feedback */
.feedback { border-radius: var(--r-md); padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; }
.feedback p { margin: .3rem 0 0; }
.feedback.good { background: #e3f7f3; border: 1px solid #b7e8df; }
.feedback.bad { background: #fff4cf; border: 1px solid #ffe39a; }
.step-actions { display: flex; justify-content: flex-end; }
.step-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
/* Timed hint — locked for 45s of thinking, then unlocks */
.hint-zone { margin: 0 0 1.2rem; text-align: center; }
.hint-btn {
display: inline-flex; align-items: center; gap: .5em; font-family: var(--font);
font-weight: 700; font-size: 1rem; cursor: pointer; line-height: 1;
padding: .75em 1.3em; border-radius: 999px; border: 2px solid var(--line);
background: #fff; color: var(--ink-soft);
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hint-btn[disabled] { cursor: not-allowed; opacity: .9; }
.hint-btn .hint-count { font-weight: 800; color: var(--coral-dark); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: left; }
.hint-btn.ready {
background: var(--sun); border-color: var(--sun); color: var(--ink);
box-shadow: 0 8px 18px rgba(255,194,71,.4); animation: hintReady .5s ease;
}
.hint-btn.ready:hover { transform: translateY(-2px); background: var(--sun-dark); }
@keyframes hintReady { from { transform: scale(.92); } to { transform: scale(1); } }
.hint-wait { margin: .55rem auto 0; font-size: .85rem; color: var(--ink-soft); }
.hint-box {
text-align: left; background: #fff4cf; border: 1px solid #ffe39a;
border-radius: var(--r-md); padding: 1rem 1.2rem;
}
.hint-box strong { display: block; }
.hint-box p { margin: .3rem 0 0; }
/* done screen */
.lesson-card.done .stars { font-size: 3.4rem; margin-bottom: .4rem; }
.done-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
@media (max-width: 560px) {
.listen { float: none; display: inline-flex; margin: 0 0 .6rem; }
.step-actions, .done-actions { justify-content: stretch; }
.step-actions .btn { width: 100%; justify-content: center; }
}
/* ---------- Results dashboard (Parent + Teacher) ---------- */
/* Teacher student picker */
.student-tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.student-tab { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5em 1em; box-shadow: var(--shadow); font-weight: 600; font-size: .95rem; }
.student-tab.active { background: var(--grape); color: #fff; border-color: transparent; }
.student-tab.muted { color: var(--ink-soft); cursor: pointer; }
/* Time chip — the headline "how long it took" indicator */
.time-chip { display: inline-flex; align-items: center; gap: .3em; background: var(--cream-2); color: var(--ink); font-weight: 700; font-size: .9rem; padding: .4em .85em; border-radius: 999px; white-space: nowrap; }
.time-chip.lg { background: #d9f4f0; color: var(--teal-dark); font-size: 1rem; flex: none; }
.time-chip.sm { background: var(--cream); color: var(--ink-soft); font-weight: 600; font-size: .82rem; padding: .25em .65em; flex: none; }
/* Per-module result cards */
.results-list { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.result-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); }
.result-card .rc-head { display: flex; align-items: flex-start; gap: .9rem; }
.result-card .rc-head .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.result-card .rc-id { flex: 1; min-width: 0; }
.result-card .rc-id h3 { margin: .35rem 0 0; }
.result-card .rc-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 .2rem; }
.rc-lessons { list-style: none; margin: .7rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.rc-lessons li { display: flex; align-items: center; gap: .7rem; }
.rc-lessons .ll-name { flex: 1; min-width: 0; font-size: .95rem; }
.rc-lessons .ll-score { font-weight: 700; font-size: .82rem; color: var(--teal-dark); background: #d9f4f0; padding: .2em .6em; border-radius: 999px; flex: none; }
/* Not-yet-started modules */
.results-empty .tag-soft { background: var(--cream-2); color: var(--ink-soft); display: inline-block; margin: .25rem .35rem 0 0; }
@media (max-width: 560px) {
.result-card .rc-head { flex-wrap: wrap; }
.result-card .time-chip.lg { margin-top: .3rem; }
}
/* ---------- Teacher "Mes élèves": class roster ---------- */
.student-list { display: grid; gap: .8rem; }
.student-card {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
width: 100%; text-align: left; font-family: var(--font); color: var(--ink);
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
padding: .95rem 1.2rem; box-shadow: var(--shadow); cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.student-card:hover { transform: translateY(-2px); border-color: var(--grape); box-shadow: var(--shadow-lg); }
.student-card .kid-face { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
font-size: 1.5rem; flex: none; background: linear-gradient(135deg, var(--sun), var(--coral)); }
.student-card .sc-id { flex: 1 1 150px; min-width: 0; }
.student-card .sc-id h3 { margin: 0; font-size: 1.05rem; }
.student-card .sc-id small { color: var(--ink-soft); font-size: .8rem; }
.student-card .sc-progress { flex: 1 1 170px; min-width: 0; }
.student-card .sc-progress .bar { margin: 0; }
.student-card .sc-progress small { color: var(--ink-soft); font-size: .8rem; display: block; margin-top: .35rem; }
.student-card .sc-score { flex: none; font-weight: 700; font-size: 1.15rem; min-width: 3ch; text-align: right; }
.student-card .time-chip { flex: none; }
.student-card .sc-go { flex: none; margin-left: auto; color: var(--ink-soft); font-size: 1.3rem; }
@media (max-width: 560px) {
.student-card .sc-go { display: none; }
.student-card .sc-progress { flex-basis: 100%; order: 5; }
}
/* ============================================================
Public top-bar navigation (marketing pages)
============================================================ */
.mainnav { display: flex; align-items: center; gap: .3rem; flex: 1 1 auto; justify-content: space-evenly; }
.mainnav a {
text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .98rem;
padding: .45em .85em; border-radius: 999px; line-height: 1; white-space: nowrap;
}
.mainnav a:hover { background: var(--cream-2); color: var(--ink); }
.mainnav a[aria-current="page"] { background: var(--cream-2); color: var(--ink); }
/* One inline row: logo (left), nav tabs right beside it, then the search loupe and
Se connecter pushed to the right. The bar can still wrap on narrow screens
instead of overflowing (no sideways scroll), in FR or EN. */
.topbar .wrap { flex-wrap: wrap; row-gap: .5rem; }
.topbar .tools { margin-left: auto; }
/* The nav grows to fill the row, so the spacer is no longer needed on desktop —
hiding it lets the tabs spread evenly instead of leaving a gap before "Se connecter". */
.topbar .spacer { display: none; }
@media (max-width: 980px) { .mainnav { display: none; } }
/* On narrow screens, keep everything on one row: brand (logo + Tandemo) on the
left, then the menu, loupe and Se connecter pushed to the right. */
@media (max-width: 760px) {
.topbar .wrap { flex-wrap: nowrap; justify-content: flex-start; gap: .6rem; }
.topbar .spacer { display: none; }
.topbar .tools { margin-left: auto; flex-wrap: nowrap; gap: .35rem; }
}
/* Shrink the brand and controls so the single row fits small phones. */
@media (max-width: 560px) {
.brand { font-size: 1.05rem; gap: .45rem; }
.brand .logo { width: 30px; height: 30px; font-size: 1rem; border-radius: 9px; }
.topbar .tools .btn-primary { padding: .55em .85em; font-size: .85rem; }
.bw-menu-btn, .bw-search-btn { padding: .35em .42em; }
}
/* ============================================================
Human-support highlight (home page)
============================================================ */
.support-panel {
background: linear-gradient(140deg, var(--teal) 0%, var(--grape) 100%);
color: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: clamp(1.8rem, 5vw, 3rem);
}
.support-head { text-align: center; max-width: 56ch; margin: 0 auto 1.8rem; }
.support-top {
display: grid; grid-template-columns: minmax(200px, 300px) 1fr;
gap: clamp(1.5rem, 4vw, 2.8rem); align-items: center; margin-bottom: 1.8rem;
}
.support-top .support-head { text-align: left; margin: 0; max-width: none; }
.support-top .support-head p { margin-inline: 0; }
.support-photo img { width: 100%; border-radius: var(--r-md); display: block; box-shadow: var(--shadow-lg); }
.support-head h2 { color: #fff; }
.support-head p { color: rgba(255,255,255,.92); margin-inline: auto; }
/* Founder signature sits on the gradient panel: drop the white .region-note box
(it made the white signature text invisible on white) and keep it as a plain
readable line on the gradient. */
.support-head .region-note { background: transparent; border: 0; box-shadow: none;
padding: .2em 0 0; margin: 0; max-width: none; color: rgba(255,255,255,.92); }
.eyebrow-light { background: rgba(255,255,255,.22); color: #fff; }
.support-list {
list-style: none; margin: 0 auto; padding: 0; max-width: 880px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.support-list li {
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
border-radius: var(--r-md); padding: 1.2rem 1.2rem 1.3rem;
display: flex; flex-direction: column; gap: .6rem; font-weight: 600; line-height: 1.4;
}
.support-list .si-ico {
width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
font-size: 1.7rem; background: rgba(255,255,255,.22);
}
.support-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
@media (max-width: 760px) {
.support-list { grid-template-columns: 1fr; }
.support-top { grid-template-columns: 1fr; }
.support-top .support-head { text-align: center; }
.support-top .support-head p { margin-inline: auto; }
.support-photo { max-width: 280px; margin: 0 auto; }
}
/* ============================================================
Team page (equipe.html)
============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.team-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.team-card.team-founder { border-color: var(--coral); box-shadow: var(--shadow-lg); }
/* The founder card belongs to the Québec (Canada-French) team only. French content
renders solely in the Canada region, so gate the card on the French language. */
.team-founder { display: none; }
html[lang="fr"] .team-founder { display: flex; }
.tc-photo {
position: relative; aspect-ratio: 4/3; display: grid; place-items: center;
background: linear-gradient(135deg, var(--cream-2), #fff);
border-bottom: 1px solid var(--line);
}
/* Image placeholder — swap for an ![]()
.
No AI-generated faces; drop a real photo into assets/team/. */
.tc-photo .photo-ph { font-size: 3rem; opacity: .55; }
.tc-photo .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder-badge {
position: absolute; top: 12px; left: 12px; background: var(--coral); color: #fff;
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: .3em .8em; border-radius: 999px;
}
.tc-body { padding: 1.4rem 1.5rem 1.6rem; }
.tc-body h2 { font-size: 1.3rem; margin: 0 0 .1rem; }
.tc-role { color: var(--teal-dark); font-weight: 700; font-size: .92rem; margin: 0 0 .8rem; }
.tc-quals { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.tc-quals li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--ink-soft); }
.tc-quals li::before { content: "✔"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.tc-bio { font-size: .98rem; color: var(--ink); margin: 0; }
/* ============================================================
Plans page (forfaits.html)
============================================================ */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; align-items: stretch; }
.plan {
position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow); padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
}
/* Keep the featured card's border 1px (same content width as the others, so the
identical feature rows wrap the same and line up). The coral "2px" look comes
from a 1px outset ring that doesn't affect layout. */
.plan-featured { border-color: var(--coral); box-shadow: var(--shadow-lg), 0 0 0 1px var(--coral); }
.plan-coming { opacity: .72; }
.plan-flag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--coral); color: #fff; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; padding: .35em .9em; border-radius: 999px;
white-space: nowrap; box-shadow: var(--shadow);
}
.plan-flag-soft { background: var(--ink-soft); }
.plan-name { font-size: 1.35rem; margin: .2rem 0 .2rem; }
.plan-tagline { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; min-height: 3em; margin: 0 0 1rem; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.2rem; }
.plan-price .amount { font-size: 2.3rem; font-weight: 700; line-height: 1; }
.plan-price .per { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.plan-feats { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.plan-feats li { position: relative; padding-left: 1.7rem; line-height: 1.45; font-size: .96rem; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 700; }
/* Premium-only sessions shown as a comparison band: highlighted "Inclus" on
Premium, greyed/locked "Premium" on Signature — same item, same level, so the
upgrade reads instantly. Full-bleed to the card edges (negative side margins
match .plan's 1.6rem horizontal padding). */
.plan-extra { margin-top: auto; margin-inline: -1.6rem; margin-bottom: 1.3rem; padding: .9rem 1.6rem; display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.plan-extra .pe-ico { font-weight: 700; flex: none; }
.plan-extra .pe-tag { display: inline-block; box-sizing: border-box; min-width: 68px; text-align: center; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .22em .6em; border-radius: 999px; margin-left: .15em; vertical-align: 2px; white-space: nowrap; }
.plan-extra-on { background: #ffefec; border-top: 2px solid var(--coral); box-shadow: 0 -2px 14px rgba(255, 122, 107, .22); }
.plan-extra-on .pe-ico { color: var(--coral-dark); }
.plan-extra-on .pe-tag { background: var(--coral); color: #fff; }
.plan-extra-off { background: #f4f2ee; border-top: 2px solid #e7e3db; color: #8a8a98; }
.plan-extra-off .pe-ico { color: #b3b0a6; }
.plan-extra-off .pe-tag { background: #dcd8cf; color: var(--ink-soft); }
.plan .btn[disabled] { opacity: .55; cursor: not-allowed; }
.plan .btn[disabled]:hover { transform: none; }
/* Billing-period toggle (segmented control). Reuses existing tokens only. */
.billing-toggle { display: flex; justify-content: center; margin: .2rem 0 2.2rem; }
.billing-switch {
display: inline-flex; gap: .25rem; padding: .28rem;
background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px;
}
.billing-switch button {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font); font-weight: 700; font-size: .95rem; line-height: 1;
color: var(--ink-soft); background: transparent; border: 0; cursor: pointer;
padding: .55rem 1.1rem; border-radius: 999px; transition: background .15s, color .15s;
}
.billing-switch button:hover { color: var(--ink); }
.billing-switch button[aria-pressed="true"] { background: var(--coral); color: #fff; box-shadow: var(--shadow); }
.billing-switch button:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.billing-save {
background: var(--teal); color: #fff; font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; padding: .22em .6em; border-radius: 999px; white-space: nowrap;
}
/* Period-dependent content. Default state = monthly; .is-annual flips it.
Cards without these hooks (à la carte) are untouched. */
.amount-was { font-size: 1.2rem; font-weight: 600; color: var(--ink-soft); text-decoration: line-through; }
.plan-billing { margin: -.7rem 0 1.1rem; color: var(--ink-soft); font-size: .82rem; line-height: 1.3; }
.feat-note-mark { color: var(--ink-soft); font-weight: 700; }
.plan-fineprint { font-size: .82rem; line-height: 1.5; }
/* The "* Conditions apply" note only applies to the annual plan; hidden monthly. */
.is-monthly .plan-fineprint { display: none; }
/* "illimité / Unlimited" punched in the brand coral on the annual access line. */
.hl-unlim { color: var(--coral-dark); }
.amt-monthly, .acc-monthly, .bill-monthly { display: inline; }
.amt-annual, .acc-annual, .bill-annual, .amount-was { display: none; }
.is-annual .amt-monthly,
.is-annual .acc-monthly,
.is-annual .bill-monthly { display: none; }
.is-annual .amt-annual,
.is-annual .acc-annual,
.is-annual .bill-annual,
.is-annual .amount-was { display: inline; }
/* ============================================================
Founder funnel — founding-member banner + legal page
============================================================ */
/* Founding-member mention at the top of the founder-only prices page
(forfaits-fondateur.html). The one thing that differs from forfaits.html. */
.founder-banner {
margin: 0 0 1.6rem; padding: 1.1rem 1.3rem; text-align: center;
background: linear-gradient(120deg, var(--coral), var(--coral-dark));
color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow);
}
.founder-banner .fb-title { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.founder-banner .fb-sub { display: block; margin-top: .35rem; font-size: .92rem; line-height: 1.45; opacity: .95; }
/* 10-minute founder-offer countdown + expired state (forfaits-fondateur.html). */
.founder-timer { text-align: center; margin: 0 0 1.4rem; font-weight: 700; color: var(--coral-dark); font-size: 1.05rem; }
.founder-timer strong { font-variant-numeric: tabular-nums; }
.founder-expired { max-width: 60ch; margin: 0 auto 1.4rem; padding: 1rem 1.2rem; text-align: center; font-weight: 600; color: var(--ink); background: #f4f2ee; border: 1px solid var(--line); border-radius: var(--r-md); }
.founder-expired[hidden] { display: none; }
/* Offer expired → no purchase control can be clicked. */
.offer-expired .plan .btn { pointer-events: none; opacity: .5; cursor: not-allowed; }
/* ============================================================
Pre-launch additions (launch date Sept 2026 + Founding Family offer)
============================================================ */
/* Sitewide thin launch-date bar, injected at the top of every page by app.js.
Information only — no CTA (kept deliberately quiet). */
.launch-bar {
text-align: center; font-weight: 700; font-size: .92rem; letter-spacing: .01em;
color: #fff; background: linear-gradient(120deg, var(--coral) 0%, var(--coral) 55%, var(--grape) 130%);
padding: .5rem 1rem; line-height: 1.3;
}
.launch-bar a { color: #fff; text-decoration: underline; }
/* ---------- Sticky bottom CTA dock (PHONES ONLY) ----------
Injected by app.js on the marketing pages only. A persistent bar pinned to
the bottom of the screen that follows the visitor up/down the page. Hidden on
tablet/desktop — this is a phone-only test. */
.cta-dock { display: none; }
@media (max-width: 600px) {
/* Transparent container pinned to the bottom; the visible part is the floating
rounded button inside it (with side margins), not an edge-to-edge bar. The
container ignores taps on its margins so they reach the page underneath. */
.cta-dock {
display: flex; justify-content: center;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
padding: 0 12px calc(12px + env(safe-area-inset-bottom));
pointer-events: none;
}
.cta-dock-inner { position: relative; width: 100%; max-width: 460px; pointer-events: auto; }
.cta-dock-link {
display: flex; align-items: center; justify-content: center; gap: .55rem;
text-decoration: none; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.25;
text-align: center; padding: .9em 1em; border-radius: 16px;
background: linear-gradient(120deg, var(--coral) 0%, var(--coral) 55%, var(--grape) 140%);
box-shadow: 0 8px 22px rgba(58,58,74,.28);
}
.cta-dock-link:active { transform: scale(.985); }
.cta-dock-ic { font-size: 1.15rem; flex: none; }
.cta-dock-arrow { font-size: 1.1rem; flex: none; transition: transform .15s ease; }
.cta-dock-link:hover .cta-dock-arrow { transform: translateX(3px); }
/* Small dismiss chip overlapping the button's top-right corner. */
.cta-dock-close {
position: absolute; top: -9px; right: -7px;
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--cream); cursor: pointer;
background: #4a4360; color: #fff; font-size: 1rem; line-height: 1;
display: grid; place-items: center; padding: 0;
}
/* Reserve space so the floating button never hides the page's last content. */
body.has-cta-dock { padding-bottom: 90px; }
}
/* Language / region / accessibility controls moved out of the top bar and down
to the very bottom of the page (injected into the footer by app.js). Visitors
already land in the right country, so these live out of the way. */
.site-controls {
display: flex; align-items: center; justify-content: center; gap: .5rem;
flex-wrap: wrap; flex-basis: 100%; margin-top: .4rem; padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.15);
}
/* On a footerless page (portal/app pages) it stands on its own as a quiet strip. */
.site-controls-floating {
border-top: 1px solid var(--line); background: var(--cream-2);
padding: 1.3rem 1rem; margin-top: 2rem;
}
/* In the footer the dropdown would open past the page bottom — open it upward. */
.site-controls .region-menu { top: auto; bottom: calc(100% + .4rem); }
/* Home page: extra headline + launch line added ABOVE the existing hero, full
width and centered, without touching the current titles below. */
.hero-topline {
max-width: 60ch; margin: 0 auto 1.6rem; text-align: center;
font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 600; line-height: 1.4; color: var(--ink);
}
.hero-topline .hl { color: var(--coral); font-weight: 700; }
/* Caption sitting just under the hero photo. */
.hero-photo-caption {
margin: .9rem 0 0; text-align: center; line-height: 1.4;
font-size: 1rem; color: var(--ink-soft);
}
.hero-photo-caption strong { color: var(--ink); }
/* "Début du programme : mi-septembre 2026" line shown next to each plan's
button, and the matching subtitle under the "Nos forfaits" heading. */
.plan-launch {
display: block; margin: 0 0 .7rem; font-size: .85rem; font-weight: 700;
color: var(--coral-dark); text-align: center;
}
.plans-launch-note {
margin: -.4rem auto 0; font-weight: 700; color: var(--coral-dark); text-align: center;
}
/* Founding Family offer page (offre-fondatrice.html). */
.prelaunch-badge {
display: inline-block; background: var(--sun); color: var(--ink);
font-weight: 700; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase;
padding: .5em 1.1em; border-radius: 999px; box-shadow: var(--shadow);
}
.offer-launch { font-weight: 700; color: var(--coral-dark); font-size: 1.15rem; margin: 1rem 0 .4rem; }
.offer-confirm {
max-width: 60ch; margin: 1.2rem auto; padding: 1rem 1.3rem; text-align: center;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-soft);
}
/* Compact variant + tightened top spacing for forfaits-fondateur.html, where the
banner sits right under the header (visitor just submitted the form). */
.offer-confirm.is-compact {
max-width: 48ch; margin: .2rem auto .9rem; padding: .55rem .9rem; font-size: .9rem;
}
.founder-top { padding-top: clamp(1.1rem, 3vw, 1.8rem); }
.offer-lock {
max-width: 62ch; margin: 1.4rem auto; padding: 1.4rem 1.5rem; text-align: center;
background: linear-gradient(120deg, var(--coral), var(--coral-dark)); color: #fff;
border-radius: var(--r-md); box-shadow: var(--shadow);
}
.offer-lock .ol-title { display: block; font-size: 1.4rem; font-weight: 700; }
.offer-lock .ol-sub { display: block; margin-top: .55rem; font-size: .95rem; line-height: 1.5; opacity: .96; }
.offer-actions { text-align: center; margin: 1.8rem 0 .4rem; }
/* Plans carousel (forfaits-fondateur.html only — scoped to .fp-carousel).
Mobile: one card per view, horizontal swipe + snap. Desktop: all 3 side by
side (no scroll, controls hidden). Overrides .plans-grid's grid display. */
.fp-carousel .plans-grid {
display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
padding: 1.1rem .2rem 1rem; margin-inline: -.2rem; scrollbar-width: none;
}
.fp-carousel .plans-grid::-webkit-scrollbar { display: none; }
.fp-carousel .plans-grid .plan { flex: 0 0 86%; scroll-snap-align: center; }
.fp-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .4rem; }
.fp-arrow {
width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px;
font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
}
.fp-arrow:hover { background: var(--cream-2); }
.fp-arrow:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.fp-dots { display: flex; gap: .5rem; }
.fp-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.fp-dot[aria-current="true"] { background: var(--coral); }
@media (min-width: 760px) {
.fp-carousel .plans-grid .plan { flex: 0 0 calc((100% - 3.2rem) / 3); }
.fp-controls { display: none; }
}
/* Legal / terms page (conditions.html). */
.legal-wrap { max-width: 760px; }
.legal-body h2 { font-size: 1.2rem; margin: 1.8rem 0 .5rem; }
.legal-body p { margin: 0 0 .9rem; color: var(--ink); }
/* Members-only booking modal (forfaits.html) */
.bw-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(58, 58, 74, .45); }
.bw-modal[hidden] { display: none; }
.bw-modal-card { position: relative; width: 100%; max-width: 30rem; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 2.2rem 1.8rem 1.8rem; text-align: center; }
.bw-modal-card h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.bw-modal-card p { margin: 0 0 1.5rem; color: var(--ink-soft); }
.bw-modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.bw-modal-close { position: absolute; top: .5rem; right: .7rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.bw-modal-close:hover { color: var(--ink); }
/* ============================================================
Parent booking + session balance (parent.html)
============================================================ */
.booking-panel {
background: linear-gradient(120deg, var(--cream-2), #fff);
border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.6rem 1.7rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.booking-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
.bc {
display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.bc-num { font-size: 2.1rem; font-weight: 700; line-height: 1; flex: none; min-width: 1.4em; text-align: center; }
.bc-included .bc-num { color: var(--teal-dark); }
.bc-credits .bc-num { color: var(--coral-dark); }
.bc-lbl { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; font-size: .92rem; }
.bc-lbl small { font-weight: 600; color: var(--ink-soft); font-size: .78rem; }
.bc-next-ico { font-size: 1.8rem; flex: none; }
.bc-next .bc-next-title { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.bc-next b { font-size: 1rem; }
.booking-embed { margin-bottom: 1.2rem; }
.booking-embed[hidden] { display: none; }
.embed-ph {
border: 2px dashed var(--line); border-radius: var(--r-md); background: var(--cream);
padding: 2rem 1.4rem; text-align: center; color: var(--ink-soft);
}
.embed-ph .embed-ico { font-size: 2.4rem; display: block; margin-bottom: .5rem; }
.embed-ph p { max-width: 46ch; margin-inline: auto; }
.booking-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.session-list { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .4rem; }
.session-list.muted-list { opacity: .85; }
.session-row {
display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: .9rem 1.2rem; box-shadow: var(--shadow);
}
.session-row .se-date { flex: none; text-align: center; min-width: 7.5rem; }
.session-row .se-date b { display: block; font-size: .92rem; }
.session-row .se-date span { font-size: .8rem; color: var(--ink-soft); }
.session-row .se-body { flex: 1; min-width: 0; }
.session-row .se-body h4 { margin: 0; font-size: 1rem; }
.session-row .se-body p { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 760px) { .booking-counters { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.session-row { flex-wrap: wrap; }
.session-row .se-date { text-align: left; min-width: 0; }
}
/* ============================================================
« Mes séances » — calendar, booking, add-to-calendar
Shared by the student, parent and teacher portals.
============================================================ */
/* Add-to-calendar control (Google + Apple/iPhone .ics) */
.addcal { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }
.addcal-lbl { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.addcal-btn {
display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font); font-weight: 600;
font-size: .82rem; padding: .34em .8em; border-radius: 999px; cursor: pointer;
background: #fff; color: var(--teal-dark); border: 1px solid var(--line); box-shadow: var(--shadow);
text-decoration: none; transition: background .12s ease, transform .12s ease;
}
.addcal-btn:hover { background: var(--cream-2); transform: translateY(-1px); }
/* « Rejoindre la séance » — the permanent Meet link, filled so it reads as the
primary action next to the lighter "Add to calendar" buttons. */
.se-join {
display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
font-family: var(--font); font-weight: 700; font-size: .85rem;
padding: .42em .95em; border-radius: 999px; cursor: pointer; margin-top: .55rem;
background: var(--teal); color: #fff; border: 1px solid transparent;
text-decoration: none; box-shadow: var(--shadow);
transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.se-join:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-md, var(--shadow)); }
.se-join-lg { font-size: .92rem; padding: .5em 1.15em; }
/* Two-column layout: calendar on the left, list on the right */
.seance-layout { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 1.4rem; align-items: start; }
.seance-side { min-width: 0; }
.seance-side .sec-head { margin: 0 0 .8rem; }
@media (max-width: 760px) { .seance-layout { grid-template-columns: 1fr; } }
/* Mini month calendar */
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem 1.2rem; box-shadow: var(--shadow); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal-title { font-weight: 700; font-size: 1.02rem; text-transform: capitalize; }
.cal-nav {
width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink); box-shadow: var(--shadow);
transition: background .12s ease;
}
.cal-nav:hover { background: var(--cream-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dows { margin-bottom: .3rem; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
.cal-cell {
position: relative; aspect-ratio: 1 / 1; border: 0; background: transparent; border-radius: 10px;
font-family: var(--font); font-size: .9rem; color: var(--ink); cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.cal-cell.empty { cursor: default; }
.cal-cell:not(.empty):not(.disabled):hover { background: var(--cream-2); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--sun); font-weight: 700; }
.cal-cell.has { font-weight: 700; }
.cal-cell.has .cd-dot { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.cal-cell.sel { background: var(--teal); color: #fff; }
.cal-cell.sel .cd-dot { background: #fff; }
.cal-cell.disabled { color: #c7c7d2; cursor: not-allowed; }
/* Per-date overrides (teacher calendar): closed day vs. exceptional hours */
.cal-cell.blocked { color: var(--coral-dark); }
.cal-cell.blocked .cd-n { text-decoration: line-through; opacity: .65; }
.cal-cell.blocked .cd-block { position: absolute; top: 3px; right: 5px; font-size: .62rem; font-weight: 700; color: var(--coral); }
.cal-cell.exception { box-shadow: inset 0 0 0 2px var(--teal); }
.cal-cell.exception .cd-exc { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.cal-cell.sel.exception { box-shadow: inset 0 0 0 2px #fff; }
.cal-cell.sel.exception .cd-exc, .cal-cell.sel.blocked .cd-block { color: #fff; background: #fff; }
.cal-cell.sel.blocked .cd-n { color: #fff; }
/* Teacher: per-date management card (shown when a day is tapped) */
.day-manage {
background: linear-gradient(120deg, var(--cream-2), #fff); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 1rem 1.15rem; box-shadow: var(--shadow); margin-bottom: 1.1rem;
}
.dm-head { font-weight: 700; font-size: 1rem; margin-bottom: .55rem; }
.dm-status { margin: 0 0 .55rem; font-weight: 600; color: var(--teal-dark); }
.dm-status.dm-closed { color: var(--coral-dark); }
.dm-warn {
margin: 0 0 .7rem; font-size: .85rem; line-height: 1.4; color: #8a5a00;
background: #fff6e2; border: 1px solid #f3dca0; border-radius: 10px; padding: .55rem .75rem;
}
.dm-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dm-block-btn { color: var(--coral-dark); border: 1px solid #f3c4bd; }
.dm-block-btn:hover { background: #fdece9; }
.dm-exc { border-top: 1px dashed var(--line); padding-top: .8rem; }
.dm-exc-head { font-weight: 600; color: var(--ink-soft); margin-bottom: .5rem; font-size: .9rem; }
/* Student: highlighted "next session" card */
.next-seance {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
background: linear-gradient(120deg, var(--cream-2), #fff);
border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.3rem;
box-shadow: var(--shadow); margin: 1rem 0 1.4rem;
}
.next-seance .ns-ico { font-size: 2.2rem; flex: none; }
.next-seance .ns-body { display: flex; flex-direction: column; line-height: 1.3; }
.next-seance .ns-lbl { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.next-seance .ns-body b { font-size: 1.15rem; }
.next-seance .ns-body small { color: var(--ink-soft); }
.next-seance .ns-cal { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.next-seance .ns-cal .se-join { align-self: flex-end; }
/* Parent: duration toggle + time picker + confirmation */
.dur-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .3rem; }
.dur-opt {
display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
background: #fff; border: 2px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem;
cursor: pointer; font-family: var(--font); color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease;
}
.dur-opt b { font-size: 1rem; }
.dur-opt small { color: var(--ink-soft); font-size: .8rem; }
.dur-opt:hover { border-color: var(--teal); }
.dur-opt.on { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43,179,163,.16); }
@media (max-width: 520px) { .dur-toggle { grid-template-columns: 1fr; } }
.booking-cal { max-width: 340px; }
.time-picker { margin-top: 1rem; }
.tp-head { font-weight: 700; margin-bottom: .35rem; text-transform: capitalize; }
.tp-avail { margin: 0 0 .7rem; font-weight: 600; color: var(--teal-dark); }
.tp-avail .tp-note { font-weight: 400; color: var(--ink-soft); }
.tp-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.time-chip {
font-family: var(--font); font-weight: 600; font-size: .92rem; padding: .5em 1em; border-radius: 999px;
background: #fff; color: var(--teal-dark); border: 1px solid var(--teal); cursor: pointer;
box-shadow: var(--shadow); transition: background .12s ease, color .12s ease, transform .12s ease;
}
.time-chip:hover { background: var(--teal); color: #fff; transform: translateY(-1px); }
.book-confirm {
display: flex; gap: .9rem; align-items: flex-start; background: #eafaf5; border: 1px solid #b9e8dc;
border-radius: var(--r-md); padding: 1rem 1.2rem; margin: 0 0 1.2rem;
}
.book-confirm .bcf-ico { font-size: 1.6rem; flex: none; }
.book-confirm .bcf-body { display: flex; flex-direction: column; line-height: 1.35; }
.book-confirm .bcf-body b { font-size: 1.05rem; }
.book-confirm .bcf-body small { color: var(--ink-soft); }
/* Teacher: weekly availability editor */
.avail-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .4rem 1.2rem; box-shadow: var(--shadow); }
.avail-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.avail-row:last-child { border-bottom: 0; }
.avail-day { flex: none; width: 7rem; font-weight: 700; text-transform: capitalize; }
.avail-slots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.slot-empty { color: var(--ink-soft); font-size: .9rem; }
.slot-chip {
display: inline-flex; align-items: center; gap: .35rem; background: var(--cream-2); border: 1px solid var(--line);
border-radius: 999px; padding: .3em .35em .3em .8em; font-weight: 600; font-size: .88rem;
}
.slot-x { border: 0; background: rgba(58,58,74,.1); color: var(--ink); width: 1.3em; height: 1.3em; border-radius: 50%; cursor: pointer; line-height: 1; font-size: .9rem; }
.slot-x:hover { background: var(--coral); color: #fff; }
.avail-clear { flex: none; border: 0; background: transparent; color: var(--ink-soft); font-family: var(--font); font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: underline; }
.avail-clear:hover { color: var(--coral-dark); }
.avail-select { font-family: var(--font); font-size: .95rem; padding: .5em .8em; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.btn-sm { font-size: .85rem; padding: .5em 1em; }
/* Teacher: quick-add a time range across one or more weekdays */
.avail-quickadd {
background: linear-gradient(120deg, var(--cream-2), #fff); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.qa-head { font-weight: 700; font-size: 1.02rem; margin-bottom: .8rem; }
.qa-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.qa-lbl { font-weight: 600; color: var(--ink-soft); }
.qa-days { display: flex; gap: .4rem; flex-wrap: wrap; }
.qa-day {
display: inline-flex; align-items: center; justify-content: center; min-width: 2.9rem; padding: .4em .7em;
border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600;
font-size: .88rem; text-transform: capitalize; user-select: none; transition: background .12s ease, border-color .12s ease;
}
.qa-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.qa-day:hover { border-color: var(--teal); }
.qa-day.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.qa-hint { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 620px) {
.avail-day { width: 100%; }
.qa-days-line { align-items: flex-start; flex-direction: column; }
}
/* ============================================================
AI coach widget ("Coup de pouce") — coach.js
============================================================ */
.coach { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 200; }
.coach-fab {
display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font); font-weight: 700;
background: var(--coral); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
padding: .8em 1.2em; box-shadow: 0 10px 26px rgba(255,122,107,.45); font-size: 1rem;
transition: transform .12s ease, box-shadow .12s ease;
}
.coach-fab:hover { transform: translateY(-2px); background: var(--coral-dark); }
.coach-fab .cf-ico { font-size: 1.25rem; }
.coach.open .coach-fab { display: none; }
.coach-panel {
width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 2rem));
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.coach-panel[hidden] { display: none; }
.coach-head {
display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem;
background: linear-gradient(135deg, var(--teal), var(--grape)); color: #fff;
}
.coach-head .ch-id { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }
.coach-head .ch-ico {
width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
font-size: 1.3rem; background: rgba(255,255,255,.25); flex: none;
}
.coach-head .ch-title { display: block; line-height: 1.2; }
.coach-head .ch-sub { display: block; font-size: .78rem; opacity: .92; font-weight: 600; }
.coach-mute, .coach-x {
flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,.22); color: #fff; font-size: 1rem; font-family: var(--font);
display: grid; place-items: center;
}
.coach-mute:hover, .coach-x:hover { background: rgba(255,255,255,.36); }
.coach-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--cream); }
.coach-msg { display: flex; }
.coach-msg.user { justify-content: flex-end; }
.coach-msg .cm-bubble {
max-width: 82%; padding: .65em .9em; border-radius: 16px; line-height: 1.45; font-size: .98rem;
white-space: pre-wrap; word-wrap: break-word;
}
.coach-msg.coach .cm-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.coach-msg.user .cm-bubble { background: var(--coral); color: #fff; border-bottom-right-radius: 5px; }
.coach-msg.pending .cm-bubble { color: var(--ink-soft); font-style: italic; }
.coach-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .8rem 0; }
.coach-quick button {
font-family: var(--font); font-weight: 600; font-size: .85rem; cursor: pointer;
background: var(--cream-2); border: 1px solid var(--line); color: var(--ink);
border-radius: 999px; padding: .45em .85em; line-height: 1;
}
.coach-quick button:hover { background: var(--sun); }
.coach-form { display: flex; align-items: center; gap: .4rem; padding: .7rem .8rem; border-top: 1px solid var(--line); }
.coach-mic {
flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
background: #fff; cursor: pointer; font-size: 1.1rem; display: grid; place-items: center;
}
.coach-mic:hover { background: var(--cream-2); }
.coach-mic.on { background: var(--coral); border-color: var(--coral); animation: coachPulse 1s infinite; }
@keyframes coachPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,107,.5); } 50% { box-shadow: 0 0 0 7px rgba(255,122,107,0); } }
.coach-input {
flex: 1; min-width: 0; font-family: var(--font); font-size: 1rem; color: var(--ink);
padding: .6em .9em; border: 2px solid var(--line); border-radius: 999px; background: var(--cream);
}
.coach-input:focus { outline: none; border-color: var(--teal); background: #fff; }
.coach-send {
flex: none; font-family: var(--font); font-weight: 700; cursor: pointer; color: #fff;
background: var(--teal); border: 0; border-radius: 999px; padding: .6em 1.1em; font-size: .92rem;
}
.coach-send:hover { background: var(--teal-dark); }
.coach-foot { margin: 0; padding: 0 .9rem .8rem; font-size: .78rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 560px) {
.coach-fab .cf-txt { display: none; }
.coach-fab { padding: .8em; }
.coach-panel { height: min(70vh, calc(100vh - 2rem)); }
}
/* ============================================================
Tests de dépistage (screening) — depistage.html
============================================================ */
.dep-shell { padding: 1.6rem 0 4rem; }
.dep-shell .wrap { width: min(900px, 94vw); }
/* ---- Home: test picker ---- */
.dep-intro h1 { margin-bottom: .3rem; }
.dep-intro p { color: var(--ink-soft); max-width: var(--maxread); }
.dep-last {
display: flex; align-items: center; gap: .7rem; margin: 1rem 0 1.4rem;
background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md);
padding: .8rem 1rem; font-size: .95rem;
}
.dep-last-ico { font-size: 1.3rem; }
.dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }
.dep-card {
text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--line);
border-top: 5px solid var(--c, var(--teal)); border-radius: var(--r-md);
padding: 1.2rem; display: flex; flex-direction: column; gap: .35rem;
box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; font-family: inherit;
}
.dep-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dep-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: .3rem; }
.dep-band { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.dep-age { font-size: .85rem; color: var(--ink-soft); }
.dep-focus { font-size: .92rem; color: var(--ink); margin: .2rem 0; }
.dep-meta { font-size: .82rem; color: var(--ink-soft); }
.dep-go { margin-top: .5rem; font-weight: 600; color: var(--c, var(--teal-dark)); }
.dep-note { font-size: .85rem; color: var(--ink-soft); font-style: italic; margin-top: 1rem; }
/* ---- Student file (intake + banner) ---- */
.dep-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--r-md);
padding: 1rem 1.2rem; box-shadow: var(--shadow); margin: 1rem 0 1.4rem; }
.dep-file.empty { border-left-color: var(--sun); background: var(--cream-2); }
.dep-file-id { display: flex; align-items: center; gap: .8rem; }
.dep-file-ico { font-size: 1.8rem; }
.dep-file-meta { font-size: .9rem; color: var(--ink-soft); }
.dep-file-act { display: flex; gap: .5rem; flex-wrap: wrap; }
.dep-file-act .btn { padding: .6em 1em; font-size: .92rem; }
.dep-reco-badge { position: absolute; top: -10px; right: 10px; background: var(--sun); color: var(--ink);
font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; box-shadow: var(--shadow); }
.dep-card { position: relative; }
.dep-card.reco { border-color: var(--sun-dark); box-shadow: 0 0 0 2px var(--sun) inset, var(--shadow); }
/* ---- Intake form ---- */
.dep-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow); }
.dep-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.dep-form .field { margin-bottom: 1rem; }
.dep-form .field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink); }
.dep-form input, .dep-form select, .dep-form textarea { width: 100%; font-family: inherit; font-size: 1rem;
padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--r-sm); }
.dep-form input:focus, .dep-form select:focus, .dep-form textarea:focus { outline: none; border-color: var(--teal); }
.dep-reco { background: var(--cream-2); border: 1px dashed var(--sun-dark); border-radius: var(--r-md);
padding: .8rem 1rem; margin: .6rem 0 1.2rem; font-size: .95rem; }
.dep-form-actions { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.dep-form-actions.end { justify-content: flex-end; }
/* ---- Assigned test (auto-chosen from the file, not pickable) ---- */
.dep-assigned { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--c, var(--teal));
border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow); margin: 1.2rem 0; }
.dep-assigned-badge { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: #fff; background: var(--c, var(--teal)); padding: .25rem .7rem; border-radius: 999px; margin-bottom: 1rem; }
.dep-assigned-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; }
.dep-assigned-body .dep-band { font-size: 1.3rem; font-weight: 700; }
.dep-assigned .dep-ico { width: 58px; height: 58px; font-size: 1.7rem; flex: none; margin: 0; }
.dep-assigned.primary { border-width: 2px; }
.dep-assigned-badge.alt { background: var(--ink-soft); }
.dep-assigned a.btn { text-decoration: none; }
/* ---- Intake: section titles, consent ---- */
.dep-sec-title { font-size: 1.05rem; margin: 1.4rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); color: var(--ink); }
.dep-sec-title:first-child { margin-top: 0; }
.dep-consent { display: flex; align-items: flex-start; gap: .6rem; background: var(--cream-2); border: 1px solid var(--line);
border-radius: var(--r-md); padding: .8rem 1rem; margin: 1rem 0; font-size: .92rem; line-height: 1.5; cursor: pointer; }
.dep-consent input { margin-top: .25rem; flex: none; width: 18px; height: 18px; }
/* ---- School type-ahead ---- */
.dep-typeahead { position: relative; }
.dep-ta-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
max-height: 280px; overflow-y: auto; }
.dep-ta-opt { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
padding: .55rem .8rem; font-family: inherit; font-size: .95rem; border-bottom: 1px solid var(--line); }
.dep-ta-opt:last-child { border-bottom: none; }
.dep-ta-opt:hover { background: var(--cream-2); }
.dep-ta-opt strong { display: block; color: var(--ink); font-weight: 600; }
.dep-ta-opt span { display: block; color: var(--ink-soft); font-size: .82rem; }
/* ---- End-of-screening celebration + teacher assignment ---- */
.dep-celebrate { text-align: center; background: linear-gradient(160deg, var(--cream-2), #fff);
border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; margin-bottom: 1.6rem; }
.dep-celebrate-emo { font-size: 2.6rem; }
.dep-celebrate h2 { margin: .2rem 0 .3rem; }
.dep-celebrate p { margin: 0 auto; color: var(--ink-soft); }
.dep-teacher { display: inline-flex; align-items: center; gap: .8rem; background: #fff; border: 2px solid var(--teal);
border-radius: var(--r-md); padding: .8rem 1.4rem; margin: 1.1rem 0 .6rem; text-align: left; box-shadow: var(--shadow); }
.dep-teacher-emo { font-size: 2.2rem; }
.dep-teacher strong { font-size: 1.2rem; color: var(--teal-dark); }
.dep-celebrate-next { font-size: .9rem; }
.dep-rep-id { background: var(--cream); border-radius: var(--r-md); padding: .8rem 1rem; margin-top: .6rem; }
.dep-rep-id small { color: var(--ink-soft); }
@media (max-width: 560px) {
.dep-form-grid { grid-template-columns: 1fr; }
.dep-form-actions .btn { flex: 1; justify-content: center; }
.dep-file-act { width: 100%; }
.dep-file-act .btn { flex: 1; justify-content: center; }
}
/* ---- Run: top bar ---- */
.dep-bar {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
padding: .7rem 1rem; box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.dep-bar-r { text-align: right; }
.dep-quit { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: .9rem; margin-right: .6rem; }
.dep-quit:hover { color: var(--coral-dark); }
.dep-test-name { font-weight: 600; }
.dep-sec-chip { background: var(--cream-2); border-radius: 999px; padding: .3rem .9rem; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.dep-timer { font-size: 1rem; white-space: nowrap; }
.dep-timer b { font-variant-numeric: tabular-nums; }
.dep-est { color: var(--ink-soft); font-size: .82rem; }
/* ---- Run: step ---- */
.dep-step {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1.8rem; box-shadow: var(--shadow); min-height: 280px;
}
.dep-skill { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--teal-dark); background: var(--cream-2); padding: .25rem .7rem; border-radius: 999px; margin-bottom: .8rem; }
.dep-instr { font-size: 1.05rem; color: var(--ink); margin: 0 0 1.2rem; max-width: var(--maxread); }
.dep-text { background: var(--cream); border-left: 4px solid var(--teal); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; max-width: var(--maxread); }
.dep-q { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; }
/* listen buttons */
.dep-listen { background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px;
padding: .25rem .7rem; cursor: pointer; font-family: inherit; font-size: .85rem; vertical-align: middle; }
.dep-listen:hover { background: var(--sun); }
.dep-listen.big { padding: .5rem .9rem; font-size: 1rem; }
/* mcq options */
.dep-opts { display: grid; gap: .7rem; max-width: 560px; }
.dep-opt { display: flex; align-items: center; gap: .8rem; text-align: left; cursor: pointer;
background: #fff; border: 2px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.1rem;
font-family: inherit; font-size: 1.05rem; color: var(--ink); transition: border-color .12s, background .12s; }
.dep-opt:hover { border-color: var(--teal); }
.dep-opt.sel { border-color: var(--teal); background: var(--teal); color: #fff; }
.dep-opt-k { width: 28px; height: 28px; border-radius: 8px; background: var(--cream-2); color: var(--ink);
display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; }
.dep-opt.sel .dep-opt-k { background: rgba(255,255,255,.25); color: #fff; }
/* readaloud */
.dep-fluency { font-weight: 600; color: var(--coral-dark); margin-bottom: .7rem; }
.dep-fluency #dep-readclock { font-variant-numeric: tabular-nums; }
.dep-fluency #dep-readclock.done { color: var(--coral); }
.dep-passage { font-size: 1.35rem; line-height: 1.9; letter-spacing: .02em; max-width: 60ch;
background: var(--cream); border-radius: var(--r-md); padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; }
.dep-passage.fluency { font-size: 1.5rem; }
.dep-rec-wrap { margin-top: .8rem; }
.dep-rec { background: var(--coral); color: #fff; border: none; border-radius: 999px; padding: .8em 1.6em;
font-family: inherit; font-size: 1.05rem; cursor: pointer; box-shadow: 0 8px 18px rgba(255,122,107,.35); }
.dep-rec:hover { background: var(--coral-dark); }
.dep-rec.recording { background: #c0392b; animation: deppulse 1.1s infinite; }
@keyframes deppulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 50% { box-shadow: 0 0 0 10px rgba(192,57,43,0); } }
.dep-rec-hint { margin-left: .8rem; color: var(--ink-soft); font-size: .9rem; }
.dep-rec-done { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-weight: 600; color: var(--teal-dark); }
.dep-rec-done audio { height: 36px; }
.dep-rec-again { background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; padding: .4em 1em; cursor: pointer; font-family: inherit; }
/* dictation */
.dep-dict { display: grid; gap: .7rem; max-width: 520px; }
.dep-dict-row { display: flex; align-items: center; gap: .8rem; }
.dep-dict-in { flex: 1; font-family: inherit; font-size: 1.1rem; padding: .6rem .9rem;
border: 2px solid var(--line); border-radius: var(--r-sm); }
.dep-dict-in:focus { outline: none; border-color: var(--teal); }
.dep-hint-sm { color: var(--ink-soft); font-size: .85rem; margin-top: .8rem; }
/* freewrite */
.dep-prompt { font-size: 1.1rem; font-weight: 600; margin-bottom: .8rem; max-width: var(--maxread); }
.dep-write { width: 100%; font-family: inherit; font-size: 1.1rem; line-height: 1.6; padding: 1rem;
border: 2px solid var(--line); border-radius: var(--r-md); resize: vertical; }
.dep-write:focus { outline: none; border-color: var(--teal); }
.dep-write-foot { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .85rem; margin-top: .4rem; }
/* nav */
.dep-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.dep-dots { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.dep-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dep-dot.w { background: #e7dcc9; }
.dep-dot.on { background: var(--teal); transform: scale(1.3); }
/* ---- Report ---- */
.dep-report { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow); }
.dep-rep-head h1 { margin-bottom: .2rem; }
.dep-rep-sub { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.2rem; }
.dep-report h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); }
.dep-rep-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; }
.dep-stat { background: var(--cream); border-radius: var(--r-md); padding: 1rem; text-align: center; }
.dep-stat .num { font-size: 1.8rem; font-weight: 700; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.dep-stat .lbl { font-size: .85rem; color: var(--ink-soft); }
.dep-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1rem; }
.dep-table th, .dep-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dep-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.dep-table tr.ok td:last-child { color: var(--teal-dark); font-weight: 700; }
.dep-table tr.no td:last-child { color: var(--coral-dark); font-weight: 700; }
.dep-table tr.no { background: #fff4f2; }
.dep-table tr.skip { color: var(--ink-soft); }
.dep-rec-block, .dep-dict-rev, .dep-write-rev { background: var(--cream); border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.dep-rec-head { font-weight: 700; margin-bottom: .6rem; }
.dep-rec-media { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dep-rec-media audio { height: 38px; }
.dep-dl { font-size: .9rem; font-weight: 600; }
.dep-norec { color: var(--ink-soft); font-style: italic; }
.dep-write-out { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1.1rem; line-height: 1.7; }
/* MCLM tool */
.dep-mclm { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: 1rem; }
.dep-mclm-inputs { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.dep-mclm label { display: flex; flex-direction: column; font-size: .82rem; color: var(--ink-soft); gap: .25rem; }
.dep-mclm input[type=number] { width: 90px; font-family: inherit; font-size: 1.05rem; padding: .45rem .6rem; border: 2px solid var(--line); border-radius: var(--r-sm); }
.dep-mclm-out { font-size: 1.1rem; }
.dep-mclm-out b { font-variant-numeric: tabular-nums; }
.dep-mclm-norm { font-size: .88rem; color: var(--ink-soft); margin-top: .5rem; }
.dep-mclm-flag { margin-top: .4rem; font-weight: 600; }
.dep-mclm-flag.warn { color: var(--coral-dark); }
.dep-mclm-flag.good { color: var(--teal-dark); }
.dep-qual { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem; font-size: .85rem; color: var(--ink-soft); max-width: 420px; }
.dep-qual-sel { font-family: inherit; font-size: 1rem; padding: .5rem .7rem; border: 2px solid var(--line); border-radius: var(--r-sm); }
.dep-notes { width: 100%; font-family: inherit; font-size: 1rem; line-height: 1.6; padding: 1rem; border: 2px solid var(--line); border-radius: var(--r-md); resize: vertical; }
.dep-rep-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
@media (max-width: 560px) {
.dep-bar { grid-template-columns: 1fr; gap: .5rem; text-align: center; }
.dep-bar-r { text-align: center; }
.dep-rep-stats { grid-template-columns: 1fr; }
.dep-nav .btn { flex: 1; justify-content: center; }
}
/* Print: report only */
@media print {
.topbar, .dep-bar, .dep-nav, .dep-rep-actions, .dep-listen, .dep-rec, .dep-rec-again { display: none !important; }
body { background: #fff; }
.dep-report { box-shadow: none; border: none; padding: 0; }
.dep-rec-block, .dep-dict-rev, .dep-write-rev, .dep-stat { background: #f6f6f6 !important; }
}
/* ---------- Messaging (parent ⇄ orthopédagogue) ---------- */
.panel-intro { margin: -.4rem 0 1.1rem; color: var(--ink-soft); }
.msg-layout {
display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start;
}
/* Left column: one chip per conversation (child / parent) */
.thread-list { display: flex; flex-direction: column; gap: .5rem; }
.thread-chip {
display: flex; align-items: center; gap: .65rem; text-align: left; cursor: pointer;
font-family: var(--font); color: var(--ink); background: #fff;
border: 1px solid var(--line); border-radius: var(--r-md);
padding: .6rem .7rem; box-shadow: var(--shadow);
}
.thread-chip:hover { background: var(--cream-2); }
.thread-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--cream-2); }
.thread-chip .kid-face { font-size: 1.6rem; flex: none; line-height: 1; }
.thread-chip .kid-meta { display: flex; flex-direction: column; min-width: 0; font-weight: 700; }
.thread-chip .kid-meta small { font-weight: 400; color: var(--ink-soft); font-size: .8rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Right column: the conversation */
.thread-pane {
display: flex; flex-direction: column; background: #fff;
border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow); overflow: hidden; min-height: 420px;
}
.thread-head {
display: flex; align-items: center; gap: .55rem; padding: .9rem 1.1rem;
border-bottom: 1px solid var(--line); background: var(--cream-2);
font-weight: 700; font-size: 1.4rem;
}
.thread-head span { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.thread-scroll {
flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column;
gap: .85rem; max-height: 460px; background: var(--cream);
}
.msg-row { display: flex; flex-direction: column; max-width: 78%; }
.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-row.me { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
padding: .7em .95em; border-radius: var(--r-md); line-height: 1.45;
white-space: pre-wrap; word-wrap: break-word;
}
.msg-row.them .msg-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-row.me .msg-bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 6px; }
.msg-meta { font-size: .74rem; color: var(--ink-soft); margin-top: .25rem; padding: 0 .2rem; }
.composer { display: flex; align-items: flex-end; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line); }
.composer-input {
flex: 1; min-width: 0; font-family: var(--font); font-size: 1rem; color: var(--ink);
padding: .65em .9em; border: 2px solid var(--line); border-radius: var(--r-md);
background: var(--cream); resize: vertical; max-height: 160px;
}
.composer-input:focus { outline: none; border-color: var(--teal); background: #fff; }
.composer .btn { flex: none; }
.thread-scroll .empty { margin: auto; color: var(--ink-soft); text-align: center; }
@media (max-width: 720px) {
.msg-layout { grid-template-columns: 1fr; }
.thread-list { flex-direction: row; overflow-x: auto; padding-bottom: .3rem; }
.thread-chip { flex: none; min-width: 190px; }
}
/* ============================================================
Recommended-rhythm callout (home "How it works")
============================================================ */
.rhythm-note {
display: flex; gap: 1.1rem; align-items: flex-start;
background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--teal);
border-radius: var(--r-md); padding: 1.3rem 1.5rem; box-shadow: var(--shadow); margin-top: 1.8rem;
}
.rhythm-note .rn-ico { font-size: 1.9rem; flex: none; line-height: 1; }
.rhythm-note h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.rhythm-note p { margin: 0; color: var(--ink-soft); max-width: var(--maxread); }
.rhythm-note strong { color: var(--ink); }
.rhythm-note .rn-ortho { margin-top: .7rem; color: var(--ink); }
/* ============================================================
Weekly practice goal + progress timeline
============================================================ */
.progress-block { margin-bottom: 1.8rem; }
.progress-block .pb-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.progress-block .pb-head h2 { margin: 0; font-size: 1.25rem; }
.pb-goal {
background: #d9f4f0; color: var(--teal-dark); font-weight: 700; font-size: .9rem;
padding: .4em .9em; border-radius: 999px; white-space: nowrap;
}
/* Current week — one segment per targeted 25-min session */
.wk-current { margin-bottom: 1.4rem; }
.wk-cur-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.wk-cur-top strong { font-size: 1.05rem; }
.wk-cur-sub {
font-size: .78rem; color: var(--ink-soft); background: var(--cream-2);
padding: .1em .65em; border-radius: 999px;
}
.wk-min { margin-left: auto; font-weight: 700; color: var(--ink-soft); }
.wk-min.met { color: var(--teal-dark); }
/* One continuous bar for the whole week, with "une séance" milestones */
.wk-weekbar { padding: .2rem 16px 1.95rem; }
.wk-weekbar-inner { position: relative; }
.wk-weekbar-track { height: 18px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.wk-weekbar-fill {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--teal), var(--sun)); transition: width .3s;
}
.wk-mark {
position: absolute; top: -3px; height: 24px; width: 2px;
background: rgba(58, 58, 74, .25); transform: translateX(-50%); border-radius: 2px;
}
.wk-mark.goal { background: var(--teal); }
.wk-mark-lbl {
position: absolute; top: 26px; transform: translateX(-50%);
font-size: .74rem; color: var(--ink-soft); white-space: nowrap;
}
.wk-mark-lbl.goal { color: var(--teal-dark); font-weight: 700; }
.wk-msg { margin: .4rem 0 0; font-weight: 600; }
/* History rail — every week since enrollment */
.wk-rail-wrap { border-top: 1px dashed var(--line); padding-top: 1.1rem; }
.wk-rail-head { margin: 0 0 .8rem; font-size: .9rem; color: var(--ink-soft); }
.wk-rail { display: flex; gap: .7rem; align-items: flex-end; overflow-x: auto; padding-bottom: .3rem; }
.wk-col { flex: 0 0 auto; width: 48px; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.wk-col-min { font-size: .72rem; color: var(--ink-soft); font-weight: 700; }
.wk-bar { height: 84px; width: 26px; background: var(--cream-2); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.wk-bar-fill { width: 100%; background: linear-gradient(180deg, var(--sun), var(--teal)); border-radius: 8px; transition: height .3s; }
.wk-bar-fill.met { background: linear-gradient(180deg, var(--teal), var(--teal-dark)); }
.wk-chk { font-size: .85rem; color: var(--teal-dark); height: 1.15em; line-height: 1; }
.wk-lbl { font-size: .74rem; color: var(--ink-soft); }
.wk-col.current .wk-lbl { color: var(--ink); font-weight: 700; }
.wk-col.current .wk-bar { outline: 2px solid var(--sun); outline-offset: 1px; }
/* Weekly-goal picker (parent space — the registration choice) */
.goal-pick {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
padding: 1.2rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.4rem;
}
.goal-pick .gp-head h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.goal-pick .gp-head p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .92rem; }
.gp-opts { display: flex; gap: .8rem; flex-wrap: wrap; }
.goal-opt {
display: flex; align-items: center; gap: .7rem; background: var(--cream);
border: 2px solid var(--line); border-radius: var(--r-sm); padding: .7rem 1.1rem;
cursor: pointer; font-family: inherit; color: var(--ink); transition: .15s;
}
.goal-opt:hover { border-color: var(--teal); }
.goal-opt.sel { border-color: var(--teal); background: #e3f7f3; }
.goal-opt .go-n { font-size: 1.7rem; font-weight: 700; color: var(--teal-dark); }
.goal-opt .go-t { font-size: .9rem; text-align: left; line-height: 1.25; display: flex; flex-direction: column; }
.goal-opt .go-t small { color: var(--ink-soft); }
@media (max-width: 560px) {
.wk-mark-lbl { font-size: .68rem; }
.progress-block .pb-head h2 { font-size: 1.1rem; }
}
/* ===================== « Qui est-ce ? » jeu visuel ===================== */
.qec-body{margin:0;font-family:var(--font);background:#f5f7fb;color:#1f2b3a}
#qec-app{max-width:920px;margin:0 auto;padding:0 14px 60px}
.qec-top{display:flex;align-items:center;gap:12px;padding:14px 4px;position:sticky;top:0;background:#f5f7fb;z-index:5}
.qec-back,.qec-scene-back{color:#2b6fff;text-decoration:none;font-weight:600}
.qec-title{font-weight:700;font-size:1.15rem;margin-inline:auto}
.qec-lang{display:flex;gap:6px}
.qec-lang button{border:1px solid #cdd7e5;background:#fff;border-radius:8px;padding:4px 10px;font-weight:700;cursor:pointer;color:#5b6b80}
.qec-lang button.on{background:#2b6fff;color:#fff;border-color:#2b6fff}
.qec-wrap{margin-top:6px}
.qec-h1{font-size:1.4rem;text-align:center;margin:10px 0 18px}
.qec-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.qec-scene{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid #e6ecf5;border-radius:18px;padding:22px 12px;cursor:pointer;transition:.15s;font-family:inherit}
.qec-scene:hover{border-color:#ff7a6b;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.qec-scene-ico{font-size:2.6rem}
.qec-scene-name{font-weight:700;font-size:1.05rem;color:#1f2b3a}
.qec-scene-prog{color:#ffb02e;letter-spacing:2px}
.qec-bar{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px}
.qec-step{background:#eef2fb;border-radius:20px;padding:4px 12px;font-weight:700;color:#5b6b80;font-size:.9rem}
.qec-card{background:#fff;border:2px solid #e6ecf5;border-radius:16px;padding:14px 16px;margin-bottom:12px}
.qec-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.qec-card-head b{color:#ff7a6b;font-size:1.05rem}
.qec-listen{border:1px solid #cdd7e5;background:#fff;border-radius:10px;padding:6px 12px;font-weight:700;cursor:pointer;color:#2b6fff;font-family:inherit}
.qec-clues{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.qec-clues li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-size:1.02rem}
.qec-clue-text{flex:1}
.qec-say{flex:0 0 auto;margin-left:4px;width:32px;height:32px;border:1px solid #cdd7e5;background:#fff;border-radius:50%;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s;padding:0}
.qec-say:hover{border-color:#2b6fff;background:#eef4ff;transform:scale(1.08)}
.qec-say.reading{background:#2b6fff;border-color:#2b6fff;animation:qecSayPulse 1.1s ease-in-out infinite}
@keyframes qecSayPulse{0%,100%{box-shadow:0 0 0 0 rgba(43,111,255,.35)}50%{box-shadow:0 0 0 6px rgba(43,111,255,0)}}
.qec-num{flex:0 0 26px;height:26px;border-radius:50%;background:#ff7a6b;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:1px}
.qec-hintline{text-align:center;color:#5b6b80;font-weight:600;margin:6px 0 12px}
.qec-scene-box{border-radius:18px;padding:14px 10px 18px;position:relative;overflow:hidden;border:2px solid #e6ecf5}
.qec-deco{font-size:1.3rem;letter-spacing:10px;opacity:.5;text-align:center;margin-bottom:6px;user-select:none}
.qec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:8px}
.qec-char{background:rgba(255,255,255,.72);border:2px solid transparent;border-radius:14px;padding:6px 2px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:inherit;transition:.12s}
.qec-char:hover{border-color:#ff7a6b;background:#fff}
.qec-fig{position:relative;width:96px;height:128px;display:flex;align-items:center;justify-content:center}
.kid-svg{width:96px;height:128px;display:block;animation:qecBob 3.4s ease-in-out infinite}
.qec-char:nth-child(2n) .kid-svg{animation-duration:3.9s}
.qec-char:nth-child(3n) .kid-svg{animation-duration:3.1s}
@keyframes qecBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.kid-svg .qec-blink{transform-box:fill-box;transform-origin:center;animation:qecBlink 4.6s infinite}
@keyframes qecBlink{0%,92.5%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}98.5%{transform:scaleY(1)}}
.qec-char.elim .kid-svg,.qec-char.elim .kid-svg .qec-blink{animation:none}
@media (prefers-reduced-motion:reduce){.kid-svg,.kid-svg .qec-blink{animation:none!important}}
.qec-prop{position:absolute;right:-3px;bottom:24px;font-size:1.5rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.qec-x{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:3.4rem;color:#e11d48;font-weight:900;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.qec-name{font-weight:700;font-size:.92rem;margin-top:2px;color:#1f2b3a}
.qec-char.elim .kid-svg,.qec-char.elim .qec-prop{filter:grayscale(1);opacity:.35}
.qec-char.elim{background:rgba(230,230,235,.6)}
.qec-char.elim .qec-x{display:flex}
.qec-char.elim .qec-name{color:#9aa6b6;text-decoration:line-through}
.qec-actions{display:flex;gap:12px;justify-content:center;margin:16px 0 8px;flex-wrap:wrap}
.qec-reset{border:1px solid #cdd7e5;background:#fff;border-radius:12px;padding:12px 20px;font-weight:700;cursor:pointer;color:#5b6b80;font-family:inherit}
.qec-check,.qec-next{background:#ff7a6b;color:#fff;border:none;border-radius:12px;padding:12px 26px;font-weight:700;font-size:1.05rem;cursor:pointer;font-family:inherit}
.qec-check:hover,.qec-next:hover{background:#f2624f}
.qec-feedback{margin-top:12px;text-align:center;font-weight:700;font-size:1.05rem;min-height:24px}
.qec-feedback.good{color:#16a34a}
.qec-feedback.bad{color:#e11d48}
.qec-feedback.warn{color:#d97706}
.qec-win{margin-bottom:10px;font-size:1.15rem}
@media(max-width:520px){.qec-grid{grid-template-columns:repeat(3,1fr)}.qec-title{font-size:1rem}}
/* ============================================================
Contact & information page
============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.6rem 2.2rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info > h2 { margin: 0 0 .2rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-item .ico { flex: none; margin: 0; }
.contact-info-item h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.contact-info-item p { margin: 0; color: var(--ink-soft); }
.contact-form-title { margin: 0 0 1.2rem; font-size: 1.25rem; }
.field-opt { font-weight: 400; color: var(--ink-soft); }
.contact-err { color: var(--coral-dark, #c1453a); background: #fdecea; border: 1px solid #f3c6c1;
border-radius: var(--r-sm); padding: .6rem .8rem; margin: 0 0 1rem; font-size: .92rem; }
.contact-privacy { font-size: .82rem; margin: 1rem 0 0; }
.contact-success { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--teal);
border-radius: var(--r-lg); padding: 2.4rem 1.8rem; box-shadow: var(--shadow); text-align: center; }
.contact-success-ico { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.contact-success h2 { margin: 0 0 .5rem; }
.contact-success p { margin: 0 auto 1.4rem; color: var(--ink-soft); max-width: 42ch; }
@media (max-width: 820px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* ============================================================
FAQ page — accordion list of questions (native )
============================================================ */
.faq { max-width: 64ch; margin: 0 auto; }
.faq-cat {
font-size: 1.15rem; color: var(--coral-dark);
margin: 2.2rem 0 .9rem; padding-bottom: .4rem;
border-bottom: 2px solid var(--line);
}
.faq-cat:first-child { margin-top: 0; }
.faq-item {
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-sm); box-shadow: var(--shadow);
margin-bottom: .8rem; overflow: hidden;
}
.faq-item summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: 1rem;
padding: 1.05rem 1.3rem;
font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; margin-left: auto; flex: none;
font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--teal-dark);
transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "–"; transform: rotate(0deg); }
.faq-item summary:hover { background: var(--cream-2); }
.faq-item summary:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.faq-a { padding: 0 1.3rem 1.15rem; }
.faq-a p { color: var(--ink-soft); margin: 0 0 .7rem; line-height: 1.6; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { font-weight: 600; }
.faq-foot {
max-width: 56ch; margin: 3rem auto 0; text-align: center;
background: linear-gradient(120deg, var(--cream-2), #fff);
border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 2rem 1.6rem; box-shadow: var(--shadow);
}
.faq-foot h2 { margin: 0 0 .5rem; }
.faq-foot p { color: var(--ink-soft); margin: 0 auto 1.3rem; max-width: 46ch; }
.faq-foot-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
/* ---------- Site search (loupe) ---------- */
/* The loupe button sits in the shared .tools bar and inherits .pill styling. */
.bw-search-btn { display: inline-flex; align-items: center; justify-content: center; padding: .4em .55em; color: var(--ink-soft); }
.bw-search-btn:hover { color: var(--ink); }
.bw-search-btn svg { display: block; }
/* Full-screen overlay anchored near the top, above every other layer. */
.bw-search { position: fixed; inset: 0; z-index: 120; background: rgba(58, 58, 74, .45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: clamp(1rem, 8vh, 6rem) 1rem 1rem; }
.bw-search[hidden] { display: none; }
html.bw-search-open { overflow: hidden; }
.bw-search-card { width: min(640px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 80vh; display: flex; flex-direction: column; animation: bwSearchIn .16s ease; }
@keyframes bwSearchIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.bw-search-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.bw-search-ic { display: inline-flex; color: var(--coral); }
.bw-search-input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 1.1rem; color: var(--ink); padding: .2rem 0; }
.bw-search-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 .2rem; border-radius: 8px; }
.bw-search-close:hover { color: var(--ink); background: var(--cream-2); }
.bw-search-results { overflow-y: auto; padding: .4rem; }
.bw-search-hint { color: var(--ink-soft); text-align: center; padding: 1.4rem 1rem; margin: 0; font-size: .98rem; }
.bw-search-group { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .7rem .8rem .25rem; }
.bw-search-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.bw-search-item:hover, .bw-search-item.is-active { background: var(--cream-2); }
.bw-search-item-ic { font-size: 1.4rem; flex: 0 0 1.6rem; text-align: center; }
.bw-search-item-tx { display: flex; flex-direction: column; min-width: 0; }
.bw-search-item-ti { font-weight: 700; color: var(--ink); }
.bw-search-item-de { font-size: .9rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- Quick nav menu (onglets) ---------- */
/* Hamburger button in the topbar .tools bar (just before the loupe) that opens
a dropdown of the page tabs. Inherits .pill styling like the loupe. */
.bw-menu { position: relative; display: inline-flex; }
/* On desktop the page tabs are already shown inline in .mainnav, so the hamburger
dropdown is redundant — hide it. It stays visible below 980px where .mainnav is hidden. */
@media (min-width: 981px) { .bw-menu { display: none; } }
.bw-menu-btn { padding: .4em .55em; color: var(--ink-soft); }
.bw-menu-btn:hover { color: var(--ink); }
.bw-menu-btn svg { display: block; }
.bw-menu-panel {
position: absolute; top: calc(100% + .5rem); left: 0; z-index: 130;
min-width: 220px; max-width: calc(100vw - 2rem);
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--shadow-lg);
padding: .4rem; display: flex; flex-direction: column;
animation: bwSearchIn .14s ease;
}
.bw-menu-panel[hidden] { display: none; }
.bw-menu-item {
display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap;
}
.bw-menu-item:hover { background: var(--cream-2); }
.bw-menu-item[aria-current="page"] { background: var(--cream-2); }