/* ==========================================================================
   CAPMEDIA ACADEMY · lecture.css
   L'espace membre. Référence : l'APPLICATION Notion.

   Deux chiffres portent tout le rendu :
     • la colonne de lecture fait exactement 708px
     • les titres ont 40px de marge haute et 8px de marge basse
   Cet écart asymétrique est ce qui crée le rythme du document.

   Dépend de tokens.css puis az.css.
   ========================================================================== */

/* --- Voile de chargement ------------------------------------------------ */
.voile {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  padding: var(--marge-mobile);
  transition: opacity var(--t-apparition), visibility var(--t-apparition);
}
.voile.parti { opacity: 0; visibility: hidden; }

/* --- Agencement --------------------------------------------------------- */
.agencement {
  display: grid;
  grid-template-columns: var(--barre-laterale) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- Barre latérale ----------------------------------------------------- */
.sommaire {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  overflow: hidden;
}
.sommaire-haut {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
}
.sommaire-progression {
  padding: 0 var(--e-4) var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.liens-modules {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-1) var(--e-2) var(--e-5);
  display: flex; flex-direction: column; gap: 2px;
}
.liens-modules .groupe {
  padding: var(--e-4) var(--e-2) var(--e-1);
}
.sommaire-bas {
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: var(--e-1);
}

.bouton-icone {
  display: grid; place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  border-radius: var(--r-1);
  color: var(--texte-2);
  cursor: pointer;
  transition: background var(--t-survol), color var(--t-survol);
}
.bouton-icone:hover { background: var(--survol); color: var(--texte); }
.bouton-icone:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anneau); }

/* --- Barre mobile ------------------------------------------------------- */
.barre-app {
  display: none;
  position: sticky; top: 0; z-index: 60;
  align-items: center; gap: var(--e-3);
  height: 48px;
  padding: 0 var(--e-3);
  background: var(--bg);
  border-bottom: 1px solid var(--trait);
}
.ombre-menu {
  display: none;
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 15, 15, 0.32);
  opacity: 0;
  transition: opacity var(--t-apparition);
}
.mobile-seul { display: none; }

@media (max-width: 900px) {
  .agencement { grid-template-columns: minmax(0, 1fr); }
  .barre-app { display: flex; }
  .mobile-seul { display: grid; }
  .sommaire {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    box-shadow: var(--ombre-flottant);
  }
  .sommaire.ouvert { transform: none; }
  .ombre-menu.actif { display: block; opacity: 1; }
}

/* --- Colonne de lecture ------------------------------------------------- */
.lecture { display: flex; flex-direction: column; min-width: 0; }

.page {
  width: 100%;
  max-width: var(--colonne-lecture);
  margin-inline: auto;
  padding: var(--e-9) var(--marge-mobile) var(--e-6);
  min-height: 50vh;
}
@media (max-width: 900px) { .page { padding-top: var(--e-7); } }

/* Chapeau de module */
.chapeau { display: flex; flex-direction: column; gap: var(--e-3); }
.chapeau .fil { /* .etiquette-mono */ }
.chapeau h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (max-width: 620px) { .chapeau h1 { font-size: 32px; } }
.chapeau .resume { font-size: 18px; line-height: 1.55; color: var(--texte-2); text-wrap: pretty; }
.chapeau .duree  { font-size: 13px; line-height: 1.5; color: var(--texte-3); }
.chapeau + * { margin-top: 0; }
.chapeau-filet { border: 0; border-top: 1px solid var(--trait); margin: var(--e-5) 0 0; }

/* --- Corps du cours ----------------------------------------------------- */
/* Le rythme : 12px entre blocs, 40px au-dessus d'un h2, 8px en dessous. */
.corps > * + * { margin-top: var(--e-3); }

.corps h2 {
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  scroll-margin-top: var(--e-8);
}
.corps h2 + * { margin-top: 0; }

