/* =============================================================
   Lernen — feuille de style commune
   Structure du fichier :
     1. Tokens (couleurs, rayons, ombres, typo)
     2. Base
     3. Layout (page, hero, wrap, sections)
     4. Typographie
     5. Boutons, pastilles, icônes
     6. Cartes & panneaux
     7. Blocs métier (séance, messages, chat, rendez-vous, tuiles)
     8. Chiffres clés
     9. Pied de page
    10. Placeholders images
    11. Utilitaires
    12. Apparition au scroll
    13. Responsive
   ============================================================= */

/* 1. TOKENS ---------------------------------------------------- */
:root {
  /* La couleur du bouton principal fait foi. Elle était codée en dur
     dans `.btn--primary`, plus bas, tandis que ces jetons gardaient une
     palette antérieure (var(--brand)) : le site parlait deux rouges à la fois
     — un bouton rose-orangé, des sélections et des textes plus sombres.
     Les jetons disent maintenant la même chose que le bouton, et le
     bouton lit le jeton. Un seul endroit à changer. */
  --brand: #ff6363;
  --brand-dark: #e14a4a;

  /* LE CORAIL QUI PORTE DU TEXTE, sur fond clair. `--brand` est fait pour
     les FONDS : posé en couleur de texte sur #F9F7F5 il donne 2,72:1, sous
     le seuil même pour un titre de 40 px (3:1). Ces deux nuances-ci restent
     de la même famille et passent :

       --brand-titre  #e14a4a → 3,72:1  grands titres (≥ 24 px)
       --brand-texte  #c0392b → 5,09:1  texte courant, boutons, pastilles

     Le corail de la marque n'est PAS remplacé partout : sur fond sombre il
     est parfaitement lisible, et c'est lui qui peint les boutons pleins. */
  --brand-titre: #e14a4a;
  --brand-texte: #c0392b;
  --brand-soft: #fff1f1;
  --brand-tint: #fff4f4;
  --brand-line: #ffd9d9;
  --brand-line-2: #ffc9c9;
  --grad: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54%);
  --grad-bar: linear-gradient(90deg, #ffbcbc, #ff6363);

  --ink: #1c1c1e;
  --ink-soft: #333236;
  --ink-mid: #4a4a4e;
  --muted: #5b5a5e;
  --muted-2: #6e6d72;
  --muted-3: #7c7b80;
  --muted-4: #8a8a8f;
  --muted-5: #9a999e;
  --muted-6: #a3a2a7;

  --cream: #f7f3ef;
  --surface: #f9f7f5;
  --surface-2: #f7f4f2;
  --line: #f0ebe7;
  --line-2: #f2ede9;
  --line-3: #e9e2de;
  --line-4: #e4dfdb;
  --track: #f2edea;
  --track-2: #efeae6;

  --green: #3bb273;
  --gold: #f5a623;

  --r-hero: 34px;
  --r-card: 30px;
  --r-media: 26px;
  --r-lg: 22px;
  --r-md: 20px;
  --r-sm: 18px;
  --r-xs: 16px;
  --pill: 44px;

  --sh-nav: 0 18px 40px -18px rgba(60, 30, 25, 0.28);
  --sh-card: 0 26px 50px -26px rgba(60, 30, 25, 0.3);
  --sh-soft: 0 10px 26px -14px rgba(60, 30, 25, 0.22);
  --sh-chip: 0 4px 12px rgba(0, 0, 0, 0.12);
  --sh-chip-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sh-brand: 0 12px 24px -10px rgba(255, 99, 99, 0.7);
  --sh-brand-sm: 0 12px 24px -12px rgba(255, 99, 99, 0.7);

  /* Largeur de la colonne centrale. Portée de 1170 à 1300 px :
     les écrans à deux colonnes — le salon, la page réservations —
     étouffaient, la conversation et le panneau latéral se disputant
     la même place. */
  --shell: 1300px;
  --font: "Nunito", system-ui, -apple-system, sans-serif;
  --font-display: "Capriola", Georgia, serif;
}

/* 2. BASE ------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-dark);
}
::selection {
  background: var(--brand-line);
}

img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 3. LAYOUT ---------------------------------------------------- */
.page {
  padding: 14px 14px 0;
}

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
}

/* espacement vertical standard entre blocs */
.section {
  padding-top: 96px;
}
.section--xs {
  padding-top: 30px;
}
.section--sm {
  padding-top: 44px;
}
.section--md {
  padding-top: 90px;
}
.section--lg {
  padding-top: 110px;
}

.hero {
  position: relative;
  padding: 26px 0 0;
  border-radius: var(--r-hero);
  overflow: hidden;
  background-color: var(--cream);
  /* Le fond image a laissé la place à <x-animated-hero-background />,
     rendu comme premier enfant de ce héros (components/lernen/hero).
     `isolation: isolate` lui est ajouté dans
     public/css/animated-hero-background.css : sans contexte
     d'empilement, son z-index négatif le ferait passer derrière la
     couleur crème ci-dessus. */
}

.hero-head {
  padding: 64px 0 0;
  text-align: center;
}

/* En-tête réduit au fil d'Ariane (composant lernen/hero, `head`/`menu` à
   false — le tunnel de réservation). `.hero` n'a de rembourrage qu'en haut,
   les 120 px que lui prend la barre flottante ; tout l'air du bas venait de
   `.hero-head` et de `.hero-menu`, absents ici. Sans cette règle le bandeau
   crème se refermerait sur le fil d'Ariane. */
.hero--bare {
  padding-bottom: 30px;
}

.hero-grid {
  margin-top: 52px;
  padding-bottom: 118px;
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 22px;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* barre de navigation */
.navbar {
  position: relative;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px 0 12px;
  border-radius: var(--pill);
  background: #fff;
  box-shadow: var(--sh-nav);
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-label {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.burger {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.burger span {
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
}

.brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f5f44;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark i {
  width: 15px;
  height: 19px;
  border-radius: 60% 40% 55% 45%;
  background: #fff;
  transform: rotate(-18deg);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
}

.avatar-tile {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.avatar-tile .dot-online {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
}

/* 4. TYPOGRAPHIE ---------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.eyebrow--center {
  justify-content: center;
  margin-bottom: 18px;
}
.eyebrow span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow i {
  width: 34px;
  height: 2px;
  background: var(--brand);
  flex-shrink: 0;
}

.h1 {
  margin: 0 auto;
  max-width: 960px;
  font-family: var(--font-display);
  font-size: 66px;
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: pretty;
}

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.h2--44 {
  font-size: 44px;
  line-height: 1.08;
}
.h2--40 {
  font-size: 40px;
}
.h2--30 {
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
/* Titre de page en couleur de marque. Les titres de la maquette sont en
   encre ; celui qui ouvre une page de détail, seul sous le fil d'Ariane,
   se pose en repère plutôt qu'en simple intitulé. */
.h2--brand {
  /* 40 px et plus : le seuil est 3:1, et cette nuance donne 3,72. */
  color: var(--brand-titre);
}

.h4 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h5 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lead {
  margin: 22px auto 0;
  max-width: 680px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
}
.kicker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

/* 5. BOUTONS, PASTILLES, ICÔNES -------------------------------- */
.btn {
  height: 52px;
  padding: 0 22px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-brand-sm);
}
.btn--primary:hover {
  color: #fff;
  box-shadow: 0 16px 28px -12px rgba(255, 99, 99, 0.8);
}
.btn--ghost {
  background: var(--surface-2);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--line-2);
  color: var(--ink);
}
.btn--white {
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.btn--soft {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
}
.btn--outline {
  background: none;
  border: 2px solid var(--brand-line);
  /* Du texte de 17 px : seuil 4,5:1, que le corail de marque manquait de
     moitié (2,91 sur blanc). */
  color: var(--brand-texte);
  font-weight: 800;
}
.btn--dashed {
  width: 100%;
  height: auto;
  padding: 20px 22px;
  border: 2px dashed var(--line-3);
  border-radius: var(--r-media);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--muted-4);
}
.btn--block {
  width: 100%;
}

.btn.is-lg {
  height: 56px;
  padding: 0 26px;
  font-size: 16.5px;
  font-weight: 800;
}
.btn.is-50 {
  height: 50px;
  font-size: 16px;
}
.btn.is-sm {
  height: 48px;
  padding: 0 20px;
  font-size: 15px;
}
.btn.is-xs {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

/* pastille compteur / statut */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.chip--dark {
  background: var(--ink);
  color: #fff;
}
.chip--float {
  height: 32px;
  padding: 0 13px;
  font-size: 13px;
  box-shadow: var(--sh-chip-sm);
}
.chip--live {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  box-shadow: var(--sh-chip);
}

.badge {
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.badge--soft {
  background: var(--brand-soft);
  color: var(--brand);
}
.badge--xs {
  padding: 3px 9px;
}

.iconbtn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.iconbtn--plain {
  width: 46px;
  height: 46px;
  background: var(--surface-2);
  color: var(--ink);
}
.iconbtn--white {
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--muted-2);
}
.iconbtn--grad {
  width: 44px;
  height: 44px;
  background: var(--grad);
  color: #fff;
}
.iconbtn--outline {
  width: 38px;
  height: 38px;
  background: none;
  border: 1.5px solid var(--brand-line);
  color: var(--brand);
}

/* icônes Material Symbols */
.ico {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  font-size: 21px;
  -webkit-font-feature-settings: "liga";
  font-variant-ligatures: none;
}
.ico-15 {
  font-size: 15px;
}
.ico-16 {
  font-size: 16px;
}
.ico-18 {
  font-size: 18px;
}
.ico-19 {
  font-size: 19px;
}
.ico-20 {
  font-size: 20px;
}
.ico-21 {
  font-size: 21px;
}
.ico-22 {
  font-size: 22px;
}
.ico-24 {
  font-size: 24px;
}
.ico--brand {
  color: var(--brand);
}
.ico--green {
  color: var(--green);
}
.ico--gold {
  color: var(--gold);
}
.ico--white {
  color: #fff;
}

/* 6. CARTES & PANNEAUX ---------------------------------------- */
.card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 26px;
  box-shadow: var(--sh-card);
}

.card--brand {
  background: var(--brand);
  color: #fff;
}
.card--brand .h4,
.card--brand .h5,
.card--brand .h2,
.card--brand p,
.card--brand .lead,
.card--brand .display {
  color: #fff;
}
.card--brand .hint,
.card--brand .cell-sub {
  color: rgba(255, 255, 255, 0.82);
}
.card--brand .badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.card--brand .btn--ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.card--brand .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}
.card--brand .price-total,
.card--brand .credits-unit {
  color: #fff;
}

.panel {
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 26px;
}
.panel--outline {
  background: none;
  border: 1.5px solid var(--line);
}
.panel--brand {
  background: var(--grad);
  color: #fff;
}
.panel--pad-lg {
  padding: 34px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stack--sm {
  gap: 14px;
}
.stack--lg {
  gap: 20px;
}

/* 7. BLOCS MÉTIER --------------------------------------------- */

/* — prochaine séance — */
.session {
  display: flex;
  gap: 24px;
}
.session-media {
  position: relative;
  width: 196px;
  height: 210px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.session-media .chip--live {
  position: absolute;
  left: 12px;
  bottom: 12px;
}
.session-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.session-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--muted);
}
.session-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  flex-wrap: nowrap;
}

/* — crédits — */
.credits {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
}
.credits-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-4);
}
.credits-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.credits-value .display {
  font-size: 38px;
}
.credits-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-4);
}

.bar {
  height: 9px;
  border-radius: var(--pill);
  background: var(--track-2);
  overflow: hidden;
}
.bar--light {
  background: rgba(255, 255, 255, 0.3);
}
.bar--track {
  background: var(--track);
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--grad-bar);
}
.bar--light > i {
  background: #fff;
}

/* — messages (aperçu) — */
.msg-preview {
  display: flex;
  gap: 13px;
}
.msg-preview .avatar {
  flex-shrink: 0;
}
.msg-preview-body {
  flex: 1;
  min-width: 0;
}
.msg-name {
  font-size: 16px;
  font-weight: 800;
}
.msg-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-5);
}
.msg-text {
  margin-top: 2px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.avatar--52 {
  width: 52px;
  height: 52px;
}
.avatar--54 {
  width: 54px;
  height: 54px;
}
.avatar .dot-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
}

/* — liste de conversations + chat — */
.msg-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 24px;
  align-items: stretch;
}

.conv-list {
  align-self: start;
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.conv {
  display: flex;
  gap: 14px;
  color: var(--ink);
  padding: 16px;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease;
}
.conv:hover {
  background: #fff;
}
.conv.is-active {
  background: var(--brand-tint);
}
.conv-body {
  flex: 1;
  min-width: 0;
}
.conv-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.conv-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.conv-time {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-5);
  white-space: nowrap;
}
.conv-sub {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
}
.conv-text {
  margin-top: 4px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}
.unread {
  align-self: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat {
  border-radius: var(--r-card);
  border: 1.5px solid var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-2);
}
.chat-sub {
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.chat-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0;
}

.bubble {
  max-width: 78%;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.5;
}
.bubble--in {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: 500;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px;
}
.bubble--out {
  align-self: flex-end;
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-lg) var(--r-lg) 8px var(--r-lg);
}

/* Entrée « grandit depuis l'angle » d'une bulle nouvellement insérée
   (voir le MutationObserver en bas de inbox.blade.php) : l'angle de
   départ suit celui, déjà pointu, de la bulle elle-même — coin bas
   droit pour un message envoyé, bas gauche pour un message reçu. */
@keyframes growCorner {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.message-enter {
  animation: growCorner 0.28s ease-out;
}
.bubble--out.message-enter {
  transform-origin: bottom right;
}
.bubble--in.message-enter {
  transform-origin: bottom left;
}
@media (prefers-reduced-motion: reduce) {
  .message-enter {
    animation: none;
  }
}

.file-chip {
  align-self: flex-start;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--r-xs);
  background: #fff;
  border: 1.5px solid var(--line);
  cursor: pointer;
}
.file-chip b {
  font-size: 15.5px;
  font-weight: 700;
}
.file-chip span.size {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-5);
}

.composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 10px 0 20px;
  border-radius: var(--pill);
  background: var(--surface);
}
.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.composer input::placeholder {
  color: var(--muted-6);
  font-weight: 600;
}

/* — rendez-vous — */
.appt-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  align-items: start;
}

.appt {
  border-radius: var(--r-media);
  background: var(--surface);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.appt--hi {
  background: var(--brand-tint);
}

.date-tile {
  width: 64px;
  height: 70px;
  border-radius: var(--r-sm);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.date-tile span {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted-4);
}
.date-tile.is-now span {
  color: var(--brand);
}
.date-tile b {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}

.appt-body {
  flex: 1;
  min-width: 0;
}
.appt-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.appt-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.appt-meta {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted-2);
}

/* — check-list « à préparer » — */
.todo {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.todo-box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 8px;
  border: 2.5px solid var(--line-4);
  flex-shrink: 0;
  cursor: pointer;
}
.todo-box.is-done {
  background: var(--brand);
  border-color: var(--brand);
}
.todo-title {
  font-size: 16.5px;
  font-weight: 700;
}
.todo-note {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-4);
}
.todo-note--brand {
  color: var(--brand);
}

/* — objectif — */
.goal {
  position: relative;
  overflow: hidden;
  padding: 28px;
}
.goal::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.goal-inner {
  position: relative;
}
.goal-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.goal-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* — tuiles (accompagnements, mentors) — */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Quatre par rangée, avec un repli automatique : sous ~1100 px quatre
   colonnes deviennent trop étroites pour un nom et une accroche. */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
@media (min-width: 1101px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
}

.tile-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tile-card--mentor {
  gap: 14px;
}

.tile {
  position: relative;
  height: 270px;
  padding: 22px;
  border-radius: var(--r-media);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tile--tall {
  height: 290px;
}

/* grille de tuiles de texte (chiffres clés, raccourcis, sommaire) :
   même nom .tile, mais surface blanche et hauteur libre */
.tiles-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 16px;
}
.tiles-4 .tile {
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.tile:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
}
.tile-label {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.tiles-4 .tile-foot {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted-4);
  margin-top: -4px;
}
.tiles-4 .display {
  line-height: 1;
}
.tile .chip--float {
  position: absolute;
  top: 18px;
  right: 18px;
}
.tile-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.tile-title--sm {
  font-size: 25px;
}
.tile-sub {
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tile-name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}
.rating b {
  font-weight: 800;
  color: var(--ink);
}

