/* ==========================================================================
   10-Lexique — feuille de style unique
   Reconstruction HTML/CSS de l'app Base44 (React + Tailwind + shadcn/ui).
   Les jetons de couleur, rayons et la typographie DYS sont repris à
   l'identique de src/index.css et tailwind.config.js.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/opendyslexic@1.0.0/dist/opendyslexic.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */

:root {
  --background: 0 0% 100%;
  --foreground: 140 40% 12%;
  --card: 0 0% 100%;
  --card-foreground: 140 40% 12%;
  --primary: 138 55% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 138 30% 94%;
  --secondary-foreground: 138 40% 20%;
  --muted: 138 15% 95%;
  --muted-foreground: 138 15% 45%;
  --accent: 138 45% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 138 20% 88%;
  --input: 138 20% 88%;
  --ring: 138 55% 35%;

  --radius: 0.75rem;

  --font-heading: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Lexend', ui-sans-serif, system-ui, sans-serif;

  /* Réglages d'accessibilité — surchargés par le panneau du profil */
  --a11y-font-size: 17px;
  --a11y-letter-spacing: 0.02em;
  --a11y-line-height: 1.75;
  --a11y-word-spacing: 0.08em;

  /* Couleur du décor de lettres inversées */
  --decor: #4a7c59;
}

/* Polices alternatives proposées dans le profil */
body[data-font='opendyslexic'] { --font-body: 'OpenDyslexic', sans-serif; --font-heading: 'OpenDyslexic', sans-serif; }
body[data-font='atkinson']     { --font-body: 'Atkinson Hyperlegible', sans-serif; --font-heading: 'Atkinson Hyperlegible', sans-serif; }
body[data-font='inter']        { --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif; }
body[data-font='georgia']      { --font-body: Georgia, serif; --font-heading: Georgia, serif; }
body[data-font='verdana']      { --font-body: Verdana, sans-serif; --font-heading: Verdana, sans-serif; }

/* Mode haute lisibilité */
body.high-contrast {
  --foreground: 0 0% 0%;
  --background: 0 0% 100%;
  --card: 0 0% 98%;
  --muted-foreground: 0 0% 20%;
  --border: 0 0% 30%;
  --primary: 138 80% 25%;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation + typographie DYS
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: var(--a11y-font-size);
  letter-spacing: var(--a11y-letter-spacing);
  line-height: var(--a11y-line-height);
  word-spacing: var(--a11y-word-spacing);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
  line-height: 1.4;
  word-spacing: 0.06em;
  margin: 0;
}

p, li, label, span { line-height: 1.8; }
p { margin: 0; }

/* Pas de soulignement par défaut : source de confusion DYS */
a { color: inherit; text-decoration: none; letter-spacing: 0.015em; }
button { letter-spacing: 0.015em; font-family: inherit; }

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

/* L'attribut hidden doit l'emporter sur les display: flex/grid des
   composants, sans quoi un élément masqué en JavaScript reste visible. */
[hidden] { display: none !important; }

/* Comme le preflight de Tailwind, qui neutralise les puces : les listes
   numérotées de la source portent leur numéro dans le texte du <li>. */
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */

.page { min-height: 100vh; position: relative; overflow: hidden; }
.app-page { min-height: 100vh; display: flex; flex-direction: column; }

.wrap    { max-width: 64rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-sm { max-width: 48rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-xs { max-width: 28rem; margin: 0 auto; padding-left: 1rem;   padding-right: 1rem; }

.section { padding-top: 4rem; padding-bottom: 4rem; }
.text-center { text-align: center; }

.muted { color: hsl(var(--muted-foreground)); }

/* Échelle typographique reprise de tailwind.config.js (interlignes élargis) */
.xs   { font-size: 0.8rem;   line-height: 1.6; }
.small{ font-size: 0.9rem;   line-height: 1.7; }
.lg   { font-size: 1.125rem; line-height: 1.75; }
.xl   { font-size: 1.25rem;  line-height: 1.65; }
.t2xl { font-size: 1.5rem;   line-height: 1.5; }
.t3xl { font-size: 1.875rem; line-height: 1.4; }
.t4xl { font-size: 2.25rem;  line-height: 1.3; }
.t5xl { font-size: 3rem;     line-height: 1.2; }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.375rem; }

/* --------------------------------------------------------------------------
   4. Décor : lettres inversées en arrière-plan
   -------------------------------------------------------------------------- */

.decor-letters {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.decor-letters span {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
  color: var(--decor);
  user-select: none;
}

/* Variante animée du héros : lettres blanches qui dérivent lentement */
.decor-hero span {
  color: #fff;
  display: inline-block;
  animation: drift var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes drift {
  0%,
  100% { transform: translate(0, 0) rotate(var(--base, 0deg)) scaleX(var(--mx, 1)) scale(1); }
  25%  { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--base, 0deg) + var(--rot))) scaleX(var(--mx, 1)) scale(1.08); }
  50%  { transform: translate(calc(var(--dx) * -0.5), calc(var(--dy) * -0.6)) rotate(calc(var(--base, 0deg) - var(--rot))) scaleX(var(--mx, 1)) scale(0.95); }
  75%  { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * 0.7)) rotate(calc(var(--base, 0deg) + var(--rot) * 0.5)) scaleX(var(--mx, 1)) scale(1.04); }
}

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

/* Lettre miroir dans un titre (« Apprendre » avec le A inversé) */
.mirror { display: inline-block; transform: scaleX(-1); }
.mirror-up { display: inline-block; transform: scaleX(-1) translateY(-0.25em); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  height: 2.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.btn-primary:hover { background: hsl(var(--primary) / .9); }

.btn-outline {
  background: transparent;
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.btn-outline:hover { background: hsl(var(--secondary)); }

.btn-white {
  background: #fff;
  color: hsl(var(--primary));
  font-weight: 700;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.btn-white:hover { background: rgb(255 255 255 / .9); }

.btn-ghost-light {
  background: transparent;
  border-color: rgb(255 255 255 / .5);
  color: #fff;
}
.btn-ghost-light:hover { background: rgb(255 255 255 / .1); }

.btn-block { width: 100%; }
.btn-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.8rem; }
.btn-11 { height: 2.75rem; }
.btn-lg { height: 3rem; padding-left: 2rem; padding-right: 2rem; font-size: 1rem; }

.btn:disabled { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------------------
   6. Cartes
   -------------------------------------------------------------------------- */

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}

.card-2xl { border-radius: 1rem; }
.card-3xl { border-radius: 1.5rem; }

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}

.field { position: relative; }

.field > svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.input {
  width: 100%;
  height: 2.75rem;
  padding: 0.25rem 0.75rem 0.25rem 2.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
  background: transparent;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: border-color .15s, box-shadow .15s;
}

.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }

/* Séparateur « OU » */
.divider {
  position: relative;
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.divider::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid hsl(var(--border));
}
.divider span {
  position: relative;
  background: hsl(var(--card));
  padding: 0 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Message d'erreur de formulaire */
.alert-error {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: hsl(var(--destructive) / .1);
  color: hsl(var(--destructive));
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   8. Carte d'authentification (page d'accueil)
   -------------------------------------------------------------------------- */

.auth-shell {
  position: relative;
  z-index: 10;
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo { height: 3rem; object-fit: contain; margin-bottom: 2rem; }

.auth-card { width: 100%; overflow: hidden; margin-bottom: 1.25rem; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid hsl(var(--border));
}

.auth-tabs button {
  padding: 0.875rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

.auth-tabs button:hover { color: hsl(var(--foreground)); }

.auth-tabs button[aria-selected='true'] {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
  background: hsl(var(--primary) / .05);
}

.auth-body { padding: 1.5rem; }

.auth-body form > * + * { margin-top: 1rem; }

.link-primary { color: hsl(var(--primary)); font-weight: 500; }
.link-primary:hover { text-decoration: underline; }

/* Champ code à 6 chiffres */
.otp { display: flex; justify-content: center; gap: 0; }
.otp input {
  width: 2.5rem;
  height: 3rem;
  font-family: inherit;
  font-size: 1.1rem;
  text-align: center;
  border: 1px solid hsl(var(--input));
  border-left-width: 0;
  background: transparent;
  color: hsl(var(--foreground));
}
.otp input:first-child { border-left-width: 1px; border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); }
.otp input:last-child  { border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
.otp input:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   8 bis. AuthLayout — écrans connexion / inscription / mot de passe
   -------------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  position: relative;
}

.auth-page > .inner { width: 100%; max-width: 28rem; }

.auth-head { text-align: center; margin-bottom: 2.5rem; }

.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  margin-bottom: 1rem;
}
.auth-icon svg { width: 1.75rem; height: 1.75rem; }

.auth-head h1 { font-size: 1.875rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; }
.auth-head p  { color: hsl(var(--muted-foreground)); margin-top: 0.5rem; }

.auth-panel { padding: 2rem; }

.auth-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
}
.auth-back:hover { color: hsl(var(--foreground)); }
.auth-back svg { width: 1rem; height: 1rem; }

/* Variante haute des champs et boutons sur ces écrans (h-12) */
.input-12 { height: 3rem; }
.btn-12 { height: 3rem; }

/* --------------------------------------------------------------------------
   9. Chrome de l'application : barre haute, nav, nav mobile
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: hsl(var(--card) / .8);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border));
}

.topbar img { height: 2.5rem; object-fit: contain; }

.nav-desktop { display: none; align-items: center; gap: 0.25rem; }

.nav-desktop a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: background-color .15s, color .15s;
}
.nav-desktop a:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.nav-desktop a[aria-current='page'] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}

.nav-toggle {
  display: inline-flex;
  padding: 0.5rem;
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  color: hsl(var(--foreground));
}
.nav-toggle:hover { background: hsl(var(--secondary)); }

/* Tiroir mobile */
.nav-drawer {
  position: fixed;
  inset-inline: 0;
  top: 60px;
  z-index: 40;
  padding: 1rem;
  background: hsl(var(--card) / .95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border));
}
.nav-drawer[hidden] { display: none; }
.nav-drawer a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.nav-drawer a + a { margin-top: 0.5rem; }
.nav-drawer a[aria-current='page'] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Barre de navigation basse (mobile) */
.nav-bottom {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0.125rem;
  background: hsl(var(--card) / .9);
  backdrop-filter: blur(16px);
  border-top: 1px solid hsl(var(--border));
}

.nav-bottom a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: hsl(var(--muted-foreground));
}
.nav-bottom a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nav-bottom a[aria-current='page'] { color: hsl(var(--primary)); }

main { flex: 1; position: relative; z-index: 10; padding-bottom: 5rem; }

/* Bouton flottant de la mascotte Lexi */
.lexi-fab {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 50;
  width: 6rem;
  height: 6rem;
  padding: 0;
  border-radius: 999px;
  border: 4px solid #fff;
  background: #22c55e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgb(34 197 94 / .5);
}
.lexi-fab:hover { background: #16a34a; }
.lexi-fab img { width: 5rem; height: 5rem; object-fit: contain; animation: bob 2s ease-in-out infinite; }
.lexi-fab::after {
  content: '';
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #34d399;
  border: 2px solid #fff;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .lexi-fab img, .lexi-fab::after { animation: none; }
}

/* --------------------------------------------------------------------------
   10. Accueil connecté : héros, fonctionnalités, histoire, offres
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: hsl(var(--primary));
  color: #fff;
}

.hero-inner {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-sub {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: rgb(255 255 255 / .8);
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .2);
  font-size: 0.9rem;
  font-weight: 600;
}

.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-head h2 { font-weight: 800; font-size: 1.875rem; margin-bottom: 0.75rem; }
.section-head p { color: hsl(var(--muted-foreground)); max-width: 36rem; margin: 0 auto; }

.grid-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.feature { padding: 1.25rem; transition: box-shadow .15s, border-color .15s; }
.feature:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); border-color: hsl(var(--primary) / .3); }
.feature h3 { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.feature p { color: hsl(var(--muted-foreground)); font-size: 0.9rem; line-height: 1.7; }

.feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.feature-icon svg { width: 1.25rem; height: 1.25rem; }

/* Bloc « Mon histoire » */
.story-section { background: hsl(var(--secondary) / .5); padding: 4rem 0; }
.story { overflow: hidden; }
.story-img { width: 100%; height: 14rem; object-fit: cover; }
.story-body { padding: 1.75rem; }
.story-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--primary));
}
.story h2 { font-weight: 800; font-size: 1.5rem; margin-bottom: 0.75rem; }
.story p { color: hsl(var(--muted-foreground)); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; }
.story strong { color: hsl(var(--foreground)); }

/* Cartes de tarifs */
.grid-plans { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }

.plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1rem;
}
.plan-standard { border-color: #86efac; }
.plan-premium  { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }

.plan-badge { padding: 0.25rem; font-size: 0.8rem; font-weight: 700; text-align: center; }
.plan-badge-green  { background: #dcfce7; color: #166534; }
.plan-badge-yellow { background: #fef9c3; color: #854d0e; }

.plan-header { padding: 0.75rem 1rem; color: #fff; }
.plan-header p { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; }
.plan-header .price { display: flex; align-items: baseline; gap: 0.25rem; }
.plan-header .price b { font-weight: 800; font-size: 1.5rem; }
.plan-header .price span { color: rgb(255 255 255 / .7); font-size: 0.8rem; }

.plan-head-free     { background: #6b7280; }
.plan-head-standard { background: linear-gradient(to right, #22c55e, #059669); }
.plan-head-premium  { background: linear-gradient(to right, #9333ea, #4f46e5); }

.plan-body { flex: 1; padding: 1rem; }
.plan-body .tagline { font-size: 0.8rem; font-style: italic; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.plan-body li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.plan-body li + li { margin-top: 0.375rem; }
.plan-body li svg { width: 0.875rem; height: 0.875rem; color: #22c55e; flex-shrink: 0; }

/* Encart offres pro */
.pro-banner {
  background: hsl(var(--secondary));
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.pro-banner .who { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.pro-banner .who svg { width: 1.5rem; height: 1.5rem; color: hsl(var(--primary)); flex-shrink: 0; }
.pro-banner p:first-of-type { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; }

/* Appel à l'action final */
.cta-final {
  background: linear-gradient(to bottom right, #16a34a, #10b981);
  padding: 4rem 0;
  color: #fff;
  text-align: center;
}
.cta-final h2 { font-weight: 800; font-size: 1.875rem; margin-bottom: 0.75rem; }
.cta-final p { color: #dcfce7; margin-bottom: 1.75rem; }

/* Pied de page */
.site-footer {
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.site-footer img { height: 1.75rem; object-fit: contain; margin: 0 auto 0.75rem; }

/* --------------------------------------------------------------------------
   10 bis. Pages de contenu (Mon histoire, Offres, Tarifs…)
   -------------------------------------------------------------------------- */

/* Colonne étroite centrée, avec le décor de lettres derrière */
.content-shell {
  position: relative;
  z-index: 10;
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1rem 7rem;
}
.content-shell > * + * { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .content-shell { padding-bottom: 2.5rem; }
}

/* En-tête « ← Titre » */
.page-head { display: flex; align-items: center; gap: 0.75rem; }
.page-head h1 { font-weight: 700; font-size: 1.25rem; line-height: 1.65; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground));
  cursor: pointer;
}
.btn-icon:hover { background: hsl(var(--secondary)); }
.btn-icon svg { width: 1.25rem; height: 1.25rem; }

/* Photo de couverture avec dégradé et légende */
.cover { position: relative; height: 14rem; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .6), transparent);
}
.cover-caption { position: absolute; bottom: 1rem; left: 1.25rem; z-index: 1; color: #fff; }
.cover-caption .who { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.125rem; }
.cover-caption .who svg { width: 1rem; height: 1rem; color: #4ade80; }
.cover-caption .who span { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; }
.cover-caption p { color: rgb(255 255 255 / .8); font-size: 0.9rem; }

/* Bloc de texte long */
.prose { padding: 1.5rem; font-size: 0.9rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.prose > * + * { margin-top: 1rem; }
.prose strong { color: hsl(var(--foreground)); }

/* Encadré mis en avant à l'intérieur d'un bloc de texte */
.callout {
  background: hsl(var(--primary) / .05);
  border: 1px solid hsl(var(--primary) / .2);
  border-radius: 0.75rem;
  padding: 1rem;
}
.callout p { color: hsl(var(--foreground)); font-weight: 600; }

/* Carte-citation en dégradé vert */
.quote-card {
  background: linear-gradient(to bottom right, #22c55e, #059669);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.quote-card .emoji { font-size: 2.25rem; line-height: 1.3; margin-bottom: 0.75rem; }
.quote-card h2 { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.quote-card p { color: #dcfce7; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   11. Points de rupture
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .grid-features { grid-template-columns: repeat(2, 1fr); }
  .grid-plans { grid-template-columns: repeat(3, 1fr); }
  .pro-banner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 768px) {
  .grid-features { grid-template-columns: repeat(3, 1fr); }
  .hero-inner { padding-top: 8rem; padding-bottom: 8rem; }
  .story-inner { display: flex; }
  .story-media { width: 16rem; flex-shrink: 0; }
  .story-img { height: 100%; }
  .story-body { display: flex; flex-direction: column; justify-content: center; }

  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .nav-bottom { display: none; }
  main { padding-bottom: 0; }
  .lexi-fab { bottom: 1.5rem; }
}

/* La source bascule sur la nav complète dès 768px (md:flex) alors que ses
   sept entrées réclament près de 950px : entre les deux la barre déborde.
   On resserre l'espacement sur cette plage plutôt que de déplacer le seuil. */
@media (min-width: 768px) and (max-width: 959px) {
  .nav-desktop { gap: 0.125rem; }
  .nav-desktop a { padding: 0.5rem; gap: 0.375rem; font-size: 0.8rem; }
  .nav-desktop a svg { width: 0.875rem; height: 0.875rem; }
}

/* --------------------------------------------------------------------------
   12. Page Offres — bannière, forfaits détaillés, comparatif, FAQ
   -------------------------------------------------------------------------- */

/* Bannière verte en tête de page, avec ses deux cercles translucides */
.banner {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.5rem;
  background: linear-gradient(to bottom right, #16a34a, #10b981);
  color: #fff;
}
.banner .decor-letters span { color: #fff; }
.banner::before,
.banner::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
}
.banner::before { top: 0; right: 0; width: 14rem; height: 14rem; transform: translate(6rem, -6rem); }
.banner::after  { bottom: 0; left: 0; width: 10rem; height: 10rem; transform: translate(-3rem, 4rem); }

.banner-inner { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; text-align: center; }
.banner h1 { font-weight: 800; font-size: 2.25rem; line-height: 1.3; margin-bottom: 0.75rem; }
.banner > .banner-inner > p { color: #dcfce7; font-size: 1.125rem; max-width: 36rem; margin: 0 auto; }

.btn-back-light {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.9rem;
  color: #fff;
}
.btn-back-light:hover { background: rgb(255 255 255 / .2); }
.btn-back-light svg { width: 1rem; height: 1rem; }

.banner-assurances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgb(255 255 255 / .9);
}
.banner-assurances span { display: flex; align-items: center; gap: 0.375rem; }
.banner-assurances svg { width: 1rem; height: 1rem; }

.wrap-lg { max-width: 64rem; margin: 0 auto; padding: 3.5rem 1rem; }

/* ── Cartes de forfait détaillées ── */
.grid-plans-xl { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }

.plan-xl {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.plan-xl.is-decouverte { border-color: #e2e8f0; }
.plan-xl.is-standard   { border-color: #a7f3d0; }
.plan-xl.is-premium {
  border-color: #a78bfa;
  box-shadow: 0 25px 50px -12px rgb(139 92 246 / .25), 0 0 0 2px rgb(167 139 250 / .4);
}

.plan-xl-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: #fff;
  color: #6d28d9;
}
.plan-xl-badge svg { width: 0.875rem; height: 0.875rem; }

.plan-xl-header { padding: 1.5rem; color: #fff; }
.plan-xl-header.head-decouverte { background: linear-gradient(to bottom right, #94a3b8, #64748b); }
.plan-xl-header.head-standard   { background: linear-gradient(to bottom right, #10b981, #16a34a); }
.plan-xl-header.head-premium    { background: linear-gradient(to bottom right, #7c3aed, #9333ea, #4f46e5); }

.positioning {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plan-xl-header .name { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.5; }
.plan-xl-header .tagline { color: rgb(255 255 255 / .8); font-size: 0.9rem; margin-top: 0.25rem; min-height: 2.5rem; }
.plan-xl-header .amount { display: flex; align-items: flex-end; gap: 0.375rem; margin-top: 0.75rem; }
.plan-xl-header .amount b { font-weight: 800; font-size: 2.25rem; line-height: 1; }
.plan-xl-header .amount span { color: rgb(255 255 255 / .7); font-size: 0.9rem; margin-bottom: 0.25rem; }

.plan-xl-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }

.feature-list { flex: 1; margin-bottom: 1.5rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; }
.feature-list li + li { margin-top: 0.75rem; }
.feature-list svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.feature-list .yes svg { color: #059669; }
.plan-xl.is-premium .feature-list .yes svg { color: #7c3aed; }
.feature-list .no svg { color: hsl(var(--muted-foreground) / .4); }
.feature-list .no span { color: hsl(var(--muted-foreground)); text-decoration: line-through; }

/* Encart Lexy dans le forfait Premium */
.lexy-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid #ddd6fe;
  border-radius: 1rem;
  background: rgb(245 243 255 / .6);
}
.lexy-box .orb {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom right, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lexy-box .orb svg { width: 1rem; height: 1rem; color: #fff; }
.lexy-box p:first-of-type { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: #4c1d95; }
.lexy-box p:last-of-type { font-size: 0.8rem; color: rgb(109 40 217 / .8); margin-top: 0.125rem; }

/* Boutons d'action des forfaits */
.btn-plan { height: 3rem; border-radius: 0.75rem; font-weight: 700; font-size: 1rem; width: 100%; }
.btn-plan.cta-decouverte { background: #475569; color: #fff; }
.btn-plan.cta-decouverte:hover { background: #334155; }
.btn-plan.cta-standard { background: linear-gradient(to right, #10b981, #16a34a); color: #fff; }
.btn-plan.cta-premium {
  background: linear-gradient(to right, #7c3aed, #4f46e5);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(139 92 246 / .3);
}
.btn-plan:hover { opacity: .92; }
.btn-plan .crown { color: #fcd34d; }

/* ── Offres multi-utilisateurs ── */
.grid-groups { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.group-card {
  overflow: hidden;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.group-card.g-ecole { border-color: #bfdbfe; }
.group-card.g-entreprise { border-color: #e2e8f0; }
.group-card.g-association { border-color: #bbf7d0; }

.group-head { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.5rem; color: #fff; }
.group-head.head-ecole { background: linear-gradient(to right, #3b82f6, #0891b2); }
.group-head.head-entreprise { background: linear-gradient(to right, #475569, #374151); }
.group-head.head-association { background: linear-gradient(to right, #16a34a, #0d9488); }
.group-head > svg { width: 1.75rem; height: 1.75rem; color: rgb(255 255 255 / .8); flex-shrink: 0; }
.group-head .name { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1.65; }
.group-head .tagline { color: rgb(255 255 255 / .8); font-size: 0.9rem; }

.group-body { padding: 1.5rem; }
.group-body ul { margin-bottom: 1.25rem; }
.group-body li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; }
.group-body li + li { margin-top: 0.625rem; }
.group-body li svg { width: 1rem; height: 1rem; color: #22c55e; flex-shrink: 0; margin-top: 0.125rem; }

.btn-group-cta {
  width: 100%;
  height: 2.75rem;
  border-radius: 0.75rem;
  font-weight: 700;
  background: linear-gradient(to right, #10b981, #16a34a);
  color: #fff;
}
.btn-group-cta:hover { opacity: .9; }

/* ── Tableau comparatif ── */
.cmp-wrap {
  overflow-x: auto;
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}

.cmp { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 0.875rem 1rem; }
.cmp thead th:first-child {
  text-align: left;
  width: 40%;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  background: hsl(var(--secondary) / .4);
  border-top-left-radius: 1.5rem;
}
.cmp thead th:not(:first-child) { text-align: center; padding: 1.25rem 1rem; color: #fff; }
.cmp thead .h-decouverte { background: linear-gradient(to bottom right, #9ca3af, #6b7280); }
.cmp thead .h-standard   { background: linear-gradient(to bottom right, #22c55e, #059669); }
.cmp thead .h-premium    { background: linear-gradient(to bottom right, #9333ea, #4f46e5); border-top-right-radius: 1.5rem; }
.cmp thead p:first-child { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; line-height: 1; }
.cmp thead p:last-child { font-size: 0.8rem; color: rgb(255 255 255 / .8); font-weight: 500; margin-top: 0.25rem; }

.cmp tbody tr { border-top: 1px solid hsl(var(--border)); }
.cmp tbody tr:nth-child(even) { background: hsl(var(--secondary) / .2); }
.cmp tbody td:first-child { text-align: left; padding-left: 1.25rem; font-size: 0.9rem; font-weight: 500; }
.cmp tbody td:not(:first-child) { text-align: center; }
.cmp td.c-standard { background: rgb(240 253 244 / .6); }
.cmp td.c-premium  { background: rgb(250 245 255 / .7); }
.cmp td svg { width: 1.25rem; height: 1.25rem; margin: 0 auto; display: block; }
.cmp .ok svg { color: #16a34a; }
.cmp .no svg { color: hsl(var(--muted-foreground) / .4); }
.cmp .part svg { color: #f59e0b; }
.cmp .txt { font-size: 0.9rem; font-weight: 600; }
.cmp .txt.t-decouverte { color: #374151; }
.cmp .txt.t-standard { color: #15803d; }
.cmp .txt.t-premium { color: #7e22ce; }

.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: hsl(var(--secondary) / .3);
  border-top: 1px solid hsl(var(--border));
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.cmp-legend span { display: flex; align-items: center; gap: 0.375rem; }
.cmp-legend svg { width: 1rem; height: 1rem; }

/* ── FAQ (accordéon natif <details>) ── */
.faq {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.faq details { border-bottom: 1px solid hsl(var(--border)); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  transition: transform .2s;
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq p { padding: 0 1.5rem 1rem 0.25rem; font-size: 0.9rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }

@media (min-width: 768px) {
  .grid-plans-xl, .grid-groups { grid-template-columns: repeat(3, 1fr); }
  .plan-xl.is-premium { transform: scale(1.05); margin: -0.75rem 0 0.75rem; }
}

/* --------------------------------------------------------------------------
   13. Page Tarifs — héros adaptatif, onglets d'organisation, forfaits
   -------------------------------------------------------------------------- */

/* Chaque type d'organisation a sa teinte : école = bleu, entreprise = violet,
   association = émeraude. Le thème est piloté par [data-tab] sur la racine. */
.tarifs {
  --org-hero: linear-gradient(to bottom right, #2563eb, #3b82f6, #38bdf8);
  --org-glow: rgb(147 197 253 / .4);
  --org-accent: #2563eb;
  --org-text: #2563eb;
  --org-badge: linear-gradient(to right, #3b82f6, #1d4ed8);
  --org-btn: linear-gradient(to right, #3b82f6, #1d4ed8);
  --org-border: #93c5fd;
  --org-ring: rgb(191 219 254);
  --org-soft: linear-gradient(to bottom right, #eff6ff, #f0f9ff);
  --org-strong: #1d4ed8;
  padding-bottom: 6rem;
  min-height: 100vh;
}

.tarifs[data-tab='entreprise'] {
  --org-hero: linear-gradient(to bottom right, #7c3aed, #9333ea, #d946ef);
  --org-glow: rgb(196 181 253 / .4);
  --org-accent: #7c3aed;
  --org-text: #7c3aed;
  --org-badge: linear-gradient(to right, #8b5cf6, #7e22ce);
  --org-btn: linear-gradient(to right, #8b5cf6, #7e22ce);
  --org-border: #c4b5fd;
  --org-ring: rgb(221 214 254);
  --org-soft: linear-gradient(to bottom right, #f5f3ff, #faf5ff);
  --org-strong: #6d28d9;
}

.tarifs[data-tab='association'] {
  --org-hero: linear-gradient(to bottom right, #059669, #22c55e, #2dd4bf);
  --org-glow: rgb(110 231 183 / .4);
  --org-accent: #059669;
  --org-text: #059669;
  --org-badge: linear-gradient(to right, #10b981, #16a34a);
  --org-btn: linear-gradient(to right, #10b981, #16a34a);
  --org-border: #6ee7b7;
  --org-ring: rgb(167 243 208);
  --org-soft: linear-gradient(to bottom right, #ecfdf5, #f0fdf4);
  --org-strong: #047857;
}

/* Le contenu propre à un onglet n'apparaît que sous cet onglet */
.tarifs [data-for] { display: none; }
.tarifs[data-tab='ecole']       [data-for~='ecole'],
.tarifs[data-tab='entreprise']  [data-for~='entreprise'],
.tarifs[data-tab='association'] [data-for~='association'] { display: revert; }
.tarifs[data-tab='ecole']       .grid-org[data-for~='ecole'],
.tarifs[data-tab='entreprise']  .grid-org[data-for~='entreprise'],
.tarifs[data-tab='association'] .grid-org[data-for~='association'] { display: grid; }

/* Prix : le cycle affiché dépend de [data-cycle] */
.tarifs [data-cycle-only] { display: none; }
.tarifs[data-cycle='monthly'] [data-cycle-only='monthly'],
.tarifs[data-cycle='yearly']  [data-cycle-only='yearly'] { display: revert; }
.tarifs[data-cycle='monthly'] .amount [data-cycle-only='monthly'] { display: flex; }
.tarifs[data-cycle='yearly']  .amount [data-cycle-only='yearly']  { display: flex; }

/* ── Héros ── */
.tarifs-hero { position: relative; overflow: hidden; color: #fff; background: var(--org-hero); }

.tarifs-hero .halo {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  background: var(--org-glow);
}
.tarifs-hero .halo-1 { top: -6rem; left: -5rem; width: 24rem; height: 24rem; animation: halo1 14s ease-in-out infinite; }
.tarifs-hero .halo-2 { bottom: -7rem; right: -4rem; width: 28rem; height: 28rem; animation: halo2 16s ease-in-out infinite; }

@keyframes halo1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } }
@keyframes halo2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-24px, 24px); } }

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

/* Trame de points */
.tarifs-hero .dots {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 22px 22px;
}

.tarifs-hero .inner {
  position: relative;
  z-index: 10;
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  text-align: center;
}
.tarifs-hero h1 { font-weight: 800; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.2; margin-bottom: 0.75rem; }
.tarifs-hero .sub { color: rgb(255 255 255 / .9); font-size: 1.05rem; max-width: 42rem; margin: 0 auto 1.75rem; }

.pill-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .15);
  border: 1px solid rgb(255 255 255 / .2);
  backdrop-filter: blur(12px);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pill-light svg { width: 0.875rem; height: 0.875rem; }

.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.trust-row .pill-light { margin-bottom: 0; padding: 0.375rem 0.875rem; font-weight: 500; }

/* Vague de transition vers le fond de page */
.tarifs-hero .wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 3rem; display: block; }

/* ── Onglets d'organisation ── */
.tabs-org { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-bottom: 1.75rem; }

.tabs-org button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.tabs-org button:hover { border-color: hsl(var(--foreground) / .2); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.tabs-org button svg { width: 1rem; height: 1rem; }

.tarifs[data-tab='ecole']       .tabs-org button[value='ecole'],
.tarifs[data-tab='entreprise']  .tabs-org button[value='entreprise'],
.tarifs[data-tab='association'] .tabs-org button[value='association'] {
  background: var(--org-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  transform: scale(1.05);
}

/* ── Bascule mensuel / annuel ── */
.cycle-wrap { display: flex; justify-content: center; margin-bottom: 2.25rem; }

.cycle {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 999px;
  background: hsl(var(--secondary));
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);
}
.cycle button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.tarifs[data-cycle='monthly'] .cycle button[value='monthly'],
.tarifs[data-cycle='yearly']  .cycle button[value='yearly'] {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);
}
.cycle .save {
  font-size: 11px;
  font-weight: 700;
  background: #d1fae5;
  color: #047857;
  border-radius: 999px;
  padding: 0.125rem 0.375rem;
}

/* ── Cartes de forfait organisation ── */
.grid-org { grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }

.org-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: box-shadow .3s, transform .3s;
}
.org-card:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); transform: translateY(-4px); }
.org-card.popular { border-color: var(--org-border); box-shadow: 0 0 0 2px var(--org-ring); }

.org-card .ribbon {
  padding: 0.375rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--org-badge);
}

.org-head { padding: 1.25rem 1.5rem 1.5rem; color: #fff; background: var(--org-badge); }
.org-head .title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.org-head .title .emoji { font-size: 1.5rem; line-height: 1; }
.org-head .title p { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.org-head .tagline { color: rgb(255 255 255 / .8); font-size: 0.9rem; min-height: 2.5rem; }
.org-head .amount { margin-top: 1rem; }
.org-head .amount > span { align-items: flex-end; gap: 0.375rem; }
.org-head .amount b { font-weight: 800; font-size: 2.25rem; line-height: 1; }
.org-head .amount span span { color: rgb(255 255 255 / .7); font-size: 0.9rem; margin-bottom: 0.25rem; }
.org-head .seats {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .2);
  font-size: 0.8rem;
  font-weight: 600;
}
.org-head .seats svg { width: 0.875rem; height: 0.875rem; }

.org-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.org-body .blurb { flex: 1; display: flex; align-items: center; margin-bottom: 1.25rem; }
.org-body .blurb p { font-size: 0.9rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.org-body .blurb b { color: hsl(var(--foreground)); font-weight: 600; }

.btn-org { width: 100%; height: 3rem; border-radius: 0.75rem; font-weight: 700; color: #fff; background: var(--org-btn); }
.btn-org:hover { opacity: .9; }

.org-save { text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--org-text); margin-top: 0.625rem; }

/* ── Bandeau « sur-mesure » ── */
.surmesure {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 2px dashed var(--org-border);
  border-radius: 1.5rem;
  background: var(--org-soft);
}
.surmesure .row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.surmesure .who { display: flex; align-items: flex-start; gap: 1rem; }
.surmesure .who .badge {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--org-badge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.surmesure .who .badge svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.surmesure h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.65; color: var(--org-strong); }
.surmesure .who p { color: hsl(var(--foreground) / .8); font-size: 0.9rem; margin-top: 0.25rem; max-width: 36rem; }

.btn-devis {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: none;
  border-radius: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--org-btn);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  cursor: pointer;
  transition: transform .2s, opacity .2s;
}
.btn-devis:hover { opacity: .9; transform: translateY(-2px); }
.btn-devis svg { width: 1rem; height: 1rem; }

.surmesure .ghost { position: absolute; right: -2rem; bottom: -2.5rem; opacity: .1; }
.surmesure .ghost svg { width: 8rem; height: 8rem; }

@media (min-width: 768px) {
  .grid-org { grid-template-columns: repeat(2, 1fr); }
  .surmesure { padding: 2rem; }
  .surmesure .row { flex-direction: row; align-items: center; justify-content: space-between; }
  .tarifs-hero .wave { height: 4rem; }
}

@media (min-width: 1024px) {
  .grid-org { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   14. Mascotte (Lexi) — image animée selon l'émotion
   -------------------------------------------------------------------------- */

.mascotte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}
.mascotte img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

.mascotte.xs  { width: 5rem;  height: 5rem; }
.mascotte.sm  { width: 8rem;  height: 8rem; }
.mascotte.md  { width: 16rem; height: 16rem; }
.mascotte.lg  { width: 20rem; height: 20rem; }
.mascotte.xl  { width: 32rem; height: 32rem; }
.mascotte.xxl { width: 44rem; height: 44rem; max-width: 100%; }

/* Ces tailles sont fixes dans la source (sizeMap de Mascotte.jsx) : sous
   1024px les plus grandes débordent de l'écran et laissent un large aplat
   blanc au-dessus de l'image. On les plafonne à la largeur disponible en
   gardant le carré ; l'image reste cadrée en bas. */
.mascotte { max-width: 100%; }
.mascotte.md,
.mascotte.lg,
.mascotte.xl,
.mascotte.xxl { height: auto; aspect-ratio: 1 / 1; }

/* Flottement par défaut ; « celebrate » saute et se balance */
.mascotte { animation: float 3s ease-in-out infinite; }
.mascotte.celebrate { animation: celebrate .8s ease-in-out infinite; }
.mascotte.amoureux  { animation: loved 2.2s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes loved { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.04); } }
@keyframes celebrate {
  0%   { transform: translateY(0) rotate(-3deg) scale(1); }
  25%  { transform: translateY(-18px) rotate(3deg) scale(1.05); }
  50%  { transform: translateY(0) rotate(-3deg) scale(1); }
  75%  { transform: translateY(-18px) rotate(3deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

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

/* --------------------------------------------------------------------------
   15. Page Premium — offres présentées en colonne
   -------------------------------------------------------------------------- */

.premium-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(to bottom right, #7c3aed, #9333ea, #4f46e5);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.premium-hero::before,
.premium-hero::after { content: ''; position: absolute; border-radius: 999px; background: rgb(255 255 255 / .1); }
.premium-hero::before { top: 0; right: 0; width: 10rem; height: 10rem; transform: translate(4rem, -4rem); }
.premium-hero::after  { bottom: 0; left: 0; width: 8rem; height: 8rem; transform: translate(-2rem, 3rem); }
.premium-hero .inner { position: relative; z-index: 10; }
.premium-hero .crown-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.premium-hero .crown-row svg { width: 1.5rem; height: 1.5rem; color: #fde047; }
.premium-hero h2 { font-weight: 800; font-size: 1.5rem; line-height: 1.5; }
.premium-hero p { color: #e9d5ff; line-height: 1.7; }
.premium-hero strong { color: #fff; }

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75;
}
.section-title .emoji { font-size: 1.25rem; }

/* Carte de forfait en pleine largeur */
.plan-row { overflow: hidden; border: 2px solid hsl(var(--border)); border-radius: 1.5rem; }
.plan-row + .plan-row { margin-top: 1rem; }
.plan-row.tint-gray   { border-color: #e5e7eb; background: #f9fafb; }
.plan-row.tint-green  { border-color: #86efac; background: #f0fdf4; }
.plan-row.tint-purple { border-color: #c084fc; background: #fff; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); transform: scale(1.02); }
.plan-row.tint-blue   { border-color: #93c5fd; background: #eff6ff; }
.plan-row.tint-slate  { border-color: #cbd5e1; background: #f8fafc; }

.plan-row .ribbon { padding: 0.375rem; text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; }
.plan-row .ribbon.r-green  { background: #bbf7d0; color: #166534; }
.plan-row .ribbon.r-yellow { background: #facc15; color: #713f12; }

.plan-row .head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; color: #fff; }
.plan-row .head .id { display: flex; align-items: center; gap: 0.75rem; }
.plan-row .head .id > svg { width: 1.5rem; height: 1.5rem; color: rgb(255 255 255 / .8); flex-shrink: 0; }
.plan-row .head .name { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1.4; }
.plan-row .head .tagline { color: rgb(255 255 255 / .8); font-size: 0.8rem; margin-top: 0.125rem; }
.plan-row .head .cost { text-align: right; flex-shrink: 0; }
.plan-row .head .cost .amount { font-weight: 800; font-size: 1.5rem; line-height: 1.4; }
.plan-row .head .cost .amount.sm { font-size: 1.125rem; }
.plan-row .head .cost .per { color: rgb(255 255 255 / .8); font-size: 0.8rem; }

.head-gray   { background: #6b7280; }
.head-green  { background: linear-gradient(to right, #22c55e, #059669); }
.head-purple { background: linear-gradient(to right, #9333ea, #4f46e5); }
.head-blue   { background: linear-gradient(to right, #3b82f6, #0891b2); }
.head-slate  { background: linear-gradient(to right, #475569, #374151); }
.head-teal   { background: linear-gradient(to right, #16a34a, #0d9488); }

.plan-row .body { padding: 1.25rem; }
.plan-row .body ul { margin-bottom: 1.25rem; }
.plan-row .body li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.plan-row .body li + li { margin-top: 0.5rem; }
.plan-row .body li svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; color: #22c55e; }
.plan-row .body li.no { color: hsl(var(--muted-foreground)); text-decoration: line-through; }
.plan-row .body li.no .cross { width: 1rem; flex-shrink: 0; margin-top: 0.125rem; text-align: center; color: #d1d5db; }

.btn-row { width: 100%; height: 3rem; border-radius: 0.75rem; font-weight: 700; color: #fff; }
.btn-row.b-green  { background: linear-gradient(to right, #22c55e, #059669); }
.btn-row.b-purple { background: linear-gradient(to right, #9333ea, #4f46e5); }
.btn-row.b-purple .crown { color: #fde047; }
.btn-row:hover { opacity: .9; }
.btn-row.b-outline { background: transparent; color: hsl(var(--foreground)); border: 2px solid hsl(var(--input)); }
.btn-row.b-outline:hover { opacity: 1; background: hsl(var(--secondary)); }

/* Séparateur « Offres multi-utilisateurs » */
.sep-users { display: flex; align-items: center; gap: 0.75rem; }
.sep-users .line { flex: 1; height: 1px; background: hsl(var(--border)); }
.sep-users .chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: hsl(var(--secondary));
  font-size: 0.9rem;
  font-weight: 600;
}
.sep-users .chip svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }

/* Encadré « Pourquoi 10-Lexique ? » */
.why-box {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid #bbf7d0;
  border-radius: 1rem;
  background: #f0fdf4;
}
/* Mascotte lg (20rem) placée en vis-à-vis du texte : réduite tant que la
   ligne ne peut pas l'accueillir. */
.why-box .mascotte { flex-shrink: 0; }
.why-box .mascotte.lg { width: 5rem; }
@media (min-width: 640px) { .why-box .mascotte.lg { width: 8rem; } }
@media (min-width: 1024px) { .why-box .mascotte.lg { width: 20rem; } }
.why-box p:first-of-type { font-family: var(--font-heading); font-weight: 700; color: #14532d; margin-bottom: 0.25rem; }
.why-box p:last-of-type { color: #166534; font-size: 0.9rem; line-height: 1.7; }
.why-box strong { color: #14532d; }

/* --------------------------------------------------------------------------
   16. Page Orthophonie — héros, protocole, modules
   -------------------------------------------------------------------------- */

.ortho-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(to bottom right, #4f46e5, #9333ea, #ec4899);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.ortho-hero::before,
.ortho-hero::after { content: ''; position: absolute; border-radius: 999px; background: rgb(255 255 255 / .1); }
.ortho-hero::before { top: 0; right: 0; width: 12rem; height: 12rem; transform: translate(4rem, -4rem); }
.ortho-hero::after  { bottom: 0; left: 1rem; width: 6rem; height: 6rem; transform: translateY(2rem); }

.ortho-hero .row { position: relative; z-index: 10; display: flex; align-items: center; gap: 1rem; }
.ortho-hero .row > .btn-icon { color: #fff; flex-shrink: 0; }
.ortho-hero .row > .btn-icon:hover { background: rgb(255 255 255 / .2); }
.ortho-hero .txt { flex: 1; min-width: 0; }
.ortho-hero .eyebrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.ortho-hero .eyebrow svg { width: 1rem; height: 1rem; color: #fde047; }
.ortho-hero .eyebrow span { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #ddd6fe; }
.ortho-hero h1 { font-weight: 800; font-size: clamp(1.5rem, 4vw, 1.875rem); margin-bottom: 0.25rem; }
.ortho-hero .txt > p { color: #e9d5ff; font-size: 0.9rem; }
/* Mascotte lg dans le bandeau : sous 1024px elle recouvre le titre, que
   .ortho-hero masque ensuite par son overflow. Même barème qu'ailleurs. */
.ortho-hero .mascotte { flex-shrink: 0; }
.ortho-hero .mascotte.lg { width: 5rem; }
@media (min-width: 640px) { .ortho-hero .mascotte.lg { width: 8rem; } }
@media (min-width: 1024px) { .ortho-hero .mascotte.lg { width: 20rem; } }

/* Encart d'information ambré */
.note-amber {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid #fde68a;
  border-radius: 1rem;
  background: #fffbeb;
}
.note-amber .icon { font-size: 1.5rem; line-height: 1.4; }
.note-amber p:first-of-type { font-weight: 600; font-size: 0.9rem; color: #78350f; }
.note-amber p:last-of-type { font-size: 0.8rem; line-height: 1.6; color: #b45309; margin-top: 0.125rem; }
.note-amber strong { font-weight: 700; }

/* Trois compteurs côte à côte */
.stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.stats-3 .stat {
  padding: 0.75rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.stats-3 .stat svg { width: 1.25rem; height: 1.25rem; margin: 0 auto 0.25rem; }
.stats-3 .stat .value { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; line-height: 1.4; }
.stats-3 .stat .label { color: hsl(var(--muted-foreground)); font-size: 0.8rem; }

/* Ligne de module cliquable */
.module-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid;
  border-radius: 1rem;
  transition: box-shadow .2s, transform .2s;
}
.module-row:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transform: scale(1.01); }
.module-row + .module-row,
a + a .module-row { margin-top: 0.75rem; }

.module-row .badge {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.module-row .txt { flex: 1; min-width: 0; }
.module-row .title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.125rem; }
.module-row h3 { font-weight: 700; font-size: 1rem; }
.module-row .tag { font-size: 0.8rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 999px; }
.module-row .desc { color: hsl(var(--muted-foreground)); font-size: 0.9rem; line-height: 1.4; }
.module-row > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; opacity: .6; }

/* Teintes par module */
.m-blue   { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.m-blue   .badge { background: linear-gradient(to bottom right, #3b82f6, #06b6d4); }
.m-blue   .tag { background: #dbeafe; color: #1d4ed8; }
.m-purple { background: #faf5ff; border-color: #e9d5ff; color: #6b21a8; }
.m-purple .badge { background: linear-gradient(to bottom right, #a855f7, #8b5cf6); }
.m-purple .tag { background: #f3e8ff; color: #7e22ce; }
.m-green  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.m-green  .badge { background: linear-gradient(to bottom right, #22c55e, #10b981); }
.m-green  .tag { background: #dcfce7; color: #15803d; }
.m-orange { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.m-orange .badge { background: linear-gradient(to bottom right, #f97316, #f59e0b); }
.m-orange .tag { background: #ffedd5; color: #c2410c; }
.m-rose   { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.m-rose   .badge { background: linear-gradient(to bottom right, #f43f5e, #ec4899); }
.m-rose   .tag { background: #ffe4e6; color: #be123c; }
.m-teal   { background: #f0fdfa; border-color: #99f6e4; color: #115e59; }
.m-teal   .badge { background: linear-gradient(to bottom right, #14b8a6, #06b6d4); }
.m-teal   .tag { background: #ccfbf1; color: #0f766e; }
.m-indigo { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.m-indigo .badge { background: linear-gradient(to bottom right, #6366f1, #3b82f6); }
.m-indigo .tag { background: #e0e7ff; color: #4338ca; }
.m-yellow { background: #fefce8; border-color: #fef08a; color: #854d0e; }
.m-yellow .badge { background: linear-gradient(to bottom right, #eab308, #fb923c); }
.m-yellow .tag { background: #fef9c3; color: #a16207; }

/* Encadré conseil */
.tip-green {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid #bbf7d0;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, #f0fdf4, #ecfdf5);
}
/* Même traitement que .why-box : la mascotte lg ne tient pas sur mobile. */
.tip-green .mascotte { flex-shrink: 0; }
.tip-green .mascotte.lg { width: 5rem; }
@media (min-width: 640px) { .tip-green .mascotte.lg { width: 8rem; } }
@media (min-width: 1024px) { .tip-green .mascotte.lg { width: 20rem; } }
.tip-green p:first-of-type { font-family: var(--font-heading); font-weight: 700; color: #14532d; margin-bottom: 0.25rem; }
.tip-green p:last-of-type { color: #166534; font-size: 0.9rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   17. Pages de domaine (Lecture, Mémoire, Attention, Compréhension, Orthographe)
   Les cinq partagent exactement la même structure et la palette verte.
   -------------------------------------------------------------------------- */

.domain-hero { background: #16a34a; color: #fff; }
.domain-hero .inner { max-width: 56rem; margin: 0 auto; padding: 2rem 1rem; }

.link-back-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: #dcfce7;
}
.link-back-soft:hover { color: #fff; }
.link-back-soft svg { width: 1rem; height: 1rem; }

/* La source place une mascotte xl (32rem, largeur fixe) à côté du titre dans
   une ligne flex non sécable : sous 1024px elle chasse le texte hors écran.
   Ici le héros s'empile sur mobile et la mascotte suit la largeur. */
.domain-hero .row { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.domain-hero .mascotte { margin-bottom: -0.5rem; flex-shrink: 0; }
.domain-hero .mascotte.xl { width: 12rem; }
.domain-hero .txt { flex: 1; padding-bottom: 0.5rem; }
.domain-hero .big-emoji { font-size: 3rem; line-height: 1.2; margin-bottom: 0.75rem; }
.domain-hero h1 { font-weight: 800; font-size: clamp(2.25rem, 6vw, 3rem); margin-bottom: 0.5rem; }
.domain-hero .txt > p { color: #dcfce7; font-size: 1.125rem; max-width: 36rem; }

.domain-body { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem; }
.domain-body > * + * { margin-top: 2.5rem; }

.stats-domain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stats-domain .stat {
  padding: 1rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.stats-domain .stat svg { width: 1.5rem; height: 1.5rem; color: #16a34a; margin: 0 auto 0.5rem; }
.stats-domain .stat .label { font-family: var(--font-heading); font-weight: 700; color: #14532d; }
.stats-domain .stat .sub { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

.ex-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.ex-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: box-shadow .2s, border-color .2s;
}
.ex-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); border-color: #86efac; }
.ex-card .emoji { font-size: 1.875rem; line-height: 1.3; }
.ex-card h3 { font-weight: 600; font-size: 1.125rem; margin-bottom: 0.25rem; }
.ex-card .desc { color: hsl(var(--muted-foreground)); font-size: 0.9rem; margin-bottom: 0.75rem; }
.ex-card .meta { display: flex; align-items: center; gap: 0.5rem; }
.ex-card .level { background: #dcfce7; color: #15803d; font-size: 0.8rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 999px; }
.ex-card .time { color: hsl(var(--muted-foreground)); font-size: 0.8rem; }

.tips-green {
  padding: 1.5rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 1rem;
}
.tips-green .head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tips-green .head svg { width: 1.25rem; height: 1.25rem; color: #16a34a; }
.tips-green h3 { font-weight: 600; color: #14532d; }
.tips-green li { display: flex; align-items: flex-start; gap: 0.5rem; color: #166534; font-size: 0.9rem; }
.tips-green li + li { margin-top: 0.5rem; }
.tips-green li .tick { color: #22c55e; margin-top: 0.125rem; }
.tips-green > p { color: #166534; font-size: 0.9rem; line-height: 1.7; }

.btn-domain {
  height: 3.5rem;
  padding: 0 2.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  background: #16a34a;
  color: #fff;
}
.btn-domain:hover { background: #15803d; }

/* ── Techniques de mémorisation (page Mémoire) ── */
.memo-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.memo-head .emoji { font-size: 1.5rem; }
.memo-head h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.5; }

.memo-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.memo-card {
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: box-shadow .2s, border-color .2s;
}
.memo-card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); border-color: #86efac; }
.memo-card .top { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.memo-card .ico {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.memo-card .ico svg { width: 1.25rem; height: 1.25rem; }
.memo-card h3 { font-weight: 700; font-size: 1rem; }
.memo-card .short { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.memo-card .desc { font-size: 0.9rem; line-height: 1.7; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.memo-card .example {
  font-size: 0.8rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.memo-card .example b { font-weight: 600; }

.ico-violet  { color: #7c3aed; background: #f5f3ff; }
.ico-blue    { color: #2563eb; background: #eff6ff; }
.ico-green   { color: #16a34a; background: #f0fdf4; }
.ico-amber   { color: #d97706; background: #fffbeb; }
.ico-rose    { color: #e11d48; background: #fff1f2; }
.ico-cyan    { color: #0891b2; background: #ecfeff; }
.ico-indigo  { color: #4f46e5; background: #eef2ff; }
.ico-emerald { color: #059669; background: #ecfdf5; }

.memo-note {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(to bottom right, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #14532d;
}
.memo-note b { font-weight: 600; }

@media (min-width: 640px) {
  .memo-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-hero .row { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
  .domain-hero .mascotte.xl { width: 16rem; }
}

@media (min-width: 768px) {
  .ex-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Au-delà de 1024px la ligne complète tient : on retrouve la taille source. */
@media (min-width: 1024px) {
  .domain-hero .mascotte.xl { width: 32rem; }
}

/* --------------------------------------------------------------------------
   18. Lecteur d'exercice — modules orthophonie (question, options, retour)
   -------------------------------------------------------------------------- */

.ex-shell { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1rem 7rem; }
.ex-shell > * + * { margin-top: 1.25rem; }

@media (min-width: 768px) { .ex-shell { padding-bottom: 2rem; } }

.ex-head { display: flex; align-items: center; gap: 0.75rem; }
.ex-head .txt { flex: 1; min-width: 0; }
.ex-head h1 { font-weight: 700; font-size: 1.25rem; line-height: 1.65; }
.ex-head .sub { font-size: 0.9rem; }
.ex-head .score { text-align: right; }
.ex-head .score .n { font-weight: 800; font-size: 1.5rem; line-height: 1.4; color: #16a34a; }
.ex-head .score .l { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* Teintes : violet pour la phonologie, vert pour la lecture */
.tone-purple .ex-head h1, .tone-purple h1 { color: #581c87; }
.tone-purple .ex-head .sub { color: #9333ea; }
.tone-purple .ex-head .btn-icon { color: #6b21a8; }
.tone-green .ex-head h1 { color: #14532d; }
.tone-green .ex-head .sub { color: #16a34a; }
.tone-green .ex-head .btn-icon { color: #15803d; }

.progress { height: 0.75rem; border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; border-radius: 999px; }
.tone-purple .progress { background: #f3e8ff; }
.tone-purple .progress .bar { background: linear-gradient(to right, #a855f7, #ec4899); }
.tone-green .progress { background: #dcfce7; }
.tone-green .progress .bar { background: linear-gradient(to right, #4ade80, #10b981); }

.center-row { display: flex; justify-content: center; }

.quiz-card {
  background: #fff;
  border: 2px solid #f3e8ff;
  border-radius: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  padding: 1.5rem;
}
.quiz-card.green { border-color: #dcfce7; }
.quiz-card .ask { color: #9333ea; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; text-align: center; }
.quiz-card .hint { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; text-align: center; }

.chip-type {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7e22ce;
  font-size: 0.8rem;
  font-weight: 600;
}
.quiz-card .instruction { color: #7e22ce; font-weight: 500; margin-bottom: 1rem; }

/* Gros bouton « Écouter » */
.listen-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to bottom right, #a855f7, #ec4899);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  transition: transform .15s;
}
.listen-big:hover { transform: scale(1.05); }
.listen-big:active { transform: scale(.95); }
.listen-big svg { width: 2rem; height: 2rem; margin-bottom: 0.25rem; }
.listen-big span { font-size: 0.8rem; font-weight: 600; }

/* Mot à travailler + petit bouton haut-parleur */
.word-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, #faf5ff, #fdf2f8);
}
.word-box .word { font-family: var(--font-heading); font-weight: 800; font-size: 1.875rem; color: #581c87; }
.speak-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 999px;
  background: #a855f7;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.speak-btn:hover { background: #9333ea; }
.speak-btn svg { width: 1.5rem; height: 1.5rem; }

/* Grille de réponses */
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid #e9d5ff;
  border-radius: 1rem;
  background: #fff;
  color: #581c87;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.opt:hover { border-color: #c084fc; transform: scale(1.05); }
.opt svg { width: 1rem; height: 1rem; }
.opt.correct { border-color: #22c55e; background: #f0fdf4; color: #14532d; }
.opt.correct svg { color: #16a34a; }
.opt.wrong { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.opt.wrong svg { color: #ef4444; }
.opt.dim { opacity: .4; border-color: #e5e7eb; background: #f9fafb; }

/* Retour après réponse */
.feedback { padding: 1rem; border: 2px solid; border-radius: 1rem; }
.feedback.ok { background: #f0fdf4; border-color: #86efac; }
.feedback.ko { background: #fff7ed; border-color: #fed7aa; }
.feedback .title { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.feedback .tip { font-size: 0.9rem; color: #92400e; }
.btn-next { width: 100%; margin-top: 0.75rem; height: 2.25rem; border-radius: 0.75rem; background: #9333ea; color: #fff; font-weight: 500; }
.btn-next:hover { background: #7e22ce; }
.btn-next.green { background: #16a34a; }
.btn-next.green:hover { background: #15803d; }

/* ── Lecture fluide ── */
.text-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.text-chips button {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.text-chips button:hover { background: #dcfce7; }
.text-chips button[aria-pressed='true'] {
  background: #16a34a;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}

.read-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.read-card h2 { font-weight: 700; font-size: 1.125rem; color: #14532d; }
.read-card .listen-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  cursor: pointer;
}
.read-card .listen-sm:hover { background: #bbf7d0; }
.read-card .listen-sm svg { width: 1.25rem; height: 1.25rem; }

/* Le texte à lire : interlignage doublé, mot courant surligné */
.read-text {
  font-size: 1.125rem;
  color: #052e16;
  letter-spacing: 0.03em;
  line-height: 2;
}
.read-text .now { background: #fef08a; color: #713f12; border-radius: 0.25rem; padding: 0 0.125rem; }

.timer-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.timer-bar .left { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.timer-bar svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--muted-foreground)); }
.timer-bar .clock { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: #166534; }
.btn-read { height: 2.25rem; padding: 0 1.5rem; border-radius: 0.75rem; background: #16a34a; color: #fff; }
.btn-read:hover { background: #15803d; }

.result-card {
  padding: 1.25rem;
  text-align: center;
  background: #fff;
  border: 2px solid #bbf7d0;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.result-card .wpm { font-family: var(--font-heading); font-weight: 800; font-size: 3rem; line-height: 1.2; color: #15803d; }
.result-card .unit { color: #16a34a; font-weight: 600; margin-bottom: 0.75rem; }
.result-card .verdict { font-weight: 600; margin-bottom: 1rem; color: #16a34a; }

/* --------------------------------------------------------------------------
   19. Page Exercices — séance personnalisée et choix du terrain
   -------------------------------------------------------------------------- */

.exo-page { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 6rem; }
@media (min-width: 768px) { .exo-page { padding-bottom: 2.5rem; } }

.eyebrow-green {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #16a34a;
  margin-bottom: 0.25rem;
}

.exo-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  color: #fff;
  background: linear-gradient(to bottom right, #22c55e, #10b981, #0d9488);
  box-shadow: 0 20px 25px -5px rgb(187 247 208 / .6);
}
.exo-hero .decor-letters span { color: #fff; }
.exo-hero .inner { position: relative; z-index: 10; padding: 1.5rem; }
.exo-hero .eyebrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.exo-hero .eyebrow svg { width: 1rem; height: 1rem; color: #fde68a; }
.exo-hero .eyebrow span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #ecfdf5; }
.exo-hero h2 { font-weight: 800; font-size: 1.5rem; line-height: 1.25; margin-bottom: 0.5rem; }
.exo-hero > .inner > p { color: rgb(236 253 245 / .9); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem; max-width: 36rem; }
.exo-hero strong { color: #fff; }
.exo-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.btn-start {
  height: 3.5rem;
  padding: 0 2rem;
  border-radius: 1rem;
  background: #fff;
  color: #15803d;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
}
.btn-start:hover { background: #f0fdf4; }
.btn-start svg { fill: #15803d; }

.btn-goto {
  height: 3.5rem;
  padding: 0 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / .2);
  background: rgb(255 255 255 / .15);
  backdrop-filter: blur(4px);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-goto:hover { background: rgb(255 255 255 / .25); }

.trained-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.trained-line svg { width: 1rem; height: 1rem; color: #16a34a; }

.domain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.domain-tile {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: 2px solid;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.domain-tile:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: translateY(-2px); }
.domain-tile:active { transform: scale(.98); }

.domain-tile .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.domain-tile .ico {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.domain-tile .top > svg { width: 1.25rem; height: 1.25rem; opacity: .4; transition: opacity .2s, transform .2s; }
.domain-tile:hover .top > svg { opacity: 1; transform: translateX(2px); }
.domain-tile .name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.domain-tile .desc { font-size: 0.8rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0.125rem 0 0.75rem; }

.domain-tile .level-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin-bottom: 0.25rem; }
.domain-tile .level-row .lab { color: hsl(var(--muted-foreground)); font-weight: 500; }
.domain-tile .level-row .val { font-weight: 700; }
.domain-tile .track { height: 0.375rem; background: rgb(255 255 255 / .7); border-radius: 999px; overflow: hidden; }
.domain-tile .track .fill { height: 100%; border-radius: 999px; }

.domain-tile .todo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .7);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Teintes par terrain */
.d-lecture       { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.d-lecture       .ico { background: linear-gradient(to bottom right, #34d399, #22c55e); }
.d-lecture       .fill { background: #10b981; }
.d-orthographe   { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.d-orthographe   .ico { background: linear-gradient(to bottom right, #a78bfa, #a855f7); }
.d-orthographe   .fill { background: #8b5cf6; }
.d-memoire       { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.d-memoire       .ico { background: linear-gradient(to bottom right, #38bdf8, #3b82f6); }
.d-memoire       .fill { background: #0ea5e9; }
.d-attention     { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.d-attention     .ico { background: linear-gradient(to bottom right, #fb7185, #ec4899); }
.d-attention     .fill { background: #f43f5e; }
.d-comprehension { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.d-comprehension .ico { background: linear-gradient(to bottom right, #fbbf24, #f97316); }
.d-comprehension .fill { background: #f59e0b; }

/* Carte séance guidée (Premium) */
.guided-tile {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 1rem;
  border: 2px solid #ddd6fe;
  border-radius: 1.5rem;
  background: linear-gradient(to bottom right, #f5f3ff, #faf5ff);
  transition: box-shadow .2s, transform .2s;
}
.guided-tile:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: translateY(-2px); }
.guided-tile::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  background: rgb(221 214 254 / .4);
  filter: blur(32px);
}
.guided-tile .top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.guided-tile .ico {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(to bottom right, #8b5cf6, #6366f1);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.guided-tile .tag-premium {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
}
.guided-tile .name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: #6d28d9; }
.guided-tile .desc { font-size: 0.8rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0.125rem 0 0.75rem; }
.guided-tile .locked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .7);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.guided-tile .locked svg { width: 0.75rem; height: 0.75rem; }

/* Rappel du plan gratuit */
.free-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 1rem;
}
.free-note .emoji { font-size: 1.25rem; }
.free-note p { flex: 1; font-size: 0.9rem; line-height: 1.7; color: #92400e; }
.btn-amber { flex-shrink: 0; height: 2rem; padding: 0 0.75rem; border-radius: 0.75rem; background: #f59e0b; color: #fff; font-size: 0.9rem; }
.btn-amber:hover { background: #d97706; }

@media (min-width: 768px) {
  .domain-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .exo-hero .inner { padding: 2rem; }
  .domain-tile, .guided-tile { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   20. Page Mes progrès — objectif, programme, badges, historique
   -------------------------------------------------------------------------- */

.plan-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(to bottom right, #22c55e, #10b981, #14b8a6);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.plan-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 10rem; height: 10rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  transform: translate(3rem, -3rem);
}
.plan-hero .inner { position: relative; z-index: 10; }
.plan-hero h1 { font-weight: 800; font-size: 1.5rem; margin-bottom: 0.25rem; }
.plan-hero p { color: #dcfce7; font-size: 0.9rem; }

/* Conseil du jour */
.tip-day { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: #fffbeb; border: 2px solid #fde68a; border-radius: 1rem; }
.tip-day .emoji { font-size: 1.875rem; flex-shrink: 0; line-height: 1.3; }
.tip-day p:first-of-type { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: #78350f; margin-bottom: 0.125rem; }
.tip-day p:last-of-type { font-size: 0.9rem; line-height: 1.7; color: #b45309; }

/* Objectif du jour */
.goal-card { padding: 1rem; background: #fff; border: 2px solid #bbf7d0; border-radius: 1rem; }
.goal-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.goal-card h2 { font-weight: 700; color: #14532d; }
.goal-card .count { font-size: 0.8rem; font-weight: 600; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 0.125rem 0.5rem; }
.goal-card .track { height: 0.75rem; background: #dcfce7; border-radius: 999px; overflow: hidden; margin-bottom: 0.75rem; }
.goal-card .track .fill { height: 100%; border-radius: 999px; background: linear-gradient(to right, #4ade80, #10b981); }
.goal-card > p { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* Programme du jour */
.programme { padding: 1.25rem; border: 2px solid #ddd6fe; border-radius: 1.5rem; background: linear-gradient(to bottom right, #f5f3ff, #faf5ff); }
.programme .head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.programme .head svg { width: 1.25rem; height: 1.25rem; color: #7c3aed; }
.programme h2 { font-weight: 700; font-size: 1.125rem; color: #4c1d95; }
.programme > p { font-size: 0.8rem; color: #7c3aed; margin-bottom: 1rem; }

.pick-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid;
  border-radius: 1rem;
  transition: box-shadow .2s, transform .2s;
}
.pick-row:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transform: scale(1.01); }
.pick-row + .pick-row, a + a .pick-row { margin-top: 0.75rem; }
.pick-row .ico {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.pick-row .txt { flex: 1; min-width: 0; }
.pick-row .name-row { display: flex; align-items: center; gap: 0.5rem; }
.pick-row .name { font-weight: 700; }
.pick-row .why { font-size: 0.8rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; }
.pick-row .flag { font-size: 10px; font-weight: 600; background: #fee2e2; color: #dc2626; border-radius: 999px; padding: 0.125rem 0.375rem; }
.pick-row > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; opacity: .6; margin-top: 0.25rem; }

.btn-guided { width: 100%; margin-top: 1rem; height: 2.75rem; border-radius: 0.75rem; background: #7c3aed; color: #fff; font-weight: 700; }
.btn-guided:hover { background: #6d28d9; }

/* Teintes de domaine (partagées par le programme et les suggestions) */
.dm-sons          { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.dm-sons .ico     { background: linear-gradient(to bottom right, #60a5fa, #06b6d4); }
.dm-lecture       { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.dm-lecture .ico  { background: linear-gradient(to bottom right, #4ade80, #10b981); }
.dm-memoire       { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.dm-memoire .ico  { background: linear-gradient(to bottom right, #fb923c, #f59e0b); }
.dm-attention     { background: #faf5ff; border-color: #e9d5ff; color: #6b21a8; }
.dm-attention .ico{ background: linear-gradient(to bottom right, #c084fc, #8b5cf6); }
.dm-comprehension { background: #fefce8; border-color: #fef08a; color: #854d0e; }
.dm-comprehension .ico { background: linear-gradient(to bottom right, #facc15, #fb923c); }
.dm-orthographe   { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.dm-orthographe .ico { background: linear-gradient(to bottom right, #fb7185, #ec4899); }

/* Progrès du jour */
.panel { padding: 1.25rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.panel h2 { font-weight: 700; font-size: 1.125rem; }

.three-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.three-stats div { padding: 0.75rem; text-align: center; border-radius: 0.75rem; }
.three-stats .n { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.4; }
.three-stats .l { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.three-stats .s-green { background: #f0fdf4; } .three-stats .s-green .n { color: #15803d; }
.three-stats .s-amber { background: #fffbeb; } .three-stats .s-amber .n { color: #b45309; }
.three-stats .s-blue  { background: #eff6ff; } .three-stats .s-blue .n  { color: #1d4ed8; }

.dom-line + .dom-line { margin-top: 0.75rem; }
.dom-line .row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.25rem; }
.dom-line .row .val { display: flex; align-items: center; gap: 0.375rem; font-weight: 700; }
.dom-line .row .val svg { width: 0.875rem; height: 0.875rem; }
.dom-line .row .val .up { color: #16a34a; } .dom-line .row .val .down { color: #ef4444; } .dom-line .row .val .flat { color: hsl(var(--muted-foreground)); }
.dom-line .track { height: 0.625rem; background: hsl(var(--secondary)); border-radius: 999px; overflow: hidden; }
.dom-line .track .fill { height: 100%; border-radius: 999px; }
.g-blue   { background: linear-gradient(to right, #60a5fa, #06b6d4); }
.g-green  { background: linear-gradient(to right, #4ade80, #10b981); }
.g-orange { background: linear-gradient(to right, #fb923c, #f59e0b); }
.g-purple { background: linear-gradient(to right, #c084fc, #8b5cf6); }
.g-yellow { background: linear-gradient(to right, #facc15, #fb923c); }
.g-rose   { background: linear-gradient(to right, #fb7185, #ec4899); }

/* Médaillons (thème adulte des badges) */
.badges-panel { padding: 1.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1.5rem; }
.badges-panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.badges-panel .head .id { display: flex; align-items: center; gap: 0.625rem; }
.badges-panel .head .sq {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  display: flex; align-items: center; justify-content: center;
}
.badges-panel .head .sq svg { width: 1.25rem; height: 1.25rem; }
.badges-panel h2 { font-weight: 700; font-size: 1.125rem; }
.badges-panel .head .sub { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.gems { display: flex; align-items: center; gap: 0.375rem; background: hsl(var(--muted)); border-radius: 999px; padding: 0.25rem 0.75rem; }
.gems b { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }

.next-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  background: hsl(var(--muted) / .5);
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.next-badge .dial { position: relative; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.next-badge .dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.next-badge .txt { flex: 1; min-width: 0; }
.next-badge .txt p:first-child { font-size: 0.8rem; font-weight: 600; }
.next-badge .txt p:last-child { font-size: 0.8rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-badge .pct { text-align: right; flex-shrink: 0; }
.next-badge .pct b { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.next-badge .pct span { display: block; font-size: 10px; color: hsl(var(--muted-foreground)); }

.badges-group-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; }
.badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0.75rem; }

.medallion { display: flex; flex-direction: column; align-items: center; }
.medallion .disc { position: relative; width: 3.5rem; height: 3.5rem; }
.medallion .disc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.medallion .face {
  position: absolute;
  inset: 0.25rem;
  border-radius: 999px;
  background: hsl(var(--card));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.medallion .face img { width: 2.25rem; height: 2.25rem; object-fit: contain; transform: rotate(90deg); }
.medallion .face svg { position: static; width: 1rem; height: 1rem; transform: none; color: hsl(var(--muted-foreground) / .5); }
.medallion .name { margin-top: 0.5rem; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; }
.medallion .tier { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.medallion .prog { font-size: 9px; color: hsl(var(--muted-foreground) / .7); }
.medallion.locked .name { color: hsl(var(--muted-foreground)); }

/* Historique des jours */
.day-card { border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 0.75rem; }
.day-card + .day-card { margin-top: 0.75rem; }
.day-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.day-card .date { font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }
.day-card .res { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9rem; font-weight: 700; }
.day-card .res svg { width: 0.875rem; height: 0.875rem; }
.day-card .chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.day-card .chips span { font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid; }
.chip-up   { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.chip-down { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.chip-flat { background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* Encart Premium */
.premium-push {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(to bottom right, #7c3aed, #9333ea, #4f46e5);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1);
}
.premium-push::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8rem; height: 8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  transform: translate(2rem, -2rem);
}
.premium-push .inner { position: relative; z-index: 10; }
.premium-push .eyebrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.premium-push .eyebrow svg { width: 1.25rem; height: 1.25rem; color: #fde047; }
.premium-push .eyebrow span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fde047; }
.premium-push h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.5; margin-bottom: 0.5rem; }
.premium-push p { color: #e9d5ff; font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem; }
.btn-white-purple { width: 100%; height: 2.75rem; border-radius: 0.75rem; background: #fff; color: #6d28d9; font-weight: 700; }
.btn-white-purple:hover { background: #faf5ff; }

/* Accès au coach */
.coach-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 2px solid #bbf7d0;
  border-radius: 1rem;
  transition: box-shadow .2s, transform .2s;
}
.coach-cta:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transform: scale(1.01); }
.coach-cta .ico {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  background: #dcfce7;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.coach-cta .txt { flex: 1; }
.coach-cta .txt p:first-child { font-family: var(--font-heading); font-weight: 700; color: #14532d; }
.coach-cta .txt p:last-child { color: #15803d; font-size: 0.9rem; }
.coach-cta > svg { width: 1.25rem; height: 1.25rem; color: #4ade80; }

@media (min-width: 640px) {
  .badges-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --------------------------------------------------------------------------
   21. Page Journal de bord
   -------------------------------------------------------------------------- */

.journal-head {
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  color: #fff;
  background: linear-gradient(to bottom right, #16a34a, #047857);
}
.journal-head .row { display: flex; align-items: center; gap: 1rem; }
.journal-head .lexi {
  flex-shrink: 0;
  width: 6rem; height: 6rem;
  border-radius: 1.5rem;
  background: rgb(255 255 255 / .15);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 0.375rem;
}
.journal-head .lexi img { width: 100%; height: 100%; object-fit: contain; }
.journal-head .txt { flex: 1; min-width: 0; }
.journal-head h1 { font-weight: 700; font-size: 1.5rem; }
.journal-head .txt > p { color: rgb(255 255 255 / .85); font-size: 0.9rem; line-height: 1.7; }
.btn-journal-add { margin-top: 0.75rem; height: 2.25rem; border-radius: 0.75rem; background: #fff; color: #15803d; }
.btn-journal-add:hover { background: #f0fdf4; }

/* Trois compteurs */
.journal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.journal-stats > div { padding: 0.75rem; text-align: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.journal-stats .n { font-size: 1.5rem; font-weight: 700; color: hsl(var(--primary)); line-height: 1.4; }
.journal-stats .streak { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.journal-stats .streak svg { width: 1rem; height: 1rem; color: #f97316; }
.journal-stats .streak span { font-size: 1.5rem; font-weight: 700; color: #f97316; }
.journal-stats .face { font-size: 1.5rem; line-height: 1.4; }
.journal-stats .l { font-size: 11px; color: hsl(var(--muted-foreground)); }

/* Graphique d'humeur */
.mood-chart { padding: 1.25rem; margin-bottom: 1.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.mood-chart .head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.mood-chart .head svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
.mood-chart h3 { font-weight: 700; font-size: 0.9rem; }
/* La source fixe la hauteur à 5rem (h-20) alors qu'une colonne mesure
   56px de barre + le jour + l'émoji, soit une centaine de pixels : les
   colonnes remontaient sur le titre. La hauteur suit désormais le contenu
   et les colonnes s'alignent par le haut, ce qui remet les jours sur une
   même ligne (le jour sans émoji était décalé vers le bas). */
.mood-chart .bars { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 5rem; }
.mood-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.mood-chart .slot { width: 100%; height: 56px; display: flex; align-items: flex-end; justify-content: center; }
.mood-chart .bar { width: 100%; border-radius: 0.5rem 0.5rem 0 0; opacity: .8; min-height: 4px; }
.mood-chart .day { font-size: 10px; color: hsl(var(--muted-foreground)); }
.mood-chart .em { font-size: 0.9rem; }
.m-super { background: #facc15; } .m-bien { background: #4ade80; } .m-neutre { background: #9ca3af; }
.m-difficile { background: #fb923c; } .m-triste { background: #60a5fa; } .m-none { background: hsl(var(--border)); }

/* Regard de Lexi */
.insights {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(to bottom right, #f5f3ff, #eef2ff);
  border: 1px solid #ddd6fe;
  border-radius: 1rem;
}
.insights .head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.insights .id { display: flex; align-items: center; gap: 0.5rem; }
.insights .sq { width: 2rem; height: 2rem; border-radius: 0.75rem; background: #ede9fe; display: flex; align-items: center; justify-content: center; }
.insights .sq svg { width: 1rem; height: 1rem; color: #7c3aed; }
.insights h3 { font-weight: 700; font-size: 0.9rem; color: #4c1d95; }
.insights .sub { font-size: 11px; color: #7c3aed; }
.btn-violet { height: 2rem; border-radius: 0.75rem; background: #7c3aed; color: #fff; font-size: 0.8rem; }
.btn-violet:hover { background: #6d28d9; }

/* Question du jour */
.prompt-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(to bottom right, #f5f3ff, #eef2ff, #faf5ff);
  border: 1px solid #ddd6fe;
  border-radius: 1rem;
}
.prompt-card::before {
  content: '';
  position: absolute;
  top: -1.5rem; right: -1.5rem;
  width: 6rem; height: 6rem;
  border-radius: 999px;
  background: rgb(221 214 254 / .4);
  filter: blur(32px);
}
.prompt-card .row { position: relative; display: flex; align-items: flex-start; gap: 1rem; }
.prompt-card .lexi {
  flex-shrink: 0;
  width: 4rem; height: 4rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / .7);
  border: 1px solid #ddd6fe;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.prompt-card .lexi img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
.prompt-card .txt { flex: 1; min-width: 0; }
.prompt-card .label-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.prompt-card .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #7c3aed; }
.prompt-card .rule { height: 1px; flex: 1; background: #ddd6fe; }
.prompt-card .date { font-size: 11px; color: #a78bfa; font-weight: 500; }
.prompt-card .question { font-size: 15px; line-height: 1.7; color: #4c1d95; font-weight: 500; }
.prompt-card .hint { font-size: 0.8rem; color: #8b5cf6; font-style: italic; margin-top: 0.5rem; }

/* Onglets liste / calendrier */
.view-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.view-tabs button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.view-tabs button svg { width: 1rem; height: 1rem; }
.view-tabs button[aria-pressed='true'] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

/* Filtres */
.journal-filters { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
.search-field input {
  width: 100%;
  padding: 0.625rem 2.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  font-family: inherit;
  font-size: 0.9rem;
}
.search-field input:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary) / .3); }

.mood-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mood-filters button {
  padding: 0.375rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  cursor: pointer;
}
.mood-filters button:hover { border-color: hsl(var(--primary) / .4); }
.mood-filters button[aria-pressed='true'] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

.entries-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.entries-title svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
.entries-title h3 { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }

/* Entrée de journal */
.entry { overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.entry + .entry { margin-top: 0.75rem; }
.entry > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}
.entry > summary::-webkit-details-marker { display: none; }
.entry .face { font-size: 1.5rem; }
.entry .meta { flex: 1; min-width: 0; }
.entry .tag { font-size: 0.8rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 999px; border: 1px solid; }
.entry .when { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; }
.entry .peek { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry summary > svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); flex-shrink: 0; transition: transform .2s; }
.entry[open] summary > svg { transform: rotate(180deg); }
.entry[open] .peek { display: none; }
.entry .body { padding: 0.75rem 1rem 1rem; border-top: 1px solid hsl(var(--border)); }
.entry .body > p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.75rem; }
.entry .victories { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.entry .victories span { font-size: 0.8rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-radius: 999px; padding: 0.125rem 0.5rem; }

.mood-super     { background: #fef9c3; border-color: #facc15; color: #a16207; }
.mood-bien      { background: #dcfce7; border-color: #4ade80; color: #15803d; }
.mood-neutre    { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.mood-difficile { background: #ffedd5; border-color: #fb923c; color: #c2410c; }
.mood-triste    { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }

/* --------------------------------------------------------------------------
   22. Page Amis — bandeau, onglets flottants, cartes d'amis
   -------------------------------------------------------------------------- */

.amis-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.25rem 5rem;
  color: #fff;
  background: linear-gradient(to bottom right, hsl(var(--primary)), #059669, #15803d);
}
.amis-hero .decor-letters span { color: #fff; }
.amis-hero::before,
.amis-hero::after { content: ''; position: absolute; border-radius: 999px; background: rgb(255 255 255 / .1); }
.amis-hero::before { top: 0; right: 0; width: 12rem; height: 12rem; transform: translate(5rem, -5rem); }
.amis-hero::after  { bottom: 0; left: 0; width: 8rem; height: 8rem; transform: translate(-2.5rem, 3rem); }

.amis-hero .inner { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; }
.amis-hero h1 { font-weight: 800; font-size: clamp(1.875rem, 5vw, 2.25rem); }
.amis-hero > .inner > p { color: rgb(255 255 255 / .85); font-size: 0.9rem; margin-top: 0.375rem; max-width: 28rem; }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 1.25rem; }
.hero-stats > div {
  padding: 0.625rem 0.75rem;
  text-align: center;
  border-radius: 1rem;
  background: rgb(255 255 255 / .15);
  backdrop-filter: blur(4px);
}
.hero-stats svg { width: 1rem; height: 1rem; margin: 0 auto 0.25rem; }
.hero-stats .n { font-weight: 800; font-size: 1.25rem; line-height: 1; }
.hero-stats .l { font-size: 10px; color: rgb(255 255 255 / .75); margin-top: 0.25rem; line-height: 1.3; }

/* Onglets qui chevauchent le bandeau */
.seg-wrap { position: relative; z-index: 10; max-width: 48rem; margin: -3rem auto 0; padding: 0 1rem; }
.seg-tabs {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.seg-tabs button {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.seg-tabs button:hover { background: hsl(var(--secondary)); }
.seg-tabs button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.seg-tabs button[aria-selected='true'] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.seg-tabs .count { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0.125rem 0.375rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.seg-tabs button[aria-selected='true'] .count { background: rgb(255 255 255 / .25); color: #fff; }

.amis-body { max-width: 48rem; margin: 1.5rem auto 0; padding: 0 1rem 7rem; }
.amis-body .top { display: none; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.amis-body .top h2 { font-weight: 700; font-size: 1.25rem; }

.friends-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.friend-card {
  padding: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: box-shadow .2s, border-color .2s;
}
.friend-card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); border-color: hsl(var(--primary) / .3); }
.friend-card .who { display: flex; align-items: center; gap: 0.75rem; }
.friend-card .name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-card .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 0.25rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.friend-card .facts span { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; }
.friend-card .facts svg { width: 0.875rem; height: 0.875rem; }
.friend-card .actions { display: flex; gap: 0.5rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid hsl(var(--border)); }
.friend-card .actions .btn { height: 2.25rem; }
.btn-ghost-danger { background: transparent; color: hsl(var(--muted-foreground)); padding: 0 0.75rem; }
.btn-ghost-danger:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }

.avatar-em {
  flex-shrink: 0;
  border-radius: 999px;
  background: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px hsl(var(--primary) / .2);
}

/* État vide */
.empty-box {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: hsl(var(--secondary) / .4);
  border: 2px dashed hsl(var(--border));
  border-radius: 1.5rem;
}
.empty-box .ico {
  width: 4rem; height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / .1);
  display: flex; align-items: center; justify-content: center;
}
.empty-box .ico svg { width: 2rem; height: 2rem; color: hsl(var(--primary)); }
.empty-box h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.empty-box p { color: hsl(var(--muted-foreground)); font-size: 0.9rem; max-width: 20rem; margin: 0 auto 1.25rem; }

@media (min-width: 640px) {
  .friends-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .amis-body .top { display: flex; }
}

/* --------------------------------------------------------------------------
   23. Chat avec Lexi (page Mascotte et panneau flottant)
   -------------------------------------------------------------------------- */

.chat { display: flex; flex-direction: column; height: calc(100vh - 60px); background: #fff; overflow: hidden; }
.chat .stream { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; }
.chat .msg { display: flex; gap: 0.5rem; }
.chat .msg + .msg { margin-top: 0.75rem; }
.chat .msg.from-user { justify-content: flex-end; }
.chat .msg img { width: 2.5rem; height: 2.5rem; object-fit: contain; flex-shrink: 0; margin-top: 0.125rem; border-radius: 999px; background: #dcfce7; padding: 0.125rem; }
.chat .bubble { max-width: 78%; padding: 0.625rem 1rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.7; }
.chat .from-lexi .bubble { background: #fff; border: 1px solid #e5e7eb; color: #1f2937; border-bottom-left-radius: 0.25rem; }
.chat .from-user .bubble { background: hsl(var(--primary)); color: #fff; border-bottom-right-radius: 0.25rem; }
.chat .rate { display: flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0 0.25rem; }
.chat .rate span { font-size: 10px; color: hsl(var(--muted-foreground)); }
.chat .rate button { padding: 0.25rem; border: none; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; }
.chat .rate svg { width: 0.75rem; height: 0.75rem; }

/* Trois points d'attente */
.typing { display: flex; gap: 0.375rem; padding: 0.75rem 1rem; background: #f3f4f6; border-radius: 1rem; border-bottom-left-radius: 0.25rem; }
.typing i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: hsl(var(--muted-foreground) / .4); animation: bounce .8s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }

.chat .suggestions { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0 1rem 0.5rem; scrollbar-width: none; }
.chat .suggestions button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.8rem;
  cursor: pointer;
}
.chat .suggestions button:hover { border-color: #4ade80; }

.chat .composer { flex-shrink: 0; display: flex; gap: 0.5rem; padding: 0.5rem 1rem 1rem; border-top: 1px solid #e5e7eb; background: #fff; }
.chat .composer input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  color: #111827;
}
.chat .composer input:focus { outline: none; box-shadow: 0 0 0 2px #4ade80; }
.chat .composer .btn { border-radius: 0.75rem; padding: 0 0.75rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   24. Écrans d'état simples (communauté à venir, invitation)
   -------------------------------------------------------------------------- */

.state-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 4rem 1rem;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.state-page > * + * { margin-top: 1.5rem; }
.state-page .big { font-size: 3.75rem; line-height: 1.2; }
.state-page h1 { font-weight: 800; font-size: 1.875rem; color: #14532d; }
.state-page .lead { font-size: 1.125rem; line-height: 1.7; color: hsl(var(--muted-foreground)); max-width: 28rem; }
.state-page .note { font-size: 0.9rem; font-weight: 500; color: #16a34a; }

.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 1rem; }
.center-page .inner { max-width: 28rem; width: 100%; text-align: center; }
.center-page .mark { width: 4rem; height: 4rem; margin: 0 auto 1rem; }
.center-page h1 { font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.center-page > .inner > p { color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.btn-emerald { width: 100%; height: 3rem; background: #059669; color: #fff; }
.btn-emerald:hover { background: #047857; }

/* --------------------------------------------------------------------------
   25. Page Profil — identité, statistiques, accessibilité, compétences
   -------------------------------------------------------------------------- */

.profile-hero { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.profile-hero .avatar-wrap { position: relative; flex-shrink: 0; }
.profile-hero h1 { font-weight: 700; font-size: 1.25rem; line-height: 1.65; margin-bottom: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero .mail { color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
.profile-hero .tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.profile-hero .tags span {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.125rem 0.625rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.avatar-big {
  width: 7rem; height: 7rem;
  border-radius: 999px;
  border: 4px solid #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  overflow: hidden;
  background: linear-gradient(to bottom right, #dcfce7, #a7f3d0);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.75rem;
}
.avatar-edit {
  position: absolute;
  right: 0; bottom: 0;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.avatar-edit svg { width: 0.75rem; height: 0.75rem; color: hsl(var(--muted-foreground)); }
.avatar-edit:hover { background: hsl(var(--secondary)); }

/* Statistiques en lignes (thème adulte) */
.stat-rows { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.stat-rows .r { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; }
.stat-rows .r + .r { border-top: 1px solid hsl(var(--border)); }
.stat-rows svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.stat-rows .lab { flex: 1; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.stat-rows .val { font-size: 0.9rem; font-weight: 600; }

/* Bloc dépliant */
.fold { padding: 1.25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.fold > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold .title { display: flex; align-items: center; gap: 0.5rem; }
.fold .title svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); }
.fold .title span { font-family: var(--font-heading); font-weight: 600; }
.fold > summary > svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); transition: transform .2s; }
.fold[open] > summary > svg { transform: rotate(180deg); }
.fold .panel { margin-top: 1rem; }
.fold .panel > * + * { margin-top: 1.25rem; }

.a11y-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 0.5rem; }
.a11y-head svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
.a11y-head span { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }
.a11y-section .preview { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

.opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt-row button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.opt-row button:hover { border-color: hsl(var(--primary) / .4); }
.opt-row button[aria-pressed='true'] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.opt-row .ico { font-size: 1rem; }
.opt-row .hint { font-size: 10px; font-weight: 400; opacity: .7; }

/* Choix de police */
.font-list > * + * { margin-top: 0.5rem; }
.font-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  border: 2px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.font-opt:hover { border-color: hsl(var(--primary) / .4); }
.font-opt[aria-pressed='true'] { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
.font-opt .row { display: flex; align-items: center; gap: 0.5rem; }
.font-opt .lab { font-weight: 600; font-size: 0.9rem; }
.font-opt .dys { font-size: 0.8rem; font-weight: 500; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 0.125rem 0.375rem; }
.font-opt .desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.font-opt .sample { font-size: 0.9rem; margin-top: 0.25rem; }
.font-opt .tick { color: hsl(var(--primary)); font-weight: 700; font-size: 1.125rem; }

/* Scores par domaine */
.skill + .skill { margin-top: 0.75rem; }
.skill .row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.25rem; }
.skill .row .n { color: hsl(var(--muted-foreground)); font-weight: 500; }
.skill .track { height: 0.625rem; background: hsl(var(--secondary)); border-radius: 999px; overflow: hidden; }
.skill .track .fill { height: 100%; border-radius: 999px; }
.f-lecture { background: #22c55e; } .f-sons { background: #14b8a6; } .f-memoire { background: #3b82f6; }
.f-attention { background: #a855f7; } .f-comprehension { background: #f59e0b; } .f-orthographe { background: #f43f5e; }

/* Points à travailler */
.err-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.75rem;
}
.err-row + .err-row { margin-top: 0.5rem; }
.err-row .who { display: flex; align-items: center; gap: 0.5rem; }
.err-row .em { font-size: 1.125rem; }
.err-row .name { font-size: 0.9rem; font-weight: 500; color: #7c2d12; }
.err-row .kind { font-size: 0.8rem; color: #ea580c; }
.err-row > svg { width: 1rem; height: 1rem; color: #fb923c; }

/* --------------------------------------------------------------------------
   26. Page Assistant (Mon Coach)
   -------------------------------------------------------------------------- */

.coach { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 60px); }

.coach-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid hsl(var(--border));
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
}
.coach-head .avatar { position: relative; flex-shrink: 0; }
/* La source affiche la mascotte en taille lg (20rem) dans l'en-tête : sur
   mobile elle occupe tout l'écran et pousse le titre dehors. */
.coach-head .mascotte.lg { width: 4rem; }
@media (min-width: 640px) { .coach-head .mascotte.lg { width: 6rem; } }
@media (min-width: 1024px) { .coach-head .mascotte.lg { width: 20rem; } }
.coach-head .avatar .dot {
  position: absolute;
  right: 0.25rem; bottom: 0.25rem;
  width: 1rem; height: 1rem;
  border-radius: 999px;
  background: #4ade80;
  border: 2px solid #fff;
}
.coach-head .txt { flex: 1; }
.coach-head .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.coach-head h1 { font-weight: 700; font-size: 1.25rem; line-height: 1.65; color: #14532d; }
.coach-head .badge { font-size: 0.8rem; font-weight: 600; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 0.125rem 0.5rem; }
.coach-head .sub { color: #16a34a; font-size: 0.9rem; }
.coach-head .speaker {
  width: 2.5rem; height: 2.5rem;
  border: none;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.coach-head .speaker:hover { background: #bbf7d0; }
.coach-head .speaker svg { width: 1.25rem; height: 1.25rem; }

.coach-stream { flex: 1; overflow-y: auto; padding: 1rem 1rem 0.5rem; }
.coach-stream > * + * { margin-top: 1.25rem; }
.coach-msg { display: flex; gap: 0.75rem; }
.coach-msg.from-user { justify-content: flex-end; }
.coach-msg .bubble { max-width: 80%; padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.7; }
.coach-msg.from-lexi .bubble { background: #fff; border: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); border-bottom-left-radius: 0.25rem; }
.coach-msg.from-user .bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-bottom-right-radius: 0.25rem; }
.coach-msg .bubble p + p { margin-top: 0.5rem; }
.coach-msg .bubble strong { color: #166534; }

.coach-typing { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1rem; border-bottom-left-radius: 0.25rem; }
.coach-typing i { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: #4ade80; animation: bounce .8s ease-in-out infinite; }
.coach-typing i:nth-child(2) { animation-delay: .15s; }
.coach-typing i:nth-child(3) { animation-delay: .3s; }

.coach-suggest { flex-shrink: 0; padding: 0 1rem 0.5rem; }
.coach-suggest > p { font-size: 0.8rem; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.coach-suggest .list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.coach-suggest button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.coach-suggest button:hover { border-color: #4ade80; background: #f0fdf4; }

.coach-composer { flex-shrink: 0; display: flex; gap: 0.5rem; padding: 1rem 1rem 6rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.coach-composer input { flex: 1; height: 3rem; padding: 0 1rem; border: 1px solid #bbf7d0; border-radius: 0.75rem; font-family: inherit; font-size: 1rem; }
.coach-composer input:focus { outline: none; border-color: #4ade80; }
.coach-composer .btn { width: 3rem; height: 3rem; padding: 0; border-radius: 0.75rem; flex-shrink: 0; background: #16a34a; color: #fff; }
.coach-composer .btn:hover { background: #15803d; }
.coach-composer .btn svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 768px) { .coach-composer { padding-bottom: 1rem; } }

/* --------------------------------------------------------------------------
   27. Séance guidée — phases, question à choix multiple
   -------------------------------------------------------------------------- */

.seance { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1rem 7rem; }
.seance > * + * { margin-top: 1rem; }

.phase-head { display: flex; align-items: center; gap: 0.75rem; }
.phase-head .chip {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
.phase-head .txt { flex: 1; }
.phase-head h1 { font-weight: 700; font-size: 1.125rem; }
.phase-head .sub { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.phase-head .score { font-weight: 800; font-size: 1.25rem; color: #16a34a; }

.ph-orange { background: #f97316; } .ph-purple { background: #a855f7; }
.ph-blue   { background: #3b82f6; } .ph-green  { background: #22c55e; }

.phase-bar { display: flex; gap: 0.375rem; }
.phase-bar > div { flex: 1; height: 0.625rem; border-radius: 999px; background: hsl(var(--secondary)); }
.phase-bar > div.done { opacity: 1; }
.phase-bar > div.current { opacity: .6; }

.qcm-card { padding: 1.25rem; background: #fff; border: 2px solid #f3e8ff; border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.qcm-card .top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.qcm-card h2 { flex: 1; font-weight: 700; font-size: 1.125rem; color: #581c87; }
.qcm-card .listen {
  width: 2.25rem; height: 2.25rem;
  border: none; border-radius: 999px;
  background: #f3e8ff; color: #9333ea;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qcm-card .listen:hover { background: #e9d5ff; }
.qcm-card .listen svg { width: 1rem; height: 1rem; }
.qcm-card .consigne { color: #9333ea; font-size: 0.9rem; margin-bottom: 0.75rem; }
.qcm-card .question { padding: 1rem; margin-bottom: 1rem; background: #faf5ff; border-radius: 1rem; font-size: 1rem; font-weight: 500; color: #581c87; }

.qcm-opts { display: grid; gap: 0.625rem; }
.qcm-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  text-align: left;
  border: 2px solid #e9d5ff;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s;
}
.qcm-opt:hover { border-color: #c084fc; }
.qcm-opt .key {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  background: #f3e8ff; color: #7e22ce;
}
.qcm-opt .label { font-weight: 500; }
.qcm-opt.correct { border-color: #22c55e; background: #f0fdf4; }
.qcm-opt.correct .key { background: #22c55e; color: #fff; }
.qcm-opt.wrong { border-color: #fca5a5; background: #fef2f2; opacity: .7; }
.qcm-opt.wrong .key { background: #f87171; color: #fff; }
.qcm-opt.dim { opacity: .3; border-color: #e5e7eb; background: #f9fafb; }

.feedback .explain { font-size: 0.9rem; margin-bottom: 0.5rem; }
.feedback .encourage { font-size: 0.8rem; font-style: italic; color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------------------
   28. Onboarding — 4 étapes de calibrage
   -------------------------------------------------------------------------- */

.onb { position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(to bottom right, #f0fdf4, #fff, #ecfdf5); }

.onb-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / .8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #dcfce7;
}
.onb-bar .inner { max-width: 32rem; margin: 0 auto; }
.onb-bar .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.onb-bar img { height: 2rem; object-fit: contain; }
.onb-bar .count { font-size: 0.9rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.onb-bar .steps { display: flex; gap: 0.375rem; }
.onb-bar .steps > div { flex: 1; height: 0.5rem; border-radius: 999px; background: #d1fae5; }
.onb-bar .steps > div.on { background: #16a34a; }

.onb-body { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem 3rem; }
.onb-body .inner { width: 100%; max-width: 32rem; }
.onb-title { text-align: center; margin-bottom: 2rem; }
.onb-title h1 { font-weight: 800; font-size: 1.875rem; color: #14532d; margin-bottom: 0.5rem; }
.onb-title p { color: hsl(var(--muted-foreground)); }

.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.pick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 2px solid #f3f4f6;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pick-tile:hover { border-color: #bbf7d0; }
.pick-tile[aria-pressed='true'] { border-color: #22c55e; background: #f0fdf4; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: scale(1.03); }
.pick-tile .em { font-size: 3rem; line-height: 1.2; }
.pick-tile .lab { font-family: var(--font-heading); font-weight: 700; color: #14532d; }
.pick-tile .desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.pick-tile .chosen { color: #22c55e; font-weight: 700; font-size: 0.8rem; }

@media (min-width: 640px) { .pick-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Navigation bas d'étape */
.onb-nav { display: flex; gap: 0.75rem; margin-top: 2rem; }
.onb-nav .back { width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 1px solid #bbf7d0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.onb-nav .back svg { width: 1.25rem; height: 1.25rem; }
.btn-onb {
  flex: 1;
  height: 3.5rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(187 247 208 / .8);
}
.btn-onb:hover { background: #15803d; }

/* --------------------------------------------------------------------------
   29. Espace organisation
   -------------------------------------------------------------------------- */

.org-head { padding: 1.5rem 1.25rem; color: #fff; background: linear-gradient(to bottom right, #3b82f6, #1d4ed8); }
.org-head .inner { max-width: 56rem; margin: 0 auto; }
.org-head .id { display: flex; align-items: center; gap: 0.75rem; }
.org-head .sq { width: 3rem; height: 3rem; border-radius: 1rem; background: rgb(255 255 255 / .2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.org-head h1 { font-weight: 800; font-size: 1.5rem; }
.org-head .sub { color: rgb(255 255 255 / .8); font-size: 0.9rem; }

.org-wrap { max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 5rem; }

.welcome-box { padding: 1.25rem; margin-bottom: 1.25rem; background: #ecfdf5; border: 2px solid #a7f3d0; border-radius: 1rem; }
.welcome-box .row { display: flex; align-items: flex-start; gap: 0.75rem; }
/* Sans min-width, la colonne de texte ne descend pas sous la largeur de ses
   deux boutons et déborde de la carte sur mobile. */
.welcome-box .row > div { min-width: 0; }
.welcome-box > .row > svg { width: 1.5rem; height: 1.5rem; color: #059669; flex-shrink: 0; margin-top: 0.125rem; }
.welcome-box h3 { font-weight: 700; color: #064e3b; }
.welcome-box p { font-size: 0.9rem; color: #065f46; margin-top: 0.25rem; }
.welcome-box ol { margin-top: 0.75rem; font-size: 0.9rem; color: #065f46; }
.welcome-box ol li + li { margin-top: 0.375rem; }
.welcome-box .acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.btn-em-sm { height: 2rem; padding: 0 0.75rem; border-radius: calc(var(--radius) - 2px); background: #059669; color: #fff; font-size: 0.9rem; }
.btn-em-sm:hover { background: #047857; }

.pill-tabs { display: flex; gap: 0.5rem; margin: 1.25rem 0; overflow-x: auto; padding-bottom: 0.25rem; }
.pill-tabs button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.pill-tabs button svg { width: 1rem; height: 1rem; }
.pill-tabs button[aria-selected='true'] { background: #059669; color: #fff; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1); }

.org-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.org-stats .s { padding: 1rem; text-align: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; }
.org-stats .s .em { font-size: 1.5rem; }
.org-stats .s .v { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; margin-top: 0.25rem; }
.org-stats .s .l { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.org-stats .full { grid-column: 1 / -1; }
.btn-org-change { width: 100%; height: 3rem; border-radius: 0.75rem; border: 2px solid #a7f3d0; color: #047857; background: transparent; }
.btn-org-change:hover { background: #ecfdf5; }

@media (min-width: 768px) { .org-stats { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   30. Espace d'administration
   -------------------------------------------------------------------------- */

.admin { position: relative; overflow: hidden; min-height: 100vh; background: #f9fafb; }
.admin .decor-letters { opacity: .05; }

.admin-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #14532d;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
}
.admin-bar .id { display: flex; align-items: center; gap: 0.75rem; }
.admin-bar .sq { width: 2rem; height: 2rem; border-radius: 0.75rem; background: #22c55e; display: flex; align-items: center; justify-content: center; }
.admin-bar .sq svg { width: 1rem; height: 1rem; }
.admin-bar .name { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; }
.admin-bar .out { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #bbf7d0; background: transparent; border: none; cursor: pointer; }
.admin-bar .out:hover { color: #fff; }
.admin-bar .out svg { width: 1rem; height: 1rem; }

.admin-wrap { position: relative; z-index: 10; max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.admin-wrap > * + * { margin-top: 2rem; }

.admin-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.admin-tabs button {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #fff;
  color: #14532d;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-tabs button[aria-selected='true'] { background: #15803d; color: #fff; border-color: transparent; }

.admin-card { padding: 1.5rem; background: #fff; border: 1px solid #dcfce7; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.admin-card h2 { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.125rem; color: #14532d; margin-bottom: 1rem; }
.admin-card h2 svg { width: 1.25rem; height: 1.25rem; }
.admin-card h2 + .sub { margin-top: -0.75rem; margin-bottom: 1rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }

.tester-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid #dcfce7; border-radius: 0.75rem; }
.tester-row + .tester-row { margin-top: 0.5rem; }
.tester-row:hover { border-color: #bbf7d0; }
.tester-row .av { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #dcfce7; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.tester-row .who { flex: 1; min-width: 0; }
.tester-row .who .n { font-weight: 600; font-size: 0.9rem; color: #14532d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tester-row .who .m { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.tag-tester {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 700;
  border: 1px solid #86efac;
  background: #dcfce7; color: #15803d;
  cursor: pointer;
}
.tag-limited { border-color: #e5e7eb; background: #f3f4f6; color: #6b7280; }
.tag-tester svg { width: 0.75rem; height: 0.75rem; }
.tag-sub { font-size: 0.8rem; background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 999px; padding: 0.25rem 0.5rem; }

.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.admin-stats .s { padding: 1.25rem; text-align: center; background: #fff; border: 1px solid #dcfce7; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.admin-stats .s .em { font-size: 1.875rem; }
.admin-stats .s .v { font-family: var(--font-heading); font-weight: 800; font-size: 1.875rem; color: #14532d; margin-top: 0.25rem; }
.admin-stats .s .l { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; }

.bar-row { display: flex; align-items: center; gap: 0.75rem; }
.bar-row + .bar-row { margin-top: 0.75rem; }
.bar-row .lab { font-size: 0.9rem; font-weight: 500; color: #166534; }
.bar-row .lab.w16 { width: 4rem; } .bar-row .lab.w28 { width: 7rem; text-transform: capitalize; } .bar-row .lab.w36 { width: 9rem; }
.bar-row .track { flex: 1; height: 0.75rem; background: #f0fdf4; border-radius: 999px; overflow: hidden; }
.bar-row .track.thin { height: 0.625rem; }
.bar-row .track .fill { height: 100%; border-radius: 999px; background: #4ade80; }
.bar-row .track .fill.em { background: #10b981; }
.bar-row .track .fill.em2 { background: #34d399; }
.bar-row .n { font-size: 0.9rem; font-weight: 700; color: #15803d; text-align: right; min-width: 2rem; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.quick-grid a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border: 1px solid #dcfce7; border-radius: 0.75rem; }
.quick-grid a:hover { border-color: #4ade80; background: #f0fdf4; }
.quick-grid .em { font-size: 1.25rem; }
.quick-grid .lab { font-size: 0.9rem; font-weight: 500; color: #14532d; }
.quick-grid svg { width: 0.75rem; height: 0.75rem; color: #86efac; margin-left: auto; }

.qa-row { padding: 0.75rem; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 0.75rem; }
.qa-row + .qa-row { margin-top: 0.5rem; }
.qa-row .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.qa-row .q { flex: 1; font-size: 0.9rem; font-weight: 500; color: #14532d; }
.qa-row .meta { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.qa-row .meta svg { width: 0.75rem; height: 0.75rem; }
.qa-row .meta span { font-size: 10px; color: hsl(var(--muted-foreground)); }
.qa-row .a { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-row .d { font-size: 10px; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

.chat-summary { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem; }
.chat-summary .t { font-size: 0.9rem; font-weight: 600; color: #14532d; }
.chat-summary .up { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; color: #16a34a; }
.chat-summary .down { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; color: #ef4444; }
.chat-summary svg { width: 0.875rem; height: 0.875rem; }

@media (min-width: 768px) {
  .admin-stats, .quick-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   31. Test de niveau (page non routée dans l'app actuelle)
   -------------------------------------------------------------------------- */

.leveltest { min-height: 100vh; max-width: 32rem; margin: 0 auto; padding: 1.5rem 1rem; background: #fff; display: flex; flex-direction: column; }
.leveltest .head { margin-bottom: 1.5rem; }
.leveltest .head .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.leveltest .head .n { color: #15803d; font-weight: 500; font-size: 0.9rem; }
.leveltest .head .cat { font-size: 0.9rem; font-weight: 600; color: #16a34a; background: #f0fdf4; border-radius: 999px; padding: 0.25rem 0.75rem; }
.leveltest .head .track { height: 0.75rem; background: #dcfce7; border-radius: 999px; overflow: hidden; }
.leveltest .head .track .fill { height: 100%; border-radius: 999px; background: #22c55e; }

.lt-card { padding: 1.5rem; margin-bottom: 1rem; background: #fff; border: 2px solid #dcfce7; border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.lt-card .instr { color: #16a34a; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; }
.lt-card .subject { padding: 1rem; margin-bottom: 1.25rem; background: #f0fdf4; border-radius: 1rem; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: #14532d; }
.lt-opts { display: grid; gap: 0.75rem; }
.lt-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  text-align: left;
  border: 2px solid #bbf7d0;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lt-opt:hover { border-color: #4ade80; background: #f0fdf4; }
.lt-opt .key {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  background: #dcfce7; color: #15803d;
}
.lt-opt .key svg { width: 1rem; height: 1rem; }
.lt-opt .label { font-weight: 500; color: #14532d; }
.lt-opt.correct { border-color: #22c55e; background: #f0fdf4; }
.lt-opt.correct .key { background: #22c55e; color: #fff; }
.lt-opt.wrong { border-color: #fca5a5; background: #fef2f2; }
.lt-opt.wrong .key { background: #f87171; color: #fff; }
.lt-opt.dim { border-color: #dcfce7; opacity: .4; }

/* --------------------------------------------------------------------------
   32. Page Amis — onglets « Demandes » et « Défis »
   Reprend RequestsTab.jsx et ChallengesTab.jsx. Les panneaux sont tous
   présents dans la page ; la bascule masque les autres avec [hidden].
   -------------------------------------------------------------------------- */

.req-section + .req-section { margin-top: 2rem; }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.sec-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
}
.sec-head h2 > svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); flex-shrink: 0; }
.sec-head .count {
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}

.req-list > * + * { margin-top: 0.625rem; }

.req-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: box-shadow .2s;
}
.req-card:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
/* Sur mobile, les actions passent sous le nom plutôt que de l'écraser. */
.req-card .txt { flex: 1 1 8rem; min-width: 0; }
.req-card .name { font-family: var(--font-heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-card .sub { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.req-card .sub.waiting { display: flex; align-items: center; gap: 0.25rem; color: #d97706; }
.req-card .sub.waiting svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.req-card .acts { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; margin-left: auto; }
.req-card .acts .btn { height: 2.25rem; }
.req-card .btn-ghost-danger { padding-left: 0.625rem; padding-right: 0.625rem; }

/* ── Cartes de défi ── */
.defis-list > * + * { margin-top: 0.875rem; }

.defi-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow .2s;
}
.defi-card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }

.defi-card .vs { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 0.75rem; }
.defi-card .side { flex: 1; display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.defi-card .side.right { justify-content: flex-end; text-align: right; }
.defi-card .who { min-width: 0; }
.defi-card .role { font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.defi-card .nm { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.defi-card .mid { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.defi-card .mid > svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--muted-foreground)); }
.defi-card .diff { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0.125rem 0.5rem; margin-bottom: 0.25rem; }
.diff-facile    { background: #dcfce7; color: #15803d; }
.diff-moyen     { background: #fef3c7; color: #b45309; }
.diff-difficile { background: #fee2e2; color: #b91c1c; }

.defi-card .dom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 1rem 0.75rem; }
.defi-card .dom { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9rem; font-weight: 500; }
.defi-card .result { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.25rem 0.625rem; }
.defi-card .result svg { width: 0.75rem; height: 0.75rem; }
.defi-card .result.win  { background: #dcfce7; color: #15803d; }
.defi-card .result.lose { background: #fee2e2; color: #b91c1c; }
.defi-card .result.tie  { background: #f1f5f9; color: #475569; }

/* Grille de scores : le filet est obtenu par l'écart de la grille */
.defi-card .scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: hsl(var(--border)); }
.defi-card .s { padding: 0.75rem; text-align: center; background: hsl(var(--secondary) / .4); }
.defi-card .s.mine { background: hsl(var(--primary) / .05); }
.defi-card .s .l { font-size: 11px; line-height: 1.4; color: hsl(var(--muted-foreground)); margin-bottom: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.defi-card .s .v { font-weight: 800; font-size: 1.5rem; line-height: 1; }

.defi-card .acts { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; }
.defi-card .acts .btn { height: 2.5rem; }
.defi-card .waiting-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #d97706;
}
.defi-card .waiting-line svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* L'en-tête « Mes défis » suit la même règle que celui des amis */
[data-panel-id='defis'] > .top { display: none; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
[data-panel-id='defis'] > .top h2 { font-weight: 700; font-size: 1.25rem; }

@media (min-width: 768px) {
  [data-panel-id='defis'] > .top { display: flex; }
}

/* --------------------------------------------------------------------------
   33. Espace organisation — panneaux Membres, Classes et Abonnement
   Reprend MembersPanel.jsx, ClassesPanel.jsx et SubscriptionPanel.jsx.
   La palette émeraude de l'espace organisation est conservée.
   -------------------------------------------------------------------------- */

.btn-em { background: #059669; color: #fff; }
.btn-em:hover { background: #047857; }

/* Petit bouton d'action à icône seule, partagé par les trois panneaux */
.ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  flex-shrink: 0;
}
.ico-btn:hover { background: hsl(var(--secondary)); }
.ico-btn svg { width: 1rem; height: 1rem; }
.ico-btn.danger { color: #ef4444; }
.ico-btn.danger:hover { background: #fef2f2; }

/* Pastilles d'état des membres (STATUS_STYLE / STATUS_LABEL de la source) */
.st { font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.st-active    { background: #dcfce7; color: #15803d; }
.st-invited   { background: #fef3c7; color: #b45309; }
.st-inactive  { background: #f3f4f6; color: #6b7280; }
.st-suspended { background: #fee2e2; color: #b91c1c; }

/* ── Jauge de licences ── */
.lic-box {
  padding: 1rem;
  margin-bottom: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.lic-box .head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.lic-box .t { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.lic-box .t svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.lic-box .n { font-size: 0.9rem; font-weight: 700; color: #15803d; }
.lic-box .bar { height: 0.625rem; border-radius: 999px; background: hsl(var(--secondary)); overflow: hidden; }
.lic-box .fill { height: 100%; border-radius: 999px; background: #10b981; }

/* ── Liste de membres ── */
.mem-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.mem-head h3 { font-weight: 700; font-size: 1.125rem; }

.mem-list > * + * { margin-top: 0.5rem; }
.mem-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
}
.mem-row .ava {
  width: 2.25rem; height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: hsl(var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
.mem-row .txt { flex: 1 1 8rem; min-width: 0; }
.mem-row .nm { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row .meta { font-size: 0.8rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row .acts { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

/* ── Classes et groupes ── */
.class-add { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.class-add input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.5rem;
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 0.9rem;
  color: inherit;
}
.class-add input:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: transparent; }

.class-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.class-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
}
.class-row .nm { flex: 1; min-width: 0; font-weight: 500; font-size: 0.9rem; }

/* ── Abonnement ── */
.sub-card {
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.sub-card + .sub-card { margin-top: 1rem; }
.sub-card .top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.sub-card .lbl { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.sub-card .plan { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; }
.sub-card .facts { display: grid; grid-template-columns: 1fr; gap: 0.75rem; font-size: 0.9rem; }
.sub-card .facts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sub-card .facts svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.sub-card .facts .k { color: hsl(var(--muted-foreground)); }
.sub-card .facts .v { font-weight: 500; }
.sub-card .acts { margin-top: 1rem; display: flex; gap: 0.5rem; }
.sub-card h3 { font-weight: 700; margin-bottom: 0.5rem; }
.sub-card .muted { font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.sub-card .muted + .muted { margin-top: 0.25rem; }
.sub-card .muted b { font-weight: 500; color: hsl(var(--foreground)); }

@media (min-width: 640px) {
  .class-grid { grid-template-columns: repeat(2, 1fr); }
  .sub-card .facts { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   34. Espace d'administration — onglets Organisations, Forfaits et Devis
   Reprend OrgsAdmin.jsx, PlansAdmin.jsx et DevisAdmin.jsx. Les cartes gardent
   le liseré vert clair de la section 30.
   -------------------------------------------------------------------------- */

/* Les cartes d'un même panneau conservent l'écart de .admin-wrap */
.admin-wrap [data-panel-id] > * + * { margin-top: 2rem; }

.btn-green { background: #16a34a; color: #fff; }
.btn-green:hover { background: #15803d; }

.adm-list > * + * { margin-top: 0.5rem; }
.adm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #dcfce7;
  border-radius: 0.75rem;
}
.adm-row .em { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.adm-row .txt { flex: 1 1 10rem; min-width: 0; }
.adm-row .nm { font-weight: 600; font-size: 0.9rem; color: #14532d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row .meta { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.adm-row .on-quote { font-size: 0.8rem; font-weight: 400; color: #d97706; }
.adm-row .st { margin-left: auto; }
.ico-btn.green { color: #15803d; }
.ico-btn.green:hover { background: #f0fdf4; }

/* Boutons de changement d'état des organisations (STATUS_BTN de la source) */
.chip-amber { background: #fef3c7; color: #b45309; border-color: transparent; }
.chip-amber:hover { background: #fde68a; }
.chip-green { background: #dcfce7; color: #15803d; border-color: transparent; }
.chip-green:hover { background: #bbf7d0; }
.st-canceled { background: #fee2e2; color: #b91c1c; }

/* ── Forfaits ── */
.plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.plan-types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-types button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.plan-types button[aria-selected='true'] { background: #15803d; color: #fff; }

/* ── Demandes de devis (accordéon natif <details>) ── */
.devis-list > * + * { margin-top: 0.5rem; }
.devis { background: #fff; border: 1px solid #dcfce7; border-radius: 0.75rem; overflow: hidden; }
.devis > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  list-style: none;
}
.devis > summary::-webkit-details-marker { display: none; }
.devis > summary:hover { background: #f0fdf4; }
.devis .txt { flex: 1; min-width: 0; }
.devis .nm { font-weight: 600; font-size: 0.9rem; color: #14532d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devis .meta { font-size: 0.8rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.devis .body { padding: 0.75rem; border-top: 1px solid #dcfce7; background: #f0fdf4; font-size: 0.9rem; }
.devis .body > * + * { margin-top: 0.5rem; }
.devis .line { display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); }
.devis .line svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.devis .body strong { font-weight: 600; }

.devis .statuses { display: flex; flex-wrap: wrap; gap: 0.375rem; padding-top: 0.25rem; }
.devis .statuses .st { border: none; cursor: pointer; font-weight: 500; }
.devis .statuses .st[aria-pressed='true'] { box-shadow: 0 0 0 1px #fff, 0 0 0 2px currentColor; }
.st-plain { background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); }
.st-plain:hover { background: hsl(var(--secondary) / .7); }
.st-nouveau  { background: #dbeafe; color: #1d4ed8; }
.st-en-cours { background: #fef3c7; color: #b45309; }
.st-envoye   { background: #f3e8ff; color: #7e22ce; }
.st-converti { background: #dcfce7; color: #15803d; }
.st-refuse   { background: #fee2e2; color: #b91c1c; }

.devis .notes label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.25rem; }
.devis .notes textarea {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.5rem;
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 0.8rem;
  color: inherit;
  resize: vertical;
}
.devis .notes .btn { margin-top: 0.375rem; }

.devis .mail-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 500; color: #15803d; }
.devis .mail-link svg { width: 0.875rem; height: 0.875rem; }

/* --------------------------------------------------------------------------
   35. Page Exercices — sélecteur de catégories
   Reprend CategoryBrowser.jsx et les données de lib/exerciseCategories.js.
   Les tuiles de terrain ouvrent cette vue, comme launchDomain() dans la source.
   -------------------------------------------------------------------------- */

/* Les tuiles sont désormais des <button> : on rétablit la police héritée. */
.domain-tile { font-family: inherit; font-size: inherit; letter-spacing: inherit; }

.link-back-cats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.link-back-cats:hover { color: hsl(var(--foreground)); }
.link-back-cats svg { width: 1rem; height: 1rem; }

.cat-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cat-head .em { font-size: 1.875rem; line-height: 1.3; flex-shrink: 0; }
.cat-head h2 { font-weight: 800; font-size: 1.5rem; line-height: 1.5; }
.cat-head p { font-size: 0.9rem; color: hsl(var(--muted-foreground)); }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.cat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: 2px solid hsl(var(--border));
  border-radius: 1.5rem;
  background: hsl(var(--card));
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.cat-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: translateY(-2px); }
.cat-card:active { transform: scale(.98); }
.cat-card .ico {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.cat-card .txt { flex: 1; min-width: 0; }
.cat-card .nm { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.cat-card .ds { font-size: 0.8rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; }
.cat-card > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); opacity: .4; transition: opacity .2s; }
.cat-card:hover > svg { opacity: 1; color: hsl(var(--foreground)); }

/* Dégradés des pastilles, repris des classes Tailwind de la source */
.g-violet  { background: linear-gradient(to bottom right, #a78bfa, #a855f7); }
.g-rose    { background: linear-gradient(to bottom right, #fb7185, #ec4899); }
.g-amber   { background: linear-gradient(to bottom right, #fbbf24, #f97316); }
.g-sky     { background: linear-gradient(to bottom right, #38bdf8, #3b82f6); }
.g-emerald { background: linear-gradient(to bottom right, #34d399, #22c55e); }
.g-indigo  { background: linear-gradient(to bottom right, #818cf8, #8b5cf6); }
.g-teal    { background: linear-gradient(to bottom right, #2dd4bf, #06b6d4); }
.g-fuchsia { background: linear-gradient(to bottom right, #e879f9, #a855f7); }

@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   36. Onboarding — étapes 2 à 4 et fin du test
   L'étape affichée est portée par data-step sur .onb, comme le state `step`
   de pages/Onboarding.jsx ; data-steps liste les étapes où un bloc apparaît.
   -------------------------------------------------------------------------- */

.onb [data-steps] { display: none; }
.onb[data-step='1']  [data-steps~='1'],
.onb[data-step='2']  [data-steps~='2'],
.onb[data-step='3']  [data-steps~='3'],
.onb[data-step='4']  [data-steps~='4'],
.onb[data-step='4b'] [data-steps~='4b'] { display: revert; }

/* Jalons de progression remplis jusqu'à l'étape courante */
.onb[data-step='1']  .steps > div:nth-child(1),
.onb[data-step='2']  .steps > div:nth-child(-n+2),
.onb[data-step='3']  .steps > div:nth-child(-n+3),
.onb[data-step='4']  .steps > div,
.onb[data-step='4b'] .steps > div { background: #16a34a; }

/* Le retour n'existe pas à la première étape */
.onb[data-step='1'] .onb-nav .back { display: none; }

/* ── Étape 2 : difficultés ── */

/* La source garde deux colonnes partout ; sous 640px les libellés se
   découpent en mots isolés, on repasse donc sur une colonne. */
.onb [data-steps='2'] .pick-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .onb [data-steps='2'] .pick-grid { grid-template-columns: repeat(2, 1fr); }
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem;
  border: 2px solid #f3f4f6;
  border-radius: 1rem;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pick-row:hover { border-color: #bbf7d0; }
.pick-row[aria-pressed='true'] { border-color: #22c55e; background: #f0fdf4; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
.pick-row .em { font-size: 1.875rem; line-height: 1.3; flex-shrink: 0; }
.pick-row .txt { min-width: 0; }
.pick-row .lab { display: block; font-weight: 600; font-size: 0.9rem; color: #14532d; }
.pick-row .desc { display: block; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.pick-row .tick { margin-left: auto; color: #22c55e; flex-shrink: 0; }

.other-box { margin-top: 0.75rem; padding: 1rem; background: #fff; border: 2px solid #f3f4f6; border-radius: 1rem; }
.other-box > p { font-weight: 600; font-size: 0.9rem; color: #14532d; margin-bottom: 0.5rem; }
.other-box textarea {
  width: 100%;
  min-height: 72px;
  padding: 0.75rem;
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: inherit;
  resize: none;
}
.other-box textarea:focus { outline: none; border-color: #4ade80; }

/* ── Étape 3 : animal compagnon ── */
.animal-preview { text-align: center; padding: 0.5rem 0; }
.animal-preview span { display: inline-block; font-size: 6rem; line-height: 1.1; animation: bob 2s ease-in-out infinite; }

.animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1rem; }
.animal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 2px solid #f3f4f6;
  border-radius: 1rem;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.animal:hover { border-color: #bbf7d0; }
.animal[aria-pressed='true'] { border-color: #22c55e; background: #f0fdf4; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: scale(1.05); }
.animal .em { font-size: 1.875rem; line-height: 1.3; }
.animal .lab { font-size: 0.8rem; font-weight: 500; color: #14532d; }

.animal-note { text-align: center; font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 1rem; }

/* ── Étape 4 : test de positionnement ── */
.lvl-progress { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.lvl-progress > div { flex: 1; height: 0.375rem; border-radius: 999px; background: #e5e7eb; }
.lvl-progress > div.done { background: #22c55e; }
.lvl-progress > div.current { background: #86efac; }

.lvl-card {
  padding: 1.5rem;
  background: #fff;
  border: 2px solid #dcfce7;
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.lvl-card .head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }
.lvl-card .head .em { font-size: 1.25rem; }
.lvl-card .head .idx { margin-left: auto; }
.lvl-card .q { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: #14532d; margin-bottom: 1.25rem; }
.lvl-card .opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.lvl-card .opts button {
  padding: 1rem;
  text-align: left;
  border: 2px solid #f3f4f6;
  border-radius: 1rem;
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lvl-card .opts button:hover { border-color: #bbf7d0; }
.lvl-card .opts button[aria-pressed='true'] { border-color: #22c55e; background: #f0fdf4; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }

/* ── Fin du test ── */
.lvl-done {
  padding: 2rem;
  text-align: center;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 1.5rem;
}
.lvl-done > * + * { margin-top: 0.75rem; }
.lvl-done .party { display: block; font-size: 3.75rem; line-height: 1.2; }
.lvl-done h3 { font-weight: 800; font-size: 1.5rem; color: #14532d; }
.lvl-done > p { color: #15803d; }
.lvl-done .recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; }
.lvl-done .recap > div { border-radius: 0.75rem; padding: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 500; }
.lvl-done .recap .em { font-size: 1.125rem; }
.lvl-done .recap .ok { background: #dcfce7; color: #166534; }
.lvl-done .recap .ko { background: #fff7ed; color: #c2410c; }

/* --------------------------------------------------------------------------
   37. Journal — formulaire de nouvelle entrée et vue calendrier
   Reprend le formulaire de pages/Journal.jsx (libellés de la variante adulte)
   et components/journal/JournalCalendar.jsx.
   -------------------------------------------------------------------------- */

.entry-form {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.entry-form .head { margin-bottom: 1rem; }
.entry-form .head .t { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.entry-form .head .t svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); flex-shrink: 0; }
.entry-form .head h3 { font-weight: 700; font-size: 1rem; }
.entry-form .head .sub { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-left: 1.5rem; }

/* Choix de l'humeur : la teinte de la pastille reprend celle des étiquettes */
.mood-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.mood-pick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 64px;
  padding: 0.75rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mood-pick button:hover { border-color: hsl(var(--primary) / .3); }
.mood-pick button .em { font-size: 1.5rem; line-height: 1.3; }
.mood-pick button .lab { font-size: 0.8rem; font-weight: 500; }
.mood-pick button[aria-pressed='true'] { transform: scale(1.05); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
.mood-pick .m-super[aria-pressed='true']     { background: #fef9c3; border-color: #facc15; color: #a16207; }
.mood-pick .m-bien[aria-pressed='true']      { background: #dcfce7; border-color: #4ade80; color: #15803d; }
.mood-pick .m-neutre[aria-pressed='true']    { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.mood-pick .m-difficile[aria-pressed='true'] { background: #ffedd5; border-color: #fb923c; color: #c2410c; }
.mood-pick .m-triste[aria-pressed='true']    { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }

.entry-form .field { margin-bottom: 1rem; }
.entry-form .lbl { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.entry-form .lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.entry-form .lbl-row .lbl { margin-bottom: 0; }
.entry-form .count { font-size: 11px; color: hsl(var(--muted-foreground)); }

.entry-form .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.entry-form .chips button {
  padding: 0.375rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.entry-form .chips button:hover { border-color: hsl(var(--primary) / .4); }
.entry-form .chips button[aria-pressed='true'] { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.entry-form textarea {
  width: 100%;
  min-height: 140px;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.75rem;
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.75;
  color: inherit;
  resize: vertical;
}
.entry-form textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: transparent; }

.entry-form .acts { display: flex; gap: 0.75rem; }
.entry-form .acts .btn { height: 2.5rem; border-radius: 0.75rem; }

/* ── Vue calendrier ── */
.cal-card {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-head h3 { font-weight: 700; font-size: 0.9rem; }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.25rem; }
.cal-dow > div { text-align: center; font-size: 10px; font-weight: 700; color: hsl(var(--muted-foreground)); padding: 0.25rem 0; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.cal-grid .d {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.5rem;
  background: hsl(var(--muted) / .3);
  font-family: inherit;
  color: inherit;
  cursor: default;
}
.cal-grid .d.has { background: hsl(var(--secondary)); cursor: pointer; transition: transform .15s; }
.cal-grid .d.has:hover { transform: scale(1.05); }
.cal-grid .d.today { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }
.cal-grid .d.today .n { color: hsl(var(--primary)); font-weight: 700; }
.cal-grid .d .n { font-size: 11px; font-weight: 500; line-height: 1.2; }
.cal-grid .d .em { font-size: 13px; line-height: 1; margin-top: 0.125rem; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.75rem; }
.cal-legend span { font-size: 10px; color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------------------
   38. Modales — choix d'avatar, configuration d'espace, demandes de devis
   Reprend profile/AvatarPicker.jsx, le checkout de Tarifs.jsx,
   tarifs/DevisSurMesureModal.jsx et tarifs/DevisModal.jsx.
   Chaque modale est ouverte par [data-open-modal] et par son ancre (#modal-…).
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(0 0 0 / .5);
  animation: modal-in .18s ease-out;
}
.modal[hidden] { display: none; }
.modal-blur { background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); }

/* Sur mobile, l'avatar arrive par le bas comme dans la source (items-end) */
.modal-bottom { align-items: flex-end; }
@media (min-width: 768px) { .modal-bottom { align-items: center; } }

.sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  animation: modal-rise .22s ease-out;
}
.sheet-sm { max-width: 28rem; }
.sheet > * + * { margin-top: 1rem; }

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sheet-head h3 { font-weight: 700; font-size: 1.125rem; }

.sheet .lbl { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.25rem; }
.sheet input,
.sheet textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.75rem;
  background: hsl(var(--background));
  font-family: inherit;
  font-size: 0.9rem;
  color: inherit;
}
.sheet textarea { resize: none; line-height: 1.7; }
.sheet input:focus,
.sheet textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: transparent; }

.sheet .form-stack > * + * { margin-top: 0.75rem; }
.sheet .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sheet .field .lbl { margin-bottom: 0.25rem; }
.sheet .note { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.sheet-acts { display: flex; gap: 0.75rem; }

@keyframes modal-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

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

/* ── Choix d'avatar ── */
.avatar-preview { display: flex; justify-content: center; padding: 1rem 0; }
.avatar-preview span {
  width: 7rem;
  height: 7rem;
  border-radius: 999px;
  border: 4px solid hsl(var(--primary));
  background: linear-gradient(to bottom right, #f0fdf4, #d1fae5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.75rem;
  line-height: 1;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
}

.sheet .sep { display: flex; align-items: center; gap: 0.5rem; }
.sheet .sep::before,
.sheet .sep::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border)); }
.sheet .sep span { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

.avatar-gallery {
  display: grid;
  /* minmax(0,…) : sans lui, « Grenouille » élargit sa colonne et la
     galerie déborde de la modale. Trois colonnes sous 400px, sinon les
     libellés se coupent en plein milieu d'un mot. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 13rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.avatar-gallery button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: transparent;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.avatar-gallery button:hover { border-color: hsl(var(--primary) / .4); }
.avatar-gallery button[aria-pressed='true'] {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / .05);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
  transform: scale(1.05);
}
.avatar-gallery .em { font-size: 1.875rem; line-height: 1.3; }
.avatar-gallery .lab { font-size: 0.8rem; font-weight: 500; line-height: 1.3; text-align: center; }
@media (min-width: 400px) { .avatar-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Configuration de l'espace organisation ── */
.recap-box { padding: 0.75rem; background: hsl(var(--secondary) / .5); border-radius: 1rem; font-size: 0.9rem; }
.recap-box .t { font-weight: 600; }
.recap-box .d { color: hsl(var(--muted-foreground)); }

.btn-pay {
  width: 100%;
  height: 3rem;
  border-radius: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to right, #10b981, #16a34a);
}
.btn-pay:hover { opacity: .9; }

/* --------------------------------------------------------------------------
   39. Application installée sur mobile
   Messages éphémères, zones sûres (encoche et barre d'accueil de l'iPhone
   en mode standalone) et confort tactile.
   -------------------------------------------------------------------------- */

/* ── Messages éphémères ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(6rem + env(safe-area-inset-bottom));
  z-index: 80;
  transform: translate(-50%, 1rem);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 768px) {
  .toast { bottom: calc(2rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ── Zones sûres ──
   En mode installé la page occupe tout l'écran : sans ces marges, la barre
   haute passe sous l'encoche et la nav basse sous la barre d'accueil. */
.topbar { padding-top: calc(0.75rem + env(safe-area-inset-top)); }

.nav-bottom { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }

.nav-drawer { top: calc(60px + env(safe-area-inset-top)); }

main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { main { padding-bottom: env(safe-area-inset-bottom); } }

.lexi-fab { bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .lexi-fab { bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }

.coach-composer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .coach-composer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } }

.ex-shell { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }

/* ── Confort tactile ──
   Cibles d'au moins 44px sur écran tactile (recommandation Apple), sans
   toucher au rendu à la souris où la densité actuelle convient. */
@media (pointer: coarse) {
  .btn,
  .ico-btn,
  .seg-tabs button,
  .pill-tabs button,
  .admin-tabs button,
  .view-tabs button,
  .mood-filters button,
  .plan-types button { min-height: 2.75rem; }

  .nav-bottom a { min-height: 3rem; }
  .cal-grid .d.has { min-height: 2.75rem; }
}

/* Pas de rectangle gris au tap, et pas de zoom involontaire au double-tap */
a, button, [role='tab'], summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* iOS zoome sur les champs dont le texte fait moins de 16px : on garde 16px
   minimum à la saisie pour éviter ce recadrage brutal. */
@media (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}

/* Défilement fluide sur les rubans horizontaux (onglets d'admin, suggestions) */
.pill-tabs,
.admin-tabs,
.coach-suggest .list,
.chat-suggest { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* --------------------------------------------------------------------------
   40. Lecteur d'exercice générique (exercice.html)
   Réutilise .ex-shell, .quiz-card et .opt de la section 18 ; n'ajoute que ce
   qui manquait : l'énoncé, la liste d'options, le retour après réponse et
   l'écran de fin de séance.
   -------------------------------------------------------------------------- */

.quiz-card .enonce {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Trois options ou plus : empilées, plus lisibles que serrées en grille. */
.opt-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.opt:disabled { cursor: default; }
.opt:disabled:hover { transform: none; }
.listen-big + .opt-grid,
.listen-big + .opt-list { margin-top: 1rem; }

/* ── Retour après réponse ── */
.ex-retour {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 2px solid;
  animation: retour-in .2s ease-out;
}
.ex-retour.ok { background: #f0fdf4; border-color: #86efac; }
.ex-retour.ko { background: #fffbeb; border-color: #fcd34d; }
.ex-retour .verdict { font-family: var(--font-heading); font-weight: 700; margin-bottom: 0.25rem; }
.ex-retour.ok .verdict { color: #15803d; }
.ex-retour.ko .verdict { color: #b45309; }
.ex-retour .aide { font-size: 0.9rem; line-height: 1.7; color: hsl(var(--foreground) / .8); }

@keyframes retour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Fin de séance ── */
.ex-fin {
  padding: 2rem 1.5rem;
  text-align: center;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 1.5rem;
}
.ex-fin > * + * { margin-top: 0.75rem; }
.ex-fin .party { display: block; font-size: 3.75rem; line-height: 1.2; }
.ex-fin h2 { font-weight: 800; font-size: 1.5rem; color: #14532d; }
.ex-fin .note { font-family: var(--font-heading); font-weight: 800; font-size: 2.25rem; line-height: 1.3; color: #16a34a; }
.ex-fin .mot { color: #15803d; }
.ex-fin .acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.ex-fin .acts .btn { flex: 1 1 10rem; height: 2.75rem; }

/* Petit saut de la mascotte quand la réponse est juste */
.mascotte.celebre { animation: celebrate .8s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .mascotte.celebre { animation: none; }
  .ex-retour { animation: none; }
}

/* Dans le lecteur, la mascotte laisse la question monter dans l'écran. */
.ex-shell .mascotte.lg { width: 8rem; }
@media (min-width: 640px) { .ex-shell .mascotte.lg { width: 12rem; } }

/* Le lecteur reprend la teinte du terrain : la section 18 était écrite pour
   les modules d'orthophonie, tout en violet. */
.tone-green .quiz-card { border-color: #dcfce7; }
.tone-green .quiz-card .ask { color: #16a34a; }
.tone-green .quiz-card .enonce { color: #14532d; }
.tone-green .opt { border-color: #dcfce7; color: #14532d; }
.tone-green .opt:hover { border-color: #86efac; }
.tone-green .listen-big { background: linear-gradient(to bottom right, #22c55e, #10b981); }
.tone-purple .quiz-card .enonce { color: #581c87; }

/* --------------------------------------------------------------------------
   41. Jeux générés (jeu.html)
   Le train des syllabes a besoin d'une aire de construction : ce n'est pas
   un questionnaire, on assemble un mot morceau par morceau.
   -------------------------------------------------------------------------- */

#jeu-scene > * + * { margin-top: 1rem; }

/* ── Voie de construction ── */
.voie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem;
  min-height: 4.25rem;
  padding: .75rem;
  border: 2px dashed hsl(var(--border));
  border-radius: 1rem;
  background: hsl(var(--secondary) / .35);
}
.voie-vide { font-size: .85rem; color: hsl(var(--muted-foreground)); }

.wagon {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .6rem 1rem;
  min-height: 2.75rem;
  border: 2px solid #bbf7d0;
  border-radius: .75rem;
  background: #fff;
  color: #14532d;
  cursor: pointer;
  transition: transform .12s, border-color .15s, opacity .15s;
}
.wagon:hover:not(:disabled) { border-color: #4ade80; transform: translateY(-2px); }
.wagon:active:not(:disabled) { transform: scale(.96); }
.wagon:disabled { opacity: .3; cursor: default; }
.wagon.pose { background: #dcfce7; border-color: #4ade80; }

.wagons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}

/* ── Mot à trou du radar des sons ── */
.mot-troue {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: .06em;
  color: #14532d;
}

/* ── Exposition brève du mot fantôme ── */
.flash {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: .06em;
  color: #14532d;
  min-height: 2.4rem;
}
.flash.vide::after { content: '· · ·'; color: hsl(var(--muted-foreground)); font-size: 1.2rem; }

/* ── Bilan de fin ── */
.ex-fin .suite { font-size: .92rem; line-height: 1.65; }
.ex-fin .suite .mot { color: #15803d; }
.ex-fin .suite b { font-weight: 700; }

@media (pointer: coarse) {
  .wagon { min-height: 3rem; font-size: 1.2rem; }
}

/* ==========================================================================
   42. Retour détaillé après une erreur
   Une réponse fausse ne dit plus seulement « ce n'était pas ça » : elle
   montre côte à côte ce qui a été écrit et ce qui était attendu, en
   surlignant précisément l'endroit qui diffère, puis explique le mécanisme
   de l'erreur et termine par un encouragement.
   ========================================================================== */

.ex-retour .compare {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  background: hsl(0 0% 100% / .65);
  border-radius: 0.75rem;
}
.ex-retour .compare dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(var(--foreground) / .55);
  white-space: nowrap;
}
.ex-retour .compare dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  word-break: break-word;
}
.ex-retour .compare .faux { color: #b45309; }
.ex-retour .compare .juste { color: #15803d; }

/* Le surlignage marque la lettre ou le groupe fautif sans employer la
   couleur seule : le fond et le soulignement restent lisibles pour une
   personne daltonienne. */
.ex-retour .compare mark {
  background: hsl(45 95% 82%);
  color: inherit;
  padding: 0 .12em;
  border-radius: .2em;
  box-shadow: inset 0 -0.18em 0 hsl(38 92% 62%);
}
.ex-retour .compare .juste mark {
  background: hsl(140 60% 85%);
  box-shadow: inset 0 -0.18em 0 hsl(142 55% 55%);
}
/* Une lettre absente du mot proposé : on laisse une place vide visible. */
.ex-retour .compare .creux {
  display: inline-block;
  width: .6em;
  border-bottom: 2px dashed hsl(var(--foreground) / .35);
}

.ex-retour .aide + .aide { margin-top: 0.5rem; }
.ex-retour .aide b { font-weight: 700; color: hsl(var(--foreground)); }

.ex-retour .encouragement {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid hsl(var(--foreground) / .12);
  font-size: 0.9rem;
  line-height: 1.7;
  font-style: italic;
  color: hsl(var(--foreground) / .75);
}

/* ==========================================================================
   43. Adresse de contact
   L'adresse vient de assets/config.js et est posée par app.js. Elle est
   longue et sans espace : on l'autorise à passer à la ligne n'importe où,
   sinon elle déborderait de l'écran sur un téléphone.
   ========================================================================== */

a[data-contact-email] {
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
a[data-contact-email]:hover { text-decoration-thickness: 2px; }
.site-footer .contact-ligne { margin-top: 0.35rem; }

/* Sur téléphone, le bouton rond de Lexi (6rem, fixé en bas à droite)
   recouvrait la fin du pied de page — et donc l'adresse de contact. On
   réserve sous le pied de page la hauteur du bouton : en fin de
   défilement, tout le texte passe au-dessus. */
@media (max-width: 767px) {
  .site-footer { padding-bottom: 9rem; }
}

/* ==========================================================================
   44. Accueil : choix visibles et fidèles
   Les tuiles d'âge et les lignes de difficultés portent toutes leur marque
   « ✓ » ; elle ne s'affiche que sur ce qui est réellement choisi. Avant, la
   marque était écrite en dur sur les éléments cochés par défaut et restait
   figée quand on changeait d'avis.
   ========================================================================== */

.pick-tile .chosen { visibility: hidden; }
.pick-tile[aria-pressed='true'] .chosen { visibility: visible; }
.pick-row .tick { visibility: hidden; }
.pick-row[aria-pressed='true'] .tick { visibility: visible; }

/* ==========================================================================
   45. Tableau de bord réel (admin.html, assets/admin-stats.js)
   Même langage que les cartes d'administration existantes : fonds blancs,
   liserés verts, chiffres en gras. Les graphiques sont des colonnes en CSS,
   sans bibliothèque, chacun doublé d'une phrase qui le résume.
   ========================================================================== */

.st-banniere {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.st-exemple { background: #fef9c3; border: 1px solid #fde047; color: #713f12; }
.st-alerte  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.st-maj { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.st-lien {
  padding: 0; border: 0; background: none;
  color: hsl(var(--primary)); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.admin-wrap .admin-stats.st-4 + .admin-stats.st-4 { margin-top: 1rem; }
.admin-stats .s .v { overflow-wrap: anywhere; }

/* Colonnes des 30 derniers jours */
.st-colonnes {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 7.5rem;
  padding: 0.5rem 0 0;
  border-bottom: 1px solid #dcfce7;
}
.st-colonnes span {
  flex: 1;
  min-width: 0;
  border-radius: 4px 4px 0 0;
  background: #10b981;
}
.st-colonnes span.zero { background: #e7f5ec; }
.st-axe {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}
.st-resume { margin-top: 0.5rem; font-size: 0.85rem; color: #166534; }

/* Petits chiffres sous un graphique */
.st-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
.st-chiffres span {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  font-size: 0.8rem;
  color: #166534;
  font-variant-numeric: tabular-nums;
}
.st-chiffres b { font-weight: 800; color: #14532d; }

.st-note { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.st-note a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }
.st-vide { font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.st-score { min-width: 3rem; text-align: right; font-size: 0.8rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.st-attente { color: #b45309; font-weight: 600; }
.st-bouton { margin-top: 0.75rem; }
.bar-row .n { font-variant-numeric: tabular-nums; }

/* Sur téléphone, la liste des inscrits passe sur deux lignes : le bouton
   testeur descend sous le nom au lieu de l'écraser. */
@media (max-width: 520px) {
  .tester-row { flex-wrap: wrap; }
  .tester-row .who { flex-basis: calc(100% - 3rem); }
  .tester-row .tag-tester { margin-left: 3rem; }
  .bar-row .lab.w36 { width: 7.5rem; font-size: 0.85rem; }
}

/* ==========================================================================
   46. La séance de 10 minutes (seance.html, assets/seance.js)
   Un écran sans menu, une seule chose à la fois. La frise des quatre étapes
   reste visible en permanence : savoir où l'on en est rassure. Les mots à
   toucher et les tuiles ont des zones tactiles d'au moins 44 px.
   ========================================================================== */

.se > * + * { margin-top: 1rem; }

/* Frise des étapes */
.se-etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  counter-reset: none;
}
.se-etapes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: hsl(var(--muted-foreground));
}
.se-etapes .pastille {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  border: 2px solid #d1fae5;
  background: #fff;
  font-weight: 700;
  color: #6b7280;
}
.se-etapes li.faite .pastille { background: #22c55e; border-color: #22c55e; color: #fff; }
.se-etapes li.faite .pastille { font-size: 0; }
.se-etapes li.faite .pastille::after { content: '✓'; font-size: 0.9rem; }
.se-etapes li.actuelle { color: #14532d; font-weight: 700; }
.se-etapes li.actuelle .pastille { border-color: #16a34a; background: #dcfce7; color: #14532d; }

/* Cartes d'accueil, de transition, de limite */
.se-carte {
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 2px solid #dcfce7;
  border-radius: 1.25rem;
  text-align: center;
}
.se-carte > * + * { margin-top: 0.75rem; }
.se-carte h2 { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: #14532d; }
.se-carte .party { font-size: 2.25rem; display: block; }
.se-carte .acts { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.se-surtitre { font-size: 0.85rem; font-weight: 600; letter-spacing: .03em; color: #15803d; }
.se-domaine { font-family: var(--font-heading); font-weight: 800; font-size: 1.75rem; color: #14532d; }
.se-but { font-size: 1.05rem; color: #166534; }
.se-note { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.se-son { font-size: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: #fefce8; color: #713f12; }
.se-plan {
  display: grid;
  gap: 0.4rem;
  margin: 1rem auto 0;
  max-width: 22rem;
  text-align: left;
  list-style: decimal;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: #14532d;
}
.se-carte .btn-block { margin-top: 1.25rem; }

/* Mémoire : liste de mots à retenir */
.se-memo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 0.5rem;
}
.se-memo span {
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #14532d;
}
.se-pret { display: block; margin: 0.5rem auto 0; }

/* Grille de mots (le mot intrus) */
.opt-mots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}
.opt-mots .opt { font-size: 1.2rem; letter-spacing: .05em; justify-content: center; }

/* Tuiles de lettres (mots mélangés) */
.wagons-lettres .wagon, .voie-lettres .wagon { min-width: 2.9rem; font-size: 1.35rem; text-transform: lowercase; }
.wagon small { font-size: 0.7rem; margin-left: 0.2rem; color: hsl(var(--muted-foreground)); }

/* Textes à trous et à fautes */
.se-texte {
  font-size: 1.1rem;
  line-height: 2.1;
  text-align: left;
  color: #14301f;
  margin-bottom: 1rem;
}
.se-trou {
  display: inline-block;
  min-width: 3.2rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
  border-bottom: 3px solid #d1d5db;
  background: #f9fafb;
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
}
.se-trou.actif { border-color: #a855f7; background: #faf5ff; box-shadow: 0 0 0 3px #e9d5ff; }
.se-trou.juste { border-color: #22c55e; background: #f0fdf4; color: #15803d; }
.se-trou.faux  { border-color: #f59e0b; background: #fffbeb; color: #92400e; }

.se-fautes { line-height: 2.4; }
.se-mot {
  display: inline;
  padding: 0.15rem 0.1rem;
  margin: 0;
  border: 0;
  border-radius: 0.35rem;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.se-mot:hover:not(:disabled) { background: #f3f4f6; }
.se-mot[aria-pressed='true'] { background: #fef3c7; box-shadow: inset 0 -3px 0 #f59e0b; }
.se-mot.juste     { background: #dcfce7; box-shadow: inset 0 -3px 0 #22c55e; color: #14532d; font-weight: 700; }
.se-mot.manquee   { background: #ffedd5; box-shadow: inset 0 -3px 0 #f97316; color: #9a3412; font-weight: 700; }
.se-mot.pas-faute { text-decoration: line-through; text-decoration-color: #9ca3af; }
.se-mot:disabled { cursor: default; opacity: 1; }
.se-compteur { font-size: 0.9rem; font-weight: 600; color: #7c3aed; text-align: center; }

.se-regles { display: grid; gap: 0.5rem; margin-top: 0.75rem; text-align: left; }
.se-regle {
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 0.92rem;
  line-height: 1.6;
}
.se-regle s { color: #9a3412; }
.se-regle b { color: #14532d; }

/* Bilan */
.se-ligne {
  display: flex;
  justify-content: space-between;
  max-width: 18rem;
  margin: 0.25rem auto;
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  .se-trou.actif { box-shadow: none; }
}

/* Énoncé à observer lettre par lettre (compter une lettre) : grand, espacé. */
.quiz-card .enonce.grand { font-size: 1.6rem; letter-spacing: .12em; word-spacing: .4em; text-align: center; font-weight: 700; }
.lettres-comptees { letter-spacing: .08em; font-weight: 600; }
.lettres-comptees mark { background: hsl(45 95% 80%); padding: 0 .08em; border-radius: .15em; }

/* ==========================================================================
   47. Page Exercices en mode « séances uniquement »
   Les cartes d'exercices décrivent ce qu'on travaille, elles ne se lancent
   plus : elles perdent donc tout ce qui les faisait paraître cliquables.
   ========================================================================== */

.cat-card.cat-info { cursor: default; }
.cat-card.cat-info:hover { transform: none; box-shadow: none; border-color: inherit; }
.seance-etapes { list-style: none; padding: 0; }
.seance-etapes .ico { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; }
.cat-seance { margin: 1rem 0 1.25rem; }

/* ==========================================================================
   48. Séance — texte à espacer (« Remets les espaces et la ponctuation »)
   Une grande zone de saisie, lettres espacées, sans correcteur automatique
   du téléphone : il changerait les mots à la place de l'élève.
   ========================================================================== */

.se-espaces {
  display: block;
  width: 100%;
  margin: 0.75rem 0 0.5rem;
  padding: 0.85rem 1rem;
  border: 2px solid #d8b4fe;
  border-radius: 0.9rem;
  background: #fff;
  color: #14301f;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.9;
  letter-spacing: .04em;
  word-spacing: .25em;
  resize: vertical;
}
.se-espaces:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px #e9d5ff; }
.se-espaces[readonly] { background: #f9fafb; border-color: #e5e7eb; }
.se-alerte {
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.se-reprendre { display: block; margin: 0 auto 0.75rem; font-size: 0.85rem; min-height: 2.25rem; }
.se-regle.se-conseil { background: #f5f3ff; border-color: #ddd6fe; }
.se-modele-titre { font-weight: 700; margin-top: 0.5rem; }
.se-modele {
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  line-height: 1.9;
}

/* ==========================================================================
   49. Séance — exercices de mémoire de l'autrice
   Suite de nombres (une case par nombre), images à choisir, Memory.
   ========================================================================== */

.se-nombres span { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }
.se-cases {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.se-case {
  width: 3.4rem;
  height: 3.4rem;
  border: 2px solid #d8b4fe;
  border-radius: 0.75rem;
  background: #fff;
  color: #14301f;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.se-case:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px #e9d5ff; }
.se-case.juste { border-color: #22c55e; background: #f0fdf4; color: #15803d; }
.se-case.faux  { border-color: #f59e0b; background: #fffbeb; color: #92400e; }

.opt-images .opt { font-size: 1.9rem; letter-spacing: .08em; justify-content: center; min-height: 4.5rem; line-height: 1.3; }

.se-memory {
  display: grid;
  gap: 0.6rem;
  max-width: 22rem;
  margin: 0.75rem auto 1rem;
}
.se-carte-memo {
  aspect-ratio: 1;
  min-height: 3.5rem;
  border: 2px solid #c4b5fd;
  border-radius: 0.9rem;
  background: repeating-linear-gradient(45deg, #ede9fe 0 0.5rem, #f5f3ff 0.5rem 1rem);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
}
.se-carte-memo:hover:not(:disabled) { transform: translateY(-2px); }
.se-carte-memo:focus-visible { outline: 3px solid #a855f7; outline-offset: 2px; }
.se-carte-memo.visible { background: #fff; border-color: #a855f7; }
.se-carte-memo.paire { background: #f0fdf4; border-color: #22c55e; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .se-carte-memo { transition: none; }
  .se-carte-memo:hover:not(:disabled) { transform: none; }
}

/* Pendant les questions, la mascotte reste petite : les textes longs
   (texte à espacer, à fautes, Memory) doivent tenir dans l'écran. */
#se-question .mascotte { width: 6rem; height: 6rem; }
@media (min-width: 640px) { #se-question .mascotte { width: 7.5rem; height: 7.5rem; } }

/* ==========================================================================
   50. Récompenses (bilan de séance, Mes progrès, Profil)
   ========================================================================== */

.se-gains {
  margin: 1rem auto 0;
  max-width: 22rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  text-align: left;
  display: grid;
  gap: 0.35rem;
}
.se-gains p { margin: 0; }
.defi-jour .head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.defi-jour h2 { font-size: 1.125rem; }
.defi-gain { font-weight: 700; color: #7c3aed; white-space: nowrap; }
.defi-etat { margin-top: 0.5rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.defi-etat.ok { color: #15803d; font-weight: 600; }
.protege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: hsl(var(--secondary));
  font-size: 0.9rem;
}
.protege p { flex: 1 1 14rem; margin: 0; }
.medallion .name { text-wrap: balance; }

/* Journal : ce que Lexi remarque sur la semaine */
.insights .analyse {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.92rem;
  line-height: 1.6;
}
.insights .analyse p { margin: 0; }
.next-badge .txt p { white-space: normal; overflow: visible; text-overflow: clip; }

/* ==========================================================================
   51. Amis : code ami, ajout, lancement d'un défi
   ========================================================================== */

.amis-info h2, .code-ami h2, .lancer-defi h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.amis-info p + p { margin-top: 0.5rem; }
.amis-chargement { text-align: center; padding: 1rem 0; }
.code-ami, .lancer-defi { margin-bottom: 1.25rem; }
.code-ligne { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.25rem 0 0.5rem; }
.code-ami .code {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
}
.ajout-ami { margin-top: 1rem; display: grid; gap: 0.4rem; }
.ajout-ami label { font-weight: 600; font-size: 0.9rem; }
.ajout-ligne { display: flex; gap: 0.5rem; }
.ajout-ligne .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.ajout-ligne .btn svg { width: 1rem; height: 1rem; }
.defi-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; }
.defi-champs label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.lancer-defi .btn svg { width: 1rem; height: 1rem; }
.req-section + .req-section { margin-top: 1.5rem; }
/* Séance : bouton de lecture à voix haute sous la consigne */
.se-lire {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem auto 0.5rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.se-lire:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
.quiz-card > .se-lire { display: flex; width: max-content; }
.quiz-card > .se-lire[hidden] { display: none; }

/* ==========================================================================
   52. Pages légales
   ========================================================================== */

.legal h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.legal h2:first-of-type { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; display: grid; gap: 0.3rem; margin: 0.5rem 0; }
.legal .maj { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.legal .callout ul { margin-top: 0.4rem; }
.a-completer { background: #fef08a; color: #713f12; padding: 0 0.2em; border-radius: 0.2em; }
.legal-liens { padding: 0.5rem 0 1.5rem; }
.legal-liens a, .liens-legaux a { color: inherit; text-decoration: underline; }
.liens-legaux { font-size: 0.8rem; color: hsl(var(--muted-foreground)); text-align: center; margin-top: 0.5rem; }
.consentement { margin-top: 0.75rem; line-height: 1.5; }
.consentement a { text-decoration: underline; }

/* ==========================================================================
   53. Test de positionnement (accueil et page « Test de niveau »)
   ========================================================================== */

.onb[data-step="4"] .onb-nav .btn-onb { visibility: hidden; }
.lvl-card .opts button.correct { border-color: #22c55e; background: #f0fdf4; color: #15803d; font-weight: 700; }
.lvl-card .opts button.wrong { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.lvl-card .opts button:disabled { cursor: default; }
.lvl-card .se-memo { margin-bottom: 0.75rem; }
.lvl-ecoute { margin-bottom: 1rem; }
.lvl-retour { margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: hsl(var(--secondary)); font-size: 0.92rem; line-height: 1.6; }
.lvl-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.lvl-passer { text-align: center; margin-top: 1rem; }
.btn-lien { background: none; border: 0; padding: 0.25rem; font: inherit; font-size: 0.9rem; color: hsl(var(--muted-foreground)); text-decoration: underline; cursor: pointer; }

/* ==========================================================================
   54. Densité de l'affichage (Profil → Accessibilité → Densité)
   ========================================================================== */

[data-densite="compact"] :is(.panel, .card, .quiz-card, .goal-card, .badges-panel, .programme, .friend-card, .day-card, .lvl-card, .req-card, .defi-card) { padding: 0.75rem; }
[data-densite="compact"] .content-shell > * + * { margin-top: 0.75rem !important; }
[data-densite="aere"] :is(.panel, .card, .quiz-card, .goal-card, .badges-panel, .programme, .friend-card, .day-card, .lvl-card, .req-card, .defi-card) { padding: 1.75rem; }
[data-densite="aere"] .content-shell > * + * { margin-top: 2rem !important; }

/* Tableau de bord admin : demandes de devis */
.st-devis { padding: 0.75rem 0; border-bottom: 1px solid hsl(var(--border)); }
.st-devis:last-child { border-bottom: 0; }
.st-devis .m { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.st-devis .b { margin-top: 0.35rem; font-size: 0.92rem; white-space: pre-line; }

/* ==========================================================================
   55. Espaces établissement (organisation.html, invitation.html, tarifs.html)
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.org-wrap > section > * + * { margin-top: 1rem; }
.org-wrap .sub-card + .sub-card { margin-top: 1rem; }
.org-wrap .sub-card .acts { flex-wrap: wrap; }
.org-stats-3 { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (max-width: 30rem) { .org-stats-3 .s { padding: 0.75rem 0.4rem; } .org-stats-3 .s .v { font-size: 1.2rem; } .org-stats-3 .s .l { font-size: 0.72rem; } }
.org-invit .code { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: #047857; overflow-wrap: anywhere; }
.org-lien { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.org-lien .input { flex: 1; min-width: 0; font-size: 0.85rem; }
.org-rejoindre { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.org-rejoindre .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.org-message { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: hsl(var(--secondary)); font-size: 0.92rem; }
.org-alerte { padding: 0.9rem 1rem; border-radius: 1rem; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.92rem; }
.mem-row .meta + .meta { margin-top: 0.1rem; white-space: normal; }
.mem-row .role { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; background: #d1fae5; color: #065f46; }
.mem-row .acts .btn { height: 2rem; padding: 0 0.6rem; font-size: 0.8rem; }
.mem-vide { padding: 1rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.9rem; border: 1px dashed hsl(var(--border)); border-radius: 0.75rem; }
.st-attente { background: #e0f2fe; color: #075985; }

/* Tarifs : formulaire de devis */
.devis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.devis-erreur { padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: #fef2f2; color: #b91c1c; font-size: 0.9rem; }
.devis-ok { text-align: center; }
.devis-ok .t { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.devis-ok p + .btn { margin-top: 1.25rem; }

/* Invitation */
.invit-code { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: .18em; color: #047857; margin: 0.25rem 0 1.25rem; }
.center-page .inner .stack { display: grid; gap: 0.6rem; }
.center-page .inner .stack .btn { width: 100%; height: 3rem; }