.corps h3 {
  margin-top: 28px;
  margin-bottom: var(--e-2);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  scroll-margin-top: var(--e-8);
}
.corps h3 + * { margin-top: 0; }

.corps h4 {
  margin-top: var(--e-5);
  margin-bottom: var(--e-1);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
}
.corps h4 + * { margin-top: 0; }

.corps p  { font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.corps ul, .corps ol { padding-left: var(--e-5); }
.corps li { margin-block: 6px; font-size: 16px; line-height: 1.65; }
.corps li::marker { color: var(--texte-3); }
.corps strong { font-weight: 600; }

.corps blockquote {
  border-left: 2px solid var(--trait-fort);
  padding-left: var(--e-4);
  color: var(--texte-2);
}
.corps hr { border: 0; border-top: 1px solid var(--trait); margin-block: var(--e-6); }

.corps figure { margin-block: var(--e-4); }
.corps figure img { width: 100%; border-radius: var(--r-2); }
.corps figcaption {
  margin-top: var(--e-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte-3);
  text-align: center;
}
.emplacement-visuel {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e-1);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-2);
  border: 1px dashed var(--trait-fort);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px,
      var(--survol) 12px, var(--survol) 13px),
    var(--bg-2);
  color: var(--texte-3);
  text-align: center;
  padding: var(--e-5);
}
.emplacement-visuel .ev-ico  { font-size: 22px; opacity: 0.7; }
.emplacement-visuel .ev-nom  { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.emplacement-visuel .ev-desc { font-size: 13px; line-height: 1.5; color: var(--texte-3); max-width: 44ch; }

/* --- Bloc « module terminé » -------------------------------------------- */
.bloc-fini {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  background: var(--bg-2);
  border-radius: var(--r-3);
  padding: var(--e-4) var(--e-5);
  margin-top: var(--e-7);
}

/* --- Pagination --------------------------------------------------------- */
.pagination {
  width: 100%;
  max-width: var(--colonne-lecture);
  margin-inline: auto;
  padding: 0 var(--marge-mobile) var(--e-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.pagination a {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  text-decoration: none;
  color: var(--texte);
  transition: background var(--t-survol), border-color var(--t-survol);
}
.pagination a:hover { background: var(--survol); border-color: var(--trait-fort); text-decoration: none; color: var(--texte); }
.pagination a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anneau); }
.pagination .sens  { font-size: 12px; line-height: 1.4; color: var(--texte-3); }
.pagination .titre { font-size: 14px; line-height: 1.4; font-weight: 600; }
.pagination a.droite { text-align: right; }
.pagination .vide { visibility: hidden; }
@media (max-width: 560px) { .pagination { grid-template-columns: 1fr; } }

/* --- Pied de lecture ---------------------------------------------------- */
.pied-lecture {
  border-top: 1px solid var(--trait);
  padding: var(--e-5) var(--marge-mobile);
  text-align: center;
  font-size: 12px;
  color: var(--texte-3);
}

/* --- Squelette de chargement -------------------------------------------- */
.squelette { display: flex; flex-direction: column; gap: var(--e-3); }
.squelette span {
  display: block;
  height: 16px;
  border-radius: var(--r-1);
  background: var(--bg-3);
  animation: pulse 1.4s ease-in-out infinite;
}
.squelette span:nth-child(1) { width: 30%; height: 12px; }
.squelette span:nth-child(2) { width: 80%; height: 40px; margin-bottom: var(--e-2); }
.squelette span:nth-child(3) { width: 100%; }
.squelette span:nth-child(4) { width: 96%; }
.squelette span:nth-child(5) { width: 62%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* --- Accueil de la formation ------------------------------------------- */
.frise {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: var(--e-2);
}
.frise .cran {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-rond);
  font-family: var(--police-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-3);
  color: var(--texte-3);
}
.frise .cran--fait  { background: var(--voile-vert); color: var(--valide); }
.frise .cran--actif { background: var(--bg); box-shadow: inset 0 0 0 2px var(--action); color: var(--texte); }

.lien-nu {
  border: 0; background: none; padding: 0;
  color: var(--texte-2);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lien-nu:hover { color: var(--texte); }

/* --- Déblocage progressif ------------------------------------------------ */
/* Bloqué par la progression : grisé, mais visible : le parcours se lit. */
.lien-module.est-bloque {
  color: var(--texte-3);
  cursor: pointer;                 /* cliquable : on explique pourquoi c'est fermé */
}
.lien-module.est-bloque .num { color: var(--texte-3); }
.lien-module.est-bloque:hover { background: transparent; color: var(--texte-3); }

/* Le « plouf » : une ligne qui vient de se débloquer */
@keyframes plouf {
  0%   { transform: scale(0.94); background: var(--voile-vert); opacity: 0.4; }
  55%  { transform: scale(1.03); background: var(--voile-vert); opacity: 1; }
  100% { transform: none; background: transparent; }
}
.lien-module.plouf { animation: plouf 550ms cubic-bezier(.2, .8, .2, 1); }

/* Le refus : clic sur un module encore fermé */
@keyframes refus {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.lien-module.refus { animation: refus 220ms ease-in-out; }

/* Pagination vers un module encore fermé */
.pagination-verrou {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-3);
  color: var(--texte-3);
}
.pagination-verrou .sens  { font-size: 12px; line-height: 1.4; }
.pagination-verrou .titre { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--texte-2); }
.pagination-verrou.droite { text-align: right; }

/* --- Carte prompt (mode avec IA) ------------------------------------------ */
.prompt {
  background: var(--voile-bleu);
  border-radius: var(--r-2);
  margin-block: var(--e-3);
  overflow: hidden;
}
.prompt > summary {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-survol);
}
.prompt > summary::-webkit-details-marker { display: none; }
.prompt > summary::marker { content: ""; }
.prompt > summary:hover { background: var(--survol); }
.prompt > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--anneau); }
.prompt .prompt-ico { flex: none; color: var(--action); }
.prompt .prompt-titre { flex: 1; min-width: 0; }
.prompt .prompt-indice {
  flex: none;
  font-weight: 500; font-size: 11px;
  color: var(--texte-3);
}
.prompt[open] .prompt-indice { visibility: hidden; }
.prompt .prompt-corps { padding: 0 var(--e-2) var(--e-2); animation: deplie-prompt 200ms cubic-bezier(.2,.8,.2,1); }
@keyframes deplie-prompt { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.prompt pre { margin: 0; background: var(--bg); }
.prompt .bloc-code { margin: 0; }
.prompt .copier { opacity: 1; }             /* toujours visible dans un prompt */

/* Animation du bouton Copier au moment de la copie */
.copier { transition: opacity var(--t-apparition), color var(--t-survol),
                      background var(--t-apparition), transform var(--t-apparition); }
.copier[data-copie] {
  background: var(--voile-vert);
  color: var(--texte);
  border-color: transparent;
  transform: scale(1.06);
}

/* Trace discrète d'un prompt masqué (mode sans IA) */
.prompt-alt {
  font-size: 12px;
  color: var(--texte-3);
  border-left: 2px solid var(--trait);
  padding-left: var(--e-3);
}

/* --- Questionnaire et réglages -------------------------------------------- */
.surcouche {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  background: rgba(15, 15, 15, 0.4);
  padding: var(--marge-mobile);
  animation: fondu-surcouche 160ms ease-out;
}
@keyframes fondu-surcouche { from { opacity: 0; } }
.panneau {
  background: var(--bg);
  border-radius: var(--r-3);
  box-shadow: var(--ombre-flottant);
  width: 100%; max-width: 460px;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pan-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-3);
}
.pan-corps {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--e-5);
}
.pan-pied {
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-top: 1px solid var(--trait);
  background: var(--bg);
}