.tile-desc {
  min-height: 54px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-mid);
}
.tile-foot {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.tile-foot--price {
  font-size: 19px;
}
.accent {
  color: var(--brand);
}

/* 8. CHIFFRES CLÉS -------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: left;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat-label {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
}
.stat-note {
  margin-top: 5px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-3);
}

/* 9. PIED DE PAGE --------------------------------------------- */
.footer-grid {
  padding: 110px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.75fr;
  gap: 30px;
  align-items: stretch;
}

.footer-brand {
  border-radius: var(--r-card);
  background: linear-gradient(160deg, #ff8578 0%, var(--brand) 100%);
  padding: 34px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.footer-brand .brand-mark {
  background: rgba(255, 255, 255, 0.25);
  width: 34px;
  height: 34px;
}
.footer-brand .brand-mark i {
  width: 14px;
  height: 18px;
}
.footer-brand .brand-name {
  color: #fff;
  font-size: 30px;
}
.footer-pitch {
  margin-top: 30px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.footer-social > b {
  font-size: 16px;
  font-weight: 800;
}
.socials {
  display: flex;
  gap: 8px;
}
.social {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
.social:hover {
  color: var(--brand-dark);
}
.footer-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 34px;
}
.footer-copy {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.footer-links {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1.5px solid var(--brand-line-2);
  padding: 38px 40px;
}
.watermark {
  position: absolute;
  left: 24px;
  bottom: -34px;
  font-family: var(--font-display);
  font-size: 150px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #f7f5f4;
  user-select: none;
}
.footer-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-col-title {
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted-4);
}
.link-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 18px;
  font-weight: 700;
}
.link-list a {
  color: var(--ink);
}
.link-list a:hover {
  color: var(--brand);
}
.link-list a.is-brand {
  color: var(--brand);
}
.help-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.help-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.help-row:hover {
  color: var(--brand);
}
.help-row span:first-child {
  flex: 1;
  font-size: 19px;
  font-weight: 700;
}
.footer-address {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted-2);
}

/* CONNEXION ----------------------------------------------------
   Une colonne, des blocs de même hauteur et de même rayon.
--------------------------------------------------------------- */
.gate {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.gate-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 56px 24px 24px;
}
.gate-box {
  width: min(400px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gate-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 34px;
  text-align: center;
}
.gate-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gate-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.g-field {
  width: 100%;
  height: 60px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.g-field::placeholder {
  color: var(--muted-2);
  font-weight: 600;
}
.g-field:focus {
  outline: none;
  border-color: var(--brand-line);
  background: #fff;
}

.g-btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.g-btn--primary {
  background: var(--brand);
  color: #fff;
}
.g-btn--primary:hover {
  background: var(--brand-dark);
  color: #fff;
}
.g-btn--soft {
  background: var(--surface);
  color: var(--ink);
}
.g-btn--soft:hover {
  border-color: var(--line-2);
  color: var(--ink);
}
.g-btn .ico {
  font-size: 21px;
}
.g-mark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--brand);
}
.g-mark--in {
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
}

.gate-or {
  padding: 4px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
}
.gate-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.gate-switch button,
.gate-switch a {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}
.gate-switch button:hover,
.gate-switch a:hover {
  color: var(--brand);
}
.gate-legal {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted-2);
}
.gate-legal a {
  color: var(--muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gate-legal a:hover {
  color: var(--brand);
}

.modal-card .gate-head {
  margin-bottom: 22px;
}
.modal-card .gate-head h1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.modal-card .gate-switch {
  margin-top: 14px;
}

.gate-sent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  height: 60px;
  border-radius: var(--pill);
  background: var(--surface);
  font-size: 15.5px;
  font-weight: 700;
}
.gate-sent .ico {
  color: var(--muted-2);
}
.gate-sent button {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
  cursor: pointer;
}

.gate-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 24px 24px;
}
.gate-foot a,
.gate-foot span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.gate-foot a:hover {
  color: var(--brand);
}

@media (max-height: 700px) {
  .gate-stage {
    padding-top: 30px;
  }
  .gate-box {
    gap: 10px;
  }
  .gate-head {
    gap: 12px;
    margin-bottom: 20px;
  }
  .gate-head h1 {
    font-size: 22px;
  }
  .g-field,
  .g-btn,
  .gate-sent {
    height: 52px;
  }
  .gate-or {
    padding: 0;
  }
  .gate-switch {
    margin-top: 8px;
  }
}
@media (max-width: 640px) {
  .gate {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .gate-stage {
    padding: 40px 20px 24px;
    overflow: visible;
  }
  .gate-foot {
    gap: 12px 16px;
    padding: 0 20px 22px;
  }
  .gate .code-fields {
    gap: 8px;
  }
  .gate .code-input {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .gate .gate-sent {
    padding: 0 18px;
    font-size: 15px;
  }
}

/* pied de page sombre ------------------------------------------
   Un seul bloc encre : promesses, colonnes, mentions, signature.
--------------------------------------------------------------- */
.foot {
  position: relative;
  overflow: hidden;
  margin: 90px 0 26px;
  padding: 46px 48px 0;
  /* border-radius: var(--r-card); */
  background: #1a1715;
  color: #fff;
}

.foot-vows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding-bottom: 40px;
}
.foot-vow {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
  align-items: start;
}
.foot-vow .ico {
  font-size: 24px;
  color: var(--brand);
}
.foot-vow-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 99, 99, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.foot-vow b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.foot-vow-desc {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.56);
}

.foot-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.foot-cols {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 40px 0;
}
.foot-sig {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.foot-sig .brand-mark {
  background: rgba(255, 255, 255, 0.16);
}
.foot-sig .brand-name {
  color: #fff;
}
.foot-line {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.56);
  max-width: 280px;
}
.foot-socials {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.foot-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.foot-social:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.foot-social .ico {
  font-size: 18px;
  color: inherit;
}

.foot-col-title {
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.foot-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.foot-list a,
.foot-list span {
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.foot-list a:hover {
  color: #fff;
}
.foot-list .foot-note {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

.foot-bar {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
}
.foot-bar a,
.foot-bar span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.foot-bar a:hover {
  color: #fff;
}
.foot-picks {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.foot-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--pill);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.foot-pick:hover {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}
.foot-pick .ico {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.55);
}

.foot-mark {
  display: block;
  margin: 0 -48px -0.24em;
  font-family: var(--font-display);
  font-size: clamp(72px, 15.5vw, 232px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.055);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 1040px) {
  .foot-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .foot-sig {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .foot {
    padding: 32px 24px 0;
  }
  .foot-vows {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 28px;
  }
  .foot-cols {
    grid-template-columns: 1fr;
    padding: 28px 0;
  }
  .foot-picks {
    margin-left: 0;
  }
  .foot-mark {
    margin-left: -24px;
    margin-right: -24px;
  }
}

/* barre de raccourcis */
.quick-nav {
  padding: 44px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.quick {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 60px;
  padding: 0 24px 0 12px;
  border-radius: var(--pill);
  background: #fff;
  box-shadow: var(--sh-soft);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.quick:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(60, 30, 25, 0.3);
}
.quick.is-current {
  background: var(--brand-tint);
}

/* 10. PLACEHOLDERS IMAGES ------------------------------------- */
/* remplacer par une vraie image : <img class="ph-img" src="…" alt="…"> */
.ph {
  background: repeating-linear-gradient(45deg, #efe7e3 0 9px, #e6dcd7 9px 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #a2968f;
  text-align: center;
}
.ph--avatar {
  background: repeating-linear-gradient(45deg, #efe0db 0 8px, #e6d4ce 8px 16px);
}
.ph--gray {
  background: repeating-linear-gradient(45deg, #e7e3e0 0 7px, #ddd8d4 7px 14px);
  font-size: 9px;
  color: #9a938e;
}
.ph--green {
  background: repeating-linear-gradient(45deg, #e4ebe9 0 8px, #d8e2df 8px 16px);
}
.ph--sand {
  background: repeating-linear-gradient(45deg, #efe9dc 0 8px, #e5dccb 8px 16px);
}

/* tuiles : dégradé sombre + trame, pour que le texte blanc reste lisible */
.tile--rose {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #f6ded8 0 10px, #efd3cc 10px 20px);
}
.tile--mint {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #dce7e4 0 10px, #d0ddda 10px 20px);
}
.tile--sand {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #f0e7d6 0 10px, #e7dcc8 10px 20px);
}
.tile--stone {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #e9e1dc 0 10px, #dfd6d0 10px 20px);
}
.tile--sage {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #dee8e5 0 10px, #d2dedb 10px 20px);
}
.tile--clay {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    repeating-linear-gradient(45deg, #efe3dc 0 10px, #e6d7ce 10px 20px);
}

/* image réelle dans une tuile */
.tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: -1;
}

/* 11. UTILITAIRES -------------------------------------------- */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.row--between {
  justify-content: space-between;
}
.row--center {
  justify-content: center;
}
.row--end {
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.row--wrap {
  flex-wrap: wrap;
}
.grow {
  flex: 1;
  min-width: 0;
}
.center {
  text-align: center;
}
.mt-auto {
  margin-top: auto;
}
.nowrap {
  white-space: nowrap;
}
.mb-26 {
  margin-bottom: 26px;
}
.mb-48 {
  margin-bottom: 48px;
}
.baseline {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 12. APPARITION AU SCROLL ------------------------------------ */
[data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.22, 0.8, 0.28, 1),
    transform 0.8s cubic-bezier(0.22, 0.8, 0.28, 1);
}
[data-reveal].pre {
  opacity: 0;
  transform: translateY(30px);
}
[data-reveal].pre.in {
  opacity: 1;
  transform: none;
}

@media print {
  [data-reveal].pre {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal].pre {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover,
  .quick:hover {
    transform: none;
  }
}

/* 13. RESPONSIVE --------------------------------------------- */
@media (max-width: 1040px) {
  /* `minmax(0, 1fr)` et non `1fr` : le minimum implicite d'une piste
     `1fr` est `min-content`. Ces grilles passaient bien en une colonne
     sur téléphone, mais la colonne refusait de descendre sous la largeur
     de son contenu — « Mes revenus » s'étalait sur 650 px pour 390
     disponibles et la page défilait de côté. */
  .hero-grid,
  .msg-grid,
  .appt-grid,
  .cards-3,
  .stats,
  .footer-grid,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .session {
    flex-direction: column;
    align-items: stretch;
  }
  .session-media {
    width: 100%;
    height: 200px;
  }

  .navbar {
    flex-wrap: wrap;
    padding: 10px 12px;
    row-gap: 10px;
  }
  .navbar .nav-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
  }
  .brand {
    justify-content: flex-start;
  }

  .session-actions,
  .appt,
  .row--end,
  .row--wrap {
    flex-wrap: wrap;
  }
  .appt-body {
    flex: 1 0 100%;
  }

  .h1 {
    font-size: 40px;
  }
  .h2,
  .h2--44,
  .h2--40,
  .h2--30 {
    font-size: 30px;
  }
  .watermark {
    font-size: 96px;
  }
  .footer-links {
    padding: 30px 26px;
  }
  .section,
  .section--md,
  .section--lg {
    padding-top: 64px;
  }
  /* Repris après le groupe ci-dessus : un élément porte `.section` ET son
     modificateur, la règle la plus tardive l'emporte — sans ce rappel,
     l'écart réduit redeviendrait 64 px sur petit écran. */
  .section--xs {
    padding-top: 30px;
  }
  .hero-grid {
    padding-bottom: 72px;
  }
}

/* 14. MENU DES PAGES INTERNES --------------------------------
   Trois traitements possibles, à placer dans le .hero à la place
   du tableau de bord. Garder celui qui est validé.
------------------------------------------------------------- */

/* zone d'accueil du menu dans le hero */
.hero-menu {
  padding: 44px 0 64px;
}

/* A — pastilles (même vocabulaire que les raccourcis) */
.menu-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* B — onglets dans un rail blanc */
.navtabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--pill);
  background: #fff;
  box-shadow: var(--sh-nav);
  overflow-x: auto;
  scrollbar-width: none;
}
.navtabs::-webkit-scrollbar {
  display: none;
}
.navtab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 17px;
  border-radius: var(--pill);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}
.navtab:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.navtab.is-current {
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-brand-sm);
}
.navtab .badge--xs {
  background: var(--brand);
  color: #fff;
}
.navtab.is-current .badge--xs {
  background: rgba(255, 255, 255, 0.25);
}

/* C — cartes de menu (occupe la place du tableau de bord) */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 158px;
  padding: 22px;
  border-radius: var(--r-media);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.menu-card:hover {
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -18px rgba(60, 30, 25, 0.3);
}
.menu-card.is-current {
  background: var(--brand-tint);
}
.menu-card .badge {
  position: absolute;
  top: 18px;
  right: 18px;
}
.menu-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-card.is-current .menu-icon {
  background: #fff;
}
.menu-card-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.menu-card-note {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-4);
}

@media (max-width: 1040px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-menu {
    padding: 34px 0 48px;
  }
}
@media (max-width: 640px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* 15. BOÎTE DE RÉCEPTION -------------------------------------
   Module de messagerie : panneau de conversations + fil de
   discussion + panneau d'informations.
------------------------------------------------------------- */
.inbox {
  display: grid;
  /* Toujours trois pistes, même sans panneau info (la troisième à
     0px) : les navigateurs n'interpolent `grid-template-columns` que
     si le nombre de pistes ne change pas entre les deux états — deux
     pistes d'un côté et trois de l'autre ne peuvent que sauter d'un
     coup, vérifié à l'écran avant ce choix. Le fil de discussion
     s'élargit/se réduit donc avec le même tempo que `.info-panel`
     (voir plus bas) plutôt que de sauter au moment où il entre/sort
     du DOM. */
  grid-template-columns: 372px 1fr 0px;
  gap: 22px;
  align-items: stretch;
  transition: grid-template-columns 0.25s ease;
}
.inbox.has-info {
  grid-template-columns: 340px 1fr 320px;
}
@media (prefers-reduced-motion: reduce) {
  .inbox {
    transition: none;
  }
}

.inbox-panel {
  display: flex;
  flex-direction: column;
  height: 760px;
  overflow: hidden;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.inbox-me {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px 16px;
}
.inbox-me b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin: 0 22px 16px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--muted-4);
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.search input::placeholder {
  color: var(--muted-6);
}

.inbox-tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-2);
}
.inbox-tab {
  position: relative;
  flex: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted-4);
  cursor: pointer;
}
.inbox-tab:hover {
  color: var(--ink);
}
.inbox-tab.is-current {
  color: var(--brand);
}
.inbox-tab.is-current::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}
.inbox-tab .badge--xs {
  background: var(--brand);
  color: #fff;
}

.inbox-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.pane {
  display: none;
}
.pane.is-current {
  display: block;
}

.subtabs {
  display: flex;
  gap: 6px;
  padding: 4px 4px 10px;
}
.subtab {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--muted-4);
  cursor: pointer;
}
.subtab.is-current {
  background: var(--brand-soft);
  color: var(--brand);
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  color: var(--ink);
}
.friend-row:hover {
  background: var(--surface);
  color: var(--ink);
}
.friend-row b {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 700;
}
.friend-action {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
  white-space: nowrap;
}

.dot-offline {
  background: var(--muted-5) !important;
}

/* fil de discussion */
.chat--app {
  position: relative;
  height: 760px;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.chat--app .chat-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-2);
}
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /* Barre de défilement fine, de la couleur des traits du site : celle du
     système faisait une bande grise large en travers de la conversation.
     Firefox n'a que ces deux propriétés ; WebKit prend les règles ci-
     dessous. Même dessin que la barre du panneau de notifications. */
  scrollbar-width: thin;
  scrollbar-color: #DCD6D1 transparent;
}

.chat-scroll::-webkit-scrollbar {
  width: 10px;
}

.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* La bordure blanche amincit visuellement le curseur sans réduire la
   surface qu'on peut attraper à la souris. */
.chat-scroll::-webkit-scrollbar-thumb {
  border: 3px solid #fff;
  border-radius: 99px;
  background: #dcd6d1;
}

.chat-scroll:hover::-webkit-scrollbar-thumb {
  background: #c4bdb7;
}

.msg-day {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0;
}
.msg-day::before,
.msg-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.msg-day span {
  padding: 5px 13px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted-4);
}

.msg-sender {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--muted-2);
}
.msg-sender .avatar {
  width: 30px;
  height: 30px;
}

.msg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 76%;
}
.msg--in {
  align-self: flex-start;
  align-items: flex-start;
}
.msg--out {
  align-self: flex-end;
  align-items: flex-end;
}
.msg .bubble {
  max-width: 100%;
}
.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-5);
}

.msg-more {
  position: absolute;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-chip-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.msg--in .msg-more {
  right: -36px;
}
.msg--out .msg-more {
  left: -36px;
}
.msg:hover .msg-more,
.msg-more.is-open {
  opacity: 1;
}

.msg-menu {
  position: absolute;
  z-index: 5;
  top: 40px;
  min-width: 210px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 22px 44px -14px rgba(60, 30, 25, 0.34);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.msg--in .msg-menu {
  left: 40px;
}
.msg--out .msg-menu {
  right: 40px;
}
.msg-menu.is-open {
  display: flex;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.menu-item:hover {
  background: var(--surface);
  color: var(--ink);
}
.menu-item--danger {
  color: var(--brand);
}

/* bulles spéciales */
.bubble--audio {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
}
.audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.audio-track {
  position: relative;
  width: 148px;
  height: 6px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.45);
}
.audio-track i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: var(--pill);
  background: #fff;
}
.audio-track b {
  position: absolute;
  top: -5px;
  left: 38%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}
.audio-time {
  font-size: 13.5px;
  font-weight: 800;
}

.bubble--attach {
  padding: 8px;
}
.attach-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.attach-name {
  font-size: 15.5px;
  font-weight: 800;
}
.attach-size {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-4);
}
/* `display: block` : la maquette ne le précise pas parce qu'elle ne pose
   cette classe que sur un `<div>` (galerie d'états). La boîte de
   réception en fait un lien cliquable (`<a>`), qui sans ça ignorerait
   la largeur et la hauteur. */
.attach-img {
  display: block;
  width: 210px;
  height: 150px;
  border-radius: var(--r-xs);
  overflow: hidden;
}

/* zone de saisie */
.composer--app {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  gap: 12px;
  margin: 0 20px 20px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
}
.composer--app input {
  height: 30px;
  padding: 10px 20px;
  background-color: #fff;
}
.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.hint--sending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.typing-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 8px;
}
.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: typingDotBounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typingDotBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span {
    animation: none;
    opacity: 0.8;
  }
}
.tool {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  cursor: pointer;
}
.tool:hover {
  background: #fff;
  color: var(--brand);
}
.tool.is-current {
  background: #fff;
  color: var(--brand);
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 11px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.tool:hover .tooltip,
.tooltip.is-shown {
  opacity: 1;
}

/* sélecteur d'émojis — repris de /messenger (voir le <script type="module">
   et le second IIFE dans inbox.blade.php) : ce conteneur ne fait plus que
   positionner l'élément personnalisé `<emoji-picker>`, qui dessine sa
   propre carte (fond, rayon, ombre) dans son propre DOM fermé. Mêmes
   coordonnées que l'ancien panneau décoratif, pour ne pas déplacer le
   bouton qui l'ouvre. Les propriétés personnalisées ci-dessous traversent
   le Shadow DOM (documentées par la bibliothèque) pour teinter le
   sélecteur aux couleurs de la marque. */
.emoji-panel {
  position: absolute;
  right: 24px;
  bottom: 124px;
  z-index: 6;
  /* Coin le plus proche du bouton déclencheur : mesuré sur le rendu
     réel (le bouton #emoji-toggle tombe à ~37% de la largeur du
     panneau depuis sa gauche, malgré le panneau posé via `right:24px`)
     — plus proche du bord gauche que du droit, d'où « bottom left »
     plutôt que le coin où le panneau est lui-même ancré. */
  transform-origin: bottom left;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
/* État stable une fois ouvert — pas d'animation ici, juste le résultat
   final que `.is-opening` anime vers puis relâche. */
.emoji-panel.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* Ouverture / fermeture « scale + fade » : deux noms de keyframes
   distincts plutôt qu'un seul rejoué avec `direction: reverse` — un
   même nom remis à l'envers ne relance pas de façon fiable une
   animation gelée par `fill-mode: both/forwards` (déjà rencontré sur
   l'icône de fermeture du popup de connexion). `apresAnimation()` (JS)
   retire toujours la classe avant de la reposer, donc chaque
   déclenchement repart bien d'un état neuf. */
@keyframes emojiPanelIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes emojiPanelOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}
.emoji-panel.is-opening {
  pointer-events: auto;
  animation: emojiPanelIn 0.22s ease-out forwards;
}
.emoji-panel.is-closing {
  pointer-events: none;
  animation: emojiPanelOut 0.22s ease-in forwards;
}
@media (prefers-reduced-motion: reduce) {
  .emoji-panel.is-opening,
  .emoji-panel.is-closing {
    animation: none;
  }
}
.emoji-panel emoji-picker {
  --num-columns: 8;
  --emoji-size: 1.375rem;
  --indicator-color: var(--brand);
  --input-border-color: var(--brand);
  --input-font-color: var(--dark, #1c1c28);
  --category-font-color: var(--dark, #1c1c28);
  --background: #fff;
  --border-color: #eceef2;
  --outline-color: var(--brand);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 20, 43, 0.16);
}

/* panneau d'informations */
.info-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 760px;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--sh-card);
  /* Glisse depuis la droite + fondu, à l'ouverture comme à la fermeture
     (voir le clic sur `[data-toggle-info]` dans inbox.blade.php, qui
     retarde l'appel serveur `toggleInfo` le temps que `.is-closing`
     joue). Deux noms de keyframes distincts plutôt qu'un seul rejoué en
     `direction: reverse` : déjà rencontré sur le popup de connexion et
     le sélecteur d'émojis, une même animation remise à l'envers ne
     relance pas de façon fiable une fois gelée par `fill-mode`. La
     version d'entrée n'a pas besoin de classe : un élément qui vient
     d'être inséré avec `animation` la joue de lui-même. */
  animation: infoPanelIn 0.25s ease-out;
}
.info-panel.is-closing {
  animation: infoPanelOut 0.25s ease-in forwards;
  pointer-events: none;
}
@keyframes infoPanelIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes infoPanelOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .info-panel,
  .info-panel.is-closing {
    animation: none;
  }
}
.info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.info-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}
.info-avatar .dot-online,
.info-avatar .dot-offline {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #fff;
  /* Cette taille du point n'avait jamais reçu de couleur : `.info-panel`
     n'était encore branché nulle part avant la boîte de réception. */
  background: var(--green);
}
.info-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-title {
  font-size: 16px;
  font-weight: 800;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 70px;
  padding: 0 16px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.info-row:hover {
  background: var(--surface-2);
  color: var(--ink);
}
/* Ligne choisie. `:has()` permet de teinter la ligne depuis l'état de la
   case qu'elle contient, sans classe posée par le JS : le style suit donc
   la sélection même quand Livewire réécrit le fragment. */
.info-row:has(input:checked) {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand-line-2);
  color: var(--ink);
}
.info-row:has(input:checked):hover {
  background: var(--brand-tint);
}
.info-row--danger {
  color: var(--brand);
}
.info-divider {
  height: 1px;
  background: var(--line-2);
}

.switch {
  margin-left: auto;
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: var(--pill);
  background: #fff;
  border: 1.5px solid var(--line-2);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch i,
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--line-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: left 0.2s cubic-bezier(0.22, 0.8, 0.28, 1), background 0.2s ease;
}
.switch:hover {
  border-color: var(--muted-5);
}
.switch.is-on {
  background: var(--brand);
  border-color: var(--brand);
}
.switch.is-on i,
.switch.is-on::after {
  left: 25px;
  background: #fff;
}

.files-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.file-tile {
  height: 74px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-4);
  font-size: 10px;
  font-weight: 700;
}

/* état vide */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}
.chat-empty .info-avatar {
  width: 116px;
  height: 116px;
  box-shadow: 0 0 0 8px #fff, var(--sh-card);
}
.chat-empty p {
  max-width: 380px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* galerie d'états */
.gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.gal-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-media);
  border: 1.5px dashed var(--line-3);
}
.gal-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.gal-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 120px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
}

@media (max-width: 1040px) {
  .inbox,
  .inbox.has-info {
    grid-template-columns: 1fr;
  }
  .inbox-panel,
  .chat--app,
  .info-panel {
    height: auto;
    max-height: 640px;
  }
  .gal {
    grid-template-columns: 1fr;
  }
  .msg {
    max-width: 88%;
  }
  .msg--in .msg-more,
  .msg--out .msg-more {
    display: none;
  }
}

/* 16. LISTES AVEC MENU (Favoris, etc.) -----------------------
   Ligne .appt + menu contextuel générique.
------------------------------------------------------------- */
.has-menu {
  position: relative;
}
.rowmenu {
  position: absolute;
  top: calc(100% - 10px);
  right: 10px;
  z-index: 5;
  min-width: 224px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 22px 44px -14px rgba(60, 30, 25, 0.34);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Ouverture/fermeture animées — la maquette statique n'anime jamais ce
     changement d'état, elle n'a qu'à en montrer les deux (via .is-open),
     jamais la transition entre les deux. opacity/transform plutôt que
     display:none, pour pouvoir transitionner ; pointer-events évite que
     le menu masqué intercepte des clics pendant qu'il est invisible. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.32, 1),
    visibility 0.16s;
}
.rowmenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .rowmenu {
    transition: opacity 0.12s ease, visibility 0.12s;
    transform: none;
  }
  .rowmenu.is-open {
    transform: none;
  }
}

.thumb--lg {
  width: 68px;
  height: 68px;
  border-radius: var(--r-sm);
}

.meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 5px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.meta-list span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.meta-list b {
  font-weight: 800;
  color: var(--ink);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 40px;
  text-align: center;
  border-radius: var(--r-media);
  border: 2px dashed var(--line-3);
  margin-top: 20px;
}
.empty p {
  max-width: 420px;
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}
.empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 17. TABLEAUX & FICHE DE LITIGE ------------------------------ */
.table-card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.table-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 26px;
}
.table-scroll {
  overflow-x: auto;
}

