/* Site mnesie.app : titres en serif (Instrument Serif), texte en Figtree, couleurs de Mnésie.
   Polices servies par le site lui-même (licence OFL, fichiers dans /polices/). */
@font-face { font-family: "Instrument Serif"; src: url("/polices/instrument-serif-normal.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/polices/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/polices/figtree-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }

:root {
  --papier: #FBF8FD;      /* fond : blanc à peine lilas */
  --papier2: #F3ECF8;
  --encre: #1B1320;
  --encre2: #4D4356;
  --encre3: #685D73;
  --filet: #E6DDEC;
  --aubergine: #3A1748;
  --aubergine2: #2A0F35;
  --accent: #74339C;
  --lilas: #C6A2F2;
  --lilas2: #E9DAFB;
  --marque: #F3E4A6;      /* surligneur des mots difficiles */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --texte: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --large: 1160px;
  --rayon: 36px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.lr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre { width: min(var(--large), 100% - 40px); margin-inline: auto; }
em, .it { font-style: italic; }

/* ---------- Navigation : une barre flottante, comme une pilule posée sur la page ---------- */
.nav { position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 30; padding-inline: 20px; }
.nav-in { width: min(var(--large), 100%); margin: 12px auto 0; display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 18px; background: rgba(251, 248, 253, .86); border: 1px solid var(--filet); border-radius: 18px; -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav-logo img { height: 24px; width: auto; }
.nav-liens { display: flex; gap: 4px; margin-left: auto; }
.nav-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--encre2); text-decoration: none; }
.nav-liens a:hover { background: var(--papier2); color: var(--encre); }
.langues { display: flex; gap: 2px; }
.langues a { display: inline-grid; place-items: center; min-width: 36px; min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--encre2); text-decoration: none; }
.langues a:hover { color: var(--encre); background: var(--papier2); }
.langues a[aria-current] { color: var(--accent); }
.pied-bas .langues { margin-left: auto; }
.pied-bas .langues a { min-height: 36px; color: #A893B8; }
.pied-bas .langues a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pied-bas .langues a[aria-current] { color: #fff; }
.langue-foi { font-size: 14px; color: var(--encre3); font-style: italic; }
.autres-langues { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; background: var(--lilas2); color: var(--aubergine); border: 1.5px solid var(--accent); font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s; }
.bouton:hover { background: var(--lilas); }
.bouton:active { transform: scale(.97); }
.bouton.plein { background: var(--aubergine); color: #fff; border-color: var(--aubergine); }
.bouton.plein:hover { background: var(--aubergine2); }
.bouton.grand { min-height: 58px; padding: 0 30px; font-size: 18px; border-radius: 16px; }
.bouton.clair { background: #fff; color: var(--aubergine); border-color: #fff; }
.bouton.clair:hover { background: var(--lilas2); }
.sous-bouton { margin: 12px 0 0; font-size: 14px; color: var(--encre3); }

/* ---------- Accueil : la phrase du prof qui s'écrit ---------- */
.hero { padding: 72px 0 40px; text-align: center; }
.surtitre { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 9vw, 112px); line-height: .95; letter-spacing: -.02em; color: var(--encre); }
.hero h1 em { color: var(--accent); }
.hero .chapo { max-width: 620px; margin: 26px auto 30px; font-size: clamp(18px, 2.1vw, 21px); color: var(--encre2); }

.direct { position: relative; max-width: 760px; height: 230px; margin: 50px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, transparent 100%); }
.direct ol { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.direct li { display: flex; align-items: baseline; gap: 14px; text-align: left; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.direct li.vu { opacity: 1; transform: none; }
.direct li.passe { opacity: .32; }
.direct .quand { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--lilas2); color: var(--accent); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.direct .quand.fort { background: var(--aubergine); color: #fff; }
.direct .quand b { font-weight: 800; }
.direct p { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; color: var(--encre); }
.direct mark { background: linear-gradient(transparent 55%, var(--marque) 55%); color: inherit; padding: 0 2px; }

/* ---------- Les scènes : de grands aplats aux coins arrondis ---------- */
.scene { position: relative; border-radius: var(--rayon) var(--rayon) 0 0; padding: 110px 0 120px; }
.scene + .scene, .scene.suivie { margin-top: calc(-1 * var(--rayon)); }
.scene.aubergine { background: var(--aubergine); color: #fff; }
.scene.papier2 { background: var(--papier2); }
.scene.papier { background: var(--papier); }
.scene h2 { margin: 0 auto; max-width: 900px; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.015em; }
.scene.aubergine h2 em { color: var(--lilas); }
.scene h2 em { color: var(--accent); }
.scene .chapo { max-width: 640px; margin: 22px auto 0; text-align: center; font-size: 19px; color: var(--encre2); }
.scene.aubergine .chapo { color: #DCCBEA; }

.vitrine { position: relative; margin: 64px auto 0; max-width: 1000px; }
.ecran { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(20, 8, 28, .2), 0 40px 90px rgba(10, 2, 16, .45); border: 8px solid #17101C; }
.ecran img { width: 100%; height: auto; }
.etiquette { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: #fff; color: var(--encre); font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(10, 2, 16, .28); animation: flotte 6s ease-in-out infinite; }
.etiquette b { color: var(--accent); }
.etiquette.et1 { right: -28px; bottom: 36px; }
.etiquette.et2 { left: -30px; top: 30%; animation-delay: -2s; }
.etiquette .pt { width: 9px; height: 9px; border-radius: 50%; background: #E0455B; }
@keyframes flotte { 50% { transform: translateY(-8px); } }

/* ---------- Les quatre moments : la liste s'allume pendant qu'on fait défiler ---------- */
.moments { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 70px; }
.sommaire-moments { position: sticky; top: 120px; align-self: start; list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--filet); display: flex; flex-direction: column; gap: 4px; }
.sommaire-moments a { display: block; padding: 6px 0; font-family: var(--serif); font-size: 20px; color: var(--encre3); text-decoration: none; transition: color .25s; position: relative; }
.sommaire-moments a.actif { color: var(--encre); }
.sommaire-moments a.actif::before { content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 2px; background: #E0455B; }
.moment { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 72vh; padding: 40px 0; }
.moment .ecran { border-width: 6px; box-shadow: 0 2px 6px rgba(20, 8, 28, .12), 0 30px 70px rgba(40, 12, 56, .2); }
.moment h3 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; }
.moment h3 em { color: var(--accent); }
.moment p { margin: 0; font-size: 17.5px; color: var(--encre2); max-width: 420px; }

.apparait { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.apparait.vu { opacity: 1; transform: none; }

/* ---------- Pensée pour étudier ---------- */
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; text-align: center; }
.trois .ic { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; background: var(--lilas2); color: var(--accent); }
.trois .ic svg { width: 36px; height: 36px; }
.trois h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.trois p { margin: 0 auto; max-width: 300px; font-size: 16px; color: var(--encre2); }

/* ---------- Questions ---------- */
.questions { max-width: 820px; margin: 56px auto 0; }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lilas2); color: var(--accent); font-family: var(--texte); font-size: 22px; transition: transform .25s; }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { margin: 0 0 22px; max-width: 680px; font-size: 17px; color: var(--encre2); }

/* ---------- Dernier appel ---------- */
.final { text-align: center; }
.final h2 { margin-bottom: 30px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--aubergine2); color: #DCCBEA; border-radius: var(--rayon) var(--rayon) 0 0; margin-top: calc(-1 * var(--rayon)); padding: 72px 0 calc(40px + env(safe-area-inset-bottom)); position: relative; }
.pied-grille { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied-marque img { height: 26px; width: auto; }
.pied-marque p { margin: 16px 0 0; font-family: var(--serif); font-size: 26px; color: #fff; }
.pied h2 { margin: 0 0 14px; font-family: var(--texte); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lilas); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pied li a, .pied li span { display: inline-flex; align-items: center; min-height: 36px; color: #EFE4F8; text-decoration: none; font-size: 15.5px; }
.pied li a:hover { color: #fff; text-decoration: underline; }
.pied .bientot { color: #A893B8; }
.pied .badge { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(198, 162, 242, .2); color: var(--lilas); font-size: 12px; font-weight: 700; }
.pied-bas { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: #A893B8; }

/* ---------- Pages légales et pages simples : bande sombre, puis la feuille ---------- */
.bande { background: var(--aubergine); color: #fff; padding: 120px 0 calc(90px + var(--rayon)); margin-top: -80px; text-align: center; }
.bande h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 88px); line-height: 1; letter-spacing: -.015em; }
.bande h1 em { color: var(--lilas); }
.bande p { margin: 20px auto 0; max-width: 640px; color: #DCCBEA; font-size: 18px; }
.bande .date { font-size: 15px; color: #B9A5C8; }
.feuille { background: var(--papier); border-radius: var(--rayon) var(--rayon) 0 0; margin-top: calc(-1 * var(--rayon)); position: relative; padding: 70px 0 140px; }
.doc { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 64px; justify-content: center; }
.toc { position: sticky; top: 110px; align-self: start; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 140px); overflow-y: auto; }
.toc a { display: block; padding: 6px 0; font-size: 15px; color: var(--encre3); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.texte h2 { margin: 48px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; scroll-margin-top: 110px; }
.texte h2:first-child { margin-top: 0; }
.texte h3 { margin: 28px 0 8px; font-size: 18px; }
.texte p, .texte li { color: var(--encre2); }
.texte strong { color: var(--encre); }
.texte a { color: var(--accent); }
.texte table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
.texte th, .texte td { text-align: left; vertical-align: top; padding: 11px 10px; border-bottom: 1px solid var(--filet); }
.texte th { color: var(--encre); }
.texte .tableau { overflow-x: auto; }
.texte .bref { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin: 0 0 30px; }
.texte .bref p { color: var(--encre); }

/* Tes données en bref : de grandes cartes, une idée chacune. */
.cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.carte { background: #fff; border: 1px solid var(--filet); border-radius: 22px; padding: 26px 26px 24px; }
.carte h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; scroll-margin-top: 110px; }
.carte h2 em { color: var(--accent); }
.carte p { margin: 0; color: var(--encre2); font-size: 16.5px; }
.carte.large { grid-column: 1 / -1; background: var(--aubergine); border-color: var(--aubergine); }
.carte.large h2, .carte.large p { color: #fff; }
.carte.large h2 em { color: var(--lilas); }

/* ---------- Avoir Mnésie : choisir son appareil, puis demander ---------- */
.acces { max-width: 720px; margin: 0 auto; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choix button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; min-height: 150px; border-radius: 24px; border: 2px solid var(--filet); background: #fff; color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.choix button:hover { border-color: var(--lilas); }
.choix button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--lilas2); }
.choix b { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; }
.choix span { font-size: 15.5px; color: var(--encre3); }
.choix .etat { margin-top: auto; display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--lilas2); color: var(--accent); font-size: 13px; font-weight: 700; }
.formulaire { margin-top: 26px; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--filet); }
.formulaire h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 34px; }
.formulaire .aide { margin: 6px 0 0; font-size: 14px; color: var(--encre3); }
.champ { margin-top: 18px; }
.champ label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 700; }
.champ input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--filet); background: var(--papier); color: var(--encre); font: inherit; font-size: 17px; }
.champ input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--lilas2); }
.case { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 14px; font-size: 16px; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--accent); }
.erreur { margin: 10px 0 0; color: #B3261E; font-size: 14.5px; }
.formulaire .bouton { width: 100%; margin-top: 18px; }
.legal { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--encre3); }
.legal a { color: var(--accent); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.merci { text-align: center; padding: 20px 0 4px; }
.merci .rond { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--lilas2); color: var(--accent); }
.merci .rond svg { width: 34px; height: 34px; }
.merci h2 { margin: 0 0 8px; }
.merci p { margin: 0 auto 20px; max-width: 460px; color: var(--encre2); }
[hidden] { display: none !important; }

/* ---------- Petits écrans ---------- */
@media (max-width: 900px) {
  .moments { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .sommaire-moments { display: none; }
  .moment { grid-template-columns: 1fr; min-height: 0; gap: 22px; padding: 34px 0; }
  .trois { grid-template-columns: 1fr; gap: 36px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .doc { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .etiquette.et1 { right: 8px; bottom: -18px; }
  .etiquette.et2 { left: 8px; top: -18px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .nav { padding-inline: 10px; }
  .nav-in { padding-left: 14px; gap: 8px; }
  .nav-liens { display: none; }
  .nav .bouton { margin-left: auto; min-height: 44px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
  .nav .langues a { min-width: 30px; font-size: 12px; }
  .nav .langues { margin-left: auto; }
  .hero { padding-top: 48px; }
  .direct { height: 260px; }
  .direct li { flex-direction: column; gap: 6px; }
  .scene { padding: 80px 0 96px; }
  .ecran { border-width: 5px; border-radius: 16px; }
  .etiquette { font-size: 13px; padding: 7px 11px; }
  .cartes, .choix { grid-template-columns: 1fr; }
  .choix button { min-height: 0; }
  .formulaire { padding: 22px; }
  .pied-grille { grid-template-columns: 1fr; gap: 30px; }
  .bande { padding: 110px 0 calc(64px + var(--rayon)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait, .direct li { opacity: 1; transform: none; }
}

/* ---------- Tout ce que fait Mnésie : cinq usages ---------- */
.usages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.usage { position: relative; grid-column: span 2; display: flex; flex-direction: column; min-height: 470px; border-radius: 30px; overflow: hidden; text-decoration: none; color: var(--encre); background: var(--lilas2); isolation: isolate; }
.usage-ecrire, .usage-ecouter { grid-column: span 3; }
.usage-ecouter { background: var(--aubergine); color: #fff; }
.usage-comprendre { background: var(--marque); }
.usage-retenir { background: var(--lilas); }
.usage-partout { background: #fff; }
.usage-partout .usage-fleche { background: var(--papier2); }
.usage-t { display: flex; flex-direction: column; gap: 12px; padding: 30px 74px 26px 30px; }
.usage-nom { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.usage-t b { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.usage-t b em { color: var(--accent); }
.usage-ecouter .usage-t b em { color: var(--lilas); }
.usage-retenir .usage-t b em { color: var(--aubergine); }
.usage-fleche { position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--aubergine); font-size: 20px; transition: transform .3s, background .3s; }
.usage-ecouter .usage-fleche { background: rgba(255, 255, 255, .14); color: #fff; }
.usage-ecrire .usage:hover .usage:hover .usage-fleche { transform: translateX(4px); background: #fff; }
.usage-ecouter:hover .usage-fleche { background: var(--lilas); color: var(--aubergine); }
@media (prefers-reduced-motion: reduce) { .usage-scene, .usage-fleche { transition: none; } .usage:hover .usage-scene, .usage:hover .usage-fleche { transform: none; } .usage-scene * { animation: none !important; } }

/* Les scènes de l'app dans les cartes : fenêtres à taille fixe qui débordent à droite, animées en boucle une fois visibles. */
.usage-scene { position: relative; display: block; height: 300px; margin: auto 0 0 30px; overflow: hidden; border-radius: 16px 0 0 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fen { position: absolute; inset: 0 auto 0 0; width: 560px; padding: 16px 18px; background: #fff; color: #1B1320; border-radius: 16px 0 0 0; box-shadow: 0 18px 50px rgba(58, 23, 72, .22); font-size: 13.5px; line-height: 1.45; text-align: left; }
.fen p { margin: 0; }
.fen mark { background: none; color: inherit; }
.fen .src { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #F1E8F8; color: var(--accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.onglets { display: flex; width: 330px; padding: 3px; border-radius: 10px; background: #F1EDF4; font-size: 12.5px; font-weight: 600; color: #7A6F84; }
.onglets span { flex: 1; padding: 5px 0; text-align: center; border-radius: 8px; }
.onglets .actif { background: #fff; color: #1B1320; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.fen .surligne { background: linear-gradient(var(--marque), var(--marque)) no-repeat 0 60% / 100% 70%; border-radius: 2px; }

/* Écrire : la diapo, le surligneur, l'encre, la note à la main. */
.fen-outils { display: flex; align-items: center; gap: 14px; height: 30px; padding-bottom: 12px; border-bottom: 1px solid #EEE8F2; }
.o { position: relative; width: 18px; height: 18px; border-radius: 5px; }
.o::after { content: ""; position: absolute; inset: 3px 7px; border-radius: 2px; background: #7A6F84; transform: rotate(35deg); }
.o-surligneur::after { inset: 2px 5px; background: #E5C84E; }
.o-gomme::after { inset: 4px 3px; border-radius: 3px; background: #D8CDE0; transform: rotate(-30deg); }
.o-lasso::after { inset: 2px; border: 1.6px dashed #7A6F84; border-radius: 50%; background: none; transform: none; }
.o.actif { background: #EFE4F8; }
.o.actif::after { background: var(--aubergine); }
.pastille { width: 14px; height: 14px; border-radius: 50%; }
.p1 { margin-left: 8px; background: var(--aubergine); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--aubergine); }
.p2 { background: #C2413B; } .p3 { background: #3E6FD8; }
.diapo { position: relative; margin-top: 16px; padding: 18px 22px; height: 230px; border: 1px solid #ECE6F0; border-radius: 6px; }
.d-titre { font-size: 19px; font-weight: 800; color: #1F2A44; }
.d-sous { margin-top: 9px; font-size: 11.5px; color: #8A8295; }
.diapo ul { margin: 14px 0 0; padding-left: 18px; font-size: 13px; color: #2C2633; }
.encre { position: absolute; overflow: visible; }
.encre-titre { left: 0; top: 0; width: 240px; height: 60px; }
.encre-fleche { right: 112px; top: 78px; width: 160px; height: 130px; }
.trait { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 0; }
.note-main { position: absolute; right: 22px; top: 186px; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--accent); white-space: nowrap; }
.usage.vu .fen-ecrire .surligne { animation: surligner 9s ease-out infinite; }
.usage.vu .fen-ecrire .t1 { animation: tracer1 9s ease-out infinite; }
.usage.vu .fen-ecrire .t2 { animation: tracer2 9s ease-out infinite; }
.usage.vu .fen-ecrire .note-main { animation: noter 9s ease-out infinite; }
@keyframes surligner { 0%, 4% { background-size: 0 70%; } 14%, 90% { background-size: 100% 70%; } 97%, 100% { background-size: 100% 70%; opacity: 1; } }
@keyframes tracer1 { 0%, 16% { stroke-dashoffset: 300; } 26%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tracer2 { 0%, 30% { stroke-dashoffset: 300; } 44%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes noter { 0%, 46% { opacity: 0; transform: translateY(4px); } 54%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Écouter : l'enregistrement, l'onde, les phrases qui arrivent reliées à leur diapo. */
.fen-ecouter { background: #fff; }
.rec { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-point { width: 10px; height: 10px; border-radius: 50%; background: #D93A3A; }
.rec-h { color: #D93A3A; font-size: 13px; }
.onde { display: flex; align-items: center; gap: 3px; height: 22px; }
.onde i { width: 3px; height: 100%; border-radius: 2px; background: var(--lilas); transform: scaleY(.35); }
.usage.vu .onde i { animation: onde 1.1s ease-in-out infinite alternate; }
.onde i:nth-child(2n) { animation-delay: -.3s !important; } .onde i:nth-child(3n) { animation-delay: -.6s !important; } .onde i:nth-child(5n) { animation-delay: -.9s !important; }
.usage.vu .rec-point { animation: clignote 1.6s ease-in-out infinite; }
@keyframes onde { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes clignote { 50% { opacity: .3; } }
.ligne { display: grid; grid-template-columns: 62px 1fr; gap: 10px; margin-top: 10px; padding: 9px 10px; max-width: 470px; border-radius: 10px; }
.ligne .h { font-weight: 700; color: #7A6F84; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ligne .h em { display: block; font-style: normal; color: var(--accent); }
.ligne.l3 { background: #F3EAFB; }
.ligne.l3 mark { background: var(--marque); border-radius: 3px; padding: 0 2px; }
.usage.vu .fen-ecouter .l1 { animation: phrase1 9s ease-out infinite; }
.usage.vu .fen-ecouter .l2 { animation: phrase2 9s ease-out infinite; }
.usage.vu .fen-ecouter .l3 { animation: phrase3 9s ease-out infinite; }
@keyframes phrase1 { 0% { opacity: 0; transform: translateY(8px); background: #F3EAFB; } 6%, 28% { opacity: 1; transform: none; background: #F3EAFB; } 34%, 92% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@keyframes phrase2 { 0%, 28% { opacity: 0; transform: translateY(8px); } 34%, 56% { opacity: 1; transform: none; background: #F3EAFB; } 62%, 92% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@keyframes phrase3 { 0%, 56% { opacity: 0; transform: translateY(8px); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Comprendre : l'Essentiel de la diapo, puis une question et sa réponse sourcée. */
.ess-titre { margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7A6F84; }
.ess { width: 330px; margin-top: 6px !important; font-size: 14px; }
.bulle { width: max-content; max-width: 300px; margin-top: 16px; padding: 9px 13px; border-radius: 14px; font-size: 13px; }
.bulle.moi { margin-left: 50px; background: #F1EDF4; border-bottom-right-radius: 4px; }
.bulle.mnesie { background: #F3EAFB; border-bottom-left-radius: 4px; }
.volets { display: grid; }
.volet { grid-area: 1 / 1; }
.v-ess { opacity: 0; }
.usage.vu .fen-comprendre .v-ess { animation: volet-ess 10s ease-in-out infinite; }
.usage.vu .fen-comprendre .v-etu { animation: volet-etu 10s ease-in-out infinite; }
.usage.vu .fen-comprendre .surligne { animation: surligner 10s ease-out infinite; }
.usage.vu .fen-comprendre .o-ess { animation: onglet-ess 10s ease-in-out infinite; }
.usage.vu .fen-comprendre .o-etu { animation: onglet-etu 10s ease-in-out infinite; }
.usage.vu .fen-comprendre .moi { animation: bulle1 10s ease-out infinite; }
.usage.vu .fen-comprendre .mnesie { animation: bulle2 10s ease-out infinite; }
@keyframes volet-ess { 0%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes volet-etu { 0%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes onglet-ess { 0%, 34% { background: #fff; color: #1B1320; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } 38%, 100% { background: transparent; color: #7A6F84; box-shadow: none; } }
@keyframes onglet-etu { 0%, 34% { background: transparent; color: #7A6F84; box-shadow: none; } 38%, 100% { background: #fff; color: #1B1320; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } }
@keyframes bulle1 { 0%, 42% { opacity: 0; transform: translateY(8px); } 50%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bulle2 { 0%, 58% { opacity: 0; transform: translateY(8px); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Retenir : la carte qui se retourne, les notions reliées. */
.fen-retenir { background: #FBF8FD; }
.carte-rev { position: relative; width: 300px; height: 168px; margin-top: 10px; border-radius: 18px; background: #fff; border: 1px solid #ECE3F3; box-shadow: 0 10px 28px rgba(58, 23, 72, .12); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.recto { opacity: 0; }
.c-q { max-width: 220px; font-family: var(--serif); font-size: 25px; line-height: 1.1; }
.c-touche { font-size: 11.5px; color: #8A8295; }
.c-r { font-family: var(--serif); font-size: 32px; color: var(--accent); }
.c-d { font-size: 13px; color: #4D4356; }
.usage.vu .carte-rev { animation: retourne 8s ease-in-out infinite; }
.usage.vu .recto { animation: recto 8s steps(1, end) infinite; }
.usage.vu .verso { animation: verso 8s steps(1, end) infinite; }
@keyframes retourne { 0%, 36% { transform: scaleX(1); } 40% { transform: scaleX(0); } 44%, 86% { transform: scaleX(1); } 90% { transform: scaleX(0); } 94%, 100% { transform: scaleX(1); } }
@keyframes recto { 0% { opacity: 1; } 40% { opacity: 0; } 90% { opacity: 1; } }
@keyframes verso { 0% { opacity: 0; } 40% { opacity: 1; } 90% { opacity: 0; } }
.notions { display: flex; gap: 8px; margin-top: 22px; }
.notions span { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #ECE3F3; font-size: 12.5px; font-weight: 600; }

/* Partout : clair puis sombre, hors connexion puis synchronisé. */
.fen-partout { animation: none; }
.usage.vu .fen-partout { animation: theme 10s ease-in-out infinite; }
.p-haut { display: flex; align-items: center; gap: 12px; }
.p-titre { font-weight: 800; }
.etat { position: relative; display: inline-grid; font-size: 11.5px; font-weight: 700; }
.etat span { grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.e1 { background: #FBE7E7; color: #B3261E; }
.e2 { background: #E3F4EA; color: #1E7A45; opacity: 0; }
.usage.vu .e1 { animation: etat1 10s ease-in-out infinite; }
.usage.vu .e2 { animation: etat2 10s ease-in-out infinite; }
@keyframes etat1 { 0%, 42% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes etat2 { 0%, 42% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }
.p-diapo { display: flex; flex-direction: column; gap: 9px; width: 330px; margin-top: 16px; padding: 18px; border-radius: 8px; background: rgba(127, 127, 140, .08); }
.p-diapo b { font-size: 16px; }
.p-diapo i { height: 7px; border-radius: 4px; background: currentColor; opacity: .18; }
.p-diapo i.court { width: 60%; }
.p-couleurs { display: flex; gap: 12px; margin-top: 18px; }
.p-couleurs b { width: 26px; height: 26px; border-radius: 50%; }
.c1 { background: #74339C; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #74339C; } .c2 { background: #2F6FD6; } .c3 { background: #1F9D6B; } .c4 { background: #D2457B; } .c5 { background: #C98A2B; }
@keyframes theme { 0%, 44% { background: #fff; color: #1B1320; } 50%, 94% { background: #1E1824; color: #F3EDF7; } 100% { background: #fff; color: #1B1320; } }

/* ---------- Une page par usage ---------- */
.surtitre-clair { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lilas); }
.fonctions { display: flex; flex-direction: column; gap: 20px; }
.fonction { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 34px 0; }
.fonction.inverse > :first-child { order: 2; }
.fonction .ecran { border-width: 6px; box-shadow: 0 2px 6px rgba(20, 8, 28, .1), 0 30px 70px rgba(40, 12, 56, .18); }
.fonction h2 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; }
.fonction h2 em { color: var(--accent); }
.fonction p { margin: 0; font-size: 18px; color: var(--encre2); max-width: 440px; }
.bientot-badge { display: inline-flex; margin-bottom: 12px; padding: 3px 12px; border-radius: 999px; background: var(--marque); color: #6B5200; font-size: 13px; font-weight: 700; }
.autres-usages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--filet); }
.autres-usages span { font-weight: 700; color: var(--encre3); margin-right: 6px; }
.autres-usages a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--filet); text-decoration: none; font-weight: 600; }
.autres-usages a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .usages { grid-template-columns: 1fr 1fr; }
  .usage, .usage-ecrire, .usage-ecouter { grid-column: span 1; min-height: 420px; }
  .usage-partout { grid-column: 1 / -1; }
  .fonction, .fonction.inverse { grid-template-columns: 1fr; gap: 20px; }
  .fonction.inverse > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .usages { grid-template-columns: 1fr; }
  .usage-partout { grid-column: auto; }
  .usage, .usage-ecrire, .usage-ecouter { min-height: 0; }
  .usage-scene { margin-top: 8px; height: 300px; }
  .fen { width: 100%; }
  .encre-fleche { display: none; }
}

/* Le Discord : une icône discrète dans la barre, le pied et les appels. */
.nav-discord { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--encre3); }
.nav-discord svg { width: 21px; height: 21px; }
.nav-discord:hover { color: #5865F2; background: var(--papier2); }
.avec-icone { display: inline-flex; align-items: center; gap: 8px; }
.avec-icone svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .nav .nav-discord { width: 36px; } }
.final .sous-bouton .avec-icone { margin-left: 6px; padding: 6px 14px; min-height: 36px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none; }
.final .sous-bouton .avec-icone:hover { background: #5865F2; border-color: #5865F2; }

/* La réécoute en grand, dessinée et animée (remplace la capture de l'accueil). Un cycle de 12 s : trois phrases, un toucher. */
.demo { position: relative; overflow: hidden; border-radius: 24px; background: #fff; color: #1B1320; text-align: left; font-size: 14px; line-height: 1.45; box-shadow: 0 40px 90px rgba(10, 2, 16, .45); }
.demo-haut { display: flex; align-items: center; gap: 12px; padding: 14px 20px 10px; font-size: 14px; }
.demo-retour { color: var(--accent); font-weight: 600; }
.demo-prof { padding: 2px 9px; border-radius: 999px; background: #F1EDF4; font-size: 12px; font-weight: 600; color: #4D4356; }
.demo-lecteur { display: flex; align-items: center; gap: 12px; padding: 8px 20px 12px; border-bottom: 1px solid #EEE8F2; font-size: 12.5px; font-weight: 700; color: #4D4356; font-variant-numeric: tabular-nums; }
.demo-pause { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); flex: none; }
.demo-pause::before, .demo-pause::after { content: ""; position: absolute; top: 10px; width: 3.5px; height: 12px; border-radius: 2px; background: #fff; left: 11px; }
.demo-pause::after { left: 17.5px; }
.demo-temps { display: inline-grid; min-width: 40px; }
.demo-temps .dt { grid-area: 1 / 1; }
.demo-piste { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #ECE6F0; }
.demo-piste i { position: absolute; inset: 0 auto 0 0; width: 55%; border-radius: 3px; background: var(--accent); }
.demo-piste i::after { content: ""; position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--accent); }
.demo-vit { padding: 3px 8px; border-radius: 8px; background: #F1EDF4; color: #1B1320; }
.demo-corps { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); height: 380px; }
.demo-diapo { position: relative; margin: 26px; padding: 26px 30px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #ECE6F0, 0 14px 34px rgba(58, 23, 72, .12); align-self: center; min-height: 250px; }
.demo-corps > .demo-diapo { margin: 0; }
.demo-corps { padding: 0; background: #F3EFF6; }
.demo-corps .demo-diapo { margin: 34px 30px; }
.demo-diapo .d-titre { font-size: 22px; font-weight: 800; color: #1F2A44; }
.demo-diapo .d-sous { margin-top: 6px; font-size: 12.5px; color: #8A8295; }
.demo-diapo ul { margin: 18px 0 0; padding-left: 18px; max-width: 64%; font-size: 14px; color: #2C2633; display: grid; gap: 4px; }
.demo-diapo li { border-radius: 3px; background: linear-gradient(var(--marque), var(--marque)) no-repeat 0 0 / 0 100%; }
.demo-schema { position: absolute; right: 26px; top: 90px; width: 130px; height: 130px; }
.demo-cote { position: relative; background: #fff; padding: 16px; border-left: 1px solid #EEE8F2; }
.demo-cote .onglets { width: auto; margin-bottom: 8px; }
.dl { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 10px; border-radius: 12px; }
.dl .h { font-size: 12.5px; font-weight: 700; color: #7A6F84; font-variant-numeric: tabular-nums; }
.dl .h em { display: block; font-style: normal; color: var(--accent); }
.dl p { margin: 0; font-size: 14px; }
.dl2 { background: #F3EAFB; }
.demo-doigt { position: absolute; left: 40%; top: 160px; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(116, 51, 156, .28); box-shadow: 0 0 0 2px rgba(116, 51, 156, .55); opacity: 0; pointer-events: none; }
.vitrine.vu .dl1 { animation: dl1 12s ease-in-out infinite; }
.vitrine.vu .dl2 { animation: dl2 12s ease-in-out infinite; }
.vitrine.vu .dl3 { animation: dl3 12s ease-in-out infinite; }
.vitrine.vu .dt1 { animation: dt1 12s steps(1, end) infinite; }
.vitrine.vu .dt2 { animation: dt2 12s steps(1, end) infinite; }
.vitrine.vu .dt3 { animation: dt3 12s steps(1, end) infinite; }
.dt1, .dt3 { opacity: 0; }
.vitrine.vu .demo-piste i { animation: piste 12s linear infinite; }
.vitrine.vu .b1 { animation: puce1 12s ease-in-out infinite; }
.vitrine.vu .b2 { animation: puce2 12s ease-in-out infinite; }
.vitrine.vu .demo-doigt { animation: doigt 12s ease-out infinite; }
@keyframes dl1 { 0%, 30% { background: #F3EAFB; } 34%, 100% { background: transparent; } }
@keyframes dl2 { 0%, 30% { background: transparent; } 34%, 63% { background: #F3EAFB; } 67%, 100% { background: transparent; } }
@keyframes dl3 { 0%, 63% { background: transparent; } 67%, 100% { background: #F3EAFB; } }
@keyframes dt1 { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes dt2 { 0% { opacity: 0; } 33.3% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes dt3 { 0% { opacity: 0; } 66.6%, 100% { opacity: 1; } }
@keyframes piste { 0% { width: 38%; } 30% { width: 45%; } 33.3% { width: 47%; } 63% { width: 54%; } 66.6% { width: 56%; } 100% { width: 64%; } }
@keyframes puce1 { 0%, 30% { background-size: 100% 100%; } 34%, 100% { background-size: 0 100%; } }
@keyframes puce2 { 0%, 32% { background-size: 0 100%; } 40%, 100% { background-size: 100% 100%; } }
@keyframes doigt { 0%, 27% { opacity: 0; transform: scale(1.6); } 31% { opacity: 1; transform: scale(1); } 36% { opacity: 0; transform: scale(.8); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo * { animation: none !important; } }
@media (max-width: 760px) {
  .demo-corps { grid-template-columns: 1fr; height: auto; }
  .demo-corps .demo-diapo { margin: 18px; min-height: 0; padding: 18px 20px; }
  .demo-diapo ul { max-width: 100%; font-size: 13px; }
  .demo-schema { display: none; }
  .demo-cote { border-left: 0; border-top: 1px solid #EEE8F2; }
  .demo-fin, .demo-vit, .demo-prof { display: none; }
  .demo-doigt { top: 150px; }
}