/* Choix segmenté du profil, façon sélecteur Notion */
.seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 2px;
  background: var(--bg-2);
  border-radius: var(--r-3);
  padding: 3px;
}
.seg button {
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--texte-2);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 7px 8px;
  cursor: pointer;
  transition: background var(--t-survol), color var(--t-survol), box-shadow var(--t-survol);
}
.seg button:hover { color: var(--texte); }
.seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anneau); }
.seg button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--texte);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--trait), 0 1px 2px rgba(15, 15, 15, 0.08);
}

/* Une question du profil : icône, libellé, choix */
.q-profil {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding-block: var(--e-4);
  border-top: 1px solid var(--trait);
}
.q-profil:first-child { border-top: 0; padding-top: var(--e-2); }
.q-tete { display: flex; gap: var(--e-3); align-items: flex-start; }
.q-ico {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border-radius: var(--r-2);
  font-size: 14px; line-height: 1;
}

/* --- Toast ----------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 200;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  background: var(--texte);
  color: var(--bg);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 10px 16px;
  border-radius: var(--r-2);
  box-shadow: var(--ombre-flottant);
  max-width: min(420px, calc(100vw - 48px));
  text-align: center;
  pointer-events: none;
  transition: opacity var(--t-apparition), transform var(--t-apparition);
}
.toast.visible { opacity: 1; transform: translateX(-50%); }

/* --- Blocs de code premium ------------------------------------------------ */
.bloc-code {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-3);
  margin-block: var(--e-3);
}
.bloc-code-tete {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--trait);
}
.bloc-code-tete .points { display: inline-flex; gap: 5px; }
.bloc-code-tete .points i {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--trait-fort);
  display: inline-block;
}
.bloc-code-langue {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--texte-3);
}
.bloc-code pre { margin: 0; border-radius: 0; background: transparent; }
.bloc-code .copier {
  position: static;
  margin-left: auto;
  opacity: 1;
  display: inline-flex; align-items: center; gap: 5px;
}
.bloc-code-nu { background: transparent; overflow: visible; }
.bloc-code-nu pre { border-radius: var(--r-2); background: var(--bg-3); }
.bloc-code-nu .copier { position: absolute; top: var(--e-2); right: var(--e-2); }
.prompt .bloc-code-nu .copier { opacity: 1; }
.copier .ico { flex: none; }