.select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: var(--surface);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}
.tbl th {
  text-align: left;
  padding: 15px 20px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted-4);
}
.tbl th:first-child,
.tbl td:first-child {
  padding-left: 26px;
}
.tbl th:last-child,
.tbl td:last-child {
  padding-right: 26px;
  text-align: right;
}
.tbl td {
  padding: 18px 20px;
  border-top: 1px solid var(--line-2);
  vertical-align: middle;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.tbl tbody tr:hover td {
  background: var(--surface);
}

.cell-title {
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.cell-id {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-5);
}
.cell-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cell-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--pill);
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--muted-2);
  white-space: nowrap;
}
.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-5);
}
.status--live {
  background: #eaf6ef;
  color: #1e7a4e;
}
.status--live i {
  background: var(--green);
}
.status--wait {
  background: #fdf4e5;
  color: #8a5d00;
}
.status--wait i {
  background: var(--gold);
}
.status--brand {
  background: var(--brand-soft);
  color: var(--brand);
}
.status--brand i {
  background: var(--brand);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* fiche d'un litige */
.dispute-grid {
  display: grid;
  grid-template-columns: 384px 1fr;
  gap: 22px;
  align-items: stretch;
}
.kv {
  display: flex;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line-2);
}
.kv:first-of-type {
  border-top: 0;
}
.kv-k {
  width: 108px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted-4);
}
.kv-v {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

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

/* 18. RÉSERVATIONS : agenda & semaine ------------------------- */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border-radius: var(--pill);
  background: var(--surface);
  max-width: 100%;
}
.seg {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--pill);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted-2);
  white-space: nowrap;
  cursor: pointer;
}
.seg:hover {
  color: var(--ink);
}
.seg.is-current {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-chip-sm);
}
.seg .badge--xs {
  background: var(--brand);
  color: #fff;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--sh-soft);
  margin-bottom: 22px;
}
.daynav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--pill);
  background: var(--surface);
}
.daynav b {
  padding: 0 8px;
  font-size: 15.5px;
  font-weight: 800;
  white-space: nowrap;
}
.daynav .iconbtn--plain {
  width: 40px;
  height: 40px;
  background: #fff;
}
.range {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* bande de la semaine */
.weekstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.daycol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.daycol.is-today {
  background: var(--brand-tint);
}
.daycol-name {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.daycol.is-today .daycol-name {
  color: var(--brand);
}
.daycol-num {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: var(--r-xs);
  background: #fff;
  box-shadow: var(--sh-soft);
  color: var(--ink);
  cursor: pointer;
}
.slot:hover {
  color: var(--ink);
  transform: translateY(-2px);
}
.slot {
  transition: transform 0.18s ease;
}
.slot-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
}
.slot-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
}
.slot-who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}
.slot-who .avatar {
  width: 22px;
  height: 22px;
}
.slot--past {
  opacity: 0.68;
}
.slot--ghost {
  min-height: 58px;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 1.5px dashed var(--line-3);
  color: var(--muted-5);
  font-size: 13px;
  font-weight: 700;
}
.slot--ghost:hover {
  border-color: var(--brand-line);
  color: var(--brand);
  transform: none;
}

/* agenda en liste */
.agenda-day {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
.agenda-day + .stack {
  margin-bottom: 26px;
}
.agenda-date {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.agenda-count {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted-4);
  white-space: nowrap;
}
.agenda-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.time-tile {
  width: 82px;
  height: 70px;
  border-radius: var(--r-sm);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}
.time-tile b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.time-tile span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted-4);
}

@media (max-width: 1040px) {
  .weekstrip {
    grid-template-columns: repeat(2, 1fr);
  }
  .daycol {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .weekstrip {
    grid-template-columns: 1fr;
  }
}

/* 19. MY LEARNING : parcours & leçons ------------------------- */
.lesson {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.lesson:hover {
  color: var(--ink);
}
.lesson.is-current {
  background: var(--brand-tint);
}
.lesson.is-locked {
  opacity: 0.55;
}
.lesson-num {
  width: 26px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--muted-4);
}
.lesson-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--muted-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lesson.is-done .lesson-mark {
  background: var(--green);
  color: #fff;
}
.lesson.is-current .lesson-mark {
  background: var(--brand);
  color: #fff;
}
.lesson-body {
  flex: 1;
  min-width: 0;
}
.lesson-title {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lesson-meta {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-2);
}

.module-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.module-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.progress-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-line .bar {
  flex: 1;
}
.progress-value {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

/* 28. CODE À USAGE UNIQUE ------------------------------------- */
.code-fields {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.code-input {
  width: 52px;
  height: 62px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  text-align: center;
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  outline: none;
}
.code-input:focus {
  background: #fff;
  border-color: var(--brand);
}
.code-input.is-filled {
  background: #fff;
  border-color: var(--brand-line);
}

.modal-card:has(.modal-back) .modal-close {
  left: auto;
  right: 18px;
}

.modal-back {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.modal-back:hover {
  background: var(--surface);
}

.input-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.input-wrap {
  position: relative;
  display: block;
}
.input-wrap .input {
  padding-right: 52px;
}

/* 27. FENÊTRE MODALE (connexion) ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 28, 30, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal.is-open {
  display: flex;
  animation: popScrim 0.28s ease both;
}
.modal.is-closing {
  display: flex;
  animation: popScrim 0.22s ease both reverse;
  pointer-events: none;
}
.modal.is-open .modal-card {
  animation: popCardIn 0.4s cubic-bezier(0.22, 1, 0.32, 1) both;
}
.modal.is-closing .modal-card {
  animation: popCardOut 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 452px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 34px 30px 28px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 44px 90px -28px rgba(60, 30, 25, 0.45);
  text-align: center;
  animation: paneIn 0.34s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
.modal-close {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.modal-close:hover {
  background: var(--surface);
}
.modal-avatar {
  width: 92px;
  height: 92px;
  border-radius: 26px;
  margin: 0 auto 14px;
}
.modal-title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.modal-sub {
  margin: 6px 0 22px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--muted);
}
.modal-legal {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
  line-height: 1.5;
}
.modal-legal a {
  text-decoration: underline;
}
.modal-switch {
  margin-top: 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.modal-switch a {
  font-weight: 800;
}

.or-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-4);
}
.or-line::before,
.or-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.brandmark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* 29. ESPACE TUTEUR ------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-media);
  background: #fff;
  box-shadow: var(--sh-soft);
}
.kpi-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.kpi-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
}
.kpi--brand {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-brand-sm);
}
.kpi--brand .kpi-ico {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.kpi--brand .kpi-label {
  color: rgba(255, 255, 255, 0.9);
}

.chart {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 220px;
  padding-top: 10px;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--grad-bar);
  transition: opacity 0.18s ease;
}
.chart-col:hover .chart-bar {
  opacity: 0.75;
}
.chart-x {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-5);
}

.payout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.payout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border-radius: var(--r-media);
  border: 1.5px solid var(--line);
  background: #fff;
  text-align: center;
}
.payout-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.payout b {
  font-size: 17px;
  font-weight: 800;
}
.payout span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-4);
}

.mcal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.mcal-head {
  padding: 8px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.mcal-day {
  min-height: 96px;
  padding: 10px;
  border-radius: var(--r-xs);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.mcal-day:hover {
  background: #fff;
  box-shadow: var(--sh-soft);
}
.mcal-day.is-out {
  opacity: 0.38;
  cursor: default;
}
.mcal-day.is-out:hover {
  background: var(--surface);
  box-shadow: none;
}
.mcal-day.is-today {
  background: var(--brand-tint);
}
.mcal-num {
  font-size: 15px;
  font-weight: 800;
}
.mcal-day.is-today .mcal-num {
  color: var(--brand);
}
.mcal-tag {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted-2);
}
.mcal-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--green);
}
.mcal-bar--full {
  background: var(--brand);
}

.subj-group {
  border-radius: var(--r-card);
  border: 1.5px solid var(--line);
  /* Pas de overflow:hidden ici : le seul rôle qu'il jouait était de
     rogner le fond de `.subj-head` aux coins arrondis de la carte — un
     `border-radius` posé directement dessus fait la même chose sans
     emporter avec lui le `.rowmenu` (position:absolute) d'une ligne,
     qui se retrouvait coupé net dès qu'un groupe n'avait que 1-2
     sujets et que le menu s'ouvrait trop près du bas de la carte. */
}
.subj-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--r-card) var(--r-card);
  font-size: 18px;
  font-weight: 800;
}
.subj-row {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-2);
}
.subj-row .handle {
  color: var(--muted-5);
  cursor: grab;
}
.subj-body {
  flex: 1;
  min-width: 0;
}
.subj-name {
  font-size: 17px;
  font-weight: 800;
}
.subj-price {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--brand);
}
.subj-desc {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-2);
}
.subj-formats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}
.subj-formats .status {
  height: 26px;
  padding: 0 12px;
  font-size: 12.5px;
}

@media (max-width: 1040px) {
  .mcal {
    grid-template-columns: repeat(2, 1fr);
  }
  .mcal-head {
    display: none;
  }
  .mcal-day.is-out {
    display: none;
  }
}

/* 25. FIL D'ARIANE -------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px 6px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted-2);
}
.crumbs a {
  color: var(--muted-2);
}
.crumbs a:hover {
  color: var(--brand);
}
.crumbs .ico {
  font-size: 18px;
  color: var(--muted-5);
}
.crumbs b {
  color: var(--ink);
}

/* 24. ANIMATIONS D'INTERFACE ---------------------------------- */
@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes selPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.975);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes chipIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pane.is-current {
  /* `backwards` seul, pas `both` : la moitié « forwards » de `both`
     laisse l'animation active indéfiniment après ses 0.4s (même si sa
     dernière image vaut `transform: none`) — et un `transform` en
     cours d'animation crée un contexte d'empilement, même sur une
     valeur identité. Ça enfermait le z-index de tout ce qui s'ouvre en
     `position: absolute` à l'intérieur d'un onglet (ex. `.rowmenu` sur
     l'onglet Sujets), qui perdait alors face au pied de page. `backwards`
     garde l'état de départ avant que l'animation démarre (pas de flash
     de contenu non animé), mais rend la main aux styles normaux dès
     que les 0.4s sont passées. */
  animation: paneIn 0.4s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}
.subject-card.is-selected,
.slot-card.is-selected {
  animation: selPulse 0.32s ease;
}
.stepper .step {
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.step-num {
  transition: background 0.25s ease, color 0.25s ease;
}
.stepper .step.is-done .step-num .ico {
  animation: chipIn 0.3s ease both;
}
.subject-card,
.slot-card,
.choicechip,
.info-row,
.radio {
  transition: background 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.choicechip:active,
.subject-card:active,
.slot-card:active {
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .pane.is-current,
  .subject-card.is-selected,
  .slot-card.is-selected,
  .step.is-done .step-num .ico {
    animation: none;
  }
}

.mentor-card {
  position: sticky;
  top: 20px;
  padding: 16px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--sh-card);
}
.mentor-photo {
  position: relative;
  height: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.badge-verified {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fav-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(28, 28, 30, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fav-btn.is-on {
  background: var(--brand);
}
.mentor-name {
  padding: 18px 6px 16px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mentor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 6px 6px;
  border-top: 1.5px dashed var(--line-3);
}
.mentor-stat b {
  display: block;
  font-size: 19px;
  font-weight: 800;
}
.mentor-stat span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-4);
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.subject-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.subject-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  color: var(--ink);
}
.subject-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.subject-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.subject-card.is-off {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--surface);
}
.subject-card--ask {
  background: var(--surface);
  border-style: dashed;
}
.subject-card--ask .ico {
  color: var(--muted-4);
}
.subject-card--ask:hover {
  border-color: var(--brand-line);
  background: #fff;
}
.subject-card--ask.is-selected {
  background: var(--brand-tint);
  border-style: solid;
}
.subject-card--ask.is-selected .ico,
.subject-card--ask.is-selected .subject-next {
  color: var(--brand);
}
.subject-card.is-off:hover {
  transform: none;
  border-color: var(--line);
}
.daterange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
}
.is-hidden {
  display: none !important;
}
.slot-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.slot-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  color: var(--ink);
}
.slot-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.slot-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1.5px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-2);
}
.slot-card.is-selected .slot-tag {
  border-color: var(--brand-line);
  color: var(--brand);
}

@media (max-width: 1040px) {
  .mentor-card {
    position: static;
  }
  .subject-grid,
  .slot-grid {
    grid-template-columns: 1fr;
  }
}

/* 22. FICHE MENTOR & RÉSERVATION ------------------------------ */
.slot--hour {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 15px;
  font-weight: 800;
}
.slot--hour.is-selected {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-brand-sm);
}
.slot--full {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 1.5px dashed var(--line-3);
  color: var(--muted-5);
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
}
.slot--full:hover {
  transform: none;
  border-color: var(--line-3);
  color: var(--muted-5);
}

.mentor-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 26px;
  align-items: start;
}

.review {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
}
.review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.review-text {
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.stars--sm {
  gap: 2px;
}
.stars--sm .star {
  width: 24px;
  height: 24px;
  background: none;
}
.stars--sm .star .ico {
  font-size: 18px;
}
.stars--sm .star.is-on {
  background: none;
  color: var(--gold);
}

.price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
}
.price-line span:first-child {
  color: var(--muted-2);
}
.price-total {
  font-size: 22px;
  font-weight: 800;
}

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

/* 21. AVIS APRÈS SÉANCE --------------------------------------- */
.stars {
  display: flex;
  gap: 8px;
}
.star {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted-5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.star .ico {
  font-size: 27px;
}
.star.is-on {
  background: #fdf4e5;
  color: var(--gold);
}
.stars-note {
  font-size: 17px;
  font-weight: 800;
  align-self: center;
}

.choicechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.choicechip.is-on {
  background: var(--brand-tint);
  /* Sur la pastille rose, le corail de marque tombait à 2,7:1 — et c'est un
     montant qu'on y lit. */
  color: var(--brand-texte);
}

/* Variante carte : même bouton, même état `.is-on`, mais présenté comme
   les cartes de matière (`.subject-card`) — icône au-dessus du libellé,
   bordure plutôt qu'un simple fond de pastille. Réservée aux endroits
   qui le demandent (`.tagchips--cards`) pour ne pas changer les autres
   `.tagchips` (langues, matières...) qui restent des pastilles. */
.tagchips--cards {
  gap: 12px;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}
.choicechip--card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  height: auto;
  min-width: 168px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: #fff;
  text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease,
    background 0.18s ease;
}
.choicechip--card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
}
.choicechip--card.is-on {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.choicechip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted-3);
}
.choicechip--card.is-on .choicechip-icon {
  background: #fff;
  color: var(--brand);
}

.recap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: var(--r-xs);
  background: var(--surface);
}

/* 20. FORMULAIRES & ASSISTANT (Mon profil) -------------------- */
.wizard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.stepper .step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 9px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--muted-2);
  font-size: 15.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--muted-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.stepper .step i {
  font-style: normal;
  margin-left: 4px;
  color: var(--brand);
}
.stepper .step.is-current i {
  color: #fff;
}
.stepper .step.is-current {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand-sm);
}
.stepper .step.is-current .step-num {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.stepper .step.is-done {
  background: var(--brand-soft);
  color: var(--brand);
}
.stepper .step.is-done .step-num {
  background: var(--brand);
  color: #fff;
}
.stepper .step:disabled,
.stepper .step[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.stepper .step:disabled:hover,
.stepper .step[aria-disabled="true"]:hover {
  background: var(--surface);
  color: var(--muted-2);
}
.step-line {
  flex: 1;
  min-width: 16px;
  height: 2px;
  background: var(--line-2);
}

.form-head {
  margin-bottom: 6px;
}
.form-head p {
  margin: 6px 0 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
.form-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.label {
  font-size: 15px;
  font-weight: 800;
}
.label i {
  color: var(--brand);
  font-style: normal;
}
.hint {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}

.input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: var(--r-xs);
  border: 1.5px solid transparent;
  background: var(--surface);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}
.input::placeholder {
  color: var(--muted-6);
  font-weight: 600;
}
.input:focus {
  background: #fff;
  border-color: var(--brand-line);
}
textarea.input {
  height: auto;
  min-height: 128px;
  padding: 16px 18px;
  line-height: 1.5;
  resize: vertical;
}
select.input {
  appearance: none;
  cursor: pointer;
}
.select-wrap {
  position: relative;
}
.select-wrap .ico {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-4);
}

.radio-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--surface);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}
.radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.radio:has(input:checked) {
  background: var(--brand-tint);
  color: var(--brand);
}

.tagchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tagchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px 0 15px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14.5px;
  font-weight: 800;
}
.tagchip button {
  display: flex;
  color: inherit;
}

.drop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-xs);
  border: 2px dashed var(--line-3);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.drop:hover {
  border-color: var(--brand-line);
  background: #fff;
  color: var(--ink);
}
.drop-ico {
  width: 52px;
  height: 52px;
  border-radius: var(--r-xs);
  background: #fff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drop b {
  display: block;
  font-size: 16px;
  font-weight: 800;
}
.drop span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}

.filerow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: 15.5px;
  font-weight: 700;
}

/* éditeur de texte enrichi ------------------------------------- */
.rte {
  border-radius: var(--r-xs);
  background: var(--surface);
  overflow: hidden;
}
.rte-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--line);
}
.rte-bar button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rte-bar button:hover {
  background: #fff;
  color: var(--ink);
}
.rte-bar .ico {
  font-size: 20px;
}
.rte-size {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: auto !important;
  padding: 0 8px;
  font-size: 14.5px !important;
}
.rte-sep {
  width: 1.5px;
  height: 22px;
  background: var(--line-2);
  margin: 0 6px;
}
.rte-area {
  padding: 18px 22px;
  min-height: 150px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.rte-area:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: #fff;
}
.rte-area p {
  margin: 0 0 12px;
}
.rte-area p:last-child {
  margin: 0;
}
.rte-area ul {
  margin: 0;
  padding-left: 22px;
}
.rte-foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}
.rte-foot .err {
  color: var(--brand);
  font-weight: 800;
}

/* ligne réordonnable (objectifs, éléments listés) --------------- */
.objrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.objrow .handle {
  color: var(--muted-5);
  cursor: grab;
}
.objrow .input {
  height: 50px;
}

/* accordéon (FAQ) --------------------------------------------- */
/* ==========================================================================
   L'ACCORDÉON — le style de la fiche mentor
   --------------------------------------------------------------------------
   Repris de mew_dash/faq-mentor.html, comme sur /mentor/{slug}, les pages
   vitrines, /trouver-un-mentor et l'accueil. Seule la fiche d'un cours s'en
   sert ici, pour ses questions fréquentes.

   Le numéro vient d'un compteur CSS : le poser dans le balisage obligerait
   à le tenir à jour à chaque question ajoutée ou retirée.
   ========================================================================== */
.acc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: acc-faq;
}

.acc-item {
  counter-increment: acc-faq;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #F0EBE7;
  overflow: hidden;
  transition: box-shadow .22s ease, background .22s ease;
}

.acc-item.is-open {
  background: #F9F7F5;
  box-shadow: inset 0 0 0 1.5px #FFD3D3;
}

.acc-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.acc-head::before {
  content: counter(acc-faq, decimal-leading-zero);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #F5F0EF;
  color: #5F5E64;
  font-size: 13.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}

.acc-item.is-open .acc-head::before {
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
}

/* La question n'est jamais tronquée : elle passe à la ligne. */
.acc-head .grow {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.4;
  color: #1C1C1E;
  text-wrap: pretty;
}

/* Le chevron du balisage pointe à DROITE : on le couche vers le bas, et on
   le retourne à l'ouverture. */
.acc-head .ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F5F0EF;
  color: #1C1C1E;
  font-size: 21px;
  transform: rotate(90deg);
  transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.22, .9, .24, 1);
}

.acc-head:hover .ico { background: #FFF1F1; color: #C0392B; }

.acc-item.is-open .acc-head .ico {
  background: #1C1C1E;
  color: #fff;
  transform: rotate(270deg);
}

.acc-body {
  padding: 0 18px 20px 64px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #5F5E64;
  text-wrap: pretty;
}

.acc-item:not(.is-open) .acc-body {
  display: none;
}

@media (max-width: 520px) {
  .acc-body { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-item, .acc-head::before, .acc-head .ico { transition: none; }
}

.banner {
  display: block;
  padding: 16px 20px;
  border-radius: var(--r-xs);
  background: var(--brand-tint);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.banner .ico {
  margin-right: 10px;
  vertical-align: -4px;
  color: var(--brand);
}
.banner--ok {
  background: #eaf6ef;
}
.banner--ok .ico {
  color: var(--green);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
}
.check .ico {
  color: var(--muted-5);
}
.check.is-done .ico {
  color: var(--green);
}
.check.is-done {
  color: var(--muted-2);
}

@media (max-width: 1040px) {
  .wizard-grid {
    grid-template-columns: 1fr;
  }
  .step-line {
    display: none;
  }
}

@media (max-width: 640px) {
  .h1 {
    font-size: 32px;
  }
  .h2,
  .h2--44,
  .h2--40,
  .h2--30 {
    font-size: 25px;
  }
  .page {
    padding: 10px 10px 0;
  }
  .hero {
    border-radius: 26px;
  }
  .card,
  .panel,
  .conv-list,
  .chat,
  .footer-brand,
  .footer-links {
    padding: 20px;
  }
  .stat-num {
    font-size: 42px;
  }
}

/* 30. MENU PLEIN ÉCRAN — ÉTAT CONNECTÉ ------------------------
   Même coquille que le menu du site public (croix + « Menu »,
   logo centré, actions à droite), mais la colonne de liens
   reprend les entrées de l'espace connecté.
   S'ouvre avec [data-sheet-open] comme les autres calques.
------------------------------------------------------------- */
.navsheet {
  background: rgba(24, 22, 20, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.navsheet-card {
  position: relative;
  width: 850px;
  height: 550px;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  background: #fff;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(24, 22, 20, 0.4);
  transform: scale(0.99) translateY(10px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.28, 1),
    opacity 0.24s ease;
}
.sheet.is-open .navsheet-card {
  transform: none;
  opacity: 1;
}

.navsheet-top {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
}
.navsheet-top .brand {
  justify-self: center;
}
.navsheet-top .nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.navsheet-shut {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.navsheet-shut i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.18s ease;
}
.navsheet-shut i .ico {
  font-size: 24px;
}
.navsheet-shut b {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.navsheet-shut:hover i {
  filter: brightness(0.94);
}

.navsheet-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  padding: 2px 26px 22px;
}
.navsheet-left {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.navsheet-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.navsheet-list a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  border-radius: var(--r-card);
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.2s ease,
    transform 0.22s cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 0.22s ease,
    color 0.2s ease;
  animation: navcardIn 0.42s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
/* le halo corail se déploie du coin de l'icône au survol */
.navsheet-list a::before {
  content: "";
  position: absolute;
  left: -30%;
  top: -70%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-tint);
  transform: scale(0);
  transform-origin: 30% 70%;
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.navsheet-list a::before {
  z-index: 0;
}
.navsheet-list a > * {
  position: relative;
  z-index: 1;
}
.navsheet-name {
  display: block;
}
.navsheet-list a .iconbtn {
  margin-bottom: auto;
  transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.28, 1),
    border-color 0.2s ease;
}
.navsheet-list a .navsheet-go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease,
    transform 0.22s cubic-bezier(0.22, 0.8, 0.28, 1);
}

.navsheet-list a:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(24, 22, 20, 0.3);
}
.navsheet-list a:hover::before {
  transform: scale(1);
}
.navsheet-list a:hover .iconbtn {
  transform: scale(1.06) rotate(-4deg);
  border-color: var(--brand);
}
.navsheet-list a:hover .navsheet-go {
  opacity: 1;
  transform: none;
}

.navsheet-list a.is-current {
  border-color: var(--brand);
  color: var(--brand);
}
.navsheet-list a.is-current::before {
  transform: scale(1);
}
.navsheet-list a.is-current .iconbtn {
  border-color: var(--brand);
}
.navsheet-list a.is-current .navsheet-go {
  opacity: 1;
  transform: none;
}
.navsheet-list .badge--xs {
  position: absolute;
  top: 14px;
  right: 14px;
}

@keyframes navcardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.navsheet-list a:nth-child(1) {
  animation-delay: 0.02s;
}
.navsheet-list a:nth-child(2) {
  animation-delay: 0.06s;
}
.navsheet-list a:nth-child(3) {
  animation-delay: 0.1s;
}
.navsheet-list a:nth-child(4) {
  animation-delay: 0.14s;
}
.navsheet-list a:nth-child(5) {
  animation-delay: 0.18s;
}
.navsheet-list a:nth-child(6) {
  animation-delay: 0.22s;
}
.navsheet-list a:nth-child(7) {
  animation-delay: 0.26s;
}
.navsheet-list a:nth-child(8) {
  animation-delay: 0.3s;
}
.navsheet-list a:nth-child(9) {
  animation-delay: 0.34s;
}
.navsheet-list a:nth-child(10) {
  animation-delay: 0.38s;
}
.navsheet-list a:nth-child(11) {
  animation-delay: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
  .navsheet-list a {
    animation: none;
  }
  .navsheet-list a::before {
    transition: none;
  }
}

/* variante hiérarchisée : deux entrées majeures, le reste en lignes */
.navsheet-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.navsheet-hero a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  border: 1.5px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease,
    transform 0.22s cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 0.22s ease;
}
.navsheet-hero a::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -20% -60% -20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-tint);
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.navsheet-hero a > * {
  position: relative;
  z-index: 1;
}
.navsheet-hero a:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -24px rgba(24, 22, 20, 0.32);
}
.navsheet-hero a:hover::before,
.navsheet-hero a.is-current::before {
  transform: scale(1);
}
.navsheet-hero a.is-current {
  border-color: var(--brand);
}
.navsheet-hero .navsheet-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.navsheet-hero .navsheet-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}
.navsheet-hero .navsheet-live .ico {
  font-size: 19px;
}
.navsheet-hero .navsheet-go {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.22s ease;
}
.navsheet-hero a:hover .navsheet-go,
.navsheet-hero a.is-current .navsheet-go {
  opacity: 1;
  transform: none;
}

.navsheet-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}
.navsheet-rows a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-xs);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--muted-2);
  transition: background 0.18s ease, color 0.18s ease;
}
.navsheet-rows a .ico {
  font-size: 21px;
  color: var(--muted-4);
  transition: color 0.18s ease;
}
.navsheet-rows a:hover {
  background: var(--surface);
  color: var(--ink);
}
.navsheet-rows a:hover .ico {
  color: var(--brand);
}
.navsheet-rows .badge--xs {
  margin-left: auto;
}

@media (max-width: 900px) {
  .navsheet-hero .navsheet-name {
    font-size: 19px;
  }
  .navsheet-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .navsheet-hero {
    grid-template-columns: 1fr;
  }
  .navsheet-hero a {
    padding: 18px;
    gap: 10px;
  }
  .navsheet-rows {
    grid-template-columns: 1fr;
  }
}

.navsheet-foot {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.navsheet-foot .sheet-label {
  padding: 0;
  margin-right: 6px;
}

@media (max-width: 900px), (max-height: 600px) {
  .navsheet-card {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
  }
  .navsheet-body {
    overflow-y: auto;
    padding: 2px 20px 20px;
  }
  .navsheet-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .navsheet-list a {
    min-height: 108px;
  }
}
@media (max-width: 640px) {
  .navsheet {
    padding: 8px;
  }
  .navsheet-card {
    border-radius: 22px;
  }
  .navsheet-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .navsheet-top {
    padding: 14px 16px;
  }
  .navsheet-shut i {
    width: 46px;
    height: 46px;
  }
  .navsheet-shut b {
    display: none;
  }
  .navsheet-list {
    gap: 10px;
  }
  .navsheet-list a {
    min-height: 112px;
    padding: 15px;
    font-size: 16.5px;
    gap: 10px;
  }
}

/* 29. SÉANCE EN VISIO ----------------------------------------- */
.vstage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.vbox {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #221f1d;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vbox-self {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 168px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.vbox-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: rgba(24, 22, 20, 0.58);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.vbox-tag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.vbox-timer {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: rgba(24, 22, 20, 0.58);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ctrlbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1.5px solid var(--line);
  margin-top: 16px;
}
.ctrl {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ctrl .ico {
  font-size: 24px;
}
.ctrl:hover {
  background: var(--surface);
}
.ctrl.is-off {
  background: var(--surface);
  color: var(--muted-5);
}
.ctrl--end {
  width: auto;
  padding: 0 24px;
  gap: 10px;
  border-radius: var(--pill);
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
}
.ctrl--end:hover {
  background: var(--brand);
  filter: brightness(0.96);
}

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

/* 30. POPUP PLEIN ÉCRAN ---------------------------------------
   Une page qui se comporte comme une fenêtre : barre fine en
   haut, croix à droite, corps qui défile seul.
------------------------------------------------------------- */
/* Le plein écran de saisie porte désormais le fond applicatif
   (`x-lernen.app-background`, posé en premier enfant) : son `background`
   passe donc du blanc au ton de base du tableau de bord, que le calque
   couvre. Les cartes du formulaire gardent leur blanc à elles. */
.fullpop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: #f9f7f5;
  animation: popSheetIn 0.42s cubic-bezier(0.22, 1, 0.32, 1) both;
}
.fullpop.is-closing {
  animation: popSheetOut 0.3s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes popScrim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popCardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popCardOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.975);
  }
}
@keyframes popSheetIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popSheetOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal.is-open,
  .modal.is-closing,
  .modal.is-open .modal-card,
  .modal.is-closing .modal-card,
  .fullpop,
  .fullpop.is-closing {
    animation-duration: 0.01ms;
  }
}
.fullpop-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 26px;
  background: #fff;
  border-bottom: 1.5px solid var(--line);
}
.fullpop-bar .brand-name {
  font-size: 22px;
}
.fullpop-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--muted-2);
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1.5px solid var(--line-2);
}
.fullpop-save {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-4);
}
.fullpop-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px;
}
.fullpop-body > .section:first-child {
  padding-top: 40px;
}

@media (max-width: 640px) {
  .fullpop-bar {
    padding: 11px 16px;
    gap: 12px;
  }
  .fullpop-body {
    padding: 0 10px;
  }
  .fullpop-title {
    display: none;
  }
  .fullpop-save {
    display: none;
  }
  .fullpop-body > .section:first-child {
    padding-top: 24px;
  }
}

/* 28. PANNEAUX DE LA BARRE DU HAUT ----------------------------
   .sheet = calque commun (fond sombre + panneau).
   Trois usages : menu latéral, notifications, recherche.
------------------------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(24, 22, 20, 0.38);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sheet-side {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.sheet.is-open .sheet-side {
  transform: none;
}

.sheet-drop {
  position: absolute;
  top: 84px;
  right: 22px;
  width: min(392px, calc(100vw - 32px));
  max-height: calc(100vh - 104px);
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -18px rgba(24, 22, 20, 0.3);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.28, 1),
    opacity 0.2s ease;
}
.sheet.is-open .sheet-drop {
  transform: none;
  opacity: 1;
}

.sheet-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20px 22px 26px;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.28, 1),
    opacity 0.2s ease;
}
.sheet.is-open .sheet-top {
  transform: none;
  opacity: 1;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 14px;
}
.sheet-head .h5 {
  margin: 0;
}
.sheet-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1.5px solid var(--line);
  background: #fff;
}
.sheet-drop .sheet-head {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.sheet-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: var(--r-xs);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted-2);
}
.sheet-link:hover {
  background: var(--surface);
  color: var(--ink);
}
.sheet-link.is-current {
  background: var(--brand-tint);
  color: var(--brand);
}
.sheet-link .ico {
  color: inherit;
}
.sheet-sep {
  height: 1.5px;
  background: var(--line);
  margin: 10px 4px;
}
.sheet-label {
  padding: 6px 4px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-5);
}

.notif {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 20px;
  border-top: 1.5px solid var(--line);
}
.notif:first-of-type {
  border-top: none;
}
.notif:hover {
  background: var(--surface);
}
.notif-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-ico .ico {
  font-size: 20px;
}
.notif-body {
  min-width: 0;
}
.notif-body b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
}
.notif-body span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}
.notif.is-new {
  background: var(--brand-tint);
}
.notif.is-new .notif-ico {
  background: var(--brand);
  color: #fff;
}
.notif.is-new:hover {
  background: #fce7e3;
}

/* 27. ASSISTANT D'ANNONCE — UNE QUESTION PAR ÉCRAN -----------
   Barre de progression fine, carte de conseil à gauche,
   la question et son champ à droite.
------------------------------------------------------------- */
.section:has(> .ann-prog) {
  padding-top: 20px !important;
  padding-bottom: 50px !important;
}
.ann-prog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}
.ann-prog-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-4);
}
.ann-prog-head b {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ann-prog-head em {
  font-style: normal;
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand);
}
.ann-bar {
  height: 8px;
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  overflow: hidden;
}
.ann-bar i {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--brand);
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    oklch(from var(--brand) calc(l + 0.07) c h) 100%
  );
  transition: width 0.5s cubic-bezier(0.22, 0.8, 0.28, 1);
}

.pico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #fff;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.pico .ico {
  font-size: 22px;
  color: inherit;
}
.pick.is-on .pico {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: none;
}

.rangefield {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--r-xs);
  background: var(--surface);
  margin-top: 10px;
}
.rangefield input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--brand);
  height: 4px;
}
.rangefield b {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.rangefield .ico {
  color: var(--muted-4);
}

.ann-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.ann-aside {
  position: sticky;
  top: 24px;
  background: var(--brand-tint);
  border-radius: var(--r-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ann-aside h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}
.ann-aside p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-3);
}
.ann-aside b {
  color: var(--ink);
}
.tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--brand);
}

/* Le titre de chaque étape de l'assistant — annonce et cours.
   Les valeurs sont celles demandées, à l'identique. `clamp()` remplace les
   40px fixes : c'est lui qui fait tenir un titre long sur une ligne, en le
   resserrant quand la colonne se rétrécit. */
.ann-q {
  margin: 0 0 10px;
  font-family: Capriola, Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ann-q em {
  font-style: normal;
  color: var(--brand);
}
.ann-note {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-4);
  max-width: 620px;
}
.ann-label {
  display: block;
  margin: 30px 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.ann-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

@media (max-width: 1040px) {
  .ann-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ann-aside {
    position: static;
    padding: 24px 22px;
  }
  .ann-q {
    font-size: 30px;
  }
}

/* 26. PAGE DE CRÉATION D'ANNONCE ------------------------------
   Formulaire en sections numérotées à gauche, aperçu collant à droite.
------------------------------------------------------------- */
.build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}
.build-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.formsec {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-margin-top: 24px;
}
.formsec > .field-row {
  margin: 0;
}
.formsec-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: start;
}
.sec-num {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.formsec-head h2 {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.formsec-head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-4);
}

.build-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.preview {
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
}
.preview-top {
  display: flex;
  gap: 14px;
  padding: 20px;
  align-items: center;
  border-bottom: 1.5px solid var(--line);
}
.preview-top .avatar {
  flex-shrink: 0;
}
.preview-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}
.preview-sub {
  font-size: 14px;
  color: var(--muted-4);
  margin-top: 2px;
}
.preview-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preview-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 16px 20px;
  border-top: 1.5px solid var(--line);
}
.preview-price b {
  font-size: 26px;
  font-weight: 800;
}
.preview-price span {
  font-size: 14px;
  color: var(--muted-4);
}

.jump {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jump a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted-2);
}
.jump a:hover {
  background: var(--surface);
  color: var(--ink);
}
.jump a .ico {
  font-size: 18px;
  color: var(--green);
}
.jump a.is-todo .ico {
  color: var(--line-2);
}

.selectwrap {
  position: relative;
  display: block;
}
.selectwrap select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: 46px;
  cursor: pointer;
}
.selectwrap > .ico {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-4);
  font-size: 20px;
}
.selectwrap > input {
  padding-right: 46px;
}

/* sélecteur à bulles avec recherche (langues du profil apprenant) —
   voir le script en bas de profile.blade.php : ce bloc ne fait que
   présenter ce que reflète le `<select multiple>` caché juste après. */
.slotline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: var(--r-xs);
  background: var(--surface);
}
.slotline b {
  font-size: 16px;
  font-weight: 800;
}
.slotline span {
  font-size: 14.5px;
  color: var(--muted-4);
}

@media (max-width: 1040px) {
  .build {
    grid-template-columns: 1fr;
  }
  .build-side {
    position: static;
  }
  .formsec {
    padding: 24px 22px;
  }
  .formsec-head {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }
}

/* 25. ASSISTANT D'ANNONCE (une question par écran) ------------
   Colonne gauche : carte « À savoir ». Colonne droite : la question.
------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

.picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  min-height: 66px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.pick:hover {
  background: #f1ece4;
}
.pick:active {
  transform: scale(0.995);
}
.pick .grow {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick small {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-4);
}
.pick .ico {
  color: var(--muted-4);
}
.pick .box {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pick .box .ico {
  font-size: 20px;
}
/* La ligne retenue porte le dégradé du bouton, pas un aplat : c'est le
   même geste — « j'ai choisi ça » — et le mentor ne regarde pas la case
   à cocher, il regarde la couleur. */
.pick.is-on {
  background: var(--grad);
  color: #fff;
}
.pick.is-on:hover {
  background: var(--grad);
}
.pick.is-on small,
.pick.is-on .ico {
  color: rgba(255, 255, 255, 0.82);
}
.pick.is-on .box {
  background: #fff;
}
.pick.is-on .box .ico {
  color: var(--brand);
}
.pick.is-main {
  font-size: 18px;
}

/* Sujet déjà utilisé par ce mentor (Listing::getTakenSubjectIdsProperty()) —
   pas le vrai attribut HTML `disabled` : Firefox n'y déclenche pas
   `:hover`, ce qui casserait l'infobulle. Juste `aria-disabled` +
   `wire:click` retiré côté gabarit ; le clic ne fait donc déjà rien,
   ce style ne fait que le dire. */
.pick.is-disabled {
  position: relative;
  cursor: default;
  color: var(--muted-5);
}
.pick.is-disabled:hover {
  background: var(--surface);
}
.pick.is-disabled:active {
  transform: none;
}
.pick.is-disabled .ico {
  color: var(--muted-6);
}
/* Même famille que .tooltip (voir plus haut dans ce fichier), mais sous
   la carte plutôt qu'au-dessus — la première ligne d'une liste n'aurait
   nulle part où déborder vers le haut — et alignée à gauche plutôt que
   centrée, avec passage à la ligne pour un message de deux lignes. */
.pick.is-disabled .tooltip {
  bottom: auto;
  top: calc(100% + 9px);
  left: 24px;
  transform: none;
  white-space: normal;
  max-width: 300px;
  text-align: left;
  z-index: 5;
}
.pick.is-disabled .tooltip::after {
  top: auto;
  bottom: 100%;
  left: 24px;
  transform: none;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}
.pick.is-disabled:hover .tooltip {
  opacity: 1;
}

.bigfield {
  width: 100%;
  border: none;
  border-radius: var(--r-xs);
  background: var(--surface);
  padding: 22px 24px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
}
.bigfield::placeholder {
  color: var(--muted-5);
}
.bigfield:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: #fff;
}
/* Écran « cours » — étapes de « Comment se passe une séance ? »,
   Listing::$methodSteps (jusqu'à 5 cartes {title, description}). */
.method-step {
  padding: 20px 22px;
  border-radius: var(--r-media);
  border: 1.5px solid var(--line-2);
}
.method-step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.method-step-num {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.method-step-num .ico {
  font-size: 16px;
}

.pricefield {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-xs);
  padding: 6px 24px;
}
.pricefield input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  padding: 16px 0;
}
.pricefield b {
  font-size: 18px;
  color: var(--muted-4);
}

.photo-drop {
  width: 230px;
  height: 230px;
  border-radius: 26px;
  border: 2px dashed var(--line-2);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted-4);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.photo-drop:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* =============================================================
   À partir d'ici : sections propres à l'intégration, ajoutées
   après la feuille de la maquette. Elles n'en modifient aucune
   règle — elles complètent ce que la maquette, statique, n'avait
   pas à prévoir : images réelles, états vides, raccord avec la
   barre du site public, et quelques états que le rendu dynamique
   fait apparaître.
   ============================================================= */

/* 40. IMAGES RÉELLES À LA PLACE DES VIGNETTES `.ph` ------------
   La maquette réserve l'emplacement des visuels par une vignette
   `.ph` rayée. En production ces emplacements reçoivent de vraies
   images : elles reprennent la taille et l'arrondi de leur boîte,
   et se recadrent au centre plutôt que de se déformer.
   Aucune règle de la maquette n'est modifiée — `.ph` reste ce qu'il
   est et sert toujours de repli quand aucun visuel n'est disponible.
------------------------------------------------------------- */
.avatar > img,
.avatar-tile > img,
.thumb > img,
.tile > img,
.session-media > img,
.photo-drop > img,
.attach-img > img,
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Les boîtes qui accueillent une photo la rognent à leur arrondi.
   `.avatar` en est exclu : son point « en ligne » déborde volontairement
   du cadre et un `overflow: hidden` le couperait. C'est le
   `border-radius: inherit` de l'image qui l'arrondit. */
.thumb,
.session-media {
  overflow: hidden;
}

/* Le point « en ligne » reste au-dessus de la photo. */
.avatar .dot-online {
  z-index: 1;
}

/* 41. ÉTATS VIDES ---------------------------------------------
   La maquette montrait toujours des listes remplies ; en production
   une liste peut être vide. Même ton que `.sheet-label` : discret,
   centré dans le panneau ou la carte qui l'accueille.
------------------------------------------------------------- */
.sheet-empty,
/* Pagination — resources/views/vendor/pagination/lernen.blade.php,
   portée depuis mew_dash/css/style.css (jamais utilisée jusqu'ici : sans
   vue dédiée, $paginator->links() retombait sur la vue Tailwind par
   défaut de Laravel, jamais stylée dans ce thème). */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.pager button,
.pager span {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--muted-2);
  background: #fff;
  border: 1.5px solid var(--line);
  cursor: pointer;
}
.pager button:hover {
  border-color: var(--brand-line);
  color: var(--ink);
}
.pager .is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pager .is-off {
  opacity: 0.4;
  pointer-events: none;
}

.list-empty {
  padding: 26px 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-4);
}
.list-empty {
  background: var(--surface);
  border-radius: var(--r-md);
}

/* 42. BARRE DE NAVIGATION REPRISE DU SITE PUBLIC ---------------
   Le tableau de bord n'a plus sa propre `.navbar` : il affiche la
   barre flottante du front (`.nvg-root`, cf. components/front/header).
   Celle-ci est en `position: fixed`, donc hors flux — l'en-tête doit
   lui réserver sa hauteur, sans quoi elle recouvrirait le fil d'Ariane.
   Les règles ci-dessous ne touchent qu'au raccord entre les deux :
   la barre elle-même garde intégralement les styles du front.
------------------------------------------------------------- */
/* Hauteur réservée : 40px de marge haute + ~68px de carte + les 26px
   d'air que la maquette laissait au-dessus du fil d'Ariane. */
.hero {
  padding-top: 120px;
}

/* Le front pose déjà une loupe dans la barre. Le tableau de bord a la
   sienne, qui ouvre le panneau `#recherche` et cherche dans les données
   de l'utilisateur — deux loupes côte à côte n'auraient aucun sens :
   celle du front s'efface ici, et seulement ici. Son panneau de
   recherche reste en place, intact, pour les pages publiques. */
.lrn-dashboard #nvg-d-search-btn,
.lrn-dashboard #nvg-m-search-btn {
  display: none;
}

/* Commandes propres au tableau de bord (cloche, recherche, burger).
   Elles empruntent les classes de bouton du front ; seul l'agencement
   du compteur est ajouté. */