/* --- Icônes en général ----------------------------------------------------- */
.ico { display: inline-block; vertical-align: -0.15em; flex: none; }
.encadre .marqueur { display: grid; place-items: center; width: 20px; height: 26px; color: var(--texte-2); }
.encadre--astuce    .marqueur { color: var(--action); }
.encadre--attention .marqueur { color: #B8860B; }
.encadre--piege     .marqueur { color: var(--danger); }
.encadre--action    .marqueur { color: var(--valide); }
.lien-module .num .ico { vertical-align: -0.1em; }
.emplacement-visuel .ev-ico { color: var(--texte-3); font-size: 0; }

/* --- Onglets du panneau support -------------------------------------------- */
.onglets {
  display: flex; gap: var(--e-1);
  padding: 0 var(--e-5);
  border-bottom: 1px solid var(--trait);
}
.onglets [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent;
  padding: 10px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--texte-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-survol), border-color var(--t-survol);
}
.onglets [role="tab"]:hover { color: var(--texte); }
.onglets [role="tab"][aria-selected="true"] {
  color: var(--texte);
  font-weight: 600;
  border-bottom-color: var(--action);
}

/* --- Le chat ---------------------------------------------------------------- */
.notice-chat {
  display: flex; gap: var(--e-2); align-items: flex-start;
  background: var(--voile-bleu);
  border-radius: var(--r-2);
  padding: var(--e-3);
  margin-block: var(--e-3);
}
.notice-chat .marqueur { color: var(--action); padding-top: 1px; }
.fil-chat {
  display: flex; flex-direction: column; gap: var(--e-2);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--e-2);
}
.bulle {
  max-width: 86%;
  border-radius: var(--r-3);
  padding: 8px 12px;
}
.bulle p { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.bulle-moi   { align-self: flex-end;   background: var(--voile-bleu); }
.bulle-nadir { align-self: flex-start; background: var(--bg-2); }
.envoi-chat { display: flex; flex-direction: column; gap: var(--e-2); padding-block: var(--e-2) var(--e-4); }
.envoi-chat textarea { resize: vertical; min-height: 64px; }
.envoi-chat .btn { display: inline-flex; align-items: center; gap: 6px; }

/* --- Étoiles d'avis ----------------------------------------------------------- */
.choix-etoiles { display: flex; gap: 4px; }
.etoile-btn {
  border: 0; background: transparent; padding: 2px;
  color: var(--trait-fort);
  cursor: pointer;
  transition: color var(--t-survol), transform var(--t-survol);
}
.etoile-btn:hover { transform: scale(1.08); }
.etoile-btn.active { color: #E7B93C; }
.rang-etoiles { display: inline-flex; gap: 2px; color: #E7B93C; }

/* --- Protection du contenu ------------------------------------------------------ */
/* Le texte du cours ne se sélectionne pas ; le code et les prompts, si. */
.corps { -webkit-user-select: none; user-select: none; }
.corps pre, .corps code, .corps .prompt,
.corps input, .corps textarea { -webkit-user-select: text; user-select: text; }

/* Filigrane : l'adresse de l'acheteur, répétée en diagonale, à peine là. */
.filigrane {
  position: absolute; inset: 0;
  overflow: hidden;          /* la nappe tournée est découpée ici, */
  pointer-events: none;      /* elle ne peut plus étirer la page   */
  z-index: 5;
  opacity: 0.028;
}
.filigrane .nappe {
  position: absolute; inset: -25%;
  display: flex; flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  gap: 96px;
  transform: rotate(-24deg);
}
[data-theme="dark"] .filigrane { opacity: 0.045; }
.filigrane span {
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
  color: var(--texte);
}
.lecture { position: relative; overflow: clip; }

/* Impression : le cours ne sort pas sur papier. */
@media print {
  .agencement, .barre-app { display: none !important; }
  body::after {
    content: "Formation Capmedia Academy · contenu protégé, réservé à un usage personnel en ligne.";
    display: block;
    padding: 48px 24px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Passe premium : matière, rythme, micro-détails.
   Toujours dans la retenue Notion : rien qui brille, tout qui respire.
   ========================================================================== */

/* --- Barres de défilement fines, partout ---------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--trait-fort) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--trait-fort);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--texte-3); background-clip: content-box; }

/* --- Barre de progression de lecture, un cheveu sous le bord --------------- */
.barre-lecture {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 90;
  pointer-events: none;
}
.barre-lecture span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--action);
  transition: width 80ms linear;
}

/* --- Entrée du contenu : un souffle, pas un effet ---------------------------- */
.page-entree .corps, .page-entree .chapeau {
  animation: entree-page 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.page-entree .corps { animation-delay: 40ms; }
@keyframes entree-page {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Chapeau : la ligne de métadonnées ---------------------------------------- */
.chapeau .etiquette-mono .sep { color: var(--trait-fort); padding-inline: 2px; }
.chapeau h1 { margin-top: 2px; }

/* --- La colonne : détails de lecture ------------------------------------------ */
.corps ::selection { background: var(--anneau); }
.corps a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.corps table tbody tr { transition: background var(--t-survol); }
.corps table tbody tr:hover { background: var(--survol); }
.corps blockquote {
  border-left: 2px solid var(--action);
  background: var(--bg-2);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--e-3) var(--e-4);
  font-style: normal;
  color: var(--texte-2);
}
.corps kbd {
  color: var(--texte);
  background: var(--bg);
  border: 1px solid var(--trait-fort);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  padding: 1px 6px;
  font-size: 0.82em;
}

/* Les titres portent un fil discret qui structure la page au défilement */
.corps h2 {
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--trait);
}

/* --- Encadrés : le marqueur dans une pastille teintée -------------------------- */
.encadre { border-radius: var(--r-3); padding: var(--e-4) var(--e-4) var(--e-4) var(--e-3); }
.encadre .marqueur {
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .encadre .marqueur { background: rgba(0, 0, 0, 0.22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .encadre .marqueur { background: rgba(0, 0, 0, 0.22); }
}

/* --- Cartes prompt : l'icône dans sa pastille, le corps qui respire ------------ */
.prompt { border-radius: var(--r-3); }
.prompt > summary { padding: var(--e-3) var(--e-4); gap: var(--e-3); }
.prompt .prompt-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.6);
  color: var(--action);
}
[data-theme="dark"] .prompt .prompt-ico { background: rgba(0, 0, 0, 0.25); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .prompt .prompt-ico { background: rgba(0, 0, 0, 0.25); }
}

/* --- Le sommaire : plus de tenue ------------------------------------------------ */
.liens-modules .groupe {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding-top: var(--e-5);
}
.lien-module { min-height: 30px; }
.lien-module .num { display: inline-flex; justify-content: center; }
.lien-module[aria-current="true"] {
  box-shadow: inset 2px 0 0 var(--action);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.sommaire-bas #email-membre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; max-width: 100%;
}

/* --- Pagination : des cartes qui invitent ---------------------------------------- */
.pagination a .sens::before, .pagination a.droite .sens::after {
  content: "→";
  display: inline-block;
  transition: transform var(--t-apparition);
}
.pagination a .sens::before { content: "←"; margin-right: 5px; }
.pagination a.droite .sens::before { content: none; }
.pagination a.droite .sens::after { margin-left: 5px; }
.pagination a:hover .sens::before { transform: translateX(-2px); }
.pagination a.droite:hover .sens::after { transform: translateX(2px); }

/* --- Le bloc de fin de module ------------------------------------------------------ */
.bloc-fini {
  border: 1px solid var(--trait);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.03);
}
.bloc-fini .btn { display: inline-flex; align-items: center; gap: 7px; }

/* --- Boutons : la fermeté du clic ---------------------------------------------------- */
.btn:active { transform: translateY(0.5px); }
.btn-principal { box-shadow: 0 1px 2px rgba(15, 15, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* --- Squelette : un balayage plutôt qu'un clignotement -------------------------------- */
.squelette span {
  animation: none;
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-2) 45%, var(--bg-3) 65%);
  background-size: 200% 100%;
  animation: balayage 1.2s ease-in-out infinite;
}
@keyframes balayage { from { background-position: 180% 0; } to { background-position: -20% 0; } }

@media (prefers-reduced-motion: reduce) {
  .page-entree .corps, .page-entree .chapeau, .squelette span { animation: none; }
}


/* ==========================================================================
   Full radius (décision client : Apple / Revolut) dans l'espace membre
   ========================================================================== */
.seg { border-radius: var(--r-rond); padding: 3px; }
.seg button { border-radius: var(--r-rond); }
.onglets [role="tab"] { border-radius: var(--r-rond) var(--r-rond) 0 0; }
.pastille { border-radius: var(--r-rond); }
.copier { border-radius: var(--r-rond); }
.etoile-btn { border-radius: var(--r-rond); }
.bloc-code .copier { border-radius: var(--r-rond); }
.pagination a { border-radius: var(--r-3); }

/* Le sélecteur de thème du sommaire, compact et pill */
.sommaire-bas .selecteur-theme { border-radius: var(--r-rond); }
.sommaire-bas .selecteur-theme button { border-radius: var(--r-rond); }