.lrn-nav-btn {
  position: relative;
  flex-shrink: 0;
}

/* scrollix-header.css neutralise le glyphe de la cloche (`content: unset`),
   parce que le front s'en sert comme d'une simple pastille. Ici la cloche
   est un vrai bouton : on lui rend son icône. */
.lrn-nav-btn--bell .am-icon-notification-ring-bell-01::before {
  content: "\ea72";
  color: var(--brand);
}

.lrn-nav-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

/* Le bouton du compte est rond, comme la cloche et la loupe qui le
   précèdent. main.css lui donne un carré arrondi de 10px, ce qui le
   distinguait des deux autres sans raison. Réglé maintenant pour toute
   la barre reprise du front (scrollix-header.css), pas seulement ici :
   rien à redéfinir dans cette feuille. */

/* La barre bascule en version mobile à 768px (scrollix-header.css), et les
   deux versions font la même hauteur à quelques pixels près : une seule
   valeur de dégagement suffit, sans point de rupture propre. */

/* 43. BASES DE LA MAQUETTE RÉTABLIES DANS LE CONTENU -----------
   main.css est chargée pour la barre de navigation, mais elle habille
   aussi les balises nues — titres, paragraphes, listes, figures — que la
   maquette laissait aux réglages du navigateur et pilotait par ses seules
   classes (`.h1`, `.h2`, `.lead`…). Sans cela les titres reprenaient la
   couleur de main.css et les listes retrouvaient leurs puces.

   Le `:where(.page)` limite la portée au contenu — la barre, enfant direct
   de <body>, garde intégralement les styles du front — sans rien ajouter à
   la spécificité : ces règles ne pèsent donc que le poids d'un sélecteur de
   balise. Elles l'emportent sur main.css par l'ordre de chargement, et
   s'effacent devant la moindre classe de la maquette.
------------------------------------------------------------- */
:where(.page) h1,
:where(.page) h2,
:where(.page) h3,
:where(.page) h4,
:where(.page) h5,
:where(.page) h6 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(.page) p {
  margin: 0 0 1em;
  letter-spacing: normal;
  line-height: inherit;
}

:where(.page) ul,
:where(.page) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.page) li {
  line-height: inherit;
  list-style: none;
}

:where(.page) figure {
  margin: 0;
}

/* Les tableaux : main.css les habille lourdement (bordures, centrage,
   capitalisation des en-têtes, interlignes doublés) par des sélecteurs de
   balise imbriqués. On les neutralise avec la même portée qu'elle — d'où
   les sélecteurs longs — pour que `.tbl` reprenne la main. Les propriétés
   que `.tbl` fixe elle-même l'emportent de toute façon : ici on ne fait
   que rendre au reste sa valeur héritée. */
:where(.page) table,
:where(.page) table > thead > tr > th,
:where(.page) table > tbody > tr > td,
:where(.page) table > tbody > tr > th,
:where(.page) table > tfoot > tr > td,
:where(.page) table thead tr th,
:where(.page) table > thead > tr > td,
:where(.page) table > tbody + tbody {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: none;
  vertical-align: baseline;
  background: none;
}

/* 44. MESSAGES DE LA PORTE D'ENTRÉE ----------------------------
   La maquette de `connexion.html` ne prévoit ni erreur de saisie ni
   confirmation d'envoi : elle ne montre que le parcours nominal. Ces
   quelques règles complètent le bloc CONNEXION avec les états dont la
   version branchée a besoin — code refusé, envoi impossible, code
   renvoyé, bouton en attente. Elles reprennent les variables et les
   dimensions de ce bloc, sans en modifier une seule règle.
--------------------------------------------------------------- */
.g-error,
.g-note {
  margin: -4px 0 0;
  padding: 0 26px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}
/* La maquette n'a pas de couleur « danger » séparée : elle signale
   l'alerte avec la couleur de marque (`.menu-item--danger`,
   `.info-row--danger`) et la réussite avec `--green`. On s'y tient. */
.g-error {
  color: var(--brand);
}
.g-note {
  color: var(--green);
}

/* Le champ fautif se signale, comme ailleurs dans la maquette. */
.g-field[aria-invalid="true"] {
  border-color: var(--brand);
}

/* Attente : envoi en cours, ou renvoi encore verrouillé. Le bouton
   reste lisible mais n'invite plus au clic. */
.g-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.g-btn--primary[disabled]:hover {
  background: var(--brand);
}
.gate-switch button[disabled] {
  color: var(--muted-2);
  cursor: default;
}
.gate-switch button[disabled]:hover {
  color: var(--muted-2);
}

/* Les champs de la maquette sont posés directement dans `.gate-box`,
   qui les espace lui-même. Les envelopper dans un <form> — nécessaire
   pour valider à la touche Entrée — casserait cet espacement : le
   formulaire reprend donc la mise en colonne de son parent. */
.gate-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-height: 700px) {
  .gate-box form {
    gap: 10px;
  }
}

/* 45. MENU PLEIN ÉCRAN : LIGNE COURANTE ------------------------
   La maquette ne donne d'état courant qu'aux deux entrées majeures
   (`.navsheet-hero a.is-current`) ; les lignes serrées n'en ont pas,
   parce que la maquette est statique et n'a jamais de page ouverte
   parmi elles. Ici `main.js` pose `.is-current` sur l'entrée de la
   page affichée : il lui faut une marque, sinon la classe existe sans
   rien dire. On reprend exactement l'état de survol de la maquette,
   rendu permanent — aucun vocabulaire nouveau.
------------------------------------------------------------- */
.navsheet-rows a.is-current {
  background: var(--surface);
  color: var(--ink);
}
.navsheet-rows a.is-current .ico {
  color: var(--brand);
}

/* 46. PAGES DE CRÉATION EN PLEINE LARGEUR ----------------------
   La maquette centre son contenu dans une colonne (`--shell`)
   (`.wrap`). Les écrans de création — un programme, un sujet, un
   cours — demandent plus de place : formulaires longs, listes de
   sujets, sections de contenu. Ils prennent donc toute la largeur
   et toute la hauteur disponibles, sans quitter le vocabulaire de
   la maquette : mêmes cartes, mêmes champs, même rail d'étapes.
------------------------------------------------------------- */
.wrap--full {
  max-width: none;
  padding-inline: clamp(16px, 3vw, 56px);
}

/* La page occupe au moins la hauteur restante : un formulaire court
   ne laisse pas le pied de page remonter au milieu de l'écran. */
.section--full {
  min-height: calc(100dvh - 320px);
}

/* Les champs respirent quand la place est là : deux colonnes au-delà
   de la largeur d'une colonne de lecture, une seule en dessous. */
@media (min-width: 1100px) {
  .wrap--full .card > .field-row {
    gap: 22px;
  }
  .wrap--full .tagchips {
    gap: 10px;
  }
}

/* 47. CARTE DU MENTOR — FILET À ENCOCHES ET APPEL --------------
   La carte de la page de réservation reprend celle de la fiche
   publique dans son état ouvert : même filet pointillé, creusé aux
   deux bords comme un ticket, et un appel à l'action en pied de
   carte. `.mentor-stats` porte déjà le pointillé (bloc 7 de la
   maquette) ; on n'ajoute ici que les encoches et le bouton.
------------------------------------------------------------- */
.mentor-card {
  position: sticky;
  top: 20px;
}

/* Les deux encoches mordent sur les bords de la carte, à hauteur du
   filet pointillé, comme sur un ticket. Elles reprennent le fond de la
   page — `body` est blanc dans la maquette. */
.mentor-stats {
  position: relative;
}
.mentor-stats::before,
.mentor-stats::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}
.mentor-stats::before {
  left: -25px;
}
.mentor-stats::after {
  right: -25px;
}

/* Trois colonnes dans une carte étroite : la note et son étoile
   doivent tenir sur une ligne, sinon l'icône passe au-dessus du
   chiffre et la colonne paraît vide. */
.mentor-stat b {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mentor-card-cta {
  width: 100%;
  margin-top: 16px;
}

/* 48. DÉGRADÉ DU BOUTON PRINCIPAL ------------------------------
   `.btn--primary` prend son propre dégradé, plus clair en haut à
   gauche que le `--grad` commun. Écrit ici plutôt que dans le bloc
   de la maquette : la feuille amont est réimportée telle quelle à
   chaque évolution, et une retouche faite dans son corps serait
   perdue au passage — c'est déjà arrivé. Les sept autres emplois
   de `--grad` (pastille d'icône, panneau de marque, chiffres clés,
   fonds de section) ne bougent pas.
------------------------------------------------------------- */


/* 49. RÉPONSE À UN MESSAGE, DANS LA BOÎTE DE RÉCEPTION ---------
   La maquette dessine le menu « Répondre » sur chaque message
   (.msg-menu) mais ne montre nulle part à quoi ressemble l'état
   « en train de répondre » : ni la citation au-dessus du champ de
   saisie, ni son rappel dans la bulle envoyée. Les deux blocs
   ci-dessous reprennent le vocabulaire déjà en place (mêmes rayons,
   mêmes couleurs) plutôt que d'improviser un style à part.
------------------------------------------------------------- */
.composer-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.composer-reply .ico {
  color: var(--brand);
  flex-shrink: 0;
}
.composer-reply-body {
  flex: 1;
  min-width: 0;
}
.composer-reply-label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted-4);
}
.composer-reply-text {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-reply-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-4);
  cursor: pointer;
}
.composer-reply-close:hover {
  background: var(--line-2);
  color: var(--ink);
}

.msg-quote {
  display: block;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--brand-line);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-4);
  background: rgba(0, 0, 0, 0.03);
}
.bubble--out .msg-quote {
  background: rgba(255, 255, 255, 0.18);
  border-left-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.85);
}

/* Le bouton « Informations » de l'en-tête, actif tant que le panneau est
   ouvert — même traitement que les onglets courants ailleurs
   (`.inbox-tab.is-current`). */
.iconbtn--plain.is-current {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Message vocal en cours d'enregistrement : la maquette ne dessine pas
   cet état (son bouton micro est toujours au repos), un battement doux
   suffit à dire qu'il écoute. */
.iconbtn--white.is-recording {
  background: var(--brand);
  color: #fff;
  animation: voiceRecordPulse 1.1s ease-in-out infinite;
}
@keyframes voiceRecordPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 99, 99, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 99, 99, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .iconbtn--white.is-recording {
    animation: none;
  }
}

/* 50. RECADRAGE DE LA PHOTO DE L'ANNONCE (écran « photo ») ----
   La maquette dessine un bouton « Recadrer » à côté du dépôt de
   photo mais ne montre aucun écran de recadrage — elle se
   contente d'illustrer sa présence. En production le bouton ouvre
   une fenêtre modale (même mécanique data-modal-open que les
   autres popups du site) avec un cadre fixe dans lequel la photo
   se déplace et se zoome ; le guide circulaire en pointillé
   rappelle que l'avatar final est rond, sans contraindre le
   rognage à ce contour — l'export reste carré.
------------------------------------------------------------- */
.crop-stage {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  background: var(--surface);
  cursor: grab;
  touch-action: none;
}
.crop-stage:active {
  cursor: grabbing;
}
.crop-stage img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
.crop-stage::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
}

/* 51. GLISSER-DÉPOSER DES GROUPES DE SUJETS (« Mes sujets ») --
   La maquette dessine la poignée (.subj-head .handle) mais ne montre
   aucun état de glissé — elle n'a rien à réordonner puisque ses
   groupes sont figés. En production la même poignée sert aussi à
   ouvrir le menu d'options du groupe (.has-menu déjà générique, voir
   main.js) : un clic ouvre le menu, un clic-glissé réordonne.
------------------------------------------------------------- */
.subj-head .handle {
  color: var(--muted-5);
  cursor: grab;
  touch-action: none;
}
.subj-head .handle:active {
  cursor: grabbing;
}
#subj-groups-list.subj-groups-dragging {
  -webkit-user-select: none;
  user-select: none;
}
.subj-group.subj-group-chosen {
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 30px rgba(20, 20, 43, 0.22);
  transform: scale(1.01);
}

/* Le menu du groupe s'ouvre à gauche de sa poignée, pas à droite comme le
   .rowmenu générique (qui reste à droite pour les lignes de sujet, les
   demandes, etc.) : la poignée est en tout début de `.subj-head`, un menu
   à droite se retrouvait à cheval sur le bord de la carte. */
.subj-head .rowmenu {
  left: 10px;
  right: auto;
  transform-origin: top left;
}

/* `.stack.stack--lg` (la liste des groupes) est en display:flex : ses
   enfants directs (chaque `.subj-group`) peignent alors dans un ordre où
   le z-index de leurs propres descendants ne suffit plus à les faire
   passer au-dessus d'un `.subj-group` suivant — un item flexbox sans
   z-index explicite reste comparé comme les autres, quel que soit le
   z-index posé plus bas dans son arbre. Sans ceci, le `.rowmenu` ouvert
   d'un groupe se faisait recouvrir par le fond opaque de `.subj-head` du
   groupe suivant. On ne le pose que pendant qu'un menu de ce groupe est
   réellement ouvert, pour ne pas fausser l'empilement le reste du temps. */
.subj-group:has(> .subj-head .rowmenu.is-open),
.subj-group:has(> .subj-row .rowmenu.is-open) {
  position: relative;
  z-index: 3;
}
.subj-group:has(> .subj-row) .subj-head {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* 52. ASSISTANT POST-INSCRIPTION (connexion.html, panneaux w- et a-) --
   Classes de la maquette qu'aucun autre écran ne portait encore.
   Reprises telles quelles de mew_dash/css/style.css. */
.gate-box--w {
  width: min(520px, 100%);
}
.gate-head--left {
  align-items: flex-start;
  text-align: left;
  gap: 9px;
  margin-bottom: 26px;
}
.gate-head--left h1 {
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.gate-row {
  display: flex;
  gap: 12px;
}
.gate-row .g-field {
  min-width: 0;
}

.telfield {
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.telfield:focus-within {
  border-color: var(--brand-line);
  background: #fff;
}
.telfield .prefix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0 16px 0 20px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  border-right: 1.5px solid var(--line-2);
  white-space: nowrap;
}
.telfield .prefix .ico {
  color: var(--muted-4);
}
.telfield input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.telfield input::placeholder {
  color: var(--muted-5);
  font-weight: 600;
  letter-spacing: 0;
}
.telfield.is-bad {
  border-color: var(--brand);
}
.telfield.is-ok {
  border-color: var(--green);
}

.field-err {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand);
}
.field-err .ico {
  font-size: 18px;
}

.pick-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
  cursor: pointer;
}
.pick-more:hover {
  text-decoration: underline;
}
.pick-more .ico {
  font-size: 19px;
}
.pick-vide {
  display: none;
  padding: 18px 20px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-3);
}
.pick-vide.is-on {
  display: block;
}

.gate-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--r-xs);
  background: #eaf6ef;
  font-size: 15.5px;
  font-weight: 700;
  color: #1e7a4e;
}
.gate-done .ico {
  font-size: 21px;
}

.counter {
  align-self: flex-end;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-5);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .gate-row {
    flex-wrap: wrap;
  }
  .gate-row > * {
    flex: 1 1 100%;
    max-width: none !important;
  }
  .gate-head--left h1 {
    font-size: 26px;
  }
  .telfield .prefix {
    padding: 0 12px 0 16px;
    font-size: 16px;
  }
  .telfield input {
    padding: 0 14px;
    font-size: 16px;
  }
}


/* ==========================================================================
   Salon d'une séance — mentee/seance.html
   Règles reprises telles quelles du CSS de la maquette (mew_dash/css/style.css) :
   elles n'avaient jamais été intégrées, la page salon n'existant pas encore.
   ========================================================================== */

/* 37. SALON DE SÉANCE ------------------------------------------
   Une seule page, plusieurs états : attente, confirmée, salle
   ouverte, vérification, en cours, terminée, avis, signalement.
--------------------------------------------------------------- */
.salon { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }

.salon-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }

.salon-side > .card, .salon-side > .panel { container-type: inline-size; }

.salon .chat--app { height: 700px; }

.salon .chat-scroll { padding: 22px 24px; gap: 14px; }

/* messages système, empilés dans le fil */
.sys {
  align-self: center;
  max-width: 92%;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: center;
  text-wrap: pretty;
}

.sys b { font-weight: 800; color: var(--ink); }

.sys--wait { background: #FDF4E5; color: #8A5D00; }

.sys--wait b { color: #6F4A00; }

.sys--ok { background: #EAF6EF; color: #1E7A4E; }

.sys--ok b { color: #145F3B; }

.sys--live { background: var(--brand-tint); color: var(--brand); }

.sys--live b { color: var(--brand-dark); }

.sys--live { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* La demande à confirmer, au bout du fil.
   Les deux boutons vivaient seulement dans la colonne de droite, où le
   mentor ne regarde pas : il lit la conversation. Ce sont les mêmes
   actions, posées là où l'oeil arrive. Ils passent à la ligne l'un sous
   l'autre dès que la bulle se resserre. */
.sys--repondre { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.sys-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* La barre de saisie remplacée quand un litige gèle le fil. Même hauteur
   et même place que le composeur : on ne veut pas que la conversation
   « saute » quand l'écran passe de l'un à l'autre. */
.composer--gelee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FDF4E5;
  color: #8A5D00;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.composer--gelee b { display: block; margin-bottom: 3px; color: #6F4A00; font-weight: 800; }

.composer--gelee .ico { flex: none; color: #8A5D00; }

/* Fenêtre de confirmation d'un geste qu'on ne défait pas.
   Le kit n'avait ni pastille d'en-tête ni bouton rouge : la seule action
   destructrice du tableau de bord passait jusqu'ici par la boîte grise du
   navigateur. Deux briques, pas une variante de plus du système. */
.modal-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
}

.modal-mark--danger { background: #FDECEC; color: #C93B3B; }

.btn--danger { background: #C93B3B; color: #fff; }

.btn--danger:hover { background: #B02F2F; }

/* La phrase à retenir d'une fenêtre de confirmation : encadrée, en gras,
   à l'encre du site. En `.modal-legal` — 14 px, gris pâle — elle avait
   l'allure d'une mention qu'on saute, alors que c'est elle qui explique
   ce que le geste fait vraiment. */
.modal-note {
  margin: 0 0 22px;
  border-radius: 18px;
  background: var(--surface);
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}

/* Le message corrigé le dit, discrètement, à côté de l'heure. */
.msg-edited { color: var(--muted-3, #8A8A8F); font-style: italic; }

/* Le bandeau de modification reprend celui de la réponse citée, en ambre :
   on ne compose pas, on remplace quelque chose de déjà envoyé. */
.composer-reply--edit { background: #FDF4E5; }

.composer-reply--edit .composer-reply-label { color: #8A5D00; }

.composer-reply--edit > .ico { color: #8A5D00; }


/* compte à rebours — une case par unité --------------------------
   .countdown-num reçoit du JS une suite de <b>valeur</b><em>unité</em>.
--------------------------------------------------------------- */
.countdown { display: flex; flex-direction: column; gap: 12px; }

.countdown-lbl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--muted-2); }

.countdown-lbl .ico { font-size: 19px; color: var(--muted-4); }

.countdown-num { display: flex; gap: 8px; }

.countdown-num b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 6px 11px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.countdown-num em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.countdown--wait .countdown-num b { background: #FDF4E5; color: #6F4A00; }

.countdown--wait .countdown-num em { color: #6B4E0F; }

.countdown--wait .countdown-lbl { color: #8A5D00; }

.countdown--wait .countdown-lbl .ico { color: #B4862B; }

.countdown--live .countdown-num b { background: var(--brand-tint); color: #A32418; }

.countdown--live .countdown-num em { color: #8C1F14; }

.countdown--live .countdown-lbl { color: #8C1F14; }

.countdown--live .countdown-lbl .ico { color: var(--brand-dark); }

/* jalons du parcours */
.milestones { list-style: none; margin: 0; padding: 0; position: relative; }

.milestones::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: var(--line-2); }

.milestones li { position: relative; padding: 0 0 16px 28px; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--muted-5); }

.milestones li:last-child { padding-bottom: 0; }

.milestones li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }

.milestones li span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--muted-5); }

.milestones li.is-done { color: var(--muted-2); }

.milestones li.is-done::before { background: var(--muted-5); }

.milestones li.is-now { color: var(--ink); }

.milestones li.is-now::before { left: 0; top: 1px; width: 16px; height: 16px; background: var(--brand); box-shadow: 0 0 0 5px var(--brand-tint); }

/* barre de démonstration des états */
.statebar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); margin-bottom: 26px; }

.statebar .btn.is-current { background: var(--brand); color: #fff; box-shadow: none; }

.statebar .btn.is-current:hover { background: var(--brand); filter: brightness(.96); }

.statebar b { align-self: center; margin-right: 6px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-5); }

/* écran de vérification */
.check-stage { display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 30px; }

.check-stage .vbox { width: 100%; max-width: 520px; }

.levels { display: flex; gap: 5px; align-items: flex-end; height: 26px; }

.levels i { width: 9px; border-radius: 3px; background: var(--line-3); }

.levels i.is-on { background: var(--green); }

.levels i:nth-child(1) { height: 30%; }

.levels i:nth-child(2) { height: 50%; }

.levels i:nth-child(3) { height: 72%; }

.levels i:nth-child(4) { height: 100%; }

.levels i:nth-child(5) { height: 84%; }

.levels i:nth-child(6) { height: 60%; }

.levels i:nth-child(7) { height: 44%; }

.levels i:nth-child(8) { height: 28%; }

/* choix d'un motif de signalement */
.choice {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r-xs);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: box-shadow .18s ease, background .18s ease;
}

.choice:hover { box-shadow: inset 0 0 0 1.5px var(--line-3); }

.choice i { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; box-shadow: inset 0 0 0 1.5px var(--line-3); display: flex; align-items: center; justify-content: center; }

.choice b { display: block; font-size: 16px; font-weight: 800; }

.choice small { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--muted-3); }

.choice.is-on { background: var(--brand-tint); box-shadow: inset 0 0 0 1.5px var(--brand); }

.choice.is-on i { box-shadow: inset 0 0 0 1.5px var(--brand); }

.choice.is-on i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }

@media (max-width: 1040px) {
/* `minmax(0, 1fr)` et non `1fr` : le minimum implicite d'une piste `1fr`
   est `min-content`, et le fil de discussion le poussait à 575 px sur un
   téléphone de 390 — la page défilait de côté. La règle large, deux
   lignes plus haut, prend déjà cette précaution. */
.salon { grid-template-columns: minmax(0, 1fr); }
.salon-side { position: static; }
.salon .chat--app { height: auto; min-height: 460px; }
}

@media (max-width: 700px) {
.salon { gap: 16px; }
.salon .chat-scroll { padding: 18px 16px; }
.sys { max-width: 100%; padding: 11px 15px; font-size: 14.5px; }
.countdown { gap: 10px; }
.countdown-num { gap: 6px; }
.countdown-num b { padding: 12px 4px 9px; font-size: 30px; }
.countdown-num em { font-size: 11.5px; letter-spacing: .06em; }
.statebar { gap: 6px; padding: 14px; }
.check-stage { padding: 18px 16px; gap: 16px; }
.choice { padding: 14px 15px; }
.milestones li { padding-left: 26px; font-size: 14px; }
}

.countdown-fin { font-size: 20px; font-weight: 800; color: var(--muted-3); }

/* ==========================================================================
   Frise de progression d'une séance — x-lernen.session-timeline
   La maquette présentait les états en pastilles cliquables : c'était un
   sélecteur de démonstration, fait pour passer d'un écran à l'autre. Ici
   la frise est en lecture seule et raconte un parcours, elle se lit donc
   comme tel : des jalons numérotés reliés par une barre qui se remplit.
   ========================================================================== */
.progress-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 26px 26px 22px;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid var(--line-3);
  border-radius: var(--r-card);
}

/* La barre passe derrière les pastilles, à leur hauteur. Les marges la
   font commencer et finir au centre des jalons extrêmes, pas au bord de
   la carte : une progression relie des points, elle ne déborde pas. */
.progress-track {
  position: absolute;
  top: 43px;
  left: calc(26px + 50% / var(--steps, 7));
  right: calc(26px + 50% / var(--steps, 7));
  height: 3px;
  background: var(--track);
  border-radius: 3px;
}

.progress-fill {
  display: block;
  height: 100%;
  background: var(--grad-bar);
  border-radius: 3px;
  transition: width .35s ease;
}

.progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.progress-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted-5);
  background: #fff;
  border: 2px solid var(--line-3);
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff;
}

.progress-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted-3);
}

.progress-step.is-done .progress-dot { color: #fff; background: var(--brand); border-color: var(--brand); }
.progress-step.is-done .progress-label { color: var(--muted-2); }

.progress-step.is-current .progress-dot {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--brand-line);
}
.progress-step.is-current .progress-label { color: var(--ink); }

/* Sortie de route — litige ou annulation. Elle ne prolonge pas le
   parcours, elle l'interrompt : d'où le contour plutôt que le plein. */
.progress-step.is-branch .progress-dot {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: 0 0 0 5px #fff;
}
.progress-step.is-branch .progress-label { color: var(--brand); }

/* Sous 900px la ligne devient une colonne : sept libellés côte à côte ne
   tiennent pas, et les tronquer rendrait la frise illisible. */
@media (max-width: 900px) {
  .progress-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    padding: 22px 20px;
  }
  .progress-track { display: none; }
  .progress-step {
    flex-direction: row;
    gap: 14px;
    text-align: left;
    padding-bottom: 16px;
  }
  .progress-step:last-child { padding-bottom: 0; }
  /* Le trait vertical qui relie les pastilles remplace la barre. */
  .progress-step::before {
    content: '';
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 16px;
    width: 3px;
    background: var(--track);
    border-radius: 3px;
  }
  .progress-step:last-child::before { display: none; }
  .progress-step.is-done::before { background: var(--brand); }
  .progress-dot { flex: 0 0 34px; }
}

/* ==========================================================================
   Séance en cours — la conversation dockée à droite
   Le fil réduit à quelques lignes dans la maquette ne tenait pas à
   l'usage : c'est pendant la séance qu'on échange le plus (un lien, un
   bout de code, une correction). On y met donc le vrai panneau, celui des
   autres écrans, et la colonne s'élargit pour le recevoir.
   ========================================================================== */
.vstage { grid-template-columns: minmax(0, 1fr) 400px; }

.vstage-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}

/* Le panneau prend la hauteur qui reste sous la carte d'état, sans jamais
   descendre sous une hauteur lisible. */
/* Le panneau prend la place disponible, sans dépasser une hauteur qui
   ferait déborder la colonne : côté mentor elle porte aussi l'objectif et
   les notes. */
.vstage-side .chat--app { height: auto; flex: 1; min-height: 460px; max-height: 620px; }

.vstage-side .chat-scroll { padding: 20px 22px; }

.vstage-side .chat--app + .hint { display: none; }

@media (max-width: 1100px) {
  .vstage { grid-template-columns: minmax(0, 1fr); }
  .vstage-side { position: static; }
  .vstage-side .chat--app { min-height: 520px; }
}

/* --------------------------------------------------------------------------
   La tête du fil dans la colonne étroite

   Mesuré sur /mentor/seance : la colonne fait 400 px, l'avatar 54, la
   pastille « Régler mes rappels » 231 — il restait 39 px pour le nom.
   Et `.msg-name` est en `display:inline` : une boîte en ligne ne se replie
   pas dans son parent, elle en déborde. Le nom passait donc SOUS la
   pastille, l'un par-dessus l'autre.

   Deux règles, et rien d'autre : le nom redevient un bloc (il revient à la
   ligne chez lui), et la tête s'autorise à passer à deux lignes — identité
   en haut, action en dessous, sur toute la largeur. Un mentor qui lit vite
   voit un nom, puis un bouton ; plus une superposition.
   Portée à `.vstage-side` : la boîte de réception, large, ne bouge pas.
   -------------------------------------------------------------------------- */
.vstage-side .chat-head {
  flex-wrap: wrap;
  row-gap: 14px;
}
.vstage-side .chat-head .msg-name {
  display: block;
  line-height: 1.25;
}
.vstage-side .chat-head > .grow {
  flex: 1 1 140px;
}
.vstage-side .chat-head > .btn {
  flex: 1 0 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   La barre de saisie quand elle n'a pas la place

   Même mesure : cinq pièces jointes + émojis + micro + « Envoyer » font
   397 px dans 328 px disponibles. La barre était en `nowrap`, le bouton
   « Envoyer » sortait de 64 px du panneau et se faisait couper — on lisait
   « En ». Un bouton d'envoi à moitié coupé, c'est le geste principal de
   l'écran qu'on ne voit plus.

   `wrap` ne change rien là où tout tient (la boîte de réception garde sa
   ligne unique) et fait descendre l'envoi d'une ligne là où ça déborde.
   -------------------------------------------------------------------------- */
.composer-bar { flex-wrap: wrap; justify-content: flex-end; }
.composer-tools { flex: 1 1 auto; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Le cadre vidéo quand il n'y a rien à montrer

   Le cadre affichait `.ph` — le gabarit de chargement, hachures en biais et
   texte de 11 px gris pâle. Sur 880 x 550 px, ça donnait un grand rectangle
   rayé avec une phrase illisible au milieu : le mentor ne savait ni ce qui
   se passait ni quoi faire.

   Ici, sur le fond sombre du cadre : une icône, une phrase à taille de
   lecture, et la marche à suivre en dessous.
   -------------------------------------------------------------------------- */
.vbox-vide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
  color: #fff;
}
/* L'icône est un `<span class="ico">` : la règle `.vbox-vide span` plus bas
   l'attrapait aussi et la ramenait à 15,5 px. On la fixe ici, après —
   et une icône d'état vide se voit de loin, donc large. */
/* `>` et non l'espace : la règle attrapait aussi l'icône DANS le bouton
   « Créer la salle » et la gonflait à 44 px. Mesuré : bouton 326 x 56 pour
   un libellé de trois mots. Seule l'icône d'état, enfant direct, est large. */
.vbox-vide > .ico {
  font-size: 44px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
}
.vbox-vide b {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  max-width: 26ch;
}
.vbox-vide span:not(.ico) {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  max-width: 44ch;
}

/* Fil d'Ariane posé en tête de contenu plutôt que dans le bandeau : il
   n'a plus l'air du bandeau au-dessus de lui, mais il doit respirer
   sous le menu et laisser de la place au premier bloc. */
.crumbs--lead { padding-top: 0; margin-bottom: 22px; }

/* Tête de page : fil d'Ariane et titre, sous le menu et hors du bandeau.
   Le bloc respire peu au-dessus (il suit le menu) et laisse le premier
   bloc de contenu se rapprocher — d'où la règle de voisinage, qui évite
   d'avoir à toucher chaque page. */
.page-head { padding-top: 30px; }
.page-head .h2--brand { margin-bottom: 0; }
.page-head .lead { margin-top: 12px; }
.page-head + .section { padding-top: 34px; }

/* Tête de page à deux colonnes : l'intitulé à gauche, l'action de la page
   à droite, alignés sur la même ligne de base. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 26px;
  flex-wrap: wrap;
}
.page-head-main { min-width: 0; }
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}

/* Nom de mentor cliquable : il doit se lire comme un lien sans crier plus
   fort que le texte qui l'entoure — d'où le soulignement discret plutôt
   qu'une couleur pleine, et l'icône de lien externe réduite. */
.mentor-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-4);
  text-underline-offset: 3px;
}
.mentor-link:hover { color: var(--brand); text-decoration-color: var(--brand-line-2); }
.mentor-link .ico { margin-left: 4px; vertical-align: -2px; opacity: .55; }
.mentor-link:hover .ico { opacity: 1; color: var(--brand); }

/* Tuile de mentor illustrée par sa photo.

   La photo est posée en FOND, sous le même dégradé que les tuiles rayées :
   le nom et l'accroche restent donc lisibles sur une photo claire comme
   sur une photo chargée, sans règle supplémentaire. Passer par le fond
   plutôt que par une `<img>` évite au passage les règles de la feuille qui
   visent les images contenues dans une tuile. */
.tile--photo {
  overflow: hidden;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.12) 42%,
      rgba(0, 0, 0, 0) 62%
    ),
    var(--photo) center / cover no-repeat;
}

/* Pied d'une tuile de mentor : l'action principale et le retrait,
   séparés — le second se reconnaît à son icône, pas à un mot noyé dans
   une phrase. */
.tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tile-actions .btn { flex: 1 1 auto; justify-content: center; }

/* Initiales colorées, repli quand une personne n'a pas de photo.
   Même traitement que les images qui occupent une boîte d'avatar : elles
   la remplissent et en épousent l'arrondi. */
.ph-initials {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Logo d'un moyen de paiement dans la liste des choix : hauteur fixe pour
   que des fichiers de formats très différents (PNG carré, SVG large, GIF)
   s'alignent sur une même ligne. */
.pay-logo {
  height: 30px;
  width: auto;
  max-width: 86px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Champ de numéro de carte : les marques se posent dans le champ, à
   droite, sans recouvrir la saisie. */
.card-input {
  position: relative;
  display: block;
}
.card-input .input { padding-right: 96px; }

.card-brands {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.card-brand {
  display: none;
  height: 24px;
  width: auto;
}
.card-brand.is-on { display: block; }

/* Case des conditions signalée quand on tente de payer sans l'avoir
   cochée. Le liseré passe par `box-shadow` : une bordure changerait la
   hauteur de la ligne et ferait sauter le formulaire au moment même où on
   attire l'œil dessus. */
@keyframes lernen-attention {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
/* Le sélecteur porte sur `[data-agreement]` et non sur `.radio` : c'est
   l'attribut que le script cherche (`main.js`, section 25), et c'est donc lui
   qui doit décider de l'apparence. Accrochée à `.radio`, la règle a cessé de
   s'appliquer le jour où l'écran de réservation a changé de balisage — le
   script continuait de poser `is-asking`, plus rien ne le montrait. */
.radio.is-asking,
[data-agreement].is-asking,
[data-card].is-asking {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
  animation: lernen-attention .5s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .radio.is-asking,
  [data-agreement].is-asking,
  [data-card].is-asking { animation: none; }
}

/* Récapitulatif cliquable : il se comporte comme un lien sans en prendre
   la couleur — c'est une carte qu'on ouvre, pas un mot dans une phrase. */
.recap--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .18s ease;
}
.recap--link:hover { background: var(--surface-2); color: inherit; }
.recap--link > .ico { color: var(--muted-4); }
.recap--link:hover > .ico { color: var(--brand); }

/* =============================================================
   Profil mentor — la photo d'abord
   La photo décide de la fiche : elle prend donc la place d'un
   vrai bloc, avec ses conseils lisibles à côté plutôt que dans
   une aide à déplier. Les champs, eux, suivent.
   ============================================================= */
.photo-set {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.photo-drop--xl { width: 260px; height: 260px; }

/* Un conseil « à éviter » se lit à sa croix, pas à sa couleur de
   texte : la liste reste noire, seule l'icône passe en corail. */
.check--no .ico { color: var(--brand); }

@media (max-width: 760px) {
  .photo-set { grid-template-columns: minmax(0, 1fr); }
  .photo-drop--xl { width: 100%; height: 300px; }
}

/* =============================================================
   Bandeau de confirmation
   Le placement que les utilitaires Bootstrap donnaient au bandeau
   sur le site public (`position-fixed start-50 translate-middle-x`)
   — cet espace ne les charge pas. L'habillage, lui, vient de
   css/main.css : on ne le redessine pas, il est déjà juste.
   ============================================================= */
.lrn-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: min(92vw, 520px);
  pointer-events: none;
}

/* Le bandeau lui-même reste cliquable (fermeture, lien éventuel),
   la zone autour ne doit pas bloquer la page. */
.lrn-toast .am-themetoast { pointer-events: auto; }

/* --- avancement, dans la tête de page ------------------------
   Trois lignes ne justifiaient pas une colonne de 340 px prise au
   formulaire : le chiffre rejoint le titre, à l'endroit où on
   vient le chercher. Le détail de ce qui manque vit sur les
   tuiles du rail, en pastille. */
.scorehead {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--r-xs);
  background: var(--surface);
}
.scorehead-body { display: flex; flex-direction: column; gap: 7px; }
.scorehead-body b { font-size: 13.5px; font-weight: 800; color: var(--muted-2); }
.scorehead .bar { width: 132px; }
.score-percent { font-size: 20px; font-weight: 800; color: var(--brand); }


/* =============================================================
   Héros du tableau de bord — le dégradé, pas le cadre
   Le héros était une carte : arrondi de 34 px, fond crème, posée
   à 14 px des bords de la page. On y lisait un encadré au-dessus
   du contenu, alors que la couleur du haut doit se fondre dans la
   page — c'est un ciel, pas un bloc.

   Elle sort donc du rembourrage de `.page` par des marges
   négatives, perd son arrondi et son fond plein : ne restent que
   les taches colorées de <x-animated-hero-background />, déjà
   masquées vers le bas, qui s'éteignent dans le blanc.

   Cadré sur `.lrn-dashboard` : le héros du site public garde sa
   carte, où elle a un sens.
   ============================================================= */
.lrn-dashboard .hero {
  border-radius: 0;
  background-color: transparent;
  margin: -14px -14px 0;
  /* 120 px réservés à la barre flottante + les 14 px de rembourrage
     que la marge négative vient d'annuler : le contenu ne bouge pas
     d'un pixel, seul le fond descend jusqu'aux bords. */
  padding-top: 134px;
}

/* Le trait net sous la rangée de pastilles venait de là.
   Le fond animé s'arrête à la hauteur du héros ; ses taches et son
   dégradé de base finissent bien en blanc, mais son GRAIN
   (`.hb-noise`, un bruit gris en fondu multiplicatif) couvre toute
   la surface à opacité constante et se coupait d'un coup au bord
   inférieur — d'où la ligne, à peine grise mais parfaitement
   droite.

   Le calque entier s'éteint donc vers le bas, grain compris : la
   couleur du haut rejoint le blanc du corps sans qu'aucune arête
   ne subsiste. Les héros du site public ont ce masque depuis
   toujours (`.ft-hero-bg > .hb-root`) ; celui du tableau de bord
   était le seul à en manquer. Il reste pleinement opaque sur sa
   moitié haute, là où les couleurs travaillent. */
.lrn-dashboard .hero > .hb-root {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}

/* Sous 640 px, `.page` ne garde que 10 px de rembourrage — la marge
   négative doit le suivre, sinon le fond laisse une bordure blanche
   sur les côtés. L'arrondi que le mobile rend au héros n'a pas plus
   lieu d'être ici que sur grand écran. */
@media (max-width: 640px) {
  .lrn-dashboard .hero {
    margin: -10px -10px 0;
    border-radius: 0;
    padding-top: 130px;
  }
}

/* =============================================================
   MON PROFIL — d'après mew_dash/mon-profil-mentorni.html
   Les valeurs de la maquette, reprises au pixel : tailles de
   texte, rembourrages, arrondis, couleurs, ombres. Les styles
   en ligne du fichier de référence deviennent ces classes ;
   rien n'est arrondi ni « adapté ».
   ============================================================= */

/* --- la colonne de droite du titre --------------------------- */
.mp-side { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); }

.mp-see {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 20px; border-radius: 22px;
  background: #EAF7F0; font-size: 16px; font-weight: 900; color: #1F5F44; white-space: nowrap;
}
.mp-see:hover { background: #D8F0E3; color: #1F5F44; }
.mp-see .ico { font-size: 19px; }

.mp-score { background: #FFF5F5; border-radius: 22px; padding: 16px 22px; }
.mp-score-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 9px; }
.mp-score-top span { font-size: 16px; font-weight: 800; color: #4A4A4E; }
.mp-score-top b { font-size: 26px; font-weight: 900; color: #FF6363; }
.mp-score-bar { height: 10px; border-radius: 99px; background: #FFE1E1; overflow: hidden; }
.mp-score-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFBCBC, #FF6363); }

/* --- « Il te reste N choses à faire » ------------------------ */
.mp-todo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  border-radius: 30px; padding: 26px 30px; margin-bottom: 26px;
  box-shadow: 0 26px 50px -26px rgba(60, 30, 25, .3);
}
.mp-todo-body { flex: 1 1 340px; min-width: 280px; }
.mp-todo-title { display: block; font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.mp-todo-sub { display: block; font-size: 17px; font-weight: 700; color: #FFF0EE; line-height: 1.45; }
.mp-todo-btn {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 16px 26px;
  border: 0; border-radius: 44px; background: #fff; color: #E14A4A;
  font-family: inherit; font-size: 19px; font-weight: 900; cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(60, 30, 25, .45);
}
.mp-todo-btn .ico { font-size: 24px; }

/* --- le bandeau vert ----------------------------------------- */
.mp-saved {
  display: flex; align-items: center; gap: 12px;
  background: #EAF7F0; border-radius: 20px; padding: 16px 20px; margin-bottom: 20px;
  font-size: 18px; font-weight: 800; color: #1F7A4D;
}
.mp-saved .ico { font-size: 24px; }

/* --- « Ce que voient les apprenants » ------------------------ */
.mp-label { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.mp-label i { display: block; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #FFBCBC, #FF6363); }
.mp-label span { font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #7C7B80; }

/* --- les six cartes ------------------------------------------ */
.mp-rows { display: flex; flex-direction: column; gap: 14px; }

.mp-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; width: 100%;
  text-align: left; padding: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 28px);
  border: 2px solid #F0EBE7; border-radius: 26px; background: #fff;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 10px 26px -18px rgba(60, 30, 25, .2);
}
.mp-row:hover { border-color: #FF6363; }
.mp-row.is-todo { border-color: #FFC4C4; }

.mp-num {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 20px; flex: none;
  background: #F9F7F5; font-size: 24px; font-weight: 900; color: #7C7B80;
}
.mp-row.is-todo .mp-num { background: #FFF1F1; color: #E14A4A; }

.mp-body { flex: 1 1 300px; min-width: 0; }
.mp-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-name { font-size: 22px; font-weight: 900; color: #1C1C1E; }

.mp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 900; border-radius: 44px; padding: 6px 14px;
}
.mp-pill .ico { font-size: 18px; }
.mp-pill--done { color: #1F7A4D; background: #EAF7F0; }
.mp-pill--todo { color: #A76A00; background: #FFF3E0; }

.mp-value-label {
  display: block; font-size: 14px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #A3A2A7; margin: 12px 0 5px;
}
.mp-value {
  display: block; font-size: 18px; font-weight: 700; color: #333236; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mp-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 54px; padding: 14px 24px; border-radius: 44px;
  font-size: 18px; font-weight: 900;
}
.mp-go .ico { font-size: 21px; }
.mp-go--done { background: #F9F7F5; color: #1C1C1E; }
.mp-go--todo { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff; }

.mp-lock {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 28px; font-size: 17px; font-weight: 700; color: #7C7B80;
}
.mp-lock .ico { font-size: 22px; }

/* --- l'écran d'édition --------------------------------------- */
.mp-back {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  border: 0; background: none; padding: 8px 2px;
  font-family: inherit; font-size: 17px; font-weight: 800; color: #4A4A4E; cursor: pointer;
}
.mp-back .ico { font-size: 22px; }

.mp-prog { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.mp-prog-bar { flex: 1; height: 10px; border-radius: 99px; background: #F2EDEA; overflow: hidden; }
.mp-prog-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFBCBC, #FF6363); }
.mp-prog span { font-size: 17px; font-weight: 800; color: #5B5A5E; white-space: nowrap; }

.mp-card {
  background: #fff; border-radius: 30px;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 44px) clamp(24px, 4vw, 36px);
  box-shadow: 0 26px 50px -26px rgba(60, 30, 25, .3);
}
.mp-h2 {
  font-family: var(--font-display); font-size: clamp(28px, 5vw, 36px); line-height: 1.14;
  margin: 0 0 12px; color: #1C1C1E; font-weight: 400;
}
.mp-lead { margin: 0 0 30px; font-size: 19px; line-height: 1.55; color: #4A4A4E; max-width: 760px; }
.mp-h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin: 0 0 8px; color: #1C1C1E; }
.mp-sub { margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: #4A4A4E; max-width: 760px; }
.mp-rule { height: 1px; background: #F0EBE7; margin: 34px 0 30px; }

/* --- la photo et ses conseils -------------------------------- */
.mp-photo-grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.mp-photo-col { width: 240px; flex: none; }
.mp-photo {
  display: flex; align-items: flex-end; justify-content: center;
  width: 240px; height: 240px; border-radius: 26px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #F4F1EE 0 10px, #EDE8E4 10px 20px);
  cursor: pointer;
}
.mp-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mp-photo-main {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; margin-top: 16px; border: 0; border-radius: 44px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff;
  font-family: inherit; font-size: 19px; font-weight: 900; cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(255, 99, 99, .7);
}
.mp-photo-main .ico { font-size: 23px; }

.mp-photo-second {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 12px; border: 0; border-radius: 44px;
  background: #F9F7F5; font-family: inherit; font-size: 17px; font-weight: 800;
  color: #1C1C1E; cursor: pointer;
}
.mp-photo-second .ico { font-size: 22px; }
.mp-photo-second[disabled] { opacity: .45; cursor: not-allowed; }

.mp-tips { flex: 1 1 380px; min-width: 320px; background: #F9F7F5; border-radius: 26px; padding: 26px 28px; }
.mp-tips-title { font-size: 20px; font-weight: 900; color: #1C1C1E; margin-bottom: 16px; }
.mp-tips-list { display: flex; flex-direction: column; gap: 13px; }
.mp-tip { display: flex; gap: 12px; align-items: flex-start; font-size: 17.5px; line-height: 1.45; color: #333236; }
.mp-tip .ico { font-size: 23px; flex: none; }
.mp-tip--ok .ico { color: #3BB273; }
.mp-tip--no .ico { color: #E14A4A; }
.mp-tips-rule { height: 1px; background: #E9E2DE; margin: 22px 0; }

/* --- la vidéo ------------------------------------------------ */
.mp-ok-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background: #EAF7F0; border-radius: 22px; padding: 18px 22px;
}
.mp-ok-row > .ico { font-size: 26px; color: #1F7A4D; }
.mp-ok-row b { flex: 1; min-width: 200px; font-size: 18px; font-weight: 800; color: #1F7A4D; }
.mp-ok-btn {
  min-height: 52px; padding: 12px 22px; border: 0; border-radius: 44px; background: #fff;
  font-family: inherit; font-size: 17px; font-weight: 900; color: #E14A4A; cursor: pointer;
}

.mp-drop {
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
  min-height: 96px; padding: 20px 24px; border: 2px dashed #E4DFDB; border-radius: 22px;
  background: #F9F7F5; font-family: inherit; cursor: pointer;
}
.mp-drop:hover { border-color: #FF6363; }
.mp-drop-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; background: #fff; flex: none;
}
.mp-drop-ico .ico { font-size: 26px; color: #A3A2A7; }
.mp-drop-body { flex: 1; min-width: 0; }
.mp-drop-body b { display: block; font-size: 19px; font-weight: 900; color: #1C1C1E; }
.mp-drop-body span { display: block; font-size: 16px; font-weight: 700; color: #7C7B80; margin-top: 3px; }

/* --- les champs ---------------------------------------------- */
.mp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.mp-field { display: block; }
.mp-flabel { display: block; font-size: 18px; font-weight: 900; color: #1C1C1E; margin-bottom: 9px; }
.mp-flabel em { font-style: normal; font-weight: 700; color: #7C7B80; }
.mp-input {
  width: 100%; min-height: 62px; padding: 16px 18px;
  border: 1.5px solid #E4DFDB; border-radius: 20px; background: #fff;
  font-family: inherit; font-size: 20px; font-weight: 700; color: #1C1C1E; outline: none;
}
.mp-input:focus { border-color: #FF6363; }

/* UN CHAMP BORDÉ NE PREND PAS UN LISERÉ EN PLUS.
   `.lrn-lisible :is(button, select, a, …):focus-visible` pose un liseré
   corail de 3 px à 3 px d'écart. Son commentaire dit pourquoi : « un bouton,
   un lien, une liste déroulante n'ont rien ». Mais ces listes-ci portent
   `.mp-input` ou `.mn-select`, donc une bordure : au focus, on lisait deux
   traits corail concentriques autour du même mot.

   L'indicateur n'est pas retiré, il est unifié — même geste que le champ à
   bulles juste à côté : la bordure passe au corail, un halo doux la double.
   Assez spécifique (0,3,0) pour passer devant les deux règles qui posent le
   liseré : (0,2,1) chacune. */
.lrn-lisible :is(.mp-input, .mn-input, .mn-select, .mn-textarea):focus,
.lrn-lisible :is(.mp-input, .mn-input, .mn-select, .mn-textarea):focus-visible,
.mn-page :is(.mp-input, .mn-input, .mn-select, .mn-textarea):focus,
.mn-page :is(.mp-input, .mn-input, .mn-select, .mn-textarea):focus-visible {
  outline: none;
  border-color: #FF6363;
  box-shadow: 0 0 0 4px rgba(255, 99, 99, 0.16);
}
.mp-input::placeholder { color: #A3A2A7; font-weight: 700; }
.mp-help { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #6E6D72; }
.mp-error { display: block; margin-top: 10px; font-size: 17px; font-weight: 800; color: #E14A4A; }

/* --- la présentation ----------------------------------------- */
.mp-questions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.mp-question { display: flex; gap: 12px; align-items: baseline; }
.mp-question b { font-size: 18px; font-weight: 900; color: #FF6363; }
.mp-question span { font-size: 18px; font-weight: 800; color: #1C1C1E; }
.mp-textarea {
  width: 100%; min-height: 210px; padding: 18px;
  border: 1.5px solid #E4DFDB; border-radius: 22px; background: #fff;
  font-family: inherit; font-size: 19px; line-height: 1.6; font-weight: 500;
  color: #1C1C1E; resize: vertical; outline: none;
}
.mp-textarea:focus { border-color: #FF6363; }
.mp-count { margin: 12px 0 0; font-size: 17px; font-weight: 800; color: #4A4A4E; }

/* --- le parcours --------------------------------------------- */
.mp-warn {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px;
  border-radius: 22px; background: #FFF3E0; margin-bottom: 26px;
  font-size: 18px; font-weight: 800; color: #A76A00;
}
.mp-warn .ico { font-size: 26px; color: #A76A00; flex: none; }

.mp-box { background: #F9F7F5; border-radius: 26px; padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 28px); }
.mp-box-title { font-size: 20px; font-weight: 900; color: #1C1C1E; margin-bottom: 8px; }
.mp-box-sub { font-size: 17px; font-weight: 700; color: #6E6D72; margin-bottom: 16px; }

.mp-seg { display: flex; flex-wrap: wrap; gap: 8px; background: #EFEAE6; border-radius: 44px; padding: 6px; margin-bottom: 24px; }
.mp-seg button {
  display: flex; flex: 1 1 190px; justify-content: center; align-items: center; gap: 9px;
  min-height: 52px; padding: 13px 18px; border: 0; border-radius: 44px;
  font-family: inherit; font-size: 18px; font-weight: 900; cursor: pointer;
  background: transparent; color: #7C7B80;
}
.mp-seg button .ico { font-size: 22px; }
.mp-seg button.is-on { background: #fff; color: #1C1C1E; box-shadow: 0 6px 16px -8px rgba(60, 30, 25, .35); }

.mp-list-label {
  font-size: 14px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: #A3A2A7; margin-bottom: 10px;
}
.mp-list { display: flex; flex-direction: column; gap: 10px; }
.mp-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; background: #fff; }
.mp-entry-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 15px; background: #F9F7F5; flex: none;
}
.mp-entry-ico .ico { font-size: 23px; color: #E14A4A; }
.mp-entry-body { flex: 1 1 220px; min-width: 0; }
.mp-entry-body b { display: block; font-size: 18px; font-weight: 900; color: #1C1C1E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-entry-body span { display: block; font-size: 16px; font-weight: 700; color: #7C7B80; }

.mp-file {
  display: inline-flex; align-items: center; gap: 8px; max-width: 220px;
  font-size: 15px; font-weight: 800; color: #1F7A4D; background: #EAF7F0;
  border-radius: 44px; padding: 9px 15px;
}
.mp-file .ico { font-size: 19px; flex: none; }
.mp-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-file button { border: 0; background: none; padding: 0; cursor: pointer; display: flex; color: #1F7A4D; }
.mp-file button .ico { font-size: 18px; }

.mp-attach {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 18px;
  border: 2px dashed #D8D2CD; border-radius: 44px;
  font-size: 15px; font-weight: 800; color: #4A4A4E; cursor: pointer; background: #F9F7F5;
}
.mp-attach .ico { font-size: 19px; }

.mp-round {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%;
  background: #F9F7F5; cursor: pointer; color: #E14A4A;
}
.mp-round .ico { font-size: 21px; }

.mp-empty { padding: 18px 20px; border-radius: 18px; background: #fff; font-size: 17px; font-weight: 700; color: #7C7B80; }
.mp-other { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 16px; font-weight: 700; color: #7C7B80; }
.mp-other .ico { font-size: 20px; color: #A3A2A7; }

.mp-form { display: flex; flex-direction: column; gap: 20px; }
.mp-form .mp-input { min-height: 60px; padding: 15px 18px; font-size: 19px; }
.mp-form .mp-flabel { font-size: 17px; margin-bottom: 8px; }
.mp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }

.mp-attach-big {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border: 2px dashed #D8D2CD; border-radius: 22px; background: #fff; cursor: pointer;
}
.mp-attach-big .mp-drop-ico { width: 50px; height: 50px; background: #F9F7F5; }
.mp-attach-big .mp-drop-ico .ico { font-size: 25px; }
.mp-attach-big b { display: block; font-size: 18px; font-weight: 900; color: #1C1C1E; }
.mp-attach-big span { display: block; font-size: 16px; font-weight: 700; color: #7C7B80; margin-top: 2px; }

.mp-file-big { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 22px; background: #EAF7F0; }
.mp-file-big > .ico { font-size: 25px; color: #1F7A4D; }
.mp-file-big b { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; color: #1F7A4D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-file-big button {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 44px; background: #fff;
  font-family: inherit; font-size: 16px; font-weight: 900; color: #1F7A4D; cursor: pointer;
}

.mp-add {
  display: flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start;
  min-height: 56px; padding: 15px 26px; border: 0; border-radius: 44px;
  font-family: inherit; font-size: 18px; font-weight: 900; cursor: pointer;
  background: #F2EDEA; color: #A3A2A7;
}
.mp-add .ico { font-size: 22px; }
.mp-add.is-ready { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff; }

/* --- les pièces justificatives ------------------------------- */
.mp-docs { display: flex; flex-direction: column; gap: 14px; }
.mp-doc { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 16px 22px; border-radius: 22px; background: #F9F7F5; }
.mp-doc > .ico { font-size: 26px; flex: none; }
.mp-doc-body { flex: 1; min-width: 0; }
.mp-doc-body b { display: block; font-size: 19px; font-weight: 800; color: #1C1C1E; }
.mp-doc-body span { display: block; font-size: 16px; font-weight: 700; color: #A76A00; margin-top: 2px; }
.mp-doc-btn {
  min-height: 52px; padding: 12px 22px; border: 0; border-radius: 44px;
  font-family: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
  background: #fff; color: #E14A4A;
}
.mp-doc-btn--done { background: #EAF7F0; color: #1F7A4D; }

/* --- le pied de l'écran d'édition ---------------------------- */
.mp-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 36px; padding-top: 26px; border-top: 1px solid #F0EBE7;
}
.mp-cancel {
  min-height: 60px; padding: 16px 26px; border: 0; border-radius: 44px; background: #F9F7F5;
  font-family: inherit; font-size: 18px; font-weight: 800; color: #1C1C1E; cursor: pointer;
}
.mp-save {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 16px 30px;
  border: 0; border-radius: 44px; background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff; font-family: inherit; font-size: 19px; font-weight: 900; cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(255, 99, 99, .7);
}
.mp-save .ico { font-size: 23px; }
.mp-save[disabled], .mp-add[disabled] { opacity: .6; cursor: not-allowed; }
.mp-next { text-align: right; font-size: 16px; font-weight: 700; color: #7C7B80; margin-top: 12px; }

@media (max-width: 620px) {
  .mp-photo-col, .mp-photo { width: 100%; }
  .mp-go { width: 100%; }
  .mp-next { text-align: left; }
}

/* =============================================================
   MON COMPTE — d'après mew_dash/mon-compte-mentorni.html
   Réutilise le vocabulaire de « Mon profil » (mp-*) : mêmes
   cartes, mêmes champs, mêmes segments. Seuls trois objets lui
   sont propres — l'interrupteur, le lien vers les revenus, le
   bloc de fermeture.
   ============================================================= */

/* Un groupe suit l'autre : l'intitulé du second respire. */
.mp-label--space { margin-top: 40px; }

/* --- l'interrupteur d'une alerte ------------------------------
   L'état s'écrit à côté, en toutes lettres : la seule couleur
   d'un bouton ne se lit pas, et surtout pas de loin. */
.mp-switch-state { font-size: 17px; font-weight: 900; flex: none; }

.mp-switch {
  width: 62px; height: 34px; flex: none; padding: 3px;
  border: 0; border-radius: 44px; background: #D8D2CD; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start;
  transition: background .16s ease;
}
.mp-switch.is-on { background: #3BB273; justify-content: flex-end; }
.mp-switch > i { display: block; width: 28px; height: 28px; border-radius: 50%; background: #fff; }

/* --- le chemin vers « Mes revenus » --------------------------- */
.mp-money-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; min-height: 52px; padding: 14px 22px;
  border-radius: 44px; background: #F9F7F5;
  font-size: 17px; font-weight: 900; color: #1C1C1E;
}
.mp-money-link:hover { background: #F2EDEA; color: #1C1C1E; }
.mp-money-link .ico { font-size: 22px; color: #7C7B80; }

/* --- l'état d'un outil, dit en toutes lettres ----------------- */
.mp-state { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.mp-state .ico { font-size: 22px; }

/* --- la case « même numéro » ---------------------------------- */
.mp-check { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; }
.mp-check input { width: 24px; height: 24px; accent-color: #FF6363; flex: none; }
.mp-check span { font-size: 17px; font-weight: 700; color: #4A4A4E; }

/* --- fermer son compte ----------------------------------------
   Sobre, à l'écart, en deux temps. Jamais un bouton rouge plein
   qu'on clique par réflexe. */
.mp-danger {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 48px; padding: 26px 28px;
  border: 1.5px solid #F0EBE7; border-radius: 26px; background: #FDFBFA;
}
.mp-danger-body { flex: 1 1 320px; min-width: 260px; }
.mp-danger-body b { display: block; font-size: 19px; font-weight: 900; color: #1C1C1E; margin-bottom: 4px; }
.mp-danger-body span { display: block; font-size: 16px; font-weight: 700; color: #6E6D72; line-height: 1.45; }

.mp-danger-link {
  border: 0; background: none; padding: 14px 8px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 800; color: #6E6D72;
  text-decoration: underline; text-underline-offset: 3px;
}
.mp-danger-link:hover { color: #E14A4A; }

.mp-danger-do {
  min-height: 56px; padding: 15px 26px; border: 1.5px solid #E14A4A; border-radius: 44px;
  background: #fff; font-family: inherit; font-size: 17px; font-weight: 900;
  color: #E14A4A; cursor: pointer;
}
.mp-danger-do:hover { background: #FFF1F1; }

@media (max-width: 620px) {
  .mp-danger { flex-direction: column; align-items: stretch; }
  .mp-money-link { width: 100%; justify-content: center; }
}

/* =============================================================
   Mon profil / Mon compte — l'ouverture d'une carte
   Passer de la liste à un réglage se faisait d'un coup : le
   contenu changeait sans qu'on voie d'où il venait, et l'œil
   devait retrouver seul où il en était. Une montée d'un cheveu,
   le temps d'un clignement, suffit à relier les deux écrans.

   `paneIn` est le fondu déjà utilisé par les panneaux du site
   (section 4441) : on ne réinvente pas une courbe.
   ============================================================= */
.mp-card,
.mp-rows {
  animation: paneIn .26s cubic-bezier(.22, .8, .28, 1) both;
}

/* Les cartes de la liste montent l'une après l'autre, très
   légèrement : de quoi lire un ordre, pas de quoi attendre. */
.mp-rows > .mp-row {
  animation: paneIn .3s cubic-bezier(.22, .8, .28, 1) both;
}
.mp-rows > .mp-row:nth-child(2) { animation-delay: .03s; }
.mp-rows > .mp-row:nth-child(3) { animation-delay: .06s; }
.mp-rows > .mp-row:nth-child(4) { animation-delay: .09s; }
.mp-rows > .mp-row:nth-child(5) { animation-delay: .12s; }
.mp-rows > .mp-row:nth-child(6) { animation-delay: .15s; }

/* Le bandeau vert d'après-enregistrement arrive de la même façon. */
.mp-saved { animation: paneIn .26s cubic-bezier(.22, .8, .28, 1) both; }

/* Une animation d'entrée est un agrément, jamais une condition :
   qui demande moins de mouvement n'en a aucun. */
@media (prefers-reduced-motion: reduce) {
  .mp-card,
  .mp-rows,
  .mp-rows > .mp-row,
  .mp-saved {
    animation: none;
  }
}

/* ==============================================================
   14. GRANDE ÉCHELLE — `.lrn-lisible`
   --------------------------------------------------------------
   Une partie du back-office était restée à l'échelle du site
   public : étiquettes à 15 px, aides à 14 px en gris pâle, champs
   sans bordure sur fond crème. Sur « Mon profil » et « Mon compte »,
   refaits pour des mentors de 50 à 70 ans, les mêmes briques se
   lisent à 18-20 px sur fond blanc bordé. Le back-office parlait
   donc deux langues selon la page.

   Ce bloc n'invente aucune brique : il remonte celles qui existent
   déjà, aux valeurs des deux pages refaites. Il ne s'applique que
   sous `.lrn-lisible` — posée sur les écrans de création (annonce,
   cours) et sur le salon. Le site public et le reste du tableau de
   bord ne bougent pas d'un pixel.
   ============================================================== */

.lrn-lisible {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}

/* 1,55 est fait pour du texte qui coule, pas pour un titre : `.h3`, `.h4`,
   `.h5` et `.display` ne déclarent pas leur interligne et héritaient donc
   du nôtre — un intitulé de section sur une ligne gagnait douze pixels de
   hauteur pour rien. `.h1`, `.h2` et `.lead` posent le leur, on n'y touche
   pas. */
.lrn-lisible :is(.h3, .h4, .h5, .display) {
  line-height: 1.25;
}

/* --- Étiquettes et aides ------------------------------------- */

.lrn-lisible .field {
  gap: 9px;
}

.lrn-lisible .label {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}

/* Une aide se lit ou ne sert à rien : 14 px en #8a8a8f, personne ne
   la lisait. Jamais de texte utile dans les gris de décor. */
.lrn-lisible .hint,
.lrn-lisible .cell-sub {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted-2);
}

/* Sur fond de marque, ces mêmes textes restent blancs. */
.lrn-lisible .card--brand .hint,
.lrn-lisible .card--brand .cell-sub {
  color: rgba(255, 255, 255, 0.82);
}

.lrn-lisible .ann-note {
  font-size: 19px;
  color: var(--ink-mid);
}

.lrn-lisible .form-head p {
  font-size: 19px;
  color: var(--ink-mid);
}

.lrn-lisible .tip-head {
  font-size: 17px;
}

/* Sur-titre : plus petit que tout, donc espacé et franchement gris. */
.lrn-lisible .ann-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}

.lrn-lisible .h4 {
  font-size: 23px;
  font-weight: 900;
}

/* --- Champs de saisie ---------------------------------------- */

/* Bordure visible et fond blanc : sur fond crème sans contour, on ne
   savait pas si un champ était rempli ou si le texte gris était un
   exemple. Pas de `padding` en raccourci ici — deux règles plus haut
   réservent la place d'une icône à droite (`.input-wrap`,
   `.card-input`), et un raccourci les effacerait. */
.lrn-lisible .input {
  height: 62px;
  border-color: var(--line-4);
  background: #fff;
  font-size: 20px;
  font-weight: 700;
}

.lrn-lisible .input:focus {
  border-color: var(--brand);
}

.lrn-lisible .input::placeholder {
  color: var(--muted-4);
  font-weight: 500;
}

/* Champ inerte : visiblement inerte, pas seulement plus pâle. */
.lrn-lisible .input:disabled {
  background: var(--surface);
  color: var(--muted-2);
}

.lrn-lisible textarea.input {
  height: auto;
  min-height: 210px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

/* La ligne d'objectifs garde ses champs courts : ils s'empilent par
   dizaines, à 62 px la page devenait un couloir. Le bouton de
   suppression suit, sinon il dépasse de la ligne qu'il termine. */
.lrn-lisible .objrow .input {
  height: 56px;
}

.lrn-fullpop .objrow .iconbtn:not([class*="iconbtn--"]) {
  width: 56px;
  height: 56px;
}

.lrn-lisible .bigfield {
  border: 1.5px solid var(--line-4);
  background: #fff;
  font-size: 19px;
  line-height: 1.6;
}

.lrn-lisible .bigfield::placeholder {
  color: var(--muted-4);
}

/* --- Boutons -------------------------------------------------- */

.lrn-lisible .btn {
  height: 60px;
  padding: 0 26px;
  font-size: 19px;
  font-weight: 900;
}

/* Les variantes de taille sont redéclarées : sans elles, la règle
   ci-dessus les aplatirait toutes à la même hauteur. */
.lrn-lisible .btn.is-lg {
  height: 60px;
  padding: 0 26px;
  font-size: 19px;
}

.lrn-lisible .btn.is-50 {
  height: 56px;
  font-size: 18px;
}

.lrn-lisible .btn.is-sm {
  height: 52px;
  padding: 0 20px;
  font-size: 17px;
}

.lrn-lisible .btn.is-xs {
  height: 48px;
  padding: 0 18px;
  font-size: 16px;
}

/* Le bouton rond suit la hauteur des champs qu'il accompagne — mais
   seulement là où les champs sont hauts, c'est-à-dire sur les écrans de
   création, et seulement dans sa forme simple.

   `.iconbtn` a quatre variantes de taille (`--outline` 38, `--plain` 46,
   `--white` et `--grad` 44), toutes définies par une seule classe. Une
   règle en `.lrn-lisible .iconbtn` les écrasait toutes, sur tout le
   tableau de bord : les ronds du menu passaient de 38 à 62 px. */
.lrn-fullpop .iconbtn:not([class*="iconbtn--"]) {
  width: 62px;
  height: 62px;
}

.lrn-fullpop .iconbtn--plain {
  width: 56px;
  height: 56px;
}

/* --- Listes de choix ------------------------------------------ */

.lrn-lisible .pick {
  min-height: 72px;
  font-size: 19px;
}

.lrn-lisible .pick.is-main {
  font-size: 20px;
}

.lrn-lisible .pick small {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted-2);
}

/* Choix retenu : fond de marque, donc textes blancs — la règle
   générale ci-dessus les repasserait en gris. */
.lrn-lisible .pick.is-on small,
.lrn-lisible .pick.is-on .ico {
  color: rgba(255, 255, 255, 0.88);
}

.lrn-lisible .pick.is-disabled .ico {
  color: var(--muted-6);
}

/* --- Détails ligne à ligne ------------------------------------ */

/* La colonne des intitulés s'élargit avec le texte : à 108 px,
   « Sous-catégorie » se cassait en deux lignes une fois grossi. */
.lrn-lisible .kv-k {
  width: 148px;
  font-size: 17px;
}

.lrn-lisible .kv-v {
  font-size: 18px;
}

/* Une grille en `minmax(190px, 1fr)` déborde sous 190 px de large.
   Le `min()` la laisse rétrécir au lieu de pousser la page. */
.lrn-lisible .field-row {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

/* --- Clavier --------------------------------------------------- */

/* Se repérer au clavier demande de voir où l'on est. Mais un cadre noir
   de 3 px sur tout ce qui prend le focus se lisait comme un défaut : sur
   un champ de texte, `:focus-visible` s'active AUSSI au simple clic — le
   mentor cliquait dans la recherche et se retrouvait avec une boîte noire
   autour.

   Deux traitements, donc, selon ce dont l'élément dispose déjà :

   1. Un champ de saisie signale déjà son focus — sa bordure passe au
      rouge de la marque. On ne double pas d'un liseré.
   2. Un bouton, un lien, une liste déroulante n'ont rien : ils gardent le
      liseré, mais dans la couleur de la marque. Il épouse leur arrondi. */

.lrn-lisible :is(button, select, a, [role="button"]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* La pastille de recherche porte son champ sans bordure : c'est elle qui
   montre le focus, sinon il ne se verrait nulle part. */
.lrn-lisible .search:focus-within {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* Les champs qui n'ont pas déjà une bordure de focus en reçoivent une. */
.lrn-lisible .bigfield:focus,
.lrn-lisible .pricefield:focus-within,
.lrn-lisible textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
}

/* --- Le reste des textes à lire ------------------------------- */

/* Ces briques portent des phrases, pas de la décoration : un mentor
   doit les lire pour décider. Les pastilles à taille fixe (numéros
   d'étape, info-bulles, puces de format) gardent la leur — les
   grossir déformerait la ligne qu'elles habitent. */

.lrn-lisible .search input {
  font-size: 18px;
  font-weight: 700;
}

.lrn-lisible .search input::placeholder {
  color: var(--muted-4);
}

.lrn-lisible .ann-aside p {
  font-size: 17px;
  color: var(--ink-mid);
}

.lrn-lisible .check,
.lrn-lisible .radio,
.lrn-lisible .info-row,
.lrn-lisible .banner,
.lrn-lisible .list-empty {
  font-size: 18px;
}

.lrn-lisible .choicechip,
.lrn-lisible .filerow,
.lrn-lisible .photo-drop,
.lrn-lisible .stepper .step {
  font-size: 17px;
}

.lrn-lisible .drop span,
.lrn-lisible .slotline span,
.lrn-lisible .ann-prog-head {
  font-size: 16px;
  color: var(--muted-2);
}

/* Le pourcentage d'avancement reste rouge : c'est le repère que
   l'œil cherche en haut de l'écran. */
.lrn-lisible .ann-prog-head em {
  font-size: 16px;
  color: var(--brand);
}

.lrn-lisible .status {
  font-size: 15px;
}

/* --- Case à cocher en ligne ----------------------------------- */

/* `.checkline` était posée trois fois dans « Créer un cours » sans
   exister nulle part : la case s'affichait telle que le navigateur
   la dessine, minuscule, à côté de champs de 62 px. La brique
   manquait, la voici. */

.checkline {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

.checkline input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}

.lrn-lisible .checkline {
  font-size: 18px;
}

.lrn-lisible .checkline input[type="checkbox"] {
  width: 26px;
  height: 26px;
}

/* --- Le champ de prix ----------------------------------------- */

/* Il vit à côté d'un champ ordinaire : sans bordure ni fond blanc,
   les deux ne se lisaient pas comme deux champs du même formulaire. */
.lrn-lisible .pricefield {
  border: 1.5px solid var(--line-4);
  border-radius: var(--r-md);
  background: #fff;
}

.lrn-lisible .pricefield:focus-within {
  border-color: var(--brand);
}

.lrn-lisible .pricefield b {
  font-size: 19px;
  font-weight: 800;
  color: var(--muted-2);
}

/* --- Le salon ------------------------------------------------- */

/* Les briques propres au salon : la frise, le fil, le compte à rebours,
   la part du mentor. Elles n'existent nulle part ailleurs, la remontée
   générale ne les touchait donc pas — le salon gardait ses 13 à 16 px
   pendant que le reste passait à 18. */

/* La frise des sept étapes. 15 px et pas plus : sept intitulés se
   partagent la largeur, à 18 ils se chevauchent. */
.lrn-lisible .progress-label {
  font-size: 15px;
  color: var(--muted-2);
}

/* Le fil de discussion. */
.lrn-lisible .msg-name {
  font-size: 19px;
}

.lrn-lisible .chat-sub {
  font-size: 17px;
  font-weight: 700;
}

/* Les messages du système — « Réservation confirmée », « la salle
   s'ouvrira 30 minutes avant » : ce sont des consignes, pas du décor. */
.lrn-lisible .sys {
  font-size: 17px;
}

/* Le compte à rebours et la part du mentor. */
.lrn-lisible .countdown-lbl {
  font-size: 17px;
}

.lrn-lisible .countdown-num em {
  font-size: 14px;
}

.lrn-lisible .price-line,
.lrn-lisible .cell-name {
  font-size: 18px;
}

/* Les repères posés sur la visio, et le bouton qui clôt la séance. */
.lrn-lisible .vbox-tag,
.lrn-lisible .vbox-timer {
  font-size: 16px;
}

.lrn-lisible .ctrl--end {
  font-size: 18px;
}

/* --- Les médias ne débordent pas ------------------------------ */

/* Un média sans garde-fou s'affiche à sa taille native et fait défiler
   la page de côté. Le cadre commande, pas le fichier.

   À noter : la vidéo de 768 px qui déborde aujourd'hui du salon apprenant
   n'est PAS couverte ici — elle vit dans le tiroir de navigation du site
   (`nvg-*`), une feuille à part qui lui pose `max-width: none`. Ce
   garde-fou vaut pour le contenu du tableau de bord. */
.lrn-lisible :is(img, video, canvas, iframe) {
  max-width: 100%;
}

/* --- Emblème de domaine dans une liste de choix --------------- */

/* `.pico` est prévue pour un icône de la police Material : sa taille est
   posée sur `.pico .ico`, que ne porte pas un emblème. Sans cette règle,
   l'emoji héritait de la taille du texte et se perdait dans son rond.
   Le fond de marque reste, seul le glyphe change de nature. */
.pico--emo {
  font-size: 22px;
  line-height: 1;
}

/* --- Une carte retenue reste lisible -------------------------- */

/* `.pick.is-disabled` et `.pick.is-on` ont la même spécificité, et le
   gris est déclaré plus bas : une carte à la fois retenue et indisponible
   affichait le dégradé de la sélection avec du texte gris dessus. Le fond
   dit « choisi », le texte doit le dire aussi. */
.pick.is-on.is-disabled,
.pick.is-on.is-disabled .ico {
  color: #fff;
}

/* --- Tableau de bord : l'ordre sur téléphone ------------------ */

/* Les deux colonnes portent `display:flex` en style en ligne, comme la
   maquette l'écrit ; sur téléphone elles s'aplatissent et chaque bloc
   reprend son rang — les boutons de création passent juste après les
   dernières réservations, là où ils servent. `order` ne s'exprime pas en
   attribut : c'est la seule règle que cet écran demande.

   Le `!important` est nécessaire pour l'emporter sur le style en ligne. */
@media (max-width: 1083px) {
  .dash {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dash-main,
  .dash-side {
    display: contents !important;
  }

  /* L'ordre du tableau de bord sur téléphone. Cinq blocs de la liste
     d'origine ont disparu de la page — les réservations en ligne, les
     quatre chiffres, les cours, les litiges, les avis — et leurs rangs
     avec eux. Un `order` sur une classe absente ne fait rien, mais il
     laisse croire à un bloc qui existe encore. */
  .dash-cta      { order: 2; }
  .dash-verif    { order: 6; }
  .dash-premium  { order: 7; }
}

/* --- Panneau de notifications : le titre est de l'encre -------- */

/* Le panneau héritait du rouge de marque pour TOUS ses titres, lus comme
   non lus — la feuille colore les liens en marque, et une notification
   est un lien. Huit notifications, c'était huit titres rouges : huit
   alertes, alors que la plupart sont de simples nouvelles.

   Le rouge redevient ce qu'il est ailleurs sur le site : un accent, ici
   réservé à ce qui n'a pas encore été lu. Mêmes valeurs que le panneau
   des pages publiques (`css/notifications-bell.css`), pour que la même
   cloche se lise pareil des deux côtés. */

.notif {
  position: relative;
  color: var(--ink);
}

.notif.is-new::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--brand);
}

.notif-ico {
  color: var(--muted-3);
}

/* Non lu : le rond passe en teinte de marque, pas en aplat plein — le
   texte reste la chose qu'on lit, l'icône n'est qu'un repère. */
.notif.is-new .notif-ico {
  background: var(--brand-soft);
  color: var(--brand);
}

.notif-body b {
  font-size: 17px;
  color: var(--ink);
}

/* 14 px en gris de décor pour une ligne qu'il faut lire : c'était trop
   petit et trop pâle. */
.notif-body span {
  margin-top: 3px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted-2);
}

/* Le pied du panneau passe à la ligne.

   Il tenait trois éléments sur une rangée fixe — « tout marquer comme
   lu », le réglage du son, « Réglages » — dans un panneau de 392 px : le
   bouton du son se coupait en plein mot. */
.sheet-foot,
.lrn-notif-foot {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Le séparateur ne pousse plus quand tout est passé à la ligne : sinon
   il renvoie « Réglages » seul sur une deuxième rangée vide. */
@media (max-width: 460px) {
  .sheet-foot > .grow,
  .lrn-notif-foot > .lrn-notif-grow {
    display: none;
  }
}

/* --- Le panneau des notifications est plus large ------------- */

/* 500 px au lieu des 392 partagés avec le menu et la recherche : ses
   lignes portent un titre, une description, une heure et un bouton
   d'action sur la même rangée — à 392 le titre se cassait en deux.

   `100%` et non `100vw` : la largeur est calculée depuis le conteneur,
   qui exclut déjà la barre de défilement. Avec `100vw`, sur un écran
   étroit à barre visible, le panneau était cinq pixels trop large et
   sortait par la gauche. */
#notifications .sheet-drop {
  width: min(500px, calc(100% - 32px));
}


/* ==================================================================
   Les relances — ce qui reste à finir
   ------------------------------------------------------------------
   Un mentor remplit la moitié de son annonce et s'arrête ; rien ne le
   lui rappelait, et il l'apprenait en ne recevant jamais de
   réservation. Une barre par rappel, en haut de l'écran, avec sa
   croix. Voir App\Support\Lernen\Relances.
   ================================================================== */

.lrn-nudges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.lrn-nudge {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: #fff;
  padding: 18px 56px 18px 20px;
}

/* Le pourcentage porte la teinte du rappel : c'est le premier chiffre
   que l'oeil attrape, et il dit tout de suite s'il y a urgence. */
.lrn-nudge__pct {
  display: flex;
  align-items: baseline;
  flex: none;
  font-family: var(--font-display, "Capriola", Georgia, serif);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}

.lrn-nudge__pct i { font-size: 17px; font-style: normal; font-weight: 900; margin-left: 2px; }

.lrn-nudge__body { display: flex; flex: 1 1 320px; flex-direction: column; gap: 4px; min-width: 0; }

.lrn-nudge__body b { font-size: 18px; font-weight: 900; color: var(--ink); }

.lrn-nudge__body > span { font-size: 16px; font-weight: 700; color: var(--muted); line-height: 1.45; }

.lrn-nudge__bar {
  height: 8px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--surface);
  overflow: hidden;
}

.lrn-nudge__bar i { display: block; height: 100%; border-radius: 99px; }

.lrn-nudge__cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 44px;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

/* Le texte reste blanc au survol. Sans cette ligne, la règle générale
   `a:hover { color: var(--brand-dark) }` l'emportait — elle est plus
   spécifique qu'une classe seule — et le libellé passait en corail sur le
   fond vert ou ambre du bouton, illisible. */
.lrn-nudge__cta:hover,
.lrn-nudge__cta:focus-visible { color: #fff; }

.lrn-nudge__cta .ico { font-size: 20px; }

/* La croix est discrète : elle ne doit pas concurrencer le bouton qui
   fait avancer. Mais 44 px de cible, comme partout. */
.lrn-nudge__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted-2);
  cursor: pointer;
}

.lrn-nudge__x:hover { background: var(--surface); color: var(--ink); }

.lrn-nudge__x .ico { font-size: 21px; }

.lrn-nudge--brand { border-color: var(--brand-line); background: var(--brand-tint); }
.lrn-nudge--brand .lrn-nudge__pct { color: var(--brand-dark); }
.lrn-nudge--brand .lrn-nudge__bar i { background: var(--grad-bar); }
.lrn-nudge--brand .lrn-nudge__cta { background: var(--grad); box-shadow: 0 12px 24px -10px rgba(255, 99, 99, .7); }

.lrn-nudge--sand { border-color: #F1DFC2; background: #FFF9EF; }
.lrn-nudge--sand .lrn-nudge__pct { color: #8A5A00; }
.lrn-nudge--sand .lrn-nudge__bar i { background: linear-gradient(90deg, #F5C877, #E9A23B); }
.lrn-nudge--sand .lrn-nudge__cta { background: #E9A23B; }

.lrn-nudge--green { border-color: #CDE9D9; background: #F6FBF8; }
.lrn-nudge--green .lrn-nudge__pct { color: #1F7A4D; }
.lrn-nudge--green .lrn-nudge__bar i { background: linear-gradient(90deg, #9BD8B8, #1F7A4D); }
.lrn-nudge--green .lrn-nudge__cta { background: #1F7A4D; }

@media (max-width: 620px) {
  .lrn-nudge { gap: 12px 14px; padding: 16px 52px 16px 16px; }
  .lrn-nudge__pct { font-size: 28px; }
  .lrn-nudge__cta { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Une action possible, mais pas maintenant

   « Reporter le cours » disparaissait quand une des règles le refusait, et
   le mentor cherchait une option qu'il croyait perdue. Le bouton reste
   désormais, éteint, et dit POURQUOI au survol.

   Pas l'attribut `disabled` : un bouton désactivé ne reçoit pas le survol
   dans la plupart des navigateurs, et l'infobulle ne se montrerait jamais.
   C'est `aria-disabled` qui porte le sens, et le style qui porte l'air
   éteint.
   -------------------------------------------------------------------------- */
.resa-bt--eteint:hover .tooltip,
.resa-bt--eteint:focus .tooltip,
.resa-bt--eteint:focus-visible .tooltip {
  opacity: 1;
}

/* L'infobulle du kit est en `white-space: nowrap` : elle convient à deux
   mots, pas à une phrase — « Trop tard pour la déplacer : il reste moins de
   24 heures avant le début. » serait sortie de l'écran. Celle-ci se replie. */
.tooltip--phrase {
  white-space: normal;
  width: max-content;
  max-width: 260px;
  line-height: 1.45;
  text-align: center;
}


/* ==========================================================================
   LES TITRES DU SITE

   Tous les niveaux, de h1 à h6, portent la police d'affichage. Elle était
   déjà posée à une trentaine d'endroits, classe par classe — donc absente
   partout où personne n'y avait pensé, et le site parlait deux langues
   typographiques selon l'écran.

   Sélecteurs NUS, à dessein : leur spécificité est la plus faible qui soit,
   et toute règle de classe existante continue de l'emporter. Ce bloc donne
   une police à ce qui n'en avait pas ; il n'en retire à personne.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, "Capriola", Georgia, serif);
}

/* ==========================================================================
   LE TEXTE D'UN AVIS, DANS LE TABLEAU DE BORD
   --------------------------------------------------------------------------
   Un avis et une réponse à un avis gardent leurs retours à la ligne depuis
   qu'ils s'écrivent dans l'éditeur. Le texte arrive donc en paragraphes, là
   où c'était un `<p style="margin:0">` unique.

   Ni gras ni couleur ne sont offerts à l'écriture (mode « nu » de
   l'éditeur, `FicheMentor::BALISES_AVIS`) : il n'y a rien d'autre à
   habiller que l'écart entre deux lignes.
   ========================================================================== */
.mn-avis-texte p { margin: 0; }
.mn-avis-texte p + p { margin-top: 8px; }

/* ============================================================================
   « CE QUE VOIENT LES APPRENANTS » — quatre par ligne
   ============================================================================

   Les huit parties formaient huit bandes pleine largeur empilées : une page
   de deux mille pixels pour huit lignes de trois mots, où il fallait défiler
   pour savoir s'il restait quelque chose à remplir. En grille, les huit
   tiennent sur deux rangées et l'état de chacune se lit d'un coup d'œil.

   Deux écrans la portent : la liste des parties du profil et les trois
   groupes de « Mon compte ». Le modificateur `--grille` reste malgré tout,
   plutôt que la classe nue : `.mp-rows` peut resservir ailleurs, et une
   grille imposée à toute la classe changerait un écran qu'on n'a pas
   regardé.

   La carte passe de la rangée à la colonne, parce qu'un quart de largeur ne
   peut plus tenir le numéro, le texte et le bouton côte à côte.
   ============================================================================ */
.mp-rows--grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.mp-rows--grille > .mp-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 20px;
}

/* Le numéro rapetisse : 58 px pesaient le quart de la carte. */
.mp-rows--grille > .mp-row .mp-num { width: 42px; height: 42px; border-radius: 15px; font-size: 19px; }

/* Le corps prend la place restante et POUSSE le bouton en bas : sans cela,
   les boutons de quatre cartes de hauteurs différentes ne s'alignaient pas. */
.mp-rows--grille > .mp-row .mp-body { flex: 1 1 auto; width: 100%; }
.mp-rows--grille > .mp-row .mp-name { font-size: 18px; line-height: 1.25; }
.mp-rows--grille > .mp-row .mp-pill { font-size: 13px; padding: 5px 11px; }
.mp-rows--grille > .mp-row .mp-pill .ico { font-size: 15px; }
.mp-rows--grille > .mp-row .mp-value-label { font-size: 12px; margin: 10px 0 4px; }

/* Deux lignes puis les points de suspension : en une seule ligne tronquée,
   « Empowring Success through… » ne disait rien du contenu. */
.mp-rows--grille > .mp-row .mp-value {
  font-size: 15px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mp-rows--grille > .mp-row .mp-go {
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  font-size: 15.5px;
}
.mp-rows--grille > .mp-row .mp-go .ico { font-size: 19px; }

/* Quatre cartes de 320 px réclament 1 300 px. En dessous, on descend par
   paliers plutôt que d'écraser le texte. */
@media (max-width: 1180px) { .mp-rows--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .mp-rows--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mp-rows--grille { grid-template-columns: 1fr; } }